@volverjs/ui-vue 0.0.3 → 0.0.5-beta.1

package/src/props/index.ts

@@ -1,27 +1,83 @@
 import type { PropType } from 'vue'
-import type { Option } from '@/types/generic'
+import type { Option } from '../types/generic'
 import type {
 	AutoPlacementOptions,
 	FlipOptions,
 	OffsetOptions,
 	ShiftOptions,
 	SizeOptions,
-} from '@/types/floating-ui'
-import { Placement, Position, Side } from '@/constants'
+} from '../types/floating-ui'
+import {
+	Placement,
+	Position,
+	Side,
+	AnchorTarget,
+	ButtonType,
+} from '../constants'
+
+export const LinkProps = {
+	/**
+	 * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
+	 * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
+	 */
+	to: {
+		type: [String, Object],
+	},
+	/**
+	 * Anchor href
+	 */
+	href: String,
+	/**
+	 * Anchor target
+	 */
+	target: {
+		type: String as PropType<`${AnchorTarget}`>,
+		validator: (value: AnchorTarget) =>
+			Object.values(AnchorTarget).includes(value),
+	},
+	/**
+	 * Anchor rel
+	 */
+	rel: {
+		type: String,
+		default: 'noopener noreferrer',
+	},
+}
 
 export const ValidProps = {
+	/**
+	 * Valid status
+	 */
 	valid: Boolean,
+	/**
+	 * Valid label
+	 */
 	validLabel: [String, Array],
 }
 
 export const InvalidProps = {
+	/**
+	 * Invalid status
+	 */
 	invalid: Boolean,
+	/**
+	 * Invalid label
+	 */
 	invalidLabel: [String, Array],
 }
 
 export const LoadingProps = {
+	/**
+	 * Loading status
+	 */
 	loading: Boolean,
-	loadingLabel: String,
+	/**
+	 * Loading label
+	 */
+	loadingLabel: {
+		type: String,
+		default: 'Loading...',
+	},
 }
 
 export const DisabledProps = {
@@ -31,6 +87,34 @@ export const DisabledProps = {
 	disabled: Boolean,
 }
 
+export const SelectedProps = {
+	/**
+	 * Whether the item is selected
+	 */
+	selected: Boolean,
+}
+
+export const ActiveProps = {
+	/**
+	 * Whether the item is active
+	 */
+	active: Boolean,
+}
+
+export const PressedProps = {
+	/**
+	 * Whether the item is pressed
+	 */
+	pressed: Boolean,
+}
+
+export const LabelProps = {
+	/**
+	 * The item label
+	 */
+	label: [String, Number],
+}
+
 export const ReadonlyProps = {
 	/**
 	 * The value is not editable
@@ -100,7 +184,7 @@ export const IconProps = {
 	 * VvIcon position
 	 */
 	iconPosition: {
-		type: String as PropType<Position>,
+		type: String as PropType<`${Position}`>,
 		default: Position.before,
 		validation: (value: Position) =>
 			Object.values(Position).includes(value),
@@ -142,7 +226,7 @@ export const DropdownProps = {
 	 * Dropdown placement
 	 */
 	placement: {
-		type: String as PropType<Side | Placement>,
+		type: String as PropType<`${Side}` | `${Placement}`>,
 		default: Side.bottom,
 		validator: (value: Side & Placement) => {
 			return (
@@ -271,6 +355,7 @@ export const InputTextareaProps = {
 	...DebounceProps,
 	...IconProps,
 	...FloatingLabelProps,
+	...LabelProps,
 	/**
 	 * Input / Textarea minlength
 	 * Minimum length (number of characters) of value
@@ -299,10 +384,6 @@ export const InputTextareaProps = {
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required
 	 */
 	required: Boolean,
-	/**
-	 * <label> value for the Input / Textarea
-	 */
-	label: String,
 }
 
 export const CheckboxRadioProps = {
@@ -314,6 +395,7 @@ export const CheckboxRadioProps = {
 	...DisabledProps,
 	...ReadonlyProps,
 	...ModifiersProps,
+	...LabelProps,
 	/**
 	 * Input value
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
@@ -323,10 +405,6 @@ export const CheckboxRadioProps = {
 	 * Input value
 	 */
 	modelValue: [Object, Number, Boolean, String],
-	/**
-	 * <label> for input
-	 */
-	label: String,
 }
 
 export const CheckboxRadioGroupProps = {
@@ -337,14 +415,11 @@ export const CheckboxRadioGroupProps = {
 	...DisabledProps,
 	...ReadonlyProps,
 	...ModifiersProps,
+	...LabelProps,
 	/**
 	 * Input value
 	 */
-	modelValue: [String, Array],
-	/**
-	 * Input label
-	 */
-	label: String,
+	modelValue: [String, Array, Boolean, Number, Symbol],
 	/**
 	 * Input name
 	 */
@@ -354,3 +429,20 @@ export const CheckboxRadioGroupProps = {
 	 */
 	vertical: Boolean,
 }
+
+export const ActionProps = {
+	...DisabledProps,
+	...LabelProps,
+	...PressedProps,
+	...ActiveProps,
+	...LinkProps,
+	/**
+	 * Button type
+	 */
+	type: {
+		type: String as PropType<`${ButtonType}`>,
+		default: ButtonType.button,
+		validator: (value: ButtonType) =>
+			Object.values(ButtonType).includes(value),
+	},
+}

package/src/resolvers/unplugin.ts

@@ -14,39 +14,50 @@ function kebabCase(str: string, options?: { condense: boolean }) {
 		.toLowerCase()
 }
 
+type ImportStyle = boolean | 'css' | 'scss'
+
 export interface VolverResolverOptions {
 	/**
 	 * import style along with components
-	 *
-	 * @default 'css'
+	 * @default undefined
 	 */
-	importStyle?: boolean | 'css' | 'scss'
+	importStyle?: ImportStyle
 	/**
-	 * import custom style path
-	 *
-	 * @default ''
+	 * enable/disable directives
+	 * @default undefined
 	 */
-	customStylePath?: string
+	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[]
 }
 
-const STYLE_EXCLUDE = ['vv-icon']
+const STYLE_EXCLUDE = ['vv-icon', 'vv-action']
 const VOLVER_PREFIX = 'vv'
+const DIRECTIVES = ['v-tooltip']
 
-const getStyleNames = function (kebabName: string) {
+export const getStyleNames = function (kebabName: string) {
 	if (STYLE_EXCLUDE.includes(kebabName)) {
 		return undefined
 	}
 	if (kebabName === 'vv-dropdown') {
-		return ['vv-dropdown', 'vv-dropdown-action']
+		return ['vv-dropdown', 'vv-dropdown-option', 'vv-dropdown-action']
 	}
 	if (kebabName === 'vv-combobox') {
-		return ['vv-select', 'vv-dropdown', 'vv-dropdown-action']
+		return [
+			'vv-select',
+			'vv-dropdown',
+			'vv-dropdown-option',
+			'vv-dropdown-action',
+		]
 	}
 	if (kebabName === 'vv-accordion-group') {
 		return ['vv-accordion-group', 'vv-accordion']
@@ -57,9 +68,34 @@ const getStyleNames = function (kebabName: string) {
 	if (kebabName === 'vv-radio-group') {
 		return ['vv-radio-group', 'vv-radio']
 	}
+	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
  *
@@ -68,48 +104,59 @@ const getStyleNames = function (kebabName: string) {
 export function VolverResolver({
 	prefix = VOLVER_PREFIX,
 	importStyle,
-	customStylePath,
-}: VolverResolverOptions = {}): ComponentResolver {
-	return {
-		type: 'component',
-		resolve: (name: string) => {
-			if (
-				!prefix ||
-				!name.toLowerCase().startsWith(prefix.toLowerCase())
-			) {
-				return
-			}
-
-			const sideEffects: SideEffectsInfo = []
-			const kebabName = kebabCase(name).replace(
-				`${prefix}-`,
-				`${VOLVER_PREFIX}-`,
-			)
+	directives,
+	ignore,
+}: 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
+				}
 
-			if (importStyle) {
-				// import custom style
-				if (customStylePath) {
-					sideEffects.push(customStylePath)
+				const kebabName = `v-${kebabCase(name)}`
+
+				// filter directive
+				if (!DIRECTIVES.includes(kebabName)) {
+					return
 				}
 
-				// import component style
-				const styleNames = getStyleNames(kebabName)
-				if (styleNames) {
-					styleNames.forEach((name) => {
-						sideEffects.push(
-							`@volverjs/style/${
-								importStyle === 'scss' ? 'scss/' : ''
-							}components/${name}`,
-						)
-					})
+				if (ignore && ignore.includes(kebabName)) {
+					return
 				}
-			}
 
-			// import component
-			return {
-				from: `@volverjs/ui-vue/${kebabName}`,
-				sideEffects,
-			}
+				// import directive
+				return {
+					from: `@volverjs/ui-vue/${kebabName}`,
+					sideEffects: getSideEffects(kebabName, importStyle),
+				}
+			},
 		},
-	}
+	]
 }

package/src/stories/Accordion/Accordion.stories.mdx

@@ -24,10 +24,10 @@ export const Template = (args, { argTypes }) => ({
 	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 #details v-if="args.details"><div v-html="args.details"></div></template>
+			<template #default v-if="args.default"><div v-html="args.default"></div></template>
 		</vv-accordion>
 		<div class="mt-24">
-			Open: <span data-testId="value">{{ open }}</span>
+			{{ args.not ? 'Closed' : 'Opened'}}: <span data-testId="value">{{ open }}</span>
 		</div>
 	`,
 })
@@ -37,3 +37,9 @@ export const Template = (args, { argTypes }) => ({
 		{Template.bind()}
 	</Story>
 </Canvas>
+
+<Canvas>
+	<Story name="Not" play={defaultTest} args={{ not: true }}>
+		{Template.bind()}
+	</Story>
+</Canvas>

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

@@ -9,7 +9,7 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	)) as HTMLDetailsElement
 	const summary = element.getElementsByTagName('summary')[0]
 	const content = element.getElementsByClassName(
-		'vv-collapse__content',
+		'vv-accordion__content',
 	)[0] as HTMLElement
 
 	const modifiers =
@@ -30,30 +30,36 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	if (args.summary) {
 		const div = document.createElement('div')
 		div.innerHTML = args.summary
-		expect(summary).toHaveClass('vv-collapse__summary')
+		expect(summary).toHaveClass('vv-accordion__summary')
 		expect(summary.innerText).toEqual(div.innerText)
 	} else if (args.title) {
-		expect(summary).toHaveClass('vv-collapse__summary')
+		expect(summary).toHaveClass('vv-accordion__summary')
 		expect(summary.innerText).toEqual(args.title)
 	}
 
 	// open
 	if (!args.disabled) {
-		expect(element.open).toBe(false)
-		expect(element).toBeClicked()
+		expect(element.open).toBe(args.not ? true : false)
+		expect(summary).toBeClicked()
 		await sleep()
-		expect(element.open).toBeTruthy()
-		expect(summary.getAttribute('aria-expanded')).toBe('true')
-		expect(content.getAttribute('aria-hidden')).toBe('false')
+		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',
+		)
 	}
 
-	// details slot / content
-	if (args.details) {
-		const div = document.createElement('div')
-		div.innerHTML = args.details
-		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.innerText).toEqual(div.innerText)
+		} else if (args.content) {
+			expect(content.innerText).toEqual(args.content)
+		}
 	}
 
 	// accessibility

package/src/stories/Accordion/AccordionSlots.stories.mdx

@@ -11,18 +11,18 @@ import { defaultArgs, argTypes } from './Accordion.settings'
 
 <Canvas>
 	<Story
-		name="Summary"
+		name="Default"
 		play={defaultTest}
 		args={{
-			summary: `<strong data-testId="slot" class="font-bold text-brand">Custom Summary</strong>`,
+			default: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Details</strong>`,
 		}}
 		argTypes={{
-			title: {
+			content: {
 				control: {
 					disable: true,
 				},
 			},
-			details: {
+			summary: {
 				control: {
 					disable: true,
 				},
@@ -35,18 +35,18 @@ import { defaultArgs, argTypes } from './Accordion.settings'
 
 <Canvas>
 	<Story
-		name="Details"
+		name="Summary"
 		play={defaultTest}
 		args={{
-			details: `<strong data-testId="slot" class="font-bold text-brand">Custom Details</strong>`,
+			summary: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Summary</strong>`,
 		}}
 		argTypes={{
-			content: {
+			title: {
 				control: {
 					disable: true,
 				},
 			},
-			summary: {
+			details: {
 				control: {
 					disable: true,
 				},

package/src/stories/AccordionGroup/AccordionGroup.stories.mdx

@@ -24,7 +24,7 @@ export const Template = (args, { argTypes }) => ({
 	template: /*html*/ `
 		<vv-accordion-group data-testId="element" v-bind="args" v-model="selected" />
 		<div class="mt-24">
-			Selected: <span data-testId="value">{{ selected }}</span>
+			{{ args.not ? 'Closed' : 'Opened'}}: <span data-testId="value">{{ selected }}</span>
 		</div>
 	`,
 })
@@ -35,8 +35,24 @@ export const Template = (args, { argTypes }) => ({
 	</Story>
 </Canvas>
 
+<Canvas>
+	<Story name="Not" play={defaultTest} args={{ not: true }}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
 <Canvas>
 	<Story name="Collapse" play={defaultTest} args={{ collapse: true }}>
 		{Template.bind()}
 	</Story>
 </Canvas>
+
+<Canvas>
+	<Story
+		name="Collapse Not"
+		play={defaultTest}
+		args={{ collapse: true, not: true }}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

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

@@ -8,6 +8,7 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 		'element',
 	)) as HTMLElement
 	const firstChild = element.children[0] as HTMLDetailsElement
+	const firstChildSummary = firstChild.getElementsByTagName('summary')[0]
 	const value = (await within(canvasElement).findByTestId(
 		'value',
 	)) as HTMLElement
@@ -28,21 +29,26 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 
 	// open
 	if (!args.disabled && args.items && args.items.length > 0) {
-		expect(firstChild.open).toBe(false)
-		expect(firstChild).toBeClicked()
+		expect(firstChild.open).toBe(args.not ? true : false)
+		expect(firstChildSummary).toBeClicked()
 		await sleep()
-		expect(firstChild.open).toBeTruthy()
-		if (args.collapse) {
-			expect(JSON.stringify(JSON.parse(value.innerText))).toBe(
-				JSON.stringify([args.items[0].name]),
-			)
-		} else {
-			expect(value.innerText).toBe(args.items[0].name)
+		expect(firstChild.open).toBe(args.not ? false : true)
+		if (firstChild.open) {
+			if (args.collapse) {
+				expect(JSON.stringify(JSON.parse(value.innerText))).toBe(
+					JSON.stringify([args.items[0].name]),
+				)
+			} else {
+				expect(value.innerText).toBe(args.items[0].name)
+			}
 		}
-		const summary = firstChild.firstChild as HTMLElement
+		expect(firstChildSummary.getAttribute('aria-expanded')).toBe(
+			args.not ? 'false' : 'true',
+		)
 		const content = firstChild.lastChild as HTMLElement
-		expect(summary.getAttribute('aria-expanded')).toBe('true')
-		expect(content.getAttribute('aria-hidden')).toBe('false')
+		expect(content.getAttribute('aria-hidden')).toBe(
+			args.not ? 'true' : 'false',
+		)
 	}
 
 	// accessibility

package/src/stories/AccordionGroup/AccordionGroupSlots.stories.mdx

@@ -29,8 +29,9 @@ import { defaultArgs, argTypes } from './AccordionGroup.settings'
 			},
 		}}
 	>
-		{(args) => {
+		{(args, { argTypes }) => {
 			return {
+				props: Object.keys(argTypes),
 				components: { VvAccordionGroup, VvAccordion },
 				setup() {
 					return { args }
@@ -49,7 +50,7 @@ import { defaultArgs, argTypes } from './AccordionGroup.settings'
 						<vv-accordion name="a-3" title="Details 3" :content="content" />
 					</vv-accordion-group>
 					<div class="mt-24"  >
-						Selected: <span data-testId="value">{{ selected }}</span>
+						Opened: <span data-testId="value">{{ selected }}</span>
 					</div>
 				`,
 			}

package/src/stories/Breadcrumb/Breadcrumb.stories.mdx

@@ -10,7 +10,8 @@ import { defaultArgs, argTypes } from './Breadcrumb.settings'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvBreadcrumb },
 	setup() {
 		return { args }

package/src/stories/Button/Button.stories.mdx

@@ -10,15 +10,17 @@ import { argTypes, defaultArgs } from './Button.settings'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	data() {
 		return { value: undefined }
 	},
 	setup() {
 		return { args }
 	},
+	components: { VvButton },
 	template: /*html*/ `
-		<vv-button v-bind="args" v-model="value" name="my-button">
+		<vv-button v-bind="args" v-model="value" name="my-button" data-testId="element">
 			<template #before v-if="args.before"><div v-html="args.before"></div></template>
 			<template #default v-if="args.default"><div v-html="args.default"></div></template>
 			<template #after v-if="args.after"><div v-html="args.after"></div></template>

package/src/stories/Button/Button.test.ts

@@ -5,7 +5,9 @@ import { expect } from '@/test/expect'
 export async function defaultTest(
 	{ canvasElement, args }: PlayAttributes = {} as PlayAttributes,
 ) {
-	const element = await within(canvasElement).findByRole('button')
+	const element = (await within(canvasElement).findByTestId(
+		'element',
+	)) as HTMLElement
 
 	const modifiers =
 		!args.modifiers || Array.isArray(args.modifiers)