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

package/src/components/VvDropdown/index.ts

@@ -1,35 +1,37 @@
-import {
-	DisabledProps,
-	IdNameProps,
-	ModifiersProps,
-	OptionsProps,
-} from '@/props'
+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]
 
 export const VvDropdownProps = {
-	...IdNameProps,
-	...OptionsProps,
-	...DisabledProps,
+	...IdProps,
 	...ModifiersProps,
+	...DropdownProps,
 	/**
-	 * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
+	 * Show / hide dropdown programmatically
 	 */
 	modelValue: {
-		type: [String, Number, Boolean, Object, Array],
+		type: Boolean,
+		default: undefined,
 	},
 	/**
-	 * Label of "no results" options
-	 */
-	labelNoResults: { type: String, default: 'No results' },
-	/**
-	 * Manage modelValue as string[] or object[]
+	 * Dropdown trigger element
 	 */
-	multiple: Boolean,
-	/**
-	 * The max number of selected values
-	 */
-	maxValues: [Number, String],
+	reference: {
+		type: Object as PropType<HTMLElement | null>,
+		default: null,
+	},
 	/**
-	 * If true the input will be unselectable
+	 * Dropdown role
 	 */
-	unselectable: { type: Boolean, default: true },
+	role: {
+		type: String as PropType<DropdownRole>,
+		default: DROPDOWN_ROLES[1],
+		validator: (value: string) =>
+			(DROPDOWN_ROLES as ReadonlyArray<string>).includes(value),
+	},
 }

package/src/components/VvIcon/VvIcon.vue

@@ -6,7 +6,6 @@
 
 <script setup lang="ts">
 	import { Icon, addIcon, iconExists, type IconifyJSON } from '@iconify/vue'
-	import { type IVolver, VOLVER_PREFIX } from '@/Volver'
 	import { VvIconProps } from '@/components/VvIcon'
 
 	// props
@@ -14,21 +13,19 @@
 
 	// data
 	const show = ref(true)
-	const { modifiers } = toRefs(props)
 
-	// inject
-	const ds = inject<IVolver>(VOLVER_PREFIX)
+	// inject plugin
+	const volver = useVolver()
 
 	// classes
