@volverjs/ui-vue 0.0.1 → 0.0.2

package/src/components/VvButton/index.ts

@@ -4,8 +4,9 @@ import {
 	type ExtractPropTypes,
 	toRefs,
 	ref,
+	computed,
 } from 'vue'
-import { DisabledProps, ModifiersProps } from '@/props'
+import { DisabledProps, ModifiersProps, UnselectableProps } from '@/props'
 import type IButtonGroupState from '@/composables/group/types/IButtonGroupState'
 import { useInjectedGroupState } from '@/composables/group/useInjectedGroupState'
 import { VV_BUTTON_GROUP } from '@/constants'
@@ -42,6 +43,7 @@ export const VvButtonEvents = ['update:modelValue']
 export const VvButtonProps = {
 	...ModifiersProps,
 	...DisabledProps,
+	...UnselectableProps,
 	/**
 	 * Button icon
 	 */
@@ -119,7 +121,6 @@ export const VvButtonProps = {
 		default: false,
 	},
 	modelValue: String,
-	unselectable: { type: Boolean, default: true },
 }
 
 export type VvButtonPropsTypes = ExtractPropTypes<typeof VvButtonProps>
@@ -135,7 +136,13 @@ export function useGroupProps(
 		useInjectedGroupState<IButtonGroupState>(VV_BUTTON_GROUP)
 
 	// local props
-	const { iconPosition, icon, label, pressed } = toRefs(props)
+	const {
+		iconPosition,
+		icon,
+		label,
+		pressed,
+		modifiers: localModifiers,
+	} = toRefs(props)
 
 	// group props
 	const modelValue = getGroupOrLocalRef('modelValue', props, emit) as Ref<
@@ -147,22 +154,33 @@ export function useGroupProps(
 		'unselectable',
 		props,
 	) as Ref<boolean>
-	const modifiers = getGroupOrLocalRef('modifiers', props) as Ref<
-		string[] | string
-	>
 	const multiple = group?.value?.multiple ?? ref(false)
 
+	const modifiers = computed(() => {
+		const localValue = localModifiers?.value
+			? Array.isArray(localModifiers.value)
+				? localModifiers.value
+				: [localModifiers.value]
+			: []
+		const groupValue = group?.value.itemModifiers?.value
+			? Array.isArray(group.value.itemModifiers.value)
+				? group.value.itemModifiers.value
+				: [group.value.itemModifiers.value]
+			: []
+		return [...localValue, ...groupValue]
+	})
+
 	return {
 		// group props
+		group,
+		isInGroup,
 		modelValue,
 		disabled,
 		toggle,
-		isInGroup,
-		group,
-		modifiers,
-		multiple,
 		unselectable,
+		multiple,
 		// local props
+		modifiers,
 		pressed,
 		iconPosition,
 		icon,

package/src/components/VvButtonGroup/VvButtonGroup.vue

@@ -65,7 +65,7 @@
 		toggle,
 		multiple,
 		unselectable,
-		modifiers: itemModifiers,
+		itemModifiers,
 	}
 	useProvideGroupState(groupState)
 

package/src/components/VvButtonGroup/index.ts

@@ -1,18 +1,15 @@
-import { DisabledProps, ModifiersProps } from '@/props'
+import { DisabledProps, ModifiersProps, UnselectableProps } from '@/props'
 
 export const VvButtonGroupProps = {
 	...ModifiersProps,
 	...DisabledProps,
+	...UnselectableProps,
 	/**
 	 * String or String[] of css classes (modifiers) that will be provided to each button'
 	 */
-	itemModifiers: {
-		type: [String, Array<string>],
-		default: '',
-	},
+	itemModifiers: { type: [String, Array<string>], default: undefined },
 	toggle: { type: Boolean, default: false },
 	multiple: { type: Boolean, default: false },
-	unselectable: { type: Boolean, default: true },
 	modelValue: { type: [String, Array<string>], default: undefined },
 }
 

package/src/components/VvCombobox/VvCombobox.vue

@@ -15,6 +15,7 @@
 	import { useComponentFocus } from '@/composables/useComponentFocus'
 	import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
 	import VvIcon from '@/components/VvIcon/VvIcon.vue'
+	import VvSelect from '@/components/VvSelect/VvSelect.vue'
 	import HintSlotFactory from '@/components/common/HintSlot'
 	import { VvComboboxProps, VvComboboxEvents } from '@/components/VvCombobox'
 
@@ -34,7 +35,7 @@
 	const { focused } = useComponentFocus(dropdown, emit)
 
 	// data
-	const id = nanoid()
+	const hasId = computed(() => String(props.id || nanoid()))
 	const searchText = ref('')
 	const debouncedSearchText = refDebounced(
 		searchText,
@@ -50,6 +51,7 @@
 		loading,
 		valid,
 		invalid,
+		floating,
 	} = toRefs(props)
 
 	// emit on change search text
@@ -83,6 +85,7 @@
 		invalid,
 		dirty: isDirty,
 		focus: focused,
+		floating,
 	})
 
 	// current options, filtered or prop options
