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

package/src/components/VvCombobox/VvCombobox.vue

@@ -27,13 +27,11 @@ const propsDefaults = useDefaults<typeof VvComboboxProps>(
     props,
 )
 
-// Grouped options
-function isGroup(option: T) {
-    if (typeof option === 'string') {
-        return false
-    }
-    return option.options?.length
-}
+// template ref
+const inputEl: Ref<HTMLElement | null> = ref(null)
+const inputSearchEl: Ref<HTMLElement | null> = ref(null)
+const wrapperEl: Ref<HTMLElement | null> = ref(null)
+const dropdownEl = ref<typeof VvDropdown | null>(null)
 
 // hint slot
 const {
@@ -43,11 +41,6 @@ const {
     hintSlotScope,
 } = HintSlotFactory(propsDefaults, slots)
 
-// template ref
-const inputEl: Ref<HTMLElement | null> = ref(null)
-const inputSearchEl: Ref<HTMLElement | null> = ref(null)
-const wrapperEl: Ref<HTMLElement | null> = ref(null)
-
 // focus
 const { focused } = useComponentFocus(inputEl, emit)
 const { focused: focusedWithin } = useFocusWithin(wrapperEl)
@@ -87,17 +80,17 @@ watch(debouncedSearchText, () => {
 // expanded
 const expanded = ref(false)
 function toggleExpanded() {
-    if (props.disabled || props.readonly)
+    if (isDisabledOrReadonly.value)
         return
     expanded.value = !expanded.value
 }
 function expand() {
-    if (props.disabled || props.readonly || expanded.value)
+    if (isDisabledOrReadonly.value || expanded.value)
         return
     expanded.value = true
 }
 function collapse() {
-    if (props.disabled || props.readonly || !expanded.value)
+    if (isDisabledOrReadonly.value || !expanded.value)
         return
     expanded.value = false
 }
@@ -116,6 +109,14 @@ function onAfterCollapse() {
     }
 }
 
+// group
+function isGroup(option: T) {
+    if (typeof option === 'string') {
+        return false
+    }
+    return option.options?.length
+}
+
 // data
 const {
     id,
@@ -135,24 +136,62 @@ const hasDropdownId = computed(() => `${hasId.value}-dropdown`)
 const hasSearchId = computed(() => `${hasId.value}-search`)
 const hasLabelId = computed(() => `${hasId.value}-label`)
 
+// tabindex
+const isDisabledOrReadonly = computed(() => props.disabled || props.readonly)
+const hasTabindex = computed(() => {
+    return isDisabledOrReadonly.value ? -1 : props.tabindex
+})
+
+// modelValue
+const localModelValue = computed({
+    get: () => {
+        if (Array.isArray(props.modelValue)) {
+            return new Set(props.modelValue)
+        }
+        return props.modelValue !== undefined && props.modelValue !== null ? new Set([props.modelValue]) : new Set()
+    },
+    set: (value: Set<unknown>) => {
+        emit('update:modelValue', props.multiple ? [...value] : [...value].pop())
+    },
+})
+const sizeOfModelValue = computed(() => localModelValue.value.size)
+const isDirty = computed(() => sizeOfModelValue.value > 0)
+const hasMaxValues = computed(() => {
+    if (!props.multiple) {
+        return 1
+    }
+    if (props.maxValues === undefined) {
+        return Infinity
+    }
+    return Number(props.maxValues)
+})
+const isUnselectable = computed(() => {
+    if (isDisabledOrReadonly.value) {
+        return false
+    }
+    // DEPRECATED: Must be removed in the future
+    if (!props.unselectable) {
+        return false
+    }
+    return sizeOfModelValue.value > Number(props.minValues)
+})
+const isSelectable = computed(() => {
+    if (isDisabledOrReadonly.value) {
+        return false
+    }
+    if (!props.multiple) {
+        return true
+    }
+    return sizeOfModelValue.value < hasMaxValues.value
+})
+
 // loading
 const localLoading = ref(false)
 const isLoading = computed(() => localLoading.value || loading.value)
 
-// ref
-const dropdownEl = ref()
-
 // icons
 const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition)
 
-// dirty
-const isDirty = computed(() => !isEmpty(props.modelValue))
-
-// tabindex
-const hasTabindex = computed(() => {
-    return disabled.value || readonly.value ? -1 : props.tabindex
-})
-
 // styles
 const bemCssClasses = useModifiers(
     'vv-select',
@@ -172,6 +211,7 @@ const bemCssClasses = useModifiers(
     })),
 )
 
