@wikicasa-dev/components 2.2.8-alpha.2 → 2.2.8-alpha.20

package/dist/index.js

@@ -1,89 +1,93 @@
-import { default as m } from "./packages/components/lib/UIKit/Accordion/BaseAccordion.vue.js";
-import { default as u } from "./packages/components/lib/UIKit/Accordion/BaseAccordionBtn.vue.js";
-import { default as i } from "./packages/components/lib/UIKit/Accordion/BaseAccordionContent.vue.js";
-import { default as n } from "./packages/components/lib/UIKit/Accordion/BaseAccordionItem.vue.js";
-import './assets/BaseSnackbar.css';import './assets/BaseModal.css';import './assets/BaseDropDown.css';import './assets/BaseBadge.css';import './assets/BaseAutocomplete.css';import './assets/BaseAlert.css';import './assets/BaseAccordionItem.css';/* empty css                                                               */
-import { default as S } from "./packages/components/lib/UIKit/BaseSelect/SelectItem.vue.js";
-import { default as g } from "./packages/components/lib/UIKit/Checkbox/CheckboxBtn.vue.js";
-import { default as h } from "./packages/components/lib/UIKit/Checkbox/CheckboxGroup.vue.js";
-import { default as T } from "./packages/components/lib/UIKit/Tab/BaseTabView.vue.js";
-import { default as w } from "./packages/components/lib/UIKit/Tab/BaseTab.vue.js";
-import { default as k } from "./packages/components/lib/UIKit/Radio/RadioButton.vue.js";
-import { default as v } from "./packages/components/lib/UIKit/Radio/RadioGroup.vue.js";
-import { default as G } from "./packages/components/lib/UIKit/AccessibleSelect.vue.js";
-import { default as O } from "./packages/components/lib/UIKit/BaseAlert.vue.js";
+import { default as u } from "./packages/components/lib/UIKit/Accordion/BaseAccordion.vue.js";
+import { default as i } from "./packages/components/lib/UIKit/Accordion/BaseAccordionBtn.vue.js";
+import { default as n } from "./packages/components/lib/UIKit/Accordion/BaseAccordionContent.vue.js";
+import { default as S } from "./packages/components/lib/UIKit/Accordion/BaseAccordionItem.vue.js";
+import './assets/BaseSnackbar.css';import './assets/BaseModal.css';import './assets/BaseDropDown.css';import './assets/BaseBadge.css';import './assets/ClearableAutocomplete.css';import './assets/BaseAutocomplete.css';import './assets/BaseAlert.css';import './assets/CheckboxBtn.css';import './assets/BaseAccordionItem.css';/* empty css                                                               */
+import { default as C } from "./packages/components/lib/UIKit/BaseSelect/SelectItem.vue.js";
+import { default as A } from "./packages/components/lib/UIKit/Checkbox/CheckboxBtn.vue.js";
+/* empty css                                                        */
+import { default as T } from "./packages/components/lib/UIKit/Checkbox/CheckboxGroup.vue.js";
+import { default as w } from "./packages/components/lib/UIKit/Tab/BaseTabView.vue.js";
+import { default as k } from "./packages/components/lib/UIKit/Tab/BaseTab.vue.js";
+import { default as v } from "./packages/components/lib/UIKit/Radio/RadioButton.vue.js";
+import { default as G } from "./packages/components/lib/UIKit/Radio/RadioGroup.vue.js";
+import { default as O } from "./packages/components/lib/UIKit/AccessibleSelect.vue.js";
+import { default as P } from "./packages/components/lib/UIKit/BaseAlert.vue.js";
 /* empty css                                             */
-import { default as P } from "./packages/components/lib/UIKit/BaseAutocomplete.vue.js";
+import { default as V } from "./packages/components/lib/UIKit/BaseAutocomplete.vue.js";
 /* empty css                                                    */
-import { default as V } from "./packages/components/lib/UIKit/BaseBadge.vue.js";
+import { default as q } from "./packages/components/lib/UIKit/Autocomplete/ClearableAutocomplete.vue.js";
+/* empty css                                                                      */
+import { default as z } from "./packages/components/lib/UIKit/BaseBadge.vue.js";
 /* empty css                                             */
