@agrotools1/at-components1 1.1.1 → 1.1.2-beta.1

package/dist/ColorPicker/ColorPicker.Saturation.vue.js

@@ -0,0 +1,30 @@
+import r from "./ColorPicker.Saturation.vue2.js";
+import { createElementBlock as t, openBlock as s, normalizeStyle as l, createElementVNode as a } from "vue";
+/* empty css                            */
+import d from "../_virtual/_plugin-vue_export-helper.js";
+function i(o, n, u, p, m, v) {
+  return s(), t("div", {
+    ref: "container",
+    class: "vc-saturation",
+    style: l({ background: o.backgroundColor }),
+    onMousedown: n[0] || (n[0] = (...e) => o.handleMouseDown && o.handleMouseDown(...e)),
+    onTouchmove: n[1] || (n[1] = (...e) => o.handleChange && o.handleChange(...e)),
+    onTouchstart: n[2] || (n[2] = (...e) => o.handleChange && o.handleChange(...e))
+  }, [
+    n[3] || (n[3] = a("div", { class: "vc-saturation--white" }, null, -1)),
+    n[4] || (n[4] = a("div", { class: "vc-saturation--black" }, null, -1)),
+    a("div", {
+      class: "vc-saturation-pointer",
+      style: l({ top: o.top, left: o.left })
+    }, [
+      a("div", {
+        style: l({ backgroundColor: o.localColorHex }),
+        class: "vc-saturation-circle"
+      }, null, 4)
+    ], 4)
+  ], 36);
+}
+const k = /* @__PURE__ */ d(r, [["render", i], ["__scopeId", "data-v-bda7d3b3"]]);
+export {
+  k as default
+};

package/dist/ColorPicker/ColorPicker.Saturation.vue2.js

@@ -0,0 +1,82 @@
+import { defineComponent as I, ref as O, reactive as R, computed as E, watch as H, toRefs as X } from "vue";
+const T = I({
+  name: "Saturation",
+  props: {
+    value: Object,
+    colorHex: {
+      type: String,
+      default: () => "#FFFFFF",
+      validator: (n) => typeof n == "string"
+    }
+  },
+  emits: ["colorChanged"],
+  setup(n, { emit: x }) {
+    const s = O(null), c = R({
+      left: "",
+      top: "",
+      localColorHex: n.colorHex,
+      coloring: E(() => n.value),
+      backgroundColor: E(() => `hsl(${n.value.hsv.h}, 100%, 50%)`)
+    }), w = () => {
+      c.top = `${-(n.value.hsv.v * 100) + 92}%`, c.left = `${n.value.hsv.s * 100 - 3}%`;
+    }, p = (e, o, t) => o < t ? e < o ? o : e > t ? t : e : e < t ? t : e > o ? o : e, i = (e) => {
+      if (e.preventDefault(), !s.value)
+        return;
+      const o = s.value.clientWidth, t = s.value.clientHeight, u = s.value.getBoundingClientRect().left + window.scrollX, h = s.value.getBoundingClientRect().top + window.scrollY, r = e instanceof MouseEvent ? e.pageX : e.touches ? e.touches[0].pageX : 0, a = e instanceof MouseEvent ? e.pageY : e.touches ? e.touches[0].pageY : 0, l = p(r - u, 0, o), d = p(a - h, 0, t), f = l / o, v = p(-(d / t) + 1, 0, 1);
+      n.value.hsv.s = f, n.value.hsv.v = v, w();
+      const g = L(
+        n.value.hsv.h,
+        F(f),
+        F(v)
+      ), M = P(
+        Number.parseInt(g.r.toFixed(0)),
+        Number.parseInt(g.g.toFixed(0)),
+        Number.parseInt(g.b.toFixed(0))
+      );
+      c.localColorHex = M, x("colorChanged", M);
+    }, L = (e, o, t) => {
+      e = m(e, 360) * 6, o = m(o, 100), t = m(t, 100);
+      const u = Math.floor(e), h = e - u, r = t * (1 - o), a = t * (1 - h * o), l = t * (1 - (1 - h) * o), d = u % 6, f = [t, a, r, r, l, t][d], v = [l, t, t, a, r, r][d], g = [r, r, l, t, t, a][d];
+      return {
+        r: f * 255,
+        g: v * 255,
+        b: g * 255
+      };
+    }, m = (e, o) => {
+      N(e) && (e = "100%");
+      const t = $(e);
+      return e = Math.min(o, Math.max(0, Number.parseFloat(e))), t && (e = Number.parseInt((e * o).toString(), 10) / 100), Math.abs(e - o) < 1e-6 ? 1 : e % o / Number.parseFloat(o);
+    }, N = (e) => typeof e == "string" && e.includes(".") && Number.parseFloat(e) === 1, $ = (e) => typeof e == "string" && e.includes("%"), P = (e, o, t) => `#${[
+      b(Math.round(e).toString(16)),
+      b(Math.round(o).toString(16)),
+      b(Math.round(t).toString(16))
+    ].join("")}`.toUpperCase(), b = (e) => e.length === 1 ? `0${e}` : `${e}`, F = (e) => (e <= 1 && (e = `${e * 100}%`), e), S = () => {
+      window.addEventListener("mousemove", i), window.addEventListener("mouseup", i), window.addEventListener("mouseup", C);
+    }, C = () => {
+      y();
+    }, y = () => {
+      window.removeEventListener("mousemove", i), window.removeEventListener("mouseup", i), window.removeEventListener("mouseup", C);
+    };
+    return H(
+      () => n.colorHex,
+      (e) => {
+        c.localColorHex = e;
+      },
+      { immediate: !0 }
+    ), H(
+      () => c.coloring,
+      () => {
+        w();
+      },
+      { immediate: !0 }
+    ), {
+      ...X(c),
+      handleChange: i,
+      handleMouseDown: S,
+      container: s
+    };
+  }
+});
+export {
+  T as default
+};

