hys-ui 0.1.0 → 0.2.0

package/dist/components/HysSwitch/HysSwitch2.vue.js

@@ -1,56 +1,249 @@
-import { defineComponent as h, ref as y, openBlock as i, createElementBlock as o, mergeProps as f, unref as c, createElementVNode as r, normalizeClass as b, createBlock as g, createCommentVNode as u, toDisplayString as v } from "vue";
-import { LoaderCircle as x } from "lucide-vue-next";
-import { useHysRootAttrs as V } from "../../config.js";
-const k = ["aria-label", "aria-checked", "aria-busy", "disabled"], C = { key: 0 }, z = /* @__PURE__ */ h({
+import { defineComponent as Z, useAttrs as p, ref as M, inject as _, useId as ee, computed as g, watch as O, onMounted as ae, openBlock as l, createElementBlock as d, mergeProps as R, unref as i, createElementVNode as A, toDisplayString as y, createCommentVNode as v, renderSlot as k, createBlock as B, resolveDynamicComponent as T, toRaw as z, Fragment as q, createTextVNode as $, createVNode as te } from "vue";
+import { LoaderCircle as ie } from "lucide-vue-next";
+import { fieldKey as ne, useHysControlState as le } from "../../composables/formContext.js";
+import { useChoiceModel as oe, useChoiceNativeReset as ue } from "../../composables/choiceModel.js";
+import { isChoice as K } from "../../composables/choice.js";
+import { useHysRootAttrs as re } from "../../config.js";
+const se = ["id", "data-status", "disabled", "tabindex", "autofocus", "aria-label", "aria-checked", "aria-readonly", "aria-busy", "aria-invalid", "aria-describedby"], ce = {
+  key: 0,
+  class: "hys-ui-switch-sizer",
+  "aria-hidden": "true"
+}, de = {
+  key: 1,
+  class: "hys-ui-switch-prompt",
+  "aria-hidden": "true"
+}, ve = {
+  class: "hys-ui-switch-thumb",
+  "aria-hidden": "true"
+}, fe = {
+  key: 0,
+  class: "hys-ui-switch-text"
+}, ye = ["name", "form", "value", "disabled"], he = ["id"], xe = /* @__PURE__ */ Z({
+  inheritAttrs: !1,
   __name: "HysSwitch",
   props: {
-    modelValue: { type: Boolean },
+    modelValue: { default: void 0 },
+    defaultValue: { default: void 0 },
+    activeValue: { default: void 0 },
+    inactiveValue: { default: void 0 },
     disabled: { type: Boolean },
+    readonly: { type: Boolean },
     loading: { type: Boolean },
+    size: {},
+    width: {},
+    round: { type: Boolean, default: !0 },
+    activeColor: {},
+    inactiveColor: {},
     activeText: {},
     inactiveText: {},
+    inlinePrompt: { type: Boolean },
+    activeIcon: {},
+    inactiveIcon: {},
+    activeActionIcon: {},
+    inactiveActionIcon: {},
     ariaLabel: {},
-    beforeChange: { type: Function }
+    name: {},
+    form: {},
+    tabindex: {},
+    autofocus: { type: Boolean },
+    focusable: { type: Boolean, default: !0 },
+    error: {},
+    status: {},
+    beforeChange: {}
   },
-  emits: ["update:modelValue", "change", "error"],
-  setup(e, { emit: s }) {
-    const a = e, l = s, d = V(), t = y(!1);
-    async function m() {
-      if (!(a.disabled || a.loading || t.value)) {
-        t.value = !0;
-        try {
-          if (a.beforeChange && await a.beforeChange() === !1) return;
-          l("update:modelValue", !a.modelValue), l("change", !a.modelValue);
-        } catch (n) {
-          l("error", n);
-        } finally {
-          t.value = !1;
-        }
+  emits: ["update:modelValue", "change", "error", "click", "focus", "blur"],
+  setup(e, { expose: G, emit: J }) {
+    const a = e, h = J, Q = re(), m = p(), I = M(), r = _(ne, void 0), { disabled: s, size: P, label: U } = le(a), x = M(!1), D = ee(), L = M(!1);
+    let C = 0, b;
+    function E() {
+      C++, b == null || b.abort(), b = void 0, x.value = !1;
+    }
+    const N = g(
+      () => K(a.activeValue) ? a.activeValue : !0
+    ), S = g(
+      () => K(a.inactiveValue) ? a.inactiveValue : !1
+    ), o = oe(
+      a,
+      () => a.defaultValue ?? S.value,
+      Object.is,
+      E
+    ), u = g(() => o.current.value === N.value), f = g(() => a.loading || x.value), j = g(
+      () => {
+        var t, n;
+        return a.error || (t = r == null ? void 0 : r.invalid) != null && t.value || a.status === "error" ? "error" : a.status ?? ((n = r == null ? void 0 : r.status) == null ? void 0 : n.value);
+      }
+    );
+    O(() => [s.value, a.readonly, a.loading], E, {
+      flush: "sync"
+    }), O([N, S], o.invalidate, { flush: "sync" });
+    async function F() {
+      if (!o.isLive() || s.value || a.readonly || f.value)
+        return !1;
+      const t = u.value ? S.value : N.value;
+      if (t === o.current.value) return !1;
+      const n = ++C, w = new AbortController();
+      b = w, x.value = !!a.beforeChange;
+      try {
+        return a.beforeChange && await a.beforeChange(t, o.current.value, {
+          signal: w.signal
+        }) === !1 || !o.isLive() || n !== C || w.signal.aborted || s.value || a.readonly || a.loading ? !1 : await o.commit(
+          t,
+          (c) => h("update:modelValue", c),
+          (c) => h("change", c),
+          !0
+        );
+      } catch (c) {
+        return o.isLive() && n === C && h("error", c), !1;
+      } finally {
+        n === C && (x.value = !1, b = void 0);
       }
     }
-    return (n, T) => (i(), o("span", f(c(d), { class: "hys-ui-switch-wrap" }), [
-      r("button", {
-        type: "button",
-        role: "switch",
-        "aria-label": e.ariaLabel || e.activeText || e.inactiveText || "切换",
-        "aria-checked": e.modelValue,
-        "aria-busy": e.loading || t.value,
-        class: b(["hys-ui-switch", { "hys-ui-on": e.modelValue }]),
-        disabled: e.disabled || e.loading || t.value,
-        onClick: m
-      }, [
-        r("span", null, [
-          e.loading || t.value ? (i(), g(c(x), {
-            key: 0,
-            class: "hys-ui-icon-spin",
-            size: 12
-          })) : u("", !0)
-        ])
-      ], 10, k),
-      e.activeText || e.inactiveText ? (i(), o("span", C, v(e.modelValue ? e.activeText : e.inactiveText), 1)) : u("", !0)
-    ], 16));
+    function W(t) {
+      s.value || a.readonly || f.value || (h("click", o.current.value, t), F());
+    }
+    function H(t) {
+      var n;
+      !s.value && !f.value && ((n = I.value) == null || n.focus(t));
+    }
+    ue(I, o.reset, void 0, () => a.form), ae(() => {
+      a.autofocus && H();
+    });
+    const X = () => Object.fromEntries(
+      Object.entries(m).filter(([t]) => t !== "class" && t !== "style")
+    ), Y = g(() => ({
+      width: typeof a.width == "number" && Number.isFinite(a.width) ? Math.max(0, a.width) + "px" : a.width ?? (a.inlinePrompt ? "max-content" : void 0),
+      "--hys-ui-switch-on": a.activeColor || "var(--hys-ui-primary,var(--hys-ui-theme-primary))",
+      "--hys-ui-switch-off": a.inactiveColor || "var(--hys-ui-border,var(--hys-ui-theme-border))"
+    }));
+    return G({
+      element: I,
+      checked: u,
+      pending: x,
+      focus: H,
+      blur: () => {
+        var t;
+        return (t = I.value) == null ? void 0 : t.blur();
+      },
+      toggle: F
+    }), (t, n) => {
+      var w, c;
+      return l(), d("span", R(i(Q), {
+        class: ["hys-ui-switch-wrap", [
+          i(m).class,
+          "hys-ui-switch-" + i(P),
+          {
+            "hys-ui-switch-disabled": i(s),
+            "hys-ui-switch-readonly": e.readonly
+          }
+        ]],
+        style: i(m).style
+      }), [
+        A("button", R({
+          ref_key: "element",
+          ref: I
+        }, X(), {
+          id: i(m).id || ((w = i(r)) == null ? void 0 : w.id.value),
+          "data-hys-ui-field-managed": "",
+          type: "button",
+          role: "switch",
+          class: ["hys-ui-switch", {
+            "hys-ui-on": u.value,
+            "hys-ui-switch-square": !e.round,
+            "hys-ui-switch-inline": e.inlinePrompt,
+            "hys-ui-switch-error": j.value === "error"
+          }],
+          "data-status": j.value,
+          style: Y.value,
+          disabled: i(s) || f.value,
+          tabindex: e.focusable ? e.tabindex : -1,
+          autofocus: e.autofocus,
+          "aria-label": e.ariaLabel || i(m)["aria-label"] || i(U) || e.activeText || e.inactiveText || "切换",
+          "aria-checked": u.value,
+          "aria-readonly": e.readonly || void 0,
+          "aria-busy": f.value || void 0,
+          "aria-invalid": j.value === "error" || void 0,
+          "aria-describedby": [i(m)["aria-describedby"], e.error ? i(D) : (c = i(r)) == null ? void 0 : c.describedBy.value].filter(Boolean).join(" ") || void 0,
+          onMousedown: n[0] || (n[0] = (V) => !e.focusable && V.preventDefault()),
+          onClick: W,
+          onFocus: n[1] || (n[1] = (V) => {
+            L.value = !0, h("focus", V);
+          }),
+          onBlur: n[2] || (n[2] = (V) => {
+            L.value = !1, h("blur", V);
+          })
+        }), [
+          e.inlinePrompt ? (l(), d("span", ce, [
+            A("span", null, y(e.activeText), 1),
+            A("span", null, y(e.inactiveText), 1)
+          ])) : v("", !0),
+          e.inlinePrompt ? (l(), d("span", de, [
+            u.value ? k(t.$slots, "active", {}, () => [
+              e.activeIcon ? (l(), B(T(z(e.activeIcon)), {
+                key: 0,
+                size: 14
+              })) : (l(), d(q, { key: 1 }, [
+                $(y(e.activeText), 1)
+              ], 64))
+            ], !0, 0) : k(t.$slots, "inactive", {}, () => [
+              e.inactiveIcon ? (l(), B(T(z(e.inactiveIcon)), {
+                key: 0,
+                size: 14
+              })) : (l(), d(q, { key: 1 }, [
+                $(y(e.inactiveText), 1)
+              ], 64))
+            ], !0, 1)
+          ])) : v("", !0),
+          A("span", ve, [
+            k(t.$slots, "thumb", {
+              checked: u.value,
+              loading: f.value,
+              focused: L.value
+            }, () => [
+              f.value ? k(t.$slots, "loading", {}, () => [
+                te(i(ie), {
+                  class: "hys-ui-icon-spin",
+                  size: i(P) === "lg" ? 14 : 11
+                }, null, 8, ["size"])
+              ], !0, 0) : (u.value ? e.activeActionIcon : e.inactiveActionIcon) ? (l(), B(T(z(u.value ? e.activeActionIcon : e.inactiveActionIcon)), {
+                key: 1,
+                size: i(P) === "lg" ? 14 : 11
+              }, null, 8, ["size"])) : v("", !0)
+            ], !0)
+          ])
+        ], 16, se),
+        !e.inlinePrompt && (e.activeText || e.inactiveText || e.activeIcon || e.inactiveIcon || t.$slots.active || t.$slots.inactive) ? (l(), d("span", fe, [
+          u.value ? k(t.$slots, "active", {}, () => [
+            e.activeIcon ? (l(), B(T(z(e.activeIcon)), {
+              key: 0,
+              size: 15
+            })) : v("", !0),
+            $(y(e.activeText), 1)
+          ], !0, 0) : k(t.$slots, "inactive", {}, () => [
+            e.inactiveIcon ? (l(), B(T(z(e.inactiveIcon)), {
+              key: 0,
+              size: 15
+            })) : v("", !0),
+            $(y(e.inactiveText), 1)
+          ], !0, 1)
+        ])) : v("", !0),
+        e.name ? (l(), d("input", {
+          key: 1,
+          type: "hidden",
+          name: e.name,
+          form: e.form,
+          value: String(i(o).current.value),
+          disabled: i(s)
+        }, null, 8, ye)) : v("", !0),
+        e.error ? (l(), d("small", {
+          key: 2,
+          id: i(D),
+          class: "hys-ui-switch-error-text",
+          role: "alert"
+        }, y(e.error), 9, he)) : v("", !0)
+      ], 16);
+    };
   }
 });
 export {
-  z as default
+  xe as default
 };

package/dist/components/HysTable/HysTable.vue.js

@@ -1,7 +1,7 @@
 import o from "./HysTable2.vue.js";
 /* empty css              */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-31cf795a"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-68f5fb01"]]);
 export {
   m as default
 };