hys-ui 0.1.0 → 0.2.0

package/dist/components/HysRadio/HysRadio2.vue.js

@@ -0,0 +1,180 @@
+import { defineComponent as Y, inject as M, useAttrs as Z, ref as p, useId as g, computed as d, watch as _, onMounted as ee, onActivated as ae, onDeactivated as te, onBeforeUnmount as le, openBlock as O, createElementBlock as R, mergeProps as I, unref as l, createElementVNode as S, renderSlot as $, createTextVNode as oe, toDisplayString as K, createCommentVNode as ie } from "vue";
+import { fieldKey as re, useHysControlState as de } from "../../composables/formContext.js";
+import { radioGroupKey as ue, isChoice as se } from "../../composables/choice.js";
+import { useChoiceModel as ne, useChoiceNativeReset as ve } from "../../composables/choiceModel.js";
+import { useHysRootAttrs as ce } from "../../config.js";
+const fe = ["data-status"], be = ["id", "data-hys-ui-radio-controlled", "name", "form", "value", "checked", "disabled", "required", "aria-readonly", "aria-label", "aria-invalid", "aria-describedby", "tabindex"], me = {
+  class: "hys-ui-radio-box",
+  "aria-hidden": "true"
+}, ye = { class: "hys-ui-radio-label" }, he = ["id"], Ee = /* @__PURE__ */ Y({
+  inheritAttrs: !1,
+  __name: "HysRadio",
+  props: {
+    modelValue: { default: void 0 },
+    defaultValue: { default: void 0 },
+    value: { default: void 0 },
+    label: {},
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    size: {},
+    button: { type: Boolean, default: void 0 },
+    border: { type: Boolean, default: void 0 },
+    buttonStyle: {},
+    name: {},
+    form: {},
+    required: { type: Boolean },
+    ariaLabel: {},
+    tabindex: {},
+    focusable: { type: Boolean, default: !0 },
+    autofocus: { type: Boolean },
+    error: {},
+    status: {}
+  },
+  emits: ["update:modelValue", "change", "focus", "blur"],
+  setup(i, { expose: T, emit: U }) {
+    const t = i, m = U, e = M(ue, void 0), s = M(re, void 0), y = Z(), W = ce(), u = p(), q = g(), A = de(t), x = ne(
+      t,
+      () => t.defaultValue ?? null
+    ), n = d(() => se(t.value) ? t.value : "on"), v = d(
+      () => (e ? e.value.value : x.current.value) === n.value
+    ), h = d(() => A.disabled.value || !!(e != null && e.disabled.value)), C = d(() => t.readonly || (e == null ? void 0 : e.readonly.value)), F = d(() => t.size ?? (e == null ? void 0 : e.size.value) ?? A.size.value), G = d(() => t.button ?? (e == null ? void 0 : e.button.value) ?? !1), P = d(() => t.border ?? (e == null ? void 0 : e.border.value) ?? !1), J = d(
+      () => t.buttonStyle ? t.buttonStyle === "solid" : (e == null ? void 0 : e.solid.value) ?? !1
+    ), E = d(
+      () => {
+        var a, o;
+        return t.error || t.status === "error" || !e && ((a = s == null ? void 0 : s.invalid) != null && a.value) ? "error" : t.status ?? (e == null ? void 0 : e.status.value) ?? ((o = s == null ? void 0 : s.status) == null ? void 0 : o.value);
+      }
+    );
+    function c() {
+      u.value && (u.value.checked = v.value);
+    }
+    async function j() {
+      var k, V;
+      if (!x.isLive() || h.value || C.value || v.value)
+        return c(), !1;
+      const a = e == null ? void 0 : e.select(n.value);
+      e && m("change", n.value);
+      const o = a ? await a : await x.commit(
+        n.value,
+        (r) => m("update:modelValue", r),
+        (r) => m("change", r),
+        !0
+      );
+      c();
+      const B = (k = u.value) == null ? void 0 : k.name;
+      if (!e && B)
+        for (const r of document.getElementsByName(B))
+          r instanceof HTMLInputElement && r.type === "radio" && r.form === ((V = u.value) == null ? void 0 : V.form) && r.hasAttribute("data-hys-ui-radio-controlled") && r.dispatchEvent(new Event("hys-ui-radio-sync"));
+      return o;
+    }
+    let b;
+    function w() {
+      e && !b && (b = e.register({
+        input: u,
+        value: d(() => n.value),
+        disabled: d(() => !!t.disabled),
+        locked: d(() => !!t.disabled || !!t.readonly)
+      }));
+    }
+    function z() {
+      b == null || b(), b = void 0;
+    }
+    _(v, c, { flush: "post" }), ve(
+      u,
+      x.reset,
+      c,
+      () => t.form ?? (e == null ? void 0 : e.form.value)
+    ), ee(() => {
+      var a;
+      c(), w(), t.autofocus && !h.value && ((a = u.value) == null || a.focus());
+    }), ae(w), te(z), le(z);
+    const Q = () => Object.fromEntries(
+      Object.entries(y).filter(
+        ([a]) => a === "id" || a.startsWith("aria-")
+      )
+    ), X = () => Object.fromEntries(
+      Object.entries(y).filter(
+        ([a]) => a !== "id" && !a.startsWith("aria-")
+      )
+    );
+    return T({
+      input: u,
+      checked: v,
+      focus: (a) => {
+        var o;
+        h.value || (o = u.value) == null || o.focus(a);
+      },
+      blur: () => {
+        var a;
+        return (a = u.value) == null ? void 0 : a.blur();
+      },
+      select: j
+    }), (a, o) => {
+      var B, k, V, r, H, N, D, L;
+      return O(), R("label", I({ ...l(W), ...X() }, {
+        class: ["hys-ui-radio-option", [
+          "hys-ui-radio-" + F.value,
+          {
+            "hys-ui-radio-option-disabled": h.value,
+            "hys-ui-radio-option-readonly": C.value,
+            "hys-ui-radio-bordered": P.value,
+            "hys-ui-radio-button": G.value,
+            "hys-ui-radio-solid": J.value,
+            "hys-ui-radio-selected": v.value,
+            "hys-ui-radio-error": E.value === "error"
+          }
+        ]],
+        "data-status": E.value,
+        onMousedown: o[3] || (o[3] = (f) => !i.focusable && f.preventDefault())
+      }), [
+        S("input", I({
+          ref_key: "input",
+          ref: u
+        }, Q(), {
+          class: "hys-ui-radio-native",
+          type: "radio",
+          id: l(y).id || (l(e) || (B = l(s)) == null ? void 0 : B.id.value),
+          "data-hys-ui-field-managed": "",
+          "data-hys-ui-radio-controlled": i.modelValue !== void 0 ? "" : void 0,
+          name: ((k = l(e)) == null ? void 0 : k.name.value) || i.name,
+          form: i.form || ((V = l(e)) == null ? void 0 : V.form.value),
+          value: String(n.value),
+          checked: v.value,
+          disabled: h.value,
+          required: i.required || ((r = l(e)) == null ? void 0 : r.required.value) || !l(e) && ((H = l(s)) == null ? void 0 : H.required.value),
+          "aria-readonly": C.value || void 0,
+          "aria-label": i.ariaLabel || l(y)["aria-label"] || i.label || (!i.label && !a.$slots.default && !l(e) ? (N = l(s)) == null ? void 0 : N.label.value : void 0),
+          "aria-invalid": E.value === "error" || void 0,
+          "aria-describedby": [
+            l(y)["aria-describedby"],
+            i.error ? l(q) : void 0,
+            l(e) || (D = l(s)) == null ? void 0 : D.describedBy.value
+          ].filter(Boolean).join(" ") || void 0,
+          tabindex: i.focusable ? i.tabindex ?? ((L = l(e)) == null ? void 0 : L.tabindex(n.value)) : -1,
+          onClick: o[0] || (o[0] = (f) => C.value && f.preventDefault()),
+          onChange: j,
+          onHysUiRadioSync: c,
+          onFocus: o[1] || (o[1] = (f) => m("focus", f)),
+          onBlur: o[2] || (o[2] = (f) => m("blur", f))
+        }), null, 16, be),
+        S("span", me, [
+          $(a.$slots, "icon", { checked: v.value }, void 0, !0)
+        ]),
+        S("span", ye, [
+          $(a.$slots, "default", {}, () => [
+            oe(K(i.label), 1)
+          ], !0)
+        ]),
+        i.error ? (O(), R("small", {
+          key: 0,
+          id: l(q),
+          class: "hys-ui-radio-error-text",
+          role: "alert"
+        }, K(i.error), 9, he)) : ie("", !0)
+      ], 16, fe);
+    };
+  }
+});
+export {
+  Ee as default
+};

