@volverjs/ui-vue 0.0.9-beta.9 → 0.0.9

package/dist/components/VvCombobox/VvCombobox.es.js

@@ -2,9 +2,14 @@ import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, creat
 import { iconExists, Icon, addIcon } from "@iconify/vue";
 import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
 import { nanoid } from "nanoid";
-import { useMutationObserver, useVModel, onClickOutside, useFocusWithin, onKeyStroke, useElementHover, useFocus, useElementVisibility, refDebounced } from "@vueuse/core";
+import { useMutationObserver, useVModel, onClickOutside, useFocusWithin, onKeyStroke, useElementHover, useFocus, useElementVisibility, refDebounced, computedAsync } from "@vueuse/core";
 import mitt from "mitt";
 import { get } from "ts-dot-prop";
+var Strategy = /* @__PURE__ */ ((Strategy2) => {
+  Strategy2["absolute"] = "absolute";
+  Strategy2["fixed"] = "fixed";
+  return Strategy2;
+})(Strategy || {});
 var Side = /* @__PURE__ */ ((Side2) => {
   Side2["left"] = "left";
   Side2["right"] = "right";
@@ -249,19 +254,15 @@ const DropdownProps = {
   placement: {
     type: String,
     default: Side.bottom,
-    validator: (value) => {
-      return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
-    }
+    validator: (value) => Object.values(Side).includes(value) || Object.values(Placement).includes(value)
   },
   /**
    * Dropdown strategy
    */
   strategy: {
     type: String,
-    default: "absolute",
-    validator: (value) => {
-      return ["fixed", "absolute"].includes(value);
-    }
+    default: void 0,
+    validator: (value) => Object.values(Strategy).includes(value)
   },
   /**
    * Dropdown show / hide transition name
@@ -455,6 +456,13 @@ const VvComboboxProps = {
    * Use input text to search on options
    */
   searchable: Boolean,
+  /**
+   * Search function to filter options
+   */
+  searchFunction: {
+    type: Function,
+    default: void 0
+  },
   /**
    * On searchable select is the input search placeholder
    */
@@ -884,7 +892,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         }
       } else if (props.flip) {
         if (typeof props.flip === "boolean") {
-          toReturn.push(flip());
+          toReturn.push(flip({ fallbackStrategy: "initialPlacement" }));
         } else {
           toReturn.push(flip(props.flip));
         }
@@ -936,13 +944,13 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       }
       return toReturn;
     });
