@volverjs/ui-vue 0.0.10-beta.20 → 0.0.10-beta.21

package/src/stories/InputFile/{InputFileModifiers.stories.ts → InputFileDropArea.stories.ts}

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

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

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
+import { Default } from './InputFile.stories'
+import { defaultArgs, argTypes } from './InputFile.settings'
+
+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

@@ -18,8 +18,16 @@ export const DropArea: Story = {
 	...DefaultStory,
 	args: {
 		...DefaultStory.args,
-		'drop-area':
-			'<div class="text-20 font-weight">Drop here your file</div>',
-		modifiers: 'drop-area hidden square',
+		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>',
 	},
 }

package/src/types/input-file.ts

@@ -4,13 +4,15 @@ export type UploadedFile<Source = undefined> = Source extends undefined
 			size: number
 			type: string
 			url: string
+			thumbnailUrl?: string
 			lastModified?: number
-	  }
+		}
 	: {
 			name: string
 			size: number
 			type: string
 			url: string
+			thumbnailUrl?: string
 			lastModified?: number
 			source: Source
-	  }
+		}