@wikicasa-dev/components 2.2.8-alpha.32 → 2.2.8-alpha.4

package/dist/packages/components/lib/UIKit/Autocomplete/ClearableAutocomplete.vue.js

@@ -1,165 +0,0 @@
-import { defineComponent as K, mergeModels as B, useModel as M, useTemplateRef as m, shallowRef as d, onBeforeMount as L, watch as b, nextTick as W, createBlock as V, openBlock as y, withCtx as C, createElementBlock as I, Fragment as N, renderList as A, renderSlot as c, createElementVNode as u, normalizeClass as f, withDirectives as F, vModelText as H, toDisplayString as G, withModifiers as P, normalizeStyle as X, createTextVNode as j, vShow as q } from "vue";
-import J from "../BaseDropDown.vue.js";
-import '../../../../../assets/BaseDropDown.css';/* empty css                   */
-import Q from "../BaseSelect/SelectItem.vue.js";
-import { debounce as Y } from "@wikicasa-dev/utilities";
-const Z = ["readonly", "placeholder"], _ = ["innerHTML"], ie = /* @__PURE__ */ K({
-  __name: "ClearableAutocomplete",
-  props: /* @__PURE__ */ B({
-    dataCy: {},
-    placeholder: {},
-    enableKeyboardController: { type: Boolean, default: !0 },
-    triggerWrapperClasses: {},
-    inputWrapperClasses: {},
-    inputClasses: {},
-    dropdownClasses: {},
-    clearButton: {},
-    keepState: {},
-    onInputChangeCb: { type: Function },
-    onOptionSelectedCb: { type: [Function, null] }
-  }, {
-    open: { type: Boolean, default: !1 },
-    openModifiers: {},
-    modelValue: { default: null },
-    modelModifiers: {}
-  }),
-  emits: /* @__PURE__ */ B(["click", "update:inputValue", "keydown"], ["update:open", "update:modelValue"]),
-  setup(l, { expose: $, emit: E }) {
-    const r = M(l, "open"), a = M(l, "modelValue"), p = E, O = m("inputRef"), n = d(a.value?.label || ""), v = d(0), k = d(!1), w = d(null), i = d([]), h = m("dropdownRef"), g = m("hiddenSpan"), R = () => {
-      n.value = "", a.value = null, p("update:inputValue", "");
-    }, U = async (t) => {
-      if (p("update:inputValue", t), !t) {
-        i.value = [], r.value = !1;
-        return;
-      }
-      i.value = await w.value?.(t) || [], k.value = !0, r.value = !!i.value.length;
-    }, S = (t = -1) => {
-      const e = i.value[t];
-      !e || e.id === a.value?.id || (l.onOptionSelectedCb?.(e), n.value = e.label, r.value = !1, a.value = e, i.value = []);
-    }, x = () => {
-      O.value?.select();
-    };
-    return L(() => {
-      w.value = Y({ delay: 300 }, l.onInputChangeCb);
-    }), b(
-      [n, () => g.value],
-      ([t, e]) => {
-        e && W(() => {
-          if (!e) return;
-          const o = e.offsetWidth;
-          o !== v.value && (console.log("DEBUG:updating icon positioning", {
-            curInputValue: t
-          }), v.value = o);
-        });
-      },
-      { immediate: !0 }
-    ), b(
-      () => h.value?.selectedIdx,
-      (t) => {
-        const e = t ?? -1;
-        e !== -1 && S(e);
-      }
-    ), b(
-      a,
-      (t, e) => {
-        t === e || t?.label === n.value || (n.value = t?.label || "");
-      },
-      { immediate: !0 }
-    ), $({
-      select: x,
-      getRootElement: () => h.value?.getRootElement()
-    }), (t, e) => (y(), V(J, {
-      ref: "dropdownRef",
-      class: "uikit-clearable-autocomplete",
-      "data-cy": l.dataCy,
-      "dropdown-element": "ul",
-      "dropdown-classes": ["uikit-z-30", l.dropdownClasses],
-      "open-dropdown": r.value,
-      "keep-state": !i.value.length || l.keepState === "closed" ? "closed" : "opened",
-      "activate-keyboard-controller": l.enableKeyboardController,
-      "reset-keyboard-controller": k.value,
-      "onUpdate:resetKeyboardController": e[3] || (e[3] = (o) => k.value = o),
-      "onUpdate:dropdownState": e[4] || (e[4] = (o) => r.value = o)
-    }, {
-      btn_slot: C(() => [
-        u("div", {
-          class: f(["uikit-text-16", l.triggerWrapperClasses]),
-          onClick: e[2] || (e[2] = (o) => p("click", o))
-        }, [
-          c(t.$slots, "left-icon"),
-          u("div", {
-            class: f(["uikit-relative", l.inputWrapperClasses])
-          }, [
-            F(u("input", {
-              ref: "inputRef",
-              "onUpdate:modelValue": [
-                e[0] || (e[0] = (o) => n.value = o),
-                U
-              ],
-              readonly: !!a.value?.label,
-              class: f(["uikit-w-full uikit-border-none focus-visible:uikit-outline-none", l.inputClasses]),
-              style: {
-                font: "inherit",
-                fontSize: "inherit"
-              },
-              placeholder: l.placeholder,
-              onKeydown: e[1] || (e[1] = (o) => p("keydown", o))
-            }, null, 42, Z), [
-              [H, n.value]
-            ]),
-            u("span", {
-              ref_key: "hiddenSpan",
-              ref: g,
-              class: "uikit-invisible uikit-absolute uikit-left-0 uikit-top-0 uikit-whitespace-pre",
-              style: {
-                font: "inherit",
-                fontSize: "inherit"
-              }
-            }, G(n.value), 513),
-            F(u("button", {
-              type: "button",
-              class: f(["uikit-clear-btn uikit-absolute uikit-top-1/2 -uikit-translate-y-1/2 uikit-appearance-none", l.clearButton?.classes]),
-              "aria-label": "Clear input",
-              style: X({
-                left: `${v.value + (l.clearButton?.offset || 10)}px`
-              }),
-              onClick: P(R, ["stop"])
-            }, [
-              c(t.$slots, "clear-icon", {}, () => [
-                e[5] || (e[5] = j("X", -1))
-              ])
-            ], 6), [
-              [q, a.value?.label]
-            ])
-          ], 2),
-          c(t.$slots, "right-icon")
-        ], 2)
-      ]),
-      default: C(({ activeIdx: o, setActiveIdx: z }) => [
-        (y(!0), I(N, null, A(i.value, (T, s) => (y(), V(Q, {
-          key: s,
-          active: o === s,
-          class: "uikit-m-1 uikit-rounded-[5px] uikit-px-5 uikit-py-10px hover:uikit-cursor-pointer",
-          onClick: (D) => S(s),
-          onMouseover: (D) => z(s)
-        }, {
-          default: C(() => [
-            c(t.$slots, "option-content", {
-              option: T,
-              idx: s
-            }, () => [
-              u("span", {
-                innerHTML: T.label
-              }, null, 8, _)
-            ])
-          ]),
-          _: 2
-        }, 1032, ["active", "onClick", "onMouseover"]))), 128))
-      ]),
-      _: 3
-    }, 8, ["data-cy", "dropdown-classes", "open-dropdown", "keep-state", "activate-keyboard-controller", "reset-keyboard-controller"]));
-  }
-});
-export {
-  ie as default
-};