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

package/dist/components/index.es.js

@@ -2410,18 +2410,6 @@ function resolveFieldData(data, field) {
     return null;
   }
 }
-function findIndexInList(value, list) {
-  let index = -1;
-  if (list) {
-    for (let i = 0; i < list.length; i++) {
-      if (equals(list[i], value)) {
-        index = i;
-        break;
-      }
-    }
-  }
-  return index;
-}
 function contains(value, list) {
   if (value != null && list && list.length) {
     for (const val of list) {
@@ -2435,14 +2423,6 @@ function contains(value, list) {
 function isEmpty(value) {
   return ((value2) => value2 === null || value2 === void 0 || value2 === "" || Array.isArray(value2) && value2.length === 0 || !(value2 instanceof Date) && typeof value2 === "object" && Object.keys(value2).length === 0)(unref(value));
 }
-function removeFromList(value, list) {
-  const indexElToRemove = findIndexInList(value, list);
-  if (indexElToRemove > -1) {
-    return list.filter((el, elIndex) => elIndex !== indexElToRemove);
-  } else {
-    return list;
-  }
-}
 function isString(value) {
   return typeof value === "string" || value instanceof String;
 }
@@ -3188,21 +3168,30 @@ function useOptions(props) {
     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, labelKey.value)
+      labelKey.value ? get(option, labelKey.value) : option
     );
   };
   const getOptionValue = (option) => {
     if (typeof option === "string") {
       return option;
     }
-    return typeof valueKey.value === "function" ? valueKey.value(option) : get(option, valueKey.value);
+    if (typeof valueKey.value === "function") {
+      return valueKey.value(option);
+    }
+    return valueKey.value ? get(option, valueKey.value) : option;
   };
   const isOptionDisabled = (option) => {
     if (typeof option === "string") {
       return false;
     }
-    return typeof disabledKey.value === "function" ? disabledKey.value(option) : get(option, disabledKey.value);
+    if (typeof disabledKey.value === "function") {
+      return disabledKey.value(option);
+    }
+    return disabledKey.value ? get(option, disabledKey.value) : false;
   };
   const getOptionGrouped = (option) => {
     if (typeof option == "string") {
@@ -4045,6 +4034,13 @@ const VvSelectProps = {
     type: [String, Number, Boolean, Object, Array],
     default: void 0
   },
+  /**
+   * Select first option automatically
+   */
+  autoselectFirst: {
+    type: Boolean,
+    default: false
+  },
   /**
    * Select placeholder
    */
@@ -4102,13 +4098,21 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       VvSelectProps2,
       props
     );
-    const select = ref();
+    const selectEl = ref();
     const {
       HintSlot,
       hasHintLabelOrSlot,
       hasInvalidLabelOrSlot,
       hintSlotScope
     } = HintSlotFactory(propsDefaults, slots);
+    const { focused } = useComponentFocus(selectEl, emit);
+    function isGroup(option) {
+      var _a;
+      if (typeof option === "string") {
+        return false;
+      }
+      return (_a = option.options) == null ? void 0 : _a.length;
+    }
     const {
       id,
       modifiers,
@@ -4124,19 +4128,38 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     } = toRefs(props);
     const hasId = useUniqueId(id);
     const hasHintId = computed(() => `${hasId.value}-hint`);
-    const { focused } = useComponentFocus(select, emit);
-    const isVisible = useElementVisibility(select);
+    const isDisabledOrReadonly = computed(() => props.disabled || props.readonly);
+    const hasTabindex = computed(() => {
+      return isDisabledOrReadonly.value ? -1 : props.tabindex;
+    });
+    const localModelValue = computed({
+      get: () => {
+        return props.modelValue;
+      },
+      set: (newValue) => {
+        if (Array.isArray(newValue)) {
+          newValue = newValue.filter((item) => item !== void 0);
+          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 !== void 0 && localModelValue.value !== null;
+    });
+    const isVisible = useElementVisibility(selectEl);
     watch(isVisible, (newValue) => {
       if (newValue && props.autofocus) {
         focused.value = true;
       }
     });
     const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
-    const isDirty = computed(() => !isEmpty(props.modelValue));
-    const isDisabled = computed(() => props.disabled || props.readonly);
-    const hasTabindex = computed(() => {
-      return isDisabled.value ? -1 : props.tabindex;
-    });
     const isInvalid = computed(() => {
       if (props.invalid === true) {
         return true;
@@ -4163,11 +4186,27 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         "multiple": multiple.value
       }))
     );
+    const {
+      getOptionLabel,
+      getOptionValue,
+      isOptionDisabled,
+      getOptionGrouped
+    } = useOptions(props);
+    watch(
+      () => props.options,
+      (newValue) => {
+        if ((newValue == null ? void 0 : newValue.length) && props.autoselectFirst && !isDirty.value) {
+          const firstOptionValue = getOptionValue(newValue[0]);
+          localModelValue.value = props.multiple ? [firstOptionValue] : firstOptionValue;
+        }
+      },
+      { immediate: true }
+    );
     const hasAttrs = computed(() => {
       return {
         "name": props.name,
         "tabindex": hasTabindex.value,
-        "disabled": isDisabled.value,
+        "disabled": isDisabledOrReadonly.value,
         "required": props.required,
         "size": props.size,
         "autocomplete": props.autocomplete,
@@ -4182,30 +4221,6 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       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 !== void 0);
-        }
-        emit("update:modelValue", newValue);
-      }
-    });
-    function isGroup(option) {
-      var _a;
-      if (typeof option === "string") {
-        return false;
-      }
-      return (_a = option.options) == null ? void 0 : _a.length;
-    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
         "div",
@@ -4231,10 +4246,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               )) : createCommentVNode("v-if", true),
               withDirectives(createElementVNode("select", mergeProps({
                 id: unref(hasId),
-                ref_key: "select",
-                ref: select,
+                ref_key: "selectEl",
+                ref: selectEl
+              }, unref(hasAttrs), {
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
-              }, unref(hasAttrs)), [
+              }), [
                 _ctx.placeholder ? (openBlock(), createElementBlock("option", {
                   key: 0,
                   value: void 0,
@@ -4351,7 +4367,6 @@ const VvComboboxProps = {
   ...OptionsProps,
   ...IconProps,
   ...FloatingLabelProps,
-  ...UnselectableProps,
   ...DropdownProps,
   ...LabelProps,
   /**
@@ -4429,10 +4444,22 @@ 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
    */
@@ -4473,6 +4500,13 @@ const VvComboboxProps = {
     type: Boolean,
     default: false
   },
+  /**
+   * Select first option automatically
+   */
+  autoselectFirst: {
+    type: Boolean,
+    default: false
+  },
   /**
    * Keep open dropdown on single select
    */
@@ -4535,22 +4569,16 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       VvComboboxProps2,
       props
     );
-    function isGroup(option) {
-      var _a;
-      if (typeof option === "string") {
-        return false;
-      }
-      return (_a = option.options) == null ? void 0 : _a.length;
-    }
+    const inputEl = ref(null);
+    const inputSearchEl = ref(null);
+    const wrapperEl = ref(null);
+    const dropdownEl = ref(null);
     const {
       HintSlot,
       hasHintLabelOrSlot,
       hasInvalidLabelOrSlot,
       hintSlotScope
     } = HintSlotFactory(propsDefaults, slots);
-    const inputEl = ref(null);
-    const inputSearchEl = ref(null);
-    const wrapperEl = ref(null);
     const { focused } = useComponentFocus(inputEl, emit);
     const { focused: focusedWithin } = useFocusWithin(wrapperEl);
     watch(focused, (newValue) => {
@@ -4581,17 +4609,17 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     });
     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;
     }
@@ -4609,6 +4637,13 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         searchText.value = "";
       }
     }
+    function isGroup(option) {
+      var _a;
+      if (typeof option === "string") {
+        return false;
+      }
+      return (_a = option.options) == null ? void 0 : _a.length;
+    }
     const {
       id,
       icon,
@@ -4626,14 +4661,53 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     const hasDropdownId = computed(() => `${hasId.value}-dropdown`);
     const hasSearchId = computed(() => `${hasId.value}-search`);
     const hasLabelId = computed(() => `${hasId.value}-label`);
+    const isDisabledOrReadonly = computed(() => props.disabled || props.readonly);
+    const hasTabindex = computed(() => {
+      return isDisabledOrReadonly.value ? -1 : props.tabindex;
+    });
+    const localModelValue = computed({
+      get: () => {
+        if (Array.isArray(props.modelValue)) {
+          return new Set(props.modelValue);
+        }
+        return props.modelValue !== void 0 && props.modelValue !== null ? /* @__PURE__ */ new Set([props.modelValue]) : /* @__PURE__ */ new Set();
+      },
+      set: (value) => {
+        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 === void 0) {
+        return Infinity;
+      }
+      return Number(props.maxValues);
+    });
+    const isUnselectable = computed(() => {
+      if (isDisabledOrReadonly.value) {
+        return false;
+      }
+      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;
+    });
     const localLoading = ref(false);
     const isLoading = computed(() => localLoading.value || loading.value);
-    const dropdownEl = ref();
     const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
-    const isDirty = computed(() => !isEmpty(props.modelValue));
-    const hasTabindex = computed(() => {
-      return disabled.value || readonly.value ? -1 : props.tabindex;
-    });
     const bemCssClasses = useModifiers(
       "vv-select",
       modifiers,
@@ -4657,6 +4731,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       getOptionGrouped,
       isOptionDisabled
     } = useOptions(props);
+    function isOptionDisabledOrNotSelectable(option) {
+      return isOptionDisabled(option) || !isSelectable.value && !isOptionSelected(option);
+    }
     const filteredOptions = computedAsync(async () => {
       var _a;
       if (propsDefaults.value.searchFunction) {
@@ -4675,10 +4752,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       });
     });
     function isOptionSelected(option) {
-      if (Array.isArray(props.modelValue)) {
-        return contains(option, props.modelValue) || contains(getOptionValue(option), props.modelValue);
-      }
-      return equals(option, props.modelValue) || equals(getOptionValue(option), props.modelValue);
+      return localModelValue.value.has(getOptionValue(option));
     }
     const selectedOptions = computed(() => {
       const options = props.options.reduce(
@@ -4701,40 +4775,26 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       props.autoOpen ? expand() : toggleExpanded();
     }
     function onInput(option) {
-      var _a;
-      if (props.disabled || props.readonly) {
-        return;
-      }
-      const value = getOptionValue(option);
-      let toReturn = value;
-      if (props.multiple) {
-        if (Array.isArray(props.modelValue)) {
-          const maxValues = Number(props.maxValues);
-          if (props.maxValues !== void 0 && maxValues >= 0 && ((_a = props.modelValue) == null ? void 0 : _a.length) >= maxValues) {
-            if (!contains(value, props.modelValue)) {
-              return;
-            }
-          }
-          toReturn = contains(value, props.modelValue) ? removeFromList(value, props.modelValue) : [...props.modelValue, value];
-        } else {
-          toReturn = [value];
-        }
-      } 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 = void 0;
-        }
+      const isSelected = isOptionSelected(option);
+      if (isSelected && isUnselectable.value) {
+        localModelValue.value.delete(getOptionValue(option));
+      } else if (!isSelected && isSelectable.value) {
+        localModelValue.value.add(getOptionValue(option));
+      }
+      localModelValue.value = new Set(localModelValue.value);
+      if (!props.multiple && !props.keepOpen) {
+        collapse();
       }
-      emit("update:modelValue", toReturn);
     }
+    watch(
+      () => props.options,
+      (newValue) => {
+        if ((newValue == null ? void 0 : newValue.length) && props.autoselectFirst && !isDirty.value) {
+          onInput(newValue[0]);
+        }
+      },
+      { immediate: true }
+    );
     const selectProps = computed(() => ({
       id: hasId.value,
       name: props.name,
@@ -4755,7 +4815,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       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,
@@ -4876,7 +4937,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                                     1
                                     /* TEXT */
                                   ),
-                                  _ctx.unselectable && !unref(readonly) && !unref(disabled) ? (openBlock(), createElementBlock("button", {
+                                  unref(isUnselectable) ? (openBlock(), createElementBlock("button", {
                                     key: 0,
                                     "aria-label": unref(propsDefaults).deselectActionLabel,
                                     type: "button",
@@ -4948,8 +5009,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                                 ), (item, i) => {
                                   return openBlock(), createBlock(_sfc_main$g, mergeProps({ ref_for: true }, {
                                     selected: isOptionSelected(item),
-                                    disabled: unref(isOptionDisabled)(item),
-                                    unselectable: _ctx.unselectable,
+                                    disabled: isOptionDisabledOrNotSelectable(item),
+                                    unselectable: unref(isUnselectable),
                                     deselectHintLabel: unref(propsDefaults).deselectHintLabel,
                                     selectHintLabel: unref(propsDefaults).selectHintLabel,
                                     selectedHintLabel: unref(propsDefaults).selectedHintLabel
@@ -4964,7 +5025,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                                         option,
                                         selectedOptions: unref(selectedOptions),
                                         selected: isOptionSelected(item),
-                                        disabled: unref(isOptionDisabled)(item)
+                                        disabled: isOptionDisabledOrNotSelectable(item)
                                       }), () => [
                                         createTextVNode(
                                           toDisplayString(unref(getOptionLabel)(item)),
@@ -4988,8 +5049,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                             ref_for: true
                           }, {
                             selected: isOptionSelected(option),
-                            disabled: unref(isOptionDisabled)(option),
-                            unselectable: _ctx.unselectable,
+                            disabled: isOptionDisabledOrNotSelectable(option),
+                            unselectable: unref(isUnselectable),
                             deselectHintLabel: unref(propsDefaults).deselectHintLabel,
                             selectHintLabel: unref(propsDefaults).selectHintLabel,
                             selectedHintLabel: unref(propsDefaults).selectedHintLabel
@@ -5003,7 +5064,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                                 option,
                                 selectedOptions: unref(selectedOptions),
                                 selected: isOptionSelected(option),
-                                disabled: unref(isOptionDisabled)(option)
+                                disabled: isOptionDisabledOrNotSelectable(option)
                               }), () => [
                                 createTextVNode(
                                   toDisplayString(unref(getOptionLabel)(option)),