@volverjs/ui-vue 0.0.3 → 0.0.4

package/src/components/VvDropdown/VvDropdownAction.vue

@@ -0,0 +1,44 @@
+<script lang="ts">
+	export default {
+		name: 'VvDropdownAction',
+	}
+</script>
+
+<script setup lang="ts">
+	import VvAction from '@/components/VvAction/VvAction.vue'
+	import VvDropdownItem from '@/components/VvDropdown/VvDropdownItem.vue'
+	import { ActionProps, ModifiersProps } from '@/props'
+
+	// props
+	const props = defineProps({
+		...ActionProps,
+		...ModifiersProps,
+	})
+
+	/**
+	 * @description Define component classes with BEM style.
+	 * @returns {Array} The component classes.
+	 */
+	const { modifiers } = toRefs(props)
+	const bemCssClasses = useBemModifiers('vv-dropdown-action', modifiers)
+</script>
+
+<template>
+	<VvDropdownItem>
+		<VvAction
+			v-bind="{
+				disabled,
+				pressed,
+				active,
+				type,
+				to,
+				href,
+				target,
+				rel,
+			}"
+			:class="bemCssClasses"
+		>
+			<slot />
+		</VvAction>
+	</VvDropdownItem>
+</template>

package/src/components/VvDropdown/VvDropdownOption.vue

@@ -0,0 +1,65 @@
+<script lang="ts">
+	export default {
+		name: 'VvDropdownOption',
+	}
+</script>
+
+<script setup lang="ts">
+	import VvDropdownItem from '@/components/VvDropdown/VvDropdownItem.vue'
+	import {
+		DisabledProps,
+		ModifiersProps,
+		SelectedProps,
+		UnselectableProps,
+	} from '@/props'
+
+	// props
+	const props = defineProps({
+		...DisabledProps,
+		...SelectedProps,
+		...UnselectableProps,
+		...ModifiersProps,
+		deselectHintLabel: {
+			type: String,
+		},
+		selectHintLabel: {
+			type: String,
+		},
+		selectedHintLabel: {
+			type: String,
+		},
+	})
+
+	// style
+	const { modifiers } = toRefs(props)
+	const bemCssClasses = useBemModifiers(
+		'vv-dropdown-option',
+		modifiers,
+		computed(() => ({
+			disabled: props.disabled,
+			selected: props.selected,
+			unselectable: props.unselectable && props.selected,
+		})),
+	)
+</script>
+
+<template>
+	<VvDropdownItem
+		:class="bemCssClasses"
+		:tabindex="disabled ? -1 : 0"
+		:aria-selected="selected"
+		:aria-disabled="disabled"
+	>
+		<slot />
+		<span class="vv-dropdown-option__hint">
+			<slot name="hint" v-bind="{ disabled, selected, unselectable }">
+				<template v-if="selected">
+					{{ unselectable ? deselectHintLabel : selectedHintLabel }}
+				</template>
+				<template v-else-if="!disabled">
+					{{ selectHintLabel }}
+				</template>
+			</slot>
+		</span>
+	</VvDropdownItem>
+</template>

package/src/components/VvDropdown/index.ts

@@ -1,11 +1,6 @@
 import { DropdownProps, IdProps, ModifiersProps } from '@/props'
 import type { PropType } from 'vue'