-import { default as q } from "./packages/components/lib/UIKit/BaseButton.vue.js";
-import { default as z } from "./UIKit/BaseCard.js";
-import { default as H } from "./UIKit/BaseComplexToggle.js";
-import { default as K } from "./packages/components/lib/UIKit/BaseDropDown.vue.js";
+import { default as H } from "./packages/components/lib/UIKit/BaseButton.vue.js";
+import { default as K } from "./UIKit/BaseCard.js";
+import { default as Q } from "./UIKit/BaseComplexToggle.js";
+import { default as X } from "./packages/components/lib/UIKit/BaseDropDown.vue.js";
 /* empty css                                                */
-import { default as Q } from "./UIKit/BaseFloatingLabel.js";
-import { default as X } from "./UIKit/BaseInput.js";
-import { default as Z } from "./packages/components/lib/UIKit/BasePagination.vue.js";
-import { default as $ } from "./UIKit/BaseSlider.js";
-import { default as ae } from "./UIKit/BaseTextarea.js";
-import { default as te } from "./UIKit/BaseToggle.js";
-import { default as fe } from "./UIKit/BaseTooltip.js";
-import { default as le } from "./packages/components/lib/UIKit/BaseUploadFile.vue.js";
-import { default as me } from "./packages/components/lib/UIKit/BaseModal.vue.js";
+import { default as Z } from "./UIKit/BaseFloatingLabel.js";
+import { default as $ } from "./UIKit/BaseInput.js";
+import { default as ae } from "./packages/components/lib/UIKit/BasePagination.vue.js";
+import { default as te } from "./UIKit/BaseSlider.js";
+import { default as fe } from "./UIKit/BaseTextarea.js";
+import { default as le } from "./UIKit/BaseToggle.js";
+import { default as me } from "./UIKit/BaseTooltip.js";
+import { default as ue } from "./packages/components/lib/UIKit/BaseUploadFile.vue.js";
+import { default as ie } from "./packages/components/lib/UIKit/BaseModal.vue.js";
 /* empty css                                             */
-import { default as ue } from "./UIKit/StaticSpinner.js";
-import { default as ie } from "./UIKit/ShimmerLoader/BaseShimmerLoader.js";
-import { default as ne } from "./packages/components/lib/UIKit/ShimmerLoader/ShimmerMultiLine.vue.js";
-import { default as Se } from "./packages/components/lib/chart/DoughnutChart.vue.js";
-import { default as ge } from "./packages/components/lib/chart/LineChart.vue.js";
-import { default as he } from "./UIKit/Slider/SimpleSlider.js";
-import { default as Te } from "./packages/components/lib/UIKit/BaseSnackbar.vue.js";
+import { default as ne } from "./UIKit/StaticSpinner.js";
+import { default as Se } from "./UIKit/ShimmerLoader/BaseShimmerLoader.js";
+import { default as Ce } from "./packages/components/lib/UIKit/ShimmerLoader/ShimmerMultiLine.vue.js";
+import { default as Ae } from "./packages/components/lib/chart/DoughnutChart.vue.js";
+import { default as Te } from "./packages/components/lib/chart/LineChart.vue.js";
+import { default as we } from "./UIKit/Slider/SimpleSlider.js";
+import { default as ke } from "./packages/components/lib/UIKit/BaseSnackbar.vue.js";
 /* empty css                                                */
