@zl-ui-kit/components 0.0.0-stage → 0.3.0

package/dist/components/ZlAppMenu/AppMenu.vue.mjs

@@ -0,0 +1,37 @@
+import { defineComponent as u, resolveComponent as s, openBlock as n, createBlock as l, withCtx as i, createElementBlock as r, Fragment as p, renderList as f } from "vue";
+import d from "./AppMenuItem.vue.mjs";
+const B = /* @__PURE__ */ u({
+  name: "ZlAppMenu",
+  __name: "AppMenu",
+  props: {
+    collapsed: { type: Boolean, default: !1 },
+    layout: { default: "vertical" },
+    menus: { default: () => [] }
+  },
+  emits: ["menu-item-click"],
+  setup(e, { emit: o }) {
+    const m = o;
+    return (k, _) => {
+      const a = s("el-menu");
+      return n(), l(a, {
+        class: "zl-menu",
+        collapse: e.collapsed,
+        mode: e.layout,
+        "collapse-transition": !1
+      }, {
+        default: i(() => [
+          (n(!0), r(p, null, f(e.menus, (t) => (n(), l(d, {
+            key: t.name,
+            menu: t,
+            onMenuItemClick: (c) => m("menu-item-click", c)
+          }, null, 8, ["menu", "onMenuItemClick"]))), 128))
+        ]),
+        _: 1
+      }, 8, ["collapse", "mode"]);
+    };
+  }
+});
+export {
+  B as default
+};
+//# sourceMappingURL=AppMenu.vue.mjs.map

package/dist/components/ZlAppMenu/AppMenu3.vue.mjs

@@ -0,0 +1,6 @@
+import o from "./AppMenu.vue.mjs";
+import './AppMenu.css';/* empty css              */
+export {
+  o as default
+};
+//# sourceMappingURL=AppMenu3.vue.mjs.map

package/dist/components/ZlAppMenu/AppMenuItem.vue.d.ts

