spicykatsu 0.0.33 → 0.0.34

package/README.md

@@ -3,4 +3,6 @@
 Fun, simple library for Vue3. Something for me to play around with in my projects.  
 The idea is to make things simple and lightweight. While keeping functionality.
 
-Included will be componenets and utilites. Maybe more in the future.
+Included will be componenets and utilites. Maybe more in the future.
+
+Docs: [SpicyKatsu Docs](https://satoru8.gitlab.io/spicykatsuvlib/)

package/dist/spicykatsu.es.js

@@ -1,8 +1,8 @@
-import { ref as w, openBlock as r, createBlock as Y, Transition as x, withCtx as $, createElementBlock as i, normalizeClass as h, toDisplayString as d, createCommentVNode as c, computed as m, normalizeStyle as k, createElementVNode as u, renderSlot as S, onMounted as V, onUnmounted as N, createVNode as F, Fragment as B, renderList as T, withDirectives as z, vModelText as P, createTextVNode as E, mergeProps as L, withKeys as M, withModifiers as O } from "vue";
-const U = {
+import { ref as C, watch as H, openBlock as s, createBlock as j, Transition as V, withCtx as E, createElementBlock as i, normalizeClass as S, toDisplayString as f, createCommentVNode as p, computed as x, normalizeStyle as I, createElementVNode as y, renderSlot as B, onMounted as X, onUnmounted as R, createVNode as q, Fragment as M, renderList as F, withDirectives as N, vModelCheckbox as G, createTextVNode as U, vModelText as J, mergeProps as Q, withKeys as P, withModifiers as Y, reactive as Z, nextTick as ee } from "vue";
+const te = {
   key: 0,
   class: "spicyAlertIcon"
-}, W = { key: 1 }, R = {
+}, oe = { key: 1 }, le = {
   __name: "SpicyAlert",
   props: {
     variant: {
@@ -17,33 +17,38 @@ const U = {
     autoClose: { type: Number, default: 0 }
   },
   setup(e) {
-    const t = e, l = w(!0), n = () => {
-      l.value = !1;
+    const t = e, o = C(!0), n = () => {
+      o.value = !1;
     };
-    return t.autoClose > 0 && setTimeout(() => {
-      l.value = !1;
-    }, t.autoClose), (o, a) => (r(), Y(x, { name: "fade" }, {
-      default: $(() => [
-        l.value ? (r(), i("div", {
+    return H(
+      () => t.autoClose,
+      (l) => {
+        l > 0 && setTimeout(() => {
+          o.value = !1;
+        }, l);
+      }
+    ), (l, c) => (s(), j(V, { name: "fade" }, {
+      default: E(() => [
+        o.value ? (s(), i("div", {
           key: 0,
-          class: h(["spicyAlert", e.variant])
+          class: S(["spicyAlert", e.variant])
         }, [
-          e.iconOnly || e.text ? (r(), i("span", U, d(e.icon), 1)) : c("", !0),
-          !e.iconOnly && e.text ? (r(), i("span", W, d(e.text), 1)) : c("", !0),
-          e.closable ? (r(), i("button", {
+          e.iconOnly || e.text ? (s(), i("span", te, f(e.icon), 1)) : p("", !0),
+          !e.iconOnly && e.text ? (s(), i("span", oe, f(e.text), 1)) : p("", !0),
+          e.closable ? (s(), i("button", {
             key: 2,
             class: "closeBtn",
             onClick: n
-          }, "×")) : c("", !0)
-        ], 2)) : c("", !0)
+          }, "×")) : p("", !0)
+        ], 2)) : p("", !0)
       ]),
       _: 1
     }));
   }
-}, j = ["disabled"], H = {
+}, ne = ["disabled"], ae = {
   key: 0,
   class: "spicyBtnIcon"
-}, K = {
+}, se = {
   __name: "SpicyBtn",
   props: {
     variant: {
@@ -64,32 +69,36 @@ const U = {
   },
   emits: ["click"],
   setup(e, { emit: t }) {
-    const l = e, n = m(() => ({
-      "--fontSize": l.fontSize,
-      "--fontWeight": l.fontWeight,
-      "--bgColor": l.bgColor,
-      "--textColor": l.textColor,
-      "--borderColor": l.borderColor,
-      "--hoverColor": l.hoverColor
+    const o = e, n = x(() => ({
+      "--skFontSize": o.fontSize,
+      "--skFontWeight": o.fontWeight,
+      "--skBgColor": o.bgColor,
+      "--skTextColor": o.textColor,
+      "--skBorderColor": o.borderColor,
+      "--hoverColor": o.hoverColor
     }));
-    return (o, a) => (r(), i("button", {
-      class: h(["spicyBtn", { outlined: e.variant === "outlined", disabled: e.disabled }]),
-      style: k({ ...n.value }),
+    return (l, c) => (s(), i("button", {
+      class: S(["spicyBtn", { outlined: e.variant === "outlined", disabled: e.disabled }]),
+      style: I({ ...n.value }),
       disabled: e.disabled,
-      onClick: a[0] || (a[0] = (...f) => o.onClick && o.onClick(...f))
+      onClick: c[0] || (c[0] = (v) => l.$emit("click"))
     }, [
-      e.icon ? (r(), i("span", H, d(e.icon), 1)) : c("", !0),
-      u("span", null, d(e.text), 1),
-      S(o.$slots, "default")
-    ], 14, j));
+      e.icon ? (s(), i("span", ae, f(e.icon), 1)) : p("", !0),
+      y("span", null, f(e.text), 1),
+      B(l.$slots, "default")
+    ], 14, ne));
   }
-}, q = {
+}, ie = ["aria-label"], re = { class: "infoText" }, ce = {
   key: 0,
   class: "navControls"
-}, G = {
+}, ue = /* @__PURE__ */ y("span", { class: "prevBtnIcon" }, "<", -1), de = [
+  ue
+], ye = /* @__PURE__ */ y("span", { class: "nextBtnIcon" }, ">", -1), pe = [
+  ye
+], fe = {
   key: 1,
   class: "pagination"
-}, J = ["onClick"], Q = {
+}, ve = ["onClick"], ge = { class: "page" }, he = {
   __name: "SpicyCarousel",
   props: {
     autoplay: { type: Boolean, default: !1 },
@@ -102,88 +111,245 @@ const U = {
     slides: { type: Array, required: !0 },
     width: { type: String, default: "540px" },
     height: { type: String, default: "300px" },
-    variant: { type: String, default: "" }
+    fullScreen: { type: Boolean, default: !1 },
+    enableImageClick: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, l = m(() => ({
-      "--width": t.width,
-      "--height": t.height,
-      "--activeColor": t.activeColor
-    })), n = w(t.initialSlide), o = m(() => t.slides[n.value]);
+    let t, o, n = !1;
+    const l = e, c = x(() => ({
+      "--width": l.width,
+      "--height": l.height,
+      "--activeColor": l.activeColor
+    })), v = x(() => g.value.fullScreen === !1 ? !1 : l.fullScreen), r = C(l.initialSlide), g = x(() => l.slides[r.value]);
     let a;
-    V(() => {
-      t.autoplay && (a = setInterval(y, t.autoplaySpeed));
-    });
-    const f = () => {
-      n.value = (n.value - 1 + t.slides.length) % t.slides.length;
-    }, y = () => {
-      n.value = (n.value + 1) % t.slides.length;
-    }, b = (g) => {
-      n.value = g;
-    }, s = () => {
+    const d = () => {
+      r.value = (r.value - 1 + l.slides.length) % l.slides.length;
+    }, u = () => {
+      r.value = (r.value + 1) % l.slides.length;
+    }, D = (b) => {
+      r.value = b;
+    }, h = () => {
       clearInterval(a);
-    }, p = () => {
-      t.autoplay && (a = setInterval(y, t.autoplaySpeed));
+    }, w = () => {
+      l.autoplay && (a = setInterval(u, l.autoplaySpeed));
+    }, $ = () => {
+      window.open(g.value.img);
+    }, k = () => {
+      l.enableImageClick && $();
+    }, m = (b) => {
+      t = b.touches[0].clientX, o = b.touches[0].clientY, n = !1;
+    }, O = (b) => {
+      if (!n) {
+        const _ = b.touches[0].clientX - t, L = b.touches[0].clientY - o;
+        Math.abs(_) > Math.abs(L) && (_ > 40 ? (d(), n = !0) : _ < -40 && (u(), n = !0));
+      }
     };
-    return N(() => {
+    return X(() => {
+      l.autoplay && (a = setInterval(u, l.autoplaySpeed));
+    }), R(() => {
       clearInterval(a);
-    }), (g, Me) => (r(), i("div", {
+    }), (b, _) => (s(), i("div", {
       class: "carouselContainer",
-      style: k({ ...l.value }),
-      onMouseenter: s,
-      onMouseleave: p
+      style: I({ ...c.value }),
+      onMouseenter: h,
+      onMouseleave: w,
+      onTouchstart: m,
+      onTouchmove: O
     }, [
-      F(x, {
+      q(V, {
         name: "slide",
         mode: "out-in"
       }, {
-        default: $(() => [
-          (r(), i("div", {
-            key: n.value,
-            class: "slide",
-            style: k({ backgroundImage: `url(${o.value.img})` })
+        default: E(() => [
+          (s(), i("div", {
+            class: S(["slide", { pointCursor: l.enableImageClick }]),
+            key: r.value,
+            style: I({ backgroundImage: `url(${g.value.img})` }),
+            "aria-label": g.value.text,
+            onClick: k
           }, [
-            S(g.$slots, "default"),
-            e.slides[n.value].text ? (r(), i("div", {
+            e.slides[r.value].text ? (s(), i("div", {
               key: 0,
-              class: h(["textOverlay", { fullScreen: e.variant === "fullScreen", disabled: g.disabled }])
-            }, d(e.slides[n.value].text), 3)) : c("", !0)
-          ], 4))
+              class: S(["textOverlay", { fullScreen: v.value }])
+            }, [
+              y("span", re, f(e.slides[r.value].text), 1)
+            ], 2)) : p("", !0),
+            B(b.$slots, "default")
+          ], 14, ie))
         ]),
         _: 3
       }),
-      e.showNavigation ? (r(), i("div", q, [
-        u("div", { class: "prevNav" }, [
-          u("button", {
-            class: "prev",
-            onClick: f
-          }, "<")
+      e.showNavigation ? (s(), i("div", ce, [
+        y("div", { class: "prevNav" }, [
+          y("button", {
+            class: "prevBtn",
+            onClick: d
+          }, de)
         ]),
-        u("div", { class: "nextNav" }, [
-          u("button", {
-            class: "next",
-            onClick: y
-          }, ">")
+        y("div", { class: "nextNav" }, [
+          y("button", {
+            class: "nextBtn",
+            onClick: u
+          }, pe)
         ])
-      ])) : c("", !0),
-      e.showPagination ? (r(), i("div", G, [
-        (r(!0), i(B, null, T(e.slides, (Oe, C) => (r(), i("button", {
-          key: C,
-          onClick: (xe) => b(C),
-          class: h({ active: C === n.value })
-        }, d(C + 1), 11, J))), 128))
-      ])) : c("", !0)
+      ])) : p("", !0),
+      e.showPagination ? (s(), i("div", fe, [
+        (s(!0), i(M, null, F(e.slides, (L, K) => (s(), i("button", {
+          key: K,
+          onClick: (at) => D(K),
+          class: S(["pageBtn", { active: K === r.value }])
+        }, [
+          y("span", ge, f(K + 1), 1)
+        ], 10, ve))), 128))
+      ])) : p("", !0)
     ], 36));
   }
-}, X = ["placeholder"], Z = {
+}, me = { class: "kbContainer" }, be = { class: "kbSidebar" }, Se = ["onUpdate:modelValue"], ke = { class: "spicyKB" }, Ce = ["onMousedown", "onTouchstart", "onClick"], we = { class: "keyText" }, $e = {
+  __name: "SpicyKeyboard",
+  emits: ["input"],
+  setup(e, { emit: t }) {
+    const o = C(null), n = C([
+      {
+        label: "Function Keys",
+        visible: !1,
+        layout: [
+          [
+            "Esc",
+            "F1",
+            "F2",
+            "F3",
+            "F4",
+            "F5",
+            "F6",
+            "F7",
+            "F8",
+            "F9",
+            "F10",
+            "F11",
+            "F12",
+            "PrtScr",
+            "ScrLk",
+            "Pause"
+          ]
+          // ['PrtScr', 'ScrLk', 'Pause'],
+        ]
+      },
+      {
+        label: "Main Keys",
+        visible: !0,
+        layout: [
+          ["`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=", "Backspace"],
+          ["Tab", "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "[", "]", "\\"],
+          ["Caps", "A", "S", "D", "F", "G", "H", "J", "K", "L", ";", "'", "Enter"],
+          ["Shift", "Z", "X", "C", "V", "B", "N", "M", ",", ".", "/", "Shift"],
+          ["Ctrl", "Win", "Alt", "Space", "Alt", "Fn", "Ctrl"]
+        ]
+      },
+      {
+        label: "Arrow Keys",
+        visible: !0,
+        layout: [
+          ["Ins", "Home", "PgUp"],
+          ["Del", "End", "PgDn"],
+          ["&uarr;", "&larr;", "&darr;", "&rarr;"]
+        ]
+      },
+      {
+        label: "Numpad",
+        visible: !0,
+        layout: [
+          ["NumLock", "/", "*", "-"],
+          ["7", "8", "9", "+"],
+          ["4", "5", "6"],
+          ["1", "2", "3", "Enter"],
+          ["0", "."]
+        ]
+      }
+    ]), l = x(
+      () => n.value.filter((u) => u.visible).map((u) => u)
+    ), c = t, v = (u) => {
+      o.value = u;
+    }, r = () => {
+      o.value = null;
+    }, g = (u) => {
+      c("input", u);
+    }, a = (u) => [
+      "Backspace",
+      "Tab",
+      "Caps",
+      "Enter",
+      "Shift",
+      "Ctrl",
+      "Win",
+      "Alt",
+      "Space",
+      "Fn",
+      "Ins",
+      "Del",
+      "Home",
+      "End",
+      "PgUp",
+      "PgDn",
+      "NumLock"
+    ].includes(u) ? `key-${u.toLowerCase()}` : "", d = (u, D, h) => {
+      const w = (k) => ["Backspace", "Tab", "Caps", "Enter", "Shift", "Space"].includes(k), $ = (k) => ["Ctrl", "Win", "Alt", "Fn"].includes(k);
+      return w(u) ? "key-wide" : $(u) ? "key-small" : D[h].length === 1 ? "key-fullwidth" : "";
+    };
+    return (u, D) => (s(), i("div", me, [
+      y("div", be, [
+        (s(!0), i(M, null, F(n.value, (h, w) => (s(), i("div", {
+          class: "sidebar",
+          key: w
+        }, [
+          y("label", null, [
+            N(y("input", {
+              type: "checkbox",
+              "onUpdate:modelValue": ($) => h.visible = $
+            }, null, 8, Se), [
+              [G, h.visible]
+            ]),
+            U(" " + f(h.label), 1)
+          ])
+        ]))), 128))
+      ]),
+      y("div", ke, [
+        (s(!0), i(M, null, F(l.value, (h, w) => (s(), i("div", {
+          class: S(["kbSection", { [h.label.toLowerCase().replace(/\s+/g, "")]: !0 }]),
+          key: w
+        }, [
+          (s(!0), i(M, null, F(h.layout, ($, k) => (s(), i("div", {
+            class: "spicyKBRow",
+            key: k
+          }, [
+            (s(!0), i(M, null, F($, (m) => (s(), i("button", {
+              key: m,
+              class: S(["spicyKBKey", [
+                { "is-active": o.value === m },
+                a(m),
+                d(m, h.layout, k)
+              ]]),
+              onMousedown: (O) => v(m),
+              onMouseup: r,
+              onTouchstart: (O) => v(m),
+              onTouchend: r,
+              onClick: (O) => g(m)
+            }, [
+              y("span", we, f(m), 1)
+            ], 42, Ce))), 128))
+          ]))), 128))
+        ], 2))), 128))
+      ])
+    ]));
+  }
+}, xe = { class: "spicyInputLabel" }, Be = ["placeholder"], Te = {
   key: 0,
   class: "spicyInputError"
-}, _ = {
+}, Me = {
   __name: "SpicyLabel",
   props: {
     value: { type: String, default: "" },
     placeholder: { type: String, default: "" },
-    label: { type: String, default: "Label" },
+    label: { type: String, default: "" },
     error: { type: String, default: "" },
     variant: {
       type: String,
@@ -192,44 +358,32 @@ const U = {
     }
   },
   setup(e) {
-    const t = e, l = `spicyInput-${a()}`, n = w(t.value), o = w(!1);
-    function a() {
-      const s = "0123456789abcdefghijklmnopqrstuvwxyz";
-      let p = "";
-      for (let g = 0; g < 6; g++)
-        p += s.charAt(Math.floor(Math.random() * s.length));
-      return p;
-    }
-    const f = (s) => {
-      n.value = s.target.value;
-    }, y = () => {
-      o.value = !1;
-    }, b = () => {
-      o.value = !0;
+    const o = C(e.value), n = C(!1), l = (r) => {
+      o.value = r.target.value;
+    }, c = () => {
+      n.value = !1;
+    }, v = () => {
+      n.value = !0;
     };
-    return (s, p) => (r(), i("div", {
-      class: h(["spicyInputWrapper", [e.variant, { hasValue: n.value || e.value, hasFocus: o.value, hasError: e.error }]])
+    return (r, g) => (s(), i("div", {
+      class: S(["spicyInputWrapper", [e.variant, { hasValue: o.value || e.value, hasFocus: n.value, hasError: e.error }]])
     }, [
-      u("label", {
-        class: "spicyInputLabel",
-        for: l
-      }, d(e.label), 1),
-      z(u("input", {
-        id: l,
-        class: h(["spicyInput", e.variant]),
-        "onUpdate:modelValue": p[0] || (p[0] = (g) => n.value = g),
+      y("label", xe, f(e.label), 1),
+      N(y("input", {
+        class: S(["spicyInput", e.variant]),
+        "onUpdate:modelValue": g[0] || (g[0] = (a) => o.value = a),
         placeholder: e.placeholder,
-        onInput: f,
-        onBlur: y,
-        onFocus: b
-      }, null, 42, X), [
-        [P, n.value]
+        onInput: l,
+        onBlur: c,
+        onFocus: v
+      }, null, 42, Be), [
+        [J, o.value]
       ]),
-      S(s.$slots, "default"),
-      e.error ? (r(), i("span", Z, d(e.error), 1)) : c("", !0)
+      B(r.$slots, "default"),
+      e.error ? (s(), i("span", Te, f(e.error), 1)) : p("", !0)
     ], 2));
   }
-}, ee = { class: "spicyModalHeader" }, te = { class: "spicyModalActions" }, le = ["onClick"], ne = {
+}, Fe = { class: "spicyModalHeader" }, De = { class: "spicyModalActions" }, Ie = ["onClick"], Oe = {
   __name: "SpicyModal",
   props: {
     width: { type: String, default: "50%" },
@@ -240,269 +394,349 @@ const U = {
     closeBtn: { type: Boolean, default: !1 },
     actions: { type: Array, default: () => [] },
     closeOnClick: { type: Boolean, default: !0 },
-    modalTitle: { type: String, default: "Title" }
+    modalTitle: { type: String, default: "" }
   },
   emits: ["update:visible"],
   setup(e, { emit: t }) {
-    const l = e, n = m(() => ({
-      "--width": l.width,
-      "--height": l.height,
-      "--borderRadius": l.borderRadius,
-      "--bgColor": l.bgColor
-    })), o = t, a = () => {
-      o("update:visible", !1);
-    }, f = () => {
-      l.closeOnClick && a();
+    const o = e, n = x(() => ({
+      "--width": o.width,
+      "--height": o.height,
+      "--skBorderRadius": o.borderRadius,
+      "--skBgColor": o.bgColor
+    })), l = t, c = () => {
+      l("update:visible", !1);
+    }, v = (r) => {
+      o.closeOnClick && r.target.classList.contains("spicyModalOverlay") && c();
     };
-    return (y, b) => e.visible ? (r(), i("div", {
+    return (r, g) => e.visible ? (s(), i("div", {
       key: 0,
       class: "spicyModalOverlay",
-      onClick: f
+      onClick: v
     }, [
-      u("div", {
+      y("div", {
         class: "spicyModal",
-        style: k({ ...n.value })
+        style: I({ ...n.value })
       }, [
-        u("header", ee, [
-          S(y.$slots, "spicyModalHeader", { title: e.modalTitle }, () => [
-            E(d(e.modalTitle), 1)
+        y("header", Fe, [
+          B(r.$slots, "spicyModalHeader", { title: e.modalTitle }, () => [
+            U(f(e.modalTitle), 1)
           ])
         ]),
-        S(y.$slots, "default"),
-        u("div", te, [
-          e.actions.length === 0 && e.closeBtn ? (r(), i("button", {
+        B(r.$slots, "default"),
+        y("div", De, [
+          B(r.$slots, "spicyModalActions"),
+          e.actions.length === 0 && e.closeBtn ? (s(), i("button", {
             key: 0,
-            class: "closeBtn",
-            onClick: a
-          }, "Close")) : c("", !0),
-          (r(!0), i(B, null, T(e.actions, (s) => (r(), i("button", {
-            class: "actionBtn",
-            key: s.label,
-            onClick: s.handler
-          }, d(s.label), 9, le))), 128))
+            class: "closeBtn actionBtn",
+            onClick: c
+          }, "Close")) : p("", !0),
+          (s(!0), i(M, null, F(e.actions, (a) => (s(), i("button", {
+            class: "extraBtn actionBtn",
+            key: a.label,
+            onClick: a.handler
+          }, f(a.label), 9, Ie))), 128))
         ])
       ], 4)
-    ])) : c("", !0);
+    ])) : p("", !0);
   }
-}, oe = ["aria-checked", "onKeydown", "aria-label"], ae = /* @__PURE__ */ u("div", { class: "spicyToggleKnob" }, null, -1), re = [
-  ae
-], ie = {
+}, _e = ["aria-checked", "onKeydown", "aria-label"], Ke = /* @__PURE__ */ y("div", { class: "spicyToggleKnob" }, null, -1), Ae = [
+  Ke
+], Le = {
   __name: "SpicyToggle",
   props: {
     modelValue: Boolean,
-    label: String,
+    label: {
+      type: String,
+      default: "Toggle"
+    },
     variant: {
       type: String,
       default: "filled",
       validator: (e) => ["outlined", "filled"].includes(e)
     },
     borderColor: String,
-    activeColor: String,
-    focusShadow: String
+    activeColor: {
+      type: String,
+      default: "var(--skPrimaryColor)"
+    }
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const l = e, n = m(() => ({
-      "--borderColor": l.borderColor,
-      "--activeColor": l.activeColor,
-      "--focusShadow": l.focusShadow
-    })), o = t, a = () => {
-      o("update:modelValue", !l.modelValue);
+    const o = e, n = x(() => ({
+      "--skBorderColor": o.borderColor,
+      "--activeColor": o.activeColor
+    })), l = t, c = () => {
+      l("update:modelValue", !o.modelValue);
     };
-    return (f, y) => (r(), i("div", L({
+    return (v, r) => (s(), i("div", Q({
       class: ["spicyToggle", { outlined: e.variant === "outlined", "is-active": e.modelValue }],
-      style: { ...n.value },
-      onClick: a,
+      tabindex: "0",
       role: "switch",
+      style: { ...n.value },
+      onClick: c,
       "aria-checked": e.modelValue.toString(),
-      tabindex: "0",
       onKeydown: [
-        M(O(a, ["prevent"]), ["space"]),
-        M(O(a, ["prevent"]), ["enter"])
+        P(Y(c, ["prevent"]), ["space"]),
+        P(Y(c, ["prevent"]), ["enter"])
       ],
       "aria-label": e.label
-    }, f.$attrs), re, 16, oe));
+    }, v.$attrs), Ae, 16, _e));
+  }
+}, Pe = ["aria-hidden"], Ye = {
+  key: 0,
+  class: "spicyTooltipIcon"
+}, Ve = {
+  key: 1,
+  class: "spicyTooltipText"
+}, Ee = {
+  key: 2,
+  class: "spicyTooltipIcon"
+}, Ne = {
+  __name: "SpicyTooltip",
+  props: {
+    text: String,
+    prependIcon: String,
+    appendIcon: String,
+    position: {
+      type: String,
+      default: "top",
+      validator: (e) => ["top", "bottom", "left", "right"].includes(e)
+    }
+  },
+  setup(e) {
+    const t = e, o = C(!1), n = C(null), l = Z({
+      position: "absolute",
+      top: "0px",
+      left: "0px",
+      maxWidth: "175px"
+    }), c = (a) => {
+      const d = a.right - window.innerWidth;
+      d > 0 && (l.left = `${parseInt(l.left) - d - 5}px`), a.left < 0 && (l.left = "5px");
+    }, v = {
+      top: (a, d) => {
+        l.left = `${a.left + (a.width - d.width) / 2}px`, l.top = `${a.top - d.height - 5}px`;
+      },
+      bottom: (a, d) => {
+        l.left = `${a.left + (a.width - d.width) / 2}px`, l.top = `${a.bottom + 5}px`;
+      },
+      left: (a, d) => {
+        l.left = `${a.left - d.width - 5}px`, l.top = `${a.top + (a.height - d.height) / 2}px`;
+      },
+      right: (a, d) => {
+        l.left = `${a.right + 5}px`, l.top = `${a.top + (a.height - d.height) / 2}px`;
+      }
+    }, r = () => {
+      o.value = !0, ee(() => {
+        if (n.value && o.value) {
+          const a = n.value.getBoundingClientRect(), d = n.value.querySelector(".spicyTooltip").getBoundingClientRect(), u = v[t.position];
+          u(a, d), c(d);
+        }
+      });
+    }, g = () => {
+      o.value = !1;
+    };
+    return (a, d) => (s(), i("div", {
+      onMouseover: r,
+      onMouseleave: g,
+      ref_key: "host",
+      ref: n
+    }, [
+      B(a.$slots, "default"),
+      o.value ? (s(), i("div", {
+        key: 0,
+        class: "spicyTooltip",
+        style: I(l),
+        role: "tooltip",
+        "aria-hidden": !o.value
+      }, [
+        e.prependIcon ? (s(), i("span", Ye, f(e.prependIcon), 1)) : p("", !0),
+        e.text ? (s(), i("span", Ve, f(e.text), 1)) : p("", !0),
+        e.appendIcon ? (s(), i("span", Ee, f(e.appendIcon), 1)) : p("", !0)
+      ], 12, Pe)) : p("", !0)
+    ], 544));
   }
 };
-function I(e, t) {
-  const l = {
+function W(e, t) {
+  const o = {
     YYYY: () => e.getFullYear().toString(),
     MM: () => (e.getMonth() + 1).toString().padStart(2, "0"),
     DD: () => e.getDate().toString().padStart(2, "0")
   };
-  return t.replace(/YYYY|MM|DD/g, (n) => l[n]());
+  return t.replace(/YYYY|MM|DD/g, (n) => o[n]());
 }
-function se(e) {
-  const [t, l, n] = e.split("-");
-  return new Date(Number(t), Number(l) - 1, Number(n));
+function Ue(e) {
+  const [t, o, n] = e.split("-");
+  return new Date(Number(t), Number(o) - 1, Number(n));
 }
-function ce(e, t) {
-  const l = Math.abs(t.getTime() - e.getTime());
-  return Math.ceil(l / (1e3 * 60 * 60 * 24));
+function We(e, t) {
+  const o = Math.abs(t.getTime() - e.getTime());
+  return Math.ceil(o / (1e3 * 60 * 60 * 24));
 }
-function ue(e, t) {
-  const l = new Date(e);
-  return l.setDate(e.getDate() + t), l;
+function ze(e, t) {
+  const o = new Date(e);
+  return o.setDate(e.getDate() + t), o;
 }
-function de(e, t) {
-  const l = new Date(e);
-  return l.setDate(e.getDate() - t), l;
+function He(e, t) {
+  const o = new Date(e);
+  return o.setDate(e.getDate() - t), o;
 }
-function fe(e) {
+function je(e) {
   const t = /* @__PURE__ */ new Date();
   return e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
 }
-function ye(e) {
+function Xe(e) {
   const t = /* @__PURE__ */ new Date();
   return t.setDate(t.getDate() - 1), e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
 }
-function ge(e) {
+function Re(e) {
   const t = /* @__PURE__ */ new Date();
   return t.setDate(t.getDate() + 1), e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
 }
-function pe(e = "YYYY-MM-DD", t = { show: !0, separator: "-" }) {
+function qe(e = "YYYY-MM-DD", t = { show: !0, separator: "-" }) {
   if (typeof e != "string" || typeof t != "object" || !t.hasOwnProperty("show") || typeof t.show != "boolean")
     throw new Error(
       'Invalid parameters: Please provide a valid format string and options object with a boolean "show" property.'
     );
-  let n = I(/* @__PURE__ */ new Date(), e);
+  let n = W(/* @__PURE__ */ new Date(), e);
   return t.separator && t.separator !== "-" && (n = n.replace(/-/g, t.separator)), t.show ? { value: n, isVisible: !0 } : { value: n, isVisible: !1 };
 }
-const Be = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const it = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  currentDate: pe,
-  dateAdd: ue,
-  dateDiff: ce,
-  dateIsToday: fe,
-  dateIsTomorrow: ge,
-  dateIsYesterday: ye,
-  dateSubtract: de,
-  formatDate: I,
-  parseDate: se
+  currentDate: qe,
+  dateAdd: ze,
+  dateDiff: We,
+  dateIsToday: je,
+  dateIsTomorrow: Re,
+  dateIsYesterday: Xe,
+  dateSubtract: He,
+  formatDate: W,
+  parseDate: Ue
 }, Symbol.toStringTag, { value: "Module" }));
-function ve(e) {
+function Ge(e) {
   const t = /* @__PURE__ */ new WeakMap();
-  function l(n) {
-    if (v(n) || typeof n != "object")
+  function o(n) {
+    if (T(n) || typeof n != "object")
       return n;
     if (t.has(n))
       return t.get(n);
-    const o = Array.isArray(n) ? [] : {};
-    t.set(n, o);
-    for (const a in n)
-      Object.prototype.hasOwnProperty.call(n, a) && (o[a] = l(n[a]));
-    return o;
+    const l = Array.isArray(n) ? [] : {};
+    t.set(n, l);
+    for (const c in n)
+      Object.prototype.hasOwnProperty.call(n, c) && (l[c] = o(n[c]));
+    return l;
   }
-  return l(e);
+  return o(e);
 }
-function A(...e) {
+function z(...e) {
   const t = {};
-  return e.forEach((l) => {
-    if (!v(l)) {
-      for (const n in l)
-        if (Object.prototype.hasOwnProperty.call(l, n)) {
-          const o = l[n];
-          o !== void 0 && (typeof o == "object" && o !== null && !Array.isArray(o) ? t[n] = A(
+  return e.forEach((o) => {
+    if (!T(o)) {
+      for (const n in o)
+        if (Object.prototype.hasOwnProperty.call(o, n)) {
+          const l = o[n];
+          l !== void 0 && (typeof l == "object" && l !== null && !Array.isArray(l) ? t[n] = z(
             t[n] || {},
-            o
-          ) : t[n] = o);
+            l
+          ) : t[n] = l);
         }
     }
   }), t;
 }
-function he(...e) {
-  return v(e[0]) ? e[0] : Object.assign({}, ...e);
+function Je(...e) {
+  return T(e[0]) ? e[0] : Object.assign({}, ...e);
 }
-function me(e) {
-  return v(e) ? [] : Object.keys(e);
+function Qe(e) {
+  return T(e) ? [] : Object.keys(e);
 }
-function Se(e) {
-  return v(e) ? [] : Object.values(e);
+function Ze(e) {
+  return T(e) ? [] : Object.values(e);
 }
-function be(e) {
-  return v(e) ? [] : Object.entries(e);
+function et(e) {
+  return T(e) ? [] : Object.entries(e);
 }
-function v(e) {
+function T(e) {
   return e === null || typeof e != "object" ? !1 : Array.isArray(e) ? e.length === 0 : Object.keys(e).length === 0;
 }
-const Te = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const rt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  deepClone: ve,
-  deepMerge: A,
-  getObjectEntries: be,
-  getObjectKeys: me,
-  getObjectValues: Se,
-  isObjectEmpty: v,
-  mergeObjects: he
+  deepClone: Ge,
+  deepMerge: z,
+  getObjectEntries: et,
+  getObjectKeys: Qe,
+  getObjectValues: Ze,
+  isObjectEmpty: T,
+  mergeObjects: Je
 }, Symbol.toStringTag, { value: "Module" }));
-function D(e) {
+function A(e) {
   try {
     return new URL(e), !0;
   } catch (t) {
     return console.error("Invalid URL:", t), !1;
   }
 }
-function Ce(e) {
-  return D(e) ? new URL(e).hostname : null;
+function tt(e) {
+  return A(e) ? new URL(e).hostname : null;
 }
-function we(e, t) {
-  if (!D(e))
+function ot(e, t) {
+  if (!A(e))
     return e;
-  const l = new URL(e);
-  return Object.keys(t).forEach((n) => l.searchParams.append(n, t[n])), l.toString();
+  const o = new URL(e);
+  return Object.keys(t).forEach((n) => o.searchParams.append(n, t[n])), o.toString();
 }
-function ke(e, t, l = "https") {
-  if (!["http", "https", "ftp", "sftp", "ftps", "ssh"].includes(l.toLowerCase()))
-    throw new Error("Invalid protocol: " + l);
+function lt(e, t, o = "https") {
+  if (!["http", "https", "ftp", "sftp", "ftps", "ssh"].includes(o.toLowerCase()))
+    throw new Error("Invalid protocol: " + o);
   if (!/^(?!:\/\/)([a-z0-9-]+\.)*[a-z0-9-]+$/i.test(e))
     throw new Error("Invalid hostname: " + e);
-  return t.startsWith("/") || (t = "/" + t), t.endsWith("/") && t.length > 1 && (t = t.slice(0, -1)), t === "/" && (t = ""), `${l.toLowerCase()}://${e}${t}`;
+  return t.startsWith("/") || (t = "/" + t), t.endsWith("/") && t.length > 1 && (t = t.slice(0, -1)), t === "/" && (t = ""), `${o.toLowerCase()}://${e}${t}`;
 }
-const Ie = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const ct = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  appendParamsToUrl: we,
-  generateUrl: ke,
-  getHostname: Ce,
-  isUrlValid: D
-}, Symbol.toStringTag, { value: "Module" })), De = ':root{--primaryColor: #5e1381;--primaryColorHover: #811faf;--secondaryColor: #2757f7;--errorColor: #ff0000;--primaryBorderColor: #ccc;--primaryTextColor: #ddd;--disabledOpacity: .5;--labelFocus: var(--primaryColor);--fontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;--fontSize: 14px;--fontWeight: 500;--borderWidth: 2px;--borderRadius: 4px}.spicyText{color:var(--primaryTextColor);font-family:var(--fontFamily);font-size:var(--fontSize);font-weight:var(--fontWeight)}.spicyHeader{color:var(--primaryTextColor);font-family:var(--fontFamily);font-size:24px;font-weight:700}', Ae = {
+  appendParamsToUrl: ot,
+  generateUrl: lt,
+  getHostname: tt,
+  isUrlValid: A
+}, Symbol.toStringTag, { value: "Module" })), nt = ':root{--skBgColor: #28292a;--skBgSecondaryColor: #424344;--skBorderColor: #515353;--skPrimaryColor: #811faf;--skSecondaryColor: #0066b3;--skAccentColor: #004a77;--skHoverColor: #656769;--skTextColor: #ddd;--disabledOpacity: .5;--skLabelFocus: var(--skPrimaryColor);--skFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;--skFontSize: 14px;--skFontWeight: 500;--skBorderWidth: 2px;--skBorderRadius: 4px}.spicyText{color:var(--skTextColor);font-family:var(--skFontFamily);font-size:var(--skFontSize)}.spicyHeader{color:var(--skTextColor);font-family:var(--skFontFamily);font-size:24px;font-weight:700}.spicyLink:hover{color:var(--skHoverColor)}.spicyLink:active{color:var(--skPrimaryColor)}.spicyLink:focus{color:var(--skLabelFocus)}.spicyLink:disabled{opacity:var(--disabledOpacity)}', ut = {
   install(e, t = {}) {
-    const { useComponents: l = !0, useStyles: n = !0 } = t;
-    if (l && (e.component("SpicyAlert", R), e.component("SpicyBtn", K), e.component("SpicyCarousel", Q), e.component("SpicyLabel", _), e.component("SpicyModal", ne), e.component("SpicyToggle", ie)), n) {
-      const o = document.createElement("style");
-      o.textContent = De, document.head.appendChild(o);
+    const { useComponents: o = !0, useStyles: n = !0 } = t;
+    if (o && (e.component("SpicyAlert", le), e.component("SpicyBtn", se), e.component("SpicyCarousel", he), e.component("SpicyKeyboard", $e), e.component("SpicyLabel", Me), e.component("SpicyModal", Oe), e.component("SpicyToggle", Le), e.component("SpicyTooltip", Ne)), n) {
+      const l = document.createElement("style");
+      l.textContent = nt, document.head.appendChild(l);
     }
   }
 };
 export {
-  R as SpicyAlert,
-  K as SpicyBtn,
-  Q as SpicyCarousel,
-  _ as SpicyLabel,
-  ne as SpicyModal,
-  ie as SpicyToggle,
-  we as appendParamsToUrl,
-  pe as currentDate,
-  ue as dateAdd,
-  ce as dateDiff,
-  fe as dateIsToday,
-  ge as dateIsTomorrow,
-  ye as dateIsYesterday,
-  de as dateSubtract,
-  Be as dateUtils,
-  ve as deepClone,
-  A as deepMerge,
-  Ae as default,
-  I as formatDate,
-  ke as generateUrl,
-  Ce as getHostname,
-  be as getObjectEntries,
-  me as getObjectKeys,
-  Se as getObjectValues,
-  v as isObjectEmpty,
-  D as isUrlValid,
-  he as mergeObjects,
-  Te as objUtils,
-  se as parseDate,
-  De as spicyStyles,
-  Ie as urlUtils
+  le as SpicyAlert,
+  se as SpicyBtn,
+  he as SpicyCarousel,
+  $e as SpicyKeyboard,
+  Me as SpicyLabel,
+  Oe as SpicyModal,
+  Le as SpicyToggle,
+  Ne as SpicyTooltip,
+  ot as appendParamsToUrl,
+  qe as currentDate,
+  ze as dateAdd,
+  We as dateDiff,
+  je as dateIsToday,
+  Re as dateIsTomorrow,
+  Xe as dateIsYesterday,
+  He as dateSubtract,
+  it as dateUtils,
+  Ge as deepClone,
+  z as deepMerge,
+  ut as default,
+  W as formatDate,
+  lt as generateUrl,
+  tt as getHostname,
+  et as getObjectEntries,
+  Qe as getObjectKeys,
+  Ze as getObjectValues,
+  T as isObjectEmpty,
+  A as isUrlValid,
+  Je as mergeObjects,
+  rt as objUtils,
+  Ue as parseDate,
+  nt as spicyStyles,
+  ct as urlUtils
 };

package/dist/spicykatsu.umd.js

@@ -1 +1 @@
-(function(a,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(a=typeof globalThis<"u"?globalThis:a||self,t(a.SpicyKatsu={},a.Vue))})(this,function(a,t){"use strict";const W={key:0,class:"spicyAlertIcon"},K={key:1},b={__name:"SpicyAlert",props:{variant:{type:String,default:"info",validator:e=>["info","success","warning","error","custom"].includes(e)},text:{type:String,default:"Button"},icon:String,iconOnly:Boolean,closable:{type:Boolean,default:!1},autoClose:{type:Number,default:0}},setup(e){const l=e,n=t.ref(!0),o=()=>{n.value=!1};return l.autoClose>0&&setTimeout(()=>{n.value=!1},l.autoClose),(r,i)=>(t.openBlock(),t.createBlock(t.Transition,{name:"fade"},{default:t.withCtx(()=>[n.value?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["spicyAlert",e.variant])},[e.iconOnly||e.text?(t.openBlock(),t.createElementBlock("span",W,t.toDisplayString(e.icon),1)):t.createCommentVNode("",!0),!e.iconOnly&&e.text?(t.openBlock(),t.createElementBlock("span",K,t.toDisplayString(e.text),1)):t.createCommentVNode("",!0),e.closable?(t.openBlock(),t.createElementBlock("button",{key:2,class:"closeBtn",onClick:o},"×")):t.createCommentVNode("",!0)],2)):t.createCommentVNode("",!0)]),_:1}))}},H=["disabled"],R={key:0,class:"spicyBtnIcon"},C={__name:"SpicyBtn",props:{variant:{type:String,default:"filled",validator:e=>["outlined","filled"].includes(e)},disabled:{type:Boolean,default:!1},text:{type:String,default:"Button"},icon:String,bgColor:String,textColor:String,hoverColor:String,borderColor:String,fontSize:{type:[Number,String],default:14},fontWeight:{type:[Number,String],default:500}},emits:["click"],setup(e,{emit:l}){const n=e,o=t.computed(()=>({"--fontSize":n.fontSize,"--fontWeight":n.fontWeight,"--bgColor":n.bgColor,"--textColor":n.textColor,"--borderColor":n.borderColor,"--hoverColor":n.hoverColor}));return(r,i)=>(t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(["spicyBtn",{outlined:e.variant==="outlined",disabled:e.disabled}]),style:t.normalizeStyle({...o.value}),disabled:e.disabled,onClick:i[0]||(i[0]=(...s)=>r.onClick&&r.onClick(...s))},[e.icon?(t.openBlock(),t.createElementBlock("span",R,t.toDisplayString(e.icon),1)):t.createCommentVNode("",!0),t.createElementVNode("span",null,t.toDisplayString(e.text),1),t.renderSlot(r.$slots,"default")],14,H))}},q={key:0,class:"navControls"},x={key:1,class:"pagination"},G=["onClick"],k={__name:"SpicyCarousel",props:{autoplay:{type:Boolean,default:!1},autoplaySpeed:{type:Number,default:5e3},showNavigation:{type:Boolean,default:!0},showPagination:{type:Boolean,default:!0},activeColor:{type:String,default:"rgba(0, 255, 234, 0.5)"},loop:{type:Boolean,default:!0},initialSlide:{type:Number,default:0},slides:{type:Array,required:!0},width:{type:String,default:"540px"},height:{type:String,default:"300px"},variant:{type:String,default:""}},setup(e){const l=e,n=t.computed(()=>({"--width":l.width,"--height":l.height,"--activeColor":l.activeColor})),o=t.ref(l.initialSlide),r=t.computed(()=>l.slides[o.value]);let i;t.onMounted(()=>{l.autoplay&&(i=setInterval(d,l.autoplaySpeed))});const s=()=>{o.value=(o.value-1+l.slides.length)%l.slides.length},d=()=>{o.value=(o.value+1)%l.slides.length},g=u=>{o.value=u},c=()=>{clearInterval(i)},y=()=>{l.autoplay&&(i=setInterval(d,l.autoplaySpeed))};return t.onUnmounted(()=>{clearInterval(i)}),(u,ie)=>(t.openBlock(),t.createElementBlock("div",{class:"carouselContainer",style:t.normalizeStyle({...n.value}),onMouseenter:c,onMouseleave:y},[t.createVNode(t.Transition,{name:"slide",mode:"out-in"},{default:t.withCtx(()=>[(t.openBlock(),t.createElementBlock("div",{key:o.value,class:"slide",style:t.normalizeStyle({backgroundImage:`url(${r.value.img})`})},[t.renderSlot(u.$slots,"default"),e.slides[o.value].text?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["textOverlay",{fullScreen:e.variant==="fullScreen",disabled:u.disabled}])},t.toDisplayString(e.slides[o.value].text),3)):t.createCommentVNode("",!0)],4))]),_:3}),e.showNavigation?(t.openBlock(),t.createElementBlock("div",q,[t.createElementVNode("div",{class:"prevNav"},[t.createElementVNode("button",{class:"prev",onClick:s},"<")]),t.createElementVNode("div",{class:"nextNav"},[t.createElementVNode("button",{class:"next",onClick:d},">")])])):t.createCommentVNode("",!0),e.showPagination?(t.openBlock(),t.createElementBlock("div",x,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.slides,(ce,p)=>(t.openBlock(),t.createElementBlock("button",{key:p,onClick:se=>g(p),class:t.normalizeClass({active:p===o.value})},t.toDisplayString(p+1),11,G))),128))])):t.createCommentVNode("",!0)],36))}},J=["placeholder"],Q={key:0,class:"spicyInputError"},B={__name:"SpicyLabel",props:{value:{type:String,default:""},placeholder:{type:String,default:""},label:{type:String,default:"Label"},error:{type:String,default:""},variant:{type:String,default:"filled",validator:e=>["outlined","filled"].includes(e)}},setup(e){const l=e,n=`spicyInput-${i()}`,o=t.ref(l.value),r=t.ref(!1);function i(){const c="0123456789abcdefghijklmnopqrstuvwxyz";let y="";for(let u=0;u<6;u++)y+=c.charAt(Math.floor(Math.random()*c.length));return y}const s=c=>{o.value=c.target.value},d=()=>{r.value=!1},g=()=>{r.value=!0};return(c,y)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["spicyInputWrapper",[e.variant,{hasValue:o.value||e.value,hasFocus:r.value,hasError:e.error}]])},[t.createElementVNode("label",{class:"spicyInputLabel",for:n},t.toDisplayString(e.label),1),t.withDirectives(t.createElementVNode("input",{id:n,class:t.normalizeClass(["spicyInput",e.variant]),"onUpdate:modelValue":y[0]||(y[0]=u=>o.value=u),placeholder:e.placeholder,onInput:s,onBlur:d,onFocus:g},null,42,J),[[t.vModelText,o.value]]),t.renderSlot(c.$slots,"default"),e.error?(t.openBlock(),t.createElementBlock("span",Q,t.toDisplayString(e.error),1)):t.createCommentVNode("",!0)],2))}},X={class:"spicyModalHeader"},Z={class:"spicyModalActions"},_=["onClick"],w={__name:"SpicyModal",props:{width:{type:String,default:"50%"},height:{type:String,default:"auto"},borderRadius:{type:String,default:"8px"},bgColor:{type:String,default:"#2b2b2b"},visible:{type:Boolean,default:!1},closeBtn:{type:Boolean,default:!1},actions:{type:Array,default:()=>[]},closeOnClick:{type:Boolean,default:!0},modalTitle:{type:String,default:"Title"}},emits:["update:visible"],setup(e,{emit:l}){const n=e,o=t.computed(()=>({"--width":n.width,"--height":n.height,"--borderRadius":n.borderRadius,"--bgColor":n.bgColor})),r=l,i=()=>{r("update:visible",!1)},s=()=>{n.closeOnClick&&i()};return(d,g)=>e.visible?(t.openBlock(),t.createElementBlock("div",{key:0,class:"spicyModalOverlay",onClick:s},[t.createElementVNode("div",{class:"spicyModal",style:t.normalizeStyle({...o.value})},[t.createElementVNode("header",X,[t.renderSlot(d.$slots,"spicyModalHeader",{title:e.modalTitle},()=>[t.createTextVNode(t.toDisplayString(e.modalTitle),1)])]),t.renderSlot(d.$slots,"default"),t.createElementVNode("div",Z,[e.actions.length===0&&e.closeBtn?(t.openBlock(),t.createElementBlock("button",{key:0,class:"closeBtn",onClick:i},"Close")):t.createCommentVNode("",!0),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.actions,c=>(t.openBlock(),t.createElementBlock("button",{class:"actionBtn",key:c.label,onClick:c.handler},t.toDisplayString(c.label),9,_))),128))])],4)])):t.createCommentVNode("",!0)}},ee=["aria-checked","onKeydown","aria-label"],te=[t.createElementVNode("div",{class:"spicyToggleKnob"},null,-1)],D={__name:"SpicyToggle",props:{modelValue:Boolean,label:String,variant:{type:String,default:"filled",validator:e=>["outlined","filled"].includes(e)},borderColor:String,activeColor:String,focusShadow:String},emits:["update:modelValue"],setup(e,{emit:l}){const n=e,o=t.computed(()=>({"--borderColor":n.borderColor,"--activeColor":n.activeColor,"--focusShadow":n.focusShadow})),r=l,i=()=>{r("update:modelValue",!n.modelValue)};return(s,d)=>(t.openBlock(),t.createElementBlock("div",t.mergeProps({class:["spicyToggle",{outlined:e.variant==="outlined","is-active":e.modelValue}],style:{...o.value},onClick:i,role:"switch","aria-checked":e.modelValue.toString(),tabindex:"0",onKeydown:[t.withKeys(t.withModifiers(i,["prevent"]),["space"]),t.withKeys(t.withModifiers(i,["prevent"]),["enter"])],"aria-label":e.label},s.$attrs),te,16,ee))}};function h(e,l){const n={YYYY:()=>e.getFullYear().toString(),MM:()=>(e.getMonth()+1).toString().padStart(2,"0"),DD:()=>e.getDate().toString().padStart(2,"0")};return l.replace(/YYYY|MM|DD/g,o=>n[o]())}function E(e){const[l,n,o]=e.split("-");return new Date(Number(l),Number(n)-1,Number(o))}function V(e,l){const n=Math.abs(l.getTime()-e.getTime());return Math.ceil(n/(1e3*60*60*24))}function M(e,l){const n=new Date(e);return n.setDate(e.getDate()+l),n}function O(e,l){const n=new Date(e);return n.setDate(e.getDate()-l),n}function N(e){const l=new Date;return e.getDate()===l.getDate()&&e.getMonth()===l.getMonth()&&e.getFullYear()===l.getFullYear()}function T(e){const l=new Date;return l.setDate(l.getDate()-1),e.getDate()===l.getDate()&&e.getMonth()===l.getMonth()&&e.getFullYear()===l.getFullYear()}function $(e){const l=new Date;return l.setDate(l.getDate()+1),e.getDate()===l.getDate()&&e.getMonth()===l.getMonth()&&e.getFullYear()===l.getFullYear()}function I(e="YYYY-MM-DD",l={show:!0,separator:"-"}){if(typeof e!="string"||typeof l!="object"||!l.hasOwnProperty("show")||typeof l.show!="boolean")throw new Error('Invalid parameters: Please provide a valid format string and options object with a boolean "show" property.');let o=h(new Date,e);return l.separator&&l.separator!=="-"&&(o=o.replace(/-/g,l.separator)),l.show?{value:o,isVisible:!0}:{value:o,isVisible:!1}}const le=Object.freeze(Object.defineProperty({__proto__:null,currentDate:I,dateAdd:M,dateDiff:V,dateIsToday:N,dateIsTomorrow:$,dateIsYesterday:T,dateSubtract:O,formatDate:h,parseDate:E},Symbol.toStringTag,{value:"Module"}));function z(e){const l=new WeakMap;function n(o){if(f(o)||typeof o!="object")return o;if(l.has(o))return l.get(o);const r=Array.isArray(o)?[]:{};l.set(o,r);for(const i in o)Object.prototype.hasOwnProperty.call(o,i)&&(r[i]=n(o[i]));return r}return n(e)}function S(...e){const l={};return e.forEach(n=>{if(!f(n)){for(const o in n)if(Object.prototype.hasOwnProperty.call(n,o)){const r=n[o];r!==void 0&&(typeof r=="object"&&r!==null&&!Array.isArray(r)?l[o]=S(l[o]||{},r):l[o]=r)}}}),l}function A(...e){return f(e[0])?e[0]:Object.assign({},...e)}function Y(e){return f(e)?[]:Object.keys(e)}function U(e){return f(e)?[]:Object.values(e)}function F(e){return f(e)?[]:Object.entries(e)}function f(e){return e===null||typeof e!="object"?!1:Array.isArray(e)?e.length===0:Object.keys(e).length===0}const ne=Object.freeze(Object.defineProperty({__proto__:null,deepClone:z,deepMerge:S,getObjectEntries:F,getObjectKeys:Y,getObjectValues:U,isObjectEmpty:f,mergeObjects:A},Symbol.toStringTag,{value:"Module"}));function m(e){try{return new URL(e),!0}catch(l){return console.error("Invalid URL:",l),!1}}function P(e){return m(e)?new URL(e).hostname:null}function j(e,l){if(!m(e))return e;const n=new URL(e);return Object.keys(l).forEach(o=>n.searchParams.append(o,l[o])),n.toString()}function L(e,l,n="https"){if(!["http","https","ftp","sftp","ftps","ssh"].includes(n.toLowerCase()))throw new Error("Invalid protocol: "+n);if(!/^(?!:\/\/)([a-z0-9-]+\.)*[a-z0-9-]+$/i.test(e))throw new Error("Invalid hostname: "+e);return l.startsWith("/")||(l="/"+l),l.endsWith("/")&&l.length>1&&(l=l.slice(0,-1)),l==="/"&&(l=""),`${n.toLowerCase()}://${e}${l}`}const oe=Object.freeze(Object.defineProperty({__proto__:null,appendParamsToUrl:j,generateUrl:L,getHostname:P,isUrlValid:m},Symbol.toStringTag,{value:"Module"})),v=':root{--primaryColor: #5e1381;--primaryColorHover: #811faf;--secondaryColor: #2757f7;--errorColor: #ff0000;--primaryBorderColor: #ccc;--primaryTextColor: #ddd;--disabledOpacity: .5;--labelFocus: var(--primaryColor);--fontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;--fontSize: 14px;--fontWeight: 500;--borderWidth: 2px;--borderRadius: 4px}.spicyText{color:var(--primaryTextColor);font-family:var(--fontFamily);font-size:var(--fontSize);font-weight:var(--fontWeight)}.spicyHeader{color:var(--primaryTextColor);font-family:var(--fontFamily);font-size:24px;font-weight:700}',ae={install(e,l={}){const{useComponents:n=!0,useStyles:o=!0}=l;if(n&&(e.component("SpicyAlert",b),e.component("SpicyBtn",C),e.component("SpicyCarousel",k),e.component("SpicyLabel",B),e.component("SpicyModal",w),e.component("SpicyToggle",D)),o){const r=document.createElement("style");r.textContent=v,document.head.appendChild(r)}}};a.SpicyAlert=b,a.SpicyBtn=C,a.SpicyCarousel=k,a.SpicyLabel=B,a.SpicyModal=w,a.SpicyToggle=D,a.appendParamsToUrl=j,a.currentDate=I,a.dateAdd=M,a.dateDiff=V,a.dateIsToday=N,a.dateIsTomorrow=$,a.dateIsYesterday=T,a.dateSubtract=O,a.dateUtils=le,a.deepClone=z,a.deepMerge=S,a.default=ae,a.formatDate=h,a.generateUrl=L,a.getHostname=P,a.getObjectEntries=F,a.getObjectKeys=Y,a.getObjectValues=U,a.isObjectEmpty=f,a.isUrlValid=m,a.mergeObjects=A,a.objUtils=ne,a.parseDate=E,a.spicyStyles=v,a.urlUtils=oe,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.SpicyKatsu={},r.Vue))})(this,function(r,e){"use strict";const ee={key:0,class:"spicyAlertIcon"},te={key:1},V={__name:"SpicyAlert",props:{variant:{type:String,default:"info",validator:t=>["info","success","warning","error","custom"].includes(t)},text:{type:String,default:"Button"},icon:String,iconOnly:Boolean,closable:{type:Boolean,default:!1},autoClose:{type:Number,default:0}},setup(t){const o=t,l=e.ref(!0),a=()=>{l.value=!1};return e.watch(()=>o.autoClose,n=>{n>0&&setTimeout(()=>{l.value=!1},n)}),(n,c)=>(e.openBlock(),e.createBlock(e.Transition,{name:"fade"},{default:e.withCtx(()=>[l.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["spicyAlert",t.variant])},[t.iconOnly||t.text?(e.openBlock(),e.createElementBlock("span",ee,e.toDisplayString(t.icon),1)):e.createCommentVNode("",!0),!t.iconOnly&&t.text?(e.openBlock(),e.createElementBlock("span",te,e.toDisplayString(t.text),1)):e.createCommentVNode("",!0),t.closable?(e.openBlock(),e.createElementBlock("button",{key:2,class:"closeBtn",onClick:a},"×")):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0)]),_:1}))}},oe=["disabled"],le={key:0,class:"spicyBtnIcon"},N={__name:"SpicyBtn",props:{variant:{type:String,default:"filled",validator:t=>["outlined","filled"].includes(t)},disabled:{type:Boolean,default:!1},text:{type:String,default:"Button"},icon:String,bgColor:String,textColor:String,hoverColor:String,borderColor:String,fontSize:{type:[Number,String],default:14},fontWeight:{type:[Number,String],default:500}},emits:["click"],setup(t,{emit:o}){const l=t,a=e.computed(()=>({"--skFontSize":l.fontSize,"--skFontWeight":l.fontWeight,"--skBgColor":l.bgColor,"--skTextColor":l.textColor,"--skBorderColor":l.borderColor,"--hoverColor":l.hoverColor}));return(n,c)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["spicyBtn",{outlined:t.variant==="outlined",disabled:t.disabled}]),style:e.normalizeStyle({...a.value}),disabled:t.disabled,onClick:c[0]||(c[0]=y=>n.$emit("click"))},[t.icon?(e.openBlock(),e.createElementBlock("span",le,e.toDisplayString(t.icon),1)):e.createCommentVNode("",!0),e.createElementVNode("span",null,e.toDisplayString(t.text),1),e.renderSlot(n.$slots,"default")],14,oe))}},ne=["aria-label"],ae={class:"infoText"},re={key:0,class:"navControls"},ie=[e.createElementVNode("span",{class:"prevBtnIcon"},"<",-1)],se=[e.createElementVNode("span",{class:"nextBtnIcon"},">",-1)],ce={key:1,class:"pagination"},de=["onClick"],pe={class:"page"},M={__name:"SpicyCarousel",props:{autoplay:{type:Boolean,default:!1},autoplaySpeed:{type:Number,default:5e3},showNavigation:{type:Boolean,default:!0},showPagination:{type:Boolean,default:!0},activeColor:{type:String,default:"rgba(0, 255, 234, 0.5)"},loop:{type:Boolean,default:!0},initialSlide:{type:Number,default:0},slides:{type:Array,required:!0},width:{type:String,default:"540px"},height:{type:String,default:"300px"},fullScreen:{type:Boolean,default:!1},enableImageClick:{type:Boolean,default:!1}},setup(t){let o,l,a=!1;const n=t,c=e.computed(()=>({"--width":n.width,"--height":n.height,"--activeColor":n.activeColor})),y=e.computed(()=>u.value.fullScreen===!1?!1:n.fullScreen),s=e.ref(n.initialSlide),u=e.computed(()=>n.slides[s.value]);let i;const p=()=>{s.value=(s.value-1+n.slides.length)%n.slides.length},d=()=>{s.value=(s.value+1)%n.slides.length},B=g=>{s.value=g},f=()=>{clearInterval(i)},S=()=>{n.autoplay&&(i=setInterval(d,n.autoplaySpeed))},b=()=>{window.open(u.value.img)},k=()=>{n.enableImageClick&&b()},m=g=>{o=g.touches[0].clientX,l=g.touches[0].clientY,a=!1},w=g=>{if(!a){const E=g.touches[0].clientX-o,v=g.touches[0].clientY-l;Math.abs(E)>Math.abs(v)&&(E>40?(p(),a=!0):E<-40&&(d(),a=!0))}};return e.onMounted(()=>{n.autoplay&&(i=setInterval(d,n.autoplaySpeed))}),e.onUnmounted(()=>{clearInterval(i)}),(g,E)=>(e.openBlock(),e.createElementBlock("div",{class:"carouselContainer",style:e.normalizeStyle({...c.value}),onMouseenter:f,onMouseleave:S,onTouchstart:m,onTouchmove:w},[e.createVNode(e.Transition,{name:"slide",mode:"out-in"},{default:e.withCtx(()=>[(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["slide",{pointCursor:n.enableImageClick}]),key:s.value,style:e.normalizeStyle({backgroundImage:`url(${u.value.img})`}),"aria-label":u.value.text,onClick:k},[t.slides[s.value].text?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["textOverlay",{fullScreen:y.value}])},[e.createElementVNode("span",ae,e.toDisplayString(t.slides[s.value].text),1)],2)):e.createCommentVNode("",!0),e.renderSlot(g.$slots,"default")],14,ne))]),_:3}),t.showNavigation?(e.openBlock(),e.createElementBlock("div",re,[e.createElementVNode("div",{class:"prevNav"},[e.createElementVNode("button",{class:"prevBtn",onClick:p},ie)]),e.createElementVNode("div",{class:"nextNav"},[e.createElementVNode("button",{class:"nextBtn",onClick:d},se)])])):e.createCommentVNode("",!0),t.showPagination?(e.openBlock(),e.createElementBlock("div",ce,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.slides,(v,$)=>(e.openBlock(),e.createElementBlock("button",{key:$,onClick:Pe=>B($),class:e.normalizeClass(["pageBtn",{active:$===s.value}])},[e.createElementVNode("span",pe,e.toDisplayString($+1),1)],10,de))),128))])):e.createCommentVNode("",!0)],36))}},ye={class:"kbContainer"},ue={class:"kbSidebar"},fe=["onUpdate:modelValue"],me={class:"spicyKB"},ge=["onMousedown","onTouchstart","onClick"],he={class:"keyText"},F={__name:"SpicyKeyboard",emits:["input"],setup(t,{emit:o}){const l=e.ref(null),a=e.ref([{label:"Function Keys",visible:!1,layout:[["Esc","F1","F2","F3","F4","F5","F6","F7","F8","F9","F10","F11","F12","PrtScr","ScrLk","Pause"]]},{label:"Main Keys",visible:!0,layout:[["`","1","2","3","4","5","6","7","8","9","0","-","=","Backspace"],["Tab","Q","W","E","R","T","Y","U","I","O","P","[","]","\\"],["Caps","A","S","D","F","G","H","J","K","L",";","'","Enter"],["Shift","Z","X","C","V","B","N","M",",",".","/","Shift"],["Ctrl","Win","Alt","Space","Alt","Fn","Ctrl"]]},{label:"Arrow Keys",visible:!0,layout:[["Ins","Home","PgUp"],["Del","End","PgDn"],["&uarr;","&larr;","&darr;","&rarr;"]]},{label:"Numpad",visible:!0,layout:[["NumLock","/","*","-"],["7","8","9","+"],["4","5","6"],["1","2","3","Enter"],["0","."]]}]),n=e.computed(()=>a.value.filter(d=>d.visible).map(d=>d)),c=o,y=d=>{l.value=d},s=()=>{l.value=null},u=d=>{c("input",d)},i=d=>["Backspace","Tab","Caps","Enter","Shift","Ctrl","Win","Alt","Space","Fn","Ins","Del","Home","End","PgUp","PgDn","NumLock"].includes(d)?`key-${d.toLowerCase()}`:"",p=(d,B,f)=>{const S=k=>["Backspace","Tab","Caps","Enter","Shift","Space"].includes(k),b=k=>["Ctrl","Win","Alt","Fn"].includes(k);return S(d)?"key-wide":b(d)?"key-small":B[f].length===1?"key-fullwidth":""};return(d,B)=>(e.openBlock(),e.createElementBlock("div",ye,[e.createElementVNode("div",ue,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(f,S)=>(e.openBlock(),e.createElementBlock("div",{class:"sidebar",key:S},[e.createElementVNode("label",null,[e.withDirectives(e.createElementVNode("input",{type:"checkbox","onUpdate:modelValue":b=>f.visible=b},null,8,fe),[[e.vModelCheckbox,f.visible]]),e.createTextVNode(" "+e.toDisplayString(f.label),1)])]))),128))]),e.createElementVNode("div",me,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,(f,S)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["kbSection",{[f.label.toLowerCase().replace(/\s+/g,"")]:!0}]),key:S},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.layout,(b,k)=>(e.openBlock(),e.createElementBlock("div",{class:"spicyKBRow",key:k},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b,m=>(e.openBlock(),e.createElementBlock("button",{key:m,class:e.normalizeClass(["spicyKBKey",[{"is-active":l.value===m},i(m),p(m,f.layout,k)]]),onMousedown:w=>y(m),onMouseup:s,onTouchstart:w=>y(m),onTouchend:s,onClick:w=>u(m)},[e.createElementVNode("span",he,e.toDisplayString(m),1)],42,ge))),128))]))),128))],2))),128))])]))}},ke={class:"spicyInputLabel"},Se=["placeholder"],be={key:0,class:"spicyInputError"},I={__name:"SpicyLabel",props:{value:{type:String,default:""},placeholder:{type:String,default:""},label:{type:String,default:""},error:{type:String,default:""},variant:{type:String,default:"filled",validator:t=>["outlined","filled"].includes(t)}},setup(t){const o=t,l=e.ref(o.value),a=e.ref(!1),n=s=>{l.value=s.target.value},c=()=>{a.value=!1},y=()=>{a.value=!0};return(s,u)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["spicyInputWrapper",[t.variant,{hasValue:l.value||t.value,hasFocus:a.value,hasError:t.error}]])},[e.createElementVNode("label",ke,e.toDisplayString(t.label),1),e.withDirectives(e.createElementVNode("input",{class:e.normalizeClass(["spicyInput",t.variant]),"onUpdate:modelValue":u[0]||(u[0]=i=>l.value=i),placeholder:t.placeholder,onInput:n,onBlur:c,onFocus:y},null,42,Se),[[e.vModelText,l.value]]),e.renderSlot(s.$slots,"default"),t.error?(e.openBlock(),e.createElementBlock("span",be,e.toDisplayString(t.error),1)):e.createCommentVNode("",!0)],2))}},Be={class:"spicyModalHeader"},Ce={class:"spicyModalActions"},we=["onClick"],O={__name:"SpicyModal",props:{width:{type:String,default:"50%"},height:{type:String,default:"auto"},borderRadius:{type:String,default:"8px"},bgColor:{type:String,default:"#2b2b2b"},visible:{type:Boolean,default:!1},closeBtn:{type:Boolean,default:!1},actions:{type:Array,default:()=>[]},closeOnClick:{type:Boolean,default:!0},modalTitle:{type:String,default:""}},emits:["update:visible"],setup(t,{emit:o}){const l=t,a=e.computed(()=>({"--width":l.width,"--height":l.height,"--skBorderRadius":l.borderRadius,"--skBgColor":l.bgColor})),n=o,c=()=>{n("update:visible",!1)},y=s=>{l.closeOnClick&&s.target.classList.contains("spicyModalOverlay")&&c()};return(s,u)=>t.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:"spicyModalOverlay",onClick:y},[e.createElementVNode("div",{class:"spicyModal",style:e.normalizeStyle({...a.value})},[e.createElementVNode("header",Be,[e.renderSlot(s.$slots,"spicyModalHeader",{title:t.modalTitle},()=>[e.createTextVNode(e.toDisplayString(t.modalTitle),1)])]),e.renderSlot(s.$slots,"default"),e.createElementVNode("div",Ce,[e.renderSlot(s.$slots,"spicyModalActions"),t.actions.length===0&&t.closeBtn?(e.openBlock(),e.createElementBlock("button",{key:0,class:"closeBtn actionBtn",onClick:c},"Close")):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.actions,i=>(e.openBlock(),e.createElementBlock("button",{class:"extraBtn actionBtn",key:i.label,onClick:i.handler},e.toDisplayString(i.label),9,we))),128))])],4)])):e.createCommentVNode("",!0)}},Ee=["aria-checked","onKeydown","aria-label"],$e=[e.createElementVNode("div",{class:"spicyToggleKnob"},null,-1)],_={__name:"SpicyToggle",props:{modelValue:Boolean,label:{type:String,default:"Toggle"},variant:{type:String,default:"filled",validator:t=>["outlined","filled"].includes(t)},borderColor:String,activeColor:{type:String,default:"var(--skPrimaryColor)"}},emits:["update:modelValue"],setup(t,{emit:o}){const l=t,a=e.computed(()=>({"--skBorderColor":l.borderColor,"--activeColor":l.activeColor})),n=o,c=()=>{n("update:modelValue",!l.modelValue)};return(y,s)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({class:["spicyToggle",{outlined:t.variant==="outlined","is-active":t.modelValue}],tabindex:"0",role:"switch",style:{...a.value},onClick:c,"aria-checked":t.modelValue.toString(),onKeydown:[e.withKeys(e.withModifiers(c,["prevent"]),["space"]),e.withKeys(e.withModifiers(c,["prevent"]),["enter"])],"aria-label":t.label},y.$attrs),$e,16,Ee))}},De=["aria-hidden"],Te={key:0,class:"spicyTooltipIcon"},Ve={key:1,class:"spicyTooltipText"},Ne={key:2,class:"spicyTooltipIcon"},L={__name:"SpicyTooltip",props:{text:String,prependIcon:String,appendIcon:String,position:{type:String,default:"top",validator:t=>["top","bottom","left","right"].includes(t)}},setup(t){const o=t,l=e.ref(!1),a=e.ref(null),n=e.reactive({position:"absolute",top:"0px",left:"0px",maxWidth:"175px"}),c=i=>{const p=i.right-window.innerWidth;p>0&&(n.left=`${parseInt(n.left)-p-5}px`),i.left<0&&(n.left="5px")},y={top:(i,p)=>{n.left=`${i.left+(i.width-p.width)/2}px`,n.top=`${i.top-p.height-5}px`},bottom:(i,p)=>{n.left=`${i.left+(i.width-p.width)/2}px`,n.top=`${i.bottom+5}px`},left:(i,p)=>{n.left=`${i.left-p.width-5}px`,n.top=`${i.top+(i.height-p.height)/2}px`},right:(i,p)=>{n.left=`${i.right+5}px`,n.top=`${i.top+(i.height-p.height)/2}px`}},s=()=>{l.value=!0,e.nextTick(()=>{if(a.value&&l.value){const i=a.value.getBoundingClientRect(),p=a.value.querySelector(".spicyTooltip").getBoundingClientRect(),d=y[o.position];d(i,p),c(p)}})},u=()=>{l.value=!1};return(i,p)=>(e.openBlock(),e.createElementBlock("div",{onMouseover:s,onMouseleave:u,ref_key:"host",ref:a},[e.renderSlot(i.$slots,"default"),l.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"spicyTooltip",style:e.normalizeStyle(n),role:"tooltip","aria-hidden":!l.value},[t.prependIcon?(e.openBlock(),e.createElementBlock("span",Te,e.toDisplayString(t.prependIcon),1)):e.createCommentVNode("",!0),t.text?(e.openBlock(),e.createElementBlock("span",Ve,e.toDisplayString(t.text),1)):e.createCommentVNode("",!0),t.appendIcon?(e.openBlock(),e.createElementBlock("span",Ne,e.toDisplayString(t.appendIcon),1)):e.createCommentVNode("",!0)],12,De)):e.createCommentVNode("",!0)],544))}};function D(t,o){const l={YYYY:()=>t.getFullYear().toString(),MM:()=>(t.getMonth()+1).toString().padStart(2,"0"),DD:()=>t.getDate().toString().padStart(2,"0")};return o.replace(/YYYY|MM|DD/g,a=>l[a]())}function K(t){const[o,l,a]=t.split("-");return new Date(Number(o),Number(l)-1,Number(a))}function P(t,o){const l=Math.abs(o.getTime()-t.getTime());return Math.ceil(l/(1e3*60*60*24))}function x(t,o){const l=new Date(t);return l.setDate(t.getDate()+o),l}function z(t,o){const l=new Date(t);return l.setDate(t.getDate()-o),l}function A(t){const o=new Date;return t.getDate()===o.getDate()&&t.getMonth()===o.getMonth()&&t.getFullYear()===o.getFullYear()}function Y(t){const o=new Date;return o.setDate(o.getDate()-1),t.getDate()===o.getDate()&&t.getMonth()===o.getMonth()&&t.getFullYear()===o.getFullYear()}function U(t){const o=new Date;return o.setDate(o.getDate()+1),t.getDate()===o.getDate()&&t.getMonth()===o.getMonth()&&t.getFullYear()===o.getFullYear()}function W(t="YYYY-MM-DD",o={show:!0,separator:"-"}){if(typeof t!="string"||typeof o!="object"||!o.hasOwnProperty("show")||typeof o.show!="boolean")throw new Error('Invalid parameters: Please provide a valid format string and options object with a boolean "show" property.');let a=D(new Date,t);return o.separator&&o.separator!=="-"&&(a=a.replace(/-/g,o.separator)),o.show?{value:a,isVisible:!0}:{value:a,isVisible:!1}}const Me=Object.freeze(Object.defineProperty({__proto__:null,currentDate:W,dateAdd:x,dateDiff:P,dateIsToday:A,dateIsTomorrow:U,dateIsYesterday:Y,dateSubtract:z,formatDate:D,parseDate:K},Symbol.toStringTag,{value:"Module"}));function j(t){const o=new WeakMap;function l(a){if(h(a)||typeof a!="object")return a;if(o.has(a))return o.get(a);const n=Array.isArray(a)?[]:{};o.set(a,n);for(const c in a)Object.prototype.hasOwnProperty.call(a,c)&&(n[c]=l(a[c]));return n}return l(t)}function T(...t){const o={};return t.forEach(l=>{if(!h(l)){for(const a in l)if(Object.prototype.hasOwnProperty.call(l,a)){const n=l[a];n!==void 0&&(typeof n=="object"&&n!==null&&!Array.isArray(n)?o[a]=T(o[a]||{},n):o[a]=n)}}}),o}function H(...t){return h(t[0])?t[0]:Object.assign({},...t)}function X(t){return h(t)?[]:Object.keys(t)}function R(t){return h(t)?[]:Object.values(t)}function q(t){return h(t)?[]:Object.entries(t)}function h(t){return t===null||typeof t!="object"?!1:Array.isArray(t)?t.length===0:Object.keys(t).length===0}const Fe=Object.freeze(Object.defineProperty({__proto__:null,deepClone:j,deepMerge:T,getObjectEntries:q,getObjectKeys:X,getObjectValues:R,isObjectEmpty:h,mergeObjects:H},Symbol.toStringTag,{value:"Module"}));function C(t){try{return new URL(t),!0}catch(o){return console.error("Invalid URL:",o),!1}}function G(t){return C(t)?new URL(t).hostname:null}function J(t,o){if(!C(t))return t;const l=new URL(t);return Object.keys(o).forEach(a=>l.searchParams.append(a,o[a])),l.toString()}function Q(t,o,l="https"){if(!["http","https","ftp","sftp","ftps","ssh"].includes(l.toLowerCase()))throw new Error("Invalid protocol: "+l);if(!/^(?!:\/\/)([a-z0-9-]+\.)*[a-z0-9-]+$/i.test(t))throw new Error("Invalid hostname: "+t);return o.startsWith("/")||(o="/"+o),o.endsWith("/")&&o.length>1&&(o=o.slice(0,-1)),o==="/"&&(o=""),`${l.toLowerCase()}://${t}${o}`}const Ie=Object.freeze(Object.defineProperty({__proto__:null,appendParamsToUrl:J,generateUrl:Q,getHostname:G,isUrlValid:C},Symbol.toStringTag,{value:"Module"})),Z=':root{--skBgColor: #28292a;--skBgSecondaryColor: #424344;--skBorderColor: #515353;--skPrimaryColor: #811faf;--skSecondaryColor: #0066b3;--skAccentColor: #004a77;--skHoverColor: #656769;--skTextColor: #ddd;--disabledOpacity: .5;--skLabelFocus: var(--skPrimaryColor);--skFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;--skFontSize: 14px;--skFontWeight: 500;--skBorderWidth: 2px;--skBorderRadius: 4px}.spicyText{color:var(--skTextColor);font-family:var(--skFontFamily);font-size:var(--skFontSize)}.spicyHeader{color:var(--skTextColor);font-family:var(--skFontFamily);font-size:24px;font-weight:700}.spicyLink:hover{color:var(--skHoverColor)}.spicyLink:active{color:var(--skPrimaryColor)}.spicyLink:focus{color:var(--skLabelFocus)}.spicyLink:disabled{opacity:var(--disabledOpacity)}',Oe={install(t,o={}){const{useComponents:l=!0,useStyles:a=!0}=o;if(l&&(t.component("SpicyAlert",V),t.component("SpicyBtn",N),t.component("SpicyCarousel",M),t.component("SpicyKeyboard",F),t.component("SpicyLabel",I),t.component("SpicyModal",O),t.component("SpicyToggle",_),t.component("SpicyTooltip",L)),a){const n=document.createElement("style");n.textContent=Z,document.head.appendChild(n)}}};r.SpicyAlert=V,r.SpicyBtn=N,r.SpicyCarousel=M,r.SpicyKeyboard=F,r.SpicyLabel=I,r.SpicyModal=O,r.SpicyToggle=_,r.SpicyTooltip=L,r.appendParamsToUrl=J,r.currentDate=W,r.dateAdd=x,r.dateDiff=P,r.dateIsToday=A,r.dateIsTomorrow=U,r.dateIsYesterday=Y,r.dateSubtract=z,r.dateUtils=Me,r.deepClone=j,r.deepMerge=T,r.default=Oe,r.formatDate=D,r.generateUrl=Q,r.getHostname=G,r.getObjectEntries=q,r.getObjectKeys=X,r.getObjectValues=R,r.isObjectEmpty=h,r.isUrlValid=C,r.mergeObjects=H,r.objUtils=Fe,r.parseDate=K,r.spicyStyles=Z,r.urlUtils=Ie,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/style.css