-import { default as we } from "./packages/components/lib/components/IntersectionObserver/IntersectionObservable.vue.js";
-import { default as ke } from "./packages/components/lib/components/IntersectionObserver/IntersectionObserver.vue.js";
-import { default as ve } from "./components/carousel/SwiperCarousel.js";
-import { default as Ge } from "./components/carousel/SwiperSlide.js";
-import { default as Oe } from "./packages/components/lib/UIKit/BaseBreadcrumb.vue.js";
+import { default as ve } from "./packages/components/lib/components/IntersectionObserver/IntersectionObservable.vue.js";
+import { default as Ge } from "./packages/components/lib/components/IntersectionObserver/IntersectionObserver.vue.js";
+import { default as Oe } from "./components/carousel/SwiperCarousel.js";
+import { default as Pe } from "./components/carousel/SwiperSlide.js";
+import { default as Ve } from "./packages/components/lib/UIKit/BaseBreadcrumb.vue.js";
 export {
-  G as AccessibleSelect,
-  m as BaseAccordion,
-  u as BaseAccordionBtn,
-  i as BaseAccordionContent,
-  n as BaseAccordionItem,
-  O as BaseAlert,
-  P as BaseAutocomplete,
-  V as BaseBadge,
-  Oe as BaseBreadcrumb,
-  q as BaseButton,
-  z as BaseCard,
-  H as BaseComplexToggle,
-  K as BaseDropDown,
-  Q as BaseFloatingLabel,
-  X as BaseInput,
-  me as BaseModal,
-  Z as BasePagination,
-  ie as BaseShimmerLoader,
-  $ as BaseSlider,
-  Te as BaseSnackbar,
-  w as BaseTab,
-  T as BaseTabView,
-  ae as BaseTextarea,
-  te as BaseToggle,
-  fe as BaseTooltip,
-  le as BaseUploadFile,
-  g as CheckboxBtn,
-  h as CheckboxGroup,
-  Se as DoughnutChart,
-  we as IntersectionObservable,
-  ke as IntersectionObserver,
-  ge as LineChart,
-  k as RadioButton,
-  v as RadioGroup,
-  S as SelectItem,
-  ne as ShimmerMultiLine,
-  he as SimpleSlider,
-  ue as StaticSpinner,
-  ve as SwiperCarousel,
-  Ge as SwiperSlide
+  O as AccessibleSelect,
+  u as BaseAccordion,
+  i as BaseAccordionBtn,
+  n as BaseAccordionContent,
+  S as BaseAccordionItem,
+  P as BaseAlert,
+  V as BaseAutocomplete,
+  z as BaseBadge,
+  Ve as BaseBreadcrumb,
+  H as BaseButton,
+  K as BaseCard,
+  Q as BaseComplexToggle,
+  X as BaseDropDown,
+  Z as BaseFloatingLabel,
+  $ as BaseInput,
+  ie as BaseModal,
+  ae as BasePagination,
+  Se as BaseShimmerLoader,
+  te as BaseSlider,
+  ke as BaseSnackbar,
+  k as BaseTab,
+  w as BaseTabView,
+  fe as BaseTextarea,
+  le as BaseToggle,
+  me as BaseTooltip,
+  ue as BaseUploadFile,
+  A as CheckboxBtn,
+  T as CheckboxGroup,
+  q as ClearableAutocomplete,
+  Ae as DoughnutChart,
+  ve as IntersectionObservable,
+  Ge as IntersectionObserver,
+  Te as LineChart,
+  v as RadioButton,
+  G as RadioGroup,
+  C as SelectItem,
+  Ce as ShimmerMultiLine,
+  we as SimpleSlider,
+  ne as StaticSpinner,
+  Oe as SwiperCarousel,
+  Pe as SwiperSlide
 };

