arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-17 05:28:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(module)!: use tailwind-merge for app.config & move config to components & type props (#692)

Browse Source 
Co-authored-by: Pooya Parsa <pooya@pi0.io>
This commit is contained in:
Benjamin Canac
2023-09-20 18:07:51 +02:00
committed by GitHub
parent 2c98628f98
commit 34d2f57801
59 changed files with 835 additions and 882 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/runtime/components/data/Table.vue
View File

@@ -1,5 +1,5 @@
<template>
<div :class="wrapperClass" v-bind="attrs">
<div :class="ui.wrapper" v-bind="attrs">
<table :class="[ui.base, ui.divide]">
<thead :class="ui.thead">
<tr :class="ui.tr.base">
@@ -71,19 +71,17 @@ import { ref, computed, defineComponent, toRaw } from 'vue'
import type { PropType } from 'vue'
import { upperFirst } from 'scule'
import { defu } from 'defu'
import { twMerge } from 'tailwind-merge'
import { omit, get } from '../../utils/lodash'
import { defuTwMerge } from '../../utils'
import UButton from '../elements/Button.vue'
import UIcon from '../elements/Icon.vue'
import UCheckbox from '../forms/Checkbox.vue'
import type { Button } from '../../types/button'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig, omit, get } from '../../utils'
import type { Strategy, Button } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { table } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof table>(appConfig.ui.strategy, appConfig.ui.table, table)
function defaultComparator<T> (a: T, z: T): boolean {
return a === z
@@ -123,15 +121,15 @@ export default defineComponent({
},
sortButton: {
type: Object as PropType<Button>,
default: () => appConfig.ui.table.default.sortButton
default: () => config.default.sortButton as Button
},
sortAscIcon: {
type: String,
default: () => appConfig.ui.table.default.sortAscIcon
default: () => config.default.sortAscIcon
},
sortDescIcon: {
type: String,
default: () => appConfig.ui.table.default.sortDescIcon
default: () => config.default.sortDescIcon
},
loading: {
type: Boolean,
@@ -139,25 +137,20 @@ export default defineComponent({
},
loadingState: {
type: Object as PropType<{ icon: string, label: string }>,
default: () => appConfig.ui.table.default.loadingState
default: () => config.default.loadingState
},
emptyState: {
type: Object as PropType<{ icon: string, label: string }>,
default: () => appConfig.ui.table.default.emptyState
default: () => config.default.emptyState
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.table>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue'],
setup (props, { emit, attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.table>>(() => defuTwMerge({}, props.ui, appConfig.ui.table))
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
setup (props, { emit, attrs: $attrs }) {
const { ui, attrs } = useUI('table', props.ui, config, { mergeWrapper: true })
const columns = computed(() => props.columns ?? Object.keys(omit(props.rows[0] ?? {}, ['click'])).map((key) => ({ key, label: upperFirst(key), sortable: false })))
@@ -238,12 +231,12 @@ export default defineComponent({
}
function onSelect (row) {
if (!attrs.onSelect) {
if (!$attrs.onSelect) {
return
}
// @ts-ignore
attrs.onSelect(row)
$attrs.onSelect(row)
}
function selectAllRows () {
@@ -254,7 +247,7 @@ export default defineComponent({
}
// @ts-ignore
attrs.onSelect ? attrs.onSelect(row) : selected.value.push(row)
$attrs.onSelect ? $attrs.onSelect(row) : selected.value.push(row)
})
}
@@ -271,10 +264,9 @@ export default defineComponent({
}
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
wrapperClass,
attrs,
// eslint-disable-next-line vue/no-dupe-keys
sort,
// eslint-disable-next-line vue/no-dupe-keys

38
src/runtime/components/elements/Accordion.vue
View File

@@ -1,5 +1,5 @@
<template>
<div :class="wrapperClass">
<div :class="ui.wrapper">
<HDisclosure v-for="(item, index) in items" v-slot="{ open, close }" :key="index" :default-open="defaultOpen || item.defaultOpen">
<HDisclosureButton :ref="() => buttonRefs[index] = close" as="template" :disabled="item.disabled">
<slot :item="item" :index="index" :open="open" :close="close">
@@ -43,17 +43,19 @@
import { ref, computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel } from '@headlessui/vue'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import UButton from '../elements/Button.vue'
import { defuTwMerge } from '../../utils'
import { useUI } from '../../composables/useUI'
import { mergeConfig, omit } from '../../utils'
import StateEmitter from '../../utils/StateEmitter'
import type { AccordionItem } from '../../types/accordion'
import { useAppConfig } from '#imports'
// TODO: Remove
import type { AccordionItem, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { accordion, button } from '#ui/ui.config'
const config = mergeConfig<typeof accordion>(appConfig.ui.strategy, appConfig.ui.accordion, accordion)
const configButton = mergeConfig<typeof button>(appConfig.ui.strategy, appConfig.ui.button, button)
export default defineComponent({
components: {
@@ -76,30 +78,25 @@ export default defineComponent({
},
openIcon: {
type: String,
default: () => appConfig.ui.accordion.default.openIcon
default: () => config.default.openIcon
},
closeIcon: {
type: String,
default: () => appConfig.ui.accordion.default.closeIcon
default: () => config.default.closeIcon
},
multiple: {
type: Boolean,
default: false
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.accordion>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
setup (props) {
const { ui, attrs } = useUI('accordion', props.ui, config, { mergeWrapper: true })
const ui = computed<Partial<typeof appConfig.ui.accordion>>(() => defuTwMerge({}, props.ui, appConfig.ui.accordion))
const uiButton = computed<Partial<typeof appConfig.ui.button>>(() => appConfig.ui.button)
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
const uiButton = computed<Partial<typeof configButton>>(() => configButton)
const buttonRefs = ref<Function[]>([])
@@ -139,11 +136,10 @@ export default defineComponent({
}
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
uiButton,
wrapperClass,
attrs,
buttonRefs,
closeOthers,
omit,

46
src/runtime/components/elements/Alert.vue
View File

@@ -38,16 +38,15 @@ import { twMerge, twJoin } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import UAvatar from '../elements/Avatar.vue'
import UButton from '../elements/Button.vue'
import type { Avatar } from '../../types/avatar'
import type { Button } from '../../types/button'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import type { Avatar, Button, NestedKeyOf, Strategy } from '../../types'
import { mergeConfig } from '../../utils'
// @ts-expect-error
import appConfig from '#build/app.config'
import { omit } from '../../utils/lodash'
import { alert } from '#ui/ui.config'
import colors from '#ui-colors'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof alert>(appConfig.ui.strategy, appConfig.ui.alert, alert)
export default defineComponent({
components: {
@@ -67,7 +66,7 @@ export default defineComponent({
},
icon: {
type: String,
default: () => appConfig.ui.alert.default.icon
default: () => config.default.icon
},
avatar: {
type: Object as PropType<Avatar>,
@@ -75,40 +74,37 @@ export default defineComponent({
},
closeButton: {
type: Object as PropType<Button>,
default: () => appConfig.ui.alert.default.closeButton
default: () => config.default.closeButton as Button
},
actions: {
type: Array as PropType<(Button & { click?: Function })[]>,
default: () => []
},
color: {
type: String,
default: () => appConfig.ui.alert.default.color,
type: String as PropType<keyof typeof config.color | typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.alert.color)].includes(value)
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String,
default: () => appConfig.ui.alert.default.variant,
type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
default: () => config.default.variant,
validator (value: string) {
return [
...Object.keys(appConfig.ui.alert.variant),
...Object.values(appConfig.ui.alert.color).flatMap(value => Object.keys(value))
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
].includes(value)
}
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.alert>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['close'],
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.alert>>(() => defuTwMerge({}, props.ui, appConfig.ui.alert))
setup (props) {
const { ui, attrs, attrsClass } = useUI('alert', props.ui, config)
const alertClass = computed(() => {
const variant = ui.value.color?.[props.color as string]?.[props.variant as string] || ui.value.variant[props.variant]
@@ -119,13 +115,13 @@ export default defineComponent({
ui.value.shadow,
ui.value.padding,
variant?.replaceAll('{color}', props.color)
), attrs.class as string)
), attrsClass)
})
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
alertClass
}
}

46
src/runtime/components/elements/Avatar.vue
View File

@@ -24,13 +24,14 @@ import { defineComponent, ref, computed, watch } from 'vue'
import type { PropType } from 'vue'
import { twMerge, twJoin } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { AvatarSize, AvatarChipColor, AvatarChipPosition, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { omit } from '../../utils/lodash'
// const appConfig = useAppConfig()
import { avatar } from '#ui/ui.config'
const config = mergeConfig<typeof avatar>(appConfig.ui.strategy, appConfig.ui.avatar, avatar)
export default defineComponent({
components: {
@@ -52,27 +53,27 @@ export default defineComponent({
},
icon: {
type: String,
default: () => appConfig.ui.avatar.default.icon
default: () => config.default.icon
},
size: {
type: String,
default: () => appConfig.ui.avatar.default.size,
type: String as PropType<AvatarSize>,
default: () => config.default.size,
validator (value: string) {
return Object.keys(appConfig.ui.avatar.size).includes(value)
return Object.keys(config.size).includes(value)
}
},
chipColor: {
type: String,
default: () => appConfig.ui.avatar.default.chipColor,
type: String as PropType<AvatarChipColor>,
default: () => config.default.chipColor,
validator (value: string) {
return ['gray', ...appConfig.ui.colors].includes(value)
}
},
chipPosition: {
type: String,
default: () => appConfig.ui.avatar.default.chipPosition,
type: String as PropType<AvatarChipPosition>,
default: () => config.default.chipPosition,
validator (value: string) {
return Object.keys(appConfig.ui.avatar.chip.position).includes(value)
return Object.keys(config.chip.position).includes(value)
}
},
chipText: {
@@ -84,15 +85,12 @@ export default defineComponent({
default: ''
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.avatar>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.avatar>>(() => defuTwMerge({}, props.ui, appConfig.ui.avatar))
setup (props) {
const { ui, attrs, attrsClass } = useUI('avatar', props.ui, config)
const url = computed(() => {
if (typeof props.src === 'boolean') {
@@ -111,7 +109,7 @@ export default defineComponent({
(error.value || !url.value) && ui.value.background,
ui.value.rounded,
ui.value.size[props.size]
), attrs.class as string)
), attrsClass)
})
const imgClass = computed(() => {
@@ -150,7 +148,9 @@ export default defineComponent({
}
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
wrapperClass,
// eslint-disable-next-line vue/no-dupe-keys
imgClass,

35
src/runtime/components/elements/AvatarGroup.ts
View File

@@ -1,24 +1,26 @@
import { h, cloneVNode, computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { defuTwMerge, getSlotsChildren } from '../../utils'
import Avatar from './Avatar.vue'
import { useAppConfig } from '#imports'
// TODO: Remove
import UAvatar from './Avatar.vue'
import { useUI } from '../../composables/useUI'
import { mergeConfig, getSlotsChildren } from '../../utils'
import type { AvatarSize, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { avatar, avatarGroup } from '#ui/ui.config'
// const appConfig = useAppConfig()
const avatarConfig = mergeConfig<typeof avatar>(appConfig.ui.strategy, appConfig.ui.avatar, avatar)
const avatarGroupConfig = mergeConfig<typeof avatarGroup>(appConfig.ui.strategy, appConfig.ui.avatarGroup, avatarGroup)
export default defineComponent({
inheritAttrs: false,
props: {
size: {
type: String,
type: String as PropType<keyof typeof avatarConfig.size>,
default: null,
validator (value: string) {
return Object.keys(appConfig.ui.avatar.size).includes(value)
return Object.keys(avatarConfig.size).includes(value)
}
},
max: {
@@ -26,15 +28,12 @@ export default defineComponent({
default: null
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.avatarGroup>>,
default: () => ({})
type: Object as PropType<Partial<typeof avatarGroupConfig & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs, slots }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.avatarGroup>>(() => defuTwMerge({}, props.ui, appConfig.ui.avatarGroup))
setup (props, { slots }) {
const { ui, attrs } = useUI('avatarGroup', props.ui, avatarGroupConfig, { mergeWrapper: true })
const children = computed(() => getSlotsChildren(slots))
@@ -55,8 +54,8 @@ export default defineComponent({
}
if (max.value !== undefined && index === max.value) {
return h(Avatar, {
size: props.size || appConfig.ui.avatar.default.size,
return h(UAvatar, {
size: props.size || (avatarConfig.default.size as AvatarSize),
text: `+${children.value.length - max.value}`,
class: twJoin(ui.value.ring, ui.value.margin)
})
@@ -65,6 +64,6 @@ export default defineComponent({
return null
}).filter(Boolean).reverse())
return () => h('div', { class: twMerge(ui.value.wrapper, attrs.class as string), ...omit(attrs, ['class']) }, clones.value)
return () => h('div', { class: ui.value.wrapper, ...attrs.value }, clones.value)
}
})

46
src/runtime/components/elements/Badge.vue
View File

@@ -7,40 +7,41 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { NestedKeyOf, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { badge } from '#ui/ui.config'
import colors from '#ui-colors'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof badge>(appConfig.ui.strategy, appConfig.ui.badge, badge)
export default defineComponent({
inheritAttrs: false,
props: {
size: {
type: String,
default: () => appConfig.ui.badge.default.size,
type: String as PropType<keyof typeof config.size>,
default: () => config.default.size,
validator (value: string) {
return Object.keys(appConfig.ui.badge.size).includes(value)
return Object.keys(config.size).includes(value)
}
},
color: {
type: String,
default: () => appConfig.ui.badge.default.color,
type: String as PropType<keyof typeof config.color | typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.badge.color)].includes(value)
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String,
default: () => appConfig.ui.badge.default.variant,
type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
default: () => config.default.variant,
validator (value: string) {
return [
...Object.keys(appConfig.ui.badge.variant),
...Object.values(appConfig.ui.badge.color).flatMap(value => Object.keys(value))
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
].includes(value)
}
},
@@ -49,15 +50,12 @@ export default defineComponent({
default: null
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.badge>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.badge>>(() => defuTwMerge({}, props.ui, appConfig.ui.badge))
setup (props) {
const { ui, attrs, attrsClass } = useUI('badge', props.ui, config)
const badgeClass = computed(() => {
const variant = ui.value.color?.[props.color as string]?.[props.variant as string] || ui.value.variant[props.variant]
@@ -68,11 +66,11 @@ export default defineComponent({
ui.value.rounded,
ui.value.size[props.size],
variant?.replaceAll('{color}', props.color)
), attrs.class as string)
), attrsClass)
})
return {
attrs: computed(() => omit(attrs, ['class'])),
attrs,
badgeClass
}
}

47
src/runtime/components/elements/Button.vue
View File

@@ -19,17 +19,17 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import ULink from '../elements/Link.vue'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { ButtonColor, ButtonSize, ButtonVariant, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { button } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof button>(appConfig.ui.strategy, appConfig.ui.button, button)
export default defineComponent({
components: {
@@ -63,26 +63,26 @@ export default defineComponent({
default: true
},
size: {
type: String,
default: () => appConfig.ui.button.default.size,
type: String as PropType<ButtonSize>,
default: () => config.default.size,
validator (value: string) {
return Object.keys(appConfig.ui.button.size).includes(value)
return Object.keys(config.size).includes(value)
}
},
color: {
type: String,
default: () => appConfig.ui.button.default.color,
type: String as PropType<ButtonColor>,
default: () => config.default.color,
validator (value: string) {
return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.button.color)].includes(value)
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String,
default: () => appConfig.ui.button.default.variant,
type: String as PropType<ButtonVariant>,
default: () => config.default.variant,
validator (value: string) {
return [
...Object.keys(appConfig.ui.button.variant),
...Object.values(appConfig.ui.button.color).flatMap(value => Object.keys(value))
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
].includes(value)
}
},
@@ -92,7 +92,7 @@ export default defineComponent({
},
loadingIcon: {
type: String,
default: () => appConfig.ui.button.default.loadingIcon
default: () => config.default.loadingIcon
},
leadingIcon: {
type: String,
@@ -119,15 +119,12 @@ export default defineComponent({
default: false
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.button>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs, slots }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.button>>(() => defuTwMerge({}, props.ui, appConfig.ui.button))
setup (props, { slots }) {
const { ui, attrs, attrsClass } = useUI('button', props.ui, config)
const isLeading = computed(() => {
return (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing) || props.leadingIcon
@@ -151,7 +148,7 @@ export default defineComponent({
props.padded && ui.value[isSquare.value ? 'square' : 'padding'][props.size],
variant?.replaceAll('{color}', props.color),
props.block ? 'w-full flex justify-center items-center' : 'inline-flex items-center'
), attrs.class as string)
), attrsClass)
})
const leadingIconName = computed(() => {
@@ -187,7 +184,7 @@ export default defineComponent({
})
return {
attrs: computed(() => omit(attrs, ['class'])),
attrs,
isLeading,
isTrailing,
isSquare,

42
src/runtime/components/elements/ButtonGroup.ts
View File

@@ -1,23 +1,24 @@
import { h, cloneVNode, computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { defuTwMerge, getSlotsChildren } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig, getSlotsChildren } from '../../utils'
import type { ButtonSize, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { button, buttonGroup } from '#ui/ui.config'
// const appConfig = useAppConfig()
const buttonConfig = mergeConfig<typeof button>(appConfig.ui.strategy, appConfig.ui.button, button)
const buttonGroupConfig = mergeConfig<typeof buttonGroup>(appConfig.ui.strategy, appConfig.ui.buttonGroup, buttonGroup)
export default defineComponent({
inheritAttrs: false,
props: {
size: {
type: String,
type: String as PropType<ButtonSize>,
default: null,
validator (value: string) {
return Object.keys(appConfig.ui.button.size).includes(value)
return Object.keys(buttonConfig.size).includes(value)
}
},
orientation: {
@@ -28,15 +29,12 @@ export default defineComponent({
}
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.buttonGroup>>,
default: () => ({})
type: Object as PropType<Partial<typeof buttonGroupConfig & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs, slots }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.buttonGroup>>(() => defuTwMerge({}, props.ui, appConfig.ui.buttonGroup))
setup (props, { slots }) {
const { ui, attrs, attrsClass } = useUI('buttonGroup', props.ui, buttonGroupConfig)
const children = computed(() => getSlotsChildren(slots))
@@ -58,12 +56,6 @@ export default defineComponent({
const clones = computed(() => children.value.map((node, index) => {
const vProps: any = {}
if (props.orientation === 'vertical') {
ui.value.wrapper = 'flex flex-col -space-y-px'
} else {
ui.value.wrapper = 'inline-flex -space-x-px'
}
if (props.size) {
vProps.size = props.size
}
@@ -83,6 +75,14 @@ export default defineComponent({
return cloneVNode(node, vProps)
}))
return () => h('div', { class: twMerge(twJoin(ui.value.wrapper, ui.value.rounded, ui.value.shadow), attrs.class as string), ...omit(attrs, ['class']) }, clones.value)
const wrapperClass = computed(() => {
return twMerge(twJoin(
ui.value.wrapper[props.orientation],
ui.value.rounded,
ui.value.shadow
), attrsClass)
})
return () => h('div', { class: wrapperClass.value, ...attrs.value }, clones.value)
}
})

31
src/runtime/components/elements/Dropdown.vue
View File

@@ -1,5 +1,5 @@
<template>
<HMenu v-slot="{ open }" as="div" :class="wrapperClass" v-bind="attrs" @mouseleave="onMouseLeave">
<HMenu v-slot="{ open }" as="div" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
<HMenuButton
ref="trigger"
as="div"
@@ -49,22 +49,19 @@ import { defineComponent, ref, computed, onMounted } from 'vue'
import type { PropType } from 'vue'
import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem } from '@headlessui/vue'
import { defu } from 'defu'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import UAvatar from '../elements/Avatar.vue'
import UKbd from '../elements/Kbd.vue'
import ULink from '../elements/Link.vue'
import { useUI } from '../../composables/useUI'
import { usePopper } from '../../composables/usePopper'
import { defuTwMerge } from '../../utils'
import type { DropdownItem } from '../../types/dropdown'
import type { PopperOptions } from '../../types/popper'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig, omit } from '../../utils'
import type { DropdownItem, PopperOptions, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { dropdown } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof dropdown>(appConfig.ui.strategy, appConfig.ui.dropdown, dropdown)
export default defineComponent({
components: {
@@ -105,15 +102,12 @@ export default defineComponent({
default: 0
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.dropdown>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.dropdown>>(() => defuTwMerge({}, props.ui, appConfig.ui.dropdown))
setup (props) {
const { ui, attrs } = useUI('dropdown', props.ui, config, { mergeWrapper: true })
const popper = computed<PopperOptions>(() => defu(props.mode === 'hover' ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper as PopperOptions))
@@ -143,8 +137,6 @@ export default defineComponent({
return props.mode === 'hover' ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {}
})
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
function onMouseOver () {
if (props.mode !== 'hover' || !menuApi.value) {
return
@@ -186,13 +178,12 @@ export default defineComponent({
}
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
trigger,
container,
containerStyle,
wrapperClass,
onMouseOver,
onMouseLeave,
omit

31
src/runtime/components/elements/Kbd.vue
View File

@@ -7,15 +7,15 @@
<script lang="ts">
import { defineComponent, computed } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { kbd } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof kbd>(appConfig.ui.strategy, appConfig.ui.kbd, kbd)
export default defineComponent({
inheritAttrs: false,
@@ -25,22 +25,19 @@ export default defineComponent({
default: null
},
size: {
type: String,
default: () => appConfig.ui.kbd.default.size,
type: String as PropType<keyof typeof config.size>,
default: () => config.default.size,
validator (value: string) {
return Object.keys(appConfig.ui.kbd.size).includes(value)
return Object.keys(config.size).includes(value)
}
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.kbd>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.kbd>>(() => defuTwMerge({}, props.ui, appConfig.ui.kbd))
setup (props) {
const { ui, attrs, attrsClass } = useUI('kbd', props.ui, config)
const kbdClass = computed(() => {
return twMerge(twJoin(
@@ -51,13 +48,13 @@ export default defineComponent({
ui.value.font,
ui.value.background,
ui.value.ring
), attrs.class as string)
), attrsClass)
})
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
kbdClass
}
}

33
src/runtime/components/forms/Checkbox.vue
View File

@@ -1,5 +1,5 @@
<template>
<div :class="wrapperClass">
<div :class="ui.wrapper">
<div class="flex items-center h-5">
<input
:id="name"
@@ -32,16 +32,17 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import { useUI } from '../../composables/useUI'
import { useFormGroup } from '../../composables/useFormGroup'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { checkbox } from '#ui/ui.config'
import colors from '#ui-colors'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof checkbox>(appConfig.ui.strategy, appConfig.ui.checkbox, checkbox)
export default defineComponent({
inheritAttrs: false,
@@ -83,8 +84,8 @@ export default defineComponent({
default: false
},
color: {
type: String,
default: () => appConfig.ui.checkbox.default.color,
type: String as PropType<typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
return appConfig.ui.colors.includes(value)
}
@@ -94,16 +95,13 @@ export default defineComponent({
default: ''
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.checkbox>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue', 'change'],
setup (props, { emit, attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.checkbox>>(() => defuTwMerge({}, props.ui, appConfig.ui.checkbox))
setup (props, { emit }) {
const { ui, attrs } = useUI('checkbox', props.ui, config, { mergeWrapper: true })
const { emitFormChange, formGroup } = useFormGroup()
const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
@@ -122,8 +120,6 @@ export default defineComponent({
emitFormChange()
}
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
const inputClass = computed(() => {
return twMerge(twJoin(
ui.value.base,
@@ -136,11 +132,10 @@ export default defineComponent({
})
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
toggle,
wrapperClass,
// eslint-disable-next-line vue/no-dupe-keys
inputClass,
onChange

42
src/runtime/components/forms/FormGroup.vue
View File

@@ -1,5 +1,5 @@
<template>
<div :class="wrapperClass" v-bind="attrs">
<div :class="ui.wrapper" v-bind="attrs">
<div v-if="label" :class="[ui.label.wrapper, size]">
<label :for="labelFor" :class="[ui.label.base, required ? ui.label.required : '']">{{ label }}</label>
<span v-if="hint" :class="[ui.hint]">{{ hint }}</span>
@@ -20,18 +20,16 @@
</template>
<script lang="ts">
import { computed, defineComponent, provide, inject } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import type { FormError, InjectedFormGroupValue } from '../../types/form'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { computed, defineComponent, provide, inject, ref } from 'vue'
import type { Ref, PropType } from 'vue'
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { FormError, InjectedFormGroupValue, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { formGroup } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof formGroup>(appConfig.ui.strategy, appConfig.ui.formGroup, formGroup)
let increment = 0
@@ -43,10 +41,10 @@ export default defineComponent({
default: null
},
size: {
type: String,
type: String as PropType<keyof typeof config.size>,
default: null,
validator (value: string) {
return Object.keys(appConfig.ui.formGroup.size).includes(value)
return Object.keys(config.size).includes(value)
}
},
label: {
@@ -74,17 +72,12 @@ export default defineComponent({
default: null
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.formGroup>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.formGroup>>(() => defuTwMerge({}, props.ui, appConfig.ui.formGroup))
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
setup (props) {
const { ui, attrs } = useUI('formGroup', props.ui, config, { mergeWrapper: true })
const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
@@ -94,7 +87,7 @@ export default defineComponent({
: formErrors?.value?.find((error) => error.path === props.name)?.message
})
const size = computed(() => ui.value.size[props.size ?? appConfig.ui.input.default.size])
const size = computed(() => ui.value.size[props.size ?? config.default.size])
const labelFor = ref(`${props.name || 'lf'}-${increment = increment < 1000000 ? increment + 1 : 0}`)
provide<InjectedFormGroupValue>('form-group', {
@@ -105,11 +98,10 @@ export default defineComponent({
})
return {
labelFor,
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
wrapperClass,
attrs,
labelFor,
// eslint-disable-next-line vue/no-dupe-keys
size,
// eslint-disable-next-line vue/no-dupe-keys

58
src/runtime/components/forms/Input.vue
View File

@@ -1,7 +1,7 @@
<template>
<div :class="wrapperClass">
<div :class="ui.wrapper">
<input
:id="labelFor"
:id="id"
ref="input"
:name="name"
:value="modelValue"
@@ -34,17 +34,18 @@
<script lang="ts">
import { ref, computed, onMounted, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import { defuTwMerge } from '../../utils'
import { useUI } from '../../composables/useUI'
import { useFormGroup } from '../../composables/useFormGroup'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { NestedKeyOf, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { input } from '#ui/ui.config'
import colors from '#ui-colors'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof input>(appConfig.ui.strategy, appConfig.ui.input, input)
export default defineComponent({
components: {
@@ -90,7 +91,7 @@ export default defineComponent({
},
loadingIcon: {
type: String,
default: () => appConfig.ui.input.default.loadingIcon
default: () => config.default.loadingIcon
},
leadingIcon: {
type: String,
@@ -117,26 +118,26 @@ export default defineComponent({
default: true
},
size: {
type: String,
default: () => appConfig.ui.input.default.size,
type: String as PropType<keyof typeof config.size>,
default: () => config.default.size,
validator (value: string) {
return Object.keys(appConfig.ui.input.size).includes(value)
return Object.keys(config.size).includes(value)
}
},
color: {
type: String,
default: () => appConfig.ui.input.default.color,
type: String as PropType<keyof typeof config.color | typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.input.color)].includes(value)
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String,
default: () => appConfig.ui.input.default.variant,
type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
default: () => config.default.variant,
validator (value: string) {
return [
...Object.keys(appConfig.ui.input.variant),
...Object.values(appConfig.ui.input.color).flatMap(value => Object.keys(value))
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
].includes(value)
}
},
@@ -145,21 +146,18 @@ export default defineComponent({
default: null
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.input>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue', 'blur'],
setup (props, { emit, attrs, slots }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.input>>(() => defuTwMerge({}, props.ui, appConfig.ui.input))
setup (props, { emit, slots }) {
const { ui, attrs } = useUI('input', props.ui, config, { mergeWrapper: true })
const { emitFormBlur, emitFormInput, formGroup } = useFormGroup(props)
const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
const size = computed(() => formGroup?.size?.value ?? props.size)
const labelFor = formGroup?.labelFor
const id = formGroup?.labelFor
const input = ref<HTMLInputElement | null>(null)
@@ -185,8 +183,6 @@ export default defineComponent({
}, 100)
})
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
const inputClass = computed(() => {
const variant = ui.value.color?.[color.value as string]?.[props.variant as string] || ui.value.variant[props.variant]
@@ -261,14 +257,14 @@ export default defineComponent({
})
return {
labelFor,
attrs: computed(() => omit(attrs, ['class', labelFor ? 'id' : null ])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
// eslint-disable-next-line vue/no-dupe-keys
id,
input,
isLeading,
isTrailing,
wrapperClass,
// eslint-disable-next-line vue/no-dupe-keys
inputClass,
leadingIconName,

33
src/runtime/components/forms/Radio.vue
View File

@@ -1,5 +1,5 @@
<template>
<div :class="wrapperClass">
<div :class="ui.wrapper">
<div class="flex items-center h-5">
<input
:id="`${name}-${value}`"
@@ -29,16 +29,17 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import { useUI } from '../../composables/useUI'
import { useFormGroup } from '../../composables/useFormGroup'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { radio } from '#ui/ui.config'
import colors from '#ui-colors'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof radio>(appConfig.ui.strategy, appConfig.ui.radio, radio)
export default defineComponent({
inheritAttrs: false,
@@ -72,8 +73,8 @@ export default defineComponent({
default: false
},
color: {
type: String,
default: () => appConfig.ui.radio.default.color,
type: String as PropType<typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
return appConfig.ui.colors.includes(value)
}
@@ -83,16 +84,13 @@ export default defineComponent({
default: null
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.radio>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue'],
setup (props, { emit, attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.radio>>(() => defuTwMerge({}, props.ui, appConfig.ui.radio))
setup (props, { emit }) {
const { ui, attrs } = useUI('radio', props.ui, config, { mergeWrapper: true })
const { emitFormChange, formGroup } = useFormGroup()
const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
@@ -109,8 +107,6 @@ export default defineComponent({
}
})
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
const inputClass = computed(() => {
return twMerge(twJoin(
ui.value.base,
@@ -122,11 +118,10 @@ export default defineComponent({
})
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
pick,
wrapperClass,
// eslint-disable-next-line vue/no-dupe-keys
inputClass
}

43
src/runtime/components/forms/Range.vue
View File

@@ -1,7 +1,7 @@
<template>
<div :class="wrapperClass">
<input
:id="labelFor"
:id="id"
ref="input"
v-model.number="value"
:name="name"
@@ -22,14 +22,17 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import { useUI } from '../../composables/useUI'
import { useFormGroup } from '../../composables/useFormGroup'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { range } from '#ui/ui.config'
import colors from '#ui-colors'
const config = mergeConfig<typeof range>(appConfig.ui.strategy, appConfig.ui.range, range)
export default defineComponent({
inheritAttrs: false,
@@ -63,15 +66,15 @@ export default defineComponent({
default: 1
},
size: {
type: String,
default: () => appConfig.ui.range.default.size,
type: String as PropType<keyof typeof config.size>,
default: () => config.default.size,
validator (value: string) {
return Object.keys(appConfig.ui.range.size).includes(value)
return Object.keys(config.size).includes(value)
}
},
color: {
type: String,
default: () => appConfig.ui.range.default.color,
type: String as PropType<typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
return appConfig.ui.colors.includes(value)
}
@@ -81,21 +84,18 @@ export default defineComponent({
default: null
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.range>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue', 'change'],
setup (props, { emit, attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.range>>(() => defuTwMerge({}, props.ui, appConfig.ui.range))
setup (props, { emit }) {
const { ui, attrs, attrsClass } = useUI('range', props.ui, config)
const { emitFormChange, formGroup } = useFormGroup(props)
const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
const size = computed(() => formGroup?.size?.value ?? props.size)
const labelFor = formGroup?.labelFor
const id = formGroup?.labelFor
const value = computed({
get () {
@@ -115,7 +115,7 @@ export default defineComponent({
return twMerge(twJoin(
ui.value.wrapper,
ui.value.size[size.value]
), attrs.class as string)
), attrsClass)
})
const inputClass = computed(() => {
@@ -167,10 +167,11 @@ export default defineComponent({
})
return {
labelFor,
attrs: computed(() => omit(attrs, ['class', labelFor ? 'id' : null ])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
// eslint-disable-next-line vue/no-dupe-keys
id,
value,
wrapperClass,
// eslint-disable-next-line vue/no-dupe-keys

61
src/runtime/components/forms/Select.vue
View File

@@ -1,7 +1,7 @@
<template>
<div :class="wrapperClass">
<div :class="ui.wrapper">
<select
:id="labelFor"
:id="id"
:name="name"
:value="modelValue"
:required="required"
@@ -56,17 +56,18 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType, ComputedRef } from 'vue'
import { get, omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import { defuTwMerge } from '../../utils'
import { useUI } from '../../composables/useUI'
import { useFormGroup } from '../../composables/useFormGroup'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig, get } from '../../utils'
import type { NestedKeyOf, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { select } from '#ui/ui.config'
import colors from '#ui-colors'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof select>(appConfig.ui.strategy, appConfig.ui.select, select)
export default defineComponent({
components: {
@@ -104,7 +105,7 @@ export default defineComponent({
},
loadingIcon: {
type: String,
default: () => appConfig.ui.input.default.loadingIcon
default: () => config.default.loadingIcon
},
leadingIcon: {
type: String,
@@ -112,7 +113,7 @@ export default defineComponent({
},
trailingIcon: {
type: String,
default: () => appConfig.ui.select.default.trailingIcon
default: () => config.default.trailingIcon
},
trailing: {
type: Boolean,
@@ -135,26 +136,26 @@ export default defineComponent({
default: () => []
},
size: {
type: String,
default: () => appConfig.ui.select.default.size,
type: String as PropType<keyof typeof config.size>,
default: () => config.default.size,
validator (value: string) {
return Object.keys(appConfig.ui.select.size).includes(value)
return Object.keys(config.size).includes(value)
}
},
color: {
type: String,
default: () => appConfig.ui.select.default.color,
type: String as PropType<keyof typeof config.color | typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.select.color)].includes(value)
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String,
default: () => appConfig.ui.select.default.variant,
type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
default: () => config.default.variant,
validator (value: string) {
return [
...Object.keys(appConfig.ui.select.variant),
...Object.values(appConfig.ui.select.color).flatMap(value => Object.keys(value))
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
].includes(value)
}
},
@@ -171,22 +172,18 @@ export default defineComponent({
default: null
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.select>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue', 'change'],
setup (props, { emit, attrs, slots }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.select>>(() => defuTwMerge({}, props.ui, appConfig.ui.select))
setup (props, { emit, slots }) {
const { ui, attrs } = useUI('select', props.ui, config, { mergeWrapper: true })
const { emitFormChange, formGroup } = useFormGroup(props)
const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
const size = computed(() => formGroup?.size?.value ?? props.size)
const labelFor = formGroup?.labelFor
const id = formGroup?.labelFor
const onInput = (event: InputEvent) => {
emit('update:modelValue', (event.target as HTMLInputElement).value)
@@ -249,8 +246,6 @@ export default defineComponent({
return foundOption[props.valueAttribute]
})
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
const selectClass = computed(() => {
const variant = ui.value.color?.[color.value as string]?.[props.variant as string] || ui.value.variant[props.variant]
@@ -324,15 +319,15 @@ export default defineComponent({
})
return {
attrs: computed(() => omit(attrs, ['class', labelFor ? 'id' : null ])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
labelFor,
attrs,
// eslint-disable-next-line vue/no-dupe-keys
id,
normalizedOptionsWithPlaceholder,
normalizedValue,
isLeading,
isTrailing,
wrapperClass,
// eslint-disable-next-line vue/no-dupe-keys
selectClass,
leadingIconName,

72
src/runtime/components/forms/SelectMenu.vue
View File

@@ -8,7 +8,7 @@
:multiple="multiple"
:disabled="disabled || loading"
as="div"
:class="wrapperClass"
:class="ui.wrapper"
@update:model-value="onUpdate"
>
<input
@@ -28,7 +28,7 @@
class="inline-flex w-full"
>
<slot :open="open" :disabled="disabled" :loading="loading">
<button :id="labelFor" :class="selectClass" :disabled="disabled || loading" type="button" v-bind="attrs">
<button :id="id" :class="selectClass" :disabled="disabled || loading" type="button" v-bind="attrs">
<span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
@@ -131,20 +131,22 @@ import {
} from '@headlessui/vue'
import { computedAsync, useDebounceFn } from '@vueuse/core'
import { defu } from 'defu'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import UAvatar from '../elements/Avatar.vue'
import { defuTwMerge } from '../../utils'
import { useUI } from '../../composables/useUI'
import { usePopper } from '../../composables/usePopper'
import { useFormGroup } from '../../composables/useFormGroup'
import type { PopperOptions } from '../../types/popper'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { PopperOptions, NestedKeyOf, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { select, selectMenu } from '#ui/ui.config'
import colors from '#ui-colors'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof select>(appConfig.ui.strategy, appConfig.ui.select, select)
const configMenu = mergeConfig<typeof selectMenu>(appConfig.ui.strategy, appConfig.ui.selectMenu, selectMenu)
export default defineComponent({
components: {
@@ -192,7 +194,7 @@ export default defineComponent({
},
loadingIcon: {
type: String,
default: () => appConfig.ui.input.default.loadingIcon
default: () => config.default.loadingIcon
},
leadingIcon: {
type: String,
@@ -200,7 +202,7 @@ export default defineComponent({
},
trailingIcon: {
type: String,
default: () => appConfig.ui.select.default.trailingIcon
default: () => config.default.trailingIcon
},
trailing: {
type: Boolean,
@@ -216,7 +218,7 @@ export default defineComponent({
},
selectedIcon: {
type: String,
default: () => appConfig.ui.selectMenu.default.selectedIcon
default: () => configMenu.default.selectedIcon
},
disabled: {
type: Boolean,
@@ -251,26 +253,26 @@ export default defineComponent({
default: true
},
size: {
type: String,
default: () => appConfig.ui.select.default.size,
type: String as PropType<keyof typeof config.size>,
default: () => config.default.size,
validator (value: string) {
return Object.keys(appConfig.ui.select.size).includes(value)
return Object.keys(config.size).includes(value)
}
},
color: {
type: String,
default: () => appConfig.ui.select.default.color,
type: String as PropType<keyof typeof config.color | typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.select.color)].includes(value)
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String,
default: () => appConfig.ui.select.default.variant,
type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
default: () => config.default.variant,
validator (value: string) {
return [
...Object.keys(appConfig.ui.select.variant),
...Object.values(appConfig.ui.select.color).flatMap(value => Object.keys(value))
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
].includes(value)
}
},
@@ -295,21 +297,19 @@ export default defineComponent({
default: null
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.select>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
},
uiMenu: {
type: Object as PropType<Partial<typeof appConfig.ui.selectMenu>>,
default: () => ({})
type: Object as PropType<Partial<typeof configMenu & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue', 'open', 'close', 'change'],
setup (props, { emit, attrs, slots }) {
// TODO: Remove
const appConfig = useAppConfig()
setup (props, { emit, slots }) {
const { ui, attrs } = useUI('select', props.ui, config, { mergeWrapper: true })
const ui = computed<Partial<typeof appConfig.ui.select>>(() => defuTwMerge({}, props.ui, appConfig.ui.select))
const uiMenu = computed<Partial<typeof appConfig.ui.selectMenu>>(() => defuTwMerge({}, props.uiMenu, appConfig.ui.selectMenu))
const { ui: uiMenu } = useUI('selectMenu', props.uiMenu, configMenu)
const popper = computed<PopperOptions>(() => defu({}, props.popper, uiMenu.value.popper as PopperOptions))
@@ -317,13 +317,11 @@ export default defineComponent({
const { emitFormBlur, emitFormChange, formGroup } = useFormGroup(props)
const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
const size = computed(() => formGroup?.size?.value ?? props.size)
const labelFor = formGroup?.labelFor
const id = formGroup?.labelFor
const query = ref('')
const searchInput = ref<ComponentPublicInstance<HTMLElement>>()
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
const selectClass = computed(() => {
const variant = ui.value.color?.[color.value as string]?.[props.variant as string] || ui.value.variant[props.variant]
@@ -442,15 +440,17 @@ export default defineComponent({
}
return {
labelFor,
attrs: computed(() => omit(attrs, ['class', labelFor ? 'id' : null ])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
// eslint-disable-next-line vue/no-dupe-keys
uiMenu,
attrs,
// eslint-disable-next-line vue/no-dupe-keys
id,
trigger,
container,
isLeading,
isTrailing,
wrapperClass,
// eslint-disable-next-line vue/no-dupe-keys
selectClass,
leadingIconName,

62
src/runtime/components/forms/Textarea.vue
View File

@@ -1,7 +1,7 @@
<template>
<div :class="wrapperClass">
<div :class="ui.wrapper">
<textarea
:id="labelFor"
:id="id"
ref="textarea"
:value="modelValue"
:name="name"
@@ -21,16 +21,17 @@
<script lang="ts">
import { ref, computed, watch, onMounted, nextTick, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import { useUI } from '../../composables/useUI'
import { useFormGroup } from '../../composables/useFormGroup'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { NestedKeyOf, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { textarea } from '#ui/ui.config'
import colors from '#ui-colors'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof textarea>(appConfig.ui.strategy, appConfig.ui.textarea, textarea)
export default defineComponent({
inheritAttrs: false,
@@ -80,26 +81,26 @@ export default defineComponent({
default: true
},
size: {
type: String,
default: () => appConfig.ui.textarea.default.size,
type: String as PropType<keyof typeof config.size>,
default: () => config.default.size,
validator (value: string) {
return Object.keys(appConfig.ui.textarea.size).includes(value)
return Object.keys(config.size).includes(value)
}
},
color: {
type: String,
default: () => appConfig.ui.textarea.default.color,
type: String as PropType<keyof typeof config.color | typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.textarea.color)].includes(value)
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String,
default: () => appConfig.ui.textarea.default.variant,
type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
default: () => config.default.variant,
validator (value: string) {
return [
...Object.keys(appConfig.ui.textarea.variant),
...Object.values(appConfig.ui.textarea.color).flatMap(value => Object.keys(value))
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
].includes(value)
}
},
@@ -108,23 +109,20 @@ export default defineComponent({
default: null
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.textarea>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue', 'blur'],
setup (props, { emit, attrs }) {
const textarea = ref<HTMLTextAreaElement | null>(null)
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.textarea>>(() => defuTwMerge({}, props.ui, appConfig.ui.textarea))
setup (props, { emit }) {
const { ui, attrs } = useUI('textarea', props.ui, config, { mergeWrapper: true })
const { emitFormBlur, emitFormInput, formGroup } = useFormGroup(props)
const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
const size = computed(() => formGroup?.size?.value ?? props.size)
const labelFor = formGroup?.labelFor
const id = formGroup?.labelFor
const textarea = ref<HTMLTextAreaElement | null>(null)
const autoFocus = () => {
if (props.autofocus) {
@@ -183,8 +181,6 @@ export default defineComponent({
}, 100)
})
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
const textareaClass = computed(() => {
const variant = ui.value.color?.[color.value as string]?.[props.variant as string] || ui.value.variant[props.variant]
@@ -200,10 +196,12 @@ export default defineComponent({
})
return {
labelFor,
attrs: computed(() => omit(attrs, ['class', labelFor ? 'id' : null ])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
// eslint-disable-next-line vue/no-dupe-keys
id,
textarea,
wrapperClass,
// eslint-disable-next-line vue/no-dupe-keys
textareaClass,
onInput,

41
src/runtime/components/forms/Toggle.vue
View File

@@ -1,6 +1,6 @@
<template>
<HSwitch
:id="labelFor"
:id="id"
v-model="active"
:name="name"
:disabled="disabled"
@@ -22,17 +22,18 @@
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { Switch as HSwitch } from '@headlessui/vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import { defuTwMerge } from '../../utils'
import { useUI } from '../../composables/useUI'
import { useFormGroup } from '../../composables/useFormGroup'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { toggle } from '#ui/ui.config'
import colors from '#ui-colors'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof toggle>(appConfig.ui.strategy, appConfig.ui.toggle, toggle)
export default defineComponent({
components: {
@@ -59,34 +60,31 @@ export default defineComponent({
},
onIcon: {
type: String,
default: () => appConfig.ui.toggle.default.onIcon
default: () => config.default.onIcon
},
offIcon: {
type: String,
default: () => appConfig.ui.toggle.default.offIcon
default: () => config.default.offIcon
},
color: {
type: String,
default: () => appConfig.ui.toggle.default.color,
type: String as PropType<typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
return appConfig.ui.colors.includes(value)
}
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.toggle>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue'],
setup (props, { emit, attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.toggle>>(() => defuTwMerge({}, props.ui, appConfig.ui.toggle))
setup (props, { emit }) {
const { ui, attrs, attrsClass } = useUI('toggle', props.ui, config)
const { emitFormChange, formGroup } = useFormGroup(props)
const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
const labelFor = formGroup?.labelFor
const id = formGroup?.labelFor
const active = computed({
get () {
@@ -104,7 +102,7 @@ export default defineComponent({
ui.value.rounded,
ui.value.ring.replaceAll('{color}', color.value),
(active.value ? ui.value.active : ui.value.inactive).replaceAll('{color}', color.value)
), attrs.class as string)
), attrsClass)
})
const onIconClass = computed(() => {
@@ -120,10 +118,11 @@ export default defineComponent({
})
return {
labelFor,
attrs: computed(() => omit(attrs, ['class', labelFor ? 'id' : null ])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
// eslint-disable-next-line vue/no-dupe-keys
id,
active,
switchClass,
onIconClass,

25
src/runtime/components/layout/Card.vue
View File

@@ -19,15 +19,15 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { card } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof card>(appConfig.ui.strategy, appConfig.ui.card, card)
export default defineComponent({
inheritAttrs: false,
@@ -37,15 +37,12 @@ export default defineComponent({
default: 'div'
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.card>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.card>>(() => defuTwMerge({}, props.ui, appConfig.ui.card))
setup (props) {
const { ui, attrs, attrsClass } = useUI('card', props.ui, config)
const cardClass = computed(() => {
return twMerge(twJoin(
@@ -55,13 +52,13 @@ export default defineComponent({
ui.value.ring,
ui.value.shadow,
ui.value.background
), attrs.class as string)
), attrsClass)
})
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
cardClass
}
}

25
src/runtime/components/layout/Container.vue
View File

@@ -7,15 +7,15 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { container } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof container>(appConfig.ui.strategy, appConfig.ui.container, container)
export default defineComponent({
inheritAttrs: false,
@@ -25,28 +25,25 @@ export default defineComponent({
default: 'div'
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.container>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.container>>(() => defuTwMerge({}, props.ui, appConfig.ui.container))
setup (props) {
const { ui, attrs, attrsClass } = useUI('container', props.ui, config)
const containerClass = computed(() => {
return twMerge(twJoin(
ui.value.base,
ui.value.padding,
ui.value.constrained
), attrs.class as string)
), attrsClass)
})
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
containerClass
}
}

25
src/runtime/components/layout/Skeleton.vue
View File

@@ -5,42 +5,39 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { skeleton } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof skeleton>(appConfig.ui.strategy, appConfig.ui.skeleton, skeleton)
export default defineComponent({
inheritAttrs: false,
props: {
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.skeleton>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.skeleton>>(() => defuTwMerge({}, props.ui, appConfig.ui.skeleton))
setup (props) {
const { ui, attrs, attrsClass } = useUI('skeleton', props.ui, config)
const skeletonClass = computed(() => {
return twMerge(twJoin(
ui.value.base,
ui.value.background,
ui.value.rounded
), attrs.class as string)
), attrsClass)
})
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
skeletonClass
}
}

44
src/runtime/components/navigation/CommandPalette.vue
View File

@@ -4,7 +4,7 @@
:model-value="modelValue"
:multiple="multiple"
:nullable="nullable"
:class="wrapperClass"
:class="ui.wrapper"
v-bind="attrs"
as="div"
@update:model-value="onSelect"
@@ -67,22 +67,20 @@ import { Combobox as HCombobox, ComboboxInput as HComboboxInput, ComboboxOptions
import type { ComputedRef, PropType, ComponentPublicInstance } from 'vue'
import { useDebounceFn } from '@vueuse/core'
import { useFuse } from '@vueuse/integrations/useFuse'
import { twMerge, twJoin } from 'tailwind-merge'
import { omit } from '../../utils/lodash'
import { defu } from 'defu'
import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
import type { Group, Command } from '../../types/command-palette'
import { twJoin } from 'tailwind-merge'
import { defu } from 'defu'
import UIcon from '../elements/Icon.vue'
import UButton from '../elements/Button.vue'
import type { Button } from '../../types/button'
import CommandPaletteGroup from './CommandPaletteGroup.vue'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { Group, Command, Button, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { commandPalette } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof commandPalette>(appConfig.ui.strategy, appConfig.ui.commandPalette, commandPalette)
export default defineComponent({
components: {
@@ -125,23 +123,23 @@ export default defineComponent({
},
icon: {
type: String,
default: () => appConfig.ui.commandPalette.default.icon
default: () => config.default.icon
},
loadingIcon: {
type: String,
default: () => appConfig.ui.commandPalette.default.loadingIcon
default: () => config.default.loadingIcon
},
selectedIcon: {
type: String,
default: () => appConfig.ui.commandPalette.default.selectedIcon
default: () => config.default.selectedIcon
},
closeButton: {
type: Object as PropType<Button>,
default: () => appConfig.ui.commandPalette.default.closeButton
default: () => config.default.closeButton as Button
},
emptyState: {
type: Object as PropType<{ icon: string, label: string, queryLabel: string }>,
default: () => appConfig.ui.commandPalette.default.emptyState
default: () => config.default.emptyState
},
placeholder: {
type: String,
@@ -172,16 +170,13 @@ export default defineComponent({
default: () => ({})
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.commandPalette>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue', 'close'],
setup (props, { emit, attrs, expose }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.commandPalette>>(() => defuTwMerge({}, props.ui, appConfig.ui.commandPalette))
setup (props, { emit, expose }) {
const { ui, attrs } = useUI('commandPalette', props.ui, config, { mergeWrapper: true })
const query = ref('')
const comboboxInput = ref<ComponentPublicInstance<HTMLInputElement>>()
@@ -284,8 +279,6 @@ export default defineComponent({
}, 0)
})
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
const iconName = computed(() => {
if ((props.loading || isLoading.value) && props.loadingIcon) {
return props.loadingIcon
@@ -343,14 +336,13 @@ export default defineComponent({
})
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
// eslint-disable-next-line vue/no-dupe-keys
groups,
comboboxInput,
query,
wrapperClass,
iconName,
iconClass,
// eslint-disable-next-line vue/no-dupe-keys

12
src/runtime/components/navigation/CommandPaletteGroup.vue
View File

@@ -76,12 +76,8 @@ import { ComboboxOption as HComboboxOption } from '@headlessui/vue'
import UIcon from '../elements/Icon.vue'
import UAvatar from '../elements/Avatar.vue'
import UKbd from '../elements/Kbd.vue'
import type { Group } from '../../types/command-palette'
// TODO: Remove
// @ts-expect-error
import appConfig from '#build/app.config'
// const appConfig = useAppConfig()
import type { Group } from '../../types'
import { commandPalette } from '#ui/ui.config'
export default defineComponent({
components: {
@@ -112,8 +108,8 @@ export default defineComponent({
required: true
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.commandPalette>>,
default: () => ({})
type: Object as PropType<typeof commandPalette>,
required: true
}
},
setup (props) {

46
src/runtime/components/navigation/Pagination.vue
View File

@@ -1,5 +1,5 @@
<template>
<div :class="wrapperClass" v-bind="attrs">
<div :class="ui.wrapper" v-bind="attrs">
<slot name="prev" :on-click="onClickPrev">
<UButton
v-if="prevButton"
@@ -42,17 +42,17 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import UButton from '../elements/Button.vue'
import { defuTwMerge } from '../../utils'
import type { Button } from '../../types/button'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { Button, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { pagination, button } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof pagination>(appConfig.ui.strategy, appConfig.ui.pagination, pagination)
const buttonConfig = mergeConfig<typeof button>(appConfig.ui.strategy, appConfig.ui.button, button)
export default defineComponent({
components: {
@@ -80,43 +80,40 @@ export default defineComponent({
}
},
size: {
type: String,
default: () => appConfig.ui.pagination.default.size,
type: String as PropType<keyof typeof buttonConfig.size>,
default: () => config.default.size,
validator (value: string) {
return Object.keys(appConfig.ui.button.size).includes(value)
return Object.keys(buttonConfig.size).includes(value)
}
},
activeButton: {
type: Object as PropType<Button>,
default: () => appConfig.ui.pagination.default.activeButton
default: () => config.default.activeButton as Button
},
inactiveButton: {
type: Object as PropType<Button>,
default: () => appConfig.ui.pagination.default.inactiveButton
default: () => config.default.inactiveButton as Button
},
prevButton: {
type: Object as PropType<Button>,
default: () => appConfig.ui.pagination.default.prevButton
default: () => config.default.prevButton as Button
},
nextButton: {
type: Object as PropType<Button>,
default: () => appConfig.ui.pagination.default.nextButton
default: () => config.default.nextButton as Button
},
divider: {
type: String,
default: '…'
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.pagination>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue'],
setup (props, { attrs, emit }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.pagination>>(() => defuTwMerge({}, props.ui, appConfig.ui.pagination))
setup (props, { emit }) {
const { ui, attrs } = useUI('pagination', props.ui, config, { mergeWrapper: true })
const currentPage = computed({
get () {
@@ -182,8 +179,6 @@ export default defineComponent({
const canGoPrev = computed(() => currentPage.value > 1)
const canGoNext = computed(() => currentPage.value < pages.value.length)
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
function onClickPage (page: number | string) {
if (typeof page === 'string') {
return
@@ -209,15 +204,14 @@ export default defineComponent({
}
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
currentPage,
pages,
displayedPages,
canGoPrev,
canGoNext,
wrapperClass,
onClickPrev,
onClickNext,
onClickPage

32
src/runtime/components/navigation/Tabs.vue
View File

@@ -3,7 +3,7 @@
:vertical="orientation === 'vertical'"
:selected-index="selectedIndex"
as="div"
:class="wrapperClass"
:class="ui.wrapper"
v-bind="attrs"
@change="onChange"
>
@@ -48,20 +48,18 @@
</template>
<script lang="ts">
import { ref, computed, watch, onMounted, defineComponent } from 'vue'
import { ref, watch, onMounted, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel } from '@headlessui/vue'
import { useResizeObserver } from '@vueuse/core'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import type { TabItem } from '../../types/tabs'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { TabItem, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { tabs } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof tabs>(appConfig.ui.strategy, appConfig.ui.tabs, tabs)
export default defineComponent({
components: {
@@ -91,16 +89,13 @@ export default defineComponent({
default: () => []
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.tabs>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue', 'change'],
setup (props, { attrs, emit }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.tabs>>(() => defuTwMerge({}, props.ui, appConfig.ui.tabs))
setup (props, { emit }) {
const { ui, attrs } = useUI('tabs', props.ui, config, { mergeWrapper: true })
const listRef = ref<HTMLElement>()
const itemRefs = ref<HTMLElement[]>([])
@@ -108,8 +103,6 @@ export default defineComponent({
const selectedIndex = ref(props.modelValue || props.defaultIndex)
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
// Methods
function calcMarkerSize (index: number) {
@@ -149,14 +142,13 @@ export default defineComponent({
onMounted(() => calcMarkerSize(selectedIndex.value))
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
listRef,
itemRefs,
markerRef,
selectedIndex,
wrapperClass,
onChange
}
}

32
src/runtime/components/navigation/VerticalNavigation.vue
View File

@@ -1,5 +1,5 @@
<template>
<nav :class="wrapperClass" v-bind="attrs">
<nav :class="ui.wrapper" v-bind="attrs">
<ULink
v-for="(link, index) of links"
v-slot="{ isActive }"
@@ -38,21 +38,19 @@
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import { defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import UAvatar from '../elements/Avatar.vue'
import ULink from '../elements/Link.vue'
import { defuTwMerge } from '../../utils'
import type { VerticalNavigationLink } from '../../types/vertical-navigation'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig, omit } from '../../utils'
import type { VerticalNavigationLink, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { verticalNavigation } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof verticalNavigation>(appConfig.ui.strategy, appConfig.ui.verticalNavigation, verticalNavigation)
export default defineComponent({
components: {
@@ -67,23 +65,17 @@ export default defineComponent({
default: () => []
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.verticalNavigation>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.verticalNavigation>>(() => defuTwMerge({}, props.ui, appConfig.ui.verticalNavigation))
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
setup (props) {
const { ui, attrs } = useUI('verticalNavigation', props.ui, config, { mergeWrapper: true })
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
wrapperClass,
attrs,
omit
}
}

26
src/runtime/components/overlays/ContextMenu.vue
View File

@@ -14,17 +14,16 @@ import type { PropType, Ref } from 'vue'
import { defu } from 'defu'
import { onClickOutside } from '@vueuse/core'
import type { VirtualElement } from '@popperjs/core'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { useUI } from '../../composables/useUI'
import { usePopper } from '../../composables/usePopper'
import { defuTwMerge } from '../../utils'
import type { PopperOptions } from '../../types/popper'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { PopperOptions, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { contextMenu } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof contextMenu>(appConfig.ui.strategy, appConfig.ui.contextMenu, contextMenu)
export default defineComponent({
inheritAttrs: false,
@@ -42,16 +41,13 @@ export default defineComponent({
default: () => ({})
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.contextMenu>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue', 'close'],
setup (props, { attrs, emit }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.contextMenu>>(() => defuTwMerge({}, props.ui, appConfig.ui.contextMenu))
setup (props, { emit }) {
const { ui, attrs, attrsClass } = useUI('contextMenu', props.ui, config)
const popper = computed<PopperOptions>(() => defu({}, props.popper, ui.value.popper as PopperOptions))
@@ -72,7 +68,7 @@ export default defineComponent({
return twMerge(twJoin(
ui.value.container,
ui.value.width
), attrs.class as string)
), attrsClass)
})
onClickOutside(container, () => {
@@ -80,9 +76,9 @@ export default defineComponent({
})
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
isOpen,
wrapperClass,
container

29
src/runtime/components/overlays/Modal.vue
View File

@@ -1,6 +1,6 @@
<template>
<TransitionRoot :appear="appear" :show="isOpen" as="template">
<HDialog :class="wrapperClass" v-bind="attrs" @close="(e) => !preventClose && close(e)">
<HDialog :class="ui.wrapper" v-bind="attrs" @close="(e) => !preventClose && close(e)">
<TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
<div :class="[ui.overlay.base, ui.overlay.background]" />
</TransitionChild>
@@ -32,16 +32,15 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { modal } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof modal>(appConfig.ui.strategy, appConfig.ui.modal, modal)
export default defineComponent({
components: {
@@ -77,16 +76,13 @@ export default defineComponent({
default: false
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.modal>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue', 'close'],
setup (props, { attrs, emit }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.modal>>(() => defuTwMerge({}, props.ui, appConfig.ui.modal))
setup (props, { emit }) {
const { ui, attrs } = useUI('modal', props.ui, config, { mergeWrapper: true })
const isOpen = computed({
get () {
@@ -97,8 +93,6 @@ export default defineComponent({
}
})
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
const transitionClass = computed(() => {
if (!props.transition) {
return {}
@@ -116,11 +110,10 @@ export default defineComponent({
}
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
isOpen,
wrapperClass,
transitionClass,
close
}

36
src/runtime/components/overlays/Notification.vue
View File

@@ -41,22 +41,19 @@
<script lang="ts">
import { ref, computed, onMounted, onUnmounted, watchEffect, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import UAvatar from '../elements/Avatar.vue'
import UButton from '../elements/Button.vue'
import { useUI } from '../../composables/useUI'
import { useTimer } from '../../composables/useTimer'
import type { NotificationAction } from '../../types/notification'
import type { Avatar } from '../../types/avatar'
import type { Button } from '../../types/button'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { Avatar, Button, NotificationColor, NotificationAction, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { notification } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof notification>(appConfig.ui.strategy, appConfig.ui.notification, notification)
export default defineComponent({
components: {
@@ -80,7 +77,7 @@ export default defineComponent({
},
icon: {
type: String,
default: () => appConfig.ui.notification.default.icon
default: () => config.default.icon
},
avatar: {
type: Object as PropType<Avatar>,
@@ -88,7 +85,7 @@ export default defineComponent({
},
closeButton: {
type: Object as PropType<Button>,
default: () => appConfig.ui.notification.default.closeButton
default: () => config.default.closeButton as Button
},
timeout: {
type: Number,
@@ -103,23 +100,20 @@ export default defineComponent({
default: null
},
color: {
type: String,
default: () => appConfig.ui.notification.default.color,
type: String as PropType<NotificationColor>,
default: () => config.default.color,
validator (value: string) {
return ['gray', ...appConfig.ui.colors].includes(value)
}
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.notification>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['close'],
setup (props, { attrs, emit }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.notification>>(() => defuTwMerge({}, props.ui, appConfig.ui.notification))
setup (props, { emit }) {
const { ui, attrs, attrsClass } = useUI('notification', props.ui, config)
let timer: any = null
const remaining = ref(props.timeout)
@@ -130,7 +124,7 @@ export default defineComponent({
ui.value.background,
ui.value.rounded,
ui.value.shadow
), attrs.class as string)
), attrsClass)
})
const progressClass = computed(() => {
@@ -210,9 +204,9 @@ export default defineComponent({
})
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
wrapperClass,
progressClass,
progressStyle,

27
src/runtime/components/overlays/Notifications.vue
View File

@@ -20,18 +20,18 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import UNotification from './Notification.vue'
import { useUI } from '../../composables/useUI'
import { useToast } from '../../composables/useToast'
import { defuTwMerge } from '../../utils'
import type { Notification } from '../../types/notification'
import { useState, useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { Notification, Strategy } from '../../types'
import { useState } from '#imports'
// @ts-expect-error
import appConfig from '#build/app.config'
import { notifications } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof notifications>(appConfig.ui.strategy, appConfig.ui.notifications, notifications)
export default defineComponent({
components: {
@@ -40,15 +40,12 @@ export default defineComponent({
inheritAttrs: false,
props: {
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.notifications>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.notifications>>(() => defuTwMerge({}, props.ui, appConfig.ui.notifications))
setup (props) {
const { ui, attrs, attrsClass } = useUI('notifications', props.ui, config)
const toast = useToast()
const notifications = useState<Notification[]>('notifications', () => [])
@@ -58,13 +55,13 @@ export default defineComponent({
ui.value.wrapper,
ui.value.position,
ui.value.width
), attrs.class as string)
), attrsClass)
})
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
toast,
notifications,
wrapperClass

30
src/runtime/components/overlays/Popover.vue
View File

@@ -1,5 +1,5 @@
<template>
<HPopover ref="popover" v-slot="{ open, close }" :class="wrapperClass" v-bind="attrs" @mouseleave="onMouseLeave">
<HPopover ref="popover" v-slot="{ open, close }" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
<HPopoverButton
ref="trigger"
as="div"
@@ -29,18 +29,16 @@
import { computed, ref, onMounted, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { defu } from 'defu'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import { Popover as HPopover, PopoverButton as HPopoverButton, PopoverPanel as HPopoverPanel } from '@headlessui/vue'
import { useUI } from '../../composables/useUI'
import { usePopper } from '../../composables/usePopper'
import { defuTwMerge } from '../../utils'
import type { PopperOptions } from '../../types/popper'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { PopperOptions, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { popover } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof popover>(appConfig.ui.strategy, appConfig.ui.popover, popover)
export default defineComponent({
components: {
@@ -72,15 +70,12 @@ export default defineComponent({
default: () => ({})
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.popover>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.popover>>(() => defuTwMerge({}, props.ui, appConfig.ui.popover))
setup (props) {
const { ui, attrs } = useUI('popover', props.ui, config, { mergeWrapper: true })
const popper = computed<PopperOptions>(() => defu(props.mode === 'hover' ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper as PopperOptions))
@@ -108,8 +103,6 @@ export default defineComponent({
return props.mode === 'hover' ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {}
})
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
function onMouseOver () {
if (props.mode !== 'hover' || !popoverApi.value) {
return
@@ -151,14 +144,13 @@ export default defineComponent({
}
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
popover,
trigger,
container,
containerStyle,
wrapperClass,
onMouseOver,
onMouseLeave
}

29
src/runtime/components/overlays/Slideover.vue
View File

@@ -1,6 +1,6 @@
<template>
<TransitionRoot as="template" :appear="appear" :show="isOpen">
<HDialog :class="[wrapperClass, { 'justify-end': side === 'right' }]" v-bind="attrs" @close="(e) => !preventClose && close(e)">
<HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" v-bind="attrs" @close="(e) => !preventClose && close(e)">
<TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
<div :class="[ui.overlay.base, ui.overlay.background]" />
</TransitionChild>
@@ -18,15 +18,14 @@
import { computed, defineComponent } from 'vue'
import type { WritableComputedRef, PropType } from 'vue'
import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { slideover } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof slideover>(appConfig.ui.strategy, appConfig.ui.slideover, slideover)
export default defineComponent({
components: {
@@ -63,16 +62,13 @@ export default defineComponent({
default: false
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.slideover>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue', 'close'],
setup (props, { attrs, emit }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.slideover>>(() => defuTwMerge({}, props.ui, appConfig.ui.slideover))
setup (props, { emit }) {
const { ui, attrs } = useUI('slideover', props.ui, config, { mergeWrapper: true })
const isOpen: WritableComputedRef<boolean> = computed({
get () {
@@ -83,8 +79,6 @@ export default defineComponent({
}
})
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
const transitionClass = computed(() => {
if (!props.transition) {
return {}
@@ -105,11 +99,10 @@ export default defineComponent({
}
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
isOpen,
wrapperClass,
transitionClass,
close
}

30
src/runtime/components/overlays/Tooltip.vue
View File

@@ -1,5 +1,5 @@
<template>
<div ref="trigger" :class="wrapperClass" v-bind="attrs" @mouseover="onMouseOver" @mouseleave="onMouseLeave">
<div ref="trigger" :class="ui.wrapper" v-bind="attrs" @mouseover="onMouseOver" @mouseleave="onMouseLeave">
<slot :open="open">
Hover
</slot>
@@ -27,18 +27,16 @@
import { computed, ref, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { defu } from 'defu'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import UKbd from '../elements/Kbd.vue'
import { useUI } from '../../composables/useUI'
import { usePopper } from '../../composables/usePopper'
import { defuTwMerge } from '../../utils'
import type { PopperOptions } from '../../types/popper'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { PopperOptions, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { tooltip } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof tooltip>(appConfig.ui.strategy, appConfig.ui.tooltip, tooltip)
export default defineComponent({
components: {
@@ -71,15 +69,12 @@ export default defineComponent({
default: () => ({})
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.tooltip>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.tooltip>>(() => defuTwMerge({}, props.ui, appConfig.ui.tooltip))
setup (props) {
const { ui, attrs } = useUI('tooltip', props.ui, config, { mergeWrapper: true })
const popper = computed<PopperOptions>(() => defu({}, props.popper, ui.value.popper as PopperOptions))
@@ -90,8 +85,6 @@ export default defineComponent({
let openTimeout: NodeJS.Timeout | null = null
let closeTimeout: NodeJS.Timeout | null = null
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
// Methods
function onMouseOver () {
@@ -127,13 +120,12 @@ export default defineComponent({
}
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
trigger,
container,
open,
wrapperClass,
onMouseOver,
onMouseLeave
}