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

package/src/resolvers/unplugin.ts

@@ -1,106 +1,101 @@
 import type {
-	ComponentResolver,
-	SideEffectsInfo,
+    ComponentResolver,
+    SideEffectsInfo,
 } from 'unplugin-vue-components/types'
-
-function kebabCase(str: string, options?: { condense: boolean }) {
-	if (typeof str !== 'string') throw new TypeError('expected a string')
-	return str
-		.trim()
-		.replace(/([a-z])([A-Z])/g, '$1-$2')
-		.replace(/\W/g, (m) => (/[À-ž]/.test(m) ? m : '-'))
-		.replace(/^-+|-+$/g, '')
-		.replace(/-{2,}/g, (m) => (options?.condense ? '-' : m))
-		.toLowerCase()
-}
+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[]
+    /**
+     * 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']
+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]
+    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
+    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
 }
 
 /**
@@ -109,61 +104,76 @@ const getSideEffects = function (kebabName: string, importStyle?: ImportStyle) {
  * @link https://github.com/volverjs/ui-vue
  */
 export function VolverResolver({
-	prefix = VOLVER_PREFIX,
-	importStyle,
-	directives,
-	ignore,
+    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
-				return {
-					from: `@volverjs/ui-vue/${kebabName}`,
-					sideEffects: getSideEffects(kebabName, importStyle),
-				}
-			},
-		},
-		{
-			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
-				return {
-					from: `@volverjs/ui-vue/${kebabName}`,
-					sideEffects: getSideEffects(kebabName, importStyle),
-				}
-			},
-		},
-	]
+    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,13 +1,12 @@
-// eslint-disable-next-line
 declare interface Window {
-	// extend the window
+    // extend the window
 }
 
 declare module '*.vue' {
-	import type { DefineComponent } from 'vue'
-	// eslint-disable-next-line
+    import type { DefineComponent } from 'vue'
+    // eslint-disable-next-line
 	const component: DefineComponent<{}, {}, any>
-	export default component
+    export default component
 }
 
 type ValueOf<T> = T[keyof T]

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

@@ -1,57 +1,58 @@
+import type { ArgTypes } from '@storybook/types'
 import { DisabledArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
 
 export const defaultArgs = {
-	title: 'Lorem Ipsum',
-	content:
+    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,
+    modifiers: [],
+    disabled: false,
+    not: false,
 }
 
-export const 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,
+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,14 +1,14 @@
 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'
-import { defaultArgs, argTypes } from './Accordion.settings'
 
 const meta: Meta<typeof VvAccordion> = {
-	title: 'Components/Accordion',
-	component: VvAccordion,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
+    title: 'Components/Accordion',
+    component: VvAccordion,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -16,15 +16,15 @@ 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 */ `
+    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>
@@ -33,13 +33,13 @@ export const Default: Story = {
                 {{ args.not ? 'Closed' : 'Opened'}}: <span data-testId="value">{{ open }}</span>
             </div>
     `,
-	}),
+    }),
 }
 
 export const Not: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		not: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        not: true,
+    },
 }

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

@@ -1,67 +1,69 @@
 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, 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 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]
+    const modifiers
+		= !args.modifiers || Array.isArray(args.modifiers)
+		    ? args.modifiers
+		    : [args.modifiers]
 
-	expect(element).toHaveClass('vv-accordion')
+    expect(element).toHaveClass('vv-accordion')
 
-	// modifiers
-	if (modifiers) {
-		for (const modifier of modifiers) {
-			expect(element).toHaveClass(`vv-accordion--${modifier}`)
-		}
-	}
+    // 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.innerText).toEqual(div.innerText)
-	} else if (args.title) {
-		expect(summary).toHaveClass('vv-accordion__summary')
-		expect(summary.innerText).toEqual(args.title)
-	}
+    // 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 ? true : false)
-		expect(summary).toBeClicked()
-		await sleep()
-		expect(element.open).toBe(args.not ? false : true)
-		expect(summary.getAttribute('aria-expanded')).toBe(
-			args.not ? 'false' : 'true',
-		)
-		expect(content.getAttribute('aria-hidden')).toBe(
-			args.not ? 'true' : 'false',
-		)
-	}
+    // 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.innerText).toEqual(div.innerText)
-		} else if (args.content) {
-			expect(content.innerText).toEqual(args.content)
-		}
-	}
+    // 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()
+    // accessibility
+    await expect(element).toHaveNoViolations()
 }