evui 3.5.0-rc.1 → 3.5.0

package/dist/components/select/Select.vue.js

@@ -0,0 +1,381 @@
+import { selectClickoutside as O } from "../../directives/clickoutside.js";
+import L from "../checkboxGroup/CheckboxGroup.vue.js";
+import R from "../checkbox/Checkbox.vue.js";
+import { useModel as U, useDropdown as q } from "./uses.js";
+import { resolveComponent as S, resolveDirective as z, withDirectives as y, openBlock as t, createElementBlock as a, normalizeClass as n, createElementVNode as c, Fragment as r, createCommentVNode as i, vModelText as G, renderList as x, toDisplayString as v, withModifiers as u, vShow as j, normalizeStyle as H, renderSlot as J, createVNode as g, createBlock as K, withCtx as C, createTextVNode as _ } from "vue";
+/* empty css            */
+import Q from "../../_virtual/_plugin-vue_export-helper.js";
+const X = {
+  name: "EvSelect",
+  components: {
+    EvCheckbox: R,
+    EvCheckboxGroup: L
+  },
+  directives: {
+    clickoutside: O
+  },
+  props: {
+    modelValue: {
+      type: [Boolean, String, Number, Array, Object],
+      default: null
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    searchPlaceholder: {
+      type: String,
+      default: "Please Enter a Search Words."
+    },
+    noMatchingText: {
+      type: String,
+      default: "NO MATCHING DATA"
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    clearable: {
+      type: Boolean,
+      default: !1
+    },
+    multiple: {
+      type: Boolean,
+      default: !1
+    },
+    checkable: {
+      type: Boolean,
+      default: !1
+    },
+    collapseTags: {
+      type: Boolean,
+      default: !1
+    },
+    filterable: {
+      type: Boolean,
+      default: !1
+    },
+    filterText: {
+      type: String,
+      default: ""
+    },
+    allCheckLabel: {
+      type: String,
+      default: "Select All"
+    }
+  },
+  emits: {
+    "update:modelValue": null,
+    change: null
+  },
+  setup() {
+    const {
+      mv: k,
+      selectedModel: o,
+      computedPlaceholder: s,
+      isClearableIcon: e,
+      changeMv: h,
+      removeMv: I,
+      removeAllMv: b
+    } = U(), {
+      select: m,
+      selectWrapper: p,
+      dropbox: l,
+      itemWrapper: d,
+      isDropbox: f,
+      dropboxPosition: M,
+      filterTextRef: D,
+      filteredItems: P,
+      clickSelectInput: T,
+      clickOutsideDropbox: w,
+      changeFilterText: V,
+      changeDropboxPosition: A,
+      clickItem: B,
+      selectedItemClass: W,
+      allCheck: E,
+      changeAllCheck: N,
+      dropboxWidth: F
+    } = q({ mv: k, changeMv: h });
+    return {
+      mv: k,
+      selectedModel: o,
+      computedPlaceholder: s,
+      isClearableIcon: e,
+      changeMv: h,
+      removeMv: I,
+      removeAllMv: b,
+      select: m,
+      selectWrapper: p,
+      dropbox: l,
+      itemWrapper: d,
+      isDropbox: f,
+      dropboxPosition: M,
+      filterTextRef: D,
+      filteredItems: P,
+      clickSelectInput: T,
+      clickOutsideDropbox: w,
+      changeFilterText: V,
+      changeDropboxPosition: A,
+      clickItem: B,
+      selectedItemClass: W,
+      allCheck: E,
+      changeAllCheck: N,
+      dropboxWidth: F
+    };
+  }
+}, Y = {
+  ref: "selectWrapper",
+  class: "ev-select__wrapper"
+}, Z = ["placeholder", "disabled"], $ = {
+  key: 1,
+  class: "ev-select-tag-wrapper"
+}, ee = ["placeholder", "disabled"], le = { class: "ev-tag-name" }, oe = ["onClick"], te = {
+  key: 0,
+  class: "ev-select-tag"
+}, ae = { class: "ev-tag-name" }, se = {
+  key: 1,
+  class: "ev-select-tag num"
+}, ce = { class: "ev-tag-name" }, ie = { class: "ev-select-dropbox-wrapper" }, ne = ["placeholder", "value"], de = {
+  ref: "itemWrapper",
+  class: "ev-select-dropbox-list"
+}, re = {
+  key: 0,
+  class: "ev-select-dropbox-ul"
+}, ve = ["title", "onClick"], ue = { key: 1 }, be = { class: "ev-select-dropbox-item disabled" }, ke = {
+  key: 0,
+  class: "ev-select-dropbox-ul"
+}, fe = ["title", "onClick"], xe = {
+  key: 2,
+  ref: "itemWrapper",
+  class: "ev-select-dropbox-list"
+}, he = {
+  key: 0,
+  class: "ev-select-dropbox-ul"
+}, me = ["title", "onClick"], pe = { key: 1 }, ye = { class: "ev-select-dropbox-item disabled" };
+function ge(k, o, s, e, h, I) {
+  const b = S("ev-checkbox"), m = S("ev-checkbox-group"), p = z("clickoutside");
+  return y((t(), a("div", {
+    ref: "select",
+    class: n(["ev-select", {
+      selected: e.isDropbox,
+      disabled: s.disabled
+    }])
+  }, [
+    c("div", Y, [
+      s.multiple ? (t(), a("div", $, [
+        !s.clearable || !e.isClearableIcon ? (t(), a("span", {
+          key: 0,
+          class: "ev-input-suffix",
+          onClick: o[3] || (o[3] = (...l) => e.clickSelectInput && e.clickSelectInput(...l))
+        }, [
+          c("i", {
+            class: n(["ev-input-suffix-arrow ev-icon-s-arrow-down", {
+              selected: e.isDropbox
+            }])
+          }, null, 2)
+        ])) : i("", !0),
+        c("input", {
+          type: "text",
+          class: "ev-input multiple",
+          readonly: "",
+          placeholder: e.computedPlaceholder,
+          disabled: s.disabled,
+          onClick: o[4] || (o[4] = (...l) => e.clickSelectInput && e.clickSelectInput(...l))
+        }, null, 8, ee),
+        s.collapseTags ? (t(), a(r, { key: 2 }, [
+          e.selectedModel.length ? (t(), a("div", te, [
+            c("span", ae, v(e.selectedModel[0].name), 1),
+            c("span", {
+              class: "ev-tag-suffix",
+              onClick: o[5] || (o[5] = u((l) => [e.removeMv(e.selectedModel[0].value), e.changeDropboxPosition()], ["stop"]))
+            }, [...o[13] || (o[13] = [
+              c("i", { class: "ev-tag-suffix-close ev-icon-error" }, null, -1)
+            ])])
+          ])) : i("", !0),
+          e.selectedModel.length > 1 ? (t(), a("div", se, [
+            c("span", ce, " + " + v(e.selectedModel.length - 1), 1)
+          ])) : i("", !0)
+        ], 64)) : (t(!0), a(r, { key: 1 }, x(e.selectedModel, (l) => (t(), a("div", {
+          key: l,
+          class: "ev-select-tag"
+        }, [
+          c("span", le, v(l.name), 1),
+          c("span", {
+            class: "ev-tag-suffix",
+            onClick: u((d) => [e.removeMv(l.value), e.changeDropboxPosition()], ["stop"])
+          }, [...o[12] || (o[12] = [
+            c("i", { class: "ev-tag-suffix-close ev-icon-error" }, null, -1)
+          ])], 8, oe)
+        ]))), 128))
+      ])) : (t(), a(r, { key: 0 }, [
+        !s.clearable || !e.isClearableIcon ? (t(), a("span", {
+          key: 0,
+          class: "ev-input-suffix",
+          onClick: o[0] || (o[0] = (...l) => e.clickSelectInput && e.clickSelectInput(...l))
+        }, [
+          c("i", {
+            class: n(["ev-input-suffix-arrow ev-icon-s-arrow-down", {
+              selected: e.isDropbox
+            }])
+          }, null, 2)
+        ])) : i("", !0),
+        y(c("input", {
+          "onUpdate:modelValue": o[1] || (o[1] = (l) => e.selectedModel = l),
+          type: "text",
+          class: "ev-input",
+          readonly: "",
+          placeholder: e.computedPlaceholder,
+          disabled: s.disabled,
+          onClick: o[2] || (o[2] = (...l) => e.clickSelectInput && e.clickSelectInput(...l))
+        }, null, 8, Z), [
+          [G, e.selectedModel]
+        ])
+      ], 64)),
+      s.clearable ? y((t(), a("span", {
+        key: 2,
+        class: "ev-input-suffix",
+        onClick: o[6] || (o[6] = u((l) => [e.removeAllMv(), e.clickOutsideDropbox()], ["stop"]))
+      }, [...o[14] || (o[14] = [
+        c("i", { class: "ev-icon-error" }, null, -1)
+      ])], 512)), [
+        [j, e.isClearableIcon]
+      ]) : i("", !0),
+      c("div", ie, [
+        e.isDropbox ? (t(), a("div", {
+          key: 0,
+          ref: "dropbox",
+          class: "ev-select-dropbox",
+          style: H([e.dropboxPosition, { width: e.dropboxWidth }])
+        }, [
+          s.filterable ? J(k.$slots, "search-filter", {
+            key: 0,
+            item: {
+              value: e.filterTextRef,
+              onInput: e.changeFilterText,
+              class: "ev-input-query",
+              placeholder: s.searchPlaceholder
+            }
+          }, () => [
+            c("input", {
+              type: "text",
+              class: "ev-input-query",
+              placeholder: s.searchPlaceholder,
+              value: e.filterTextRef,
+              onInput: o[7] || (o[7] = (...l) => e.changeFilterText && e.changeFilterText(...l))
+            }, null, 40, ne)
+          ]) : i("", !0),
+          s.checkable ? (t(), a(r, { key: 1 }, [
+            s.multiple ? (t(), a("div", {
+              key: 0,
+              class: n(["ev-select-dropbox-item all-check", {
+                selected: e.allCheck
+              }]),
+              onClick: o[10] || (o[10] = u((l) => [e.changeAllCheck(!1), e.changeDropboxPosition()], ["self", "prevent"]))
+            }, [
+              g(b, {
+                modelValue: e.allCheck,
+                "onUpdate:modelValue": o[8] || (o[8] = (l) => e.allCheck = l),
+                label: s.allCheckLabel,
+                onChange: o[9] || (o[9] = (l) => [e.changeAllCheck(!0), e.changeDropboxPosition()])
+              }, null, 8, ["modelValue", "label"])
+            ], 2)) : i("", !0),
+            c("div", de, [
+              s.multiple ? (t(), K(m, {
+                key: 0,
+                modelValue: e.mv,
+                "onUpdate:modelValue": o[11] || (o[11] = (l) => e.mv = l)
+              }, {
+                default: C(() => [
+                  e.filteredItems.length ? (t(), a("ul", re, [
+                    (t(!0), a(r, null, x(e.filteredItems, (l, d) => (t(), a("li", {
+                      key: `${l.value}_${d}`,
+                      class: n(["ev-select-dropbox-item", {
+                        selected: e.selectedItemClass(l.value),
+                        disabled: l.disabled
+                      }]),
+                      title: l.name,
+                      onClick: u((f) => l.disabled ? [] : [e.clickItem(l.value), e.changeDropboxPosition()], ["self", "prevent"])
+                    }, [
+                      g(b, {
+                        label: l.value,
+                        disabled: l.disabled
+                      }, {
+                        default: C(() => [
+                          l.iconClass ? (t(), a("i", {
+                            key: 0,
+                            class: n(l.iconClass)
+                          }, null, 2)) : i("", !0),
+                          _(" " + v(l.name), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["label", "disabled"])
+                    ], 10, ve))), 128))
+                  ])) : (t(), a("ul", ue, [
+                    c("li", be, v(s.noMatchingText), 1)
+                  ]))
+                ]),
+                _: 1
+              }, 8, ["modelValue"])) : (t(), a(r, { key: 1 }, [
+                e.filteredItems.length ? (t(), a("ul", ke, [
+                  (t(!0), a(r, null, x(e.filteredItems, (l, d) => (t(), a("li", {
+                    key: `${l.value}_${d}`,
+                    class: n(["ev-select-dropbox-item", {
+                      selected: e.selectedItemClass(l.value),
+                      disabled: l.disabled
+                    }]),
+                    title: l.name,
+                    onClick: u((f) => l.disabled ? [] : [e.clickItem(l.value), e.changeDropboxPosition()], ["stop", "prevent"])
+                  }, [
+                    g(b, {
+                      "model-value": e.mv === l.value,
+                      disabled: l.disabled
+                    }, {
+                      default: C(() => [
+                        l.iconClass ? (t(), a("i", {
+                          key: 0,
+                          class: n(l.iconClass)
+                        }, null, 2)) : i("", !0),
+                        _(" " + v(l.name), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["model-value", "disabled"])
+                  ], 10, fe))), 128))
+                ])) : i("", !0)
+              ], 64))
+            ], 512)
+          ], 64)) : (t(), a("div", xe, [
+            e.filteredItems.length ? (t(), a("ul", he, [
+              (t(!0), a(r, null, x(e.filteredItems, (l, d) => (t(), a("li", {
+                key: `${l.value}_${d}`,
+                class: n(["ev-select-dropbox-item", {
+                  selected: e.selectedItemClass(l.value),
+                  disabled: l.disabled
+                }]),
+                title: l.name,
+                onClick: u((f) => l.disabled ? [] : [e.clickItem(l.value), e.changeDropboxPosition()], ["stop", "prevent"])
+              }, [
+                l.iconClass ? (t(), a("i", {
+                  key: 0,
+                  class: n(l.iconClass)
+                }, null, 2)) : i("", !0),
+                _(" " + v(l.name), 1)
+              ], 10, me))), 128))
+            ])) : (t(), a("ul", pe, [
+              c("li", ye, v(s.noMatchingText), 1)
+            ]))
+          ], 512))
+        ], 4)) : i("", !0)
+      ])
+    ], 512)
+  ], 2)), [
+    [p, e.clickOutsideDropbox]
+  ]);
+}
+const Te = /* @__PURE__ */ Q(X, [["render", ge]]);
+export {
+  Te as default
+};

package/dist/components/select/index.js

@@ -0,0 +1,7 @@
+import e from "./Select.vue.js";
+e.install = (t) => {
+  t.component(e.name, e);
+};
+export {
+  e as default
+};

package/dist/components/select/uses.js

@@ -0,0 +1,147 @@
+import { getCurrentInstance as A, computed as T, ref as v, reactive as j, watch as y, onMounted as G, onUnmounted as J, nextTick as R } from "vue";
+import { engToKor as N, korToEng as Q, getRegExp as E } from "korean-regexp";
+const le = () => {
+  const { props: i, emit: o } = A(), a = {
+    get: () => i.items.some((n) => n.value === i.modelValue) ? i.modelValue : null,
+    set: (n) => o("update:modelValue", n)
+  }, I = {
+    get: () => Array.isArray(i.modelValue) ? i.modelValue : [],
+    set: (n) => o("update:modelValue", n)
+  }, t = T(i.multiple ? I : a), r = () => {
+    var n;
+    return (n = i.items.find((C) => C.value === t.value)) == null ? void 0 : n.name;
+  }, M = () => i.items.filter((n) => i.modelValue.includes(n.value)), p = T(i.multiple ? M : r), h = T(() => i.multiple && t.value.length ? null : i.placeholder), s = () => t.value, w = () => t.value.length, x = T(i.multiple ? w : s), W = () => {
+    i.disabled || (i.multiple ? (t.value.splice(0), t.value = [...t.value]) : t.value = null);
+  }, d = async () => {
+    await R(), o("change", t.value);
+  };
+  return {
+    mv: t,
+    selectedModel: p,
+    computedPlaceholder: h,
+    isClearableIcon: x,
+    removeAllMv: W,
+    removeMv: async (n) => {
+      if (!i.disabled) {
+        const C = t.value.indexOf(n);
+        t.value.splice(C, 1), t.value = [...t.value], await d();
+      }
+    },
+    changeMv: d
+  };
+}, te = (i) => {
+  const { props: o } = A(), { mv: a, changeMv: I } = i, t = v(!1), r = v(o.filterText), M = v(null), p = v(null), h = v(null), s = v(null), w = v("100%"), x = v(null), W = j({
+    top: 0
+  }), d = T(() => {
+    var u;
+    if (!r.value || !o.filterable)
+      return o.items;
+    const e = (u = r.value) == null ? void 0 : u.trim(), l = N(e), f = Q(e);
+    return o.items.filter(
+      ({ name: c }) => c.search(E(e)) > -1 || c.search(E(l)) > -1 || c.search(E(f)) > -1
+    );
+  }), S = (e) => {
+    var l;
+    r.value = (l = e == null ? void 0 : e.target) == null ? void 0 : l.value;
+  }, n = async () => {
+    var c, g, b;
+    await R();
+    const e = (c = p.value) == null ? void 0 : c.getBoundingClientRect().height, l = (g = p.value) == null ? void 0 : g.getBoundingClientRect().y, f = (b = h.value) == null ? void 0 : b.getBoundingClientRect().height;
+    document.documentElement.clientHeight < l + e + f ? W.top = `-${f}px` : W.top = `${e}px`;
+  }, C = () => {
+    var c, g, b;
+    if (!((b = (g = (c = s.value) == null ? void 0 : c.children[0]) == null ? void 0 : g.children) != null && b.length))
+      return;
+    const e = "selected", l = s.value.children[0].children, f = s.value.offsetTop;
+    let u = null;
+    for (let k = 0; k < l.length; k++)
+      if (u = l[k], u.classList.contains(e)) {
+        if (!u.offsetTop)
+          return;
+        s.value.scrollTop = u.offsetTop - f;
+        break;
+      }
+  }, D = async () => {
+    if (s.value && h.value) {
+      await R(), (x.value === null || x.value !== p.value.offsetWidth) && (x.value = p.value.offsetWidth);
+      const e = s.value.querySelectorAll(".ev-select-dropbox-item");
+      let l = 0;
+      e.forEach((_) => {
+        const V = _.scrollWidth;
+        V > l && (l = V);
+      });
+      const { borderLeftWidth: f, borderRightWidth: u } = window.getComputedStyle(h.value), c = parseInt(f) + parseInt(u), g = s.value.offsetWidth - s.value.clientWidth;
+      l += g + c;
+      const b = window.innerWidth, U = h.value.getBoundingClientRect().left, X = b - U - 20, Y = Math.max(Math.min(l, X), x.value);
+      w.value = `${Y}px`;
+    } else
+      w.value = "100%";
+  };
+  y(
+    () => t.value,
+    async (e) => {
+      e && (await C(), await D());
+    }
+  ), y(
+    () => d.value,
+    async () => {
+      await n();
+    }
+  ), o.filterable && y(
+    () => d.value,
+    () => n()
+  );
+  const H = async () => {
+    o.items.length && !o.disabled && (t.value = !t.value, t.value && await n());
+  }, B = () => {
+    o.filterable && (r.value = ""), t.value = !1;
+  }, m = v(!1), O = (e) => {
+    e || (m.value = !m.value), m.value ? a.value = d.value.filter((l) => !l.disabled).map((l) => l.value) : a.value = [];
+  }, z = (e) => {
+    o.filterable && (r.value = ""), t.value = !1, a.value !== e && (a.value = e, I());
+  }, P = (e) => {
+    if (o.filterable && (r.value = ""), !a.value.includes(e))
+      a.value.push(e);
+    else {
+      const l = a.value.indexOf(e);
+      a.value.splice(l, 1);
+    }
+    m.value = a.value.length === d.value.filter((l) => !l.disabled).length, a.value = [...a.value], I();
+  }, $ = o.multiple ? P : z, q = (e) => e === a.value, F = (e) => a.value.includes(e), K = o.multiple ? F : q;
+  y(
+    () => a.value,
+    (e) => {
+      o.multiple && o.checkable && (e.length === 0 ? m.value = !1 : m.value = e.length === d.value.filter((l) => !l.disabled).length, n());
+    }
+  );
+  const L = () => {
+    t.value && (D(), n());
+  };
+  return G(() => {
+    window.addEventListener("resize", L);
+  }), J(() => {
+    window.removeEventListener("resize", L);
+  }), {
+    select: M,
+    selectWrapper: p,
+    dropbox: h,
+    itemWrapper: s,
+    isDropbox: t,
+    dropboxPosition: W,
+    filterTextRef: r,
+    filteredItems: d,
+    clickSelectInput: H,
+    clickOutsideDropbox: B,
+    changeFilterText: S,
+    changeDropboxPosition: n,
+    clickItem: $,
+    selectedItemClass: K,
+    allCheck: m,
+    changeAllCheck: O,
+    dropboxWidth: w
+  };
+};
+export {
+  te as useDropdown,
+  le as useModel
+};