@volverjs/ui-vue 0.0.3-beta.4 → 0.0.4

package/src/constants.ts

@@ -1,5 +1,74 @@
-// Symbol not working after transpiling
-export const VV_BUTTON_GROUP = 'VV_BUTTON_GROUP'
-export const VV_RADIO_GROUP = 'VV_RADIO_GROUP'
-export const VV_CHECK_GROUP = 'VV_CHECK_GROUP'
-export const VV_ACCORDION_GROUP = 'VV_ACCORDION_GROUP'
+export const DEFAULT_ICONIFY_PROVIDER = 'vv'
+
+export enum Side {
+	left = 'left',
+	right = 'right',
+	top = 'top',
+	bottom = 'bottom',
+}
+
+export enum Placement {
+	topStart = 'top-start',
+	topEnd = 'top-end',
+	bottomStart = 'bottom-start',
+	bottomEnd = 'bottom-end',
+	leftStart = 'left-start',
+	leftEnd = 'left-end',
+	rightStart = 'right-start',
+	rightEnd = 'right-end',
+}
+
+export enum Position {
+	before = 'before',
+	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')
+
+// groups
+export const INJECTION_KEY_BUTTON_GROUP = Symbol.for('buttonGroup')
+export const INJECTION_KEY_RADIO_GROUP = Symbol.for('radioGroup')
+export const INJECTION_KEY_CHECK_GROUP = Symbol.for('checkGroup')
+export const INJECTION_KEY_ACCORDION_GROUP = Symbol.for('accordionGroup')
+
+// dropdown
+export const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for('dropdownTrigger')
+export const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for('dropdownItem')
+export const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for('dropdownAction')

package/src/directives/index.ts

@@ -0,0 +1,5 @@
+import tooltip from '@/directives/v-tooltip'
+
+export default {
+	tooltip,
+}

package/src/directives/v-tooltip.ts

@@ -0,0 +1,15 @@
+import { render, type Directive, type DirectiveBinding } from 'vue'
+import VvTooltip from '@/components/VvTooltip/VvTooltip.vue'
+import type { Side } from '@/constants'
+
+const tooltip: Directive = {
+	beforeMount(el: HTMLElement, binding: DirectiveBinding) {
+		const tooltip = h(VvTooltip, {
+			value: binding.value,
+			position: binding.arg as Side,
+		})
+		render(tooltip, el)
+	},
+}
+
+export default tooltip

package/src/index.ts

@@ -9,6 +9,6 @@ export { VolverPlugin }
 // Add custom property and extend vue type definition
 declare module 'vue' {
 	interface ComponentCustomProperties {
-		$ds?: typeof Volver.prototype
+		$vv?: typeof Volver.prototype
 	}
 }

package/src/props/index.ts

@@ -1,19 +1,83 @@
 import type { PropType } from 'vue'
 import type { Option } from '@/types/generic'
+import type {
+	AutoPlacementOptions,
+	FlipOptions,
+	OffsetOptions,
+	ShiftOptions,
+	SizeOptions,
+} 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 = {
@@ -23,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
@@ -57,6 +149,10 @@ export const OptionsProps = {
 	 * Used when options are objects: key to use for option label
 	 */
 	valueKey: { type: [String, Function], default: 'value' },
+	/**
+	 * Used when options are objects: key to use for option disabled
+	 */
+	disabledKey: { type: [String, Function], default: 'disabled' },
 }
 
 export const CountProps = {
@@ -78,12 +174,6 @@ export const DebounceProps = {
 	debounce: [Number, String],
 }
 
-export const ICON_POSITIONS = {
-	LEFT: 'left',
-	RIGHT: 'right',
-} as const
-export type IconPosition = ValueOf<typeof ICON_POSITIONS>
-
 export const IconProps = {
 	/**
 	 * VvIcon name or props
@@ -94,10 +184,10 @@ export const IconProps = {
 	 * VvIcon position
 	 */
 	iconPosition: {
-		type: String as PropType<IconPosition>,
-		validation: (value: IconPosition) =>
-			Object.values(ICON_POSITIONS).includes(value),
-		default: ICON_POSITIONS.RIGHT,
+		type: String as PropType<Position>,
+		default: Position.before,
+		validation: (value: Position) =>
+			Object.values(Position).includes(value),
 	},
 }
 
@@ -109,7 +199,7 @@ export const TabindexProps = {
 	tabindex: { type: [String, Number], default: 0 },
 }
 
-export const FloatingProps = {
+export const FloatingLabelProps = {
 	/**
 	 * If true the label will be floating
 	 */
@@ -123,12 +213,108 @@ export const UnselectableProps = {
 	unselectable: { type: Boolean, default: true },
 }
 
-export const IdNameProps = {
+export const IdProps = {
 	/**
 	 * Global attribute id
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
 	 */
 	id: [String, Number],
+}
+
+export const DropdownProps = {
+	/**
+	 * Dropdown placement
+	 */
+	placement: {
+		type: String as PropType<Side | Placement>,
+		default: Side.bottom,
+		validator: (value: Side & Placement) => {
+			return (
+				Object.values(Side).includes(value) ||
+				Object.values(Placement).includes(value)
+			)
+		},
+	},
+	/**
+	 * Dropdown show / hide transition name
+	 */
+	transitionName: {
+		type: String,
+	},
+	/**
+	 * Offset of the dropdown from the trigger
+	 * @see https://floating-ui.com/docs/offset
+	 */
+	offset: {
+		type: [Number, String, Object] as PropType<
+			OffsetOptions | number | string
+		>,
+		default: 0,
+	},
+	/**
+	 * Move dropdown to the side if there is no space in the default position
+	 * @see https://floating-ui.com/docs/shift
+	 */
+	shift: {
+		type: [Boolean, Object] as PropType<ShiftOptions | boolean>,
+		default: false,
+	},
+	/**
+	 * Flip dropdown position if there is no space in the default position
+	 * @see https://floating-ui.com/docs/flip
+	 */
+	flip: {
+		type: [Boolean, Object] as PropType<FlipOptions | boolean>,
+		default: true,
+	},
+	/**
+	 * Size of the dropdown
+	 * @see https://floating-ui.com/docs/size
+	 */
+	size: {
+		type: [Boolean, Object] as PropType<SizeOptions | boolean>,
+		default: () => ({ padding: 10 }),
+	},
+	/**
+	 * Automatically change the position of the dropdown
+	 * @see https://floating-ui.com/docs/autoPlacement
+	 */
+	autoPlacement: {
+		type: [Boolean, Object] as PropType<AutoPlacementOptions | boolean>,
+		default: false,
+	},
+	/**
+	 * Add arrow to the dropdown
+	 * @see https://floating-ui.com/docs/arrow
+	 */
+	arrow: {
+		type: Boolean,
+		default: false,
+	},
+	/**
+	 * Close dropdown on click outside
+	 */
+	autoClose: {
+		type: Boolean,
+		default: true,
+	},
+	/**
+	 * Autofocus first item on dropdown open
+	 */
+	autofocusFirst: {
+		type: Boolean,
+		default: true,
+	},
+	/**
+	 * Set dropdown width to the same as the trigger
+	 */
+	triggerWidth: {
+		type: Boolean,
+	},
+}
+
+export const IdNameProps = {
+	...IdProps,
 	/**
 	 * Input / Textarea name
 	 * Name of the form control. Submitted with the form as part of a name/value pair
@@ -168,7 +354,8 @@ export const InputTextareaProps = {
 	...CountProps,
 	...DebounceProps,
 	...IconProps,
-	...FloatingProps,
+	...FloatingLabelProps,
+	...LabelProps,
 	/**
 	 * Input / Textarea minlength
 	 * Minimum length (number of characters) of value
@@ -197,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 = {
@@ -211,6 +394,8 @@ export const CheckboxRadioProps = {
 	...HintProps,
 	...DisabledProps,
 	...ReadonlyProps,
+	...ModifiersProps,
+	...LabelProps,
 	/**
 	 * Input value
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
@@ -220,10 +405,6 @@ export const CheckboxRadioProps = {
 	 * Input value
 	 */
 	modelValue: [Object, Number, Boolean, String],
-	/**
-	 * <label> for input
-	 */
-	label: String,
 }
 
 export const CheckboxRadioGroupProps = {
@@ -233,14 +414,12 @@ export const CheckboxRadioGroupProps = {
 	...HintProps,
 	...DisabledProps,
 	...ReadonlyProps,
+	...ModifiersProps,
+	...LabelProps,
 	/**
 	 * Input value
 	 */
 	modelValue: [String, Array],
-	/**
-	 * Input label
-	 */
-	label: String,
 	/**
 	 * Input name
 	 */
@@ -250,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,15 +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-option', 'vv-dropdown-action']
+	}
 	if (kebabName === 'vv-combobox') {
-		return ['vv-select', 'vv-dropdown']
+		return [
+			'vv-select',
+			'vv-dropdown',
+			'vv-dropdown-option',
+			'vv-dropdown-action',
+		]
 	}
 	if (kebabName === 'vv-accordion-group') {
 		return ['vv-accordion-group', 'vv-accordion']
@@ -54,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
  *
@@ -65,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/shims.d.ts

@@ -4,7 +4,7 @@ declare interface Window {
 }
 
 declare module '*.vue' {
-	import { type DefineComponent } from 'vue'
+	import type { DefineComponent } from 'vue'
 	// eslint-disable-next-line
 	const component: DefineComponent<{}, {}, any>
 	export default component

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

@@ -21,13 +21,15 @@ export const Template = (args, { argTypes }) => ({
 	setup() {
 		return { args }
 	},
-	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>
-			   </vv-accordion>
-			   <div class="mt-24">
-					Open: <span data-testId="value">{{ open }}</span>
-			   </div>`,
+	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>
+		</vv-accordion>
+		<div class="mt-24">
+			Open: <span data-testId="value">{{ open }}</span>
+		</div>
+	`,
 })
 
 <Canvas>

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

@@ -57,5 +57,5 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	}
 
 	// accessibility
-	expect(element).toHaveNoViolations()
+	await expect(element).toHaveNoViolations()
 }

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: {