adverich-kun-ui 0.1.54 → 0.1.56

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

@@ -1,5 +1,5 @@
-import { ref as i, inject as o, createElementBlock as s, openBlock as u, normalizeClass as c, renderSlot as d } from "vue";
-const m = {
+import { ref as i, inject as o, onMounted as d, onBeforeUnmount as f, watch as m, computed as v, createElementBlock as b, openBlock as g, normalizeClass as k, renderSlot as y } from "vue";
+const B = {
   __name: "KunListItem",
   props: {
     value: {
@@ -8,32 +8,49 @@ const m = {
     },
     disabled: Boolean,
     active: Boolean,
+    // usado si se controla desde afuera
     activeClass: {
       type: String,
       default: "bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-300"
     }
   },
-  setup(e) {
-    const t = e, l = i(t.active), a = o("kun-list", null);
-    function r() {
-      t.disabled || (a && t.value !== null ? a.toggleItem(t.value) : l.value = !l.value);
+  setup(a) {
+    const l = a, n = i(null), r = o("registerListItemRef", null), e = o("kun-list", null);
+    d(() => {
+      r && n.value && r(n.value);
+    }), f(() => {
+      r && r(null);
+    });
+    const u = i(l.active);
+    m(() => l.active, (t) => {
+      u.value = t;
+    });
+    const s = v(() => {
+      var t;
+      return ((t = e == null ? void 0 : e.isSelected) == null ? void 0 : t.call(e, l.value)) ?? !1;
+    });
+    function c() {
+      l.disabled || e && l.value !== null && e.toggleItem(l.value);
     }
-    return (n, b) => (u(), s("li", {
+    return (t, p) => (g(), b("li", {
+      ref_key: "liRef",
+      ref: n,
       role: "listitem",
-      class: c([
+      tabindex: "-1",
+      class: k(["w-full flex flex-col items-start", [
         "kun-list-item",
         {
-          "px-4 py-2 rounded-md cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center gap-2": !e.disabled,
-          "text-gray-500 dark:text-gray-400 cursor-not-allowed": e.disabled,
-          [e.activeClass]: l.value
+          "px-4 py-2 rounded-md cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700": !a.disabled,
+          "text-gray-500 dark:text-gray-400 cursor-not-allowed": a.disabled,
+          [a.activeClass]: s.value || u.value
         }
-      ]),
-      onClick: r
+      ]]),
+      onClick: c
     }, [
-      d(n.$slots, "default")
+      y(t.$slots, "default")
     ], 2));
   }
 };
 export {
-  m as default
+  B as default
 };

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

@@ -1,4 +1,4 @@
-import { createElementBlock as a, openBlock as s, normalizeClass as l, renderSlot as n, createTextVNode as o, toDisplayString as c } from "vue";
+import { createElementBlock as r, openBlock as a, normalizeClass as l, renderSlot as s, createTextVNode as o, toDisplayString as i } from "vue";
 const p = {
   __name: "KunListItemText",
   props: {
@@ -6,6 +6,14 @@ const p = {
       type: [String, Number],
       default: null
     },
+    fontSize: {
+      type: String,
+      default: "text-sm"
+    },
+    fontWeight: {
+      type: String,
+      default: "font-medium"
+    },
     class: {
       type: [String, Object, Array],
       default: null
@@ -13,15 +21,16 @@ const p = {
   },
   setup(e) {
     const t = e;
-    return (r, u) => (s(), a("span", {
+    return (n, u) => (a(), r("span", {
       class: l([
-        "kun-list-item-text",
-        "text-sm font-medium text-gray-900 dark:text-gray-100 truncate",
-        t.class
+        t.fontSize,
+        t.fontWeight,
+        t.class,
+        "truncate"
       ])
     }, [
-      n(r.$slots, "default", {}, () => [
-        o(c(t.text), 1)
+      s(n.$slots, "default", {}, () => [
+        o(i(t.text), 1)
       ])
     ], 2));
   }

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

@@ -0,0 +1,40 @@
+import { createElementBlock as n, openBlock as r, normalizeClass as a, renderSlot as o, createTextVNode as s, toDisplayString as i } from "vue";
+const p = {
+  __name: "KunListItemTitle",
+  props: {
+    title: {
+      type: [String, Number],
+      default: null
+    },
+    fontSize: {
+      type: String,
+      default: "text-lg"
+    },
+    fontWeight: {
+      type: String,
+      default: "font-medium"
+    },
+    class: {
+      type: [String, Object, Array],
+      default: null
+    }
+  },
+  setup(e) {
+    const t = e;
+    return (l, u) => (r(), n("span", {
+      class: a([
+        "truncate",
+        t.fontSize,
+        t.fontWeight,
+        t.class
+      ])
+    }, [
+      o(l.$slots, "default", {}, () => [
+        s(i(t.title), 1)
+      ])
+    ], 2));
+  }
+};
+export {
+  p as default
+};

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

@@ -1,89 +1,115 @@
-import { inject as v, ref as h, watch as P, computed as y, onUnmounted as j, createElementBlock as o, openBlock as u, createElementVNode as w, createCommentVNode as i, normalizeClass as C, renderSlot as V, toDisplayString as d, withKeys as N } from "vue";
+import { inject as x, ref as o, watch as F, computed as j, onUnmounted as N, createElementBlock as i, openBlock as d, normalizeClass as I, createElementVNode as T, createCommentVNode as y, renderSlot as w, toDisplayString as b, withModifiers as P } from "vue";
 import S from "../composables/KunTextFieldProps.js";
-const T = {
-  class: "w-full flex justify-center my-2",
-  style: { cursor: "text" }
-}, $ = {
+const z = {
   key: 0,
   class: "mr-2"
-}, z = ["type", "value", "placeholder"], D = {
+}, M = ["type", "value", "placeholder"], q = {
   key: 1,
   class: "ml-2"
-}, M = {
-  key: 0,
-  class: "text-red-500 text-sm mt-1 w-full text-left pl-1"
 }, A = {
+  key: 0,
+  class: "text-red-500 text-sm mt-1 w-full text-center pl-1"
+}, J = {
   __name: "KunTextField",
   props: { ...S },
-  emits: ["update:modelValue", "focusInput", "blurInput", "pressEsc", "clickInput"],
-  setup(g, { expose: F, emit: E }) {
-    const t = g, p = E, b = v("registerField"), k = v("unregisterField"), l = h(t.modelValue), n = h(!1);
-    P(
-      () => t.modelValue,
-      (e) => {
-        l.value = e;
-      }
-    );
-    async function c() {
-      for (const e of t.rules) {
-        const r = await Promise.resolve(e(l.value));
-        if (r !== !0) return r;
+  emits: ["update:modelValue", "focusInput", "blurInput", "handleClick", "keyDown", "keyUp"],
+  setup(C, { expose: B, emit: E }) {
+    const a = C, u = E, g = x("registerField", null), h = x("unregisterField", null), t = o(a.modelValue), r = o(!1), n = o("");
+    let f = !1;
+    const c = o(!1);
+    async function p() {
+      for (const e of a.rules) {
+        const l = await Promise.resolve(e(t.value));
+        if (l !== !0) return l;
       }
       return !0;
     }
-    const f = y(() => !n.value || t.error ? t.errorMessage : c()), m = y(
-      () => t.error || !!f.value && n.value
+    F(() => a.modelValue, (e) => {
+      e !== t.value && (f = !0, t.value = e);
+    }), F(t, () => {
+      if (f) {
+        f = !1;
+        return;
+      }
+      r.value = !0, u("update:modelValue", t.value), clearTimeout(m.value), m.value = setTimeout(async () => {
+        const e = await p();
+        n.value = e === !0 ? "" : e;
+      }, 300);
+    });
+    const k = j(
+      () => a.error || !!n.value && r.value
     );
-    function I(e) {
-      l.value = e.target.value, p("update:modelValue", l.value);
+    function $() {
+      c.value = !0, u("focusInput");
+    }
+    function D(e) {
+      t.value = e.target.value, r.value = !0, u("update:modelValue", t.value);
     }
-    function x() {
-      n.value = !0, p("blurInput");
+    async function K() {
+      r.value = !0, c.value = !1;
+      const e = await p();
+      n.value = e === !0 ? "" : e, u("blurInput");
     }
-    async function s() {
-      return n.value = !0, await c() === !0;
+    async function v() {
+      r.value = !0;
+      const e = await p();
+      return n.value = e === !0 ? "" : e, e === !0;
     }
-    function B() {
-      l.value = t.modelValue, n.value = !1;
+    function U() {
+      t.value = a.modelValue, r.value = !1, n.value = "";
     }
-    function K() {
-      n.value = !1;
+    function _() {
+      r.value = !1, n.value = "";
     }
-    return b({ validate: s }), j(() => {
-      k({ validate: s });
-    }), F({
-      validate: s,
-      reset: B,
-      resetValidation: K
-    }), (e, r) => (u(), o("div", T, [
-      w("div", {
-        class: C([
-          "w-full h-full text-field-style flex flex-row items-center px-2",
+    g && g({ validate: v }), N(() => {
+      h && h({ validate: v }), clearTimeout(m.value);
+    });
+    const V = o(null);
+    B({
+      validate: v,
+      reset: U,
+      resetValidation: _,
+      inputField: V
+    });
+    const m = o(null);
+    return (e, l) => (d(), i("div", {
+      class: I(["w-full flex flex-col justify-center relative rounded-t-md border", c.value ? "border-blue-600 shadow-[0_0_0_1px_rgba(59,130,246,0.5)]" : "border-gray-900"]),
+      style: { cursor: "text" }
+    }, [
+      T("div", {
+        class: I([
+          "w-full h-full text-field-style flex flex-row items-center p-2 bg-gray-800",
           e.rounded ? "rounded" : "",
-          m.value ? "border border-red-500 bg-red-50" : ""
+          k.value ? "border border-red-500 bg-red-50" : ""
         ])
       }, [
-        e.prefix ? (u(), o("div", $, d(e.prefix), 1)) : i("", !0),
-        V(e.$slots, "prepend-inner"),
-        w("input", {
-          ref: "inputField",
+        e.prefix ? (d(), i("div", z, b(e.prefix), 1)) : y("", !0),
+        w(e.$slots, "prepend-inner"),
+        T("input", {
+          ref_key: "inputField",
+          ref: V,
           type: e.type,
-          value: l.value,
+          value: t.value,
           autocomplete: "off",
-          class: "h-full w-full bg-transparent focus:outline-none text-center",
-          placeholder: e.inputPlaceholder,
-          onInput: I,
-          onBlur: x,
-          onKeydown: r[0] || (r[0] = N((...a) => e.handleEscape && e.handleEscape(...a), ["escape"])),
-          onFocus: r[1] || (r[1] = (...a) => e.handleFocus && e.handleFocus(...a))
-        }, null, 40, z),
-        V(e.$slots, "append-inner"),
-        e.suffix ? (u(), o("div", D, d(e.suffix), 1)) : i("", !0)
+          class: "h-full w-full bg-transparent rounded focus:outline-none text-center",
+          placeholder: e.placeholder,
+          onInput: D,
+          onBlur: K,
+          onClick: l[0] || (l[0] = P((s) => {
+            u("handleClick");
+          }, ["stop"])),
+          onFocus: $,
+          onKeydown: l[1] || (l[1] = (s) => u("keyDown", s)),
+          onKeyup: l[2] || (l[2] = (s) => u("keyUp", s))
+        }, null, 40, M),
+        w(e.$slots, "default"),
+        w(e.$slots, "append-inner"),
+        e.suffix ? (d(), i("div", q, b(e.suffix), 1)) : y("", !0)
       ], 2),
-      m.value ? (u(), o("div", M, d(f.value), 1)) : i("", !0)
-    ]));
+      k.value ? (d(), i("div", A, b(n.value), 1)) : y("", !0)
+    ], 2));
   }
 };
 export {
-  A as default
+  J as default
 };

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

@@ -0,0 +1,78 @@
+import { ref as s, computed as r, watch as H, nextTick as w, onMounted as x, createElementBlock as i, openBlock as u, createElementVNode as m, normalizeStyle as d, Fragment as T, renderList as _, renderSlot as k } from "vue";
+const O = {
+  __name: "KunVirtualScroller",
+  props: {
+    items: {
+      type: Array,
+      required: !0
+    },
+    estimatedItemHeight: {
+      type: Number,
+      default: 48
+    },
+    buffer: {
+      type: Number,
+      default: 5
+    },
+    scrollToIndex: {
+      type: Number,
+      default: null
+    }
+  },
+  setup(p) {
+    const e = p, t = s(null), n = s(0), c = s(0), h = r(() => e.items.length * e.estimatedItemHeight), a = r(
+      () => Math.max(0, Math.floor(n.value / e.estimatedItemHeight) - e.buffer)
+    ), g = r(
+      () => Math.min(
+        e.items.length,
+        Math.ceil((n.value + c.value) / e.estimatedItemHeight) + e.buffer
+      )
+    ), b = r(
+      () => e.items.slice(a.value, g.value)
+    ), y = r(() => a.value * e.estimatedItemHeight);
+    function I() {
+      t.value && (n.value = t.value.scrollTop);
+    }
+    function f() {
+      t.value && (c.value = t.value.clientHeight);
+    }
+    return H(
+      () => e.scrollToIndex,
+      async (l) => {
+        l !== null && typeof l == "number" && l >= 0 && l < e.items.length && t.value && (await w(), t.value.scrollTop = l * e.estimatedItemHeight);
+      },
+      { immediate: !0 }
+    ), x(() => {
+      f(), typeof ResizeObserver < "u" && new ResizeObserver(f).observe(t.value);
+    }), (l, z) => (u(), i("div", {
+      ref_key: "containerRef",
+      ref: t,
+      class: "w-full h-full overflow-y-auto relative",
+      onScroll: I
+    }, [
+      m("div", {
+        style: d({ height: h.value + "px", position: "relative" })
+      }, [
+        m("div", {
+          style: d({
+            transform: `translateY(${y.value}px)`,
+            position: "absolute",
+            width: "100%"
+          })
+        }, [
+          (u(!0), i(T, null, _(b.value, (o, v) => (u(), i("div", {
+            key: (o == null ? void 0 : o.id) ?? a.value + v
+          }, [
+            k(l.$slots, "default", {
+              item: o,
+              index: a.value + v
+            })
+          ]))), 128))
+        ], 4)
+      ], 4)
+    ], 544));
+  }
+};
+export {
+  O as default
+};

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

@@ -1,150 +1,61 @@
-import { createElementBlock as A, openBlock as y, Fragment as D, createBlock as g, createCommentVNode as j, createElementVNode as a, Teleport as R, resolveDynamicComponent as q, unref as e, withCtx as $, withDirectives as K, mergeProps as V, withKeys as r, withModifiers as s, renderSlot as b, vShow as c, Transition as G, normalizeStyle as J, normalizeClass as L, normalizeProps as O, guardReactiveProps as Q } from "vue";
-import { useKunMenu as U } from "../composables/useKunMenu.js";
-import { kunMenuProps as X } from "../composables/kunMenuProps.js";
+import { onMounted as v, createBlock as M, createCommentVNode as H, openBlock as C, Teleport as E, createVNode as b, Transition as K, withCtx as P, withDirectives as V, createElementVNode as S, mergeProps as I, unref as t, withKeys as u, withModifiers as m, renderSlot as N, vShow as B } from "vue";
+import { useKunMenu as T } from "../composables/useKunMenu.js";
+import { kunMenuProps as W } from "../composables/kunMenuProps.js";
+import { useKunMenuStyles as z } from "../composables/useKunMenuStyles.js";
 /* empty css             */
-const Y = ["aria-label"], Z = { class: "max-h-60 overflow-auto" }, _ = ["aria-label"], ee = { class: "max-h-60 overflow-auto" }, te = ["aria-expanded"], re = {
+import A from "../../../../_virtual/_plugin-vue_export-helper.js";
+const D = {
   __name: "kunMenu",
-  props: X,
-  emits: ["update:modelValue"],
-  setup(B, { emit: F }) {
-    const l = B, N = F, {
-      menuVisible: d,
-      activatorEl: S,
-      contentEl: h,
-      computedHeight: k,
-      computedMinWidth: w,
-      computedMinHeight: C,
-      computedMaxWidth: M,
-      computedMaxHeight: z,
-      locationMap: I,
-      transitionComponent: T,
-      hideMenu: p,
-      handleActivatorClick: P,
-      handleHover: H,
-      handleFocus: E,
-      handleContentClick: u,
-      focusNextItem: m,
-      focusPrevItem: v,
-      focusCurrentItem: f,
-      computedTransition: x,
-      menuWidth: W
-    } = U(l, N);
-    return (o, t) => (y(), A(D, null, [
-      o.attach !== !0 ? (y(), g(R, {
-        key: 0,
-        to: o.attach || "body"
-      }, [
-        typeof l.transition == "object" ? (y(), g(q(e(T)), {
-          key: 0,
-          mode: "out-in"
-        }, {
-          default: $(() => {
-            var i;
-            return [
-              K(a("div", V({
-                ref_key: "contentEl",
-                ref: h,
-                role: "menu",
-                "aria-label": o.label,
-                tabindex: "-1",
-                class: ["absolute bg-white dark:bg-gray-800 rounded shadow-lg z-[var(--zIndex,2000)] overflow-hidden focus:outline-none", [
-                  o.contentClass,
-                  ((i = e(I)[o.location]) == null ? void 0 : i.class) || ""
-                ]],
-                style: {
-                  width: e(W),
-                  minWidth: e(w),
-                  maxWidth: e(M),
-                  minHeight: e(C),
-                  maxHeight: e(z),
-                  height: e(k),
-                  zIndex: o.zIndex,
-                  opacity: o.scrim && typeof o.scrim == "string" ? l.opacity : void 0
-                }
-              }, o.contentProps, {
-                onClick: t[0] || (t[0] = s((...n) => e(u) && e(u)(...n), ["stop"])),
-                onKeydown: [
-                  t[1] || (t[1] = r(s((...n) => e(m) && e(m)(...n), ["stop", "prevent"]), ["down"])),
-                  t[2] || (t[2] = r(s((...n) => e(v) && e(v)(...n), ["stop", "prevent"]), ["up"])),
-                  t[3] || (t[3] = r(s((...n) => e(f) && e(f)(...n), ["stop"]), ["enter"])),
-                  t[4] || (t[4] = r((...n) => e(p) && e(p)(...n), ["escape"]))
-                ]
-              }), [
-                a("div", Z, [
-                  b(o.$slots, "default")
-                ])
-              ], 16, Y), [
-                [c, e(d)]
-              ])
-            ];
-          }),
-          _: 3
-        })) : (y(), g(G, {
-          key: 1,
-          name: e(x)
-        }, {
-          default: $(() => {
-            var i;
-            return [
-              K(a("div", V({
-                ref_key: "contentEl",
-                ref: h,
-                role: "menu",
-                "aria-label": o.label,
-                tabindex: "-1",
-                class: ["absolute bg-white dark:bg-gray-800 rounded shadow-lg z-[var(--zIndex,2000)] overflow-hidden focus:outline-none", [
-                  o.contentClass,
-                  ((i = e(I)[o.location]) == null ? void 0 : i.class) || ""
-                ]],
-                style: {
-                  width: e(W),
-                  minWidth: e(w),
-                  maxWidth: e(M),
-                  minHeight: e(C),
-                  maxHeight: e(z),
-                  height: e(k),
-                  zIndex: o.zIndex,
-                  opacity: o.scrim && typeof o.scrim == "string" ? l.opacity : void 0
-                }
-              }, o.contentProps, {
-                onClick: t[5] || (t[5] = s((...n) => e(u) && e(u)(...n), ["stop"])),
-                onKeydown: [
-                  t[6] || (t[6] = r(s((...n) => e(m) && e(m)(...n), ["stop", "prevent"]), ["down"])),
-                  t[7] || (t[7] = r(s((...n) => e(v) && e(v)(...n), ["stop", "prevent"]), ["up"])),
-                  t[8] || (t[8] = r(s((...n) => e(f) && e(f)(...n), ["stop"]), ["enter"])),
-                  t[9] || (t[9] = r((...n) => e(p) && e(p)(...n), ["escape"]))
-                ]
-              }), [
-                a("div", ee, [
-                  b(o.$slots, "default")
-                ])
-              ], 16, _), [
-                [c, e(d)]
-              ])
-            ];
-          }),
-          _: 3
-        }, 8, ["name"]))
-      ], 8, ["to"])) : j("", !0),
-      a("div", {
-        ref_key: "activatorEl",
-        ref: S,
-        class: L(["inline-block relative", [o.activatorProps.class]]),
-        style: J([o.activatorProps.style]),
-        onClick: t[10] || (t[10] = s((...i) => e(P) && e(P)(...i), ["stop"])),
-        onMouseenter: t[11] || (t[11] = (i) => e(H)("enter")),
-        onMouseleave: t[12] || (t[12] = (i) => e(H)("leave")),
-        onFocus: t[13] || (t[13] = (...i) => e(E) && e(E)(...i)),
-        role: "button",
-        "aria-haspopup": !0,
-        "aria-expanded": e(d),
-        tabindex: "0"
-      }, [
-        b(o.$slots, "activator", O(Q({ isActive: e(d) })))
-      ], 46, te)
-    ], 64));
+  props: W,
+  emits: ["update:modelValue", "click:outside", "handleEscape"],
+  setup(d, { emit: l }) {
+    const r = d, p = l, {
+      menuVisible: h,
+      activatorEl: f,
+      contentEl: i,
+      handleActivatorClick: c,
+      handleHover: g,
+      handleFocus: y,
+      focusCurrentItem: s,
+      handleEscape: a
+    } = T(r, p), {
+      originClass: w,
+      setMenuPosition: k
+    } = z(r, i, f, c, g, y);
+    return v(() => {
+      k();
+    }), (e, o) => e.attach !== !0 ? (C(), M(E, {
+      key: 0,
+      to: e.attach || "body"
+    }, [
+      b(K, { name: e.transition }, {
+        default: P(() => [
+          V(S("div", I({
+            ref_key: "contentEl",
+            ref: i,
+            role: "menu",
+            tabindex: "-1",
+            class: ["bg-gray-100 rounded shadow-lg overflow-y-auto focus:outline-none mt-0.5", [e.contentClass, t(w), e.width, e.height, e.minWidth, e.maxWidth, e.minHeight, e.maxHeight, e.zIndex]],
+            style: {
+              ...e.menuPositionStyle,
+              maxHeight: typeof e.maxHeight == "number" ? e.maxHeight + "px" : e.maxHeight
+            }
+          }, e.contentProps, {
+            onKeydown: [
+              o[0] || (o[0] = u(m((...n) => t(s) && t(s)(...n), ["stop"]), ["enter"])),
+              o[1] || (o[1] = u(m((...n) => t(a) && t(a)(...n), ["stop"]), ["escape"]))
+            ]
+          }), [
+            N(e.$slots, "default", {}, void 0, !0)
+          ], 16), [
+            [B, t(h)]
+          ])
+        ]),
+        _: 3
+      }, 8, ["name"])
+    ], 8, ["to"])) : H("", !0);
   }
-};
+}, L = /* @__PURE__ */ A(D, [["__scopeId", "data-v-6c2e939f"]]);
 export {
-  re as default
+  L as default
 };