package/dist/ColorPicker/ColorPicker.vue.js

@@ -0,0 +1,88 @@
+import f from "./ColorPicker.vue2.js";
+import { resolveComponent as d, createElementBlock as n, openBlock as r, normalizeStyle as s, createElementVNode as t, createVNode as i, withDirectives as u, vModelText as p, Fragment as k, renderList as g, withCtx as c, createTextVNode as v } from "vue";
+/* empty css                 */
+import y from "../_virtual/_plugin-vue_export-helper.js";
+const w = { class: "color-picker-saturation-wrap" }, H = { class: "slider-content" }, I = { class: "container-info" }, S = { class: "custom-input" }, U = { class: "group-color" }, V = { class: "group-color-user" }, _ = ["onClick"], $ = { class: "button-group" };
+function A(e, o, B, b, h, z) {
+  const C = d("AtSaturation"), a = d("AtButton");
+  return r(), n("div", {
+    class: "color-picker-container",
+    style: s({ position: e.position })
+  }, [
+    t("div", w, [
+      i(C, {
+        value: e.coloring,
+        "color-hex": e.color,
+        onColorChanged: e.handleColorChange
+      }, null, 8, ["value", "color-hex", "onColorChanged"])
+    ]),
+    t("div", H, [
+      u(t("input", {
+        "onUpdate:modelValue": o[0] || (o[0] = (l) => e.selectedColorHue = l),
+        type: "range",
+        min: "0",
+        max: "360",
+        class: "slider"
+      }, null, 512), [
+        [p, e.selectedColorHue]
+      ])
+    ]),
+    t("div", I, [
+      o[7] || (o[7] = t("p", null, "Hex", -1)),
+      t("div", S, [
+        o[3] || (o[3] = t("div", { class: "input-prefix" }, "#", -1)),
+        u(t("input", {
+          "onUpdate:modelValue": o[1] || (o[1] = (l) => e.colorInput = l),
+          class: "input-field",
+          type: "text",
+          onInput: o[2] || (o[2] = (...l) => e.validateHexInput && e.validateHexInput(...l))
+        }, null, 544), [
+          [p, e.colorInput]
+        ]),
+        t("div", {
+          class: "circle",
+          style: s({ background: e.oldColor })
+        }, null, 4)
+      ]),
+      t("div", U, [
+        o[4] || (o[4] = t("p", null, "Salvas", -1)),
+        t("div", V, [
+          (r(!0), n(k, null, g(e.colorListUser, (l, m) => (r(), n("div", {
+            key: m,
+            class: "circle",
+            style: s({ background: l }),
+            onClick: (N) => e.selectedColor(l)
+          }, null, 12, _))), 128))
+        ])
+      ]),
+      t("div", $, [
+        i(a, {
+          variant: "secondary",
+          size: { width: "87px" },
+          onClick: e.cancelColorsUser
+        }, {
+          default: c(() => o[5] || (o[5] = [
+            v(" Cancelar ")
+          ])),
+          _: 1,
+          __: [5]
+        }, 8, ["onClick"]),
+        i(a, {
+          size: { width: "72px" },
+          variant: "primary",
+          onClick: e.updateColorsUser
+        }, {
+          default: c(() => o[6] || (o[6] = [
+            v(" Salvar ")
+          ])),
+          _: 1,
+          __: [6]
+        }, 8, ["onClick"])
+      ])
+    ])
+  ], 4);
+}
+const F = /* @__PURE__ */ y(f, [["render", A], ["__scopeId", "data-v-adf33051"]]);
+export {
+  F as default
+};

