@wikicasa-dev/components 2.3.1-alpha.21 → 2.3.1-alpha.3

package/dist/index.d.ts

@@ -1,22 +1,13 @@
 export { default as BaseAccordion } from './UIKit/Accordion/BaseAccordion';
+export { default as BaseAccordionBtn } from './UIKit/Accordion/BaseAccordionBtn';
+export { default as BaseAccordionContent } from './UIKit/Accordion/BaseAccordionContent';
 export { default as BaseAccordionItem } from './UIKit/Accordion/BaseAccordionItem';
-export { default as AccordionItemPrimitive } from './UIKit/Accordion/AccordionItemPrimitive';
-export { default as AccordionHeaderPrimitive } from './UIKit/Accordion/AccordionHeaderPrimitive';
-export { default as AccordionTriggerPrimitive } from './UIKit/Accordion/AccordionTriggerPrimitive';
-export { default as AccordionContentPrimitive } from './UIKit/Accordion/AccordionContentPrimitive';
 export { default as SelectItem } from './UIKit/BaseSelect/SelectItem';
 export { default as CheckboxBtn } from './UIKit/Checkbox/CheckboxBtn';
 export { default as CheckboxGroup } from './UIKit/Checkbox/CheckboxGroup';
 export { default as CheckboxButtonGroup } from './UIKit/Checkbox/v2/CheckboxButtonGroup';
-export { default as CheckboxGroupPrimitive } from './UIKit/Checkbox/v2/CheckboxGroupPrimitive';
-export { default as CheckboxGroupItemPrimitive } from './UIKit/Checkbox/v2/CheckboxGroupItemPrimitive';
 export { default as BaseTabView } from './UIKit/Tab/BaseTabView';
 export { default as BaseTab } from './UIKit/Tab/BaseTab';
-export { default as BaseTabs } from './UIKit/Tab/v2/BaseTabs';
-export { default as BaseTabsContent } from './UIKit/Tab/v2/BaseTabsContent';
-export { default as BaseTabsIndicator } from './UIKit/Tab/v2/BaseTabsIndicator';
-export { default as BaseTabsList } from './UIKit/Tab/v2/BaseTabsList';
-export { default as BaseTabsTrigger } from './UIKit/Tab/v2/BaseTabsTrigger';
 export { default as RadioButton } from './UIKit/Radio/RadioButton';
 export { default as RadioGroup } from './UIKit/Radio/RadioGroup';
 export { default as RadioButtonGroup } from './UIKit/Radio/v2/RadioButtonGroup';

package/dist/index.js

@@ -1,124 +1,104 @@
-import { default as c } from "./packages/components/lib/UIKit/Accordion/BaseAccordion.vue.js";
-import { default as C } from "./packages/components/lib/UIKit/Accordion/BaseAccordionItem.vue.js";
-import './assets/BaseSnackbar.css';import './assets/BaseModal.css';import './assets/BaseDropDown.css';import './assets/BaseCard.css';import './assets/BaseBadge.css';import './assets/ClearableAutocomplete.css';import './assets/BaseAutocomplete.css';import './assets/BaseAlert.css';import './assets/AccessibleSelect.css';import './assets/RadioButtonItem.css';import './assets/BaseTabsIndicator.css';import './assets/BaseTabs.css';import './assets/CheckboxBtn.css';import './assets/BaseAccordionItem.css';/* empty css                                                               */
-import { default as T } from "./packages/components/lib/UIKit/Accordion/AccordionItemPrimitive.vue.js";
-import { default as h } from "./packages/components/lib/UIKit/Accordion/AccordionHeaderPrimitive.vue.js";
-import { default as I } from "./packages/components/lib/UIKit/Accordion/AccordionTriggerPrimitive.vue.js";
-import { default as P } from "./packages/components/lib/UIKit/Accordion/AccordionContentPrimitive.vue.js";
-import { default as k } from "./packages/components/lib/UIKit/BaseSelect/SelectItem.vue.js";
-import { default as R } from "./packages/components/lib/UIKit/Checkbox/CheckboxBtn.vue.js";
+import { default as B } from "./packages/components/lib/UIKit/Accordion/BaseAccordion.vue.js";
+import { default as c } from "./packages/components/lib/UIKit/Accordion/BaseAccordionBtn.vue.js";
+import { default as S } from "./packages/components/lib/UIKit/Accordion/BaseAccordionContent.vue.js";
+import { default as g } from "./packages/components/lib/UIKit/Accordion/BaseAccordionItem.vue.js";
+import './assets/BaseSnackbar.css';import './assets/BaseModal.css';import './assets/BaseDropDown.css';import './assets/BaseCard.css';import './assets/BaseBadge.css';import './assets/ClearableAutocomplete.css';import './assets/BaseAutocomplete.css';import './assets/BaseAlert.css';import './assets/AccessibleSelect.css';import './assets/RadioButtonItem.css';import './assets/CheckboxBtn.css';import './assets/BaseAccordionItem.css';/* empty css                                                               */
+import { default as A } from "./packages/components/lib/UIKit/BaseSelect/SelectItem.vue.js";
+import { default as T } from "./packages/components/lib/UIKit/Checkbox/CheckboxBtn.vue.js";
 /* empty css                                                        */
