@wikicasa-dev/components 2.3.1-alpha.9 → 2.4.1-alpha.1

package/dist/index.d.ts

@@ -12,6 +12,11 @@ export { default as CheckboxGroupPrimitive } from './UIKit/Checkbox/v2/CheckboxG
 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,112 +1,124 @@
-import { default as B } 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/CheckboxBtn.css';import './assets/BaseAccordionItem.css';/* empty css                                                               */
-import { default as S } from "./packages/components/lib/UIKit/Accordion/AccordionItemPrimitive.vue.js";
-import { default as g } from "./packages/components/lib/UIKit/Accordion/AccordionHeaderPrimitive.vue.js";
-import { default as A } from "./packages/components/lib/UIKit/Accordion/AccordionTriggerPrimitive.vue.js";
-import { default as I } from "./packages/components/lib/UIKit/Accordion/AccordionContentPrimitive.vue.js";
-import { default as G } from "./packages/components/lib/UIKit/BaseSelect/SelectItem.vue.js";
-import { default as k } from "./packages/components/lib/UIKit/Checkbox/CheckboxBtn.vue.js";
+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";
 /* empty css                                                        */
-import { default as w } from "./packages/components/lib/UIKit/Checkbox/CheckboxGroup.vue.js";
-import { default as D } from "./packages/components/lib/UIKit/Checkbox/v2/CheckboxButtonGroup.vue.js";
-import { default as M } from "./packages/components/lib/UIKit/Checkbox/v2/CheckboxGroupPrimitive.vue.js";
-import { default as H } from "./packages/components/lib/UIKit/Checkbox/v2/CheckboxGroupItemPrimitive.vue.js";
-import { default as V } from "./packages/components/lib/UIKit/Tab/BaseTabView.vue.js";
-import { default as q } from "./packages/components/lib/UIKit/Tab/BaseTab.vue.js";
-import { default as z } from "./packages/components/lib/UIKit/Radio/RadioButton.vue.js";
-import { default as J } from "./packages/components/lib/UIKit/Radio/RadioGroup.vue.js";
-import { default as N } from "./packages/components/lib/UIKit/Radio/v2/RadioButtonGroup.vue.js";
-import { default as W } from "./packages/components/lib/UIKit/Radio/v2/RadioButtonItem.vue.js";
+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";
 /* empty css                                                            */
-import { default as Y } from "./packages/components/lib/UIKit/Radio/v2/RadioGroupItemPrimitive.vue.js";
-import { default as _ } from "./packages/components/lib/UIKit/AccessibleSelect.vue.js";
+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";
 /* empty css                                                    */
-import { default as ee } from "./packages/components/lib/UIKit/BaseAlert.vue.js";
+import { default as ie } from "./packages/components/lib/UIKit/BaseAlert.vue.js";
 /* empty css                                             */
-import { default as te } from "./packages/components/lib/UIKit/BaseAutocomplete.vue.js";
+import { default as Be } from "./packages/components/lib/UIKit/BaseAutocomplete.vue.js";
 /* empty css                                                    */
-import { default as ae } from "./packages/components/lib/UIKit/Autocomplete/ClearableAutocomplete.vue.js";
+import { default as ce } from "./packages/components/lib/UIKit/Autocomplete/ClearableAutocomplete.vue.js";
 /* empty css                                                                      */
-import { default as me } from "./packages/components/lib/UIKit/BaseBadge.vue.js";
+import { default as Ce } from "./packages/components/lib/UIKit/BaseBadge.vue.js";
 /* empty css                                             */
-import { default as se } from "./packages/components/lib/UIKit/BaseButton.vue.js";
-import { default as de } from "./packages/components/lib/UIKit/BaseCard.vue.js";
+import { default as Te } from "./packages/components/lib/UIKit/BaseButton.vue.js";
+import { default as he } from "./packages/components/lib/UIKit/BaseCard.vue.js";
 /* empty css                                            */
-import { default as ie } from "./UIKit/BaseComplexToggle.js";
-import { default as Be } from "./packages/components/lib/UIKit/BaseDropDown.vue.js";
+import { default as Ie } from "./UIKit/BaseComplexToggle.js";
+import { default as Pe } from "./packages/components/lib/UIKit/BaseDropDown.vue.js";
 /* empty css                                                */
