@volverjs/ui-vue 0.0.10-beta.60 → 0.0.10-beta.61

package/src/resolvers/unplugin.ts

@@ -1,179 +0,0 @@
-import type {
-    ComponentResolver,
-    SideEffectsInfo,
-} from 'unplugin-vue-components/types'
-import { kebabCase } from 'change-case'
-
-type ImportStyle = boolean | 'css' | 'scss'
-
-export interface VolverResolverOptions {
-    /**
-     * import style along with components
-     * @default undefined
-     */
-    importStyle?: ImportStyle
-    /**
-     * enable/disable directives
-     * @default undefined
-     */
-    directives?: boolean
-    /**
-     * prefix for components (e.g. 'vv' to resolve Button from VvButton)
-     *
-     * @default 'vv'
-     */
-    prefix?: string
-    /**
-     * ignore components (kebab-case)
-     * @default undefined
-     */
-    ignore?: string[]
-    /**
-     * cherry pick components from named exports
-     * @default undefined
-     */
-    cherryPick?: boolean
-}
-
-const STYLE_EXCLUDE = ['vv-icon', 'vv-action']
-const VOLVER_PREFIX = 'vv'
-const DIRECTIVES = ['v-tooltip', 'v-contextmenu']
-
-export const getStyleNames = function (kebabName: string) {
-    if (STYLE_EXCLUDE.includes(kebabName)) {
-        return undefined
-    }
-    if (kebabName === 'vv-dropdown') {
-        return ['vv-dropdown', 'vv-dropdown-option', 'vv-dropdown-action']
-    }
-    if (kebabName === 'vv-combobox') {
-        return [
-            'vv-select',
-            'vv-dropdown-option',
-            'vv-dropdown-optgroup',
-            'vv-dropdown',
-            'vv-dropdown-action',
-        ]
-    }
-    if (kebabName === 'vv-button-group') {
-        return ['vv-button', 'vv-button-group']
-    }
-    if (kebabName === 'vv-accordion-group') {
-        return ['vv-accordion', 'vv-accordion-group']
-    }
-    if (kebabName === 'vv-checkbox-group') {
-        return ['vv-checkbox', 'vv-checkbox-group']
-    }
-    if (kebabName === 'vv-radio-group') {
-        return ['vv-radio', 'vv-radio-group']
-    }
-    if (kebabName === 'vv-alert-group') {
-        return ['vv-alert', 'vv-alert-group']
-    }
-    if (kebabName === 'v-tooltip') {
-        return ['vv-tooltip']
-    }
-    return [kebabName]
-}
-
-const getSideEffects = function (kebabName: string, importStyle?: ImportStyle) {
-    const sideEffects: SideEffectsInfo = []
-
-    if (!importStyle) {
-        return sideEffects
-    }
-
-    // import component style
-    const styleNames = getStyleNames(kebabName)
-    if (styleNames) {
-        styleNames.forEach((name) => {
-            sideEffects.push(
-                `@volverjs/style/${
-                    importStyle === 'scss' ? 'scss/' : ''
-                }components/${name}`,
-            )
-        })
-    }
-
-    return sideEffects
-}
-
-/**
- * Resolver for @volverjs/ui-vue
- *
- * @link https://github.com/volverjs/ui-vue
- */
-export function VolverResolver({
-    prefix = VOLVER_PREFIX,
-    importStyle,
-    directives,
-    ignore,
-    cherryPick,
-}: VolverResolverOptions = {}): ComponentResolver[] {
-    return [
-        {
-            type: 'component',
-            resolve: (name: string) => {
-                if (
-                    !prefix
-                    || !name.toLowerCase().startsWith(prefix.toLowerCase())
-                ) {
-                    return
-                }
-                const kebabName = kebabCase(name).replace(
-                    `${prefix}-`,
-                    `${VOLVER_PREFIX}-`,
-                )
-
-                if (ignore && ignore.includes(kebabName)) {
-                    return
-                }
-
-                // import component
-                if (cherryPick) {
-                    return {
-                        from: `@volverjs/ui-vue/${kebabName}`,
-                        sideEffects: getSideEffects(kebabName, importStyle),
-                    }
-                }
-                return {
-                    from: '@volverjs/ui-vue/components',
-                    sideEffects: getSideEffects(kebabName, importStyle),
-                    name,
-                }
-            },
-        },
-        {
-            type: 'directive',
-            resolve: (name: string) => {
-                if (!directives) {
-                    return
-                }
-
-                const kebabName = `v-${kebabCase(name)}`
-
-                // filter directive
-                if (!DIRECTIVES.includes(kebabName)) {
-                    return
-                }
-
-                if (ignore && ignore.includes(kebabName)) {
-                    return
-                }
-
-                // import directive
-                if (cherryPick) {
-                    return {
-                        from: `@volverjs/ui-vue/${kebabName}`,
-                        sideEffects: getSideEffects(kebabName, importStyle),
-                    }
-                }
-                return {
-                    from: '@volverjs/ui-vue/directives',
-                    sideEffects: getSideEffects(kebabName, importStyle),
-                    name: `v${name}`,
-                }
-            },
-        },
-    ]
-}

