@agrotools1/at-components 0.6.11 → 0.6.13

package/dist/Tooltip/Tooltip.vue.js

@@ -1,42 +1,63 @@
-import a from "./Tooltip.vue2.js";
-import { resolveComponent as i, openBlock as r, createElementBlock as l, createElementVNode as n, renderSlot as p, createBlock as d, Teleport as m, normalizeClass as c, normalizeStyle as f, createVNode as u, withCtx as v, createTextVNode as h, toDisplayString as y, createCommentVNode as C } from "vue";
+import u from "./Tooltip.vue2.js";
+import { resolveComponent as n, openBlock as l, createElementBlock as s, createElementVNode as r, renderSlot as m, createBlock as f, Teleport as c, normalizeClass as y, normalizeStyle as v, createVNode as a, withCtx as C, createCommentVNode as i } from "vue";
 import "./Tooltip.vue3.js";
-import g from "../_virtual/_plugin-vue_export-helper.js";
-const $ = {
+import M from "../_virtual/_plugin-vue_export-helper.js";
+const k = {
+  ref: "wrapper",
+  class: "at-tooltip-wrapper"
+}, h = {
   ref: "tooltipChildren",
-  class: "at-tooltip-content"
-};
-function k(e, o, w, N, S, V) {
-  const s = i("AtParagraph");
-  return r(), l("div", {
+  class: "at-slot-content"
+}, w = ["innerHTML"];
+function T(o, e, $, b, S, g) {
+  const p = n("AtCopySolidIcon"), d = n("AtParagraph");
+  return l(), s("div", {
     class: "at-tooltip-container",
-    onMouseenter: o[0] || (o[0] = (...t) => e.show && e.show(...t)),
-    onMouseleave: o[1] || (o[1] = (...t) => e.hide && e.hide(...t))
+    onMouseenter: e[2] || (e[2] = (...t) => o.show && o.show(...t)),
+    onMouseleave: e[3] || (e[3] = (...t) => o.handleMouseOut && o.handleMouseOut(...t))
   }, [
-    n("div", $, [
-      p(e.$slots, "default", {}, void 0, !0)
+    r("div", k, [
+      r("div", h, [
+        m(o.$slots, "default", {}, void 0, !0)
+      ], 512)
     ], 512),
-    (r(), d(m, { to: "body" }, [
-      e.visible ? (r(), l("div", {
+    (l(), f(c, { to: "body" }, [
+      o.visible ? (l(), s("div", {
         key: 0,
-        class: c(["at-tooltip", e.tooltipClass]),
-        style: f(e.tooltipStyle)
+        ref: "tooltip",
+        class: y(["at-tooltip", o.tooltipClass]),
+        style: v(o.tooltipStyle),
+        onMouseleave: e[1] || (e[1] = (...t) => o.handleMouseOut && o.handleMouseOut(...t))
       }, [
-        u(s, {
+        a(d, {
           size: "p3",
           weight: "regular",
           class: "m-0"
         }, {
-          default: v(() => [
-            h(y(e.text), 1)
+          default: C(() => [
+            r("span", {
+              class: "at-tooltip-text",
+              style: { "word-break": "break-all" },
+              innerHTML: o.formatedText
+            }, null, 8, w),
+            o.copy ? (l(), s("span", {
+              key: 0,
+              class: "at-tooltip-copy-icon",
+              onClick: e[0] || (e[0] = (t) => o.copyText(o.text))
+            }, [
+              a(p, {
+                color: "#FFF",
+                size: "16"
+              })
+            ])) : i("", !0)
           ]),
           _: 1
         })
-      ], 6)) : C("", !0)
+      ], 38)) : i("", !0)
     ]))
   ], 32);
 }
-const A = /* @__PURE__ */ g(a, [["render", k], ["__scopeId", "data-v-96e4dc5e"]]);
+const F = /* @__PURE__ */ M(u, [["render", T], ["__scopeId", "data-v-8c854bf1"]]);
 export {
-  A as default
+  F as default
 };

package/dist/Tooltip/Tooltip.vue2.js

@@ -1,9 +1,11 @@
-import { defineComponent as z, ref as o, onMounted as B, onBeforeUnmount as T } from "vue";
-import { AtTipograph as _ } from "../Tipograph/index.js";
-const D = z({
+import { defineComponent as O, ref as n, onMounted as R, onBeforeUnmount as U, computed as j } from "vue";
+import { AtCopySolidIcon as D } from "../node_modules/.pnpm/agrotools-icons@0.2.6/node_modules/agrotools-icons/dist/AtCopySolidIcon/index.js";
+import { AtTipograph as G } from "../Tipograph/index.js";
+const Q = O({
   name: "AtTooltip",
   components: {
-    AtParagraph: _.Paragraph
+    AtParagraph: G.Paragraph,
+    AtCopySolidIcon: D
   },
   props: {
     text: {
@@ -11,11 +13,21 @@ const D = z({
       type: String,
       default: "bottom-left"
     },
+    maxTextLength: {
+      required: !1,
+      type: Number,
+      default: 0
+    },
+    copy: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
     position: {
       required: !1,
       type: String,
       default: "",
-      validator: (u) => [
+      validator: (l) => [
         "bottom-left",
         "bottom-center",
         "bottom-right",
@@ -26,120 +38,121 @@ const D = z({
         "left-center",
         "right-bottom",
         "right-center"
-      ].includes(u)
+      ].includes(l)
     }
   },
-  setup(u) {
-    const s = o(), t = o(), l = o(0), e = o(), a = o(), n = o(""), r = o(!1), v = () => {
-      var p, x, f, c, h, y, b, m, d, $, g, w, k, X, Y, C, E, L, P, S, A, q;
-      switch (e.value = s.value.getBoundingClientRect(), u.position) {
+  emits: ["copiedText"],
+  setup(l, { emit: z }) {
+    const x = n(), f = n(), h = n(), t = n(), o = n(0), e = n(), a = n(), d = n(""), c = n(!1), p = () => {
+      var r, u, i, s, v, b, g, $, w, T, k, X, C, L, Y, A, S, P, q, E, B, I;
+      switch (e.value = x.value.getBoundingClientRect(), l.position) {
         case "bottom-left":
           t.value = {
             x: e.value.x + 32,
-            y: e.value.y + e.value.height + 16 + l.value
+            y: e.value.y + e.value.height + 16 + o.value
           }, a.value = {
             position: "absolute",
-            top: `${((p = t.value) == null ? void 0 : p.y) || 0}px`,
-            left: `${((x = t.value) == null ? void 0 : x.x) || 0}px`,
+            top: `${((r = t.value) == null ? void 0 : r.y) || 0}px`,
+            left: `${((u = t.value) == null ? void 0 : u.x) || 0}px`,
             transform: "translateX(-100%)"
           };
           break;
         case "bottom-center":
           t.value = {
             x: e.value.x + e.value.width / 2,
-            y: e.value.y + e.value.height + 16 + l.value
+            y: e.value.y + e.value.height + 16 + o.value
           }, a.value = {
             position: "absolute",
-            top: `${((f = t.value) == null ? void 0 : f.y) || 0}px`,
-            left: `${((c = t.value) == null ? void 0 : c.x) || 0}px`,
+            top: `${((i = t.value) == null ? void 0 : i.y) || 0}px`,
+            left: `${((s = t.value) == null ? void 0 : s.x) || 0}px`,
             transform: "translateX(-50%)"
           };
           break;
         case "bottom-right":
           t.value = {
             x: e.value.x - 32,
-            y: e.value.y + e.value.height + 16 + l.value
+            y: e.value.y + e.value.height + 16 + o.value
           }, a.value = {
             position: "absolute",
-            top: `${((h = t.value) == null ? void 0 : h.y) || 0}px`,
-            left: `${((y = t.value) == null ? void 0 : y.x) || 0}px`,
+            top: `${((v = t.value) == null ? void 0 : v.y) || 0}px`,
+            left: `${((b = t.value) == null ? void 0 : b.x) || 0}px`,
             transform: `translateX(${e.value.width}px)`
           };
           break;
         case "top-left":
           t.value = {
             x: e.value.x + 32,
-            y: e.value.y - e.value.height + 24 + l.value
+            y: e.value.y - e.value.height + 24 + o.value
           }, a.value = {
             position: "absolute",
-            top: `${((b = t.value) == null ? void 0 : b.y) || 0}px`,
-            left: `${((m = t.value) == null ? void 0 : m.x) || 0}px`,
+            top: `${((g = t.value) == null ? void 0 : g.y) || 0}px`,
+            left: `${(($ = t.value) == null ? void 0 : $.x) || 0}px`,
             transform: "translateX(-100%) translateY(-100%)"
           };
           break;
         case "top-center":
           t.value = {
             x: e.value.x + e.value.width / 2,
-            y: e.value.y - e.value.height + 24 + l.value
+            y: e.value.y - e.value.height + 24 + o.value
           }, a.value = {
             position: "absolute",
-            top: `${((d = t.value) == null ? void 0 : d.y) || 0}px`,
-            left: `${(($ = t.value) == null ? void 0 : $.x) || 0}px`,
+            top: `${((w = t.value) == null ? void 0 : w.y) || 0}px`,
+            left: `${((T = t.value) == null ? void 0 : T.x) || 0}px`,
             transform: "translateX(-50%) translateY(-100%)"
           };
           break;
         case "top-right":
           t.value = {
             x: e.value.x - 32,
-            y: e.value.y - e.value.height + 24 + l.value
+            y: e.value.y - e.value.height + 24 + o.value
           }, a.value = {
             position: "absolute",
-            top: `${((g = t.value) == null ? void 0 : g.y) || 0}px`,
-            left: `${((w = t.value) == null ? void 0 : w.x) || 0}px`,
+            top: `${((k = t.value) == null ? void 0 : k.y) || 0}px`,
+            left: `${((X = t.value) == null ? void 0 : X.x) || 0}px`,
             transform: `translateX(${e.value.width}px) translateY(-100%)`
           };
           break;
         case "left-bottom":
           t.value = {
             x: e.value.x - 16,
-            y: e.value.y + l.value
+            y: e.value.y + o.value
           }, a.value = {
             position: "absolute",
-            top: `${((k = t.value) == null ? void 0 : k.y) || 0}px`,
-            left: `${((X = t.value) == null ? void 0 : X.x) || 0}px`,
+            top: `${((C = t.value) == null ? void 0 : C.y) || 0}px`,
+            left: `${((L = t.value) == null ? void 0 : L.x) || 0}px`,
             transform: "translateX(-100%)"
           };
           break;
         case "left-center":
           t.value = {
             x: e.value.x - 16,
-            y: e.value.y + e.value.height / 2 + l.value
+            y: e.value.y + e.value.height / 2 + o.value
           }, a.value = {
             position: "absolute",
             top: `${((Y = t.value) == null ? void 0 : Y.y) || 0}px`,
-            left: `${((C = t.value) == null ? void 0 : C.x) || 0}px`,
+            left: `${((A = t.value) == null ? void 0 : A.x) || 0}px`,
             transform: "translateX(-100%) translateY(-50%)"
           };
           break;
         case "right-bottom":
           t.value = {
             x: e.value.x + 16,
-            y: e.value.y + l.value
+            y: e.value.y + o.value
           }, a.value = {
             position: "absolute",
-            top: `${((E = t.value) == null ? void 0 : E.y) || 0}px`,
-            left: `${((L = t.value) == null ? void 0 : L.x) || 0}px`,
+            top: `${((S = t.value) == null ? void 0 : S.y) || 0}px`,
+            left: `${((P = t.value) == null ? void 0 : P.x) || 0}px`,
             transform: `translateX(${e.value.width}px)`
           };
           break;
         case "right-center":
           t.value = {
             x: e.value.x + 16,
-            y: e.value.y + e.value.height / 2 + l.value
+            y: e.value.y + e.value.height / 2 + o.value
           }, a.value = {
             position: "absolute",
-            top: `${((P = t.value) == null ? void 0 : P.y) || 0}px`,
-            left: `${((S = t.value) == null ? void 0 : S.x) || 0}px`,
+            top: `${((q = t.value) == null ? void 0 : q.y) || 0}px`,
+            left: `${((E = t.value) == null ? void 0 : E.x) || 0}px`,
             transform: `translateX(${e.value.width}px) translateY(-50%)`
           };
           break;
@@ -149,35 +162,55 @@ const D = z({
             y: e.value.y + e.value.height + 16
           }, a.value = {
             position: "absolute",
-            top: `${((A = t.value) == null ? void 0 : A.y) || 0}px`,
-            left: `${((q = t.value) == null ? void 0 : q.x) || 0}px`,
+            top: `${((B = t.value) == null ? void 0 : B.y) || 0}px`,
+            left: `${((I = t.value) == null ? void 0 : I.x) || 0}px`,
             transform: "translateX(-100%)"
           };
           break;
       }
-      n.value = `at-tooltip-${u.position}`;
-    }, i = () => {
-      l.value = window.scrollY, v();
+      d.value = `at-tooltip-${l.position}`;
+    }, y = () => {
+      o.value = window.scrollY, p();
     };
-    return B(() => {
-      window.addEventListener("resize", v), window.addEventListener("scroll", i);
-    }), T(() => {
-      window.removeEventListener("resize", v), window.removeEventListener("scroll", i);
-    }), {
-      tooltipChildren: s,
+    R(() => {
+      window.addEventListener("resize", p), window.addEventListener("scroll", y);
+    }), U(() => {
+      window.removeEventListener("resize", p), window.removeEventListener("scroll", y);
+    });
+    const M = () => {
+      c.value = !0, p();
+    }, m = () => {
+      c.value = !1;
+    }, _ = (r) => {
+      var i, s, v;
+      const { relatedTarget: u } = r;
+      u && ((i = f.value) != null && i.contains(u) || (s = x.value) != null && s.contains(u) || (v = h.value) != null && v.contains(u)) || m();
+    }, F = async (r) => {
+      if (navigator && navigator.clipboard)
+        try {
+          await navigator.clipboard.writeText(r), z("copiedText", r);
+        } catch (u) {
+          console.error("Failed to copy: ", u);
+        }
+      else
+        console.warn("Clipboard API not supported");
+    }, N = j(() => !l.maxTextLength || l.text.length <= l.maxTextLength ? l.text : `${l.text.substring(0, l.maxTextLength)}...`);
+    return {
+      tooltipChildren: x,
       contentPosition: t,
       tooltipStyle: a,
-      tooltipClass: n,
-      visible: r,
-      show: () => {
-        r.value = !0, v();
-      },
-      hide: () => {
-        r.value = !1;
-      }
+      tooltipClass: d,
+      visible: c,
+      wrapper: f,
+      tooltip: h,
+      formatedText: N,
+      show: M,
+      hide: m,
+      handleMouseOut: _,
+      copyText: F
     };
   }
 });
 export {
-  D as default
+  Q as default
 };

package/dist/Tooltip/Tooltip.vue3.js

@@ -1,4 +1,4 @@
-const e = "";
+const _ = "";
 export {
-  e as default
+  _ as default
 };

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from "./ColorPicker";
 export * from "./DataTable";
 export * from "./DatePicker";
 export * from "./Faq";
+export * from "./Faq/FaqItem";
 export * from "./Filter";
 export * from "./Illustration";
 export * from "./Input";

package/dist/index.js

@@ -1,64 +1,66 @@
 import { default as e } from "./Accordion/Accordion.vue.js";
-import { default as a } from "./Avatar/Avatar.vue.js";
+import { default as r } from "./Avatar/Avatar.vue.js";
 import { default as l } from "./Button/Button.vue.js";
 import { default as s } from "./CardWithInsights/CardWithInsights.vue.js";
-import { default as x } from "./Checkbox/Checkbox.vue.js";
+import { default as m } from "./Checkbox/Checkbox.vue.js";
 import { default as u } from "./ColorPicker/ColorPicker.vue.js";
 import { AtDataTable as i } from "./DataTable/index.js";
 import { default as g } from "./DatePicker/DatePicker.vue.js";
 import { default as T } from "./Faq/Faq.vue.js";
-import { default as b } from "./Filter/components/Filter.vue.js";
-import { default as C } from "./Illustration/Illustration.vue.js";
-import { AtInput as B } from "./Input/index.js";
-import { default as L } from "./Legend/Legend.vue.js";
+import { default as b } from "./Faq/FaqItem/FaqItem.vue.js";
+import { default as C } from "./Filter/components/Filter.vue.js";
+import { default as S } from "./Illustration/Illustration.vue.js";
+import { AtInput as F } from "./Input/index.js";
+import { default as P } from "./Legend/Legend.vue.js";
 import { default as D } from "./List/components/List.vue.js";
-import { default as M } from "./Loading/Loading.vue.js";
-import { default as v } from "./Map/Map.vue.js";
-import { default as R } from "./Modal/Modal.vue.js";
-import { default as W } from "./Notifications/Notifications.vue.js";
-import { default as w } from "./ProgressBar/ProgressBar.vue.js";
-import { default as z } from "./RadioButton/RadioButton.vue.js";
-import { default as G } from "./Search/Search.vue.js";
-import { AtSelect as J } from "./Select/index.js";
-import { default as O } from "./Skeleton/Skeleton.vue.js";
-import { default as V } from "./Stepper/Stepper.vue.js";
-import { default as Y } from "./TableConfig/TableConfig.vue.js";
-import { default as _ } from "./Tabs/Tabs.vue.js";
-import { default as tt } from "./Tag/Tag.vue.js";
-import { AtTipograph as et } from "./Tipograph/index.js";
-import { default as at } from "./Toggle/Toggle.vue.js";
-import { default as lt } from "./Tooltip/Tooltip.vue.js";
-import { default as st } from "./Upload/Upload.vue.js";
+import { default as v } from "./Loading/Loading.vue.js";
+import { default as R } from "./Map/Map.vue.js";
+import { default as W } from "./Modal/Modal.vue.js";
+import { default as w } from "./Notifications/Notifications.vue.js";
+import { default as z } from "./ProgressBar/ProgressBar.vue.js";
+import { default as G } from "./RadioButton/RadioButton.vue.js";
+import { default as J } from "./Search/Search.vue.js";
+import { AtSelect as O } from "./Select/index.js";
+import { default as V } from "./Skeleton/Skeleton.vue.js";
+import { default as Y } from "./Stepper/Stepper.vue.js";
+import { default as _ } from "./TableConfig/TableConfig.vue.js";
+import { default as tt } from "./Tabs/Tabs.vue.js";
+import { default as et } from "./Tag/Tag.vue.js";
+import { AtTipograph as rt } from "./Tipograph/index.js";
+import { default as lt } from "./Toggle/Toggle.vue.js";
+import { default as st } from "./Tooltip/Tooltip.vue.js";
+import { default as mt } from "./Upload/Upload.vue.js";
 export {
   e as AtAccordion,
-  a as AtAvatar,
+  r as AtAvatar,
   l as AtButton,
   s as AtCardWithInsights,
-  x as AtCheckbox,
+  m as AtCheckbox,
   i as AtDataTable,
   g as AtDatePicker,
-  b as AtFilter,
-  C as AtIllustration,
-  B as AtInput,
-  L as AtLegend,
+  b as AtFaqItem,
+  C as AtFilter,
+  S as AtIllustration,
+  F as AtInput,
+  P as AtLegend,
   D as AtList,
-  M as AtLoading,
-  v as AtMap,
-  R as AtModal,
-  W as AtNotifications,
-  w as AtProgressBar,
-  z as AtRadioButton,
-  G as AtSearch,
-  J as AtSelect,
-  O as AtSkeleton,
-  Y as AtTableConfig,
-  _ as AtTabs,
-  tt as AtTag,
-  et as AtTipograph,
-  at as AtToggle,
-  lt as AtTooltip,
+  v as AtLoading,
+  R as AtMap,
+  W as AtModal,
+  w as AtNotifications,
+  z as AtProgressBar,
+  G as AtRadioButton,
+  J as AtSearch,
+  O as AtSelect,
+  V as AtSkeleton,
+  _ as AtTableConfig,
+  tt as AtTabs,
+  et as AtTag,
+  rt as AtTipograph,
+  lt as AtToggle,
+  st as AtTooltip,
   u as ColorPicker,
   T as Faq,
-  V as Stepper,
-  st as Upload
+  Y as Stepper,
+  mt as Upload
 };