package/dist/components/HysRadioGroup/HysRadioGroup.vue.js

@@ -1,42 +1,7 @@
-import { defineComponent as u, useId as s, openBlock as t, createElementBlock as l, mergeProps as c, unref as o, Fragment as m, renderList as v, createElementVNode as b, createTextVNode as h, toDisplayString as p } from "vue";
-import { useHysRootAttrs as y } from "../../config.js";
-const g = ["aria-label"], f = ["name", "value", "checked", "disabled", "onChange"], L = /* @__PURE__ */ u({
-  __name: "HysRadioGroup",
-  props: {
-    modelValue: {},
-    options: {},
-    name: {},
-    disabled: { type: Boolean },
-    vertical: { type: Boolean },
-    ariaLabel: {}
-  },
-  emits: ["update:modelValue", "change"],
-  setup(a, { emit: i }) {
-    const r = y(), d = s(), n = i;
-    return (V, k) => (t(), l("div", c(o(r), {
-      class: "hys-ui-ex-radio",
-      role: "radiogroup",
-      "aria-label": a.ariaLabel || "单选组",
-      style: { flexDirection: a.vertical ? "column" : void 0 }
-    }), [
-      (t(!0), l(m, null, v(a.options, (e) => (t(), l("label", {
-        key: e.value
-      }, [
-        b("input", {
-          type: "radio",
-          name: a.name || o(d),
-          value: e.value,
-          checked: a.modelValue === e.value,
-          disabled: a.disabled || e.disabled,
-          onChange: (x) => {
-            n("update:modelValue", e.value), n("change", e.value);
-          }
-        }, null, 40, f),
-        h(" " + p(e.label), 1)
-      ]))), 128))
-    ], 16, g));
-  }
-});
+import o from "./HysRadioGroup2.vue.js";
+/* empty css                   */
+import r from "../../_virtual/_plugin-vue_export-helper.js";
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-f34c441a"]]);
 export {
-  L as default
+  f as default
 };

