@web-utils/form-ui 1.0.0-beta10 → 1.0.0-beta101

package/easy-popup/index.mjs

@@ -0,0 +1,93 @@
+import { t as e } from "../chunks/B1MSrc6f.mjs";
+import { Transition as t, createBlock as n, createCommentVNode as r, createElementBlock as i, normalizeClass as a, normalizeStyle as o, openBlock as s, renderSlot as c, vShow as l, withCtx as u, withDirectives as d } from "vue";
+import { getComputedHeight as f, getComputedWidth as p } from "@web-utils/core";
+import "./style.css";
+//#region src/components/EasyPopup.vue
+var m = {
+	name: "EasyPopup",
+	props: {
+		border: {
+			type: Boolean,
+			default: !0
+		},
+		offset: {
+			type: Object,
+			default: () => ({
+				x: 6,
+				y: 2
+			})
+		},
+		borderWidth: {
+			type: Number,
+			default: 6
+		},
+		appendToBody: Boolean,
+		flexRow: Boolean,
+		flexColumn: Boolean,
+		hideOnMouseLeave: {
+			type: Boolean,
+			default: !0
+		},
+		interactive: Boolean
+	},
+	data() {
+		return {
+			visible: !1,
+			rendered: !1,
+			axis: {
+				x: 0,
+				y: 0
+			}
+		};
+	},
+	computed: { position() {
+		return {
+			top: `${this.axis.y + this.offset.y}px`,
+			left: `${this.axis.x + this.offset.x}px`
+		};
+	} },
+	watch: { async axis() {
+		if (this.border) {
+			await this.$nextTick();
+			let e = p(this.$refs.container), t = f(this.$refs.container), n = document.body.offsetWidth, r = document.body.offsetHeight;
+			this.axis.x + this.offset.x + e >= n && (this.axis.x = n - e - this.borderWidth - this.offset.x), this.axis.y + this.offset.y + t >= r && (this.axis.y = r - t - this.borderWidth - this.offset.y);
+		}
+	} },
+	unmounted() {
+		this.$el.remove();
+	},
+	methods: {
+		show({ clientX: e, clientY: t }) {
+			this.axis = {
+				x: e,
+				y: t
+			}, this.visible || (document.addEventListener("click", this.doHide, !0), this.rendered = !0, this.visible = !0), this.appendToBody && document.body.appendChild(this.$el);
+		},
+		hide() {
+			this.visible = !1, document.removeEventListener("click", this.doHide);
+		},
+		doHide(e) {
+			this.interactive && this.$el.contains(e.target) || this.hide();
+		}
+	}
+};
+function h(e, f, p, m, h, g) {
+	return s(), n(t, { name: "easy-popup" }, {
+		default: u(() => [h.rendered ? d((s(), i("div", {
+			key: 0,
+			ref: "container",
+			class: a(["easy-popup", {
+				"easy-popup__visible": h.visible,
+				"easy-popup__hide": !h.visible,
+				"flex-row": p.flexRow,
+				"flex-column": p.flexColumn
+			}]),
+			style: o(g.position),
+			onMouseleave: f[0] || (f[0] = (e) => p.hideOnMouseLeave ? g.hide() : null)
+		}, [c(e.$slots, "default")], 38)), [[l, h.visible]]) : r("v-if", !0)]),
+		_: 3
+	});
+}
+var g = /* @__PURE__ */ e(m, [["render", h]]);
+//#endregion
+export { g as default };

package/easy-popup/style.css

