@me-framework/me-ui-antdv-next 0.0.23 → 0.0.26

package/README.md

@@ -70,6 +70,47 @@ app.mount('#app')
 </template>
 ```
 
+### 按需引入（推荐，减小打包体积）
+
+组件库支持**组件级子路径按需导入**，每个组件可独立引入 JS 与样式，避免全量体积负担。
+
+```ts
+import { createApp } from 'vue'
+import Antd from 'antdv-next'
+import 'antdv-next/dist/reset.css'
+// 1) 先引入基础 token 基线（设计变量：:root / html.dark），按需引任意组件都需引一次
+import '@me-framework/me-ui-antdv-next/base.css'
+// 2) 按需引入组件
+import MeMenu from '@me-framework/me-ui-antdv-next/menu'
+import '@me-framework/me-ui-antdv-next/menu/style.css'
+
+const app = createApp(App)
+app.use(Antd)
+app.use(MeMenu)
+app.mount('#app')
+```
+
+#### 使用 unplugin-vue-components 自动按需引入
+
+在 Vite 项目中配置：
+
+```ts
+import { defineConfig } from 'vite'
+import Components from 'unplugin-vue-components/vite'
+import { MeUiAntdvResolver } from '@me-framework/me-ui-antdv-next/resolver'
+
+export default defineConfig({
+  plugins: [
+    Components({ resolvers: [MeUiAntdvResolver()] }),
+  ],
+})
+```
+
+> **注意**
+> - 按需引入时需**先引一次 `base.css`**，否则 `var(--me-*)` 设计 token 缺失导致样式异常；全量引入（`style.css`）已含 base，无需再引。
+> - 组件内部依赖的兄弟组件（如 `menu` 依赖 `icon`）会随子入口自动引入，无需手动补引。
+> - 需要 TypeScript ≥ 4.7 以支持 `exports` 子路径通配解析。
+
 #### 参与贡献
 
 1.  Fork 本仓库

package/dist/base.css

@@ -0,0 +1 @@
+:root{--me-color-primary:#1677ff;--me-color-primary-light-3:#4096ff;--me-color-primary-light-5:#69b1ff;--me-color-primary-light-7:#91caff;--me-color-primary-light-8:#bae0ff;--me-color-primary-light-9:#e6f4ff;--me-color-primary-dark-2:#0958d9;--me-color-primary-text:#fff;--me-color-success:#52c41a;--me-color-warning:#faad14;--me-color-danger:#ff4d4f;--me-color-info:#1677ff;--me-text-primary:#000000e0;--me-text-regular:#000000a6;--me-text-secondary:#00000073;--me-text-placeholder:#00000040;--me-text-disabled:#00000040;--me-border-radius-base:6px;--me-border-radius-small:4px;--me-border-radius-round:20px;--me-font-size-base:14px;--me-font-size-large:16px;--me-font-size-small:12px;--me-border-color:#d9d9d9;--me-border-color-light:#e8e8e8;--me-border-color-lighter:#f0f0f0;--me-fill-color:#f5f5f5;--me-fill-color-light:#fafafa;--me-bg-color:#fff;--me-bg-color-overlay:#fff;--me-box-shadow:0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d}html.dark{--me-color-primary:#1677ff;--me-color-primary-light-3:#4096ff;--me-color-primary-light-5:#69b1ff;--me-color-primary-light-7:#91caff;--me-color-primary-light-8:#bae0ff;--me-color-primary-light-9:#e6f4ff;--me-color-primary-dark-2:#0958d9;--me-color-primary-text:#fff;--me-color-success:#52c41a;--me-color-warning:#faad14;--me-color-danger:#ff4d4f;--me-color-info:#1677ff;--me-text-primary:#ffffffe0;--me-text-regular:#ffffffa6;--me-text-secondary:#ffffff73;--me-text-placeholder:#ffffff4d;--me-text-disabled:#ffffff40;--me-border-color:#424242;--me-border-color-light:#303030;--me-border-color-lighter:#ffffff0f;--me-fill-color:#ffffff1f;--me-fill-color-light:#ffffff0a;--me-bg-color:#141414;--me-bg-color-overlay:#1f1f1f;--me-box-shadow:0 6px 16px 0 #00000052, 0 3px 6px -4px #0006, 0 9px 28px 8px #0003}.me-ui-antdv-next{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}

package/dist/base.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/body/index.js

@@ -0,0 +1,153 @@
+import { computed as e, createBlock as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, createVNode as a, defineComponent as o, mergeProps as s, normalizeStyle as c, openBlock as l, renderSlot as u, resolveComponent as d, resolveDynamicComponent as f, withCtx as p } from "vue";
+//#region src/components/body/index.vue?vue&type=script&setup=true&lang.ts
+var m = {
+	key: 0,
+	class: "me-body__loading"
+}, h = {
+	key: 1,
+	class: "me-body__loader"
+}, g = {
+	key: 1,
+	class: "me-body__error-default"
+}, _ = {
+	key: 1,
+	class: "me-body__empty-default"
+}, v = {
+	key: 3,
+	class: "me-body__result"
+}, y = { class: "me-body__result-inner" }, b = {
+	key: 4,
+	class: "me-body--normal"
+}, x = {
+	key: 5,
+	class: "me-body--full"
+}, S = { class: "me-body__full-header" }, C = { class: "me-body__full-main me-div-scroller" }, w = { class: "me-body__full-footer" }, T = /* @__PURE__ */ o({
+	name: "MeBody",
+	__name: "index",
+	props: {
+		background: {
+			type: String,
+			default: "#fff"
+		},
+		space: {
+			type: [Number, String],
+			default: 0
+		},
+		mode: {
+			type: String,
+			default: "normal"
+		},
+		fullScreen: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: [Boolean, Object],
+			default: !1
+		},
+		error: {
+			type: [Boolean, Object],
+			default: !1
+		},
+		empty: {
+			type: [Boolean, Object],
+			default: !1
+		},
+		emptyDescription: {
+			type: String,
+			default: "暂无数据"
+		},
+		result: {
+			type: String,
+			default: void 0
+		},
+		title: {
+			type: String,
+			default: void 0
+		},
+		subTitle: {
+			type: String,
+			default: void 0
+		}
+	},
+	emits: ["retry"],
+	setup(o, { emit: T }) {
+		let E = o, D = T, O = e(() => E.loading ? "loading" : E.error ? "error" : E.empty ? "empty" : E.result ? "result" : E.mode === "full" ? "full" : "normal"), k = e(() => {
+			if (E.fullScreen) return "0";
+			let e = E.space;
+			return typeof e == "number" ? `${e}px` : e;
+		}), A = e(() => ({ height: O.value === "normal" ? "fit-content" : "100%" })), j = e(() => typeof E.loading == "object" && E.loading !== null), M = e(() => typeof E.error == "object" && E.error !== null), N = e(() => typeof E.empty == "object" && E.empty !== null), P = () => {
+			D("retry");
+		};
+		return (e, T) => {
+			let D = d("a-button"), F = d("a-result"), I = d("a-empty");
+			return l(), n("div", s({
+				class: "me-body",
+				style: A.value
+			}, e.$attrs), [O.value === "loading" ? (l(), n("div", m, [r("div", {
+				class: "me-body__loading-inner",
+				style: c({
+					background: E.background,
+					margin: k.value
+				})
+			}, [u(e.$slots, "me-body-loading", {}, () => [j.value ? (l(), t(f(E.loading), { key: 0 })) : (l(), n("div", h, [...T[0] ||= [r("div", { class: "me-body__loader-text" }, "Loading", -1), r("div", { class: "me-body__loader-mario" }, null, -1)]]))])], 4)])) : O.value === "error" ? (l(), n("div", {
+				key: 1,
+				class: "me-body__error",
+				style: c({ padding: k.value })
+			}, [u(e.$slots, "me-body-error", {}, () => [M.value ? (l(), t(f(E.error), { key: 0 })) : (l(), n("div", g, [a(F, {
+				status: "error",
+				title: "加载失败",
+				"sub-title": "请稍后重试"
+			}, {
+				extra: p(() => [a(D, {
+					type: "primary",
+					onClick: P
+				}, {
+					default: p(() => [...T[1] ||= [i("重新加载", -1)]]),
+					_: 1
+				})]),
+				_: 1
+			})]))])], 4)) : O.value === "empty" ? (l(), n("div", {
+				key: 2,
+				class: "me-body__empty",
+				style: c({ padding: k.value })
+			}, [u(e.$slots, "me-body-empty", {}, () => [N.value ? (l(), t(f(E.empty), { key: 0 })) : (l(), n("div", _, [a(I, { description: o.emptyDescription }, null, 8, ["description"])]))])], 4)) : O.value === "result" ? (l(), n("div", v, [r("div", y, [a(F, {
+				status: E.result,
+				title: E.title,
+				"sub-title": E.subTitle
+			}, {
+				extra: p(() => [u(e.$slots, "me-body-result", {}, () => [u(e.$slots, "default")])]),
+				_: 3
+			}, 8, [
+				"status",
+				"title",
+				"sub-title"
+			])])])) : O.value === "normal" ? (l(), n("div", b, [r("div", { style: c({
+				background: E.background,
+				margin: k.value
+			}) }, [
+				u(e.$slots, "me-body-header"),
+				u(e.$slots, "me-body-main", {}, () => [u(e.$slots, "default")]),
+				u(e.$slots, "me-body-footer")
+			], 4)])) : (l(), n("div", x, [r("div", {
+				class: "me-body__full-inner",
+				style: c({
+					background: E.background,
+					margin: k.value
+				})
+			}, [
+				r("div", S, [u(e.$slots, "me-body-header")]),
+				r("div", C, [u(e.$slots, "me-body-main", {}, () => [u(e.$slots, "default")])]),
+				r("div", w, [u(e.$slots, "me-body-footer")])
+			], 4)]))], 16);
+		};
+	}
+});
+//#endregion
+//#region src/components/body/index.ts
+T.install = (e) => {
+	e.component("MeBody", T);
+};
+var E = T;
+//#endregion
+export { T as MeBody, E as default };

package/dist/{components/body → body}/index.vue.d.ts

@@ -155,15 +155,15 @@ declare const __VLS_base: import('vue').DefineComponent<import('vue').ExtractPro
     onRetry?: ((...args: any[]) => any) | undefined;
 }>, {
     loading: boolean | Component;
-    title: string;
-    mode: "normal" | "full";
-    result: "success" | "warning" | "info" | "error";
     error: boolean | Component;
     empty: boolean | Component;
+    result: "error" | "success" | "warning" | "info";
     background: string;
     space: string | number;
+    mode: "normal" | "full";
     fullScreen: boolean;
     emptyDescription: string;
+    title: string;
     subTitle: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/body.css

@@ -0,0 +1 @@
+.me-body{box-sizing:border-box;width:100%;height:100%}.me-body__loading{width:100%;height:100%;display:flex;overflow:hidden}.me-body__loading-inner{background:var(--me-bg-color,#fff);flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden}.me-body__loader{background:linear-gradient(#000 0 0) 0 0/100% 100% no-repeat content-box padding-box;width:fit-content;padding:30px 2px 50px;font-family:monospace;font-size:17px;font-weight:700;line-height:1.4;animation:2s cubic-bezier(1,175,.5,175) infinite me-body-loader-bg;position:relative;overflow:hidden}.me-body__loader-text{animation:2s infinite me-body-loader-text;display:inline-block}.me-body__loader-mario{width:34px;height:28px;animation:inherit;background-color:#0000;background-image:linear-gradient(90deg,#0000 12px,#f92033 0 22px,#0000 0 26px,#fdc98d 0 32px,#0000),linear-gradient(90deg,#0000 10px,#f92033 0 28px,#fdc98d 0 32px,#0000 0),linear-gradient(90deg,#0000 10px,#643700 0 16px,#fdc98d 0 20px,#000 0 22px,#fdc98d 0 24px,#000 0 26px,#f92033 0 32px,#0000 0),linear-gradient(90deg,#0000 8px,#643700 0 10px,#fdc98d 0 12px,#643700 0 14px,#fdc98d 0 20px,#000 0 22px,#fdc98d 0 28px,#f92033 0 32px,#0000 0),linear-gradient(90deg,#0000 8px,#643700 0 10px,#fdc98d 0 12px,#643700 0 16px,#fdc98d 0 22px,#000 0 24px,#fdc98d 0 30px,#f92033 0 32px,#0000 0),linear-gradient(90deg,#0000 8px,#643700 0 12px,#fdc98d 0 20px,#000 0 28px,#f92033 0 30px,#0000 0),linear-gradient(90deg,#0000 12px,#fdc98d 0 26px,#f92033 0 30px,#0000 0),linear-gradient(90deg,#fdc98d 6px,#f92033 0 14px,#222a87 0 16px,#f92033 0 22px,#222a87 0 24px,#f92033 0 28px,#0000 0 32px,#643700 0),linear-gradient(90deg,#fdc98d 6px,#f92033 0 16px,#222a87 0 18px,#f92033 0 24px,#f92033 0 26px,#0000 0 30px,#643700 0),linear-gradient(90deg,#0000 10px,#f92033 0 16px,#222a87 0 24px,#feee49 0 26px,#222a87 0 30px,#643700 0),linear-gradient(90deg,#0000 12px,#222a87 0 18px,#feee49 0 20px,#222a87 0 30px,#643700 0),linear-gradient(90deg,#0000 8px,#643700 0 12px,#222a87 0 30px,#643700 0),linear-gradient(90deg,#0000 6px,#643700 0 14px,#222a87 0 26px,#0000 0),linear-gradient(90deg,#0000 6px,#643700 0 10px,#0000 0);background-position:left 50% bottom 26px,left 50% bottom 24px,left 50% bottom 22px,left 50% bottom 20px,left 50% bottom 18px,left 50% bottom 16px,left 50% bottom 14px,left 50% bottom 12px,left 50% bottom 10px,left 50% bottom 8px,left 50% bottom 6px,left 50% bottom 4px,left 50% bottom 2px,left 50% bottom 0;background-repeat:no-repeat;background-size:34px 2px;background-attachment:scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box;animation-name:me-body-loader-mario;position:absolute;top:110%;left:calc(50% - 16px)}.me-body__error{box-sizing:border-box;width:100%;height:100%}.me-body__error-default{height:100%}.me-body__error-default .ant-result{background:var(--me-bg-color,#fff);height:100%}.me-body__empty{box-sizing:border-box;width:100%;height:100%}.me-body__empty-default{justify-content:center;align-items:center;height:100%;display:flex}.me-body__result{width:100%;height:100%}.me-body__result-inner{box-sizing:border-box;height:100%;padding:15px}.me-body__result-inner .ant-result{background:var(--me-bg-color,#fff);height:100%}.me-body--normal{width:100%}.me-body--full{width:100%;height:100%;display:flex;overflow:hidden}.me-body__full-inner{flex-direction:column;flex:1;width:100%;display:flex;overflow:hidden}.me-body__full-header{flex-shrink:0}.me-body__full-main{flex:1;height:100%;overflow:auto}.me-body__full-footer{flex-shrink:0}@keyframes me-body-loader-bg{0%,30%{background-position:0 0}50%,to{background-position:0 -.1px}}@keyframes me-body-loader-mario{50%,to{top:109.5%}}@keyframes me-body-loader-text{0%,30%{transform:translateY(0)}80%,to{transform:translateY(-260%)}}html.dark .me-body__loading-inner,html.dark .me-body__error-default .ant-result,html.dark .me-body__result-inner .ant-result{background:var(--me-bg-color,#fff)}

package/dist/box/index.js

@@ -0,0 +1,170 @@
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, defineComponent as a, mergeProps as o, normalizeClass as s, normalizeStyle as c, openBlock as l, renderSlot as u, toDisplayString as d, useSlots as f } from "vue";
+//#region src/components/box/index.vue?vue&type=script&setup=true&lang.ts
+var p = {
+	key: 1,
+	class: "me-box__header-left"
+}, m = {
+	key: 2,
+	class: "me-box__title"
+}, h = {
+	key: 3,
+	class: "me-box__header-right"
+}, g = /* @__PURE__ */ a({
+	name: "MeBox",
+	__name: "index",
+	props: {
+		type: {
+			type: String,
+			default: "default"
+		},
+		title: {
+			type: String,
+			default: ""
+		},
+		width: {
+			type: String,
+			default: ""
+		},
+		height: {
+			type: String,
+			default: ""
+		},
+		showTrafficLights: {
+			type: Boolean,
+			default: !0
+		},
+		trafficLightPosition: {
+			type: String,
+			default: "left"
+		},
+		bodyStyle: {
+			type: Object,
+			default: () => ({})
+		},
+		customStyle: {
+			type: Object,
+			default: () => ({})
+		},
+		stripeAnimated: {
+			type: Boolean,
+			default: !0
+		},
+		stripeDirection: {
+			type: String,
+			default: "right"
+		},
+		stripeSpeed: {
+			type: Number,
+			default: 30
+		},
+		stripeSize: {
+			type: Number,
+			default: 24
+		},
+		stripeThickness: {
+			type: Number,
+			default: 2
+		},
+		stripeColor: {
+			type: String,
+			default: ""
+		},
+		stripeBgColor: {
+			type: String,
+			default: ""
+		},
+		stripeBorderColor: {
+			type: String,
+			default: ""
+		},
+		stripeBorderWidth: {
+			type: Number,
+			default: 2
+		},
+		stripeAngle: {
+			type: String,
+			default: "right"
+		}
+	},
+	emits: [
+		"close",
+		"minimize",
+		"maximize"
+	],
+	setup(a, { emit: g }) {
+		let _ = a, v = g, y = f(), b = e(() => _.type === "mac" || !!(_.title || y.title || y["header-left"] || y["header-right"])), x = e(() => {
+			let e = {
+				width: _.width,
+				height: _.height,
+				..._.customStyle
+			};
+			return _.type === "stripe" && (_.stripeBorderColor && (e["--me-box-stripe-border-color"] = _.stripeBorderColor), e["--me-box-stripe-border-width"] = `${_.stripeBorderWidth}px`), e;
+		}), S = e(() => {
+			if (_.type === "stripe") {
+				let e = {
+					"--me-box-stripe-speed": `${_.stripeSpeed}px`,
+					"--me-box-stripe-size": `${_.stripeSize}px`,
+					"--me-box-stripe-thickness": `${_.stripeThickness}px`
+				};
+				return _.stripeColor && (e["--me-box-stripe-color"] = _.stripeColor), _.stripeBgColor && (e["--me-box-stripe-bg-color"] = _.stripeBgColor), {
+					...e,
+					..._.bodyStyle
+				};
+			}
+			return _.bodyStyle;
+		}), C = () => {
+			v("close");
+		}, w = () => {
+			v("minimize");
+		}, T = () => {
+			v("maximize");
+		};
+		return (e, a) => (l(), n("div", o({
+			class: ["me-box", [`me-box--${_.type}`]],
+			style: x.value
+		}, e.$attrs), [b.value ? (l(), n("div", {
+			key: 0,
+			class: s(["me-box__header", [_.trafficLightPosition === "right" ? "me-box__header--right" : "me-box__header--left"]])
+		}, [
+			_.type === "mac" && _.showTrafficLights ? (l(), n("div", {
+				key: 0,
+				class: s(["me-box__traffic-lights", [_.trafficLightPosition === "right" ? "me-box__traffic-lights--right" : "me-box__traffic-lights--left"]])
+			}, [
+				r("div", {
+					class: "me-box__traffic-light me-box__traffic-light--red",
+					title: "关闭",
+					onClick: C
+				}),
+				r("div", {
+					class: "me-box__traffic-light me-box__traffic-light--yellow",
+					title: "最小化",
+					onClick: w
+				}),
+				r("div", {
+					class: "me-box__traffic-light me-box__traffic-light--green",
+					title: "最大化",
+					onClick: T
+				})
+			], 2)) : t("", !0),
+			e.$slots["header-left"] ? (l(), n("div", p, [u(e.$slots, "header-left")])) : t("", !0),
+			_.title || e.$slots.title ? (l(), n("div", m, [u(e.$slots, "title", {}, () => [i(d(_.title), 1)])])) : t("", !0),
+			e.$slots["header-right"] ? (l(), n("div", h, [u(e.$slots, "header-right")])) : t("", !0)
+		], 2)) : t("", !0), r("div", {
+			class: s(["me-box__body", [
+				_.type === "stripe" ? "me-box__body--stripe" : "",
+				_.type === "stripe" && _.stripeAnimated ? "me-box__body--stripe-animated" : "",
+				_.type === "stripe" ? `me-box__body--stripe-dir-${_.stripeDirection}` : "",
+				_.type === "stripe" ? `me-box__body--stripe-angle-${_.stripeAngle}` : ""
+			]]),
+			style: c(S.value)
+		}, [u(e.$slots, "default")], 6)], 16));
+	}
+});
+//#endregion
+//#region src/components/box/index.ts
+g.install = (e) => {
+	e.component("MeBox", g);
+};
+var _ = g;
+//#endregion
+export { g as MeBox, _ as default };

package/dist/box.css

@@ -0,0 +1 @@
+.me-box{box-sizing:border-box;background-color:var(--me-bg-color);border:1px solid var(--me-border-color-light);border-radius:var(--me-border-radius-base);flex-direction:column;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden}.me-box--mac{--me-box-header-bg:var(--me-fill-color);--me-box-header-height:38px;--me-box-traffic-light-red:#ff5f57;--me-box-traffic-light-yellow:#febc2e;--me-box-traffic-light-green:#28c840;--me-box-shadow:var(--me-box-shadow);box-shadow:var(--me-box-shadow);border-radius:12px}.me-box--mac .me-box__header{height:var(--me-box-header-height);background-color:var(--me-box-header-bg);border-bottom:1px solid var(--me-border-color-light);-webkit-user-select:none;user-select:none;flex-shrink:0;align-items:center;padding:0 12px;display:flex}.me-box--mac .me-box__header--left{justify-content:flex-start}.me-box--mac .me-box__header--right{justify-content:flex-end}.me-box--mac .me-box__title{color:var(--me-text-primary)}.me-box__traffic-lights{flex-shrink:0;align-items:center;column-gap:8px;display:flex}.me-box__traffic-lights--right{order:2}.me-box__traffic-lights--left{order:0}.me-box__traffic-light{cursor:pointer;border-radius:50%;flex-shrink:0;width:12px;height:12px;transition:filter .15s;display:block;box-shadow:inset 0 0 0 .5px #0003}.me-box__traffic-light:hover{filter:brightness(.9)}.me-box__traffic-light--red{background-color:var(--me-box-traffic-light-red)}.me-box__traffic-light--yellow{background-color:var(--me-box-traffic-light-yellow)}.me-box__traffic-light--green{background-color:var(--me-box-traffic-light-green)}.me-box--stripe{border:var(--me-box-stripe-border-width) dashed var(--me-box-stripe-border-color);--me-box-stripe-border-width:2px;--me-box-stripe-border-color:var(--me-color-primary-light-5);--me-box-stripe-bg-color:var(--me-color-primary-light-9);--me-box-stripe-color:#ffffff8c;--me-box-stripe-size:24px;--me-box-stripe-thickness:2px;--me-box-stripe-speed:30px;border-radius:12px}.me-box--stripe .me-box__body--stripe{isolation:isolate;background-color:var(--me-box-stripe-bg-color);position:relative;overflow:hidden}.me-box--stripe .me-box__body--stripe:before{content:"";pointer-events:none;z-index:-1;width:200%;height:200%;position:absolute;top:-50%;left:-50%}.me-box--stripe .me-box__body--stripe-angle-right:before{background-image:repeating-linear-gradient(-45deg, var(--me-box-stripe-color) 0 var(--me-box-stripe-thickness), transparent var(--me-box-stripe-thickness) var(--me-box-stripe-size));--me-box-stripe-tx:calc(var(--me-box-stripe-size) * .707);--me-box-stripe-ty:calc(var(--me-box-stripe-size) * .707)}.me-box--stripe .me-box__body--stripe-angle-left:before{background-image:repeating-linear-gradient(45deg, var(--me-box-stripe-color) 0 var(--me-box-stripe-thickness), transparent var(--me-box-stripe-thickness) var(--me-box-stripe-size));--me-box-stripe-tx:calc(var(--me-box-stripe-size) * -.707);--me-box-stripe-ty:calc(var(--me-box-stripe-size) * .707)}.me-box--stripe .me-box__body--stripe-animated:before{animation:2s linear infinite me-box-stripe-scroll;animation-duration:calc(var(--me-box-stripe-size) * 1s / var(--me-box-stripe-speed))}.me-box--stripe .me-box__body--stripe-animated.me-box__body--stripe-dir-left:before{animation-direction:reverse}.me-box--default .me-box__header{border-bottom:1px solid var(--me-border-color-light);font-weight:600;font-size:var(--me-font-size-large);padding:12px 16px}.me-box--default .me-box__title{font-size:var(--me-font-size-large);color:var(--me-text-primary);text-align:left;font-weight:600}.me-box__header{flex-shrink:0;align-items:center;display:flex}.me-box__title{text-overflow:ellipsis;white-space:nowrap;flex:1;order:1;overflow:hidden}.me-box__header-right{order:2;align-items:center;display:flex}.me-box__header-left{flex:1;order:1;align-items:center;display:flex}.me-box__body{min-height:0;color:var(--me-text-regular);flex:auto;padding:0;overflow:auto}html.dark .me-box--mac{--me-box-header-bg:var(--me-fill-color);--me-box-shadow:0 4px 20px #0006}html.dark .me-box--stripe{--me-box-stripe-border-color:var(--me-color-primary-dark-2);--me-box-stripe-bg-color:#1677ff1f;--me-box-stripe-color:#ffffff26}@keyframes me-box-stripe-scroll{0%{transform:translate(0)}to{transform:translate(var(--me-box-stripe-tx), var(--me-box-stripe-ty))}}

package/dist/breadcrumb/index.js

@@ -0,0 +1,99 @@
+import { Fragment as e, createBlock as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, createVNode as a, defineComponent as o, inject as s, mergeProps as c, normalizeClass as l, normalizeStyle as u, openBlock as d, renderList as f, renderSlot as p, resolveComponent as m, toDisplayString as h, unref as g, withCtx as _, withModifiers as v } from "vue";
+import { ChevronDown as y } from "@lucide/vue";
+Array.isArray, Symbol(process.env.NODE_ENV === "production" ? "" : "navigation failure"), Symbol(process.env.NODE_ENV === "production" ? "" : "router view location matched"), Symbol(process.env.NODE_ENV === "production" ? "" : "router view depth");
+var b = Symbol(process.env.NODE_ENV === "production" ? "" : "router");
+Symbol(process.env.NODE_ENV === "production" ? "" : "route location"), Symbol(process.env.NODE_ENV === "production" ? "" : "router view location");
+function x() {
+	return s(b);
+}
+//#endregion
+//#region src/components/breadcrumb/index.vue?vue&type=script&setup=true&lang.ts
+var S = ["onClick"], C = /* @__PURE__ */ o({
+	name: "MeBreadcrumb",
+	__name: "index",
+	props: { items: {
+		type: Array,
+		default: () => []
+	} },
+	emits: ["change"],
+	setup(o, { emit: s }) {
+		let b = s, C = x(), w = null, T = (e, t = "14px -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif") => (w ||= document.createElement("canvas").getContext("2d"), w ? (w.font = t, w.measureText(e).width) : e.length * 14), E = (e) => e.options.map((e) => ({
+			value: e.value,
+			label: e.label
+		})), D = (e) => ({
+			selectedKeys: e.activeValue === void 0 ? [] : [String(e.activeValue)],
+			items: e.options.map((e) => ({
+				key: String(e.value),
+				label: e.label
+			}))
+		}), O = (e) => e.options.find((t) => t.value === e.value)?.label || "", k = (e) => {
+			if (e.type !== "select") return "auto";
+			let t = O(e), n = T(t), r = Math.ceil(n) + 48;
+			return `${Math.max(r, 80)}px`;
+		}, A = (e, t, n) => {
+			let r = t.options.find((t) => t.value === e);
+			r && (t.onChange?.(r), b("change", {
+				option: r,
+				index: n
+			}));
+		}, j = (e, t, n) => {
+			let r = e.options.find((e) => String(e.value) === n);
+			r && (e.onChange?.(r), b("change", {
+				option: r,
+				index: t
+			}));
+		}, M = (e) => e.type === "select" ? O(e) : e.label, N = (e) => {
+			e.to && C.push(e.to);
+		};
+		return (s, b) => {
+			let x = m("a-select"), C = m("a-dropdown"), w = m("a-breadcrumb-item"), T = m("a-breadcrumb");
+			return d(), t(T, c(s.$attrs, { class: "me-breadcrumb" }), {
+				separator: _(() => [p(s.$slots, "separator")]),
+				default: _(() => [(d(!0), n(e, null, f(o.items, (e, o) => (d(), t(w, { key: `${M(e)}-${o}` }, {
+					default: _(() => [e.type === "select" ? (d(), t(x, {
+						key: 0,
+						value: e.value,
+						class: l(["me-breadcrumb__select", { "is-bold": e.bold }]),
+						options: E(e),
+						variant: "borderless",
+						style: u({ width: k(e) }),
+						onChange: (t) => A(t, e, o),
+						onClick: b[0] ||= v(() => {}, ["stop"])
+					}, null, 8, [
+						"value",
+						"class",
+						"options",
+						"style",
+						"onChange"
+					])) : e.type === "menu" ? (d(), t(C, {
+						key: 1,
+						menu: D(e),
+						trigger: "click",
+						onMenuClick: ({ key: t }) => j(e, o, t),
+						onClick: b[1] ||= v(() => {}, ["stop"])
+					}, {
+						default: _(() => [r("span", { class: l(["me-breadcrumb__menu-trigger", { "is-bold": e.bold }]) }, [i(h(e.label) + " ", 1), a(g(y), {
+							size: 14,
+							"stroke-width": 2
+						})], 2)]),
+						_: 2
+					}, 1032, ["menu", "onMenuClick"])) : (d(), n("span", {
+						key: 2,
+						class: l([{ "is-bold": e.bold }, { "me-breadcrumb__item-link": !!e.to }]),
+						onClick: (t) => N(e)
+					}, h(e.label), 11, S))]),
+					_: 2
+				}, 1024))), 128))]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+//#region src/components/breadcrumb/index.ts
+C.install = (e) => {
+	e.component("MeBreadcrumb", C);
+};
+var w = C;
+//#endregion
+export { C as MeBreadcrumb, w as default };

package/dist/breadcrumb.css

@@ -0,0 +1 @@
+.me-breadcrumb{align-items:center;margin-bottom:0;display:flex}.me-breadcrumb .ant-breadcrumb{align-items:center;display:flex}.me-breadcrumb .ant-breadcrumb-item{align-items:center;height:22px;line-height:22px;display:inline-flex}.me-breadcrumb__select{vertical-align:middle;align-items:center;min-width:80px;height:22px;margin-bottom:0;display:inline-flex}.me-breadcrumb__select .ant-select-selector{padding:0 8px;height:22px!important;min-height:22px!important;line-height:22px!important}.me-breadcrumb__select .ant-select-selection-item{align-items:center;height:22px;line-height:22px;display:inline-flex;padding-inline-end:20px!important}.me-breadcrumb__select .ant-select-arrow{top:50%;transform:translateY(-50%)}.me-breadcrumb__select.is-bold .ant-select-selection-item{font-weight:600}.me-breadcrumb__menu-trigger{cursor:pointer;align-items:center;gap:2px;height:22px;line-height:22px;display:inline-flex}.me-breadcrumb .is-bold{font-weight:600}.me-breadcrumb__item-link{cursor:pointer;color:var(--me-text-primary);transition:color .2s}.me-breadcrumb__item-link:hover{color:var(--me-color-primary)}html.dark .me-breadcrumb__item-link{color:var(--me-text-primary)}html.dark .me-breadcrumb__item-link:hover{color:var(--me-color-primary-light-3)}

package/dist/card/index.js

@@ -0,0 +1,154 @@
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, mergeProps as s, normalizeClass as c, openBlock as l, ref as u, renderSlot as d, resolveComponent as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, useSlots as g, vShow as _, watch as v, withCtx as y, withDirectives as b } from "vue";
+import { ChevronDown as x, Maximize2 as S, Minimize2 as C } from "@lucide/vue";
+//#region src/components/card/index.vue?vue&type=script&setup=true&lang.ts
+var w = { class: "me-card__title-wrapper" }, T = { class: "me-card__title" }, E = { class: "me-card__actions" }, D = { class: "me-card__content" }, O = { class: "me-card__body" }, k = {
+	key: 0,
+	class: "me-card__footer"
+}, A = /* @__PURE__ */ o({
+	name: "MeCard",
+	__name: "index",
+	props: {
+		title: {
+			type: String,
+			default: ""
+		},
+		collapsible: {
+			type: Boolean,
+			default: !1
+		},
+		defaultCollapsed: {
+			type: Boolean,
+			default: !1
+		},
+		collapsed: {
+			type: Boolean,
+			default: void 0
+		},
+		fullscreenable: {
+			type: Boolean,
+			default: !1
+		},
+		fullscreen: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultFullscreen: {
+			type: Boolean,
+			default: !1
+		},
+		height: {
+			type: [String, Number],
+			default: ""
+		},
+		loading: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultLoading: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: [
+		"update:collapsed",
+		"collapse-change",
+		"update:fullscreen",
+		"fullscreen-change",
+		"update:loading",
+		"loading-change"
+	],
+	setup(o, { emit: A }) {
+		let j = o, M = A, N = g(), P = e(() => !!N.footer), F = u(j.defaultLoading), I = e(() => j.loading !== void 0), L = e(() => I.value ? j.loading : F.value);
+		v(() => j.loading, (e) => {
+			e !== void 0 && (F.value = e);
+		});
+		let R = e(() => {
+			if (!j.height) return 3;
+			let e = typeof j.height == "number" ? j.height : parseFloat(j.height);
+			if (isNaN(e)) return 3;
+			let t = e - 48;
+			return Math.max(2, Math.floor(t / 32));
+		}), z = e(() => {
+			let e = {};
+			return j.height && !W.value && (e.height = typeof j.height == "number" ? `${j.height}px` : j.height), e;
+		}), B = u(j.defaultCollapsed), V = e(() => j.collapsed !== void 0), H = e(() => V.value ? j.collapsed : B.value);
+		v(() => j.collapsed, (e) => {
+			e !== void 0 && (B.value = e);
+		});
+		let U = () => {
+			let e = !H.value;
+			V.value || (B.value = e), M("update:collapsed", e), M("collapse-change", e);
+		}, W = u(j.defaultFullscreen), G = e(() => j.fullscreen !== void 0), K = e(() => G.value ? j.fullscreen : W.value);
+		v(() => j.fullscreen, (e) => {
+			e !== void 0 && (W.value = e);
+		});
+		let q = () => {
+			let e = !K.value;
+			G.value || (W.value = e), M("update:fullscreen", e), M("fullscreen-change", e);
+		}, J = e(() => {
+			let { title: e, collapsible: t, defaultCollapsed: n, collapsed: r, fullscreenable: i, fullscreen: a, defaultFullscreen: o, height: s, loading: c, defaultLoading: l, ...u } = j;
+			return { ...u };
+		});
+		return (e, o) => {
+			let u = f("a-button"), g = f("a-skeleton"), v = f("a-card");
+			return l(), t(v, s(J.value, {
+				style: z.value,
+				class: ["me-card", {
+					"me-card--collapsed": B.value,
+					"me-card--fullscreen": W.value,
+					"me-card--collapsible": j.collapsible,
+					"me-card--fullscreenable": j.fullscreenable,
+					"me-card--has-height": !!j.height,
+					"me-card--has-footer": P.value,
+					"me-card--loading": L.value
+				}]
+			}), {
+				title: y(() => [i("div", w, [d(e.$slots, "title", {}, () => [i("span", T, m(j.title), 1)]), i("div", E, [
+					d(e.$slots, "actions"),
+					d(e.$slots, "extra"),
+					j.fullscreenable ? (l(), t(u, {
+						key: 0,
+						type: "text",
+						size: "small",
+						class: "me-card__action-btn",
+						onClick: q
+					}, {
+						default: y(() => [(l(), t(p(W.value ? h(C) : h(S)), { size: 16 }))]),
+						_: 1
+					})) : n("", !0),
+					j.collapsible ? (l(), t(u, {
+						key: 1,
+						type: "text",
+						size: "small",
+						class: c(["me-card__action-btn", { "me-card__collapse-btn--collapsed": B.value }]),
+						onClick: U
+					}, {
+						default: y(() => [a(h(x), {
+							size: 16,
+							class: "me-card__collapse-icon"
+						})]),
+						_: 1
+					}, 8, ["class"])) : n("", !0)
+				])])]),
+				default: y(() => [b(i("div", D, [i("div", O, [L.value ? (l(), t(g, {
+					key: 0,
+					active: "",
+					rows: R.value,
+					title: !1
+				}, {
+					default: y(() => [d(e.$slots, "default")]),
+					_: 3
+				}, 8, ["rows"])) : d(e.$slots, "default", {}, void 0, void 0, 1)]), P.value ? (l(), r("div", k, [d(e.$slots, "footer")])) : n("", !0)], 512), [[_, !B.value]])]),
+				_: 3
+			}, 16, ["style", "class"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/card/index.ts
+A.install = (e) => {
+	e.component("MeCard", A);
+};
+var j = A;
+//#endregion
+export { A as MeCard, j as default };