hys-ui 0.1.1 → 0.3.0

package/dist/components/HysCheckboxGroup/HysCheckboxGroup2.vue.js

@@ -0,0 +1,237 @@
+import { defineComponent as X, inject as Y, useAttrs as Z, ref as _, useId as ee, computed as n, shallowRef as ae, provide as le, onMounted as te, openBlock as m, createElementBlock as y, mergeProps as ue, unref as o, Fragment as T, renderList as G, createBlock as re, withCtx as ie, renderSlot as q, createTextVNode as F, toDisplayString as N, createCommentVNode as R, createElementVNode as oe } from "vue";
+import ne from "../HysCheckbox/HysCheckbox.vue.js";
+import { useHysControlState as se, fieldKey as de } from "../../composables/formContext.js";
+import { uniqueChoices as $, choiceOptions as ve, checkboxGroupKey as ce, choiceKey as O } from "../../composables/choice.js";
+import { useHysRootAttrs as me } from "../../config.js";
+import { useChoiceModel as fe, useChoiceNativeReset as ye } from "../../composables/choiceModel.js";
+const be = ["id", "aria-label", "aria-disabled", "aria-readonly", "aria-required", "aria-invalid", "aria-describedby"], he = {
+  key: 0,
+  class: "hys-ui-checkbox-empty"
+}, ge = { class: "hys-ui-checkbox-empty" }, pe = ["name", "form", "value", "disabled"], ke = ["id"], qe = /* @__PURE__ */ X({
+  inheritAttrs: !1,
+  __name: "HysCheckboxGroup",
+  props: {
+    modelValue: {},
+    defaultValue: {},
+    options: {},
+    fieldNames: {},
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    size: {},
+    min: {},
+    max: {},
+    required: { type: Boolean },
+    name: {},
+    form: {},
+    ariaLabel: {},
+    vertical: { type: Boolean },
+    type: { default: "checkbox" },
+    buttonStyle: {},
+    border: { type: Boolean },
+    error: {},
+    status: {},
+    autofocus: { type: Boolean },
+    emptyText: { default: "暂无选项" }
+  },
+  emits: ["update:modelValue", "change", "reject", "focus", "blur"],
+  setup(s, { expose: P, emit: J }) {
+    const l = s, g = J, { disabled: f, size: Q } = se(l), v = Y(de, void 0), A = Z(), U = me(), b = _(), j = ee(), h = fe(
+      l,
+      () => $(l.defaultValue ?? []),
+      (e, a) => Array.isArray(e) && Array.isArray(a) && e.length === a.length && e.every((t, r) => t === a[r])
+    ), u = n(() => $(h.current.value ?? [])), p = n(
+      () => ve(l.options ?? [], l.fieldNames)
+    ), c = ae(
+      []
+    ), S = n(
+      () => Math.max(
+        l.required ? 1 : 0,
+        Number.isFinite(l.min) ? Math.floor(l.min) : 0
+      )
+    ), V = n(
+      () => l.max !== void 0 && Number.isFinite(l.max) ? Math.max(0, Math.floor(l.max)) : 1 / 0
+    ), k = n(() => S.value > V.value), w = n(
+      () => {
+        var e, a;
+        return l.error || (e = v == null ? void 0 : v.invalid) != null && e.value || l.status === "error" || k.value || u.value.length > V.value ? "error" : l.status ?? ((a = v == null ? void 0 : v.status) == null ? void 0 : a.value);
+      }
+    );
+    function H(e) {
+      return k.value || (u.value.includes(e) ? u.value.length <= S.value : u.value.length >= V.value);
+    }
+    async function L(e, a) {
+      return e.length === u.value.length && e.every((t, r) => t === u.value[r]) ? !1 : h.commit(
+        e,
+        (t) => g("update:modelValue", t),
+        (t) => g("change", t, a),
+        !0
+      );
+    }
+    async function E(e, a = !u.value.includes(e)) {
+      if (!h.isLive() || f.value || l.readonly) return !1;
+      const t = c.value.find((d) => d.value.value === e), r = p.value.find((d) => d.value === e);
+      return !t && !r || t != null && t.locked.value || r != null && r.disabled || u.value.includes(e) === a ? !1 : H(e) ? (g("reject", {
+        value: e,
+        checked: a,
+        reason: k.value ? "range" : a ? "max" : "min"
+      }), !1) : L(
+        a ? [...u.value, e] : u.value.filter((d) => d !== e),
+        { value: e, checked: a, source: "toggle" }
+      );
+    }
+    const x = n(
+      () => l.options !== void 0 ? p.value.filter((e) => !e.disabled).map((e) => e.value) : [
+        ...new Set(
+          c.value.filter(
+            (e) => !e.locked.value && e.value.value !== void 0
+          ).map((e) => e.value.value)
+        )
+      ]
+    ), M = n(
+      () => x.value.length > 0 && x.value.every((e) => u.value.includes(e))
+    ), I = n(
+      () => !M.value && x.value.some((e) => u.value.includes(e))
+    );
+    async function K() {
+      if (!h.isLive() || f.value || l.readonly || k.value)
+        return !1;
+      const e = [...u.value];
+      for (const a of x.value)
+        !e.includes(a) && e.length < V.value && e.push(a);
+      return L(e, { source: "all" });
+    }
+    async function z() {
+      if (!h.isLive() || f.value || l.readonly || k.value)
+        return !1;
+      const e = new Set(x.value), a = u.value.filter((t) => !e.has(t));
+      for (const t of u.value)
+        a.length < S.value && !a.includes(t) && a.push(t);
+      return L(a, { source: "clear" });
+    }
+    function D(e) {
+      var t, r;
+      if (f.value) return;
+      const a = c.value.find(
+        (d) => {
+          var B;
+          return d.value.value === (e ?? u.value[0]) && !((B = d.input.value) != null && B.disabled);
+        }
+      );
+      (r = (a == null ? void 0 : a.input.value) || ((t = b.value) == null ? void 0 : t.querySelector(
+        'input[type="checkbox"]:not(:disabled)'
+      ))) == null || r.focus();
+    }
+    le(ce, {
+      values: u,
+      disabled: f,
+      readonly: n(() => !!l.readonly),
+      size: Q,
+      button: n(() => l.type === "button"),
+      border: n(() => !!l.border),
+      solid: n(() => l.buttonStyle === "solid"),
+      status: w,
+      form: n(() => l.form),
+      isLimited: H,
+      toggle: E,
+      register: (e) => (c.value.includes(e) || (c.value = [...c.value, e]), () => c.value = c.value.filter((a) => a !== e))
+    }), ye(b, h.reset, void 0, () => l.form);
+    function W(e) {
+      var a, t;
+      return !!((a = p.value.find((r) => r.value === e)) != null && a.disabled) || !!((t = c.value.find((r) => r.value.value === e)) != null && t.disabled.value);
+    }
+    return te(() => {
+      l.autofocus && D();
+    }), P({
+      values: u,
+      allChecked: M,
+      indeterminate: I,
+      focus: D,
+      blur: () => {
+        var a;
+        const e = document.activeElement;
+        e && ((a = b.value) != null && a.contains(e)) && e.blur();
+      },
+      checkAll: K,
+      clear: z,
+      toggle: E
+    }), (e, a) => {
+      var t, r, d, B;
+      return m(), y("div", ue({
+        ref_key: "root",
+        ref: b
+      }, { ...o(U), ...o(A) }, {
+        id: o(A).id || ((t = o(v)) == null ? void 0 : t.id.value),
+        role: "group",
+        "data-hys-ui-field-managed": "",
+        class: ["hys-ui-checkbox-group", { "hys-ui-checkbox-group-vertical": s.vertical }],
+        "aria-label": s.ariaLabel || o(A)["aria-label"] || ((r = o(v)) == null ? void 0 : r.label.value) || "复选框组",
+        "aria-disabled": o(f) || void 0,
+        "aria-readonly": s.readonly || void 0,
+        "aria-required": s.required || ((d = o(v)) == null ? void 0 : d.required.value) || S.value > 0 || void 0,
+        "aria-invalid": w.value === "error" || void 0,
+        "aria-describedby": [s.error ? o(j) : (B = o(v)) == null ? void 0 : B.describedBy.value, o(A)["aria-describedby"]].filter(Boolean).join(" ") || void 0,
+        onFocusin: a[0] || (a[0] = (i) => {
+          var C;
+          return !((C = b.value) != null && C.contains(i.relatedTarget)) && g("focus", i);
+        }),
+        onFocusout: a[1] || (a[1] = (i) => {
+          var C;
+          return !((C = b.value) != null && C.contains(i.relatedTarget)) && g("blur", i);
+        })
+      }), [
+        l.options !== void 0 ? (m(), y(T, { key: 0 }, [
+          (m(!0), y(T, null, G(p.value, (i) => (m(), re(ne, {
+            key: o(O)(i.value),
+            value: i.value,
+            disabled: i.disabled,
+            indeterminate: i.indeterminate
+          }, {
+            default: ie(() => [
+              q(e.$slots, "option", {
+                option: i,
+                checked: u.value.includes(i.value)
+              }, () => [
+                F(N(i.label), 1)
+              ], !0)
+            ]),
+            _: 2
+          }, 1032, ["value", "disabled", "indeterminate"]))), 128)),
+          p.value.length ? R("", !0) : (m(), y("span", he, [
+            q(e.$slots, "empty", {}, () => [
+              F(N(s.emptyText), 1)
+            ], !0)
+          ]))
+        ], 64)) : q(e.$slots, "default", {
+          values: u.value,
+          allChecked: M.value,
+          indeterminate: I.value,
+          checkAll: K,
+          clear: z
+        }, () => [
+          oe("span", ge, [
+            q(e.$slots, "empty", {}, () => [
+              F(N(s.emptyText), 1)
+            ], !0)
+          ])
+        ], !0, 1),
+        s.name ? (m(!0), y(T, { key: 2 }, G(u.value, (i) => (m(), y("input", {
+          key: o(O)(i),
+          type: "hidden",
+          name: s.name,
+          form: s.form,
+          value: String(i),
+          disabled: o(f) || W(i)
+        }, null, 8, pe))), 128)) : R("", !0),
+        s.error ? (m(), y("small", {
+          key: 3,
+          id: o(j),
+          role: "alert",
+          class: "hys-ui-checkbox-group-error"
+        }, N(s.error), 9, ke)) : R("", !0)
+      ], 16, be);
+    };
+  }
+});
+export {
+  qe as default
+};

