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)