hys-ui 0.1.1 → 0.3.0

package/dist/components/HysSlider/HysSlider2.vue.js

@@ -1,77 +1,554 @@
-import { defineComponent as C, computed as v, openBlock as u, createElementBlock as m, mergeProps as N, unref as B, toDisplayString as y, createCommentVNode as x, createElementVNode as T, withModifiers as S, normalizeClass as z, normalizeStyle as M, Fragment as V, renderList as k } from "vue";
-import { useHysRootAttrs as F } from "../../config.js";
-const R = { key: 0 }, E = ["aria-label", "min", "max", "step", "value", "disabled", "aria-valuetext", "onInput", "onChange"], H = {
-  key: 1,
+import { defineComponent as fa, inject as Ge, useAttrs as ma, useId as xe, ref as A, shallowRef as Ee, computed as g, watch as Le, onMounted as ha, onActivated as pa, nextTick as Se, onDeactivated as ya, onBeforeUnmount as ba, openBlock as m, createElementBlock as w, mergeProps as ga, unref as h, toDisplayString as ie, createCommentVNode as K, createElementVNode as re, normalizeStyle as ne, normalizeClass as ge, withModifiers as Je, Fragment as oe, renderList as se, renderSlot as Ne, createVNode as wa, withCtx as ka, createTextVNode as Qe, createBlock as Ma } from "vue";
+import Ba from "../HysNumberInput/HysNumberInput.vue.js";
+import xa from "./SliderTooltip.vue.js";
+import { useHysControlState as Ea, fieldKey as La, formKey as Sa } from "../../composables/formContext.js";
+import { decimalText as j, decimalAdd as U, decimal as p, normalizeDecimal as Ze } from "../../composables/numberInput.js";
+import { useHysRootAttrs as Na } from "../../config.js";
+const Ta = ["id"], Va = { class: "hys-ui-slider-layout" }, Ca = ["id", "tabindex", "aria-label", "aria-labelledby", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-valuetext", "aria-orientation", "aria-disabled", "aria-readonly", "aria-required", "aria-invalid", "aria-describedby", "onPointerdown", "onKeydown", "onMouseenter", "onFocus"], za = { class: "hys-ui-slider-handle" }, Aa = {
+  key: 0,
   class: "hys-ui-slider-marks"
-}, j = /* @__PURE__ */ C({
+}, Ra = ["disabled", "onClick"], Pa = {
+  key: 0,
+  class: "hys-ui-slider-inputs"
+}, Ia = ["name", "value", "disabled"], Da = ["id"], Ya = /* @__PURE__ */ fa({
+  inheritAttrs: !1,
   __name: "HysSlider",
   props: {
+    popupTransition: {},
+    popupTransitionDuration: {},
     modelValue: {},
+    defaultValue: {},
+    range: { type: Boolean, default: void 0 },
     min: { default: 0 },
     max: { default: 100 },
     step: { default: 1 },
     disabled: { type: Boolean },
+    readonly: { type: Boolean },
     label: {},
+    ariaLabel: {},
+    rangeStartLabel: {},
+    rangeEndLabel: {},
     showValue: { type: Boolean, default: !0 },
     marks: {},
-    formatTooltip: {}
+    formatTooltip: {},
+    formatValueText: {},
+    showTooltip: { type: Boolean, default: !0 },
+    tooltipVisible: { type: Boolean, default: void 0 },
+    tooltipPlacement: { default: "top" },
+    showStops: { type: Boolean },
+    maxStops: { default: 200 },
+    included: { type: Boolean, default: !0 },
+    reverse: { type: Boolean },
+    vertical: { type: Boolean },
+    height: { default: 200 },
+    size: {},
+    keyboard: { type: Boolean, default: !0 },
+    draggableTrack: { type: Boolean },
+    showInput: { type: Boolean },
+    showInputControls: { type: Boolean, default: !0 },
+    name: {},
+    tabindex: {},
+    autofocus: { type: Boolean },
+    status: {},
+    error: {}
   },
-  emits: ["update:modelValue", "change"],
-  setup(t, { emit: p }) {
-    const e = t, d = p, w = F(), s = v(() => Array.isArray(e.modelValue)), r = v(() => Array.isArray(e.modelValue) ? e.modelValue : [e.modelValue]), h = v(() => Number.isFinite(e.step) && e.step > 0 ? e.step : 1), b = (n) => Math.max(e.min, Math.min(Math.max(e.min, e.max), Number((e.min + Math.round((n - e.min) / h.value) * h.value).toFixed(10)))), c = (n) => Math.max(0, Math.min(100, (n - e.min) / (e.max > e.min ? e.max - e.min : 1) * 100));
-    function A(n) {
-      if (e.disabled || !s.value) return;
-      const i = n.currentTarget.getBoundingClientRect();
-      if (!i.width) return;
-      const l = b(e.min + (n.clientX - i.left) / i.width * (e.max - e.min)), a = [...r.value], o = Math.abs(l - a[0]) < Math.abs(l - a[1]) ? 0 : 1;
-      a[o] = Math.max(o === 1 ? a[0] : e.min, Math.min(o === 0 ? a[1] : e.max, l)), d("update:modelValue", a), d("change", a);
-    }
-    function g(n, i) {
-      const l = b(Number(n.target.value));
-      if (s.value) {
-        const a = [...r.value];
-        return a[i] = Math.max(i === 1 ? a[0] : e.min, Math.min(i === 0 ? a[1] : e.max, l)), a;
+  emits: ["update:modelValue", "input", "change", "dragStart", "dragEnd", "focus", "blur"],
+  setup(o, { expose: _e, emit: ea }) {
+    const l = o, R = ea, {
+      disabled: Te,
+      size: Ve,
+      label: Ce
+    } = Ea(l), S = Ge(La, void 0), we = Ge(Sa, void 0), q = ma(), aa = Na(), ta = xe(), ze = xe(), ke = xe(), ve = A(), f = A(), W = Ee({ width: 0, height: 0 }), de = A([]), Ae = Ee(
+      l.defaultValue ?? (l.range ? [l.min, l.max] : l.min)
+    ), V = Ee(), Re = g(
+      () => l.modelValue === void 0 ? Ae.value : l.modelValue
+    ), c = g(() => l.range ?? Array.isArray(Re.value)), r = g(() => Number.isFinite(l.min) ? l.min : 0), s = g(
+      () => Number.isFinite(l.max) ? Math.max(r.value, l.max) : Math.max(r.value, 100)
+    ), M = g(
+      () => Object.entries(l.marks ?? {}).map(([e, a]) => ({
+        value: Number(e),
+        label: typeof a == "string" ? a : a.label,
+        style: typeof a == "string" ? void 0 : a.style
+      })).filter(
+        (e) => Number.isFinite(e.value) && e.value >= r.value && e.value <= s.value
+      ).sort((e, a) => e.value - a.value)
+    ), x = g(() => l.step === "mark" || l.step === null), G = g(
+      () => typeof l.step == "number" && Number.isFinite(l.step) && l.step > 0 ? l.step : 1
+    ), la = g(
+      () => l.max < r.value || s.value <= r.value || x.value && !M.value.length
+    ), C = g(() => Te.value || la.value), P = g(() => !C.value && !l.readonly), ce = g(
+      () => {
+        var e, a;
+        return l.error || l.status === "error" || (e = S == null ? void 0 : S.invalid) != null && e.value ? "error" : l.status ?? ((a = S == null ? void 0 : S.status) == null ? void 0 : a.value);
       }
-      return l;
-    }
-    return (n, i) => (u(), m("div", N(B(w), { class: "hys-ui-ex-field" }), [
-      t.showValue ? (u(), m("span", R, y(t.label || "数值") + "：" + y(r.value.map((l) => t.formatTooltip ? t.formatTooltip(l) : l).join(" ~ ")), 1)) : x("", !0),
-      T("div", {
-        class: z({ "hys-ui-slider-range": s.value }),
-        onPointerdown: S(A, ["self"])
-      }, [
-        s.value ? (u(), m("div", {
-          key: 0,
-          class: "hys-ui-slider-selection",
-          style: M({ left: c(r.value[0]) + "%", width: c(r.value[1]) - c(r.value[0]) + "%" })
-        }, null, 4)) : x("", !0),
-        (u(!0), m(V, null, k(r.value, (l, a) => {
-          var o;
-          return u(), m("input", {
-            key: a,
-            class: "hys-ui-ex-slider",
-            type: "range",
-            "aria-label": (t.label || "数值") + (s.value ? a === 0 ? "下限" : "上限" : ""),
-            min: t.min,
-            max: t.max,
-            step: h.value,
-            value: l,
-            disabled: t.disabled,
-            "aria-valuetext": (o = t.formatTooltip) == null ? void 0 : o.call(t, l),
-            onInput: (f) => d("update:modelValue", g(f, a)),
-            onChange: (f) => d("change", g(f, a))
-          }, null, 40, E);
-        }), 128))
-      ], 34),
-      t.marks ? (u(), m("div", H, [
-        (u(!0), m(V, null, k(t.marks, (l, a) => (u(), m("span", {
-          key: a,
-          style: M({ left: c(Number(a)) + "%" })
-        }, y(l), 5))), 128))
-      ])) : x("", !0)
+    );
+    function J(e) {
+      var i;
+      const a = Number.isFinite(e) ? Math.max(r.value, Math.min(s.value, e)) : r.value;
+      if (x.value) {
+        let v = ((i = M.value[0]) == null ? void 0 : i.value) ?? r.value;
+        for (const d of M.value)
+          Math.abs(d.value - a) < Math.abs(v - a) && (v = d.value);
+        return v;
+      }
+      if (a === s.value) return a;
+      const t = Ze(p(a), {
+        step: p(G.value),
+        base: p(r.value),
+        min: p(r.value),
+        max: p(s.value),
+        strict: !0
+      }), u = t ? Number(j(t)) : r.value;
+      return Math.abs(s.value - a) < Math.abs(u - a) ? s.value : u;
+    }
+    function Pe(e) {
+      const a = Array.isArray(e) ? e : [e];
+      return c.value ? [J(a[0]), J(a[1] ?? s.value)].sort(
+        (u, i) => u - i
+      ) : [J(a[0])];
+    }
+    const Q = g(() => Pe(Re.value)), n = g(() => V.value ?? Q.value), k = A(!1), I = A(), fe = A(), E = A(0), Z = A(!1);
+    let N = !0, z = 0, _ = 0, D, H, $, ee, T, ae, te = [], me = 0;
+    const he = (e, a) => e.length === a.length && e.every((t, u) => t === a[u]), X = (e) => c.value ? [e[0], e[1]] : e[0], ua = () => Object.fromEntries(
+      Object.entries(q).filter(
+        ([e]) => e !== "id" && !e.startsWith("aria-")
+      )
+    );
+    function Ie(e) {
+      const a = l.ariaLabel || q["aria-label"] || l.label || Ce.value || "数值";
+      return c.value ? e === 0 ? l.rangeStartLabel || a + "下限" : l.rangeEndLabel || a + "上限" : a;
+    }
+    function pe(e) {
+      try {
+        return l.formatTooltip ? l.formatTooltip(e) : String(e);
+      } catch {
+        return String(e);
+      }
+    }
+    function De(e, a) {
+      return l.showTooltip && pe(a) !== null && (l.tooltipVisible ?? (I.value === e || fe.value === e || k.value && E.value === e));
+    }
+    function ia(e) {
+      var a;
+      try {
+        return ((a = l.formatValueText) == null ? void 0 : a.call(l, e)) ?? String(pe(e) ?? e);
+      } catch {
+        return String(e);
+      }
+    }
+    const $e = (e) => s.value === r.value ? 0 : Math.max(
+      0,
+      Math.min(1, (e - r.value) / (s.value - r.value))
+    ), F = (e) => 100 * (l.reverse ? 1 - $e(e) : $e(e)), Fe = (e) => l.vertical ? { bottom: F(e) + "%" } : { left: F(e) + "%" }, ra = (e) => ({
+      transform: l.vertical ? `translate3d(-50%, ${W.value.height * (1 - F(e) / 100)}px, 0) translateY(-50%)` : `translate3d(${W.value.width * F(e) / 100}px, -50%, 0) translateX(-50%)`
+    }), na = g(() => {
+      const e = F(c.value ? n.value[0] : r.value), a = F(n.value[c.value ? 1 : 0]);
+      return l.vertical ? {
+        transform: `translate3d(-50%, ${100 - Math.max(e, a)}%, 0) scaleY(${Math.abs(a - e) / 100})`
+      } : {
+        transform: `translate3d(${Math.min(e, a)}%, -50%, 0) scaleX(${Math.abs(a - e) / 100})`
+      };
+    }), oa = g(() => {
+      if (!l.showStops) return [];
+      if (x.value) return M.value.map((i) => i.value);
+      const e = Math.floor((s.value - r.value) / G.value), a = Math.max(2, Math.min(1e3, Math.floor(l.maxStops || 200))), t = Math.max(1, Math.ceil(e / a)), u = [];
+      for (let i = 1; i < e && u.length < a; i += t)
+        u.push(
+          Number(
+            j(
+              U(p(r.value), p(G.value), i)
+            )
+          )
+        );
+      return u;
+    });
+    function ye(e) {
+      if (!N || !P.value || he(e, n.value)) return !1;
+      V.value = e, D = e;
+      const a = ++_;
+      return l.modelValue === void 0 && (Ae.value = X(e)), R("update:modelValue", X(e)), R("input", X(e)), Se(() => {
+        !N || a !== _ || ((!he(Q.value, e) || !k.value) && (V.value = void 0), D = void 0);
+      }), !0;
+    }
+    function le(e) {
+      const a = z;
+      Se(() => {
+        N && a === z && P.value && !he(Q.value, e) && R("change", X(Q.value));
+      });
+    }
+    function ue(e, a) {
+      const t = [...n.value];
+      return t[e] = Math.max(
+        e === 1 ? t[0] : r.value,
+        Math.min(
+          c.value && e === 0 ? t[1] : s.value,
+          J(a)
+        )
+      ), ye(t);
+    }
+    function Oe(e) {
+      if (!c.value) return 0;
+      const a = Math.abs(n.value[0] - e), t = Math.abs(n.value[1] - e);
+      return a === t ? I.value ?? (e < n.value[0] ? 0 : 1) : a < t ? 0 : 1;
+    }
+    function je(e, a) {
+      var i;
+      const t = ee ?? ((i = f.value) == null ? void 0 : i.getBoundingClientRect());
+      if (!t) return r.value;
+      let u = l.vertical ? (t.bottom - a) / (t.height || 1) : (e - t.left) / (t.width || 1);
+      return l.reverse && (u = 1 - u), r.value + Math.max(0, Math.min(1, u)) * (s.value - r.value);
+    }
+    function He() {
+      if (H = void 0, !k.value || !$ || !N) return;
+      const e = je($.x, $.y);
+      if (Z.value) {
+        const a = e - me, t = U(p(te[1]), p(te[0]), -1), u = Number(
+          j(U(p(s.value), t, -1))
+        );
+        let i = J(te[0] + a);
+        i = Math.max(r.value, Math.min(u, i)), ye([i, Number(j(U(p(i), t)))]);
+      } else ue(E.value, e);
+    }
+    function Me(e) {
+      return e.pointerId === void 0 || T === void 0 || e.pointerId === T;
+    }
+    function Xe(e) {
+      !k.value || !Me(e) || ($ = { x: e.clientX, y: e.clientY }, e.cancelable && e.preventDefault(), H === void 0 && (H = requestAnimationFrame(He)));
+    }
+    function B(e = !1, a = !1) {
+      var i, v;
+      if (!k.value) return;
+      H !== void 0 && cancelAnimationFrame(H), H = void 0, !e && $ && He();
+      const t = te.slice(), u = { index: E.value, track: Z.value, cancelled: e };
+      k.value = !1, $ = void 0, ae == null || ae(), ae = void 0;
+      try {
+        T !== void 0 && ((v = (i = f.value) == null ? void 0 : i.hasPointerCapture) != null && v.call(i, T)) && f.value.releasePointerCapture(T);
+      } catch {
+      }
+      T = void 0, e ? (z++, a && P.value ? ye(t) : V.value = void 0) : le(t), N && R("dragEnd", X(n.value), u);
+    }
+    function Be(e, a, t = !1) {
+      var O, b, We;
+      if (!N || !P.value || e.button !== 0 && e.pointerType !== "touch" || !f.value || (B(!0), z++, ee = f.value.getBoundingClientRect(), l.vertical ? !ee.height : !ee.width)) return;
+      e.preventDefault(), T = e.pointerId, te = [...n.value], me = je(e.clientX, e.clientY), Z.value = t && c.value && !!l.draggableTrack && !x.value, E.value = a ?? Oe(me), k.value = !0, I.value = E.value, (O = de.value[E.value]) == null || O.focus({ preventScroll: !0 }), R("dragStart", X(n.value), {
+        index: E.value,
+        track: Z.value,
+        cancelled: !1
+      }), a === void 0 && !Z.value && ue(E.value, me);
+      const u = (L) => {
+        Me(L) && (Number.isFinite(L.clientX) && Number.isFinite(L.clientY) && ($ = { x: L.clientX, y: L.clientY }), B());
+      }, i = (L) => {
+        Me(L) && B(!0);
+      }, v = () => B(!0), d = () => {
+        var L;
+        ee = (L = f.value) == null ? void 0 : L.getBoundingClientRect();
+      };
+      document.addEventListener("pointermove", Xe, { passive: !1 }), document.addEventListener("pointerup", u), document.addEventListener("pointercancel", i), document.addEventListener("scroll", d, !0), window.addEventListener("resize", d), window.addEventListener("blur", v);
+      const y = typeof ResizeObserver < "u" ? new ResizeObserver(d) : void 0;
+      y == null || y.observe(f.value), ae = () => {
+        document.removeEventListener("pointermove", Xe), document.removeEventListener("pointerup", u), document.removeEventListener("pointercancel", i), document.removeEventListener("scroll", d, !0), window.removeEventListener("resize", d), window.removeEventListener("blur", v), y == null || y.disconnect();
+      };
+      try {
+        T !== void 0 && ((We = (b = f.value).setPointerCapture) == null || We.call(b, T));
+      } catch {
+      }
+    }
+    function sa(e, a, t) {
+      if (x.value) {
+        const d = M.value.map((O) => O.value), y = d.indexOf(e);
+        return d[Math.max(
+          0,
+          Math.min(
+            d.length - 1,
+            (y < 0 ? 0 : y) + a * t
+          )
+        )] ?? e;
+      }
+      const u = p(G.value), i = p(r.value), v = Ze(p(s.value), {
+        step: u,
+        base: i,
+        min: i,
+        max: p(s.value),
+        strict: !0
+      });
+      return a < 0 && e === s.value && Number(j(v)) !== e ? Number(j(U(v, u, -(t - 1)))) : Number(
+        j(U(p(e), u, a * t))
+      );
+    }
+    function va(e, a) {
+      var d, y;
+      if (e.isComposing || e.keyCode === 229) return;
+      if (e.key === "Escape" && k.value) {
+        e.preventDefault(), B(!0, !0);
+        return;
+      }
+      const t = ["ArrowRight", "ArrowUp", "PageUp"], u = ["ArrowLeft", "ArrowDown", "PageDown"];
+      if (![...t, ...u, "Home", "End"].includes(e.key) || !P.value || !l.keyboard) return;
+      e.preventDefault(), k.value && B(!0);
+      const i = [...n.value];
+      let v;
+      e.key === "Home" ? v = x.value ? ((d = M.value[0]) == null ? void 0 : d.value) ?? r.value : r.value : e.key === "End" ? v = x.value ? ((y = M.value.at(-1)) == null ? void 0 : y.value) ?? s.value : s.value : v = sa(
+        n.value[a],
+        (t.includes(e.key) ? 1 : -1) * (l.reverse ? -1 : 1),
+        e.key.startsWith("Page") || e.shiftKey ? 10 : 1
+      ), ue(a, v) && le(i);
+    }
+    function da(e) {
+      const a = [...n.value];
+      ye(Pe(e)) && le(a);
+    }
+    function ca(e) {
+      if (!P.value) return;
+      const a = [...n.value];
+      ue(Oe(e), e) && le(a);
+    }
+    function Ye(e = 0) {
+      var a;
+      C.value || (a = de.value[Math.max(0, Math.min(n.value.length - 1, e))]) == null || a.focus();
+    }
+    function Ke() {
+      Ue(), B(!0), N = !1, z++, _++, D = void 0, V.value = void 0, I.value = void 0, fe.value = void 0;
+    }
+    Le(
+      () => l.modelValue,
+      () => {
+        D && he(Q.value, D) || (B(!0), z++, _++, V.value = void 0, D = void 0);
+      },
+      { deep: !0, flush: "sync" }
+    ), Le(
+      [
+        () => l.min,
+        () => l.max,
+        () => l.step,
+        () => l.range,
+        () => l.vertical,
+        () => l.reverse,
+        () => Te.value,
+        () => l.readonly,
+        // Inline marks objects may be recreated by every model update. Only a
+        // changed set of available stops affects an active mark-only interaction.
+        () => x.value ? M.value.map((e) => e.value).join(",") : ""
+      ],
+      () => {
+        B(!0), z++, V.value = void 0;
+      }
+    ), Le(
+      () => we == null ? void 0 : we.resetting.value,
+      (e) => {
+        e && (B(!0), z++, _++, D = void 0, V.value = void 0);
+      },
+      { flush: "sync" }
+    );
+    let Y;
+    function be() {
+      if (!N || !f.value) return;
+      const e = f.value.clientWidth || f.value.getBoundingClientRect().width, a = f.value.clientHeight || f.value.getBoundingClientRect().height;
+      (e !== W.value.width || a !== W.value.height) && (W.value = { width: e, height: a });
+    }
+    function Ue() {
+      Y == null || Y.disconnect(), Y = void 0, window.removeEventListener("resize", be);
+    }
+    function qe() {
+      Ue(), be(), typeof ResizeObserver < "u" && f.value && (Y = new ResizeObserver(be), Y.observe(f.value)), window.addEventListener("resize", be);
+    }
+    return ha(() => {
+      qe(), l.autofocus && Ye();
+    }), pa(() => {
+      N = !0, Se(qe);
+    }), ya(Ke), ba(Ke), _e({
+      element: ve,
+      dragging: k,
+      values: n,
+      focus: Ye,
+      blur: () => {
+        var a;
+        const e = document.activeElement;
+        e && ((a = ve.value) != null && a.contains(e)) && e.blur();
+      },
+      setValue: da,
+      cancel: () => B(!0, !0)
+    }), (e, a) => (m(), w("div", ga({ ...h(aa), ...ua() }, {
+      ref_key: "root",
+      ref: ve,
+      class: ["hys-ui-slider-wrap hys-ui-ex-field", [
+        "hys-ui-slider-" + h(Ve),
+        {
+          "hys-ui-slider-vertical": o.vertical,
+          "hys-ui-slider-disabled": C.value,
+          "hys-ui-slider-readonly": o.readonly,
+          "hys-ui-slider-dragging": k.value,
+          "hys-ui-slider-error": ce.value === "error",
+          "hys-ui-slider-warning": ce.value === "warning",
+          "hys-ui-slider-success": ce.value === "success"
+        }
+      ]]
+    }), [
+      o.showValue ? (m(), w("span", {
+        key: 0,
+        id: h(ta),
+        class: "hys-ui-slider-value"
+      }, ie(o.label || h(Ce) || "数值") + "：" + ie(n.value.map((t) => pe(t) ?? t).join(" ~ ")), 9, Ta)) : K("", !0),
+      re("div", Va, [
+        re("div", {
+          class: "hys-ui-slider-axis",
+          style: ne(
+            o.vertical ? { height: typeof o.height == "number" ? o.height + "px" : o.height } : void 0
+          )
+        }, [
+          re("div", {
+            ref_key: "rail",
+            ref: f,
+            class: ge(["hys-ui-slider-rail", { "hys-ui-slider-range": c.value }]),
+            onPointerdown: a[3] || (a[3] = (t) => Be(t)),
+            onLostpointercapture: a[4] || (a[4] = (t) => k.value && B(!0))
+          }, [
+            a[5] || (a[5] = re("div", { class: "hys-ui-slider-background" }, null, -1)),
+            o.included ? (m(), w("div", {
+              key: 0,
+              class: ge(["hys-ui-slider-selection", {
+                "hys-ui-slider-selection-draggable": c.value && o.draggableTrack && !x.value && P.value
+              }]),
+              style: ne(na.value),
+              onPointerdown: a[0] || (a[0] = Je((t) => Be(t, void 0, !0), ["stop"]))
+            }, null, 38)) : K("", !0),
+            (m(!0), w(oe, null, se(oa.value, (t) => (m(), w("span", {
+              key: t,
+              class: ge(["hys-ui-slider-stop", {
+                "hys-ui-slider-stop-active": t >= (c.value ? n.value[0] : r.value) && t <= n.value[c.value ? 1 : 0]
+              }]),
+              style: ne(Fe(t))
+            }, null, 6))), 128)),
+            (m(!0), w(oe, null, se(n.value, (t, u) => {
+              var i, v, d, y, O;
+              return m(), w("div", {
+                key: u,
+                style: ne(ra(t)),
+                ref_for: !0,
+                ref: (b) => {
+                  b && (de.value[u] = b);
+                },
+                role: "slider",
+                "data-hys-ui-field-managed": "",
+                class: ge(["hys-ui-slider-thumb", {
+                  "hys-ui-slider-thumb-active": I.value === u || k.value && E.value === u
+                }]),
+                id: u === 0 ? h(q).id || (c.value || (i = h(S)) == null ? void 0 : i.id.value) : void 0,
+                tabindex: C.value ? -1 : o.tabindex ?? 0,
+                "aria-label": Ie(u),
+                "aria-labelledby": h(q)["aria-labelledby"],
+                "aria-valuemin": u === 1 ? n.value[0] : x.value ? ((v = M.value[0]) == null ? void 0 : v.value) ?? r.value : r.value,
+                "aria-valuemax": c.value && u === 0 ? n.value[1] : x.value ? ((d = M.value.at(-1)) == null ? void 0 : d.value) ?? s.value : s.value,
+                "aria-valuenow": t,
+                "aria-valuetext": ia(t),
+                "aria-orientation": o.vertical ? "vertical" : "horizontal",
+                "aria-disabled": C.value || void 0,
+                "aria-readonly": o.readonly || void 0,
+                "aria-required": ((y = h(S)) == null ? void 0 : y.required.value) || void 0,
+                "aria-invalid": ce.value === "error" || void 0,
+                "aria-describedby": [
+                  o.error ? h(ze) : (O = h(S)) == null ? void 0 : O.describedBy.value,
+                  h(q)["aria-describedby"],
+                  De(u, t) ? h(ke) + "-tooltip-" + u : void 0
+                ].filter(Boolean).join(" ") || void 0,
+                onPointerdown: Je((b) => Be(b, u), ["stop"]),
+                onKeydown: (b) => va(b, u),
+                onMouseenter: (b) => fe.value = u,
+                onMouseleave: a[1] || (a[1] = (b) => fe.value = void 0),
+                onFocus: (b) => {
+                  I.value = u, R("focus", b);
+                },
+                onBlur: a[2] || (a[2] = (b) => {
+                  I.value = void 0, R("blur", b);
+                })
+              }, [
+                re("span", za, [
+                  Ne(e.$slots, "thumb", {
+                    value: t,
+                    index: u,
+                    dragging: k.value && E.value === u
+                  }, void 0, !0)
+                ]),
+                wa(xa, {
+                  "popup-transition": l.popupTransition,
+                  "popup-transition-duration": l.popupTransitionDuration,
+                  visible: De(u, t),
+                  id: h(ke) + "-tooltip-" + u,
+                  anchor: de.value[u],
+                  container: ve.value,
+                  placement: o.tooltipPlacement,
+                  position: F(t)
+                }, {
+                  default: ka(() => [
+                    Ne(e.$slots, "tooltip", {
+                      value: t,
+                      index: u
+                    }, () => [
+                      Qe(ie(pe(t)), 1)
+                    ], !0)
+                  ]),
+                  _: 2
+                }, 1032, ["popup-transition", "popup-transition-duration", "visible", "id", "anchor", "container", "placement", "position"])
+              ], 46, Ca);
+            }), 128))
+          ], 34),
+          M.value.length ? (m(), w("div", Aa, [
+            (m(!0), w(oe, null, se(M.value, (t) => (m(), w("button", {
+              key: t.value,
+              type: "button",
+              tabindex: "-1",
+              class: "hys-ui-slider-mark",
+              disabled: C.value || o.readonly,
+              style: ne({ ...Fe(t.value), ...t.style }),
+              onClick: (u) => ca(t.value)
+            }, [
+              Ne(e.$slots, "mark", {
+                value: t.value,
+                label: t.label,
+                active: t.value >= (c.value ? n.value[0] : r.value) && t.value <= n.value[c.value ? 1 : 0]
+              }, () => [
+                Qe(ie(t.label), 1)
+              ], !0)
+            ], 12, Ra))), 128))
+          ])) : K("", !0)
+        ], 4),
+        o.showInput ? (m(), w("div", Pa, [
+          (m(!0), w(oe, null, se(n.value, (t, u) => (m(), Ma(Ba, {
+            key: u,
+            id: h(ke) + "-number-" + u,
+            "model-value": t,
+            min: u === 1 ? n.value[0] : r.value,
+            max: c.value && u === 0 ? n.value[1] : s.value,
+            step: G.value,
+            "show-controls": o.showInputControls,
+            size: h(Ve),
+            disabled: C.value,
+            readonly: o.readonly,
+            "aria-label": Ie(u) + "输入",
+            "onUpdate:modelValue": (i) => {
+              if (i !== null) {
+                const v = [...n.value];
+                ue(u, Number(i)) && le(v);
+              }
+            }
+          }, null, 8, ["id", "model-value", "min", "max", "step", "show-controls", "size", "disabled", "readonly", "aria-label", "onUpdate:modelValue"]))), 128))
+        ])) : K("", !0)
+      ]),
+      o.name ? (m(!0), w(oe, { key: 1 }, se(n.value, (t, u) => (m(), w("input", {
+        key: u,
+        type: "hidden",
+        name: o.name,
+        value: t,
+        disabled: C.value
+      }, null, 8, Ia))), 128)) : K("", !0),
+      o.error ? (m(), w("small", {
+        key: 2,
+        id: h(ze),
+        class: "hys-ui-slider-error-text",
+        role: "alert"
+      }, ie(o.error), 9, Da)) : K("", !0)
     ], 16));
   }
 });
 export {
-  j as default
+  Ya as default
 };

package/dist/components/HysSlider/SliderTooltip.vue.js

@@ -0,0 +1,7 @@
+import o from "./SliderTooltip2.vue.js";
+/* empty css                   */
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const i = /* @__PURE__ */ t(o, [["__scopeId", "data-v-01e08b26"]]);
+export {
+  i as default
+};