package/dist/packages/components/lib/UIKit/Accordion/BaseAccordionItem.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as n, inject as c, createBlock as u, openBlock as d, unref as t, withCtx as s, createVNode as a, renderSlot as r, normalizeClass as l, createTextVNode as k, toDisplayString as f } from "vue";
-import { AccordionItem as h, AccordionHeader as m, AccordionTrigger as C, AccordionContent as w } from "reka-ui";
-import { ArrowIcon as g } from "@wikicasa-dev/svg-icons";
+import { defineComponent as n, inject as c, createBlock as u, openBlock as d, unref as t, withCtx as a, createVNode as s, normalizeClass as r, renderSlot as l, createTextVNode as f, toDisplayString as k } from "vue";
+import { AccordionItem as h, AccordionHeader as m, AccordionTrigger as g, AccordionContent as w } from "reka-ui";
+import { ArrowIcon as C } from "@wikicasa-dev/svg-icons";
 const b = /* @__PURE__ */ n({
   __name: "BaseAccordionItem",
   props: {
@@ -12,7 +12,8 @@ const b = /* @__PURE__ */ n({
     triggerClasses: {},
     headerClasses: {},
     contentClasses: {},
-    arrowClasses: {}
+    arrowClasses: {},
+    headerTag: { default: "h3" }
   },
   setup(e) {
     const o = c("isActive");
@@ -20,29 +21,32 @@ const b = /* @__PURE__ */ n({
       value: e.value,
       "data-cy": e.dataCy
     }, {
-      default: s(() => [
-        a(t(m), {
-          class: "uikit-flex uikit-items-center uikit-justify-between",
-          "header-classes": e.headerClasses
+      default: a(() => [
+        s(t(m), {
+          as: e.headerTag,
+          class: r([
+            e.headerClasses,
+            "uikit-flex uikit-items-center uikit-justify-between"
+          ])
         }, {
-          default: s(() => [
-            r(i.$slots, "header-content"),
-            a(t(C), {
-              class: l([
+          default: a(() => [
+            l(i.$slots, "header-content"),
+            s(t(g), {
+              class: r([
                 e.triggerClasses,
                 {
                   "uikit-inline-flex uikit-cursor-pointer uikit-items-center uikit-justify-between uikit-border-0 uikit-bg-transparent uikit-px-[16px] uikit-py-[16px] uikit-text-left uikit-font-semibold": !i.$slots.trigger,
-                  "uikit-w-full": !i.$slots.headerContent
+                  "uikit-w-full": !i.$slots["header-content"]
                 }
               ])
             }, {
-              default: s(() => [
-                r(i.$slots, "trigger", {
+              default: a(() => [
+                l(i.$slots, "trigger", {
                   active: t(o)(e.value)
                 }, () => [
-                  k(f(e.title) + " ", 1),
-                  a(t(g), {
-                    class: l(["uikit-flex-shrink-0 uikit-transition-transform motion-reduce:uikit-transition-none", [t(o)(e.value) ? "uikit-rotate-180" : "", e.arrowClasses]]),
+                  f(k(e.title) + " ", 1),
+                  s(t(C), {
+                    class: r(["uikit-flex-shrink-0 uikit-transition-transform motion-reduce:uikit-transition-none", [t(o)(e.value) ? "uikit-rotate-180" : "", e.arrowClasses]]),
                     "arrow-classes": e.arrowClasses,
                     width: e.arrowWidth,
                     height: e.arrowWidth
@@ -53,16 +57,18 @@ const b = /* @__PURE__ */ n({
             }, 8, ["class"])
           ]),
           _: 3
-        }, 8, ["header-classes"]),
-        a(t(w), {
-          class: "uikit-base-accordion-item-content uikit-px-[16px]",
-          "content-classes": e.contentClasses
+        }, 8, ["as", "class"]),
+        s(t(w), {
+          class: r([
+            e.contentClasses,
+            "uikit-base-accordion-item-content uikit-px-[16px]"
+          ])
         }, {
-          default: s(() => [
-            r(i.$slots, "default")
+          default: a(() => [
+            l(i.$slots, "default")
           ]),
           _: 3
-        }, 8, ["content-classes"])
+        }, 8, ["class"])
       ]),
       _: 3
     }, 8, ["value", "data-cy"]));

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

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

package/dist/packages/components/lib/UIKit/BaseAutocomplete.vue.js

@@ -31,10 +31,7 @@ const Q = ["innerHTML"], ne = /* @__PURE__ */ x({
   }),
   emits: /* @__PURE__ */ $(["update:dropdownState", "changedValue", "click", "keydown", "keydownEnterPressed"], ["update:modelValue"]),
   setup(t, { expose: S, emit: V }) {
-    const u = F(
-      t,
-      "modelValue"
-    ), r = V, i = d(""), a = d([]), v = d(null), b = d(!1), n = d(!1), C = d(null), B = k(() => a.value.length);
+    const u = F(t, "modelValue"), r = V, i = d(""), a = d([]), v = d(null), b = d(!1), n = d(!1), C = d(null), B = k(() => a.value.length);
     L(() => {
       v.value = q({ delay: 300 }, t.onInputChangeCb);
     });