hys-ui 0.1.0 → 0.2.0

package/dist/components/HysSegmented/HysSegmented2.vue.js

@@ -1,4 +1,275 @@
-import f from "./HysSegmented.vue.js";
+import { defineComponent as le, ref as D, useAttrs as ie, useId as re, inject as oe, computed as k, watch as ne, nextTick as W, onMounted as ue, onActivated as se, onDeactivated as de, onBeforeUnmount as ce, openBlock as b, createElementBlock as w, mergeProps as ve, unref as l, createElementVNode as G, normalizeStyle as J, Fragment as me, renderList as fe, normalizeClass as ye, renderSlot as E, createBlock as be, resolveDynamicComponent as he, toRaw as ge, createCommentVNode as L, createTextVNode as Q, toDisplayString as M } from "vue";
+import { useHysRootAttrs as ke } from "../../config.js";
+import { fieldKey as we, useHysControlState as Ae } from "../../composables/formContext.js";
+import { useChoiceModel as Be, useChoiceNativeReset as pe } from "../../composables/choiceModel.js";
+import { choiceOptions as xe, choiceKey as A } from "../../composables/choice.js";
+const Oe = ["id", "data-status", "aria-label", "aria-orientation", "aria-disabled", "aria-readonly", "aria-required", "aria-invalid", "aria-describedby"], je = ["data-key", "data-value", "disabled", "aria-disabled", "aria-checked", "tabindex", "title", "onClick"], Ce = { class: "hys-ui-segment-label" }, Ee = {
+  key: 0,
+  class: "hys-ui-segment-empty"
+}, Le = ["name", "form", "value", "disabled"], Ve = ["id"], Te = /* @__PURE__ */ le({
+  inheritAttrs: !1,
+  __name: "HysSegmented",
+  props: {
+    modelValue: {},
+    defaultValue: {},
+    options: {},
+    fieldNames: {},
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    block: { type: Boolean },
+    vertical: { type: Boolean },
+    direction: {},
+    size: {},
+    round: { type: Boolean },
+    keyboard: { type: Boolean, default: !0 },
+    loopNavigation: { type: Boolean, default: !0 },
+    focusable: { type: Boolean, default: !0 },
+    autofocus: { type: Boolean },
+    ariaLabel: {},
+    name: {},
+    form: {},
+    status: {},
+    error: {},
+    emptyText: { default: "暂无选项" }
+  },
+  emits: ["update:modelValue", "change", "focus", "blur"],
+  setup(r, { expose: X, emit: Y }) {
+    const i = r, x = Y, o = D(), O = ie(), Z = ke(), I = re(), s = oe(we, void 0), { disabled: c, size: K, label: _ } = Ae(i), m = k(
+      () => xe(
+        i.options ?? [],
+        i.fieldNames
+      )
+    ), j = Be(
+      i,
+      () => {
+        var e;
+        return i.defaultValue === void 0 ? ((e = m.value.find((a) => !a.disabled)) == null ? void 0 : e.value) ?? null : i.defaultValue;
+      }
+    ), n = j.current, U = k(
+      () => m.value.find((e) => Object.is(e.value, n.value))
+    ), V = k(
+      () => i.direction ? i.direction === "vertical" : i.vertical
+    ), z = k(
+      () => m.value.filter((e) => !e.disabled)
+    ), $ = k(
+      () => {
+        var e, a;
+        return ((e = z.value.find((d) => Object.is(d.value, n.value))) == null ? void 0 : e.value) ?? ((a = z.value[0]) == null ? void 0 : a.value);
+      }
+    ), P = k(
+      () => {
+        var e, a;
+        return i.error || (e = s == null ? void 0 : s.invalid) != null && e.value ? "error" : i.status ?? ((a = s == null ? void 0 : s.status) == null ? void 0 : a.value);
+      }
+    ), N = D({ opacity: 0 }), B = D(!1);
+    let f = !0, y, h, g;
+    function F() {
+      var e;
+      return Array.from(
+        ((e = o.value) == null ? void 0 : e.querySelectorAll(
+          ":scope > .hys-ui-segment-option"
+        )) ?? []
+      );
+    }
+    function ee() {
+      if (h = void 0, !f || !o.value) return;
+      const e = F().find(
+        (a) => a.dataset.key === A(n.value)
+      );
+      if (!e || !o.value.getClientRects().length) {
+        N.value = { opacity: 0 };
+        return;
+      }
+      N.value = {
+        opacity: 1,
+        transform: "translate3d(" + e.offsetLeft + "px," + e.offsetTop + "px,0)",
+        width: e.offsetWidth + "px",
+        height: e.offsetHeight + "px"
+      }, !B.value && g === void 0 && (g = requestAnimationFrame(() => {
+        g = void 0, f && (B.value = !0);
+      }));
+    }
+    function C() {
+      f && h === void 0 && (h = requestAnimationFrame(ee));
+    }
+    function R() {
+      y == null || y.disconnect(), y = void 0, window.removeEventListener("resize", C), h !== void 0 && cancelAnimationFrame(h), g !== void 0 && cancelAnimationFrame(g), h = g = void 0;
+    }
+    function S() {
+      if (!(!f || !o.value)) {
+        if (R(), typeof ResizeObserver < "u") {
+          y = new ResizeObserver(C), y.observe(o.value);
+          const e = F().find(
+            (a) => a.dataset.key === A(n.value)
+          );
+          e && y.observe(e);
+        } else window.addEventListener("resize", C);
+        C();
+      }
+    }
+    async function T(e) {
+      return c.value || i.readonly || !j.isLive() || !m.value.some(
+        (a) => Object.is(a.value, e) && !a.disabled
+      ) ? !1 : j.commit(
+        e,
+        (a) => x("update:modelValue", a),
+        (a) => x("change", a),
+        !0
+      );
+    }
+    function H(e) {
+      var d;
+      if (c.value || !i.focusable) return;
+      const a = e ?? $.value;
+      (d = F().find(
+        (v) => v.dataset.key === A(a) && !v.disabled
+      )) == null || d.focus();
+    }
+    function ae() {
+      var e, a;
+      (e = o.value) != null && e.contains(document.activeElement) && ((a = document.activeElement) == null || a.blur());
+    }
+    function te(e) {
+      if (!i.keyboard || e.defaultPrevented || c.value || i.readonly || ![
+        "ArrowLeft",
+        "ArrowRight",
+        "ArrowUp",
+        "ArrowDown",
+        "Home",
+        "End"
+      ].includes(e.key) || e.target !== o.value && !(e.target instanceof HTMLButtonElement && e.target.parentElement === o.value))
+        return;
+      e.preventDefault();
+      const a = z.value;
+      if (!a.length) return;
+      const d = o.value && getComputedStyle(o.value).direction === "rtl", v = e.key === "ArrowUp" || e.key === (d ? "ArrowRight" : "ArrowLeft"), p = e.target.dataset.key, t = p ? a.findIndex((q) => A(q.value) === p) : a.findIndex((q) => Object.is(q.value, n.value));
+      let u = e.key === "Home" ? 0 : e.key === "End" ? a.length - 1 : t < 0 ? v ? a.length - 1 : 0 : t + (v ? -1 : 1);
+      u = i.loopNavigation ? (u + a.length) % a.length : Math.max(0, Math.min(a.length - 1, u)), H(a[u].value), T(a[u].value);
+    }
+    return ne(
+      [n, m, V, K, () => i.block],
+      () => void W(S),
+      { flush: "post" }
+    ), pe(o, j.reset, void 0, () => i.form), ue(() => {
+      S(), i.autofocus && H();
+    }), se(() => {
+      f = !0, B.value = !1, W(S);
+    }), de(() => {
+      f = !1, B.value = !1, R();
+    }), ce(() => {
+      f = !1, R();
+    }), X({ element: o, value: n, focus: H, blur: ae, select: T }), (e, a) => {
+      var d, v, p;
+      return b(), w("div", ve({
+        ref_key: "root",
+        ref: o
+      }, { ...l(Z), ...l(O) }, {
+        id: l(O).id || ((d = l(s)) == null ? void 0 : d.id.value),
+        "data-hys-ui-field-managed": "",
+        class: ["hys-ui-ex-segment", [
+          "hys-ui-segment-" + l(K),
+          {
+            "hys-ui-segment-block": r.block,
+            "hys-ui-segment-vertical": V.value,
+            "hys-ui-segment-round": r.round,
+            "hys-ui-segment-disabled": l(c),
+            "hys-ui-segment-readonly": r.readonly,
+            "hys-ui-segment-animated": B.value
+          }
+        ]],
+        "data-status": P.value,
+        role: "radiogroup",
+        "aria-label": r.ariaLabel || l(O)["aria-label"] || l(_) || "分段选择",
+        "aria-orientation": V.value ? "vertical" : "horizontal",
+        "aria-disabled": l(c) || void 0,
+        "aria-readonly": r.readonly || void 0,
+        "aria-required": ((v = l(s)) == null ? void 0 : v.required.value) || void 0,
+        "aria-invalid": P.value === "error" || void 0,
+        "aria-describedby": [
+          l(O)["aria-describedby"],
+          r.error ? l(I) + "-error" : (p = l(s)) == null ? void 0 : p.describedBy.value
+        ].filter(Boolean).join(" ") || void 0,
+        onKeydown: te,
+        onFocusin: a[0] || (a[0] = (t) => {
+          var u;
+          return !((u = o.value) != null && u.contains(t.relatedTarget)) && x("focus", t);
+        }),
+        onFocusout: a[1] || (a[1] = (t) => {
+          var u;
+          return !((u = o.value) != null && u.contains(t.relatedTarget)) && x("blur", t);
+        })
+      }), [
+        G("span", {
+          class: "hys-ui-segment-indicator",
+          style: J(N.value),
+          "aria-hidden": "true"
+        }, null, 4),
+        (b(!0), w(me, null, fe(m.value, (t) => (b(), w("button", {
+          key: l(A)(t.value),
+          "data-key": l(A)(t.value),
+          "data-value": t.value,
+          type: "button",
+          class: ye(["hys-ui-segment-option", [
+            t.className,
+            { "hys-ui-active": Object.is(l(n), t.value) }
+          ]]),
+          style: J(t.style),
+          role: "radio",
+          disabled: l(c) || t.disabled,
+          "aria-disabled": r.readonly || void 0,
+          "aria-checked": Object.is(l(n), t.value),
+          tabindex: !l(c) && r.focusable && Object.is($.value, t.value) ? 0 : -1,
+          title: t.title,
+          onClick: (u) => T(t.value)
+        }, [
+          E(e.$slots, "icon", {
+            option: t,
+            checked: Object.is(l(n), t.value)
+          }, () => [
+            t.icon ? (b(), be(he(ge(t.icon)), {
+              key: 0,
+              class: "hys-ui-segment-icon",
+              "aria-hidden": "true"
+            })) : L("", !0)
+          ], !0),
+          G("span", Ce, [
+            E(e.$slots, "label", {
+              option: t,
+              checked: Object.is(l(n), t.value)
+            }, () => [
+              E(e.$slots, "default", {
+                item: t,
+                option: t,
+                checked: Object.is(l(n), t.value)
+              }, () => [
+                Q(M(t.label), 1)
+              ], !0)
+            ], !0)
+          ])
+        ], 14, je))), 128)),
+        m.value.length ? L("", !0) : (b(), w("span", Ee, [
+          E(e.$slots, "empty", {}, () => [
+            Q(M(r.emptyText), 1)
+          ], !0)
+        ])),
+        r.name && U.value && !U.value.disabled ? (b(), w("input", {
+          key: 1,
+          type: "hidden",
+          name: r.name,
+          form: r.form,
+          value: String(l(n)),
+          disabled: l(c)
+        }, null, 8, Le)) : L("", !0),
+        r.error ? (b(), w("small", {
+          key: 2,
+          id: l(I) + "-error",
+          class: "hys-ui-segment-error",
+          role: "alert"
+        }, M(r.error), 9, Ve)) : L("", !0)
+      ], 16, Oe);
+    };
+  }
+});
 export {
-  f as default
+  Te as default
 };

package/dist/components/HysSelect/HysSelect.vue.js

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