@volverjs/ui-vue 0.0.3 → 0.0.4

package/src/components/VvAction/VvAction.vue

@@ -0,0 +1,144 @@
+<script lang="ts">
+	export default {
+		name: 'VvAction',
+	}
+</script>
+
+<script setup lang="ts">
+	import { VvActionProps, VvActionEvents } from '@/components/VvAction'
+	import { ActionTag } from '@/constants'
+
+	// props and emits
+	const props = defineProps(VvActionProps)
+	const emits = defineEmits(VvActionEvents)
+
+	// inject plugin
+	const volver = useVolver()
+
+	const element = ref<HTMLElement | null>(null)
+	defineExpose({ $el: element })
+
+	// drowpdown trigger
+	const {
+		reference: dropdownTriggerReference,
+		bus: dropdownEventBus,
+		aria: dropdownAria,
+		expanded: dropdownExpanded,
+	} = useInjectedDropdownTrigger()
+	watch(
+		() => element.value,
+		(newValue) => {
+			if (dropdownTriggerReference) {
+				dropdownTriggerReference.value = newValue
+			}
+		},
+	)
+
+	// pressed
+	const pressed = computed(() => {
+		return props.pressed || dropdownExpanded?.value
+	})
+
+	// dropdown parent
+	const { role } = useInjectedDropdownAction()
+
+	/**
+	 * @description The tag defined by props.
+	 * @returns {string} The tag.
+	 */
+	const hasTag = computed(() => {
+		switch (true) {
+			case props.disabled:
+				return ActionTag.button
+			case props.to !== undefined:
+				return volver?.nuxt ? ActionTag.nuxtLink : ActionTag.routerLink
+			case props.href !== undefined:
+				return ActionTag.a
+			default:
+				return ActionTag.button
+		}
+	})
+
+	/**
+	 * @description Define component attributes.
+	 * @returns {Object} The component attributes.
+	 */
+	const hasProps = computed(() => {
+		const toReturn = {
+			...dropdownAria?.value,
+			'aria-pressed': pressed.value ? true : undefined,
+			role,
+		}
+		switch (hasTag.value) {
+			case ActionTag.a:
+				return {
+					...toReturn,
+					href: props.href,
+					target: props.target,
+					rel: props.rel,
+				}
+			case ActionTag.routerLink:
+			case ActionTag.nuxtLink:
+				return {
+					...toReturn,
+					to: props.to,
+					target: props.target,
+				}
+			default:
+				return {
+					...toReturn,
+					type: props.type,
+					disabled: props.disabled,
+				}
+		}
+	})
+
+	/**
+	 * @description Catch click event
+	 */
+	const onClick = (e: Event) => {
+		if (props.disabled) {
+			e.preventDefault()
+			return
+		}
+		dropdownEventBus?.emit('click', e)
+		emits('click', e)
+	}
+
+	/**
+	 * @description Catch mouseover event
+	 */
+	const onMouseover = (e: Event) => {
+		dropdownEventBus?.emit('mouseover', e)
+		emits('mouseover', e)
+	}
+
+	/**
+	 * @description Catch mouseleave event
+	 */
+	const onMouseleave = (e: Event) => {
+		dropdownEventBus?.emit('mouseleave', e)
+		emits('mouseleave', e)
+	}
+</script>
+
+<template>
+	<component
+		v-bind="hasProps"
+		:is="hasTag"
+		ref="element"
+		:class="{
+			active,
+			pressed,
+			disabled,
+		}"
+		@click.passive="onClick"
+		@mouseover.passive="onMouseover"
+		@mouseleave.passive="onMouseleave"
+	>
+		<!-- @slot Default slot -->
+		<slot>
+			{{ label }}
+		</slot>
+	</component>
+</template>

package/src/components/VvAction/index.ts

@@ -0,0 +1,5 @@
+import { ActionProps } from '@/props'
+
+export const VvActionEvents = ['click', 'mouseover', 'mouseleave']
+
+export const VvActionProps = ActionProps

