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

package/dist/input-property/index.js

@@ -0,0 +1,269 @@
+import e from "../icon/index.js";
+import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, nextTick as l, onMounted as u, openBlock as d, reactive as f, ref as p, resolveComponent as m, unref as h, watch as g, withCtx as _ } from "vue";
+import { useDraggable as v } from "vue-draggable-plus";
+//#region src/components/input-property/validate.ts
+function y() {
+	return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}
+function b(e) {
+	return e.trim().toLowerCase();
+}
+function x(e) {
+	let t = /* @__PURE__ */ new Map(), n = [];
+	for (let r of e) {
+		let e = b(r.key);
+		if (e) {
+			if (t.has(e)) {
+				let i = t.get(e);
+				n.includes(i) || n.push(i);
+				let a = r.key.trim();
+				n.includes(a) || n.push(a);
+			} else t.set(e, r.key.trim());
+		}
+	}
+	return n;
+}
+function S(e, t) {
+	if (!e) return !1;
+	let n = b(e);
+	return t.some((e) => b(e) === n);
+}
+//#endregion
+//#region src/components/input-property/index.vue?vue&type=script&setup=true&lang.ts
+var C = { class: "me-input-property__toolbar" }, w = {
+	key: 0,
+	class: "me-input-property__actions"
+}, T = {
+	key: 0,
+	class: "me-input-property__drag",
+	title: "拖拽排序"
+}, E = /* @__PURE__ */ c({
+	name: "MeInputProperty",
+	__name: "index",
+	props: {
+		modelValue: { default: () => ({}) },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "middle" },
+		draggable: {
+			type: Boolean,
+			default: !0
+		},
+		keyPlaceholder: { default: "请输入 key" },
+		valuePlaceholder: { default: "请输入 value" },
+		emptyText: { default: "暂无属性，点击「新增属性」添加" }
+	},
+	emits: ["update:modelValue", "change"],
+	setup(c, { emit: b }) {
+		let E = c, D = b, O = p([]), k = p([]), A = !1, j = t(() => [
+			{
+				title: "Key",
+				key: "key",
+				dataIndex: "key",
+				width: 180
+			},
+			{
+				title: "Value",
+				key: "value",
+				dataIndex: "value"
+			},
+			{
+				title: "操作",
+				key: "action",
+				dataIndex: "action",
+				width: 72,
+				align: "center"
+			}
+		]), M = t(() => E.draggable && !E.disabled);
+		function N(e) {
+			O.value = Object.entries(e).map(([e, t]) => ({
+				id: y(),
+				key: e,
+				value: t
+			})), z();
+		}
+		function P() {
+			let e = {};
+			for (let t of O.value) {
+				let n = t.key.trim();
+				n && (e[n] = t.value);
+			}
+			A = !0, D("update:modelValue", e), D("change", e);
+		}
+		g(() => E.modelValue, (e) => {
+			if (e) {
+				if (A) {
+					A = !1;
+					return;
+				}
+				N(e);
+			}
+		}, { immediate: !0 });
+		function F(e) {
+			z(), P();
+		}
+		function I(e) {
+			z(), P();
+		}
+		function L() {
+			O.value = [...O.value, {
+				id: y(),
+				key: "",
+				value: ""
+			}], z(), P();
+		}
+		function R(e) {
+			let t = O.value.indexOf(e);
+			t !== -1 && (O.value.splice(t, 1), z(), P());
+		}
+		function z() {
+			k.value = x(O.value);
+		}
+		function B(e) {
+			return S(e, k.value);
+		}
+		function V(e) {
+			return B(e) ? "Key 不能重复（忽略大小写）" : "";
+		}
+		let H = p(null), U = p(null);
+		function W() {
+			U.value ||= H.value?.querySelector("tbody") ?? null;
+		}
+		u(async () => {
+			await l(), W(), U.value && Y.start(U.value);
+		});
+		let G = p(null);
+		function K() {
+			G.value && (G.value.style.display = "none");
+		}
+		function q(e) {
+			let t = U.value, n = H.value, r = G.value, i = e?.related, a = i instanceof Element ? i.closest("tr") : null;
+			if (!t || !n || !r || !a || !t.contains(a)) {
+				K();
+				return;
+			}
+			let o = a.getBoundingClientRect(), s = n.getBoundingClientRect(), c = e.willInsertAfter ? o.bottom : o.top;
+			r.style.top = `${c - s.top - 1}px`, r.style.left = "0px", r.style.width = `${n.clientWidth}px`, r.style.display = "block";
+		}
+		let J = f({
+			handle: ".me-input-property__drag",
+			animation: 150,
+			forceFallback: !0,
+			fallbackOnBody: !0,
+			fallbackClass: "me-input-property__drag-fallback",
+			ghostClass: "me-input-property__row--ghost",
+			disabled: t(() => !M.value),
+			onStart: () => K(),
+			onMove: ((e) => (q(e), !0)),
+			onEnd: () => {
+				K(), z(), P();
+			}
+		}), Y = v(U, O, {
+			...J,
+			immediate: !1
+		});
+		return g(M, (e) => {
+			Y.option("disabled", !e);
+		}), (t, l) => {
+			let u = m("a-button"), f = m("a-input"), p = m("a-tooltip"), g = m("a-table");
+			return d(), i("div", {
+				ref_key: "rootEl",
+				ref: H,
+				class: "me-input-property"
+			}, [
+				a("div", C, [s(u, {
+					size: "small",
+					class: "me-input-property__add-btn",
+					disabled: c.disabled,
+					onClick: L
+				}, {
+					icon: _(() => [s(h(e), {
+						name: "Plus",
+						size: 14
+					})]),
+					default: _(() => [l[0] ||= o(" 新增属性 ", -1)]),
+					_: 1
+				}, 8, ["disabled"])]),
+				s(g, {
+					columns: j.value,
+					"data-source": O.value,
+					"row-key": (e) => e.id,
+					pagination: !1,
+					size: c.size,
+					locale: { emptyText: c.emptyText },
+					class: "me-input-property__table"
+				}, {
+					bodyCell: _(({ column: t, record: a }) => [t.key === "action" ? (d(), i("div", w, [M.value ? (d(), i("span", T, [s(h(e), {
+						name: "GripVertical",
+						size: 14
+					})])) : r("", !0), s(u, {
+						type: "text",
+						size: "small",
+						class: "me-input-property__del",
+						disabled: c.disabled,
+						title: "删除该属性",
+						onClick: (e) => R(a)
+					}, {
+						default: _(() => [s(h(e), {
+							name: "Trash2",
+							size: 14
+						})]),
+						_: 1
+					}, 8, ["disabled", "onClick"])])) : t.key === "key" ? (d(), n(p, {
+						key: 1,
+						title: c.disabled ? "" : V(a.key),
+						visible: !c.disabled && B(a.key)
+					}, {
+						default: _(() => [s(f, {
+							value: a.key,
+							"onUpdate:value": [(e) => a.key = e, (e) => F(a)],
+							disabled: c.disabled,
+							placeholder: c.keyPlaceholder,
+							status: !c.disabled && B(a.key) ? "error" : ""
+						}, null, 8, [
+							"value",
+							"onUpdate:value",
+							"disabled",
+							"placeholder",
+							"status"
+						])]),
+						_: 2
+					}, 1032, ["title", "visible"])) : t.key === "value" ? (d(), n(f, {
+						key: 2,
+						value: a.value,
+						"onUpdate:value": [(e) => a.value = e, (e) => I(a)],
+						disabled: c.disabled,
+						placeholder: c.valuePlaceholder
+					}, null, 8, [
+						"value",
+						"onUpdate:value",
+						"disabled",
+						"placeholder"
+					])) : r("", !0)]),
+					_: 1
+				}, 8, [
+					"columns",
+					"data-source",
+					"row-key",
+					"size",
+					"locale"
+				]),
+				a("div", {
+					ref_key: "dropLineEl",
+					ref: G,
+					class: "me-input-property__drop-line"
+				}, null, 512)
+			], 512);
+		};
+	}
+});
+//#endregion
+//#region src/components/input-property/index.ts
+E.install = (e) => {
+	e.component("MeInputProperty", E);
+};
+var D = E;
+//#endregion
+export { E as MeInputProperty, x as checkDuplicateKeys, D as default, y as genId, S as isDuplicateKey, b as normalizeKey };

