@volverjs/ui-vue 0.0.5 → 0.0.6-beta.15

package/src/stories/Combobox/ComboboxMultiple.stories.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
+import { defaultArgs, argTypes } from './Combobox.settings'
+import { Default } from './Combobox.stories'
+
+const meta: Meta<typeof VvCombobox> = {
+	title: 'Components/Combobox/Multiple',
+	component: VvCombobox,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvCombobox>
+
+export const DefaultMultiple: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		multiple: true,
+	},
+}
+
+export const MaxValues: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		multiple: true,
+		maxValues: 2,
+	},
+}
+
+export const Separator: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		multiple: true,
+		separator: ' | ',
+	},
+}

package/src/stories/Combobox/ComboboxOptions.stories.ts

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
+import { Default } from './Combobox.stories'
+import { defaultArgs, argTypes } from './Combobox.settings'
+
+const meta: Meta<typeof VvCombobox> = {
+	title: 'Components/Combobox/Options',
+	component: VvCombobox,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvCombobox>
+
+export const ArrayOfObjects: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		options: [
+			{ value: 'first', label: 'First' },
+			{ value: 'second', label: 'Second' },
+			{ value: 'third', label: 'Third' },
+		],
+	},
+}
+
+export const OptionLabelKey: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		labelKey: 'name',
+		options: [
+			{ value: 'first', name: 'First' },
+			{ value: 'second', name: 'Second' },
+
+			{ value: 'third', name: 'Third' },
+		],
+	},
+}
+
+export const OptionValueKey: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		valueKey: 'id',
+		options: [
+			{ id: 'first', label: 'First' },
+			{ id: 'second', label: 'Second' },
+			{ id: 'third', label: 'Third' },
+		],
+	},
+}
+
+export const GroupedOptions: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		options: [
+			{
+				label: 'Group 1',
+				options: [
+					{ value: 'first', label: 'First' },
+					{ value: 'second', label: 'Second' },
+				],
+			},
+			{
+				label: 'Group 2',
+				options: [
+					{ value: 'third', label: 'Third' },
+
+					{ value: 'fourth', label: 'Fourth' },
+				],
+			},
+		],
+	},
+}

package/src/stories/Combobox/ComboboxSlots.stories.ts

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import { Default } from './Combobox.stories'
+import { defaultArgs, argTypes } from './Combobox.settings'
+import { defaultTest } from './Combobox.test'
+
+const meta: Meta<typeof VvCombobox> = {
+	title: 'Components/Combobox/Slots',
+	component: VvCombobox,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvCombobox>
+
+export const Before: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		before: '<div class="vv-badge vv-badge--sm vv-badge--gray vv-badge--outline uppercase">Before</div>',
+	},
+}
+
+export const After: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		after: '<div class="vv-badge vv-badge--sm vv-badge--gray vv-badge--outline uppercase">After</div>',
+	},
+}
+
+export const Value: Story = {
+	args: {
+		...Default.args,
+		multiple: true,
+	},
+	render: (args) => ({
+		components: { VvCombobox },
+		setup() {
+			return { args }
+		},
+		data() {
+			return {
+				inputValue: undefined,
+			}
+		},
+		template: /*html*/ `
+				<vv-combobox v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+					<template #before v-if="args.before"><div class="pl-sm flex" v-html="args.before"></div></template>
+					<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
+					<template #after v-if="args.after"><div class="pr-sm flex" v-html="args.after"></div></template>
+					<template #value="{ selectedOptions }">
+						<div v-for="(option, index) in selectedOptions" :key="index" class="vv-badge vv-badge--sm vv-badge--rounded vv-badge--outline uppercase">{{option}}</div>
+					</template>
+				</vv-combobox>
+				<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+			`,
+	}),
+	play: defaultTest,
+}
+
+export const Option: Story = {
+	args: {
+		...Default.args,
+		multiple: true,
+	},
+	render: (args) => ({
+		components: { VvCombobox, VvIcon },
+		setup() {
+			return { args }
+		},
+		data() {
+			return {
+				inputValue: undefined,
+			}
+		},
+		template: /*html*/ `
+				<vv-combobox v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+					<template #before v-if="args.before"><div class="pl-sm flex" v-html="args.before"></div></template>
+					<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
+					<template #after v-if="args.after"><div class="pr-sm flex" v-html="args.after"></div></template>
+					<template #option="{ option, selected }">
+						<div class="flex flex-1 items-center">
+							<vv-icon :name="selected ? 'check-circle' : 'circle'" />
+							<div class="flex-1 pl-sm">{{ option }}</div>
+						</div>
+					</template>
+				</vv-combobox>
+				<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+			`,
+	}),
+	play: defaultTest,
+}
+
+export const Hint: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		hint: 'Hint <em class="italic">slot!</em>',
+	},
+}