package/src/components/VvButton/VvButton.vue

@@ -6,9 +6,9 @@
 
 <script setup lang="ts">
 	import VvIcon from '@/components/VvIcon/VvIcon.vue'
+	import VvAction from '@/components/VvAction/VvAction.vue'
 	import {
 		VvButtonEvents,
-		ButtonTag,
 		VvButtonProps,
 		useGroupProps,
 	} from '@/components/VvButton'
@@ -35,58 +35,23 @@
 	const hasId = useUniqueId(id)
 	const name = computed(() => (attrs?.name as string) || hasId.value)
 
-	// inject plugin
-	const volver = useVolver()
-
 	// expose el
-	const $el = ref<HTMLElement | null>(null)
+	const element = ref<{ $el: HTMLElement } | null>(null)
+	const $el = computed(() => element.value?.$el)
 	defineExpose({ $el })
 
-	// drowpdown trigger
-	const {
-		reference: dropdownTriggerReference,
-		bus: dropdownEventBus,
-		aria: dropdownAria,
-	} = useInjectedDropdownTrigger()
-	watch(
-		() => $el.value,
-		(newValue) => {
-			if (dropdownTriggerReference) {
-				dropdownTriggerReference.value = newValue
-			}
-		},
-	)
-
-	// dropdown parent
-	const { role } = useInjectedDropdownAction()
-
-	/**
-	 * @description The tag defined by props.
-	 * @returns {string} The tag.
-	 */
-	const hasTag = computed(() => {
-		switch (true) {
-			case disabled.value:
-				return ButtonTag.button
-			case props.to !== undefined:
-				return volver?.nuxt ? ButtonTag.nuxtLink : ButtonTag.routerLink
-			case props.href !== undefined:
-				return ButtonTag.a
-			default:
-				return ButtonTag.button
-		}
-	})
-
 	/**
 	 * @description The component pressed state by prop or group.
 	 * @returns {string} The component tag.
 	 */