package/src/shims.d.ts

@@ -1,12 +0,0 @@
-declare interface Window {
-    // extend the window
-}
-
-declare module '*.vue' {
-    import type { DefineComponent } from 'vue'
-    // eslint-disable-next-line
-	const component: DefineComponent<{}, {}, any>
-    export default component
-}
-
-type ValueOf<T> = T[keyof T]

package/src/stories/Accordion/Accordion.settings.ts

@@ -1,58 +0,0 @@
-import type { ArgTypes } from '@storybook/types'
-import { DisabledArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
-
-export const defaultArgs = {
-    title: 'Lorem Ipsum',
-    content:
-		'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
-    modifiers: [],
-    disabled: false,
-    not: false,
-}
-
-export const argTypes: ArgTypes = {
-    summary: {
-        description: 'The title slot',
-        control: {
-            type: 'text',
-        },
-        table: {
-            category: 'Slots',
-            type: {
-                summary: 'html',
-            },
-        },
-    },
-    default: {
-        description: 'The content slot',
-        control: {
-            type: 'text',
-        },
-        table: {
-            category: 'Slots',
-            type: {
-                summary: 'html',
-            },
-        },
-    },
-    title: {
-        description: 'The accordion title',
-    },
-    content: {
-        description: 'The accordion content',
-    },
-    modifiers: {
-        ...ModifiersArgTypes.modifiers,
-        options: ['marker-right', 'bordered'],
-    },
-    not: {
-        description: 'Inverts the accordion state',
-        control: 'boolean',
-        table: {
-            defaultValue: {
-                summary: `false`,
-            },
-        },
-    },
-    ...DisabledArgTypes,
-}

package/src/stories/Accordion/Accordion.stories.ts

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
-import { argTypes, defaultArgs } from './Accordion.settings'
-import { defaultTest } from './Accordion.test'
-
-const meta: Meta<typeof VvAccordion> = {
-    title: 'Components/Accordion',
-    component: VvAccordion,
-    args: defaultArgs,
-    argTypes,
-    tags: ['autodocs'],
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvAccordion>
-
-export const Default: Story = {
-    args: defaultArgs,
-    play: defaultTest,
-    render: args => ({
-        components: { VvAccordion },
-        setup() {
-            const open = ref(false)
-            return { args, open }
-        },
-        template: /* html */ `
-			<vv-accordion data-testId="element" v-bind="args" v-model="open">
-                <template #summary v-if="args.summary"><div v-html="args.summary"></div></template>
-                <template #default v-if="args.default"><div v-html="args.default"></div></template>
-            </vv-accordion>
-            <div class="mt-24">
-                {{ args.not ? 'Closed' : 'Opened'}}: <span data-testId="value">{{ open }}</span>
-            </div>
-    `,
-    }),
-}
-
-export const Not: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        not: true,
-    },
-}

package/src/stories/Accordion/Accordion.test.ts