-	const { bemCssClasses } = useBemModifiers('vv-icon', {
-		modifiers,
-	})
+	const { modifiers } = toRefs(props)
+	const bemCssClasses = useBemModifiers('vv-icon', modifiers)
 
 	/**
 	 * Provider name
 	 */
 	const provider = computed(() => {
-		return props.provider || ds?.provider
+		return props.provider || volver?.provider
 	})
 
 	/**
@@ -48,12 +45,14 @@
 		} else {
 			// Check into all collections and set "iconName" data
 			return (
-				ds?.iconsCollections.find((iconsCollection: IconifyJSON) => {
-					const icon = `@${provider.value}:${iconsCollection.prefix}:${_name}`
-					if (iconExists(icon)) {
-						return icon
-					}
-				}) || _name
+				volver?.iconsCollections.find(
+					(iconsCollection: IconifyJSON) => {
+						const icon = `@${provider.value}:${iconsCollection.prefix}:${_name}`
+						if (iconExists(icon)) {
+							return icon
+						}
+					},
+				) || _name
 			)
 		}
 	})
@@ -94,13 +93,14 @@
 		}
 	}
 
-	if (ds) {
+	if (volver) {
 		if (
 			props.src &&
 			!iconExists(`@${provider.value}:${props.prefix}:${props.name}`)
 		) {
 			show.value = false
-			ds.fetchIcon(props.src)
+			volver
+				.fetchIcon(props.src)
 				.then((svg?: string) => {
 					if (svg) {
 						addIconFromSvg(svg)

package/src/components/VvInputText/VvInputText.vue

@@ -6,7 +6,6 @@
 
 <script setup lang="ts">
 	import type { InputHTMLAttributes } from 'vue'
-	import { nanoid } from 'nanoid'
 	import HintSlotFactory from '@/components/common/HintSlot'
 	import VvIcon from '@/components/VvIcon/VvIcon.vue'
 	import VvInputTextActionsFactory from '@/components/VvInputText/VvInputTextActions'
@@ -27,6 +26,7 @@
 
 	// data
 	const {
+		id,
 		icon,
 		iconPosition,
 		label,
@@ -36,7 +36,7 @@
 		invalid,
 		loading,
 	} = toRefs(props)
-	const hasId = computed(() => String(props.id || nanoid()))
+	const hasId = useUniqueId(id)
 	const hasDescribedBy = computed(() => `${hasId.value}-hint`)
 	// BUG: https://www.samanthaming.com/tidbits/88-css-placeholder-shown/
 	const inputTextPlaceholder = computed(() =>
@@ -96,11 +96,11 @@
 	}
 
 	// icons
-	const { hasIconLeft, hasIconRight, hasIcon } = useComponentIcon(
+	const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
 		icon,
 		iconPosition,
 	)
-	const defaultRightIcon = computed(() => {
+	const defaultAfterIcon = computed(() => {
 		switch (props.type) {
 			case INPUT_TYPES.COLOR:
 				return { name: TYPES_ICON.COLOR }
@@ -144,19 +144,23 @@
 	})
 
 	// styles
-	const { bemCssClasses } = useBemModifiers('vv-input-text', {
-		modifiers: props.modifiers,
-		valid,
-		invalid,
-		loading,
-		disabled: props.disabled,
-		readonly: props.readonly,
-		iconLeft: hasIconLeft,
-		iconRight: hasIconRight.value || !isEmpty(defaultRightIcon),
-		floating: props.floating && !isEmpty(props.label),
-		dirty: isDirty,
-		focus: focused,
-	})
+	const { modifiers } = toRefs(props)
+	const bemCssClasses = useBemModifiers(
+		'vv-input-text',
+		modifiers,
+		computed(() => ({
+			valid: valid.value,
+			invalid: invalid.value,
+			loading: loading.value,
+			disabled: props.disabled,
+			readonly: props.readonly,
+			'icon-before': hasIconBefore.value,
+			'icon-after': hasIconAfter.value || !isEmpty(defaultAfterIcon),
+			floating: props.floating && !isEmpty(props.label),
+			dirty: isDirty.value,
+			focus: focused.value,
+		})),
+	)
 
 	// attrs
 	const hasAttrs = computed(() => {
@@ -260,26 +264,28 @@
 			{{ label }}
 		</label>
 		<div class="vv-input-text__wrapper">
-			<!-- @slot Slot to replace left icon -->
-			<slot name="before" v-bind="slotProps">
+			<div v-if="$slots.before" class="vv-input-text__input-before">
+				<!-- @slot Slot before input icon -->
+				<slot name="before" v-bind="slotProps" />
+			</div>
+			<div class="vv-input-text__inner">
 				<VvIcon
-					v-if="hasIconLeft"
-					class="vv-input-text__icon-left"
+					v-if="hasIconBefore"
+					class="vv-input-text__icon"
 					v-bind="hasIcon"
 				/>
-			</slot>
-			<input
-				:id="hasId"
-				ref="input"
-				v-model="localModelValue"
-				v-bind="hasAttrs"
-				@keyup="emit('keyup', $event)"
-			/>
-			<!-- @slot Slot to replace right icon -->
-			<slot name="after" v-bind="slotProps">
+				<input
+					:id="hasId"
+					ref="input"
+					v-model="localModelValue"
+					v-bind="hasAttrs"
+					@keyup="emit('keyup', $event)"
+				/>
+				<!-- @slot Slot to replace right icon -->
 				<VvIcon
-					v-if="hasIconRight || defaultRightIcon"
-					v-bind="hasIconRight ? hasIcon : defaultRightIcon"
+					v-if="hasIconAfter || defaultAfterIcon"
+					class="vv-input-text__icon vv-input-text__icon-after"
+					v-bind="hasIconAfter ? hasIcon : defaultAfterIcon"
 				/>
 				<PasswordInputActions
 					v-else-if="isPassword"
@@ -291,7 +297,12 @@
 					@step-down="onStepDown"
 				/>
 				<SearchInputActions v-else-if="isSearch" @clear="onClear" />
-			</slot>
+			</div>
+			<!-- @slot Slot after input -->
+			<div v-if="$slots.after" class="vv-input-text__input-after">
+				<!-- @slot Slot before input icon -->
+				<slot name="after" v-bind="slotProps" />
+			</div>
 			<span v-if="count" class="vv-input-text__limit">
 				<!-- @slot Slot to replace count -->
 				<slot name="count" v-bind="slotProps">

package/src/components/VvProgress/VvProgress.vue

@@ -13,17 +13,19 @@
 	const indeterminate = computed(() => props.value === undefined)
 
 	// styles
-	const { bemCssClasses: hasClass } = useBemModifiers('vv-progress', {
-		modifiers: props.modifiers,
-		indeterminate,
-	})
+	const { modifiers } = toRefs(props)
+	const bemCssClasses = useBemModifiers(
+		'vv-progress',
+		modifiers,
+		computed(() => ({ indeterminate: indeterminate.value })),
+	)
 </script>
 
 <template>
 	<progress
 		role="progressbar"
 		v-bind="{
-			class: hasClass,
+			class: bemCssClasses,
 			ariaLabel,
 			max,
 			value,

package/src/components/VvRadio/VvRadio.vue

@@ -5,7 +5,6 @@
 </script>
 
 <script setup lang="ts">
-	import { nanoid } from 'nanoid'
 	import {
 		VvRadioProps,
 		VvRadioEvents,
@@ -19,11 +18,9 @@
 	const slots = useSlots()
 
 	// data
-	const { disabled, readonly, modelValue, valid, invalid } = useGroupProps(
-		props,
-		emit,
-	)
-	const id = computed(() => String(props.id || nanoid()))
+	const { id, disabled, readonly, modelValue, valid, invalid } =
+		useGroupProps(props, emit)
+	const hasId = useUniqueId(id)
 	const tabindex = computed(() => (isDisabled.value ? -1 : props.tabindex))
 
 	// template refs
@@ -65,21 +62,26 @@
 	})
 
 	// styles
-	const { bemCssClasses } = useBemModifiers('vv-radio', {
-		valid,
-		invalid,
-		disabled,
-		readonly,
-	})
+	const { modifiers } = toRefs(props)
+	const bemCssClasses = useBemModifiers(
+		'vv-radio',
+		modifiers,
+		computed(() => ({
+			valid: valid.value,
+			invalid: invalid.value,
+			disabled: disabled.value,
+			readonly: readonly.value,
+		})),
+	)
 
 	// hint
 	const { HintSlot } = HintSlotFactory(props, slots)
 </script>
 
 <template>
-	<label :class="bemCssClasses" :for="id">
+	<label :class="bemCssClasses" :for="hasId">
 		<input
-			:id="id"
+			:id="hasId"
 			ref="input"
 			v-model="localModelValue"
 			type="radio"

package/src/components/VvRadio/index.ts

@@ -1,7 +1,7 @@
 import type { ExtractPropTypes, Ref } from 'vue'
-import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
+import type { InputGroupState } from '@/types/group'
 import { CheckboxRadioProps } from '@/props'
-import { VV_RADIO_GROUP } from '@/constants'
+import { INJECTION_KEY_RADIO_GROUP } from '@/constants'
 
 export const VvRadioProps = CheckboxRadioProps
 
@@ -16,8 +16,9 @@ export function useGroupProps(
 	props: VvRadioPropsType,
 	emit: (event: (typeof VvRadioEvents)[number], value: unknown) => void,
 ) {
+	const { id } = toRefs(props)
 	const { group, isInGroup, getGroupOrLocalRef } =
-		useInjectedGroupState<IInputGroupState>(VV_RADIO_GROUP)
+		useInjectedGroupState<InputGroupState>(INJECTION_KEY_RADIO_GROUP)
 
 	// global props
 	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
@@ -27,6 +28,8 @@ export function useGroupProps(
 	const invalid = getGroupOrLocalRef('invalid', props) as Ref<boolean>
 
 	return {
+		// local props
+		id,
 		// global props
 		group,
 		isInGroup,

package/src/components/VvRadioGroup/VvRadioGroup.vue

@@ -6,8 +6,8 @@
 
 <script setup lang="ts">
 	import type { Option } from '@/types/generic'
-	import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
-	import { VV_RADIO_GROUP } from '@/constants'
+	import type { InputGroupState } from '@/types/group'
+	import { INJECTION_KEY_RADIO_GROUP } from '@/constants'
 	import { HintSlotFactory } from '@/components/common/HintSlot'
 	import VvRadio from '@/components/VvRadio/VvRadio.vue'
 	import {
@@ -22,29 +22,33 @@
 
 	// data
 	const modelValue = useVModel(props, 'modelValue', emit)
-	const { disabled, readonly, vertical, valid, invalid } = toRefs(props)
+	const { disabled, readonly, vertical, valid, invalid, modifiers } =
+		toRefs(props)
 
-	const groupState: IInputGroupState = {
-		key: VV_RADIO_GROUP,
+	useProvideGroupState<InputGroupState>({
+		key: INJECTION_KEY_RADIO_GROUP,
 		modelValue,
 		disabled,
 		readonly,
 		valid,
 		invalid,
-	}
-	useProvideGroupState(groupState)
+	})
 
 	// options
 	const { getOptionLabel, getOptionValue } = useOptions(props)
 
 	// styles
-	const { bemCssClasses: groupClass } = useBemModifiers('vv-radio-group', {
-		disabled,
-		readonly,
-		horizontal: computed(() => !vertical.value),
-		valid,
-		invalid,
-	})
+	const bemCssClasses = useBemModifiers(
+		'vv-radio-group',
+		modifiers,
+		computed(() => ({
+			disabled: disabled.value,
+			readonly: readonly.value,
+			horizontal: !vertical.value,
+			valid: valid.value,
+			invalid: invalid.value,
+		})),
+	)
 
 	// methods
 	const getOptionProps = (option: string | Option, index: number) => {
@@ -61,12 +65,12 @@
 </script>
 
 <template>
-	<fieldset :class="groupClass">
+	<fieldset :class="bemCssClasses">
 		<legend v-if="label" v-text="label" />
 		<div class="vv-radio-group__wrapper">
 			<!-- #region options -->
 			<template v-if="options.length > 0">
-				<vv-radio
+				<VvRadio
 					v-for="(option, index) in options"
 					:key="index"
 					v-bind="getOptionProps(option, index)"

package/src/components/VvSelect/VvSelect.vue

@@ -5,9 +5,7 @@
 </script>
 
 <script setup lang="ts">
-	import type { Option } from '@/types/generic'
 	import type { SelectHTMLAttributes } from 'vue'
-	import { nanoid } from 'nanoid'
 	import VvIcon from '@/components/VvIcon/VvIcon.vue'
 	import HintSlotFactory from '@/components/common/HintSlot'
 	import { VvSelectProps, VvSelectEmits } from '@/components/VvSelect'
@@ -25,6 +23,7 @@
 
 	// data
 	const {
+		id,
 		modifiers,
 		disabled,
 		readonly,
@@ -38,7 +37,7 @@
 	} = toRefs(props)
 
 	// computed
-	const hasId = computed(() => String(props.id || nanoid()))
+	const hasId = useUniqueId(id)
 	const hasDescribedBy = computed(() => `${hasId.value}-hint`)
 
 	// focus
@@ -53,7 +52,7 @@
 	})
 
 	// icons
-	const { hasIcon, hasIconLeft, hasIconRight } = useComponentIcon(
+	const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
 		icon,
 		iconPosition,
 	)
@@ -79,20 +78,23 @@
 	})
 
 	// styles
-	const { bemCssClasses } = useBemModifiers('vv-select', {
+	const bemCssClasses = useBemModifiers(
+		'vv-select',
 		modifiers,
-		valid,
-		invalid,
-		loading,
-		disabled,
-		readonly,
-		iconLeft: hasIconLeft,
-		iconRight: hasIconRight,
-		dirty: isDirty,
-		focus: focused,
-		floating,
-		multiple,
-	})
+		computed(() => ({
+			valid: valid.value,
+			invalid: invalid.value,
+			loading: loading.value,
+			disabled: disabled.value,
+			readonly: readonly.value,
+			'icon-before': hasIconBefore.value,
+			'icon-after': hasIconAfter.value,
+			dirty: isDirty.value,
+			focus: focused.value,
+			floating: floating.value,
+			multiple: multiple.value,
+		})),
+	)
 
 	// attrs
 	const hasAttrs: SelectHTMLAttributes = computed(() => {
@@ -115,18 +117,15 @@
 		}
 	})
 
-	const { getOptionLabel, getOptionValue } = useOptions(props)
+	// slots
+	const slotProps = computed(() => ({
+		valid: props.valid,
+		invalid: props.invalid,
+		modelValue: props.modelValue,
+	}))
 
-	/**
-	 * Retrieve the disabled state of an option based on prop "disabled" or the disabled attribute
-	 * @param {String | Option} option
-	 */
-	function getDisabled(option: string | Option): boolean {
-		if (typeof option === 'string' || option.disabled === undefined) {
-			return disabled.value
-		}
-		return option.disabled
-	}
+	const { getOptionLabel, getOptionValue, getOptionDisabled } =
+		useOptions(props)
 
 	const localModelValue = computed({
 		get: () => {
@@ -146,35 +145,49 @@
 		<label v-if="label" :for="hasId">{{ label }}</label>
 		<!-- #region native select -->
 		<div class="vv-select__wrapper">
-			<slot name="before">
-				<vv-icon v-if="hasIconLeft" v-bind="hasIcon" />
-			</slot>
-			<select
-				:id="hasId"
-				ref="select"
-				v-model="localModelValue"
-				v-bind="hasAttrs"
-			>
-				<option
-					v-if="placeholder"
-					:value="undefined"
-					:disabled="!unselectable"
-					:hidden="!unselectable"
-				>
-					{{ placeholder }}
-				</option>
-				<option
-					v-for="(option, index) in options"
-					:key="index"
-					:disabled="getDisabled(option)"
-					:value="getOptionValue(option)"
+			<div v-if="$slots.before" class="vv-select__input-before">
+				<!-- @slot Slot before input -->
+				<slot name="before" v-bind="slotProps" />
+			</div>
+			<div class="vv-select__inner">
+				<VvIcon
+					v-if="hasIconBefore"
+					class="vv-select__icon"
+					v-bind="hasIcon"
+				/>
+				<select
+					:id="hasId"
+					ref="select"
+					v-model="localModelValue"
+					v-bind="hasAttrs"
 				>
-					{{ getOptionLabel(option) }}
-				</option>
-			</select>
-			<slot name="after">
-				<vv-icon v-if="hasIconRight" v-bind="hasIcon" />
-			</slot>
+					<option
+						v-if="placeholder"
+						:value="undefined"
+						:disabled="!unselectable"
+						:hidden="!unselectable"
+					>
+						{{ placeholder }}
+					</option>
+					<option
+						v-for="(option, index) in options"
+						:key="index"
+						:disabled="getOptionDisabled(option)"
+						:value="getOptionValue(option)"
+					>
+						{{ getOptionLabel(option) }}
+					</option>
+				</select>
+				<VvIcon
+					v-if="hasIconAfter"
+					class="vv-select__icon vv-select__icon-after"
+					v-bind="hasIcon"
+				/>
+			</div>
+			<div v-if="$slots.after" class="vv-select__input-after">
+				<!-- @slot Slot after input -->
+				<slot name="after" v-bind="slotProps" />
+			</div>
 		</div>
 		<!-- #endregion native select -->
 		<HintSlot :id="hasDescribedBy" class="vv-select__hint" />

package/src/components/VvSelect/index.ts

@@ -10,7 +10,7 @@ import {
 	OptionsProps,
 	IconProps,
 	IdNameProps,
-	FloatingProps,
+	FloatingLabelProps,
 	UnselectableProps,
 	AutofocusProps,
 	AutocompleteProps,
@@ -30,7 +30,7 @@ export const VvSelectProps = {
 	...ModifiersProps,
 	...OptionsProps,
 	...IconProps,
-	...FloatingProps,
+	...FloatingLabelProps,
 	...UnselectableProps,
 	/**
 	 * This Boolean attribute indicates that multiple options can be selected in the list.