adverich-kun-ui 0.1.545 → 0.1.546

package/dist/components/KunDatePicker/src/components/KunDatePicker.vue2.js

@@ -0,0 +1,483 @@
+import { defineComponent as ke, ref as h, computed as b, watch as xe, onMounted as De, onUnmounted as Se, createElementBlock as u, openBlock as i, createVNode as x, createBlock as Me, mergeProps as Ce, withKeys as Z, withCtx as L, createElementVNode as c, withModifiers as _, Teleport as Ve, Transition as Ae, createCommentVNode as V, normalizeStyle as ee, normalizeClass as P, unref as $e, toDisplayString as T, Fragment as O, renderList as U, createTextVNode as te, nextTick as Fe } from "vue";
+import Te from "../../../KunTextField/src/components/KunTextField.vue.js";
+import j from "../../../KunNumberField/src/components/KunNumberField.vue.js";
+import { usePosition as Ye } from "../composables/usePosition.js";
+import le from "../../../KunBtn/src/components/KunBtn.vue.js";
+const Be = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-5 w-5",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, ze = {
+  key: 1,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-5 w-5",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, He = {
+  key: 0,
+  class: "px-2 py-3 flex items-center justify-between border-b border-slate-100 dark:border-slate-700/50 bg-slate-50/50 dark:bg-slate-800/50 flex-shrink-0"
+}, Le = {
+  key: 1,
+  class: "flex-1 overflow-y-auto custom-scrollbar p-3 min-h-0"
+}, Re = { key: 0 }, Ee = { class: "grid grid-cols-7 mb-2 text-center" }, Ne = { class: "grid grid-cols-7 gap-1" }, Pe = ["onClick"], Oe = {
+  key: 1,
+  class: "grid grid-cols-3 gap-2"
+}, Ue = ["onClick"], je = {
+  key: 2,
+  class: "border-t border-slate-100 dark:border-slate-700 p-3 bg-slate-50/50 dark:bg-slate-800/50 grid grid-cols-3 gap-2 text-center flex-shrink-0"
+}, Ie = { class: "flex flex-col items-center" }, We = { class: "flex flex-col items-center" }, Ke = {
+  key: 0,
+  class: "flex flex-col items-center"
+}, qe = {
+  key: 3,
+  class: "p-3 border-t border-slate-100 dark:border-slate-700 flex justify-end gap-2 bg-white dark:bg-slate-800 flex-shrink-0"
+}, tt = /* @__PURE__ */ ke({
+  __name: "KunDatePicker",
+  props: {
+    modelValue: { type: [Date, Array, String], default: null },
+    range: { type: Boolean, default: !1 },
+    label: { type: String, default: "" },
+    placeholder: { type: String, default: "" },
+    // Dynamic default handled in computed usually, or standard
+    disabled: { type: Boolean, default: !1 },
+    errorMessage: { type: String, default: "" },
+    // Logic
+    autoApply: { type: Boolean, default: !0 },
+    // Modes: 'date', 'datetime', 'time'
+    mode: { type: String, default: "date" },
+    // Backwards compat / Overrides
+    enableTime: { type: Boolean, default: !1 },
+    // If true implies datetime unless mode is set
+    enableSeconds: { type: Boolean, default: !1 },
+    minDate: { type: Date, default: null },
+    maxDate: { type: Date, default: null },
+    locale: { type: String, default: "es-ES" },
+    // Formatting
+    valueFormat: { type: String, default: null },
+    // e.g., 'YYYY-MM-DD', 'YYYY-MM-DD HH:mm:ss', 'HH:mm:ss'
+    displayFormat: { type: String, default: null },
+    // Override display format
+    // Styling & Layout
+    width: { type: [String, Number], default: null },
+    calendarWidth: { type: [String, Number], default: 320 },
+    fullWidth: { type: Boolean, default: !1 },
+    align: { type: String, default: "left" },
+    daySize: { type: String, default: "2rem" },
+    fontSize: { type: String, default: "0.875rem" },
+    maxHeight: { type: String, default: "400px" },
+    inputClass: { default: "" },
+    dialogClass: { default: "" }
+  },
+  emits: ["update:modelValue", "change", "close", "open"],
+  setup(d, { emit: ae }) {
+    const a = d, Y = ae, I = Math.random().toString(36).substr(2, 9), ne = h(null), v = h(null), B = h(null), D = h(!1), z = h("days"), o = h(null), S = h((/* @__PURE__ */ new Date()).getMonth()), p = h((/* @__PURE__ */ new Date()).getFullYear()), m = h({ hours: 0, minutes: 0, seconds: 0 });
+    function W(t, e) {
+      const l = {
+        YYYY: t.getFullYear().toString(),
+        MM: String(t.getMonth() + 1).padStart(2, "0"),
+        DD: String(t.getDate()).padStart(2, "0"),
+        HH: String(t.getHours()).padStart(2, "0"),
+        mm: String(t.getMinutes()).padStart(2, "0"),
+        ss: String(t.getSeconds()).padStart(2, "0")
+      };
+      return e.replace(/YYYY|MM|DD|HH|mm|ss/g, (n) => l[n]);
+    }
+    const f = b(() => a.mode ? a.mode : a.enableTime ? "datetime" : "date"), M = b(() => f.value === "datetime" || f.value === "time" || a.enableTime), oe = b(() => a.enableSeconds || a.valueFormat && a.valueFormat.includes("ss"));
+    xe(() => a.modelValue, (t) => {
+      K(t);
+    }, { immediate: !0 });
+    function K(t) {
+      if (t)
+        if (a.range && Array.isArray(t) && t.length > 0) {
+          o.value = t.map((l) => A(l));
+          const e = Array.isArray(o.value) ? o.value[0] : null;
+          e instanceof Date && (S.value = e.getMonth(), p.value = e.getFullYear(), M.value && q(e));
+        } else {
+          const e = A(t);
+          e instanceof Date && (o.value = e, S.value = e.getMonth(), p.value = e.getFullYear(), M.value && q(e));
+        }
+      else {
+        o.value = null;
+        const e = /* @__PURE__ */ new Date();
+        m.value = { hours: e.getHours(), minutes: e.getMinutes(), seconds: 0 };
+      }
+    }
+    function A(t) {
+      if (t instanceof Date) return t;
+      if (typeof t == "string") {
+        if (f.value === "time") {
+          const [n, r, y] = t.split(/[:\s]/).map(Number), g = /* @__PURE__ */ new Date();
+          return g.setHours(n || 0, r || 0, y || 0, 0), g;
+        }
+        const e = t.replace(" ", "T"), l = new Date(e);
+        if (!isNaN(l.getTime())) return l;
+      }
+      return /* @__PURE__ */ new Date();
+    }
+    function q(t) {
+      m.value = {
+        hours: t.getHours(),
+        minutes: t.getMinutes(),
+        seconds: t.getSeconds()
+      };
+    }
+    const { style: re, update: se } = Ye(v, B, {
+      offset: 8,
+      align: a.align
+    }), ie = b(() => {
+      var e;
+      let t = a.calendarWidth;
+      return a.fullWidth && ((e = v.value) != null && e.rootRef) && (t = v.value.rootRef.getBoundingClientRect().width), f.value === "time" && (t = 200), {
+        width: typeof t == "number" ? `${t}px` : t
+      };
+    }), ue = b(() => new Date(p.value, S.value).toLocaleString(a.locale, { month: "long" }).replace(/^\w/, (t) => t.toUpperCase())), de = b(() => {
+      const t = [], e = new Date(2023, 0, 1);
+      for (; e.getDay() !== 1; )
+        e.setDate(e.getDate() + 1);
+      for (let l = 0; l < 7; l++)
+        t.push(e.toLocaleString(a.locale, { weekday: "narrow" }).replace(".", "")), e.setDate(e.getDate() + 1);
+      return t;
+    }), ce = b(() => {
+      if (!a.modelValue) return "";
+      const t = { day: "2-digit", month: "2-digit", year: "numeric" }, e = { hour: "2-digit", minute: "2-digit", second: oe.value ? "2-digit" : void 0 }, l = (n) => {
+        if (a.displayFormat) return W(n, a.displayFormat);
+        let r = "";
+        return f.value !== "time" && (r += n.toLocaleDateString(a.locale, t)), f.value === "datetime" && (r += " " + n.toLocaleTimeString(a.locale, e)), f.value === "time" && (r = n.toLocaleTimeString(a.locale, e)), r;
+      };
+      if (a.range && Array.isArray(a.modelValue)) {
+        const n = a.modelValue[0] ? l(A(a.modelValue[0])) : "", r = a.modelValue[1] ? l(A(a.modelValue[1])) : "";
+        return n ? r ? `${n} ~ ${r}` : `${n} ~ ...` : "";
+      }
+      return l(A(a.modelValue));
+    }), fe = b(() => {
+      if (f.value === "time") return [];
+      const t = p.value, e = S.value, l = new Date(t, e, 1).getDay(), n = l === 0 ? 6 : l - 1, r = new Date(t, e + 1, 0).getDate(), y = new Date(t, e, 0).getDate(), g = [];
+      for (let s = 0; s < n; s++)
+        g.push({
+          day: y - n + s + 1,
+          date: new Date(t, e - 1, y - n + s + 1),
+          isCurrentMonth: !1
+        });
+      for (let s = 1; s <= r; s++)
+        g.push({
+          day: s,
+          date: new Date(t, e, s),
+          isCurrentMonth: !0
+        });
+      const C = 42 - g.length;
+      for (let s = 1; s <= C; s++)
+        g.push({
+          day: s,
+          date: new Date(t, e + 1, s),
+          isCurrentMonth: !1
+        });
+      return g;
+    }), me = b(() => {
+      const t = [], e = (/* @__PURE__ */ new Date()).getFullYear();
+      for (let l = e - 100; l <= e + 20; l++)
+        t.push(l);
+      return t.reverse();
+    });
+    function $() {
+      a.disabled || (D.value ? F() : ge());
+    }
+    function ge() {
+      window.dispatchEvent(new CustomEvent("kun:datepicker:open", { detail: { id: I } })), D.value = !0, K(a.modelValue), Y("open"), Fe(() => {
+        se();
+      });
+    }
+    function F() {
+      D.value = !1, Y("close");
+    }
+    function G(t) {
+      t.detail.id !== I && D.value && F();
+    }
+    function J(t) {
+      if (!D.value) return;
+      const e = t.target;
+      B.value && B.value.contains(e) || v.value && (v.value.rootRef && v.value.rootRef.contains(e) || v.value.$el && v.value.$el.contains(e)) || F();
+    }
+    De(() => {
+      document.addEventListener("click", J, !0), window.addEventListener("kun:datepicker:open", G);
+    }), Se(() => {
+      document.removeEventListener("click", J, !0), window.removeEventListener("kun:datepicker:open", G);
+    });
+    function Q(t) {
+      let e = S.value + t;
+      e > 11 ? (e = 0, p.value++) : e < 0 && (e = 11, p.value--), S.value = e;
+    }
+    function ve() {
+      z.value = z.value === "days" ? "years" : "days";
+    }
+    function pe(t) {
+      p.value = t, z.value = "days";
+    }
+    function R(t) {
+      const e = new Date(t);
+      return f.value === "time" || f.value === "datetime" || a.enableTime ? (e.setHours(m.value.hours || 0), e.setMinutes(m.value.minutes || 0), e.setSeconds(m.value.seconds || 0)) : e.setHours(0, 0, 0, 0), e;
+    }
+    function ye(t) {
+      const e = R(t.date);
+      if (a.range) {
+        let l = Array.isArray(o.value) ? [...o.value] : [];
+        if (l.length === 2 && (l = []), l.length === 0)
+          l = [e];
+        else if (l.length === 1) {
+          let n = l[0], r = e;
+          r < n && ([n, r] = [r, n]), l = [n, r];
+        }
+        o.value = l, a.autoApply && l.length === 2 && !M.value && E();
+      } else
+        o.value = e, a.autoApply && !M.value && E();
+    }
+    function H() {
+      let t = o.value instanceof Date ? o.value : /* @__PURE__ */ new Date();
+      !o.value && f.value === "time" && (t = /* @__PURE__ */ new Date());
+      const e = R(t);
+      a.range || (o.value = e);
+    }
+    function he() {
+      const t = o.value;
+      if (!t) return null;
+      const e = (l) => a.valueFormat ? W(l, a.valueFormat) : l;
+      return Array.isArray(t) ? t.map((l) => e(l)) : e(t);
+    }
+    function E() {
+      f.value === "time" && !o.value ? H() : M.value && o.value && !Array.isArray(o.value) && (o.value = R(o.value));
+      const t = he();
+      Y("update:modelValue", t), Y("change", t), F();
+    }
+    function be(t) {
+      const { date: e, isCurrentMonth: l } = t, r = X(e, /* @__PURE__ */ new Date());
+      let y = !1, g = !1;
+      const C = o.value, s = (w, k) => w instanceof Date ? X(w, k) : !1;
+      if (a.range && Array.isArray(C)) {
+        const [w, k] = C;
+        w && s(w, e) && (y = !0), k && s(k, e) && (y = !0), w && k && w instanceof Date && k instanceof Date && e > w && e < k && (g = !0);
+      } else !a.range && C instanceof Date && s(C, e) && (y = !0);
+      const N = "flex items-center justify-center font-medium text-sm z-10", we = l ? "text-slate-700 dark:text-slate-200" : "text-slate-300 dark:text-slate-600";
+      return y ? `${N} bg-blue-600 text-white shadow-md hover:bg-blue-700 rounded-full` : g ? `${N} bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-none` : `${N} ${we} hover:bg-slate-100 dark:hover:bg-slate-700 ${r ? "border border-blue-500 text-blue-600 dark:text-blue-400 font-bold" : ""}`;
+    }
+    function X(t, e) {
+      return t.getFullYear() === e.getFullYear() && t.getMonth() === e.getMonth() && t.getDate() === e.getDate();
+    }
+    return (t, e) => (i(), u("div", {
+      class: "relative w-full",
+      ref_key: "containerRef",
+      ref: ne
+    }, [
+      x(Te, Ce({
+        ref_key: "triggerRef",
+        ref: v,
+        "model-value": ce.value,
+        label: d.label,
+        placeholder: d.placeholder,
+        disabled: d.disabled,
+        readonly: ""
+      }, t.$attrs, {
+        onHandleClick: $,
+        onClick: $,
+        onKeydown: [
+          Z($, ["enter"]),
+          Z($, ["space"])
+        ],
+        class: ["cursor-pointer", d.inputClass],
+        "error-message": d.errorMessage,
+        "has-error": !!d.errorMessage,
+        "hide-details": ""
+      }), {
+        "append-inner": L(() => [
+          c("div", {
+            class: "cursor-pointer text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors",
+            onClick: _($, ["stop"])
+          }, [
+            d.mode === "time" ? (i(), u("svg", Be, [...e[6] || (e[6] = [
+              c("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+              }, null, -1)
+            ])])) : (i(), u("svg", ze, [...e[7] || (e[7] = [
+              c("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+              }, null, -1)
+            ])]))
+          ])
+        ]),
+        _: 1
+      }, 16, ["model-value", "label", "placeholder", "disabled", "class", "error-message", "has-error"]),
+      (i(), Me(Ve, { to: "body" }, [
+        x(Ae, {
+          "enter-active-class": "transition ease-out duration-150",
+          "enter-from-class": "opacity-0 scale-95",
+          "enter-to-class": "opacity-100 scale-100",
+          "leave-active-class": "transition ease-in duration-100",
+          "leave-from-class": "opacity-100 scale-100",
+          "leave-to-class": "opacity-0 scale-95"
+        }, {
+          default: L(() => [
+            D.value ? (i(), u("div", {
+              key: 0,
+              ref_key: "popoverRef",
+              ref: B,
+              class: P(["fixed shadow-2xl rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 flex flex-col font-sans select-none overflow-hidden", [d.dialogClass]]),
+              style: ee([$e(re), ie.value]),
+              onClick: e[5] || (e[5] = _(() => {
+              }, ["stop"]))
+            }, [
+              d.mode !== "time" ? (i(), u("div", He, [
+                c("button", {
+                  type: "button",
+                  class: "p-1 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors text-slate-600 dark:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-400",
+                  onClick: e[0] || (e[0] = (l) => Q(-1))
+                }, [...e[8] || (e[8] = [
+                  c("svg", {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    class: "h-5 w-5",
+                    viewBox: "0 0 20 20",
+                    fill: "currentColor"
+                  }, [
+                    c("path", {
+                      "fill-rule": "evenodd",
+                      d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z",
+                      "clip-rule": "evenodd"
+                    })
+                  ], -1)
+                ])]),
+                c("div", {
+                  class: "font-semibold text-slate-800 dark:text-slate-100 cursor-pointer hover:bg-slate-200 dark:hover:bg-slate-700 px-3 py-1 rounded transition-colors text-center",
+                  onClick: ve
+                }, T(ue.value) + " " + T(p.value), 1),
+                c("button", {
+                  type: "button",
+                  class: "p-1 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors text-slate-600 dark:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-400",
+                  onClick: e[1] || (e[1] = (l) => Q(1))
+                }, [...e[9] || (e[9] = [
+                  c("svg", {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    class: "h-5 w-5",
+                    viewBox: "0 0 20 20",
+                    fill: "currentColor"
+                  }, [
+                    c("path", {
+                      "fill-rule": "evenodd",
+                      d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",
+                      "clip-rule": "evenodd"
+                    })
+                  ], -1)
+                ])])
+              ])) : V("", !0),
+              d.mode !== "time" ? (i(), u("div", Le, [
+                z.value === "days" ? (i(), u("div", Re, [
+                  c("div", Ee, [
+                    (i(!0), u(O, null, U(de.value, (l) => (i(), u("span", {
+                      key: l,
+                      class: "text-[0.7rem] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest"
+                    }, T(l), 1))), 128))
+                  ]),
+                  c("div", Ne, [
+                    (i(!0), u(O, null, U(fe.value, (l, n) => (i(), u("div", {
+                      key: n,
+                      class: P(["relative flex items-center justify-center rounded-full transition-all duration-150 cursor-pointer group", be(l)]),
+                      style: ee({ width: d.daySize, height: d.daySize, fontSize: d.fontSize }),
+                      onClick: (r) => ye(l)
+                    }, T(l.day), 15, Pe))), 128))
+                  ])
+                ])) : (i(), u("div", Oe, [
+                  (i(!0), u(O, null, U(me.value, (l) => (i(), u("div", {
+                    key: l,
+                    class: P(["p-2 text-center rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 cursor-pointer transition-colors text-sm border border-transparent", { "bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 border-blue-200 dark:border-blue-800 font-bold": l === p.value }]),
+                    onClick: (n) => pe(l)
+                  }, T(l), 11, Ue))), 128))
+                ]))
+              ])) : V("", !0),
+              M.value ? (i(), u("div", je, [
+                c("div", Ie, [
+                  x(j, {
+                    modelValue: m.value.hours,
+                    "onUpdate:modelValue": e[2] || (e[2] = (l) => m.value.hours = l),
+                    min: 0,
+                    max: 23,
+                    onChange: H,
+                    precision: "0",
+                    "text-center": "",
+                    label: "Hora",
+                    noArrows: "",
+                    "hide-details": "",
+                    density: "compact",
+                    placeholder: "00"
+                  }, null, 8, ["modelValue"])
+                ]),
+                c("div", We, [
+                  x(j, {
+                    modelValue: m.value.minutes,
+                    "onUpdate:modelValue": e[3] || (e[3] = (l) => m.value.minutes = l),
+                    min: 0,
+                    max: 59,
+                    onChange: H,
+                    precision: "0",
+                    "text-center": "",
+                    label: "Min",
+                    noArrows: "",
+                    "hide-details": "",
+                    density: "compact",
+                    placeholder: "00"
+                  }, null, 8, ["modelValue"])
+                ]),
+                d.enableSeconds ? (i(), u("div", Ke, [
+                  x(j, {
+                    modelValue: m.value.seconds,
+                    "onUpdate:modelValue": e[4] || (e[4] = (l) => m.value.seconds = l),
+                    min: 0,
+                    max: 59,
+                    onChange: H,
+                    precision: "0",
+                    "text-center": "",
+                    label: "Seg",
+                    noArrows: "",
+                    "hide-details": "",
+                    density: "compact",
+                    placeholder: "00"
+                  }, null, 8, ["modelValue"])
+                ])) : V("", !0)
+              ])) : V("", !0),
+              d.autoApply ? V("", !0) : (i(), u("div", qe, [
+                x(le, {
+                  onClick: F,
+                  size: "xs"
+                }, {
+                  default: L(() => [...e[10] || (e[10] = [
+                    te("Cancelar", -1)
+                  ])]),
+                  _: 1
+                }),
+                x(le, {
+                  onClick: E,
+                  size: "xs",
+                  bgColor: "bg-success"
+                }, {
+                  default: L(() => [...e[11] || (e[11] = [
+                    te("Aplicar", -1)
+                  ])]),
+                  _: 1
+                })
+              ]))
+            ], 6)) : V("", !0)
+          ]),
+          _: 1
+        })
+      ]))
+    ], 512));
+  }
+});
+export {
+  tt as default
+};

package/dist/components/KunDatePicker/src/composables/usePosition.js

@@ -0,0 +1,53 @@
+import { ref as w, onMounted as L, onUnmounted as C } from "vue";
+function R(s, g, c = {}) {
+  const { offset: r = 8, placement: W = "bottom-start" } = c, u = w({
+    position: "fixed",
+    top: "0px",
+    left: "0px",
+    opacity: "0",
+    pointerEvents: "none",
+    transform: "scale(0.95)",
+    maxHeight: "auto"
+    // Default
+  }), o = w("bottom"), a = w(!1), p = async () => {
+    if (!s.value || !g.value) return;
+    const d = s.value.rootRef || s.value.$el || s.value, B = g.value;
+    if (!d || !d.getBoundingClientRect) return;
+    const t = d.getBoundingClientRect(), i = B.getBoundingClientRect(), E = window.innerHeight, m = window.innerWidth, n = 12, v = E - t.bottom - r - n, f = t.top - r - n, H = v >= i.height, z = f >= i.height;
+    let $ = 0, e = 0, l = "top center", h = 0;
+    H || !z && v >= f ? ($ = t.bottom + r, o.value = "bottom", l = "top center", h = v) : (h = f, o.value = "top", l = "bottom center"), c.align === "right" ? (e = t.right - i.width, l = o.value === "bottom" ? "top right" : "bottom right") : c.align === "center" ? (e = t.left + t.width / 2 - i.width / 2, l = o.value === "bottom" ? "top center" : "bottom center") : (e = t.left, l = o.value === "bottom" ? "top left" : "bottom left"), e + i.width > m - n && (e = m - i.width - n), e < n && (e = n);
+    const y = {
+      position: "fixed",
+      left: `${e}px`,
+      opacity: "1",
+      pointerEvents: "auto",
+      transform: "scale(1)",
+      transformOrigin: l,
+      zIndex: "99999",
+      maxWidth: `${m - n * 2}px`,
+      // Essential for scrolling: Restrict max-height to available space
+      maxHeight: `${h}px`
+    };
+    o.value === "top" ? u.value = {
+      ...y,
+      top: "auto",
+      bottom: `${E - t.top + r}px`
+    } : u.value = {
+      ...y,
+      top: `${$}px`,
+      bottom: "auto"
+    }, a.value = !0;
+  }, b = () => {
+    a.value && p();
+  }, x = () => {
+    a.value && p();
+  };
+  return L(() => {
+    window.addEventListener("resize", x), window.addEventListener("scroll", b, !0);
+  }), C(() => {
+    window.removeEventListener("resize", x), window.removeEventListener("scroll", b, !0);
+  }), { style: u, update: p, position: o, isVisible: a };
+}
+export {
+  R as usePosition
+};

package/dist/components/KunListItem/src/components/KunListItem.vue.js

@@ -193,8 +193,8 @@ const Z = { class: "flex w-full items-center" }, _ = {
               ])) : s("", !0)
             ])
           ]),