-import { default as D } from "./packages/components/lib/UIKit/Checkbox/CheckboxGroup.vue.js";
-import { default as M } from "./packages/components/lib/UIKit/Checkbox/v2/CheckboxButtonGroup.vue.js";
-import { default as H } from "./packages/components/lib/UIKit/Checkbox/v2/CheckboxGroupPrimitive.vue.js";
-import { default as V } from "./packages/components/lib/UIKit/Checkbox/v2/CheckboxGroupItemPrimitive.vue.js";
-import { default as q } from "./packages/components/lib/UIKit/Tab/BaseTabView.vue.js";
-import { default as z } from "./packages/components/lib/UIKit/Tab/BaseTab.vue.js";
-import { default as J } from "./packages/components/lib/UIKit/Tab/v2/BaseTabs.vue.js";
-/* empty css                                                   */
-import { default as N } from "./packages/components/lib/UIKit/Tab/v2/BaseTabsContent.vue.js";
-import { default as W } from "./packages/components/lib/UIKit/Tab/v2/BaseTabsIndicator.vue.js";
+import { default as R } from "./packages/components/lib/UIKit/Checkbox/CheckboxGroup.vue.js";
+import { default as w } from "./packages/components/lib/UIKit/Checkbox/v2/CheckboxButtonGroup.vue.js";
+import { default as v } from "./packages/components/lib/UIKit/Tab/BaseTabView.vue.js";
+import { default as F } from "./packages/components/lib/UIKit/Tab/BaseTab.vue.js";
+import { default as O } from "./packages/components/lib/UIKit/Radio/RadioButton.vue.js";
+import { default as U } from "./packages/components/lib/UIKit/Radio/RadioGroup.vue.js";
+import { default as j } from "./packages/components/lib/UIKit/Radio/v2/RadioButtonGroup.vue.js";
+import { default as y } from "./packages/components/lib/UIKit/Radio/v2/RadioButtonItem.vue.js";
 /* empty css                                                            */
-import { default as Y } from "./packages/components/lib/UIKit/Tab/v2/BaseTabsList.vue.js";
-import { default as _ } from "./packages/components/lib/UIKit/Tab/v2/BaseTabsTrigger.vue.js";
-import { default as ee } from "./packages/components/lib/UIKit/Radio/RadioButton.vue.js";
-import { default as te } from "./packages/components/lib/UIKit/Radio/RadioGroup.vue.js";
-import { default as ae } from "./packages/components/lib/UIKit/Radio/v2/RadioButtonGroup.vue.js";
-import { default as se } from "./packages/components/lib/UIKit/Radio/v2/RadioButtonItem.vue.js";
-/* empty css                                                            */
-import { default as pe } from "./packages/components/lib/UIKit/Radio/v2/RadioGroupItemPrimitive.vue.js";
-import { default as de } from "./packages/components/lib/UIKit/AccessibleSelect.vue.js";
+import { default as E } from "./packages/components/lib/UIKit/Radio/v2/RadioGroupItemPrimitive.vue.js";
+import { default as J } from "./packages/components/lib/UIKit/AccessibleSelect.vue.js";
 /* empty css                                                    */
-import { default as ie } from "./packages/components/lib/UIKit/BaseAlert.vue.js";
+import { default as N } from "./packages/components/lib/UIKit/BaseAlert.vue.js";
 /* empty css                                             */
-import { default as Be } from "./packages/components/lib/UIKit/BaseAutocomplete.vue.js";
+import { default as W } from "./packages/components/lib/UIKit/BaseAutocomplete.vue.js";
 /* empty css                                                    */