package/dist/ColorPicker/ColorPicker.vue2.js

@@ -0,0 +1,180 @@
+import { defineComponent as F, reactive as O, computed as $, watch as I, onMounted as N, toRefs as x } from "vue";
+import B from "../Button/Button.vue.js";
+import R from "./ColorPicker.Saturation.vue.js";
+const _ = F({
+  name: "AtColorPicker",
+  components: {
+    AtSaturation: R,
+    AtButton: B
+  },
+  props: {
+    colorsUser: {
+      default: () => ["#B565D2"],
+      type: Array,
+      validator: (l) => Array.isArray(l) ? (l.length === 0 && l.push("#B565D2"), l.every((f) => typeof f == "string")) : !1
+    },
+    colorUser: {
+      type: String,
+      default: () => "#B565D2",
+      validator: (l) => typeof l == "string"
+    },
+    isOpen: {
+      type: Boolean,
+      default: !1
+    },
+    position: {
+      type: String,
+      default: () => "relative",
+      validator: (l) => typeof l == "string" && ["absolute", "relative", "fixed", "sticky", "static"].includes(l)
+    }
+  },
+  emits: ["colorsChanged", "selectColorUser", "isOpenChanged"],
+  setup(l, { emit: f }) {
+    const e = O({
+      selectedColorHue: 0,
+      oldHue: 0,
+      oldColor: "",
+      color: l.colorUser,
+      colors: {},
+      colorInput: "",
+      colorListUser: l.colorsUser,
+      coloring: $(() => e.color ? d() : null)
+    }), d = () => {
+      if (e.color) {
+        const o = b(e.color), r = y(o.r, o.g, o.b), t = v(o.r, o.g, o.b);
+        return {
+          hex: e.color,
+          hsl: r,
+          hsv: t,
+          a: 1
+        };
+      }
+    }, b = (o) => {
+      o = o.replace(/^#/, "");
+      let r, t, s;
+      if (o.length === 3)
+        r = Number.parseInt(o[0] + o[0], 16), t = Number.parseInt(o[1] + o[1], 16), s = Number.parseInt(o[2] + o[2], 16);
+      else if (o.length === 6)
+        r = Number.parseInt(o.substring(0, 2), 16), t = Number.parseInt(o.substring(2, 4), 16), s = Number.parseInt(o.substring(4, 6), 16);
+      else
+        throw new Error("Invalid hexadecimal color format");
+      return { r, g: t, b: s };
+    }, y = (o, r, t) => {
+      let s = 0, i = 0, u = 0;
+      o = h(o, 255), r = h(r, 255), t = h(t, 255);
+      const c = Math.max(o, r, t), a = Math.min(o, r, t);
+      if (u = (c + a) / 2, c === a)
+        s = i = 0;
+      else {
+        const n = c - a;
+        switch (i = u > 0.5 ? n / (2 - c - a) : n / (c + a), c) {
+          case o:
+            s = (r - t) / n + (r < t ? 6 : 0);
+            break;
+          case r:
+            s = (t - o) / n + 2;
+            break;
+          case t:
+            s = (o - r) / n + 4;
+            break;
+        }
+        s /= 6;
+      }
+      return {
+        h: s * 360,
+        s: i,
+        l: u,
+        a: 1
+      };
+    }, v = (o, r, t) => {
+      let s = 0, i = 0, u = 0;
+      o = h(o, 255), r = h(r, 255), t = h(t, 255);
+      const c = Math.max(o, r, t), a = Math.min(o, r, t);
+      u = c;
+      const n = c - a;
+      if (i = c === 0 ? 0 : n / c, c === a)
+        s = 0;
+      else {
+        switch (c) {
+          case o:
+            s = (r - t) / n + (r < t ? 6 : 0);
+            break;
+          case r:
+            s = (t - o) / n + 2;
+            break;
+          case t:
+            s = (o - r) / n + 4;
+            break;
+        }
+        s /= 6;
+      }
+      return e.color.includes("#FFFFFF") || e.color.includes("#000000") ? s = e.selectedColorHue : s = s * 360, {
+        h: s,
+        s: i,
+        v: u,
+        a: 1
+      };
+    }, M = (o) => {
+      const r = o / 360, t = e.colors.hsl.s, s = e.colors.hsl.l;
+      let i, u, c;
+      if (t === 0)
+        i = u = c = s;
+      else {
+        const n = (U, g, p) => (p < 0 && (p += 1), p > 1 && (p -= 1), p < 0.16666666666666666 ? U + (g - U) * 6 * p : p < 0.5 ? g : p < 0.6666666666666666 ? U + (g - U) * (0.6666666666666666 - p) * 6 : U), C = s < 0.5 ? s * (1 + t) : s + t - s * t, m = 2 * s - C;
+        i = n(m, C, r + 1 / 3), u = n(m, C, r), c = n(m, C, r - 1 / 3);
+      }
+      const a = (n) => {
+        const C = Math.round(n * 255).toString(16);
+        return C.length === 1 ? `0${C}` : C;
+      };
+      return `#${a(i)}${a(u)}${a(c)}`;
+    }, h = (o, r) => (o = Math.min(r, Math.max(0, o)), Math.abs(o - r) < 1e-6 ? 1 : o % r / r), k = (o) => {
+      e.oldColor = o.toUpperCase(), e.colorInput = o.toUpperCase();
+    }, H = () => /^[0-9A-F]{6}$/i.test(e.colorInput.toUpperCase().replace("#", "")) ? (e.color = e.oldColor = `#${e.colorInput.toUpperCase().replace("#", "")}`, e.colors = d(), !0) : !1, L = () => {
+      const o = `#${e.colorInput}`, r = e.colorListUser.indexOf(o);
+      r !== -1 && e.colorListUser.splice(r, 1), e.colorListUser.length >= 10 && e.colorListUser.shift(), e.colorListUser.push(o), e.color = e.oldColor = o, f("colorsChanged", e.colorListUser), f("selectColorUser", o), f("isOpenChanged", !l.isOpen);
+    }, w = () => {
+      f("colorsChanged", l.colorsUser), f("selectColorUser", l.colorUser), f("isOpenChanged", !l.isOpen);
+    }, A = (o) => {
+      e.color = o, e.oldColor = o;
+      const r = d();
+      r !== void 0 && (e.selectedColorHue = r.hsv.h), e.colorInput = o;
+    };
+    return I(
+      () => e.selectedColorHue,
+      (o, r) => {
+        H() && (e.color = e.oldColor = e.colorInput, e.colors = d()), e.oldHue === 0 ? (e.color = l.colorUser, e.colors = d(), e.oldHue = r, e.colorInput = e.color.replace("#", "").toUpperCase()) : o !== r && (e.color = e.oldColor = M(o), e.colorInput = e.color.replace("#", "").toUpperCase(), e.colors = d());
+      },
+      { immediate: !0 }
+    ), I(
+      () => e.color,
+      () => {
+        var o;
+        e.color = e.color.toUpperCase(), e.oldColor = e.color.toUpperCase(), e.colors = d(), e.selectedColorHue = (o = e.colors) == null ? void 0 : o.hsv.h;
+      },
+      { immediate: !0 }
+    ), I(
+      () => e.colorInput,
+      (o) => {
+        e.colorInput = o.replace("#", "").toUpperCase();
+      },
+      { immediate: !0 }
+    ), N(() => {
+      e.colors = d(), e.selectedColorHue = e.colors.hsv.h, e.color = l.colorUser, e.colorInput = l.colorUser.replace("#", ""), e.colorListUser = l.colorsUser;
+    }), {
+      ...x(e),
+      applyColoring: d,
+      hexToRgb: b,
+      rgbToHsl: y,
+      bound01: h,
+      handleColorChange: k,
+      validateHexInput: H,
+      updateColorsUser: L,
+      cancelColorsUser: w,
+      selectedColor: A
+    };
+  }
+});
+export {
+  _ as default
+};

package/dist/DataTable/Column/Column.vue.js

@@ -0,0 +1,37 @@
+import r from "./Column.vue2.js";
+import { createElementBlock as a, openBlock as i, mergeProps as n, createElementVNode as e, createCommentVNode as s, renderSlot as d, toDisplayString as m } from "vue";
+/* empty css            */
+import f from "../../_virtual/_plugin-vue_export-helper.js";
+const p = ["data-align-columns", "data-filterable"], u = { class: "slot" }, c = { class: "filters" }, g = ["data-orientation", "data-filterable"], h = ["src"];
+function b(t, o, _, v, M, $) {
+  return i(), a("th", n({
+    role: "columnheader",
+    class: "column",
+    "data-align-columns": t.alignColumns,
+    "data-filterable": t.withMaxMinFilter
+  }, t.$attrs), [
+    e("div", u, [
+      e("div", c, [
+        d(t.$slots, "default", {}, void 0, !0),
+        e("span", null, m(t.label), 1)
+      ]),
+      t.withMaxMinFilter ? (i(), a("button", {
+        key: 0,
+        class: "filter-icon",
+        type: "button",
+        "data-orientation": t.orientation,
+        "data-filterable": t.withMaxMinFilter,
+        onClick: o[0] || (o[0] = (...l) => t.toggleOrientation && t.toggleOrientation(...l))
+      }, [
+        e("img", {
+          src: t.filterSvg,
+          alt: "Botão para filtrar valor"
+        }, null, 8, h)
+      ], 8, g)) : s("", !0)
+    ])
+  ], 16, p);
+}
+const B = /* @__PURE__ */ f(r, [["render", b], ["__scopeId", "data-v-4bfd9a6f"]]);
+export {
+  B as default
+};

package/dist/DataTable/Column/Column.vue2.js

@@ -0,0 +1,40 @@
+import { defineComponent as m, ref as e, inject as o, onMounted as s } from "vue";
+import p from "./imgs/filter.svg.js";
+const c = m({
+  name: "AtColumn",
+  props: {
+    field: {
+      type: String,
+      required: !0
+    },
+    label: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    withMaxMinFilter: {
+      type: Boolean,
+      default: void 0
+    }
+  },
+  emits: ["update:orientation"],
+  setup(n, { emit: i }) {
+    const t = e("top"), { updateColumn: l } = o("columns", {
+      updateColumn: () => {
+      }
+    }), a = o("alignColumns", "left"), u = e(a), r = () => {
+      i("update:orientation", t.value), t.value = t.value === "bottom" ? "top" : "bottom";
+    };
+    return s(() => {
+      l(n.field);
+    }), {
+      alignColumns: u,
+      filterSvg: p,
+      orientation: t,
+      toggleOrientation: r
+    };
+  }
+});
+export {
+  c as default
+};

package/dist/DataTable/Column/imgs/filter.svg.js

@@ -0,0 +1,4 @@
+const C = "data:image/svg+xml,%3csvg%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_2834_12221)'%3e%3cpath%20d='M14.0007%200.583333C14.0007%200.905917%2013.7394%201.16667%2013.4174%201.16667H5.83403C5.51203%201.16667%205.25069%200.905917%205.25069%200.583333C5.25069%200.26075%205.51203%200%205.83403%200H13.4174C13.7394%200%2014.0007%200.26075%2014.0007%200.583333ZM11.6674%202.91667H5.83403C5.51203%202.91667%205.25069%203.17742%205.25069%203.5C5.25069%203.82258%205.51203%204.08333%205.83403%204.08333H11.6674C11.9894%204.08333%2012.2507%203.82258%2012.2507%203.5C12.2507%203.17742%2011.9894%202.91667%2011.6674%202.91667ZM9.91736%205.83333H5.83403C5.51203%205.83333%205.25069%206.09408%205.25069%206.41667C5.25069%206.73925%205.51203%207%205.83403%207H9.91736C10.2394%207%2010.5007%206.73925%2010.5007%206.41667C10.5007%206.09408%2010.2394%205.83333%209.91736%205.83333ZM8.16736%208.75H5.83403C5.51203%208.75%205.25069%209.01075%205.25069%209.33333C5.25069%209.65592%205.51203%209.91667%205.83403%209.91667H8.16736C8.48936%209.91667%208.75069%209.65592%208.75069%209.33333C8.75069%209.01075%208.48936%208.75%208.16736%208.75ZM4.49644%2011.2543L3.50069%2012.25V0.583333C3.50069%200.26075%203.23936%200%202.91736%200C2.59536%200%202.33403%200.26075%202.33403%200.583333V12.25L1.33769%2011.2537C1.10961%2011.0256%200.740943%2011.0256%200.512859%2011.2537C0.284776%2011.4818%200.284776%2011.8504%200.512859%2012.0785L2.09194%2013.6576C2.31944%2013.8851%202.61811%2013.9988%202.91736%2013.9988C3.21661%2013.9988%203.51469%2013.8851%203.74219%2013.6576L5.32128%2012.0785C5.54936%2011.8504%205.54936%2011.4818%205.32128%2011.2537C5.09319%2011.0256%204.72453%2011.0262%204.49644%2011.2543Z'%20fill='rgba(85,%200,%20115,%201)'%20/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_2834_12221'%3e%3crect%20width='14'%20height='14'%20fill='red'%20/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
+export {
+  C as default
+};

package/dist/DataTable/Counters/Counters.vue.js

@@ -0,0 +1,44 @@
+import d from "./Counters.vue2.js";
+import { createElementBlock as o, openBlock as s, createCommentVNode as a, toDisplayString as r, createElementVNode as c, Fragment as i, renderList as u } from "vue";
+/* empty css              */
+import p from "../../_virtual/_plugin-vue_export-helper.js";
+const m = { class: "at-counters_container" }, f = {
+  key: 1,
+  ref: "itemsRef",
+  class: "at-counters_items"
+}, k = ["src"], _ = {
+  class: "at-counters_item-label",
+  style: { "margin-bottom": "10px" }
+};
+function g(e, n, y, C, h, v) {
+  return s(), o("div", m, [
+    e.list.length ? (s(), o("span", {
+      key: 0,
+      ref: "countersQuantityRef",
+      class: "at-counters_quantity",
+      onClick: n[0] || (n[0] = (...t) => e.toggleClick && e.toggleClick(...t))
+    }, " +" + r(e.list.length), 513)) : a("", !0),
+    e.isOpened ? (s(), o("div", f, [
+      c("img", {
+        src: e.closeIcon,
+        alt: "ícone para fechar o componente",
+        class: "at-counters_close",
+        onClick: n[1] || (n[1] = (...t) => e.handleClose && e.handleClose(...t))
+      }, null, 8, k),
+      (s(!0), o(i, null, u(e.computedItems, (t) => (s(), o("div", {
+        key: t.label,
+        class: "at-counters_item"
+      }, [
+        c("h3", _, r(t.label), 1),
+        (s(!0), o(i, null, u(t.value, (l) => (s(), o("span", {
+          key: l[t.key],
+          class: "at-counters_item-value"
+        }, r(l[t.key]), 1))), 128))
+      ]))), 128))
+    ], 512)) : a("", !0)
+  ]);
+}
+const E = /* @__PURE__ */ p(d, [["render", g], ["__scopeId", "data-v-ca1ff7f2"]]);
+export {
+  E as default
+};

package/dist/DataTable/Counters/Counters.vue2.js

@@ -0,0 +1,70 @@
+import { defineComponent as p, ref as c, computed as y, watchEffect as w, onMounted as h, onBeforeUnmount as k } from "vue";
+import C from "./imgs/close.svg.js";
+const I = p({
+  name: "AtCounters",
+  props: {
+    columns: {
+      type: Array,
+      required: !0
+    },
+    list: {
+      type: Array,
+      required: !0
+    }
+  },
+  setup(r) {
+    const n = c(null), d = c(null), f = y(() => {
+      var t;
+      return (t = r.columns) == null ? void 0 : t.map((e) => {
+        var s;
+        return {
+          label: e.label,
+          key: e.key,
+          value: (s = r.list) == null ? void 0 : s.filter((i) => i[e.key])
+        };
+      });
+    });
+    /* istanbul ignore next -- @preserve */
+    const u = () => {
+      if (!n.value) return;
+      const t = n.value.getBoundingClientRect();
+      t.right > window.innerWidth && (n.value.style.right = "2rem"), t.bottom > window.innerHeight && (n.value.style.bottom = "2rem"), t.left < 0 && (n.value.style.left = "2rem"), t.top < 0 && (n.value.style.top = "2rem");
+    }, o = c(!1), m = () => {
+      document.dispatchEvent(
+        new CustomEvent("at-counters:opened", {
+          detail: {
+            isOpened: !1
+          }
+        })
+      ), o.value = !o.value;
+    }, v = () => {
+      o.value = !1;
+    }, a = (t) => {
+      var s, i;
+      const e = t.target;
+      !((s = e == null ? void 0 : e.closest) != null && s.call(e, ".at-counters_container")) && !((i = e == null ? void 0 : e.closest) != null && i.call(e, ".at-counters_items")) && (o.value = !1);
+    }, l = (t) => {
+      o.value = t.detail.isOpened;
+    };
+    return w(() => {
+      o.value && u();
+    }), h(() => {
+      window.addEventListener("at-counters:opened", l), document.addEventListener("click", a);
+    }), k(() => {
+      window.removeEventListener("at-counters:opened", l), document.removeEventListener("click", a);
+    }), {
+      isOpened: o,
+      toggleClick: m,
+      handleClose: v,
+      countersQuantityRef: d,
+      computedItems: f,
+      itemsRef: n,
+      closeIcon: C,
+      checkIfContainerIsWithinViewport: u,
+      onDispatchEvent: l
+    };
+  }
+});
+export {
+  I as default
+};

package/dist/DataTable/Counters/imgs/close.svg.js

@@ -0,0 +1,4 @@
+const C = "data:image/svg+xml,%3csvg%20width='6'%20height='6'%20viewBox='0%200%206%206'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M5.5%200.500046C5.42186%200.421933%205.3159%200.378052%205.20542%200.378052C5.09493%200.378052%204.98897%200.421933%204.91083%200.500046L3%202.41088L1.08917%200.500046C1.01103%200.421933%200.905069%200.378052%200.794584%200.378052C0.684099%200.378052%200.578137%200.421933%200.5%200.500046C0.421887%200.578183%200.378006%200.684144%200.378006%200.794629C0.378006%200.905115%200.421887%201.01108%200.5%201.08921L2.41083%203.00005L0.5%204.91088C0.421887%204.98902%200.378006%205.09498%200.378006%205.20546C0.378006%205.31595%200.421887%205.42191%200.5%205.50005C0.578137%205.57816%200.684099%205.62204%200.794584%205.62204C0.905069%205.62204%201.01103%205.57816%201.08917%205.50005L3%203.58921L4.91083%205.50005C4.98897%205.57816%205.09493%205.62204%205.20542%205.62204C5.3159%205.62204%205.42186%205.57816%205.5%205.50005C5.57811%205.42191%205.62199%205.31595%205.62199%205.20546C5.62199%205.09498%205.57811%204.98902%205.5%204.91088L3.58917%203.00005L5.5%201.08921C5.57811%201.01108%205.62199%200.905115%205.62199%200.794629C5.62199%200.684144%205.57811%200.578183%205.5%200.500046Z'%20fill='%23161617'/%3e%3c/svg%3e";
+export {
+  C as default
+};