@@ -119,7 +122,7 @@
 
 	const hasLabel = computed(() => {
 		return selectedOptions.value
-			.map((option) => getOptionValue(option))
+			.map((option) => getOptionLabel(option))
 			.join(props.separator)
 	})
 
@@ -147,6 +150,7 @@
 	}
 
 	const dropdownProps = computed(() => ({
+		name: props.name,
 		options: hasOptions.value,
 		labelKey: props.labelKey,
 		valueKey: props.valueKey,
@@ -155,17 +159,46 @@
 		multiple: props.multiple,
 		maxValues: props.maxValues,
 		modelValue: props.modelValue,
+		unselectable: props.unselectable,
+	}))
+
+	const selectProps = computed(() => ({
+		id: hasId.value,
+		name: props.name,
+		tabindex: hasTabindex.value,
+		valid: valid.value,
+		validLabel: props.validLabel,
+		invalid: invalid.value,
+		invalidLabel: props.invalidLabel,
+		hintLabel: props.hintLabel,
+		loading: loading.value,
+		loadingLabel: props.loadingLabel,
+		disabled: disabled.value,
+		readonly: readonly.value,
+		modifiers: props.modifiers,
+		options: hasOptions.value,
+		labelKey: props.labelKey,
+		valueKey: props.valueKey,
+		icon: props.icon,
+		iconPosition: props.iconPosition,
+		floating: props.floating,
+		unselectable: props.unselectable,
+		multiple: props.multiple,
+		label: props.label,
+		placeholder: props.placeholder,
+		modelValue: props.modelValue,
 	}))
 </script>
 
 <template>
-	<div v-if="!native" :id="id" :class="bemCssClasses">
+	<div v-if="!native" :id="hasId" :class="bemCssClasses">
 		<label
 			v-if="label"
-			:id="`${id}-label`"
-			:for="searchable && dropdownOpen ? `${id}-input` : undefined"
-			>{{ label }}</label
+			:id="`${hasId}-label`"
+			:for="searchable && dropdownOpen ? `${hasId}-input` : undefined"
 		>
+			{{ label }}
+		</label>
 		<details
 			ref="dropdown"
 			class="vv-select__wrapper"
@@ -189,7 +222,7 @@
 				<!-- #region search input -->
 				<template v-if="searchable && dropdownOpen">
 					<input
-						:id="`${id}-input`"
+						:id="`${hasId}-input`"
 						ref="inputSearch"
 						v-model="searchText"
 						role="combobox"
@@ -213,15 +246,16 @@
 			</summary>
 			<!-- @slot Slot to replace right icon -->
 			<VvDropdown
-				:id="`${id}-dropdown`"
+				:id="`${hasId}-dropdown`"
 				v-bind="dropdownProps"
 				@update:model-value="onInput"
 			/>
 		</details>
 		<HintSlot class="vv-select__hint" />
 	</div>
-	<!-- <VvSelect
+	<VvSelect
 		v-else
-		v-bind="props"
-		@update:model-value="emit('update:modelValue', $event)" /> -->
+		v-bind="selectProps"
+		@update:model-value="emit('update:modelValue', $event)"
+	/>
 </template>

package/src/components/VvCombobox/index.ts

