evui 3.5.0-rc.1 → 3.5.0

package/dist/components/messageBox/MessageBox.vue.js

@@ -0,0 +1,216 @@
+import { resolveComponent as B, openBlock as a, createBlock as d, Teleport as x, createVNode as k, Transition as b, withCtx as v, withDirectives as _, createElementVNode as c, withModifiers as C, normalizeClass as y, createElementBlock as i, createCommentVNode as u, toDisplayString as m, createTextVNode as w, vShow as M, ref as S, reactive as T, onMounted as E, watch as L, onBeforeUnmount as F, toRefs as N } from "vue";
+import H from "../button/Button.vue.js";
+/* empty css                */
+import V from "../../_virtual/_plugin-vue_export-helper.js";
+const z = {
+  name: "EvMessageBox",
+  components: {
+    EvButton: H
+  },
+  props: {
+    type: {
+      type: String,
+      default: "",
+      validator: (t) => ["", "info", "success", "warning", "error"].includes(t)
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    message: {
+      type: [String, Array],
+      default: ""
+    },
+    iconClass: {
+      type: String,
+      default: ""
+    },
+    onClose: {
+      type: Function,
+      default: null
+    },
+    showClose: {
+      type: Boolean,
+      default: !0
+    },
+    showConfirmBtn: {
+      type: Boolean,
+      default: !0
+    },
+    showCancelBtn: {
+      type: Boolean,
+      default: !0
+    },
+    confirmBtnText: {
+      type: String,
+      default: "OK"
+    },
+    cancelBtnText: {
+      type: String,
+      default: "Cancel"
+    },
+    closeOnClickModal: {
+      type: Boolean,
+      default: !0
+    },
+    useHTML: {
+      type: Boolean,
+      default: !1
+    },
+    unmount: {
+      type: Function,
+      default: null
+    },
+    focusable: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(t) {
+    const n = S(null), e = T({
+      isShow: !0,
+      iconClass: ""
+    }), s = (o) => {
+      if (!t.closeOnClickModal && o === "modal")
+        return;
+      const h = o === "modal" ? "cancel" : o;
+      e.isShow = !1, t.onClose && t.onClose(h), t.unmount && setTimeout(t.unmount, 1e3);
+    }, r = (o) => {
+      o.keyCode === 27 && e.isShow && s();
+    }, g = (o) => {
+      switch (o) {
+        case "success":
+          return "ev-icon-arrow-check";
+        case "warning":
+          return "ev-icon-warning2";
+        case "error":
+          return "ev-icon-warning3";
+        case "info":
+        default:
+          return "ev-icon-info2";
+      }
+    }, f = () => {
+      t.iconClass ? e.iconClass = t.iconClass : t.type && (e.iconClass = g(t.type));
+    }, l = (o) => {
+      if (!t.focusable) return !1;
+      switch (o) {
+        case "confirmBtn":
+          return t.showConfirmBtn;
+        case "cancelBtn":
+          return !t.showConfirmBtn && t.showCancelBtn;
+        case "messagebox":
+          return !t.showConfirmBtn && !t.showCancelBtn;
+        default:
+          return !1;
+      }
+    };
+    return E(() => {
+      f(), document.addEventListener("keydown", r), l("messagebox") && n.value.focus();
+    }), L(
+      () => e.isShow,
+      (o) => {
+        o || document.removeEventListener("keydown", r);
+      }
+    ), F(() => {
+      document.removeEventListener("keydown", r);
+    }), {
+      closeMsg: s,
+      ...N(e),
+      msgRef: n,
+      hasFocus: l
+    };
+  }
+}, O = {
+  key: 0,
+  class: "ev-message-box-icon"
+}, R = { class: "ev-message-box-content" }, D = {
+  key: 0,
+  class: "ev-message-box-title"
+}, A = ["innerHTML"], I = {
+  key: 2,
+  class: "ev-message-box-message"
+}, K = { class: "ev-message-box-btn" };
+function U(t, n, e, s, r, g) {
+  const f = B("ev-button");
+  return a(), d(x, { to: "body" }, [
+    k(b, {
+      name: "ev-message-box-fade",
+      appear: ""
+    }, {
+      default: v(() => [
+        _(c("div", {
+          id: "ev-message-box-modal",
+          onClick: n[3] || (n[3] = C((l) => s.closeMsg("modal"), ["self"])),
+          onWheel: C(() => {
+          }, ["stop", "prevent"])
+        }, [
+          c("div", {
+            ref: "msgRef",
+            class: y(["ev-message-box", {
+              [`type-${e.type}`]: !!e.type,
+              "show-close": e.showClose,
+              "has-icon": !!e.iconClass,
+              "has-title": !!e.title
+            }]),
+            tabindex: "-1"
+          }, [
+            e.iconClass ? (a(), i("span", O, [
+              c("i", {
+                class: y(e.iconClass)
+              }, null, 2)
+            ])) : u("", !0),
+            c("div", R, [
+              e.title ? (a(), i("p", D, m(e.title), 1)) : u("", !0),
+              e.useHTML ? (a(), i("p", {
+                key: 1,
+                class: "ev-message-box-message",
+                innerHTML: e.message
+              }, null, 8, A)) : (a(), i("p", I, m(e.message), 1))
+            ]),
+            c("div", K, [
+              e.showCancelBtn ? (a(), d(f, {
+                key: 0,
+                size: "small",
+                class: "ev-message-box-cancel",
+                "auto-focus": s.hasFocus("cancelBtn"),
+                onClick: n[0] || (n[0] = (l) => s.closeMsg("cancel"))
+              }, {
+                default: v(() => [
+                  w(m(e.cancelBtnText), 1)
+                ]),
+                _: 1
+              }, 8, ["auto-focus"])) : u("", !0),
+              e.showConfirmBtn ? (a(), d(f, {
+                key: 1,
+                type: "primary",
+                size: "small",
+                class: "ev-message-box-confirm",
+                "auto-focus": s.hasFocus("confirmBtn"),
+                onClick: n[1] || (n[1] = (l) => s.closeMsg("ok"))
+              }, {
+                default: v(() => [
+                  w(m(e.confirmBtnText), 1)
+                ]),
+                _: 1
+              }, 8, ["auto-focus"])) : u("", !0)
+            ]),
+            e.showClose ? (a(), i("span", {
+              key: 1,
+              class: "ev-message-box-close",
+              onClick: n[2] || (n[2] = (l) => s.closeMsg("cancel"))
+            }, [...n[4] || (n[4] = [
+              c("i", { class: "ev-icon-close" }, null, -1)
+            ])])) : u("", !0)
+          ], 2)
+        ], 544), [
+          [M, t.isShow]
+        ])
+      ]),
+      _: 1
+    })
+  ]);
+}
+const J = /* @__PURE__ */ V(z, [["render", U]]);
+export {
+  J as default
+};

package/dist/components/messageBox/index.js

@@ -0,0 +1,13 @@
+import { defineComponent as r, h as a, render as t } from "vue";
+import l from "./MessageBox.vue.js";
+const i = r(l), s = (n = {}) => {
+  const e = document.createElement("div"), o = () => t(null, e), m = typeof n == "string" ? { message: n, unmount: o } : { ...n, unmount: o }, c = a(i, m);
+  t(c, e);
+};
+s.install = (n) => {
+  const e = n.config.globalProperties;
+  e.$messagebox = s;
+};
+export {
+  s as default
+};

package/dist/components/notification/Notification.vue.js

@@ -0,0 +1,140 @@
+import { openBlock as s, createBlock as y, Transition as g, withCtx as k, withDirectives as C, createElementVNode as c, normalizeClass as d, createElementBlock as l, createCommentVNode as m, toDisplayString as f, vShow as v, reactive as w, onMounted as T, onBeforeUnmount as h, toRefs as M } from "vue";
+/* empty css                  */
+import S from "../../_virtual/_plugin-vue_export-helper.js";
+const _ = {
+  name: "EvNotification",
+  props: {
+    type: {
+      type: String,
+      default: "info",
+      validator: (n) => ["info", "success", "warning", "error"].includes(n)
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    message: {
+      type: String,
+      default: ""
+    },
+    position: {
+      type: String,
+      default: "top-right",
+      validator: (n) => ["top-left", "top-right", "bottom-left", "bottom-right"].includes(n)
+    },
+    duration: {
+      type: Number,
+      default: 3e3
+    },
+    showClose: {
+      type: Boolean,
+      default: !0
+    },
+    iconClass: {
+      type: String,
+      default: ""
+    },
+    onClose: {
+      type: Function,
+      default: null
+    },
+    onClick: {
+      type: Function,
+      default: null
+    },
+    useHTML: {
+      type: Boolean,
+      default: !1
+    },
+    unmount: {
+      type: Function,
+      default: null
+    }
+  },
+  setup(n) {
+    const e = w({
+      timer: null,
+      isShow: !0
+    }), t = () => {
+      clearTimeout(e.timer), e.timer = null;
+    }, o = (u) => {
+      u.target.className !== "ev-notification-close" && n.onClick && n.onClick();
+    }, a = () => {
+      e.isShow = !1, n.onClose && n.onClose(), t(), n.unmount && setTimeout(n.unmount, 1e3);
+    }, r = () => {
+      n.duration > 0 && (e.timer = setTimeout(() => {
+        e.isShow && a();
+      }, n.duration));
+    }, i = (u) => {
+      u.keyCode === 27 && e.isShow && a();
+    };
+    return T(() => {
+      r(), document.addEventListener("keydown", i);
+    }), h(() => {
+      document.removeEventListener("keydown", i), t();
+    }), {
+      startTimer: r,
+      clearTimer: t,
+      clickMsg: o,
+      closeMsg: a,
+      ...M(e)
+    };
+  }
+}, B = {
+  key: 0,
+  class: "ev-notification-icon"
+}, L = { class: "ev-notification-content" }, E = {
+  key: 0,
+  class: "title"
+}, N = ["innerHTML"], H = {
+  key: 2,
+  class: "message"
+};
+function b(n, e, t, o, a, r) {
+  return s(), y(g, {
+    name: "ev-notification-fade",
+    appear: ""
+  }, {
+    default: k(() => [
+      C(c("div", {
+        class: d(["ev-notification", {
+          [`type-${t.type}`]: !!t.type,
+          "show-close": t.showClose,
+          "has-icon": !!t.iconClass,
+          "has-click": !!t.onClick
+        }]),
+        onMouseenter: e[1] || (e[1] = (...i) => o.clearTimer && o.clearTimer(...i)),
+        onMouseleave: e[2] || (e[2] = (...i) => o.startTimer && o.startTimer(...i)),
+        onClick: e[3] || (e[3] = (...i) => o.clickMsg && o.clickMsg(...i))
+      }, [
+        t.iconClass ? (s(), l("span", B, [
+          c("i", {
+            class: d(t.iconClass)
+          }, null, 2)
+        ])) : m("", !0),
+        c("div", L, [
+          t.title ? (s(), l("p", E, f(t.title), 1)) : m("", !0),
+          t.useHTML ? (s(), l("p", {
+            key: 1,
+            class: "message",
+            innerHTML: t.message
+          }, null, 8, N)) : (s(), l("p", H, f(t.message), 1))
+        ]),
+        t.showClose ? (s(), l("span", {
+          key: 1,
+          class: "ev-notification-close",
+          onClick: e[0] || (e[0] = (...i) => o.closeMsg && o.closeMsg(...i))
+        }, [...e[4] || (e[4] = [
+          c("i", { class: "ev-icon-close" }, null, -1)
+        ])])) : m("", !0)
+      ], 34), [
+        [v, n.isShow]
+      ])
+    ]),
+    _: 1
+  });
+}
+const V = /* @__PURE__ */ S(_, [["render", b]]);
+export {
+  V as default
+};

package/dist/components/notification/index.js

@@ -0,0 +1,23 @@
+import { defineComponent as r, h as p, render as c } from "vue";
+import f from "./Notification.vue.js";
+const h = r(f), d = "ev-notification-modal", n = document.createElement("div");
+n.id = d;
+const g = ["top-left", "top-right", "bottom-left", "bottom-right"], a = (o = {}) => {
+  const e = o.position || "top-right";
+  if (!g.includes(e)) {
+    console.warn("[EVUI][Notification] The position value is incorrectly entered.");
+    return;
+  }
+  document.getElementById(d) || document.body.appendChild(n);
+  let t = n.getElementsByClassName(`modal-${e}`);
+  t.length ? t = t[0] : (t = document.createElement("div"), t.classList.add(`modal-${e}`), n.appendChild(t));
+  const i = document.createElement("div"), s = () => c(null, i), m = typeof o == "string" ? { message: o, unmount: s } : { ...o, unmount: s }, l = p(h, m);
+  c(l, i), t.appendChild(l.el);
+};
+a.install = (o) => {
+  const e = o.config.globalProperties;
+  e.$notify = a;
+};
+export {
+  a as default
+};

package/dist/components/pagination/Pagination.vue.js

@@ -0,0 +1,215 @@
+import { resolveComponent as w, openBlock as r, createElementBlock as c, Fragment as k, createTextVNode as E, toDisplayString as _, createCommentVNode as V, createElementVNode as C, normalizeStyle as j, normalizeClass as y, createVNode as g, withCtx as N, renderList as F, computed as u, watch as B, nextTick as q } from "vue";
+import A from "../icon/Icon.vue.js";
+import G from "./pageButton.vue.js";
+/* empty css                */
+import H from "../../_virtual/_plugin-vue_export-helper.js";
+const K = {
+  name: "EvPagination",
+  components: {
+    EvIcon: A,
+    pageButton: G
+  },
+  props: {
+    total: {
+      type: [Number, String],
+      default: 0
+    },
+    visiblePage: {
+      type: [Number, String],
+      default: 8
+    },
+    perPage: {
+      type: [Number, String],
+      default: 20
+    },
+    modelValue: {
+      type: [Number, String],
+      default: 1
+    },
+    showPageInfo: {
+      type: Boolean,
+      default: !1
+    },
+    order: {
+      type: String,
+      default: "left",
+      validator: (n) => ["left", "right", "center"].includes(n)
+    },
+    pagePerJump: {
+      type: [Number, void 0],
+      default: void 0
+    }
+  },
+  emits: {
+    "update:modelValue": null,
+    change: null
+  },
+  setup(n, { emit: P }) {
+    const d = u(() => n.visiblePage > 7 ? n.visiblePage : 7), e = u(() => n.modelValue), t = u(
+      () => n.total === 0 ? 1 : Math.ceil(n.total / n.perPage)
+    ), M = u(() => e.value > 1), m = u(() => e.value < t.value), v = u(() => Math.max(e.value - n.pagePerJump, 1)), b = u(
+      () => Math.min(e.value + n.pagePerJump, t.value)
+    ), I = u(() => {
+      const a = e.value * n.perPage - n.perPage + 1;
+      return a >= 0 ? a : 0;
+    }), h = (a, l) => {
+      e.value === a || a < 1 || a > t.value || (P("update:modelValue", a), P("change", a), l && l.target && q(() => l.target.focus()));
+    }, i = (a, l = {}) => ({
+      number: a,
+      isCurrent: l.isCurrent ?? e.value === a,
+      click: (o) => h(a, o),
+      input: (o, s) => h(+s, o),
+      disabled: l.disabled || !1,
+      class: l.class || ""
+    }), p = (a, l) => {
+      const o = [], s = a > 0 ? a : 1;
+      for (let f = s; f <= l; f++)
+        o.push(i(f));
+      return o;
+    }, D = u(() => {
+      const a = parseInt(d.value, 10);
+      if (a === 0)
+        return [];
+      const l = Math.min(Math.max(0, a) || t.value, t.value);
+      if (t.value <= l)
+        return p(1, t.value);
+      const o = l % 2 === 0 ? 1 : 0, s = Math.floor(l / 2), f = t.value - s + 1 + o;
+      if (e.value > s && e.value < f) {
+        const R = t.value, S = e.value - s + 2, J = e.value + s - 2 - o, z = S - 1 === 2 ? 2 : -1, T = J + 1 === R - 1 ? J + 1 : -1;
+        return [
+          i(1),
+          i(z),
+          ...p(S, J),
+          i(T),
+          i(t.value)
+        ];
+      } else if (e.value === s) {
+        const x = e.value + s - 1 - o;
+        return [...p(1, x), i(-1), i(t.value)];
+      } else if (e.value === f) {
+        const x = e.value - s + 1;
+        return [i(1), i(-1), ...p(x, t.value)];
+      }
+      return [...p(1, s), i(-1), ...p(f, t.value)];
+    }), L = u(() => ({ "justify-content": n.order, flex: "3 1 0%" }));
+    return B(
+      () => t.value,
+      (a) => {
+        e.value > a && h(a);
+      }
+    ), B(
+      () => e.value,
+      (a, l) => {
+        t.value < a && h(l);
+      }
+    ), {
+      pageCount: t,
+      pagesInRange: D,
+      hasPrev: M,
+      hasNext: m,
+      listClasses: L,
+      firstData: I,
+      current: e,
+      changePage: h,
+      getPage: i,
+      prevJumpPage: v,
+      nextJumpPage: b
+    };
+  }
+}, O = { class: "pagination" }, Q = {
+  key: 0,
+  class: "pagination-info"
+}, U = {
+  key: 0,
+  class: "pagination-ellipsis"
+}, W = ["onClick"];
+function X(n, P, d, e, t, M) {
+  const m = w("ev-icon"), v = w("page-button");
+  return r(), c("nav", O, [
+    d.showPageInfo ? (r(), c("small", Q, [
+      d.perPage === 1 ? (r(), c(k, { key: 0 }, [
+        E(_(e.firstData) + " / " + _(d.total), 1)
+      ], 64)) : (r(), c(k, { key: 1 }, [
+        E(_(e.firstData) + " - " + _(Math.min(e.current * d.perPage, d.total)) + " / " + _(d.total), 1)
+      ], 64))
+    ])) : V("", !0),
+    C("ul", {
+      class: "pagination-list",
+      style: j(e.listClasses)
+    }, [
+      n.$props.pagePerJump ? (r(), c("li", {
+        key: 0,
+        class: y(["step-button", { "is-disabled": !e.hasPrev }])
+      }, [
+        g(v, {
+          class: "pagination-previous",
+          disabled: !e.hasPrev,
+          page: e.getPage(e.prevJumpPage, { isCurrent: !1 })
+        }, {
+          default: N(() => [
+            g(m, { icon: "ev-icon-s-double-left" })
+          ]),
+          _: 1
+        }, 8, ["disabled", "page"])
+      ], 2)) : V("", !0),
+      C("li", {
+        class: y(["step-button", { "is-disabled": !e.hasPrev }])
+      }, [
+        g(v, {
+          class: "pagination-previous",
+          disabled: !e.hasPrev,
+          page: e.getPage(e.current - 1)
+        }, {
+          default: N(() => [
+            g(m, { icon: "ev-icon-s-arrow-left" })
+          ]),
+          _: 1
+        }, 8, ["disabled", "page"])
+      ], 2),
+      (r(!0), c(k, null, F(e.pagesInRange, (b, I) => (r(), c(k, { key: I }, [
+        b.number === -1 ? (r(), c("li", U, [...P[0] || (P[0] = [
+          C("span", null, "…", -1)
+        ])])) : (r(), c("li", {
+          key: 1,
+          class: y({ "is-current": b.isCurrent, "is-page": !0 }),
+          onClick: b.click
+        }, [
+          g(v, { page: b }, null, 8, ["page"])
+        ], 10, W))
+      ], 64))), 128)),
+      C("li", {
+        class: y(["step-button", { "is-disabled": !e.hasNext }])
+      }, [
+        g(v, {
+          class: "pagination-next",
+          disabled: !e.hasNext,
+          page: e.getPage(e.current + 1)
+        }, {
+          default: N(() => [
+            g(m, { icon: "ev-icon-s-arrow-right" })
+          ]),
+          _: 1
+        }, 8, ["disabled", "page"])
+      ], 2),
+      n.$props.pagePerJump ? (r(), c("li", {
+        key: 1,
+        class: y(["step-button", { "is-disabled": !e.hasNext }])
+      }, [
+        g(v, {
+          class: "pagination-previous",
+          disabled: !e.hasNext,
+          page: e.getPage(e.nextJumpPage, { isCurrent: !1 })
+        }, {
+          default: N(() => [
+            g(m, { icon: "ev-icon-s-double-right" })
+          ]),
+          _: 1
+        }, 8, ["disabled", "page"])
+      ], 2)) : V("", !0)
+    ], 4)
+  ]);
+}
+const te = /* @__PURE__ */ H(K, [["render", X]]);
+export {
+  te as default
+};

package/dist/components/pagination/index.js

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

package/dist/components/pagination/pageButton.vue.js

@@ -0,0 +1,35 @@
+import { openBlock as n, createElementBlock as i, mergeProps as s, withModifiers as o, renderSlot as l, createTextVNode as c, toDisplayString as d } from "vue";
+import u from "../../_virtual/_plugin-vue_export-helper.js";
+const g = {
+  name: "PageButton",
+  props: {
+    page: {
+      type: Object,
+      required: !0
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  }
+}, f = ["aria-current"];
+function p(t, a, e, m, b, _) {
+  return n(), i("span", s({
+    class: {
+      "is-current": e.page.isCurrent,
+      "is-disabled": e.disabled || e.page.disabled,
+      [e.page.class]: !0
+    }
+  }, t.$attrs, {
+    "aria-current": e.page.isCurrent,
+    onClick: a[0] || (a[0] = o((...r) => e.page.click && e.page.click(...r), ["stop"]))
+  }), [
+    l(t.$slots, "default", {}, () => [
+      c(d(e.page.number), 1)
+    ])
+  ], 16, f);
+}
+const y = /* @__PURE__ */ u(g, [["render", p]]);
+export {
+  y as default
+};