disguise-ui 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,116 @@
-# Temporary Holding Version
+# 嘻嘻 UI 库
 
-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.
+从 elecbee-admin 抽出的列表、表单、上传组件。安装后不依赖原后台的接口、字典和权限，这些能力在启动时注入。
+
+npm 包名是 `disguise-ui`。
+
+## 包含
+
+`CrudPage`、`TableEntity`、`SchemaForm`、`SearchForm`、`DrawerFormPage`、`AsyncSelect`、`DictTag`、`ImportDialog`、`ImageUpload`、`PictureUpload`、`RichTextEditor`、`BaseCard`、`ElecbeeIcon`。
+
+业务实体（商品、部门、用户）没有打进包。远程下拉用 `registerEntity` 自己注册。
+
+## 安装
+
+```bash
+npm install disguise-ui vue element-plus @element-plus/icons-vue @vueuse/core @tanstack/vue-query dayjs vue-draggable-plus lucide-vue-next
+```
+
+富文本还需要 `@tiptap/vue-3`、`@tiptap/starter-kit` 以及编辑器里用到的 `@tiptap/extension-*`。
+
+## 使用
+
+```ts
+import { createApp } from 'vue';
+import { VueQueryPlugin } from '@tanstack/vue-query';
+import ElementPlus from 'element-plus';
+import { setupElecbeeUi } from 'disguise-ui';
+
+import 'element-plus/dist/index.css';
+import 'disguise-ui/style.css';
+
+setupElecbeeUi({
+  locale: 'zh-CN',
+  imageBaseUrl: 'https://cdn.example.com',
+  getAccessToken: () => localStorage.getItem('token') ?? '',
+  hasAccess: (codes) => codes.every((code) => permissions.includes(code)),
+  fetchAllDictData: async () => {
+    const response = await fetch('/api/dict/values');
+    return response.json();
+  },
+  uploadFile: async (file) => {
+    const body = new FormData();
+    body.append('file', file);
+    const response = await fetch('/api/file_manager/upload', {
+      method: 'POST',
+      body,
+    });
+    return response.json();
+  },
+  request: {
+    getBaseUrl: () => '/api',
+    download: async (url, config) => {
+      const response = await fetch(url, {
+        method: String(config?.method ?? 'POST'),
+        body: config?.data ? JSON.stringify(config.data) : undefined,
+      });
+      return { data: await response.blob(), headers: response.headers };
+    },
+    upload: async (url, data) => {
+      const body = new FormData();
+      Object.entries(data ?? {}).forEach(([key, value]) => {
+        body.append(key, value as Blob | string);
+      });
+      const response = await fetch(url, { method: 'POST', body });
+      return response.json();
+    },
+  },
+});
+
+const app = createApp(App);
+app.use(ElementPlus);
+app.use(VueQueryPlugin);
+```
+
+`fetchAllDictData` 返回 `{ 字典编码: 字典项[] }`。字典项至少包含 `code` 或 `dictValue`，以及 `name` 或 `dictLabel`。
+
+远程下拉：
+
+```ts
+import { registerEntity } from 'disguise-ui';
+
+registerEntity({
+  key: 'dept',
+  labelKey: 'name',
+  valueKey: 'id',
+  fetch: async ({ keyword, page, per_page }) => {
+    return { items: [], total: 0 };
+  },
+});
+```
+
+页面里的工具类来自 Tailwind。使用方需要把构建产物加进扫描范围：
+
+```js
+content: ['./node_modules/disguise-ui/dist/**/*.js']
+```
+
+`ElecbeeIcon` 只负责拼接图标类名，图标字体样式需要使用方自己引入。
+
+## 文档站
+
+本地会启动一个类似 Element Plus 的组件说明站，包含实时示例、源码和 API：
+
+```bash
+npm run docs:dev      # 开发
+npm run docs:preview  # 先构建再预览正式包
+```
+
+## 构建
+
+```bash
+npm install
+npm run build
+```
+
+产物在 `dist/disguise-ui.js` 和 `dist/style.css`。

package/dist/_plugin-vue_export-helper-Djzt4Yr7.js

@@ -0,0 +1,7 @@
+// \0plugin-vue:export-helper
+var e = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+};
+export { e as t };

