@stachelock/ui 0.5.4 → 0.6.1

package/README.md

@@ -29,6 +29,106 @@ Make sure you have the required peer dependencies installed:
 npm install vue@^3.3.0 tailwindcss@^3.4.0
 ```
 
+### Component-Specific Dependencies
+
+This library externalizes heavy dependencies to keep the core bundle small. Install only what you need based on the components you use:
+
+#### Core Dependencies (install if using basic components)
+
+```bash
+# Vue Router (for NavLink, navigation components)
+npm install vue-router
+
+# Headless UI components (dropdowns, modals, tabs, etc.)
+npm install @headlessui/vue @heroicons/vue
+
+# Utility libraries (used across many components)
+npm install @vueuse/core lodash-es
+```
+
+#### Form Components
+
+```bash
+# Form validation (TextInput, SelectInput, etc. with validation)
+npm install vee-validate yup
+
+# Date picker (DatepickerInput)
+npm install @vuepic/vue-datepicker date-fns dayjs
+
+# Phone number input (PhoneInput)
+npm install libphonenumber-js vue-circle-flags
+
+# Rich text editor (RichTextInput)
+npm install @tiptap/vue-3 @tiptap/starter-kit @tiptap/pm \
+  @tiptap/extension-link @tiptap/extension-highlight \
+  @tiptap/extension-placeholder @tiptap/extension-task-item \
+  @tiptap/extension-task-list @tiptap/extension-text-align \
+  @tiptap/extension-underline
+```
+
+#### Data Display Components
+
+```bash
+# Tables (UiTable)
+npm install @tanstack/vue-table @tanstack/table-core
+
+# Charts (LineChart, BarChart, PieChart, etc.)
+npm install echarts vue-echarts
+```
+
+#### Media Components
+
+```bash
+# Image cropper (ImageCropperModal)
+npm install vue-advanced-cropper
+
+# Cloudinary images (CloudinaryImage)
+npm install @cloudinary/url-gen @cloudinary/vue
+
+# Lottie animations (LottieAnimation)
+npm install vue3-lottie lottie-web
+```
+
+#### Map Components
+
+```bash
+# Google Maps (UiMap, GoogleMap)
+npm install @googlemaps/js-api-loader vue3-google-map
+```
+
+#### Quick Install (All Optional Dependencies)
+
+If you want to use all components, install everything at once:
+
+```bash
+npm install vue-router @headlessui/vue @heroicons/vue @vueuse/core lodash-es \
+  vee-validate yup @vuepic/vue-datepicker date-fns dayjs \
+  libphonenumber-js vue-circle-flags \
+  @tiptap/vue-3 @tiptap/starter-kit @tiptap/pm @tiptap/extension-link \
+  @tiptap/extension-highlight @tiptap/extension-placeholder \
+  @tiptap/extension-task-item @tiptap/extension-task-list \
+  @tiptap/extension-text-align @tiptap/extension-underline \
+  @tanstack/vue-table @tanstack/table-core echarts vue-echarts \
+  vue-advanced-cropper @cloudinary/url-gen @cloudinary/vue \
+  vue3-lottie lottie-web @googlemaps/js-api-loader vue3-google-map \
+  vue3-observe-visibility
+```
+
+### Troubleshooting Missing Dependencies
+
+If you see errors like `Cannot find module 'X'` or `X is not defined`, it means you're using a component that requires an optional dependency. Check the [Component-Specific Dependencies](#component-specific-dependencies) section above to install the required package.
+
+Common error messages and their fixes:
+
+| Error | Fix |
+|-------|-----|
+| `Cannot find module '@vuepic/vue-datepicker'` | `npm install @vuepic/vue-datepicker date-fns dayjs` |
+| `Cannot find module '@tiptap/vue-3'` | Install all Tiptap packages (see Rich text editor section) |
+| `Cannot find module 'echarts'` | `npm install echarts vue-echarts` |
+| `Cannot find module '@heroicons/vue/...'` | `npm install @heroicons/vue` |
+| `Cannot find module 'libphonenumber-js'` | `npm install libphonenumber-js vue-circle-flags` |
+| `Cannot find module 'vue-router'` | `npm install vue-router` |
+
 ## 🚀 Quick Start
 
 ### 1. Import Styles
@@ -289,15 +389,28 @@ MIT License - see [LICENSE](LICENSE) file for details.
 
 ## 📊 Bundle Size
 
-This library is designed to be tree-shakeable. When you import individual components, only the necessary code is included in your bundle:
+This library is designed to be tree-shakeable and lightweight. Heavy dependencies are externalized so you only pay for what you use.
+
+**Core package size:** ~364 KB (gzipped) / ~1.8 MB (unpacked)
+
+When you import individual components, only the necessary code is included in your bundle:
 
 | Component | Gzipped Size |
 |-----------|--------------|
-| Button  | ~2.1kb       |
-| TextInput | ~3.2kb     |
-| Loading | ~1.1kb       |
+| Button    | ~3.1kb       |
+| TextInput | ~3.5kb       |
+| Loading   | ~1.1kb       |
+| Modal     | ~2.8kb       |
+| Table     | ~4.5kb       |
+
+### Why External Dependencies?
+
+We externalize heavy third-party libraries (like TipTap, ECharts, Vue Datepicker) to:
 
-Full library (all components): ~8.5kb gzipped
+1. **Reduce bundle size** - You only install what you need
+2. **Avoid duplication** - If you're already using these libraries, they won't be bundled twice
+3. **Version control** - You control which versions of dependencies you use
+4. **Tree-shaking** - Better dead code elimination across your project
 
 ---
 

package/dist/AddDeleteButtonGroup.vue_vue_type_script_setup_true_lang-6taLcPq0.js

@@ -0,0 +1,77 @@
+import { defineComponent as g, createElementBlock as m, openBlock as y, createElementVNode as e, normalizeClass as d, createVNode as i, unref as n } from "vue";
+import { PlusCircleIcon as c, ArrowDownTrayIcon as v, MinusCircleIcon as k } from "@heroicons/vue/24/outline";
+const x = {
+  class: "sl-isolate sl-inline-flex sl-rounded-md sl-shadow-sm",
+  "data-testid": "add-delete-button-group"
+}, f = ["disabled"], p = ["disabled"], A = ["disabled"], C = /* @__PURE__ */ g({
+  __name: "AddDeleteButtonGroup",
+  props: {
+    buttonAttributes: {
+      type: Object,
+      default: () => ({
+        add: { disabled: !0 },
+        save: { disabled: !0 },
+        remove: { disabled: !0 }
+      })
+    }
+  },
+  emits: ["button-clicked"],
+  setup(t, { emit: b }) {
+    const r = t, u = b, a = (l) => {
+      l === "add" && r.buttonAttributes.add.disabled || l === "save" && r.buttonAttributes.save?.disabled || l === "remove" && r.buttonAttributes.remove.disabled || u("button-clicked", l);
+    };
+    return (l, s) => (y(), m("span", x, [
+      e("button", {
+        type: "button",
+        onClick: s[0] || (s[0] = (o) => a("add")),
+        disabled: t.buttonAttributes.add.disabled,
+        class: d([
+          "sl-relative sl-inline-flex sl-items-center sl-rounded-l-md sl-px-3 sl-py-2 sl-text-sm sl-font-semibold sl-ring-1 sl-ring-inset sl-ring-gray-300 dark:sl-ring-slate-600 focus:sl-z-10 sl-transition-colors",
+          t.buttonAttributes.add.disabled ? "sl-bg-gray-200 dark:sl-bg-slate-700 sl-text-gray-500 dark:sl-text-gray-300 sl-cursor-not-allowed" : "sl-bg-white dark:sl-bg-slate-800 sl-text-gray-800 dark:sl-text-gray-200 hover:sl-bg-gray-50 dark:hover:sl-bg-slate-700"
+        ]),
+        "data-testid": "add-button"
+      }, [
+        i(n(c), {
+          class: "sl-h-4 sl-w-4",
+          "aria-hidden": "true"
+        }),
+        s[3] || (s[3] = e("span", { class: "sl-sr-only" }, "Add", -1))
+      ], 10, f),
+      e("button", {
+        type: "button",
+        onClick: s[1] || (s[1] = (o) => a("save")),
+        disabled: t.buttonAttributes.save?.disabled,
+        class: d([
+          "sl-relative sl--ml-px sl-inline-flex sl-items-center sl-px-3 sl-py-2 sl-text-sm sl-font-semibold sl-ring-1 sl-ring-inset sl-ring-gray-300 dark:sl-ring-slate-600 focus:sl-z-10 sl-transition-colors",
+          t.buttonAttributes.save?.disabled ? "sl-bg-gray-200 dark:sl-bg-slate-700 sl-text-gray-500 dark:sl-text-gray-300 sl-cursor-not-allowed" : "sl-bg-white dark:sl-bg-slate-800 sl-text-gray-800 dark:sl-text-gray-200 hover:sl-bg-gray-50 dark:hover:sl-bg-slate-700"
+        ]),
+        "data-testid": "save-button"
+      }, [
+        i(n(v), {
+          class: "sl-h-4 sl-w-4",
+          "aria-hidden": "true"
+        }),
+        s[4] || (s[4] = e("span", { class: "sl-sr-only" }, "Save", -1))
+      ], 10, p),
+      e("button", {
+        type: "button",
+        onClick: s[2] || (s[2] = (o) => a("remove")),
+        disabled: t.buttonAttributes.remove.disabled,
+        class: d([
+          "sl-relative sl--ml-px sl-inline-flex sl-items-center sl-rounded-r-md sl-px-3 sl-py-2 sl-text-sm sl-font-semibold sl-ring-1 sl-ring-inset sl-ring-gray-300 dark:sl-ring-slate-600 focus:sl-z-10 sl-transition-colors",
+          t.buttonAttributes.remove.disabled ? "sl-bg-gray-200 dark:sl-bg-slate-700 sl-text-gray-500 dark:sl-text-gray-300 sl-cursor-not-allowed" : "sl-bg-white dark:sl-bg-slate-800 sl-text-gray-800 dark:sl-text-gray-200 hover:sl-bg-gray-50 dark:hover:sl-bg-slate-700"
+        ]),
+        "data-testid": "remove-button"
+      }, [
+        i(n(k), {
+          class: "sl-h-4 sl-w-4",
+          "aria-hidden": "true"
+        }),
+        s[5] || (s[5] = e("span", { class: "sl-sr-only" }, "Remove", -1))
+      ], 10, A)
+    ]));
+  }
+});
+export {
+  C as _
+};

package/dist/{AlertModal.vue_vue_type_script_setup_true_lang-C6q8Mpl4.js → AlertModal.vue_vue_type_script_setup_true_lang-DzhVQdx4.js}

@@ -1,32 +1,13 @@
-import { createElementBlock as k, openBlock as i, createElementVNode as o, defineComponent as V, ref as M, computed as c, watch as B, createBlock as y, withCtx as m, renderSlot as $, createCommentVNode as z, toDisplayString as u, withDirectives as K, vModelCheckbox as T, normalizeClass as x, resolveDynamicComponent as E } from "vue";
-import { _ as I } from "./BaseModal.vue_vue_type_script_setup_true_lang-B67Pt3tW.js";
-import { a as N, r as _ } from "./InformationCircleIcon-B322GNIt.js";
-import { r as A } from "./ExclamationCircleIcon-DjxYk45_.js";
-import { r as b } from "./ExclamationTriangleIcon-BNKYmV_J.js";
-function j(e, f) {
-  return i(), k("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    "stroke-width": "1.5",
-    stroke: "currentColor",
-    "aria-hidden": "true",
-    "data-slot": "icon"
-  }, [
-    o("path", {
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      d: "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"
-    })
-  ]);
-}
-const q = { class: "sl-text-base sl-font-semibold sl-leading-6 sl-text-gray-900 dark:sl-text-white" }, L = { class: "sl-text-sm sl-text-gray-500 dark:sl-text-slate-300" }, O = {
+import { defineComponent as D, ref as V, computed as c, watch as I, createBlock as y, openBlock as d, withCtx as m, createElementVNode as n, renderSlot as M, createElementBlock as B, createCommentVNode as E, toDisplayString as u, withDirectives as T, vModelCheckbox as z, normalizeClass as h, resolveDynamicComponent as K } from "vue";
+import { QuestionMarkCircleIcon as N, CheckCircleIcon as A, InformationCircleIcon as q, ExclamationCircleIcon as L, ExclamationTriangleIcon as x } from "@heroicons/vue/24/outline";
+import { _ as O } from "./BaseModal.vue_vue_type_script_setup_true_lang--iGzFCnC.js";
+const P = { class: "sl-text-base sl-font-semibold sl-leading-6 sl-text-gray-900 dark:sl-text-white" }, U = { class: "sl-text-sm sl-text-gray-500 dark:sl-text-slate-300" }, _ = {
   key: 0,
   class: "sl-mt-4 sl-flex sl-items-center"
-}, P = {
+}, $ = {
   for: "dont-remind-checkbox",
   class: "sl-ml-2 sl-text-sm sl-text-gray-500 dark:sl-text-slate-300"
-}, w = "alert_modal_dont_remind_", G = /* @__PURE__ */ V({
+}, b = "alert_modal_dont_remind_", X = /* @__PURE__ */ D({
   __name: "AlertModal",
   props: {
     /** Whether the modal is visible (v-model compatible) */
@@ -91,34 +72,34 @@ const q = { class: "sl-text-base sl-font-semibold sl-leading-6 sl-text-gray-900
     }
   },
   emits: ["update:modelValue", "confirm", "cancel"],
-  setup(e, { emit: f }) {
-    const t = e, n = f, s = M(!1), p = () => {
+  setup(e, { emit: C }) {
+    const t = e, o = C, s = V(!1), k = () => {
       if (!t.showDontRemind || !t.dontRemindKey) return !1;
       try {
-        return sessionStorage.getItem(w + t.dontRemindKey) === "true";
+        return sessionStorage.getItem(b + t.dontRemindKey) === "true";
       } catch {
         return !1;
       }
-    }, C = () => {
+    }, w = () => {
       if (!(!t.showDontRemind || !t.dontRemindKey || !s.value))
         try {
-          sessionStorage.setItem(w + t.dontRemindKey, "true");
+          sessionStorage.setItem(b + t.dontRemindKey, "true");
         } catch {
         }
-    }, r = c({
+    }, a = c({
       get: () => t.modelValue,
-      set: (l) => n("update:modelValue", l)
+      set: (l) => o("update:modelValue", l)
     });
-    B(() => t.modelValue, (l) => {
-      l && p() && (n("confirm"), n("update:modelValue", !1)), l && (s.value = !1);
+    I(() => t.modelValue, (l) => {
+      l && k() && (o("confirm"), o("update:modelValue", !1)), l && (s.value = !1);
     });
-    const v = {
-      warning: b,
-      danger: A,
-      info: _,
-      success: N,
-      question: j
-    }, S = c(() => v[t.icon] || b), g = {
+    const p = {
+      warning: x,
+      danger: L,
+      info: q,
+      success: A,
+      question: N
+    }, v = c(() => p[t.icon] || x), f = {
       warning: {
         bgColor: "sl-bg-yellow-100 dark:sl-bg-yellow-900/30",
         iconColor: "sl-text-yellow-600 dark:sl-text-yellow-400"
@@ -139,56 +120,55 @@ const q = { class: "sl-text-base sl-font-semibold sl-leading-6 sl-text-gray-900
         bgColor: "sl-bg-gray-100 dark:sl-bg-slate-700",
         iconColor: "sl-text-gray-600 dark:sl-text-slate-300"
       }
-    }, h = c(() => g[t.icon] || g.warning), R = () => {
-      C(), n("confirm"), r.value = !1;
-    }, D = () => {
-      n("cancel"), r.value = !1;
+    }, g = c(() => f[t.icon] || f.warning), S = () => {
+      w(), o("confirm"), a.value = !1;
+    }, R = () => {
+      o("cancel"), a.value = !1;
     };
-    return (l, a) => (i(), y(I, {
-      modelValue: r.value,
-      "onUpdate:modelValue": a[1] || (a[1] = (d) => r.value = d),
+    return (l, r) => (d(), y(O, {
+      modelValue: a.value,
+      "onUpdate:modelValue": r[1] || (r[1] = (i) => a.value = i),
       size: e.size,
       "confirm-text": e.confirmText,
       "cancel-text": e.cancelText,
       "confirm-theme": e.theme,
       "show-cancel": e.showCancel,
       "show-close-button": !1,
-      onCancel: D,
-      onConfirm: R
+      onCancel: R,
+      onConfirm: S
     }, {
       icon: m(() => [
-        o("div", {
-          class: x(["sl-flex sl-h-12 sl-w-12 sl-flex-shrink-0 sl-items-center sl-justify-center sl-rounded-full sm:sl-h-10 sm:sl-w-10", h.value.bgColor])
+        n("div", {
+          class: h(["sl-flex sl-h-12 sl-w-12 sl-flex-shrink-0 sl-items-center sl-justify-center sl-rounded-full sm:sl-h-10 sm:sl-w-10", g.value.bgColor])
         }, [
-          (i(), y(E(S.value), {
-            class: x(["sl-h-6 sl-w-6", h.value.iconColor]),
+          (d(), y(K(v.value), {
+            class: h(["sl-h-6 sl-w-6", g.value.iconColor]),
             "aria-hidden": "true"
           }, null, 8, ["class"]))
         ], 2)
       ]),
       header: m(() => [
-        o("span", q, u(e.title), 1)
+        n("span", P, u(e.title), 1)
       ]),
       body: m(() => [
-        o("p", L, u(e.message), 1),
-        $(l.$slots, "body-extra"),
-        e.showDontRemind ? (i(), k("div", O, [
-          K(o("input", {
+        n("p", U, u(e.message), 1),
+        M(l.$slots, "body-extra"),
+        e.showDontRemind ? (d(), B("div", _, [
+          T(n("input", {
             id: "dont-remind-checkbox",
-            "onUpdate:modelValue": a[0] || (a[0] = (d) => s.value = d),
+            "onUpdate:modelValue": r[0] || (r[0] = (i) => s.value = i),
             type: "checkbox",
             class: "sl-h-4 sl-w-4 sl-rounded sl-border-gray-300 dark:sl-border-slate-600 sl-bg-white dark:sl-bg-slate-900 sl-text-primary-600 focus:sl-ring-primary-600"
           }, null, 512), [
-            [T, s.value]
+            [z, s.value]
           ]),
-          o("label", P, u(e.dontRemindLabel), 1)
-        ])) : z("", !0)
+          n("label", $, u(e.dontRemindLabel), 1)
+        ])) : E("", !0)
       ]),
       _: 3
     }, 8, ["modelValue", "size", "confirm-text", "cancel-text", "confirm-theme", "show-cancel"]));
   }
 });
 export {
-  G as _
+  X as _
 };
-//# sourceMappingURL=AlertModal.vue_vue_type_script_setup_true_lang-C6q8Mpl4.js.map

package/dist/BackgroundGradientWrapper.vue_vue_type_script_setup_true_lang-C8msTrTn.js

@@ -31,4 +31,3 @@ const u = /* @__PURE__ */ d({
 export {
   u as _
 };
-//# sourceMappingURL=BackgroundGradientWrapper.vue_vue_type_script_setup_true_lang-C8msTrTn.js.map

package/dist/BarChart.vue_vue_type_script_setup_true_lang-xCb0DCbf.js

@@ -64,4 +64,3 @@ const B = /* @__PURE__ */ p({
 export {
   B as _
 };
-//# sourceMappingURL=BarChart.vue_vue_type_script_setup_true_lang-xCb0DCbf.js.map

package/dist/{BaseModal.vue_vue_type_script_setup_true_lang-B67Pt3tW.js → BaseModal.vue_vue_type_script_setup_true_lang--iGzFCnC.js}

@@ -1,14 +1,13 @@
-import { defineComponent as z, computed as g, createBlock as h, openBlock as a, unref as t, withCtx as r, createVNode as m, createElementVNode as l, normalizeStyle as S, normalizeClass as o, createElementBlock as u, createCommentVNode as i, renderSlot as y, toDisplayString as p } from "vue";
-import { r as V } from "./XMarkIcon-Cwy3T6p8.js";
-import { S as $, h as x } from "./transition-_rPfnoET.js";
-import { Y as T, G as j, V as F } from "./dialog-BJ2Ld8l3.js";
-const N = { class: "sl-fixed sl-inset-0 sl-z-10 sl-w-screen sl-overflow-y-auto" }, E = { class: "sl-flex sl-min-h-full sl-items-end sl-justify-center sl-p-4 sl-text-center sm:sl-items-center sm:sl-p-0" }, G = {
+import { defineComponent as z, computed as y, createBlock as h, openBlock as a, unref as t, withCtx as o, createVNode as i, createElementVNode as l, normalizeStyle as T, normalizeClass as r, createElementBlock as u, createCommentVNode as m, renderSlot as g, toDisplayString as p } from "vue";
+import { TransitionRoot as $, Dialog as S, TransitionChild as x, DialogPanel as V, DialogTitle as j } from "@headlessui/vue";
+import { XMarkIcon as D } from "@heroicons/vue/24/outline";
+const F = { class: "sl-fixed sl-inset-0 sl-z-10 sl-w-screen sl-overflow-y-auto" }, N = { class: "sl-flex sl-min-h-full sl-items-end sl-justify-center sl-p-4 sl-text-center sm:sl-items-center sm:sl-p-0" }, E = {
   key: 0,
   class: "sl-mx-auto sl-flex sl-h-12 sl-w-12 sl-flex-shrink-0 sl-items-center sl-justify-center sl-rounded-full sm:sl-mx-0 sm:sl-h-10 sm:sl-w-10"
-}, O = {
+}, M = {
   key: 1,
   class: "sl-bg-gray-50 dark:sl-bg-slate-800/50 sl-px-4 sl-py-3 sm:sl-flex sm:sl-flex-row-reverse sm:sl-px-6 sl-gap-3"
-}, W = /* @__PURE__ */ z({
+}, P = /* @__PURE__ */ z({
   __name: "BaseModal",
   props: {
     /** Controls modal visibility (v-model) */
@@ -59,7 +58,7 @@ const N = { class: "sl-fixed sl-inset-0 sl-z-10 sl-w-screen sl-overflow-y-auto"
   },
   emits: ["update:modelValue", "confirm", "cancel", "close"],
   setup(e, { emit: b }) {
-    const d = e, n = b, w = g(() => {
+    const d = e, n = b, w = y(() => {
       const s = {
         sm: "sm:sl-max-w-sm",
         md: "sm:sl-max-w-md",
@@ -69,7 +68,7 @@ const N = { class: "sl-fixed sl-inset-0 sl-z-10 sl-w-screen sl-overflow-y-auto"
         full: "sm:sl-max-w-full sm:sl-mx-4"
       };
       return s[d.size] || s.md;
-    }), v = g(() => {
+    }), v = y(() => {
       const s = {
         sm: "24rem",
         // 384px
@@ -86,7 +85,7 @@ const N = { class: "sl-fixed sl-inset-0 sl-z-10 sl-w-screen sl-overflow-y-auto"
       return {
         maxWidth: s[d.size] || s.md
       };
-    }), k = g(() => {
+    }), k = y(() => {
       const s = {
         primary: "sl-bg-primary-600 hover:sl-bg-primary-500",
         secondary: "sl-bg-gray-600 hover:sl-bg-gray-500",
@@ -110,14 +109,14 @@ const N = { class: "sl-fixed sl-inset-0 sl-z-10 sl-w-screen sl-overflow-y-auto"
       as: "template",
       show: e.modelValue
     }, {
-      default: r(() => [
-        m(t(T), {
+      default: o(() => [
+        i(t(S), {
           as: "div",
           class: "sl-relative sl-z-50",
           onClose: f
         }, {
-          default: r(() => [
-            m(t(x), {
+          default: o(() => [
+            i(t(x), {
               as: "template",
               enter: "sl-ease-out sl-duration-300",
               "enter-from": "sl-opacity-0",
@@ -126,14 +125,14 @@ const N = { class: "sl-fixed sl-inset-0 sl-z-10 sl-w-screen sl-overflow-y-auto"
               "leave-from": "sl-opacity-100",
               "leave-to": "sl-opacity-0"
             }, {
-              default: r(() => [...c[0] || (c[0] = [
+              default: o(() => [...c[0] || (c[0] = [
                 l("div", { class: "sl-fixed sl-inset-0 sl-bg-gray-500/75 dark:sl-bg-slate-900/80 sl-transition-opacity" }, null, -1)
               ])]),
               _: 1
             }),
-            l("div", N, [
-              l("div", E, [
-                m(t(x), {
+            l("div", F, [
+              l("div", N, [
+                i(t(x), {
                   as: "template",
                   enter: "sl-ease-out sl-duration-300",
                   "enter-from": "sl-opacity-0 sl-translate-y-4 sm:sl-translate-y-0 sm:sl-scale-95",
@@ -142,16 +141,16 @@ const N = { class: "sl-fixed sl-inset-0 sl-z-10 sl-w-screen sl-overflow-y-auto"
                   "leave-from": "sl-opacity-100 sl-translate-y-0 sm:sl-scale-100",
                   "leave-to": "sl-opacity-0 sl-translate-y-4 sm:sl-translate-y-0 sm:sl-scale-95"
                 }, {
-                  default: r(() => [
-                    m(t(j), {
-                      class: o([
+                  default: o(() => [
+                    i(t(V), {
+                      class: r([
                         "sl-relative sl-transform sl-rounded-lg sl-bg-white dark:sl-bg-slate-800 sl-text-left sl-shadow-xl sl-transition-all",
                         "sm:sl-my-8 sl-w-full",
                         w.value
                       ]),
-                      style: S(v.value)
+                      style: T(v.value)
                     }, {
-                      default: r(() => [
+                      default: o(() => [
                         e.showCloseButton ? (a(), u("button", {
                           key: 0,
                           type: "button",
@@ -159,46 +158,46 @@ const N = { class: "sl-fixed sl-inset-0 sl-z-10 sl-w-screen sl-overflow-y-auto"
                           onClick: f
                         }, [
                           c[1] || (c[1] = l("span", { class: "sl-sr-only" }, "Close", -1)),
-                          m(t(V), {
+                          i(t(D), {
                             class: "sl-h-6 sl-w-6",
                             "aria-hidden": "true"
                           })
-                        ])) : i("", !0),
+                        ])) : m("", !0),
                         l("div", {
-                          class: o(["sl-bg-white dark:sl-bg-slate-800 sl-px-4 sl-pb-4 sl-pt-5 sm:sl-p-6", { "sm:sl-pb-4": e.showFooter }])
+                          class: r(["sl-bg-white dark:sl-bg-slate-800 sl-px-4 sl-pb-4 sl-pt-5 sm:sl-p-6", { "sm:sl-pb-4": e.showFooter }])
                         }, [
                           l("div", {
-                            class: o({ "sm:sl-flex sm:sl-items-start": !!s.$slots.icon })
+                            class: r({ "sm:sl-flex sm:sl-items-start": !!s.$slots.icon })
                           }, [
-                            s.$slots.icon ? (a(), u("div", G, [
-                              y(s.$slots, "icon")
-                            ])) : i("", !0),
+                            s.$slots.icon ? (a(), u("div", E, [
+                              g(s.$slots, "icon")
+                            ])) : m("", !0),
                             l("div", {
-                              class: o({ "sl-mt-3 sl-text-center sm:sl-ml-4 sm:sl-mt-0 sm:sl-text-left": !!s.$slots.icon, "sl-flex-1": !0 })
+                              class: r({ "sl-mt-3 sl-text-center sm:sl-ml-4 sm:sl-mt-0 sm:sl-text-left": !!s.$slots.icon, "sl-flex-1": !0 })
                             }, [
-                              s.$slots.header ? (a(), h(t(F), {
+                              s.$slots.header ? (a(), h(t(j), {
                                 key: 0,
                                 as: "h3",
                                 class: "sl-text-base sl-font-semibold sl-leading-6 sl-text-gray-900 dark:sl-text-white"
                               }, {
-                                default: r(() => [
-                                  y(s.$slots, "header")
+                                default: o(() => [
+                                  g(s.$slots, "header")
                                 ]),
                                 _: 3
-                              })) : i("", !0),
+                              })) : m("", !0),
                               l("div", {
-                                class: o([{ "sl-mt-2": !!s.$slots.header }, "sl-text-gray-600 dark:sl-text-slate-300"])
+                                class: r([{ "sl-mt-2": !!s.$slots.header }, "sl-text-gray-600 dark:sl-text-slate-300"])
                               }, [
-                                y(s.$slots, "body")
+                                g(s.$slots, "body")
                               ], 2)
                             ], 2)
                           ], 2)
                         ], 2),
-                        e.showFooter ? (a(), u("div", O, [
-                          y(s.$slots, "footer", {}, () => [
+                        e.showFooter ? (a(), u("div", M, [
+                          g(s.$slots, "footer", {}, () => [
                             l("button", {
                               type: "button",
-                              class: o([
+                              class: r([
                                 "sl-inline-flex sl-w-full sl-justify-center sl-rounded-md sl-px-3 sl-py-2 sl-text-sm sl-font-semibold sl-text-white sl-shadow-sm sm:sl-w-auto",
                                 k.value
                               ]),
@@ -209,9 +208,9 @@ const N = { class: "sl-fixed sl-inset-0 sl-z-10 sl-w-screen sl-overflow-y-auto"
                               type: "button",
                               class: "sl-mt-3 sl-inline-flex sl-w-full sl-justify-center sl-rounded-md sl-bg-white dark:sl-bg-slate-700 sl-px-3 sl-py-2 sl-text-sm sl-font-semibold sl-text-gray-900 dark:sl-text-gray-200 sl-shadow-sm sl-ring-1 sl-ring-inset sl-ring-gray-300 dark:sl-ring-slate-600 hover:sl-bg-gray-50 dark:hover:sl-bg-slate-600 sm:sl-mt-0 sm:sl-w-auto",
                               onClick: B
-                            }, p(e.cancelText), 1)) : i("", !0)
+                            }, p(e.cancelText), 1)) : m("", !0)
                           ])
-                        ])) : i("", !0)
+                        ])) : m("", !0)
                       ]),
                       _: 3
                     }, 8, ["class", "style"])
@@ -229,6 +228,5 @@ const N = { class: "sl-fixed sl-inset-0 sl-z-10 sl-w-screen sl-overflow-y-auto"
   }
 });
 export {
-  W as _
+  P as _
 };
-//# sourceMappingURL=BaseModal.vue_vue_type_script_setup_true_lang-B67Pt3tW.js.map