@@ -1,69 +0,0 @@
-import type { PlayAttributes } from '@/test/types'
-import { expect } from '@/test/expect'
-import { sleep } from '@/test/sleep'
-import { within } from '@storybook/test'
-
-export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-    const element = (await within(canvasElement).findByTestId(
-        'element',
-    )) as HTMLDetailsElement
-    const summary = element.getElementsByTagName('summary')[0]
-    const content = element.getElementsByClassName(
-        'vv-accordion__content',
-    )[0] as HTMLElement
-
-    const modifiers
-		= !args.modifiers || Array.isArray(args.modifiers)
-		    ? args.modifiers
-		    : [args.modifiers]
-
-    expect(element).toHaveClass('vv-accordion')
-
-    // modifiers
-    if (modifiers) {
-        for (const modifier of modifiers) {
-            expect(element).toHaveClass(`vv-accordion--${modifier}`)
-        }
-    }
-
-    // summary slot / title
-    if (args.summary) {
-        const div = document.createElement('div')
-        div.innerHTML = args.summary
-        expect(summary).toHaveClass('vv-accordion__summary')
-        expect(summary.textContent).toEqual(div.textContent)
-    }
-    else if (args.title) {
-        expect(summary).toHaveClass('vv-accordion__summary')
-        expect(summary.textContent).toEqual(args.title)
-    }
-
-    // open
-    if (!args.disabled) {
-        expect(element.open).toBe(!!args.not)
-        expect(summary).toBeClicked()
-        await sleep()
-        expect(element.open).toBe(!args.not)
-        expect(summary.getAttribute('aria-expanded')).toBe(
-            args.not ? 'false' : 'true',
-        )
-        expect(content.getAttribute('aria-hidden')).toBe(
-            args.not ? 'true' : 'false',
-        )
-    }
-
-    // default slot / content
-    if (element.open) {
-        if (args.default) {
-            const div = document.createElement('div')
-            div.innerHTML = args.default
-            expect(content.textContent).toEqual(div.textContent)
-        }
-        else if (args.content) {
-            expect(content.textContent).toEqual(args.content)
-        }
-    }
-
-    // accessibility
-    await expect(element).toHaveNoViolations()
-}

package/src/stories/Accordion/AccordionSlots.stories.ts

@@ -1,29 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
-import { defaultArgs } from './Accordion.settings'
-import { Default as AccordionDefault } from './Accordion.stories'
-
-const meta: Meta<typeof VvAccordion> = {
-    title: 'Components/Accordion/Slots',
-    component: VvAccordion,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvAccordion>
-
-export const Default: Story = {
-    ...AccordionDefault,
-    args: {
-        ...defaultArgs,
-        default: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Details</strong>`,
-    },
-}
-
-export const Summary: Story = {
-    ...AccordionDefault,
-    args: {
-        ...defaultArgs,
-        summary: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Summary</strong>`,
-    },
-}

package/src/stories/AccordionGroup/AccordionGroup.settings.ts

@@ -1,80 +0,0 @@
-import type { ArgTypes } from '@storybook/vue3'
-import {
-    DefaultSlotArgTypes,
-    DisabledArgTypes,
-    ModifiersArgTypes,
-} from '@/stories/argTypes'
-
-export const defaultArgs = {
-    collapse: false,
-    disabled: false,
-    items: [
-        {
-            name: 'a-1',
-            title: 'Details 1',
-            content:
-				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
-        },
-        {
-            name: 'a-2',
-            title: 'Details 2',
-            content:
-				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
-        },
-        {
-            name: 'a-3',
-            title: 'Details 3',
-            content:
-				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
-        },
-    ],
-    modifiers: [],
-    itemModifiers: [],
-}
-
-export const argTypes: ArgTypes = {
-    // eslint-disable-next-line no-template-curly-in-string
-    '`details::${item.name}`': {
-        table: {
-            disable: true,
-        },
-    },
-    // eslint-disable-next-line no-template-curly-in-string
-    '`header::${item.name}`': {
-        table: {
-            disable: true,
-        },
-    },
-    'items': {
-        description: 'Accordion group items',
-    },
-    'collapse': {
-        description: 'Enables accordion group collapse',
-        control: 'boolean',
-        table: {
-            defaultValue: {
-                summary: 'false',
-            },
-        },
-    },
-    'not': {
-        description: 'Inverts the accordion group state',
-        control: 'boolean',
-        table: {
-            defaultValue: {
-                summary: 'false',
-            },
-        },
-    },
-    'modifiers': {
-        ...ModifiersArgTypes.modifiers,
-        options: ['condensed'],
-    },
-    'itemModifiers': {
-        description: 'Accordion items BEM modifiers',
-        control: 'check',
-        options: ['marker-right', 'bordered', 'square'],
-    },
-    ...DisabledArgTypes,
-    ...DefaultSlotArgTypes,
-}

package/src/stories/AccordionGroup/AccordionGroup.stories.ts

@@ -1,64 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
-import { argTypes, defaultArgs } from './AccordionGroup.settings'
-import { defaultTest } from './AccordionGroup.test'
-
-const meta: Meta<typeof VvAccordionGroup> = {
-    title: 'Components/AccordionGroup',
-    component: VvAccordionGroup,
-    args: defaultArgs,
-    argTypes,
-    tags: ['autodocs'],
-}
-
-export default meta
-
-export type Story = StoryObj<typeof VvAccordionGroup>
-
-export const Default: Story = {
-    args: defaultArgs,
-    play: defaultTest,
-    render: (args, { argTypes }) => ({
-        props: Object.keys(argTypes),
-        components: { VvAccordionGroup },
-        setup() {
-            return { args }
-        },
-        data() {
-            return {
-                selected: null,
-            }
-        },
-        template: /* html */ `
-		<vv-accordion-group data-testId="element" v-bind="args" v-model="selected" />
-		<div class="mt-24">
-			{{ args.not ? 'Closed' : 'Opened'}}: <span data-testId="value">{{ selected }}</span>
-		</div>
-	`,
-    }),
-}
-
-export const Not: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        not: true,
-    },
-}
-
-export const Collapse: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        collapse: true,
-    },
-}
-
-export const CollapseNot: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        collapse: true,
-        not: true,
-    },
-}

