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

package/README.md

@@ -1,3 +1,25 @@
-# Temporary Holding Version
+# @zl-ui-kit/components
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+ZL UI 业务组件库（**Element Plus 体系**，`Zl` 前缀，TypeScript + `<script setup lang="ts">`）。
+对外 API（props/emits/slots）与参考实现保持一致；样式经 `vite-plugin-lib-inject-css` 随组件自动注入，无需手动引 css。
+
+## 已迁移组件（58 个，全量收官）
+
+通用：ZlIcon / ZlIconHover / ZlIconLabel / ZlAutoTooltip / ZlTag / ZlCornerTag / ZlText / ZlTitle / ZlCopy / ZlEmpty / ZlPagination / ZlDictTag（需 micro-app 字典环境）
+表格/表单/反馈：ZlTable / ZlSearchTable / ZlForm / ZlSearch / ZlAction / ZlActionList / ZlDescription / ZlDrawer / ZlPopconfirm / ZlSwitch / ZlFormChild / ZlHorizontalTable / ZlUpload（+ usePermission / useTablePagination hooks）
+通用/布局：ZlAvatar(+Group) / ZlCheckAll / ZlRadioTag / ZlCheckboxTag / ZlAddSub / ZlSorter(+List) / ZlLayoutSwitch / ZlSection / ZlCard / ZlCardPage / ZlAppSlogan / ZlPermission / ZlTabs / ZlGrid(+GridItem) / ZlDynamicComponent / ZlTree / ZlTreeSelect / ZlAppLayout(双形态) / ZlAppMenu(+Item) / ZlChart
+
+> 迁移批次见需求文档 §12-Q8：二批（表格/表单/反馈）已完成，ZlUpload 顺延三批；三批=编辑器/文件预览/登录/
+## 使用
+
+```ts
+import { ZlTag, ZlIcon, install } from '@zl-ui-kit/components'
+
+app.use(install)          // 全量注册；或按需 import { ZlTag }
+```
+
+前置：宿主已安装 `vue`、`element-plus`、`@vueuse/core`（peer）；离线图标需 `presetIconifyIcon(iconsFromAtZlIcons)`。
+
+## 本地调试
+
+playground `/components` 页 alias 直指 `src/`（改源码即热更）；每组件一个样例 section，新组件迁移须同步补样例（`docs/playground页面索引.md`）。`pnpm build`（vite 库模式 + dts）。发布见 `docs/发布流程.md`。

package/dist/_virtual/_plugin-vue_export-helper.mjs

@@ -0,0 +1,10 @@
+const s = (t, e) => {
+  const o = t.__vccOpts || t;
+  for (const [r, c] of e)
+    o[r] = c;
+  return o;
+};
+export {
+  s as default
+};
+//# sourceMappingURL=_plugin-vue_export-helper.mjs.map

package/dist/components/ZlAction/List.css