@@ -1 +1 @@
-.fade-enter-active,.fade-leave-active{transition:opacity .5s}.fade-enter,.fade-leave-to{opacity:0}.spicyAlert{display:flex;align-items:center;padding:12px;border-radius:4px;margin-bottom:12px}.info{background-color:#e0e0e0;color:#333}.success{background-color:#bcf7c9;color:#155724}.warning{background-color:#fff3cd;color:#856404}.error{background-color:#ffbdc2;color:#911f2a}.spicyAlertIcon{margin-right:8px}.closeBtn{margin-left:auto;background:none;border:none;cursor:pointer}.spicyBtn{padding:8px 16px;background-color:var(--bgColor, var(--primaryColor));border:none;border-radius:4px;color:var(--textColor, var(--primaryTextColor));cursor:pointer;font-size:14px;font-weight:500;text-transform:uppercase;transition:background-color .25s}.spicyBtn.outlined{background-color:transparent;border:2px solid var(--borderColor, var(--primaryBorderColor));color:#424242}.spicyBtn.disabled{opacity:.5;cursor:not-allowed}.spicyBtn:hover:not(.disabled){background-color:var(--hoverColor, grey)}.spicyBtn.outlined:hover:not(.disabled){background-color:var(--hoverColor, grey);color:var(--textColor, var(--primaryTextColor))}.spicyBtnIcon{margin-right:6px}.carouselContainer{position:relative;overflow:hidden;width:var(--width, 540px);height:var(--height, 300px)}.slide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;transition:transform .3s ease;position:relative}.textOverlay{position:absolute;bottom:10px;left:10px;background-color:#000000bf;padding:10px;color:#ccc;font-size:18px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.textOverlay.fullScreen{top:0;right:0;bottom:0;left:0;height:100%;width:100%;display:flex;align-items:center;justify-content:center;text-align:center;background-color:#00000080}.slide-enter-active,.slide-leave-active{transition:opacity .3s}.slide-enter,.slide-leave-to{opacity:0}.prev,.next{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;font-size:24px;color:#fff;cursor:pointer;z-index:1;text-shadow:0 0 5px black;background:#00000080;height:35px;width:35px;border-radius:50%}.prev{left:10px}.next{right:10px}.pagination{position:absolute;bottom:10px;left:50%;transform:translate(-50%);text-shadow:0 0 5px black}.pagination button{border:none;color:#fff;cursor:pointer;margin:0 5px;background:#00000080;height:25px;width:25px;border-radius:50%;font-weight:700}.pagination button.active{background:var(--activeColor);font-weight:700}.spicyInputWrapper{display:flex;flex-direction:column;position:relative}.spicyInputLabel{position:absolute;top:12px;left:16px;color:var(--textColor, var(--primaryTextColor));transition:top .25s,font-size .25s,color .25s;pointer-events:none;font-size:18px;background-color:transparent}.spicyInput{padding:20px 16px 8px;border:none;border-bottom:1px solid var(--borderColor, var(--primaryBorderColor));font-size:16px;width:100%;box-sizing:border-box;transition:border-color .25s;background-color:transparent;color:var(--textColor, var(--primaryTextColor))}.spicyInputWrapper .spicyInput:focus{outline:none;border-color:var(--labelFocus)}.outlined .spicyInput{border:1px solid var(--borderColor, var(--primaryBorderColor));border-radius:4px}.filled .spicyInput{border:none;border-bottom:1px solid var(--borderColor, var(--primaryBorderColor))}.hasValue .spicyInputLabel,.hasFocus .spicyInputLabel{top:-16px;font-size:16px;color:var(--labelFocus);font-weight:700}.hasError .spicyInput{border-color:red}.spicyInputError{color:red;font-size:12px;margin-top:4px}.spicyModalOverlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.spicyModal{padding:20px;box-shadow:0 0 6px 2px #0003;transition:transform .3s ease-out;font-size:15px;border-radius:var(--borderRadius);background-color:var(--bgColor)}.spicyModalHeader{text-align:center;font-size:20px;font-weight:700}.spicyModalActions{margin-top:20px;text-align:right}.spicyModalActions button{margin-left:10px}.actionBtn,.closeBtn{background-color:transparent;border:none;color:#fff;cursor:pointer}.spicyToggle{width:50px;height:24px;background-color:var(--borderColor, var(--primaryBorderColor));border-radius:30px;cursor:pointer;padding:2px;transition:background-color .2s;display:inline-flex;align-items:center}.spicyToggle.is-active{background-color:var(--activeColor, var(--primaryColor))}.spicyToggleKnob{width:20px;height:20px;background-color:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 2px 4px #0003}.spicyToggle.is-active .spicyToggleKnob{transform:translate(26px)}.spicyToggle:focus{outline:none;box-shadow:0 0 0 2px var(--foucsShadow, var(--primaryColor))}.spicyToggle.outlined{background-color:transparent;border:2px solid var(--borderColor, var(--primaryBorderColor))}.spicyToggle.outlined.is-active{background-color:var(--activeColor, var(--primaryColor))}
+.fade-enter-active,.fade-leave-active{transition:opacity .35s}.fade-enter,.fade-leave-to{opacity:0}.spicyAlert{display:flex;align-items:center;padding:12px;border-radius:4px;margin-bottom:12px}.info{background-color:#e0e0e0;color:#333}.success{background-color:#bcf7c9;color:#155724}.warning{background-color:#fff3cd;color:#856404}.error{background-color:#ffbdc2;color:#911f2a}.spicyAlertIcon{margin-right:8px}.closeBtn{margin-left:auto;background:none;border:none;cursor:pointer}.spicyBtn{padding:8px 16px;background-color:var(--skBgColor, #28292a);border:none;border-radius:4px;color:var(--skTextColor, #ddd);cursor:pointer;font-size:14px;font-weight:500;text-transform:uppercase;transition:background-color .25s}.spicyBtn.outlined{background-color:transparent;border:2px solid var(--skBorderColor, #515353);color:var(--skTextColor, #ddd)}.spicyBtn.disabled{opacity:.5;cursor:not-allowed}.spicyBtn:hover:not(.disabled){background-color:var(--hoverColor, grey)}.spicyBtn.outlined:hover:not(.disabled){background-color:var(--hoverColor, grey);color:var(--skTextColor, #ddd)}.spicyBtnIcon{margin-right:6px}.carouselContainer{position:relative;overflow:hidden;width:var(--width, 540px);height:var(--height, 300px);border-radius:var(--borderRadius)}.slide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;transition:transform .3s ease}.textOverlay{position:absolute;bottom:10px;left:10px;background-color:#000000bf;padding:10px;color:#ccc;font-size:18px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5);border-radius:4px}.textOverlay.fullScreen{top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;text-align:center;background-color:#00000059}.slide-enter-active,.slide-leave-active{transition:opacity .3s}.slide-enter,.slide-leave-to{opacity:0}.prevNav,.nextNav{width:100%;display:flex;align-items:center}.navControls{height:100%;display:flex}.prevBtn,.nextBtn{position:absolute;border:none;font-size:24px;color:#ccc;cursor:pointer;z-index:1;text-shadow:0 0 5px black;background:#00000080;height:35px;width:35px;border-radius:50%}.prevBtnIcon,.nextBtnIcon{display:flex;align-items:center;justify-content:center}.prevBtn{left:6px}.nextBtn{right:6px}.pagination{position:absolute;bottom:4px;left:50%;transform:translate(-50%);text-shadow:0 0 5px black}.pageBtn{border:none;color:#ccc;cursor:pointer;margin:0 4px;background:#00000080;height:25px;width:25px;border-radius:50%;font-weight:700}.pageBtn.active{background:var(--activeColor);font-weight:700}.pointCursor{cursor:pointer}.kbContainer{display:flex;gap:10px;padding:10px;border:1px solid #ccc;border-radius:5px;background-color:#f0f0f0}.kbSidebar{display:flex;flex-direction:column;gap:5px}.sidebar label{display:flex;align-items:center;gap:5px}.spicyKB{display:flex;flex-direction:row;gap:5px;background-color:#333;border-radius:5px;padding:10px}.kbSection{display:flex;flex-direction:column;gap:5px}.spicyKBRow{display:flex;gap:5px}.spicyKBKey{padding:10px;border:1px solid #ccc;border-radius:5px;background-color:#f0f0f0;cursor:pointer;transition:background-color .2s ease;font-family:Courier New,Courier,monospace;font-weight:700;text-transform:uppercase}.spicyKBKey:hover,.spicyKBKey.is-active{background-color:#e0e0e0}.key-backspace{width:100px}.key-tab,.key-caps,.key-enter,.key-shift{width:120px}.key-ctrl,.key-win,.key-alt,.key-fn{width:70px}.key-space{width:400px}.key-fullwidth{width:100%}.key-small{width:60px}.key-wide{width:80px}.keyText{-webkit-user-select:none;user-select:none}.spicyInputWrapper{display:flex;flex-direction:column;position:relative}.spicyInputLabel{position:absolute;top:12px;left:16px;color:var(--textColor, var(--skTextColor));transition:top .25s,font-size .25s,color .25s;pointer-events:none;font-size:18px;background-color:transparent}.spicyInput{padding:20px 16px 8px;border:none;border-bottom:1px solid var(--skBorderColor, #515353);font-size:16px;width:100%;box-sizing:border-box;transition:border-color .25s;background-color:transparent;color:var(--textColor, var(--skTextColor, #ddd))}.spicyInputWrapper .spicyInput:focus{outline:none;border-color:var(--skLabelFocus)}.outlined .spicyInput{border:1px solid var(--skBorderColor, #515353);border-radius:4px}.filled .spicyInput{border:none;border-bottom:1px solid var(--skBorderColor, #515353)}.hasValue .spicyInputLabel,.hasFocus .spicyInputLabel{top:-18px;font-size:16px;color:var(--skLabelFocus);font-weight:700}.hasError .spicyInput{border-color:red}.spicyInputError{color:red;font-size:12px}.spicyModalOverlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.spicyModal{padding:20px;box-shadow:0 0 6px 2px #0003;transition:transform .3s ease-out;font-size:15px;border-radius:var(--skBorderRadius);background-color:var(--skBgColor);z-index:1001}.spicyModalHeader{text-align:center;font-size:20px;font-weight:700}.spicyModalActions{margin-top:20px;text-align:right}.actionBtn{background-color:transparent;border:none;color:var(--skTextColor, #ddd);cursor:pointer}.actionBtn:hover{text-decoration:underline}.spicyToggle{width:50px;height:24px;background-color:var(--skBgSecondaryColor, #424344);border-radius:30px;cursor:pointer;padding:2px;transition:background-color .2s;display:inline-flex;align-items:center}.spicyToggle.is-active{background-color:var(--activeColor, var(--skPrimaryColor))}.spicyToggleKnob{width:20px;height:20px;background-color:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 2px 4px #0003}.spicyToggle.is-active .spicyToggleKnob{transform:translate(26px)}.spicyToggle.outlined{background-color:transparent;border:2px solid var(--skBorderColor, #515353)}.spicyToggle.outlined.is-active{background-color:var(--activeColor, var(--skPrimaryColor));border-color:var(--activeColor, var(--skPrimaryColor))}.spicyTooltip{z-index:9999;background-color:var(--skBgColor);color:var(--skTextColor);padding:8px;border-radius:4px;font-size:15px;border:1px solid var(--skBorderColor);display:flex;align-items:center;justify-content:center}.spicyTooltipIcon{font-size:18px}

package/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "author": "Sato",
   "private": false,
-  "version": "0.0.33",
+  "version": "0.0.34",
   "files": [
     "dist/",
     "package.json",
@@ -16,8 +16,9 @@
     "dev": "vite",
     "build": "vue-tsc && vite build",
     "publish": "npm publish",
-    "docs:dev": "vitepress dev docs",
-    "test": "jest"
+    "docsdev": "vitepress dev docs",
+    "docsbuild": "vitepress build docs",
+    "docspreview": "vitepress preview docs"
   },
   "dependencies": {
     "vue": "^3.4.23"
@@ -26,6 +27,7 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "typescript": "^5.4.5",
     "vite": "^5.2.9",
+    "vitepress": "^1.1.3",
     "vue-tsc": "^2.0.13"
   }
 }