@agrotools1/at-components 1.0.0 → 1.0.2

package/dist/Input/Input.core.vue.js

@@ -0,0 +1,113 @@
+import I from "./Input.core.vue2.js";
+import { resolveComponent as C, openBlock as n, createElementBlock as l, createElementVNode as i, createTextVNode as p, toDisplayString as d, createCommentVNode as r, Fragment as v, renderList as k, mergeProps as T, normalizeClass as m, createBlock as t, resolveDynamicComponent as y } from "vue";
+import "./Input.core.vue3.js";
+import $ from "../_virtual/_plugin-vue_export-helper.js";
+const f = ["data-mode", "has-error", "disabled"], h = ["for"], A = {
+  key: 0,
+  class: "AT-INPUT_required"
+}, N = ["title"], F = { class: "AT-INPUT_item_slot" }, O = ["onClick"], b = {
+  key: 0,
+  class: "AT-INPUT_items_length"
+}, P = ["id", "disabled", "readonly", "type", "placeholder", "name", "value"], g = ["data-mode"], U = ["src"];
+function B(e, s, M, S, z, E) {
+  const u = C("AtCloseSolidIcon");
+  return n(), l("div", null, [
+    i("div", {
+      ref: "wrapperEl",
+      "data-mode": e.currentMode,
+      "has-error": e.error.value,
+      disabled: e.$props.disabled || void 0,
+      class: "AT-INPUT_core",
+      onMouseover: s[9] || (s[9] = (...o) => e.handleMouseOver && e.handleMouseOver(...o)),
+      onMouseleave: s[10] || (s[10] = (...o) => e.handleMouseLeave && e.handleMouseLeave(...o))
+    }, [
+      i("label", {
+        for: e.id,
+        onClick: s[0] || (s[0] = (...o) => e.handleOnFocus && e.handleOnFocus(...o))
+      }, [
+        p(d(e.label) + " ", 1),
+        e.$props.required ? (n(), l("span", A, "*")) : r("", !0)
+      ], 8, h),
+      e.separator ? (n(), l("div", {
+        key: 0,
+        ref: "containerItemsEl",
+        class: "AT-INPUT_items",
+        onClick: s[1] || (s[1] = (...o) => e.handleOnFocus && e.handleOnFocus(...o))
+      }, [
+        (n(!0), l(v, null, k(e.selectedItemsController.itemsToRender, (o) => (n(), l("span", {
+          key: o.value,
+          ref_for: !0,
+          ref: "selectedItemsEl",
+          title: o.text,
+          class: "AT-INPUT_item"
+        }, [
+          i("span", F, d(o.text), 1),
+          i("span", {
+            class: "AT-INPUT_item_slot_x",
+            style: { padding: "1px 5px" },
+            onClick: () => {
+              var a;
+              (a = e.onSelectedItemClick) == null || a.call(e, o == null ? void 0 : o.value);
+            }
+          }, "x", 8, O)
+        ], 8, N))), 128)),
+        e.selectedItems.length > e.selectedItemsController.supportedItems ? (n(), l("span", b, "+ " + d(e.selectedItems.length - e.selectedItemsController.supportedItems), 1)) : r("", !0)
+      ], 512)) : (n(), l("input", T({ key: 1 }, e.$attrs, {
+        id: e.id,
+        ref: "inputEl",
+        style: { cursor: e.cursor },
+        class: e.inputClass,
+        disabled: e.$props.disabled || void 0,
+        readonly: e.$props.readonly || void 0,
+        type: e.type,
+        placeholder: e.placeholder,
+        name: e.id,
+        value: e.inputComputedValue,
+        onInput: s[2] || (s[2] = (...o) => e.onInput && e.onInput(...o)),
+        onFocus: s[3] || (s[3] = (...o) => e.handleOnFocus && e.handleOnFocus(...o)),
+        onFocusout: s[4] || (s[4] = (...o) => e.handleOnFocusOut && e.handleOnFocusOut(...o))
+      }), null, 16, P)),
+      e.$props.icon ? (n(), l("div", {
+        key: 2,
+        class: m(["AT_INPUT_side_icon_slot", { clickable: e.useSideClearButton }]),
+        onClick: s[6] || (s[6] = (o) => e.showSideClearButton ? e.clearInput() : null)
+      }, [
+        e.showSideClearButton ? (n(), t(u, {
+          key: 0,
+          size: "20",
+          onClick: s[5] || (s[5] = (o) => e.clearInput())
+        })) : r("", !0)
+      ], 2)) : r("", !0),
+      e.$props.icon ? (n(), l("div", {
+        key: 3,
+        class: m(["AT_INPUT_icon_slot", { clickable: e.useClearButton && e.isFocused }]),
+        onClick: s[8] || (s[8] = (o) => e.showClearButton ? e.clearInput() : null)
+      }, [
+        e.showClearButton ? (n(), t(u, {
+          key: 0,
+          size: "20",
+          onClick: s[7] || (s[7] = (o) => e.clearInput())
+        })) : (n(), t(y(e.icons[e.$props.icon.name]), {
+          key: 1,
+          size: e.$props.icon.size || "20",
+          color: e.iconColor
+        }, null, 8, ["size", "color"]))
+      ], 2)) : r("", !0)
+    ], 40, f),
+    e.error.value ? (n(), l("span", {
+      key: 0,
+      class: "AT-INPUT_error-message",
+      "data-mode": e.currentMode
+    }, [
+      i("img", {
+        src: e.icons.error,
+        alt: "error icon"
+      }, null, 8, U),
+      p(" " + d(e.error.message), 1)
+    ], 8, g)) : r("", !0)
+  ]);
+}
+const R = /* @__PURE__ */ $(I, [["render", B], ["__scopeId", "data-v-a2b5eadc"]]);
+export {
+  R as default
+};

