hys-ui 0.1.1 → 0.3.0

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

@@ -1,82 +1,207 @@
-import { defineComponent as q, useId as V, ref as A, openBlock as u, createElementBlock as t, mergeProps as B, unref as y, Fragment as w, renderList as x, normalizeClass as C, createElementVNode as s, renderSlot as D, createTextVNode as E, toDisplayString as S } from "vue";
-import { useHysRootAttrs as L } from "../../config.js";
-const R = ["aria-label", "aria-disabled", "aria-readonly", "aria-required"], z = ["name", "value", "checked", "disabled", "required", "onChange"], F = /* @__PURE__ */ q({
+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: {},
+    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: { default: "md" },
-    ariaLabel: {}
+    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(e, { expose: m, emit: b }) {
-    const i = e, o = b, f = L(), v = V(), n = A();
-    function h(r) {
-      var a;
-      if (i.disabled || i.readonly || r.disabled) {
-        (a = n.value) == null || a.querySelectorAll("input").forEach((d, k) => {
-          var c;
-          return d.checked = ((c = i.options[k]) == null ? void 0 : c.value) === i.modelValue;
-        });
-        return;
+  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;
       }
-      const l = r.value !== i.modelValue;
-      o("update:modelValue", r.value), l && o("change", r.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 g(r) {
-      i.readonly && [" ", "Enter", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(r.key) && r.preventDefault();
+    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 m({ focus: () => {
-      var l, a, d;
-      (d = ((l = n.value) == null ? void 0 : l.querySelector("input:checked:not(:disabled)")) || ((a = n.value) == null ? void 0 : a.querySelector("input:not(:disabled)"))) == null || d.focus();
-    } }), (r, l) => (u(), t("div", B({
-      ref_key: "root",
-      ref: n
-    }, y(f), {
-      class: ["hys-ui-ex-radio", ["hys-ui-radio-" + e.size, { "hys-ui-radio-disabled": e.disabled, "hys-ui-radio-readonly": e.readonly }]],
-      role: "radiogroup",
-      "aria-label": e.ariaLabel || "单选组",
-      "aria-disabled": e.disabled || void 0,
-      "aria-readonly": e.readonly || void 0,
-      "aria-required": e.required || void 0,
-      style: { flexDirection: e.vertical ? "column" : void 0 },
-      onKeydown: g
-    }), [
-      (u(!0), t(w, null, x(e.options, (a) => (u(), t("label", {
-        key: a.value,
-        class: C(["hys-ui-radio-option", { "hys-ui-radio-option-disabled": !e.disabled && a.disabled }])
-      }, [
-        s("input", {
-          class: "hys-ui-radio-native",
-          type: "radio",
-          name: e.name || y(v),
-          value: a.value,
-          checked: e.modelValue === a.value,
-          disabled: e.disabled || a.disabled,
-          required: e.required,
-          onClick: l[0] || (l[0] = (d) => e.readonly && d.preventDefault()),
-          onChange: (d) => h(a),
-          onFocus: l[1] || (l[1] = (d) => o("focus", d)),
-          onBlur: l[2] || (l[2] = (d) => o("blur", d))
-        }, null, 40, z),
-        l[3] || (l[3] = s("span", {
-          class: "hys-ui-radio-box",
-          "aria-hidden": "true"
-        }, null, -1)),
-        s("span", null, [
-          D(r.$slots, "label", { option: a }, () => [
-            E(S(a.label), 1)
-          ], !0)
-        ])
-      ], 2))), 128))
-    ], 16, R));
+    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
 };