-import { default as ce } from "./UIKit/BaseFloatingLabel.js";
-import { default as Se } from "./UIKit/BaseInput.js";
-import { default as ge } from "./packages/components/lib/UIKit/BasePagination.vue.js";
-import { default as Ae } from "./UIKit/BaseSlider.js";
-import { default as Ie } from "./UIKit/BaseTextarea.js";
-import { default as Ge } from "./packages/components/lib/UIKit/BaseToggle.vue.js";
-import { default as ke } from "./UIKit/BaseTooltip.js";
-import { default as we } from "./packages/components/lib/UIKit/BaseUploadFile.vue.js";
-import { default as De } from "./packages/components/lib/UIKit/BaseModal.vue.js";
+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";
 /* empty css                                             */
-import { default as Me } from "./UIKit/StaticSpinner.js";
-import { default as He } from "./UIKit/ShimmerLoader/BaseShimmerLoader.js";
-import { default as Ve } from "./packages/components/lib/UIKit/ShimmerLoader/ShimmerMultiLine.vue.js";
-import { default as qe } from "./packages/components/lib/chart/DoughnutChart.vue.js";
-import { default as ze } from "./packages/components/lib/chart/LineChart.vue.js";
-import { default as Je } from "./UIKit/Slider/SimpleSlider.js";
-import { default as Ne } from "./packages/components/lib/UIKit/BaseSnackbar.vue.js";
+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";
 /* empty css                                                */
