@volverjs/ui-vue 0.0.10-beta.4 → 0.0.10-beta.41

package/src/components/VvSelect/VvSelect.vue

@@ -1,247 +1,268 @@
-<script lang="ts">
-	export default {
-		name: 'VvSelect',
-	}
+<script setup lang="ts" generic="T extends string | Option">
+import type { SelectHTMLAttributes } from 'vue'
+import VvIcon from '../VvIcon/VvIcon.vue'
+import HintSlotFactory from '../common/HintSlot'
+import type { Option } from '../../types/generic'
+import { type VvSelectEmits, useVvSelectProps } from '.'
+
+// props, emit and slots
+// WARNING: This is a provisiaonal implementation, it may change in the future
+const props = defineProps(useVvSelectProps<T>())
+const emit = defineEmits<VvSelectEmits>()
+const slots = useSlots()
+
+// props merged with volver defaults (now only for labels)
+const VvSelectProps = useVvSelectProps<T>()
+const propsDefaults = useDefaults<typeof VvSelectProps>(
+    'VvSelect',
+    VvSelectProps,
+    props,
+)
+
+// template refs
+const selectEl = ref()
+
+// hint
+const {
+    HintSlot,
+    hasHintLabelOrSlot,
+    hasInvalidLabelOrSlot,
+    hintSlotScope,
+} = HintSlotFactory(propsDefaults, slots)
+
+// focus
+const { focused } = useComponentFocus(selectEl, emit)
+
+// group
+function isGroup(option: T) {
+    if (typeof option === 'string') {
+        return false
+    }
+    return option.options?.length
+}
+
+// data
+const {
+    id,
+    modifiers,
+    disabled,
+    readonly,
+    loading,
+    icon,
+    iconPosition,
+    invalid,
+    valid,
+    floating,
+    multiple,
+} = toRefs(props)
+const hasId = useUniqueId(id)
+const hasHintId = computed(() => `${hasId.value}-hint`)
+
+// tabindex
+const isDisabledOrReadonly = computed(() => props.disabled || props.readonly)
+const hasTabindex = computed(() => {
+    return isDisabledOrReadonly.value ? -1 : props.tabindex
+})
+
+// modelValue
+const localModelValue = computed({
+    get: () => {
+        return props.modelValue
+    },
+    set: (newValue) => {
+        if (Array.isArray(newValue)) {
+            newValue = newValue.filter(item => item !== undefined)
+            if (newValue.length === 0 && !props.unselectable) {
+                selectEl.value.value = props.modelValue
+                return
+            }
+        }
+        emit('update:modelValue', newValue)
+    },
+})
+const isDirty = computed(() => {
+    if (Array.isArray(localModelValue.value)) {
+        return localModelValue.value.length > 0
+    }
+    return localModelValue.value !== undefined && localModelValue.value !== null
+})
+
+// visibility
+const isVisible = useElementVisibility(selectEl)
+watch(isVisible, (newValue) => {
+    if (newValue && props.autofocus) {
+        focused.value = true
+    }
+})
+// icons
+const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition)
+
+// invalid
+const isInvalid = computed(() => {
+    if (props.invalid === true) {
+        return true
+    }
+    if (props.valid === true) {
+        return false
+    }
+    return undefined
+})
+
+// styles
+const bemCssClasses = useModifiers(
+    'vv-select',
+    modifiers,
+    computed(() => ({
+        'valid': valid.value,
+        'invalid': invalid.value,
+        'loading': loading.value,
+        'disabled': disabled.value,
+        'readonly': readonly.value,
+        'icon-before': hasIconBefore.value !== undefined,
+        'icon-after': hasIconAfter.value !== undefined,
+        'dirty': isDirty.value,
+        'focus': focused.value,
+        'floating': floating.value,
+        'multiple': multiple.value,
+    })),
+)
+
+// options
+const {
+    getOptionLabel,
+    getOptionValue,
+    isOptionDisabled,
+    getOptionGrouped,
+} = useOptions(props)
+
+/**
+ * Auto select the first option if autoOpen is enabled
+ */
+watch(
+    () => props.options,
+    (newValue) => {
+        if (newValue?.length && props.autoselectFirst && !isDirty.value) {
+            const firstOptionValue = getOptionValue(newValue[0])
+            localModelValue.value = props.multiple ? [firstOptionValue] : firstOptionValue
+        }
+    },
+    { immediate: true },
+)
+
+// attrs
+const hasAttrs: SelectHTMLAttributes = computed(() => {
+    return {
+        'name': props.name,
+        'tabindex': hasTabindex.value,
+        'disabled': isDisabledOrReadonly.value,
+        'required': props.required,
+        'size': props.size,
+        'autocomplete': props.autocomplete,
+        'multiple': props.multiple,
+        'aria-invalid': isInvalid.value,
+        'aria-describedby': hasHintLabelOrSlot.value
+            ? hasHintId.value
+            : undefined,
+        'aria-errormessage': hasInvalidLabelOrSlot.value
+            ? hasHintId.value
+            : undefined,
+    }
+})
+
+// slots
+const slotProps = computed(() => ({
+    valid: props.valid,
+    invalid: props.invalid,
+    modelValue: props.modelValue,
+}))
 </script>
 