package/src/stories/Dialog/Dialog.settings.ts

@@ -5,7 +5,7 @@ export const defaultArgs = {
 	title: 'Dialog Title',
 	transition: 'fade-block',
 	size: 'standard',
-	autoClose: false,
+	keepOpen: false,
 	default: 'Default slot content',
 }
 

package/src/stories/Dialog/Dialog.stories.ts

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvDialog from '@/components/VvDialog/VvDialog.vue'
+import { defaultTest } from './Dialog.test'
+import { defaultArgs, argTypes } from './Dialog.settings'
+
+const meta: Meta<typeof VvDialog> = {
+	title: 'Components/Dialog',
+	component: VvDialog,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvDialog>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvDialog },
+		setup() {
+			return { args }
+		},
+		data: () => ({ open: false }),
+		methods: {
+			onClick() {
+				this.open = !this.open
+			},
+		},
+		template: /*html*/ `
+			<vv-dialog v-bind="args" v-model="open" data-testId="element">
+				<template #header v-if="args.header"><div v-html="args.header"></div></template>
+				<template #default v-if="args.default"><div v-html="args.default"></div></template>
+				<template #footer v-if="args.footer"><div v-html="args.footer"></div></template>
+			</vv-dialog>
+			<button class="vv-button" @click="onClick" data-testId="button">Toggle</button>
+		`,
+	}),
+	play: defaultTest,
+}
+
+export const KeepOpen: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		keepOpen: true,
+	},
+}

package/src/stories/Dialog/Dialog.test.ts

@@ -59,8 +59,8 @@ export async function defaultTest(
 		)
 	}
 
-	// auto close
-	if (args.autoClose) {
+	// keep open
+	if (!args.keepOpen) {
 		await userEvent.click(element)
 		await sleep(1000)
 		await expect(element).toHaveProperty('open', false)

package/src/stories/Dialog/DialogSlots.stories.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvDialog from '@/components/VvDialog/VvDialog.vue'
+import { defaultArgs, argTypes } from './Dialog.settings'
+import { Default as DefaultStory } from './Dialog.stories'
+
+const meta: Meta<typeof VvDialog> = {
+	title: 'Components/Dialog/Slots',
+	component: VvDialog,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvDialog>
+
+export const Default: Story = {
+	...DefaultStory,
+	args: {
+		...defaultArgs,
+		default: 'DefaultStory <em class="italic">slot!</em>',
+	},
+}
+
+export const HeaderSlot: Story = {
+	...DefaultStory,
+	args: {
+		...defaultArgs,
+		header: 'Header <em class="italic">slot!</em>',
+	},
+}
+
+export const FooterSlot: Story = {
+	...DefaultStory,
+	args: {
+		...defaultArgs,
+		footer: 'Footer <em class="italic">slot!</em>',
+	},
+}

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

@@ -0,0 +1,107 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+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'
+
+const meta: Meta<typeof VvDropdown> = {
+	title: 'Components/Dropdown',
+	component: VvDropdown,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvDropdown>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvDropdown, VvDropdownAction, VvIcon, VvButton },
+		setup() {
+			const expanded = ref(false)
+			return { expanded, args }
+		},
+		watch: {
+			expanded(newValue) {
+				if (!newValue) {
+					return
+				}
+				setTimeout(() => {
+					this.centerWrapper()
+				}, 300)
+			},
+		},
+		methods: {
+			centerWrapper() {
+				this.$refs.toggle?.$el?.scrollIntoView({
+					inline: 'center',
+					block: 'center',
+				})
+			},
+		},
+		mounted() {
+			this.centerWrapper()
+		},
+		template: /* html */ `
+			<div style="min-height: 200px">
+				<div class="absolute inset-0 overflow-auto" ref="container">
+					<div style="width: 200%; height: 200%" ref="wrapper" data-testId="wrapper">
+						<vv-dropdown v-model="expanded" v-bind="args">
+							<vv-button ref="toggle" class="absolute top-full left-full -translate-1/2" modifiers="full-bleed" data-testId="trigger">
+								Toggle dropdown
+							</vv-button>
+							<template #items>
+								<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>
+				</div>
+			</div>
+		`,
+	}),
+	play: defaultTest,
+}
+
+export const Arrow: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		arrow: true,
+		offset: 10,
+	},
+}
+
+export const AutoPlacement: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		flip: false,
+		autoPlacement: true,
+		arrow: true,
+		offset: 10,
+	},
+}
+
+export const TriggerWidth: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		triggerWidth: true,
+	},
+}

