diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index d8fb6cb6..00000000 --- a/.eslintignore +++ /dev/null @@ -1,14 +0,0 @@ -node_modules -dist -.nuxt -coverage -*.log* -.DS_Store -.code -*.iml -package-lock.json -templates/* -sw.js - -# Templates -src/templates diff --git a/.eslintrc.cjs b/.eslintrc.cjs deleted file mode 100644 index 35ea48be..00000000 --- a/.eslintrc.cjs +++ /dev/null @@ -1,46 +0,0 @@ -module.exports = { - root: true, - extends: ['@nuxt/eslint-config'], - rules: { - // General - semi: ['error', 'never'], - quotes: ['error', 'single'], - 'comma-dangle': ['error', 'never'], - 'comma-spacing': ['error', { before: false, after: true }], - 'keyword-spacing': ['error', { before: true, after: true }], - 'space-before-function-paren': ['error', 'always'], - 'object-curly-spacing': ['error', 'always'], - 'arrow-spacing': ['error', { before: true, after: true }], - 'key-spacing': ['error', { beforeColon: false, afterColon: true, mode: 'strict' }], - 'space-before-blocks': ['error', 'always'], - 'space-infix-ops': ['error', { int32Hint: false }], - 'no-multi-spaces': ['error', { ignoreEOLComments: true }], - 'no-trailing-spaces': ['error'], - - // Typescript - '@typescript-eslint/type-annotation-spacing': 'error', - - // Vuejs - 'vue/multi-word-component-names': 0, - 'vue/html-indent': ['error', 2], - 'vue/comma-spacing': ['error', { before: false, after: true }], - 'vue/script-indent': ['error', 2, { baseIndent: 0 }], - 'vue/keyword-spacing': ['error', { before: true, after: true }], - 'vue/object-curly-spacing': ['error', 'always'], - 'vue/key-spacing': ['error', { beforeColon: false, afterColon: true, mode: 'strict' }], - 'vue/arrow-spacing': ['error', { before: true, after: true }], - 'vue/array-bracket-spacing': ['error', 'never'], - 'vue/block-spacing': ['error', 'always'], - 'vue/brace-style': ['error', 'stroustrup', { allowSingleLine: true }], - 'vue/space-infix-ops': ['error', { int32Hint: false }], - 'vue/max-attributes-per-line': [ - 'error', - { - singleline: { - max: 5 - } - } - ], - 'vue/padding-line-between-blocks': ['error', 'always'] - } -} diff --git a/docs/app.vue b/docs/app.vue index 2f70477b..3095b6d6 100644 --- a/docs/app.vue +++ b/docs/app.vue @@ -50,20 +50,22 @@ const links = computed(() => { icon: 'i-heroicons-book-open', to: '/getting-started', active: route.path.startsWith('/getting-started') || route.path.startsWith('/components') - }, ...(navigation.value.find(item => item._path === '/pro') ? [{ - label: 'Pro', - icon: 'i-heroicons-square-3-stack-3d', - to: '/pro', - active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components') || route.path.startsWith('/pro/prose') - }, { - label: 'Pricing', - icon: 'i-heroicons-ticket', - to: '/pro/pricing' - }, { - label: 'Templates', - icon: 'i-heroicons-computer-desktop', - to: '/pro/templates' - }] : []), { + }, ...(navigation.value.find(item => item._path === '/pro') + ? [{ + label: 'Pro', + icon: 'i-heroicons-square-3-stack-3d', + to: '/pro', + active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components') || route.path.startsWith('/pro/prose') + }, { + label: 'Pricing', + icon: 'i-heroicons-ticket', + to: '/pro/pricing' + }, { + label: 'Templates', + icon: 'i-heroicons-computer-desktop', + to: '/pro/templates' + }] + : []), { label: 'Releases', icon: 'i-heroicons-rocket-launch', to: '/releases' diff --git a/docs/components/Header.vue b/docs/components/Header.vue index e5463594..eec657db 100644 --- a/docs/components/Header.vue +++ b/docs/components/Header.vue @@ -48,8 +48,8 @@ diff --git a/docs/components/content/ColorModeButton.vue b/docs/components/content/ColorModeButton.vue index eade92cf..21604d77 100644 --- a/docs/components/content/ColorModeButton.vue +++ b/docs/components/content/ColorModeButton.vue @@ -18,10 +18,10 @@ const colorMode = useColorMode() const isDark = computed({ - get () { + get() { return colorMode.value === 'dark' }, - set () { + set() { colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark' } }) diff --git a/docs/components/content/ComponentCard.vue b/docs/components/content/ComponentCard.vue index dc35f33d..81bd7482 100644 --- a/docs/components/content/ComponentCard.vue +++ b/docs/components/content/ComponentCard.vue @@ -54,7 +54,6 @@ import { upperFirst, camelCase, kebabCase } from 'scule' import { useShikiHighlighter } from '~/composables/useShikiHighlighter' -// eslint-disable-next-line vue/no-dupe-keys const props = defineProps({ slug: { type: String, @@ -89,7 +88,7 @@ const props = defineProps({ default: () => [] }, options: { - type: Array as PropType<{ name: string; values: string[]; restriction: 'expected' | 'included' | 'excluded' | 'only' }[]>, + type: Array as PropType<{ name: string, values: string[], restriction: 'expected' | 'included' | 'excluded' | 'only' }[]>, default: () => [] }, backgroundClass: { @@ -114,7 +113,6 @@ const props = defineProps({ } }) -// eslint-disable-next-line vue/no-dupe-keys const baseProps = reactive({ ...props.baseProps }) const componentProps = reactive({ ...props.props }) @@ -158,13 +156,13 @@ const generateOptions = (key: string, schema: { kind: string, schema: [], type: const schemaOptions = Object.values(schema?.schema || {}) if (key.toLowerCase() === 'size' && schemaOptions?.length > 0) { - const baseSizeOrder = { 'xs': 1, 'sm': 2, 'md': 3, 'lg': 4, 'xl': 5 } + const baseSizeOrder = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 } schemaOptions.sort((a: string, b: string) => { - const aBase = a.match(/[a-zA-Z]+/)[0].toLowerCase() - const bBase = b.match(/[a-zA-Z]+/)[0].toLowerCase() + const aBase = a.match(/[a-z]+/i)[0].toLowerCase() + const bBase = b.match(/[a-z]+/i)[0].toLowerCase() - const aNum = parseInt(a.match(/\d+/)?.[0]) || 1 - const bNum = parseInt(b.match(/\d+/)?.[0]) || 1 + const aNum = Number.parseInt(a.match(/\d+/)?.[0]) || 1 + const bNum = Number.parseInt(b.match(/\d+/)?.[0]) || 1 if (aBase === bBase) { return aBase === 'xs' ? bNum - aNum : aNum - bNum @@ -214,7 +212,6 @@ const propsToSelect = computed(() => Object.keys(componentProps).map((key) => { } }).filter(Boolean)) -// eslint-disable-next-line vue/no-dupe-keys const code = computed(() => { let code = `\`\`\`html \ No newline at end of file + diff --git a/docs/components/content/examples/SlideoverExampleComposable.vue b/docs/components/content/examples/SlideoverExampleComposable.vue index a885ddeb..e7daa904 100644 --- a/docs/components/content/examples/SlideoverExampleComposable.vue +++ b/docs/components/content/examples/SlideoverExampleComposable.vue @@ -3,7 +3,7 @@ import { SlideoverExampleComponent } from '#components' const slideover = useSlideover() const count = ref(0) -function openSlideover () { +function openSlideover() { count.value += 1 slideover.open(SlideoverExampleComponent, { count: count.value, diff --git a/docs/components/content/examples/TableExampleAdvanced.vue b/docs/components/content/examples/TableExampleAdvanced.vue index c1ab7068..e76b7835 100644 --- a/docs/components/content/examples/TableExampleAdvanced.vue +++ b/docs/components/content/examples/TableExampleAdvanced.vue @@ -19,13 +19,13 @@ const columns = [{ }] const selectedColumns = ref(columns) -const columnsTable = computed(() => columns.filter((column) => selectedColumns.value.includes(column))) +const columnsTable = computed(() => columns.filter(column => selectedColumns.value.includes(column))) // Selected Rows const selectedRows = ref([]) -function select (row) { - const index = selectedRows.value.findIndex((item) => item.id === row.id) +function select(row) { + const index = selectedRows.value.findIndex(item => item.id === row.id) if (index === -1) { selectedRows.value.push(row) } else { @@ -92,10 +92,10 @@ const { data: todos, status } = await useLazyAsyncData<{ }[]>('todos', () => ($fetch as any)(`https://jsonplaceholder.typicode.com/todos${searchStatus.value}`, { query: { q: search.value, - '_page': page.value, - '_limit': pageCount.value, - '_sort': sort.value.column, - '_order': sort.value.direction + _page: page.value, + _limit: pageCount.value, + _sort: sort.value.column, + _order: sort.value.direction } }), { default: () => [], diff --git a/docs/components/content/examples/TableExampleClickable.vue b/docs/components/content/examples/TableExampleClickable.vue index 0aa31778..c69bdf1f 100644 --- a/docs/components/content/examples/TableExampleClickable.vue +++ b/docs/components/content/examples/TableExampleClickable.vue @@ -31,8 +31,8 @@ const people = [{ role: 'Owner' }] -function select (row) { - const index = selected.value.findIndex((item) => item.id === row.id) +function select(row) { + const index = selected.value.findIndex(item => item.id === row.id) if (index === -1) { selected.value.push(row) } else { diff --git a/docs/components/content/examples/TableExampleLoadingSlot.vue b/docs/components/content/examples/TableExampleLoadingSlot.vue index 5de1a833..eb014049 100644 --- a/docs/components/content/examples/TableExampleLoadingSlot.vue +++ b/docs/components/content/examples/TableExampleLoadingSlot.vue @@ -34,53 +34,55 @@ const pending = ref(true) /* https://codepen.io/jenning/pen/YzNmzaV */ .loader { - --color: rgb(var(--color-primary-400)); - --size-mid: 6vmin; - --size-dot: 1.5vmin; - --size-bar: 0.4vmin; - --size-square: 3vmin; + --color: rgb(var(--color-primary-400)); + --size-mid: 6vmin; + --size-dot: 1.5vmin; + --size-bar: 0.4vmin; + --size-square: 3vmin; - display: block; - position: relative; - width: 50%; - display: grid; - place-items: center; + display: block; + position: relative; + width: 50%; + display: grid; + place-items: center; } .loader::before, .loader::after { - content: ''; - box-sizing: border-box; - position: absolute; + content: ''; + box-sizing: border-box; + position: absolute; } /** - loader --6 +loader --6 **/ .loader.--6::before { - width: var(--size-square); - height: var(--size-square); - background-color: var(--color); - top: calc(50% - var(--size-square)); - left: calc(50% - var(--size-square)); - animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite; + width: var(--size-square); + height: var(--size-square); + background-color: var(--color); + top: calc(50% - var(--size-square)); + left: calc(50% - var(--size-square)); + animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite; } @keyframes loader-6 { - 0%, 100% { - transform: none; - } - 25% { - transform: translateX(100%); - } + 0%, + 100% { + transform: none; + } - 50% { - transform: translateX(100%) translateY(100%); - } + 25% { + transform: translateX(100%); + } - 75% { - transform: translateY(100%); - } + 50% { + transform: translateX(100%) translateY(100%); + } + + 75% { + transform: translateY(100%); + } } diff --git a/docs/components/content/examples/TableExampleSlots.vue b/docs/components/content/examples/TableExampleSlots.vue index 4e89c7c8..b2d22b66 100644 --- a/docs/components/content/examples/TableExampleSlots.vue +++ b/docs/components/content/examples/TableExampleSlots.vue @@ -53,7 +53,7 @@ const people = [{ role: 'Member' }] -const items = (row) => [ +const items = row => [ [{ label: 'Edit', icon: 'i-heroicons-pencil-square-20-solid', diff --git a/docs/components/content/examples/TabsExampleChange.vue b/docs/components/content/examples/TabsExampleChange.vue index 7c3dcb74..afe91d64 100644 --- a/docs/components/content/examples/TabsExampleChange.vue +++ b/docs/components/content/examples/TabsExampleChange.vue @@ -13,7 +13,7 @@ const items = [{ content: 'Finally, this is the content for Tab3' }] -function onChange (index) { +function onChange(index) { const item = items[index] alert(`${item.label} was clicked!`) diff --git a/docs/components/content/examples/TabsExampleItemCustomSlot.vue b/docs/components/content/examples/TabsExampleItemCustomSlot.vue index 5a15e10a..5b504a97 100644 --- a/docs/components/content/examples/TabsExampleItemCustomSlot.vue +++ b/docs/components/content/examples/TabsExampleItemCustomSlot.vue @@ -10,11 +10,11 @@ const items = [{ const accountForm = reactive({ name: 'Benjamin', username: 'benjamincanac' }) const passwordForm = reactive({ currentPassword: '', newPassword: '' }) -function onSubmitAccount () { +function onSubmitAccount() { console.log('Submitted form:', accountForm) } -function onSubmitPassword () { +function onSubmitPassword() { console.log('Submitted form:', passwordForm) } diff --git a/docs/components/content/examples/TabsExampleItemSlot.vue b/docs/components/content/examples/TabsExampleItemSlot.vue index 9bc2a33a..9fa6f04a 100644 --- a/docs/components/content/examples/TabsExampleItemSlot.vue +++ b/docs/components/content/examples/TabsExampleItemSlot.vue @@ -12,7 +12,7 @@ const items = [{ const accountForm = reactive({ name: 'Benjamin', username: 'benjamincanac' }) const passwordForm = reactive({ currentPassword: '', newPassword: '' }) -function onSubmit (form) { +function onSubmit(form) { console.log('Submitted form:', form) } diff --git a/docs/components/content/examples/TabsExampleVModel.vue b/docs/components/content/examples/TabsExampleVModel.vue index 581f32be..f106713e 100644 --- a/docs/components/content/examples/TabsExampleVModel.vue +++ b/docs/components/content/examples/TabsExampleVModel.vue @@ -17,15 +17,15 @@ const route = useRoute() const router = useRouter() const selected = computed({ - get () { - const index = items.findIndex((item) => item.label === route.query.tab) + get() { + const index = items.findIndex(item => item.label === route.query.tab) if (index === -1) { return 0 } return index }, - set (value) { + set(value) { // Hash is specified here to prevent the page from scrolling to the top router.replace({ query: { tab: items[value].label }, hash: '#control-the-selected-index' }) } diff --git a/docs/components/date-picker/DatePicker.vue b/docs/components/date-picker/DatePicker.vue index ad3168c8..d541ad89 100644 --- a/docs/components/date-picker/DatePicker.vue +++ b/docs/components/date-picker/DatePicker.vue @@ -31,9 +31,9 @@ const breakpoints = useBreakpoints(breakpointsTailwind) const smallerThanSm = breakpoints.smaller('sm') const attrs = { - transparent: true, - borderless: true, - color: 'primary', + 'transparent': true, + 'borderless': true, + 'color': 'primary', 'is-dark': { selector: 'html', darkClass: 'dark' }, 'first-day-of-week': 2 } diff --git a/docs/components/home/HomeProDemoBlock.vue b/docs/components/home/HomeProDemoBlock.vue index 8e48901a..58e72dbf 100644 --- a/docs/components/home/HomeProDemoBlock.vue +++ b/docs/components/home/HomeProDemoBlock.vue @@ -29,7 +29,7 @@ v-else class="font-semibold flex flex-col gap-1 text-center" :class="[ - !block.slot && (block.inactive || block.inactive === undefined ? 'text-gray-900 dark:text-white' : 'text-white dark:text-gray-900'), + !block.slot && (block.inactive || block.inactive === undefined ? 'text-gray-900 dark:text-white' : 'text-white dark:text-gray-900') ]" > {{ block.name }} diff --git a/docs/components/home/HomeTetris.vue b/docs/components/home/HomeTetris.vue index 6300c32e..94542241 100644 --- a/docs/components/home/HomeTetris.vue +++ b/docs/components/home/HomeTetris.vue @@ -36,21 +36,22 @@ const cols = ref(0) const { width, height } = useElementSize(el) -function createGrid () { +function createGrid() { grid.value = [] for (let i = 0; i <= rows.value; i++) { + // eslint-disable-next-line unicorn/no-new-array grid.value.push(new Array(cols.value).fill(null)) } } -function createNewCell () { +function createNewCell() { const x = Math.floor(Math.random() * cols.value) grid.value[0][x] = true } -function moveCellsDown () { +function moveCellsDown() { for (let row = rows.value - 1; row >= 0; row--) { for (let col = 0; col < cols.value; col++) { if (grid.value[row][col] !== null && grid.value[row + 1][col] === null) { @@ -69,11 +70,11 @@ function moveCellsDown () { }, 500) } -function removeCell (row, col) { +function removeCell(row, col) { grid.value[row][col] = null } -function calcGrid () { +function calcGrid() { const base = Math.ceil(width.value / 60) const cell = width.value / base diff --git a/docs/composables/useComponentMeta.ts b/docs/composables/useComponentMeta.ts index 7d3e100c..71132ad6 100644 --- a/docs/composables/useComponentMeta.ts +++ b/docs/composables/useComponentMeta.ts @@ -1,13 +1,15 @@ const useComponentsMetaState = () => useState('components-meta', () => ({})) -export async function fetchComponentMeta (name: string) { +export async function fetchComponentMeta(name: string) { const state = useComponentsMetaState() if (state.value[name]?.then) { await state.value[name] return state.value[name] } - if (state.value[name]) { return state.value[name] } + if (state.value[name]) { + return state.value[name] + } // Store promise to avoid multiple calls diff --git a/docs/composables/useContentExamplesCode.ts b/docs/composables/useContentExamplesCode.ts index 659dcbc0..52e40307 100644 --- a/docs/composables/useContentExamplesCode.ts +++ b/docs/composables/useContentExamplesCode.ts @@ -1,6 +1,6 @@ const useContentExamplesCodeState = () => useState('content-examples-code', () => ({})) -export async function fetchContentExampleCode (name?: string) { +export async function fetchContentExampleCode(name?: string) { if (!name) return const state = useContentExamplesCodeState() @@ -8,7 +8,9 @@ export async function fetchContentExampleCode (name?: string) { await state.value[name] return state.value[name] } - if (state.value[name]) { return state.value[name] } + if (state.value[name]) { + return state.value[name] + } // add to nitro prerender if (import.meta.server) { diff --git a/docs/error.vue b/docs/error.vue index fdff81b3..9ebca8c2 100644 --- a/docs/error.vue +++ b/docs/error.vue @@ -29,8 +29,8 @@ \ No newline at end of file + diff --git a/src/runtime/components/elements/Accordion.vue b/src/runtime/components/elements/Accordion.vue index 63a663e9..4aafd1c7 100644 --- a/src/runtime/components/elements/Accordion.vue +++ b/src/runtime/components/elements/Accordion.vue @@ -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(() => 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' diff --git a/src/runtime/components/elements/Alert.vue b/src/runtime/components/elements/Alert.vue index 1767bdeb..f3be56e4 100644 --- a/src/runtime/components/elements/Alert.vue +++ b/src/runtime/components/elements/Alert.vue @@ -90,14 +90,14 @@ export default defineComponent({ color: { type: String as PropType, 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, 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() } diff --git a/src/runtime/components/elements/Avatar.vue b/src/runtime/components/elements/Avatar.vue index 3ff03b13..dd2db556 100644 --- a/src/runtime/components/elements/Avatar.vue +++ b/src/runtime/components/elements/Avatar.vue @@ -63,21 +63,21 @@ export default defineComponent({ size: { type: String as PropType, default: () => config.default.size, - validator (value: string) { + validator(value: string) { return Object.keys(config.size).includes(value) } }, chipColor: { type: String as PropType, default: () => config.default.chipColor, - validator (value: string) { + validator(value: string) { return ['gray', ...appConfig.ui.colors].includes(value) } }, chipPosition: { type: String as PropType, 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 } diff --git a/src/runtime/components/elements/AvatarGroup.ts b/src/runtime/components/elements/AvatarGroup.ts index bdab268c..4a7ee8fb 100644 --- a/src/runtime/components/elements/AvatarGroup.ts +++ b/src/runtime/components/elements/AvatarGroup.ts @@ -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, 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 = {} diff --git a/src/runtime/components/elements/Badge.vue b/src/runtime/components/elements/Badge.vue index 1e278e9b..d24ffe22 100644 --- a/src/runtime/components/elements/Badge.vue +++ b/src/runtime/components/elements/Badge.vue @@ -24,21 +24,21 @@ export default defineComponent({ size: { type: String as PropType, default: () => config.default.size, - validator (value: string) { + validator(value: string) { return Object.keys(config.size).includes(value) } }, color: { type: String as PropType, 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, 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 }) diff --git a/src/runtime/components/elements/Button.vue b/src/runtime/components/elements/Button.vue index 64791023..f57e3b8d 100644 --- a/src/runtime/components/elements/Button.vue +++ b/src/runtime/components/elements/Button.vue @@ -67,21 +67,21 @@ export default defineComponent({ size: { type: String as PropType, default: () => config.default.size, - validator (value: string) { + validator(value: string) { return Object.keys(config.size).includes(value) } }, color: { type: String as PropType, 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, 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 }) diff --git a/src/runtime/components/elements/ButtonGroup.ts b/src/runtime/components/elements/ButtonGroup.ts index ccd72600..368985e1 100644 --- a/src/runtime/components/elements/ButtonGroup.ts +++ b/src/runtime/components/elements/ButtonGroup.ts @@ -19,14 +19,14 @@ export default defineComponent({ size: { type: String as PropType, 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)) diff --git a/src/runtime/components/elements/Carousel.vue b/src/runtime/components/elements/Carousel.vue index ea19fad7..48502049 100644 --- a/src/runtime/components/elements/Carousel.vue +++ b/src/runtime/components/elements/Carousel.vue @@ -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() @@ -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) } diff --git a/src/runtime/components/elements/Chip.vue b/src/runtime/components/elements/Chip.vue index b17a722f..0debd8cb 100644 --- a/src/runtime/components/elements/Chip.vue +++ b/src/runtime/components/elements/Chip.vue @@ -29,21 +29,21 @@ export default defineComponent({ size: { type: String as PropType, default: () => config.default.size, - validator (value: string) { + validator(value: string) { return Object.keys(config.size).includes(value) } }, color: { type: String as PropType, default: () => config.default.color, - validator (value: string) { + validator(value: string) { return ['gray', ...appConfig.ui.colors].includes(value) } }, position: { type: String as PropType, 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(() => { diff --git a/src/runtime/components/elements/Dropdown.vue b/src/runtime/components/elements/Dropdown.vue index e8ed7cbb..2bec6c2c 100644 --- a/src/runtime/components/elements/Dropdown.vue +++ b/src/runtime/components/elements/Dropdown.vue @@ -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(() => 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) } diff --git a/src/runtime/components/elements/Kbd.vue b/src/runtime/components/elements/Kbd.vue index 6defd4de..916ab3c2 100644 --- a/src/runtime/components/elements/Kbd.vue +++ b/src/runtime/components/elements/Kbd.vue @@ -27,7 +27,7 @@ export default defineComponent({ size: { type: String as PropType, 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(() => { diff --git a/src/runtime/components/elements/Link.vue b/src/runtime/components/elements/Link.vue index 3ba7f66e..535f7a0a 100644 --- a/src/runtime/components/elements/Link.vue +++ b/src/runtime/components/elements/Link.vue @@ -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 } diff --git a/src/runtime/components/elements/Meter.vue b/src/runtime/components/elements/Meter.vue index f4c9aa9a..a30860c4 100644 --- a/src/runtime/components/elements/Meter.vue +++ b/src/runtime/components/elements/Meter.vue @@ -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, default: () => config.default.size, - validator (value: string) { + validator(value: string) { return Object.keys(config.meter.size).includes(value) } }, color: { type: String as PropType, 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 } diff --git a/src/runtime/components/elements/MeterGroup.ts b/src/runtime/components/elements/MeterGroup.ts index 98a6a3b7..b0c75e5b 100644 --- a/src/runtime/components/elements/MeterGroup.ts +++ b/src/runtime/components/elements/MeterGroup.ts @@ -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, 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])}%)` ]) })) diff --git a/src/runtime/components/elements/Progress.vue b/src/runtime/components/elements/Progress.vue index 170a3966..e473931e 100644 --- a/src/runtime/components/elements/Progress.vue +++ b/src/runtime/components/elements/Progress.vue @@ -58,21 +58,21 @@ export default defineComponent({ animation: { type: String as PropType, default: () => config.default.animation, - validator (value: string) { + validator(value: string) { return Object.keys(config.animation).includes(value) } }, size: { type: String as PropType, default: () => config.default.size, - validator (value: string) { + validator(value: string) { return Object.keys(config.progress.size).includes(value) } }, color: { type: String as PropType, 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% } -} +} + diff --git a/src/runtime/components/forms/Checkbox.vue b/src/runtime/components/forms/Checkbox.vue index f7ce36a5..1b782d6b 100644 --- a/src/runtime/components/forms/Checkbox.vue +++ b/src/runtime/components/forms/Checkbox.vue @@ -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(appConfig.ui.strategy, appConfig.ui.checkbox, checkbox) @@ -87,7 +87,7 @@ export default defineComponent({ color: { type: String as PropType, 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) } }) diff --git a/src/runtime/components/forms/Form.vue b/src/runtime/components/forms/Form.vue index a61c60d1..967e8bde 100644 --- a/src/runtime/components/forms/Form.vue +++ b/src/runtime/components/forms/Form.vue @@ -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 - | PropType> - | PropType - | PropType - | PropType - | PropType | ValibotSafeParserAsync31> - | PropType - | PropType | ValibotSafeParserAsync> | PropType>, + | PropType + | PropType> + | PropType + | PropType + | PropType + | PropType | ValibotSafeParserAsync31> + | PropType + | PropType | ValibotSafeParserAsync> | PropType>, default: undefined }, state: { @@ -45,8 +45,8 @@ export default defineComponent({ }, validate: { type: Function as - | PropType<(state: any) => Promise> - | PropType<(state: any) => FormError[]>, + | PropType<(state: any) => Promise> + | 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(`form-${formId}`) @@ -77,7 +77,7 @@ export default defineComponent({ const inputs = ref({}) provide('form-inputs', inputs) - async function getErrors (): Promise { + async function getErrors(): Promise { 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 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 { +function isYupSchema(schema: any): schema is YupObjectSchema { 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 { +function isSuperStructSchema(schema: any): schema is Struct { 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 ): Promise { @@ -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): Promise { +async function getSuperStructErrors(state: any, schema: Struct): Promise { 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): Prom return [] } -async function getZodErrors ( +async function getZodErrors( state: any, schema: ZodSchema ): Promise { 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 { @@ -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 | ValibotSafeParserAsync31 | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser | ValibotSafeParserAsync { +function isValibotSchema(schema: any): schema is ValibotSchema30 | ValibotSchemaAsync30 | ValibotSchema31 | ValibotSchemaAsync31 | ValibotSafeParser31 | ValibotSafeParserAsync31 | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser | ValibotSafeParserAsync { 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 | ValibotSafeParserAsync31 | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser | ValibotSafeParserAsync ): Promise { 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 })) || [] } diff --git a/src/runtime/components/forms/FormGroup.vue b/src/runtime/components/forms/FormGroup.vue index 02fdb0fb..008140b5 100644 --- a/src/runtime/components/forms/FormGroup.vue +++ b/src/runtime/components/forms/FormGroup.vue @@ -62,7 +62,7 @@ export default defineComponent({ size: { type: String as PropType, 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 | 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]) diff --git a/src/runtime/components/forms/Input.vue b/src/runtime/components/forms/Input.vue index d9b37d92..a1d20c84 100644 --- a/src/runtime/components/forms/Input.vue +++ b/src/runtime/components/forms/Input.vue @@ -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, default: null, - validator (value: string) { + validator(value: string) { return Object.keys(config.size).includes(value) } }, color: { type: String as PropType, 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, 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() } diff --git a/src/runtime/components/forms/InputMenu.vue b/src/runtime/components/forms/InputMenu.vue index a212c175..f6872a79 100644 --- a/src/runtime/components/forms/InputMenu.vue +++ b/src/runtime/components/forms/InputMenu.vue @@ -212,21 +212,21 @@ export default defineComponent({ size: { type: String as PropType, default: null, - validator (value: string) { + validator(value: string) { return Object.keys(config.size).includes(value) } }, color: { type: String as PropType, 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, 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 } diff --git a/src/runtime/components/forms/Radio.vue b/src/runtime/components/forms/Radio.vue index 471e62d7..6097eb9e 100644 --- a/src/runtime/components/forms/Radio.vue +++ b/src/runtime/components/forms/Radio.vue @@ -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(appConfig.ui.strategy, appConfig.ui.radio, radio) @@ -82,7 +82,7 @@ export default defineComponent({ color: { type: String as PropType, 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) } diff --git a/src/runtime/components/forms/RadioGroup.vue b/src/runtime/components/forms/RadioGroup.vue index bd6d3863..ba8dc626 100644 --- a/src/runtime/components/forms/RadioGroup.vue +++ b/src/runtime/components/forms/RadioGroup.vue @@ -30,17 +30,17 @@