@volverjs/ui-vue 0.0.10-beta.71 → 0.0.10-beta.73

package/dist/components/index.es.js

@@ -1,4 +1,4 @@
-import { inject, computed, toRef, unref, defineComponent, useAttrs, useId, toRefs, ref, watch, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, onMounted, isRef, provide, watchEffect, reactive, nextTick, Fragment, renderList, createBlock, mergeProps, createSlots, withCtx, getCurrentInstance, resolveComponent, resolveDynamicComponent, mergeDefaults, createCommentVNode, createVNode, TransitionGroup, toHandlers, useSlots, h, withDirectives, vModelCheckbox, Transition, normalizeStyle, vShow, vModelSelect, vModelText, vModelRadio } from "vue";
+import { inject, computed, toRef, unref, defineComponent, useAttrs, useId, toRefs, ref, watch, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, onMounted, isRef, provide, watchEffect, reactive, nextTick, Fragment, renderList, createBlock, mergeProps, createSlots, withCtx, getCurrentInstance, resolveComponent, resolveDynamicComponent, mergeDefaults, createCommentVNode, createVNode, TransitionGroup, toHandlers, useSlots, h, withDirectives, vModelCheckbox, Transition, normalizeStyle, vShow, vModelSelect, withKeys, vModelText, vModelRadio } from "vue";
 import { useVModel, useStorage, useMutationObserver, onClickOutside, useFocusWithin, useElementHover, onKeyStroke, useFocus, useElementVisibility, refDebounced, computedAsync } from "@vueuse/core";
 import mitt from "mitt";
 import { iconLoaded, Icon, addIcon } from "@iconify/vue";
@@ -6,6 +6,22 @@ import { get } from "ts-dot-prop";
 import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
 import Sortable from "vuedraggable";
 import { useIMask } from "vue-imask";