package/src/stories/Dropdown/DropdownContextmenuDirective.stories.ts

@@ -0,0 +1,49 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { defaultArgs, argTypes } from './Dropdown.settings'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
+import VvDropdownAction from '@/components/VvDropdown/VvDropdownAction.vue'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+
+const meta: Meta<typeof VvDropdown> = {
+	title: 'Directives/Contextmenu',
+	component: VvDropdown,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvDropdown>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvDropdown, VvDropdownAction, VvIcon },
+		setup() {
+			const dropdownEl = ref(null)
+			return { args, dropdownEl }
+		},
+		template: /* html */ `
+			<div v-contextmenu="dropdownEl" class="w-full h-320 bg-surface-1 flex items-center justify-center">
+				<div class="text-word-2 text-18 uppercase w-150 text-center">Right click context menu</div>
+			</div>
+			<vv-dropdown v-bind="args" ref="dropdownEl">
+				<template #items>
+					<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>
+		`,
+	}),
+}

package/src/stories/Dropdown/DropdownMultilevel.stories.ts

@@ -0,0 +1,61 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+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'
+
+const meta: Meta<typeof VvDropdown> = {
+	title: 'Components/Dropdown/Multilevel',
+	component: VvDropdown,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvDropdown>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvDropdown, VvDropdownAction, VvIcon, VvButton },
+		setup() {
+			const expanded = ref(false)
+			return { expanded, args }
+		},
+		template: /* html */ `
+            <vv-dropdown v-model="expanded" v-bind="args" data-testId="wrapper">
+                <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>
+        `,
+	}),
+	play: defaultTest,
+}

package/src/stories/Dropdown/DropdownSlots.stories.ts

@@ -0,0 +1,95 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.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'
+
+const meta: Meta<typeof VvDropdown> = {
+	title: 'Components/Dropdown/Slots',
+	component: VvDropdown,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvDropdown>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvDropdown, VvDropdownAction, VvIcon },
+		setup() {
+			const expanded = ref(false)
+			return { expanded, args }
+		},
+		watch: {
+			expanded(newValue) {
+				if (!newValue) {
+					return
+				}
+				setTimeout(() => {
+					this.centerWrapper()
+				}, 300)
+			},
+		},
+		methods: {
+			centerWrapper() {
+				document.getElementById('toggle-button')?.scrollIntoView({
+					inline: 'center',
+					block: 'center',
+				})
+			},
+		},
+		mounted() {
+			this.centerWrapper()
+		},
+		template: /* html */ `
+			<div class="absolute inset-0 overflow-auto" ref="container">
+				<div style="width: 200%; height: 200%" ref="wrapper" data-testId="wrapper">
+					<vv-dropdown v-model="expanded" v-bind="args">
+						<template #before v-if="args.before"><div v-html="args.before"></div></template>
+						<template #default="{ init, toggle, aria }">
+							<button :ref="(e) => init(e)" v-bind="aria" id="toggle-button" class="absolute cursor-pointer bg-info p-lg text-center top-full left-full -translate-1/2" data-testId="trigger" @click="toggle">
+								Toggle dropdown
+							</button>
+						</template>
+						<template #items>
+							<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>
+				</div>
+			</div>
+		`,
+	}),
+	play: defaultTest,
+}
+
+export const Before: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		before: '<div class="bg-warning p-xs text-center">Before</div>',
+	},
+}
+
+export const After: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		after: '<div class="bg-danger text-white p-xs text-center">After</div>',
+	},
+}

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

@@ -5,6 +5,7 @@ import { ModifiersArgTypes } from '@/stories/argTypes'
 export const defaultArgs = {
 	...propsToObject(VvIconProps),
 	name: 'add-circle',
+	width: 48
 }
 
 export const argTypes = {