hys-ui 0.1.0 → 0.2.0

package/dist/components/HysCard/HysCard.vue.js

@@ -1,7 +1,7 @@
 import o from "./HysCard2.vue.js";
 /* empty css             */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-2eee4550"]]);
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-4edda4d1"]]);
 export {
   m as default
 };

package/dist/components/HysCard/HysCard2.vue.js

@@ -1,58 +1,191 @@
-import { defineComponent as n, openBlock as s, createElementBlock as o, mergeProps as u, unref as y, renderSlot as l, createElementVNode as d, toDisplayString as a, createCommentVNode as i, normalizeStyle as c } from "vue";
-import { useHysRootAttrs as h } from "../../config.js";
-const m = {
-  key: 0,
-  class: "hys-ui-card-head"
-}, f = {
+import { defineComponent as P, useId as U, ref as A, computed as B, onDeactivated as j, onBeforeUnmount as G, onActivated as J, openBlock as l, createElementBlock as s, mergeProps as M, unref as b, renderSlot as d, createCommentVNode as r, normalizeStyle as z, normalizeClass as H, createElementVNode as L, createTextVNode as E, toDisplayString as C, Fragment as O, renderList as Q, createVNode as W, nextTick as X } from "vue";
+import { useHysRootAttrs as Y } from "../../config.js";
+import Z from "../HysSkeleton/HysSkeleton.vue.js";
+const p = ["aria-busy"], _ = {
   key: 0,
+  class: "hys-ui-card-cover"
+}, ee = { class: "hys-ui-card-heading" }, te = { key: 0 }, ae = {
+  key: 1,
   class: "hys-ui-muted hys-ui-small"
-}, b = ["aria-busy"], v = {
+}, le = {
   key: 0,
-  role: "status"
-}, $ = {
-  key: 1,
-  class: "hys-ui-card-foot"
-}, z = /* @__PURE__ */ n({
+  class: "hys-ui-card-extra"
+}, se = {
+  key: 2,
+  class: "hys-ui-card-tabs-row"
+}, oe = ["aria-label"], ie = ["id", "aria-selected", "aria-controls", "tabindex", "disabled", "onClick"], de = {
+  key: 0,
+  class: "hys-ui-card-extra"
+}, ne = ["id", "role", "aria-labelledby", "tabindex", "aria-busy"], re = {
+  key: 3,
+  class: "hys-ui-card-actions"
+}, ye = /* @__PURE__ */ P({
   __name: "HysCard",
   props: {
     title: {},
     subtitle: {},
+    footer: {},
     loading: { type: Boolean },
-    bordered: { type: Boolean },
-    shadow: {},
+    loadingText: { default: "加载中" },
+    bordered: { type: Boolean, default: !0 },
+    shadow: { default: "never" },
     bodyStyle: {},
-    size: {}
+    headerStyle: {},
+    footerStyle: {},
+    bodyClass: {},
+    headerClass: {},
+    footerClass: {},
+    size: { default: "md" },
+    hoverable: { type: Boolean },
+    type: { default: "default" },
+    tabs: {},
+    activeTab: {},
+    defaultActiveTab: {},
+    tabsLabel: { default: "卡片页签" }
   },
-  setup(e) {
-    const r = h();
-    return (t, k) => (s(), o("section", u(y(r), {
-      class: ["hys-ui-card", ["hys-ui-card-shadow-" + (e.shadow || "never"), "hys-ui-card-size-" + (e.size || "md")]],
-      style: { border: e.bordered === !1 ? "0" : void 0 }
-    }), [
-      e.title || t.$slots.header || t.$slots.action ? (s(), o("header", m, [
-        l(t.$slots, "header", {}, () => [
-          d("div", null, [
-            d("h3", null, a(e.title), 1),
-            e.subtitle ? (s(), o("p", f, a(e.subtitle), 1)) : i("", !0)
-          ])
-        ], !0),
-        d("div", null, [
-          l(t.$slots, "action", {}, void 0, !0)
-        ])
-      ])) : i("", !0),
-      d("div", {
-        class: "hys-ui-card-content",
-        style: c(e.bodyStyle),
-        "aria-busy": e.loading
-      }, [
-        e.loading ? (s(), o("div", v, "加载中…")) : l(t.$slots, "default", {}, void 0, !0, 1)
-      ], 12, b),
-      t.$slots.footer ? (s(), o("footer", $, [
-        l(t.$slots, "footer", {}, void 0, !0)
-      ])) : i("", !0)
-    ], 16));
+  emits: ["update:activeTab", "tabChange"],
+  setup(t, { expose: q, emit: x }) {
+    const c = t, N = x, F = Y(), h = U(), f = A(), V = A(), S = A(c.defaultActiveTab), i = B(
+      () => {
+        var e;
+        return ((e = c.tabs) == null ? void 0 : e.filter((o) => !o.disabled)) ?? [];
+      }
+    ), n = B(
+      () => {
+        var e;
+        return c.activeTab ?? (i.value.some((o) => o.value === S.value) ? S.value : (e = i.value[0]) == null ? void 0 : e.value);
+      }
+    ), T = B(
+      () => {
+        var e;
+        return ((e = c.tabs) == null ? void 0 : e.findIndex((o) => o.value === n.value)) ?? -1;
+      }
+    );
+    let m = !0, w = 0;
+    async function D(e) {
+      if (!m || c.loading || e === n.value || !i.value.some((u) => u.value === e))
+        return;
+      const o = ++w;
+      S.value = e, N("update:activeTab", e), await X(), m && o === w && n.value === e && N("tabChange", e);
+    }
+    function K(e) {
+      var $, y;
+      const o = f.value && getComputedStyle(f.value).direction === "rtl", u = o ? "ArrowLeft" : "ArrowRight", g = o ? "ArrowRight" : "ArrowLeft";
+      if (c.loading || ![u, g, "Home", "End"].includes(e.key) || !i.value.length)
+        return;
+      e.preventDefault();
+      const k = i.value.findIndex((R) => R.value === n.value), v = e.key === "Home" ? 0 : e.key === "End" ? i.value.length - 1 : (k + (e.key === u ? 1 : -1) + i.value.length) % i.value.length, a = i.value[v];
+      D(a.value), (y = ($ = f.value) == null ? void 0 : $.querySelectorAll("button:not(:disabled)")[v]) == null || y.focus();
+    }
+    function I() {
+      m = !1, w++;
+    }
+    return j(I), G(I), J(() => m = !0), q({ element: V, activeTab: n }), (e, o) => {
+      var u, g, k, v;
+      return l(), s("section", M({
+        ref_key: "element",
+        ref: V
+      }, b(F), {
+        class: ["hys-ui-card", [
+          "hys-ui-card-shadow-" + t.shadow,
+          "hys-ui-card-size-" + t.size,
+          {
+            "hys-ui-card-hoverable": t.hoverable,
+            "hys-ui-card-inner": t.type === "inner",
+            "hys-ui-card-borderless": !t.bordered
+          }
+        ]],
+        "aria-busy": t.loading || void 0
+      }), [
+        e.$slots.cover ? (l(), s("div", _, [
+          d(e.$slots, "cover", {}, void 0, !0)
+        ])) : r("", !0),
+        t.title || t.subtitle || e.$slots.title || e.$slots.header || e.$slots.action ? (l(), s("header", {
+          key: 1,
+          class: H(["hys-ui-card-head", t.headerClass]),
+          style: z(t.headerStyle)
+        }, [
+          d(e.$slots, "header", {}, () => [
+            L("div", ee, [
+              t.title || e.$slots.title ? (l(), s("h3", te, [
+                d(e.$slots, "title", {}, () => [
+                  E(C(t.title), 1)
+                ], !0)
+              ])) : r("", !0),
+              t.subtitle ? (l(), s("p", ae, C(t.subtitle), 1)) : r("", !0)
+            ])
+          ], !0),
+          e.$slots.action ? (l(), s("div", le, [
+            d(e.$slots, "action", {}, void 0, !0)
+          ])) : r("", !0)
+        ], 6)) : r("", !0),
+        (u = t.tabs) != null && u.length ? (l(), s("div", se, [
+          L("div", {
+            ref_key: "nav",
+            ref: f,
+            class: "hys-ui-card-tabs",
+            role: "tablist",
+            "aria-label": t.tabsLabel,
+            onKeydown: K
+          }, [
+            (l(!0), s(O, null, Q(t.tabs, (a, $) => {
+              var y;
+              return l(), s("button", {
+                id: b(h) + "-tab-" + $,
+                key: typeof a.value + ":" + a.value,
+                type: "button",
+                role: "tab",
+                "aria-selected": n.value === a.value,
+                "aria-controls": b(h) + "-body",
+                tabindex: n.value === a.value || T.value < 0 && ((y = i.value[0]) == null ? void 0 : y.value) === a.value ? 0 : -1,
+                disabled: t.loading || a.disabled,
+                onClick: (R) => D(a.value)
+              }, [
+                d(e.$slots, "tab", {
+                  tab: a,
+                  active: n.value === a.value
+                }, () => [
+                  E(C(a.label), 1)
+                ], !0)
+              ], 8, ie);
+            }), 128))
+          ], 40, oe),
+          e.$slots["tab-extra"] ? (l(), s("div", de, [
+            d(e.$slots, "tab-extra", {}, void 0, !0)
+          ])) : r("", !0)
+        ])) : r("", !0),
+        L("div", {
+          id: b(h) + "-body",
+          class: H(["hys-ui-card-content", t.bodyClass]),
+          style: z(t.bodyStyle),
+          role: (g = t.tabs) != null && g.length ? "tabpanel" : void 0,
+          "aria-labelledby": (k = t.tabs) != null && k.length && T.value >= 0 ? b(h) + "-tab-" + T.value : void 0,
+          tabindex: (v = t.tabs) != null && v.length ? 0 : void 0,
+          "aria-busy": t.loading
+        }, [
+          t.loading ? d(e.$slots, "loading", {}, () => [
+            W(Z, {
+              "loading-text": t.loadingText,
+              lines: 3
+            }, null, 8, ["loading-text"])
+          ], !0, 0) : d(e.$slots, "default", { activeTab: n.value }, void 0, !0, 1)
+        ], 14, ne),
+        e.$slots.actions ? (l(), s("div", re, [
+          d(e.$slots, "actions", {}, void 0, !0)
+        ])) : r("", !0),
+        t.footer || e.$slots.footer ? (l(), s("footer", {
+          key: 4,
+          class: H(["hys-ui-card-foot", t.footerClass]),
+          style: z(t.footerStyle)
+        }, [
+          d(e.$slots, "footer", {}, () => [
+            E(C(t.footer), 1)
+          ], !0)
+        ], 6)) : r("", !0)
+      ], 16, p);
+    };
   }
 });
 export {
-  z as default
+  ye as default
 };

package/dist/components/HysCascader/HysCascader.vue.js

@@ -1,184 +1,7 @@
-import { defineComponent as K, ref as g, watch as V, computed as x, openBlock as n, createElementBlock as u, mergeProps as q, unref as i, createElementVNode as L, toDisplayString as B, createVNode as M, createBlock as S, Teleport as P, withDirectives as W, vModelText as G, createCommentVNode as m, Fragment as D, renderList as E, renderSlot as I, createTextVNode as J } from "vue";
-import { ChevronDown as Q, ChevronRight as X, Check as Y } from "lucide-vue-next";
-import { useHysRootAttrs as Z } from "../../config.js";
-import { useFloating as ee } from "../../composables/useFloating.js";
-const le = ["disabled", "aria-expanded"], te = {
-  key: 1,
-  class: "hys-ui-v4-scroll"
-}, oe = ["onClick"], ae = { key: 0 }, re = {
-  key: 2,
-  class: "hys-ui-v4-columns"
-}, ne = ["aria-label"], se = ["disabled", "aria-current", "onClick"], pe = /* @__PURE__ */ K({
-  __name: "HysCascader",
-  props: {
-    modelValue: {},
-    options: {},
-    disabled: { type: Boolean },
-    clearable: { type: Boolean },
-    filterable: { type: Boolean },
-    changeOnSelect: { type: Boolean },
-    showAllLevels: { type: Boolean, default: !0 },
-    separator: { default: " / " },
-    placeholder: { default: "选择分类" }
-  },
-  emits: ["update:modelValue", "change", "clear"],
-  setup(y, { emit: H }) {
-    const r = y, w = H, $ = Z(), O = g(), C = g(), f = g(""), d = g([...r.modelValue]), { open: k, style: N, show: z, close: p } = ee(O, C, { matchWidth: !0 });
-    V(() => r.modelValue, (e) => d.value = [...e]), V(k, (e) => {
-      e && (d.value = [...r.modelValue], f.value = "");
-    }), V(() => r.disabled, (e) => {
-      e && p();
-    });
-    const T = x(() => {
-      var t;
-      const e = [r.options];
-      let l = r.options;
-      for (const o of d.value) {
-        const a = l.find((c) => c.value === o);
-        if (!((t = a == null ? void 0 : a.children) != null && t.length)) break;
-        l = a.children, e.push(l);
-      }
-      return e;
-    });
-    function A(e) {
-      w("update:modelValue", e), w("change", e);
-    }
-    function U(e, l) {
-      var t, o;
-      e.disabled || r.disabled || (d.value = [...d.value.slice(0, l), e.value], (r.changeOnSelect || !((t = e.children) != null && t.length)) && A(d.value), (o = e.children) != null && o.length || p(!0));
-    }
-    const _ = x(() => {
-      let e = r.options;
-      const l = r.modelValue.map((t) => {
-        const o = e.find((a) => a.value === t);
-        return e = (o == null ? void 0 : o.children) || [], (o == null ? void 0 : o.label) || t;
-      });
-      return r.showAllLevels ? l.join(r.separator) : l.at(-1);
-    }), R = x(() => {
-      const e = [];
-      function l(t, o = [], a = [], c = !1) {
-        var h;
-        for (const s of t) {
-          const v = c || s.disabled, b = [...o, s.label], j = [...a, s.value];
-          !v && (!((h = s.children) != null && h.length) || r.changeOnSelect) && b.join(r.separator).toLocaleLowerCase().includes(f.value.toLocaleLowerCase()) && e.push({ label: b.join(r.separator), path: j }), s.children && l(s.children, b, j, v);
-        }
-      }
-      return l(r.options), e;
-    });
-    function F(e) {
-      var o, a, c, h;
-      if (e.key === "Escape") {
-        e.preventDefault(), p(!0);
-        return;
-      }
-      const l = document.activeElement, t = l == null ? void 0 : l.closest(".hys-ui-v4-level");
-      if (["ArrowUp", "ArrowDown", "Home", "End"].includes(e.key) && t) {
-        e.preventDefault();
-        const s = Array.from(t.querySelectorAll("button:not(:disabled)")), v = s.indexOf(l), b = e.key === "Home" ? 0 : e.key === "End" ? s.length - 1 : (v + (e.key === "ArrowUp" ? -1 : 1) + s.length) % s.length;
-        (o = s[b]) == null || o.focus();
-      } else if (["ArrowLeft", "ArrowRight"].includes(e.key)) {
-        e.preventDefault();
-        const s = Array.from(((a = C.value) == null ? void 0 : a.querySelectorAll(".hys-ui-v4-level")) || []), v = s.indexOf(t);
-        (h = (c = s[v + (e.key === "ArrowRight" ? 1 : -1)]) == null ? void 0 : c.querySelector("button:not(:disabled)")) == null || h.focus();
-      }
-    }
-    return (e, l) => (n(), u("div", q(i($), { class: "hys-ui-v4-relative" }), [
-      L("button", {
-        ref_key: "trigger",
-        ref: O,
-        class: "hys-ui-v4-control hys-ui-pf-select-trigger",
-        type: "button",
-        disabled: y.disabled,
-        "aria-expanded": i(k),
-        "aria-haspopup": "dialog",
-        onClick: l[0] || (l[0] = (t) => i(k) ? i(p)() : i(z)())
-      }, [
-        L("span", null, B(_.value || y.placeholder), 1),
-        M(i(Q), {
-          size: 16,
-          class: "hys-ui-pf-select-chevron"
-        })
-      ], 8, le),
-      (n(), S(P, { to: "body" }, [
-        i(k) ? (n(), u("div", q({
-          key: 0,
-          ref_key: "panel",
-          ref: C
-        }, i($), {
-          class: "hys-ui-v4-menu hys-ui-pf-select-menu",
-          style: i(N),
-          role: "dialog",
-          "aria-label": "级联选择",
-          onKeydown: F
-        }), [
-          y.filterable ? W((n(), u("input", {
-            key: 0,
-            "onUpdate:modelValue": l[1] || (l[1] = (t) => f.value = t),
-            class: "hys-ui-v4-control",
-            placeholder: "搜索分类",
-            "aria-label": "搜索分类"
-          }, null, 512)), [
-            [G, f.value]
-          ]) : m("", !0),
-          f.value ? (n(), u("div", te, [
-            (n(!0), u(D, null, E(R.value, (t) => (n(), u("button", {
-              key: t.path.join("/"),
-              type: "button",
-              class: "hys-ui-v4-option",
-              onClick: (o) => {
-                A(t.path), i(p)(!0);
-              }
-            }, B(t.label), 9, oe))), 128)),
-            R.value.length ? m("", !0) : (n(), u("p", ae, "无匹配分类"))
-          ])) : (n(), u("div", re, [
-            (n(!0), u(D, null, E(T.value, (t, o) => (n(), u("div", {
-              key: o,
-              class: "hys-ui-v4-scroll hys-ui-v4-level",
-              role: "group",
-              "aria-label": "第" + (o + 1) + "级"
-            }, [
-              (n(!0), u(D, null, E(t, (a) => {
-                var c;
-                return n(), u("button", {
-                  key: a.value,
-                  type: "button",
-                  class: "hys-ui-v4-option",
-                  disabled: a.disabled,
-                  "aria-current": d.value[o] === a.value ? "true" : void 0,
-                  onClick: (h) => U(a, o)
-                }, [
-                  I(e.$slots, "option", { node: a }, () => [
-                    J(B(a.label), 1)
-                  ]),
-                  (c = a.children) != null && c.length ? (n(), S(i(X), {
-                    key: 0,
-                    size: 15
-                  })) : d.value[o] === a.value ? (n(), S(i(Y), {
-                    key: 1,
-                    size: 15
-                  })) : m("", !0)
-                ], 8, se);
-              }), 128))
-            ], 8, ne))), 128))
-          ])),
-          y.clearable && y.modelValue.length ? (n(), u("button", {
-            key: 3,
-            type: "button",
-            class: "hys-ui-v4-option",
-            onClick: l[2] || (l[2] = (t) => {
-              A([]), w("clear"), i(p)(!0);
-            })
-          }, "清空选择")) : m("", !0),
-          L("button", {
-            type: "button",
-            class: "hys-ui-v4-option",
-            onClick: l[3] || (l[3] = (t) => i(p)(!0))
-          }, "关闭")
-        ], 16)) : m("", !0)
-      ]))
-    ], 16));
-  }
-});
+import o from "./HysCascader2.vue.js";
+/* empty css                 */
+import a from "../../_virtual/_plugin-vue_export-helper.js";
+const e = /* @__PURE__ */ a(o, [["__scopeId", "data-v-ab2e70d0"]]);
 export {
-  pe as default
+  e as default
 };