evui 3.5.0-rc.1 → 3.5.0

package/dist/components/window/Window.vue.js

@@ -0,0 +1,211 @@
+import { useModel as g, useMouseEvent as S, useEscCloseAndFocusable as B } from "./uses.js";
+import { openBlock as s, createBlock as C, Teleport as h, createVNode as M, Transition as E, withCtx as z, createElementBlock as i, normalizeClass as r, withModifiers as W, createCommentVNode as a, createElementVNode as d, normalizeStyle as p, renderSlot as c, Fragment as x, toDisplayString as N } from "vue";
+/* empty css            */
+import F from "../../_virtual/_plugin-vue_export-helper.js";
+const D = {
+  name: "EvWindow",
+  props: {
+    style: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    visible: {
+      type: Boolean,
+      default: !1
+    },
+    title: {
+      type: [String, Number],
+      default: null
+    },
+    windowClass: {
+      type: String,
+      default: ""
+    },
+    iconClass: {
+      type: String,
+      default: ""
+    },
+    width: {
+      type: [String, Number],
+      default: "50vw"
+    },
+    height: {
+      type: [String, Number],
+      default: "50vh"
+    },
+    minWidth: {
+      type: [String, Number],
+      default: 150
+    },
+    minHeight: {
+      type: [String, Number],
+      default: 150
+    },
+    fullscreen: {
+      type: Boolean,
+      default: !1
+    },
+    isModal: {
+      type: Boolean,
+      default: !0
+    },
+    closeOnClickModal: {
+      type: Boolean,
+      default: !1
+    },
+    hideScroll: {
+      type: Boolean,
+      default: !0
+    },
+    draggable: {
+      type: Boolean,
+      default: !1
+    },
+    resizable: {
+      type: Boolean,
+      default: !1
+    },
+    maximizable: {
+      type: Boolean,
+      default: !1
+    },
+    escClose: {
+      type: Boolean,
+      default: !1
+    },
+    focusable: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "update:visible",
+    "mousedown",
+    "mousedown-mouseup",
+    "mousedown-mousemove",
+    "resize",
+    "expand"
+  ],
+  setup() {
+    const {
+      windowRef: n,
+      headerRef: e,
+      isFullExpandWindow: l,
+      maximizableIcon: o,
+      baseStyle: f,
+      closeWin: u,
+      numberToUnit: t,
+      removeUnit: m
+    } = g(), { dragStyle: w, startDrag: v, moveMouse: y, clickExpandBtn: b } = S({
+      windowRef: n,
+      headerRef: e,
+      isFullExpandWindow: l,
+      numberToUnit: t,
+      removeUnit: m
+    }), { setFocus: k } = B({ closeWin: u, windowRef: n });
+    return {
+      windowRef: n,
+      headerRef: e,
+      baseStyle: f,
+      dragStyle: w,
+      maximizableIcon: o,
+      closeWin: u,
+      startDrag: v,
+      moveMouse: y,
+      clickExpandBtn: b,
+      setFocus: k
+    };
+  }
+}, R = {
+  key: 0,
+  ref: "headerRef",
+  class: "ev-window-header"
+}, T = {
+  key: 0,
+  class: "ev-window-icon"
+}, V = {
+  key: 1,
+  class: "ev-window-title"
+}, I = { class: "ev-window-content" }, O = {
+  key: 1,
+  class: "ev-window-footer"
+}, U = { class: "ev-window-top-right-icon" };
+function j(n, e, l, o, f, u) {
+  return s(), C(h, { to: "#ev-window-modal" }, [
+    M(E, {
+      name: "ev-window-fade",
+      appear: ""
+    }, {
+      default: z(() => [
+        l.visible ? (s(), i("div", {
+          key: 0,
+          class: r([
+            "ev-window-wrapper",
+            { "scroll-lock": l.hideScroll },
+            { "scroll-allow": !l.hideScroll && !l.isModal }
+          ])
+        }, [
+          l.isModal ? (s(), i("div", {
+            key: 0,
+            class: "ev-window-dim-layer",
+            onClick: e[0] || (e[0] = (t) => o.closeWin("layer")),
+            onWheel: W(() => {
+            }, ["stop", "prevent"])
+          }, null, 32)) : a("", !0),
+          d("div", {
+            ref: "windowRef",
+            class: r(["ev-window", l.windowClass, { fullscreen: !!l.fullscreen }]),
+            style: p({
+              ...o.baseStyle,
+              ...o.dragStyle
+            }),
+            onMousedown: e[3] || (e[3] = (...t) => o.startDrag && o.startDrag(...t)),
+            onMousemove: e[4] || (e[4] = (...t) => o.moveMouse && o.moveMouse(...t)),
+            onClick: e[5] || (e[5] = (...t) => o.setFocus && o.setFocus(...t))
+          }, [
+            n.$slots.header || l.iconClass || l.title ? (s(), i("div", R, [
+              n.$slots.header ? c(n.$slots, "header", { key: 0 }) : (s(), i(x, { key: 1 }, [
+                l.iconClass ? (s(), i("span", T, [
+                  d("i", {
+                    class: r(l.iconClass)
+                  }, null, 2)
+                ])) : a("", !0),
+                l.title ? (s(), i("p", V, N(l.title), 1)) : a("", !0)
+              ], 64))
+            ], 512)) : a("", !0),
+            d("div", I, [
+              c(n.$slots, "default")
+            ]),
+            n.$slots.footer ? (s(), i("div", O, [
+              c(n.$slots, "footer")
+            ])) : a("", !0),
+            d("div", U, [
+              l.maximizable && !l.fullscreen ? (s(), i("span", {
+                key: 0,
+                class: "ev-window-maximizable",
+                onClick: e[1] || (e[1] = (...t) => o.clickExpandBtn && o.clickExpandBtn(...t))
+              }, [
+                d("i", {
+                  class: r(o.maximizableIcon)
+                }, null, 2)
+              ])) : a("", !0),
+              d("span", {
+                class: "ev-window-close",
+                onClick: e[2] || (e[2] = (...t) => o.closeWin && o.closeWin(...t))
+              }, [...e[6] || (e[6] = [
+                d("i", { class: "ev-icon-close" }, null, -1)
+              ])])
+            ])
+          ], 38)
+        ], 2)) : a("", !0)
+      ]),
+      _: 3
+    })
+  ]);
+}
+const G = /* @__PURE__ */ F(D, [["render", j]]);
+export {
+  G as default
+};

