hys-ui 0.2.0 → 0.4.0

package/dist/components/HysButton/HysButton2.vue.js

@@ -1,32 +1,52 @@
-import { defineComponent as $, ref as z, computed as d, openBlock as i, createBlock as u, resolveDynamicComponent as r, mergeProps as P, unref as s, withCtx as D, createElementBlock as c, renderSlot as a, createVNode as H, createCommentVNode as y } from "vue";
-import { useHysControlState as L } from "../../composables/formContext.js";
-import { LoaderCircle as S } from "lucide-vue-next";
-import { useHysRootAttrs as w } from "../../config.js";
-const A = {
+import { defineComponent as ce, useSlots as de, inject as fe, computed as l, toValue as Y, shallowRef as Z, ref as _, watch as ee, onMounted as ve, onActivated as ye, onBeforeUnmount as be, onDeactivated as he, openBlock as s, createBlock as m, resolveDynamicComponent as S, mergeProps as ge, unref as z, withCtx as me, createElementBlock as w, renderSlot as L, createCommentVNode as H, toDisplayString as ke, createVNode as pe, h as Be, Text as xe, Fragment as Te } from "vue";
+import { LoaderCircle as Ce } from "lucide-vue-next";
+import { useHysConfig as Ae, useHysRootAttrs as Se } from "../../config.js";
+import { useHysControlState as ze } from "../../composables/formContext.js";
+import { useChoiceModel as we } from "../../composables/choiceModel.js";
+import { buttonGroupKey as Le, buttonVariant as Pe, buttonSize as De } from "../../composables/buttonGroup.js";
+import { parseColor as $e, colorRgb as Ie } from "../../composables/color.js";
+const Ee = {
   key: 0,
   class: "hys-ui-button-icon"
-}, N = {
+}, He = {
   key: 1,
   class: "hys-ui-button-icon"
-}, R = {
-  key: 2,
+}, Me = { key: 2 }, Ne = {
+  key: 3,
   class: "hys-ui-button-icon"
-}, q = /* @__PURE__ */ $({
+}, Ge = /* @__PURE__ */ ce({
   __name: "HysButton",
   props: {
-    variant: { default: "primary" },
+    variant: {},
     size: {},
     disabled: { type: Boolean },
-    loading: { type: Boolean },
+    loading: { type: [Boolean, Object] },
+    loadingIcon: {},
+    loadingText: {},
+    action: {},
+    beforeAction: {},
+    actionLoadingDelay: {},
+    toggle: { type: Boolean },
+    pressed: { type: Boolean, default: void 0 },
+    defaultPressed: { type: Boolean },
     plain: { type: Boolean },
     round: { type: Boolean },
     circle: { type: Boolean },
+    shape: {},
     block: { type: Boolean },
     dashed: { type: Boolean },
     color: {},
+    dark: { type: Boolean, default: void 0 },
+    danger: { type: Boolean },
+    ghost: { type: Boolean },
+    text: { type: Boolean },
+    link: { type: Boolean },
+    bg: { type: Boolean },
+    autoInsertSpace: { type: Boolean, default: void 0 },
+    tag: {},
     icon: {},
     iconPosition: { default: "left" },
-    type: { default: "button" },
+    type: {},
     nativeType: {},
     href: {},
     target: {},
@@ -35,73 +55,220 @@ const A = {
     focusable: { type: Boolean, default: !0 },
     ariaLabel: {}
   },
-  emits: ["click"],
-  setup(e, { expose: f, emit: b }) {
-    const n = e, { disabled: h, size: m } = L(n), v = b, k = w(), l = z(), o = d(() => h.value || n.loading), g = { danger: "#ed4556", success: "#16a46e", warning: "#d9860c", info: "#697b97" }, B = d(() => n.color || g[n.variant] || "var(--hys-ui-primary,var(--hys-ui-theme-primary))");
-    function C(t) {
-      if (o.value) {
-        t.preventDefault(), t.stopImmediatePropagation();
+  emits: ["click", "update:pressed", "pressedChange", "actionSuccess", "actionError"],
+  setup(t, { expose: te, emit: ae }) {
+    const a = t, P = de(), b = ae, r = fe(Le, void 0), { disabled: M, size: N } = ze({
+      get disabled() {
+        return a.disabled || (r == null ? void 0 : r.disabled.value);
+      },
+      get size() {
+        return De(a.size) ?? (r == null ? void 0 : r.size.value);
+      }
+    }), h = l(() => a.variant ?? Pe(a.type) ?? (r == null ? void 0 : r.variant.value) ?? "primary"), k = l(() => a.link ? "link" : a.text ? "text" : h.value), oe = l(() => a.nativeType ?? (a.type === "submit" || a.type === "reset" ? a.type : "button")), V = Ae(), D = l(() => a.dark ?? Y(V.theme) === "dark"), ne = Se(), p = l(() => a.tag ?? (a.href ? "a" : "button")), B = l(() => p.value === "button"), v = l(() => p.value === "a" || !!a.href && typeof p.value != "string"), j = Z(), x = l(() => {
+      const e = j.value, n = e && "$el" in e ? e.$el : e;
+      return typeof HTMLElement < "u" && n instanceof HTMLElement ? n : void 0;
+    }), y = Z(), T = we({ get modelValue() {
+      return a.pressed;
+    } }, () => !!a.defaultPressed), R = l(() => a.toggle || a.pressed !== void 0), d = l(() => !!a.loading || !!y.value), c = l(() => M.value || d.value), C = l(() => {
+      const e = typeof a.loading == "object" ? a.loading.delay : a.loading ? 0 : a.actionLoadingDelay;
+      return typeof e == "number" && Number.isFinite(e) ? Math.max(0, Math.min(3e4, e)) : 0;
+    }), f = _(d.value && C.value === 0);
+    let $, A = !1;
+    function K() {
+      clearTimeout($), $ = void 0;
+    }
+    function I() {
+      K(), !d.value || C.value === 0 ? f.value = d.value : A && !f.value && ($ = setTimeout(() => {
+        f.value = !0;
+      }, C.value));
+    }
+    ee([d, C], I, { flush: "sync" }), ve(() => {
+      A = !0, I();
+    }), ye(() => {
+      A = !0, I();
+    });
+    function E() {
+      const e = y.value;
+      y.value = void 0, e == null || e.abort();
+    }
+    function O() {
+      A = !1, E(), K();
+    }
+    be(O), he(O);
+    const F = {
+      danger: "#ed4556",
+      success: "#16a46e",
+      warning: "#d9860c",
+      info: "#697b97"
+    }, U = {
+      slate: { light: "#475569", dark: "#a5b4c7" },
+      blue: { light: "#1d4ed8", dark: "#7cb2ff" },
+      indigo: { light: "#4338ca", dark: "#a5aaff" },
+      purple: { light: "#7e22ce", dark: "#c4a1ff" },
+      cyan: { light: "#0e7490", dark: "#67d7ee" },
+      teal: { light: "#0f766e", dark: "#5eead4" },
+      green: { light: "#15803d", dark: "#86efac" },
+      lime: { light: "#4d7c0f", dark: "#b5df59" },
+      amber: { light: "#b45309", dark: "#ffca68" },
+      orange: { light: "#c2410c", dark: "#ffab79" },
+      red: { light: "#b91c1c", dark: "#ff9090" },
+      pink: { light: "#be185d", dark: "#f6a1cf" }
+    }, g = l(() => {
+      if (!(a.color || a.danger || !Object.hasOwn(U, h.value)))
+        return U[h.value][D.value ? "dark" : "light"];
+    }), le = l(() => a.color || g.value || (a.danger ? F.danger : F[h.value]) || "var(--hys-ui-primary,var(--hys-ui-theme-primary))"), G = l(() => {
+      const e = $e(a.color || g.value);
+      if (!e) return;
+      const [n, o, i] = Ie(e).map((u) => u <= 0.04045 ? u / 12.92 : ((u + 0.055) / 1.055) ** 2.4);
+      return n * 0.2126 + o * 0.7152 + i * 0.0722 > 0.179 ? "#141414" : "#fff";
+    }), ie = l(() => (a.autoInsertSpace ?? Y(V.buttonAutoInsertSpace) ?? !1) && k.value !== "text" && k.value !== "link"), q = _(!1);
+    function J(e) {
+      let n = "";
+      for (const o of e)
+        if (o.type === xe && typeof o.children == "string") n += o.children;
+        else if (o.type === Te && Array.isArray(o.children)) {
+          const i = J(o.children);
+          if (i === void 0) return;
+          n += i;
+        } else return;
+      return n;
+    }
+    const ue = ({ hidden: e }) => {
+      var u, X;
+      const n = ((u = P.default) == null ? void 0 : u.call(P)) ?? [], o = ie.value ? (X = J(n)) == null ? void 0 : X.trim() : void 0, i = !!o && new RegExp("^\\p{Unified_Ideograph}{2}$", "u").test(o);
+      return q.value = i, e ? null : i ? Be("span", { class: "hys-ui-button-spaced" }, o) : n;
+    };
+    function Q() {
+      if (R.value)
+        return T.commit(!T.current.value, (e) => b("update:pressed", e), (e) => b("pressedChange", e));
+    }
+    async function re(e, n) {
+      const o = new AbortController(), i = { signal: o.signal, event: n, pressed: T.current.value };
+      y.value = o;
+      try {
+        if (a.beforeAction && await a.beforeAction(i) === !1 || o.signal.aborted) return;
+        const u = await e(i);
+        if (o.signal.aborted) return;
+        await Q(), o.signal.aborted || b("actionSuccess", u, i);
+      } catch (u) {
+        o.signal.aborted || b("actionError", u, i);
+      } finally {
+        y.value === o && (y.value = void 0);
+      }
+    }
+    ee(M, (e) => {
+      e && E();
+    }, { flush: "sync" });
+    function se(e) {
+      if (c.value) {
+        e.preventDefault(), e.stopImmediatePropagation();
         return;
       }
-      v("click", t);
+      b("click", e), !e.defaultPrevented && (a.action ? (e.preventDefault(), re(a.action, e)) : Q());
     }
-    return f({ element: l, focus: () => {
-      var t;
-      return (t = l.value) == null ? void 0 : t.focus();
-    }, blur: () => {
-      var t;
-      return (t = l.value) == null ? void 0 : t.blur();
-    } }), (t, T) => (i(), u(r(e.href ? "a" : "button"), P({
-      ref_key: "element",
-      ref: l
-    }, s(k), {
-      class: ["hys-ui-btn", ["hys-ui-btn-" + s(m), "hys-ui-button-" + e.variant, { "hys-ui-button-plain": e.plain, "hys-ui-button-round": e.round, "hys-ui-button-circle": e.circle, "hys-ui-button-block": e.block, "hys-ui-button-dashed": e.dashed, "hys-ui-button-locked": o.value }]],
-      style: { "--hys-ui-button-color": B.value },
-      type: e.href ? void 0 : e.nativeType || e.type,
-      href: o.value ? void 0 : e.href,
-      role: e.href ? "link" : void 0,
-      target: e.href ? e.target : void 0,
-      rel: e.href ? e.rel || (e.target === "_blank" ? "noopener noreferrer" : void 0) : void 0,
-      disabled: e.href ? void 0 : o.value,
-      "aria-disabled": o.value || void 0,
-      "aria-busy": e.loading || void 0,
-      "aria-label": e.ariaLabel,
-      tabindex: o.value || !e.focusable ? -1 : void 0,
-      autofocus: e.autofocus,
-      onClick: C
+    function W(e, n) {
+      const o = e.currentTarget;
+      if (!(o instanceof HTMLElement) || e.target !== o || e.isComposing || e.defaultPrevented || o.localName === "button" || o.localName === "a" && o.hasAttribute("href")) return;
+      const i = e.key === " " && !v.value;
+      !i && e.key !== "Enter" || (e.preventDefault(), !c.value && !e.repeat && (i ? n : !n) && o.click());
+    }
+    return te({
+      element: x,
+      ref: x,
+      busy: d,
+      disabled: c,
+      size: N,
+      type: h,
+      shouldAddSpace: q,
+      cancelAction: E,
+      focus: () => {
+        var e;
+        return (e = x.value) == null ? void 0 : e.focus();
+      },
+      blur: () => {
+        var e;
+        return (e = x.value) == null ? void 0 : e.blur();
+      }
+    }), (e, n) => (s(), m(S(p.value), ge({
+      ref_key: "root",
+      ref: j
+    }, z(ne), {
+      class: ["hys-ui-btn", ["hys-ui-btn-" + z(N), "hys-ui-button-" + k.value, {
+        "hys-ui-button-plain": t.plain,
+        "hys-ui-button-round": t.round || t.shape === "round",
+        "hys-ui-button-circle": t.circle || t.shape === "circle",
+        "hys-ui-button-block": t.block,
+        "hys-ui-button-dashed": t.dashed,
+        "hys-ui-button-locked": c.value,
+        "hys-ui-button-danger-tone": t.danger,
+        "hys-ui-button-outline-ghost": t.ghost,
+        "hys-ui-button-text-bg": t.bg && k.value === "text",
+        "hys-ui-button-palette": g.value,
+        "hys-ui-button-palette-dark": g.value && D.value,
+        "hys-ui-button-custom-color": t.color,
+        "hys-ui-button-custom-dark": t.color && D.value
+      }]],
+      style: {
+        "--hys-ui-button-color": le.value,
+        "--hys-ui-button-foreground": G.value,
+        "--hys-ui-button-palette-shade": g.value && G.value === "#141414" ? "#fff" : void 0
+      },
+      type: B.value ? oe.value : void 0,
+      href: v.value && !c.value ? t.href : void 0,
+      role: v.value ? "link" : B.value ? void 0 : "button",
+      target: v.value && t.href ? t.target : void 0,
+      rel: v.value && t.href ? t.rel || (t.target === "_blank" ? "noopener noreferrer" : void 0) : void 0,
+      disabled: B.value ? c.value : void 0,
+      "aria-disabled": c.value || void 0,
+      "aria-busy": d.value || void 0,
+      "aria-pressed": R.value ? z(T).current.value : void 0,
+      "aria-label": t.ariaLabel,
+      tabindex: c.value || !t.focusable ? -1 : !B.value && (!v.value || !t.href) ? 0 : void 0,
+      autofocus: t.autofocus,
+      onClick: se,
+      onKeydown: n[0] || (n[0] = (o) => W(o, !1)),
+      onKeyup: n[1] || (n[1] = (o) => W(o, !0))
     }), {
-      default: D(() => [
-        e.loading ? (i(), c("span", A, [
-          a(t.$slots, "loading", {}, () => [
-            H(s(S), {
+      default: me(() => [
+        f.value ? (s(), w("span", Ee, [
+          L(e.$slots, "loading", {}, () => [
+            t.loadingIcon ? (s(), m(S(t.loadingIcon), {
+              key: 0,
+              size: 16,
+              "aria-hidden": "true"
+            })) : (s(), m(z(Ce), {
+              key: 1,
               class: "hys-ui-button-spinner",
               size: 16,
               "aria-hidden": "true"
-            })
+            }))
           ], !0)
-        ])) : (e.icon || t.$slots.icon) && e.iconPosition === "left" ? (i(), c("span", N, [
-          a(t.$slots, "icon", {}, () => [
-            (i(), u(r(e.icon), {
+        ])) : (t.icon || e.$slots.icon) && t.iconPosition === "left" ? (s(), w("span", He, [
+          L(e.$slots, "icon", {}, () => [
+            (s(), m(S(t.icon), {
               size: 16,
               "aria-hidden": "true"
             }))
           ], !0)
-        ])) : y("", !0),
-        a(t.$slots, "default", {}, void 0, !0),
-        !e.loading && (e.icon || t.$slots.icon) && e.iconPosition === "right" ? (i(), c("span", R, [
-          a(t.$slots, "icon", {}, () => [
-            (i(), u(r(e.icon), {
+        ])) : H("", !0),
+        f.value && t.loadingText ? (s(), w("span", Me, ke(t.loadingText), 1)) : H("", !0),
+        pe(ue, {
+          hidden: f.value && !!t.loadingText
+        }, null, 8, ["hidden"]),
+        !f.value && (t.icon || e.$slots.icon) && t.iconPosition === "right" ? (s(), w("span", Ne, [
+          L(e.$slots, "icon", {}, () => [
+            (s(), m(S(t.icon), {
               size: 16,
               "aria-hidden": "true"
             }))
           ], !0)
-        ])) : y("", !0),
-        a(t.$slots, "suffix", {}, void 0, !0)
+        ])) : H("", !0),
+        L(e.$slots, "suffix", {}, void 0, !0)
       ]),
       _: 3
-    }, 16, ["class", "style", "type", "href", "role", "target", "rel", "disabled", "aria-disabled", "aria-busy", "aria-label", "tabindex", "autofocus"]));
+    }, 16, ["class", "style", "type", "href", "role", "target", "rel", "disabled", "aria-disabled", "aria-busy", "aria-pressed", "aria-label", "tabindex", "autofocus"]));
   }
 });
 export {
-  q as default
+  Ge as default
 };

package/dist/components/HysButtonGroup/HysButtonGroup.vue.js

@@ -0,0 +1,7 @@
+import o from "./HysButtonGroup2.vue.js";
+/* empty css                    */
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-19e19d54"]]);
+export {
+  s as default
+};

package/dist/components/HysButtonGroup/HysButtonGroup2.vue.js

@@ -0,0 +1,51 @@
+import { defineComponent as d, inject as b, provide as p, computed as a, openBlock as c, createElementBlock as y, mergeProps as m, unref as r, renderSlot as g } from "vue";
+import { useHysRootAttrs as f } from "../../config.js";
+import { buttonGroupKey as u, buttonSize as v, buttonVariant as h } from "../../composables/buttonGroup.js";
+import { useHysControlState as B } from "../../composables/formContext.js";
+const k = ["aria-label", "aria-disabled"], S = /* @__PURE__ */ d({
+  __name: "HysButtonGroup",
+  props: {
+    variant: {},
+    size: {},
+    type: {},
+    direction: { default: "horizontal" },
+    joined: { type: Boolean, default: !0 },
+    gap: { default: 8 },
+    wrap: { type: Boolean },
+    block: { type: Boolean },
+    disabled: { type: Boolean },
+    ariaLabel: {}
+  },
+  setup(o) {
+    const t = o, n = f(), e = b(u, void 0), { disabled: i } = B({
+      get disabled() {
+        return t.disabled || (e == null ? void 0 : e.disabled.value);
+      }
+    });
+    p(u, {
+      variant: a(() => t.variant ?? h(t.type) ?? (e == null ? void 0 : e.variant.value)),
+      size: a(() => v(t.size) ?? (e == null ? void 0 : e.size.value)),
+      disabled: i
+    });
+    const l = a(() => typeof t.gap == "number" ? (Number.isFinite(t.gap) ? Math.max(0, t.gap) : 8) + "px" : t.gap);
+    return (s, z) => (c(), y("div", m(r(n), {
+      role: "group",
+      "aria-label": o.ariaLabel,
+      "aria-disabled": r(i) || void 0,
+      class: ["hys-ui-button-group", [
+        "hys-ui-button-group-" + o.direction,
+        {
+          "hys-ui-button-group-joined": o.joined,
+          "hys-ui-button-group-wrap": o.wrap && !o.joined,
+          "hys-ui-button-group-block": o.block
+        }
+      ]],
+      style: { "--hys-ui-button-group-gap": l.value }
+    }), [
+      g(s.$slots, "default", {}, void 0, !0)
+    ], 16, k));
+  }
+});
+export {
+  S as default
+};

package/dist/components/HysCalendar/HysCalendar.vue.js

@@ -1,7 +1,7 @@
 import o from "./HysCalendar2.vue.js";
 /* empty css                 */
-import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-1f69497b"]]);
+import a from "../../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ a(o, [["__scopeId", "data-v-54c6a7d5"]]);
 export {
-  m as default
+  p as default
 };