-
-export const DROPDOWN_ROLES = ['listbox', 'menu'] as const
-export const DROPDOWN_ITEM_ROLES = ['option', 'presentation'] as const
-
-export type DropdownRole = (typeof DROPDOWN_ROLES)[number]
-export type DropdownItemRole = (typeof DROPDOWN_ITEM_ROLES)[number]
+import { DropdownRole } from '@/constants'
 
 export const VvDropdownProps = {
 	...IdProps,
@@ -30,8 +25,8 @@ export const VvDropdownProps = {
 	 */
 	role: {
 		type: String as PropType<DropdownRole>,
-		default: DROPDOWN_ROLES[1],
-		validator: (value: string) =>
-			(DROPDOWN_ROLES as ReadonlyArray<string>).includes(value),
+		default: DropdownRole.menu,
+		validator: (value: DropdownRole) =>
+			Object.values(DropdownRole).includes(value),
 	},
 }

package/src/components/VvSelect/index.ts

@@ -14,6 +14,7 @@ import {
 	UnselectableProps,
 	AutofocusProps,
 	AutocompleteProps,
+	LabelProps,
 } from '@/props'
 
 export const VvSelectProps = {
@@ -32,6 +33,7 @@ export const VvSelectProps = {
 	...IconProps,
 	...FloatingLabelProps,
 	...UnselectableProps,
+	...LabelProps,
 	/**
 	 * This Boolean attribute indicates that multiple options can be selected in the list.
 	 * If it is not specified, then only one option can be selected at a time.
@@ -58,10 +60,6 @@ export const VvSelectProps = {
 		type: [String, Number, Boolean, Object, Array],
 		default: undefined,
 	},
-	/**
-	 * <label> value for the select
-	 */
-	label: String,
 	/**
 	 * Select placeholder
 	 */

package/src/composables/dropdown/useInjectDropdown.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import type { Emitter, EventType } from 'mitt'
-import type { DropdownItemRole } from '@/components/VvDropdown/'
+import type { DropdownItemRole } from '@/constants'
 import {
 	INJECTION_KEY_DROPDOWN_TRIGGER,
 	INJECTION_KEY_DROPDOWN_ACTION,

package/src/composables/dropdown/useProvideDropdown.ts

@@ -1,14 +1,12 @@
 import { type Ref, Fragment } from 'vue'
 import mitt from 'mitt'
-import {
-	type DropdownRole,
-	DROPDOWN_ROLES,
-	DROPDOWN_ITEM_ROLES,
-} from '@/components/VvDropdown/'
 import {
 	INJECTION_KEY_DROPDOWN_TRIGGER,
 	INJECTION_KEY_DROPDOWN_ACTION,
 	INJECTION_KEY_DROPDOWN_ITEM,
+	DropdownRole,
+	DropdownItemRole,
+	ActionRoles,
 } from '@/constants'
 
 /**
@@ -70,9 +68,9 @@ export function useProvideDropdownItem({
 	expanded: Ref<boolean>
 }) {
 	const itemRole = computed(() =>
-		role.value === DROPDOWN_ROLES[0]
-			? DROPDOWN_ITEM_ROLES[0]
-			: DROPDOWN_ITEM_ROLES[1],
+		role.value === DropdownRole.listbox
+			? DropdownItemRole.option
+			: DropdownItemRole.presentation,
 	)
 	provide(INJECTION_KEY_DROPDOWN_ITEM, {
 		role: itemRole,
@@ -91,7 +89,7 @@ export function useProvideDropdownAction({
 	expanded: Ref<boolean>
 }) {
 	provide(INJECTION_KEY_DROPDOWN_ACTION, {
-		role: 'menuitem',
+		role: ActionRoles.menuitem,
 		expanded,
 	})
 }

package/src/composables/useModifiers.ts

@@ -10,14 +10,11 @@ export function useBemModifiers(
 			[prefix]: true,
 		}
 		// props modifiers
-		let modifiersArray = unref(modifiers)
+		const modifiersArray =
+			typeof modifiers?.value === 'string'
+				? modifiers.value.split(' ')
+				: modifiers?.value
 		if (modifiersArray) {
-			if (
-				!Array.isArray(modifiersArray) &&
-				typeof modifiersArray === 'string'
-			) {
-				modifiersArray = modifiersArray.split(' ')
-			}
 			if (Array.isArray(modifiersArray)) {
 				modifiersArray.forEach((modifier) => {
 					toReturn[`${prefix}--${modifier}`] = true

package/src/constants.ts

@@ -23,6 +23,42 @@ export enum Position {
 	after = 'after',
 }
 
+export enum ButtonType {
+	button = 'button',
+	submit = 'submit',
+	reset = 'reset',
+}
+
+export enum ActionTag {
+	nuxtLink = 'nuxt-link',
+	routerLink = 'router-link',
+	a = 'a',
+	button = 'button',
+}
+
+export enum ActionRoles {
+	button = 'button',
+	link = 'link',
+	menuitem = 'menuitem',
+}
+
+export enum DropdownRole {
+	listbox = 'listbox',
+	menu = 'menu',
+}
+
+export enum DropdownItemRole {
+	option = 'option',
+	presentation = 'presentation',
+}
+
+export enum AnchorTarget {
+	_blank = '_blank',
+	_self = '_self',
+	_parent = '_parent',
+	_top = '_top',
+}
+
 // volver
 export const INJECTION_KEY_VOLVER = Symbol.for('volver')
 

package/src/props/index.ts

@@ -7,21 +7,77 @@ import type {
 	ShiftOptions,
 	SizeOptions,
 } from '@/types/floating-ui'
-import { Placement, Position, Side } from '@/constants'
+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
@@ -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,
 	/**
 	 * Input name
 	 */
@@ -354,3 +429,20 @@ export const CheckboxRadioGroupProps = {
 	 */
 	vertical: Boolean,
 }
+
+export const ActionProps = {
+	...DisabledProps,
+	...LabelProps,
+	...PressedProps,
+	...ActiveProps,
+	...LinkProps,
+	/**
+	 * Button type
+	 */
+	type: {
+		type: String,
+		default: ButtonType.button,
+		validator: (value: ButtonType) =>
+			Object.values(ButtonType).includes(value),
+	},
+}

package/src/resolvers/unplugin.ts

@@ -14,19 +14,19 @@ 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)
 	 *
@@ -35,18 +35,24 @@ export interface VolverResolverOptions {
 	prefix?: 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) {
 	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 +63,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 +99,50 @@ 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,
+}: 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 (importStyle) {
-				// import custom style
-				if (customStylePath) {
-					sideEffects.push(customStylePath)
+				// 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)}`
 
-				// import component style
-				const styleNames = getStyleNames(kebabName)
-				if (styleNames) {
-					styleNames.forEach((name) => {
-						sideEffects.push(
-							`@volverjs/style/${
-								importStyle === 'scss' ? 'scss/' : ''
-							}components/${name}`,
-						)
-					})
+				// filter directive
+				if (!DIRECTIVES.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/AccordionSlots.stories.mdx

@@ -14,7 +14,7 @@ import { defaultArgs, argTypes } from './Accordion.settings'
 		name="Summary"
 		play={defaultTest}
 		args={{
-			summary: `<strong data-testId="slot" class="font-bold text-brand">Custom Summary</strong>`,
+			summary: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Summary</strong>`,
 		}}
 		argTypes={{
 			title: {
@@ -38,7 +38,7 @@ import { defaultArgs, argTypes } from './Accordion.settings'
 		name="Details"
 		play={defaultTest}
 		args={{
-			details: `<strong data-testId="slot" class="font-bold text-brand">Custom Details</strong>`,
+			details: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Details</strong>`,
 		}}
 		argTypes={{
 			content: {

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 }

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>