@@ -0,0 +1 @@
+.zl-action-list{display:inline-flex;align-items:center;color:var(--zl-link-6, var(--el-color-primary, #3261ce));font-size:12px;line-height:20px;flex:0 0 auto;gap:4px}.zl-action-list__action{display:flex;align-items:center;gap:4px;cursor:pointer;font-size:12px}.zl-action-list__separator{margin:4px 0;width:1px;background-color:var(--zl-border-2)}.zl-action-list__separator:last-child{display:none}.zl-action-list__more{color:inherit}.zl-action-list__more-icon{cursor:pointer;font-size:12px}

package/dist/components/ZlAction/List.vue.d.ts

@@ -0,0 +1,37 @@
+import { ActionItem } from './types';
+type __VLS_Props = {
+    actions?: ActionItem[];
+    actionArgs?: any[];
+    visibleArgs?: any[];
+    /** 直接展示的操作数，超出收入"更多"下拉 */
+    listCount?: number;
+    iconMore?: boolean | Record<string, any>;
+    separator?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        more?(_: {}): 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, {} & {
+    action: (action: ActionItem, ...args: any[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onAction?: ((action: ActionItem, ...args: any[]) => any) | undefined;
+}>, {
+    actions: ActionItem[];
+    actionArgs: any[];
+    visibleArgs: any[];
+    listCount: number;
+}, {}, {}, {}, 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=List.vue.d.ts.map

package/dist/components/ZlAction/List.vue.mjs

@@ -0,0 +1,138 @@
+import { defineComponent as Z, computed as C, resolveComponent as s, openBlock as n, createElementBlock as c, Fragment as p, renderList as g, createBlock as r, withCtx as i, createVNode as h, mergeProps as f, withModifiers as _, createCommentVNode as d, createElementVNode as j, toDisplayString as v, renderSlot as E, normalizeProps as O, createTextVNode as z, unref as S, normalizeClass as T } from "vue";
+import { useZlT as D } from "@zl-ui-kit/composables";
+import { isPlainObject as F } from "@zl-ui-kit/utils";
+import w from "../ZlIcon/index.vue.mjs";
+import A from "../ZlIconHover/index.vue.mjs";
+import { usePermission as I } from "../ZlPermission/usePermission.mjs";
+const q = { class: "zl-action-list" }, G = {
+  key: 2,
+  class: "zl-action-list__separator"
+}, W = /* @__PURE__ */ Z({
+  name: "ZlActionList",
+  __name: "List",
+  props: {
+    actions: { default: () => [] },
+    actionArgs: { default: () => [] },
+    visibleArgs: { default: () => [] },
+    listCount: { default: 2 },
+    iconMore: { type: [Boolean, Object] },
+    separator: { type: Boolean }
+  },
+  emits: ["action"],
+  setup(k, { emit: P }) {
+    const { t: M } = D(), t = k, B = P, y = C(() => {
+      if (t.iconMore === !0)
+        return { icon: "zl:operate-color" };
+      if (F(t.iconMore))
+        return { icon: "zl:operate-color", ...t.iconMore };
+    });
+    function N(o) {
+      return o.permission ? I(o.permission).value : !0;
+    }
+    const u = C(() => {
+      const o = t.actions.filter((l) => {
+        const a = N(l);
+        return typeof l.visible == "function" ? l.visible(...t.visibleArgs, l) && a : (l.visible === void 0 || !!l.visible) && a;
+      });
+      return o.length <= t.listCount ? { list: o, more: [] } : {
+        list: o.slice(0, t.listCount - 1),
+        more: o.slice(t.listCount - 1)
+      };
+    });
+    function m(o) {
+      B("action", o, ...t.actionArgs), typeof o.handler == "function" && o.handler(...t.actionArgs, o);
+    }
+    return (o, l) => {
+      const a = s("el-tooltip"), b = s("el-link"), V = s("el-dropdown-item"), $ = s("el-dropdown-menu"), x = s("el-dropdown");
+      return n(), c("div", q, [
+        (n(!0), c(p, null, g(u.value.list, (e) => (n(), c(p, {
+          key: e.label
+        }, [
+          e.tooltip && e.icon ? (n(), r(a, {
+            key: 0,
+            content: e.label,
+            placement: "top"
+          }, {
+            default: i(() => [
+              h(A, f({
+                icon: e.icon
+              }, { ref_for: !0 }, e.iconProps, {
+                onClick: _((L) => m(e), ["stop"])
+              }), null, 16, ["icon", "onClick"])
+            ]),
+            _: 2
+          }, 1032, ["content"])) : (n(), r(b, {
+            key: 1,
+            class: "zl-action-list__action",
+            type: "primary",
+            underline: !1,
+            onClick: _((L) => m(e), ["stop"])
+          }, {
+            default: i(() => [
+              e.icon ? (n(), r(w, f({
+                key: 0,
+                icon: e.icon
+              }, { ref_for: !0 }, e.iconProps), null, 16, ["icon"])) : d("", !0),
+              j("span", null, v(e.label), 1)
+            ]),
+            _: 2
+          }, 1032, ["onClick"])),
+          k.separator ? (n(), c("div", G)) : d("", !0)
+        ], 64))), 128)),
+        u.value.more.length ? (n(), r(x, {
+          key: 0,
+          trigger: "hover",
+          placement: "bottom-end",
+          class: "zl-action-list__more",
+          onCommand: m
+        }, {
+          dropdown: i(() => [
+            h($, null, {
+              default: i(() => [
+                (n(!0), c(p, null, g(u.value.more, (e) => (n(), r(V, {
+                  key: e.label,
+                  command: e,
+                  disabled: e.disabled,
+                  divided: e.divided
+                }, {
+                  default: i(() => [
+                    e.icon ? (n(), r(w, {
+                      key: 0,
+                      icon: e.icon,
+                      class: T(e.iconClass)
+                    }, null, 8, ["icon", "class"])) : d("", !0),
+                    z(" " + v(e.label), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["command", "disabled", "divided"]))), 128))
+              ]),
+              _: 1
+            })
+          ]),
+          default: i(() => [
+            E(o.$slots, "more", {}, () => [
+              y.value ? (n(), r(A, O(f({ key: 0 }, y.value)), null, 16)) : (n(), r(b, {
+                key: 1,
+                class: "zl-action-list__more-icon",
+                type: "primary",
+                underline: !1,
+                onClick: l[0] || (l[0] = _(() => {
+                }, ["stop"]))
+              }, {
+                default: i(() => [
+                  z(v(S(M)("zl.action.more", "更多")), 1)
+                ]),
+                _: 1
+              }))
+            ])
+          ]),
+          _: 3
+        })) : d("", !0)
+      ]);
+    };
+  }
+});
+export {
+  W as default
+};
+//# sourceMappingURL=List.vue.mjs.map

package/dist/components/ZlAction/List3.vue.mjs

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

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

@@ -0,0 +1,3 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=index.vue.d.ts.map

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

@@ -0,0 +1,22 @@
+import { defineComponent as n, resolveComponent as r, openBlock as t, createBlock as c, normalizeProps as i, guardReactiveProps as a, withCtx as m, createVNode as _ } from "vue";
+import p from "./List.vue.mjs";
+import './List.css';/* empty css           */
+const h = /* @__PURE__ */ n({
+  name: "ZlAction",
+  __name: "index",
+  setup(s) {
+    return (o, l) => {
+      const e = r("zl-icon-hover");
+      return t(), c(p, i(a({ ...o.$attrs, listCount: 2 })), {
+        more: m(() => [
+          _(e, { icon: "zl:arrow-down" })
+        ]),
+        _: 1
+      }, 16);
+    };
+  }
+});
+export {
+  h as default
+};
+//# sourceMappingURL=index.vue.mjs.map

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

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

package/dist/components/ZlAction/types.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 操作项模型（ZlActionList / ZlTable actions 列共用）
+ */
+export interface ActionItem {
+    label: string;
+    icon?: string;
+    iconProps?: Record<string, any>;
+    iconClass?: string;
+    tooltip?: boolean;
+    disabled?: boolean;
+    divided?: boolean;
+    /** 权限键（三段式，经 usePermission 校验） */
+    permission?: string | string[];
+    /** 显隐判定（接收 visibleArgs） */
+    visible?: (...args: any[]) => boolean;
+    /** 点击处理（接收 actionArgs） */
+    handler?: (...args: any[]) => void;
+    [key: string]: any;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/ZlAddSub/index.css

@@ -0,0 +1 @@
+.zl-add[data-v-a7c5b5d7]{display:flex;flex-direction:column;gap:8px}.zl-add__box[data-v-a7c5b5d7]{display:flex;flex-direction:row;align-items:center}.zl-add__box .zl-icon[data-v-a7c5b5d7]{cursor:pointer;margin-left:8px}.zl-add__content[data-v-a7c5b5d7]{flex:1}.zl-add__dot[data-v-a7c5b5d7]{display:inline-flex;width:14px;height:14px;margin-left:8px}

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

@@ -0,0 +1,32 @@
+type __VLS_Props = {
+    model?: any[];
+    /** 新增项的默认值 */
+    defaultVal?: any[] | string;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        add?(_: {
+            index: number;
+        }): 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, {} & {
+    "update:model": (value: any[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:model"?: ((value: any[]) => any) | undefined;
+}>, {
+    model: any[];
+    defaultVal: any[] | string;
+}, {}, {}, {}, 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/ZlAddSub/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-a7c5b5d7"]]);
+export {
+  m as default
+};
+//# sourceMappingURL=index.vue.mjs.map

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

@@ -0,0 +1,47 @@
+import { defineComponent as u, openBlock as e, createElementBlock as t, Fragment as _, renderList as p, createElementVNode as f, renderSlot as k, createVNode as z, createBlock as v } from "vue";
+import s from "../ZlIcon/index.vue.mjs";
+const h = { class: "zl-add" }, x = { class: "zl-add__content" }, C = {
+  key: 1,
+  class: "zl-add__dot"
+}, E = /* @__PURE__ */ u({
+  name: "ZlAddSub",
+  __name: "index",
+  props: {
+    model: { default: () => [] },
+    defaultVal: { default: () => [] }
+  },
+  emits: ["update:model"],
+  setup(c, { emit: r }) {
+    const d = c, a = r;
+    function i() {
+      a("update:model", [...d.model, d.defaultVal]);
+    }
+    function m(l) {
+      const n = [...d.model];
+      n.splice(l, 1), a("update:model", n);
+    }
+    return (l, n) => (e(), t("div", h, [
+      (e(!0), t(_, null, p(c.model, (V, o) => (e(), t("div", {
+        key: o,
+        class: "zl-add__box"
+      }, [
+        f("div", x, [
+          k(l.$slots, "add", { index: o }, void 0, !0)
+        ]),
+        z(s, {
+          icon: "zl:add-color",
+          onClick: i
+        }),
+        o > 0 ? (e(), v(s, {
+          key: 0,
+          icon: "zl:minus-color",
+          onClick: (b) => m(o)
+        }, null, 8, ["onClick"])) : (e(), t("span", C))
+      ]))), 128))
+    ]));
+  }
+});
+export {
+  E as default
+};
+//# sourceMappingURL=index2.vue.mjs.map

package/dist/components/ZlAppLayout/Horizontal.css

@@ -0,0 +1 @@
+.zl-layout-horizontal{height:100%;display:flex;flex-direction:column}.zl-layout-horizontal__header{display:flex;align-items:center;background:var(--zl-layout-horizontal-header-bg, #fff)}.zl-layout-horizontal__logo{padding:10px 16px}.zl-layout-horizontal__menu{flex:1;width:1px}.zl-layout-horizontal__user{flex:0 0 auto;padding-right:16px}.zl-layout-horizontal__main{display:flex;flex-direction:column;flex:1;height:1px;padding:12px;border-radius:var(--zl-radius-medium, 4px);overflow:hidden}.zl-layout-horizontal__tabs{padding:12px 16px;background-color:var(--zl-bg-1, #fff);border-radius:var(--zl-radius-medium, 4px) var(--zl-radius-medium, 4px) 0 0}

package/dist/components/ZlAppLayout/Horizontal.vue.d.ts

@@ -0,0 +1,22 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        logo?(_: {}): any;
+        menu?(_: {}): any;
+        header?(_: {}): any;
+        breadcrumb?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+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, {}, 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=Horizontal.vue.d.ts.map

package/dist/components/ZlAppLayout/Horizontal.vue.mjs

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

package/dist/components/ZlAppLayout/Horizontal2.vue.mjs

@@ -0,0 +1,42 @@
+import { defineComponent as n, openBlock as e, createElementBlock as s, createElementVNode as a, renderSlot as t, createCommentVNode as l } from "vue";
+const r = { class: "zl-layout-horizontal" }, i = { class: "zl-layout-horizontal__header" }, d = {
+  key: 0,
+  class: "zl-layout-horizontal__logo"
+}, _ = {
+  key: 1,
+  class: "zl-layout-horizontal__menu"
+}, u = {
+  key: 2,
+  class: "zl-layout-horizontal__user"
+}, h = { class: "zl-layout-horizontal__main" }, c = {
+  key: 0,
+  class: "zl-layout-horizontal__tabs"
+}, $ = /* @__PURE__ */ n({
+  name: "ZlHorizontalLayout",
+  __name: "Horizontal",
+  setup(m) {
+    return (o, z) => (e(), s("div", r, [
+      a("div", i, [
+        o.$slots.logo ? (e(), s("div", d, [
+          t(o.$slots, "logo")
+        ])) : l("", !0),
+        o.$slots.menu ? (e(), s("div", _, [
+          t(o.$slots, "menu")
+        ])) : l("", !0),
+        o.$slots.header ? (e(), s("div", u, [
+          t(o.$slots, "header")
+        ])) : l("", !0)
+      ]),
+      a("div", h, [
+        o.$slots.breadcrumb ? (e(), s("div", c, [
+          t(o.$slots, "breadcrumb")
+        ])) : l("", !0),
+        t(o.$slots, "default")
+      ])
+    ]));
+  }
+});
+export {
+  $ as default
+};
+//# sourceMappingURL=Horizontal2.vue.mjs.map

package/dist/components/ZlAppLayout/Vertical.css

@@ -0,0 +1 @@
+.zl-layout-vertical{height:100%;display:flex}.zl-layout-vertical.collapsed .zl-layout-vertical__aside{width:44px}.zl-layout-vertical.collapsed .zl-layout-vertical__aside__header{padding-inline:10px}.zl-layout-vertical.collapsed .zl-layout-vertical__aside__footer{padding-inline:8px}.zl-layout-vertical__aside{flex:0 0 auto;width:220px;background-image:var(--zl-layout-vertical-aside-bg, none);background-color:var(--zl-fill-1, #f9fbfd);background-size:cover;display:flex;flex-direction:column;transition:width .2s cubic-bezier(.34,.69,.1,1)}.zl-layout-vertical__aside__header{padding:12px 16px;overflow:hidden;border-bottom:1px solid var(--zl-border-1, #eff4f9);transition:padding .2s cubic-bezier(.34,.69,.1,1)}.zl-layout-vertical__aside__content{flex:1;overflow-y:auto}.zl-layout-vertical__aside__footer{padding:12px 16px;display:flex;justify-content:flex-end;flex-wrap:wrap-reverse;gap:8px;transition:padding .2s cubic-bezier(.34,.69,.1,1)}.zl-layout-vertical__main{flex:1;width:1px;display:flex;flex-direction:column}.zl-layout-vertical__header{padding:10px 16px;border-bottom:1px solid var(--zl-border-2, #e3e9ef);line-height:24px;background-color:var(--zl-bg-1, #fff);display:flex;justify-content:space-between}.zl-layout-vertical__content{flex:1;padding:12px;height:1px}

package/dist/components/ZlAppLayout/Vertical.vue.d.ts

@@ -0,0 +1,27 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        logo?(_: {
+            collapsed: boolean;
+        }): any;
+        menu?(_: {
+            collapsed: boolean;
+        }): any;
+        footer?(_: {}): any;
+        breadcrumb?(_: {}): any;
+        header?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+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, {}, 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=Vertical.vue.d.ts.map

package/dist/components/ZlAppLayout/Vertical.vue.mjs

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

package/dist/components/ZlAppLayout/Vertical2.vue.mjs

@@ -0,0 +1,56 @@
+import { defineComponent as _, resolveComponent as d, openBlock as u, createElementBlock as v, normalizeClass as m, unref as s, createElementVNode as e, renderSlot as t, normalizeProps as c, guardReactiveProps as i, createVNode as r, withCtx as p } from "vue";
+import { useToggle as z } from "@vueuse/core";
+import f from "../ZlIcon/index.vue.mjs";
+const h = { class: "zl-layout-vertical__aside" }, y = { class: "zl-layout-vertical__aside__header" }, $ = { class: "zl-layout-vertical__aside__content" }, b = { class: "zl-layout-vertical__aside__footer" }, C = { class: "zl-layout-vertical__main" }, g = { class: "zl-layout-vertical__header" }, V = { class: "zl-layout-vertical__breadcrumb" }, k = { class: "zl-layout-vertical__app-header" }, B = { class: "zl-layout-vertical__content" }, I = /* @__PURE__ */ _({
+  name: "ZlVerticalLayout",
+  __name: "Vertical",
+  setup(E) {
+    const [o] = z(!1);
+    return (l, a) => {
+      const n = d("el-button");
+      return u(), v("div", {
+        class: m(["zl-layout-vertical", { collapsed: s(o) }])
+      }, [
+        e("div", h, [
+          e("div", y, [
+            t(l.$slots, "logo", c(i({ collapsed: s(o) })))
+          ]),
+          e("div", $, [
+            t(l.$slots, "menu", c(i({ collapsed: s(o) })))
+          ]),
+          e("div", b, [
+            r(n, {
+              circle: "",
+              onClick: a[0] || (a[0] = (N) => o.value = !s(o))
+            }, {
+              icon: p(() => [
+                r(f, {
+                  icon: s(o) ? "zl:slider-on-color" : "zl:slider-off-color"
+                }, null, 8, ["icon"])
+              ]),
+              _: 1
+            }),
+            t(l.$slots, "footer")
+          ])
+        ]),
+        e("div", C, [
+          e("div", g, [
+            e("div", V, [
+              t(l.$slots, "breadcrumb")
+            ]),
+            e("div", k, [
+              t(l.$slots, "header")
+            ])
+          ]),
+          e("div", B, [
+            t(l.$slots, "default")
+          ])
+        ])
+      ], 2);
+    };
+  }
+});
+export {
+  I as default
+};
+//# sourceMappingURL=Vertical2.vue.mjs.map

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

@@ -0,0 +1,21 @@
+/**
+ * 应用布局：horizontal（默认，顶部菜单）/ vertical（侧边菜单，可折叠）
+ * 插槽：logo/menu/breadcrumb/header/footer/default
+ */
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    layout: {
+        type: () => "horizontal" | "vertical";
+        default: string;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    layout: {
+        type: () => "horizontal" | "vertical";
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    layout: "horizontal" | "vertical";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# sourceMappingURL=index.vue.d.ts.map

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

@@ -0,0 +1,17 @@
+import { defineComponent as r, defineAsyncComponent as o, h as a } from "vue";
+const m = r({
+  name: "ZlAppLayout",
+  props: {
+    layout: { type: String, default: "horizontal" }
+  },
+  setup(t, { slots: n, attrs: e }) {
+    return () => {
+      const p = t.layout === "horizontal" ? o(() => import("./Horizontal.vue.mjs")) : o(() => import("./Vertical.vue.mjs"));
+      return a(p, { ...e }, n);
+    };
+  }
+});
+export {
+  m as default
+};
+//# sourceMappingURL=index.vue.mjs.map

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

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

package/dist/components/ZlAppMenu/AppMenu.css

@@ -0,0 +1 @@
+.zl-menu.el-menu{--el-menu-bg-color: transparent;--el-menu-text-color: var(--zl-menu-text-color, var(--zl-text-2));--el-menu-active-color: var(--zl-menu-text-color, var(--zl-text-2));--el-menu-hover-bg-color: var(--zl-menu-hover-bg, var(--zl-fill-2));border-right:none;background-color:transparent}.zl-menu.el-menu .el-menu-item.is-active{background-color:var(--zl-menu-hover-bg, var(--zl-fill-2))}.zl-menu.el-menu:not(.el-menu--horizontal){font-size:12px}.zl-menu.el-menu:not(.el-menu--horizontal) .el-menu-item,.zl-menu.el-menu:not(.el-menu--horizontal) .el-sub-menu__title{height:36px;line-height:36px}.zl-menu.el-menu.el-menu--horizontal .el-menu-item,.zl-menu.el-menu.el-menu--horizontal .el-sub-menu__title{height:44px;line-height:44px}

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

@@ -0,0 +1,25 @@
+export interface MenuItem {
+    /** 唯一键 */
+    name: string;
+    title: string;
+    icon?: string;
+    children?: MenuItem[];
+    [key: string]: any;
+}
+type __VLS_Props = {
+    collapsed?: boolean;
+    /** el-menu 模式：vertical / horizontal */
+    layout?: 'vertical' | 'horizontal';
+    menus?: 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;
+}>, {
+    collapsed: boolean;
+    layout: "vertical" | "horizontal";
+    menus: MenuItem[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=AppMenu.vue.d.ts.map