@@ -9,6 +9,9 @@ import {
 	OptionsProps,
 	IconProps,
 	TabindexProps,
+	FloatingProps,
+	UnselectableProps,
+	IdNameProps,
 } from '@/props'
 
 export const VvComboboxEvents = [
@@ -19,6 +22,7 @@ export const VvComboboxEvents = [
 ]
 
 export const VvComboboxProps = {
+	...IdNameProps,
 	...TabindexProps,
 	...ValidProps,
 	...InvalidProps,
@@ -29,6 +33,8 @@ export const VvComboboxProps = {
 	...ModifiersProps,
 	...OptionsProps,
 	...IconProps,
+	...FloatingProps,
+	...UnselectableProps,
 	/**
 	 * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
 	 */

package/src/components/VvDropdown/VvDropdown.vue

@@ -5,7 +5,7 @@
 </script>
 
 <script setup lang="ts">
-	import { toRefs } from 'vue'
+	import { computed, toRefs } from 'vue'
 	import { nanoid } from 'nanoid'
 	import { useBemModifiers } from '@/composables/useModifiers'
 	import { useOptions } from '@/composables/useOptions'
@@ -18,7 +18,7 @@
 	const emit = defineEmits(['update:modelValue'])
 
 	// data
-	const id = nanoid()
+	const hasId = computed(() => String(props.id || nanoid()))
 	const { modifiers, disabled } = toRefs(props)
 
 	// options
@@ -69,7 +69,7 @@
 			return
 		}
 
-		let toReturn: string | string[] | Option | Option[] = value
+		let toReturn: string | string[] | Option | Option[] | undefined = value
 		// Check multiple prop, override value with array and remove or add the value
 		if (props.multiple) {
 			// check maxValues prop and block check new values
@@ -90,13 +90,15 @@
 			} else {
 				toReturn = [value as Option]
 			}
+		} else if (props.unselectable && value === props.modelValue) {
+			toReturn = undefined
 		}
 		emit('update:modelValue', toReturn)
 	}
 </script>
 
 <template>
-	<ul :class="dropdownClasses" role="listbox">
+	<ul :id="hasId" :class="dropdownClasses" role="listbox">
 		<li v-if="!options?.length" role="option">
 			<label>
 				{{ labelNoResults }}
@@ -109,15 +111,16 @@
 			:aria-selected="getChecked(option)"
 		>
 			<label
-				:for="`dropdown-${index}-${id}`"
+				:for="`dropdown-${index}-${hasId}`"
 				@click.prevent="onInput(getOptionValue(option))"
 			>
 				<input
-					:id="`dropdown-${index}-${id}`"
+					:id="`dropdown-${index}-${hasId}`"
 					:type="multiple ? 'checkbox' : 'radio'"
 					:value="getOptionValue(option)"
 					:checked="getChecked(option)"
 					:disabled="getDisabled(option)"
+					:name="name"
 					tabindex="-1"
 					aria-hidden="true"
 				/>

package/src/components/VvDropdown/index.ts

@@ -1,6 +1,12 @@
-import { DisabledProps, ModifiersProps, OptionsProps } from '@/props'
+import {
+	DisabledProps,
+	IdNameProps,
+	ModifiersProps,
+	OptionsProps,
+} from '@/props'
 
 export const VvDropdownProps = {
+	...IdNameProps,
 	...OptionsProps,
 	...DisabledProps,
 	...ModifiersProps,
@@ -22,4 +28,8 @@ export const VvDropdownProps = {
 	 * The max number of selected values
 	 */
 	maxValues: [Number, String],
+	/**
+	 * If true the input will be unselectable
+	 */
+	unselectable: { type: Boolean, default: true },
 }

package/src/components/VvInputText/VvInputText.vue

@@ -10,10 +10,11 @@
 		useSlots,
 		ref,
 		toRefs,
-		onMounted,
 		unref,
+		watch,
 		type InputHTMLAttributes,
 	} from 'vue'
+	import { useElementVisibility } from '@vueuse/core'
 	import { nanoid } from 'nanoid'
 	import { isEmpty } from '@/utils/ObjectUtilities'
 	import HintSlotFactory from '@/components/common/HintSlot'
@@ -63,6 +64,14 @@
 	// focus
 	const { focused } = useComponentFocus(input, emit)
 
+	// visibility
+	const isVisible = useElementVisibility(input)
+	watch(isVisible, (newValue) => {
+		if (newValue && props.autofocus) {
+			focused.value = true
+		}
+	})
+
 	// password
 	const showPassword = ref(false)
 	const isPassword = computed(() => props.type === INPUT_TYPES.PASSWORD)
@@ -258,13 +267,6 @@
 		INPUT_TYPES.SEARCH,
 		props,
 	)
