@volverjs/ui-vue 0.0.10-beta.4 → 0.0.10-beta.40

package/src/stories/Icon/Icon.settings.ts

@@ -1,72 +1,73 @@
-import { VvIconProps } from '@/components/VvIcon'
+import type { ArgTypes } from '@storybook/vue3'
+import { VvIconPropsDefaults } from '@/components/VvIcon'
 import normal from '@/assets/icons/normal.json'
 import { ModifiersArgTypes } from '@/stories/argTypes'
 
 export const defaultArgs = {
-	...propsToObject(VvIconProps),
-	name: 'add-circle',
-	width: 48
+    ...VvIconPropsDefaults,
+    name: 'add-circle',
+    width: 48,
 }
 
-export const argTypes = {
-	name: {
-		options: Object.keys(normal.icons),
-		control: {
-			type: 'select',
-		},
-	},
-	mode: {
-		options: ['style', 'bg', 'mask', 'svg'],
-		control: {
-			type: 'select',
-		},
-	},
-	src: {
-		description: 'Url remote SVG icon',
-		control: {
-			type: 'text',
-		},
-		table: {
-			type: {
-				summary: 'url',
-			},
-		},
-	},
-	svg: {
-		description: 'Svg icon string',
-		control: {
-			type: 'text',
-		},
-		table: {
-			type: {
-				summary: 'xml',
-			},
-		},
-	},
-	prefix: {
-		options: ['simple', 'normal', 'detailed'],
-		control: {
-			type: 'select',
-		},
-		table: {
-			defaultValue: {
-				summary: 'normal',
-			},
-		},
-	},
-	flip: {
-		options: ['', 'vertical', 'horizontal'],
-		control: {
-			type: 'radio',
-		},
-	},
-	onLoad: {
-		description: 'A callback that is called when icon data has been loaded',
-		table: {
-			type: {
-				summary: 'function',
-			},
-		},
-	},
-	...ModifiersArgTypes,
+export const argTypes: ArgTypes = {
+    name: {
+        options: Object.keys(normal.icons),
+        control: {
+            type: 'select',
+        },
+    },
+    mode: {
+        options: ['style', 'bg', 'mask', 'svg'],
+        control: {
+            type: 'select',
+        },
+    },
+    src: {
+        description: 'Url remote SVG icon',
+        control: {
+            type: 'text',
+        },
+        table: {
+            type: {
+                summary: 'url',
+            },
+        },
+    },
+    svg: {
+        description: 'Svg icon string',
+        control: {
+            type: 'text',
+        },
+        table: {
+            type: {
+                summary: 'xml',
+            },
+        },
+    },
+    prefix: {
+        options: ['simple', 'normal', 'detailed'],
+        control: {
+            type: 'select',
+        },
+        table: {
+            defaultValue: {
+                summary: 'normal',
+            },
+        },
+    },
+    flip: {
+        options: ['', 'vertical', 'horizontal'],
+        control: {
+            type: 'radio',
+        },
+    },
+    onLoad: {
+        description: 'A callback that is called when icon data has been loaded',
+        table: {
+            type: {
+                summary: 'function',
+            },
+        },
+    },
+    ...ModifiersArgTypes,
 }

package/src/stories/Icon/Icon.stories.ts

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
 import { defaultArgs, argTypes } from './Icon.settings'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
 import NormalIcons from '@/assets/icons/normal.json'
 
 const meta: Meta<typeof VvIcon> = {
-	title: 'Components/Icon',
-	component: VvIcon,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
+    title: 'Components/Icon',
+    component: VvIcon,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -16,33 +16,32 @@ export default meta
 type Story = StoryObj<typeof VvIcon>
 
 export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvIcon },
-		setup() {
-			return { args }
-		},
-		template: /*html*/ `<vv-icon v-bind="args" />`,
-	}),
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvIcon },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `<vv-icon v-bind="args" />`,
+    }),
 }
 
 export const Remote: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		name: 'fingerprint',
-		src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/action/fingerprint/materialicons/24px.svg',
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        name: 'fingerprint',
+        src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/action/fingerprint/materialicons/24px.svg',
+    },
 }
 
 export const Inline: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		name: 'bell-2',
-		svg: `<svg viewBox="0 0 24 24">${NormalIcons.icons.bell.body}</svg>`,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        name: 'bell-2',
+        svg: `<svg viewBox="0 0 24 24">${NormalIcons.icons.bell.body}</svg>`,
+    },
 }
-

package/src/stories/Icon/IconsCollection.stories.ts

@@ -1,14 +1,14 @@
 import { ref, watch } from 'vue'
 import type { Meta, StoryObj } from '@storybook/vue3'
+import { defaultArgs, argTypes } from './Icon.settings'
 import VvIcon from '@/components/VvIcon/VvIcon.vue'
 import { icons as NormalIcons } from '@/assets/icons/normal.json'