+// options
 const {
     getOptionLabel,
     getOptionValue,
@@ -179,7 +219,10 @@ const {
     isOptionDisabled,
 } = useOptions(props)
 
-// options filtered by search text
+function isOptionDisabledOrNotSelectable(option: T) {
+    return isOptionDisabled(option) || (!isSelectable.value && !isOptionSelected(option))
+}
+
 const filteredOptions = computedAsync(async () => {
     if (propsDefaults.value.searchFunction) {
         localLoading.value = true
@@ -200,22 +243,11 @@ const filteredOptions = computedAsync(async () => {
 })
 
 /**
- * Check if an option exist into modelValue array (multiple) or is equal to modelValue (single)
+ * Check if an option is selected
  * @param {T} option
  */
 function isOptionSelected(option: T) {
-    if (Array.isArray(props.modelValue)) {
-        // check if contain whole option or option value
-        return (
-            contains(option, props.modelValue)
-            || contains(getOptionValue(option), props.modelValue)
-        )
-    }
-    // check if modelValue is equal to option or option value
-    return (
-        equals(option, props.modelValue)
-        || equals(getOptionValue(option), props.modelValue)
-    )
+    return localModelValue.value.has(getOptionValue(option))
 }
 
 /**
@@ -251,60 +283,37 @@ function onClickInput() {
 }
 
 /**
- * Function triggered on input of checkbox or radio (multple or single mode)
+ * Function triggered on option click
  * @param option {T} option value
  */
 function onInput(option: T) {
-    if (props.disabled || props.readonly) {
-        return
+    const isSelected = isOptionSelected(option)
+    if (isSelected && isUnselectable.value) {
+        localModelValue.value.delete(getOptionValue(option))
     }
-
-    // get option value
-    const value = getOptionValue(option)
-    let toReturn = value
-
-    // check multiple prop, override value with array and remove or add the value
-    if (props.multiple) {
-        // check max-values prop and block check new values
-        if (Array.isArray(props.modelValue)) {
-            const maxValues = Number(props.maxValues)
-            if (
-                props.maxValues !== undefined
-                && maxValues >= 0
-                && props.modelValue?.length >= maxValues
-            ) {
-                if (!contains(value, props.modelValue)) {
-                    // maxValues reached
-                    return
-                }
-            }
-            toReturn = contains(value, props.modelValue)
-                ? removeFromList(value, props.modelValue)
-                : [...props.modelValue, value]
-        }
-        else {
-            toReturn = [value]
-        }
+    else if (!isSelected && isSelectable.value) {
+        localModelValue.value.add(getOptionValue(option))
     }
-    else {
-        if (!props.keepOpen) {
-            collapse()
-        }
-        if (Array.isArray(props.modelValue)) {
-            if (props.unselectable && props.modelValue.includes(value)) {
-                toReturn = []
-            }
-            else {
-                toReturn = [value]
-            }
-        }
-        else if (props.unselectable && value === props.modelValue) {
-            toReturn = undefined
-        }
+    // force reactivity
+    localModelValue.value = new Set(localModelValue.value)
+    if (!props.multiple && !props.keepOpen) {
+        collapse()
     }
-    emit('update:modelValue', toReturn)
 }
 
+/**
+ * Auto select the first option if autoOpen is enabled
+ */
+watch(
+    () => props.options,
+    (newValue) => {
+        if (newValue?.length && props.autoselectFirst && !isDirty.value) {
+            onInput(newValue[0])
+        }
+    },
+    { immediate: true },
+)
+
 const selectProps = computed(() => ({
     id: hasId.value,
     name: props.name,
@@ -325,7 +334,8 @@ const selectProps = computed(() => ({
     icon: propsDefaults.value.icon,
     iconPosition: propsDefaults.value.iconPosition,
     floating: propsDefaults.value.floating,
-    unselectable: propsDefaults.value.unselectable,
+    unselectable: isUnselectable.value,
+    autoselectFirst: propsDefaults.value.autoselectFirst,
     multiple: propsDefaults.value.multiple,
     label: propsDefaults.value.label,
     placeholder: propsDefaults.value.placeholder,
@@ -357,7 +367,7 @@ const slotProps = computed(() => ({
     modelValue: props.modelValue,
 }))
 
-// computed
+// keyboard
 onKeyStroke(
     [' ', 'Enter'],
     (e) => {
@@ -478,9 +488,7 @@ export default {
                                         {{ getOptionLabel(option) }}
                                         <button
                                             v-if="
-                                                unselectable
-                                                    && !readonly
-                                                    && !disabled
+                                                isUnselectable
                                             "
                                             :aria-label="
                                                 propsDefaults.deselectActionLabel
@@ -524,8 +532,8 @@ export default {
                                     )"
                                     v-bind="{
                                         selected: isOptionSelected(item),
-                                        disabled: isOptionDisabled(item),
-                                        unselectable,
+                                        disabled: isOptionDisabledOrNotSelectable(item),
+                                        unselectable: isUnselectable,
                                         deselectHintLabel:
                                             propsDefaults.deselectHintLabel,
                                         selectHintLabel:
@@ -545,7 +553,7 @@ export default {
                                             option,
                                             selectedOptions,
                                             selected: isOptionSelected(item),
-                                            disabled: isOptionDisabled(item),
+                                            disabled: isOptionDisabledOrNotSelectable(item),
                                         }"
                                     >
                                         {{ getOptionLabel(item) }}
@@ -556,8 +564,8 @@ export default {
                                 v-else
                                 v-bind="{
                                     selected: isOptionSelected(option),
-                                    disabled: isOptionDisabled(option),
-                                    unselectable,
+                                    disabled: isOptionDisabledOrNotSelectable(option),
+                                    unselectable: isUnselectable,
                                     deselectHintLabel:
                                         propsDefaults.deselectHintLabel,
                                     selectHintLabel:
@@ -576,7 +584,7 @@ export default {
                                         option,
                                         selectedOptions,
                                         selected: isOptionSelected(option),
-                                        disabled: isOptionDisabled(option),
+                                        disabled: isOptionDisabledOrNotSelectable(option),
                                     }"
                                 >
                                     {{ getOptionLabel(option) }}

package/src/components/VvCombobox/index.ts

@@ -12,7 +12,6 @@ import {
     IconProps,
     TabindexProps,
     FloatingLabelProps,
-    UnselectableProps,
     IdNameProps,
     DropdownProps,
     LabelProps,
@@ -43,7 +42,6 @@ export const VvComboboxProps = {
     ...OptionsProps,
     ...IconProps,
     ...FloatingLabelProps,
-    ...UnselectableProps,
     ...DropdownProps,
     ...LabelProps,
     /**
@@ -126,10 +124,22 @@ export const VvComboboxProps = {
      * Manage modelValue as string[] or object[]
      */
     multiple: Boolean,
+    /**
+     * The min number of selected values
+     */
+    minValues: {
+        type: [Number, String],
+        default: 0,
+    },
     /**
      * The max number of selected values
      */
     maxValues: [Number, String],
+    /**
+     * If true the input will be unselectable
+     * @deprecated use minValues instead
+     */
+    unselectable: { type: Boolean, default: true },
     /**
      * The select label separator visible to the user
      */
@@ -170,6 +180,13 @@ export const VvComboboxProps = {
         type: Boolean,
         default: false,
     },
+    /**
+     * Select first option automatically
+     */
+    autoselectFirst: {
+        type: Boolean,
+        default: false,
+    },
     /**
      * Keep open dropdown on single select
      */

package/src/components/VvSelect/VvSelect.vue

@@ -20,7 +20,7 @@ const propsDefaults = useDefaults<typeof VvSelectProps>(
 )
 
 // template refs
-const select = ref()
+const selectEl = ref()
 
 // hint
 const {
@@ -30,6 +30,17 @@ const {
     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,
@@ -44,34 +55,48 @@ const {
     floating,
     multiple,
 } = toRefs(props)
-
-// computed
 const hasId = useUniqueId(id)
 const hasHintId = computed(() => `${hasId.value}-hint`)
 
-// focus
-const { focused } = useComponentFocus(select, emit)
+// 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(select)
+const isVisible = useElementVisibility(selectEl)
 watch(isVisible, (newValue) => {
     if (newValue && props.autofocus) {
         focused.value = true
     }
 })
-
 // icons
 const { 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) {
@@ -102,12 +127,34 @@ const bemCssClasses = useModifiers(
     })),
 )
 
+// 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': isDisabled.value,
+        'disabled': isDisabledOrReadonly.value,
         'required': props.required,
         'size': props.size,
         'autocomplete': props.autocomplete,
@@ -128,33 +175,6 @@ const slotProps = computed(() => ({
     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
-function isGroup(option: T) {
-    if (typeof option === 'string') {
-        return false
-    }
-    return option.options?.length
-}
 </script>
 
 <script lang="ts">
@@ -180,9 +200,9 @@ export default {
                 />
                 <select
                     :id="hasId"
-                    ref="select"
-                    v-model="localModelValue"
+                    ref="selectEl"
                     v-bind="hasAttrs"
+                    v-model="localModelValue"
                 >
                     <option
                         v-if="placeholder"

package/src/components/VvSelect/index.ts

@@ -12,10 +12,10 @@ import {
     IconProps,
     IdNameProps,
     FloatingLabelProps,
-    UnselectableProps,
     AutofocusProps,
     AutocompleteProps,
     LabelProps,
+    UnselectableProps,
 } from '../../props'
 import type { Option } from '../../types/generic'
 
@@ -68,6 +68,13 @@ export const VvSelectProps = {
         type: [String, Number, Boolean, Object, Array],
         default: undefined,
     },
+    /**
+     * Select first option automatically
+     */
+    autoselectFirst: {
+        type: Boolean,
+        default: false,
+    },
     /**
      * Select placeholder
      */

package/src/composables/useOptions.ts

@@ -8,10 +8,11 @@ export function useOptions(props: any) {
         if (typeof option === 'string') {
             return option
         }
+        if (typeof labelKey.value === 'function') {
+            return labelKey.value(option)
+        }
         return String(
-            typeof labelKey.value === 'function'
-                ? labelKey.value(option)
-                : get(option as object, labelKey.value),
+            labelKey.value ? get(option as object, labelKey.value) : option,
         )
     }
 
@@ -19,20 +20,20 @@ export function useOptions(props: any) {
         if (typeof option === 'string') {
             return option
         }
-
-        return typeof valueKey.value === 'function'
-            ? valueKey.value(option)
-            : get(option as object, valueKey.value)
+        if (typeof valueKey.value === 'function') {
+            return valueKey.value(option)
+        }
+        return valueKey.value ? get(option as object, valueKey.value) : option
     }
 
     const isOptionDisabled = <T extends string | Option>(option: T): boolean => {
         if (typeof option === 'string') {
             return false
         }
-
-        return typeof disabledKey.value === 'function'
-            ? disabledKey.value(option)
-            : get(option as object, disabledKey.value)
+        if (typeof disabledKey.value === 'function') {
+            return disabledKey.value(option)
+        }
+        return disabledKey.value ? get(option as object, disabledKey.value) : false
     }
 
     const getOptionGrouped = <T extends string | Option>(option: T) => {

package/src/stories/Combobox/Combobox.settings.ts

@@ -60,8 +60,8 @@ export const argTypes: ArgTypes = {
     ...OptionsArgTypes,
     ...IconArgTypes,
     ...FloatingLabelArgTypes,
-    ...UnselectableArgTypes,
     ...DropdownArgTypes,
+    ...UnselectableArgTypes,
     'triggerWidth': {
         ...DropdownArgTypes.triggerWidth,
         table: {
@@ -215,9 +215,24 @@ export const argTypes: ArgTypes = {
     },
     'maxValues': {
         description: 'Max number of selected values',
-
         control: {
-            type: 'text',
+            type: 'number',
+        },
+        table: {
+            type: {
+                summary: 'number',
+            },
+        },
+    },
+    'minValues': {
+        description: 'Min number of selected values',
+        control: {
+            type: 'number',
+        },
+        table: {
+            type: {
+                summary: 'number',
+            },
         },
     },
     'separator': {

package/src/stories/Combobox/Combobox.stories.ts

@@ -161,6 +161,14 @@ export const KeepOpen: Story = {
     },
 }
 
+export const autoselectFirst: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        autoselectFirst: true,
+    },
+}
+
 export const Size: Story = {
     ...Default,
     args: {