-          _: 2
-        }, 1040, ["id", "href", "aria-selected", "aria-disabled", "class", "onClick", "onKeydown"]))
+          _: 3
+        }, 16, ["id", "href", "aria-selected", "aria-disabled", "class", "onClick", "onKeydown"]))
       ]),
       _: 3
     }, 8, ["to", "replace"])) : (l(), o(v($.value ? "a" : e.tag), C({

package/dist/components/KunLoaderCircular/src/components/KunLoaderCircular.vue.js

@@ -44,7 +44,7 @@ const x = { class: "fixed inset-0 flex justify-center items-center bg-black/75 z
     }, [
       i("div", x, [
         i("div", k, [
-          t[0] || (t[0] = b(" Cargando datos ")),
+          t[0] || (t[0] = b(" Cargando datos ", -1)),
           i("div", d({
             class: "relative inline-block animate-spin mt-4",
             style: o.value,

package/dist/components/KunModalFooter/src/components/KunModalFooter.vue.js

@@ -64,7 +64,7 @@ const h = { class: "flex items-center justify-between" }, y = { class: "text-sm
           type: "button",
           class: "ml-2 inline-flex rounded-md p-1 hover:bg-opacity-75 focus:outline-none",
           onClick: d
-        }, s[0] || (s[0] = [
+        }, [...s[0] || (s[0] = [
           t("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             class: "h-5 w-5",
@@ -77,7 +77,7 @@ const h = { class: "flex items-center justify-between" }, y = { class: "text-sm
               "clip-rule": "evenodd"
             })
           ], -1)
-        ]))
+        ])])
       ])
     ], 16)) : c("", !0);
   }

package/dist/components/KunTable/src/components/KunTableFilter.vue.js

@@ -1,4 +1,4 @@
-import { computed as g, ref as k, onMounted as b, watch as C, createBlock as x, createCommentVNode as $, openBlock as d, withCtx as o, createElementVNode as c, createVNode as a, createElementBlock as h, Fragment as N, renderList as w, createTextVNode as V } from "vue";
+import { computed as g, ref as k, onMounted as b, watch as C, createBlock as _, createCommentVNode as $, openBlock as d, withCtx as o, createElementVNode as c, createVNode as a, createElementBlock as h, Fragment as N, renderList as w, createTextVNode as V } from "vue";
 import z from "../../../KunDialog/src/components/KunDialog.vue.js";
 import A from "../../../KunRow/src/components/KunRow.vue.js";
 import B from "../../../KunCol/src/components/KunCol.vue.js";
@@ -21,8 +21,8 @@ const D = { class: "w-full" }, E = { class: "flex justify-end px-1" }, I = { cla
     }), i = k({});
     b(() => {
       i.value = { ...n.filters.reduce((l, t) => {
-        var _;
-        const e = t.value, s = (_ = n.activeFilters) == null ? void 0 : _[e];
+        var x;
+        const e = t.value, s = (x = n.activeFilters) == null ? void 0 : x[e];
         return s !== void 0 && (l[e] = s), l;
       }, {}) };
     });
