evui 3.4.214 → 3.5.0

package/dist/components/slider/Slider.vue.js

@@ -0,0 +1,243 @@
+import { resolveComponent as H, openBlock as r, createElementBlock as i, normalizeClass as f, createElementVNode as s, Fragment as y, renderList as v, normalizeStyle as d, createCommentVNode as u, toDisplayString as I, withModifiers as c, createBlock as M, createVNode as V, toRefs as S } from "vue";
+import { useModel as A, useStyle as N, useEvent as E, useInit as x } from "./uses.js";
+/* empty css            */
+import D from "../../_virtual/_plugin-vue_export-helper.js";
+const F = {
+  name: "EvSlider",
+  components: {},
+  props: {
+    modelValue: {
+      type: [Number, Array],
+      default: null
+    },
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    range: {
+      type: Boolean,
+      default: !1
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    step: {
+      type: Number,
+      default: 1,
+      validator: (a) => a > 0
+    },
+    mark: {
+      type: Object,
+      default: () => {
+      }
+    },
+    showStep: {
+      type: Boolean,
+      default: !1
+    },
+    showTooltip: {
+      type: Boolean,
+      default: !0
+    },
+    showInput: {
+      type: Boolean,
+      default: !1
+    },
+    color: {
+      type: [String, Array],
+      default: null
+    },
+    tooltipFormat: {
+      type: Function,
+      default: null
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup() {
+    const {
+      currentValue: a,
+      state: t,
+      slider: l,
+      formatValue: e,
+      sliderLine: h,
+      updateSliderInfo: g,
+      setSliderValue: o
+    } = A(), {
+      isColorArray: n,
+      leftHandleStyle: m,
+      rightHandleStyle: p,
+      handleBtnStyle: b,
+      rangeThumbStyle: k,
+      leftThumbStyle: w,
+      rightThumbStyle: T
+    } = N({
+      state: t,
+      slider: l
+    }), { startDrag: B, clickSlider: C, changeInput: L } = E({
+      currentValue: a,
+      state: t,
+      slider: l,
+      updateSliderInfo: g,
+      setSliderValue: o
+    });
+    return x({
+      currentValue: a,
+      state: t,
+      slider: l,
+      updateSliderInfo: g,
+      setSliderValue: o
+    }), {
+      currentValue: a,
+      isColorArray: n,
+      leftHandleStyle: m,
+      rightHandleStyle: p,
+      handleBtnStyle: b,
+      rangeThumbStyle: k,
+      leftThumbStyle: w,
+      rightThumbStyle: T,
+      sliderLine: h,
+      ...S(t),
+      ...S(l),
+      formatValue: e,
+      startDrag: B,
+      clickSlider: C,
+      changeInput: L
+    };
+  }
+}, U = { class: "ev-slider-wrapper" }, z = {
+  ref: "sliderLine",
+  class: "ev-slider-line"
+}, _ = {
+  key: 0,
+  class: "ev-slider-step-wrapper"
+}, j = {
+  key: 2,
+  class: "ev-slider-mark-wrapper"
+}, O = { class: "ev-slider-mark-label" }, R = ["innerHTML"], X = ["innerHTML"];
+function q(a, t, l, e, h, g) {
+  const o = H("ev-input-number");
+  return r(), i("div", {
+    class: f(["ev-slider", {
+      readonly: l.readonly,
+      disabled: l.disabled,
+      "hide-tooltip": !l.showTooltip,
+      "show-input": l.showInput,
+      "color-range": e.isColorArray,
+      "show-mark": a.markList.length
+    }])
+  }, [
+    s("div", U, [
+      s("div", z, [
+        l.showStep && l.step ? (r(), i("div", _, [
+          (r(!0), i(y, null, v(a.stepList, (n, m) => (r(), i("span", {
+            key: `slider-step-${m}`,
+            style: d({ left: `${n}%` }),
+            class: "ev-slider-step"
+          }, null, 4))), 128))
+        ])) : u("", !0),
+        e.isColorArray && l.color.length > 1 ? (r(), i(y, { key: 1 }, [
+          l.range ? (r(), i("div", {
+            key: 0,
+            style: d(e.leftThumbStyle),
+            class: "ev-slider-thumb left"
+          }, null, 4)) : u("", !0),
+          s("div", {
+            style: d(e.rightThumbStyle),
+            class: "ev-slider-thumb right"
+          }, null, 4)
+        ], 64)) : u("", !0),
+        s("div", {
+          class: "ev-slider-thumb",
+          style: d(e.rangeThumbStyle)
+        }, null, 4),
+        a.markList.length > 0 ? (r(), i("div", j, [
+          (r(!0), i(y, null, v(a.markList, (n, m) => (r(), i("div", {
+            key: `slider-step-${m}`,
+            style: d({
+              ...n.style,
+              left: `${n.posX}%`
+            }),
+            class: "ev-slider-mark"
+          }, [
+            s("span", O, I(n.label), 1)
+          ], 4))), 128))
+        ])) : u("", !0),
+        s("span", {
+          class: "ev-slider-line-layer",
+          onClick: t[0] || (t[0] = (...n) => e.clickSlider && e.clickSlider(...n))
+        })
+      ], 512),
+      l.range ? (r(), i("div", {
+        key: 0,
+        class: f(["ev-slider-handle", { dragging: a.dragging && a.handleType === "left" }]),
+        style: d(e.leftHandleStyle),
+        onMousedown: t[1] || (t[1] = c((n) => e.startDrag("left"), ["stop", "prevent"]))
+      }, [
+        s("span", {
+          style: d(e.handleBtnStyle),
+          class: "ev-slider-handle-btn"
+        }, null, 4),
+        s("div", {
+          class: "ev-slider-tooltip",
+          innerHTML: e.formatValue.left
+        }, null, 8, R)
+      ], 38)) : u("", !0),
+      s("div", {
+        class: f(["ev-slider-handle", { dragging: a.dragging && a.handleType === "right" }]),
+        style: d(e.rightHandleStyle),
+        onMousedown: t[2] || (t[2] = c((n) => e.startDrag("right"), ["stop", "prevent"]))
+      }, [
+        s("span", {
+          style: d(e.handleBtnStyle),
+          class: "ev-slider-handle-btn"
+        }, null, 4),
+        s("div", {
+          class: "ev-slider-tooltip",
+          innerHTML: e.formatValue.right
+        }, null, 8, X)
+      ], 38)
+    ]),
+    l.showInput && !l.range ? (r(), M(o, {
+      key: 0,
+      modelValue: e.currentValue,
+      "onUpdate:modelValue": t[3] || (t[3] = (n) => e.currentValue = n),
+      step: l.step,
+      min: l.min,
+      max: l.max,
+      "step-strictly": "",
+      onChange: e.changeInput
+    }, null, 8, ["modelValue", "step", "min", "max", "onChange"])) : l.showInput && l.range && Array.isArray(l.modelValue) ? (r(), i(y, { key: 1 }, [
+      V(o, {
+        modelValue: e.currentValue[0],
+        "onUpdate:modelValue": t[4] || (t[4] = (n) => e.currentValue[0] = n),
+        step: l.step,
+        min: l.min,
+        max: e.currentValue[1],
+        "step-strictly": "",
+        onChange: t[5] || (t[5] = (n) => e.changeInput(n, "left"))
+      }, null, 8, ["modelValue", "step", "min", "max"]),
+      V(o, {
+        modelValue: e.currentValue[1],
+        "onUpdate:modelValue": t[6] || (t[6] = (n) => e.currentValue[1] = n),
+        step: l.step,
+        min: e.currentValue[0],
+        max: l.max,
+        "step-strictly": "",
+        onChange: t[7] || (t[7] = (n) => e.changeInput(n, "right"))
+      }, null, 8, ["modelValue", "step", "min", "max"])
+    ], 64)) : u("", !0)
+  ], 2);
+}
+const Q = /* @__PURE__ */ D(F, [["render", q]]);
+export {
+  Q as default
+};

package/dist/components/slider/index.js

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

package/dist/components/slider/uses.js

@@ -0,0 +1,188 @@
+import { getCurrentInstance as k, ref as S, reactive as L, computed as h, watch as A, onMounted as M } from "vue";
+import { isNumber as I, isEqual as T } from "lodash-es";
+import { convertToPercent as y } from "../../common/utils.js";
+import { getValueCloseToStep as w } from "../inputNumber/uses.js";
+const D = () => {
+  const { props: l, emit: e } = k(), s = S(l.modelValue), n = () => {
+    if (!l.showStep)
+      return [];
+    const t = l.max - l.min, r = t / l.step, a = y(l.step, t), o = [];
+    for (let f = 1; f < r; f++)
+      o.push(f * a);
+    return o;
+  }, m = () => {
+    if (!l.mark || !Object.keys(l.mark).length)
+      return [];
+    const t = (a, o = "value") => {
+      if (!a)
+        return [];
+      const f = l.mark.style && typeof l.mark.style == "object" ? l.mark.style : {}, c = Object.keys(a), b = [];
+      let x;
+      for (let R = 0; R < c.length; R++)
+        x = +c[R], isNaN(x) || b.push({
+          posX: o === "value" ? y(x, l.max - l.min) : x,
+          label: a[x],
+          style: f
+        });
+      return b;
+    };
+    return l.mark.value || l.mark.percent ? [...t(l.mark.value), ...t(l.mark.percent, "percent")] : [...t(l.mark)];
+  }, i = L({
+    isInit: !1,
+    dragging: !1,
+    handleType: null,
+    // 'left', 'right', null
+    leftValue: null,
+    rightValue: null
+  }), u = L({
+    valueRange: 0,
+    stepList: h(n),
+    markList: h(m),
+    offset: {
+      left: 0,
+      width: 0
+    }
+  }), V = S(), p = h(() => {
+    const t = l.tooltipFormat, r = t instanceof Function;
+    return {
+      left: r ? t(i.leftValue) : i.leftValue,
+      right: r ? t(i.rightValue) : i.rightValue
+    };
+  }), g = (t) => {
+    const r = {
+      min: l.min,
+      max: l.max,
+      step: l.step
+    };
+    let a, o;
+    l.range && Array.isArray(t) ? (a = typeof t[0] == "number" && !isNaN(t[0]) ? t[0] : l.min, o = typeof t[1] == "number" && !isNaN(t[1]) ? t[1] : l.min, i.leftValue = w(a, r), i.rightValue = w(o, r)) : (a = l.min, o = typeof t == "number" && !isNaN(t) ? t : l.min, i.leftValue = w(a, r), i.rightValue = w(o, r));
+  }, d = (t) => {
+    if (u.valueRange <= 0)
+      return;
+    g(t);
+    let r;
+    if (l.range && Array.isArray(t)) {
+      const a = Math.min(i.leftValue, i.rightValue), o = Math.max(i.leftValue, i.rightValue);
+      r = [a, o];
+    } else
+      r = i.rightValue;
+    s.value = r, e("update:modelValue", r), e("change", r);
+  }, v = () => {
+    const t = V.value.getBoundingClientRect();
+    u.offset.left = t.left, u.offset.width = t.width, u.valueRange = l.max - l.min;
+  };
+  return A(
+    () => l.modelValue,
+    (t, r) => {
+      I(t) && t >= 0 && !T(t, r) && !i.dragging && (g(t), s.value = t);
+    }
+  ), A(
+    () => l.step,
+    () => {
+      d(s.value);
+    }
+  ), {
+    currentValue: s,
+    state: i,
+    slider: u,
+    formatValue: p,
+    sliderLine: V,
+    updateSliderInfo: v,
+    setSliderValue: d
+  };
+}, O = (l) => {
+  const { props: e } = k(), { state: s, slider: n } = l, m = "transparent", i = h(() => ({
+    left: n.valueRange > 0 ? `${y(s.leftValue - e.min, n.valueRange)}%` : 0
+  })), u = h(() => ({
+    left: n.valueRange > 0 ? `${y(s.rightValue - e.min, n.valueRange)}%` : 0
+  })), V = h(() => !e.color || Array.isArray(e.color) && e.color.length !== 1 ? {} : {
+    borderColor: (typeof e.color == "string" ? e.color : e.color[0]) || m
+  }), p = h(() => e.color && Array.isArray(e.color)), g = h(() => {
+    const t = Math.min(s.leftValue, s.rightValue), a = +(Math.max(s.leftValue, s.rightValue) - t).toFixed(2), o = n.valueRange > 0 && e.range ? y(+(t - e.min).toFixed(2), n.valueRange) : 0, f = a > 0 ? y(a, n.valueRange) : 0, c = {};
+    return e.color && (typeof e.color == "string" || Array.isArray(e.color) && e.color.length === 1 ? c.backgroundColor = (typeof e.color == "string" ? e.color : e.color[0]) || m : Array.isArray(e.color) && e.color.length > 1 && (c.backgroundColor = (e.range ? e.color[1] : e.color[0]) || m)), {
+      left: `${o}%`,
+      width: `${f}%`,
+      ...c
+    };
+  }), d = h(() => {
+    if (!p.value || e.color.length < 2 || !e.range)
+      return {};
+    const t = Math.min(s.leftValue, s.rightValue);
+    return {
+      width: `${y(Math.abs(t - e.min), n.valueRange)}%`,
+      backgroundColor: e.color[0] || m
+    };
+  }), v = h(() => {
+    if (!p.value || e.color.length < 2)
+      return {};
+    const t = Math.max(s.leftValue, s.rightValue), r = y(+(t - e.min).toFixed(2), n.valueRange), a = y(+(e.max - t).toFixed(2), n.valueRange), o = e.range ? 2 : e.color.length - 1;
+    return {
+      left: `${r}%`,
+      width: `${a}%`,
+      backgroundColor: e.color[o] || m
+    };
+  });
+  return {
+    isColorArray: p,
+    leftHandleStyle: i,
+    rightHandleStyle: u,
+    handleBtnStyle: V,
+    rangeThumbStyle: g,
+    leftThumbStyle: d,
+    rightThumbStyle: v
+  };
+}, $ = (l) => {
+  const { props: e } = k(), { currentValue: s, state: n, slider: m, updateSliderInfo: i, setSliderValue: u } = l, V = (r) => {
+    n.dragging || i();
+    const a = r.type.indexOf("touch") !== -1 ? r.touches[0].clientX : r.clientX, { valueRange: o, offset: f } = m;
+    let c = e.min + (a - f.left) * o / f.width;
+    return c < e.min ? c = e.min : c > e.max && (c = e.max), c;
+  }, p = (r) => {
+    if (e.readonly || e.disabled || n.dragging)
+      return;
+    const a = V(r);
+    let o;
+    if (e.range) {
+      const c = Math.min(n.leftValue, n.rightValue) + Math.abs((n.rightValue - n.leftValue) / 2), b = n.leftValue > n.rightValue;
+      a < c ? n.handleType = b ? "right" : "left" : n.handleType = b ? "left" : "right", o = n.handleType === "left" ? [a, n.rightValue] : [n.leftValue, a];
+    } else
+      n.handleType = "right", o = a;
+    u(o);
+  }, g = (r) => {
+    const a = V(r);
+    n.dragging = !0;
+    let o;
+    e.range ? o = n.handleType === "left" ? [a, n.rightValue] : [n.leftValue, a] : o = a, u(o);
+  }, d = () => {
+    n.handleType = null, n.dragging = !1, document.body.style.cursor = "", window.removeEventListener("mousemove", g), window.removeEventListener("touchmove", g), window.removeEventListener("mouseup", d), window.removeEventListener("touchend", d);
+  };
+  return {
+    startDrag: (r) => {
+      e.readonly || e.disabled || (n.handleType = r, document.body.style.cursor = "grabbing", window.addEventListener("mousemove", g), window.addEventListener("touchmove", g), window.addEventListener("mouseup", d), window.addEventListener("touchend", d));
+    },
+    clickSlider: p,
+    changeInput: (r, a) => {
+      if (e.showInput && !n.dragging && n.isInit)
+        if (e.range && Array.isArray(s.value)) {
+          const o = a === "left" ? [r, s.value[1]] : [s.value[0], r];
+          u(o);
+        } else e.range || u(r);
+    }
+  };
+}, P = (l) => {
+  const { props: e, emit: s } = k(), { currentValue: n, state: m, slider: i, updateSliderInfo: u, setSliderValue: V } = l, p = () => {
+    const d = e.max || e.max === 0, v = e.min || e.min === 0;
+    d && v && e.max <= e.min && console.warn("[EVUI][Slider] Max value must be greater than min value.");
+  }, g = () => {
+    u(), i.valueRange <= 0 && (n.value = e.range ? [e.min, e.min] : e.min, s("update:modelValue", n.value)), V(n.value), m.isInit = !0;
+  };
+  M(() => {
+    p(), g();
+  });
+};
+export {
+  $ as useEvent,
+  P as useInit,
+  D as useModel,
+  O as useStyle
+};

package/dist/components/tabPanel/TabPanel.vue.js

@@ -0,0 +1,39 @@
+import { withDirectives as a, openBlock as n, createElementBlock as o, renderSlot as s, vShow as c, inject as i, computed as u } from "vue";
+/* empty css              */
+import d from "../../_virtual/_plugin-vue_export-helper.js";
+const p = {
+  name: "EvTabPanel",
+  props: {
+    text: {
+      type: [String, Number],
+      default: null
+    },
+    value: {
+      type: [String, Number],
+      default: null,
+      required: !0
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: {},
+  setup(e) {
+    const t = i("evTabs", null);
+    return {
+      isSelected: u(() => e.value === t.value)
+    };
+  }
+}, f = { class: "ev-tab-panel" };
+function m(e, t, l, r, v, _) {
+  return a((n(), o("article", f, [
+    s(e.$slots, "default")
+  ], 512)), [
+    [c, r.isSelected]
+  ]);
+}
+const T = /* @__PURE__ */ d(p, [["render", m]]);
+export {
+  T as default
+};

package/dist/components/tabPanel/index.js

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