feat: Update reka-ui dependency and add new UI components
- Upgrade reka-ui to version 2.4.1 in package.json and package-lock.json for improved features and bug fixes. - Introduce new Checkbox, HoverCard, Popover, Progress, RadioGroup, Separator, Skeleton, Slider, Switch, Tooltip components to enhance UI functionality. - Ensure all new components utilize reactive props and maintain consistent styling with utility classes.
This commit is contained in:
parent
98bd504333
commit
2fc87fa032
31 changed files with 524 additions and 5 deletions
28
src/components/ui/separator/Separator.vue
Normal file
28
src/components/ui/separator/Separator.vue
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { reactiveOmit } from '@vueuse/core'
|
||||
import { Separator, type SeparatorProps } from 'reka-ui'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = withDefaults(defineProps<
|
||||
SeparatorProps & { class?: HTMLAttributes['class'] }
|
||||
>(), {
|
||||
orientation: 'horizontal',
|
||||
decorative: true,
|
||||
})
|
||||
|
||||
const delegatedProps = reactiveOmit(props, 'class')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Separator
|
||||
data-slot="separator-root"
|
||||
v-bind="delegatedProps"
|
||||
:class="
|
||||
cn(
|
||||
`bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px`,
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
1
src/components/ui/separator/index.ts
Normal file
1
src/components/ui/separator/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { default as Separator } from './Separator.vue'
|
||||
Loading…
Add table
Add a link
Reference in a new issue