-    const { x, y, strategy, middlewareData, placement } = useFloating(
+    const { x, y, middlewareData, placement, strategy } = useFloating(
       referenceEl,
       floatingEl,
       {
         whileElementsMounted: (...args) => {
           return autoUpdate(...args, {
-            animationFrame: props.strategy === "fixed"
+            animationFrame: props.strategy === Strategy.fixed
           });
         },
         placement: computed(() => props.placement),
@@ -951,16 +959,18 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       }
     );
     const dropdownPlacement = computed(() => {
+      var _a;
       if (hasCustomPosition.value) {
         return void 0;
       }
+      const width = props.triggerWidth && referenceEl.value ? `${(_a = referenceEl.value) == null ? void 0 : _a.offsetWidth}px` : void 0;
       return {
         position: strategy.value,
         top: `${y.value ?? 0}px`,
         left: `${x.value ?? 0}px`,
-        maxWidth: maxWidth.value,
+        maxWidth: width ? void 0 : maxWidth.value,
         maxHeight: maxHeight.value,
-        width: props.triggerWidth && referenceEl.value ? `${referenceEl.value.offsetWidth}px` : void 0
+        width
       };
     });
     const side = computed(
@@ -972,10 +982,10 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         return void 0;
       }
       const staticSide = {
-        top: "bottom",
-        right: "left",
-        bottom: "top",
-        left: "right"
+        [Side.top]: Side.bottom,
+        [Side.right]: Side.left,
+        [Side.bottom]: Side.top,
+        [Side.left]: Side.right
       }[side.value];
       return {
         left: ((_a = middlewareData.value.arrow) == null ? void 0 : _a.x) !== void 0 ? `${(_b = middlewareData.value.arrow) == null ? void 0 : _b.x}px` : void 0,
@@ -2467,7 +2477,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const searchText = ref("");
     const debouncedSearchText = refDebounced(
       searchText,
-      Number(props.debounceSearch)
+      computed(() => Number(props.debounceSearch))
     );
     watch(
       debouncedSearchText,
@@ -2490,7 +2500,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       expanded.value = false;
     };
     const onAfterExpand = () => {
-      if (searchable.value) {
+      if (propsDefaults.value.searchable) {
         if (inputSearchEl.value) {
           inputSearchEl.value.focus({
             preventScroll: true
@@ -2499,7 +2509,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const onAfterCollapse = () => {
-      if (searchable.value) {
+      if (propsDefaults.value.searchable) {
         searchText.value = "";
       }
     };
@@ -2513,14 +2523,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       loading,
       valid,
       invalid,
-      floating,
-      searchable
+      floating
     } = toRefs(props);
     const hasId = useUniqueId(id);
     const hasHintId = computed(() => `${hasId.value}-hint`);
     const hasDropdownId = computed(() => `${hasId.value}-dropdown`);
     const hasSearchId = computed(() => `${hasId.value}-search`);
     const hasLabelId = computed(() => `${hasId.value}-label`);
+    const localLoading = ref(false);
+    const isLoading = computed(() => localLoading.value || loading.value);
     const dropdownEl = ref();
     const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
       icon,
@@ -2535,7 +2546,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       modifiers,
       computed(() => ({
         disabled: disabled.value,
-        loading: loading.value,
+        loading: isLoading.value,
         readonly: readonly.value,
         "icon-before": Boolean(hasIconBefore.value),
         "icon-after": Boolean(hasIconAfter.value),
@@ -2553,8 +2564,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       getOptionDisabled,
       getOptionGrouped
     } = useOptions(props);
-    const filteredOptions = computed(() => {
+    const filteredOptions = computedAsync(async () => {
       var _a;
+      if (propsDefaults.value.searchFunction) {
+        localLoading.value = true;
+        const toReturn = await Promise.resolve(
+          propsDefaults.value.searchFunction(
+            debouncedSearchText.value,
+            props.options
+          )
+        );
+        localLoading.value = false;
+        return toReturn;
+      }
       return (_a = props.options) == null ? void 0 : _a.filter((option) => {
         return getOptionLabel(option).toLowerCase().includes(debouncedSearchText.value.toLowerCase().trim());
       });
@@ -2572,12 +2594,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       } else if (props.modelValue) {
         selectedValues = [props.modelValue];
       }
-      const options = props.options.reduce((acc, value) => {
-        if (isGroup(value)) {
-          return [...acc, ...getOptionGrouped(value)];
-        }
-        return [...acc, value];
-      }, []);
+      const options = props.options.reduce(
+        (acc, value) => {
+          if (isGroup(value)) {
+            return [...acc, ...getOptionGrouped(value)];
+          }
+          return [...acc, value];
+        },
+        []
+      );
       return options.filter((option) => {
         if (isGroup(option)) {
           return getOptionGrouped(option).some(
@@ -2631,7 +2656,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       invalid: invalid.value,
       invalidLabel: propsDefaults.value.invalidLabel,
       hintLabel: propsDefaults.value.hintLabel,
-      loading: loading.value,
+      loading: isLoading.value,
       loadingLabel: propsDefaults.value.loadingLabel,
       disabled: disabled.value,
       readonly: readonly.value,
@@ -2659,7 +2684,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       flip: propsDefaults.value.flip,
       autoPlacement: propsDefaults.value.autoPlacement,
       arrow: propsDefaults.value.arrow,
-      autofocusFirst: searchable.value ? true : propsDefaults.value.autofocusFirst,
+      autofocusFirst: propsDefaults.value.searchable ? true : propsDefaults.value.autofocusFirst,
       triggerWidth: propsDefaults.value.triggerWidth,
       modifiers: propsDefaults.value.dropdownModifiers
     }));
@@ -2691,7 +2716,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         _ctx.label ? (openBlock(), createElementBlock("label", {
           key: 0,
           id: unref(hasLabelId),
-          for: unref(searchable) ? unref(hasSearchId) : void 0
+          for: unref(propsDefaults).searchable ? unref(hasSearchId) : void 0
         }, toDisplayString(_ctx.label), 9, _hoisted_2)) : createCommentVNode("", true),
         createElementVNode("div", {
           ref_key: "wrapperEl",
@@ -2743,6 +2768,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             _ctx.unselectable && !unref(readonly) && !unref(disabled) ? (openBlock(), createElementBlock("button", {
                               key: 0,
                               "aria-label": unref(propsDefaults).deselectActionLabel,
+                              type: "button",
                               onClick: withModifiers(($event) => onInput(option), ["stop"])
                             }, [
                               createVNode(_sfc_main$9, { name: "close" })
@@ -2765,87 +2791,90 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
               ])) : createCommentVNode("", true)
             ]),
-            items: withCtx(() => [
-              unref(filteredOptions).length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(filteredOptions), (option, index) => {
-                return openBlock(), createElementBlock(Fragment, { key: index }, [
-                  isGroup(option) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                    createVNode(_sfc_main$5, {
-                      label: unref(getOptionLabel)(option)
-                    }, null, 8, ["label"]),
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getOptionGrouped)(
-                      option
-                    ), (item, i) => {
-                      return openBlock(), createBlock(_sfc_main$6, mergeProps({
-                        disabled: unref(getOptionDisabled)(item),
-                        selected: getOptionSelected(item),
-                        unselectable: _ctx.unselectable,
-                        deselectHintLabel: unref(propsDefaults).deselectHintLabel,
-                        selectHintLabel: unref(propsDefaults).selectHintLabel,
-                        selectedHintLabel: unref(propsDefaults).selectedHintLabel
-                      }, {
-                        key: i,
-                        class: "vv-dropdown-option",
-                        onClickPassive: ($event) => onInput(item)
-                      }), {
-                        default: withCtx(() => [
-                          renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
-                            option,
-                            selectedOptions: unref(selectedOptions),
-                            selected: getOptionSelected(item),
-                            disabled: unref(getOptionDisabled)(item)
-                          })), () => [
-                            createTextVNode(toDisplayString(unref(getOptionLabel)(item)), 1)
-                          ])
-                        ]),
-                        _: 2
-                      }, 1040, ["onClickPassive"]);
-                    }), 128))
-                  ], 64)) : (openBlock(), createBlock(_sfc_main$6, mergeProps({ key: 1 }, {
-                    disabled: unref(getOptionDisabled)(option),
-                    selected: getOptionSelected(option),
-                    unselectable: _ctx.unselectable,
-                    deselectHintLabel: unref(propsDefaults).deselectHintLabel,
-                    selectHintLabel: unref(propsDefaults).selectHintLabel,
-                    selectedHintLabel: unref(propsDefaults).selectedHintLabel
-                  }, {
-                    class: "vv-dropdown-option",
-                    onClickPassive: ($event) => onInput(option)
-                  }), {
-                    default: withCtx(() => [
-                      renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
-                        option,
-                        selectedOptions: unref(selectedOptions),
-                        selected: getOptionSelected(option),
-                        disabled: unref(getOptionDisabled)(option)
-                      })), () => [
-                        createTextVNode(toDisplayString(unref(getOptionLabel)(option)), 1)
-                      ])
-                    ]),
-                    _: 2
-                  }, 1040, ["onClickPassive"]))
-                ], 64);
-              }), 128)) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$6, {
-                key: 1,
-                modifiers: "inert"
-              }, {
-                default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "no-options", {}, () => [
-                    createTextVNode(toDisplayString(unref(propsDefaults).noOptionsLabel), 1)
-                  ])
-                ]),
-                _: 3
-              })) : (openBlock(), createBlock(_sfc_main$6, {
-                key: 2,
-                modifiers: "inert"
-              }, {
-                default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "no-results", {}, () => [
-                    createTextVNode(toDisplayString(unref(propsDefaults).noResultsLabel), 1)
-                  ])
-                ]),
-                _: 3
-              }))
-            ]),
+            items: withCtx(() => {
+              var _a;
+              return [
+                !unref(disabled) && ((_a = unref(filteredOptions)) == null ? void 0 : _a.length) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(filteredOptions), (option, index) => {
+                  return openBlock(), createElementBlock(Fragment, { key: index }, [
+                    isGroup(option) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                      createVNode(_sfc_main$5, {
+                        label: unref(getOptionLabel)(option)
+                      }, null, 8, ["label"]),
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getOptionGrouped)(
+                        option
+                      ), (item, i) => {
+                        return openBlock(), createBlock(_sfc_main$6, mergeProps({
+                          disabled: unref(getOptionDisabled)(item),
+                          selected: getOptionSelected(item),
+                          unselectable: _ctx.unselectable,
+                          deselectHintLabel: unref(propsDefaults).deselectHintLabel,
+                          selectHintLabel: unref(propsDefaults).selectHintLabel,
+                          selectedHintLabel: unref(propsDefaults).selectedHintLabel
+                        }, {
+                          key: i,
+                          class: "vv-dropdown-option",
+                          onClickPassive: ($event) => onInput(item)
+                        }), {
+                          default: withCtx(() => [
+                            renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
+                              option,
+                              selectedOptions: unref(selectedOptions),
+                              selected: getOptionSelected(item),
+                              disabled: unref(getOptionDisabled)(item)
+                            })), () => [
+                              createTextVNode(toDisplayString(unref(getOptionLabel)(item)), 1)
+                            ])
+                          ]),
+                          _: 2
+                        }, 1040, ["onClickPassive"]);
+                      }), 128))
+                    ], 64)) : (openBlock(), createBlock(_sfc_main$6, mergeProps({ key: 1 }, {
+                      disabled: unref(getOptionDisabled)(option),
+                      selected: getOptionSelected(option),
+                      unselectable: _ctx.unselectable,
+                      deselectHintLabel: unref(propsDefaults).deselectHintLabel,
+                      selectHintLabel: unref(propsDefaults).selectHintLabel,
+                      selectedHintLabel: unref(propsDefaults).selectedHintLabel
+                    }, {
+                      class: "vv-dropdown-option",
+                      onClickPassive: ($event) => onInput(option)
+                    }), {
+                      default: withCtx(() => [
+                        renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
+                          option,
+                          selectedOptions: unref(selectedOptions),
+                          selected: getOptionSelected(option),
+                          disabled: unref(getOptionDisabled)(option)
+                        })), () => [
+                          createTextVNode(toDisplayString(unref(getOptionLabel)(option)), 1)
+                        ])
+                      ]),
+                      _: 2
+                    }, 1040, ["onClickPassive"]))
+                  ], 64);
+                }), 128)) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$6, {
+                  key: 1,
+                  modifiers: "inert"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "no-options", {}, () => [
+                      createTextVNode(toDisplayString(unref(propsDefaults).noOptionsLabel), 1)
+                    ])
+                  ]),
+                  _: 3
+                })) : !unref(disabled) ? (openBlock(), createBlock(_sfc_main$6, {
+                  key: 2,
+                  modifiers: "inert"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "no-results", {}, () => [
+                      createTextVNode(toDisplayString(unref(propsDefaults).noResultsLabel), 1)
+                    ])
+                  ]),
+                  _: 3
+                })) : createCommentVNode("", true)
+              ];
+            }),
             after: withCtx(() => [
               renderSlot(_ctx.$slots, "dropdown::after", {}, () => {
                 var _a;
@@ -2861,11 +2890,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 2
           }, [
-            unref(searchable) || _ctx.$slots["dropdown::before"] ? {
+            unref(propsDefaults).searchable || _ctx.$slots["dropdown::before"] ? {
               name: "before",
               fn: withCtx(() => [
                 renderSlot(_ctx.$slots, "dropdown::before"),
-                unref(searchable) ? withDirectives((openBlock(), createElementBlock("input", {
+                unref(propsDefaults).searchable && !unref(disabled) ? withDirectives((openBlock(), createElementBlock("input", {
                   key: 0,
                   id: unref(hasSearchId),
                   ref_key: "inputSearchEl",