package/dist/input-property/index.vue.d.ts

@@ -0,0 +1,18 @@
+import { MeInputPropertyProps } from './types';
+declare const __VLS_export: import('vue').DefineComponent<MeInputPropertyProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (value: Record<string, any>) => any;
+    "update:modelValue": (value: Record<string, any>) => any;
+}, string, import('vue').PublicProps, Readonly<MeInputPropertyProps> & Readonly<{
+    onChange?: ((value: Record<string, any>) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Record<string, any>) => any) | undefined;
+}>, {
+    size: "small" | "middle" | "large";
+    disabled: boolean;
+    modelValue: Record<string, any>;
+    draggable: boolean;
+    keyPlaceholder: string;
+    valuePlaceholder: string;
+    emptyText: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/input-property/types.d.ts

@@ -0,0 +1,38 @@
+/**
+ * MeInputProperty 属性编辑器组件类型定义
+ */
+/** 内部行数据（一维属性项） */
+export interface PropertyKV {
+    /** 行唯一 id（组件内部生成，用于定位编辑行，避免 key 变更导致表格重建） */
+    id: string | number;
+    /** 属性键 */
+    key: string;
+    /** 属性值（原始值，统一按 string 编辑） */
+    value: any;
+}
+/** MeInputProperty Props */
+export interface MeInputPropertyProps {
+    /** v-model 绑定的一维 JSON 对象 */
+    modelValue?: Record<string, any>;
+    /** 是否禁用编辑（只读展示） */
+    disabled?: boolean;
+    /** 表格尺寸 */
+    size?: 'small' | 'middle' | 'large';
+    /** 是否允许拖拽排序，默认 true */
+    draggable?: boolean;
+    /** key 列占位符 */
+    keyPlaceholder?: string;
+    /** value 列占位符 */
+    valuePlaceholder?: string;
+    /** 空数据提示 */
+    emptyText?: string;
+}
+/** MeInputProperty Events */
+export interface MeInputPropertyEmits {
+    /** 更新 v-model 绑定对象 */
+    (e: 'update:modelValue', value: Record<string, any>): void;
+    /** 数据变更（新增/删除/编辑/排序） */
+    (e: 'change', value: Record<string, any>): void;
+}
+/** MeInputProperty 组件实例类型 */
+export type MeInputPropertyInstance = InstanceType<typeof import('./index.vue').default>;

package/dist/input-property/validate.d.ts

@@ -0,0 +1,18 @@
+/**
+ * MeInputProperty 纯函数校验与转换逻辑
+ *
+ * 此模块不依赖 Vue，便于复用与单测。
+ */
+/** 生成简单唯一 id（组件内部用于定位行，避免用 key 定位导致表格重建丢焦点） */
+export declare function genId(): string;
+/** 将 key 统一为用于比较的小写形式（大小写不敏感） */
+export declare function normalizeKey(key: string): string;
+/**
+ * 找出重复的 key（大小写不敏感）。
+ * @returns 重复的原始 key 集合（含所有重复出现项的去重字符数组）
+ */
+export declare function checkDuplicateKeys(rows: {
+    key: string;
+}[]): string[];
+/** 判断某 key 是否处于重复集合中（大小写不敏感） */
+export declare function isDuplicateKey(key: string, duplicates: string[]): boolean;

package/dist/load-json/index.css

@@ -0,0 +1 @@
+.me-load-json{display:inline-block}.me-load-json__editor{flex-direction:column;flex:1;width:100%;height:100%;min-height:400px;display:flex}.me-load-json__editor .editor{flex:1;width:100%;height:100%;min-height:0}.me-load-json .me-modal__body{flex-direction:column;display:flex}.me-load-json__footer{justify-content:space-between;align-items:center;gap:12px;width:100%;display:flex}.me-load-json__footer-left,.me-load-json__footer-right{align-items:center;gap:8px;display:flex}