adverich-kun-ui 0.1.126 → 0.1.128

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

@@ -1,97 +1,116 @@
-import { useSlots as h, computed as w, ref as N, onMounted as x, createElementBlock as u, openBlock as d, mergeProps as E, renderSlot as n, createVNode as V, createElementVNode as p, Transition as B, withCtx as L, createCommentVNode as T, unref as a, normalizeStyle as f, normalizeClass as v, createTextVNode as m, toDisplayString as y } from "vue";
-import { useTooltip as _ } from "../composables/useTooltip.js";
-const O = {
+import { ref as c, computed as $, onMounted as R, onBeforeUnmount as B, createElementBlock as E, openBlock as x, Fragment as O, createElementVNode as b, createBlock as C, mergeProps as z, renderSlot as T, Teleport as L, createVNode as N, Transition as V, withCtx as _, withDirectives as D, normalizeStyle as M, normalizeClass as P, createTextVNode as F, toDisplayString as K, vShow as j, nextTick as A } from "vue";
+/* empty css                */
+import I from "../../../../_virtual/_plugin-vue_export-helper.js";
+const U = {
   __name: "KunTooltip",
   props: {
-    text: {
-      type: String,
-      default: ""
-    },
+    text: String,
     location: {
       type: String,
-      default: "top",
-      validator: (e) => ["top", "bottom", "left", "right"].includes(e)
+      default: "top"
     },
     openOn: {
       type: String,
-      default: "hover",
-      validator: (e) => ["hover", "click"].includes(e)
-    },
-    disabled: Boolean,
-    contentClass: {
-      type: [String, Object, Array],
-      default: null
-    },
-    delay: {
-      type: [String, Number],
-      default: 0,
-      validator: (e) => !isNaN(parseInt(e))
-    },
-    closeOnClick: {
-      type: Boolean,
-      default: !1
+      default: "hover"
+      // 'click' | 'hover' | 'focus'
     },
     transition: {
       type: String,
       default: "fade"
+    },
+    contentClass: [String, Array, Object],
+    disabled: Boolean,
+    delay: {
+      type: [Number, String],
+      default: 0
+    },
+    closeDelay: {
+      type: [Number, String],
+      default: 100
     }
   },
-  setup(e) {
-    const o = e, r = h(), k = w(() => r.activator ? {
-      onMouseenter: s,
-      onMouseleave: i,
-      onClick: c
-    } : {}), {
-      isVisible: g,
-      arrowClass: S,
-      positionStyle: b,
-      arrowStyle: C,
-      onEnter: s,
-      onLeave: i,
-      onClick: c
-    } = _(o), l = N(null);
-    return x(() => {
-      if (!r.activator && l.value) {
-        const t = l.value;
-        t.addEventListener("mouseenter", s), t.addEventListener("mouseleave", i), t.addEventListener("click", c);
-      }
-    }), (t, $) => (d(), u("div", E({ class: "kun-tooltip relative inline-block" }, t.$attrs), [
-      n(t.$slots, "activator", { props: k.value }, () => [
-        p("span", {
-          ref_key: "activator",
-          ref: l,
-          class: "kun-tooltip-activator"
-        }, [
-          n(t.$slots, "default")
-        ], 512)
-      ]),
-      V(B, { name: "fade" }, {
-        default: L(() => [
-          a(g) ? (d(), u("div", {
-            key: 0,
-            ref: "tooltip",
-            class: v([
-              "kun-tooltip-content",
-              "absolute z-50 px-2 py-1 text-sm rounded shadow-lg text-white bg-gray-800 dark:bg-gray-700 whitespace-nowrap",
-              o.contentClass
-            ]),
-            style: f(a(b))
-          }, [
-            m(y(o.text) + " ", 1),
-            n(t.$slots, "default", {}, () => [
-              m(y(o.text), 1)
-            ]),
-            p("div", {
-              class: v(["kun-tooltip-arrow", a(S)]),
-              style: f(a(C))
-            }, null, 6)
-          ], 6)) : T("", !0)
-        ]),
-        _: 3
-      })
-    ], 16));
+  setup(l) {
+    const o = l, i = c(!1), v = c(null), g = c(null), h = c({});
+    let u = null, d = null;
+    function p() {
+      o.disabled || (clearTimeout(d), u = setTimeout(async () => {
+        i.value = !0, await A(), y();
+      }, +o.delay));
+    }
+    function f() {
+      clearTimeout(u), d = setTimeout(() => {
+        i.value = !1;
+      }, +o.closeDelay);
+    }
+    function S() {
+      i.value ? f() : p();
+    }
+    const w = $(() => {
+      if (o.disabled) return {};
+      const e = {};
+      return o.openOn === "hover" && (e.onMouseenter = p, e.onMouseleave = f), o.openOn === "click" && (e.onClick = S), o.openOn === "focus" && (e.onFocus = p, e.onBlur = f), e;
+    });
+    function y() {
+      const e = v.value, m = g.value;
+      if (!e || !m) return;
+      const t = e.getBoundingClientRect(), n = m.getBoundingClientRect(), a = window.pageYOffset || document.documentElement.scrollTop, s = window.pageXOffset || document.documentElement.scrollLeft, k = {
+        top: {
+          top: `${t.top + a - n.height - 16}px`,
+          left: `${t.left + s + t.width / 2 - n.width / 2}px`
+        },
+        bottom: {
+          top: `${t.bottom + a + 8}px`,
+          left: `${t.left + s + t.width / 2 - n.width / 2}px`
+        },
+        left: {
+          top: `${t.top + a + t.height / 2 - n.height / 2}px`,
+          left: `${t.left + s - n.width - 8}px`
+        },
+        right: {
+          top: `${t.top + a + t.height / 2 - n.height / 2}px`,
+          left: `${t.right + s + 8}px`
+        }
+      };
+      h.value = k[o.location];
+    }
+    const r = () => {
+      i.value && y();
+    };
+    return R(() => {
+      window.addEventListener("scroll", r), window.addEventListener("resize", r);
+    }), B(() => {
+      clearTimeout(u), clearTimeout(d), window.removeEventListener("scroll", r), window.removeEventListener("resize", r);
+    }), (e, m) => (x(), E(O, null, [
+      b("span", z({
+        ref_key: "activatorRef",
+        ref: v
+      }, w.value), [
+        T(e.$slots, "activator", { props: w.value }, void 0, !0)
+      ], 16),
+      (x(), C(L, { to: "body" }, [
+        N(V, { name: l.transition }, {
+          default: _(() => [
+            D(b("div", {
+              ref_key: "tooltipRef",
+              ref: g,
+              class: P(["absolute px-3 py-2 text-sm rounded shadow text-black dark:text-white bg-gray-600:75 dark:bg-gray-700/75", l.contentClass]),
+              style: M([h.value, { "z-index": "9999" }]),
+              role: "tooltip",
+              "aria-hidden": "!isVisible"
+            }, [
+              T(e.$slots, "default", {}, () => [
+                F(K(l.text), 1)
+              ], !0)
+            ], 6), [
+              [j, i.value]
+            ])
+          ]),
+          _: 3
+        }, 8, ["name"])
+      ]))
+    ], 64));
   }
-};
+}, G = /* @__PURE__ */ I(U, [["__scopeId", "data-v-b846040c"]]);
 export {
-  O as default
+  G as default
 };

package/dist/index.js

@@ -8,8 +8,8 @@ import u from "./components/KunBtn/src/components/KunBtn.vue.js";
 import f from "./components/KunBudge/src/components/KunBudge.vue.js";
 import K from "./components/KunCard/src/components/KunCard.vue.js";
 import _ from "./components/KunCardActions/src/components/KunCardActions.vue.js";
-import p from "./components/KunCardItem/src/components/KunCardItem.vue.js";
-import e from "./components/KunCardSubtitle/src/components/KunCardSubtitle.vue.js";
+import e from "./components/KunCardItem/src/components/KunCardItem.vue.js";
+import p from "./components/KunCardSubtitle/src/components/KunCardSubtitle.vue.js";
 import c from "./components/KunCardText/src/components/KunCardText.vue.js";
 import $ from "./components/KunCardTitle/src/components/KunCardTitle.vue.js";
 import l from "./components/KunChip/src/components/KunChip.vue.js";
@@ -17,9 +17,9 @@ import d from "./components/KunCol/src/components/KunCol.vue.js";
 import L from "./components/KunContainer/src/components/KunContainer.vue.js";
 import C from "./components/KunCurrency/src/components/KunCurrency.vue.js";
 import I from "./components/KunDivider/src/components/KunDivider.vue.js";
-import A from "./components/KunForm/src/components/KunForm.vue.js";
+import b from "./components/KunForm/src/components/KunForm.vue.js";
 import T from "./components/KunIcon/src/components/KunIcon.vue.js";
-import b from "./components/KunList/src/components/KunList.vue.js";
+import A from "./components/KunList/src/components/KunList.vue.js";
 import S from "./components/KunListGroup/src/components/KunListGroup.vue.js";
 import x from "./components/KunListImg/src/components/KunListImg.vue.js";
 import h from "./components/KunListItem/src/components/KunListItem.vue.js";
@@ -36,9 +36,10 @@ import j from "./components/KunRow/src/components/KunRow.vue.js";
 import k from "./components/KunSlider/src/components/KunSlider.vue.js";
 import q from "./components/KunSpacer/src/components/KunSpacer.vue.js";
 import M from "./components/KunSwitch/src/components/KunSwitch.vue.js";
-import N from "./components/KunTextField/src/components/KunTextField.vue.js";
-import z from "./components/KunToolbar/src/components/KunToolbar.vue.js";
-import E from "./components/KunTooltip/src/components/KunTooltip.vue.js";
+import N from "./components/KunTable/src/components/KunTable.vue.js";
+import z from "./components/KunTextField/src/components/KunTextField.vue.js";
+import E from "./components/KunToolbar/src/components/KunToolbar.vue.js";
+import H from "./components/KunTooltip/src/components/KunTooltip.vue.js";
 const n = {
   KunAlert: i,
   KunAppbar: o,
@@ -49,8 +50,8 @@ const n = {
   KunBudge: f,
   KunCard: K,
   KunCardActions: _,
-  KunCardItem: p,
-  KunCardSubtitle: e,
+  KunCardItem: e,
+  KunCardSubtitle: p,
   KunListItemTitle: F,
   KunCardText: c,
   KunCardTitle: $,
@@ -59,9 +60,9 @@ const n = {
   KunContainer: L,
   KunCurrency: C,
   KunDivider: I,
-  KunForm: A,
+  KunForm: b,
   KunIcon: T,
-  KunList: b,
+  KunList: A,
   KunListGroup: S,
   KunListImg: x,
   KunListItem: h,
@@ -77,11 +78,12 @@ const n = {
   KunSlider: k,
   KunSpacer: q,
   KunSwitch: M,
-  KunTextField: N,
-  KunToolbar: z,
-  KunTooltip: E
+  KunTable: N,
+  KunTextField: z,
+  KunToolbar: E,
+  KunTooltip: H
 };
-function Fm(r) {
+function ym(r) {
   for (const m in n)
     r.component(m, n[m]);
 }
@@ -95,8 +97,8 @@ export {
   f as KunBudge,
   K as KunCard,
   _ as KunCardActions,
-  p as KunCardItem,
-  e as KunCardSubtitle,
+  e as KunCardItem,
+  p as KunCardSubtitle,
   c as KunCardText,
   $ as KunCardTitle,
   l as KunChip,
@@ -104,9 +106,9 @@ export {
   L as KunContainer,
   C as KunCurrency,
   I as KunDivider,
-  A as KunForm,
+  b as KunForm,
   T as KunIcon,
-  b as KunList,
+  A as KunList,
   S as KunListGroup,
   x as KunListImg,
   h as KunListItem,
@@ -122,8 +124,9 @@ export {
   k as KunSlider,
   q as KunSpacer,
   M as KunSwitch,
-  N as KunTextField,
-  z as KunToolbar,
-  E as KunTooltip,
-  Fm as install
+  N as KunTable,
+  z as KunTextField,
+  E as KunToolbar,
+  H as KunTooltip,
+  ym as install
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adverich-kun-ui",
-  "version": "0.1.126",
+  "version": "0.1.128",
   "type": "module",
   "description": "Una librería de componentes Vue.js con Tailwind CSS",
   "main": "dist/index.js",

package/dist/components/KunTooltip/src/composables/useTooltip.js

@@ -1,93 +0,0 @@
-import { ref as l, computed as i } from "vue";
-function x(e) {
-  const o = l(!1);
-  let c = null, s = null;
-  const w = i(() => {
-    switch (e.location) {
-      case "top":
-        return "mb-2";
-      case "bottom":
-        return "mt-2";
-      case "left":
-        return "mr-2";
-      case "right":
-        return "ml-2";
-      default:
-        return "";
-    }
-  }), h = i(() => {
-    switch (e.location) {
-      case "top":
-        return "border-b border-l border-gray-800 dark:border-gray-700";
-      case "bottom":
-        return "border-t border-l border-gray-800 dark:border-gray-700";
-      case "left":
-        return "border-r border-t border-gray-800 dark:border-gray-700";
-      case "right":
-        return "border-l border-t border-gray-800 dark:border-gray-700";
-      default:
-        return "";
-    }
-  }), g = i(() => {
-    let t = {};
-    switch (e.location) {
-      case "top":
-      case "bottom":
-        t.left = "50%", t.transform = "translateX(-50%)";
-        break;
-      case "left":
-      case "right":
-        t.top = "50%", t.transform = "translateY(-50%)";
-        break;
-    }
-    return t;
-  }), u = l({}), d = () => {
-    if (!n.value || !a.value) return;
-    const t = n.value.getBoundingClientRect(), f = a.value.getBoundingClientRect();
-    let r = {};
-    switch (e.location) {
-      case "top":
-        r.top = `${t.top + window.scrollY - f.height}px`, r.left = `${t.left + window.scrollX + t.width / 2}px`;
-        break;
-      case "bottom":
-        r.top = `${t.bottom + window.scrollY}px`, r.left = `${t.left + window.scrollX + t.width / 2}px`;
-        break;
-      case "left":
-        r.top = `${t.top + window.scrollY + t.height / 2}px`, r.left = `${t.left + window.scrollX - f.width}px`;
-        break;
-      case "right":
-        r.top = `${t.top + window.scrollY + t.height / 2}px`, r.left = `${t.right + window.scrollX}px`;
-        break;
-    }
-    u.value = r;
-  }, n = l(null), a = l(null), m = () => {
-    e.disabled || (clearTimeout(s), c = setTimeout(() => {
-      o.value = !0, d();
-    }, parseInt(e.delay)));
-  }, b = () => {
-    e.disabled || (clearTimeout(c), s = setTimeout(() => {
-      o.value = !1;
-    }, 100));
-  };
-  return {
-    isVisible: o,
-    positionClass: w,
-    arrowClass: h,
-    positionStyle: u,
-    arrowStyle: g,
-    onEnter: () => {
-      e.openOn === "hover" && m();
-    },
-    onLeave: () => {
-      e.openOn === "hover" && b();
-    },
-    onClick: () => {
-      e.openOn === "click" && (o.value = !o.value, o.value && d()), e.closeOnClick && b();
-    },
-    activator: n,
-    tooltip: a
-  };
-}
-export {
-  x as useTooltip
-};