-import { default as ce } from "./packages/components/lib/UIKit/Autocomplete/ClearableAutocomplete.vue.js";
+import { default as Y } from "./packages/components/lib/UIKit/Autocomplete/ClearableAutocomplete.vue.js";
 /* empty css                                                                      */
-import { default as Ce } from "./packages/components/lib/UIKit/BaseBadge.vue.js";
+import { default as _ } from "./packages/components/lib/UIKit/BaseBadge.vue.js";
 /* empty css                                             */
-import { default as Te } from "./packages/components/lib/UIKit/BaseButton.vue.js";
-import { default as he } from "./packages/components/lib/UIKit/BaseCard.vue.js";
+import { default as ee } from "./packages/components/lib/UIKit/BaseButton.vue.js";
+import { default as ae } from "./packages/components/lib/UIKit/BaseCard.vue.js";
 /* empty css                                            */
-import { default as Ie } from "./UIKit/BaseComplexToggle.js";
-import { default as Pe } from "./packages/components/lib/UIKit/BaseDropDown.vue.js";
+import { default as re } from "./UIKit/BaseComplexToggle.js";
+import { default as se } from "./packages/components/lib/UIKit/BaseDropDown.vue.js";
 /* empty css                                                */
-import { default as ke } from "./UIKit/BaseFloatingLabel.js";
-import { default as Re } from "./UIKit/BaseInput.js";
-import { default as De } from "./packages/components/lib/UIKit/BasePagination.vue.js";
-import { default as Me } from "./UIKit/BaseSlider.js";
-import { default as He } from "./UIKit/BaseTextarea.js";
-import { default as Ve } from "./packages/components/lib/UIKit/BaseToggle.vue.js";
-import { default as qe } from "./UIKit/BaseTooltip.js";
-import { default as ze } from "./packages/components/lib/UIKit/BaseUploadFile.vue.js";
-import { default as Je } from "./packages/components/lib/UIKit/BaseModal.vue.js";
+import { default as me } from "./UIKit/BaseFloatingLabel.js";
+import { default as de } from "./UIKit/BaseInput.js";
+import { default as xe } from "./packages/components/lib/UIKit/BasePagination.vue.js";
+import { default as Be } from "./UIKit/BaseSlider.js";
+import { default as ce } from "./UIKit/BaseTextarea.js";
+import { default as Se } from "./packages/components/lib/UIKit/BaseToggle.vue.js";
+import { default as ge } from "./UIKit/BaseTooltip.js";
+import { default as Ae } from "./packages/components/lib/UIKit/BaseUploadFile.vue.js";
+import { default as Te } from "./packages/components/lib/UIKit/BaseModal.vue.js";
 /* empty css                                             */
-import { default as Ne } from "./UIKit/StaticSpinner.js";
-import { default as We } from "./UIKit/ShimmerLoader/BaseShimmerLoader.js";
-import { default as Ye } from "./packages/components/lib/UIKit/ShimmerLoader/ShimmerMultiLine.vue.js";
-import { default as _e } from "./packages/components/lib/chart/DoughnutChart.vue.js";
-import { default as eo } from "./packages/components/lib/chart/LineChart.vue.js";
-import { default as to } from "./UIKit/Slider/SimpleSlider.js";
-import { default as ao } from "./packages/components/lib/UIKit/BaseSnackbar.vue.js";
+import { default as Re } from "./UIKit/StaticSpinner.js";
+import { default as we } from "./UIKit/ShimmerLoader/BaseShimmerLoader.js";
+import { default as ve } from "./packages/components/lib/UIKit/ShimmerLoader/ShimmerMultiLine.vue.js";
+import { default as Fe } from "./packages/components/lib/chart/DoughnutChart.vue.js";
+import { default as Oe } from "./packages/components/lib/chart/LineChart.vue.js";
+import { default as Ue } from "./UIKit/Slider/SimpleSlider.js";
+import { default as je } from "./packages/components/lib/UIKit/BaseSnackbar.vue.js";
 /* empty css                                                */
