@agrotools1/at-components 0.6.69 → 0.6.72

package/dist/Select/Select.core.d.ts

@@ -8,6 +8,8 @@ export interface SelectCoreProps {
     selectedItems?: Array<SelectItemProps>;
     separator?: string;
     onSelectedItemClick: (separatedValue: string) => void;
+    isTypable: boolean;
+    showClearButton: false;
 }
 declare const _default: import('vue').DefineComponent<{
     value: {
@@ -46,6 +48,21 @@ declare const _default: import('vue').DefineComponent<{
         required: false;
         default: boolean;
     };
+    customClass: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    isTypable: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    showClearButton: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
 }, {
     id: string;
     handleValue: () => string;
@@ -55,7 +72,13 @@ declare const _default: import('vue').DefineComponent<{
     } | undefined>;
     atInput: import('vue').Ref<null>;
     inputModelValue: import('vue').Ref<string>;
-}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
+    handleTyping: (text: string) => void;
+    handleClearInput: () => void;
+    handleClickOutside: () => void;
+    type: import('vue').ComputedRef<"button" | undefined>;
+    inputClass: string;
+    isTypable: boolean;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("clearInput" | "update:model-value")[], "clearInput" | "update:model-value", import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
     value: {
         type: PropType<string | SelectItemProps>;
     };
@@ -92,12 +115,33 @@ declare const _default: import('vue').DefineComponent<{
         required: false;
         default: boolean;
     };
-}>>, {
+    customClass: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    isTypable: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    showClearButton: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+}>> & {
+    onClearInput?: ((...args: any[]) => any) | undefined;
+    "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
+}, {
     required: boolean;
     label: string;
     disabled: boolean;
     separator: string;
     selectedItems: SelectItemProps[];
+    showClearButton: boolean;
     isMultiple: boolean;
+    customClass: string;
+    isTypable: boolean;
 }, {}>;
 export default _default;

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

@@ -1,14 +1,17 @@
-import t from "./Select.core.vue2.js";
-import { resolveComponent as a, openBlock as n, createBlock as i, mergeProps as s } from "vue";
-import p from "../_virtual/_plugin-vue_export-helper.js";
-function d(e, o, u, m, c, b) {
-  const r = a("AtInput");
-  return n(), i(r, s(e.$props, {
+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] = (l) => e.inputModelValue = l),
-    type: "button",
+    "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,
@@ -22,10 +25,13 @@ function d(e, o, u, m, c, b) {
     error: e.getError,
     icon: { name: "AtAngleDownSolidIcon" },
     "aria-autocomplete": "none",
-    class: "AT-SELECT_container"
-  }), null, 16, ["modelValue", "on-selected-item-click", "selected-items", "label", "aria-controls", "aria-label", "separator", "required", "disabled", "error"]);
+    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"]);
 }
-const k = /* @__PURE__ */ p(t, [["render", d]]);
+const k = /* @__PURE__ */ d(n, [["render", p]]);
 export {
   k as default
 };

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

@@ -1,11 +1,11 @@
-import { defineComponent as f, ref as r, computed as i, watch as c, inject as p } from "vue";
-import { AtInput as m } from "../Input/index.js";
+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 "./Item/Item.vue2.js";
 import "./Item/Item.vue3.js";
