hys-ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,156 @@
+import { defineComponent as J, ref as A, watch as P, onActivated as K, nextTick as Q, onDeactivated as Z, onBeforeUnmount as ee, openBlock as N, createBlock as te, Teleport as ie, createElementBlock as oe, mergeProps as ne, unref as le, renderSlot as se, createCommentVNode as re } from "vue";
+import { useHysRootAttrs as ae } from "../../config.js";
+const ce = ["id"], fe = /* @__PURE__ */ J({
+  __name: "SliderTooltip",
+  props: {
+    id: {},
+    anchor: {},
+    container: {},
+    placement: {},
+    position: {}
+  },
+  setup(q) {
+    const i = q, C = ae(), g = A(), p = A(!0), R = A({ position: "fixed", visibility: "hidden" }), X = A(i.placement);
+    let h, x, L = [], S = {}, z;
+    function B() {
+      if (L = [], S = {}, !i.anchor) return;
+      for (let n = i.anchor.parentElement; n; n = n.parentElement) {
+        const e = getComputedStyle(n), l = /hidden|clip|auto|scroll/.test(e.overflowX || e.overflow), c = /hidden|clip|auto|scroll/.test(e.overflowY || e.overflow);
+        (l || c) && L.push({ element: n, x: l, y: c });
+      }
+      const t = getComputedStyle(i.anchor);
+      for (const n of [
+        "--hys-ui-text",
+        "--hys-ui-surface",
+        "--hys-ui-theme-text",
+        "--hys-ui-theme-surface"
+      ]) {
+        const e = t.getPropertyValue(n).trim();
+        e && (S[n] = e);
+      }
+    }
+    function Y() {
+      h = void 0;
+      const t = i.anchor, n = g.value;
+      if (!p.value || !(t != null && t.isConnected) || !n) return;
+      const e = window.visualViewport, l = (e == null ? void 0 : e.offsetLeft) ?? 0, c = (e == null ? void 0 : e.offsetTop) ?? 0, w = (e == null ? void 0 : e.width) ?? (document.documentElement.clientWidth || window.innerWidth), r = (e == null ? void 0 : e.height) ?? (document.documentElement.clientHeight || window.innerHeight), a = l + w, y = c + r, s = 8, u = 8, o = (t.querySelector(".hys-ui-slider-handle") ?? t).getBoundingClientRect();
+      let _ = l, W = c, F = a, H = y;
+      for (const { element: v, x: G, y: I } of L) {
+        const b = v.getBoundingClientRect();
+        G && (_ = Math.max(_, b.left + v.clientLeft), F = Math.min(
+          F,
+          b.left + v.clientLeft + (v.clientWidth || b.width)
+        )), I && (W = Math.max(W, b.top + v.clientTop), H = Math.min(
+          H,
+          b.top + v.clientTop + (v.clientHeight || b.height)
+        ));
+      }
+      if (!o.width && !o.height || o.right <= _ || o.left >= F || o.bottom <= W || o.top >= H) {
+        R.value = { position: "fixed", visibility: "hidden" };
+        return;
+      }
+      n.style.maxWidth = Math.max(1, w - s * 2) + "px";
+      const f = z ?? n.getBoundingClientRect(), O = {
+        top: o.top - c - u - s,
+        bottom: y - o.bottom - u - s,
+        left: o.left - l - u - s,
+        right: a - o.right - u - s
+      }, U = {
+        top: "bottom",
+        bottom: "top",
+        left: "right",
+        right: "left"
+      };
+      let d = i.placement;
+      const D = U[d], $ = d === "top" || d === "bottom" ? f.height : f.width;
+      O[d] < $ && O[D] > O[d] && (d = D);
+      let E = o.left + (o.width - f.width) / 2, M = o.top + (o.height - f.height) / 2;
+      d === "top" ? M = o.top - f.height - u : d === "bottom" ? M = o.bottom + u : d === "left" ? E = o.left - f.width - u : E = o.right + u, E = Math.max(l + s, Math.min(E, a - f.width - s)), M = Math.max(c + s, Math.min(M, y - f.height - s)), X.value = d, R.value = {
+        ...S,
+        position: "fixed",
+        left: Math.round(E) + "px",
+        top: Math.round(M) + "px",
+        maxWidth: Math.max(1, w - s * 2) + "px",
+        visibility: "visible"
+      };
+    }
+    function m() {
+      p.value && h === void 0 && (h = requestAnimationFrame(Y));
+    }
+    function T() {
+      h !== void 0 && cancelAnimationFrame(h), h = void 0, Y();
+    }
+    function k() {
+      z = void 0, B(), m();
+    }
+    function V() {
+      x == null || x(), x = void 0, h !== void 0 && cancelAnimationFrame(h), h = void 0, z = void 0, L = [];
+    }
+    function j() {
+      var c, w;
+      if (V(), !p.value || !i.anchor || !g.value) return;
+      B(), window.addEventListener("scroll", m, !0), window.addEventListener("resize", k), (c = window.visualViewport) == null || c.addEventListener("scroll", m), (w = window.visualViewport) == null || w.addEventListener("resize", k);
+      const t = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver((r) => {
+        var a;
+        for (const y of r)
+          if (y.target === g.value) {
+            const s = (a = y.borderBoxSize) == null ? void 0 : a[0];
+            z = s ? { width: s.inlineSize, height: s.blockSize } : void 0;
+          }
+        T();
+      });
+      t == null || t.observe(i.anchor), t == null || t.observe(g.value), i.container && (t == null || t.observe(i.container));
+      const n = () => {
+        var r, a;
+        return [
+          (r = i.container) == null ? void 0 : r.getAttribute("style"),
+          (a = i.container) == null ? void 0 : a.getAttribute("class"),
+          C.value["data-hys-theme"]
+        ].join("|");
+      };
+      let e = n();
+      const l = typeof MutationObserver > "u" ? void 0 : new MutationObserver(() => {
+        const r = n();
+        r !== e && (e = r, B(), m());
+      });
+      i.container && (l == null || l.observe(i.container, {
+        attributes: !0,
+        attributeFilter: ["style", "class", "data-hys-theme"]
+      })), x = () => {
+        var r, a;
+        window.removeEventListener("scroll", m, !0), window.removeEventListener("resize", k), (r = window.visualViewport) == null || r.removeEventListener("scroll", m), (a = window.visualViewport) == null || a.removeEventListener("resize", k), t == null || t.disconnect(), l == null || l.disconnect();
+      }, m();
+    }
+    return P(
+      () => [i.anchor, i.container, g.value, p.value],
+      j,
+      { flush: "post" }
+    ), P(() => [i.position, i.placement], T, { flush: "post" }), P(
+      () => C.value["data-hys-theme"],
+      () => {
+        B(), T();
+      },
+      { flush: "post" }
+    ), K(() => {
+      p.value = !0, Q(j);
+    }), Z(() => {
+      p.value = !1, V();
+    }), ee(V), (t, n) => (N(), te(ie, { to: "body" }, [
+      p.value ? (N(), oe("span", ne({
+        key: 0,
+        id: q.id,
+        ref_key: "panel",
+        ref: g
+      }, le(C), {
+        class: ["hys-ui-slider-tooltip", "hys-ui-slider-tooltip-" + X.value],
+        role: "tooltip",
+        style: R.value
+      }), [
+        se(t.$slots, "default", {}, void 0, !0)
+      ], 16, ce)) : re("", !0)
+    ]));
+  }
+});
+export {
+  fe as default
+};