package/dist/components/window/index.js

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

package/dist/components/window/uses.js

@@ -0,0 +1,345 @@
+import { getCurrentInstance as G, ref as $, computed as K, reactive as C, watch as Z, nextTick as _, onMounted as ne, onBeforeUnmount as ie } from "vue";
+const oe = () => window.innerWidth - document.documentElement.clientWidth, re = () => {
+  const { props: c, emit: o } = G(), s = $(), n = $(), T = $(!1), y = K(
+    () => T.value ? "ev-icon-compress" : "ev-icon-expand"
+  );
+  let I = document.getElementById("ev-window-modal");
+  (() => {
+    if (!I) {
+      const u = document.createElement("div");
+      u.id = "ev-window-modal", document.body.appendChild(u), I = document.getElementById("ev-window-modal");
+    }
+  })();
+  const W = (u) => {
+    let i, h;
+    if (typeof u == "string" || typeof u == "number") {
+      const f = /^(normal|(-*\d+(?:\.\d+)?)(px|%|vw|vh)?)$/.exec(u);
+      i = f ? { value: +f[2], unit: f[3] || void 0 } : void 0;
+    } else
+      i = void 0;
+    return i == null ? h = void 0 : i.unit ? h = `${i.value}${i.unit}` : h = `${i.value}px`, h;
+  }, v = (u, i = "horizontal") => {
+    if (typeof u == "number")
+      return u;
+    if (!u)
+      return 0;
+    let h = 0;
+    const f = /^(normal|(\d+(?:\.\d+)?)(px|%|vw|vh)?)$/.exec(u);
+    if (i && ["%", "vw", "vh"].includes(f[3]) && f[2]) {
+      const z = i === "horizontal" ? window.innerWidth : window.innerHeight;
+      h = Math.floor(z * +f[2] / 100);
+    } else f[2] && (h = +f[2]);
+    return h;
+  }, l = C({}), t = K(() => ({
+    ...c.style,
+    ...l
+  })), S = () => {
+    if (l.position = "fixed", c.fullscreen) {
+      l.width = "100%", l.height = "100%", l.top = 0, l.left = 0;
+      return;
+    }
+    const u = v(c.width, "horizontal"), i = v(c.minWidth, "horizontal");
+    u < i ? (console.warn(
+      "[EVUI][Window] Since width is less than min-width, it is replaced by min-width."
+    ), l.width = W(c.minWidth)) : l.width = W(c.width);
+    const h = v(c.height, "vertical"), f = v(c.minHeight, "vertical");
+    h < f ? (console.warn(
+      "[EVUI][Window] Since height is less than min-height, it is replaced by min-height."
+    ), l.height = W(c.minHeight)) : l.height = W(c.height), l.top = `calc((100% - ${l.height}) / 2)`, l.left = `calc((100% - ${l.width}) / 2)`, v(c.width, "horizontal") > window.innerWidth && (l.left = 0), v(c.height, "vertical") > window.innerHeight && (l.top = 0);
+  }, x = (u) => {
+    u === "layer" && !c.closeOnClickModal || o("update:visible", !1);
+  }, a = (u) => {
+    var f;
+    const i = (f = I == null ? void 0 : I.getElementsByClassName("scroll-lock")) == null ? void 0 : f.length, h = document.body;
+    if (u) {
+      if (c.hideScroll) {
+        if (!i) {
+          const z = oe();
+          h.style.paddingRight = `${z}px`;
+        }
+        h.classList.add("ev-window-scroll-lock");
+      }
+    } else c.hideScroll && i === 1 && (h.style.removeProperty("padding-right"), h.classList.remove("ev-window-scroll-lock"));
+  };
+  return S(), Z(
+    () => c.visible,
+    async (u) => {
+      a(u), u && await _(() => {
+        S();
+      });
+    }
+  ), {
+    windowRef: s,
+    headerRef: n,
+    isFullExpandWindow: T,
+    maximizableIcon: y,
+    baseStyle: t,
+    closeWin: x,
+    numberToUnit: W,
+    removeUnit: v
+  };
+}, ce = (c) => {
+  const { props: o, emit: s } = G(), { windowRef: n, headerRef: T, isFullExpandWindow: y, numberToUnit: I, removeUnit: E } = c, W = 50, v = 5, l = C({}), t = C({
+    state: "",
+    pressedSpot: "",
+    top: 0,
+    left: 0,
+    width: 0,
+    height: 0,
+    clientX: 0,
+    clientY: 0
+  }), S = C({
+    top: 0,
+    left: 0
+  }), x = C({
+    top: !1,
+    right: !1,
+    left: !1,
+    bottom: !1
+  }), a = C({
+    width: null,
+    height: null,
+    top: null,
+    left: null
+  }), u = (e, d) => {
+    if (e == null || d == null)
+      return !1;
+    const r = n.value.getBoundingClientRect(), w = +e - r.left, p = +d - r.top, g = T.value.style, m = {
+      top: E(g.paddingTop, "vertical"),
+      left: E(g.paddingLeft, "horizontal"),
+      right: E(g.paddingRight, "horizontal")
+    }, b = m.left, L = r.width - m.right, U = m.top, H = U + T.value.offsetHeight;
+    return w > b && w < L && p > U && p < H;
+  }, i = (e) => {
+    if (e === null || typeof e != "object")
+      return;
+    let d, r, w, p, g, m;
+    const b = n.value, L = Object.prototype.hasOwnProperty;
+    L.call(e, "top") ? d = e.top : d = t.top, L.call(e, "left") ? r = e.left : r = t.left, L.call(e, "width") ? w = e.width : w = b.offsetWidth, L.call(e, "height") ? p = e.height : p = b.offsetHeight, L.call(e, "minWidth") ? g = e.minWidth : g = o.minWidth, L.call(e, "minHeight") ? m = e.minHeight : m = o.minHeight, w = E(w, "horizontal") > E(g, "horizontal") ? w : g, p = E(p, "vertical") > E(m, "vertical") ? p : m, l.top = I(d), l.left = I(r), l.width = I(w), l.height = I(p), l.minWidth = I(g), l.minHeight = I(m);
+  }, h = (e) => {
+    if (!(!n.value || t.pressedSpot))
+      if (o.resizable) {
+        const d = n.value.getBoundingClientRect(), r = e.clientX - d.left, w = e.clientY - d.top, p = w < v, g = r < v, m = r >= d.width - v, b = w >= d.height - v;
+        p && g || b && m ? n.value.style.cursor = "nwse-resize" : p && m || b && g ? n.value.style.cursor = "nesw-resize" : m || g ? n.value.style.cursor = "ew-resize" : b || p ? n.value.style.cursor = "ns-resize" : o.draggable && u(e.clientX, e.clientY) ? n.value.style.cursor = "move" : n.value.style.cursor = "default";
+      } else o.draggable && u(e.clientX, e.clientY) ? n.value.style.cursor = "move" : n.value.style.cursor = "default";
+  }, f = (e) => {
+    const d = window.innerWidth, r = window.innerHeight, w = x.top, p = x.left, g = x.right, m = x.bottom, b = E(o.minWidth, "horizontal"), L = E(o.minHeight, "vertical"), U = e.clientX >= d ? d : e.clientX;
+    let H = e.clientY >= r ? r : e.clientY;
+    H = e.clientY > 0 ? H : 0;
+    const D = U - t.clientX, k = H - t.clientY;
+    let Y = t.top, X = t.left, B = t.width, A = t.height;
+    const V = Y + t.height - L, O = X + t.width - b;
+    w && (Y = t.top + k, A = t.height - k, Y > V && (Y = V)), p && (X = t.left + D, B = t.width - D, X > O && (X = O)), g && (B = t.width + D), m && (A = t.height + k), B = Math.min(Math.max(B, b), d), A = Math.min(Math.max(A, L), r);
+    const J = { top: Y, left: X, width: B, height: A };
+    i(J), s("resize", e, { ...J });
+  }, z = (e, d) => {
+    let r = d;
+    return r < 0 ? r = 0 : r > e - W && (r = Math.floor(e - W)), r;
+  }, R = (e, d) => {
+    let r = d;
+    return r < -(t.width - W) ? r = -Math.floor(t.width - W) : r > e - W && (r = Math.floor(e - W)), r;
+  }, N = (e) => {
+    if (e.preventDefault(), t.state = "mousedown-mousemove", o.draggable && t.pressedSpot === "header") {
+      const d = document.documentElement.clientWidth, r = document.documentElement.clientHeight, w = e.clientY - t.clientY, p = e.clientX - t.clientX;
+      let g = t.top + w, m = t.left + p;
+      g = z(r, g), m = R(d, m), i({
+        top: `${g}px`,
+        left: `${m}px`,
+        width: l.width ?? o.width,
+        height: l.height ?? o.height
+      });
+    } else o.resizable && t.pressedSpot === "border" && f(e);
+    s("mousedown-mousemove", e);
+  }, q = (e) => {
+    t.state = "", t.pressedSpot = "", s("mousedown-mouseup", e), window.removeEventListener("mousemove", N), window.removeEventListener("mouseup", q);
+  }, Q = (e) => {
+    if (!n.value || !o.resizable && !o.draggable)
+      return;
+    let d = "";
+    if (o.resizable) {
+      const r = n.value.getBoundingClientRect(), w = e.clientX - r.left, p = e.clientY - r.top, g = p < v, m = w < v, b = w >= r.width - v, L = p >= r.height - v;
+      x.top = g, x.left = m, x.right = b, x.bottom = L, (g || m || b || L) && (d = "border");
+    }
+    if (d !== "border" && u(e.clientX, e.clientY) && (d = "header"), !d || !o.draggable && d === "header" || !o.resizable && d === "border") {
+      t.state = "mousedown", t.pressedSpot = "", t.top = n.value.offsetTop, t.left = n.value.offsetLeft, t.width = n.value.offsetWidth, t.height = n.value.offsetHeight, t.clientX = e.clientX, t.clientY = e.clientY, s("mousedown", { ...t, ref: n.value });
+      return;
+    }
+    t.state = "mousedown", t.pressedSpot = d, t.top = n.value.offsetTop, t.left = n.value.offsetLeft, t.width = n.value.offsetWidth, t.height = n.value.offsetHeight, t.clientX = e.clientX, t.clientY = e.clientY, s("mousedown", { ...t, ref: n.value }), window.addEventListener("mousemove", N), window.addEventListener("mouseup", q);
+  }, j = (e) => {
+    !o.draggable && !o.resizable || h(e);
+  }, ee = () => {
+    y.value = !y.value, _(() => {
+      y.value ? (a.top = n.value.offsetTop, a.left = n.value.offsetLeft, a.width = n.value.offsetWidth, a.height = n.value.offsetHeight, i({
+        top: 0,
+        left: 0,
+        width: document.body.clientWidth,
+        height: document.body.clientHeight
+      })) : i({
+        top: a.top,
+        left: a.left,
+        width: a.width,
+        height: a.height
+      }), s("expand", {
+        top: a.top,
+        left: a.left,
+        width: a.width,
+        height: a.height
+      });
+    });
+  }, te = () => {
+    y.value = !1, t.state = "", t.pressedSpot = "", t.top = 0, t.left = 0, t.width = 0, t.height = 0, t.clientX = 0, t.clientY = 0, S.top = 0, S.left = 0, x.top = !1, x.left = !1, x.right = !1, x.bottom = !1, a.top = null, a.left = null, a.width = null, a.height = null, Object.keys(l).forEach((e) => {
+      delete l[e];
+    });
+  };
+  return Z(
+    () => o.visible,
+    (e) => {
+      e || te();
+    }
+  ), {
+    dragStyle: l,
+    startDrag: Q,
+    moveMouse: j,
+    clickExpandBtn: ee
+  };
+}, P = /* @__PURE__ */ (() => {
+  let c = [], o = 0;
+  return {
+    add(s) {
+      if (s != null)
+        return s.sequence = o++, c.push(s), s.sequence;
+    },
+    remove(s) {
+      s != null && (c = c.filter((n) => n.sequence !== s.sequence));
+    },
+    get windows() {
+      return c.slice();
+    },
+    getWindowBySequence(s) {
+      return c.find((n) => n.sequence === s);
+    },
+    isEmpty() {
+      return c.length <= 0;
+    },
+    isFirstWindowOpen() {
+      return o === 1;
+    }
+  };
+})(), M = /* @__PURE__ */ (() => {
+  let y = 700;
+  return {
+    getNext() {
+      return y >= 748 ? 748 : (y += 1, y);
+    },
+    getNextOverLimit() {
+      return 749;
+    },
+    getPrevFrom(I) {
+      const E = y - I * 1;
+      return E <= 700 ? 700 : E;
+    },
+    isUpperLimitClose() {
+      return y >= 748;
+    },
+    resetToLower() {
+      y = 700;
+    },
+    getAllocableCount() {
+      return Math.floor(48 / 1);
+    }
+  };
+})(), se = (c) => {
+  const o = window.getComputedStyle(c).getPropertyValue("z-index").trim();
+  return !o || isNaN(o) ? 700 : parseInt(o);
+}, F = () => {
+  const c = (s, n) => s.zIndex > n.zIndex ? 1 : s.zIndex < n.zIndex ? -1 : s.sequence > n.sequence ? 1 : -1;
+  return Array.prototype.map.call(P.windows, (s) => ({
+    ...s,
+    zIndex: se(s.elem)
+  })).sort(c);
+}, de = ({ closeWin: c, windowRef: o }) => {
+  const { props: s } = G();
+  let n = null, T = null;
+  const y = () => P.add({
+    sequence: n,
+    closeWin: c,
+    elem: o.value,
+    escClose: s.escClose
+  }), I = (i) => {
+    P.remove(i);
+  }, E = (i) => {
+    if (P.isEmpty()) return;
+    const { code: h } = i;
+    if (h !== "Escape") return;
+    const f = F(), z = f[f.length - 1];
+    z.escClose && z.closeWin();
+  }, W = () => {
+    n = y(), o.value.dataset.sequence = n, P.isFirstWindowOpen() && document.addEventListener("keydown", E);
+  }, v = () => {
+    const i = P.getWindowBySequence(n);
+    I(i);
+  }, l = ({ elem: i, zIndex: h }) => {
+    if (s.isModal) {
+      const f = i.parentElement.getElementsByClassName("ev-window-dim-layer")[0];
+      f.style.zIndex = h;
+    }
+    i.style.zIndex = h;
+  }, t = () => {
+    P.windows.length === 1 && M.resetToLower();
+    const i = M.getNext();
+    l({ elem: o.value, zIndex: i });
+  }, S = (i) => String(i.sequence) === o.value.dataset.sequence, x = () => {
+    const i = F();
+    if (P.windows.length > M.getAllocableCount()) {
+      const f = i.reverse();
+      let z = 0;
+      f.forEach((N) => {
+        if (S(N)) return;
+        const q = M.getPrevFrom(z++);
+        l({ elem: N.elem, zIndex: q });
+      });
+      const R = M.getNextOverLimit();
+      l({ elem: o.value, zIndex: R });
+    } else {
+      M.resetToLower(), i.forEach((z) => {
+        if (S(z)) return;
+        const R = M.getNext();
+        l({ elem: z.elem, zIndex: R });
+      });
+      const f = M.getNext();
+      l({ elem: o.value, zIndex: f });
+    }
+  }, a = () => {
+    M.isUpperLimitClose() ? x() : t();
+  }, u = () => {
+    if (!o.value || !s.focusable) return;
+    const i = F(), h = i[i.length - 1];
+    S(h) || a();
+  };
+  return ne(() => {
+    s.visible && (W(), T = setTimeout(a, 0));
+  }), ie(() => {
+    s.visible && (v(), clearTimeout(T));
+  }), Z(
+    () => s.visible,
+    (i) => {
+      _(() => {
+        i ? (W(), T = setTimeout(a, 0)) : (v(), clearTimeout(T));
+      });
+    }
+  ), Z(
+    () => s.escClose,
+    (i) => {
+      if (!s.visible) return;
+      const h = P.getWindowBySequence(n);
+      h && (h.escClose = i);
+    }
+  ), {
+    setFocus: u
+  };
+};
+export {
+  de as useEscCloseAndFocusable,
+  re as useModel,
+  ce as useMouseEvent
+};