@@ -0,0 +1 @@
+.easy-popup{z-index:9999;background:#fff;border:1px solid #ebeef5;border-radius:4px;width:300px;min-height:200px;padding:12px;position:fixed;box-shadow:0 2px 12px #0000001a}@keyframes easy-popup-zoom-in{0%{opacity:0;transform:scale3d(0,0,0)}to{opacity:1}}.easy-popup-enter-active,.easy-popup-enter{animation:.2s easy-popup-zoom-in}@keyframes easy-popup-zoom-out{0%{opacity:1}to{opacity:0;transform:scale3d(0,0,0)}}.easy-popup-leave-active,.easy-popup-leave{animation:.2s easy-popup-zoom-out}

package/editable-progress/index.d.ts

@@ -0,0 +1,69 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<globalThis.ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    strokeWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    value: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, {}, {
+    slider: boolean;
+    mouseDown: boolean;
+    tooltipClass: string;
+    percent: number;
+}, {}, {
+    formatTooltip(val: any): string;
+    onInput(percent: any): void;
+    onChange(percent: any): void;
+    onMouseOver(): void;
+    onMouseDown(): void;
+    onMouseUp(): void;
+    onMouseLeave(): void;
+    wrapperClick(): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("update:modelValue" | "change" | "input")[], "update:modelValue" | "change" | "input", import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    strokeWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    value: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+    onInput?: ((...args: any[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    value: number;
+    strokeWidth: number;
+    step: number;
+    max: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/editable-progress/index.mjs

@@ -0,0 +1,122 @@
+import { t as e } from "../chunks/B1MSrc6f.mjs";
+import { ElProgress as t, ElSlider as n } from "element-plus/es";
+import "element-plus/es/components/base/style/css";
+import { createBlock as r, createCommentVNode as i, createElementBlock as a, createVNode as o, normalizeClass as s, normalizeStyle as c, openBlock as l, vShow as u, withDirectives as d } from "vue";
+import "element-plus/es/components/progress/style/css";
+import "element-plus/es/components/slider/style/css";
+import "./style.css";
+//#region src/components/EditableProgress.vue
+var f = {
+	name: "EditableProgress",
+	props: {
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		strokeWidth: {
+			type: Number,
+			default: 22
+		},
+		step: {
+			type: Number,
+			default: 10
+		},
+		max: {
+			type: Number,
+			default: 100
+		},
+		value: {
+			type: Number,
+			default: 0
+		}
+	},
+	emits: [
+		"input",
+		"change",
+		"update:modelValue"
+	],
+	data() {
+		return {
+			slider: !1,
+			mouseDown: !1,
+			tooltipClass: "hide-tooltip",
+			percent: this.value
+		};
+	},
+	watch: { value(e) {
+		this.percent !== e && (this.percent = e);
+	} },
+	methods: {
+		formatTooltip(e) {
+			return `${e}%`;
+		},
+		onInput(e) {
+			this.value !== e && this.$emit("update:modelValue", e);
+		},
+		onChange(e) {
+			this.slider = !1, this.tooltipClass = "hide-tooltip", this.$emit("change", e);
+		},
+		onMouseOver() {
+			this.disabled || this.slider || (this.slider = !0, this.$nextTick(() => {
+				this.$refs.slider.$refs.button1.$refs.tooltip.updatePopper(), this.tooltipClass = "";
+			}));
+		},
+		onMouseDown() {
+			this.disabled || (this.mouseDown = !0, window.addEventListener("mouseup", this.onMouseUp));
+		},
+		onMouseUp() {
+			this.disabled || (this.mouseDown = !1, this.tooltipClass = "hide-tooltip", window.removeEventListener("mouseup", this.onMouseUp));
+		},
+		onMouseLeave() {
+			this.disabled || this.mouseDown || (this.tooltipClass = "hide-tooltip", this.slider = !1);
+		},
+		wrapperClick() {
+			this.disabled || (this.slider = !0);
+		}
+	}
+};
+function p(e, f, p, m, h, g) {
+	let _ = t, v = n;
+	return l(), a("div", {
+		class: "editable-progress",
+		onMouseover: f[1] || (f[1] = (...e) => g.onMouseOver && g.onMouseOver(...e)),
+		onMousedown: f[2] || (f[2] = (...e) => g.onMouseDown && g.onMouseDown(...e)),
+		onMouseleave: f[3] || (f[3] = (...e) => g.onMouseLeave && g.onMouseLeave(...e)),
+		onClick: f[4] || (f[4] = (...e) => g.wrapperClick && g.wrapperClick(...e))
+	}, [d(o(_, {
+		class: s(h.percent === 100 ? "progress__success" : ""),
+		"stroke-width": p.strokeWidth,
+		"text-inside": "",
+		percentage: h.percent
+	}, null, 8, [
+		"class",
+		"stroke-width",
+		"percentage"
+	]), [[u, !h.slider]]), p.disabled ? i("v-if", !0) : d((l(), r(v, {
+		key: 0,
+		ref: "slider",
+		modelValue: h.percent,
+		"onUpdate:modelValue": f[0] || (f[0] = (e) => h.percent = e),
+		"tooltip-class": h.tooltipClass,
+		max: p.max,
+		"format-tooltip": g.formatTooltip,
+		style: c({ width: `${p.max === 100 ? 100 : p.max - 1}%` }),
+		disabled: p.disabled,
+		step: p.step,
+		onInput: g.onInput,
+		onChange: g.onChange
+	}, null, 8, [
+		"modelValue",
+		"tooltip-class",
+		"max",
+		"format-tooltip",
+		"style",
+		"disabled",
+		"step",
+		"onInput",
+		"onChange"
+	])), [[u, h.slider]])], 32);
+}
+var m = /* @__PURE__ */ e(f, [["render", p]]);
+//#endregion
+export { m as default };

package/editable-progress/style.css

@@ -0,0 +1 @@
+.editable-progress{background-color:#e4e7ed;border-radius:100px;flex-direction:column;justify-content:center;align-items:flex-start;width:100%;display:flex}.editable-progress .el-progress,.editable-progress .el-slider{width:100%;font-weight:700}.editable-progress .el-slider__runway{margin:0}.editable-progress .el-progress-bar__outer{background-color:#e4e7ed}.editable-progress .el-slider__bar,.editable-progress .el-slider__runway{border-radius:100px;height:22px}.editable-progress .el-slider__button-wrapper{width:52px;height:52px}.editable-progress .el-slider__button-wrapper .el-slider__button{width:24px;height:24px}

package/editable-tree/index.d.ts

@@ -0,0 +1,282 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<globalThis.ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    addRootNodeLabel: StringConstructor;
+    defaultExpandedKeys: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    newNodeBuilder: {
+        type: FunctionConstructor;
+        default: (name: string, parent: {
+            id: string | number;
+            [key: string]: any;
+        }) => {
+            name: string;
+            parentId: string | number;
+        };
+    };
+    contextMenu: BooleanConstructor;
+    lazy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    expandFirstNode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: BooleanConstructor;
+    saveApi: FunctionConstructor;
+    updateApi: FunctionConstructor;
+    deleteApi: FunctionConstructor;
+    fetchApi: FunctionConstructor;
+    customRootNode: (ObjectConstructor | FunctionConstructor)[];
+    rootNode: ObjectConstructor;
+    contextMenuIcon: BooleanConstructor;
+    contextMenuInline: BooleanConstructor;
+    treeProps: {
+        type: ObjectConstructor;
+        default: () => {
+            children: string;
+            label: string;
+            isLeaf: (data: any) => boolean;
+        };
+    };
+    menuLabel: {
+        type: ObjectConstructor;
+        default: () => {
+            appendPeer: string;
+            appendChild: string;
+            removeNode: string;
+            editNode: string;
+        };
+    };
+    icon: {
+        type: (BooleanConstructor | FunctionConstructor)[];
+        default: (data: any, node: any) => string;
+    };
+    confirmButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    addRootNodeButtonStyle: {
+        type: StringConstructor;
+        default: string;
+    };
+    reserveExpandKey: BooleanConstructor;
+    nodeKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    defaultExpandAll: BooleanConstructor;
+}>, {
+    autoBindProps: globalThis.ComputedRef<Record<string, any>>;
+    listeners: globalThis.ComputedRef<Record<string, any>>;
+}, {
+    loading: boolean;
+    showMenu: boolean;
+    empty: boolean;
+    expandedKeys: unknown[];
+    treeData: never[];
+    curNode: {};
+    curData: {};
+    position: {};
+    text: string;
+    right: number;
+    treeKey: number;
+}, {
+    defaultOptions(): {
+        confirmButtonText: string;
+        cancelButtonText: string;
+        closeOnClickModal: boolean;
+        modal: boolean;
+        inputErrorMessage: string;
+        inputPlaceholder: string;
+        inputValidator: (value: any) => boolean;
+    };
+    innerTreeData(): {};
+}, {
+    addExpandKey(data: any): void;
+    removeExpandKey(data: any): void;
+    resize(): void;
+    showContextMenu(event: any, data: any, node: any): Promise<void>;
+    hideContextMenu(): void;
+    tryFetch(): Promise<void>;
+    loadNode(node: any, resolve: any): Promise<any>;
+    clear(): void;
+    clearChecked(): void;
+    removeNewNode(): void;
+    cancelEdit(): void;
+    editNode(node: any, data: any): Promise<void>;
+    appendRootNode(): Promise<void>;
+    appendChildNode(node: any): void;
+    appendChildNodeWithData(node: any, parentId: any, label: any): void;
+    appendPeerNode(node: any): void;
+    addRootNode(data: any): Promise<void>;
+    addChildNode(data: any): Promise<void>;
+    addPeerNode(data: any): Promise<void>;
+    updateNode(data: any): void;
+    setCurrentKey(key: any): void;
+    createNewChild(parentId: any): void;
+    removeNodeModal(node: any): Promise<void>;
+    removeNode(node: any): Promise<void>;
+    onConfirm(node: any, data: any): Promise<void>;
+    onCancel(node: any, data: any): void;
+    nodeClick(data: any, node: any, tree: any): void;
+    getCurrentNode(): any;
+    locateView(): Promise<void>;
+    scrollIntoView(expanded: any): Promise<void>;
+    inputKeyup(event: any, node: any, data: any): void;
+    inputBlur(event: any, node: any, data: any): void;
+    getCheckedKeys(): any;
+    setCheckedKeys(keys: any): void;
+    getCheckedNodes(): any;
+    setCheckedNodes(nodes: any): void;
+    getNode(data: any): any;
+    getRootNode(): any;
+    findTreeNode(data: any): import('@web-utils/core').TreeNode[];
+    registerNode(node: any): void;
+    reloadTree(): Promise<void>;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    /**
+     * 移除新增节点事件
+     */
+    'remove-new-node': null;
+    /**
+     * 节点加载完成事件
+     */
+    'node-loaded': null;
+    /**
+     * 根节点加载完成事件
+     */
+    'root-node-loaded': null;
+    /**
+     * 节点删除事件
+     */
+    'node-deleted': null;
+    /**
+     * 节点更新事件
+     */
+    'node-updated': null;
+    /**
+     * 节点添加事件
+     */
+    'node-added': null;
+    /**
+     * 节点点击事件
+     */
+    'on-node-click': null;
+    /**
+     * 添加根节点事件
+     */
+    'add-root-node': null;
+    /**
+     * 创建新节点事件
+     */
+    'create-new-node': null;
+}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    addRootNodeLabel: StringConstructor;
+    defaultExpandedKeys: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    newNodeBuilder: {
+        type: FunctionConstructor;
+        default: (name: string, parent: {
+            id: string | number;
+            [key: string]: any;
+        }) => {
+            name: string;
+            parentId: string | number;
+        };
+    };
+    contextMenu: BooleanConstructor;
+    lazy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    expandFirstNode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: BooleanConstructor;
+    saveApi: FunctionConstructor;
+    updateApi: FunctionConstructor;
+    deleteApi: FunctionConstructor;
+    fetchApi: FunctionConstructor;
+    customRootNode: (ObjectConstructor | FunctionConstructor)[];
+    rootNode: ObjectConstructor;
+    contextMenuIcon: BooleanConstructor;
+    contextMenuInline: BooleanConstructor;
+    treeProps: {
+        type: ObjectConstructor;
+        default: () => {
+            children: string;
+            label: string;
+            isLeaf: (data: any) => boolean;
+        };
+    };
+    menuLabel: {
+        type: ObjectConstructor;
+        default: () => {
+            appendPeer: string;
+            appendChild: string;
+            removeNode: string;
+            editNode: string;
+        };
+    };
+    icon: {
+        type: (BooleanConstructor | FunctionConstructor)[];
+        default: (data: any, node: any) => string;
+    };
+    confirmButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    addRootNodeButtonStyle: {
+        type: StringConstructor;
+        default: string;
+    };
+    reserveExpandKey: BooleanConstructor;
+    nodeKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    defaultExpandAll: BooleanConstructor;
+}>> & Readonly<{
+    "onRemove-new-node"?: ((...args: any[]) => any) | undefined;
+    "onNode-loaded"?: ((...args: any[]) => any) | undefined;
+    "onRoot-node-loaded"?: ((...args: any[]) => any) | undefined;
+    "onNode-deleted"?: ((...args: any[]) => any) | undefined;
+    "onNode-updated"?: ((...args: any[]) => any) | undefined;
+    "onNode-added"?: ((...args: any[]) => any) | undefined;
+    "onOn-node-click"?: ((...args: any[]) => any) | undefined;
+    "onAdd-root-node"?: ((...args: any[]) => any) | undefined;
+    "onCreate-new-node"?: ((...args: any[]) => any) | undefined;
+}>, {
+    label: string;
+    icon: boolean | Function;
+    defaultExpandedKeys: unknown[];
+    newNodeBuilder: Function;
+    contextMenu: boolean;
+    lazy: boolean;
+    expandFirstNode: boolean;
+    readonly: boolean;
+    contextMenuIcon: boolean;
+    contextMenuInline: boolean;
+    treeProps: Record<string, any>;
+    menuLabel: Record<string, any>;
+    confirmButton: boolean;
+    addRootNodeButtonStyle: string;
+    reserveExpandKey: boolean;
+    nodeKey: string;
+    defaultExpandAll: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;