package/dist/components/HysRadioGroup/HysRadioGroup2.vue.js

@@ -1,4 +1,207 @@
-import f from "./HysRadioGroup.vue.js";
+import { defineComponent as z, inject as $, useAttrs as W, ref as J, useId as Q, computed as s, shallowRef as X, provide as Y, onMounted as Z, openBlock as b, createElementBlock as p, mergeProps as _, unref as u, Fragment as D, renderList as ee, createBlock as ae, withCtx as re, renderSlot as N, createTextVNode as L, toDisplayString as w, createCommentVNode as E, createElementVNode as te } from "vue";
+import oe from "../HysRadio/HysRadio.vue.js";
+import { useHysControlState as le, fieldKey as ie } from "../../composables/formContext.js";
+import { choiceOptions as ue, radioGroupKey as de, choiceKey as ne } from "../../composables/choice.js";
+import { useChoiceModel as se, useChoiceNativeReset as ce } from "../../composables/choiceModel.js";
+import { useHysRootAttrs as ve } from "../../config.js";
+const fe = ["id", "aria-label", "aria-disabled", "aria-readonly", "aria-required", "aria-invalid", "aria-describedby"], ye = {
+  key: 0,
+  class: "hys-ui-radio-empty"
+}, me = { class: "hys-ui-radio-empty" }, be = ["id"], Be = /* @__PURE__ */ z({
+  inheritAttrs: !1,
+  __name: "HysRadioGroup",
+  props: {
+    modelValue: { default: void 0 },
+    defaultValue: { default: void 0 },
+    options: {},
+    fieldNames: {},
+    name: {},
+    form: {},
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    required: { type: Boolean },
+    vertical: { type: Boolean },
+    size: {},
+    ariaLabel: {},
+    type: { default: "radio" },
+    buttonStyle: { default: "outline" },
+    border: { type: Boolean },
+    block: { type: Boolean },
+    loopNavigation: { type: Boolean, default: !0 },
+    autofocus: { type: Boolean },
+    error: {},
+    status: {},
+    emptyText: { default: "暂无选项" }
+  },
+  emits: ["update:modelValue", "change", "focus", "blur"],
+  setup(d, { expose: H, emit: I }) {
+    const t = d, h = I, { disabled: m, size: T, label: O } = le(t), n = $(ie, void 0), g = W(), M = ve(), f = J(), B = Q(), k = se(
+      t,
+      () => t.defaultValue ?? null
+    ), y = k.current, q = s(
+      () => ue(t.options ?? [], t.fieldNames)
+    ), c = X([]), F = s(() => t.name || B), x = s(
+      () => {
+        var e, a;
+        return t.error || (e = n == null ? void 0 : n.invalid) != null && e.value || t.status === "error" ? "error" : t.status ?? ((a = n == null ? void 0 : n.status) == null ? void 0 : a.value);
+      }
+    ), C = () => [...c.value].sort((e, a) => {
+      const o = e.input.value, l = a.input.value;
+      return o && l ? o.compareDocumentPosition(l) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : o === l ? 0 : 1 : 0;
+    }), K = () => C().filter(
+      (e) => {
+        var a;
+        return !((a = e.input.value) != null && a.disabled) && !e.locked.value;
+      }
+    );
+    function A() {
+      for (const e of c.value)
+        e.input.value && (e.input.value.checked = e.value.value === y.value);
+    }
+    async function V(e) {
+      if (!k.isLive() || m.value || t.readonly) return !1;
+      const a = c.value.find((i) => i.value.value === e), o = q.value.find((i) => i.value === e);
+      if (!a && !o || a != null && a.locked.value || o != null && o.disabled)
+        return A(), !1;
+      const l = await k.commit(
+        e,
+        (i) => h("update:modelValue", i),
+        (i) => h("change", i),
+        !0
+      );
+      return A(), l;
+    }
+    function P(e) {
+      const a = c.value.filter((l) => !l.disabled.value), o = a.find((l) => l.value.value === y.value) ?? a[0];
+      return (o == null ? void 0 : o.value.value) === e ? 0 : -1;
+    }
+    function R(e) {
+      var o, l;
+      if (m.value) return;
+      const a = C().filter((i) => {
+        var r;
+        return !((r = i.input.value) != null && r.disabled);
+      });
+      (l = (o = a.find((i) => i.value.value === (e ?? y.value)) ?? a[0]) == null ? void 0 : o.input.value) == null || l.focus();
+    }
+    function G() {
+      var a;
+      const e = document.activeElement;
+      (a = f.value) != null && a.contains(e) && (e == null || e.blur());
+    }
+    function U(e) {
+      var v, S;
+      if (![
+        "ArrowDown",
+        "ArrowUp",
+        "ArrowLeft",
+        "ArrowRight",
+        "Home",
+        "End"
+      ].includes(e.key) || e.target.tagName !== "INPUT" || (e.preventDefault(), m.value || t.readonly)) return;
+      const a = K();
+      if (!a.length) return;
+      const o = a.findIndex(
+        (j) => j.input.value === e.target
+      ), l = f.value && getComputedStyle(f.value).direction === "rtl", i = e.key === "ArrowDown" || e.key === (l ? "ArrowLeft" : "ArrowRight") ? 1 : -1;
+      let r = e.key === "Home" ? 0 : e.key === "End" ? a.length - 1 : o < 0 ? i > 0 ? 0 : a.length - 1 : o + i;
+      t.loopNavigation ? r = (r + a.length) % a.length : r = Math.max(0, Math.min(a.length - 1, r)), (v = a[r].input.value) == null || v.focus(), (S = a[r].input.value) == null || S.click();
+    }
+    return Y(de, {
+      value: y,
+      disabled: m,
+      readonly: s(() => !!t.readonly),
+      required: s(() => !!t.required || !!(n != null && n.required.value)),
+      size: T,
+      button: s(() => t.type === "button"),
+      border: s(() => !!t.border),
+      solid: s(() => t.buttonStyle === "solid"),
+      name: F,
+      form: s(() => t.form),
+      status: x,
+      select: V,
+      tabindex: P,
+      register: (e) => (c.value = [...c.value, e], () => {
+        c.value = c.value.filter((a) => a !== e);
+      })
+    }), ce(f, k.reset, A, () => t.form), Z(() => {
+      t.autofocus && R();
+    }), H({ value: y, focus: R, blur: G, select: V }), (e, a) => {
+      var o, l, i;
+      return b(), p("div", _({
+        ref_key: "root",
+        ref: f
+      }, { ...u(M), ...u(g) }, {
+        id: u(g).id || ((o = u(n)) == null ? void 0 : o.id.value),
+        "data-hys-ui-field-managed": "",
+        class: ["hys-ui-ex-radio", [
+          "hys-ui-radio-" + u(T),
+          {
+            "hys-ui-radio-disabled": u(m),
+            "hys-ui-radio-readonly": d.readonly,
+            "hys-ui-radio-vertical": d.vertical,
+            "hys-ui-radio-block": d.block
+          }
+        ]],
+        role: "radiogroup",
+        "aria-label": d.ariaLabel || u(g)["aria-label"] || u(O) || "单选组",
+        "aria-disabled": u(m) || void 0,
+        "aria-readonly": d.readonly || void 0,
+        "aria-required": d.required || ((l = u(n)) == null ? void 0 : l.required.value) || void 0,
+        "aria-invalid": x.value === "error" || void 0,
+        "aria-describedby": [
+          u(g)["aria-describedby"],
+          d.error ? u(B) + "-error" : (i = u(n)) == null ? void 0 : i.describedBy.value
+        ].filter(Boolean).join(" ") || void 0,
+        onKeydown: U,
+        onFocusin: a[0] || (a[0] = (r) => {
+          var v;
+          return !((v = f.value) != null && v.contains(r.relatedTarget)) && h("focus", r);
+        }),
+        onFocusout: a[1] || (a[1] = (r) => {
+          var v;
+          return !((v = f.value) != null && v.contains(r.relatedTarget)) && h("blur", r);
+        })
+      }), [
+        t.options !== void 0 ? (b(), p(D, { key: 0 }, [
+          (b(!0), p(D, null, ee(q.value, (r) => (b(), ae(oe, {
+            key: u(ne)(r.value),
+            value: r.value,
+            disabled: r.disabled,
+            required: d.required
+          }, {
+            default: re(() => [
+              N(e.$slots, "label", {
+                option: r,
+                checked: u(y) === r.value
+              }, () => [
+                L(w(r.label), 1)
+              ], !0)
+            ]),
+            _: 2
+          }, 1032, ["value", "disabled", "required"]))), 128)),
+          q.value.length ? E("", !0) : (b(), p("span", ye, [
+            N(e.$slots, "empty", {}, () => [
+              L(w(d.emptyText), 1)
+            ], !0)
+          ]))
+        ], 64)) : N(e.$slots, "default", { value: u(y) }, () => [
+          te("span", me, [
+            N(e.$slots, "empty", {}, () => [
+              L(w(d.emptyText), 1)
+            ], !0)
+          ])
+        ], !0, 1),
+        d.error ? (b(), p("small", {
+          key: 2,
+          id: u(B) + "-error",
+          class: "hys-ui-radio-group-error",
+          role: "alert"
+        }, w(d.error), 9, be)) : E("", !0)
+      ], 16, fe);
+    };
+  }
+});
 export {
-  f as default
+  Be as default
 };

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

@@ -1,7 +1,7 @@
 import o from "./HysRating2.vue.js";
 /* empty css               */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-80786dbb"]]);
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-59bceb0b"]]);
 export {
   p as default
 };