package/dist/avatar-cell-BzklaM_h.js

@@ -0,0 +1,302 @@
+import { n as e } from "./i18n-DQW_MS90.js";
+import { t } from "./_plugin-vue_export-helper-Djzt4Yr7.js";
+import { t as n } from "./use-image-url-hImb4UEO.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, markRaw as f, mergeModels as p, mergeProps as m, nextTick as h, normalizeClass as g, normalizeStyle as ee, openBlock as _, ref as v, renderList as te, renderSlot as y, resolveComponent as b, resolveDynamicComponent as ne, toDisplayString as x, unref as S, useModel as re, useSlots as ie, watch as C, watchEffect as ae, withCtx as w } from "vue";
+import { Badge as oe, Briefcase as se, Building2 as ce, Cake as le, CalendarDays as ue, Image as de, Mail as fe, Mars as T, Phone as pe, User as me, Venus as he } from "lucide-vue-next";
+// src/components/user-avatar-info/index.vue?vue&type=script&setup=true&lang.ts
+var ge = { class: "user-avatar-info-root" }, _e = {
+	key: 0,
+	class: "user-avatar-info__loading"
+}, ve = { class: "user-avatar-info__skeleton-row" }, ye = { class: "user-avatar-info__skeleton-text" }, be = [
+	"role",
+	"tabindex",
+	"aria-label",
+	"aria-disabled"
+], xe = { class: "user-avatar-info__avatar-wrap" }, Se = { class: "user-avatar-info__name" }, Ce = {
+	key: 0,
+	class: "user-avatar-info__subtitle-wrap"
+}, E = { class: "user-avatar-info__tooltip-text displaySubtitle" }, D = { class: "row-detail-drawer__header" }, O = { class: "row-detail-drawer__title" }, k = {
+	key: 0,
+	class: "user-avatar-info__drawer-slot"
+}, A = {
+	key: 1,
+	class: "user-avatar-info__drawer"
+}, we = { class: "user-avatar-info__hero" }, Te = { class: "user-avatar-info__hero-avatar" }, Ee = { class: "user-avatar-info__hero-main" }, De = { class: "user-avatar-info__hero-name-row" }, Oe = { class: "user-avatar-info__hero-name" }, ke = {
+	key: 0,
+	class: "user-avatar-info__hero-gender"
+}, Ae = { class: "user-avatar-info__hero-meta" }, je = { key: 0 }, Me = { key: 1 }, Ne = { class: "user-avatar-info__card-grid" }, Pe = { class: "user-avatar-info__field-icon" }, Fe = { class: "user-avatar-info__field-content" }, Ie = { class: "user-avatar-info__field-label" }, Le = { class: "user-avatar-info__field-value" }, j = /*#__PURE__*/ t(/* @__PURE__ */ d({
+	__name: "index",
+	props: /*@__PURE__*/ p({
+		userId: { default: void 0 },
+		name: { default: void 0 },
+		subtitle: { default: "" },
+		src: {},
+		gender: { default: void 0 },
+		size: { default: 30 },
+		avatar: { default: void 0 },
+		drawerAvatarSize: { default: 64 },
+		age: { default: void 0 },
+		workYears: { default: void 0 },
+		email: { default: void 0 },
+		phone: { default: void 0 },
+		department: { default: void 0 },
+		jobLevel: { default: void 0 },
+		enableDrawer: {
+			type: Boolean,
+			default: !0
+		},
+		drawerTitle: { default: void 0 },
+		drawerSize: { default: "40%" },
+		drawerProps: { default: void 0 },
+		nickName: { default: "" },
+		deptName: { default: "" },
+		sex: { default: "" }
+	}, {
+		drawerVisible: {
+			type: Boolean,
+			default: !1
+		},
+		drawerVisibleModifiers: {}
+	}),
+	emits: ["update:drawerVisible"],
+	setup(t, { expose: d }) {
+		let p = t, { ensureImageBaseUrl: j, resolveImageUrl: M } = n();
+		j();
+		let N = re(t, "drawerVisible"), P = v(!1);
+		C(N, (e) => {
+			e && (P.value = !0);
+		}, { immediate: !0 });
+		function Re() {
+			P.value = !1;
+		}
+		let { t: F } = e(), ze = ie(), I = i(() => null), L = i(() => I.value?.data), Be = i(() => !1), Ve = i(() => !1), R = i(() => ({ isUserOnline: (e) => !1 })).value, He = i(() => Be.value && Ve.value && !I.value), z = i(() => p.nickName || p.name || ""), B = i(() => p.subtitle || p.deptName || ""), Ue = i(() => p.age), We = i(() => p.workYears), Ge = i(() => p.jobLevel), V = i(() => L.value?.nickName ?? L.value?.userName ?? ""), H = i(() => L.value?.userId ?? p.userId), Ke = i(() => !!ze.default), U = i(() => {
+			if (p.gender !== void 0 && p.gender !== null && p.gender !== "") return p.gender;
+			let e = p.sex;
+			return e === "0" ? "male" : e === "1" ? "female" : "unknown";
+		}), W = i(() => {
+			let e = L.value?.sex;
+			return e === "0" ? "male" : e === "1" ? "female" : "unknown";
+		}), G = i(() => W.value === "male" ? F("components.userAvatarInfo.genderMale") : W.value === "female" ? F("components.userAvatarInfo.genderFemale") : F("components.userAvatarInfo.genderUnknown")), qe = i(() => W.value === "male" || W.value === "female"), Je = i(() => ({
+			"user-avatar-info__meta--male": U.value === "male",
+			"user-avatar-info__meta--female": U.value === "female"
+		})), Ye = i(() => U.value === "male" || U.value === "female"), Xe = i(() => p.userId != null && String(p.userId) !== ""), Ze = i(() => R.isUserOnline(p.userId == null ? null : String(p.userId))), K = i(() => Math.max(10, Math.min(16, Math.round(p.size * .36)))), q = i(() => ({
+			...p.avatar,
+			size: p.size,
+			src: M(p.src || "--"),
+			shape: "circle"
+		})), Qe = i(() => p.drawerTitle ?? F("components.userAvatarInfo.drawerTitle")), J = {
+			avatar: f(de),
+			name: f(me),
+			gender: f(T),
+			age: f(le),
+			workYears: f(ue),
+			email: f(fe),
+			phone: f(pe),
+			department: f(ce),
+			jobLevel: f(oe),
+			position: f(se)
+		}, $e = i(() => [
+			{
+				key: "name",
+				label: F("components.userAvatarInfo.fieldName"),
+				icon: J.name,
+				value: V.value
+			},
+			{
+				key: "gender",
+				label: F("components.userAvatarInfo.fieldGender"),
+				icon: J.gender,
+				value: G.value
+			},
+			{
+				key: "age",
+				label: F("components.userAvatarInfo.fieldAge"),
+				icon: J.age,
+				value: Y(Ue.value)
+			},
+			{
+				key: "workYears",
+				label: F("components.userAvatarInfo.fieldWorkYears"),
+				icon: J.workYears,
+				value: Y(We.value)
+			},
+			{
+				key: "jobLevel",
+				label: F("components.userAvatarInfo.fieldJobLevel"),
+				icon: J.position,
+				value: Y(Ge.value)
+			},
+			{
+				key: "phone",
+				label: F("components.userAvatarInfo.fieldPhone"),
+				icon: J.phone,
+				value: Y(L.value?.phonenumber ?? "")
+			},
+			{
+				key: "email",
+				label: F("components.userAvatarInfo.fieldEmail"),
+				icon: J.email,
+				value: Y(L.value?.email ?? "")
+			},
+			{
+				key: "department",
+				label: F("components.userAvatarInfo.fieldDepartment"),
+				icon: J.department,
+				value: X.value
+			}
+		]), et = i(() => ({
+			appendToBody: !0,
+			destroyOnClose: !1,
+			...p.drawerProps
+		})), tt = i(() => p.enableDrawer ? `${F("components.userAvatarInfo.ariaLabel")}, ${F("components.userAvatarInfo.clickToViewDetail")}` : F("components.userAvatarInfo.ariaLabel"));
+		function Y(e) {
+			return e == null || e === "" ? F("components.userAvatarInfo.empty") : String(e);
+		}
+		let X = i(() => Y(L.value?.dept?.deptName ?? ""));
+		function nt() {
+			p.enableDrawer && (N.value = !0);
+		}
+		function rt(e) {
+			p.enableDrawer && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), N.value = !0);
+		}
+		let Z = v(null), Q = v(!1);
+		function $() {
+			let e = Z.value;
+			e ? Q.value = e.scrollWidth > e.clientWidth + 1 : Q.value = !1;
+		}
+		ae((e) => {
+			let t = Z.value;
+			if (!t || typeof ResizeObserver > "u") {
+				Q.value = !1;
+				return;
+			}
+			$();
+			let n = new ResizeObserver(() => $());
+			n.observe(t), e(() => n.disconnect());
+		}), C(() => B.value, () => h($));
+		function it() {
+			N.value = !0;
+		}
+		function at() {
+			N.value = !1;
+		}
+		return d({
+			openDrawer: it,
+			closeDrawer: at,
+			remoteUser: L,
+			remoteDetail: I
+		}), (e, n) => {
+			let i = b("el-skeleton-item"), d = b("el-skeleton"), f = b("el-avatar"), h = b("el-tooltip"), v = b("el-drawer");
+			return _(), s("div", ge, [He.value ? (_(), s("div", _e, [u(d, { animated: "" }, {
+				template: w(() => [c("div", ve, [u(i, {
+					variant: "circle",
+					style: ee({
+						width: `${t.size}px`,
+						height: `${t.size}px`
+					})
+				}, null, 8, ["style"]), c("div", ye, [u(i, {
+					variant: "p",
+					style: { width: "55%" }
+				}), u(i, {
+					variant: "p",
+					style: { width: "40%" }
+				})])])]),
+				_: 1
+			})])) : (_(), s("div", {
+				key: 1,
+				class: g(["user-avatar-info", { "user-avatar-info--clickable": t.enableDrawer }]),
+				role: t.enableDrawer ? "button" : void 0,
+				tabindex: t.enableDrawer ? 0 : void 0,
+				"aria-label": tt.value,
+				"aria-disabled": !t.enableDrawer,
+				onClick: nt,
+				onKeydown: rt
+			}, [c("div", xe, [
+				u(f, m({ class: "user-avatar-info__avatar" }, q.value), {
+					default: w(() => [y(e.$slots, "avatar", {}, () => [l(x(z.value?.slice(0, 1)), 1)], !0)]),
+					_: 3
+				}, 16),
+				Ye.value ? (_(), s("span", {
+					key: 0,
+					class: g(["user-avatar-info__gender-badge", `user-avatar-info__gender-badge--${U.value}`]),
+					"aria-hidden": "true"
+				}, [U.value === "male" ? (_(), a(S(T), {
+					key: 0,
+					size: K.value,
+					"stroke-width": 2.5
+				}, null, 8, ["size"])) : (_(), a(S(he), {
+					key: 1,
+					size: K.value,
+					"stroke-width": 2.5
+				}, null, 8, ["size"]))], 2)) : o("", !0),
+				Xe.value ? (_(), s("span", {
+					key: 1,
+					class: g(["user-avatar-info__presence-badge", { "user-avatar-info__presence-badge--online": Ze.value }]),
+					"aria-hidden": "true"
+				}, null, 2)) : o("", !0)
+			]), c("div", { class: g(["user-avatar-info__meta", Je.value]) }, [c("div", Se, [y(e.$slots, "name", {}, () => [l(x(z.value), 1)], !0)]), B.value || e.$slots.subtitle ? (_(), s("div", Ce, [u(h, {
+				placement: "top",
+				disabled: !Q.value,
+				"show-after": 200,
+				"popper-class": "user-avatar-info-tooltip"
+			}, {
+				content: w(() => [c("div", E, [y(e.$slots, "subtitle", {}, () => [l(x(B.value), 1)], !0)])]),
+				default: w(() => [c("div", {
+					ref_key: "subtitleRef",
+					ref: Z,
+					class: g(["user-avatar-info__subtitle", { "user-avatar-info__subtitle--overflow": Q.value }])
+				}, [y(e.$slots, "subtitle", {}, () => [l(x(B.value), 1)], !0)], 2)]),
+				_: 3
+			}, 8, ["disabled"])])) : o("", !0)], 2)], 42, be)), P.value ? (_(), a(v, m({
+				key: 2,
+				modelValue: N.value,
+				"onUpdate:modelValue": n[0] ||= (e) => N.value = e,
+				size: t.drawerSize,
+				class: "user-avatar-info-drawer row-detail-drawer"
+			}, et.value, { onClosed: Re }), {
+				header: w(() => [c("div", D, [c("span", O, x(Qe.value), 1)])]),
+				default: w(() => [Ke.value ? (_(), s("div", k, [y(e.$slots, "default", {}, void 0, !0)])) : (_(), s("div", A, [c("section", we, [c("div", Te, [y(e.$slots, "drawer-avatar", {}, () => [u(f, {
+					size: p.drawerAvatarSize,
+					src: q.value.src
+				}, {
+					default: w(() => [l(x(V.value?.slice(0, 1)), 1)]),
+					_: 1
+				}, 8, ["size", "src"])], !0)]), c("div", Ee, [c("div", De, [y(e.$slots, "drawer-name", {}, () => [c("strong", Oe, x(V.value), 1)], !0), qe.value ? (_(), s("span", ke, x(G.value), 1)) : o("", !0)]), c("div", Ae, [H.value ? (_(), s("span", je, x(S(F)("field.id")) + ": " + x(H.value), 1)) : o("", !0), X.value ? (_(), s("span", Me, x(X.value), 1)) : o("", !0)])])]), c("section", Ne, [(_(!0), s(r, null, te($e.value, (e) => (_(), s("div", {
+					key: e.key,
+					class: "user-avatar-info__field-card"
+				}, [c("div", Pe, [(_(), a(ne(e.icon), {
+					size: 18,
+					"stroke-width": 2.2
+				}))]), c("div", Fe, [c("div", Ie, x(e.label), 1), c("div", Le, x(e.value), 1)])]))), 128))])]))]),
+				_: 3
+			}, 16, ["modelValue", "size"])) : o("", !0)]);
+		};
+	}
+}), [["__scopeId", "data-v-5b19a12c"]]), M = /* @__PURE__ */ d({
+	__name: "avatar-cell",
+	props: {
+		row: { default: () => ({}) },
+		value: { default: null }
+	},
+	setup(e) {
+		let t = e, n = i(() => t.row?.userId), r = i(() => t.row?.nickName ?? ""), o = i(() => t.row?.userName ?? ""), s = i(() => t.row?.avatar ?? ""), c = i(() => t.row?.sex ?? ""), l = i(() => t.row?.deptName ?? t.row?.dept?.deptName ?? "");
+		return (e, t) => (_(), a(j, {
+			"user-id": n.value,
+			"nick-name": r.value,
+			name: o.value,
+			src: s.value,
+			avatar: s.value,
+			sex: c.value,
+			"dept-name": l.value
+		}, null, 8, [
+			"user-id",
+			"nick-name",
+			"name",
+			"src",
+			"avatar",
+			"sex",
+			"dept-name"
+		]));
+	}
+});
+export { M as default };

package/dist/context-CpMT_OSb.js

@@ -0,0 +1,34 @@
+import { ref as e } from "vue";
+// src/runtime/context.ts
+var t = e("zh-CN"), n = e({}), r = e(() => !0), i = e(() => ""), a = e("hover"), o = null, s, c, l = "";
+function u(e) {
+	e.locale && (t.value = e.locale), e.messages && (n.value = e.messages), e.request && (o = e.request), e.fetchAllDictData && (s = e.fetchAllDictData), e.uploadFile && (c = e.uploadFile), e.imageBaseUrl !== void 0 && (l = e.imageBaseUrl), e.hasAccess && (r.value = e.hasAccess), e.getAccessToken && (i.value = e.getAccessToken), e.cardShadow && (a.value = e.cardShadow);
+}
+function d() {
+	return t;
+}
+function f() {
+	return n;
+}
+function p() {
+	return o;
+}
+function m() {
+	return s?.() ?? Promise.resolve({});
+}
+function h() {
+	return c;
+}
+function g() {
+	return l;
+}
+function _() {
+	return r;
+}
+function v() {
+	return i.value();
+}
+function y() {
+	return a;
+}
+export { f as a, d as c, y as i, p as l, _ as n, h as o, v as r, g as s, u as t, m as u };