hys-ui 0.1.1 → 0.2.0

package/dist/components/HysSearch/HysSearch.vue.js

@@ -1,7 +1,8 @@
-import { defineComponent as C, ref as v, watch as p, onBeforeUnmount as x, onDeactivated as N, openBlock as s, createElementBlock as V, mergeProps as w, unref as m, createBlock as g, createElementVNode as z, withKeys as L, createVNode as A, createCommentVNode as E } from "vue";
-import { LoaderCircle as F, Search as H, X as K } from "lucide-vue-next";
-import { useHysRootAttrs as R } from "../../config.js";
-const S = ["value", "placeholder", "disabled", "readonly", "aria-label"], M = /* @__PURE__ */ C({
+import { defineComponent as L, ref as v, watch as V, onBeforeUnmount as N, onDeactivated as w, openBlock as f, createElementBlock as g, mergeProps as z, unref as n, createBlock as k, createElementVNode as H, withKeys as S, createVNode as A, createCommentVNode as D } from "vue";
+import { useHysControlState as E } from "../../composables/formContext.js";
+import { LoaderCircle as F, Search as K, X as R } from "lucide-vue-next";
+import { useHysRootAttrs as T } from "../../config.js";
+const I = ["value", "placeholder", "disabled", "readonly", "aria-label"], $ = /* @__PURE__ */ L({
   __name: "HysSearch",
   props: {
     modelValue: {},
@@ -14,70 +15,70 @@ const S = ["value", "placeholder", "disabled", "readonly", "aria-label"], M = /*
     ariaLabel: {}
   },
   emits: ["update:modelValue", "search", "clear", "focus", "blur"],
-  setup(a, { expose: k, emit: B }) {
-    const t = a, i = B, h = R(), r = v(), d = v(!1);
-    let y, u;
-    function n() {
-      clearTimeout(y), y = void 0, u = void 0;
+  setup(a, { expose: B, emit: C }) {
+    const r = a, { disabled: u, label: h } = E(r), i = C, x = T(), d = v(), s = v(!1);
+    let y, m;
+    function t() {
+      clearTimeout(y), y = void 0, m = void 0;
     }
-    function c(e) {
-      n(), t.disabled || i("search", e);
+    function b(e) {
+      t(), u.value || i("search", e);
     }
-    function f(e) {
-      t.disabled || t.readonly || d.value || (n(), u = e, i("update:modelValue", e), y = setTimeout(() => c(e), Number.isFinite(t.delay) ? Math.max(0, t.delay) : 300));
+    function c(e) {
+      u.value || r.readonly || s.value || (t(), m = e, i("update:modelValue", e), y = setTimeout(() => b(e), Number.isFinite(r.delay) ? Math.max(0, r.delay) : 300));
     }
-    return p(() => [t.disabled, t.readonly], n, { flush: "sync" }), p(() => t.modelValue, (e) => {
-      u !== void 0 && e !== u && n();
-    }), x(n), N(n), k({ focus: () => {
+    return V(() => [u.value, r.readonly], t, { flush: "sync" }), V(() => r.modelValue, (e) => {
+      m !== void 0 && e !== m && t();
+    }), N(t), w(t), B({ focus: () => {
       var e;
-      return (e = r.value) == null ? void 0 : e.focus();
+      return (e = d.value) == null ? void 0 : e.focus();
     }, blur: () => {
       var e;
-      return (e = r.value) == null ? void 0 : e.blur();
-    } }), (e, l) => (s(), V("div", w(m(h), { class: "hys-ui-ex-search" }), [
-      a.loading ? (s(), g(m(F), {
+      return (e = d.value) == null ? void 0 : e.blur();
+    } }), (e, l) => (f(), g("div", z(n(x), { class: "hys-ui-ex-search" }), [
+      a.loading ? (f(), k(n(F), {
         key: 0,
         class: "hys-ui-icon-spin",
         size: 16
-      })) : (s(), g(m(H), {
+      })) : (f(), k(n(K), {
         key: 1,
         size: 16,
         "aria-hidden": "true"
       })),
-      z("input", {
+      H("input", {
         ref_key: "input",
-        ref: r,
+        ref: d,
         type: "search",
         value: a.modelValue,
         placeholder: a.placeholder,
-        disabled: a.disabled,
+        disabled: n(u),
         readonly: a.readonly,
-        "aria-label": a.ariaLabel || "搜索",
-        onInput: l[0] || (l[0] = (o) => f(o.target.value)),
+        "aria-label": a.ariaLabel || n(h) || "搜索",
+        onInput: l[0] || (l[0] = (o) => c(o.target.value)),
         onCompositionstart: l[1] || (l[1] = (o) => {
-          d.value = !0, n();
+          s.value = !0, t();
         }),
         onCompositionend: l[2] || (l[2] = (o) => {
-          d.value = !1, f(o.target.value);
+          s.value = !1, c(o.target.value);
         }),
-        onKeydown: l[3] || (l[3] = L((o) => !o.isComposing && o.keyCode !== 229 && !d.value && c(a.modelValue), ["enter"])),
+        onKeydown: l[3] || (l[3] = S((o) => !o.isComposing && o.keyCode !== 229 && !s.value && b(a.modelValue), ["enter"])),
         onFocus: l[4] || (l[4] = (o) => i("focus", o)),
         onBlur: l[5] || (l[5] = (o) => i("blur", o))
-      }, null, 40, S),
-      a.clearable && a.modelValue && !a.disabled && !a.readonly ? (s(), V("button", {
+      }, null, 40, I),
+      a.clearable && a.modelValue && !n(u) && !a.readonly ? (f(), g("button", {
         key: 2,
         type: "button",
         "aria-label": "清空搜索",
         onClick: l[6] || (l[6] = (o) => {
-          var b;
-          f(""), i("clear"), (b = r.value) == null || b.focus();
+          var p;
+          c(""), i("clear"), (p = d.value) == null || p.focus();
         })
       }, [
-        A(m(K), { size: 14 })
-      ])) : E("", !0)
+        A(n(R), { size: 14 })
+      ])) : D("", !0)
     ], 16));
   }
 });
 export {
-  M as default
+  $ as default
 };

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

@@ -1,65 +1,7 @@
-import { defineComponent as x, ref as V, computed as y, openBlock as n, createElementBlock as r, mergeProps as A, unref as p, Fragment as L, renderList as w, normalizeStyle as z, normalizeClass as S, renderSlot as B, createTextVNode as C, toDisplayString as H } from "vue";
-import { useHysRootAttrs as E } from "../../config.js";
-const R = ["aria-label"], D = ["data-value", "disabled", "aria-checked", "tabindex", "onClick"], F = /* @__PURE__ */ x({
-  __name: "HysSegmented",
-  props: {
-    modelValue: {},
-    options: {},
-    disabled: { type: Boolean },
-    block: { type: Boolean },
-    size: {},
-    ariaLabel: {}
-  },
-  emits: ["update:modelValue", "change"],
-  setup(t, { emit: v }) {
-    const g = E(), d = t, s = v, u = V(), c = y(() => d.options.filter((e) => !d.disabled && !e.disabled)), h = y(() => {
-      var e, a;
-      return ((e = c.value.find((l) => l.value === d.modelValue)) == null ? void 0 : e.value) ?? ((a = c.value[0]) == null ? void 0 : a.value);
-    });
-    function f(e) {
-      var l;
-      if (d.disabled || (l = d.options.find((o) => o.value === e)) != null && l.disabled) return;
-      const a = e !== d.modelValue;
-      s("update:modelValue", e), a && s("change", e);
-    }
-    function k(e) {
-      var m, b;
-      if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key) || d.disabled) return;
-      const a = d.options.filter((i) => !i.disabled);
-      if (!a.length) return;
-      e.preventDefault();
-      const l = a.findIndex((i) => i.value === d.modelValue), o = a[e.key === "Home" ? 0 : e.key === "End" ? a.length - 1 : l < 0 ? e.key === "ArrowLeft" ? a.length - 1 : 0 : (l + (e.key === "ArrowLeft" ? -1 : 1) + a.length) % a.length];
-      f(o.value), (b = Array.from(((m = u.value) == null ? void 0 : m.querySelectorAll("button")) || []).find((i) => i.dataset.value === o.value)) == null || b.focus();
-    }
-    return (e, a) => (n(), r("div", A({
-      ref_key: "root",
-      ref: u
-    }, p(g), {
-      class: "hys-ui-ex-segment",
-      role: "radiogroup",
-      "aria-label": t.ariaLabel || "分段选择",
-      style: { display: t.block ? "flex" : void 0 },
-      onKeydown: k
-    }), [
-      (n(!0), r(L, null, w(t.options, (l) => (n(), r("button", {
-        key: l.value,
-        "data-value": l.value,
-        type: "button",
-        role: "radio",
-        disabled: t.disabled || l.disabled,
-        "aria-checked": t.modelValue === l.value,
-        tabindex: h.value === l.value ? 0 : -1,
-        class: S({ "hys-ui-active": t.modelValue === l.value }),
-        style: z({ flex: t.block ? 1 : void 0, padding: t.size === "sm" ? "5px 10px" : t.size === "lg" ? "12px 20px" : void 0 }),
-        onClick: (o) => f(l.value)
-      }, [
-        B(e.$slots, "label", { option: l }, () => [
-          C(H(l.label), 1)
-        ])
-      ], 14, D))), 128))
-    ], 16, R));
-  }
-});
+import e from "./HysSegmented2.vue.js";
+/* empty css                  */
+import o from "../../_virtual/_plugin-vue_export-helper.js";
+const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-ce15ba8e"]]);
 export {
-  F as default
+  a as default
 };

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 c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-eb19a68c"]]);
+const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-6d43948d"]]);
 export {
-  c as default
+  s as default
 };