@agrotools1/at-components 1.0.0 → 1.0.2

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

@@ -0,0 +1,184 @@
+import { PropType } from 'vue';
+import { SelectItemProps } from './Item/Item';
+
+export interface SelectCoreProps {
+    defaultValue: string | null;
+    label: string;
+    items: Array<SelectItemProps>;
+    selectedItems?: Array<SelectItemProps>;
+    separator?: string;
+    onSelectedItemClick: (separatedValue: string) => void;
+    isTypable: boolean;
+    showClearButton: false;
+}
+declare const _default: import('vue').DefineComponent<{
+    value: {
+        type: PropType<string | SelectItemProps>;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    items: {
+        type: () => Array<SelectItemProps>;
+    };
+    separator: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selectedItems: {
+        type: () => Array<SelectItemProps>;
+        default: () => SelectItemProps[];
+    };
+    onSelectedItemClick: {
+        type: () => (separatedValue: string) => void;
+        required: false;
+    };
+    isMultiple: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    required: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    customClass: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    isTypable: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    showClearButton: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    showTooltipOnOverflow: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    tooltipPosition: {
+        required: false;
+        type: () => "bottom-left" | "bottom-center" | "bottom-right" | "top-left" | "top-center" | "top-right" | "left-bottom" | "left-center" | "right-bottom" | "right-center" | undefined;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}, {
+    id: string;
+    handleValue: () => string;
+    getError: import('vue').ComputedRef<{
+        message: string;
+        value: boolean;
+    } | undefined>;
+    atInput: import('vue').Ref<null>;
+    inputModelValue: import('vue').Ref<string>;
+    handleTyping: (text: string) => void;
+    handleClearInput: () => void;
+    handleClickOutside: () => void;
+    type: import('vue').ComputedRef<"button" | undefined>;
+    inputClass: string;
+    isTypable: boolean;
+    isOverflowing: import('vue').Ref<boolean>;
+    handleOverflow: (value: boolean) => void;
+}, 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>;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    items: {
+        type: () => Array<SelectItemProps>;
+    };
+    separator: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selectedItems: {
+        type: () => Array<SelectItemProps>;
+        default: () => SelectItemProps[];
+    };
+    onSelectedItemClick: {
+        type: () => (separatedValue: string) => void;
+        required: false;
+    };
+    isMultiple: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    required: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    customClass: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    isTypable: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    showClearButton: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    showTooltipOnOverflow: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    tooltipPosition: {
+        required: false;
+        type: () => "bottom-left" | "bottom-center" | "bottom-right" | "top-left" | "top-center" | "top-right" | "left-bottom" | "left-center" | "right-bottom" | "right-center" | undefined;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}>> & {
+    onClearInput?: ((...args: any[]) => any) | undefined;
+    "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
+}, {
+    required: boolean;
+    label: string;
+    disabled: boolean;
+    placeholder: string;
+    separator: string;
+    selectedItems: SelectItemProps[];
+    showClearButton: boolean;
+    isMultiple: boolean;
+    customClass: string;
+    isTypable: boolean;
+    showTooltipOnOverflow: boolean;
+    tooltipPosition: "bottom-left" | "bottom-center" | "bottom-right" | "top-left" | "top-center" | "top-right" | "left-bottom" | "left-center" | "right-bottom" | "right-center" | undefined;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,52 @@
+import i from "./Select.core.vue2.js";
+import { resolveComponent as l, openBlock as s, createElementBlock as d, createVNode as r, 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, b, f, C, h) {
+  const t = l("AtInput"), n = l("AtTooltip");
+  return s(), d("div", null, [
+    r(n, {
+      disable: !e.isOverflowing || !e.showTooltipOnOverflow,
+      text: e.inputModelValue,
+      position: e.tooltipPosition,
+      style: { width: "100%" }
+    }, {
+      default: p(() => [
+        r(t, 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,
+          placeholder: e.placeholder,
+          "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", "placeholder", "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__ */ m(i, [["render", c], ["__scopeId", "data-v-5d06c9e1"]]);
+export {
+  k as default
+};

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

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

@@ -0,0 +1,172 @@
+import { PropType } from 'vue';
+import { SelectItemProps } from '../Item/Item';
+import { SelectCoreProps } from '../Select.core';
+
+export interface SelectSingleProps extends SelectCoreProps {
+}
+declare const _default: import('vue').DefineComponent<{
+    modelValue: {
+        type: PropType<string | SelectItemProps>;
+        required: false;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    required: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    items: {
+        type: () => Array<SelectItemProps>;
+        default: () => SelectItemProps[];
+        validator: (value: Array<SelectItemProps>) => boolean;
+    };
+    emitValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isLoading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasAutocomplete: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClearButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showTooltipOnOverflow: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    error: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+    msgNoResult: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    onSelectedValueChange: (item: SelectItemProps) => void;
+    selectedValue: import('vue').Ref<string | {
+        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;
+        btnClass?: string | undefined;
+    }>;
+    open: import('vue').Ref<boolean>;
+    valueOfModel: import('vue').ComputedRef<string>;
+    containerRef: import('vue').Ref<HTMLDivElement | null>;
+    isInternalChange: import('vue').Ref<boolean>;
+    rotateIcon: () => void;
+    handleTyping: (value: string) => void;
+    filteredItems: import('vue').ComputedRef<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;
+        btnClass?: 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;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    required: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    items: {
+        type: () => Array<SelectItemProps>;
+        default: () => SelectItemProps[];
+        validator: (value: Array<SelectItemProps>) => boolean;
+    };
+    emitValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isLoading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasAutocomplete: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClearButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showTooltipOnOverflow: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    error: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+    msgNoResult: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClearValue?: ((...args: any[]) => any) | undefined;
+}, {
+    required: boolean;
+    label: string;
+    error: Record<string, any>;
+    disabled: boolean;
+    isLoading: boolean;
+    modelValue: string | SelectItemProps;
+    placeholder: string;
+    items: SelectItemProps[];
+    showClearButton: boolean;
+    msgNoResult: string;
+    showTooltipOnOverflow: boolean;
+    emitValue: boolean;
+    hasAutocomplete: boolean;
+}, {}>;
+export default _default;

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

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