@agrotools1/at-components 0.6.93 → 0.6.95

package/dist/Select/Select.core.vue.js

@@ -1,37 +1,51 @@
-import n from "./Select.core.vue2.js";
-import { resolveComponent as a, openBlock as t, createBlock as i, mergeProps as s } from "vue";
-import d from "../_virtual/_plugin-vue_export-helper.js";
-function p(e, o, u, m, c, b) {
-  const l = a("AtInput");
-  return t(), i(l, s(e.$props, {
-    ref: "atInput",
-    modelValue: e.inputModelValue,
-    "onUpdate:modelValue": [
-      o[0] || (o[0] = (r) => e.inputModelValue = r),
-      e.handleTyping
-    ],
-    role: "combobox",
-    type: e.type,
-    cursor: "pointer",
-    "prevent-input-event": !0,
-    "on-selected-item-click": e.onSelectedItemClick,
-    "selected-items": e.selectedItems,
-    label: e.label,
-    "aria-controls": e.id,
-    "aria-label": e.label,
-    separator: e.separator,
-    required: e.required,
-    disabled: e.disabled,
-    error: e.getError,
-    icon: { name: "AtAngleDownSolidIcon" },
-    "aria-autocomplete": "none",
-    class: ["AT-SELECT_container", e.inputClass],
-    "use-side-clear-button": e.showClearButton,
-    onClearInput: e.handleClearInput,
-    onClickOutside: e.handleClickOutside
-  }), null, 16, ["modelValue", "type", "on-selected-item-click", "selected-items", "label", "aria-controls", "aria-label", "separator", "required", "disabled", "error", "class", "use-side-clear-button", "onUpdate:modelValue", "onClearInput", "onClickOutside"]);
+import i from "./Select.core.vue2.js";
+import { resolveComponent as l, openBlock as s, createElementBlock as d, createVNode as t, withCtx as p, mergeProps as u } from "vue";
+import "./Select.core.vue3.js";
+import m from "../_virtual/_plugin-vue_export-helper.js";
+function c(e, o, f, b, C, v) {
+  const n = l("AtInput"), r = l("AtTooltip");
+  return s(), d("div", null, [
+    t(r, {
+      disable: !e.isOverflowing || !e.showTooltipOnOverflow,
+      text: e.inputModelValue,
+      position: e.tooltipPosition,
+      style: { width: "100%" }
+    }, {
+      default: p(() => [
+        t(n, u(e.$props, {
+          ref: "atInput",
+          modelValue: e.inputModelValue,
+          "onUpdate:modelValue": [
+            o[0] || (o[0] = (a) => e.inputModelValue = a),
+            e.handleTyping
+          ],
+          role: "combobox",
+          type: e.type,
+          cursor: "pointer",
+          "prevent-input-event": !0,
+          "on-selected-item-click": e.onSelectedItemClick,
+          "selected-items": e.selectedItems,
+          label: e.label,
+          "aria-controls": e.id,
+          "aria-label": e.label,
+          separator: e.separator,
+          required: e.required,
+          disabled: e.disabled,
+          error: e.getError,
+          icon: { name: "AtAngleDownSolidIcon" },
+          "aria-autocomplete": "none",
+          class: ["AT-SELECT_container", e.inputClass],
+          "use-side-clear-button": e.showClearButton,
+          onClearInput: e.handleClearInput,
+          onClickOutside: e.handleClickOutside,
+          onOverflow: e.handleOverflow
+        }), null, 16, ["modelValue", "type", "on-selected-item-click", "selected-items", "label", "aria-controls", "aria-label", "separator", "required", "disabled", "error", "class", "use-side-clear-button", "onUpdate:modelValue", "onClearInput", "onClickOutside", "onOverflow"])
+      ]),
+      _: 1
+    }, 8, ["disable", "text", "position"])
+  ]);
 }
-const k = /* @__PURE__ */ d(n, [["render", p]]);
+const A = /* @__PURE__ */ m(i, [["render", c], ["__scopeId", "data-v-ade5f307"]]);
 export {
-  k as default
+  A as default
 };

package/dist/Select/Select.core.vue2.js

@@ -1,11 +1,13 @@
-import { defineComponent as m, ref as s, computed as n, watch as b, inject as I } from "vue";
-import { AtInput as h } from "../Input/index.js";
+import { defineComponent as h, ref as o, computed as u, watch as g, inject as I } from "vue";
+import { AtInput as T } from "../Input/index.js";
+import q from "../Tooltip/Tooltip.vue.js";
 import "./Item/Item.vue2.js";
 import "./Item/Item.vue3.js";
-const S = m({
+const A = h({
   name: "AtSelect",
   components: {
-    AtInput: h.Text
+    AtInput: T.Text,
+    AtTooltip: q
   },
   props: {
     value: {
@@ -58,55 +60,81 @@ const S = m({
       type: Boolean,
       required: !1,
       default: !1
+    },
+    showTooltipOnOverflow: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    tooltipPosition: {
+      required: !1,
+      type: String,
+      default: "bottom-center",
+      validator: (e) => [
+        "bottom-left",
+        "bottom-center",
+        "bottom-right",
+        "top-left",
+        "top-center",
+        "top-right",
+        "left-bottom",
+        "left-center",
+        "right-bottom",
+        "right-center"
+      ].includes(e)
     }
   },
   emits: ["update:model-value", "clearInput"],
   setup(e, { emit: a }) {
-    const o = s(null), l = s(""), r = n(() => {
+    const d = o(null), l = o(""), r = u(() => {
       var t;
       return typeof e.value == "string" ? e.value : (t = e.value) == null ? void 0 : t.value;
-    }), d = n(() => {
+    }), i = o(!1), f = u(() => {
       if (!e.isTypable)
         return "button";
-    }), f = (t) => {
+    }), c = (t) => {
       a("update:model-value", t);
-    }, c = () => {
-      a("clearInput");
     }, p = () => {
+      a("clearInput");
+    }, m = () => {
       !e.value && e.isTypable && (l.value = "", a("clearInput"));
-    }, u = () => {
-      var i;
+    }, n = () => {
+      var s;
       if (e.isMultiple)
         return "";
-      const t = (i = e.items) == null ? void 0 : i.find(
-        (v) => v.value === r.value
+      const t = (s = e.items) == null ? void 0 : s.find(
+        (b) => b.value === r.value
       );
       return t ? t.text : (console.warn(
         `The default value "${r.value}" is not included in the items array.`
       ), "");
+    }, v = (t) => {
+      i.value = t;
     };
-    b(
+    g(
       () => e.value,
       () => {
-        e.value !== "" && (l.value = u() || "");
+        e.value !== "" && (l.value = n() || "");
       }
-    ), l.value = u() || "";
-    const y = n(() => I("error"));
+    ), l.value = n() || "";
+    const y = u(() => I("error"));
     return {
       id: `at-select-${Math.random().toString(36).substr(2, 9)}`,
-      handleValue: u,
+      handleValue: n,
       getError: y,
-      atInput: o,
+      atInput: d,
       inputModelValue: l,
-      handleTyping: f,
-      handleClearInput: c,
-      handleClickOutside: p,
-      type: d,
+      handleTyping: c,
+      handleClearInput: p,
+      handleClickOutside: m,
+      type: f,
       inputClass: e.customClass,
-      isTypable: e.isTypable
+      isTypable: e.isTypable,
+      isOverflowing: i,
+      handleOverflow: v
     };
   }
 });
 export {
-  S as default
+  A as default
 };

package/dist/Select/Select.core.vue3.js

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

package/dist/Select/Single/Select.single.d.ts

@@ -44,6 +44,11 @@ declare const _default: import('vue').DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    showTooltipOnOverflow: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
     error: {
         type: ObjectConstructor;
         default: () => void;
@@ -125,6 +130,11 @@ declare const _default: import('vue').DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    showTooltipOnOverflow: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
     error: {
         type: ObjectConstructor;
         default: () => void;
@@ -146,6 +156,7 @@ declare const _default: import('vue').DefineComponent<{
     items: SelectItemProps[];
     showClearButton: boolean;
     msgNoResult: string;
+    showTooltipOnOverflow: boolean;
     emitValue: boolean;
     hasAutocomplete: boolean;
 }, {}>;

package/dist/Select/Single/Select.single.vue.js

@@ -1,27 +1,27 @@
-import f from "./Select.single.vue2.js";
-import { resolveComponent as l, openBlock as a, createBlock as r, createElementBlock as n, createVNode as i, withModifiers as m, withCtx as h, createTextVNode as v, toDisplayString as g, createCommentVNode as d, Fragment as k, renderList as y } from "vue";
+import v from "./Select.single.vue2.js";
+import { resolveComponent as l, openBlock as t, createBlock as r, createElementBlock as n, createVNode as i, withModifiers as C, withCtx as b, createTextVNode as m, toDisplayString as g, createCommentVNode as d, Fragment as k, renderList as w } from "vue";
 import "./Select.single.vue3.js";
-import A from "../../_virtual/_plugin-vue_export-helper.js";
-const I = ["aria-disabled"], S = {
+import y from "../../_virtual/_plugin-vue_export-helper.js";
+const A = ["aria-disabled"], I = {
   key: 0,
   class: "noResult"
 };
-function w(e, t, V, T, $, E) {
-  const u = l("AtSkeleton"), p = l("AtSingleCore"), c = l("AtParagraph"), b = l("AtItem");
-  return e.isLoading ? (a(), r(u, {
+function S(e, a, T, V, $, E) {
+  const p = l("AtSkeleton"), u = l("AtSingleCore"), c = l("AtParagraph"), f = l("AtItem");
+  return e.isLoading ? (t(), r(p, {
     key: 0,
     class: "col",
     height: "43px"
-  })) : (a(), n("div", {
+  })) : (t(), n("div", {
     key: 1,
     ref: "containerRef",
     class: "AT-SELECT_wrapper",
     "aria-disabled": e.disabled,
-    onClick: t[1] || (t[1] = (o) => {
+    onClick: a[1] || (a[1] = (o) => {
       e.open = !e.open, e.rotateIcon();
     })
   }, [
-    i(p, {
+    i(u, {
       value: e.selectedValue,
       required: e.required,
       disabled: e.disabled,
@@ -30,28 +30,29 @@ function w(e, t, V, T, $, E) {
       "custom-class": e.hasAutocomplete ? "showCaret" : "",
       "is-typable": !!e.hasAutocomplete,
       "show-clear-button": e.showClearButton,
+      "show-tooltip-on-overflow": e.showTooltipOnOverflow,
       "onUpdate:modelValue": e.handleTyping,
       onClearInput: e.handleClearInput
-    }, null, 8, ["value", "required", "disabled", "label", "items", "custom-class", "is-typable", "show-clear-button", "onUpdate:modelValue", "onClearInput"]),
-    e.open ? (a(), n("div", {
+    }, null, 8, ["value", "required", "disabled", "label", "items", "custom-class", "is-typable", "show-clear-button", "show-tooltip-on-overflow", "onUpdate:modelValue", "onClearInput"]),
+    e.open ? (t(), n("div", {
       key: 0,
       role: "group",
       "aria-orientation": "vertical",
       tabindex: "-1",
       class: "AT-SELECT_items-container",
-      onClick: t[0] || (t[0] = m((o) => {
+      onClick: a[0] || (a[0] = C((o) => {
         e.open = !1, e.rotateIcon();
       }, ["stop"]))
     }, [
-      e.showNoResult ? (a(), n("section", S, [
+      e.showNoResult ? (t(), n("section", I, [
         i(c, { size: "p2" }, {
-          default: h(() => [
-            v(g(e.msgNoResult), 1)
+          default: b(() => [
+            m(g(e.msgNoResult), 1)
           ]),
           _: 1
         })
       ])) : d("", !0),
-      (a(!0), n(k, null, y(e.filteredItems.value, (o) => (a(), r(b, {
+      (t(!0), n(k, null, w(e.filteredItems.value, (o) => (t(), r(f, {
         key: o.value,
         text: o.text,
         value: o.value,
@@ -60,15 +61,15 @@ function w(e, t, V, T, $, E) {
         "aria-selected": o.value === e.valueOfModel,
         "data-text": o.text,
         "btn-class": o.btnClass,
-        "on-click": async (C) => {
+        "on-click": async (h) => {
           var s;
-          e.isInternalChange = !0, await e.onSelectedValueChange(o), (s = o.onClick) == null || s.call(o, C), e.isInternalChange = !1;
+          e.isInternalChange = !0, await e.onSelectedValueChange(o), (s = o.onClick) == null || s.call(o, h), e.isInternalChange = !1;
         }
       }, null, 8, ["text", "value", "type", "icon", "aria-selected", "data-text", "btn-class", "on-click"]))), 128))
     ])) : d("", !0)
-  ], 8, I));
+  ], 8, A));
 }
-const q = /* @__PURE__ */ A(f, [["render", w], ["__scopeId", "data-v-b990bbbf"]]);
+const q = /* @__PURE__ */ y(v, [["render", S], ["__scopeId", "data-v-e406213b"]]);
 export {
   q as default
 };

package/dist/Select/Single/Select.single.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as q, ref as r, provide as w, watch as v, computed as y, onMounted as O } from "vue";
+import { defineComponent as q, ref as r, provide as S, watch as v, computed as y, onMounted as x } from "vue";
 import T from "../../Skeleton/Skeleton.vue.js";
 import { AtTipograph as _ } from "../../Tipograph/index.js";
 import j from "../Item/Item.vue.js";
@@ -29,7 +29,7 @@ const W = q({
     items: {
       type: Array,
       default: () => [],
-      validator: (t) => Array.isArray(t) && t.every((c) => typeof c == "object")
+      validator: (t) => Array.isArray(t) && t.every((f) => typeof f == "object")
     },
     emitValue: {
       type: Boolean,
@@ -51,6 +51,11 @@ const W = q({
       type: Boolean,
       default: !1
     },
+    showTooltipOnOverflow: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
     error: {
       type: Object,
       default: () => {
@@ -62,9 +67,9 @@ const W = q({
     }
   },
   emits: ["update:modelValue", "clearValue"],
-  setup(t, { emit: c }) {
-    const n = r(null), o = r(!1), l = r(t.modelValue), u = r(""), f = r(!1), s = r(d(t.items));
-    w("error", t.error), v(t.error, () => w("error", t.error)), v(
+  setup(t, { emit: f }) {
+    const n = r(null), o = r(!1), l = r(t.modelValue), u = r(""), c = r(!1), s = r(d(t.items));
+    S("error", t.error), v(t.error, () => S("error", t.error)), v(
       t.items,
       () => {
         s.value = d(t.items);
@@ -73,8 +78,8 @@ const W = q({
         deep: !0
       }
     );
-    const g = (e) => {
-      l.value = e, o.value = !1, h(), c(
+    const h = (e) => {
+      l.value = e, o.value = !1, g(), f(
         "update:modelValue",
         t.emitValue ? l.value.value : l.value
       );
@@ -86,19 +91,19 @@ const W = q({
       var e;
       return typeof l.value == "string" ? l.value : (e = l.value) == null ? void 0 : e.value;
     }), I = () => {
-      u.value = "", l.value = "", m(), c("clearValue");
+      u.value = "", l.value = "", m(), f("clearValue");
     };
     function d(e, a) {
-      return e.sort((i, x) => {
-        const p = i.text.toLowerCase(), C = x.text.toLowerCase();
+      return e.sort((i, O) => {
+        const p = i.text.toLowerCase(), w = O.text.toLowerCase();
         if (a) {
-          const A = p.startsWith(a.toLowerCase()), S = C.startsWith(a.toLowerCase());
-          if (A && !S)
+          const C = p.startsWith(a.toLowerCase()), A = w.startsWith(a.toLowerCase());
+          if (C && !A)
             return -1;
-          if (!A && S)
+          if (!C && A)
             return 1;
         }
-        return p.localeCompare(C);
+        return p.localeCompare(w);
       });
     }
     const b = y(
@@ -114,12 +119,12 @@ const W = q({
     const m = () => {
       s.value = d(t.items);
     };
-    O(() => {
+    x(() => {
       document.addEventListener("click", B);
     }), v(
       () => t.modelValue,
       async (e) => {
-        if (f.value)
+        if (c.value)
           return;
         const a = t.items.find(
           (i) => i.value === (typeof e == "string" ? e : e.value)
@@ -130,22 +135,22 @@ const W = q({
           ), l.value = "";
           return;
         }
-        f.value = !0, await g(a), f.value = !1;
+        c.value = !0, await h(a), c.value = !1;
       }
     );
-    const h = () => {
+    const g = () => {
       var a;
       const e = (a = n.value) == null ? void 0 : a.querySelector(".AT_INPUT_icon_slot");
       e instanceof HTMLElement && e.setAttribute("data-rotate", o.value.toString());
     };
     return {
-      onSelectedValueChange: g,
+      onSelectedValueChange: h,
       selectedValue: l,
       open: o,
       valueOfModel: V,
       containerRef: n,
-      isInternalChange: f,
-      rotateIcon: h,
+      isInternalChange: c,
+      rotateIcon: g,
       handleTyping: L,
       filteredItems: y(() => s),
       textValue: u,

package/dist/Select/index.d.ts

@@ -44,6 +44,11 @@ export declare const AtSelect: {
             type: BooleanConstructor;
             default: boolean;
         };
+        showTooltipOnOverflow: {
+            type: BooleanConstructor;
+            required: false;
+            default: boolean;
+        };
         error: {
             type: ObjectConstructor;
             default: () => void;
@@ -125,6 +130,11 @@ export declare const AtSelect: {
             type: BooleanConstructor;
             default: boolean;
         };
+        showTooltipOnOverflow: {
+            type: BooleanConstructor;
+            required: false;
+            default: boolean;
+        };
         error: {
             type: ObjectConstructor;
             default: () => void;
@@ -146,6 +156,7 @@ export declare const AtSelect: {
         items: ISelectItemProps[];
         showClearButton: boolean;
         msgNoResult: string;
+        showTooltipOnOverflow: boolean;
         emitValue: boolean;
         hasAutocomplete: boolean;
     }, {}>;

package/dist/Tooltip/Tooltip.d.ts

@@ -5,6 +5,7 @@ export interface TooltipProps {
     text: string;
     copy: boolean;
     maxTextLength: number;
+    disable: boolean;
 }
 declare const _default: import('vue').DefineComponent<{
     text: {
@@ -28,6 +29,11 @@ declare const _default: import('vue').DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    disable: {
+        type: () => TooltipProps["disable"];
+        required: false;
+        default: boolean;
+    };
 }, {
     tooltipChildren: import('vue').Ref<HTMLDivElement | undefined>;
     contentPosition: import('vue').Ref<{
@@ -66,12 +72,18 @@ declare const _default: import('vue').DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    disable: {
+        type: () => TooltipProps["disable"];
+        required: false;
+        default: boolean;
+    };
 }>> & {
     onCopiedText?: ((...args: any[]) => any) | undefined;
 }, {
     text: string;
     copy: boolean;
     position: "bottom-left" | "bottom-center" | "bottom-right" | "top-left" | "top-center" | "top-right" | "left-bottom" | "left-center" | "right-bottom" | "right-center";
+    disable: boolean;
     maxTextLength: number;
 }, {}>;
 export default _default;

package/dist/Tooltip/Tooltip.vue.js

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