@volverjs/ui-vue 0.0.6-beta.6 → 0.0.6

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',
+	},
+}

package/src/stories/argTypes.ts

@@ -3,7 +3,6 @@ import { Placement, Position, Side } from '../constants'
 
 export const ValidArgTypes = {
 	valid: {
-		type: 'boolean',
 		description: 'Valid state',
 		table: {
 			defaultValue: {
@@ -12,9 +11,6 @@ export const ValidArgTypes = {
 		},
 	},
 	validLabel: {
-		type: {
-			summary: ['string', 'string[]'],
-		},
 		description: 'Valid hint label',
 		control: {
 			type: 'text',
@@ -24,7 +20,6 @@ export const ValidArgTypes = {
 
 export const InvalidArgTypes = {
 	invalid: {
-		type: 'boolean',
 		description: 'Invalid state',
 		table: {
 			defaultValue: {
@@ -33,9 +28,6 @@ export const InvalidArgTypes = {
 		},
 	},
 	invalidLabel: {
-		type: {
-			summary: ['string', 'string[]'],
-		},
 		description: 'Invalid hint label',
 		control: {
 			type: 'text',
@@ -45,7 +37,6 @@ export const InvalidArgTypes = {
 
 export const LoadingArgTypes = {
 	loading: {
-		type: 'boolean',
 		description: 'Loading state',
 		table: {
 			defaultValue: {
@@ -54,9 +45,6 @@ export const LoadingArgTypes = {
 		},
 	},
 	loadingLabel: {
-		type: {
-			summary: 'string',
-		},
 		description: 'Loading label',
 		control: {
 			type: 'text',
@@ -66,8 +54,8 @@ export const LoadingArgTypes = {
 
 export const DisabledArgTypes = {
 	disabled: {
-		type: 'boolean',
-		description: 'Whether the form control is disabled',
+		control: 'boolean',
+		description: 'Whether the component is disabled',
 		table: {
 			defaultValue: {
 				summary: false,
@@ -78,7 +66,6 @@ export const DisabledArgTypes = {
 
 export const ReadonlyArgTypes = {
 	readonly: {
-		type: 'boolean',
 		description: 'The value is not editable',
 		table: {
 			defaultValue: {
@@ -90,9 +77,6 @@ export const ReadonlyArgTypes = {
 
 export const ModifiersArgTypes = {
 	modifiers: {
-		type: {
-			summary: ['string', 'string[]'],
-		},
 		description: 'Component BEM modifiers',
 		options: [],
 		control: {
@@ -123,18 +107,12 @@ export const IconArgTypes = {
 
 export const OptionsArgTypes = {
 	options: {
-		type: {
-			summary: ['string[]', 'object[]'],
-		},
 		description: 'List of options',
 		control: {
 			type: 'array',
 		},
 	},
 	labelKey: {
-		type: {
-			summary: ['string', 'function'],
-		},
 		description: 'Key of label in option object',
 		control: {
 			type: 'text',
@@ -146,9 +124,6 @@ export const OptionsArgTypes = {
 		},
 	},
 	valueKey: {
-		type: {
-			summary: ['string', 'function'],
-		},
 		description: 'Key of value in option object',
 		control: {
 			type: 'text',
@@ -160,9 +135,6 @@ export const OptionsArgTypes = {
 		},
 	},
 	disabledKey: {
-		type: {
-			summary: ['string', 'function'],
-		},
 		description: 'Key of disabled in option object',
 		control: {
 			type: 'text',
@@ -196,7 +168,6 @@ export const CountArgTypes = {
 
 export const DebounceArgTypes = {
 	debounce: {
-		type: 'number',
 		description: 'Debounce milliseconds',
 		control: {
 			type: 'number',
@@ -247,7 +218,6 @@ export const HintArgTypes = {
 
 export const TabindexArgTypes = {
 	tabindex: {
-		type: 'number',
 		description: 'Global attribute tabindex',
 		control: {
 			type: 'number',
@@ -262,9 +232,6 @@ export const TabindexArgTypes = {
 
 export const IdNameArgTypes = {
 	id: {
-		type: {
-			summary: ['string', 'number'],
-		},
 		description: 'Global attribute id.',
 		control: {
 			type: 'text',
@@ -276,9 +243,6 @@ export const IdNameArgTypes = {
 		},
 	},
 	name: {
-		type: {
-			summary: 'string',
-		},
 		description:
 			'Name of the form control. Submitted with the form as part of a name/value pair.',
 		control: {
@@ -401,14 +365,14 @@ export const DropdownArgTypes = {
 			},
 		},
 	},
-	autoClose: {
-		description: 'Close dropdown on click outside',
+	keepOpen: {
+		description: 'Keep open dropdown on click outside',
 		control: {
 			type: 'boolean',
 		},
 		table: {
 			defaultValue: {
-				summary: true,
+				summary: false,
 			},
 			type: {
 				summary: 'boolean',
@@ -433,7 +397,6 @@ export const DropdownArgTypes = {
 
 export const UnselectableArgTypes = {
 	unselectable: {
-		type: 'boolean',
 		description: 'If true the field will be unselectable',
 		table: {
 			defaultValue: {
@@ -445,7 +408,6 @@ export const UnselectableArgTypes = {
 
 export const FloatingLabelArgTypes = {
 	floating: {
-		type: 'boolean',
 		description: 'If true the label will be floating',
 		table: {
 			defaultValue: {
@@ -457,7 +419,6 @@ export const FloatingLabelArgTypes = {
 
 export const AutofocusArgTypes = {
 	autofocus: {
-		type: 'boolean',
 		description: 'Global attribute autofocus.',
 		table: {
 			defaultValue: {
@@ -469,9 +430,6 @@ export const AutofocusArgTypes = {
 
 export const AutocompleteArgTypes = {
 	autocomplete: {
-		type: {
-			summary: 'string',
-		},
 		description: 'Hint for for autofill feature.',
 		control: {
 			type: 'text',
@@ -501,7 +459,6 @@ export const InputTextareaArgTypes = {
 	...IconArgTypes,
 	...FloatingLabelArgTypes,
 	minlength: {
-		type: 'number',
 		description:
 			'Minimum length (number of characters) of value. Available for input types: text, search, url, tel, email, password.',
 		control: {
@@ -509,7 +466,6 @@ export const InputTextareaArgTypes = {
 		},
 	},
 	maxlength: {
-		type: 'number',
 		description:
 			'Maximum length (number of characters) of value. Available for input types: text, search, url, tel, email, password, number.',
 		control: {
@@ -517,7 +473,6 @@ export const InputTextareaArgTypes = {
 		},
 	},
 	placeholder: {
-		type: 'string',
 		description:
 			'Text that appears in the form control when it has no value set. Available for input types: text, search, url, tel, email, password, number.',
 		control: {
@@ -525,7 +480,6 @@ export const InputTextareaArgTypes = {
 		},
 	},
 	required: {
-		type: 'boolean',
 		description:
 			'A value is required or must be check for the form to be submittable. Available for all input types except color.',
 		table: {
@@ -535,7 +489,6 @@ export const InputTextareaArgTypes = {
 		},
 	},
 	label: {
-		type: 'string',
 		description: 'Input label',
 		control: {
 			type: 'text',
@@ -552,14 +505,12 @@ export const CheckboxRadioArgTypes = {
 	...DisabledArgTypes,
 	...ReadonlyArgTypes,
 	label: {
-		type: 'string',
 		description: 'Input label',
 		control: {
 			type: 'text',
 		},
 	},
 	value: {
-		type: ['string', 'number', 'boolean'],
 		description: 'Input value',
 		control: {
 			type: 'text',
@@ -575,16 +526,12 @@ export const CheckboxRadioGroupArgTypes = {
 	...DisabledArgTypes,
 	...ReadonlyArgTypes,
 	label: {
-		type: 'string',
 		description: 'Input label',
 		control: {
 			type: 'text',
 		},
 	},
 	name: {
-		type: {
-			summary: 'string',
-		},
 		description:
 			'Name of the form control. Submitted with the form as part of a name/value pair.',
 		control: {
@@ -592,7 +539,6 @@ export const CheckboxRadioGroupArgTypes = {
 		},
 	},
 	vertical: {
-		type: 'boolean',
 		description:
 			'If true the options will be displayed vertically instead of horizontally',
 		table: {