package/src/stories/AccordionGroup/AccordionGroup.test.ts

@@ -1,60 +0,0 @@
-import type { PlayAttributes } from '@/test/types'
-import { expect } from '@/test/expect'
-import { sleep } from '@/test/sleep'
-import { within } from '@storybook/test'
-
-export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-    const element = await within(canvasElement).findByTestId('element')
-    const firstChild = element.children[0] as HTMLDetailsElement
-    const firstChildSummary = firstChild.getElementsByTagName('summary')[0]
-    const value = await within(canvasElement).findByTestId('value')
-
-    const modifiers
-		= !args.modifiers || Array.isArray(args.modifiers)
-		    ? args.modifiers
-		    : [args.modifiers]
-
-    expect(element).toHaveClass('vv-accordion-group')
-
-    // modifiers
-    if (modifiers) {
-        for (const modifier of modifiers) {
-            expect(element).toHaveClass(`vv-accordion-group--${modifier}`)
-        }
-    }
-
-    // open
-    if (!args.disabled && args.items && args.items.length > 0) {
-        expect(firstChild.open).toBe(args.not ?? false)
-        expect(firstChildSummary).toBeClicked()
-        await sleep()
-        expect(firstChild.open).toBe(!args.not)
-        if (firstChild.open) {
-            if (args.not) {
-                expect(JSON.stringify(JSON.parse(value.textContent ?? ''))).toBe(
-                    JSON.stringify(
-                        [
-                            ...args.items.map(
-                                (item: { name: string }) => item.name,
-                            ),
-                        ].splice(1),
-                    ),
-                )
-            }
-            else if (args.collapse) {
-                expect(JSON.stringify(JSON.parse(value.textContent ?? ''))).toBe(
-                    JSON.stringify([args.items[0].name]),
-                )
-            }
-            else {
-                expect(value.textContent ?? '').toBe(args.items[0].name)
-            }
-            expect(firstChildSummary.getAttribute('aria-expanded')).toBe('true')
-            const content = firstChild.lastChild as HTMLElement
-            expect(content.getAttribute('aria-hidden')).toBe('false')
-        }
-    }
-
-    // accessibility
-    await expect(element).toHaveNoViolations()
-}

package/src/stories/AccordionGroup/AccordionGroupSlots.stories.ts

@@ -1,54 +0,0 @@
-import type { Story } from './AccordionGroup.stories'
-import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
-import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
-import { argTypes, defaultArgs } from './AccordionGroup.settings'
-import meta from './AccordionGroup.stories'
-import { defaultTest } from './AccordionGroup.test'
-
-export default {
-    ...meta,
-    title: 'Components/AccordionGroup/Slots',
-}
-
-export const Default: Story = {
-    args: defaultArgs,
-    argTypes: {
-        ...argTypes,
-        items: {
-            control: {
-                disable: true,
-            },
-        },
-        default: {
-            ...argTypes.default,
-            control: {
-                disable: true,
-            },
-        },
-    },
-    play: defaultTest,
-    render: args => ({
-        props: Object.keys(argTypes),
-        components: { VvAccordionGroup, VvAccordion },
-        setup() {
-            return { args }
-        },
-        data() {
-            return {
-                selected: '',
-                content:
-					'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
-            }
-        },
-        template: /* html */ `
-			<vv-accordion-group data-testId="element" v-bind="args" v-model="selected">
-				<vv-accordion name="a-1" data-testId="a-1" title="Details 1" :content="content" />
-				<vv-accordion name="a-2" title="Details 2" :content="content" />
-				<vv-accordion name="a-3" title="Details 3" :content="content" />
-			</vv-accordion-group>
-			<div class="mt-24"  >
-				{{ args.not ? 'Closed' : 'Opened'}}: <span data-testId="value">{{ selected }}</span>
-			</div>
-		`,
-    }),
-}