-import { defaultArgs, argTypes } from './Icon.settings'
 
 const meta: Meta<typeof VvIcon> = {
-	title: 'Components/Icon/Collection',
-	component: VvIcon,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Icon/Collection',
+    component: VvIcon,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -16,22 +16,22 @@ export default meta
 type Story = StoryObj<typeof VvIcon>
 
 export const Default: Story = {
-	args: {
-		...defaultArgs,
-		width: 24,
-	},
-	render: (args) => ({
-		components: { VvIcon },
-		setup() {
-			const allIcons = Object.keys(NormalIcons)
-			const icons = ref(allIcons)
-			const search = ref('')
-			watch(search, (newValue) => {
-				icons.value = allIcons.filter((icon) => icon.includes(newValue))
-			})
-			return { args, search, icons }
-		},
-		template: /*html*/ `
+    args: {
+        ...defaultArgs,
+        width: 24,
+    },
+    render: args => ({
+        components: { VvIcon },
+        setup() {
+            const allIcons = Object.keys(NormalIcons)
+            const icons = ref(allIcons)
+            const search = ref('')
+            watch(search, (newValue) => {
+                icons.value = allIcons.filter(icon => icon.includes(newValue))
+            })
+            return { args, search, icons }
+        },
+        template: /* html */ `
 			<div class="absolute inset-0 overflow-y-auto p-16">
 				<div class="vv-input-text">
 					<div class="vv-input-text__wrapper">
@@ -49,5 +49,5 @@ export const Default: Story = {
 				</div>
 			</div>
 		`,
-	}),
+    }),
 }

package/src/stories/InputFile/InputFile.settings.ts

@@ -0,0 +1,37 @@
+import type { ArgTypes } from '@storybook/vue3'
+import { HintArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
+import { VvInputFileProps } from '@/components/VvInputFile'
+
+export const defaultArgs = {
+    ...propsToObject(VvInputFileProps),
+    name: 'vv-input-file',
+    label: 'Upload file',
+}
+
+export const argTypes: ArgTypes = {
+    ...HintArgTypes,
+    'modifiers': {
+        ...ModifiersArgTypes.modifiers,
+        options: ['hidden', 'square', 'circle'],
+    },
+    'drop-area': {
+        description: 'Drop area slot',
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    'update:model-value': {
+        table: {
+            category: 'Events',
+            type: {
+                summary: 'File | File[]',
+            },
+        },
+    },
+}

package/src/stories/InputFile/InputFile.stories.ts

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { defaultArgs, argTypes } from './InputFile.settings'
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
+
+const meta: Meta = {
+    title: 'Components/InputFile',
+    component: VvInputFile,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputFile>
+
+export const Default: Story = {
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvInputFile },
+        setup() {
+            const files = ref([])
+            return {
+                args,
+                files,
+            }
+        },
+        template: /* html */ `
+			<vv-input-file v-bind="args" v-model="files">
+				<template #drop-area v-if="args['drop-area']"><div v-html="args['drop-area']"></div></template>
+				<template #hint v-if="args['hint']"><div v-html="args['hint']"></div></template>
+			</vv-input-file>
+		`,
+    }),
+}
+
+export const Readonly: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        readonly: true,
+    },
+}
+
+export const Valid: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        valid: true,
+        validLabel: 'The field is valid.',
+    },
+}
+
+export const Invalid: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        invalid: true,
+        invalidLabel: 'The field is required.',
+    },
+}
+
+export const Hint: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        hintLabel: 'Please upload a file.',
+    },
+}
+
+export const Loading: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        loading: true,
+        loadingLabel: 'Loading...',
+    },
+}
+
+export const Progress: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        progress: 30,
+        hintLabel: '30%',
+    },
+}

package/src/stories/InputFile/InputFileDropArea.stories.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { Default as DefaultStory } from './InputFile.stories'
+import { argTypes, defaultArgs } from './InputFile.settings'
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
+
+const meta: Meta<typeof VvInputFile> = {
+    title: 'Components/InputFile/DropArea',
+    component: VvInputFile,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputFile>
+
+export const Default: Story = {
+    ...DefaultStory,
+    args: {
+        ...DefaultStory.args,
+        label: 'Drop area',
+        dropArea: true,
+    },
+}
+
+export const InputHidden: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        label: 'Drop area hidden input',
+        dropArea: true,
+        modifiers: 'hidden',
+    },
+}
+
+export const Square: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        class: 'max-w-192',
+        label: 'Drop area square',
+        dropArea: true,
+        modifiers: 'square hidden',
+    },
+}
+
+export const Circle: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        class: 'max-w-192',
+        label: 'Drop area circle',
+        dropArea: true,
+        modifiers: 'circle hidden',
+    },
+}

package/src/stories/InputFile/InputFileIconPosition.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { Default } from './InputFile.stories'
+import { defaultArgs, argTypes } from './InputFile.settings'
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
+
+const meta: Meta<typeof VvInputFile> = {
+    title: 'Components/InputFile/Icon',
+    component: VvInputFile,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputFile>
+
+export const DefaultPosition: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        icon: 'heart',
+    },
+}
+
+export const After: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        icon: 'heart',
+        iconPosition: 'after',
+    },
+}
+
+export const Src: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        icon: {
+            name: 'engineering',
+            src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/social/engineering/materialicons/24px.svg',
+        },
+    },
+}

package/src/stories/InputFile/InputFileSlots.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { Default as DefaultStory } from './InputFile.stories'
+import { argTypes, defaultArgs } from './InputFile.settings'
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
+
+const meta: Meta<typeof VvInputFile> = {
+    title: 'Components/InputFile/Slots',
+    component: VvInputFile,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputFile>
+
+export const DropArea: Story = {
+    ...DefaultStory,
+    args: {
+        ...DefaultStory.args,
+        'class': 'max-w-320',
+        'drop-area': 'Drag one or more files to this drop zone.',
+        'dropArea': true,
+    },
+}
+
+export const Hint: Story = {
+    ...DefaultStory,
+    args: {
+        ...DefaultStory.args,
+        hint: 'Hint <em class="italic">slot!</em>',
+    },
+}