@@ -0,0 +1,11 @@
+import { MenuItem } from './AppMenu.vue';
+type __VLS_Props = {
+    menu: MenuItem;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "menu-item-click": (menu: MenuItem) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onMenu-item-click"?: ((menu: MenuItem) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=AppMenuItem.vue.d.ts.map

package/dist/components/ZlAppMenu/AppMenuItem.vue.mjs

@@ -0,0 +1,58 @@
+import { defineComponent as I, resolveComponent as i, openBlock as n, createBlock as t, withCtx as m, createElementBlock as M, Fragment as p, renderList as A, createCommentVNode as r, createElementVNode as g, toDisplayString as a, createTextVNode as h } from "vue";
+import d from "../ZlIcon/index.vue.mjs";
+const V = /* @__PURE__ */ I({
+  name: "ZlAppMenuItem",
+  __name: "AppMenuItem",
+  props: {
+    menu: {}
+  },
+  emits: ["menu-item-click"],
+  setup(e, { emit: k }) {
+    const f = e, s = k;
+    function l(c = f.menu) {
+      s("menu-item-click", c);
+    }
+    return (c, o) => {
+      const x = i("AppMenuItem", !0), y = i("el-sub-menu"), C = i("el-menu-item");
+      return e.menu.children?.length ? (n(), t(y, {
+        key: 0,
+        index: e.menu.name
+      }, {
+        title: m(() => [
+          e.menu.icon ? (n(), t(d, {
+            key: 0,
+            icon: e.menu.icon
+          }, null, 8, ["icon"])) : r("", !0),
+          g("span", null, a(e.menu.title), 1)
+        ]),
+        default: m(() => [
+          (n(!0), M(p, null, A(e.menu.children, (u) => (n(), t(x, {
+            key: u.name,
+            menu: u,
+            onMenuItemClick: l
+          }, null, 8, ["menu"]))), 128))
+        ]),
+        _: 1
+      }, 8, ["index"])) : (n(), t(C, {
+        key: 1,
+        index: e.menu.name,
+        onClick: o[0] || (o[0] = (u) => l())
+      }, {
+        title: m(() => [
+          h(a(e.menu.title), 1)
+        ]),
+        default: m(() => [
+          e.menu.icon ? (n(), t(d, {
+            key: 0,
+            icon: e.menu.icon
+          }, null, 8, ["icon"])) : r("", !0)
+        ]),
+        _: 1
+      }, 8, ["index"]));
+    };
+  }
+});
+export {
+  V as default
+};
+//# sourceMappingURL=AppMenuItem.vue.mjs.map

package/dist/components/ZlAppMenu/AppMenuItem2.vue.mjs

@@ -0,0 +1,5 @@
+import f from "./AppMenuItem.vue.mjs";
+export {
+  f as default
+};
+//# sourceMappingURL=AppMenuItem2.vue.mjs.map

package/dist/components/ZlAppSlogan/index.css

@@ -0,0 +1 @@
+@charset "UTF-8";.zl-app-slogan{width:100%;overflow:hidden;display:flex;align-items:center;gap:6px}.zl-app-slogan__logo{width:24px;aspect-ratio:1;object-fit:cover}.zl-app-slogan__text{white-space:nowrap;font-family:var(--zl-slogan-font-family, "PingFang SC", "Microsoft YaHei", sans-serif);color:var(--zl-menu-text-color, var(--zl-text-2));font-size:16px;font-weight:400;letter-spacing:1.6px;line-height:24px}

package/dist/components/ZlAppSlogan/index.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    collapsed?: boolean;
+    logo?: string;
+    title?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=index.vue.d.ts.map

package/dist/components/ZlAppSlogan/index.vue.mjs

@@ -0,0 +1,30 @@
+import { defineComponent as o, openBlock as l, createElementBlock as a, createElementVNode as t, createVNode as s, Transition as n, withCtx as c, withDirectives as i, toDisplayString as p, vShow as r } from "vue";
+const d = { class: "zl-app-slogan" }, _ = ["src"], u = /* @__PURE__ */ o({
+  name: "ZlAppSlogan",
+  __name: "index",
+  props: {
+    collapsed: { type: Boolean },
+    logo: {},
+    title: {}
+  },
+  setup(e) {
+    return (g, m) => (l(), a("div", d, [
+      t("img", {
+        class: "zl-app-slogan__logo",
+        src: e.logo
+      }, null, 8, _),
+      s(n, { persisted: "" }, {
+        default: c(() => [
+          i(t("div", { class: "zl-app-slogan__text" }, p(e.title), 513), [
+            [r, !e.collapsed]
+          ])
+        ]),
+        _: 1
+      })
+    ]));
+  }
+});
+export {
+  u as default
+};
+//# sourceMappingURL=index.vue.mjs.map

package/dist/components/ZlAppSlogan/index3.vue.mjs

@@ -0,0 +1,6 @@
+import o from "./index.vue.mjs";
+import './index.css';/* empty css            */
+export {
+  o as default
+};
+//# sourceMappingURL=index3.vue.mjs.map

package/dist/components/ZlAutoTooltip/index.css

@@ -0,0 +1 @@
+.zl-auto-tooltip[data-v-2e71751a]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

package/dist/components/ZlAutoTooltip/index.vue.d.ts

@@ -0,0 +1,19 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=index.vue.d.ts.map

package/dist/components/ZlAutoTooltip/index.vue.mjs

@@ -0,0 +1,8 @@
+import o from "./index2.vue.mjs";
+import './index.css';/* empty css            */
+import t from "../../_virtual/_plugin-vue_export-helper.mjs";
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-2e71751a"]]);
+export {
+  m as default
+};
+//# sourceMappingURL=index.vue.mjs.map

package/dist/components/ZlAutoTooltip/index2.vue.mjs

@@ -0,0 +1,49 @@
+import { defineComponent as u, ref as n, useAttrs as h, h as f, resolveComponent as C, openBlock as i, createBlock as c, mergeProps as k, withCtx as l, createVNode as T, unref as p, renderSlot as d } from "vue";
+import { useResizeObserver as x } from "@vueuse/core";
+const w = /* @__PURE__ */ u({
+  name: "ZlAutoTooltip",
+  inheritAttrs: !1,
+  __name: "index",
+  setup(z) {
+    const e = n(null), o = n(null), r = n(!1), s = n(""), v = h();
+    x(e, _);
+    const a = u({
+      render({ $slots: t }) {
+        return f("div", { class: "zl-auto-tooltip", ref: e, ...v }, [
+          f("span", { class: "zl-auto-tooltip__content", ref: o }, {
+            default: () => t.default?.()
+          })
+        ]);
+      }
+    });
+    function _() {
+      !e.value || !o.value || (s.value = o.value.textContent ?? "", r.value = o.value.offsetWidth > e.value.offsetWidth);
+    }
+    return (t, A) => {
+      const m = C("el-tooltip");
+      return r.value ? (i(), c(m, k({
+        key: 0,
+        content: s.value
+      }, t.$attrs), {
+        default: l(() => [
+          T(p(a), null, {
+            default: l(() => [
+              d(t.$slots, "default", {}, void 0, !0)
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      }, 16, ["content"])) : (i(), c(p(a), { key: 1 }, {
+        default: l(() => [
+          d(t.$slots, "default", {}, void 0, !0)
+        ]),
+        _: 3
+      }));
+    };
+  }
+});
+export {
+  w as default
+};
+//# sourceMappingURL=index2.vue.mjs.map

package/dist/components/ZlAvatar/Group.css

@@ -0,0 +1 @@
+.zl-avatar-group[data-v-9a1e91e1]{position:relative;display:inline-flex;align-items:center}.zl-avatar-group__divider[data-v-9a1e91e1]{margin:auto 11px auto 6px;height:16px;border-left:1px solid var(--zl-border-2, rgb(201, 205, 212))}.zl-avatar-group__divider~.zl-avatar[data-v-9a1e91e1]{border:1px solid var(--zl-bg-1, #fff);margin-left:-5px}

package/dist/components/ZlAvatar/Group.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    list: Array<Record<string, any>>;
+    /** 字段映射（imageUrl/label 的取值键） */
+    props?: {
+        imageUrl?: string;
+        label?: string;
+    };
+    size?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    props: {
+        imageUrl?: string;
+        label?: string;
+    };
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=Group.vue.d.ts.map

package/dist/components/ZlAvatar/Group.vue.mjs

@@ -0,0 +1,8 @@
+import o from "./Group2.vue.mjs";
+import './Group.css';/* empty css            */
+import r from "../../_virtual/_plugin-vue_export-helper.mjs";
+const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-9a1e91e1"]]);
+export {
+  e as default
+};
+//# sourceMappingURL=Group.vue.mjs.map

package/dist/components/ZlAvatar/Group2.vue.mjs

@@ -0,0 +1,37 @@
+import { defineComponent as c, openBlock as l, createElementBlock as i, Fragment as s, renderList as n, createBlock as o, createCommentVNode as m, normalizeStyle as g } from "vue";
+import u from "./index.vue.mjs";
+const p = { class: "zl-avatar-group" }, d = {
+  key: 0,
+  class: "zl-avatar-group__divider"
+}, k = /* @__PURE__ */ c({
+  name: "ZlAvatarGroup",
+  __name: "Group",
+  props: {
+    list: {},
+    props: { default: () => ({ imageUrl: "imageUrl", label: "label" }) },
+    size: {}
+  },
+  setup(e) {
+    const t = e;
+    return (z, b) => (l(), i("div", p, [
+      (l(!0), i(s, null, n(e.list.slice(0, 1), (r, a) => (l(), o(u, {
+        key: `first${a}`,
+        "image-url": r[t.props.imageUrl],
+        label: r[t.props.label],
+        size: e.size
+      }, null, 8, ["image-url", "label", "size"]))), 128)),
+      e.list.slice(1).length ? (l(), i("div", d)) : m("", !0),
+      (l(!0), i(s, null, n(e.list.slice(1), (r, a) => (l(), o(u, {
+        key: a,
+        "image-url": r[t.props.imageUrl],
+        label: r[t.props.label],
+        style: g({ zIndex: e.list.length - a }),
+        size: e.size
+      }, null, 8, ["image-url", "label", "style", "size"]))), 128))
+    ]));
+  }
+});
+export {
+  k as default
+};
+//# sourceMappingURL=Group2.vue.mjs.map

package/dist/components/ZlAvatar/index.css

@@ -0,0 +1 @@
+.zl-avatar[data-v-51c25c32]{position:relative;display:flex;align-items:center;border-radius:50%;overflow:hidden;color:#fff;box-sizing:content-box;width:var(--zl-avatar-size);height:var(--zl-avatar-size);font-size:var(--zl-avatar-size)}.zl-avatar__text[data-v-51c25c32]{display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-transform:uppercase;background-color:var(--zl-gold-6, #f7ba1e);font-size:40%}.zl-avatar__image[data-v-51c25c32]{width:100%;overflow:hidden}

package/dist/components/ZlAvatar/index.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    imageUrl?: string;
+    label?: string;
+    /** 尺寸（CSS 长度） */
+    size?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=index.vue.d.ts.map

package/dist/components/ZlAvatar/index.vue.mjs

@@ -0,0 +1,8 @@
+import o from "./index2.vue.mjs";
+import './index.css';/* empty css            */
+import t from "../../_virtual/_plugin-vue_export-helper.mjs";
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-51c25c32"]]);
+export {
+  m as default
+};
+//# sourceMappingURL=index.vue.mjs.map

package/dist/components/ZlAvatar/index2.vue.mjs

@@ -0,0 +1,39 @@
+import { defineComponent as s, ref as o, openBlock as t, createElementBlock as l, normalizeStyle as c, toDisplayString as m, createCommentVNode as i, withDirectives as d, vShow as u } from "vue";
+const v = ["title"], f = {
+  key: 0,
+  class: "zl-avatar__text"
+}, z = ["src"], y = /* @__PURE__ */ s({
+  name: "ZlAvatar",
+  __name: "index",
+  props: {
+    imageUrl: {},
+    label: {},
+    size: { default: "20px" }
+  },
+  setup(e) {
+    const a = o(!1);
+    function r() {
+      a.value = !0;
+    }
+    return (g, n) => (t(), l("div", {
+      class: "zl-avatar",
+      style: c({ "--zl-avatar-size": e.size }),
+      title: e.label
+    }, [
+      e.label && !a.value ? (t(), l("span", f, m(e.label.slice(0, 1)), 1)) : i("", !0),
+      e.imageUrl ? d((t(), l("img", {
+        key: 1,
+        class: "zl-avatar__image",
+        src: e.imageUrl,
+        onLoad: r,
+        onError: n[0] || (n[0] = (h) => a.value = !1)
+      }, null, 40, z)), [
+        [u, a.value]
+      ]) : i("", !0)
+    ], 12, v));
+  }
+});
+export {
+  y as default
+};
+//# sourceMappingURL=index2.vue.mjs.map

package/dist/components/ZlCard/index.css

@@ -0,0 +1 @@
+.zl-card{position:relative;border-radius:var(--zl-radius-large, 6px);background-color:var(--zl-bg-1, #fff);box-shadow:0 2px 5px 0 var(--zl-shadow, rgba(36, 46, 67, .1))}.zl-card__header{display:grid;grid-template-columns:44px 1fr;padding:16px 16px 12px;align-items:center;gap:2px 12px}.zl-card__icon{grid-row:1/span 2;aspect-ratio:1/1;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:6px}.zl-card__icon>img{width:40px;height:40px}.zl-card__icon>.zl-icon{font-size:32px}.zl-card__title{display:flex;align-items:center;gap:12px;overflow:hidden}.zl-card__title-text{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--zl-text-1, #242e43);font-size:14px;font-weight:600;line-height:22px}.zl-card__title-append{flex:1 0 auto}.zl-card__subtitle{color:var(--zl-text-3, #79879c);font-size:12px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zl-card__body{padding:0 16px 12px}.zl-card__footer{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-top:1px solid var(--zl-border-2, #e3e9ef)}.zl-card-hoverable{border:1px solid var(--zl-border-2, #e3e9ef)}.zl-card-hoverable:hover{border-color:var(--zl-primary-6, var(--el-color-primary, #0066ff));box-shadow:0 4px 10px #00223e14}

package/dist/components/ZlCard/index.vue.d.ts

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    hoverable?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        icon?(_: {}): any;
+        title?(_: {}): any;
+        'title-append'?(_: {}): any;
+        subtitle?(_: {}): any;
+        default?(_: {}): any;
+        'footer-prepend'?(_: {}): any;
+        footer?(_: {}): any;
+        extra?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    hoverable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=index.vue.d.ts.map

package/dist/components/ZlCard/index.vue.mjs

@@ -0,0 +1,48 @@
+import { defineComponent as r, openBlock as o, createElementBlock as l, normalizeClass as i, createElementVNode as t, renderSlot as s, createCommentVNode as d } from "vue";
+const n = { class: "zl-card__header" }, c = { class: "zl-card__icon" }, _ = { class: "zl-card__title" }, p = { class: "zl-card__title-text" }, h = { class: "zl-card__title-append" }, f = { class: "zl-card__subtitle" }, u = {
+  key: 0,
+  class: "zl-card__body"
+}, v = {
+  key: 1,
+  class: "zl-card__footer"
+}, $ = /* @__PURE__ */ r({
+  name: "ZlCard",
+  __name: "index",
+  props: {
+    hoverable: { type: Boolean, default: !0 }
+  },
+  setup(a) {
+    return (e, m) => (o(), l("div", {
+      class: i(["zl-card", { "zl-card-hoverable": a.hoverable }])
+    }, [
+      t("div", n, [
+        t("div", c, [
+          s(e.$slots, "icon")
+        ]),
+        t("div", _, [
+          t("div", p, [
+            s(e.$slots, "title")
+          ]),
+          t("div", h, [
+            s(e.$slots, "title-append")
+          ])
+        ]),
+        t("div", f, [
+          s(e.$slots, "subtitle")
+        ])
+      ]),
+      e.$slots.default ? (o(), l("div", u, [
+        s(e.$slots, "default")
+      ])) : d("", !0),
+      e.$slots.footer || e.$slots["footer-prepend"] ? (o(), l("div", v, [
+        s(e.$slots, "footer-prepend"),
+        s(e.$slots, "footer")
+      ])) : d("", !0),
+      s(e.$slots, "extra")
+    ], 2));
+  }
+});
+export {
+  $ as default
+};
+//# sourceMappingURL=index.vue.mjs.map

package/dist/components/ZlCard/index3.vue.mjs

@@ -0,0 +1,6 @@
+import o from "./index.vue.mjs";
+import './index.css';/* empty css            */
+export {
+  o as default
+};
+//# sourceMappingURL=index3.vue.mjs.map

package/dist/components/ZlCardPage/index.css

@@ -0,0 +1 @@
+.zl-card-page{width:100%;height:100%;display:flex;flex-direction:column;--card-min-width: 100%}.zl-card-page__content{width:100%;flex:1;min-height:0;overflow:auto;padding:10px 16px}.zl-card-page__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card-min-width),1fr));gap:16px}.zl-card-page__list .zl-empty{grid-column:1/-1}