@volverjs/ui-vue 0.0.3 → 0.0.5-beta.1

package/src/stories/Button/ButtonModifiers.stories.mdx

@@ -125,7 +125,7 @@ import { argTypes, defaultArgs } from './Button.settings'
 				},
 				template: /*html*/ `
 				<div class="bg-black p-md">
-					<vv-button v-bind="args" />
+					<vv-button v-bind="args" data-testId="element" />
 				</div>
 				`,
 			}
@@ -158,7 +158,7 @@ import { argTypes, defaultArgs } from './Button.settings'
 				},
 				template: /*html*/ `
 				<div class="bg-white p-md">
-					<vv-button v-bind="args" />
+					<vv-button v-bind="args" data-testId="element" />
 				</div>
 				`,
 			}

package/src/stories/Button/ButtonSlots.stories.mdx

@@ -46,11 +46,12 @@ import { argTypes, defaultArgs } from './Button.settings'
 					return { args }
 				},
 				components: { VvButton, VvBadge },
-				template: /*html*/ `<vv-button v-bind="args">
-							<template #before>
-								<vv-badge value="12" modifiers="danger" />
-							</template>
-						</vv-button>`,
+				template: /*html*/ `
+					<vv-button v-bind="args" data-testId="element">
+						<template #before>
+							<vv-badge value="12" modifiers="danger" />
+						</template>
+					</vv-button>`,
 			}
 		}}
 	</Story>
@@ -78,7 +79,7 @@ import { argTypes, defaultArgs } from './Button.settings'
 				},
 				components: { VvButton, VvBadge },
 				template: /*html*/ `
-					<vv-button v-bind="args">
+					<vv-button v-bind="args" data-testId="element">
 						<template #after>
 							<vv-badge value="12" modifiers="danger" />
 						</template>
@@ -103,7 +104,7 @@ import { argTypes, defaultArgs } from './Button.settings'
 					return { args }
 				},
 				template: /*html*/ `
-					<vv-button v-bind="args">
+					<vv-button v-bind="args" data-testId="element">
 						<template #label>
 							Label <em class="italic">slot!</em>
 						</template>

package/src/stories/Button/ButtonState.stories.mdx

@@ -19,11 +19,7 @@ import { argTypes, defaultArgs } from './Button.settings'
 				},
 			},
 		}}
-		play={async (ctx) => {
-			defaultTest(ctx, {
-				className: 'vv-button--active',
-			})
-		}}
+		play={defaultTest}
 	>
 		{Template.bind()}
 	</Story>
@@ -35,7 +31,6 @@ import { argTypes, defaultArgs } from './Button.settings'
 		args={{
 			pressed: true,
 			label: 'Pressed button',
-			modifiers: 'action-quiet',
 		}}
 		argTypes={{
 			pressed: {
@@ -44,11 +39,7 @@ import { argTypes, defaultArgs } from './Button.settings'
 				},
 			},
 		}}
-		play={async (ctx) => {
-			defaultTest(ctx, {
-				className: 'vv-button--pressed',
-			})
-		}}
+		play={defaultTest}
 	>
 		{Template.bind()}
 	</Story>

package/src/stories/Card/Card.stories.mdx

@@ -10,7 +10,8 @@ import { defaultArgs, argTypes } from './Card.settings'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvCard },
 	setup() {
 		return { args }

package/src/stories/Checkbox/Checkbox.stories.mdx

@@ -10,7 +10,8 @@ import { defaultTest } from './Checkbox.test'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvCheckbox },
 	setup() {
 		return { args }

package/src/stories/CheckboxGroup/CheckboxGroup.stories.mdx

@@ -10,7 +10,8 @@ import { defaultTest } from './CheckboxGroup.test'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvCheckboxGroup },
 	setup() {
 		return { args }

package/src/stories/CheckboxGroup/CheckboxGroupSlots.stories.mdx

@@ -11,7 +11,8 @@ import { defaultTest } from './CheckboxGroup.test'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvCheckboxGroup, VvCheckbox },
 	setup() {
 		return { args }

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

@@ -208,6 +208,28 @@ export const argTypes = {
 			},
 		},
 	},