-const S = f({
+const S = m({
   name: "AtSelect",
   components: {
-    AtInput: m.Text
+    AtInput: h.Text
   },
   props: {
     value: {
@@ -43,36 +43,67 @@ const S = f({
       type: Boolean,
       required: !1,
       default: !1
+    },
+    customClass: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    isTypable: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    showClearButton: {
+      type: Boolean,
+      required: !1,
+      default: !1
     }
   },
-  setup(e) {
-    const o = r(null), l = r(""), u = i(() => {
+  emits: ["update:model-value", "clearInput"],
+  setup(e, { emit: a }) {
+    const o = s(null), l = s(""), r = n(() => {
       var t;
       return typeof e.value == "string" ? e.value : (t = e.value) == null ? void 0 : t.value;
-    }), a = () => {
-      var n;
+    }), d = n(() => {
+      if (!e.isTypable)
+        return "button";
+    }), f = (t) => {
+      a("update:model-value", t);
+    }, c = () => {
+      a("clearInput");
+    }, p = () => {
+      !e.value && e.isTypable && (l.value = "", a("clearInput"));
+    }, u = () => {
+      var i;
       if (e.isMultiple)
         return "";
-      const t = (n = e.items) == null ? void 0 : n.find(
-        (d) => d.value === u.value
+      const t = (i = e.items) == null ? void 0 : i.find(
+        (v) => v.value === r.value
       );
       return t ? t.text : (console.warn(
-        `The default value "${u.value}" is not included in the items array.`
+        `The default value "${r.value}" is not included in the items array.`
       ), "");
     };
-    c(
+    b(
       () => e.value,
       () => {
-        l.value = a() || "";
+        e.value !== "" && (l.value = u() || "");
       }
-    ), l.value = a() || "";
-    const s = i(() => p("error"));
+    ), l.value = u() || "";
+    const y = n(() => I("error"));
     return {
       id: `at-select-${Math.random().toString(36).substr(2, 9)}`,
-      handleValue: a,
-      getError: s,
+      handleValue: u,
+      getError: y,
       atInput: o,
-      inputModelValue: l
+      inputModelValue: l,
+      handleTyping: f,
+      handleClearInput: c,
+      handleClickOutside: p,
+      type: d,
+      inputClass: e.customClass,
+      isTypable: e.isTypable
     };
   }
 });

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

@@ -32,10 +32,22 @@ declare const _default: import('vue').DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    hasAutocomplete: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClearButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     error: {
         type: ObjectConstructor;
         default: () => void;
     };
+    msgNoResult: {
+        type: StringConstructor;
+        default: string;
+    };
 }, {
     onSelectedValueChange: (item: SelectItemProps) => void;
     selectedValue: import('vue').Ref<string | {
@@ -53,7 +65,21 @@ declare const _default: import('vue').DefineComponent<{
     containerRef: import('vue').Ref<HTMLDivElement | null>;
     isInternalChange: import('vue').Ref<boolean>;
     rotateIcon: () => void;
-}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
+    handleTyping: (value: string) => void;
+    filteredItems: import('vue').Ref<{
+        text: string;
+        value: string;
+        onClick?: ((payload: MouseEvent) => void) | undefined;
+        onCheckboxChange?: ((payload: import('../Item/Item').CheckboxProps) => void) | undefined;
+        checkboxValue?: boolean | undefined;
+        isSelected?: boolean | undefined;
+        type?: "text" | "multiple" | "with-icon" | undefined;
+        icon?: string | undefined;
+    }[]>;
+    textValue: import('vue').Ref<string>;
+    showNoResult: import('vue').ComputedRef<boolean>;
+    handleClearInput: () => void;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("update:modelValue" | "clearValue")[], "update:modelValue" | "clearValue", import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
     modelValue: {
         type: PropType<string | SelectItemProps>;
         required: false;
@@ -81,12 +107,25 @@ declare const _default: import('vue').DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    hasAutocomplete: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClearButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     error: {
         type: ObjectConstructor;
         default: () => void;
     };
+    msgNoResult: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClearValue?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
     label: string;
@@ -94,6 +133,9 @@ declare const _default: import('vue').DefineComponent<{
     disabled: boolean;
     modelValue: string | SelectItemProps;
     items: SelectItemProps[];
+    showClearButton: boolean;
+    msgNoResult: string;
     emitValue: boolean;
+    hasAutocomplete: boolean;
 }, {}>;
 export default _default;

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

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

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

@@ -1,11 +1,13 @@
-import { defineComponent as p, ref as u, provide as f, watch as c, computed as g, onMounted as A } from "vue";
-import S from "../Item/Item.vue.js";
-import V from "../Select.core.vue.js";
-const O = p({
+import { defineComponent as q, ref as r, provide as w, watch as A, computed as S, onMounted as O } from "vue";
+import { AtTipograph as T } from "../../Tipograph/index.js";
+import _ from "../Item/Item.vue.js";
+import j from "../Select.core.vue.js";
+const k = q({
   name: "AtSingleSelect",
   components: {
-    AtSingleCore: V,
-    AtItem: S
+    AtSingleCore: j,
+    AtItem: _,
+    AtParagraph: T.Paragraph
   },
   props: {
     modelValue: {
@@ -35,64 +37,109 @@ const O = p({
       type: Boolean,
       default: !1
     },
+    hasAutocomplete: {
+      type: Boolean,
+      default: !1
+    },
+    showClearButton: {
+      type: Boolean,
+      default: !1
+    },
     error: {
       type: Object,
       default: () => {
       }
+    },
+    msgNoResult: {
+      type: String,
+      default: "Dado não encontrado"
     }
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "clearValue"],
   setup(t, { emit: i }) {
-    const o = u(null), r = u(!1), a = u(t.modelValue), n = u(!1);
-    f("error", t.error), c(t.error, () => f("error", t.error));
-    const s = (e) => {
-      a.value = e, r.value = !1, d(), i(
+    const n = r(null), o = r(!1), l = r(t.modelValue), u = r(""), c = r(!1), f = r(d(t.items));
+    w("error", t.error), A(t.error, () => w("error", t.error));
+    const v = (e) => {
+      l.value = e, o.value = !1, y(), i(
         "update:modelValue",
-        t.emitValue ? a.value.value : a.value
+        t.emitValue ? l.value.value : l.value
       );
-    }, v = g(() => {
+    }, L = (e) => {
+      l.value !== "" && (u.value = "", l.value = "", m()), u.value = e;
+      const a = t.items.filter((s) => s.text.toLowerCase().includes(e.toLowerCase()));
+      f.value = d(a, e), o.value = !0;
+    }, V = S(() => {
       var e;
-      return typeof a.value == "string" ? a.value : (e = a.value) == null ? void 0 : e.value;
-    });
-    function m(e) {
-      var l;
-      r.value === !0 && !((l = o == null ? void 0 : o.value) != null && l.contains(e.target)) && (r.value = !1);
+      return typeof l.value == "string" ? l.value : (e = l.value) == null ? void 0 : e.value;
+    }), b = () => {
+      u.value = "", l.value = "", m(), i("clearValue");
+    };
+    function d(e, a) {
+      return e.sort((s, B) => {
+        const h = s.text.toLowerCase(), g = B.text.toLowerCase();
+        if (a) {
+          const p = h.startsWith(a.toLowerCase()), C = g.startsWith(a.toLowerCase());
+          if (p && !C)
+            return -1;
+          if (!p && C)
+            return 1;
+        }
+        return h.localeCompare(g);
+      });
     }
-    A(() => {
-      document.addEventListener("click", m);
-    }), c(
+    const I = S(
+      () => {
+        var e;
+        return !((e = f.value) != null && e.length) && t.hasAutocomplete;
+      }
+    );
+    function x(e) {
+      var a;
+      o.value === !0 && !((a = n == null ? void 0 : n.value) != null && a.contains(e.target)) && (o.value = !1), l.value === "" && (u.value = "", m());
+    }
+    const m = () => {
+      f.value = d(t.items);
+    };
+    O(() => {
+      document.addEventListener("click", x);
+    }), A(
       () => t.modelValue,
       async (e) => {
-        if (n.value)
+        if (c.value)
           return;
-        const l = t.items.find(
-          (y) => y.value === (typeof e == "string" ? e : e.value)
+        const a = t.items.find(
+          (s) => s.value === (typeof e == "string" ? e : e.value)
         );
-        if (!l) {
+        if (!a) {
           console.warn(
             "O valor ao qual você alterou o v-model não está contida nos itens disponíveis"
-          ), a.value = "";
+          ), l.value = "";
           return;
         }
-        n.value = !0, await s(l), n.value = !1;
+        c.value = !0, await v(a), c.value = !1;
       }
     );
-    const d = () => {
-      var l;
-      const e = (l = o.value) == null ? void 0 : l.querySelector(".AT_INPUT_icon_slot");
-      e instanceof HTMLElement && e.setAttribute("data-rotate", r.value.toString());
+    const y = () => {
+      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: s,
-      selectedValue: a,
-      open: r,
-      valueOfModel: v,
-      containerRef: o,
-      isInternalChange: n,
-      rotateIcon: d
+      onSelectedValueChange: v,
+      selectedValue: l,
+      open: o,
+      valueOfModel: V,
+      containerRef: n,
+      isInternalChange: c,
+      rotateIcon: y,
+      handleTyping: L,
+      filteredItems: f,
+      textValue: u,
+      showNoResult: I,
+      handleClearInput: b
     };
   }
 });
 export {
-  O as default
+  k as default
 };

package/dist/Select/index.d.ts

@@ -32,10 +32,22 @@ export declare const AtSelect: {
             type: BooleanConstructor;
             default: boolean;
         };
+        hasAutocomplete: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        showClearButton: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         error: {
             type: ObjectConstructor;
             default: () => void;
         };
+        msgNoResult: {
+            type: StringConstructor;
+            default: string;
+        };
     }, {
         onSelectedValueChange: (item: ISelectItemProps) => void;
         selectedValue: import('vue').Ref<string | {
@@ -53,7 +65,21 @@ export declare const AtSelect: {
         containerRef: import('vue').Ref<HTMLDivElement | null>;
         isInternalChange: import('vue').Ref<boolean>;
         rotateIcon: () => void;
-    }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
+        handleTyping: (value: string) => void;
+        filteredItems: import('vue').Ref<{
+            text: string;
+            value: string;
+            onClick?: ((payload: MouseEvent) => void) | undefined;
+            onCheckboxChange?: ((payload: import('./Item/Item').CheckboxProps) => void) | undefined;
+            checkboxValue?: boolean | undefined;
+            isSelected?: boolean | undefined;
+            type?: "text" | "multiple" | "with-icon" | undefined;
+            icon?: string | undefined;
+        }[]>;
+        textValue: import('vue').Ref<string>;
+        showNoResult: import('vue').ComputedRef<boolean>;
+        handleClearInput: () => void;
+    }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("update:modelValue" | "clearValue")[], "update:modelValue" | "clearValue", import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
         modelValue: {
             type: import('vue').PropType<string | ISelectItemProps>;
             required: false;
@@ -81,12 +107,25 @@ export declare const AtSelect: {
             type: BooleanConstructor;
             default: boolean;
         };
+        hasAutocomplete: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        showClearButton: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         error: {
             type: ObjectConstructor;
             default: () => void;
         };
+        msgNoResult: {
+            type: StringConstructor;
+            default: string;
+        };
     }>> & {
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        onClearValue?: ((...args: any[]) => any) | undefined;
     }, {
         required: boolean;
         label: string;
@@ -94,7 +133,10 @@ export declare const AtSelect: {
         disabled: boolean;
         modelValue: string | ISelectItemProps;
         items: ISelectItemProps[];
+        showClearButton: boolean;
+        msgNoResult: string;
         emitValue: boolean;
+        hasAutocomplete: boolean;
     }, {}>;
     Multiple: import('vue').DefineComponent<{
         label: {