package/dist/components/HysColorPicker/HysColorPanel.vue.js

@@ -0,0 +1,7 @@
+import o from "./HysColorPanel2.vue.js";
+/* empty css                   */
+import f from "../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ f(o, [["__scopeId", "data-v-642fbfff"]]);
+export {
+  m as default
+};

package/dist/components/HysColorPicker/HysColorPanel2.vue.js

@@ -0,0 +1,238 @@
+import { defineComponent as z, provide as K, computed as C, openBlock as l, createElementBlock as o, mergeProps as T, unref as d, createElementVNode as n, renderSlot as m, normalizeProps as c, guardReactiveProps as x, toDisplayString as r, normalizeStyle as u, createCommentVNode as s, Fragment as I, renderList as L, createBlock as k, withKeys as S, withModifiers as B, withCtx as y, createTextVNode as f, createVNode as F } from "vue";
+import { Check as N } from "lucide-vue-next";
+import b from "../HysButton/HysButton.vue.js";
+import { useHysRootAttrs as V } from "../../config.js";
+import { overlayOwnerKey as $ } from "../../composables/overlayManager.js";
+import { colorRgb as h, sameColor as g } from "../../composables/color.js";
+const H = ["id", "role", "aria-label", "aria-disabled"], O = ["tabindex", "aria-valuenow", "aria-valuetext", "aria-disabled"], R = ["tabindex", "aria-valuenow", "aria-disabled"], W = ["tabindex", "aria-valuenow", "aria-valuetext", "aria-disabled"], A = {
+  key: 1,
+  class: "hys-ui-pf-color-presets",
+  role: "group",
+  "aria-label": "常用颜色"
+}, E = ["disabled", "aria-label", "aria-pressed", "onClick"], j = ["value", "disabled", "readonly", "aria-invalid"], q = {
+  key: 3,
+  class: "hys-ui-pf-color-error",
+  role: "alert"
+}, D = { key: 4 }, p = /* @__PURE__ */ z({
+  __name: "HysColorPanel",
+  props: {
+    state: {},
+    options: {}
+  },
+  setup(e) {
+    const v = e, P = V();
+    K(
+      $,
+      C(() => !!v.state.open.value && v.state.live.value)
+    );
+    const w = C(() => {
+      const i = v.state.working.value;
+      return "rgb(" + h(i).map((a) => Math.round(a * 255)).join(",") + ")";
+    });
+    function M(i) {
+      return i[0] * 0.2126 + i[1] * 0.7152 + i[2] * 0.0722 > 0.58 ? "#172a4d" : "#fff";
+    }
+    return (i, a) => (l(), o("div", T({
+      id: e.state.panelId,
+      ref: (t) => e.state.panel.value = t
+    }, d(P), {
+      class: ["hys-ui-v4-menu hys-ui-pf-color-panel hys-ui-color-panel", [e.options.popupClass, { "hys-ui-color-inline": e.options.inline }]],
+      style: e.options.inline ? {
+        ...e.options.popupStyle,
+        width: typeof e.options.popupWidth == "number" ? e.options.popupWidth + "px" : e.options.popupWidth
+      } : { ...e.options.popupStyle, ...e.state.floating.style.value },
+      role: e.options.inline ? "group" : "dialog",
+      "aria-label": e.options.ariaLabel || e.options.label || "选择颜色",
+      "aria-disabled": e.state.control.disabled.value || void 0,
+      onFocusin: a[21] || (a[21] = //@ts-ignore
+      (...t) => e.state.focusIn && e.state.focusIn(...t)),
+      onFocusout: a[22] || (a[22] = //@ts-ignore
+      (...t) => e.state.focusOut && e.state.focusOut(...t))
+    }), [
+      n("header", null, [
+        m(i.$slots, "header", c(x(e.state.context.value)), () => [
+          a[23] || (a[23] = n("strong", null, "选择颜色", -1)),
+          n("code", null, r(e.state.hasColor.value ? e.state.serialized.value : "未选择"), 1)
+        ], !0)
+      ]),
+      n("div", {
+        class: "hys-ui-pf-color-palette",
+        role: "slider",
+        tabindex: e.state.locked.value ? -1 : 0,
+        "aria-label": "饱和度与亮度",
+        "aria-valuemin": "0",
+        "aria-valuemax": "100",
+        "aria-valuenow": Math.round(e.state.working.value.s * 100),
+        "aria-valuetext": "饱和度 " + Math.round(e.state.working.value.s * 100) + "%，亮度 " + Math.round(e.state.working.value.v * 100) + "%",
+        "aria-disabled": e.state.locked.value || void 0,
+        style: u({
+          backgroundColor: "hsl(" + e.state.working.value.h + ",100%,50%)"
+        }),
+        onPointerdown: a[0] || (a[0] = (t) => e.state.start(t, "palette")),
+        onPointermove: a[1] || (a[1] = //@ts-ignore
+        (...t) => e.state.move && e.state.move(...t)),
+        onPointerup: a[2] || (a[2] = //@ts-ignore
+        (...t) => e.state.end && e.state.end(...t)),
+        onPointercancel: a[3] || (a[3] = //@ts-ignore
+        (...t) => e.state.pointerCancel && e.state.pointerCancel(...t)),
+        onLostpointercapture: a[4] || (a[4] = //@ts-ignore
+        (...t) => e.state.pointerCancel && e.state.pointerCancel(...t)),
+        onKeydown: a[5] || (a[5] = (t) => e.state.keyboard(t, "palette"))
+      }, [
+        n("span", {
+          class: "hys-ui-pf-color-cursor",
+          style: u({
+            left: e.state.working.value.s * 100 + "%",
+            top: (1 - e.state.working.value.v) * 100 + "%",
+            background: w.value
+          })
+        }, null, 4)
+      ], 44, O),
+      n("div", {
+        class: "hys-ui-pf-color-hue",
+        role: "slider",
+        tabindex: e.state.locked.value ? -1 : 0,
+        "aria-label": "色相",
+        "aria-valuemin": "0",
+        "aria-valuemax": "359",
+        "aria-valuenow": Math.round(e.state.working.value.h),
+        "aria-disabled": e.state.locked.value || void 0,
+        onPointerdown: a[6] || (a[6] = (t) => e.state.start(t, "hue")),
+        onPointermove: a[7] || (a[7] = //@ts-ignore
+        (...t) => e.state.move && e.state.move(...t)),
+        onPointerup: a[8] || (a[8] = //@ts-ignore
+        (...t) => e.state.end && e.state.end(...t)),
+        onPointercancel: a[9] || (a[9] = //@ts-ignore
+        (...t) => e.state.pointerCancel && e.state.pointerCancel(...t)),
+        onLostpointercapture: a[10] || (a[10] = //@ts-ignore
+        (...t) => e.state.pointerCancel && e.state.pointerCancel(...t)),
+        onKeydown: a[11] || (a[11] = (t) => e.state.keyboard(t, "hue"))
+      }, [
+        n("span", {
+          style: u({ left: e.state.working.value.h / 359 * 100 + "%" })
+        }, null, 4)
+      ], 40, R),
+      e.options.showAlpha ? (l(), o("div", {
+        key: 0,
+        class: "hys-ui-color-alpha",
+        role: "slider",
+        tabindex: e.state.locked.value ? -1 : 0,
+        "aria-label": "透明度",
+        "aria-valuemin": "0",
+        "aria-valuemax": "100",
+        "aria-valuenow": Math.round(e.state.working.value.a * 100),
+        "aria-valuetext": Math.round(e.state.working.value.a * 100) + "%",
+        "aria-disabled": e.state.locked.value || void 0,
+        onPointerdown: a[12] || (a[12] = (t) => e.state.start(t, "alpha")),
+        onPointermove: a[13] || (a[13] = //@ts-ignore
+        (...t) => e.state.move && e.state.move(...t)),
+        onPointerup: a[14] || (a[14] = //@ts-ignore
+        (...t) => e.state.end && e.state.end(...t)),
+        onPointercancel: a[15] || (a[15] = //@ts-ignore
+        (...t) => e.state.pointerCancel && e.state.pointerCancel(...t)),
+        onLostpointercapture: a[16] || (a[16] = //@ts-ignore
+        (...t) => e.state.pointerCancel && e.state.pointerCancel(...t)),
+        onKeydown: a[17] || (a[17] = (t) => e.state.keyboard(t, "alpha"))
+      }, [
+        n("div", {
+          style: u({
+            background: "linear-gradient(to right,transparent," + w.value + ")"
+          })
+        }, null, 4),
+        n("span", {
+          style: u({ left: e.state.working.value.a * 100 + "%" })
+        }, null, 4)
+      ], 40, W)) : s("", !0),
+      e.options.showPresets !== !1 && e.state.presets.value.length ? (l(), o("div", A, [
+        (l(!0), o(I, null, L(e.state.presets.value, (t) => (l(), o("button", {
+          key: t.key,
+          type: "button",
+          disabled: e.state.locked.value,
+          "aria-label": t.value,
+          "aria-pressed": e.state.hasColor.value && d(g)(t.parsed, e.state.working.value),
+          onClick: (G) => e.state.setColor(t.value)
+        }, [
+          n("span", {
+            class: "hys-ui-color-preset-fill",
+            style: u({ background: t.color })
+          }, null, 4),
+          m(i.$slots, "preset", {
+            value: t.value,
+            color: t.color,
+            selected: e.state.hasColor.value && d(g)(t.parsed, e.state.working.value),
+            disabled: e.state.locked.value
+          }, () => [
+            e.state.hasColor.value && d(g)(t.parsed, e.state.working.value) ? (l(), k(d(N), {
+              key: 0,
+              size: 13,
+              style: u({ color: M(d(h)(t.parsed)) }),
+              "aria-hidden": "true"
+            }, null, 8, ["style"])) : s("", !0)
+          ], !0)
+        ], 8, E))), 128))
+      ])) : s("", !0),
+      e.options.showInput !== !1 ? (l(), o("input", {
+        key: 2,
+        class: "hys-ui-color-panel-input",
+        value: e.state.draft.value,
+        disabled: e.state.control.disabled.value,
+        readonly: e.options.readonly,
+        "aria-label": "面板颜色值",
+        "aria-invalid": !e.state.valid.value || void 0,
+        spellcheck: "false",
+        autocomplete: "off",
+        onInput: a[18] || (a[18] = (t) => e.state.draft.value = t.target.value),
+        onChange: a[19] || (a[19] = //@ts-ignore
+        (...t) => e.state.commitText && e.state.commitText(...t)),
+        onKeydown: a[20] || (a[20] = S(B(
+          //@ts-ignore
+          (...t) => e.state.confirm && e.state.confirm(...t),
+          ["prevent"]
+        ), ["enter"]))
+      }, null, 40, j)) : s("", !0),
+      e.state.valid.value ? s("", !0) : (l(), o("small", q, "请输入有效的颜色值")),
+      e.options.showFooter !== !1 ? (l(), o("footer", D, [
+        m(i.$slots, "footer", c(x(e.state.context.value)), () => [
+          e.options.clearable ? (l(), k(b, {
+            key: 0,
+            class: "hys-ui-color-clear",
+            variant: "ghost",
+            size: "sm",
+            disabled: e.state.locked.value || !e.state.value.value && !e.state.hasColor.value,
+            onClick: e.state.clear
+          }, {
+            default: y(() => [
+              f(r(e.options.clearText || "清空"), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled", "onClick"])) : s("", !0),
+          a[24] || (a[24] = n("span", { class: "hys-ui-color-footer-spacer" }, null, -1)),
+          e.options.immediate === !1 && !e.options.inline ? (l(), k(b, {
+            key: 1,
+            variant: "ghost",
+            size: "sm",
+            onClick: e.state.cancel
+          }, {
+            default: y(() => [
+              f(r(e.options.cancelText || "取消"), 1)
+            ]),
+            _: 1
+          }, 8, ["onClick"])) : s("", !0),
+          F(b, {
+            size: "sm",
+            disabled: e.state.locked.value || !e.state.valid.value,
+            onClick: e.state.confirm
+          }, {
+            default: y(() => [
+              f(r(e.options.confirmText || (e.options.immediate === !1 ? "确认" : "完成")), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled", "onClick"])
+        ], !0)
+      ])) : s("", !0)
+    ], 16, H));
+  }
+});
+export {
+  p as default
+};

package/dist/components/HysColorPicker/HysColorPicker.vue.js

@@ -1,7 +1,7 @@
 import o from "./HysColorPicker2.vue.js";
 /* empty css                    */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-00820c72"]]);
+const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-dbe35865"]]);
 export {
   p as default
 };