+const ACTION_ICONS = {
+  showPassword: "eye-on",
+  hidePassword: "eye-off",
+  showDatePicker: "calendar",
+  showTimePicker: "time",
+  showColorPicker: "color",
+  clear: "close",
+  add: "add",
+  remove: "trash",
+  edit: "edit",
+  download: "download"
+};
+const VvIconPropsDefaults = {
+  prefix: "normal"
+  /* normal */
+};
 var StorageType = /* @__PURE__ */ ((StorageType2) => {
   StorageType2["local"] = "local";
   StorageType2["session"] = "session";
@@ -206,6 +222,30 @@ const CurrentProps = {
     default: false
   }
 };
+const ClearProps = {
+  /**
+   * If true, the clear button will be shown
+   */
+  showClearAction: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * VvIcon name for clear button
+   * @see VvIcon
+   */
+  iconClear: {
+    type: [String, Object],
+    default: ACTION_ICONS.clear
+  },
+  /**
+   * Label for clear button
+   */
+  labelClear: {
+    type: String,
+    default: "Clear"
+  }
+};
 const PressedProps = {
   /**
    * Whether the item is pressed
@@ -1552,22 +1592,6 @@ function useVvAlert(props, emit) {
     }))
   };
 }
-const ACTION_ICONS = {
-  showPassword: "eye-on",
-  hidePassword: "eye-off",
-  showDatePicker: "calendar",
-  showTimePicker: "time",
-  showColorPicker: "color",
-  clear: "close",
-  add: "add",
-  remove: "trash",
-  edit: "edit",
-  download: "download"
-};
-const VvIconPropsDefaults = {
-  prefix: "normal"
-  /* normal */
-};
 const __default__$s = {
   name: "VvIcon"
 };
@@ -3336,6 +3360,7 @@ const VvComboboxProps = {
   ...DropdownProps,
   ...LabelProps,
   ...RequiredProps,
+  ...ClearProps,
   /**
    * Dropdown show / hide transition name
    */
@@ -3374,6 +3399,10 @@ const VvComboboxProps = {
    * Label for deselected option hint
    */
   deselectHintLabel: { type: String, default: "Press enter to remove" },
+  /**
+   * Label for add new option hint
+   */
+  addOptionHintLabel: { type: String, default: "Press enter to add" },
   /**
    * Label close button
    */
@@ -3382,6 +3411,10 @@ const VvComboboxProps = {
    * Select input placeholder
    */
   placeholder: String,
+  /**
+   * The options to add new options
+   */
+  addable: Boolean,
   /**
    * Use input text to search on options
    */
@@ -3487,21 +3520,6 @@ const VvComboboxProps = {
   focusOnHover: {
     type: Boolean,
     default: true
-  },
-  /**
-   * VvIcon name for clear button
-   * @see VvIcon
-   */
-  iconClear: {
-    type: [String, Object],
-    default: ACTION_ICONS.clear
-  },
-  /**
-   * Label for clear button
-   */
-  labelClear: {
-    type: String,
-    default: "Clear"
   }
 };
 function useVvComboboxProps() {
@@ -3866,27 +3884,6 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     function init(el) {
       referenceEl.value = el;
     }
-    __expose({
-      toggle,
-      show,
-      hide,
-      init,
-      customPosition: hasCustomPosition
-    });
-    watch(expanded, (newValue) => {
-      if (newValue && props.autofocusFirst) {
-        nextTick(() => {
-          const focusableElements = getKeyboardFocusableElements(
-            floatingEl.value
-          );
-          if (focusableElements.length > 0) {
-            focusableElements[0].focus({
-              preventScroll: true
-            });
-          }
-        });
-      }
-    });
     onClickOutside(
       floatingEl,
       () => {
@@ -3933,6 +3930,30 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         (el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden")
       );
     }
+    function focusFirst() {
+      nextTick(() => {
+        const focusableElements = getKeyboardFocusableElements(
+          floatingEl.value
+        );
+        if (focusableElements.length > 0) {
+          focusableElements[0].focus({
+            preventScroll: true
+          });
+        }
+      });
+    }
+    function focusFirstListElement() {
+      nextTick(() => {
+        const focusableElements = getKeyboardFocusableElements(
+          listEl.value
+        );
+        if (focusableElements.length > 0) {
+          focusableElements[0].focus({
+            preventScroll: true
+          });
+        }
+      });
+    }
     function focusNext() {
       nextTick(() => {
         if (focused.value) {
@@ -3981,6 +4002,22 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         }
       });
     }
+    watch(expanded, (newValue) => {
+      if (newValue && props.autofocusFirst) {
+        focusFirst();
+      }
+    });
+    __expose({
+      toggle,
+      show,
+      hide,
+      init,
+      focusFirst,
+      focusFirstListElement,
+      focusNext,
+      focusPrev,
+      customPosition: hasCustomPosition
+    });
     const hovered = useElementHover(floatingEl);
     const { itemRole } = useDropdownProvideItem({
       role,
@@ -4244,6 +4281,7 @@ const VvSelectProps = {
   ...FloatingLabelProps,
   ...UnselectableProps,
   ...LabelProps,
+  ...ClearProps,
   /**
    * 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.
@@ -4280,22 +4318,7 @@ const VvSelectProps = {
   /**
    * Select placeholder
    */
-  placeholder: String,
-  /**
-   * VvIcon name for clear button
-   * @see VvIcon
-   */
-  iconClear: {
-    type: [String, Object],
-    default: ACTION_ICONS.clear
-  },
-  /**
-   * Label for clear button
-   */
-  labelClear: {
-    type: String,
-    default: "Clear"
-  }
+  placeholder: String
 };
 function useVvSelectProps() {
   return {
@@ -4572,7 +4595,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                 /* FULL_PROPS */
               )) : createCommentVNode("v-if", true)
             ]),
-            unref(isUnselectable) ? (openBlock(), createBlock(unref(VvInputClearAction), {
+            unref(isUnselectable) && unref(propsDefaults).showClearAction ? (openBlock(), createBlock(unref(VvInputClearAction), {
               key: 1,
               "input-type": "select",
               label: _ctx.labelClear,
@@ -4657,7 +4680,7 @@ const __default__$b = {
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   ...__default__$b,
   props: useVvComboboxProps(),
-  emits: ["update:modelValue", "update:search", "focus", "blur", "clear", "change:search"],
+  emits: ["update:modelValue", "update:search", "update:options", "focus", "blur", "clear", "change:search"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -4826,12 +4849,33 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         "badges": props.badges
       }))
     );
+    const addedOptions = ref(/* @__PURE__ */ new Set());
     const {
       getOptionLabel,
       getOptionValue,
       getOptionGrouped,
       isOptionDisabled
     } = useOptions(props);
+    const hasOptions = computed(() => {
+      const toReturn = [...props.options, ...addedOptions.value];
+      for (const localModelValueItem of localModelValue.value) {
+        if (!toReturn.some((option) => {
+          const optionValue = getOptionValue(option);
+          if (typeof optionValue === "object") {
+            return JSON.stringify(optionValue) === JSON.stringify(localModelValueItem);
+          }
+          return optionValue === localModelValueItem;
+        })) {
+          toReturn.push(localModelValueItem);
+        }
+      }
+      return toReturn;
+    });
+    watch(addedOptions, (newValue) => {
+      if (newValue.size > 0) {
+        emit("update:options", hasOptions.value);
+      }
+    });
     function isOptionDisabledOrNotSelectable(option) {
       return isOptionDisabled(option) || !isSelectable.value && !isOptionSelected(option);
     }
@@ -4842,13 +4886,13 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         const toReturn = await Promise.resolve(
           propsDefaults.value.searchFunction(
             debouncedSearchText.value,
-            props.options
+            hasOptions.value
           )
         );
         localLoading.value = false;
         return toReturn;
       }
-      return (_a = props.options) == null ? void 0 : _a.filter((option) => {
+      return (_a = hasOptions.value) == null ? void 0 : _a.filter((option) => {
         return getOptionLabel(option).toLowerCase().includes(debouncedSearchText.value.toLowerCase().trim());
       });
     });
@@ -4865,7 +4909,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       return localModelValue.value.includes(optionValue);
     }
     const selectedOptions = computed(() => {
-      const options = props.options.reduce(
+      const toReturn = hasOptions.value.reduce(
         (acc, value) => {
           if (isGroup(value)) {
             return [...acc, ...getOptionGrouped(value)];
@@ -4874,7 +4918,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         },
         []
       );
-      return options.filter((option) => {
+      return toReturn.filter((option) => {
         return isOptionSelected(option);
       });
     });
@@ -4911,7 +4955,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       emit("clear");
     }
     watch(
-      () => props.options,
+      hasOptions,
       (newValue) => {
         if ((newValue == null ? void 0 : newValue.length) && props.autoselectFirst && !isDirty.value) {
           onInput(newValue[0]);
@@ -4980,6 +5024,31 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       },
       { target: inputEl }
     );
+    function onKeyupEnterInputSearch() {
+      var _a, _b;
+      if ((_a = filteredOptions.value) == null ? void 0 : _a.length) {
+        if (filteredOptions.value.length === 1) {
+          onInput(filteredOptions.value[0]);
+          return;
+        }
+        (_b = dropdownEl.value) == null ? void 0 : _b.focusFirstListElement();
+        return;
+      }
+      if (propsDefaults.value.addable) {
+        const trimmedSearch = searchText.value.trim();
+        if (!trimmedSearch) {
+          return;
+        }
+        const exists = hasOptions.value.some(
+          (opt) => getOptionLabel(opt).toLowerCase() === trimmedSearch.toLowerCase()
+        );
+        if (exists) {
+          return;
+        }
+        addedOptions.value.add(trimmedSearch);
+        onInput(trimmedSearch);
+      }
+    }
     return (_ctx, _cache) => {
       return !_ctx.native ? (openBlock(), createElementBlock("div", {
         key: 0,
@@ -5103,7 +5172,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                     /* FULL_PROPS */
                   )) : createCommentVNode("v-if", true)
                 ]),
-                unref(isUnselectable) ? (openBlock(), createBlock(unref(VvInputClearAction), {
+                unref(isUnselectable) && unref(propsDefaults).showClearAction ? (openBlock(), createBlock(unref(VvInputClearAction), {
                   key: 1,
                   "input-type": "select",
                   label: _ctx.labelClear,
@@ -5237,7 +5306,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                     default: withCtx(() => [
                       renderSlot(_ctx.$slots, "no-results", {}, () => [
                         createTextVNode(
-                          toDisplayString(unref(propsDefaults).noResultsLabel),
+                          toDisplayString(unref(propsDefaults).addable ? unref(propsDefaults).addOptionHintLabel : unref(propsDefaults).noResultsLabel),
                           1
                           /* TEXT */
                         )
@@ -5280,8 +5349,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                     spellcheck: "false",
                     type: "search",
                     class: "vv-dropdown__search",
-                    placeholder: unref(propsDefaults).searchPlaceholder
-                  }, null, 8, _hoisted_3$4)), [
+                    placeholder: unref(propsDefaults).searchPlaceholder,
+                    onKeyup: withKeys(onKeyupEnterInputSearch, ["enter"])
+                  }, null, 40, _hoisted_3$4)), [
                     [vModelText, unref(searchText)]
                   ]) : createCommentVNode("v-if", true)
                 ]),
@@ -7429,6 +7499,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("li", _hoisted_1$4, [
+        renderSlot(_ctx.$slots, "before"),
         createVNode(
           _sfc_main$v,
           mergeProps(_ctx.$attrs, {
@@ -7444,7 +7515,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           },
           16
           /* FULL_PROPS */
-        )
+        ),
+        renderSlot(_ctx.$slots, "after")
       ]);
     };
   }