@volverjs/ui-vue 0.0.10-beta.47 → 0.0.10-beta.49

package/src/stories/Blurhash/BlurhashComposable.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { ref } from 'vue'
 import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
 import { useBlurhash } from '@/composables/useBlurhash'
+import { ref } from 'vue'
 
 const meta: Meta = {
     title: 'Composables/useBlurhash',
@@ -41,26 +41,29 @@ export const Default: StoryObj = {
             file: {
                 immediate: true,
                 async handler(newValue) {
-                    if (newValue?.size) {
-                        this.imageUrl = URL.createObjectURL(newValue)
-                        this.image = await this.loadImage(this.imageUrl)
-                        this.blurhash = await this.encode(newValue)
-                    }
-                    else {
+                    if (!newValue?.size) {
                         this.image = null
                         this.imageUrl = ''
                         this.blurhash = ''
+                        return
                     }
+                    this.isLoading = true
+                    this.imageUrl = URL.createObjectURL(newValue)
+                    this.image = await this.loadImage(this.imageUrl)
+                    this.blurhash = await this.encode(newValue)
+                    this.isLoading = false
                 },
             },
             blurhash: {
                 async handler(newValue) {
                     if (this.image) {
+                        this.isLoading = true
                         const blurhashDecoded = await this.decode(
                             newValue,
                             this.image.width,
                             this.image.height,
                         )
+                        this.isLoading = false
 
                         if (this.canvas) {
                             this.canvas.width = this.image.width
@@ -78,119 +81,36 @@ export const Default: StoryObj = {
             },
         },
         template: /* html */ `
-			<div class="w-full grid gap-md grid-cols-3 h-150" :class="{ 'vv-skeleton': isLoading }">
-				<div class="w-150 h-150 col-span-1">
-					<div class="text-20 font-semibold mb-md">Upload image</div>
-					<vv-input-file v-model="file" name="input-file" modifiers="drop-area square hidden" accept=".gif,.jpg,.jpeg,.png,image/gif,image/jpeg,image/png" />
+			<div class="w-full lg:w-10/12 xl:w-8/12 grid gap-md sm:grid-cols-3 mb-md">
+				<div>
+					<div class="text-lg font-bold mb-md">Upload</div>
+					<vv-input-file v-model="file" name="input-file" modifiers="square hidden" drop-area accept=".gif,.jpg,.jpeg,.png,image/gif,image/jpeg,image/png" />
+				</div>
+				<div v-if="image">
+					<div class="text-lg font-bold mb-md">Blurhash</div>
+					<div class="vv-skeleton bg-chessboard flex items-center relative aspect-square">
+						<div v-if="isLoading" class="vv-skeleton__item inset-0 absolute h-full"></div>
+						<canvas
+							v-show="blurhash"
+							ref="canvas"
+							class="w-full block object-cover"
+							:width="image.width"
+							:height="image.height" />
+					</div>
 				</div>
-				<div v-show="blurhash" class="h-150 col-span-2">
-					<picture class="flex gap-md justify-center">
-						<div>
-							<div class="text-20 font-semibold mb-md">Blurhash</div>
-							<canvas
-								ref="canvas"
-								class="w-150 h-150 block object-cover" />
-						</div>
-						<div>
-							<div class="text-20 font-semibold mb-md">Image</div>
-							<img
-								v-if="image"
-								class="w-150 h-150 block object-cover"
-								:class="{ 'vv-skeleton__item': isLoading }"
-								:src="imageUrl"
-								alt="image"
-								:width="image.width"
-								:height="image.height" />
-						</div>
-					</picture>
+				<div v-if="image">
+					<div class="text-lg font-bold mb-md">Original</div>
+					<div class="vv-skeleton bg-chessboard flex items-center relative aspect-square">
+						<div v-if="isLoading" class="vv-skeleton__item inset-0 absolute h-full"></div>
+						<img
+							class="w-full block h-auto"
+							:src="imageUrl"
+							alt="image"
+							:width="image.width"
+							:height="image.height" />
+					</div>
 				</div>
 			</div>
 		`,
     }),
-
-    parameters: {
-        docs: {
-            source: {
-                type: 'code',
-                language: 'html',
-                code: /* html */ `
-<div class="w-full grid gap-md grid-cols-3 h-150" :class="{ 'vv-skeleton': isLoading }">
-	<div class="w-150 h-150 col-span-1">
-		<div class="text-20 font-semibold mb-md">Upload image</div>
-		<vv-input-file v-model="file" name="input-file" modifiers="drop-area square hidden" accept=".gif,.jpg,.jpeg,.png,image/gif,image/jpeg,image/png" />
-	</div>
-	<div v-show="blurhash" class="h-150 col-span-2">
-		<picture class="flex gap-md justify-center">
-			<div>
-				<div class="text-20 font-semibold mb-md">Blurhash</div>
-				<canvas
-					ref="canvas"
-					class="w-150 h-150 block object-cover" />
-			</div>
-			<div>
-				<div class="text-20 font-semibold mb-md">Image</div>
-				<img
-					v-if="image"
-					class="w-150 h-150 block object-cover"
-					:class="{ 'vv-skeleton__item': isLoading }"
-					:src="imageUrl"
-					alt="image"
-					:width="image.width"
-					:height="image.height" />
-			</div>
-		</picture>
-	</div>
-</div>
-
-<script setup lang='ts'>
-	import { useBlurhash } from '@volverjs/ui-vue/composables'
-
-	const { encode, decode, loadImage } = useBlurhash()
-
-	const isLoading = ref(false)
-	const file = ref({})
-	const canvas = ref()
-	const isImgLoaded = ref(false)
-	const blurhash = ref('')
-	const imageUrl = ref('')
-	const image = ref()
-
-	watch(file, async (newValue) => {
-		if (newValue?.size) {
-			this.imageUrl = URL.createObjectURL(newValue)
-			this.image = await this.loadImage(this.imageUrl)
-			this.blurhash = await this.encode(newValue)
-		} else {
-			this.image = null
-			this.imageUrl = ''
-			this.blurhash = ''
-		}
-	}, { immediate: true })
-
-	watch(blurhash, async (newValue) => {
-		if (this.image) {
-			const blurhashDecoded = await this.decode(
-				newValue,
-				this.image.width,
-				this.image.height,
-			)
-
-			if (this.canvas) {
-				this.canvas.width = this.image.width
-				this.canvas.height = this.image.height
-				const ctx = this.canvas.getContext('2d')
-				const imageData = ctx.createImageData(
-					this.canvas.width,
-					this.canvas.height,
-				)
-				imageData.data.set(blurhashDecoded)
-				ctx.putImageData(imageData, 0, 0)
-			}
-		}
-	})
-</script>
-				`,
-            },
-        },
-    },
 }

package/src/stories/Breadcrumb/Breadcrumb.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultTest } from './Breadcrumb.test'
-import { defaultArgs, argTypes } from './Breadcrumb.settings'
 import VvBreadcrumb from '@/components/VvBreadcrumb/VvBreadcrumb.vue'
+import { argTypes, defaultArgs } from './Breadcrumb.settings'
+import { defaultTest } from './Breadcrumb.test'
 
 const meta: Meta<typeof VvBreadcrumb> = {
     title: 'Components/Breadcrumb',

package/src/stories/Breadcrumb/BreadcrumbSlots.stories.ts

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultTest } from './Breadcrumb.test'
-import { defaultArgs, argTypes } from './Breadcrumb.settings'
 import VvBreadcrumb from '@/components/VvBreadcrumb/VvBreadcrumb.vue'
 import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import { argTypes, defaultArgs } from './Breadcrumb.settings'
+import { defaultTest } from './Breadcrumb.test'
 
 const meta: Meta<typeof VvBreadcrumb> = {
     title: 'Components/Breadcrumb/Slots',
@@ -26,9 +26,9 @@ export const Label: Story = {
         },
         template: /* html */ `
 					<VvBreadcrumb v-bind="args">
-						<template #label="{route, index}">
-							<VvIcon v-if="index === 0" name="home" :aria-label="route.label"  />
-							<template v-else>{{ route.label }}</template>
+						<template #label="{index, label}">
+							<VvIcon v-if="index === 0" name="home" :aria-label="label"  />
+							<template v-else>{{ label }}</template>
 						</template>
 					</VvBreadcrumb>
             	`,

package/src/stories/Button/Button.settings.ts

@@ -1,13 +1,13 @@
-import type { ArgTypes, Meta } from '@storybook/vue3'
 import type { VvButton } from '@/components'
+import type { ArgTypes, Meta } from '@storybook/vue3'
+import normal from '@/assets/icons/normal.json'
 import {
     DefaultSlotArgTypes,
-    ModifiersArgTypes,
     DisabledArgTypes,
     LoadingArgTypes,
+    ModifiersArgTypes,
     UnselectableArgTypes,
 } from '@/stories/argTypes'
-import normal from '@/assets/icons/normal.json'
 
 export const defaultArgs: Meta<typeof VvButton>['args'] = {
     label: 'Button',

package/src/stories/Button/Button.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultTest } from './Button.test'
-import { argTypes, defaultArgs } from './Button.settings'
 import VvButton from '@/components/VvButton/VvButton.vue'
+import { argTypes, defaultArgs } from './Button.settings'
+import { defaultTest } from './Button.test'
 
 const meta: Meta<typeof VvButton> = {
     title: 'Components/Button',

package/src/stories/Button/Button.test.ts

@@ -1,6 +1,6 @@
-import { within } from '@storybook/test'
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
+import { within } from '@storybook/test'
 
 export async function defaultTest(
     { canvasElement, args }: PlayAttributes = {} as PlayAttributes,

package/src/stories/Button/ButtonIcon.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { Default } from './Button.stories'
-import { argTypes, defaultArgs } from './Button.settings'
 import VvButton from '@/components/VvButton/VvButton.vue'
+import { argTypes, defaultArgs } from './Button.settings'
+import { Default } from './Button.stories'
 
 const meta: Meta<typeof VvButton> = {
     title: 'Components/Button/Icon',

package/src/stories/Button/ButtonLink.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { Default } from './Button.stories'
-import { argTypes, defaultArgs } from './Button.settings'
 import VvButton from '@/components/VvButton/VvButton.vue'
+import { argTypes, defaultArgs } from './Button.settings'
+import { Default } from './Button.stories'
 
 const meta: Meta<typeof VvButton> = {
     title: 'Components/Button/Link',

package/src/stories/Button/ButtonLoading.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { Default } from './Button.stories'
-import { argTypes, defaultArgs } from './Button.settings'
 import VvButton from '@/components/VvButton/VvButton.vue'
+import { argTypes, defaultArgs } from './Button.settings'
+import { Default } from './Button.stories'
 
 const meta: Meta<typeof VvButton> = {
     title: 'Components/Button/Loading',

package/src/stories/Button/ButtonModifiers.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { Default } from './Button.stories'
-import { argTypes, defaultArgs } from './Button.settings'
 import VvButton from '@/components/VvButton/VvButton.vue'
+import { argTypes, defaultArgs } from './Button.settings'
+import { Default } from './Button.stories'
 
 const meta: Meta<typeof VvButton> = {
     title: 'Components/Button/Modifiers',

package/src/stories/Button/ButtonSlots.stories.ts

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { Default as DefaultStory } from './Button.stories'
-import { argTypes, defaultArgs } from './Button.settings'
-import VvButton from '@/components/VvButton/VvButton.vue'
 import VvBadge from '@/components/VvBadge/VvBadge.vue'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import { argTypes, defaultArgs } from './Button.settings'
+import { Default as DefaultStory } from './Button.stories'
 
 const meta: Meta<typeof VvButton> = {
     title: 'Components/Button/Slots',

package/src/stories/Button/ButtonState.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { Default } from './Button.stories'
-import { argTypes, defaultArgs } from './Button.settings'
 import VvButton from '@/components/VvButton/VvButton.vue'
+import { argTypes, defaultArgs } from './Button.settings'
+import { Default } from './Button.stories'
 
 const meta: Meta<typeof VvButton> = {
     title: 'Components/Button/State',

package/src/stories/Button/ButtonToggle.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { Default } from './Button.stories'
-import { argTypes, defaultArgs } from './Button.settings'
 import VvButton from '@/components/VvButton/VvButton.vue'
+import { argTypes, defaultArgs } from './Button.settings'
+import { Default } from './Button.stories'
 
 const meta: Meta<typeof VvButton> = {
     title: 'Components/Button/Toggle',

package/src/stories/ButtonGroup/ButtonGroup.settings.ts

@@ -1,11 +1,11 @@
 import type { ArgTypes } from '@storybook/vue3'
-import { argTypes as buttonArgTypes } from '../Button/Button.settings'
+import { VvButtonGroupProps } from '@/components/VvButtonGroup'
 import {
     DefaultSlotArgTypes,
     ModifiersArgTypes,
     UnselectableArgTypes,
 } from '@/stories/argTypes'
-import { VvButtonGroupProps } from '@/components/VvButtonGroup'
+import { argTypes as buttonArgTypes } from '../Button/Button.settings'
 
 export const defaultArgs = {
     ...propsToObject(VvButtonGroupProps),

package/src/stories/ButtonGroup/ButtonGroup.stories.ts

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultArgs, argTypes } from './ButtonGroup.settings'
-import { defaultTest } from './ButtonGroup.test'
 import VvButton from '@/components/VvButton/VvButton.vue'
 import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
+import { argTypes, defaultArgs } from './ButtonGroup.settings'
+import { defaultTest } from './ButtonGroup.test'
 
 const meta: Meta<typeof VvButtonGroup> = {
     title: 'Components/ButtonGroup',

package/src/stories/ButtonGroup/ButtonGroup.test.ts

@@ -1,6 +1,6 @@
-import { within } from '@storybook/test'
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
+import { within } from '@storybook/test'
 
 export async function defaultTest(
     { canvasElement, args }: PlayAttributes = {} as PlayAttributes,

package/src/stories/ButtonGroup/ButtonGroupModifiers.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { Default } from './ButtonGroup.stories'
-import { defaultArgs, argTypes } from './ButtonGroup.settings'
 import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
+import { argTypes, defaultArgs } from './ButtonGroup.settings'
+import { Default } from './ButtonGroup.stories'
 
 const meta: Meta<typeof VvButtonGroup> = {
     title: 'Components/ButtonGroup/Modifiers',

package/src/stories/ButtonGroup/ButtonGroupSlots.stories.ts

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultArgs, argTypes } from './ButtonGroup.settings'
-import { defaultTest } from './ButtonGroup.test'
 import VvButton from '@/components/VvButton/VvButton.vue'
 import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
+import { argTypes, defaultArgs } from './ButtonGroup.settings'
+import { defaultTest } from './ButtonGroup.test'
 
 const meta: Meta<typeof VvButtonGroup> = {
     title: 'Components/ButtonGroup/Slots',

package/src/stories/ButtonGroup/ButtonGroupToggle.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { Default } from './ButtonGroup.stories'
-import { defaultArgs, argTypes } from './ButtonGroup.settings'
 import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
+import { argTypes, defaultArgs } from './ButtonGroup.settings'
+import { Default } from './ButtonGroup.stories'
 
 const meta: Meta<typeof VvButtonGroup> = {
     title: 'Components/ButtonGroup/Toggle',

package/src/stories/Card/Card.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaulTest } from './Card.test'
-import { defaultArgs, argTypes } from './Card.settings'
 import VvCard from '@/components/VvCard/VvCard.vue'
+import { argTypes, defaultArgs } from './Card.settings'
+import { defaulTest } from './Card.test'
 
 const meta: Meta<typeof VvCard> = {
     title: 'Components/Card',

package/src/stories/Card/Card.test.ts

@@ -1,6 +1,6 @@
-import { within } from '@storybook/test'
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
+import { within } from '@storybook/test'
 
 export async function defaulTest({ canvasElement, args }: PlayAttributes) {
     const element = await within(canvasElement).findByTestId('card')

package/src/stories/Card/CardSlots.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaulTest } from './Card.test'
-import { defaultArgs, argTypes } from './Card.settings'
 import VvCard from '@/components/VvCard/VvCard.vue'
+import { argTypes, defaultArgs } from './Card.settings'
+import { defaulTest } from './Card.test'
 
 const meta: Meta<typeof VvCard> = {
     title: 'Components/Card/Slots',

package/src/stories/Checkbox/Checkbox.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultArgs, argTypes } from './Checkbox.settings'
-import { defaultTest } from './Checkbox.test'
 import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+import { argTypes, defaultArgs } from './Checkbox.settings'
+import { defaultTest } from './Checkbox.test'
 
 const meta: Meta<typeof VvCheckbox> = {
     title: 'Components/Checkbox',

package/src/stories/Checkbox/Checkbox.test.ts

@@ -1,7 +1,7 @@
-import { within } from '@storybook/test'
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
     const element = await within(canvasElement).findByTestId('element')

package/src/stories/Checkbox/CheckboxBinary.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultArgs, argTypes } from './Checkbox.settings'
-import { Default } from './Checkbox.stories'
 import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+import { argTypes, defaultArgs } from './Checkbox.settings'
+import { Default } from './Checkbox.stories'
 
 const meta: Meta<typeof VvCheckbox> = {
     title: 'Components/Checkbox/Binary',

package/src/stories/Checkbox/CheckboxSlots.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultArgs, argTypes } from './Checkbox.settings'
-import { Default as DefaultStory } from './Checkbox.stories'
 import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+import { argTypes, defaultArgs } from './Checkbox.settings'
+import { Default as DefaultStory } from './Checkbox.stories'
 
 const meta: Meta<typeof VvCheckbox> = {
     title: 'Components/Checkbox/Slots',

package/src/stories/CheckboxGroup/CheckboxGroup.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultArgs, argTypes } from './CheckboxGroup.settings'
-import { defaultTest } from './CheckboxGroup.test'
 import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import { argTypes, defaultArgs } from './CheckboxGroup.settings'
+import { defaultTest } from './CheckboxGroup.test'
 
 const meta: Meta<typeof VvCheckboxGroup> = {
     title: 'Components/CheckboxGroup',

package/src/stories/CheckboxGroup/CheckboxGroup.test.ts

@@ -1,8 +1,8 @@
-import { within } from '@storybook/test'
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { sleep } from '@/test/sleep'
 import { getOptionValue } from '@/test/options'
+import { sleep } from '@/test/sleep'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
     const element = await within(canvasElement).findByTestId('element')

package/src/stories/CheckboxGroup/CheckboxGroupOptions.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { Default } from './CheckboxGroup.stories'
-import { defaultArgs, argTypes } from './CheckboxGroup.settings'
 import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import { argTypes, defaultArgs } from './CheckboxGroup.settings'
+import { Default } from './CheckboxGroup.stories'
 
 const meta: Meta<typeof VvCheckboxGroup> = {
     title: 'Components/CheckboxGroup/Options',

package/src/stories/CheckboxGroup/CheckboxGroupSlots.stories.ts

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultArgs, argTypes } from './CheckboxGroup.settings'
-import { defaultTest } from './CheckboxGroup.test'
-import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
 import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import { argTypes, defaultArgs } from './CheckboxGroup.settings'
+import { defaultTest } from './CheckboxGroup.test'
 
 const meta: Meta<typeof VvCheckboxGroup> = {
     title: 'Components/CheckboxGroup/Slots',

package/src/stories/Combobox/Combobox.settings.ts

@@ -1,21 +1,21 @@
-import type { ArgTypes, Meta } from '@storybook/vue3'
 import type { VvCombobox } from '@/components'
+import type { ArgTypes, Meta } from '@storybook/vue3'
+import { VvComboboxProps } from '@/components/VvCombobox'
 import {
-    ValidArgTypes,
-    InvalidArgTypes,
+    DisabledArgTypes,
+    DropdownArgTypes,
+    FloatingLabelArgTypes,
     HintArgTypes,
+    IconArgTypes,
+    InvalidArgTypes,
     LoadingArgTypes,
-    DisabledArgTypes,
-    ReadonlyArgTypes,
     ModifiersArgTypes,
     OptionsArgTypes,
-    IconArgTypes,
+    ReadonlyArgTypes,
     TabindexArgTypes,
-    FloatingLabelArgTypes,
     UnselectableArgTypes,
-    DropdownArgTypes,
+    ValidArgTypes,
 } from '@/stories/argTypes'
-import { VvComboboxProps } from '@/components/VvCombobox'
 
 export const defaultArgs: Meta<typeof VvCombobox>['args'] = {
     ...propsToObject(VvComboboxProps),

package/src/stories/Combobox/Combobox.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultTest } from './Combobox.test'
-import { defaultArgs, argTypes } from './Combobox.settings'
 import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
+import { argTypes, defaultArgs } from './Combobox.settings'
+import { defaultTest } from './Combobox.test'
 
 const meta: Meta<typeof VvCombobox> = {
     title: 'Components/Combobox',

package/src/stories/Combobox/Combobox.test.ts

@@ -1,8 +1,8 @@
-import { within } from '@storybook/test'
 import type { PlayAttributes } from '@/test/types'
+import { defaultTest as selectDefaultTest } from '@/stories/Select/Select.test'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { defaultTest as selectDefaultTest } from '@/stories/Select/Select.test'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
     // native

package/src/stories/Combobox/ComboboxIconPosition.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { Default } from './Combobox.stories'
-import { defaultArgs, argTypes } from './Combobox.settings'
 import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
+import { argTypes, defaultArgs } from './Combobox.settings'
+import { Default } from './Combobox.stories'
 
 const meta: Meta<typeof VvCombobox> = {
     title: 'Components/Combobox/Icon',

package/src/stories/Combobox/ComboboxMultiple.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultArgs, argTypes } from './Combobox.settings'
-import { Default } from './Combobox.stories'
 import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
+import { argTypes, defaultArgs } from './Combobox.settings'
+import { Default } from './Combobox.stories'
 
 const meta: Meta<typeof VvCombobox> = {
     title: 'Components/Combobox/Multiple',

package/src/stories/Combobox/ComboboxOptions.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { Default } from './Combobox.stories'
-import { defaultArgs, argTypes } from './Combobox.settings'
 import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
+import { argTypes, defaultArgs } from './Combobox.settings'
+import { Default } from './Combobox.stories'
 
 const meta: Meta<typeof VvCombobox> = {
     title: 'Components/Combobox/Options',

package/src/stories/Combobox/ComboboxSlots.stories.ts

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import { argTypes, defaultArgs } from './Combobox.settings'
 import { Default } from './Combobox.stories'
-import { defaultArgs, argTypes } from './Combobox.settings'
 import { defaultTest } from './Combobox.test'
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
-import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
 
 const meta: Meta<typeof VvCombobox> = {
     title: 'Components/Combobox/Slots',