hys-ui 0.1.1 → 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 p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-7c0b794e"]]);
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-4edda4d1"]]);
 export {
-  p as default
+  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 i, createCommentVNode as a, 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 },
+    loadingText: { default: "加载中" },
     bordered: { type: Boolean, default: !0 },
     shadow: { default: "never" },
     bodyStyle: {},
-    size: { default: "md" }
+    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 || e.subtitle || t.$slots.header || t.$slots.action ? (s(), o("header", m, [
-        l(t.$slots, "header", {}, () => [
-          d("div", null, [
-            d("h3", null, i(e.title), 1),
-            e.subtitle ? (s(), o("p", f, i(e.subtitle), 1)) : a("", !0)
-          ])
-        ], !0),
-        d("div", null, [
-          l(t.$slots, "action", {}, void 0, !0)
-        ])
-      ])) : a("", !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)
-      ])) : a("", !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,196 +1,7 @@
-import { defineComponent as P, ref as C, watch as V, computed as S, openBlock as s, createElementBlock as n, mergeProps as T, unref as i, createElementVNode as D, withKeys as I, withModifiers as W, toDisplayString as L, createVNode as G, createBlock as B, Teleport as J, withDirectives as Q, vModelText as X, createCommentVNode as g, Fragment as q, renderList as E, renderSlot as Y, createTextVNode as Z, nextTick as ee } from "vue";
-import { ChevronDown as le, ChevronRight as te, Check as oe } from "lucide-vue-next";
-import { useHysRootAttrs as ae } from "../../config.js";
-import { useFloating as re } from "../../composables/useFloating.js";
-const se = ["disabled", "aria-expanded", "onKeydown"], ne = {
-  key: 1,
-  class: "hys-ui-v4-scroll hys-ui-cascader-results"
-}, ie = ["onClick"], ue = { key: 0 }, ce = {
-  key: 2,
-  class: "hys-ui-v4-columns"
-}, de = ["aria-label"], ye = ["disabled", "aria-current", "onClick"], be = /* @__PURE__ */ P({
-  __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(p, { emit: j }) {
-    const r = p, A = j, N = ae(), $ = C(), v = C(), m = C(""), y = C([...r.modelValue]), { open: w, style: H, show: K, close: h } = re($, v, { matchWidth: !0 });
-    V(() => r.modelValue, (e) => y.value = [...e]), V(w, (e) => {
-      e && (y.value = [...r.modelValue], m.value = "");
-    }), V(() => r.disabled, (e) => {
-      e && h();
-    });
-    const U = S(() => {
-      var t;
-      const e = [r.options];
-      let l = r.options;
-      for (const o of y.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 x(e) {
-      A("update:modelValue", e), A("change", e);
-    }
-    function z(e, l) {
-      var t, o;
-      e.disabled || r.disabled || (y.value = [...y.value.slice(0, l), e.value], (r.changeOnSelect || !((t = e.children) != null && t.length)) && x(y.value), (o = e.children) != null && o.length || h(!0));
-    }
-    const _ = S(() => {
-      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);
-    }), O = S(() => {
-      const e = [];
-      function l(t, o = [], a = [], c = !1) {
-        var f;
-        for (const d of t) {
-          const k = c || d.disabled, u = [...o, d.label], b = [...a, d.value];
-          !k && (!((f = d.children) != null && f.length) || r.changeOnSelect) && u.join(r.separator).toLocaleLowerCase().includes(m.value.toLocaleLowerCase()) && e.push({ label: u.join(r.separator), path: b }), d.children && l(d.children, u, b, k);
-        }
-      }
-      return l(r.options), e;
-    });
-    async function R() {
-      var e, l, t;
-      r.disabled || (await K(), await ee(), (t = ((e = v.value) == null ? void 0 : e.querySelector("input")) || ((l = v.value) == null ? void 0 : l.querySelector(".hys-ui-v4-level button:not(:disabled)"))) == null || t.focus());
-    }
-    function F(e) {
-      var o, a, c, f, d, k;
-      if (e.isComposing || e.keyCode === 229) return;
-      if (e.key === "Escape") {
-        e.preventDefault(), h(!0);
-        return;
-      }
-      const l = document.activeElement;
-      let t = l == null ? void 0 : l.closest(".hys-ui-v4-level,.hys-ui-cascader-results");
-      if ((l == null ? void 0 : l.tagName) === "INPUT") {
-        if (e.key !== "ArrowDown") return;
-        e.preventDefault(), (a = (o = v.value) == null ? void 0 : o.querySelector(".hys-ui-cascader-results button,.hys-ui-v4-level button:not(:disabled)")) == null || a.focus();
-        return;
-      }
-      if (["ArrowUp", "ArrowDown", "Home", "End"].includes(e.key) && t) {
-        e.preventDefault();
-        const u = Array.from(t.querySelectorAll("button:not(:disabled)")), b = u.indexOf(l), M = e.key === "Home" ? 0 : e.key === "End" ? u.length - 1 : (b + (e.key === "ArrowUp" ? -1 : 1) + u.length) % u.length;
-        (c = u[M]) == null || c.focus();
-      } else if (t && ["ArrowLeft", "ArrowRight"].includes(e.key)) {
-        e.preventDefault();
-        const u = Array.from(((f = v.value) == null ? void 0 : f.querySelectorAll(".hys-ui-v4-level")) || []), b = u.indexOf(t);
-        (k = (d = u[b + (e.key === "ArrowRight" ? 1 : -1)]) == null ? void 0 : d.querySelector("button:not(:disabled)")) == null || k.focus();
-      }
-    }
-    return (e, l) => (s(), n("div", T(i(N), { class: "hys-ui-v4-relative" }), [
-      D("button", {
-        ref_key: "trigger",
-        ref: $,
-        class: "hys-ui-v4-control hys-ui-pf-select-trigger",
-        type: "button",
-        disabled: p.disabled,
-        "aria-expanded": i(w),
-        "aria-haspopup": "dialog",
-        onClick: l[0] || (l[0] = (t) => i(w) ? i(h)() : R()),
-        onKeydown: I(W(R, ["prevent"]), ["down"])
-      }, [
-        D("span", null, L(_.value || p.placeholder), 1),
-        G(i(le), {
-          size: 16,
-          class: "hys-ui-pf-select-chevron"
-        })
-      ], 40, se),
-      (s(), B(J, { to: "body" }, [
-        i(w) ? (s(), n("div", T({
-          key: 0,
-          ref_key: "panel",
-          ref: v
-        }, i(N), {
-          class: "hys-ui-v4-menu hys-ui-pf-select-menu",
-          style: i(H),
-          role: "dialog",
-          "aria-label": "级联选择",
-          onKeydown: F
-        }), [
-          p.filterable ? Q((s(), n("input", {
-            key: 0,
-            "onUpdate:modelValue": l[1] || (l[1] = (t) => m.value = t),
-            class: "hys-ui-v4-control",
-            placeholder: "搜索分类",
-            "aria-label": "搜索分类"
-          }, null, 512)), [
-            [X, m.value]
-          ]) : g("", !0),
-          m.value ? (s(), n("div", ne, [
-            (s(!0), n(q, null, E(O.value, (t) => (s(), n("button", {
-              key: t.path.join("/"),
-              type: "button",
-              class: "hys-ui-v4-option",
-              onClick: (o) => {
-                x(t.path), i(h)(!0);
-              }
-            }, L(t.label), 9, ie))), 128)),
-            O.value.length ? g("", !0) : (s(), n("p", ue, "无匹配分类"))
-          ])) : (s(), n("div", ce, [
-            (s(!0), n(q, null, E(U.value, (t, o) => (s(), n("div", {
-              key: o,
-              class: "hys-ui-v4-scroll hys-ui-v4-level",
-              role: "group",
-              "aria-label": "第" + (o + 1) + "级"
-            }, [
-              (s(!0), n(q, null, E(t, (a) => {
-                var c;
-                return s(), n("button", {
-                  key: a.value,
-                  type: "button",
-                  class: "hys-ui-v4-option",
-                  disabled: a.disabled,
-                  "aria-current": y.value[o] === a.value ? "true" : void 0,
-                  onClick: (f) => z(a, o)
-                }, [
-                  Y(e.$slots, "option", { node: a }, () => [
-                    Z(L(a.label), 1)
-                  ]),
-                  (c = a.children) != null && c.length ? (s(), B(i(te), {
-                    key: 0,
-                    size: 15
-                  })) : y.value[o] === a.value ? (s(), B(i(oe), {
-                    key: 1,
-                    size: 15
-                  })) : g("", !0)
-                ], 8, ye);
-              }), 128))
-            ], 8, de))), 128))
-          ])),
-          p.clearable && p.modelValue.length ? (s(), n("button", {
-            key: 3,
-            type: "button",
-            class: "hys-ui-v4-option",
-            onClick: l[2] || (l[2] = (t) => {
-              x([]), A("clear"), i(h)(!0);
-            })
-          }, "清空选择")) : g("", !0),
-          D("button", {
-            type: "button",
-            class: "hys-ui-v4-option",
-            onClick: l[3] || (l[3] = (t) => i(h)(!0))
-          }, "关闭")
-        ], 16)) : g("", !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 {
-  be as default
+  e as default
 };