-
-	// lifecycle
-	onMounted(() => {
-		if (props.autofocus) {
-			focused.value = true
-		}
-	})
 </script>
 
 <template>

package/src/components/VvSelect/VvSelect.vue

@@ -11,6 +11,7 @@
 		toRefs,
 		useSlots,
 		ref,
+		watch,
 		type SelectHTMLAttributes,
 	} from 'vue'
 	import { nanoid } from 'nanoid'
@@ -22,6 +23,7 @@
 	import VvIcon from '@/components/VvIcon/VvIcon.vue'
 	import HintSlotFactory from '@/components/common/HintSlot'
 	import { VvSelectProps, VvSelectEmits } from '@/components/VvSelect'
+	import { useElementVisibility } from '@vueuse/core'
 
 	// props, emit and slots
 	const props = defineProps(VvSelectProps)
@@ -44,6 +46,8 @@
 		iconPosition,
 		invalid,
 		valid,
+		floating,
+		multiple,
 	} = toRefs(props)
 
 	// computed
@@ -53,6 +57,14 @@
 	// focus
 	const { focused } = useComponentFocus(select, emit)
 
+	// visibility
+	const isVisible = useElementVisibility(select)
+	watch(isVisible, (newValue) => {
+		if (newValue && props.autofocus) {
+			focused.value = true
+		}
+	})
+
 	// icons
 	const { hasIcon, hasIconLeft, hasIconRight } = useComponentIcon(
 		icon,
@@ -91,6 +103,8 @@
 		iconRight: hasIconRight,
 		dirty: isDirty,
 		focus: focused,
+		floating,
+		multiple,
 	})
 
 	// attrs
@@ -132,6 +146,9 @@
 			return props.modelValue
 		},
 		set: (newValue) => {
+			if (Array.isArray(newValue)) {
+				newValue = newValue.filter((item) => item !== undefined)
+			}
 			emit('update:modelValue', newValue)
 		},
 	})
@@ -151,7 +168,12 @@
 				v-model="localModelValue"
 				v-bind="hasAttrs"
 			>
-				<option v-if="placeholder" :value="undefined" disabled>
+				<option
+					v-if="placeholder"
+					:value="undefined"
+					:disabled="!unselectable"
+					:hidden="!unselectable"
+				>
 					{{ placeholder }}
 				</option>
 				<option

package/src/components/VvSelect/index.ts

