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

chore(deps): migrate to eslint 9 (#2443)

Browse Source
This commit is contained in:
Benjamin Canac
2024-10-24 10:30:37 +02:00
committed by GitHub
parent b29fcd2650
commit cae4f0c4a8
177 changed files with 2034 additions and 1289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -140,11 +140,11 @@ import { table } from '#ui/ui.config'
const config = mergeConfig<typeof table>(appConfig.ui.strategy, appConfig.ui.table, table)
function defaultComparator<T> (a: T, z: T): boolean {
function defaultComparator<T>(a: T, z: T): boolean {
return JSON.stringify(a) === JSON.stringify(z)
}
function defaultSort (a: any, b: any, direction: 'asc' | 'desc') {
function defaultSort(a: any, b: any, direction: 'asc' | 'desc') {
if (a === b) {
return 0
}
@@ -239,10 +239,10 @@ export default defineComponent({
}
},
emits: ['update:modelValue', 'update:sort'],
setup (props, { emit, attrs: $attrs }) {
setup(props, { emit, attrs: $attrs }) {
const { ui, attrs } = useUI('table', toRef(props, 'ui'), config, toRef(props, 'class'))
const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map((key) => ({ key, label: upperFirst(key), sortable: false, class: undefined, sort: defaultSort }) as TableColumn))
const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map(key => ({ key, label: upperFirst(key), sortable: false, class: undefined, sort: defaultSort }) as TableColumn))
const sort = useVModel(props, 'sort', emit, { passive: true, defaultValue: defu({}, props.sort, { column: null, direction: 'asc' }) })
@@ -261,17 +261,17 @@ export default defineComponent({
const aValue = get(a, column)
const bValue = get(b, column)
const sort = columns.value.find((col) => col.key === column)?.sort ?? defaultSort
const sort = columns.value.find(col => col.key === column)?.sort ?? defaultSort
return sort(aValue, bValue, direction)
})
})
const selected = computed({
get () {
get() {
return props.modelValue
},
set (value) {
set(value) {
emit('update:modelValue', value)
}
})
@@ -288,7 +288,7 @@ export default defineComponent({
return { ...ui.value.default.loadingState, ...props.loadingState }
})
function compare (a: any, z: any) {
function compare(a: any, z: any) {
if (typeof props.by === 'string') {
const accesorFn = accessor(props.by)
return accesorFn(a) === accesorFn(z)
@@ -296,19 +296,19 @@ export default defineComponent({
return props.by(a, z)
}
function accessor <T extends Record<string, any>> (key: string) {
function accessor<T extends Record<string, any>>(key: string) {
return (obj: T) => get(obj, key)
}
function isSelected (row: TableRow) {
function isSelected(row: TableRow) {
if (!props.modelValue) {
return false
}
return selected.value.some((item) => compare(toRaw(item), toRaw(row)))
return selected.value.some(item => compare(toRaw(item), toRaw(row)))
}
function onSort (column: { key: string, direction?: 'asc' | 'desc' }) {
function onSort(column: { key: string, direction?: 'asc' | 'desc' }) {
if (sort.value.column === column.key) {
const direction = !column.direction || column.direction === 'asc' ? 'desc' : 'asc'
@@ -322,7 +322,7 @@ export default defineComponent({
}
}
function onSelect (row: TableRow) {
function onSelect(row: TableRow) {
if (!$attrs.onSelect) {
return
}
@@ -331,7 +331,7 @@ export default defineComponent({
$attrs.onSelect(row)
}
function selectAllRows () {
function selectAllRows() {
// Create a new array to ensure reactivity
const newSelected = [...selected.value]
@@ -346,7 +346,7 @@ export default defineComponent({
selected.value = newSelected
}
function onChange (checked: boolean) {
function onChange(checked: boolean) {
if (checked) {
selectAllRows()
} else {
@@ -354,28 +354,28 @@ export default defineComponent({
}
}
function onChangeCheckbox (checked: boolean, row: TableRow) {
function onChangeCheckbox(checked: boolean, row: TableRow) {
if (checked) {
selected.value.push(row)
} else {
const index = selected.value.findIndex((item) => compare(item, row))
const index = selected.value.findIndex(item => compare(item, row))
selected.value.splice(index, 1)
}
}
function getRowData (row: TableRow, rowKey: string | string[], defaultValue: any = '') {
function getRowData(row: TableRow, rowKey: string | string[], defaultValue: any = '') {
return get(row, rowKey, defaultValue)
}
function toggleOpened (index: number) {
function toggleOpened(index: number) {
if (openedRows.value.includes(index)) {
openedRows.value = openedRows.value.filter((i) => i !== index)
openedRows.value = openedRows.value.filter(i => i !== index)
} else {
openedRows.value.push(index)
}
}
function getAriaSort (column: TableColumn): AriaAttributes['aria-sort'] {
function getAriaSort(column: TableColumn): AriaAttributes['aria-sort'] {
if (!column.sortable) {
return undefined
}
@@ -423,4 +423,4 @@ export default defineComponent({
}
}
})
</script>
</script>

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

@@ -127,7 +127,7 @@ export default defineComponent({
}
},
emits: ['open'],
setup (props, { emit }) {
setup(props, { emit }) {
const { ui, attrs } = useUI('accordion', toRef(props, 'ui'), config, toRef(props, 'class'))
const uiButton = computed<typeof configButton>(() => configButton)
@@ -146,7 +146,7 @@ export default defineComponent({
}
}, { immediate: true })
function closeOthers (currentIndex: number, e: Event) {
function closeOthers(currentIndex: number, e: Event) {
if (!props.items[currentIndex].closeOthers && props.multiple) {
return
}
@@ -158,27 +158,29 @@ export default defineComponent({
})
}
function onEnter (_el: Element, done: () => void) {
function onEnter(_el: Element, done: () => void) {
const el = _el as HTMLElement
el.style.height = '0'
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
el.offsetHeight // Trigger a reflow, flushing the CSS changes
el.style.height = el.scrollHeight + 'px'
el.addEventListener('transitionend', done, { once: true })
}
function onBeforeLeave (_el: Element) {
function onBeforeLeave(_el: Element) {
const el = _el as HTMLElement
el.style.height = el.scrollHeight + 'px'
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
el.offsetHeight // Trigger a reflow, flushing the CSS changes
}
function onAfterEnter (_el: Element) {
function onAfterEnter(_el: Element) {
const el = _el as HTMLElement
el.style.height = 'auto'
}
function onLeave (_el: Element, done: () => void) {
function onLeave(_el: Element, done: () => void) {
const el = _el as HTMLElement
el.style.height = '0'

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

@@ -90,14 +90,14 @@ export default defineComponent({
color: {
type: String as PropType<AlertColor>,
default: () => config.default.color,
validator (value: string) {
validator(value: string) {
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String as PropType<AlertVariant>,
default: () => config.default.variant,
validator (value: string) {
validator(value: string) {
return [
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
@@ -114,7 +114,7 @@ export default defineComponent({
}
},
emits: ['close'],
setup (props) {
setup(props) {
const { ui, attrs } = useUI('alert', toRef(props, 'ui'), config)
const alertClass = computed(() => {
@@ -129,7 +129,7 @@ export default defineComponent({
), props.class)
})
function onAction (action: AlertAction) {
function onAction(action: AlertAction) {
if (action.click) {
action.click()
}

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

@@ -63,21 +63,21 @@ export default defineComponent({
size: {
type: String as PropType<AvatarSize>,
default: () => config.default.size,
validator (value: string) {
validator(value: string) {
return Object.keys(config.size).includes(value)
}
},
chipColor: {
type: String as PropType<AvatarChipColor>,
default: () => config.default.chipColor,
validator (value: string) {
validator(value: string) {
return ['gray', ...appConfig.ui.colors].includes(value)
}
},
chipPosition: {
type: String as PropType<AvatarChipPosition>,
default: () => config.default.chipPosition,
validator (value: string) {
validator(value: string) {
return Object.keys(config.chip.position).includes(value)
}
},
@@ -98,7 +98,7 @@ export default defineComponent({
default: () => ({})
}
},
setup (props) {
setup(props) {
const { ui, attrs } = useUI('avatar', toRef(props, 'ui'), config)
const url = computed(() => {
@@ -152,7 +152,7 @@ export default defineComponent({
}
})
function onError () {
function onError() {
error.value = true
}

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

@@ -1,10 +1,10 @@
import { h, cloneVNode, computed, toRef, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { twMerge, twJoin } from 'tailwind-merge'
import UAvatar from './Avatar.vue'
import { useUI } from '../../composables/useUI'
import { mergeConfig, getSlotsChildren } from '../../utils'
import type { AvatarSize, Strategy } from '../../types/index'
import UAvatar from './Avatar.vue'
// @ts-expect-error
import appConfig from '#build/app.config'
import { avatar, avatarGroup } from '#ui/ui.config'
@@ -19,7 +19,7 @@ export default defineComponent({
size: {
type: String as PropType<AvatarSize>,
default: null,
validator (value: string) {
validator(value: string) {
return Object.keys(avatarConfig.size).includes(value)
}
},
@@ -36,12 +36,12 @@ export default defineComponent({
default: () => ({})
}
},
setup (props, { slots }) {
setup(props, { slots }) {
const { ui, attrs } = useUI('avatarGroup', toRef(props, 'ui'), avatarGroupConfig, toRef(props, 'class'))
const children = computed(() => getSlotsChildren(slots))
const max = computed(() => typeof props.max === 'string' ? parseInt(props.max, 10) : props.max)
const max = computed(() => typeof props.max === 'string' ? Number.parseInt(props.max, 10) : props.max)
const clones = computed(() => children.value.map((node, index) => {
const vProps: any = {}

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

@@ -24,21 +24,21 @@ export default defineComponent({
size: {
type: String as PropType<BadgeSize>,
default: () => config.default.size,
validator (value: string) {
validator(value: string) {
return Object.keys(config.size).includes(value)
}
},
color: {
type: String as PropType<BadgeColor>,
default: () => config.default.color,
validator (value: string) {
validator(value: string) {
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String as PropType<BadgeVariant>,
default: () => config.default.variant,
validator (value: string) {
validator(value: string) {
return [
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
@@ -58,7 +58,7 @@ export default defineComponent({
default: () => ({})
}
},
setup (props) {
setup(props) {
const { ui, attrs } = useUI('badge', toRef(props, 'ui'), config)
const { size, rounded } = useInjectButtonGroup({ ui, props })

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

@@ -67,21 +67,21 @@ export default defineComponent({
size: {
type: String as PropType<ButtonSize>,
default: () => config.default.size,
validator (value: string) {
validator(value: string) {
return Object.keys(config.size).includes(value)
}
},
color: {
type: String as PropType<ButtonColor>,
default: () => config.default.color,
validator (value: string) {
validator(value: string) {
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String as PropType<ButtonVariant>,
default: () => config.default.variant,
validator (value: string) {
validator(value: string) {
return [
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
@@ -129,7 +129,7 @@ export default defineComponent({
default: () => ({})
}
},
setup (props, { slots }) {
setup(props, { slots }) {
const { ui, attrs } = useUI('button', toRef(props, 'ui'), config)
const { size, rounded } = useInjectButtonGroup({ ui, props })

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

@@ -19,14 +19,14 @@ export default defineComponent({
size: {
type: String as PropType<ButtonSize>,
default: null,
validator (value: string) {
validator(value: string) {
return Object.keys(buttonConfig.size).includes(value)
}
},
orientation: {
type: String as PropType<'horizontal' | 'vertical'>,
default: 'horizontal',
validator (value: string) {
validator(value: string) {
return ['horizontal', 'vertical'].includes(value)
}
},
@@ -39,7 +39,7 @@ export default defineComponent({
default: () => ({})
}
},
setup (props, { slots }) {
setup(props, { slots }) {
const { ui, attrs } = useUI('buttonGroup', toRef(props, 'ui'), buttonGroupConfig)
const children = computed(() => getSlotsChildren(slots))

10
src/runtime/components/elements/Carousel.vue
View File

@@ -59,12 +59,12 @@
import { ref, toRef, computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { twMerge } from 'tailwind-merge'
import { useScroll, useResizeObserver, useElementSize } from '@vueuse/core'
import { mergeConfig } from '../../utils'
import UButton from '../elements/Button.vue'
import type { Strategy, Button, DeepPartial } from '../../types/index'
import { useUI } from '../../composables/useUI'
import { useCarouselScroll } from '../../composables/useCarouselScroll'
import { useScroll, useResizeObserver, useElementSize } from '@vueuse/core'
// @ts-expect-error
import appConfig from '#build/app.config'
import { carousel } from '#ui/ui.config'
@@ -110,7 +110,7 @@ export default defineComponent({
default: undefined
}
},
setup (props, { expose }) {
setup(props, { expose }) {
const { ui, attrs } = useUI('carousel', toRef(props, 'ui'), config, toRef(props, 'class'))
const carouselRef = ref<HTMLElement>()
@@ -157,15 +157,15 @@ export default defineComponent({
const isFirst = computed(() => currentPage.value <= 1)
const isLast = computed(() => currentPage.value === pages.value)
function onClickNext () {
function onClickNext() {
x.value += isRtl.value ? -itemWidth.value : itemWidth.value
}
function onClickPrev () {
function onClickPrev() {
x.value -= isRtl.value ? -itemWidth.value : itemWidth.value
}
function onClick (page: number) {
function onClick(page: number) {
x.value = (page - 1) * itemWidth.value * (isRtl.value ? -1 : 1)
}

8
src/runtime/components/elements/Chip.vue
View File

@@ -29,21 +29,21 @@ export default defineComponent({
size: {
type: String as PropType<ChipSize>,
default: () => config.default.size,
validator (value: string) {
validator(value: string) {
return Object.keys(config.size).includes(value)
}
},
color: {
type: String as PropType<ChipColor>,
default: () => config.default.color,
validator (value: string) {
validator(value: string) {
return ['gray', ...appConfig.ui.colors].includes(value)
}
},
position: {
type: String as PropType<ChipPosition>,
default: () => config.default.position,
validator (value: string) {
validator(value: string) {
return Object.keys(config.position).includes(value)
}
},
@@ -68,7 +68,7 @@ export default defineComponent({
default: () => ({})
}
},
setup (props) {
setup(props) {
const { ui, attrs } = useUI('chip', toRef(props, 'ui'), config, toRef(props, 'class'))
const chipClass = computed(() => {

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

@@ -126,7 +126,7 @@ export default defineComponent({
}
},
emits: ['update:open'],
setup (props, { emit }) {
setup(props, { emit }) {
const { ui, attrs } = useUI('dropdown', toRef(props, 'ui'), config, toRef(props, 'class'))
const popper = computed<PopperOptions>(() => defu(props.mode === 'hover' ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper as PopperOptions))
@@ -182,7 +182,7 @@ export default defineComponent({
}
})
function onTouchStart (event: TouchEvent) {
function onTouchStart(event: TouchEvent) {
if (!event.cancelable || !menuApi.value || props.mode === 'click') {
return
}
@@ -194,7 +194,7 @@ export default defineComponent({
}
}
function onMouseEnter () {
function onMouseEnter() {
if (props.mode !== 'hover' || !menuApi.value) {
return
}
@@ -209,12 +209,14 @@ export default defineComponent({
return
}
openTimeout = openTimeout || setTimeout(() => {
menuApi.value.openMenu && menuApi.value.openMenu()
if (menuApi.value.openMenu) {
menuApi.value.openMenu()
}
openTimeout = null
}, props.openDelay)
}
function onMouseLeave () {
function onMouseLeave() {
if (props.mode !== 'hover' || !menuApi.value) {
return
}
@@ -229,12 +231,14 @@ export default defineComponent({
return
}
closeTimeout = closeTimeout || setTimeout(() => {
menuApi.value.closeMenu && menuApi.value.closeMenu()
if (menuApi.value.closeMenu) {
menuApi.value.closeMenu()
}
closeTimeout = null
}, props.closeDelay)
}
function onClick (e, item, { href, navigate, close, isExternal }) {
function onClick(e, item, { href, navigate, close, isExternal }) {
if (item.click) {
item.click(e)
}

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

@@ -27,7 +27,7 @@ export default defineComponent({
size: {
type: String as PropType<KbdSize>,
default: () => config.default.size,
validator (value: string) {
validator(value: string) {
return Object.keys(config.size).includes(value)
}
},
@@ -40,7 +40,7 @@ export default defineComponent({
default: () => ({})
}
},
setup (props) {
setup(props) {
const { ui, attrs } = useUI('kbd', toRef(props, 'ui'), config)
const kbdClass = computed(() => {

4
src/runtime/components/elements/Link.vue
View File

@@ -73,8 +73,8 @@ export default defineComponent({
default: undefined
}
},
setup (props) {
function resolveLinkClass (route, $route, { isActive, isExactActive }: { isActive: boolean, isExactActive: boolean }) {
setup(props) {
function resolveLinkClass(route, $route, { isActive, isExactActive }: { isActive: boolean, isExactActive: boolean }) {
if (props.exactQuery && !isEqual(route.query, $route.query)) {
return props.inactiveClass
}

12
src/runtime/components/elements/Meter.vue
View File

@@ -47,8 +47,8 @@ export default defineComponent({
},
inheritAttrs: false,
slots: Object as SlotsType<{
indicator?: { percent: number, value: number },
label?: { percent: number, value: number },
indicator?: { percent: number, value: number }
label?: { percent: number, value: number }
}>,
props: {
value: {
@@ -74,14 +74,14 @@ export default defineComponent({
size: {
type: String as PropType<MeterSize>,
default: () => config.default.size,
validator (value: string) {
validator(value: string) {
return Object.keys(config.meter.size).includes(value)
}
},
color: {
type: String as PropType<MeterColor>,
default: () => config.default.color,
validator (value: string) {
validator(value: string) {
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
@@ -98,10 +98,10 @@ export default defineComponent({
default: () => ({})
}
},
setup (props) {
setup(props) {
const { ui, attrs } = useUI('meter', toRef(props, 'ui'), config, toRef(props, 'class'))
function clampPercent (value: number, min: number, max: number): number {
function clampPercent(value: number, min: number, max: number): number {
if (min == max) {
return value < min ? 0 : 100
}

20
src/runtime/components/elements/MeterGroup.ts
View File

@@ -2,10 +2,10 @@ import { h, cloneVNode, computed, toRef, defineComponent } from 'vue'
import type { ComputedRef, VNode, SlotsType, PropType } from 'vue'
import { twJoin } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import Meter from './Meter.vue'
import { useUI } from '../../composables/useUI'
import { mergeConfig, getSlotsChildren } from '../../utils'
import type { Strategy, MeterSize } from '../../types/index'
import type Meter from './Meter.vue'
// @ts-expect-error
import appConfig from '#build/app.config'
import { meter, meterGroup } from '#ui/ui.config'
@@ -19,8 +19,8 @@ export default defineComponent({
},
inheritAttrs: false,
slots: Object as SlotsType<{
default?: typeof Meter[],
indicator?: { percent: number },
default?: typeof Meter[]
indicator?: { percent: number }
}>,
props: {
min: {
@@ -34,7 +34,7 @@ export default defineComponent({
size: {
type: String as PropType<MeterSize>,
default: () => meterConfig.default.size,
validator (value: string) {
validator(value: string) {
return Object.keys(meterConfig.meter.bar.size).includes(value)
}
},
@@ -55,7 +55,7 @@ export default defineComponent({
default: () => ({})
}
},
setup (props, { slots }) {
setup(props, { slots }) {
const { ui, attrs } = useUI('meterGroup', toRef(props, 'ui'), meterGroupConfig)
const { ui: uiMeter } = useUI('meter', undefined, meterConfig)
@@ -72,7 +72,7 @@ export default defineComponent({
const rounded = computed(() => ui.value.orientation[ui.value.rounded])
function clampPercent (value: number, min: number, max: number): number {
function clampPercent(value: number, min: number, max: number): number {
if (min == max) {
return value < min ? 0 : 100
}
@@ -138,9 +138,9 @@ export default defineComponent({
const clone = cloneVNode(node, vProps)
// @ts-expect-error
delete(clone.children?.label)
delete(clone.props?.indicator)
delete(clone.props?.label)
delete (clone.children?.label)
delete (clone.props?.indicator)
delete (clone.props?.label)
return clone
}))
@@ -196,7 +196,7 @@ export default defineComponent({
return h('li', { class: labelClass.value }, [
h(UIcon, { name: clones.value[key]?.props.icon ?? props.icon }),
`${label} (${ Math.round(percents.value[key]) }%)`
`${label} (${Math.round(percents.value[key])}%)`
])
}))

23
src/runtime/components/elements/Progress.vue
View File

@@ -58,21 +58,21 @@ export default defineComponent({
animation: {
type: String as PropType<ProgressAnimation>,
default: () => config.default.animation,
validator (value: string) {
validator(value: string) {
return Object.keys(config.animation).includes(value)
}
},
size: {
type: String as PropType<ProgressSize>,
default: () => config.default.size,
validator (value: string) {
validator(value: string) {
return Object.keys(config.progress.size).includes(value)
}
},
color: {
type: String as PropType<ProgressColor>,
default: () => config.default.color,
validator (value: string) {
validator(value: string) {
return appConfig.ui.colors.includes(value)
}
},
@@ -85,7 +85,7 @@ export default defineComponent({
default: () => ({})
}
},
setup (props) {
setup(props) {
const { ui, attrs } = useUI('progress', toRef(props, 'ui'), config, toRef(props, 'class'))
const indicatorContainerClass = computed(() => {
@@ -154,15 +154,15 @@ export default defineComponent({
)
})
function isActive (index: number) {
function isActive(index: number) {
return index === Number(props.value)
}
function isFirst (index: number) {
function isFirst(index: number) {
return index === 0
}
function stepClasses (index: string | number) {
function stepClasses(index: string | number) {
index = Number(index)
const classes = [stepClass.value]
@@ -199,9 +199,9 @@ export default defineComponent({
}
switch (true) {
case props.value < 0: return 0
case props.value > (realMax.value as number): return 100
default: return (props.value / (realMax.value as number)) * 100
case props.value < 0: return 0
case props.value > (realMax.value as number): return 100
default: return (props.value / (realMax.value as number)) * 100
}
})
@@ -421,4 +421,5 @@ progress:indeterminate {
width: 90%;
margin-left: 5%
}
}</style>
}
</style>

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

@@ -40,7 +40,7 @@ import type { DeepPartial, Strategy } from '../../types/index'
// @ts-expect-error
import appConfig from '#build/app.config'
import { checkbox } from '#ui/ui.config'
import colors from '#ui-colors'
import type colors from '#ui-colors'
import { useId } from '#app'
const config = mergeConfig<typeof checkbox>(appConfig.ui.strategy, appConfig.ui.checkbox, checkbox)
@@ -87,7 +87,7 @@ export default defineComponent({
color: {
type: String as PropType<typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
validator(value: string) {
return appConfig.ui.colors.includes(value)
}
},
@@ -105,17 +105,17 @@ export default defineComponent({
}
},
emits: ['update:modelValue', 'change'],
setup (props, { emit }) {
setup(props, { emit }) {
const { ui, attrs } = useUI('checkbox', toRef(props, 'ui'), config, toRef(props, 'class'))
const { emitFormChange, color, name, inputId: _inputId } = useFormGroup(props)
const inputId = _inputId.value ?? useId()
const toggle = computed({
get () {
get() {
return props.modelValue
},
set (value) {
set(value) {
emit('update:modelValue', value)
}
})

95
src/runtime/components/forms/Form.vue
View File

@@ -18,7 +18,7 @@ import type { FormError, FormEvent, FormEventType, FormSubmitEvent, FormErrorEve
import { useId } from '#imports'
class FormException extends Error {
constructor (message: string) {
constructor(message: string) {
super(message)
this.message = message
Object.setPrototypeOf(this, FormException.prototype)
@@ -29,14 +29,14 @@ export default defineComponent({
props: {
schema: {
type: [Object, Function] as
| PropType<ZodSchema>
| PropType<YupObjectSchema<any>>
| PropType<JoiSchema>
| PropType<ValibotSchema30 | ValibotSchemaAsync30>
| PropType<ValibotSchema31 | ValibotSchemaAsync31>
| PropType<ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any>>
| PropType<ValibotSchema | ValibotSchemaAsync>
| PropType<ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>> | PropType<Struct<any, any>>,
| PropType<ZodSchema>
| PropType<YupObjectSchema<any>>
| PropType<JoiSchema>
| PropType<ValibotSchema30 | ValibotSchemaAsync30>
| PropType<ValibotSchema31 | ValibotSchemaAsync31>
| PropType<ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any>>
| PropType<ValibotSchema | ValibotSchemaAsync>
| PropType<ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>> | PropType<Struct<any, any>>,
default: undefined
},
state: {
@@ -45,8 +45,8 @@ export default defineComponent({
},
validate: {
type: Function as
| PropType<(state: any) => Promise<FormError[]>>
| PropType<(state: any) => FormError[]>,
| PropType<(state: any) => Promise<FormError[]>>
| PropType<(state: any) => FormError[]>,
default: () => []
},
validateOn: {
@@ -55,7 +55,7 @@ export default defineComponent({
}
},
emits: ['submit', 'error'],
setup (props, { expose, emit }) {
setup(props, { expose, emit }) {
const formId = useId()
const bus = useEventBus<FormEvent>(`form-${formId}`)
@@ -77,7 +77,7 @@ export default defineComponent({
const inputs = ref({})
provide('form-inputs', inputs)
async function getErrors (): Promise<FormError[]> {
async function getErrors(): Promise<FormError[]> {
let errs = await props.validate(props.state)
if (props.schema) {
@@ -99,7 +99,7 @@ export default defineComponent({
return errs
}
async function validate (path?: string | string[], opts: { silent?: boolean } = { silent: false }) {
async function validate(path?: string | string[], opts: { silent?: boolean } = { silent: false }) {
let paths = path
if (path && !Array.isArray(path)) {
@@ -108,10 +108,10 @@ export default defineComponent({
if (paths) {
const otherErrors = errors.value.filter(
(error) => !paths.includes(error.path)
error => !paths.includes(error.path)
)
const pathErrors = (await getErrors()).filter(
(error) => paths.includes(error.path)
error => paths.includes(error.path)
)
errors.value = otherErrors.concat(pathErrors)
} else {
@@ -129,7 +129,7 @@ export default defineComponent({
return props.state
}
async function onSubmit (payload: Event) {
async function onSubmit(payload: Event) {
const event = payload as FormSubmitEvent<any>
try {
if (props.validateOn?.includes('submit')) {
@@ -144,7 +144,7 @@ export default defineComponent({
const errorEvent: FormErrorEvent = {
...event,
errors: errors.value.map((err) => ({
errors: errors.value.map(err => ({
...err,
id: inputs.value[err.path]
}))
@@ -156,27 +156,27 @@ export default defineComponent({
expose({
validate,
errors,
setErrors (errs: FormError[], path?: string) {
setErrors(errs: FormError[], path?: string) {
if (path) {
errors.value = errors.value.filter(
(error) => error.path !== path
error => error.path !== path
).concat(errs)
} else {
errors.value = errs
}
},
async submit () {
async submit() {
await onSubmit(new Event('submit'))
},
getErrors (path?: string) {
getErrors(path?: string) {
if (path) {
return errors.value.filter((err) => err.path === path)
return errors.value.filter(err => err.path === path)
}
return errors.value
},
clear (path?: string) {
clear(path?: string) {
if (path) {
errors.value = errors.value.filter((err) => err.path !== path)
errors.value = errors.value.filter(err => err.path !== path)
} else {
errors.value = []
}
@@ -190,24 +190,24 @@ export default defineComponent({
}
})
function isYupSchema (schema: any): schema is YupObjectSchema<any> {
function isYupSchema(schema: any): schema is YupObjectSchema<any> {
return schema.validate && schema.__isYupSchema__
}
function isYupError (error: any): error is YupError {
function isYupError(error: any): error is YupError {
return error.inner !== undefined
}
function isSuperStructSchema (schema: any): schema is Struct<any, any> {
function isSuperStructSchema(schema: any): schema is Struct<any, any> {
return (
'schema' in schema &&
typeof schema.coercer === 'function' &&
typeof schema.validator === 'function' &&
typeof schema.refiner === 'function'
'schema' in schema
&& typeof schema.coercer === 'function'
&& typeof schema.validator === 'function'
&& typeof schema.refiner === 'function'
)
}
async function getYupErrors (
async function getYupErrors(
state: any,
schema: YupObjectSchema<any>
): Promise<FormError[]> {
@@ -216,7 +216,7 @@ async function getYupErrors (
return []
} catch (error) {
if (isYupError(error)) {
return error.inner.map((issue) => ({
return error.inner.map(issue => ({
path: issue.path ?? '',
message: issue.message
}))
@@ -226,15 +226,15 @@ async function getYupErrors (
}
}
function isZodSchema (schema: any): schema is ZodSchema {
function isZodSchema(schema: any): schema is ZodSchema {
return schema.parse !== undefined
}
async function getSuperStructErrors (state: any, schema: Struct<any, any>): Promise<FormError[]> {
async function getSuperStructErrors(state: any, schema: Struct<any, any>): Promise<FormError[]> {
const [err] = schema.validate(state)
if (err) {
const errors = err.failures()
return errors.map((error) => ({
return errors.map(error => ({
message: error.message,
path: error.path.join('.')
}))
@@ -242,13 +242,13 @@ async function getSuperStructErrors (state: any, schema: Struct<any, any>): Prom
return []
}
async function getZodErrors (
async function getZodErrors(
state: any,
schema: ZodSchema
): Promise<FormError[]> {
const result = await schema.safeParseAsync(state)
if (result.success === false) {
return result.error.issues.map((issue) => ({
return result.error.issues.map(issue => ({
path: issue.path.join('.'),
message: issue.message
}))
@@ -256,15 +256,15 @@ async function getZodErrors (
return []
}
function isJoiSchema (schema: any): schema is JoiSchema {
function isJoiSchema(schema: any): schema is JoiSchema {
return schema.validateAsync !== undefined && schema.id !== undefined
}
function isJoiError (error: any): error is JoiError {
function isJoiError(error: any): error is JoiError {
return error.isJoi === true
}
async function getJoiErrors (
async function getJoiErrors(
state: any,
schema: JoiSchema
): Promise<FormError[]> {
@@ -273,7 +273,7 @@ async function getJoiErrors (
return []
} catch (error) {
if (isJoiError(error)) {
return error.details.map((detail) => ({
return error.details.map(detail => ({
path: detail.path.join('.'),
message: detail.message
}))
@@ -283,19 +283,18 @@ async function getJoiErrors (
}
}
function isValibotSchema (schema: any): schema is ValibotSchema30 | ValibotSchemaAsync30 | ValibotSchema31 | ValibotSchemaAsync31 | ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any> | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any> {
function isValibotSchema(schema: any): schema is ValibotSchema30 | ValibotSchemaAsync30 | ValibotSchema31 | ValibotSchemaAsync31 | ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any> | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any> {
return '_parse' in schema || '_run' in schema || (typeof schema === 'function' && 'schema' in schema)
}
async function getValibotError (
async function getValibotError(
state: any,
schema: ValibotSchema30 | ValibotSchemaAsync30 | ValibotSchema31 | ValibotSchemaAsync31 | ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any> | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>
): Promise<FormError[]> {
const result = await ('_parse' in schema ? schema._parse(state) : '_run' in schema ? schema._run({ typed: false, value: state }, {}) : schema(state))
return result.issues?.map((issue) => ({
return result.issues?.map(issue => ({
// We know that the key for a form schema is always a string or a number
path: issue.path?.map((item) => item.key).join('.') || '',
path: issue.path?.map(item => item.key).join('.') || '',
message: issue.message
})) || []
}

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

@@ -62,7 +62,7 @@ export default defineComponent({
size: {
type: String as PropType<FormGroupSize>,
default: null,
validator (value: string) {
validator(value: string) {
return Object.keys(config.size).includes(value)
}
},
@@ -103,7 +103,7 @@ export default defineComponent({
default: false
}
},
setup (props) {
setup(props) {
const { ui, attrs } = useUI('formGroup', toRef(props, 'ui'), config, toRef(props, 'class'))
const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
@@ -111,7 +111,7 @@ export default defineComponent({
const error = computed(() => {
return (props.error && typeof props.error === 'string') || typeof props.error === 'boolean'
? props.error
: formErrors?.value?.find((error) => error.path === props.name)?.message
: formErrors?.value?.find(error => error.path === props.name)?.message
})
const size = computed(() => ui.value.size[props.size ?? config.default.size])

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

@@ -34,8 +34,8 @@
import { ref, computed, toRef, onMounted, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { twMerge, twJoin } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import { defu } from 'defu'
import UIcon from '../elements/Icon.vue'
import { useUI } from '../../composables/useUI'
import { useFormGroup } from '../../composables/useFormGroup'
import { mergeConfig, looseToNumber } from '../../utils'
@@ -124,21 +124,21 @@ export default defineComponent({
size: {
type: String as PropType<InputSize>,
default: null,
validator (value: string) {
validator(value: string) {
return Object.keys(config.size).includes(value)
}
},
color: {
type: String as PropType<InputColor>,
default: () => config.default.color,
validator (value: string) {
validator(value: string) {
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String as PropType<InputVariant>,
default: () => config.default.variant,
validator (value: string) {
validator(value: string) {
return [
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
@@ -163,7 +163,7 @@ export default defineComponent({
}
},
emits: ['update:modelValue', 'blur', 'change'],
setup (props, { emit, slots }) {
setup(props, { emit, slots }) {
const { ui, attrs } = useUI('input', toRef(props, 'ui'), config, toRef(props, 'class'))
const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props })
@@ -184,7 +184,6 @@ export default defineComponent({
// Custom function to handle the v-model properties
const updateInput = (value: string) => {
if (modelModifiers.value.trim) {
value = value.trim()
}

18
src/runtime/components/forms/InputMenu.vue
View File

@@ -212,21 +212,21 @@ export default defineComponent({
size: {
type: String as PropType<InputSize>,
default: null,
validator (value: string) {
validator(value: string) {
return Object.keys(config.size).includes(value)
}
},
color: {
type: String as PropType<InputColor>,
default: () => config.default.color,
validator (value: string) {
validator(value: string) {
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String as PropType<InputVariant>,
default: () => config.default.variant,
validator (value: string) {
validator(value: string) {
return [
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
@@ -279,7 +279,7 @@ export default defineComponent({
}
},
emits: ['update:modelValue', 'update:query', 'open', 'close', 'change'],
setup (props, { emit, slots }) {
setup(props, { emit, slots }) {
const { ui, attrs } = useUI('input', toRef(props, 'ui'), config, toRef(props, 'class'))
const { ui: uiMenu } = useUI('inputMenu', toRef(props, 'uiMenu'), configMenu)
@@ -294,10 +294,10 @@ export default defineComponent({
const internalQuery = ref('')
const query = computed({
get () {
get() {
return props.query ?? internalQuery.value
},
set (value) {
set(value) {
internalQuery.value = value
emit('update:query', value)
}
@@ -401,7 +401,7 @@ export default defineComponent({
lazy: props.searchLazy
})
function escapeRegExp (string: string) {
function escapeRegExp(string: string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
}
@@ -434,7 +434,7 @@ export default defineComponent({
}
})
function onUpdate (value: any) {
function onUpdate(value: any) {
query.value = ''
emit('update:modelValue', value)
emit('change', value)
@@ -442,7 +442,7 @@ export default defineComponent({
emitFormChange()
}
function onQueryChange (event: any) {
function onQueryChange(event: any) {
query.value = event.target.value
}

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

@@ -39,7 +39,7 @@ import type { DeepPartial, Strategy } from '../../types/index'
// @ts-expect-error
import appConfig from '#build/app.config'
import { radio } from '#ui/ui.config'
import colors from '#ui-colors'
import type colors from '#ui-colors'
import { useId } from '#imports'
const config = mergeConfig<typeof radio>(appConfig.ui.strategy, appConfig.ui.radio, radio)
@@ -82,7 +82,7 @@ export default defineComponent({
color: {
type: String as PropType<typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
validator(value: string) {
return appConfig.ui.colors.includes(value)
}
},
@@ -100,7 +100,7 @@ export default defineComponent({
}
},
emits: ['update:modelValue', 'change'],
setup (props, { emit }) {
setup(props, { emit }) {
const { ui, attrs } = useUI('radio', toRef(props, 'ui'), config, toRef(props, 'class'))
const inputId = props.id ?? useId()
@@ -109,10 +109,10 @@ export default defineComponent({
const { emitFormChange, color, name } = radioGroup ?? useFormGroup(props, config)
const pick = computed({
get () {
get() {
return props.modelValue
},
set (value) {
set(value) {
emit('update:modelValue', value)
if (!radioGroup) {
emitFormChange()
@@ -120,7 +120,7 @@ export default defineComponent({
}
})
function onChange (event: Event) {
function onChange(event: Event) {
emit('change', (event.target as HTMLInputElement).value)
}

10
src/runtime/components/forms/RadioGroup.vue
View File

@@ -30,17 +30,17 @@
</template>
<script lang="ts">
import URadio from './Radio.vue'
import { computed, defineComponent, provide, toRef } from 'vue'
import type { PropType } from 'vue'
import { useUI } from '../../composables/useUI'
import { useFormGroup } from '../../composables/useFormGroup'
import { mergeConfig, get } from '../../utils'
import type { DeepPartial, Strategy } from '../../types/index'
import URadio from './Radio.vue'
// @ts-expect-error
import appConfig from '#build/app.config'
import { radioGroup, radio } from '#ui/ui.config'
import colors from '#ui-colors'
import type colors from '#ui-colors'
const config = mergeConfig<typeof radioGroup>(appConfig.ui.strategy, appConfig.ui.radioGroup, radioGroup)
const configRadio = mergeConfig<typeof radio>(appConfig.ui.strategy, appConfig.ui.radio, radio)
@@ -82,7 +82,7 @@ export default defineComponent({
color: {
type: String as PropType<typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
validator(value: string) {
return appConfig.ui.colors.includes(value)
}
},
@@ -100,7 +100,7 @@ export default defineComponent({
}
},
emits: ['update:modelValue', 'change'],
setup (props, { emit }) {
setup(props, { emit }) {
const { ui, attrs } = useUI('radioGroup', toRef(props, 'ui'), config, toRef(props, 'class'))
const { ui: uiRadio } = useUI('radio', toRef(props, 'uiRadio'), configRadio)
@@ -152,7 +152,7 @@ export default defineComponent({
uiRadio,
attrs,
normalizedOptions,
// eslint-disable-next-line vue/no-dupe-keys
onUpdate
}
}

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

@@ -67,14 +67,14 @@ export default defineComponent({
size: {
type: String as PropType<RangeSize>,
default: null,
validator (value: string) {
validator(value: string) {
return Object.keys(config.size).includes(value)
}
},
color: {
type: String as PropType<RangeColor>,
default: () => config.default.color,
validator (value: string) {
validator(value: string) {
return appConfig.ui.colors.includes(value)
}
},
@@ -92,16 +92,16 @@ export default defineComponent({
}
},
emits: ['update:modelValue', 'change'],
setup (props, { emit }) {
setup(props, { emit }) {
const { ui, attrs } = useUI('range', toRef(props, 'ui'), config)
const { emitFormChange, inputId, color, size, name } = useFormGroup(props, config)
const value = computed({
get () {
get() {
return props.modelValue
},
set (value) {
set(value) {
emit('update:modelValue', value)
}
})

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

@@ -137,21 +137,21 @@ export default defineComponent({
size: {
type: String as PropType<SelectSize>,
default: null,
validator (value: string) {
validator(value: string) {
return Object.keys(config.size).includes(value)
}
},
color: {
type: String as PropType<SelectColor>,
default: () => config.default.color,
validator (value: string) {
validator(value: string) {
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String as PropType<SelectVariant>,
default: () => config.default.variant,
validator (value: string) {
validator(value: string) {
return [
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
@@ -180,7 +180,7 @@ export default defineComponent({
}
},
emits: ['update:modelValue', 'change'],
setup (props, { emit, slots }) {
setup(props, { emit, slots }) {
const { ui, attrs } = useUI('select', toRef(props, 'ui'), config, toRef(props, 'class'))
const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props })

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

@@ -280,21 +280,21 @@ export default defineComponent({
size: {
type: String as PropType<SelectSize>,
default: null,
validator (value: string) {
validator(value: string) {
return Object.keys(config.size).includes(value)
}
},
color: {
type: String as PropType<SelectColor>,
default: () => config.default.color,
validator (value: string) {
validator(value: string) {
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String as PropType<SelectVariant>,
default: () => config.default.variant,
validator (value: string) {
validator(value: string) {
return [
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
@@ -335,7 +335,7 @@ export default defineComponent({
}
},
emits: ['update:modelValue', 'update:query', 'open', 'close', 'change'],
setup (props, { emit, slots }) {
setup(props, { emit, slots }) {
if (import.meta.dev && props.multiple && !Array.isArray(props.modelValue)) {
console.warn(`[@nuxt/ui] The USelectMenu components needs to have a modelValue of type Array when using the multiple prop. Got '${typeof props.modelValue}' instead.`, props.modelValue)
}
@@ -354,10 +354,10 @@ export default defineComponent({
const internalQuery = ref('')
const query = computed({
get () {
get() {
return props.query ?? internalQuery.value
},
set (value) {
set(value) {
internalQuery.value = value
emit('update:query', value)
}
@@ -485,7 +485,7 @@ export default defineComponent({
lazy: props.searchableLazy
})
function escapeRegExp (string: string) {
function escapeRegExp(string: string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
}
@@ -530,7 +530,7 @@ export default defineComponent({
return ['string', 'number'].includes(typeof props.modelValue) ? query.value : { [props.optionAttribute]: query.value }
})
function clearOnClose () {
function clearOnClose() {
if (props.clearSearchOnClose) {
query.value = ''
}
@@ -546,13 +546,13 @@ export default defineComponent({
}
})
function onUpdate (value: any) {
function onUpdate(value: any) {
emit('update:modelValue', value)
emit('change', value)
emitFormChange()
}
function onQueryChange (event: any) {
function onQueryChange(event: any) {
query.value = event.target.value
}

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

@@ -93,21 +93,21 @@ export default defineComponent({
size: {
type: String as PropType<TextareaSize>,
default: null,
validator (value: string) {
validator(value: string) {
return Object.keys(config.size).includes(value)
}
},
color: {
type: String as PropType<TextareaColor>,
default: () => config.default.color,
validator (value: string) {
validator(value: string) {
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String as PropType<TextareaVariant>,
default: () => config.default.variant,
validator (value: string) {
validator(value: string) {
return [
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
@@ -132,7 +132,7 @@ export default defineComponent({
}
},
emits: ['update:modelValue', 'blur', 'change'],
setup (props, { emit }) {
setup(props, { emit }) {
const { ui, attrs } = useUI('textarea', toRef(props, 'ui'), config, toRef(props, 'class'))
const { emitFormBlur, emitFormInput, inputId, color, size, name } = useFormGroup(props, config)
@@ -158,10 +158,10 @@ export default defineComponent({
textarea.value.style.overflow = 'hidden'
const styles = window.getComputedStyle(textarea.value)
const paddingTop = parseInt(styles.paddingTop)
const paddingBottom = parseInt(styles.paddingBottom)
const paddingTop = Number.parseInt(styles.paddingTop)
const paddingBottom = Number.parseInt(styles.paddingBottom)
const padding = paddingTop + paddingBottom
const lineHeight = parseInt(styles.lineHeight)
const lineHeight = Number.parseInt(styles.lineHeight)
const { scrollHeight } = textarea.value
const newRows = (scrollHeight - padding) / lineHeight

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

@@ -88,14 +88,14 @@ export default defineComponent({
color: {
type: String as PropType<ToggleColor>,
default: () => config.default.color,
validator (value: string) {
validator(value: string) {
return appConfig.ui.colors.includes(value)
}
},
size: {
type: String as PropType<ToggleSize>,
default: () => config.default.size,
validator (value: string) {
validator(value: string) {
return Object.keys(config.size).includes(value)
}
},
@@ -109,16 +109,16 @@ export default defineComponent({
}
},
emits: ['update:modelValue', 'change'],
setup (props, { emit }) {
setup(props, { emit }) {
const { ui, attrs } = useUI('toggle', toRef(props, 'ui'), config)
const { emitFormChange, color, inputId, name } = useFormGroup(props)
const active = computed({
get () {
get() {
return props.modelValue
},
set (value) {
set(value) {
emit('update:modelValue', value)
emit('change', value)

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

@@ -45,7 +45,7 @@ export default defineComponent({
default: () => ({})
}
},
setup (props) {
setup(props) {
const { ui, attrs } = useUI('card', toRef(props, 'ui'), config)
const cardClass = computed(() => {

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

@@ -33,7 +33,7 @@ export default defineComponent({
default: () => ({})
}
},
setup (props) {
setup(props) {
const { ui, attrs } = useUI('container', toRef(props, 'ui'), config)
const containerClass = computed(() => {

4
src/runtime/components/layout/Divider.vue
View File

@@ -55,7 +55,7 @@ export default defineComponent({
size: {
type: String as PropType<DividerSize>,
default: () => config.default.size,
validator (value: string) {
validator(value: string) {
return Object.keys(config.border.size.horizontal).includes(value) || Object.keys(config.border.size.vertical).includes(value)
}
},
@@ -78,7 +78,7 @@ export default defineComponent({
default: () => ({})
}
},
setup (props) {
setup(props) {
const { ui, attrs } = useUI('divider', toRef(props, 'ui'), config)
const wrapperClass = computed(() => {

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

@@ -31,7 +31,7 @@ export default defineComponent({
default: () => ({})
}
},
setup (props) {
setup(props) {
const { ui, attrs } = useUI('skeleton', toRef(props, 'ui'), config)
const skeletonClass = computed(() => {

2
src/runtime/components/navigation/Breadcrumb.vue
View File

@@ -72,7 +72,7 @@ export default defineComponent({
default: () => ({})
}
},
setup (props) {
setup(props) {
const { ui, attrs } = useUI('breadcrumb', toRef(props, 'ui'), config, toRef(props, 'class'))
return {

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

@@ -72,10 +72,10 @@ import { twJoin } from 'tailwind-merge'
import { defu } from 'defu'
import UIcon from '../elements/Icon.vue'
import UButton from '../elements/Button.vue'
import CommandPaletteGroup from './CommandPaletteGroup.vue'
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { Group, Command, Button, Strategy, DeepPartial } from '../../types/index'
import CommandPaletteGroup from './CommandPaletteGroup.vue'
// @ts-expect-error
import appConfig from '#build/app.config'
import { commandPalette } from '#ui/ui.config'
@@ -180,7 +180,7 @@ export default defineComponent({
}
},
emits: ['update:modelValue', 'close'],
setup (props, { emit, expose }) {
setup(props, { emit, expose }) {
const { ui, attrs } = useUI('commandPalette', toRef(props, 'ui'), config, toRef(props, 'class'))
const query = ref('')
@@ -228,7 +228,7 @@ export default defineComponent({
const { results } = useFuse(query, commands, options)
function getGroupWithCommands (group: Group, commands: Command[]) {
function getGroupWithCommands(group: Group, commands: Command[]) {
if (!group) {
return
}
@@ -269,13 +269,13 @@ export default defineComponent({
return getGroupWithCommands(group, commands)
}).filter(Boolean)
const searchGroups = props.groups.filter(group => !!group.search && searchResults.value[group.key]?.length).map(group => {
const searchGroups = props.groups.filter(group => !!group.search && searchResults.value[group.key]?.length).map((group) => {
const commands = (searchResults.value[group.key] || [])
return getGroupWithCommands(group, [...commands])
})
const staticGroups: Group[] = props.groups.filter((group) => group.static && group.commands?.length).map((group) => {
const staticGroups: Group[] = props.groups.filter(group => group.static && group.commands?.length).map((group) => {
return getGroupWithCommands(group, group.commands)
})
@@ -333,21 +333,21 @@ export default defineComponent({
// Methods
function activateFirstOption () {
function activateFirstOption() {
setTimeout(() => {
// https://github.com/tailwindlabs/headlessui/blob/6fa6074cd5d3a96f78a2d965392aa44101f5eede/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L804
comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent('keydown', { key: 'PageUp' }))
}, 0)
}
function activateNextOption () {
function activateNextOption() {
setTimeout(() => {
// https://github.com/tailwindlabs/headlessui/blob/6fa6074cd5d3a96f78a2d965392aa44101f5eede/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L769
comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
}, 0)
}
function onSelect (option: Command | Command[]) {
function onSelect(option: Command | Command[]) {
emit('update:modelValue', option, { query: query.value })
// Clear input after selection
@@ -358,7 +358,7 @@ export default defineComponent({
}
}
function onClear () {
function onClear() {
if (query.value) {
query.value = ''
} else {

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

@@ -77,7 +77,7 @@ import UIcon from '../elements/Icon.vue'
import UAvatar from '../elements/Avatar.vue'
import UKbd from '../elements/Kbd.vue'
import type { Command, Group } from '../../types/index'
import { commandPalette } from '#ui/ui.config'
import type { commandPalette } from '#ui/ui.config'
import { useId } from '#imports'
export default defineComponent({
@@ -113,14 +113,14 @@ export default defineComponent({
required: true
}
},
setup (props) {
setup(props) {
const label = computed(() => {
const label = props.group[props.groupAttribute]
return typeof label === 'function' ? label(props.query) : label
})
function highlight (text: string, { indices, value }: Command['matches'][number]): string {
function highlight(text: string, { indices, value }: Command['matches'][number]): string {
if (text === value) {
return ''
}

2
src/runtime/components/navigation/HorizontalNavigation.vue
View File

@@ -90,7 +90,7 @@ export default defineComponent({
default: () => ({})
}
},
setup (props) {
setup(props) {
const { ui, attrs } = useUI('horizontalNavigation', toRef(props, 'ui'), config, toRef(props, 'class'))
const sections = computed(() => (Array.isArray(props.links[0]) ? props.links : [props.links]) as HorizontalNavigationLink[][])

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

@@ -74,11 +74,11 @@
<script lang="ts">
import { computed, toRef, defineComponent } from 'vue'
import type { PropType } from 'vue'
import type { RouteLocationRaw } from '#vue-router'
import UButton from '../elements/Button.vue'
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { Button, ButtonSize, DeepPartial, Strategy } from '../../types/index'
import type { RouteLocationRaw } from '#vue-router'
// @ts-expect-error
import appConfig from '#build/app.config'
import { pagination, button } from '#ui/ui.config'
@@ -108,7 +108,7 @@ export default defineComponent({
max: {
type: Number,
default: 7,
validate (value) {
validate(value) {
return value >= 5 && value < Number.MAX_VALUE
}
},
@@ -119,7 +119,7 @@ export default defineComponent({
size: {
type: String as PropType<ButtonSize>,
default: () => config.default.size,
validator (value: string) {
validator(value: string) {
return Object.keys(buttonConfig.size).includes(value)
}
},
@@ -173,14 +173,14 @@ export default defineComponent({
}
},
emits: ['update:modelValue'],
setup (props, { emit }) {
setup(props, { emit }) {
const { ui, attrs } = useUI('pagination', toRef(props, 'ui'), config, toRef(props, 'class'))
const currentPage = computed({
get () {
get() {
return props.modelValue
},
set (value) {
set(value) {
emit('update:modelValue', value)
}
})
@@ -252,7 +252,7 @@ export default defineComponent({
const canGoFirstOrPrev = computed(() => currentPage.value > 1)
const canGoLastOrNext = computed(() => currentPage.value < pages.value.length)
function onClickFirst () {
function onClickFirst() {
if (!canGoFirstOrPrev.value) {
return
}
@@ -260,7 +260,7 @@ export default defineComponent({
currentPage.value = 1
}
function onClickLast () {
function onClickLast() {
if (!canGoLastOrNext.value) {
return
}
@@ -268,7 +268,7 @@ export default defineComponent({
currentPage.value = pages.value.length
}
function onClickPage (page: number | string) {
function onClickPage(page: number | string) {
if (typeof page === 'string') {
return
}
@@ -276,7 +276,7 @@ export default defineComponent({
currentPage.value = page
}
function onClickPrev () {
function onClickPrev() {
if (!canGoFirstOrPrev.value) {
return
}
@@ -284,7 +284,7 @@ export default defineComponent({
currentPage.value--
}
function onClickNext () {
function onClickNext() {
if (!canGoLastOrNext.value) {
return
}

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

@@ -114,7 +114,7 @@ export default defineComponent({
}
},
emits: ['update:modelValue', 'change'],
setup (props, { emit }) {
setup(props, { emit }) {
const { ui, attrs } = useUI('tabs', toRef(props, 'ui'), config, toRef(props, 'class'))
const listRef = ref<HTMLElement>()
@@ -125,7 +125,7 @@ export default defineComponent({
// Methods
function calcMarkerSize (index: number | undefined) {
function calcMarkerSize(index: number | undefined) {
// @ts-ignore
const tab = itemRefs.value[index]?.$el
if (!tab) {
@@ -142,7 +142,7 @@ export default defineComponent({
markerRef.value.style.height = `${tab.offsetHeight}px`
}
function onChange (index: number) {
function onChange(index: number) {
selectedIndex.value = index
emit('change', index)

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

@@ -93,7 +93,7 @@ export default defineComponent({
default: () => ({})
}
},
setup (props) {
setup(props) {
const { ui, attrs } = useUI('verticalNavigation', toRef(props, 'ui'), config, toRef(props, 'class'))
const sections = computed(() => (Array.isArray(props.links[0]) ? props.links : [props.links]) as VerticalNavigationLink[][])

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

@@ -54,16 +54,16 @@ export default defineComponent({
}
},
emits: ['update:modelValue', 'close'],
setup (props, { emit }) {
setup(props, { emit }) {
const { ui, attrs } = useUI('contextMenu', toRef(props, 'ui'), config)
const popper = computed<PopperOptions>(() => defu({}, props.popper, ui.value.popper as PopperOptions))
const isOpen = computed({
get () {
get() {
return props.modelValue
},
set (value) {
set(value) {
emit('update:modelValue', value)
}
})

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

@@ -14,7 +14,7 @@
ui.background,
ui.ring,
ui.shadow,
fullscreen ? ui.fullscreen : [ui.width, ui.height, ui.rounded, ui.margin],
fullscreen ? ui.fullscreen : [ui.width, ui.height, ui.rounded, ui.margin]
]"
>
<slot />
@@ -83,14 +83,14 @@ export default defineComponent({
}
},
emits: ['update:modelValue', 'close', 'close-prevented', 'after-leave'],
setup (props, { emit }) {
setup(props, { emit }) {
const { ui, attrs } = useUI('modal', toRef(props, 'ui'), config, toRef(props, 'class'))
const isOpen = computed({
get () {
get() {
return props.modelValue
},
set (value) {
set(value) {
emit('update:modelValue', value)
}
})
@@ -105,7 +105,7 @@ export default defineComponent({
}
})
function close (value: boolean) {
function close(value: boolean) {
if (props.preventClose) {
emit('close-prevented')

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

@@ -106,7 +106,7 @@ export default defineComponent({
color: {
type: String as PropType<NotificationColor>,
default: () => config.default.color,
validator (value: string) {
validator(value: string) {
return ['gray', ...appConfig.ui.colors].includes(value)
}
},
@@ -120,7 +120,7 @@ export default defineComponent({
}
},
emits: ['close'],
setup (props, { emit }) {
setup(props, { emit }) {
const { ui, attrs } = useUI('notification', toRef(props, 'ui'), config)
let timer: null | ReturnType<typeof useTimer> = null
@@ -156,19 +156,19 @@ export default defineComponent({
)
})
function onMouseover () {
function onMouseover() {
if (timer) {
timer.pause()
}
}
function onMouseleave () {
function onMouseleave() {
if (timer) {
timer.resume()
}
}
function onClose () {
function onClose() {
if (timer) {
timer.stop()
}
@@ -180,7 +180,7 @@ export default defineComponent({
emit('close')
}
function onAction (action: NotificationAction) {
function onAction(action: NotificationAction) {
if (timer) {
timer.stop()
}
@@ -192,7 +192,7 @@ export default defineComponent({
emit('close')
}
function initTimer () {
function initTimer() {
if (timer) {
timer.stop()
}

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

@@ -23,11 +23,11 @@
import { computed, toRef, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { twMerge, twJoin } from 'tailwind-merge'
import UNotification from './Notification.vue'
import { useUI } from '../../composables/useUI'
import { useToast } from '../../composables/useToast'
import { mergeConfig } from '../../utils'
import type { DeepPartial, Notification, Strategy } from '../../types/index'
import UNotification from './Notification.vue'
import { useState } from '#imports'
// @ts-expect-error
import appConfig from '#build/app.config'
@@ -50,7 +50,7 @@ export default defineComponent({
default: () => ({})
}
},
setup (props) {
setup(props) {
const { ui, attrs } = useUI('notifications', toRef(props, 'ui'), config)
const toast = useToast()

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

@@ -98,7 +98,7 @@ export default defineComponent({
}
},
emits: ['update:open'],
setup (props, { emit }) {
setup(props, { emit }) {
const { ui, attrs } = useUI('popover', toRef(props, 'ui'), config, toRef(props, 'class'))
const popper = computed<PopperOptions>(() => defu(props.mode === 'hover' ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper as PopperOptions))
@@ -154,7 +154,7 @@ export default defineComponent({
}
})
function onTouchStart (event: TouchEvent) {
function onTouchStart(event: TouchEvent) {
if (!event.cancelable || !popoverApi.value || props.mode === 'click') {
return
}
@@ -166,7 +166,7 @@ export default defineComponent({
}
}
function onMouseEnter () {
function onMouseEnter() {
if (props.mode !== 'hover' || !popoverApi.value) {
return
}
@@ -181,12 +181,14 @@ export default defineComponent({
return
}
openTimeout = openTimeout || setTimeout(() => {
popoverApi.value.togglePopover && popoverApi.value.togglePopover()
if (popoverApi.value.togglePopover) {
popoverApi.value.togglePopover()
}
openTimeout = null
}, props.openDelay)
}
function onMouseLeave () {
function onMouseLeave() {
if (props.mode !== 'hover' || !popoverApi.value) {
return
}
@@ -201,7 +203,9 @@ export default defineComponent({
return
}
closeTimeout = closeTimeout || setTimeout(() => {
popoverApi.value.closePopover && popoverApi.value.closePopover()
if (popoverApi.value.closePopover) {
popoverApi.value.closePopover()
}
closeTimeout = null
}, props.closeDelay)
}

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

@@ -72,14 +72,14 @@ export default defineComponent({
}
},
emits: ['update:modelValue', 'close', 'close-prevented', 'after-leave'],
setup (props, { emit }) {
setup(props, { emit }) {
const { ui, attrs } = useUI('slideover', toRef(props, 'ui'), config, toRef(props, 'class'))
const isOpen: WritableComputedRef<boolean> = computed({
get () {
get() {
return props.modelValue
},
set (value) {
set(value) {
emit('update:modelValue', value)
}
})
@@ -96,25 +96,25 @@ export default defineComponent({
let enterFrom, leaveTo
switch (props.side) {
case 'left':
enterFrom = ui.value.translate.left
leaveTo = ui.value.translate.left
break
case 'right':
enterFrom = ui.value.translate.right
leaveTo = ui.value.translate.right
break
case 'top':
enterFrom = ui.value.translate.top
leaveTo = ui.value.translate.top
break
case 'bottom':
enterFrom = ui.value.translate.bottom
leaveTo = ui.value.translate.bottom
break
default:
enterFrom = ui.value.translate.right
leaveTo = ui.value.translate.right
case 'left':
enterFrom = ui.value.translate.left
leaveTo = ui.value.translate.left
break
case 'right':
enterFrom = ui.value.translate.right
leaveTo = ui.value.translate.right
break
case 'top':
enterFrom = ui.value.translate.top
leaveTo = ui.value.translate.top
break
case 'bottom':
enterFrom = ui.value.translate.bottom
leaveTo = ui.value.translate.bottom
break
default:
enterFrom = ui.value.translate.right
leaveTo = ui.value.translate.right
}
return {
@@ -128,21 +128,20 @@ export default defineComponent({
const sideType = computed(() => {
switch (props.side) {
case 'left':
return 'horizontal'
case 'right':
return 'horizontal'
case 'top':
return 'vertical'
case 'bottom':
return 'vertical'
default:
return 'right'
case 'left':
return 'horizontal'
case 'right':
return 'horizontal'
case 'top':
return 'vertical'
case 'bottom':
return 'vertical'
default:
return 'right'
}
})
function close (value: boolean) {
function close(value: boolean) {
if (props.preventClose) {
emit('close-prevented')

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

@@ -40,8 +40,6 @@ import type { DeepPartial, PopperOptions, Strategy } from '../../types/index'
// @ts-expect-error
import appConfig from '#build/app.config'
import { tooltip } from '#ui/ui.config'
// import useslots
const config = mergeConfig<typeof tooltip>(appConfig.ui.strategy, appConfig.ui.tooltip, tooltip)
@@ -84,7 +82,7 @@ export default defineComponent({
default: () => ({})
}
},
setup (props) {
setup(props) {
const { ui, attrs } = useUI('tooltip', toRef(props, 'ui'), config, toRef(props, 'class'))
const popper = computed<PopperOptions>(() => defu({}, props.popper, ui.value.popper as PopperOptions))
@@ -100,7 +98,7 @@ export default defineComponent({
// Methods
function onMouseEnter () {
function onMouseEnter() {
// cancel programmed closing
if (closeTimeout) {
clearTimeout(closeTimeout)
@@ -116,7 +114,7 @@ export default defineComponent({
}, props.openDelay)
}
function onMouseLeave () {
function onMouseLeave() {
// cancel programmed opening
if (openTimeout) {
clearTimeout(openTimeout)

28
src/runtime/composables/defineShortcuts.ts
View File

@@ -32,7 +32,9 @@ interface Shortcut {
// keyCode?: number
}
// eslint-disable-next-line regexp/no-super-linear-backtracking
const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/
// eslint-disable-next-line regexp/no-super-linear-backtracking
const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/
export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptions = {}) => {
@@ -48,9 +50,11 @@ export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptio
const onKeyDown = (e: KeyboardEvent) => {
// Input autocomplete triggers a keydown event
if (!e.key) { return }
if (!e.key) {
return
}
const alphabeticalKey = /^[a-z]{1}$/i.test(e.key)
const alphabeticalKey = /^[a-z]$/i.test(e.key)
let chainedKey
chainedInputs.value.push(e.key)
@@ -59,7 +63,9 @@ export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptio
chainedKey = chainedInputs.value.slice(-2).join('-')
for (const shortcut of shortcuts.filter(s => s.chained)) {
if (shortcut.key !== chainedKey) { continue }
if (shortcut.key !== chainedKey) {
continue
}
if (shortcut.condition.value) {
e.preventDefault()
@@ -72,12 +78,20 @@ export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptio
// try matching a standard shortcut
for (const shortcut of shortcuts.filter(s => !s.chained)) {
if (e.key.toLowerCase() !== shortcut.key) { continue }
if (e.metaKey !== shortcut.metaKey) { continue }
if (e.ctrlKey !== shortcut.ctrlKey) { continue }
if (e.key.toLowerCase() !== shortcut.key) {
continue
}
if (e.metaKey !== shortcut.metaKey) {
continue
}
if (e.ctrlKey !== shortcut.ctrlKey) {
continue
}
// shift modifier is only checked in combination with alphabetical keys
// (shift with non-alphabetical keys would change the key)
if (alphabeticalKey && e.shiftKey !== shortcut.shiftKey) { continue }
if (alphabeticalKey && e.shiftKey !== shortcut.shiftKey) {
continue
}
// alt modifier changes the combined key anyways
// if (e.altKey !== shortcut.altKey) { continue }

10
src/runtime/composables/useButtonGroup.ts
View File

@@ -1,6 +1,6 @@
import { computed, ref, provide, inject, onMounted, onUnmounted, getCurrentInstance } from 'vue'
import type { Ref, ComponentInternalInstance } from 'vue'
import { buttonGroup } from '#ui/ui.config'
import type { buttonGroup } from '#ui/ui.config'
type ButtonGroupProps = {
orientation?: Ref<'horizontal' | 'vertical'>
@@ -20,15 +20,15 @@ type ButtonGroupContext = {
rounded: { start: string, end: string }
}
export function useProvideButtonGroup (buttonGroupProps: ButtonGroupProps) {
export function useProvideButtonGroup(buttonGroupProps: ButtonGroupProps) {
const instance = getCurrentInstance()
const groupKey = `group-${instance.uid}`
const state = ref({
children: [],
register (child) {
register(child) {
this.children.push(child)
},
unregister (child) {
unregister(child) {
const index = this.children.indexOf(child)
if (index > -1) {
this.children.splice(index, 1)
@@ -39,7 +39,7 @@ export function useProvideButtonGroup (buttonGroupProps: ButtonGroupProps) {
provide(groupKey, state as Ref<ButtonGroupContext>)
}
export function useInjectButtonGroup ({ ui, props }: { ui: any, props: any }) {
export function useInjectButtonGroup({ ui, props }: { ui: any, props: any }) {
const instance = getCurrentInstance()
provide('ButtonGroupContextConsumer', true)

6
src/runtime/composables/useCarouselScroll.ts
View File

@@ -3,7 +3,7 @@ import { ref, type Ref, onMounted, onUnmounted } from 'vue'
export const useCarouselScroll = (el: Ref<HTMLElement>) => {
const x = ref<number>(0)
function onMouseDown (e) {
function onMouseDown(e) {
el.value.style.scrollSnapType = 'none'
el.value.style.scrollBehavior = 'auto'
@@ -13,7 +13,7 @@ export const useCarouselScroll = (el: Ref<HTMLElement>) => {
window.addEventListener('mouseup', onMouseUp)
}
function onMouseUp () {
function onMouseUp() {
el.value.style.removeProperty('scroll-behavior')
el.value.style.removeProperty('scroll-snap-type')
el.value.style.removeProperty('pointer-events')
@@ -22,7 +22,7 @@ export const useCarouselScroll = (el: Ref<HTMLElement>) => {
window.removeEventListener('mouseup', onMouseUp)
}
function onMouseMove (e) {
function onMouseMove(e) {
e.preventDefault()
el.value.style.pointerEvents = 'none'

4
src/runtime/composables/useCopyToClipboard.ts
View File

@@ -2,11 +2,11 @@ import { useClipboard } from '@vueuse/core'
import type { Notification } from '../types/notification'
import { useToast } from './useToast'
export function useCopyToClipboard (options: Partial<Notification> = {}) {
export function useCopyToClipboard(options: Partial<Notification> = {}) {
const { copy: copyToClipboard, isSupported } = useClipboard()
const toast = useToast()
function copy (text: string, success: { title?: string, description?: string } = {}, failure: { title?: string, description?: string } = {}) {
function copy(text: string, success: { title?: string, description?: string } = {}, failure: { title?: string, description?: string } = {}) {
if (!isSupported) {
return
}

7
src/runtime/composables/useFormGroup.ts
View File

@@ -11,7 +11,6 @@ type InputProps = {
legend?: string | null
}
export const useFormGroup = (inputProps?: InputProps, config?: any, bind: boolean = true) => {
const formBus = inject<UseEventBusReturn<FormEvent, string> | undefined>('form-events', undefined)
const formGroup = inject<InjectedFormGroupValue | undefined>('form-group', undefined)
@@ -32,18 +31,18 @@ export const useFormGroup = (inputProps?: InputProps, config?: any, bind: boolea
const blurred = ref(false)
function emitFormEvent (type: FormEventType, path: string) {
function emitFormEvent(type: FormEventType, path: string) {
if (formBus) {
formBus.emit({ type, path })
}
}
function emitFormBlur () {
function emitFormBlur() {
emitFormEvent('blur', formGroup?.name.value as string)
blurred.value = true
}
function emitFormChange () {
function emitFormChange() {
emitFormEvent('change', formGroup?.name.value as string)
}

10
src/runtime/composables/useModal.ts
View File

@@ -6,12 +6,12 @@ import type { Modal, ModalState } from '../types/modal'
export const modalInjectionKey: InjectionKey<ShallowRef<ModalState>> = Symbol('nuxt-ui.modal')
function _useModal () {
function _useModal() {
const modalState = inject(modalInjectionKey)
const isOpen = ref(false)
function open<T extends Component> (component: T, props?: Modal & ComponentProps<T>) {
function open<T extends Component>(component: T, props?: Modal & ComponentProps<T>) {
if (!modalState) {
throw new Error('useModal() is called without provider')
}
@@ -24,13 +24,13 @@ function _useModal () {
isOpen.value = true
}
async function close () {
async function close() {
if (!modalState) return
isOpen.value = false
}
function reset () {
function reset() {
modalState.value = {
component: 'div',
props: {}
@@ -40,7 +40,7 @@ function _useModal () {
/**
* Allows updating the modal props
*/
function patch <T extends Component = {}> (props: Partial<Modal & ComponentProps<T>>) {
function patch<T extends Component = {}>(props: Partial<Modal & ComponentProps<T>>) {
if (!modalState) return
modalState.value = {

18
src/runtime/composables/usePopper.ts
View File

@@ -17,7 +17,7 @@ export const createPopper = popperGenerator({
defaultModifiers: [...defaultModifiers, offset, flip, preventOverflow, computeStyles, eventListeners, arrowModifier]
})
export function usePopper ({
export function usePopper({
locked = false,
overflowPadding = 8,
offsetDistance = 8,
@@ -36,15 +36,23 @@ export function usePopper ({
onMounted(() => {
watchEffect((onInvalidate) => {
if (!popper.value) { return }
if (!reference.value && !virtualReference?.value) { return }
if (!popper.value) {
return
}
if (!reference.value && !virtualReference?.value) {
return
}
const popperEl = unrefElement(popper)
const referenceEl = virtualReference?.value || unrefElement(reference)
// if (!(referenceEl instanceof HTMLElement)) { return }
if (!(popperEl instanceof HTMLElement)) { return }
if (!referenceEl) { return }
if (!(popperEl instanceof HTMLElement)) {
return
}
if (!referenceEl) {
return
}
const config: Record<string, any> = {
modifiers: [

10
src/runtime/composables/useSlideover.ts
View File

@@ -6,12 +6,12 @@ import type { Slideover, SlideoverState } from '../types/slideover'
export const slidOverInjectionKey: InjectionKey<ShallowRef<SlideoverState>> = Symbol('nuxt-ui.slideover')
function _useSlideover () {
function _useSlideover() {
const slideoverState = inject(slidOverInjectionKey)
const isOpen = ref(false)
function open<T extends Component> (component: T, props?: Slideover & ComponentProps<T>) {
function open<T extends Component>(component: T, props?: Slideover & ComponentProps<T>) {
if (!slideoverState) {
throw new Error('useSlideover() is called without provider')
}
@@ -24,13 +24,13 @@ function _useSlideover () {
isOpen.value = true
}
async function close () {
async function close() {
if (!slideoverState) return
isOpen.value = false
}
function reset () {
function reset() {
slideoverState.value = {
component: 'div',
props: {}
@@ -40,7 +40,7 @@ function _useSlideover () {
/**
* Allows updating the slideover props
*/
function patch<T extends Component = {}> (props: Partial<Slideover & ComponentProps<T>>) {
function patch<T extends Component = {}>(props: Partial<Slideover & ComponentProps<T>>) {
if (!slideoverState) return
slideoverState.value = {

14
src/runtime/composables/useTimer.ts
View File

@@ -2,7 +2,7 @@ import { ref, computed } from 'vue-demi'
import { useTimestamp } from '@vueuse/core'
import type { UseTimestampOptions } from '@vueuse/core'
export function useTimer (cb: (...args: unknown[]) => any, interval: number, options?: UseTimestampOptions<true>) {
export function useTimer(cb: (...args: unknown[]) => any, interval: number, options?: UseTimestampOptions<true>) {
let timer: number | null = null
const { pause: tPause, resume: tResume, timestamp } = useTimestamp({ ...(options || {}), controls: true })
const startTime = ref<number | null>(null)
@@ -14,7 +14,7 @@ export function useTimer (cb: (...args: unknown[]) => any, interval: number, opt
return interval - (timestamp.value - startTime.value)
})
function set (...args: unknown[]) {
function set(...args: unknown[]) {
timer = setTimeout(() => {
timer = null
startTime.value = null
@@ -22,30 +22,30 @@ export function useTimer (cb: (...args: unknown[]) => any, interval: number, opt
}, remaining.value) as unknown as number
}
function clear () {
function clear() {
if (timer) {
clearTimeout(timer)
timer = null
}
}
function start () {
function start() {
startTime.value = Date.now()
set()
}
function stop () {
function stop() {
clear()
tPause()
}
function pause () {
function pause() {
clear()
tPause()
}
function resume () {
function resume() {
set()
tResume()
startTime.value = (startTime.value || 0) + (Date.now() - timestamp.value)

10
src/runtime/composables/useToast.ts
View File

@@ -1,10 +1,10 @@
import type { Notification } from '../types/notification'
import { useState } from '#imports'
export function useToast () {
export function useToast() {
const notifications = useState<Notification[]>('notifications', () => [])
function add (notification: Partial<Notification>) {
function add(notification: Partial<Notification>) {
const body = {
id: new Date().getTime().toString(),
...notification
@@ -18,11 +18,11 @@ export function useToast () {
return body
}
function remove (id: string) {
function remove(id: string) {
notifications.value = notifications.value.filter((n: Notification) => n.id !== id)
}
function update (id: string, notification: Partial<Notification>) {
function update(id: string, notification: Partial<Notification>) {
const index = notifications.value.findIndex((n: Notification) => n.id === id)
if (index !== -1) {
const previous = notifications.value[index]
@@ -30,7 +30,7 @@ export function useToast () {
}
}
function clear () {
function clear() {
notifications.value = []
}

2
src/runtime/composables/useUI.ts
View File

@@ -1,8 +1,8 @@
import { computed, toValue, useAttrs } from 'vue'
import type { Ref } from 'vue'
import { useAppConfig } from '#imports'
import { mergeConfig, omit, get } from '../utils'
import type { DeepPartial, Strategy } from '../types/index'
import { useAppConfig } from '#imports'
export const useUI = <T>(key, $ui?: Ref<DeepPartial<T> & { strategy?: Strategy } | undefined>, $config?: Ref<T> | T, $wrapperClass?: Ref<string>, withAppConfig: boolean = false) => {
const $attrs = useAttrs()

4
src/runtime/plugins/modals.ts
View File

@@ -1,7 +1,7 @@
import { defineNuxtPlugin } from '#imports'
import { shallowRef } from 'vue'
import { modalInjectionKey } from '../composables/useModal'
import type { ModalState } from '../types/modal'
import { defineNuxtPlugin } from '#imports'
export default defineNuxtPlugin((nuxtApp) => {
const modalState = shallowRef<ModalState>({
@@ -10,4 +10,4 @@ export default defineNuxtPlugin((nuxtApp) => {
})
nuxtApp.vueApp.provide(modalInjectionKey, modalState)
})
})

2
src/runtime/plugins/slideovers.ts
View File

@@ -1,7 +1,7 @@
import { defineNuxtPlugin } from '#imports'
import { shallowRef } from 'vue'
import { slidOverInjectionKey } from '../composables/useSlideover'
import type { SlideoverState } from '../types/slideover'
import { defineNuxtPlugin } from '#imports'
export default defineNuxtPlugin((nuxtApp) => {
const slideoverState = shallowRef<SlideoverState>({

8
src/runtime/types/alert.d.ts vendored
View File

@@ -1,8 +1,8 @@
import { alert } from '../ui.config'
import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
import type { Button } from './button'
import colors from '#ui-colors'
import type { AppConfig } from 'nuxt/schema'
import type { alert } from '../ui.config'
import type { Button } from './button'
import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
import type colors from '#ui-colors'
export type AlertColor = keyof typeof alert.color | ExtractDeepKey<AppConfig, ['ui', 'alert', 'color']> | typeof colors[number]
export type AlertVariant = keyof typeof alert.variant | ExtractDeepKey<AppConfig, ['ui', 'alert', 'variant']> | NestedKeyOf<typeof alert.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'alert', 'color']>>

6
src/runtime/types/avatar.d.ts vendored
View File

@@ -1,7 +1,7 @@
import { avatar } from '../ui.config'
import type { ExtractDeepKey } from '.'
import colors from '#ui-colors'
import type { AppConfig } from 'nuxt/schema'
import type { avatar } from '../ui.config'
import type { ExtractDeepKey } from '.'
import type colors from '#ui-colors'
export type AvatarSize = keyof typeof avatar.size | ExtractDeepKey<AppConfig, ['ui', 'avatar', 'size']>
export type AvatarChipColor = 'gray' | typeof colors[number]

6
src/runtime/types/badge.d.ts vendored
View File

@@ -1,7 +1,7 @@
import { badge } from '../ui.config'
import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
import colors from '#ui-colors'
import type { AppConfig } from 'nuxt/schema'
import type { badge } from '../ui.config'
import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
import type colors from '#ui-colors'
export type BadgeSize = keyof typeof badge.size | ExtractDeepKey<AppConfig, ['ui', 'badge', 'size']>
export type BadgeColor = keyof typeof badge.color | ExtractDeepKey<AppConfig, ['ui', 'badge', 'color']> | typeof colors[number]

8
src/runtime/types/button.d.ts vendored
View File

@@ -1,8 +1,8 @@
import type { Link } from './link'
import { button } from '../ui.config'
import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
import colors from '#ui-colors'
import type { AppConfig } from 'nuxt/schema'
import type { button } from '../ui.config'
import type { Link } from './link'
import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
import type colors from '#ui-colors'
export type ButtonSize = keyof typeof button.size | ExtractDeepKey<AppConfig, ['ui', 'button', 'size']>
export type ButtonColor = keyof typeof button.color | ExtractDeepKey<AppConfig, ['ui', 'button', 'color']> | typeof colors[number]

4
src/runtime/types/chip.d.ts vendored
View File

@@ -1,5 +1,5 @@
import { chip } from '../ui.config'
import colors from '#ui-colors'
import type { chip } from '../ui.config'
import type colors from '#ui-colors'
export type ChipSize = keyof typeof chip.size
export type ChipColor = 'gray' | typeof colors[number]

4
src/runtime/types/command-palette.d.ts vendored
View File

@@ -1,4 +1,4 @@
import { FuseResultMatch } from 'fuse.js'
import type { FuseResultMatch } from 'fuse.js'
import type { Avatar } from './avatar'
export interface Command {
@@ -24,6 +24,6 @@ export interface Group {
commands?: Command[]
search?: (...args: any[]) => any[] | Promise<any[]>
filter?: (...args: any[]) => Command[]
static?: Boolean
static?: boolean
[key: string]: any
}

6
src/runtime/types/component.d.ts vendored
View File

@@ -5,10 +5,10 @@ T extends new () => { $props: infer P } ? NonNullable<P> :
export type ComponentSlots<T> =
T extends new () => { $slots: infer S } ? NonNullable<S> :
T extends (props: any, ctx: { slots: infer S; attrs: any; emit: any }, ...args: any) => any ? NonNullable<S> :
T extends (props: any, ctx: { slots: infer S, attrs: any, emit: any }, ...args: any) => any ? NonNullable<S> :
{}
export type ComponentEmit<T> =
T extends new () => { $emit: infer E } ? NonNullable<E> :
T extends (props: any, ctx: { slots: any; attrs: any; emit: infer E }, ...args: any) => any ? NonNullable<E> :
{}
T extends (props: any, ctx: { slots: any, attrs: any, emit: infer E }, ...args: any) => any ? NonNullable<E> :
{}

6
src/runtime/types/divider.d.ts vendored
View File

@@ -1,3 +1,3 @@
import { divider } from '#ui/ui.config'
export type DividerSize = keyof typeof divider.border.size.horizontal | keyof typeof divider.border.size.vertical
import type { divider } from '#ui/ui.config'
export type DividerSize = keyof typeof divider.border.size.horizontal | keyof typeof divider.border.size.vertical

2
src/runtime/types/dropdown.d.ts vendored
View File

@@ -1,5 +1,5 @@
import type { NuxtLinkProps } from '#app'
import type { Avatar } from './avatar'
import type { NuxtLinkProps } from '#app'
export interface DropdownItem extends NuxtLinkProps {
label: string

4
src/runtime/types/form-group.d.ts vendored
View File

@@ -1,5 +1,5 @@
import { formGroup } from '../ui.config'
import type { ExtractDeepKey } from '.'
import type { AppConfig } from 'nuxt/schema'
import type { formGroup } from '../ui.config'
import type { ExtractDeepKey } from '.'
export type FormGroupSize = keyof typeof formGroup.size | ExtractDeepKey<AppConfig, ['ui', 'formGroup', 'size']>

4
src/runtime/types/form.d.ts vendored
View File

@@ -10,8 +10,8 @@ export interface FormErrorWithId extends FormError {
}
export interface Form<T> {
validate(path?: string | string[], opts?: { silent?: true }): Promise<T | false>;
validate(path?: string | string[], opts?: { silent?: false }): Promise<T>;
validate(path?: string | string[], opts?: { silent?: true }): Promise<T | false>
validate(path?: string | string[], opts?: { silent?: false }): Promise<T>
clear(path?: string): void
errors: Ref<FormError[]>
setErrors(errs: FormError[], path?: string): void

6
src/runtime/types/input.d.ts vendored
View File

@@ -1,7 +1,7 @@
import { input } from '../ui.config'
import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
import colors from '#ui-colors'
import type { AppConfig } from 'nuxt/schema'
import type { input } from '../ui.config'
import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
import type colors from '#ui-colors'
export type InputSize = keyof typeof input.size | ExtractDeepKey<AppConfig, ['ui', 'input', 'size']>
export type InputColor = keyof typeof input.color | ExtractDeepKey<AppConfig, ['ui', 'input', 'color']> | typeof colors[number]

4
src/runtime/types/kbd.d.ts vendored
View File

@@ -1,5 +1,5 @@
import { kbd } from '../ui.config'
import type { ExtractDeepKey } from '.'
import type { AppConfig } from 'nuxt/schema'
import type { kbd } from '../ui.config'
import type { ExtractDeepKey } from '.'
export type KbdSize = keyof typeof kbd.size | ExtractDeepKey<AppConfig, ['ui', 'kbd', 'size']>

4
src/runtime/types/meter.d.ts vendored
View File

@@ -1,5 +1,5 @@
import { meter } from '../ui.config'
import colors from '#ui-colors'
import type { meter } from '../ui.config'
import type colors from '#ui-colors'
export type MeterSize = keyof typeof meter.meter.size
export type MeterColor = keyof typeof meter.color | typeof colors[number]

4
src/runtime/types/modal.d.ts vendored
View File

@@ -6,7 +6,7 @@ export interface Modal {
transition?: boolean
preventClose?: boolean
fullscreen?: boolean
class?: string | Object | string[]
class?: string | object | string[]
ui?: any
onClose?: () => void
onClosePrevented?: () => void
@@ -15,4 +15,4 @@ export interface Modal {
export interface ModalState {
component: Component | string
props: Modal
}
}

2
src/runtime/types/notification.d.ts vendored
View File

@@ -1,6 +1,6 @@
import type { Avatar } from './avatar'
import type { Button } from './button'
import colors from '#ui-colors'
import type colors from '#ui-colors'
export type NotificationColor = 'gray' | typeof colors[number]

4
src/runtime/types/progress.d.ts vendored
View File

@@ -1,5 +1,5 @@
import { progress } from '../ui.config'
import colors from '#ui-colors'
import type { progress } from '../ui.config'
import type colors from '#ui-colors'
export type ProgressSize = keyof typeof progress.progress.size
export type ProgressAnimation = keyof typeof progress.animation

6
src/runtime/types/range.d.ts vendored
View File

@@ -1,7 +1,7 @@
import { range } from '../ui.config'
import type { ExtractDeepKey } from '.'
import type { AppConfig } from 'nuxt/schema'
import colors from '#ui-colors'
import type { range } from '../ui.config'
import type { ExtractDeepKey } from '.'
import type colors from '#ui-colors'
export type RangeSize = keyof typeof range.size | ExtractDeepKey<AppConfig, ['ui', 'range', 'size']>
export type RangeColor = typeof colors[number]

6
src/runtime/types/select.d.ts vendored
View File

@@ -1,7 +1,7 @@
import { select } from '../ui.config'
import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
import colors from '#ui-colors'
import type { AppConfig } from 'nuxt/schema'
import type { select } from '../ui.config'
import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
import type colors from '#ui-colors'
export type SelectSize = keyof typeof select.size | ExtractDeepKey<AppConfig, ['ui', 'select', 'size']>
export type SelectColor = keyof typeof select.color | ExtractDeepKey<AppConfig, ['ui', 'select', 'color']> | typeof colors[number]

6
src/runtime/types/textarea.d.ts vendored
View File

@@ -1,7 +1,7 @@
import { textarea } from '../ui.config'
import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
import colors from '#ui-colors'
import type { AppConfig } from 'nuxt/schema'
import type { textarea } from '../ui.config'
import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
import type colors from '#ui-colors'
export type TextareaSize = keyof typeof textarea.size | ExtractDeepKey<AppConfig, ['ui', 'textarea', 'size']>
export type TextareaColor = keyof typeof textarea.color | ExtractDeepKey<AppConfig, ['ui', 'textarea', 'color']> | typeof colors[number]

6
src/runtime/types/toggle.d.ts vendored
View File

@@ -1,7 +1,7 @@
import { toggle } from '../ui.config'
import type { ExtractDeepKey } from '.'
import type { AppConfig } from 'nuxt/schema'
import colors from '#ui-colors'
import type { toggle } from '../ui.config'
import type { ExtractDeepKey } from '.'
import type colors from '#ui-colors'
export type ToggleSize = keyof typeof toggle.size | ExtractDeepKey<AppConfig, ['ui', 'toggle', 'size']>
export type ToggleColor = typeof colors[number]

4
src/runtime/types/utils.d.ts vendored
View File

@@ -14,8 +14,8 @@ export type DeepPartial<T, O = any> = {
export type NestedKeyOf<ObjectType extends Record<string, any>> = {
[Key in keyof ObjectType]: ObjectType[Key] extends Record<string, any>
? NestedKeyOf<ObjectType[Key]>
: Key
? NestedKeyOf<ObjectType[Key]>
: Key
}[keyof ObjectType]
type DeepKey<T, Keys extends string[]> =

32
src/runtime/ui.config/elements/avatar.ts
View File

@@ -7,11 +7,11 @@ export default {
size: {
'3xs': 'h-4 w-4 text-[8px]',
'2xs': 'h-5 w-5 text-[10px]',
xs: 'h-6 w-6 text-xs',
sm: 'h-8 w-8 text-sm',
md: 'h-10 w-10 text-base',
lg: 'h-12 w-12 text-lg',
xl: 'h-14 w-14 text-xl',
'xs': 'h-6 w-6 text-xs',
'sm': 'h-8 w-8 text-sm',
'md': 'h-10 w-10 text-base',
'lg': 'h-12 w-12 text-lg',
'xl': 'h-14 w-14 text-xl',
'2xl': 'h-16 w-16 text-2xl',
'3xl': 'h-20 w-20 text-3xl'
},
@@ -27,11 +27,11 @@ export default {
size: {
'3xs': 'h-[4px] min-w-[4px] text-[4px] p-px',
'2xs': 'h-[5px] min-w-[5px] text-[5px] p-px',
xs: 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
sm: 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
md: 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
lg: 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
xl: 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
'xs': 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
'sm': 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
'md': 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
'lg': 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
'xl': 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
'2xl': 'h-4 min-w-[1rem] text-[12px] p-1',
'3xl': 'h-5 min-w-[1.25rem] text-[14px] p-1'
}
@@ -41,11 +41,11 @@ export default {
size: {
'3xs': 'h-2 w-2',
'2xs': 'h-2.5 w-2.5',
xs: 'h-3 w-3',
sm: 'h-4 w-4',
md: 'h-5 w-5',
lg: 'h-6 w-6',
xl: 'h-7 w-7',
'xs': 'h-3 w-3',
'sm': 'h-4 w-4',
'md': 'h-5 w-5',
'lg': 'h-6 w-6',
'xl': 'h-7 w-7',
'2xl': 'h-8 w-8',
'3xl': 'h-10 w-10'
}
@@ -56,4 +56,4 @@ export default {
chipColor: null,
chipPosition: 'top-right'
}
}
}

2
src/runtime/ui.config/elements/avatarGroup.ts
View File

@@ -2,4 +2,4 @@ export default {
wrapper: 'inline-flex flex-row-reverse justify-end',
ring: 'ring-2 ring-white dark:ring-gray-900',
margin: '-me-1.5 first:me-0'
}
}

2
src/runtime/ui.config/elements/badge.ts
View File

@@ -30,4 +30,4 @@ export default {
variant: 'solid',
color: 'primary'
}
}
}

50
src/runtime/ui.config/elements/button.ts
View File

@@ -7,35 +7,35 @@ export default {
inline: 'inline-flex items-center',
size: {
'2xs': 'text-xs',
xs: 'text-xs',
sm: 'text-sm',
md: 'text-sm',
lg: 'text-sm',
xl: 'text-base'
'xs': 'text-xs',
'sm': 'text-sm',
'md': 'text-sm',
'lg': 'text-sm',
'xl': 'text-base'
},
gap: {
'2xs': 'gap-x-1',
xs: 'gap-x-1.5',
sm: 'gap-x-1.5',
md: 'gap-x-2',
lg: 'gap-x-2.5',
xl: 'gap-x-2.5'
'xs': 'gap-x-1.5',
'sm': 'gap-x-1.5',
'md': 'gap-x-2',
'lg': 'gap-x-2.5',
'xl': 'gap-x-2.5'
},
padding: {
'2xs': 'px-2 py-1',
xs: 'px-2.5 py-1.5',
sm: 'px-2.5 py-1.5',
md: 'px-3 py-2',
lg: 'px-3.5 py-2.5',
xl: 'px-3.5 py-2.5'
'xs': 'px-2.5 py-1.5',
'sm': 'px-2.5 py-1.5',
'md': 'px-3 py-2',
'lg': 'px-3.5 py-2.5',
'xl': 'px-3.5 py-2.5'
},
square: {
'2xs': 'p-1',
xs: 'p-1.5',
sm: 'p-1.5',
md: 'p-2',
lg: 'p-2.5',
xl: 'p-2.5'
'xs': 'p-1.5',
'sm': 'p-1.5',
'md': 'p-2',
'lg': 'p-2.5',
'xl': 'p-2.5'
},
color: {
white: {
@@ -64,11 +64,11 @@ export default {
loading: 'animate-spin',
size: {
'2xs': 'h-4 w-4',
xs: 'h-4 w-4',
sm: 'h-5 w-5',
md: 'h-5 w-5',
lg: 'h-5 w-5',
xl: 'h-6 w-6'
'xs': 'h-4 w-4',
'sm': 'h-5 w-5',
'md': 'h-5 w-5',
'lg': 'h-5 w-5',
'xl': 'h-6 w-6'
}
},
default: {

2
src/runtime/ui.config/elements/buttonGroup.ts
View File

@@ -8,7 +8,7 @@ export default {
orientation: {
'rounded-none': { horizontal: { start: 'rounded-s-none', end: 'rounded-e-none' }, vertical: { start: 'rounded-t-none', end: 'rounded-b-none' } },
'rounded-sm': { horizontal: { start: 'rounded-s-sm', end: 'rounded-e-sm' }, vertical: { start: 'rounded-t-sm', end: 'rounded-b-sm' } },
rounded: { horizontal: { start: 'rounded-s', end: 'rounded-e' }, vertical: { start: 'rounded-t', end: 'rounded-b' } },
'rounded': { horizontal: { start: 'rounded-s', end: 'rounded-e' }, vertical: { start: 'rounded-t', end: 'rounded-b' } },
'rounded-md': { horizontal: { start: 'rounded-s-md', end: 'rounded-e-md' }, vertical: { start: 'rounded-t-md', end: 'rounded-b-md' } },
'rounded-lg': { horizontal: { start: 'rounded-s-lg', end: 'rounded-e-lg' }, vertical: { start: 'rounded-t-lg', end: 'rounded-b-lg' } },
'rounded-xl': { horizontal: { start: 'rounded-s-xl', end: 'rounded-e-xl' }, vertical: { start: 'rounded-t-xl', end: 'rounded-b-xl' } },

12
src/runtime/ui.config/elements/chip.ts
View File

@@ -17,11 +17,11 @@ export default {
size: {
'3xs': 'h-[4px] min-w-[4px] text-[4px] p-px',
'2xs': 'h-[5px] min-w-[5px] text-[5px] p-px',
xs: 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
sm: 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
md: 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
lg: 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
xl: 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
'xs': 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
'sm': 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
'md': 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
'lg': 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
'xl': 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
'2xl': 'h-4 min-w-[1rem] text-[12px] p-1',
'3xl': 'h-5 min-w-[1.25rem] text-[14px] p-1'
},
@@ -31,4 +31,4 @@ export default {
position: 'top-right',
inset: false
}
}
}

2
src/runtime/ui.config/elements/kbd.ts
View File

@@ -13,4 +13,4 @@ export default {
default: {
size: 'sm'
}
}
}

42
src/runtime/ui.config/elements/meter.ts
View File

@@ -5,11 +5,11 @@ export default {
text: 'text-gray-400 dark:text-gray-500 text-end',
size: {
'2xs': 'text-xs',
xs: 'text-xs',
sm: 'text-sm',
md: 'text-sm',
lg: 'text-sm',
xl: 'text-base',
'xs': 'text-xs',
'sm': 'text-sm',
'md': 'text-sm',
'lg': 'text-sm',
'xl': 'text-base',
'2xl': 'text-base'
}
},
@@ -22,11 +22,11 @@ export default {
shadow: '',
size: {
'2xs': 'h-px',
xs: 'h-0.5',
sm: 'h-1',
md: 'h-2',
lg: 'h-3',
xl: 'h-4',
'xs': 'h-0.5',
'sm': 'h-1',
'md': 'h-2',
'lg': 'h-3',
'xl': 'h-4',
'2xl': 'h-5'
},
appearance: {
@@ -41,11 +41,11 @@ export default {
rounded: '[&::-webkit-meter-optimum-value]:rounded-full [&::-moz-meter-bar]:rounded-full',
size: {
'2xs': '[&::-webkit-meter-optimum-value]:h-px [&::-moz-meter-bar]:h-px',
xs: '[&::-webkit-meter-optimum-value]:h-0.5 [&::-moz-meter-bar]:h-0.5',
sm: '[&::-webkit-meter-optimum-value]:h-1 [&::-moz-meter-bar]:h-1',
md: '[&::-webkit-meter-optimum-value]:h-2 [&::-moz-meter-bar]:h-2',
lg: '[&::-webkit-meter-optimum-value]:h-3 [&::-moz-meter-bar]:h-3',
xl: '[&::-webkit-meter-optimum-value]:h-4 [&::-moz-meter-bar]:h-4',
'xs': '[&::-webkit-meter-optimum-value]:h-0.5 [&::-moz-meter-bar]:h-0.5',
'sm': '[&::-webkit-meter-optimum-value]:h-1 [&::-moz-meter-bar]:h-1',
'md': '[&::-webkit-meter-optimum-value]:h-2 [&::-moz-meter-bar]:h-2',
'lg': '[&::-webkit-meter-optimum-value]:h-3 [&::-moz-meter-bar]:h-3',
'xl': '[&::-webkit-meter-optimum-value]:h-4 [&::-moz-meter-bar]:h-4',
'2xl': '[&::-webkit-meter-optimum-value]:h-5 [&::-moz-meter-bar]:h-5'
}
}
@@ -56,11 +56,11 @@ export default {
color: 'text-{color}-500 dark:text-{color}-400',
size: {
'2xs': 'text-xs',
xs: 'text-xs',
sm: 'text-sm',
md: 'text-sm',
lg: 'text-sm',
xl: 'text-base',
'xs': 'text-xs',
'sm': 'text-sm',
'md': 'text-sm',
'lg': 'text-sm',
'xl': 'text-base',
'2xl': 'text-base'
}
},
@@ -73,4 +73,4 @@ export default {
size: 'md',
color: 'primary'
}
}
}

2
src/runtime/ui.config/elements/meterGroup.ts
View File

@@ -9,7 +9,7 @@ export default {
orientation: {
'rounded-none': { left: 'rounded-s-none', right: 'rounded-e-none' },
'rounded-sm': { left: 'rounded-s-sm', right: 'rounded-e-sm' },
rounded: { left: 'rounded-s', right: 'rounded-e' },
'rounded': { left: 'rounded-s', right: 'rounded-e' },
'rounded-md': { left: 'rounded-s-md', right: 'rounded-e-md' },
'rounded-lg': { left: 'rounded-s-lg', right: 'rounded-e-lg' },
'rounded-xl': { left: 'rounded-s-xl', right: 'rounded-e-xl' },

38
src/runtime/ui.config/elements/progress.ts
View File

@@ -11,11 +11,11 @@ export default {
color: 'text-gray-400 dark:text-gray-500',
size: {
'2xs': 'text-xs',
xs: 'text-xs',
sm: 'text-sm',
md: 'text-sm',
lg: 'text-sm',
xl: 'text-base',
'xs': 'text-xs',
'sm': 'text-sm',
'md': 'text-sm',
'lg': 'text-sm',
'xl': 'text-base',
'2xl': 'text-base'
}
},
@@ -24,11 +24,11 @@ export default {
width: 'w-full [&::-webkit-progress-bar]:w-full',
size: {
'2xs': 'h-px',
xs: 'h-0.5',
sm: 'h-1',
md: 'h-2',
lg: 'h-3',
xl: 'h-4',
'xs': 'h-0.5',
'sm': 'h-1',
'md': 'h-2',
'lg': 'h-3',
'xl': 'h-4',
'2xl': 'h-5'
},
rounded: 'rounded-full [&::-webkit-progress-bar]:rounded-full',
@@ -46,11 +46,11 @@ export default {
color: 'text-{color}-500 dark:text-{color}-400',
size: {
'2xs': 'text-xs',
xs: 'text-xs',
sm: 'text-sm',
md: 'text-sm',
lg: 'text-sm',
xl: 'text-base',
'xs': 'text-xs',
'sm': 'text-sm',
'md': 'text-sm',
'lg': 'text-sm',
'xl': 'text-base',
'2xl': 'text-base'
}
},
@@ -61,14 +61,14 @@ export default {
first: 'text-gray-500 dark:text-gray-400'
},
animation: {
carousel: 'bar-animation-carousel',
'carousel': 'bar-animation-carousel',
'carousel-inverse': 'bar-animation-carousel-inverse',
swing: 'bar-animation-swing',
elastic: 'bar-animation-elastic'
'swing': 'bar-animation-swing',
'elastic': 'bar-animation-elastic'
},
default: {
color: 'primary',
size: 'md',
animation: 'carousel'
}
}
}

11
src/runtime/ui.config/forms/formGroup.ts
View File

@@ -4,16 +4,15 @@ export default {
label: {
wrapper: 'flex content-center items-center justify-between',
base: 'block font-medium text-gray-700 dark:text-gray-200',
// eslint-disable-next-line quotes
required: `after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400`
},
size: {
'2xs': 'text-xs',
xs: 'text-xs',
sm: 'text-sm',
md: 'text-sm',
lg: 'text-sm',
xl: 'text-base'
'xs': 'text-xs',
'sm': 'text-sm',
'md': 'text-sm',
'lg': 'text-sm',
'xl': 'text-base'
},
container: 'mt-1 relative',
description: 'text-gray-500 dark:text-gray-400',

80
src/runtime/ui.config/forms/input.ts
View File

@@ -9,46 +9,46 @@ export default {
},
size: {
'2xs': 'text-xs',
xs: 'text-xs',
sm: 'text-sm',
md: 'text-sm',
lg: 'text-sm',
xl: 'text-base'
'xs': 'text-xs',
'sm': 'text-sm',
'md': 'text-sm',
'lg': 'text-sm',
'xl': 'text-base'
},
gap: {
'2xs': 'gap-x-1',
xs: 'gap-x-1.5',
sm: 'gap-x-1.5',
md: 'gap-x-2',
lg: 'gap-x-2.5',
xl: 'gap-x-2.5'
'xs': 'gap-x-1.5',
'sm': 'gap-x-1.5',
'md': 'gap-x-2',
'lg': 'gap-x-2.5',
'xl': 'gap-x-2.5'
},
padding: {
'2xs': 'px-2 py-1',
xs: 'px-2.5 py-1.5',
sm: 'px-2.5 py-1.5',
md: 'px-3 py-2',
lg: 'px-3.5 py-2.5',
xl: 'px-3.5 py-2.5'
'xs': 'px-2.5 py-1.5',
'sm': 'px-2.5 py-1.5',
'md': 'px-3 py-2',
'lg': 'px-3.5 py-2.5',
'xl': 'px-3.5 py-2.5'
},
leading: {
padding: {
'2xs': 'ps-7',
xs: 'ps-8',
sm: 'ps-9',
md: 'ps-10',
lg: 'ps-11',
xl: 'ps-12'
'xs': 'ps-8',
'sm': 'ps-9',
'md': 'ps-10',
'lg': 'ps-11',
'xl': 'ps-12'
}
},
trailing: {
padding: {
'2xs': 'pe-7',
xs: 'pe-8',
sm: 'pe-9',
md: 'pe-10',
lg: 'pe-11',
xl: 'pe-12'
'xs': 'pe-8',
'sm': 'pe-9',
'md': 'pe-10',
'lg': 'pe-11',
'xl': 'pe-12'
}
},
color: {
@@ -69,22 +69,22 @@ export default {
loading: 'animate-spin',
size: {
'2xs': 'h-4 w-4',
xs: 'h-4 w-4',
sm: 'h-5 w-5',
md: 'h-5 w-5',
lg: 'h-5 w-5',
xl: 'h-6 w-6'
'xs': 'h-4 w-4',
'sm': 'h-5 w-5',
'md': 'h-5 w-5',
'lg': 'h-5 w-5',
'xl': 'h-6 w-6'
},
leading: {
wrapper: 'absolute inset-y-0 start-0 flex items-center',
pointer: 'pointer-events-none',
padding: {
'2xs': 'px-2',
xs: 'px-2.5',
sm: 'px-2.5',
md: 'px-3',
lg: 'px-3.5',
xl: 'px-3.5'
'xs': 'px-2.5',
'sm': 'px-2.5',
'md': 'px-3',
'lg': 'px-3.5',
'xl': 'px-3.5'
}
},
trailing: {
@@ -92,11 +92,11 @@ export default {
pointer: 'pointer-events-none',
padding: {
'2xs': 'px-2',
xs: 'px-2.5',
sm: 'px-2.5',
md: 'px-3',
lg: 'px-3.5',
xl: 'px-3.5'
'xs': 'px-2.5',
'sm': 'px-2.5',
'md': 'px-3',
'lg': 'px-3.5',
'xl': 'px-3.5'
}
}
},

42
src/runtime/ui.config/forms/range.ts
View File

@@ -10,11 +10,11 @@ export default {
background: 'bg-{color}-500 dark:bg-{color}-400',
size: {
'2xs': 'h-px',
xs: 'h-0.5',
sm: 'h-1',
md: 'h-2',
lg: 'h-3',
xl: 'h-4',
'xs': 'h-0.5',
'sm': 'h-1',
'md': 'h-2',
'lg': 'h-3',
'xl': 'h-4',
'2xl': 'h-5'
}
},
@@ -25,11 +25,11 @@ export default {
ring: '[&::-webkit-slider-thumb]:ring-2 [&::-webkit-slider-thumb]:ring-current',
size: {
'2xs': '[&::-webkit-slider-thumb]:h-1.5 [&::-moz-range-thumb]:h-1.5 [&::-webkit-slider-thumb]:w-1.5 [&::-moz-range-thumb]:w-1.5 [&::-webkit-slider-thumb]:mt-[-2.5px] [&::-moz-range-thumb]:mt-[-2.5px]',
xs: '[&::-webkit-slider-thumb]:h-2 [&::-moz-range-thumb]:h-2 [&::-webkit-slider-thumb]:w-2 [&::-moz-range-thumb]:w-2 [&::-webkit-slider-thumb]:mt-[-3px] [&::-moz-range-thumb]:mt-[-3px]',
sm: '[&::-webkit-slider-thumb]:h-3 [&::-moz-range-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-moz-range-thumb]:w-3 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
md: '[&::-webkit-slider-thumb]:h-4 [&::-moz-range-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-moz-range-thumb]:w-4 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
lg: '[&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
xl: '[&::-webkit-slider-thumb]:h-6 [&::-moz-range-thumb]:h-6 [&::-webkit-slider-thumb]:w-6 [&::-moz-range-thumb]:w-6 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
'xs': '[&::-webkit-slider-thumb]:h-2 [&::-moz-range-thumb]:h-2 [&::-webkit-slider-thumb]:w-2 [&::-moz-range-thumb]:w-2 [&::-webkit-slider-thumb]:mt-[-3px] [&::-moz-range-thumb]:mt-[-3px]',
'sm': '[&::-webkit-slider-thumb]:h-3 [&::-moz-range-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-moz-range-thumb]:w-3 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
'md': '[&::-webkit-slider-thumb]:h-4 [&::-moz-range-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-moz-range-thumb]:w-4 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
'lg': '[&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
'xl': '[&::-webkit-slider-thumb]:h-6 [&::-moz-range-thumb]:h-6 [&::-webkit-slider-thumb]:w-6 [&::-moz-range-thumb]:w-6 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
'2xl': '[&::-webkit-slider-thumb]:h-7 [&::-moz-range-thumb]:h-7 [&::-webkit-slider-thumb]:w-7 [&::-moz-range-thumb]:w-7 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1'
}
},
@@ -39,25 +39,25 @@ export default {
rounded: '[&::-webkit-slider-runnable-track]:rounded-lg [&::-moz-range-track]:rounded-lg',
size: {
'2xs': '[&::-webkit-slider-runnable-track]:h-px [&::-moz-range-track]:h-px',
xs: '[&::-webkit-slider-runnable-track]:h-0.5 [&::-moz-range-track]:h-0.5',
sm: '[&::-webkit-slider-runnable-track]:h-1 [&::-moz-range-track]:h-1',
md: '[&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:h-2',
lg: '[&::-webkit-slider-runnable-track]:h-3 [&::-moz-range-track]:h-3',
xl: '[&::-webkit-slider-runnable-track]:h-4 [&::-moz-range-track]:h-4',
'xs': '[&::-webkit-slider-runnable-track]:h-0.5 [&::-moz-range-track]:h-0.5',
'sm': '[&::-webkit-slider-runnable-track]:h-1 [&::-moz-range-track]:h-1',
'md': '[&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:h-2',
'lg': '[&::-webkit-slider-runnable-track]:h-3 [&::-moz-range-track]:h-3',
'xl': '[&::-webkit-slider-runnable-track]:h-4 [&::-moz-range-track]:h-4',
'2xl': '[&::-webkit-slider-runnable-track]:h-5 [&::-moz-range-track]:h-5'
}
},
size: {
'2xs': 'h-1.5',
xs: 'h-2',
sm: 'h-3',
md: 'h-4',
lg: 'h-5',
xl: 'h-6',
'xs': 'h-2',
'sm': 'h-3',
'md': 'h-4',
'lg': 'h-5',
'xl': 'h-6',
'2xl': 'h-7'
},
default: {
size: 'md',
color: 'primary'
}
}
}

40
src/runtime/ui.config/forms/toggle.ts
View File

@@ -6,32 +6,32 @@ export default {
inactive: 'bg-gray-200 dark:bg-gray-700',
size: {
'2xs': 'h-3 w-5',
xs: 'h-3.5 w-6',
sm: 'h-4 w-7',
md: 'h-5 w-9',
lg: 'h-6 w-11',
xl: 'h-7 w-[3.25rem]',
'xs': 'h-3.5 w-6',
'sm': 'h-4 w-7',
'md': 'h-5 w-9',
'lg': 'h-6 w-11',
'xl': 'h-7 w-[3.25rem]',
'2xl': 'h-8 w-[3.75rem]'
},
container: {
base: 'pointer-events-none relative inline-block rounded-full bg-white dark:bg-gray-900 shadow transform ring-0 transition ease-in-out duration-200',
active: {
'2xs': 'translate-x-2 rtl:-translate-x-2',
xs: 'translate-x-2.5 rtl:-translate-x-2.5',
sm: 'translate-x-3 rtl:-translate-x-3',
md: 'translate-x-4 rtl:-translate-x-4',
lg: 'translate-x-5 rtl:-translate-x-5',
xl: 'translate-x-6 rtl:-translate-x-6',
'xs': 'translate-x-2.5 rtl:-translate-x-2.5',
'sm': 'translate-x-3 rtl:-translate-x-3',
'md': 'translate-x-4 rtl:-translate-x-4',
'lg': 'translate-x-5 rtl:-translate-x-5',
'xl': 'translate-x-6 rtl:-translate-x-6',
'2xl': 'translate-x-7 rtl:-translate-x-7'
},
inactive: 'translate-x-0 rtl:-translate-x-0',
size: {
'2xs': 'h-2 w-2',
xs: 'h-2.5 w-2.5',
sm: 'h-3 w-3',
md: 'h-4 w-4',
lg: 'h-5 w-5',
xl: 'h-6 w-6',
'xs': 'h-2.5 w-2.5',
'sm': 'h-3 w-3',
'md': 'h-4 w-4',
'lg': 'h-5 w-5',
'xl': 'h-6 w-6',
'2xl': 'h-7 w-7'
}
},
@@ -41,11 +41,11 @@ export default {
inactive: 'opacity-0 ease-out duration-100',
size: {
'2xs': 'h-2 w-2',
xs: 'h-2 w-2',
sm: 'h-2 w-2',
md: 'h-3 w-3',
lg: 'h-4 w-4',
xl: 'h-5 w-5',
'xs': 'h-2 w-2',
'sm': 'h-2 w-2',
'md': 'h-3 w-3',
'lg': 'h-4 w-4',
'xl': 'h-5 w-5',
'2xl': 'h-6 w-6'
},
on: 'text-{color}-500 dark:text-{color}-400',

2
src/runtime/ui.config/layout/container.ts
View File

@@ -2,4 +2,4 @@ export default {
base: 'mx-auto',
padding: 'px-4 sm:px-6 lg:px-8',
constrained: 'max-w-7xl'
}
}

20
src/runtime/ui.config/layout/divider.ts
View File

@@ -16,19 +16,19 @@ export default {
size: {
horizontal: {
'2xs': 'border-t',
xs: 'border-t-[2px]',
sm: 'border-t-[3px]',
md: 'border-t-[4px]',
lg: 'border-t-[5px]',
xl: 'border-t-[6px]'
'xs': 'border-t-[2px]',
'sm': 'border-t-[3px]',
'md': 'border-t-[4px]',
'lg': 'border-t-[5px]',
'xl': 'border-t-[6px]'
},
vertical: {
'2xs': 'border-s',
xs: 'border-s-[2px]',
sm: 'border-s-[3px]',
md: 'border-s-[4px]',
lg: 'border-s-[5px]',
xl: 'border-s-[6px]'
'xs': 'border-s-[2px]',
'sm': 'border-s-[3px]',
'md': 'border-s-[4px]',
'lg': 'border-s-[5px]',
'xl': 'border-s-[6px]'
}
},
type: {

2
src/runtime/ui.config/layout/skeleton.ts
View File

@@ -2,4 +2,4 @@ export default {
base: 'animate-pulse',
background: 'bg-gray-100 dark:bg-gray-800',
rounded: 'rounded-md'
}
}

2
src/runtime/ui.config/overlays/notifications.ts
View File

@@ -3,4 +3,4 @@ export default {
position: 'bottom-0 end-0',
width: 'w-full sm:w-96',
container: 'px-4 sm:px-6 py-6 space-y-3 overflow-y-auto'
}
}

13
src/runtime/ui.config/popper.ts
View File

@@ -1,9 +1,8 @@
export const arrow = {
base: 'invisible before:visible before:block before:rotate-45 before:z-[-1] before:w-2 before:h-2',
ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-800',
rounded: 'before:rounded-sm',
background: 'before:bg-gray-200 dark:before:bg-gray-800',
shadow: 'before:shadow',
// eslint-disable-next-line quotes
placement: `group-data-[popper-placement*='right']:-left-1 group-data-[popper-placement*='left']:-right-1 group-data-[popper-placement*='top']:-bottom-1 group-data-[popper-placement*='bottom']:-top-1`
base: 'invisible before:visible before:block before:rotate-45 before:z-[-1] before:w-2 before:h-2',
ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-800',
rounded: 'before:rounded-sm',
background: 'before:bg-gray-200 dark:before:bg-gray-800',
shadow: 'before:shadow',
placement: `group-data-[popper-placement*='right']:-left-1 group-data-[popper-placement*='left']:-right-1 group-data-[popper-placement*='top']:-bottom-1 group-data-[popper-placement*='bottom']:-top-1`
}

Some files were not shown because too many files have changed in this diff Show More