-import { default as We } from "./packages/components/lib/components/IntersectionObserver/IntersectionObservable.vue.js";
-import { default as Ye } from "./packages/components/lib/components/IntersectionObserver/IntersectionObserver.vue.js";
-import { default as _e } from "./components/carousel/SwiperCarousel.js";
-import { default as eo } from "./components/carousel/SwiperSlide.js";
-import { default as to } from "./packages/components/lib/UIKit/BaseBreadcrumb.vue.js";
+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";
 export {
-  _ as AccessibleSelect,
-  I as AccordionContentPrimitive,
-  g as AccordionHeaderPrimitive,
-  S as AccordionItemPrimitive,
-  A as AccordionTriggerPrimitive,
-  B as BaseAccordion,
-  c as BaseAccordionItem,
-  ee as BaseAlert,
-  te as BaseAutocomplete,
-  me as BaseBadge,
-  to as BaseBreadcrumb,
-  se as BaseButton,
-  de as BaseCard,
-  ie as BaseComplexToggle,
-  Be as BaseDropDown,
-  ce as BaseFloatingLabel,
-  Se as BaseInput,
-  De as BaseModal,
-  ge as BasePagination,
-  He as BaseShimmerLoader,
-  Ae as BaseSlider,
-  Ne as BaseSnackbar,
-  q as BaseTab,
-  V as BaseTabView,
-  Ie as BaseTextarea,
-  Ge as BaseToggle,
-  ke as BaseTooltip,
-  we as BaseUploadFile,
-  k as CheckboxBtn,
-  D as CheckboxButtonGroup,
-  w as CheckboxGroup,
-  H as CheckboxGroupItemPrimitive,
-  M as CheckboxGroupPrimitive,
-  ae as ClearableAutocomplete,
-  qe as DoughnutChart,
-  We as IntersectionObservable,
-  Ye as IntersectionObserver,
-  ze as LineChart,
-  z as RadioButton,
-  N as RadioButtonGroup,
-  W as RadioButtonItem,
-  J as RadioGroup,
-  Y as RadioGroupItemPrimitive,
-  G as SelectItem,
-  Ve as ShimmerMultiLine,
-  Je as SimpleSlider,
-  Me as StaticSpinner,
-  _e as SwiperCarousel,
-  eo as SwiperSlide
+  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
 };

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 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 { 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 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), x = 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), W = 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 x.value?.(l) || [], y.value = !0, s.value = !!a.value.length);
+      t.disableCb || (a.value = await W.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, b = e.offsetWidth, i = t.clearButton?.offset || 0, g = t.clearButton?.width || n?.offsetWidth || 0, X = b - i - g, V = Math.min(T, X);
+      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);
       V !== k.value && (k.value = V);
     };
     return G(() => {
-      x.value = de({ delay: 300 }, t.onInputChangeCb);
+      W.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) => (M(), z(se, {
+    }), (l, e) => (x(), 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: W(() => [
+      btn_slot: M(() => [
         u("div", {
           class: f(["uikit-text-16", t.triggerWrapperClasses]),
           onClick: e[4] || (e[4] = (n) => v("click", n))
         }, [
-          m(l.$slots, "left-icon"),
+          b(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-whitespace-pre", t.hiddenTextClasses]),
+              class: f(["uikit-invisible uikit-absolute uikit-left-0 uikit-top-0 uikit-max-w-full uikit-overflow-hidden 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"])
             }, [
-              m(l.$slots, "clear-icon", {}, () => [
+              b(l.$slots, "clear-icon", {}, () => [
                 e[7] || (e[7] = ie("X", -1))
               ])
             ], 6), [
               [ue, r.value && k.value]
             ])
           ], 2),
-          m(l.$slots, "right-icon")
+          b(l.$slots, "right-icon")
         ], 2)
       ]),
-      default: W(({ activeIdx: n, setActiveIdx: T }) => [
-        (M(!0), Z(_, null, ee(a.value, (b, i) => (M(), z(re, {
+      default: M(({ activeIdx: n, setActiveIdx: T }) => [
+        (x(!0), Z(_, null, ee(a.value, (m, i) => (x(), 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: W(() => [
-            m(l.$slots, "option-content", {
-              option: b,
+          default: M(() => [
+            b(l.$slots, "option-content", {
+              option: m,
               idx: i
             }, () => [
               u("span", {
-                innerHTML: b.label
+                innerHTML: m.label
               }, null, 8, fe)
             ])
           ]),

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

@@ -1,7 +1,6 @@
-import { defineComponent as I, ref as n, useTemplateRef as T, onUnmounted as z, watch as H, createBlock as O, openBlock as m, Teleport as $, createElementVNode as a, normalizeClass as s, createElementBlock as y, createCommentVNode as h, renderSlot as d, withModifiers as D, createVNode as F, unref as K, nextTick as N } from "vue";
-import { isWindows as g, awaitableSetTimeout as S } from "@wikicasa-dev/utilities";
-import { CloseIcon as V } from "@wikicasa-dev/svg-icons";
-const P = ["id", "data-cy"], U = ["innerHTML"], j = /* @__PURE__ */ I({
+import { defineComponent as T, shallowRef as v, useTemplateRef as h, onUnmounted as D, watch as $, createBlock as H, openBlock as r, Teleport as O, createVNode as y, Transition as F, withCtx as K, withDirectives as N, createElementVNode as l, normalizeClass as i, createElementBlock as C, createCommentVNode as w, renderSlot as d, withModifiers as S, unref as U, vShow as V } from "vue";
+import { CloseIcon as A } from "@wikicasa-dev/svg-icons";
+const P = ["id", "data-cy"], R = ["innerHTML"], q = /* @__PURE__ */ T({
   __name: "BaseModal",
   props: {
     id: { default: "base-bt-modal" },
@@ -24,126 +23,148 @@ const P = ["id", "data-cy"], U = ["innerHTML"], j = /* @__PURE__ */ I({
     titleClasses: {}
   },
   emits: ["closed", "opened", "dialogClick"],
-  setup(e, { emit: w }) {
-    const c = w, i = n(!1), r = n(null), l = T("modalDialog"), k = n(!1), u = n(!1), f = ({ key: t }) => {
-      t === "Escape" && o();
-    }, C = () => {
-      document?.body.addEventListener("keydown", f);
-    }, b = () => {
-      document?.body.removeEventListener("keydown", f);
-    }, x = async () => {
-      i.value = !0, N(() => {
-        C(), g() ? document?.body.classList.add("uikit-no-scrolling", "sm:uikit-pr-15px") : document?.body.classList.add("uikit-no-scrolling");
-      }), c("opened"), e.autoClose !== void 0 && setTimeout(() => {
-        o();
-      }, e.autoClose);
-    }, p = (t) => {
-      l.value && l.value.contains(t.target) && (u.value = !0);
-    }, M = (t) => {
-      l.value && l.value.contains(t.target) && (u.value = !1);
-    }, B = async (t) => {
-      if (!r.value?.contains(t.target) && e.closeOnClickOut) {
+  setup(t, { emit: x }) {
+    const c = x, o = v(!1), k = h("backdrop"), a = h("modalDialog"), u = v(!1), m = ({ key: e }) => {
+      e === "Escape" && s();
+    }, g = () => {
+      document?.body.addEventListener("keydown", m);
+    }, f = () => {
+      document?.body.removeEventListener("keydown", m);
+    }, p = () => {
+      console.log("DEBUG:onBeforeEnter called"), g(), document?.body.classList.add(
+        "sm:uikit-pr-15px",
+        "sm:uikit-mr-0",
+        "uikit-overflow-hidden"
+      );
+    }, M = () => {
+      c("opened"), t.autoClose !== void 0 && setTimeout(() => {
+        s();
+      }, t.autoClose);
+    }, B = () => {
+      f(), document?.body.classList.remove(
+        "sm:uikit-pr-15px",
+        "sm:uikit-mr-0",
+        "uikit-overflow-hidden"
+      ), c("closed");
+    }, s = () => {
+      o.value = !1;
+    }, E = (e) => {
+      a.value && a.value.contains(e.target) && (u.value = !0);
+    }, I = (e) => {
+      a.value && a.value.contains(e.target) && (u.value = !1);
+    }, L = async (e) => {
+      if (!(e.target !== k.value && k.value?.contains(e.target)) && t.closeOnClickOut) {
         if (u.value) {
           u.value = !1;
           return;
         }
-        await o();
+        s();
       }
-    }, o = async () => {
-      i.value = !1, b(), document?.documentElement.classList.remove("uikit-no-scrolling"), navigator.userAgent.includes("Windows") ? document?.body.classList.remove("uikit-no-scrolling", "sm:uikit-pr-15px") : document?.body.classList.remove("uikit-no-scrolling"), await S(() => {
-        r.value?.classList.add("uikit-hidden"), c("closed");
-      }, 250);
     };
-    z(() => {
-      b(), document?.documentElement.classList.remove("uikit-no-scrolling"), g() ? document?.body.classList.remove("uikit-no-scrolling", "sm:uikit-pr-15px") : document?.body.classList.remove("uikit-no-scrolling");
-    }), H(
-      () => e.showModal,
-      async (t) => {
-        !t && !i.value ? k.value = !0 : k.value = !1, t && !i.value && await x(), !t && i.value && await o(), i.value = t;
+    D(() => {
+      f(), document?.body.classList.remove(
+        "sm:uikit-pr-15px",
+        "sm:uikit-mr-0",
+        "uikit-overflow-hidden"
+      );
+    }), $(
+      () => t.showModal,
+      async (e) => {
+        o.value = e;
       },
       { immediate: !0 }
     );
-    const L = (t) => {
-      l.value === t.target && t.stopPropagation();
+    const z = (e) => {
+      a.value === e.target && e.stopPropagation();
     };
-    return (t, v) => (m(), O($, { to: "body" }, [
-      a("div", {
-        ref_key: "backdropEl",
-        ref: r,
-        class: s(["bbt-backdrop uikit-fixed uikit-left-0 uikit-top-0 uikit-h-full uikit-w-full", [
-          e.customBackdropClasses,
-          {
-            "uikit-animate-[backdrop-opacity_0.3s_ease-out_0s_backwards] uikit-bg-w-secondary/70": i.value
-          },
-          { "uikit-bg-transparent": !i.value },
-          { "sm:uikit-pt-[30px]": !e.centered },
-          { hide: k.value }
-        ]]),
-        style: { "z-index": "1062" },
-        onClick: B,
-        onMousedown: p,
-        onMouseup: M
-      }, [
-        a("dialog", {
-          id: e.id,
-          ref: "modalDialog",
-          "data-cy": e.dataCy,
-          class: s(["uikit-modal-dialog transition-y uikit-mx-auto uikit-block uikit-w-full uikit-overflow-y-auto uikit-overflow-x-hidden uikit-rounded uikit-border-none uikit-bg-transparent uikit-bg-white uikit-p-0 uikit-shadow-lg uikit-no-scrollbar uikit-safe-bottom max-sm:uikit-fixed max-sm:uikit-bottom-0 max-sm:uikit-max-h-[95%] max-sm:uikit-rounded-bl-none max-sm:uikit-rounded-br-none sm:uikit-h-auto", [
-            e.customModalDialogClasses,
-            { show: i.value },
-            { "closed uikit-overflow-hidden": !i.value },
-            { centered: e.centered },
-            { "uikit-absolute": e.centered },
-            { "uikit-static": !e.centered },
-            `base-${e.size}`,
-            e.fullHeight ? "uikit-h-[95%]" : "uikit-h-auto"
-          ]]),
-          tabindex: "-1",
-          onClick: v[0] || (v[0] = (E) => c("dialogClick", E)),
-          onFocusin: L
-        }, [
-          a("div", {
-            class: s(["default-header uikit-sticky uikit-top-0 uikit-z-10 uikit-rounded-t uikit-border-0 uikit-bg-white uikit-px-4 uikit-pb-10px uikit-pt-20px sm:uikit-px-6", [e.customModalHeaderClasses]])
+    return (e, n) => (r(), H(O, { to: "body" }, [
+      y(F, {
+        appear: o.value,
+        name: "modal-transition",
+        duration: { enter: 500, leave: 250 },
+        onBeforeEnter: p,
+        onAfterEnter: M,
+        onAfterLeave: B
+      }, {
+        default: K(() => [
+          N(l("div", {
+            ref: "backdrop",
+            class: i(["bbt-backdrop uikit-fixed uikit-left-0 uikit-top-0 uikit-z-50 uikit-h-full uikit-w-full", [
+              t.customBackdropClasses,
+              {
+                "uikit-bg-w-secondary/70": o.value
+              },
+              { "uikit-bg-transparent": !o.value },
+              { "sm:uikit-pt-[30px]": !t.centered }
+            ]]),
+            onClick: L,
+            onMousedown: E,
+            onMouseup: I
           }, [
-            e.withCloseIcon ? (m(), y("button", {
-              key: 0,
-              id: "close-icon-btn",
-              "data-cy": "bbt-default-close-icon-btn",
-              class: s(["uikit-absolute uikit-right-15px uikit-top-15px uikit-z-10 uikit-bg-transparent uikit-p-5px", e.closeIconBtnClasses]),
-              type: "button",
-              "aria-label": "Close",
-              onClick: D(o, ["prevent", "stop"])
+            l("dialog", {
+              id: t.id,
+              ref: "modalDialog",
+              "data-cy": t.dataCy,
+              class: i(["uikit-modal-dialog uikit-mx-auto uikit-block uikit-w-full uikit-overflow-y-auto uikit-overflow-x-hidden uikit-rounded uikit-border-none uikit-bg-transparent uikit-bg-white uikit-p-0 uikit-shadow-lg uikit-no-scrollbar uikit-safe-bottom max-sm:uikit-fixed max-sm:uikit-bottom-0 max-sm:uikit-max-h-[95%] max-sm:uikit-rounded-bl-none max-sm:uikit-rounded-br-none sm:uikit-h-auto", [
+                t.customModalDialogClasses,
+                {
+                  "centered sm:uikit-absolute sm:uikit-top-1/2 sm:-uikit-translate-y-1/2": t.centered
+                },
+                { "uikit-static": !t.centered },
+                `base-${t.size}`,
+                t.fullHeight ? "uikit-h-[95%]" : "uikit-h-auto"
+              ]]),
+              tabindex: "-1",
+              onClick: n[1] || (n[1] = (b) => c("dialogClick", b)),
+              onFocusin: z
             }, [
-              F(K(V), {
-                class: s(["bbt-close-icon uikit-box-border", e.closeIcon?.classes]),
-                width: e.closeIcon?.size || 20,
-                height: e.closeIcon?.size || 20
-              }, null, 8, ["class", "width", "height"])
-            ], 2)) : h("", !0),
-            d(t.$slots, "header", { closeModal: o }, () => [
-              a("span", {
-                class: s(["uikit-w-auto uikit-text-18 uikit-font-semibold sm:uikit-text-22", e.titleClasses]),
-                innerHTML: e.headerTitle
-              }, null, 10, U)
-            ])
-          ], 2),
-          a("div", {
-            class: s(["uikit-bbt-body uikit-flex-auto uikit-overflow-y-auto uikit-overflow-x-hidden uikit-px-4 uikit-pb-0 uikit-no-scrollbar sm:uikit-px-6 sm:uikit-pb-25px", [e.customModalBodyClasses]])
-          }, [
-            d(t.$slots, "body", { closeModal: o })
-          ], 2),
-          t.$slots.footer ? (m(), y("div", {
-            key: 0,
-            class: s(["uikit-bbt-footer uikit-sticky uikit-bottom-0 uikit-border-0 uikit-bg-white uikit-px-4 uikit-py-15px sm:uikit-px-6", e.customModalFooterClasses])
-          }, [
-            d(t.$slots, "footer", { closeModal: o })
-          ], 2)) : h("", !0),
-          d(t.$slots, "fixed-bottom")
-        ], 42, P)
-      ], 34)
+              l("div", {
+                class: i(["default-header uikit-sticky uikit-top-0 uikit-z-10 uikit-rounded-t uikit-border-0 uikit-bg-white uikit-px-4 uikit-pb-10px uikit-pt-20px sm:uikit-px-6", [t.customModalHeaderClasses]])
+              }, [
+                t.withCloseIcon ? (r(), C("button", {
+                  key: 0,
+                  id: "close-icon-btn",
+                  "data-cy": "bbt-default-close-icon-btn",
+                  class: i(["uikit-absolute uikit-right-15px uikit-top-15px uikit-z-10 uikit-bg-transparent uikit-p-5px", t.closeIconBtnClasses]),
+                  type: "button",
+                  "aria-label": "Close",
+                  onClick: n[0] || (n[0] = S((b) => o.value = !1, ["prevent", "stop"]))
+                }, [
+                  y(U(A), {
+                    class: i(["bbt-close-icon uikit-box-border", t.closeIcon?.classes]),
+                    width: t.closeIcon?.size || 20,
+                    height: t.closeIcon?.size || 20
+                  }, null, 8, ["class", "width", "height"])
+                ], 2)) : w("", !0),
+                d(e.$slots, "header", { closeModal: s }, () => [
+                  l("span", {
+                    class: i(["uikit-w-auto uikit-text-18 uikit-font-semibold sm:uikit-text-22", t.titleClasses]),
+                    innerHTML: t.headerTitle
+                  }, null, 10, R)
+                ])
+              ], 2),
+              l("div", {
+                class: i(["uikit-bbt-body uikit-flex-auto uikit-overflow-y-auto uikit-overflow-x-hidden uikit-px-4 uikit-pb-0 uikit-no-scrollbar sm:uikit-px-6 sm:uikit-pb-25px", [t.customModalBodyClasses]])
+              }, [
+                d(e.$slots, "body", { closeModal: s })
+              ], 2),
+              e.$slots.footer ? (r(), C("div", {
+                key: 0,
+                class: i(["uikit-bbt-footer uikit-sticky uikit-bottom-0 uikit-border-0 uikit-bg-white uikit-px-4 uikit-py-15px sm:uikit-px-6", t.customModalFooterClasses])
+              }, [
+                d(e.$slots, "footer", { closeModal: s })
+              ], 2)) : w("", !0),
+              d(e.$slots, "fixed-bottom")
+            ], 42, P)
+          ], 34), [
+            [V, o.value]
+          ])
+        ]),
+        _: 3
+      }, 8, ["appear"])
     ]));
   }
 });
 export {
-  j as default
+  q as default
 };