-<script setup lang="ts">
-	import type { SelectHTMLAttributes } from 'vue'
-	import VvIcon from '../VvIcon/VvIcon.vue'
-	import HintSlotFactory from '../common/HintSlot'
-	import { VvSelectProps, VvSelectEmits } from '.'
-	import type { Option } from '@/types/generic'
-
-	// props, emit and slots
-	const props = defineProps(VvSelectProps)
-	const emit = defineEmits(VvSelectEmits)
-	const slots = useSlots()
-
-	// props merged with volver defaults (now only for labels)
-	const propsDefaults = useDefaults<typeof VvSelectProps>(
-		'VvSelect',
-		VvSelectProps,
-		props,
-	)
-
-	// template refs
-	const select = ref()
-
-	// hint
-	const {
-		HintSlot,
-		hasHintLabelOrSlot,
-		hasInvalidLabelOrSlot,
-		hintSlotScope,
-	} = HintSlotFactory(propsDefaults, slots)
-
-	// data
-	const {
-		id,
-		modifiers,
-		disabled,
-		readonly,
-		loading,
-		icon,
-		iconPosition,
-		invalid,
-		valid,
-		floating,
-		multiple,
-	} = toRefs(props)
-
-	// computed
-	const hasId = useUniqueId(id)
-	const hasHintId = computed(() => `${hasId.value}-hint`)
-
-	// focus
-	const { focused } = useComponentFocus(select, emit)
-
-	// visibility
-	const isVisible = useElementVisibility(select)
-	watch(isVisible, (newValue) => {
-		if (newValue && props.autofocus) {
-			focused.value = true
-		}
-	})
-
-	// icons
-	const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-		icon,
-		iconPosition,
-	)
-
-	// dirty
-	const isDirty = computed(() => !isEmpty(props.modelValue))
-
-	// disabled
-	const isDisabled = computed(() => props.disabled || props.readonly)
-	const hasTabindex = computed(() => {
-		return isDisabled.value ? -1 : props.tabindex
-	})
-
-	// invalid
-	const isInvalid = computed(() => {
-		if (props.invalid === true) {
-			return true
-		}
-		if (props.valid === true) {
-			return false
-		}
-		return undefined
-	})
-
-	// styles
-	const bemCssClasses = useModifiers(
-		'vv-select',
-		modifiers,
-		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(() => {
-		return {
-			name: props.name,
-			tabindex: hasTabindex.value,
-			disabled: isDisabled.value,
-			required: props.required,
-			size: props.size,
-			autocomplete: props.autocomplete,
-			multiple: props.multiple,
-			'aria-invalid': isInvalid.value,
-			'aria-describedby': hasHintLabelOrSlot.value
-				? hasHintId.value
-				: undefined,
-			'aria-errormessage': hasInvalidLabelOrSlot.value
-				? hasHintId.value
-				: undefined,
-		}
-	})
-
-	// slots
-	const slotProps = computed(() => ({
-		valid: props.valid,
-		invalid: props.invalid,
-		modelValue: props.modelValue,
-	}))
-
-	const {
-		getOptionLabel,
-		getOptionValue,
-		isOptionDisabled,
-		getOptionGrouped,
-	} = useOptions(props)
-
-	const localModelValue = computed({
-		get: () => {
-			return props.modelValue
-		},
-		set: (newValue) => {
-			if (Array.isArray(newValue)) {
-				newValue = newValue.filter((item) => item !== undefined)
-			}
-			emit('update:modelValue', newValue)
-		},
-	})
-
-	// Grouped options
-	const isGroup = (option: string | Option) => {
-		if (typeof option === 'string') return false
-		return option && option.options && option.options.length > 0
-	}
+<script lang="ts">
+export default {
+    name: 'VvSelect',
+}
 </script>
 
 <template>
-	<div :class="bemCssClasses">
-		<label v-if="label" :for="hasId">{{ label }}</label>
-		<!-- #region native select -->
-		<div class="vv-select__wrapper">
-			<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"
-				>
-					<option
-						v-if="placeholder"
-						:value="undefined"
-						:disabled="!unselectable"
-						:hidden="!unselectable"
-					>
-						{{ placeholder }}
-					</option>
-					<template v-for="(option, index) in options">
-						<option
-							v-if="!isGroup(option)"
-							:key="index"
-							:disabled="isOptionDisabled(option)"
-							:value="getOptionValue(option)"
-						>
-							{{ getOptionLabel(option) }}
-						</option>
-						<optgroup
-							v-else
-							:key="`group-${index}`"
-							:disabled="isOptionDisabled(option)"
-							:label="getOptionLabel(option)"
-						>
-							<option
-								v-for="(item, i) in getOptionGrouped(option)"
-								:key="`group-${index}-item-${i}`"
-								:disabled="isOptionDisabled(item)"
-								:value="getOptionValue(item)"
-							>
-								{{ getOptionLabel(item) }}
-							</option>
-						</optgroup>
-					</template>
-				</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="hasHintId" class="vv-select__hint">
-			<template v-if="$slots.hint" #hint>
-				<slot name="hint" v-bind="hintSlotScope" />
-			</template>
-			<template v-if="$slots.loading" #loading>
-				<slot name="loading" v-bind="hintSlotScope" />
-			</template>
-			<template v-if="$slots.valid" #valid>
-				<slot name="valid" v-bind="hintSlotScope" />
-			</template>
-			<template v-if="$slots.invalid" #invalid>
-				<slot name="invalid" v-bind="hintSlotScope" />
-			</template>
-		</HintSlot>
-	</div>
+    <div :class="bemCssClasses">
+        <label v-if="label" :for="hasId">{{ label }}</label>
+        <!-- #region native select -->
+        <div class="vv-select__wrapper">
+            <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"
+                    v-bind="hasIconBefore"
+                    class="vv-select__icon"
+                />
+                <select
+                    :id="hasId"
+                    ref="selectEl"
+                    v-bind="hasAttrs"
+                    v-model="localModelValue"
+                >
+                    <option
+                        v-if="placeholder"
+                        :value="undefined"
+                        :disabled="!unselectable"
+                        :hidden="!unselectable"
+                    >
+                        {{ placeholder }}
+                    </option>
+                    <template v-for="(option, index) in options">
+                        <option
+                            v-if="!isGroup(option)"
+                            :key="index"
+                            :disabled="isOptionDisabled(option)"
+                            :value="getOptionValue(option)"
+                        >
+                            {{ getOptionLabel(option) }}
+                        </option>
+                        <optgroup
+                            v-else
+                            :key="`group-${index}`"
+                            :disabled="isOptionDisabled(option)"
+                            :label="getOptionLabel(option)"
+                        >
+                            <option
+                                v-for="(item, i) in getOptionGrouped(option)"
+                                :key="`group-${index}-item-${i}`"
+                                :disabled="isOptionDisabled(item)"
+                                :value="getOptionValue(item)"
+                            >
+                                {{ getOptionLabel(item) }}
+                            </option>
+                        </optgroup>
+                    </template>
+                </select>
+                <VvIcon
+                    v-if="hasIconAfter"
+                    v-bind="hasIconAfter"
+                    class="vv-select__icon vv-select__icon-after"
+                />
+            </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="hasHintId" class="vv-select__hint">
+            <template v-if="$slots.hint" #hint>
+                <slot name="hint" v-bind="hintSlotScope" />
+            </template>
+            <template v-if="$slots.loading" #loading>
+                <slot name="loading" v-bind="hintSlotScope" />
+            </template>
+            <template v-if="$slots.valid" #valid>
+                <slot name="valid" v-bind="hintSlotScope" />
+            </template>
+            <template v-if="$slots.invalid" #invalid>
+                <slot name="invalid" v-bind="hintSlotScope" />
+            </template>
+        </HintSlot>
+    </div>
 </template>

package/src/components/VvSelect/index.ts

@@ -1,69 +1,94 @@
+import type { MaybeElement } from '@vueuse/core'
 import {
-	ValidProps,
-	InvalidProps,
-	HintProps,
-	LoadingProps,
-	DisabledProps,
-	ReadonlyProps,
-	ModifiersProps,
-	TabindexProps,
-	OptionsProps,
-	IconProps,
-	IdNameProps,
-	FloatingLabelProps,
-	UnselectableProps,
-	AutofocusProps,
-	AutocompleteProps,
-	LabelProps,
+    ValidProps,
+    InvalidProps,
+    HintProps,
+    LoadingProps,
+    DisabledProps,
+    ReadonlyProps,
+    ModifiersProps,
+    TabindexProps,
+    OptionsProps,
+    IconProps,
+    IdNameProps,
+    FloatingLabelProps,
+    AutofocusProps,
+    AutocompleteProps,
+    LabelProps,
+    UnselectableProps,
 } from '../../props'
+import type { Option } from '../../types/generic'
+
+export type VvSelectEmits = {
+    'update:modelValue': [any]
+    'focus': [MaybeElement]
+    'blur': [MaybeElement]
+}
 
 export const VvSelectProps = {
-	...IdNameProps,
-	...AutofocusProps,
-	...AutocompleteProps,
-	...TabindexProps,
-	...ValidProps,
-	...InvalidProps,
-	...HintProps,
-	...LoadingProps,
-	...DisabledProps,
-	...ReadonlyProps,
-	...ModifiersProps,
-	...OptionsProps,
-	...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.
-	 * When multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple
-	 */
-	multiple: Boolean,
-	/**
-	 * A Boolean attribute indicating that an option with a non-empty string value must be selected.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required
-	 */
-	required: Boolean,
-	/**
-	 * If the control is presented as a scrolling list box (e.g. when multiple is specified),
-	 * this attribute represents the number of rows in the list that should be visible at one time.
-	 * Browsers are not required to present a select element as a scrolled list box. The default value is 0.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size
-	 */
-	size: [String, Number],
-	/**
-	 * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
-	 */
-	modelValue: {
-		type: [String, Number, Boolean, Object, Array],
-		default: undefined,
-	},
-	/**
-	 * Select placeholder
-	 */
-	placeholder: String,
+    ...IdNameProps,
+    ...AutofocusProps,
+    ...AutocompleteProps,
+    ...TabindexProps,
+    ...ValidProps,
+    ...InvalidProps,
+    ...HintProps,
+    ...LoadingProps,
+    ...DisabledProps,
+    ...ReadonlyProps,
+    ...ModifiersProps,
+    ...OptionsProps,
+    ...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.
+     * When multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple
+     */
+    multiple: Boolean,
+    /**
+     * A Boolean attribute indicating that an option with a non-empty string value must be selected.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required
+     */
+    required: Boolean,
+    /**
+     * If the control is presented as a scrolling list box (e.g. when multiple is specified),
+     * this attribute represents the number of rows in the list that should be visible at one time.
+     * Browsers are not required to present a select element as a scrolled list box. The default value is 0.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size
+     */
+    size: [String, Number],
+    /**
+     * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
+     */
+    modelValue: {
+        type: [String, Number, Boolean, Object, Array],
+        default: undefined,
+    },
+    /**
+     * Select first option automatically
+     */
+    autoselectFirst: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Select placeholder
+     */
+    placeholder: String,
 }
 
-export const VvSelectEmits = ['update:modelValue', 'focus', 'blur']
+// WARNING: This is a provisiaonal implementation, it may change in the future
+export function useVvSelectProps<T extends Option | string>() {
+    return {
+        ...VvSelectProps,
+        options: {
+            ...VvSelectProps.options,
+            type: Array as PropType<T[]>,
+            default: () => [],
+        },
+    }
+}