@@ -10,10 +10,16 @@ import {
 	OptionsProps,
 	IconProps,
 	IdNameProps,
+	FloatingProps,
+	UnselectableProps,
+	AutofocusProps,
+	AutocompleteProps,
 } from '@/props'
 
 export const VvSelectProps = {
 	...IdNameProps,
+	...AutofocusProps,
+	...AutocompleteProps,
 	...TabindexProps,
 	...ValidProps,
 	...InvalidProps,
@@ -24,17 +30,8 @@ export const VvSelectProps = {
 	...ModifiersProps,
 	...OptionsProps,
 	...IconProps,
-	/**
-	 * Global attribute autocomplete
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-autocomplete
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
-	 */
-	autocomplete: { type: String, default: 'off' },
-	/**
-	 * Global attribute autofocus
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
-	 */
-	autofocus: Boolean,
+	...FloatingProps,
+	...UnselectableProps,
 	/**
 	 * 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.

package/src/components/VvTextarea/VvTextarea.vue

@@ -10,7 +10,7 @@
 		useSlots,
 		ref,
 		toRefs,
-		onMounted,
+		watch,
 		type TextareaHTMLAttributes,
 	} from 'vue'
 	import { nanoid } from 'nanoid'
@@ -23,6 +23,7 @@
 	import { useBemModifiers } from '@/composables/useModifiers'
 	import VvIcon from '@/components/VvIcon/VvIcon.vue'
 	import { VvTextareaProps, VvTextareaEvents } from '@/components/VvTextarea'
+	import { useElementVisibility } from '@vueuse/core'
 
 	// props, emit and slots
 	const props = defineProps(VvTextareaProps)
@@ -62,6 +63,14 @@
 	// focus
 	const { focused } = useComponentFocus(textarea, emit)
 
+	// visibility
+	const isVisible = useElementVisibility(textarea)
+	watch(isVisible, (newValue) => {
+		if (newValue && props.autofocus) {
+			focused.value = true
+		}
+	})
+
 	// count
 	const { formatted: countFormatted } = useTextCount(localModelValue, {
 		mode: props.count,
@@ -151,13 +160,6 @@
 	const onClear = () => {
 		localModelValue.value = undefined
 	}
-
-	// lifecycle
-	onMounted(() => {
-		if (props.autofocus) {
-			focused.value = true
-		}
-	})
 </script>
 
 <template>

package/src/composables/group/types/IButtonGroupState.ts

@@ -11,5 +11,5 @@ export default interface IButtonGroupState extends IGroupState {
 	toggle: Ref<boolean>
 	multiple: Ref<boolean>
 	unselectable: Ref<boolean>
-	modifiers: Ref<string | Array<string> | undefined>
+	itemModifiers?: Ref<string | Array<string> | undefined>
 }

package/src/composables/group/types/IGroupState.ts

@@ -4,7 +4,7 @@ import type { Ref } from 'vue'
  * State shared for a group of elements
  */
 export default interface IGroupState {
-	[itemKey: string]: Ref<unknown> | string
+	[itemKey: string]: Ref<unknown> | string | undefined
 	// The key of the group
 	key: string
 }

package/src/composables/group/useInjectedGroupState.ts

@@ -17,9 +17,9 @@ export function useInjectedGroupState<TGroup extends IGroupState>(
 	/**
 	 * Get a group or local property
 	 */
-	function getGroupOrLocalRef<T extends object>(
+	function getGroupOrLocalRef<PropsType extends object>(
 		propName: keyof TGroup,
-		props: T,
+		props: PropsType,
 		emit?: (event: string, ...args: unknown[]) => void,
 	) {
 		if (group?.value) {
@@ -33,7 +33,7 @@ export function useInjectedGroupState<TGroup extends IGroupState>(
 				},
 			})
 		}
-		const propRef = toRef(props, propName as keyof T)
+		const propRef = toRef(props, propName as keyof PropsType)
 		return computed({
 			get() {
 				return propRef.value

package/src/composables/useTextCount.ts

@@ -33,7 +33,7 @@ export function useTextCount(
 			return ''
 		}
 
-		if (options?.mode === 'limit') {
+		if (options?.mode === 'limit' && options?.upperLimit) {
 			return `${length.value} / ${
 				options.lowerLimit ? `${options.lowerLimit}-` : ''
 			}${options.upperLimit}`

package/src/props/index.ts

@@ -109,6 +109,20 @@ export const TabindexProps = {
 	tabindex: { type: [String, Number], default: 0 },
 }
 
+export const FloatingProps = {
+	/**
+	 * If true the label will be floating
+	 */
+	floating: Boolean,
+}
+
+export const UnselectableProps = {
+	/**
+	 * If true the input will be unselectable
+	 */
+	unselectable: { type: Boolean, default: true },
+}
+
 export const IdNameProps = {
 	/**
 	 * Global attribute id
@@ -123,8 +137,26 @@ export const IdNameProps = {
 	name: { type: String, required: true },
 }
 
+export const AutofocusProps = {
+	/**
+	 * Global attribute autofocus
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+	 */
+	autofocus: Boolean,
+}
+
+export const AutocompleteProps = {
+	/**
+	 * Global attribute autocomplete
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+	 */
+	autocomplete: { type: String, default: 'off' },
+}
+
 export const InputTextareaProps = {
 	...IdNameProps,
+	...AutofocusProps,
+	...AutocompleteProps,
 	...TabindexProps,
 	...DisabledProps,
 	...ReadonlyProps,
@@ -136,17 +168,7 @@ export const InputTextareaProps = {
 	...CountProps,
 	...DebounceProps,
 	...IconProps,
-	/**
-	 * Global attribute autofocus
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
-	 */
-	autofocus: Boolean,
-	/**
-	 * Input / Textarea autocomplete
-	 * Hint for for autofill feature
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete
-	 */
-	autocomplete: { type: String, default: 'off' },
+	...FloatingProps,
 	/**
 	 * Input / Textarea minlength
 	 * Minimum length (number of characters) of value
@@ -179,10 +201,6 @@ export const InputTextareaProps = {
 	 * <label> value for the Input / Textarea
 	 */
 	label: String,
-	/**
-	 * If true the label will be floating
-	 */
-	floating: Boolean,
 }
 
 export const CheckboxRadioProps = {