@volverjs/ui-vue 0.0.6-beta.7 → 0.0.7-beta.1

package/src/stories/Select/SelectSlots.stories.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
+import { Default } from './Select.stories'
+import { defaultArgs, argTypes } from './Select.settings'
+
+const meta: Meta<typeof VvSelect> = {
+	title: 'Components/Select/Slots',
+	component: VvSelect,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvSelect>
+
+export const Before: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		before: '<div class="vv-badge vv-badge--sm uppercase">Before</div>',
+	},
+}
+
+export const After: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		after: '<div class="vv-badge vv-badge--sm uppercase">After</div>',
+	},
+}
+
+export const Hint: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		hint: 'Hint <em class="italic">slot!</em>',
+	},
+}

package/src/stories/Tab/Tab.stories.ts

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvTab from '@/components/VvTab/VvTab.vue'
+import { defaultArgs, defaultArgTypes } from './Tab.settings'
+import { defaultTest } from './Tab.test'
+
+const meta: Meta<typeof VvTab> = {
+	title: 'Components/Tab',
+	component: VvTab,
+	args: defaultArgs,
+	argTypes: defaultArgTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvTab>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: {VvTab},
+		setup() {
+			return {args}
+		},
+		template: /* html */ `
+			<div class="m-md w-1/2">
+				<vv-tab v-bind="args" data-testId="element">
+					<template #tab-item_0>
+						<span class="text-20 font-semibold">Tab 1</span>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
+							vitae elit libero, a pharetra augue. Nullam id dolor id nibh
+							ultricies vehicula ut id elit. Morbi leo risus, porta ac
+							consectetur ac, vestibulum at eros. Praesent commodo cursus
+							magna, vel scelerisque nisl consectetur et. Donec sed odio dui.
+							Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae
+							elit libero, a pharetra augue.
+						</p>
+					</template>
+					<template #tab-item_1>
+						<span class="text-20 font-semibold">Tab 2</span>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
+							vitae elit libero, a pharetra augue. Nullam id dolor id nibh
+							ultricies vehicula ut id elit. Morbi leo risus, porta ac
+							consectetur ac, vestibulum at eros. Praesent commodo cursus
+							magna, vel scelerisque nisl consectetur et. Donec sed odio dui.
+							Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae
+							elit libero, a pharetra augue.
+						</p>
+					</template>
+					<template #tab-3>
+						<span class="text-20 font-semibold">Tab 3</span>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
+							vitae elit libero, a pharetra augue. Nullam id dolor id nibh
+							ultricies vehicula ut id elit. Morbi leo risus, porta ac
+							consectetur ac, vestibulum at eros. Praesent commodo cursus
+							magna, vel scelerisque nisl consectetur et. Donec sed odio dui.
+							Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae
+							elit libero, a pharetra augue.
+						</p>
+					</template>
+				</vv-tab>
+			</div>`
+	}),
+	play: defaultTest,
+}

package/src/stories/Textarea/Textarea.settings.ts

@@ -14,7 +14,6 @@ export const argTypes = {
 	...InputTextareaArgTypes,
 	...HintArgTypes,
 	cols: {
-		type: 'number',
 		description:
 			'The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.',
 		control: {
@@ -27,7 +26,6 @@ export const argTypes = {
 		},
 	},
 	rows: {
-		type: 'number',
 		description:
 			'The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.',
 		control: {
@@ -40,9 +38,6 @@ export const argTypes = {
 		},
 	},
 	wrap: {
-		type: {
-			summary: 'string',
-		},
 		description:
 			'Indicates how the control should wrap the value for form submission.',
 		options: ['hard', 'soft', 'off'],
@@ -56,9 +51,6 @@ export const argTypes = {
 		},
 	},
 	spellcheck: {
-		type: {
-			summary: ['string', 'boolean'],
-		},
 		description:
 			'Specifies whether the textarea is subject to spell checking by the underlying browser/OS. ',
 		options: [true, false, 'default'],

package/src/stories/Textarea/Textarea.stories.ts

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
+import { defaultArgs, argTypes } from './Textarea.settings'
+import { defaultTest } from './Textarea.test'
+
+const meta: Meta<typeof VvTextarea> = {
+	title: 'Components/Textarea',
+	component: VvTextarea,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvTextarea>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvTextarea },
+		setup() {
+			return { args }
+		},
+		data: () => ({ inputValue: undefined }),
+		template: /* html */ `
+			<vv-textarea v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+				<template #before v-if="args.before"><div class="flex" v-html="args.before"></div></template>
+				<template #after v-if="args.after"><div class="flex" v-html="args.after"></div></template>
+				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
+			</vv-textarea>
+			<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+		`,
+	}),
+	play: defaultTest,
+}
+
+export const Disabled: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		disabled: true,
+	},
+}
+
+export const Readonly: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		readonly: true,
+	},
+}
+
+export const Valid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		valid: true,
+		validLabel: 'The field is valid.',
+		icon: 'check',
+	},
+}
+
+export const Invalid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		invalid: true,
+		invalidLabel: 'The field is required.',
+		icon: 'error-2',
+	},
+}
+
+export const Hint: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		hintLabel: 'Please enter your name.',
+	},
+}
+
+export const Loading: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		loading: true,
+		loadingLabel: 'Loading...',
+	},
+}
+
+export const Floating: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		floating: true,
+	},
+}
+
+export const Resizable: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		resizable: true,
+	},
+}