-import { default as so } from "./packages/components/lib/components/IntersectionObserver/IntersectionObservable.vue.js";
-import { default as po } from "./packages/components/lib/components/IntersectionObserver/IntersectionObserver.vue.js";
-import { default as uo } from "./components/carousel/SwiperCarousel.js";
-import { default as xo } from "./components/carousel/SwiperSlide.js";
-import { default as no } from "./packages/components/lib/UIKit/BaseBreadcrumb.vue.js";
+import { default as ye } from "./packages/components/lib/components/IntersectionObserver/IntersectionObservable.vue.js";
+import { default as Ee } from "./packages/components/lib/components/IntersectionObserver/IntersectionObserver.vue.js";
+import { default as Je } from "./components/carousel/SwiperCarousel.js";
+import { default as Ne } from "./components/carousel/SwiperSlide.js";
+import { default as We } from "./packages/components/lib/UIKit/BaseBreadcrumb.vue.js";
 export {
-  de as AccessibleSelect,
-  P as AccordionContentPrimitive,
-  h as AccordionHeaderPrimitive,
-  T as AccordionItemPrimitive,
-  I as AccordionTriggerPrimitive,
-  c as BaseAccordion,
-  C as BaseAccordionItem,
-  ie as BaseAlert,
-  Be as BaseAutocomplete,
-  Ce as BaseBadge,
-  no as BaseBreadcrumb,
-  Te as BaseButton,
-  he as BaseCard,
-  Ie as BaseComplexToggle,
-  Pe as BaseDropDown,
-  ke as BaseFloatingLabel,
-  Re as BaseInput,
-  Je as BaseModal,
-  De as BasePagination,
-  We as BaseShimmerLoader,
-  Me as BaseSlider,
-  ao as BaseSnackbar,
-  z as BaseTab,
-  q as BaseTabView,
-  J as BaseTabs,
-  N as BaseTabsContent,
-  W as BaseTabsIndicator,
-  Y as BaseTabsList,
-  _ as BaseTabsTrigger,
-  He as BaseTextarea,
-  Ve as BaseToggle,
-  qe as BaseTooltip,
-  ze as BaseUploadFile,
-  R as CheckboxBtn,
-  M as CheckboxButtonGroup,
-  D as CheckboxGroup,
-  V as CheckboxGroupItemPrimitive,
-  H as CheckboxGroupPrimitive,
-  ce as ClearableAutocomplete,
-  _e as DoughnutChart,
-  so as IntersectionObservable,
-  po as IntersectionObserver,
-  eo as LineChart,
-  ee as RadioButton,
-  ae as RadioButtonGroup,
-  se as RadioButtonItem,
-  te as RadioGroup,
-  pe as RadioGroupItemPrimitive,
-  k as SelectItem,
-  Ye as ShimmerMultiLine,
-  to as SimpleSlider,
-  Ne as StaticSpinner,
-  uo as SwiperCarousel,
-  xo as SwiperSlide
+  J as AccessibleSelect,
+  B as BaseAccordion,
+  c as BaseAccordionBtn,
+  S as BaseAccordionContent,
+  g as BaseAccordionItem,
+  N as BaseAlert,
+  W as BaseAutocomplete,
+  _ as BaseBadge,
+  We as BaseBreadcrumb,
+  ee as BaseButton,
+  ae as BaseCard,
+  re as BaseComplexToggle,
+  se as BaseDropDown,
+  me as BaseFloatingLabel,
+  de as BaseInput,
+  Te as BaseModal,
+  xe as BasePagination,
+  we as BaseShimmerLoader,
+  Be as BaseSlider,
+  je as BaseSnackbar,
+  F as BaseTab,
+  v as BaseTabView,
+  ce as BaseTextarea,
+  Se as BaseToggle,
+  ge as BaseTooltip,
+  Ae as BaseUploadFile,
+  T as CheckboxBtn,
+  w as CheckboxButtonGroup,
+  R as CheckboxGroup,
+  Y as ClearableAutocomplete,
+  Fe as DoughnutChart,
+  ye as IntersectionObservable,
+  Ee as IntersectionObserver,
+  Oe as LineChart,
+  O as RadioButton,
+  j as RadioButtonGroup,
+  y as RadioButtonItem,
+  U as RadioGroup,
+  E as RadioGroupItemPrimitive,
+  A as SelectItem,
+  ve as ShimmerMultiLine,
+  Ue as SimpleSlider,
+  Re as StaticSpinner,
+  Je as SwiperCarousel,
+  Ne as SwiperSlide
 };

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

