mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-15 04:29:37 +01:00
78 lines
2.3 KiB
Vue
78 lines
2.3 KiB
Vue
<script lang="ts">
|
|
import { tv, type VariantProps } from 'tailwind-variants'
|
|
import type { SeparatorProps as _SeparatorProps } from 'radix-vue'
|
|
import type { AppConfig } from '@nuxt/schema'
|
|
import _appConfig from '#build/app.config'
|
|
import theme from '#build/ui/separator'
|
|
import type { AvatarProps } from '../types'
|
|
|
|
const appConfig = _appConfig as AppConfig & { ui: { separator: Partial<typeof theme> } }
|
|
|
|
const separator = tv({ extend: tv(theme), ...(appConfig.ui?.separator || {}) })
|
|
|
|
type SeparatorVariants = VariantProps<typeof separator>
|
|
|
|
export interface SeparatorProps extends Omit<_SeparatorProps, 'asChild' | 'orientation'> {
|
|
/** Display a label in the middle. */
|
|
label?: string
|
|
/** Display an icon in the middle. */
|
|
icon?: string
|
|
/** Display an avatar in the middle. */
|
|
avatar?: AvatarProps
|
|
color?: SeparatorVariants['color']
|
|
size?: SeparatorVariants['size']
|
|
type?: SeparatorVariants['type']
|
|
/**
|
|
* The orientation of the separator.
|
|
* @defaultValue `'horizontal'`
|
|
*/
|
|
orientation?: _SeparatorProps['orientation']
|
|
class?: any
|
|
ui?: Partial<typeof separator.slots>
|
|
}
|
|
|
|
export interface SeparatorSlots {
|
|
default(): any
|
|
}
|
|
</script>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { Separator, useForwardProps } from 'radix-vue'
|
|
import { reactivePick } from '@vueuse/core'
|
|
import { UAvatar, UIcon } from '#components'
|
|
|
|
const props = withDefaults(defineProps<SeparatorProps>(), {
|
|
as: 'div',
|
|
orientation: 'horizontal'
|
|
})
|
|
const slots = defineSlots<SeparatorSlots>()
|
|
|
|
const rootProps = useForwardProps(reactivePick(props, 'as', 'decorative', 'orientation'))
|
|
|
|
const ui = computed(() => tv({ extend: separator, slots: props.ui })({
|
|
color: props.color,
|
|
orientation: props.orientation,
|
|
size: props.size,
|
|
type: props.type
|
|
}))
|
|
</script>
|
|
|
|
<template>
|
|
<Separator v-bind="rootProps" :class="ui.root({ class: props.class })">
|
|
<div :class="ui.border()" />
|
|
|
|
<template v-if="label || icon || avatar || !!slots.default">
|
|
<div :class="ui.container()">
|
|
<slot>
|
|
<span v-if="label" :class="ui.label()">{{ label }}</span>
|
|
<UIcon v-else-if="icon" :name="icon" :class="ui.icon()" />
|
|
<UAvatar v-else-if="avatar" size="2xs" v-bind="avatar" :class="ui.avatar()" />
|
|
</slot>
|
|
</div>
|
|
|
|
<div :class="ui.border()" />
|
|
</template>
|
|
</Separator>
|
|
</template>
|