@wikicasa-dev/components 2.1.3 → 2.1.4-alpha.1

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

@@ -1,51 +1,48 @@
-import { defineComponent as d, computed as k, createElementBlock as s, openBlock as i, createElementVNode as n, normalizeClass as a, Fragment as u, renderList as p, renderSlot as c, toDisplayString as h, createVNode as b, unref as f } from "vue";
-import { ArrowIcon as C } from "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.11_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/ArrowIcon.js";
-import "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.11_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
-const g = { "aria-label": "Breadcrumb" }, w = ["data-tooltip"], I = ["href"], v = /* @__PURE__ */ d({
+import { defineComponent as m, computed as k, createElementBlock as i, openBlock as l, createElementVNode as o, normalizeClass as r, Fragment as u, renderList as p, renderSlot as d, toDisplayString as b, createTextVNode as h } from "vue";
+const f = {
+  "aria-label": "Breadcrumb",
+  class: "uikit-text"
+}, C = ["data-tooltip", "data-active"], g = ["href"], B = /* @__PURE__ */ m({
   __name: "BaseBreadcrumb",
   props: {
     items: {},
     listClasses: {},
     listItemClasses: {}
   },
-  setup(r) {
-    const m = k(() => {
+  setup(a) {
+    const c = k(() => {
       let e = 0;
-      const l = [];
-      for (; e < r.items.length; )
-        l.push({ ...r.items[e], idx: e }), e < r.items.length - 1 && l.push({ arrowIcon: !0 }), e++;
-      return l;
+      const t = [];
+      for (; e < a.items.length; )
+        t.push({ ...a.items[e], idx: e }), e < a.items.length - 1 && t.push({ arrowIcon: !0 }), e++;
+      return t;
     });
-    return (e, l) => (i(), s("nav", g, [
-      n("ol", {
-        class: a(["uikit-flex uikit-items-center uikit-gap-10px uikit-p-0", e.listClasses])
+    return (e, t) => (l(), i("nav", f, [
+      o("ol", {
+        class: r(["uikit-gap-10px uikit-flex uikit-items-center uikit-p-0", e.listClasses])
       }, [
-        (i(!0), s(u, null, p(m.value, (t, o) => (i(), s(u, null, [
-          t?.label ? (i(), s("li", {
-            key: `breadcrumb-li-${o}`,
-            class: a(["uikit-list-none", e.listItemClasses]),
-            "data-tooltip": t.dataTooltip
+        (l(!0), i(u, null, p(c.value, (s, n) => (l(), i(u, null, [
+          s?.label ? (l(), i("li", {
+            key: `breadcrumb-li-${n}`,
+            class: r(["uikit-breadcrumb-item uikit-list-none", e.listItemClasses]),
+            "data-tooltip": s.dataTooltip,
+            "data-active": s.active
           }, [
-            c(e.$slots, "item", {
-              item: t
+            d(e.$slots, "item", {
+              item: s
             }, () => [
-              n("a", {
-                class: a(["uikit-text-w-black uikit-no-underline", { "uikit-text-w-primary": t.active }]),
-                href: t.link
-              }, h(t.label), 11, I)
+              o("a", {
+                class: "uikit-no-underline [font-size:inherit]",
+                href: s.link
+              }, b(s.label), 9, g)
             ])
-          ], 10, w)) : (i(), s("li", {
-            key: `breadcrumb-li-no-label-${o}`,
-            class: a(["uikit-list-none", e.listItemClasses]),
+          ], 10, C)) : (l(), i("li", {
+            key: `breadcrumb-li-no-label-${n}`,
+            class: r(["uikit-list-none uikit-px-sm", e.listItemClasses]),
             "aria-hidden": "true"
           }, [
-            c(e.$slots, "separator", {}, () => [
-              b(f(C), {
-                class: "-uikit-rotate-90",
-                "stroke-color": "#222",
-                width: 10,
-                height: 10
-              })
+            d(e.$slots, "separator", {}, () => [
+              t[0] || (t[0] = h(" / "))
             ])
           ], 2))
         ], 64))), 256))
@@ -54,5 +51,5 @@ const g = { "aria-label": "Breadcrumb" }, w = ["data-tooltip"], I = ["href"], v
   }
 });
 export {
-  v as default
+  B as default
 };

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

@@ -1,10 +1,11 @@
-import { defineComponent as y, ref as b, computed as l, createElementBlock as f, openBlock as v, withModifiers as s, normalizeStyle as B, normalizeClass as C, renderSlot as u, createVNode as c } from "vue";
-import M from "../../../../UIKit/StaticSpinner.js";
-const z = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "title"], S = /* @__PURE__ */ y({
+import { defineComponent as f, ref as c, computed as s, createElementBlock as v, openBlock as g, withModifiers as l, normalizeStyle as w, normalizeClass as B, renderSlot as r, createVNode as h } from "vue";
+import C from "../../../../UIKit/StaticSpinner.js";
+const M = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "title"], S = /* @__PURE__ */ f({
   __name: "BaseButton",
   props: {
-    btnClass: { default: "uikit-btn-w-primary" },
+    btnClass: { default: "primary" },
     outlined: { type: Boolean },
+    rounded: { type: Boolean },
     size: {},
     withMinWidth: { type: Boolean, default: !0 },
     keepActive: { type: Boolean },
@@ -16,49 +17,68 @@ const z = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "ti
     type: {}
   },
   emits: ["mouseover", "mouseout", "click"],
-  setup(o, { emit: r }) {
-    const a = r, n = b(!1), d = l(() => o.size ? `uikit-btn-${o.size}` : ""), m = l(() => o.outlined ? "uikit-btn-outline" : ""), p = () => {
-      n.value = !0;
-    }, k = () => {
-      n.value = !1;
+  setup(a, { emit: u }) {
+    const n = u, d = {
+      primary: "uikit-btn-w-primary",
+      secondary: "uikit-btn-w-secondary",
+      ternary: "uikit-btn-w-ternary",
+      quaternary: "uikit-btn-w-quaternary",
+      warning: "uikit-btn-w-warning",
+      danger: "uikit-btn-w-danger",
+      transparent: "uikit-btn-transparent",
+      light: "uikit-btn-light",
+      "show-more": "uikit-btn-show-more",
+      "multi-selection": "uikit-btn-multi-selection",
+      "single-selection": "uikit-btn-single-selection",
+      facile: "uikit-btn-facile"
+    }, k = {
+      sm: "uikit-btn-sm",
+      lg: "uikit-btn-lg"
+    }, o = c(!1), b = s(
+      () => k[a.size] || "uikit-btn-md"
+    ), m = s(() => a.outlined ? "uikit-btn-outline" : ""), p = () => {
+      o.value = !0;
+    }, y = () => {
+      o.value = !1;
     };
-    return (e, t) => (v(), f("button", {
-      id: e.$attrs.id,
-      "data-cy": e.dataCy,
-      type: e.type,
-      class: C([
-        "uikit-btn",
+    return (t, e) => (g(), v("button", {
+      id: t.$attrs.id,
+      "data-cy": t.dataCy,
+      type: t.type,
+      class: B([
+        "uikit-shadow-surface uikit-btn",
         {
-          "uikit-btn-empty": !e.withMinWidth,
-          "active uikit-font-medium": e.keepActive,
-          "uikit-flex uikit-items-center uikit-justify-center": e.isLoading
+          "uikit-btn-empty": !t.withMinWidth,
+          "active uikit-font-medium": t.keepActive,
+          "uikit-flex uikit-items-center uikit-justify-center": t.isLoading
         },
-        e.btnClass,
-        d.value,
-        m.value
+        d[t.btnClass],
+        b.value,
+        m.value,
+        { "uikit-btn-rounded": t.rounded }
       ]),
-      style: B(e.$attrs.style),
-      "data-active": e.keepActive,
-      disabled: e.isLoading || e.disabled,
-      "aria-label": e.ariaLabel,
-      title: e.title,
-      onMouseover: t[0] || (t[0] = s((i) => {
-        p(), a("mouseover", i);
+      style: w(t.$attrs.style),
+      "data-active": t.keepActive,
+      disabled: t.isLoading || t.disabled,
+      "aria-label": t.ariaLabel,
+      title: t.title,
+      onMouseover: e[0] || (e[0] = l((i) => {
+        p(), n("mouseover", i);
       }, ["stop"])),
-      onMouseout: t[1] || (t[1] = s((i) => {
-        k(), a("mouseout", i);
+      onMouseout: e[1] || (e[1] = l((i) => {
+        y(), n("mouseout", i);
       }, ["stop"])),
-      onClick: t[2] || (t[2] = (i) => a("click", i))
+      onClick: e[2] || (e[2] = (i) => n("click", i))
     }, [
-      e.isLoading ? u(e.$slots, "spinner", { key: 1 }, () => [
-        c(M, {
-          "stroke-color": e.outlined ? "#ACB4C3" : "#fff"
+      t.isLoading ? r(t.$slots, "spinner", { key: 1 }, () => [
+        h(C, {
+          "stroke-color": t.outlined ? "#ACB4C3" : "#fff"
         }, null, 8, ["stroke-color"])
-      ]) : u(e.$slots, "default", {
+      ]) : r(t.$slots, "default", {
         key: 0,
-        hover: n.value
+        hover: o.value
       })
-    ], 46, z));
+    ], 46, M));
   }
 });
 export {

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

@@ -0,0 +1,38 @@
+import { defineComponent as a, useModel as d, createBlock as s, openBlock as i, unref as o, withCtx as k, renderSlot as m, createElementBlock as n, createCommentVNode as f, createVNode as c } from "vue";
+import { Toggle as p } from "reka-ui";
+import { CloseIcon as x } from "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/CloseIcon.js";
+import "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
+const b = {
+  key: 0,
+  class: "uikit-box-border uikit-flex uikit-size-sm uikit-items-center uikit-justify-center uikit-rounded-full uikit-bg-w-blue uikit-text-10 uikit-text-white"
+}, C = /* @__PURE__ */ a({
+  __name: "BaseChip",
+  props: {
+    modelValue: { default: !1 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(u) {
+    const e = d(u, "modelValue");
+    return (l, t) => (i(), s(o(p), {
+      modelValue: e.value,
+      "onUpdate:modelValue": t[0] || (t[0] = (r) => e.value = r),
+      class: "uikit-flex uikit-h-xl uikit-items-center uikit-gap-x-2xs uikit-rounded-2xs uikit-border uikit-border-solid uikit-border-w-lightgray uikit-bg-white uikit-px-sm uikit-py-xs uikit-text-12 hover:uikit-border-[#385CF6] data-[state=on]:uikit-border-[#385CF6] data-[state=on]:uikit-bg-w-cultured data-[state=on]:uikit-font-medium data-[state=on]:uikit-text-w-blue"
+    }, {
+      default: k(() => [
+        m(l.$slots, "default"),
+        e.value ? (i(), n("span", b, [
+          c(o(x), {
+            width: 6,
+            height: 6,
+            "stroke-color": "#fff"
+          })
+        ])) : f("", !0)
+      ]),
+      _: 3
+    }, 8, ["modelValue"]));
+  }
+});
+export {
+  C as default
+};

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

@@ -0,0 +1,54 @@
+import { defineComponent as s, mergeModels as p, useModel as d, createBlock as f, openBlock as m, unref as t, withCtx as i, createVNode as n, renderSlot as l, normalizeClass as k } from "vue";
+import { ArrowFilledIcon as c } from "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/ArrowFilledIcon.js";
+import "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
+import { CollapsibleRoot as b, CollapsibleTrigger as g, CollapsibleContent as C } from "reka-ui";
+const M = /* @__PURE__ */ s({
+  __name: "BaseCollapse",
+  props: /* @__PURE__ */ p({
+    unmountOnHide: { type: Boolean, default: !0 }
+  }, {
+    open: { default: !1 },
+    openModifiers: {}
+  }),
+  emits: ["update:open"],
+  setup(a) {
+    const o = d(a, "open");
+    return (e, r) => (m(), f(t(b), {
+      open: o.value,
+      "onUpdate:open": r[0] || (r[0] = (u) => o.value = u),
+      "unmount-on-hide": e.unmountOnHide
+    }, {
+      default: i(() => [
+        n(t(g), { class: "uikit-inline-flex uikit-cursor-pointer uikit-appearance-none uikit-items-center uikit-gap-xs uikit-bg-transparent uikit-p-0 uikit-font-semibold uikit-text-w-blue" }, {
+          default: i(() => [
+            l(e.$slots, "label", {}, void 0, !0),
+            l(e.$slots, "trigger", {}, () => [
+              n(t(c), {
+                "fill-color": "#2b5dff",
+                width: 14,
+                height: 16,
+                class: k([
+                  "uikit-pointer-events-none uikit-transition-transform uikit-will-change-transform",
+                  {
+                    "uikit-rotate-180": o.value
+                  }
+                ])
+              }, null, 8, ["class"])
+            ], !0)
+          ]),
+          _: 3
+        }),
+        n(t(C), { class: "collapsible-content" }, {
+          default: i(() => [
+            l(e.$slots, "default", {}, void 0, !0)
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }, 8, ["open", "unmount-on-hide"]));
+  }
+});
+export {
+  M as default
+};

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

@@ -1,13 +1,13 @@
-import { defineComponent as v, mergeModels as T, useModel as C, computed as c, createElementBlock as n, openBlock as r, normalizeClass as o, createElementVNode as t, withModifiers as f, renderSlot as m, createCommentVNode as k } from "vue";
-const y = ["id", "data-cy"], $ = ["data-btn-bg-color", "data-cy"], L = ["src", "alt"], M = ["innerHTML"], z = ["data-btn-bg-color", "data-cy"], B = ["src", "alt"], V = ["innerHTML"], j = /* @__PURE__ */ v({
+import { defineComponent as v, mergeModels as T, useModel as y, computed as c, createElementBlock as r, openBlock as g, normalizeClass as o, createElementVNode as t, withModifiers as f, renderSlot as m, createCommentVNode as k } from "vue";
+const C = ["id", "data-cy"], $ = ["data-btn-bg-color", "data-cy"], L = ["src", "alt"], M = ["innerHTML"], z = ["data-btn-bg-color", "data-cy"], B = ["src", "alt"], V = ["innerHTML"], j = /* @__PURE__ */ v({
   __name: "BaseComplexToggle",
   props: /* @__PURE__ */ T({
     labels: {},
     type: { default: "full" },
     mode: { default: "" },
-    btnBgColor: { default: "uikit-bg-w-lavender" },
+    btnBgColor: { default: "uikit-bg-w-gray" },
     btnClasses: {},
-    borderContainerColor: { default: "uikit-border-w-secondary" },
+    borderContainerColor: { default: "uikit-border-w-gray" },
     size: { default: "" }
   }, {
     modelValue: {
@@ -16,8 +16,8 @@ const y = ["id", "data-cy"], $ = ["data-btn-bg-color", "data-cy"], L = ["src", "
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(g) {
-    const l = g, a = C(g, "modelValue"), s = () => {
+  setup(n) {
+    const l = n, a = y(n, "modelValue"), s = () => {
       a.value = l.labels.leftToggle;
     }, u = () => {
       a.value = l.labels.rightToggle;
@@ -34,7 +34,7 @@ const y = ["id", "data-cy"], $ = ["data-btn-bg-color", "data-cy"], L = ["src", "
       s();
     })();
     const b = (e) => a.value?.label === e.label, d = c(() => b(l.labels.leftToggle)), p = c(() => b(l.labels.rightToggle));
-    return (e, i) => (r(), n("div", {
+    return (e, i) => (g(), r("div", {
       id: e.$attrs.id || "",
       "data-cy": e.$attrs["data-cy"] || "",
       class: o(["base-complex-toggle uikit-relative uikit-flex uikit-justify-center uikit-p-0", [e.mode, e.borderContainerColor, e.size]])
@@ -50,9 +50,9 @@ const y = ["id", "data-cy"], $ = ["data-btn-bg-color", "data-cy"], L = ["src", "
         onClick: i[0] || (i[0] = f((h) => s(), ["stop"]))
       }, [
         m(e.$slots, "left_icon", {}, () => [
-          e.labels.leftToggle.icon ? (r(), n("img", {
+          e.labels.leftToggle.icon ? (g(), r("img", {
             key: 0,
-            class: "base-complex-toggle-icon uikit-relative uikit-z-10 uikit-mr-10px",
+            class: "base-complex-toggle-icon uikit-mr-10px uikit-relative uikit-z-10",
             src: e.labels.leftToggle.icon.src,
             alt: e.labels.leftToggle.icon.alt,
             width: "15",
@@ -75,9 +75,9 @@ const y = ["id", "data-cy"], $ = ["data-btn-bg-color", "data-cy"], L = ["src", "
         onClick: i[1] || (i[1] = f((h) => u(), ["stop"]))
       }, [
         m(e.$slots, "right_icon", {}, () => [
-          e.labels.rightToggle.icon ? (r(), n("img", {
+          e.labels.rightToggle.icon ? (g(), r("img", {
             key: 0,
-            class: "base-complex-toggle-icon uikit-relative uikit-z-10 uikit-mr-10px",
+            class: "base-complex-toggle-icon uikit-mr-10px uikit-relative uikit-z-10",
             src: e.labels.rightToggle.icon.src,
             alt: e.labels.rightToggle.icon.alt,
             width: "15",
@@ -98,7 +98,7 @@ const y = ["id", "data-cy"], $ = ["data-btn-bg-color", "data-cy"], L = ["src", "
           e.btnClasses
         ]])
       }, null, 2)
-    ], 10, y));
+    ], 10, C));
   }
 });
 export {

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

@@ -1,12 +1,12 @@
-import { defineComponent as L, mergeModels as b, useId as M, useModel as E, ref as h, computed as O, useTemplateRef as W, watch as n, onBeforeMount as $, onMounted as H, onUnmounted as K, createElementBlock as N, openBlock as u, withModifiers as C, normalizeClass as i, renderSlot as g, createBlock as y, createVNode as T, unref as l, withCtx as D, createElementVNode as V, createCommentVNode as q, resolveDynamicComponent as z } from "vue";
+import { defineComponent as L, mergeModels as h, useId as M, useModel as E, ref as y, computed as H, useTemplateRef as O, watch as d, onBeforeMount as W, onMounted as $, onUnmounted as K, createElementBlock as N, openBlock as p, withModifiers as C, normalizeClass as l, renderSlot as g, createBlock as D, createVNode as T, unref as i, withCtx as S, createElementVNode as V, createCommentVNode as q, resolveDynamicComponent as z } from "vue";
 import R from "./BaseButton.vue.js";
-import { ArrowIcon as U } from "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.11_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/ArrowIcon.js";
-import "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.11_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
+import { ArrowIcon as U } from "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/ArrowIcon.js";
+import "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
 import { useKeyboardController as j } from "../../../../node_modules/.pnpm/@wikicasa-dev_vue-composables@0.0.23_typescript@5.8.3/node_modules/@wikicasa-dev/vue-composables/dist/useKeyboardController.js";
-const F = ["innerHTML"], Z = /* @__PURE__ */ L({
+const x = ["innerHTML"], Y = /* @__PURE__ */ L({
   inheritAttrs: !1,
   __name: "BaseDropDown",
-  props: /* @__PURE__ */ b({
+  props: /* @__PURE__ */ h({
     dropdownClasses: { default: "" },
     btnClasses: { default: "" },
     withArrowIcon: { type: Boolean, default: !1 },
@@ -21,6 +21,7 @@ const F = ["innerHTML"], Z = /* @__PURE__ */ L({
     dropdownElement: { default: "div" },
     keepState: { default: "" },
     activateKeyboardController: { type: Boolean, default: !0 },
+    disableSpaceHandler: { type: Boolean, default: !1 },
     dataCy: { default: "" }
   }, {
     toggleDropdown: {
@@ -28,14 +29,15 @@ const F = ["innerHTML"], Z = /* @__PURE__ */ L({
     },
     toggleDropdownModifiers: {}
   }),
-  emits: /* @__PURE__ */ b(["click", "update:dropdownState"], ["update:toggleDropdown"]),
-  setup(p, { emit: B }) {
-    const o = p, c = M(), f = B, k = E(p, "toggleDropdown"), t = h(!1), d = h([]), I = O(() => d.value.length), w = W("dropdown"), { activeIdx: m, selectedIdx: r } = j({
-      optionsLength: I,
+  emits: /* @__PURE__ */ h(["click", "update:dropdownState", "update:selectedIdx"], ["update:toggleDropdown"]),
+  setup(c, { emit: I }) {
+    const o = c, f = M(), n = I, k = E(c, "toggleDropdown"), t = y(!1), r = y([]), B = H(() => r.value.length), w = O("dropdown"), { activeIdx: m, selectedIdx: s } = j({
+      optionsLength: B,
       isDropdownOpen: t,
-      activate: o.activateKeyboardController
+      activate: o.activateKeyboardController,
+      disableSpaceHandler: o.disableSpaceHandler
     });
-    n(
+    d(
       () => o.openDropdown,
       (e) => {
         t.value = e;
@@ -43,57 +45,58 @@ const F = ["innerHTML"], Z = /* @__PURE__ */ L({
       {
         immediate: !0
       }
-    ), n(t, (e) => {
-      f("update:dropdownState", e);
-    }), n(k, (e) => {
+    ), d(t, (e) => {
+      n("update:dropdownState", e);
+    }), d(k, (e) => {
       e && (t.value = !t.value, k.value = !1);
-    }), n(r, (e) => {
-      e !== -1 && d.value[e].querySelector("a")?.click();
+    }), d(s, (e) => {
+      e !== -1 && (r.value[e].querySelector("a")?.click(), n("update:selectedIdx", e));
     });
     const v = () => {
       t.value = !1;
-    }, s = () => {
+    }, u = () => {
       o.keepState === "closed" && !t.value || o.keepState === "opened" && t.value || (t.value = !t.value);
-    }, S = (e) => {
+    }, b = (e) => {
       e != null && (m.value = e);
     }, A = (e) => {
-      e != null && (r.value = e);
+      e != null && (s.value = e);
     };
-    return $(() => {
+    return W(() => {
       o.closeWhenClickedOutside && document.body.addEventListener("click", v);
-    }), H(() => {
-      w.value && (d.value = w.value.children || []);
+    }), $(() => {
+      w.value && (r.value = w.value.children || []);
     }), K(() => {
       o.closeWhenClickedOutside && document.body.removeEventListener("click", v);
-    }), (e, a) => (u(), N("div", {
-      class: i(["uikit-relative uikit-block", e.$attrs.class]),
-      onClick: a[1] || (a[1] = C((G) => {
-        f("click"), s();
+    }), (e, a) => (p(), N("div", {
+      class: l(["uikit-relative uikit-block", e.$attrs.class]),
+      onClick: a[1] || (a[1] = C((F) => {
+        n("click"), u();
       }, ["stop"]))
     }, [
       g(e.$slots, "btn_slot", {
-        toggleDropdown: s,
-        isOpen: t.value
+        toggleDropdown: u,
+        isOpen: t.value,
+        setActiveIdx: b
       }, () => [
         T(R, {
-          id: l(c),
+          id: i(f),
           type: "button",
           "data-cy": e.dataCy,
-          class: i([
+          class: l([
             "!uikit-flex uikit-w-full uikit-items-center uikit-truncate",
             e.btnClasses
           ]),
           "aria-expanded": t.value,
-          "btn-class": "uikit-btn-single-selection"
+          "btn-class": "single-selection"
         }, {
-          default: D(() => [
+          default: S(() => [
             V("span", {
-              class: i(["uikit-mr-5px", e.labelClasses]),
+              class: l(["uikit-mr-5px", e.labelClasses]),
               innerHTML: e.btnLabel
-            }, null, 10, F),
-            e.withArrowIcon ? (u(), y(l(U), {
+            }, null, 10, x),
+            e.withArrowIcon ? (p(), D(i(U), {
               key: 0,
-              class: i(["uikit-shrink-0 uikit-transition-transform motion-reduce:uikit-transition-none", t.value ? "uikit-rotate-180" : ""]),
+              class: l(["uikit-shrink-0 uikit-transition-transform motion-reduce:uikit-transition-none", t.value ? "uikit-rotate-180" : ""]),
               width: e.arrowWidth,
               height: e.arrowWidth,
               "stroke-color": e.arrowStrokeColor
@@ -102,11 +105,11 @@ const F = ["innerHTML"], Z = /* @__PURE__ */ L({
           _: 1
         }, 8, ["id", "data-cy", "class", "aria-expanded"])
       ]),
-      (u(), y(z(e.dropdownElement), {
-        id: "dropdown_" + l(c),
+      (p(), D(z(e.dropdownElement), {
+        id: "dropdown_" + i(f),
         ref: "dropdown",
         "data-cy": e.dataCy && `${e.dataCy}_dropdown`,
-        class: i(["uikit-max-h-[220px] uikit-w-full uikit-min-w-[90px] uikit-flex-col uikit-overflow-y-auto uikit-border uikit-border-solid uikit-border-w-lavender uikit-bg-white uikit-pl-0 uikit-opacity-100 uikit-shadow uikit-no-scrollbar", [
+        class: l(["uikit-border-w-lavender uikit-max-h-[220px] uikit-w-full uikit-min-w-[90px] uikit-flex-col uikit-overflow-y-auto uikit-border uikit-border-solid uikit-bg-white uikit-pl-0 uikit-opacity-100 uikit-shadow uikit-no-scrollbar", [
           e.dropdownClasses,
           t.value ? "uikit-flex" : "uikit-hidden",
           { "uikit-bottom-[55px] uikit-rounded-xs": e.direction === "up" },
@@ -117,13 +120,13 @@ const F = ["innerHTML"], Z = /* @__PURE__ */ L({
         onClick: a[0] || (a[0] = C(() => {
         }, ["stop"]))
       }, {
-        default: D(() => [
+        default: S(() => [
           g(e.$slots, "default", {
             isOpen: t.value,
-            toggleDropdown: s,
-            activeIdx: l(m),
-            selectedIdx: l(r),
-            setActiveIdx: S,
+            toggleDropdown: u,
+            activeIdx: i(m),
+            selectedIdx: i(s),
+            setActiveIdx: b,
             setSelectedIdx: A
           })
         ]),
@@ -133,5 +136,5 @@ const F = ["innerHTML"], Z = /* @__PURE__ */ L({
   }
 });
 export {
-  Z as default
+  Y as default
 };

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

@@ -1,5 +1,5 @@
-import { defineComponent as o, createElementBlock as l, openBlock as s, withModifiers as r, normalizeClass as t, createElementVNode as u, createCommentVNode as d } from "vue";
-const k = ["for"], b = ["innerHTML"], c = /* @__PURE__ */ o({
+import { defineComponent as o, createElementBlock as i, openBlock as s, withModifiers as r, normalizeClass as l, createElementVNode as d, createCommentVNode as u } from "vue";
+const k = ["for"], b = ["innerHTML"], C = /* @__PURE__ */ o({
   __name: "BaseFloatingLabel",
   props: {
     labelState: { default: "inline-label" },
@@ -12,29 +12,26 @@ const k = ["for"], b = ["innerHTML"], c = /* @__PURE__ */ o({
   emits: ["click"],
   setup(m, { emit: a }) {
     const n = a;
-    return (e, i) => (s(), l("label", {
+    return (e, t) => (s(), i("label", {
       for: e.$attrs.for,
-      class: t(["uikit-pointer-events-none uikit-absolute uikit-left-15px uikit-h-5 uikit-text-sm", [e.labelState, { "uikit-text-w-secondary": e.disabled }, e.labelClasses]]),
-      onClick: i[0] || (i[0] = r((p) => n("click"), ["stop"]))
+      class: l(["uikit-floating-label uikit-h-5 uikit-pointer-events-none uikit-absolute uikit-left-sm uikit-text-16 uikit-text-w-gray", [e.labelState, { "uikit-text-w-secondary": e.disabled }, e.labelClasses]]),
+      onClick: t[0] || (t[0] = r((p) => n("click"), ["stop"]))
     }, [
-      u("span", {
-        class: t(["uikit-text uikit-font-medium", [
-          e.disabled ? "uikit-text-w-secondary" : "uikit-text-w-black",
-          e.labelTextClasses
-        ]]),
+      d("span", {
+        class: l([{ "uikit-text-w-secondary": e.disabled }, e.labelTextClasses]),
         innerHTML: e.labelText
       }, null, 10, b),
-      e.$attrs.required ? (s(), l("sup", {
+      e.$attrs.required ? (s(), i("sup", {
         key: 0,
-        class: t(["uikit-absolute -uikit-top-[0.3rem] uikit-text", [
+        class: l(["uikit-absolute -uikit-top-[0.3rem]", [
           { "uikit-text-w-secondary": e.disabled },
-          { "uikit-text-w-danger": e.isValid === !1 },
+          { "uikit-text-w-red": e.isValid === !1 },
           { "uikit-text-w-primary": (e.isValid || e.isValid === null) && !e.disabled }
         ]])
-      }, " *", 2)) : d("", !0)
+      }, " *", 2)) : u("", !0)
     ], 10, k));
   }
 });
 export {
-  c as default
+  C as default
 };