@@ -1,33 +1,25 @@
-import { defineComponent as d, mergeModels as n, useModel as u, createBlock as i, openBlock as r, unref as m, withCtx as p, renderSlot as s, normalizeProps as c, guardReactiveProps as f } from "vue";
-import { AccordionRoot as y } from "reka-ui";
-const b = /* @__PURE__ */ d({
+import { defineComponent as i, mergeModels as d, useModel as r, provide as u, createBlock as n, openBlock as s, unref as p, withCtx as m, renderSlot as c } from "vue";
+import { AccordionRoot as f } from "reka-ui";
+const b = /* @__PURE__ */ i({
   __name: "BaseAccordion",
-  props: /* @__PURE__ */ n({
+  props: /* @__PURE__ */ d({
     collapsible: { type: Boolean },
-    type: {},
-    disabled: { type: Boolean },
-    dir: {},
-    orientation: {},
-    unmountOnHide: { type: Boolean },
-    asChild: { type: Boolean },
-    as: {},
-    modelValue: {},
-    defaultValue: {}
+    type: {}
   }, {
     modelValue: {},
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(e) {
-    const l = u(e, "modelValue");
-    return (t, a) => (r(), i(m(y), {
-      collapsible: e.collapsible,
-      type: e.type,
-      modelValue: l.value,
-      "onUpdate:modelValue": a[0] || (a[0] = (o) => l.value = o)
+  setup(t) {
+    const e = r(t, "modelValue");
+    return u("isActive", (l) => typeof e.value == "string" ? e.value === l : !!e.value?.find((o) => o === l)), (l, o) => (s(), n(p(f), {
+      collapsible: t.collapsible,
+      type: t.type,
+      modelValue: e.value,
+      "onUpdate:modelValue": o[0] || (o[0] = (a) => e.value = a)
     }, {
-      default: p((o) => [
-        s(t.$slots, "default", c(f(o)))
+      default: m(() => [
+        c(l.$slots, "default")
       ]),
       _: 3
     }, 8, ["collapsible", "type", "modelValue"]));

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

@@ -0,0 +1,59 @@
+import { defineComponent as l, createElementBlock as s, openBlock as d, normalizeClass as n, renderSlot as i, createElementVNode as u, withModifiers as k, createVNode as m, unref as f } from "vue";
+import { ArrowIcon as g } from "@wikicasa-dev/svg-icons";
+const C = ["id"], w = ["aria-expanded", "aria-controls"], b = /* @__PURE__ */ l({
+  inheritAttrs: !1,
+  __name: "BaseAccordionBtn",
+  props: {
+    id: {},
+    arrowWidth: { default: 12 },
+    arrowColor: {},
+    onContainerClickExpand: { type: Boolean, default: !1 },
+    accordionOpen: { type: Boolean, default: !1 },
+    toggleAccordion: { type: Function }
+  },
+  emits: ["click"],
+  setup(t, { emit: r }) {
+    const a = r;
+    return (o, e) => (d(), s("div", {
+      id: `${t.id}`,
+      class: n(["uikit-flex uikit-items-center uikit-justify-around", [
+        o.$attrs["btn-wrapper-classes"],
+        t.onContainerClickExpand ? "uikit-cursor-pointer" : ""
+      ]]),
+      onClick: e[1] || (e[1] = (c) => t.onContainerClickExpand && t.toggleAccordion())
+    }, [
+      i(o.$slots, "custom-content"),
+      i(o.$slots, "custom_btn", {
+        btnId: `btn-${t.id}`,
+        isOpen: t.accordionOpen,
+        toggleAccordion: t.toggleAccordion
+      }, () => [
+        u("button", {
+          type: "button",
+          class: n(["uikit-border-0 uikit-bg-transparent", o.$attrs["btn-classes"]]),
+          "aria-expanded": t.accordionOpen,
+          "aria-controls": `accordion-text-${t.id}`,
+          onClick: e[0] || (e[0] = k((c) => {
+            t.toggleAccordion(), a("click");
+          }, ["prevent", "stop"]))
+        }, [
+          m(f(g), {
+            class: n([
+              "uikit-transition-transform motion-reduce:uikit-transition-none",
+              [
+                t.accordionOpen ? "uikit-rotate-180" : "",
+                o.$attrs["arrow-classes"]
+              ]
+            ]),
+            "stroke-color": t.arrowColor ?? "#222",
+            width: t.arrowWidth,
+            height: t.arrowWidth
+          }, null, 8, ["stroke-color", "class", "width", "height"])
+        ], 10, w)
+      ])
+    ], 10, C));
+  }
+});
+export {
+  b as default
+};

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

@@ -0,0 +1,34 @@
+import { defineComponent as n, createElementBlock as a, openBlock as c, normalizeClass as o, renderSlot as t, createElementVNode as d } from "vue";
+const s = ["id", "aria-labelledby"], u = /* @__PURE__ */ n({
+  __name: "BaseAccordionContent",
+  props: {
+    id: {},
+    accordionOpen: { type: Boolean },
+    accordionOpenClasses: {},
+    accordionClosedClasses: {},
+    accordionContentClasses: {}
+  },
+  setup(i) {
+    return (e, r) => (c(), a("div", {
+      id: `accordion-text-${i.id}`,
+      role: "region",
+      "aria-labelledby": `accordion-title-${i.id}`,
+      class: o(["uikit-grid uikit-overflow-hidden uikit-px-5 uikit-text-sm uikit-text-w-black uikit-transition-[grid-template-rows,opacity,padding,margin] uikit-duration-300 uikit-ease-in-out", [
+        i.accordionOpen ? i.accordionOpenClasses : i.accordionClosedClasses,
+        i.accordionOpen ? "uikit-grid-rows-[1fr] uikit-opacity-100" : "uikit-grid-rows-[0fr] uikit-opacity-0",
+        e.$attrs["accordion-classes"]
+      ]])
+    }, [
+      t(e.$slots, "custom-accordion-content", { isOpen: i.accordionOpen }, () => [
+        d("div", {
+          class: o(["uikit-overflow-hidden", i.accordionContentClasses])
+        }, [
+          t(e.$slots, "default", { isOpen: i.accordionOpen })
+        ], 2)
+      ])
+    ], 10, s));
+  }
+});
+export {
+  u as default
+};

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

@@ -1,10 +1,7 @@
-import { defineComponent as o, createBlock as l, openBlock as n, withCtx as i, createVNode as a, normalizeClass as s, renderSlot as r, createTextVNode as u, toDisplayString as c, unref as d } from "vue";
-import f from "./AccordionContentPrimitive.vue.js";
-import m from "./AccordionTriggerPrimitive.vue.js";
-import k from "./AccordionHeaderPrimitive.vue.js";
-import h from "./AccordionItemPrimitive.vue.js";
-import { ArrowIcon as w } from "@wikicasa-dev/svg-icons";
-const B = /* @__PURE__ */ o({
+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: {
     title: {},
@@ -18,36 +15,39 @@ const B = /* @__PURE__ */ o({
     arrowClasses: {},
     headerTag: { default: "h3" }
   },
-  setup(t) {
-    return (e, g) => (n(), l(h, { value: t.value }, {
-      default: i(() => [
-        a(k, {
-          as: t.headerTag,
-          class: s([
-            t.headerClasses,
+  setup(e) {
+    const o = c("isActive");
+    return (i, v) => (d(), u(t(h), { value: e.value }, {
+      default: a(() => [
+        s(t(m), {
+          as: e.headerTag,
+          class: r([
+            e.headerClasses,
             "uikit-flex uikit-items-center uikit-justify-between"
           ])
         }, {
-          default: i(() => [
-            r(e.$slots, "header-content"),
-            a(m, {
-              "data-cy": t.dataCy,
-              class: s([
-                t.triggerClasses,
+          default: a(() => [
+            l(i.$slots, "header-content"),
+            s(t(g), {
+              "data-cy": e.dataCy,
+              class: r([
+                e.triggerClasses,
                 {
-                  "uikit-base-accordion-trigger 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": !e.$slots.trigger,
-                  "uikit-w-full": !e.$slots["header-content"]
+                  "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["header-content"]
                 }
               ])
             }, {
-              default: i(() => [
-                r(e.$slots, "trigger", {}, () => [
-                  u(c(t.title) + " ", 1),
-                  a(d(w), {
-                    class: s(["uikit-base-accordion-item-arrow uikit-flex-shrink-0 uikit-transition-transform motion-reduce:uikit-transition-none", t.arrowClasses]),
-                    "arrow-classes": t.arrowClasses,
-                    width: t.arrowWidth,
-                    height: t.arrowWidth
+              default: a(() => [
+                l(i.$slots, "trigger", {
+                  active: t(o)(e.value)
+                }, () => [
+                  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
                   }, null, 8, ["class", "arrow-classes", "width", "height"])
                 ])
               ]),
@@ -56,14 +56,14 @@ const B = /* @__PURE__ */ o({
           ]),
           _: 3
         }, 8, ["as", "class"]),
-        a(f, {
-          class: s([
-            t.contentClasses,
+        s(t(w), {
+          class: r([
+            e.contentClasses,
             "uikit-base-accordion-item-content uikit-px-[16px]"
           ])
         }, {
-          default: i(() => [
-            r(e.$slots, "default")
+          default: a(() => [
+            l(i.$slots, "default")
           ]),
           _: 3
         }, 8, ["class"])
@@ -73,5 +73,5 @@ const B = /* @__PURE__ */ o({
   }
 });
 export {
-  B as default
+  b as default
 };

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

@@ -1,4 +1,4 @@
-import { defineComponent as j, mergeModels as U, useModel as S, useId as q, useTemplateRef as d, shallowRef as c, onBeforeMount as G, onMounted as J, onUnmounted as Q, watch as E, nextTick as Y, createBlock as z, openBlock as x, withCtx as M, createElementBlock as Z, Fragment as _, renderList as ee, renderSlot as b, createElementVNode as u, normalizeClass as f, withDirectives as I, unref as te, vModelText as le, toDisplayString as ne, withModifiers as oe, normalizeStyle as ae, createTextVNode as ie, vShow as ue } from "vue";
+import { defineComponent as j, mergeModels as U, useModel as S, useId as q, useTemplateRef as d, shallowRef as c, onBeforeMount as G, onMounted as J, onUnmounted as Q, watch as E, nextTick as Y, createBlock as z, openBlock as M, withCtx as W, createElementBlock as Z, Fragment as _, renderList as ee, renderSlot as m, createElementVNode as u, normalizeClass as f, withDirectives as I, unref as te, vModelText as le, toDisplayString as ne, withModifiers as oe, normalizeStyle as ae, createTextVNode as ie, vShow as ue } from "vue";
 import se from "../BaseDropDown.vue.js";
 import '../../../../../assets/BaseDropDown.css';/* empty css                   */
 import re from "../BaseSelect/SelectItem.vue.js";
@@ -31,14 +31,14 @@ const ce = ["id", "data-cy", "placeholder"], fe = ["innerHTML"], ye = /* @__PURE
   }),
   emits: /* @__PURE__ */ U(["input", "click", "inputClick", "keydown"], ["update:open", "update:modelValue", "update:inputValue"]),
   setup(t, { expose: L, emit: D }) {
-    const s = S(t, "open"), p = S(t, "modelValue"), o = S(t, "inputValue"), v = D, K = q(), C = d("inputRef"), k = c(0), y = c(!1), r = c(!1), W = c(null), a = c([]), O = d("dropdownRef"), h = d("hiddenSpan"), w = d("inputWrapperRef"), R = d("clearButtonRef"), N = () => {
+    const s = S(t, "open"), p = S(t, "modelValue"), o = S(t, "inputValue"), v = D, K = q(), C = d("inputRef"), k = c(0), y = c(!1), r = c(!1), x = c(null), a = c([]), O = d("dropdownRef"), h = d("hiddenSpan"), w = d("inputWrapperRef"), R = d("clearButtonRef"), N = () => {
       o.value = "", p.value = null, r.value = !1;
     }, A = async (l) => {
       if (!l) {
         a.value = [], s.value = !1;
         return;
       }
-      t.disableCb || (a.value = await W.value?.(l) || [], y.value = !0, s.value = !!a.value.length);
+      t.disableCb || (a.value = await x.value?.(l) || [], y.value = !0, s.value = !!a.value.length);
     }, F = (l = -1) => {
       const e = a.value[l];
       !e || e.id === p.value?.id || (t.onOptionSelectedCb?.(e), o.value = e.label, s.value = !1, p.value = e, r.value = !0, a.value = []);
@@ -51,11 +51,11 @@ const ce = ["id", "data-cy", "placeholder"], fe = ["innerHTML"], ye = /* @__PURE
     const $ = () => {
       const l = h.value, e = w.value, n = R.value;
       if (!l || !e) return;
-      const T = l.offsetWidth, m = e.offsetWidth, i = t.clearButton?.offset || 0, g = t.clearButton?.width || n?.offsetWidth || 0, X = m - i - g, V = Math.min(T, X);
+      const T = l.offsetWidth, b = e.offsetWidth, i = t.clearButton?.offset || 0, g = t.clearButton?.width || n?.offsetWidth || 0, X = b - i - g, V = Math.min(T, X);
       V !== k.value && (k.value = V);
     };
     return G(() => {
-      W.value = de({ delay: 300 }, t.onInputChangeCb);
+      x.value = de({ delay: 300 }, t.onInputChangeCb);
     }), J(() => {
       w.value && (B = new ResizeObserver(() => {
         $();
@@ -82,7 +82,7 @@ const ce = ["id", "data-cy", "placeholder"], fe = ["innerHTML"], ye = /* @__PURE
       getRootElement: () => O.value?.getRootElement(),
       select: P,
       focus: H
-    }), (l, e) => (x(), z(se, {
+    }), (l, e) => (M(), z(se, {
       ref: "dropdownRef",
       class: "uikit-clearable-autocomplete",
       "data-cy": t.dataCy,
@@ -95,12 +95,12 @@ const ce = ["id", "data-cy", "placeholder"], fe = ["innerHTML"], ye = /* @__PURE
       open: s.value,
       "onUpdate:open": e[6] || (e[6] = (n) => s.value = n)
     }, {
-      btn_slot: M(() => [
+      btn_slot: W(() => [
         u("div", {
           class: f(["uikit-text-16", t.triggerWrapperClasses]),
           onClick: e[4] || (e[4] = (n) => v("click", n))
         }, [
-          b(l.$slots, "left-icon"),
+          m(l.$slots, "left-icon"),
           u("div", {
             ref: "inputWrapperRef",
             class: f(["uikit-relative", t.inputWrapperClasses])
@@ -134,7 +134,7 @@ const ce = ["id", "data-cy", "placeholder"], fe = ["innerHTML"], ye = /* @__PURE
             u("span", {
               ref_key: "hiddenSpan",
               ref: h,
-              class: f(["uikit-invisible uikit-absolute uikit-left-0 uikit-top-0 uikit-max-w-full uikit-overflow-hidden uikit-whitespace-pre", t.hiddenTextClasses]),
+              class: f(["uikit-invisible uikit-absolute uikit-left-0 uikit-top-0 uikit-whitespace-pre", t.hiddenTextClasses]),
               style: {
                 font: "inherit",
                 fontSize: "inherit"
@@ -152,31 +152,31 @@ const ce = ["id", "data-cy", "placeholder"], fe = ["innerHTML"], ye = /* @__PURE
               }),
               onClick: oe(N, ["stop"])
             }, [
-              b(l.$slots, "clear-icon", {}, () => [
+              m(l.$slots, "clear-icon", {}, () => [
                 e[7] || (e[7] = ie("X", -1))
               ])
             ], 6), [
               [ue, r.value && k.value]
             ])
           ], 2),
-          b(l.$slots, "right-icon")
+          m(l.$slots, "right-icon")
         ], 2)
       ]),
-      default: M(({ activeIdx: n, setActiveIdx: T }) => [
-        (x(!0), Z(_, null, ee(a.value, (m, i) => (x(), z(re, {
+      default: W(({ activeIdx: n, setActiveIdx: T }) => [
+        (M(!0), Z(_, null, ee(a.value, (b, i) => (M(), z(re, {
           key: i,
           active: n === i,
           class: "uikit-m-1 uikit-rounded-[5px] uikit-px-5 uikit-py-10px hover:uikit-cursor-pointer",
           onClick: (g) => F(i),
           onMouseover: (g) => T(i)
         }, {
-          default: M(() => [
-            b(l.$slots, "option-content", {
-              option: m,
+          default: W(() => [
+            m(l.$slots, "option-content", {
+              option: b,
               idx: i
             }, () => [
               u("span", {
-                innerHTML: m.label
+                innerHTML: b.label
               }, null, 8, fe)
             ])
           ]),

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

@@ -132,7 +132,9 @@ const J = { class: "range_container" }, K = { class: "sliders_control" }, O = ["
         l
       ), h(parseInt(l.value, 10), l), a <= t ? (d.value = t, o.value = v) : (l.value = `${a}`, d.value = a, o.value = a);
     }, b = j();
-    return n.value = parseInt(`${m.min || 0}`, 10), u.value = parseInt(`${m.max || 100}`, 10), c.value = n.value, d.value = u.value, r.value = parseInt(`${b.minValue || n.value}`, 10), o.value = parseInt(`${b.maxValue || u.value}`, 10), F.value = Math.log(r.value || 1), M.value = Math.log(o.value), y.value = (M.value - F.value) / (u.value - n.value), q(() => {
+    return (() => {
+      n.value = parseInt(`${m.min || 0}`, 10), u.value = parseInt(`${m.max || 100}`, 10), c.value = n.value, d.value = u.value, r.value = parseInt(`${b.minValue || n.value}`, 10), o.value = parseInt(`${b.maxValue || u.value}`, 10), F.value = Math.log(r.value || 1), M.value = Math.log(o.value), y.value = (M.value - F.value) / (u.value - n.value);
+    })(), q(() => {
       !g.value || !i.value || (V(
         c.value,
         {