hys-ui 0.1.0 → 0.2.0

package/dist/components/HysRating/HysRating2.vue.js

@@ -1,85 +1,305 @@
-import { defineComponent as g, ref as V, openBlock as i, createElementBlock as n, mergeProps as v, unref as u, Fragment as k, renderList as A, normalizeClass as B, renderSlot as C, createElementVNode as H, createVNode as c, createCommentVNode as y, toDisplayString as M } from "vue";
-import { Star as h } from "lucide-vue-next";
-import { useHysRootAttrs as L } from "../../config.js";
-const R = ["tabindex", "aria-label", "aria-valuenow", "aria-valuemax", "aria-readonly", "aria-disabled"], S = ["disabled", "aria-label", "aria-pressed", "onMousemove", "onClick"], D = { class: "hys-ui-rating-star" }, E = {
-  key: 0,
-  class: "hys-ui-rating-half-fill"
-}, z = {
-  key: 0,
-  class: "hys-ui-rating-score"
-}, K = /* @__PURE__ */ g({
+import { defineComponent as ue, ref as U, useAttrs as ne, inject as se, useId as de, computed as s, watch as ce, onMounted as ve, onDeactivated as he, onBeforeUnmount as fe, openBlock as h, createElementBlock as g, mergeProps as me, unref as r, Fragment as ye, renderList as be, withModifiers as ge, normalizeClass as X, createElementVNode as M, normalizeStyle as N, renderSlot as D, toDisplayString as S, createBlock as G, resolveDynamicComponent as J, toRaw as R, createTextVNode as we, createCommentVNode as E } from "vue";
+import { Star as B } from "lucide-vue-next";
+import { useHysRootAttrs as xe } from "../../config.js";
+import { fieldKey as ke, useHysControlState as Ce } from "../../composables/formContext.js";
+import { useChoiceModel as Ve, useChoiceNativeReset as Me } from "../../composables/choiceModel.js";
+import { ratingLevel as O } from "../../composables/rating.js";
+const Se = ["id", "data-status", "tabindex", "aria-label", "aria-valuenow", "aria-valuemax", "aria-valuetext", "aria-readonly", "aria-disabled", "aria-required", "aria-invalid", "aria-describedby"], Be = ["disabled", "aria-disabled", "aria-label", "title", "onMousemove", "onClick"], Te = {
+  class: "hys-ui-rating-figure",
+  "aria-hidden": "true"
+}, pe = { key: 0 }, ze = { key: 0 }, Ae = ["name", "form", "value", "disabled"], He = ["id"], Fe = /* @__PURE__ */ ue({
+  inheritAttrs: !1,
   __name: "HysRating",
   props: {
     modelValue: {},
-    max: { default: 5 },
+    defaultValue: { default: 0 },
+    max: {},
+    count: {},
+    size: {},
+    iconSize: {},
     readonly: { type: Boolean },
     disabled: { type: Boolean },
     allowClear: { type: Boolean, default: !0 },
+    clearable: { type: Boolean, default: void 0 },
     allowHalf: { type: Boolean },
     showScore: { type: Boolean },
-    ariaLabel: {}
+    showText: { type: Boolean },
+    texts: {},
+    scoreTemplate: { default: "{value}" },
+    formatScore: {},
+    textColor: {},
+    color: {},
+    colors: {},
+    lowThreshold: { default: 2 },
+    highThreshold: { default: 4 },
+    voidColor: {},
+    disabledVoidColor: {},
+    icon: {},
+    icons: {},
+    voidIcon: {},
+    disabledVoidIcon: {},
+    character: {},
+    tooltips: {},
+    hoverValue: {},
+    keyboard: { type: Boolean, default: !0 },
+    autofocus: { type: Boolean },
+    focusable: { type: Boolean, default: !0 },
+    ariaLabel: {},
+    formatValueText: {},
+    name: {},
+    form: {},
+    status: {},
+    error: {}
   },
-  emits: ["update:modelValue", "change"],
-  setup(e, { emit: f }) {
-    const t = e, d = f, b = L(), r = V(0);
-    function w(a) {
-      if (t.disabled || t.readonly) return;
-      const o = t.allowClear && a === t.modelValue ? 0 : a;
-      d("update:modelValue", o), d("change", o);
+  emits: ["update:modelValue", "change", "clear", "update:hoverValue", "hoverChange", "focus", "blur", "keydown"],
+  setup(l, { expose: Q, emit: W }) {
+    const a = l, b = W, d = U(), k = ne(), Y = xe(), f = se(ke, void 0), F = de(), { disabled: i, size: Z, label: _ } = Ce(a), T = U(null), c = s(() => {
+      const e = a.max ?? a.count ?? 5;
+      return Number.isFinite(e) ? Math.min(1e3, Math.max(0, Math.floor(e))) : 5;
+    }), C = (e) => typeof e == "number" && Number.isFinite(e) ? Math.max(0, Math.min(c.value, e)) : 0, w = Ve(a, () => a.defaultValue), m = s(() => C(w.current.value)), p = s(
+      () => a.hoverValue === void 0 ? T.value : a.hoverValue
+    ), u = s(
+      () => i.value || a.readonly || p.value === null ? m.value : C(p.value)
+    ), z = s(() => a.clearable ?? a.allowClear), $ = s(
+      () => {
+        var e, t;
+        return a.error || (e = f == null ? void 0 : f.invalid) != null && e.value ? "error" : a.status ?? ((t = f == null ? void 0 : f.status) == null ? void 0 : t.value);
+      }
+    ), ee = s(
+      () => a.color ?? O(
+        a.colors,
+        u.value,
+        a.lowThreshold,
+        a.highThreshold,
+        "var(--hys-ui-rating-fill-color,#f5ad36)"
+      )
+    ), q = s(
+      () => O(
+        a.icons,
+        u.value,
+        a.lowThreshold,
+        a.highThreshold,
+        a.icon ?? B
+      )
+    ), ae = s(
+      () => i.value ? a.disabledVoidIcon ?? a.voidIcon ?? a.icon ?? B : a.voidIcon ?? a.icon ?? B
+    ), te = s(() => {
+      try {
+        return a.formatScore ? a.formatScore(u.value) : a.scoreTemplate.replaceAll("{value}", String(u.value));
+      } catch {
+        return String(u.value);
+      }
+    }), P = s(
+      () => {
+        var e;
+        return a.showScore ? te.value : a.showText ? ((e = a.texts) == null ? void 0 : e[Math.ceil(u.value) - 1]) ?? "" : "";
+      }
+    ), le = s(() => {
+      var e;
+      try {
+        return ((e = a.formatValueText) == null ? void 0 : e.call(a, m.value, c.value)) ?? m.value + " / " + c.value;
+      } catch {
+        return m.value + " / " + c.value;
+      }
+    });
+    function A(e) {
+      if (e !== null && (i.value || a.readonly || !w.isLive()))
+        return;
+      const t = e === null ? null : C(e);
+      T.value === t && (a.hoverValue === void 0 || a.hoverValue === t) || (T.value = t, b("update:hoverValue", t), b("hoverChange", t));
     }
-    function m(a, o) {
-      const l = a.currentTarget.getBoundingClientRect();
-      return t.allowHalf && a.clientX - l.left < l.width / 2 ? o - 0.5 : o;
+    function y() {
+      A(null);
     }
-    function x(a) {
-      if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(a.key)) return;
-      a.preventDefault();
-      const o = a.key === "Home" ? 0 : a.key === "End" ? t.max : Math.min(t.max, Math.max(0, t.modelValue + (["ArrowLeft", "ArrowDown"].includes(a.key) ? -1 : 1) * (t.allowHalf ? 0.5 : 1)));
-      !t.disabled && !t.readonly && (d("update:modelValue", o), d("change", o));
+    async function V(e) {
+      if (i.value || a.readonly || !w.isLive() || !Number.isFinite(e) || !c.value)
+        return !1;
+      const t = a.allowHalf ? 0.5 : 1, n = C(Math.round(e / t) * t);
+      return w.commit(
+        n,
+        (v) => b("update:modelValue", v),
+        (v) => b("change", v),
+        !0
+      );
     }
-    return (a, o) => (i(), n("div", v(u(b), {
-      class: "hys-ui-ex-rating",
-      role: "slider",
-      tabindex: e.disabled ? -1 : 0,
-      "aria-label": e.ariaLabel || "评分",
-      "aria-valuenow": e.modelValue,
-      "aria-valuemin": 0,
-      "aria-valuemax": e.max,
-      "aria-readonly": e.readonly,
-      "aria-disabled": e.disabled,
-      onKeydown: x,
-      onMouseleave: o[0] || (o[0] = (l) => r.value = 0)
-    }), [
-      (i(!0), n(k, null, A(Math.max(0, Math.floor(e.max)), (l) => (i(), n("button", {
-        key: l,
-        type: "button",
-        tabindex: "-1",
-        disabled: e.readonly || e.disabled,
-        "aria-label": `${l} 星`,
-        "aria-pressed": e.modelValue === l,
-        class: B({ "hys-ui-active": l <= (r.value || e.modelValue), "hys-ui-rating-half": l - 0.5 === (r.value || e.modelValue) }),
-        onMousemove: (s) => !e.disabled && !e.readonly && (r.value = m(s, l)),
-        onClick: (s) => w(m(s, l))
-      }, [
-        C(a.$slots, "character", { value: l }, () => [
-          H("span", D, [
-            c(u(h), {
-              size: 20,
-              "aria-hidden": "true"
+    async function H() {
+      if (!z.value) return !1;
+      const e = await V(0);
+      return e && b("clear"), e;
+    }
+    function I(e) {
+      var t;
+      !i.value && a.focusable && ((t = d.value) == null || t.focus(e));
+    }
+    function oe() {
+      var e, t;
+      (e = d.value) != null && e.contains(document.activeElement) && ((t = document.activeElement) == null || t.blur());
+    }
+    function j(e, t) {
+      const n = e.currentTarget.getBoundingClientRect(), v = d.value && getComputedStyle(d.value).direction === "rtl", x = n.width ? (e.clientX - n.left) / n.width : 1;
+      return a.allowHalf && (v ? x > 0.5 : x < 0.5) ? t - 0.5 : t;
+    }
+    function re(e, t) {
+      if (i.value || a.readonly) return;
+      I({ preventScroll: !0 });
+      const n = j(e, t);
+      z.value && n === m.value ? H() : V(n);
+    }
+    function ie(e) {
+      if (b("keydown", e), e.defaultPrevented || !a.keyboard || i.value || a.readonly || e.target !== d.value)
+        return;
+      const t = d.value && getComputedStyle(d.value).direction === "rtl", n = e.key === "ArrowUp" || e.key === (t ? "ArrowLeft" : "ArrowRight"), v = e.key === "ArrowDown" || e.key === (t ? "ArrowRight" : "ArrowLeft");
+      n || v || e.key === "Home" || e.key === "End" ? (e.preventDefault(), y(), V(
+        e.key === "Home" ? 0 : e.key === "End" ? c.value : m.value + (n ? 1 : -1) * (a.allowHalf ? 0.5 : 1)
+      )) : z.value && (e.key === "Delete" || e.key === "Backspace") && (e.preventDefault(), y(), H());
+    }
+    return ce([i, () => a.readonly, c], y), Me(
+      d,
+      () => {
+        w.reset(), y();
+      },
+      void 0,
+      () => a.form
+    ), ve(() => {
+      a.autofocus && I();
+    }), he(y), fe(y), Q({
+      element: d,
+      value: m,
+      hoverValue: p,
+      focus: I,
+      blur: oe,
+      setValue: V,
+      clear: H,
+      setCurrentValue: (e) => A(e),
+      resetCurrentValue: y
+    }), (e, t) => {
+      var n, v, x;
+      return h(), g("div", me({
+        ref_key: "root",
+        ref: d
+      }, { ...r(Y), ...r(k) }, {
+        id: r(k).id || ((n = r(f)) == null ? void 0 : n.id.value),
+        "data-hys-ui-field-managed": "",
+        class: ["hys-ui-ex-rating", [
+          "hys-ui-rating-" + r(Z),
+          {
+            "hys-ui-rating-disabled": r(i),
+            "hys-ui-rating-readonly": l.readonly
+          }
+        ]],
+        "data-status": $.value,
+        style: {
+          "--hys-ui-rating-size": l.iconSize && Number.isFinite(l.iconSize) ? Math.max(8, Math.min(128, l.iconSize)) + "px" : void 0
+        },
+        role: "slider",
+        tabindex: r(i) || !l.focusable || !c.value ? -1 : 0,
+        "aria-label": l.ariaLabel || r(k)["aria-label"] || r(_) || "评分",
+        "aria-valuenow": m.value,
+        "aria-valuemin": 0,
+        "aria-valuemax": c.value,
+        "aria-valuetext": le.value,
+        "aria-readonly": l.readonly || void 0,
+        "aria-disabled": r(i) || void 0,
+        "aria-required": ((v = r(f)) == null ? void 0 : v.required.value) || void 0,
+        "aria-invalid": $.value === "error" || void 0,
+        "aria-describedby": [
+          r(k)["aria-describedby"],
+          l.error ? r(F) + "-error" : (x = r(f)) == null ? void 0 : x.describedBy.value
+        ].filter(Boolean).join(" ") || void 0,
+        onKeydown: ie,
+        onMouseleave: y,
+        onFocus: t[1] || (t[1] = (o) => b("focus", o)),
+        onBlur: t[2] || (t[2] = (o) => {
+          y(), b("blur", o);
+        })
+      }), [
+        (h(!0), g(ye, null, be(c.value, (o) => {
+          var K;
+          return h(), g("button", {
+            key: o,
+            type: "button",
+            tabindex: "-1",
+            disabled: r(i),
+            "aria-disabled": l.readonly || void 0,
+            "aria-label": o + " 星",
+            title: (K = l.tooltips) == null ? void 0 : K[o - 1],
+            class: X({
+              "hys-ui-active": o <= u.value,
+              "hys-ui-rating-half": u.value > o - 1 && u.value < o
             }),
-            l - 0.5 === (r.value || e.modelValue) ? (i(), n("span", E, [
-              c(u(h), {
-                size: 20,
-                "aria-hidden": "true"
-              })
-            ])) : y("", !0)
-          ])
-        ], !0)
-      ], 42, S))), 128)),
-      e.showScore ? (i(), n("span", z, M(e.modelValue), 1)) : y("", !0)
-    ], 16, R));
+            onMousedown: t[0] || (t[0] = ge(() => {
+            }, ["prevent"])),
+            onMousemove: (L) => A(j(L, o)),
+            onClick: (L) => re(L, o)
+          }, [
+            M("span", Te, [
+              M("span", {
+                class: "hys-ui-rating-void",
+                style: N({
+                  color: r(i) ? l.disabledVoidColor ?? l.voidColor : l.voidColor,
+                  "--hys-ui-rating-part": Math.max(0, Math.min(1, u.value - o + 1)) * 100 + "%"
+                })
+              }, [
+                D(e.$slots, "character", {
+                  value: o,
+                  index: o - 1,
+                  fraction: Math.max(0, Math.min(1, u.value - o + 1)),
+                  filled: !1
+                }, () => [
+                  l.character ? (h(), g("span", pe, S(l.character), 1)) : (h(), G(J(R(ae.value)), { key: 1 }))
+                ], !0)
+              ], 4),
+              M("span", {
+                class: X(["hys-ui-rating-fill", { "hys-ui-rating-default-fill": R(q.value) === r(B) }]),
+                style: N({
+                  width: Math.max(0, Math.min(1, u.value - o + 1)) * 100 + "%",
+                  color: ee.value
+                })
+              }, [
+                M("span", null, [
+                  D(e.$slots, "character", {
+                    value: o,
+                    index: o - 1,
+                    fraction: Math.max(0, Math.min(1, u.value - o + 1)),
+                    filled: !0
+                  }, () => [
+                    l.character ? (h(), g("span", ze, S(l.character), 1)) : (h(), G(J(R(q.value)), { key: 1 }))
+                  ], !0)
+                ])
+              ], 6)
+            ])
+          ], 42, Be);
+        }), 128)),
+        l.showText || l.showScore || e.$slots.text ? (h(), g("span", {
+          key: 0,
+          class: "hys-ui-rating-score",
+          style: N({ color: l.textColor })
+        }, [
+          D(e.$slots, "text", {
+            value: u.value,
+            text: P.value
+          }, () => [
+            we(S(P.value), 1)
+          ], !0)
+        ], 4)) : E("", !0),
+        l.name ? (h(), g("input", {
+          key: 1,
+          type: "hidden",
+          name: l.name,
+          form: l.form,
+          value: m.value,
+          disabled: r(i)
+        }, null, 8, Ae)) : E("", !0),
+        l.error ? (h(), g("small", {
+          key: 2,
+          id: r(F) + "-error",
+          class: "hys-ui-rating-error",
+          role: "alert"
+        }, S(l.error), 9, He)) : E("", !0)
+      ], 16, Se);
+    };
   }
 });
 export {
-  K as default
+  Fe as default
 };

package/dist/components/HysResizablePanel/HysResizablePanel.vue.js

@@ -1,48 +1,66 @@
-import { defineComponent as f, useModel as c, ref as o, openBlock as x, createElementBlock as b, mergeProps as W, unref as w, renderSlot as y, createElementVNode as M, withKeys as d, withModifiers as u, mergeModels as g } from "vue";
-import { useHysRootAttrs as P } from "../../config.js";
-const p = ["tabindex", "aria-valuemin", "aria-valuemax", "aria-valuenow"], B = /* @__PURE__ */ f({
+import { defineComponent as W, useModel as P, ref as k, computed as p, watch as z, onDeactivated as g, onBeforeUnmount as M, openBlock as E, createElementBlock as A, mergeProps as N, unref as B, renderSlot as C, createElementVNode as F, mergeModels as v } from "vue";
+import { useHysRootAttrs as H } from "../../config.js";
+const R = ["tabindex", "aria-disabled", "aria-valuemin", "aria-valuemax", "aria-valuenow"], I = /* @__PURE__ */ W({
   __name: "HysResizablePanel",
-  props: /* @__PURE__ */ g({
+  props: /* @__PURE__ */ v({
     minWidth: { default: 180 },
     maxWidth: { default: 1200 },
-    disabled: { type: Boolean }
+    disabled: { type: Boolean },
+    step: { default: 10 }
   }, {
     modelValue: { default: 320 },
     modelModifiers: {}
   }),
-  emits: ["update:modelValue"],
-  setup(e) {
-    const s = P(), n = e, a = c(e, "modelValue"), l = o(0), r = o(0);
-    function m(t) {
-      n.disabled || (l.value = t.clientX, r.value = a.value, t.currentTarget.setPointerCapture(t.pointerId));
+  emits: /* @__PURE__ */ v(["resizeStart", "resizeEnd"], ["update:modelValue"]),
+  setup(l, { emit: h }) {
+    const a = l, c = h, s = P(l, "modelValue"), b = H(), d = k(), n = p(() => Math.max(0, Number.isFinite(a.minWidth) ? a.minWidth : 0)), u = p(() => Math.max(n.value, Number.isFinite(a.maxWidth) ? a.maxWidth : 1200)), m = (e) => Math.max(n.value, Math.min(u.value, Number.isFinite(e) ? e : n.value)), o = p(() => m(s.value));
+    let t;
+    function r() {
+      var i, f;
+      const e = t;
+      t = void 0, e && ((f = (i = d.value) == null ? void 0 : i.hasPointerCapture) != null && f.call(i, e.pointer) && d.value.releasePointerCapture(e.pointer), c("resizeEnd", o.value));
     }
-    function v(t) {
-      t.currentTarget.hasPointerCapture(t.pointerId) && (a.value = Math.min(n.maxWidth, Math.max(n.minWidth, r.value + t.clientX - l.value)));
+    z(() => [a.disabled, a.minWidth, a.maxWidth], r), g(r), M(r);
+    function x(e) {
+      var i;
+      a.disabled || e.button !== 0 || (r(), e.preventDefault(), t = { pointer: e.pointerId, x: e.clientX, initial: o.value }, (i = d.value) == null || i.setPointerCapture(e.pointerId), c("resizeStart"));
     }
-    return (t, i) => (x(), b("div", W(w(s), {
+    function y(e) {
+      !t || a.disabled || t.pointer !== e.pointerId || (s.value = m(t.initial + e.clientX - t.x));
+    }
+    function w(e) {
+      if (a.disabled || !["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) return;
+      e.preventDefault();
+      const i = (Number.isFinite(a.step) && a.step > 0 ? a.step : 10) * (e.shiftKey ? 5 : 1);
+      s.value = e.key === "Home" ? n.value : e.key === "End" ? u.value : m(o.value + (e.key === "ArrowLeft" ? -i : i));
+    }
+    return (e, i) => (E(), A("div", N(B(b), {
       class: "hys-ui-ent-resizable",
-      style: { width: a.value + "px", minWidth: e.minWidth + "px" }
+      style: { width: o.value + "px", minWidth: n.value + "px", maxWidth: u.value + "px" }
     }), [
-      y(t.$slots, "default"),
-      M("div", {
+      C(e.$slots, "default"),
+      F("div", {
+        ref_key: "edge",
+        ref: d,
         class: "hys-ui-ent-resize-edge",
         role: "separator",
-        tabindex: e.disabled ? -1 : 0,
+        tabindex: l.disabled ? -1 : 0,
         "aria-label": "调整面板宽度",
         "aria-orientation": "vertical",
-        "aria-valuemin": e.minWidth,
-        "aria-valuemax": e.maxWidth,
-        "aria-valuenow": a.value,
-        onPointerdown: m,
-        onPointermove: v,
-        onKeydown: [
-          i[0] || (i[0] = d(u((h) => !e.disabled && (a.value = Math.max(e.minWidth, a.value - 10)), ["prevent"]), ["left"])),
-          i[1] || (i[1] = d(u((h) => !e.disabled && (a.value = Math.min(e.maxWidth, a.value + 10)), ["prevent"]), ["right"]))
-        ]
-      }, null, 40, p)
+        "aria-disabled": l.disabled || void 0,
+        "aria-valuemin": n.value,
+        "aria-valuemax": u.value,
+        "aria-valuenow": o.value,
+        onPointerdown: x,
+        onPointermove: y,
+        onPointerup: r,
+        onPointercancel: r,
+        onLostpointercapture: r,
+        onKeydown: w
+      }, null, 40, R)
     ], 16));
   }
 });
 export {
-  B as default
+  I as default
 };

package/dist/components/HysRichTextEditor/HysRichTextEditor.vue.js

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