+	'dropdown::before': {
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	'dropdown::after': {
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
 	value: {
 		control: {
 			type: 'text',
@@ -230,4 +252,26 @@ export const argTypes = {
 			},
 		},
 	},
+	'no-options': {
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	'no-results': {
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
 }

package/src/stories/Combobox/Combobox.stories.mdx

@@ -11,7 +11,8 @@ import { defaultArgs, argTypes } from './Combobox.settings'
 
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvCombobox },
 	setup() {
 		return { args }
@@ -23,6 +24,8 @@ export const Template = (args) => ({
 	},
 	template: /*html*/ `
 		<vv-combobox v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+			<template #dropdown::before v-if="args['dropdown::before']"><div class="flex" v-html="args['dropdown::before']"></div></template>
+			<template #dropdown::after v-if="args['dropdown::after']"><div class="flex" v-html="args['dropdown::after']"></div></template>
 			<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>
@@ -283,3 +286,39 @@ export const Template = (args) => ({
 		{Template.bind()}
 	</Story>
 </Canvas>
+
+<Canvas>
+	<Story
+		name="Size"
+		args={{
+			'dropdown::before':
+				'<div class="bg-brand text-white flex-1 text-center uppercase">Before</div>',
+			'dropdown::after':
+				'<div class="bg-brand text-white flex-1 text-center uppercase">After</div>',
+			options: Array.from({ length: 30 }, (_, i) => ({
+				label: `Option ${i + 1}`,
+				value: String(i + 1),
+			})),
+		}}
+		argTypes={{
+			'dropdown::before': {
+				control: {
+					disable: true,
+				},
+			},
+			'dropdown::after': {
+				control: {
+					disable: true,
+				},
+			},
+			options: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/Dialog/Dialog.stories.mdx

@@ -10,7 +10,8 @@ import { defaultArgs, argTypes } from './Dialog.settings'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvDialog },
 	setup() {
 		return { args }

package/src/stories/Dropdown/Dropdown.settings.ts

@@ -1,4 +1,5 @@
-import { DROPDOWN_ROLES, VvDropdownProps } from '@/components/VvDropdown'
+import { VvDropdownProps } from '@/components/VvDropdown'
+import { DropdownRole } from '@/constants'
 import { DropdownArgTypes } from '../argTypes'
 
 export const defaultArgs = {
@@ -9,7 +10,7 @@ export const argTypes = {
 	...DropdownArgTypes,
 	role: {
 		description: 'Dropdown role',
-		options: DROPDOWN_ROLES,
+		options: Object.values(DropdownRole),
 		control: {
 			type: 'select',
 		},

package/src/stories/Dropdown/Dropdown.stories.mdx

@@ -1,8 +1,9 @@
 import { ref } from 'vue'
 import { Meta, Story } from '@storybook/addon-docs'
 import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
+import VvDropdownAction from '@/components/VvDropdown/VvDropdownAction.vue'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
 import VvButton from '@/components/VvButton/VvButton.vue'
-import VvDropdownItem from '@/components/VvDropdown/VvDropdownItem.vue'
 import { defaultTest } from './Dropdown.test'
 import { defaultArgs, argTypes } from './Dropdown.settings'
 
@@ -13,8 +14,9 @@ import { defaultArgs, argTypes } from './Dropdown.settings'
 	args={defaultArgs}
 />
 
-export const Template = (args) => ({
-	components: { VvDropdown, VvDropdownItem, VvButton },
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { VvDropdown, VvDropdownAction, VvIcon, VvButton },
 	setup() {
 		const expanded = ref(false)
 		return { args, expanded }
@@ -48,15 +50,15 @@ export const Template = (args) => ({
 						Toggle dropdown
 					</vv-button>
 					<template #items>
-						<vv-dropdown-item>
-							<vv-button modifiers="link" icon="add" label="Create" class="p-md w-full justify-start" />
-						</vv-dropdown-item>
-						<vv-dropdown-item>
-							<vv-button modifiers="link" icon="edit" label="Update" class="p-md w-full justify-start" />
-						</vv-dropdown-item>
-						<vv-dropdown-item>
-							<vv-button modifiers="link" icon="trash" label="Delete" class="p-md w-full justify-start" />
-						</vv-dropdown-item>
+						<vv-dropdown-action>
+							<vv-icon name="add" /> Create
+						</vv-dropdown-action>
+						<vv-dropdown-action>
+							<vv-icon name="edit" /> Update
+						</vv-dropdown-action>
+						<vv-dropdown-action>
+							<vv-icon name="trash" /> Delete
+						</vv-dropdown-action>
 					</template>
 				</vv-dropdown>
 			</div>

package/src/stories/Dropdown/DropdownMultilevel.stories.mdx

@@ -0,0 +1,56 @@
+import { ref } from 'vue'
+import { Meta, Story } from '@storybook/addon-docs'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
+import VvDropdownAction from '@/components/VvDropdown/VvDropdownAction.vue'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import { defaultTest } from './Dropdown.test'
+import { defaultArgs, argTypes } from './Dropdown.settings'
+
+<Meta
+	title="Components/Dropdown/Multilevel"
+	component={VvDropdown}
+	argTypes={argTypes}
+	args={defaultArgs}
+/>
+
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { VvDropdown, VvDropdownAction, VvIcon, VvButton },
+	setup() {
+		const expanded = ref(false)
+		return { args, expanded }
+	},
+	template: /* html */ `
+        <vv-dropdown v-model="expanded" v-bind="args">
+            <vv-button ref="toggle" class="absolute top-1/2 left-1/2 -translate-1/2" modifiers="full-bleed" data-testId="trigger">
+                Toggle dropdown
+            </vv-button>
+            <template #items>
+                <vv-dropdown-action>
+                    <vv-icon name="edit" /> Update
+                </vv-dropdown-action>
+                <vv-dropdown-action>
+                    <vv-icon name="trash" /> Delete
+                </vv-dropdown-action>
+                <vv-dropdown placement="right-start" offset="5" arrow>
+                    <vv-dropdown-action>
+                        <vv-icon name="more-vertical" /> More
+                    </vv-dropdown-action>
+                    <template #items>
+                        <vv-dropdown-action>
+                            <vv-icon name="add" /> Create
+                        </vv-dropdown-action>
+                        <vv-dropdown-action>
+                            <vv-icon name="eye-on" /> Publish
+                        </vv-dropdown-action>
+                    </template>
+                </vv-dropdown>
+            </template>
+        </vv-dropdown>
+	`,
+})
+
+<Canvas>
+	<Story name="Default">{Template.bind()}</Story>
+</Canvas>

package/src/stories/Dropdown/DropdownSlots.stories.mdx

@@ -1,8 +1,8 @@
 import { ref } from 'vue'
 import { Meta, Story } from '@storybook/addon-docs'
 import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
-import VvButton from '@/components/VvButton/VvButton.vue'
-import VvDropdownItem from '@/components/VvDropdown/VvDropdownItem.vue'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import VvDropdownAction from '@/components/VvDropdown/VvDropdownAction.vue'
 import { defaultTest } from './Dropdown.test'
 import { defaultArgs, argTypes } from './Dropdown.settings'
 
@@ -13,8 +13,9 @@ import { defaultArgs, argTypes } from './Dropdown.settings'
 	args={defaultArgs}
 />
 
-export const Template = (args) => ({
-	components: { VvDropdown, VvDropdownItem, VvButton },
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { VvDropdown, VvDropdownAction, VvIcon },
 	setup() {
 		const expanded = ref(false)
 		return { args, expanded }
@@ -51,15 +52,15 @@ export const Template = (args) => ({
                         </button>
                     </template>
 					<template #items>
-						<vv-dropdown-item>
-							<vv-button modifiers="link" icon="add" label="Create" class="p-md"  />
-						</vv-dropdown-item>
-						<vv-dropdown-item>
-							<vv-button modifiers="link" icon="edit" label="Update" class="p-md"  />
-						</vv-dropdown-item>
-						<vv-dropdown-item>
-							<vv-button modifiers="link" icon="trash" label="Delete" class="p-md"  />
-						</vv-dropdown-item>
+						<vv-dropdown-action>
+							<vv-icon name="add" /> Create
+						</vv-dropdown-action>
+						<vv-dropdown-action>
+							<vv-icon name="edit" /> Update
+						</vv-dropdown-action>
+						<vv-dropdown-action>
+							<vv-icon name="trash" /> Delete
+						</vv-dropdown-action>
 					</template>
                     <template #after v-if="args.after"><div v-html="args.after"></div></template>
 				</vv-dropdown>

package/src/stories/Icon/Icon.stories.mdx

@@ -10,7 +10,8 @@ import NormalIcons from '@/assets/icons/normal.json'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvIcon },
 	setup() {
 		return { args }

package/src/stories/Icon/IconsCollection.stories.mdx

@@ -11,7 +11,8 @@ import { defaultArgs, argTypes } from './Icon.settings'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvIcon },
 	setup() {
 		const allIcons = Object.keys(NormalIcons)

package/src/stories/InputText/InputText.settings.ts

@@ -196,6 +196,59 @@ export const argTypes = {
 			},
 		},
 	},
+	mask: {
+		description: 'Input mask, only for text type',
+		type: {
+			summary: 'string',
+		},
+		control: {
+			type: 'text',
+		},
+	},
+	maskEager: {
+		description: 'Show mask before typing',
+		type: {
+			summary: 'boolean',
+		},
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+	maskReversed: {
+		description: 'Write typing reverse (ex. for numbers)',
+		type: {
+			summary: 'boolean',
+		},
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+	maskTokens: {
+		description: 'Add mask custom tokens',
+		type: {
+			summary: 'Object',
+		},
+		table: {
+			defaultValue: {
+				summary: 'undefined',
+			},
+		},
+	},
+	maskTokensReplace: {
+		description: 'Replace default tokens',
+		type: {
+			summary: 'boolean',
+		},
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
 	before: {
 		control: {
 			type: 'text',

package/src/stories/InputText/InputText.stories.mdx

@@ -11,7 +11,8 @@ import { Position } from '@/constants'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvInputText },
 	setup() {
 		return { args }
@@ -168,3 +169,43 @@ export const Template = (args) => ({
 		{Template.bind()}
 	</Story>
 </Canvas>
+
+<Canvas>
+	<Story
+		name="Mask"
+		args={{
+			mask: '##-###-##',
+		}}
+		argTypes={{
+			mask: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Unit"
+		args={{
+			unit: 'km',
+			autoWidth: true,
+			type: 'number',
+		}}
+		argTypes={{
+			unit: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/InputText/InputText.test.ts

@@ -4,7 +4,10 @@ import { sleep } from '@/test/sleep'
 import { within, userEvent } from '@storybook/testing-library'
 import { INPUT_TYPES, type InputType } from '@/components/VvInputText'
 
-const valueByType = (type: InputType) => {
+const valueByType = (type: InputType, mask?: string) => {
+	if (mask) {
+		return '1234567'
+	}
 	switch (type) {
 		case INPUT_TYPES.TEXT:
 		case INPUT_TYPES.PASSWORD:
@@ -42,7 +45,7 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 
 	// value
 	if (!args.invalid && !args.disabled && !args.readonly) {
-		const inputValue = valueByType(args.type)
+		const inputValue = valueByType(args.type, args.mask)
 		if (inputValue) {
 			await expect(input).toBeClicked()
 			await userEvent.keyboard(inputValue)

package/src/stories/Progress/Progress.stories.mdx

@@ -10,7 +10,8 @@ import { defaultArgs, argTypes } from './Progress.settings'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvProgress },
 	setup() {
 		return { args }

package/src/stories/Radio/Radio.stories.mdx

@@ -10,7 +10,8 @@ import { defaultTest } from './Radio.test'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvRadio },
 	setup() {
 		return { args }

package/src/stories/RadioGroup/RadioGroup.stories.mdx

@@ -10,7 +10,8 @@ import { defaultTest } from './RadioGroup.test'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvRadioGroup },
 	setup() {
 		return { args }

package/src/stories/RadioGroup/RadioGroupSlots.stories.mdx

@@ -11,7 +11,8 @@ import { defaultTest } from './RadioGroup.test'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvRadioGroup, VvRadio },
 	setup() {
 		return { args }

package/src/stories/Select/Select.stories.mdx

@@ -10,7 +10,8 @@ import { defaultArgs, argTypes } from './Select.settings'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvSelect },
 	setup() {
 		return { args }

package/src/stories/Textarea/Textarea.stories.mdx

@@ -10,7 +10,8 @@ import { defaultTest } from './Textarea.test'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvTextarea },
 	setup() {
 		return { args }

package/src/stories/Tooltip/Tooltip.stories.mdx

@@ -11,7 +11,8 @@ import { defaultTest } from './Tooltip.test'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvTooltip, VvButton },
 	setup() {
 		return { args }