@@ -38,7 +38,7 @@ const D = { class: "w-full" }, E = { class: "flex justify-end px-1" }, I = { cla
     return C(i, (l) => {
       for (const t in l)
         Array.isArray(l[t]) && l[t].length === 0 && delete l[t];
-    }, { deep: !0 }), (l, t) => m.value ? (d(), x(z, {
+    }, { deep: !0 }), (l, t) => m.value ? (d(), _(z, {
       key: 0,
       modelValue: m.value,
       "onUpdate:modelValue": t[0] || (t[0] = (e) => m.value = e),
@@ -66,7 +66,7 @@ const D = { class: "w-full" }, E = { class: "flex justify-end px-1" }, I = { cla
           ]),
           a(A, null, {
             default: o(() => [
-              (d(!0), h(N, null, w(f.filters, (e) => (d(), x(B, {
+              (d(!0), h(N, null, w(f.filters, (e) => (d(), _(B, {
                 cols: "4",
                 class: "px-2"
               }, {
@@ -92,18 +92,16 @@ const D = { class: "w-full" }, E = { class: "flex justify-end px-1" }, I = { cla
           }),
           c("div", I, [
             a(p, { onClick: F }, {
-              default: o(() => t[1] || (t[1] = [
-                V(" Limpiar filtros ")
-              ])),
-              _: 1,
-              __: [1]
+              default: o(() => [...t[1] || (t[1] = [
+                V(" Limpiar filtros ", -1)
+              ])]),
+              _: 1
             }),
             a(p, { onClick: y }, {
-              default: o(() => t[2] || (t[2] = [
-                V(" Aplicar ")
-              ])),
-              _: 1,
-              __: [2]
+              default: o(() => [...t[2] || (t[2] = [
+                V(" Aplicar ", -1)
+              ])]),
+              _: 1
             })
           ])
         ])

package/dist/icons/IconAccountOutline.vue.js

@@ -7,12 +7,12 @@ const r = {}, a = {
   viewBox: "0 0 24 24"
 };
 function l(m, t) {
-  return o(), e("svg", a, t[0] || (t[0] = [
+  return o(), e("svg", a, [...t[0] || (t[0] = [
     c("path", {
       fill: "currentColor",
       d: "M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 2a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2m0 7c2.67 0 8 1.33 8 4v3H4v-3c0-2.67 5.33-4 8-4m0 1.9c-2.97 0-6.1 1.46-6.1 2.1v1.1h12.2V17c0-.64-3.13-2.1-6.1-2.1"
     }, null, -1)
-  ]));
+  ])]);
 }
 const f = /* @__PURE__ */ n(r, [["render", l]]);
 export {

package/dist/icons/IconArrowDown.vue.js

@@ -7,12 +7,12 @@ const n = {}, m = {
   viewBox: "0 0 24 24"
 };
 function c(s, t) {
-  return o(), e("svg", m, t[0] || (t[0] = [
+  return o(), e("svg", m, [...t[0] || (t[0] = [
     l("path", {
       fill: "currentColor",
       d: "m12 20l-.707.707l.707.707l.707-.707zm1-15a1 1 0 1 0-2 0zm-7.707 9.707l6 6l1.414-1.414l-6-6zm7.414 6l6-6l-1.414-1.414l-6 6zM13 20V5h-2v15z"
     }, null, -1)
-  ]));
+  ])]);
 }
 const w = /* @__PURE__ */ r(n, [["render", c]]);
 export {