package/src/stories/Textarea/TextareaLength.stories.ts

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
+import { Default } from './Textarea.stories'
+import { defaultArgs, argTypes } from './Textarea.settings'
+
+const meta: Meta<typeof VvTextarea> = {
+	title: 'Components/Textarea/Length',
+	component: VvTextarea,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvTextarea>
+
+export const Maxlength: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		maxlength: 5,
+	},
+}
+
+export const Minlength: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		minlength: 5,
+	},
+}
+
+export const Count: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		count: true,
+		minLength: 100,
+	},
+}
+
+export const Limit: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		count: 'limit',
+		maxlength: 100,
+	},
+}
+
+export const Countdown: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		count: 'countdown',
+		maxlength: 100,
+	},
+}

package/src/stories/Textarea/TextareaSlots.stories.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
+import { Default } from './Textarea.stories'
+import { defaultArgs, argTypes } from './Textarea.settings'
+
+const meta: Meta<typeof VvTextarea> = {
+	title: 'Components/Textarea/Slots',
+	component: VvTextarea,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvTextarea>
+
+export const Before: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		before: '<div class="vv-badge vv-badge--sm uppercase">Before</div>',
+	},
+}
+
+export const After: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		after: '<div class="vv-badge vv-badge--sm uppercase">After</div>',
+	},
+}
+
+export const Hint: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		hint: 'Hint <em class="italic">slot!</em>',
+	},
+}

package/src/stories/Textarea/TextareatIconPosition.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
+import { Default } from './Textarea.stories'
+import { defaultArgs, argTypes } from './Textarea.settings'
+
+const meta: Meta<typeof VvTextarea> = {
+	title: 'Components/Textarea/Icon',
+	component: VvTextarea,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvTextarea>
+
+export const DefaultIconPosition: 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/Tooltip/Tooltip.settings.ts

@@ -1,22 +1,22 @@
 import { VvTooltipProps } from '@/components/VvTooltip'
 import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
+import type { ArgTypes } from '@storybook/types'
 
 export const defaultArgs = {
 	...propsToObject(VvTooltipProps),
 	value: "I'm a tooltip",
 }
 
-export const argTypes = {
+export const argTypes: ArgTypes = {
 	...ModifiersArgTypes,
 	...DefaultSlotArgTypes,
 	position: {
-		type: {
-			summary: 'string',
-		},
+		type: 'string',
 		control: {
 			type: 'select',
 		},
 		table: {
+			type: 'string',
 			defaultValue: { summary: 'bottom' },
 		},
 		description: 'Indicates where to place the tooltip',

package/src/stories/Tooltip/Tooltip.stories.ts

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvTooltip from '@/components/VvTooltip/VvTooltip.vue'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import { defaultArgs, argTypes } from './Tooltip.settings'
+import { defaultTest } from './Tooltip.test'
+
+const meta: Meta<typeof VvTooltip> = {
+	title: 'Components/Tooltip',
+	component: VvTooltip,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvTooltip>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvButton, VvTooltip },
+		setup() {
+			return { args }
+		},
+		template: /* html */ `
+			<div class="w-full h-150">
+				<vv-button class="absolute left-1/2 top-1/2 -translate-1/2" data-testId="parent">
+					Hover me
+					<vv-tooltip v-bind="args">
+						<template #default v-if="args.default"><div v-html="args.default"></div></template>
+					</vv-tooltip>
+				</vv-button>
+			</div>
+		`,
+	}),
+	play: defaultTest,
+}

package/src/stories/Tooltip/TooltipDirective.stories.ts

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvTooltip from '@/components/VvTooltip/VvTooltip.vue'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import { defaultArgs, argTypes } from './Tooltip.settings'
+import { defaultTest } from './Tooltip.test'
+
+const meta: Meta<typeof VvTooltip> = {
+	title: 'Directives/Tooltip',
+	component: VvTooltip,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvTooltip>
+
+export const DefaultDirective: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvButton, VvTooltip },
+		setup() {
+			return { args }
+		},
+		template: /* html */ `
+			<div class="w-full h-150">
+				<vv-button v-tooltip:[args.position]="args.value" class="absolute left-1/2 top-1/2 -translate-1/2" data-testId="parent">
+					HOVER Me
+				</vv-button>
+			</div>
+		`,
+	}),
+	play: defaultTest,
+}
+
+export const Top: Story = {
+	...DefaultDirective,
+	args: {
+		...DefaultDirective.args,
+		position: 'top',
+	},
+}
+
+export const Bottom: Story = {
+	...DefaultDirective,
+	args: {
+		...DefaultDirective.args,
+		position: 'bottom',
+	},
+}
+
+export const Right: Story = {
+	...DefaultDirective,
+	args: {
+		...DefaultDirective.args,
+		position: 'right',
+	},
+}
+
+export const Left: Story = {
+	...DefaultDirective,
+	args: {
+		...DefaultDirective.args,
+		position: 'left',
+	},
+}