@volverjs/ui-vue 0.0.10-beta.5 → 0.0.10-beta.50

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

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvDialog from '@/components/VvDialog/VvDialog.vue'
+import { argTypes, defaultArgs } from './Dialog.settings'
+import { Default } from './Dialog.stories'
+
+const meta: Meta<typeof VvDialog> = {
+    title: 'Components/Dialog/Modifiers',
+    component: VvDialog,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvDialog>
+
+export const Standard: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        title: 'Standard',
+        modifiers: 'standard',
+    },
+}
+
+export const Small: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        title: 'Small',
+        modifiers: 'small',
+    },
+}
+
+export const Fullscreen: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        title: 'Fullscreen',
+        modifiers: 'fullscreen',
+    },
+}

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

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

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

@@ -1,69 +1,70 @@
+import type { ArgTypes } from '@storybook/vue3'
 import { VvDropdownProps } from '@/components/VvDropdown'
 import { DropdownRole } from '@/constants'
 import { DropdownArgTypes } from '../argTypes'
 
 export const defaultArgs = {
-	...propsToObject(VvDropdownProps),
+    ...propsToObject(VvDropdownProps),
 }
 
-export const argTypes = {
-	...DropdownArgTypes,
-	role: {
-		description: 'Dropdown role',
-		options: Object.values(DropdownRole),
-		control: {
-			type: 'select',
-		},
-		table: {
-			defaultValue: { summary: 'menu' },
-		},
-	},
-	default: {
-		description: 'The trigger slot',
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	items: {
-		description: 'The dropdown items slot',
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	before: {
-		description: 'The dropdown before slot',
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	after: {
-		description: 'The dropdown after slot',
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
+export const argTypes: ArgTypes = {
+    ...DropdownArgTypes,
+    role: {
+        description: 'Dropdown role',
+        options: Object.values(DropdownRole),
+        control: {
+            type: 'select',
+        },
+        table: {
+            defaultValue: { summary: 'menu' },
+        },
+    },
+    default: {
+        description: 'The trigger slot',
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    items: {
+        description: 'The dropdown items slot',
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    before: {
+        description: 'The dropdown before slot',
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    after: {
+        description: 'The dropdown after slot',
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
 }

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

@@ -1,18 +1,18 @@
-import { ref } from 'vue'
 import type { Meta, StoryObj } from '@storybook/vue3'
+import VvButton from '@/components/VvButton/VvButton.vue'
 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 { ref } from 'vue'
+import { argTypes, defaultArgs } from './Dropdown.settings'
 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'],
+    title: 'Components/Dropdown',
+    component: VvDropdown,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -20,37 +20,37 @@ 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 */ `
+    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">
@@ -74,34 +74,34 @@ export const Default: Story = {
 				</div>
 			</div>
 		`,
-	}),
-	play: defaultTest,
+    }),
+    play: defaultTest,
 }
 
 export const Arrow: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		arrow: true,
-		offset: 10,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        arrow: true,
+        offset: 10,
+    },
 }
 
 export const AutoPlacement: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		flip: false,
-		autoPlacement: true,
-		arrow: true,
-		offset: 10,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        flip: false,
+        autoPlacement: true,
+        arrow: true,
+        offset: 10,
+    },
 }
 
 export const TriggerWidth: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		triggerWidth: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        triggerWidth: true,
+    },
 }

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

@@ -1,21 +1,17 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement }: PlayAttributes) {
-	const wrapper = (await within(canvasElement).findByTestId(
-		'wrapper',
-	)) as HTMLElement
-	const trigger = (await within(canvasElement).findByTestId(
-		'trigger',
-	)) as HTMLElement
+    const wrapper = await within(canvasElement).findByTestId('wrapper')
+    const trigger = await within(canvasElement).findByTestId('trigger')
 
-	await expect(trigger).toBeClicked()
-	await sleep(100)
-	const dropdown = wrapper.getElementsByClassName('vv-dropdown')[0]
-	await expect(dropdown).toBeDefined()
+    await expect(trigger).toBeClicked()
+    await sleep(100)
+    const dropdown = wrapper.getElementsByClassName('vv-dropdown')[0]
+    await expect(dropdown).toBeDefined()
 
-	// check accessibility
-	await expect(dropdown).toHaveNoViolations()
+    // check accessibility
+    await expect(dropdown).toHaveNoViolations()
 }

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

@@ -1,16 +1,15 @@
-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'
+import { argTypes, defaultArgs } from './Dropdown.settings'
 
 const meta: Meta<typeof VvDropdown> = {
-	title: 'Directives/Contextmenu',
-	component: VvDropdown,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
+    title: 'Directives/Contextmenu',
+    component: VvDropdown,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -18,20 +17,20 @@ 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 */ `
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvDropdown, VvDropdownAction, VvIcon },
+        setup() {
+            const dropdownEl = ref<typeof VvDropdown>()
+            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">
+			<vv-dropdown v-bind="args" ref="dropdownEl" placement="right-start">
 				<template #items>
 					<vv-dropdown-action>
 						<vv-icon name="add" /> Create
@@ -45,5 +44,5 @@ export const Default: Story = {
 				</template>
 			</vv-dropdown>
 		`,
-	}),
+    }),
 }

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

@@ -1,17 +1,17 @@
-import { ref } from 'vue'
 import type { Meta, StoryObj } from '@storybook/vue3'
+import VvButton from '@/components/VvButton/VvButton.vue'
 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 { ref } from 'vue'
+import { argTypes, defaultArgs } from './Dropdown.settings'
 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,
+    title: 'Components/Dropdown/Multilevel',
+    component: VvDropdown,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -19,16 +19,16 @@ 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 */ `
+    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
@@ -56,6 +56,6 @@ export const Default: Story = {
                 </template>
             </vv-dropdown>
         `,
-	}),
-	play: defaultTest,
+    }),
+    play: defaultTest,
 }

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

@@ -1,16 +1,16 @@
-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 VvIcon from '@/components/VvIcon/VvIcon.vue'
+import { ref } from 'vue'
+import { argTypes, defaultArgs } from './Dropdown.settings'
 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,
+    title: 'Components/Dropdown/Slots',
+    component: VvDropdown,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -18,37 +18,37 @@ 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 */ `
+    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">
@@ -74,22 +74,22 @@ export const Default: Story = {
 				</div>
 			</div>
 		`,
-	}),
-	play: defaultTest,
+    }),
+    play: defaultTest,
 }
 
 export const Before: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		before: '<div class="bg-warning p-xs text-center">Before</div>',
-	},
+    ...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>',
-	},
-}
+    ...Default,
+    args: {
+        ...Default.args,
+        after: '<div class="bg-danger text-white p-xs text-center">After</div>',
+    },
+}