@zl-ui-kit/components 0.27.0 → 0.27.1

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

@@ -1,18 +1,36 @@
-import { defineComponent as r, defineAsyncComponent as o, h as a } from "vue";
-const m = r({
+import { defineComponent as i, computed as l, defineAsyncComponent as r, h as u } from "vue";
+function a(e) {
+  if (e)
+    return /^(url\(|linear-gradient|radial-gradient|#|rgb|rgba|hsl|hsla)/.test(e) ? e : `url(${e})`;
+}
+const y = i({
   name: "ZlAppLayout",
   props: {
-    /** 布局方向：横向用顶部菜单，纵向用侧边菜单 */
-    layout: { type: String, default: "horizontal" }
+    /** 布局方向：横向用顶部菜单，纵向用侧边菜单，header-aside 用通栏顶栏 + 侧边菜单 */
+    layout: { type: String, default: "header-aside" },
+    /** 顶栏背景：支持颜色/渐变/图片URL */
+    headerBg: { type: String, default: void 0 },
+    /** 侧栏背景：支持颜色/渐变/图片URL */
+    asideBg: { type: String, default: void 0 },
+    /** 内容区背景：支持颜色/渐变/图片URL */
+    contentBg: { type: String, default: void 0 },
+    /** 面包屑底边框样式，如 '1px solid #e3e9ef'，传 'none' 隐藏 */
+    breadcrumbBorder: { type: String, default: void 0 }
   },
-  setup(t, { slots: n, attrs: e }) {
+  setup(e, { slots: n, attrs: d }) {
+    const o = l(() => ({
+      "--zl-layout-header-bg": a(e.headerBg),
+      "--zl-layout-aside-bg": a(e.asideBg),
+      "--zl-layout-content-bg": a(e.contentBg),
+      "--zl-breadcrumb-border": e.breadcrumbBorder
+    }));
     return () => {
-      const p = t.layout === "horizontal" ? o(() => import("./Horizontal.vue.mjs")) : o(() => import("./Vertical.vue.mjs"));
-      return a(p, { ...e }, n);
+      let t;
+      return e.layout === "vertical" ? t = r(() => import("./Vertical.vue.mjs")) : e.layout === "header-aside" ? t = r(() => import("./HeaderAside.vue.mjs")) : t = r(() => import("./Horizontal.vue.mjs")), u(t, { ...d, style: o.value }, n);
     };
   }
 });
 export {
-  m as default
+  y as default
 };
 //# sourceMappingURL=index.vue.mjs.map

package/dist/components/ZlAppSlogan/index.css

@@ -1 +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}
+@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__logo--default{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;background-color:var(--zl-primary-6, var(--el-color-primary));color:#fff;font-size:14px}.zl-app-slogan__text{white-space:nowrap;font-family:"PingFang TC",var(--zl-slogan-font-family, "PingFang SC", "Microsoft YaHei", sans-serif);color:var(--zl-slogan-color, var(--zl-primary-6, var(--el-color-primary)));font-size:20px;font-weight:500;letter-spacing:1px;line-height:24px}

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

@@ -1,7 +1,7 @@
 type __VLS_Props = {
     /** 为 true 时只显示 Logo，隐藏标题 */
     collapsed?: boolean;
-    /** 品牌 Logo 的图片地址 */
+    /** 品牌 Logo 的图片地址；不传时渲染内置默认 Logo 图标 */
     logo?: string;
     /** 应用标题文案，折叠时隐藏 */
     title?: string;

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

@@ -1,5 +1,9 @@
-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({
+import { defineComponent as a, openBlock as e, createElementBlock as l, createVNode as t, Transition as n, withCtx as s, withDirectives as c, createElementVNode as i, toDisplayString as p, vShow as r } from "vue";
+import d from "../ZlIcon/index.vue.mjs";
+const _ = { class: "zl-app-slogan" }, g = ["src"], m = {
+  key: 1,
+  class: "zl-app-slogan__logo zl-app-slogan__logo--default"
+}, x = /* @__PURE__ */ a({
   name: "ZlAppSlogan",
   __name: "index",
   props: {
@@ -7,16 +11,19 @@ const d = { class: "zl-app-slogan" }, _ = ["src"], u = /* @__PURE__ */ o({
     logo: {},
     title: {}
   },
-  setup(e) {
-    return (g, m) => (l(), a("div", d, [
-      t("img", {
+  setup(o) {
+    return (f, h) => (e(), l("div", _, [
+      o.logo ? (e(), l("img", {
+        key: 0,
         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]
+        src: o.logo
+      }, null, 8, g)) : (e(), l("span", m, [
+        t(d, { icon: "zl:component" })
+      ])),
+      t(n, { persisted: "" }, {
+        default: s(() => [
+          c(i("div", { class: "zl-app-slogan__text" }, p(o.title), 513), [
+            [r, !o.collapsed]
           ])
         ]),
         _: 1
@@ -25,6 +32,6 @@ const d = { class: "zl-app-slogan" }, _ = ["src"], u = /* @__PURE__ */ o({
   }
 });
 export {
-  u as default
+  x as default
 };
 //# sourceMappingURL=index.vue.mjs.map

package/dist/components/ZlBreadcrumb/index.css

@@ -0,0 +1 @@
+.zl-breadcrumb{font-size:12px;line-height:20px}.zl-breadcrumb .el-breadcrumb__inner{color:var(--zl-text-2, #5b6577);font-weight:400}.zl-breadcrumb .el-breadcrumb__inner.is-link:hover,.zl-breadcrumb__text.is-clickable:hover{color:var(--zl-primary-6, var(--el-color-primary))}.zl-breadcrumb .el-breadcrumb__item.is-current .el-breadcrumb__inner{color:var(--zl-text-1, #242e43);font-weight:600;cursor:default}.zl-breadcrumb .el-breadcrumb__item.is-current .el-breadcrumb__inner:hover{color:var(--zl-text-1, #242e43)}.zl-breadcrumb__text.is-clickable{cursor:pointer}.zl-breadcrumb .el-breadcrumb__separator{margin:0 6px;color:var(--zl-text-3, #8a94a6)}

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

@@ -0,0 +1,32 @@
+import { BreadcrumbItem } from './types';
+type __VLS_Props = {
+    /** 面包屑条目，最后一项视为当前页 */
+    items?: BreadcrumbItem[];
+    /** 分隔符文本；也可用 `separator-icon` 传图标（图标优先） */
+    separator?: string;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        item?(_: {
+            item: BreadcrumbItem;
+            index: number;
+            isLast: boolean;
+        }): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+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<{}>, {
+    separator: string;
+    items: BreadcrumbItem[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, 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/ZlBreadcrumb/index.vue.mjs

@@ -0,0 +1,58 @@
+import { defineComponent as k, useAttrs as C, resolveComponent as o, openBlock as c, createBlock as n, mergeProps as u, unref as h, withCtx as i, createElementBlock as g, Fragment as y, renderList as B, renderSlot as v, createElementVNode as z, normalizeClass as A, toDisplayString as L } from "vue";
+const E = ["onClick"], w = /* @__PURE__ */ k({
+  name: "ZlBreadcrumb",
+  inheritAttrs: !1,
+  __name: "index",
+  props: {
+    items: { default: () => [] },
+    separator: { default: "/" }
+  },
+  setup(a) {
+    const m = a, b = C();
+    function l(e) {
+      return e === m.items.length - 1;
+    }
+    function d(e) {
+      const t = { ...e };
+      return delete t.label, delete t.click, delete t.key, t;
+    }
+    function f(e, t) {
+      l(t) || e.click?.(e, t);
+    }
+    return (e, t) => {
+      const p = o("el-breadcrumb-item"), _ = o("el-breadcrumb");
+      return c(), n(_, u(h(b), {
+        separator: a.separator,
+        class: "zl-breadcrumb"
+      }), {
+        default: i(() => [
+          (c(!0), g(y, null, B(a.items, (r, s) => (c(), n(p, u({
+            key: r.key ?? s
+          }, { ref_for: !0 }, d(r), {
+            to: l(s) ? void 0 : r.to,
+            class: { "is-current": l(s) }
+          }), {
+            default: i(() => [
+              v(e.$slots, "item", {
+                item: r,
+                index: s,
+                isLast: l(s)
+              }, () => [
+                z("span", {
+                  class: A(["zl-breadcrumb__text", { "is-clickable": !l(s) && !!r.click }]),
+                  onClick: (S) => f(r, s)
+                }, L(r.label), 11, E)
+              ])
+            ]),
+            _: 2
+          }, 1040, ["to", "class"]))), 128))
+        ]),
+        _: 3
+      }, 16, ["separator"]);
+    };
+  }
+});
+export {
+  w as default
+};
+//# sourceMappingURL=index.vue.mjs.map

package/dist/components/ZlBreadcrumb/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/ZlBreadcrumb/types.d.ts

@@ -0,0 +1,16 @@
+/** 面包屑条目：除 `label` / `click` / `key` 外的字段原样透传给 `el-breadcrumb-item` */
+export interface BreadcrumbItem {
+    /** 显示文本 */
+    label: string;
+    /** 路由目标（同 `el-breadcrumb-item` 的 to）；最后一项忽略 */
+    to?: string | Record<string, any>;
+    /** 点击后替换当前历史记录（同 `el-breadcrumb-item` 的 replace） */
+    replace?: boolean;
+    /** 无 `to` 时的点击回调；最后一项不触发 */
+    click?: (item: BreadcrumbItem, index: number) => void;
+    /** `v-for` 的 key，缺省用索引 */
+    key?: string | number;
+    /** 其余属性透传给 `el-breadcrumb-item`（如 `separator` / `separator-icon`） */
+    [key: string]: any;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1,81 @@
+import { Component } from 'vue';
+type __VLS_Props = {
+    /** 尺寸；不传时沿用 `el-form` / 全局配置 */
+    size?: 'large' | 'default' | 'small';
+    /** 是否禁用；不传时沿用 `el-form` 的 disabled */
+    disabled?: boolean;
+    /** 按钮类型 */
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'info' | 'danger' | 'text';
+    /** 图标（同 el-button 的 icon，支持组件或已注册的组件名） */
+    icon?: string | Component;
+    /** 原生 type 属性 */
+    nativeType?: 'button' | 'submit' | 'reset';
+    /** 是否加载中 */
+    loading?: boolean;
+    /** 自定义加载图标 */
+    loadingIcon?: string | Component;
+    /** 是否为朴素按钮 */
+    plain?: boolean;
+    /** 是否为文字按钮 */
+    text?: boolean;
+    /** 是否为链接按钮 */
+    link?: boolean;
+    /** 文字按钮是否始终显示背景 */
+    bg?: boolean;
+    /** 是否自动聚焦 */
+    autofocus?: boolean;
+    /** 是否为圆角按钮（胶囊形）；默认开启，传 false 走 EP 默认 4px 圆角 */
+    round?: boolean;
+    /** 是否为圆形按钮 */
+    circle?: boolean;
+    /** 是否为虚线按钮 */
+    dashed?: boolean;
+    /** 自定义颜色（自动计算 hover / active） */
+    color?: string;
+    /** 自定义颜色是否走暗色模式 */
+    dark?: boolean;
+    /** 两个汉字之间是否自动插入空格 */
+    autoInsertSpace?: boolean;
+    /** 自定义渲染标签，默认 `button` */
+    tag?: string | Record<string, any>;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        icon?(_: {}): any;
+        loading?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+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<{}>, {
+    icon: string | Component;
+    size: "large" | "default" | "small";
+    color: string;
+    link: boolean;
+    circle: boolean;
+    text: boolean;
+    round: boolean;
+    dashed: boolean;
+    dark: boolean;
+    disabled: boolean;
+    type: "default" | "primary" | "success" | "warning" | "info" | "danger" | "text";
+    nativeType: "button" | "submit" | "reset";
+    loading: boolean;
+    loadingIcon: string | Component;
+    plain: boolean;
+    bg: boolean;
+    autofocus: boolean;
+    autoInsertSpace: boolean;
+    tag: string | Record<string, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, 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/ZlButton/index.vue.mjs

@@ -0,0 +1,60 @@
+import { defineComponent as u, useAttrs as f, computed as p, mergeProps as a, resolveComponent as r, openBlock as v, createBlock as c, createSlots as y, withCtx as o, renderSlot as t } from "vue";
+const g = /* @__PURE__ */ u({
+  name: "ZlButton",
+  inheritAttrs: !1,
+  __name: "index",
+  props: {
+    size: { default: void 0 },
+    disabled: { type: Boolean, default: void 0 },
+    type: { default: void 0 },
+    icon: { default: void 0 },
+    nativeType: { default: void 0 },
+    loading: { type: Boolean, default: void 0 },
+    loadingIcon: { default: void 0 },
+    plain: { type: Boolean, default: void 0 },
+    text: { type: Boolean, default: void 0 },
+    link: { type: Boolean, default: void 0 },
+    bg: { type: Boolean, default: void 0 },
+    autofocus: { type: Boolean, default: void 0 },
+    round: { type: Boolean, default: !0 },
+    circle: { type: Boolean, default: void 0 },
+    dashed: { type: Boolean, default: void 0 },
+    color: { default: void 0 },
+    dark: { type: Boolean, default: void 0 },
+    autoInsertSpace: { type: Boolean, default: void 0 },
+    tag: { default: void 0 }
+  },
+  setup(l) {
+    const d = l, n = f(), i = p(() => a(n, d));
+    return (e, B) => {
+      const s = r("el-button");
+      return v(), c(s, a(i.value, { class: "zl-button" }), y({ _: 2 }, [
+        e.$slots.icon ? {
+          name: "icon",
+          fn: o(() => [
+            t(e.$slots, "icon")
+          ]),
+          key: "0"
+        } : void 0,
+        e.$slots.loading ? {
+          name: "loading",
+          fn: o(() => [
+            t(e.$slots, "loading")
+          ]),
+          key: "1"
+        } : void 0,
+        e.$slots.default ? {
+          name: "default",
+          fn: o(() => [
+            t(e.$slots, "default")
+          ]),
+          key: "2"
+        } : void 0
+      ]), 1040);
+    };
+  }
+});
+export {
+  g as default
+};
+//# sourceMappingURL=index.vue.mjs.map

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

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