package/dist/Input/Input.core.vue2.js

@@ -0,0 +1,242 @@
+import { defineComponent as P, ref as u, computed as i, onMounted as H, onBeforeUnmount as G, watchEffect as J, watch as B, nextTick as b } from "vue";
+import { AtCloseSolidIcon as K } from "../node_modules/.pnpm/@agrotools1_at-icons@0.2.11/node_modules/@agrotools1/at-icons/dist/AtCloseSolidIcon/index.js";
+import Q from "../Icons/icons.js";
+import X from "./imgs/error.svg.js";
+const ee = P({
+  name: "AtCoreInput",
+  components: {
+    AtCloseSolidIcon: K
+  },
+  props: {
+    modelValue: {
+      type: String,
+      required: !1,
+      default: void 0
+    },
+    icon: {
+      type: Object,
+      required: !1,
+      default: void 0
+    },
+    forceFocus: {
+      type: Boolean,
+      default: !1,
+      required: !1
+    },
+    debounce: {
+      type: Number,
+      required: !1,
+      default: 0
+    },
+    preventInputEvent: {
+      type: Boolean,
+      default: !1,
+      required: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    label: {
+      type: String,
+      default: "",
+      required: !0
+    },
+    cursor: {
+      type: String,
+      default: "default",
+      required: !1
+    },
+    id: {
+      type: String
+    },
+    type: {
+      type: String,
+      default: "text"
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    error: {
+      type: Object,
+      default: () => ({
+        value: !1,
+        message: ""
+      }),
+      validator: (e) => typeof e == "object" && typeof e.value == "boolean" && typeof e.message == "string"
+    },
+    separator: {
+      type: String,
+      default: null
+    },
+    selectedItems: {
+      type: Array,
+      default: () => []
+    },
+    onSelectedItemClick: {
+      type: Function
+    },
+    useClearButton: {
+      type: Boolean,
+      default: !1
+    },
+    useSideClearButton: {
+      type: Boolean,
+      default: !1
+    },
+    forceEventClearButton: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "update:modelValue",
+    "input",
+    "clickOutside",
+    "clearInput",
+    "mouseover",
+    "overflow"
+  ],
+  setup(e, { emit: s }) {
+    const F = { ...Q }, S = u(null), f = u(null), v = u(null), E = u(null), L = i(() => e.error), a = u(!1), d = u(""), c = u(!1), M = u(!1), T = i(
+      () => e.useClearButton && a.value && e.modelValue && !c.value
+    ), k = i(
+      () => e.useSideClearButton && !e.useClearButton && e.modelValue && !c.value
+    ), h = u({
+      supportedItems: e.selectedItems.length,
+      isCounterActive: !1,
+      itemsToRender: e.selectedItems
+    }), _ = Math.random().toString(36).substring(2), o = u(!1), W = () => {
+      o.value = !0;
+    }, x = () => {
+      o.value = !1;
+    }, g = () => {
+      a.value = !0;
+    }, m = () => {
+      e.forceFocus || (e.forceEventClearButton ? a.value = !0 : A(() => {
+        a.value = !1;
+      }, 100)());
+    }, I = async () => {
+      var q;
+      h.value.itemsToRender = e.selectedItems, await b();
+      const t = (q = v.value) == null ? void 0 : q.clientWidth;
+      if (t === void 0)
+        return;
+      let l = 50, n = 0;
+      const r = E.value;
+      if (r)
+        for (let y = 0; y < r.length; y++)
+          l += r[y].clientWidth + 10, l <= t && (n = y + 1);
+      let w;
+      l >= t ? w = {
+        isCounterActive: l > (t || 0),
+        supportedItems: n,
+        itemsToRender: e.selectedItems.slice(0, n)
+      } : w = {
+        isCounterActive: l > (t || 0),
+        supportedItems: e.selectedItems.length,
+        itemsToRender: e.selectedItems
+      }, h.value = w;
+    }, O = (t) => {
+      var l, n;
+      !((l = S.value) != null && l.contains(t.target)) && !((n = f.value) != null && n.contains(t.target)) && !T.value && !c.value && (m(), a.value = !1, s("clickOutside"));
+    }, C = async () => {
+      if (await b(), f.value) {
+        const t = f.value.scrollWidth > f.value.clientWidth;
+        M.value = t, s("overflow", t);
+      }
+    };
+    H(() => {
+      var t;
+      (e.modelValue !== void 0 && ((t = e.modelValue) != null && t.length) || e.forceFocus) && g(), document.addEventListener("click", O), window.addEventListener("resize", I);
+    }), G(() => {
+      document.removeEventListener("click", O), window.removeEventListener("resize", I);
+    });
+    const R = (t) => {
+      e.preventInputEvent && t.preventDefault();
+      const l = t.target.value;
+      s("input", t), e.debounce > 0 ? A(() => V(l), e.debounce)() : V(l), b(() => {
+        C();
+      });
+    }, V = (t) => {
+      s("update:modelValue", t), e.modelValue === void 0 && (d.value = t);
+    };
+    function A(t, l) {
+      let n;
+      return function() {
+        clearTimeout(n), n = setTimeout(t, l);
+      };
+    }
+    const j = () => {
+      c.value = !0, a.value = !1, s("clearInput"), setTimeout(() => {
+        e.forceEventClearButton || V(""), c.value = !1;
+      }, 100);
+    };
+    J(() => {
+      var t, l;
+      e.separator && ((e.modelValue !== void 0 ? e.modelValue.split(e.separator).filter((r) => r.length > 1) : d.value.split(e.separator).filter((r) => r.length > 1)).length ? (t = v.value) == null || t.classList.remove("AT-INPUT_items_empty") : ((l = v.value) == null || l.classList.add("AT-INPUT_items_empty"), m(), a.value = !1)), e.forceFocus ? g() : (m(), a.value = !1);
+    }), B(
+      () => e.selectedItems,
+      async () => {
+        await I();
+      },
+      { deep: !0 }
+    ), B(
+      () => o.value,
+      () => {
+        s("mouseover", o.value);
+      }
+    ), B(
+      () => e.modelValue,
+      () => {
+        C();
+      }
+    );
+    const z = i(() => {
+      var t;
+      return e.disabled ? "var(--at-medium-grey)" : e.selectedItems.length > 0 ? "var(--at-black)" : a.value ? "var(--at-primary-color-2)" : e.error.value ? "var(--at-error)" : o.value || (t = e.icon) != null && t.color || e.modelValue !== void 0 && e.modelValue.length > 0 || d.value.length > 0 ? "var(--at-black)" : "var(--at-dark-grey)";
+    }), N = i(() => e.disabled ? "disabled" : e.selectedItems.length > 0 ? "filled" : a.value ? "focused" : e.error.value ? "error" : o.value ? "hover" : e.modelValue !== void 0 && e.modelValue.length > 0 || d.value.length > 0 ? "filled" : "default"), U = i(() => e.modelValue !== void 0 ? e.modelValue : d.value ? d.value : null), D = i(() => k.value === !0 ? "AT-ITEMS_input" : "");
+    return {
+      wrapperEl: S,
+      inputEl: f,
+      inputError: L,
+      inputId: e.id ?? _,
+      handleOnFocus: g,
+      handleOnFocusOut: m,
+      icons: {
+        error: X,
+        ...F
+      },
+      clickedClear: c,
+      showClearButton: T,
+      showSideClearButton: k,
+      clearInput: j,
+      containerItemsEl: v,
+      onInput: R,
+      iconColor: z,
+      isFocused: a,
+      handleMouseOver: W,
+      handleMouseLeave: x,
+      isHovered: o,
+      inputComputedValue: U,
+      currentMode: N,
+      selectedItemsEl: E,
+      selectedItemsController: h,
+      resizeSelectedItems: I,
+      inputClass: D,
+      checkOverflow: C
+    };
+  }
+});
+export {
+  ee as default
+};

package/dist/Input/Input.core.vue3.js

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

package/dist/Input/imgs/error.svg.js

@@ -0,0 +1,4 @@
+const M = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8yNzEzXzI1KSI+DQo8cGF0aCBkPSJNOCAwQzMuNTgxNzIgMCAwIDMuNTgxNzIgMCA4QzAgMTIuNDE4MyAzLjU4MTcyIDE2IDggMTZDMTIuNDE4MyAxNiAxNiAxMi40MTgzIDE2IDhDMTUuOTk1MiAzLjU4MzY5IDEyLjQxNjMgMC4wMDQ3ODEyNSA4IDBaTTEwLjY2NjcgOS43MjQ2NkMxMC45Mzc2IDkuOTc0IDEwLjk1NTEgMTAuMzk1OCAxMC43MDU3IDEwLjY2NjdDMTAuNDU2NCAxMC45Mzc2IDEwLjAzNDYgMTAuOTU1MSA5Ljc2MzcyIDEwLjcwNTdDOS43NTAxNiAxMC42OTMzIDkuNzM3MTYgMTAuNjgwMiA5LjcyNDY2IDEwLjY2NjdMOCA4Ljk0MjY2TDYuMjc2IDEwLjY2NjdDNi4wMTExNiAxMC45MjI0IDUuNTg5MTMgMTAuOTE1MSA1LjMzMzM0IDEwLjY1MDNDNS4wODM4NCAxMC4zOTE5IDUuMDgzODQgOS45ODIzNCA1LjMzMzM0IDkuNzI0TDcuMDU3MzQgOEw1LjMzMzM0IDYuMjc2QzUuMDc3NTYgNi4wMTExNiA1LjA4NDkxIDUuNTg5MTMgNS4zNDk3NSA1LjMzMzM0QzUuNjA4MDkgNS4wODM4NCA2LjAxNzY2IDUuMDgzODQgNi4yNzYgNS4zMzMzNEw4IDcuMDU3MzRMOS43MjQ2NiA1LjMzMzM0QzkuOTc0IDUuMDYyNDQgMTAuMzk1OCA1LjA0NDk0IDEwLjY2NjcgNS4yOTQyOEMxMC45Mzc2IDUuNTQzNjMgMTAuOTU1MSA1Ljk2NTM4IDEwLjcwNTcgNi4yMzYyOEMxMC42OTMzIDYuMjQ5ODQgMTAuNjgwMiA2LjI2Mjg0IDEwLjY2NjcgNi4yNzUzNEw4Ljk0MjY2IDhMMTAuNjY2NyA5LjcyNDY2WiIgZmlsbD0iIzgzMTUxMSIvPg0KPC9nPg0KPGRlZnM+DQo8Y2xpcFBhdGggaWQ9ImNsaXAwXzI3MTNfMjUiPg0KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPg0KPC9jbGlwUGF0aD4NCjwvZGVmcz4NCjwvc3ZnPg0K";
+export {
+  M as default
+};