-	const isPressed = computed(() => {
-		if (!toggle.value) return props.pressed
-
-		return Array.isArray(modelValue.value)
-			? contains(name.value, modelValue.value)
-			: equals(name.value, modelValue.value)
+	const pressed = computed(() => {
+		if (!toggle.value) {
+			return props.pressed
+		}
+		if (Array.isArray(modelValue.value)) {
+			return contains(name.value, modelValue.value)
+		}
+		return equals(name.value, modelValue.value)
 	})
 
 	/**
@@ -97,12 +62,11 @@
 		'vv-button',
 		modifiers,
 		computed(() => ({
-			active: props.active,
-			pressed: isPressed.value,
-			disabled: disabled.value,
 			reverse: [Side.right, Side.bottom].includes(iconPosition.value),
 			column: [Side.top, Side.bottom].includes(iconPosition.value),
-			iconOnly: Boolean(icon?.value && !label?.value && !slots.default),
+			'icon-only': Boolean(
+				icon?.value && !label?.value && !slots.default,
+			),
 		})),
 	)
 
@@ -114,48 +78,10 @@
 		typeof icon?.value === 'string' ? { name: icon?.value } : icon?.value,
 	)
 
-	/**
-	 * @description Define component attributes.
-	 * @returns {Object} The component attributes.
-	 */
-	const hasProps = computed(() => {
-		const toReturn = {
-			...dropdownAria?.value,
-			'aria-pressed': isPressed.value ? true : undefined,
-			class: bemCssClasses.value,
-			role,
-		}
-		switch (hasTag.value) {
-			case ButtonTag.a:
-				return {
-					...toReturn,
-					role: toReturn.role ?? 'button',
-					href: props.href,
-					target: props.target,
-					rel: props.rel,
-				}
-			case ButtonTag.routerLink:
-			case ButtonTag.nuxtLink:
-				return {
-					...toReturn,
-					role: toReturn.role ?? 'button',
-					to: props.to,
-					target: props.target,
-				}
-			default:
-				return {
-					...toReturn,
-					type: props.type,
-					disabled: disabled.value,
-				}
-		}
-	})
-
 	/**
 	 * @description Catch click event
 	 */
-	const onClick = (e: Event) => {
-		dropdownEventBus?.emit('click', e)
+	const onClick = () => {
 		if (toggle.value) {
 			if (Array.isArray(modelValue.value)) {
 				if (contains(name.value, modelValue.value)) {
@@ -169,39 +95,31 @@
 				modelValue.value.push(name.value)
 				return
 			}
-			if (equals(name, modelValue.value) && unselectable.value) {
+			if (equals(name.value, modelValue.value) && unselectable.value) {
 				modelValue.value = undefined
 				return
 			}
 			modelValue.value = name.value
 		}
 	}
-
-	/**
-	 * @description Catch mouseover event
-	 */
-	const onMouseover = (e: Event) => {
-		dropdownEventBus?.emit('mouseover', e)
-	}
-
-	/**
-	 * @description Catch mouseleave event
-	 */
-	const onMouseleave = (e: Event) => {
-		dropdownEventBus?.emit('mouseleave', e)
-	}
 </script>
 
 <template>
-	<!-- #region component: "button" | "a" | "router-link" | "nuxt-link" -->
-	<component
-		v-bind="hasProps"
-		:is="hasTag"
+	<VvAction
+		v-bind="{
+			disabled,
+			pressed,
+			active,
+			type,
+			to,
+			href,
+			target,
+			rel,
+		}"
 		:id="hasId"
-		ref="$el"
-		@click.passive="onClick"
-		@mouseover.passive="onMouseover"
-		@mouseleave.passive="onMouseleave"
+		ref="element"
+		:class="bemCssClasses"
+		@click="onClick"
 	>
 		<!-- @slot Default slot -->
 		<slot>
@@ -238,6 +156,5 @@
 			</template>
 			<!-- #endregion -->
 		</slot>
-	</component>
-	<!-- #endregion -->
+	</VvAction>
 </template>

package/src/components/VvButton/index.ts

@@ -1,40 +1,22 @@
 import type { Ref, PropType, ExtractPropTypes } from 'vue'
 import type { ButtonGroupState } from '@/types/group'
 import {
-	DisabledProps,
+	ActionProps,
 	IdProps,
+	LoadingProps,
 	ModifiersProps,
 	UnselectableProps,
 } from '@/props'
 import { INJECTION_KEY_BUTTON_GROUP, Side } from '@/constants'
 
-export enum ButtonType {
-	button = 'button',
-	submit = 'submit',
-	reset = 'reset',
-}
-
-export enum ButtonTag {
-	nuxtLink = 'nuxt-link',
-	routerLink = 'router-link',
-	a = 'a',
-	button = 'button',
-}
-
-export enum ButtonTarget {
-	_blank = '_blank',
-	_self = '_self',
-	_parent = '_parent',
-	_top = '_top',
-}
-
 export const VvButtonEvents = ['update:modelValue']
 
 export const VvButtonProps = {
+	...ActionProps,
 	...IdProps,
 	...ModifiersProps,
-	...DisabledProps,
 	...UnselectableProps,
+	...LoadingProps,
 	/**
 	 * Button icon
 	 */
@@ -47,65 +29,10 @@ export const VvButtonProps = {
 		default: Side.left,
 		validator: (value: Side) => Object.values(Side).includes(value),
 	},
-	/**
-	 * Button label
-	 */
-	label: [String, Number],
-	/**
-	 * Loading status
-	 */
-	loading: Boolean,
 	/**
 	 * Loading icon
 	 */
 	loadingIcon: { type: String, default: 'eos-icons:bubble-loading' },
-	/**
-	 * Loading label
-	 */
-	loadingLabel: {
-		type: String,
-		default: 'Loading...',
-	},
-	/**
-	 * 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],
-	},
-	/**
-	 * Link href
-	 */
-	href: String,
-	/**
-	 * Link target
-	 */
-	target: {
-		type: String as PropType<ButtonTarget>,
-		validator: (value: ButtonTarget) =>
-			Object.values(ButtonTarget).includes(value),
-	},
-	active: Boolean,
-	/**
-	 * Button pressed mode
-	 */
-	pressed: Boolean,
-	/**
-	 * Link rel
-	 */
-	rel: {
-		type: String,
-		default: 'noopener noreferrer',
-	},
-	/**
-	 * Button type
-	 */
-	type: {
-		type: String,
-		default: ButtonType.button,
-		validator: (value: ButtonType) =>
-			Object.values(ButtonType).includes(value),
-	},
 	toggle: {
 		type: Boolean,
 		default: false,
@@ -151,12 +78,12 @@ export function useGroupProps(
 		const localValue = localModifiers?.value
 			? Array.isArray(localModifiers.value)
 				? localModifiers.value
-				: [localModifiers.value]
+				: localModifiers.value.split(' ')
 			: []
 		const groupValue = group?.value.itemModifiers?.value
 			? Array.isArray(group.value.itemModifiers.value)
 				? group.value.itemModifiers.value
-				: [group.value.itemModifiers.value]
+				: group.value.itemModifiers.value.split(' ')
 			: []
 		return [...localValue, ...groupValue]
 	})

package/src/components/VvCombobox/VvCombobox.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 	export default {
 		name: 'VvCombobox',
-		components: { VvDropdown, VvDropdownItem },
+		components: { VvDropdown, VvDropdownOption },
 	}
 </script>
 
@@ -10,11 +10,12 @@
 	import { VvComboboxProps, VvComboboxEvents } from '@/components/VvCombobox'
 	import VvIcon from '@/components/VvIcon/VvIcon.vue'
 	import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
-	import VvDropdownItem from '@/components/VvDropdown/VvDropdownItem.vue'
+	import VvDropdownOption from '@/components/VvDropdown/VvDropdownOption.vue'
 	import VvSelect from '@/components/VvSelect/VvSelect.vue'
 	import VvBadge from '@/components/VvBadge/VvBadge.vue'
 	import HintSlotFactory from '@/components/common/HintSlot'
 	import type { Option } from '@/types/generic'
+	import { DropdownRole } from '@/constants'
 
 	// props, emit and slots
 	const props = defineProps(VvComboboxProps)
@@ -327,9 +328,14 @@
 			<VvDropdown
 				v-model="expanded"
 				v-bind="dropdownProps"
-				role="listbox"
+				:role="DropdownRole.listbox"
 			>
-				<template v-if="searchable" #before>
+				<template
+					v-if="searchable || $slots['dropdown::before']"
+					#before
+				>
+					<!-- @slot Slot before dropdown items -->
+					<slot name="dropdown::before" />
 					<input
 						v-if="searchable"
 						v-show="expanded"
@@ -392,7 +398,7 @@
 												!readonly &&
 												!disabled
 											"
-											:aria-label="deselectLabel"
+											:aria-label="deselectActionLabel"
 											@click.stop="onInput(option)"
 										>
 											<VvIcon name="close" />
@@ -416,48 +422,54 @@
 					</div>
 				</template>
 				<template #items>
-					<VvDropdownItem
-						v-for="(option, index) in filteredOptions"
-						:key="index"
-						class="vv-dropdown-action"
-						:tabindex="getOptionDisabled(option) ? -1 : 0"
-						:class="{
-							disabled: getOptionDisabled(option),
-							selected: getOptionSelected(option),
-							'vv-dropdown-action--unselectable':
-								unselectable && getOptionSelected(option),
-						}"
-						:aria-selected="getOptionSelected(option)"
-						:aria-disabled="getOptionDisabled(option)"
-						@click.passive="onInput(option)"
-					>
-						<!-- @slot Slot for option customization -->
-						<slot
-							name="option"
+					<template v-if="filteredOptions.length">
+						<VvDropdownOption
+							v-for="(option, index) in filteredOptions"
 							v-bind="{
-								option,
-								selectedOptions,
-								selected: getOptionSelected(option),
 								disabled: getOptionDisabled(option),
+								selected: getOptionSelected(option),
+								unselectable,
+								deselectHintLabel,
+								selectHintLabel,
+								selectedHintLabel,
 							}"
+							:key="index"
+							class="vv-dropdown-option"
+							@click.passive="onInput(option)"
 						>
-							{{ getOptionLabel(option) }}
-							<span class="vv-dropdown-action__hint">
-								<template v-if="getOptionSelected(option)">
-									{{
-										unselectable
-											? pressToDeselectLabel
-											: selectedLabel
-									}}
-								</template>
-								<template
-									v-else-if="!getOptionDisabled(option)"
-								>
-									{{ pressToSelectLabel }}
-								</template>
-							</span>
+							<!-- @slot Slot for option customization -->
+							<slot
+								name="option"
+								v-bind="{
+									option,
+									selectedOptions,
+									selected: getOptionSelected(option),
+									disabled: getOptionDisabled(option),
+								}"
+							>
+								{{ getOptionLabel(option) }}
+							</slot>
+						</VvDropdownOption>
+					</template>
+					<VvDropdownOption
+						v-else-if="!options.length"
+						modifiers="inert"
+					>
+						<!-- @slot Slot for no options available -->
+						<slot name="no-options">
+							{{ noOptionsLabel }}
 						</slot>
-					</VvDropdownItem>
+					</VvDropdownOption>
+					<VvDropdownOption v-else modifiers="inert">
+						<!-- @slot Slot for no results available -->
+						<slot name="no-results">
+							{{ noResultsLabel }}
+						</slot>
+					</VvDropdownOption>
+				</template>
+				<template v-if="$slots['dropdown::after']" #after>
+					<!-- @slot Slot after dropdown items -->
+					<slot name="dropdown::after" />
 				</template>
 			</VvDropdown>
 		</div>

package/src/components/VvCombobox/index.ts

@@ -14,6 +14,7 @@ import {
 	UnselectableProps,
 	IdNameProps,
 	DropdownProps,
+	LabelProps,
 } from '@/props'
 
 export const VvComboboxEvents = [
@@ -38,6 +39,7 @@ export const VvComboboxProps = {
 	...FloatingLabelProps,
 	...UnselectableProps,
 	...DropdownProps,
+	...LabelProps,
 	/**
 	 * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
 	 */
@@ -45,30 +47,30 @@ export const VvComboboxProps = {
 		type: [String, Number, Boolean, Object, Array],
 		default: undefined,
 	},
-	/**
-	 * Select input label
-	 */
-	label: String,
 	/**
 	 * Label for no search results
 	 */
 	noResultsLabel: { type: String, default: 'No results' },
+	/**
+	 * Label for no options	available
+	 */
+	noOptionsLabel: { type: String, default: 'No options available' },
 	/**
 	 * Label for selected option hint
 	 */
-	selectedLabel: { type: String, default: 'Selected' },
+	selectedHintLabel: { type: String, default: 'Selected' },
 	/**
-	 * Label for deselect button
+	 * Label for deselect action button
 	 */
-	deselectLabel: { type: String, default: 'Deselect' },
+	deselectActionLabel: { type: String, default: 'Deselect' },
 	/**
 	 * Label for select option hint
 	 */
-	pressToSelectLabel: { type: String, default: 'Press enter to select' },
+	selectHintLabel: { type: String, default: 'Press enter to select' },
 	/**
 	 * Label for deselected option hint
 	 */
-	pressToDeselectLabel: { type: String, default: 'Press enter to remove' },
+	deselectHintLabel: { type: String, default: 'Press enter to remove' },
 	/**
 	 * Select input placeholder
 	 */