@volverjs/ui-vue 0.0.13-beta.8 → 0.0.13

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

@@ -0,0 +1,70 @@
+import type { ArgTypes } from '@storybook/vue3-vite'
+import { VvDropdownProps } from '@/components/VvDropdown'
+import { DropdownRole } from '@/constants'
+import { DropdownArgTypes } from '../argTypes'
+
+export const defaultArgs = {
+    ...propsToObject(VvDropdownProps),
+}
+
+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

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+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 { argTypes, defaultArgs } from './Dropdown.settings'
+import { defaultTest } from './Dropdown.test'
+
+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/Dropdown.test.ts

@@ -0,0 +1,17 @@
+import type { PlayAttributes } from '@/test/types'
+import { within } from 'storybook/test'
+import { expect } from '@/test/expect'
+import { sleep } from '@/test/sleep'
+
+export async function defaultTest({ canvasElement }: PlayAttributes) {
+    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()
+
+    // check accessibility
+    await expect(dropdown).toHaveNoViolations()
+}

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

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+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'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvDropdown>
+
+export const Default: Story = {
+    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" placement="right-start">
+				<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 type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+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 { argTypes, defaultArgs } from './Dropdown.settings'
+import { defaultTest } from './Dropdown.test'
+
+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 type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+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'
+import { defaultTest } from './Dropdown.test'
+
+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

@@ -0,0 +1,73 @@
+import type { ArgTypes } from '@storybook/vue3-vite'
+import normal from '@/assets/icons/normal.json'
+import { VvIconPropsDefaults } from '@/components/VvIcon'
+import { ModifiersArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+    ...VvIconPropsDefaults,
+    name: 'add-circle',
+    width: 48,
+}
+
+export const argTypes: ArgTypes = {
+    name: {
+        options: Object.keys(normal.icons),
+        control: {
+            type: 'select',
+        },
+    },
+    mode: {
+        options: ['style', 'bg', 'mask', 'svg'],
+        control: {
+            type: 'select',
+        },
+    },
+    src: {
+        description: 'Url remote SVG icon',
+        control: {
+            type: 'text',
+        },
+        table: {
+            type: {
+                summary: 'url',
+            },
+        },
+    },
+    svg: {
+        description: 'Svg icon string',
+        control: {
+            type: 'text',
+        },
+        table: {
+            type: {
+                summary: 'xml',
+            },
+        },
+    },
+    prefix: {
+        options: ['simple', 'normal', 'detailed'],
+        control: {
+            type: 'select',
+        },
+        table: {
+            defaultValue: {
+                summary: 'normal',
+            },
+        },
+    },
+    flip: {
+        options: ['', 'vertical', 'horizontal'],
+        control: {
+            type: 'radio',
+        },
+    },
+    onLoad: {
+        description: 'A callback that is called when icon data has been loaded',
+        table: {
+            type: {
+                summary: 'function',
+            },
+        },
+    },
+    ...ModifiersArgTypes,
+}

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

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import NormalIcons from '@/assets/icons/normal.json'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import { argTypes, defaultArgs } from './Icon.settings'
+
+const meta: Meta<typeof VvIcon> = {
+    title: 'Components/Icon',
+    component: VvIcon,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvIcon>
+
+export const Default: Story = {
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvIcon },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `<vv-icon v-bind="args" />`,
+    }),
+}
+
+export const Remote: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        name: 'fingerprint',
+        src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/action/fingerprint/materialicons/24px.svg',
+    },
+}
+
+export const Inline: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        name: 'bell-2',
+        svg: `<svg viewBox="0 0 24 24">${NormalIcons.icons.bell.body}</svg>`,
+    },
+}

package/src/stories/Icon/IconsCollection.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref, watch } from 'vue'
+import { icons as NormalIcons } from '@/assets/icons/normal.json'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import { argTypes, defaultArgs } from './Icon.settings'
+
+const meta: Meta<typeof VvIcon> = {
+    title: 'Components/Icon/Collection',
+    component: VvIcon,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvIcon>
+
+export const Default: Story = {
+    args: {
+        ...defaultArgs,
+        width: 24,
+    },
+    render: args => ({
+        components: { VvIcon },
+        setup() {
+            const allIcons = Object.keys(NormalIcons)
+            const icons = ref(allIcons)
+            const search = ref('')
+            watch(search, (newValue) => {
+                icons.value = allIcons.filter(icon => icon.includes(newValue))
+            })
+            return { args, search, icons }
+        },
+        template: /* html */ `
+			<div class="absolute inset-0 overflow-y-auto p-16">
+				<div class="vv-input-text">
+					<div class="vv-input-text__wrapper">
+						<input v-model="search" type="search" placeholder="Search..." />
+					</div>
+				</div>
+				<div class="grid grid-cols-5 gap-16 mt-16">
+					<div
+						v-for="iconName in icons"
+						:key="iconName"
+						class="flex items-center gap-16">
+						<VvIcon v-bind="args" :name="iconName" />
+						{{ iconName }}
+					</div>
+				</div>
+			</div>
+		`,
+    }),
+}

package/src/stories/InputFile/InputFile.settings.ts

@@ -0,0 +1,37 @@
+import type { ArgTypes } from '@storybook/vue3-vite'
+import { VvInputFileProps } from '@/components/VvInputFile'
+import { HintArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+    ...propsToObject(VvInputFileProps),
+    name: 'vv-input-file',
+    label: 'Upload file',
+}
+
+export const argTypes: ArgTypes = {
+    ...HintArgTypes,
+    'modifiers': {
+        ...ModifiersArgTypes.modifiers,
+        options: ['hidden', 'square', 'circle'],
+    },
+    'dropAreaSlot': {
+        description: 'Drop area slot',
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    'update:model-value': {
+        table: {
+            category: 'Events',
+            type: {
+                summary: 'File | File[]',
+            },
+        },
+    },
+}