package/dist/directives/clickoutside.js

@@ -0,0 +1,47 @@
+const r = {
+  mounted(n, e) {
+    const t = n, u = e.modifiers.bubbles, s = (o) => {
+      (u || t !== o.target && !t.contains(o.target)) && e.value(o);
+    };
+    t.vueClickOutside = s, document.addEventListener("mousedown", s);
+  },
+  unmounted(n) {
+    const e = n;
+    document.removeEventListener("mousedown", e.vueClickOutside), e.vueClickOutside = null;
+  }
+}, m = {
+  mounted(n, e) {
+    const t = n;
+    let u = null;
+    const s = e.modifiers.bubble, o = document.body.getElementsByClassName("ev-select-dropbox"), c = "ev-tag-name", a = "ev-tag-suffix-close", d = (l) => {
+      if (!(l.target.classList.contains(c) || l.target.classList.contains(a)) && o && o.length && (s || t !== l.target && !t.contains(l.target))) {
+        for (let i = 0; i < o.length; i++)
+          if (u = o[i], u !== l.target && !u.contains(l.target)) {
+            e.value(l);
+            break;
+          }
+      }
+    };
+    t.vueClickOutside = d, document.addEventListener("mousedown", d);
+  },
+  unmounted(n) {
+    const e = n;
+    document.removeEventListener("mousedown", e.vueClickOutside), e.vueClickOutside = null;
+  }
+}, v = {
+  mounted(n, e) {
+    const t = n, u = e.modifiers.bubbles, s = document.body.getElementsByClassName("ev-date-picker-dropdown"), o = (c) => {
+      (!s && (u || t !== c.target && !t.contains(c.target)) || s && s[0] && s[0] !== c.target && !s[0].contains(c.target) && t !== c.target && !t.contains(c.target)) && e.value(c);
+    };
+    t.vueClickOutside = o, document.addEventListener("mousedown", o);
+  },
+  unmounted(n) {
+    const e = n;
+    document.removeEventListener("mousedown", e.vueClickOutside), e.vueClickOutside = null;
+  }
+};
+export {
+  r as clickoutside,
+  v as datePickerClickoutside,
+  m as selectClickoutside
+};