package/dist/components/HysSplitPane/HysSplitPane.vue.js

@@ -1,65 +1,71 @@
-import { defineComponent as x, ref as E, computed as L, onDeactivated as g, onBeforeUnmount as A, openBlock as b, createElementBlock as M, mergeProps as k, unref as B, createElementVNode as d, renderSlot as v } from "vue";
-import { useHysRootAttrs as V } from "../../config.js";
-const R = { class: "hys-ui-ent-split-first" }, D = ["tabindex", "aria-orientation", "aria-valuenow", "aria-valuemin", "aria-valuemax"], P = { class: "hys-ui-ent-split-second" }, H = /* @__PURE__ */ x({
+import { defineComponent as g, ref as M, computed as v, watch as z, onDeactivated as B, onBeforeUnmount as P, openBlock as V, createElementBlock as C, mergeProps as D, unref as I, createElementVNode as h, renderSlot as w } from "vue";
+import { useHysRootAttrs as N } from "../../config.js";
+const R = { class: "hys-ui-ent-split-first" }, F = ["tabindex", "aria-disabled", "aria-orientation", "aria-valuenow", "aria-valuemin", "aria-valuemax"], H = { class: "hys-ui-ent-split-second" }, K = /* @__PURE__ */ g({
   __name: "HysSplitPane",
   props: {
     modelValue: { default: 40 },
     min: { default: 15 },
     max: { default: 85 },
     vertical: { type: Boolean, default: !1 },
-    disabled: { type: Boolean }
+    disabled: { type: Boolean },
+    step: { default: 2 }
   },
-  emits: ["update:modelValue"],
-  setup(i, { emit: p }) {
-    const h = V(), t = i, u = p, s = E(), l = L(() => Math.min(t.max, Math.max(t.min, t.modelValue)));
-    let o = () => {
+  emits: ["update:modelValue", "resizeStart", "resizeEnd"],
+  setup(l, { emit: E }) {
+    const a = l, d = E, x = N(), c = M(), s = v(() => Math.max(0, Math.min(100, Number.isFinite(a.min) ? a.min : 0))), m = v(() => Math.max(s.value, Math.min(100, Number.isFinite(a.max) ? a.max : 100))), p = (e) => Math.max(s.value, Math.min(m.value, Number.isFinite(e) ? e : s.value)), u = v(() => p(a.modelValue));
+    let r = () => {
     };
-    g(() => o()), A(() => o());
-    function f(n) {
-      if (o(), !s.value || t.disabled) return;
-      const e = n.currentTarget;
-      e.setPointerCapture(n.pointerId);
-      const r = s.value.getBoundingClientRect(), c = (m) => {
-        const w = t.vertical ? (m.clientY - r.top) / r.height * 100 : (m.clientX - r.left) / r.width * 100;
-        u("update:modelValue", Math.round(Math.max(t.min, Math.min(t.max, w))));
-      }, a = () => {
-        e.removeEventListener("pointermove", c), e.removeEventListener("pointerup", a), e.removeEventListener("pointercancel", a), e.removeEventListener("lostpointercapture", a), o = () => {
-        };
+    z(() => [a.disabled, a.vertical, a.min, a.max], () => r()), B(() => r()), P(() => r());
+    function L(e) {
+      if (r(), !c.value || a.disabled || e.button !== 0) return;
+      const t = e.currentTarget, n = c.value.getBoundingClientRect(), f = a.vertical, y = f ? n.height : n.width;
+      if (!y) return;
+      e.preventDefault(), t.setPointerCapture(e.pointerId), d("resizeStart");
+      const b = (o) => {
+        if (a.disabled || o.pointerId !== e.pointerId) return;
+        const A = (f ? o.clientY - n.top : o.clientX - n.left) / y * 100;
+        d("update:modelValue", Math.round(p(A)));
+      }, i = () => {
+        var o;
+        r = () => {
+        }, t.removeEventListener("pointermove", b), t.removeEventListener("pointerup", i), t.removeEventListener("pointercancel", i), t.removeEventListener("lostpointercapture", i), (o = t.hasPointerCapture) != null && o.call(t, e.pointerId) && t.releasePointerCapture(e.pointerId), d("resizeEnd", u.value);
       };
-      o = a, e.addEventListener("lostpointercapture", a), e.addEventListener("pointermove", c), e.addEventListener("pointerup", a), e.addEventListener("pointercancel", a);
+      r = i, t.addEventListener("pointermove", b), t.addEventListener("pointerup", i), t.addEventListener("pointercancel", i), t.addEventListener("lostpointercapture", i);
     }
-    function y(n) {
-      if (t.disabled) return;
-      const e = n.shiftKey ? 10 : 2;
-      ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown"].includes(n.key) && (n.preventDefault(), u("update:modelValue", Math.max(t.min, Math.min(t.max, l.value + (["ArrowRight", "ArrowDown"].includes(n.key) ? e : -e)))));
+    function k(e) {
+      if (a.disabled || !["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", "Home", "End"].includes(e.key)) return;
+      e.preventDefault();
+      const t = (Number.isFinite(a.step) && a.step > 0 ? a.step : 2) * (e.shiftKey ? 5 : 1), n = e.key === "Home" ? s.value : e.key === "End" ? m.value : u.value + (["ArrowRight", "ArrowDown"].includes(e.key) ? t : -t);
+      d("update:modelValue", p(n));
     }
-    return (n, e) => (b(), M("div", k(B(h), {
+    return (e, t) => (V(), C("div", D(I(x), {
       ref_key: "host",
-      ref: s,
-      class: ["hys-ui-ent-split", { "hys-ui-vertical": i.vertical }],
-      style: { "--hys-ui-split": l.value + "%" }
+      ref: c,
+      class: ["hys-ui-ent-split", { "hys-ui-vertical": l.vertical }],
+      style: { "--hys-ui-split": u.value + "%" }
     }), [
-      d("div", R, [
-        v(n.$slots, "first")
+      h("div", R, [
+        w(e.$slots, "first")
       ]),
-      d("div", {
+      h("div", {
         class: "hys-ui-ent-split-handle",
         role: "separator",
-        tabindex: i.disabled ? -1 : 0,
+        tabindex: l.disabled ? -1 : 0,
         "aria-label": "调整面板比例",
-        "aria-orientation": i.vertical ? "horizontal" : "vertical",
-        "aria-valuenow": l.value,
-        "aria-valuemin": i.min,
-        "aria-valuemax": i.max,
-        onPointerdown: f,
-        onKeydown: y
-      }, null, 40, D),
-      d("div", P, [
-        v(n.$slots, "second")
+        "aria-disabled": l.disabled || void 0,
+        "aria-orientation": l.vertical ? "horizontal" : "vertical",
+        "aria-valuenow": u.value,
+        "aria-valuemin": s.value,
+        "aria-valuemax": m.value,
+        onPointerdown: L,
+        onKeydown: k
+      }, null, 40, F),
+      h("div", H, [
+        w(e.$slots, "second")
       ])
     ], 16));
   }
 });
 export {
-  H as default
+  K as default
 };

package/dist/components/HysSteps/HysSteps.vue.js

@@ -1,7 +1,7 @@
 import o from "./HysSteps2.vue.js";
 /* empty css              */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-111d19b5"]]);
+const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-aee36fc0"]]);
 export {
-  m as default
+  s as default
 };

package/dist/components/HysSteps/HysSteps2.vue.js

@@ -1,53 +1,128 @@
-import { defineComponent as k, openBlock as s, createElementBlock as c, mergeProps as d, unref as n, Fragment as l, renderList as f, normalizeClass as m, createElementVNode as u, createBlock as i, createTextVNode as b, toDisplayString as o, createCommentVNode as g } from "vue";
-import { useHysRootAttrs as v } from "../../config.js";
-import { Check as C, CircleAlert as B } from "lucide-vue-next";
-const p = ["aria-current"], z = ["disabled", "onClick"], A = { key: 1 }, N = { key: 2 }, D = /* @__PURE__ */ k({
+import { defineComponent as H, ref as N, computed as f, openBlock as a, createElementBlock as i, mergeProps as S, unref as m, Fragment as A, renderList as M, normalizeClass as P, createElementVNode as B, renderSlot as y, createBlock as $, createTextVNode as h, toDisplayString as p, createCommentVNode as C } from "vue";
+import { Check as R, CircleAlert as V } from "lucide-vue-next";
+import { useHysRootAttrs as F } from "../../config.js";
+const K = ["aria-label"], U = ["aria-current"], q = {
+  class: "hys-ui-step-marker",
+  "aria-hidden": "true"
+}, I = {
+  key: 0,
+  class: "hys-ui-step-dot"
+}, O = { class: "hys-ui-step-content" }, T = ["data-step-index", "disabled", "tabindex", "onClick", "onKeydown"], j = { key: 1 }, G = {
+  key: 2,
+  class: "hys-ui-step-subtitle"
+}, J = {
+  key: 3,
+  class: "hys-ui-step-description"
+}, Y = /* @__PURE__ */ H({
   __name: "HysSteps",
   props: {
     items: {},
-    current: {},
+    current: { default: 0 },
     vertical: { type: Boolean },
     clickable: { type: Boolean },
-    status: {}
+    disabled: { type: Boolean },
+    status: { default: "process" },
+    size: { default: "md" },
+    labelPlacement: { default: "right" },
+    progressDot: { type: Boolean },
+    simple: { type: Boolean },
+    responsive: { type: Boolean, default: !0 },
+    ariaLabel: {}
   },
   emits: ["update:current", "change"],
-  setup(e, { emit: y }) {
-    const h = v(), a = y;
-    return (V, j) => (s(), c("ol", d(n(h), {
-      class: ["hys-ui-ex-steps", { "hys-ui-steps-vertical": e.vertical }],
-      "aria-label": "流程进度"
+  setup(s, { emit: D }) {
+    const u = s, v = D, L = F(), k = N(), b = f(() => u.items.map((e) => typeof e == "string" ? { title: e } : e)), c = f(() => Number.isFinite(u.current) ? Math.max(-1, Math.min(u.items.length, Math.trunc(u.current))) : 0), o = f(() => b.value.map((e, n) => !u.disabled && !e.disabled ? n : -1).filter((e) => e >= 0));
+    function r(e) {
+      var n;
+      return ((n = b.value[e]) == null ? void 0 : n.status) ?? (e < c.value ? "finish" : e === c.value ? u.status : "wait");
+    }
+    function g(e) {
+      !u.clickable || !o.value.includes(e) || e === c.value || (v("update:current", e), v("change", e));
+    }
+    function E(e, n) {
+      var z, w;
+      if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(e.key) || !o.value.length) return;
+      e.preventDefault();
+      const l = ["ArrowLeft", "ArrowUp"].includes(e.key) ? -1 : 1, t = o.value.indexOf(n), d = e.key === "Home" ? 0 : e.key === "End" ? o.value.length - 1 : (t + l + o.value.length) % o.value.length;
+      (w = (z = k.value) == null ? void 0 : z.querySelector('[data-step-index="' + o.value[d] + '"]')) == null || w.focus(), g(o.value[d]);
+    }
+    return (e, n) => (a(), i("ol", S({
+      ref_key: "root",
+      ref: k
+    }, m(L), {
+      class: ["hys-ui-ex-steps", ["hys-ui-steps-size-" + s.size, { "hys-ui-steps-vertical": s.vertical, "hys-ui-steps-bottom": s.labelPlacement === "bottom", "hys-ui-steps-dots": s.progressDot, "hys-ui-steps-simple": s.simple, "hys-ui-steps-responsive": s.responsive }]],
+      "aria-label": s.ariaLabel || "流程进度"
     }), [
-      (s(!0), c(l, null, f(e.items, (t, r) => (s(), c("li", {
-        key: r,
-        class: m({ "hys-ui-done": r < e.current, "hys-ui-active": r === e.current, "hys-ui-step-error": r === e.current && e.status === "error" }),
-        "aria-current": r === e.current ? "step" : void 0
+      (a(!0), i(A, null, M(b.value, (l, t) => (a(), i("li", {
+        key: t,
+        class: P(["hys-ui-step-" + r(t), { "hys-ui-done": r(t) === "finish", "hys-ui-active": r(t) === "process", "hys-ui-step-disabled": s.disabled || l.disabled }]),
+        "aria-current": t === c.value ? "step" : void 0
       }, [
-        u("span", null, [
-          r < e.current || r === e.current && e.status === "finish" ? (s(), i(n(C), {
-            key: 0,
-            size: 14
-          })) : r === e.current && e.status === "error" ? (s(), i(n(B), {
-            key: 1,
-            size: 14
-          })) : (s(), c(l, { key: 2 }, [
-            b(o(r + 1), 1)
-          ], 64))
+        B("span", q, [
+          y(e.$slots, "icon", {
+            item: l,
+            index: t,
+            status: r(t)
+          }, () => [
+            s.progressDot ? (a(), i("i", I)) : r(t) === "finish" ? (a(), $(m(R), {
+              key: 1,
+              size: s.size === "sm" ? 12 : 15
+            }, null, 8, ["size"])) : r(t) === "error" ? (a(), $(m(V), {
+              key: 2,
+              size: s.size === "sm" ? 12 : 15
+            }, null, 8, ["size"])) : (a(), i(A, { key: 3 }, [
+              h(p(t + 1), 1)
+            ], 64))
+          ], !0)
         ]),
-        u("div", null, [
-          e.clickable ? (s(), c("button", {
+        B("div", O, [
+          s.clickable ? (a(), i("button", {
             key: 0,
             type: "button",
-            disabled: typeof t == "object" && t.disabled,
-            onClick: (E) => {
-              a("update:current", r), a("change", r);
-            }
-          }, o(typeof t == "string" ? t : t.title), 9, z)) : (s(), c("strong", A, o(typeof t == "string" ? t : t.title), 1)),
-          typeof t == "object" && t.description ? (s(), c("small", N, o(t.description), 1)) : g("", !0)
+            "data-step-index": t,
+            disabled: s.disabled || l.disabled,
+            tabindex: (o.value.includes(c.value) ? c.value : o.value[0]) === t ? 0 : -1,
+            onClick: (d) => g(t),
+            onKeydown: (d) => E(d, t)
+          }, [
+            y(e.$slots, "title", {
+              item: l,
+              index: t,
+              status: r(t)
+            }, () => [
+              h(p(l.title), 1)
+            ], !0)
+          ], 40, T)) : (a(), i("strong", j, [
+            y(e.$slots, "title", {
+              item: l,
+              index: t,
+              status: r(t)
+            }, () => [
+              h(p(l.title), 1)
+            ], !0)
+          ])),
+          l.subtitle || e.$slots.subtitle ? (a(), i("small", G, [
+            y(e.$slots, "subtitle", {
+              item: l,
+              index: t
+            }, () => [
+              h(p(l.subtitle), 1)
+            ], !0)
+          ])) : C("", !0),
+          !s.simple && (l.description || e.$slots.description) ? (a(), i("div", J, [
+            y(e.$slots, "description", {
+              item: l,
+              index: t,
+              status: r(t)
+            }, () => [
+              h(p(l.description), 1)
+            ], !0)
+          ])) : C("", !0)
         ])
-      ], 10, p))), 128))
-    ], 16));
+      ], 10, U))), 128))
+    ], 16, K));
   }
 });
 export {
-  D as default
+  Y as default
 };

package/dist/components/HysSwitch/HysSwitch.vue.js

@@ -1,7 +1,7 @@
 import o from "./HysSwitch2.vue.js";
 /* empty css               */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-eab5d9ff"]]);
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-89733ae0"]]);
 export {
-  m as default
+  p as default
 };