@web-utils/form-ui 1.0.0-beta8 → 1.0.0-beta80

package/flow-viewer/index.mjs

@@ -0,0 +1,159 @@
+import { t as e } from "../chunks/B1MSrc6f.mjs";
+import t from "../easy-popup/index.mjs";
+import { createElementBlock as n, createTextVNode as r, createVNode as i, normalizeStyle as a, openBlock as o, renderSlot as s, toDisplayString as c, withCtx as l } from "vue";
+import u from "bpmn-js/lib/NavigatedViewer";
+import d from "diagram-js/lib/navigation/zoomscroll/ZoomScroll";
+import { append as f, attr as p, create as m } from "tiny-svg";
+import { query as h } from "min-dom";
+//#region src/components/bpmn-process-designer/FlowViewer.vue
+var g = d.prototype._handleWheel, _ = {
+	__init__: ["zoomScroll"],
+	zoomScroll: ["type", d]
+}, v = {
+	name: "FlowViewer",
+	props: {
+		xml: {
+			type: String,
+			required: !0
+		},
+		options: { type: Object },
+		activities: {
+			type: Array,
+			default: () => []
+		},
+		historicActivities: {
+			type: Array,
+			default: () => []
+		},
+		highlightColor: {
+			type: String,
+			default: "rgb(0 190 0 / 100%)"
+		},
+		ctrlKey: Boolean,
+		nodePopup: Boolean,
+		events: Array
+	},
+	emits: ["error", "shown"],
+	data() {
+		return { element: null };
+	},
+	watch: { xml(e) {
+		var t;
+		(t = this.bpmnViewer) == null || t.importXML(e);
+	} },
+	mounted() {
+		d.prototype._handleWheel = this.ctrlKey ? g : function(e) {
+			let { target: t, deltaMode: n, clientX: r, clientY: i, deltaX: a, deltaY: o } = e;
+			g.call(this, {
+				target: t,
+				deltaMode: n,
+				clientX: r,
+				clientY: i,
+				deltaX: a,
+				deltaY: o,
+				preventDefault() {
+					e.preventDefault();
+				},
+				ctrlKey: !0
+			});
+		}, this.bpmnViewer = new u({
+			...this.options,
+			container: this.$refs.container,
+			additionalModules: [_]
+		}), this.bpmnViewer.on("import.done", (e) => {
+			let t = e.error, n = e.warnings;
+			t ? this.$emit("error", t) : this.$emit("shown", n), this.canvas = this.bpmnViewer.get("canvas"), this.fitViewportCenter(), this.elementRegistry = this.bpmnViewer.get("elementRegistry");
+			let r = this.bpmnViewer.get("eventBus");
+			this.events && this.events.forEach((e) => {
+				r.on(e, (t) => {
+					this.$emit(e.replace(".", "-"), t.element);
+				});
+			}), this.nodePopup && r.on("element.mousemove", (e) => {
+				e.element.type === "bpmn:UserTask" && requestAnimationFrame(async () => {
+					this.element = e.element, await this.$nextTick(), this.$refs.popup.show(e.originalEvent);
+				});
+			}), this.nodePopup && r.on("element.out", () => {
+				this.$refs.popup.hide(), this.element = {};
+			}), this.highlightFlow(this.historicActivities, this.activities);
+			let i = m("marker");
+			p(i, {
+				id: "sequenceflow-arrow-green",
+				viewBox: "0 0 20 20",
+				refX: "11",
+				refY: "10",
+				markerWidth: "10",
+				markerHeight: "10",
+				orient: "auto"
+			});
+			let a = m("path");
+			p(a, {
+				d: "M 1 5 L 11 10 L 1 15 Z",
+				style: "stroke-linecap: round; stroke-linejoin: round; stroke: var(--highlight-color); stroke-width: 1px; fill: var(--highlight-color);"
+			}), f(i, a);
+			let o = m("marker");
+			p(o, {
+				id: "conditional-default-flow-marker-green",
+				viewBox: "0 0 20 20",
+				refX: "0",
+				refY: "10",
+				markerWidth: "10",
+				markerHeight: "10",
+				orient: "auto"
+			});
+			let s = m("path");
+			p(s, {
+				d: "M 6 4 L 10 16",
+				style: "stroke-linecap: round; stroke-linejoin: round; stroke: var(--highlight-color); stroke-width: 2px; fill: var(--highlight-color);"
+			}), f(o, s);
+			let c = h("defs", this.$el);
+			f(c, i), f(c, o);
+		}), this.bpmnViewer.importXML(this.xml), this.$watch(() => ({
+			activities: this.activities,
+			historicActivities: this.historicActivities
+		}), ({ activities: e, historicActivities: t }) => {
+			this.highlightFlow(t, e);
+		});
+	},
+	beforeUnmount() {
+		var e;
+		d.prototype._handleWheel = g, (e = this.bpmnViewer) == null || e.destroy();
+	},
+	methods: {
+		fitViewportCenter(e = "center") {
+			this.canvas.zoom("fit-viewport", e);
+		},
+		highlightFlow(e, t) {
+			this.elementRegistry.getAll().forEach((n) => {
+				[
+					"bpmn:StartEvent",
+					"bpmn:UserTask",
+					"bpmn:ExclusiveGateway",
+					"bpmn:ParallelGateway",
+					"bpmn:EndEvent"
+				].includes(n.type) && (e.includes(n.id) && !t.includes(n.id) ? this.canvas.addMarker(n, "highlight") : this.canvas.removeMarker(n, "highlight")), n.type === "bpmn:SequenceFlow" && (e.includes(n.id) ? this.canvas.addMarker(n, "highlight-line") : this.canvas.removeMarker(n, "highlight-line")), n.type === "bpmn:UserTask" && (t.includes(n.id) ? this.canvas.addMarker(n, "highlight-current") : this.canvas.removeMarker(n, "highlight-current"));
+			});
+		}
+	}
+};
+function y(e, u, d, f, p, m) {
+	let h = t;
+	return o(), n("div", {
+		ref: "container",
+		style: a({ "--highlight-color": d.highlightColor }),
+		class: "flow-viewer flow-background-image"
+	}, [i(h, {
+		ref: "popup",
+		"append-to-body": "",
+		"flex-column": "",
+		offset: {
+			x: 6,
+			y: 6
+		}
+	}, {
+		default: l(() => [s(e.$slots, "default", { element: p.element }, () => [r(c(p.element), 1)])]),
+		_: 3
+	}, 512)], 4);
+}
+var b = /* @__PURE__ */ e(v, [["render", y]]);
+//#endregion
+export { b as default };

package/flow-viewer/style.css

@@ -0,0 +1 @@
+.flow-viewer{background-color:#fff;width:100%;height:400px}.flow-viewer .highlight g.djs-visual rect,.flow-viewer .highlight g.djs-visual circle,.flow-viewer .highlight g.djs-visual polygon,.flow-viewer .highlight g.djs-visual path{stroke:var(--highlight-color)!important}.flow-viewer .highlight g.djs-visual polygon+path{fill:var(--highlight-color)!important}@keyframes dashoffset{to{stroke-dashoffset:100%}}.flow-viewer .highlight-current g.djs-visual rect{stroke-dasharray:8;animation:40s linear infinite forwards dashoffset;fill:#fbe9d1!important;stroke:#d67e7d!important}.flow-viewer .highlight-line g.djs-visual path{stroke:var(--highlight-color)!important;stroke-width:2px!important;marker-end:url(#sequenceflow-arrow-green)!important}

package/form-advice/index.mjs

@@ -1,28 +1,29 @@
-import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, inject as o, openBlock as s, renderList as c, toDisplayString as l, unref as u } from "vue";
+import { columnSizeContextKey as e, flowContextKey as t } from "../constants/index.mjs";
+import { Fragment as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, inject as c, openBlock as l, renderList as u, toDisplayString as d, unref as f } from "vue";
 //#region src/components/red-form/FormAdvice.vue
-var d = ["colspan"], f = ["colspan"], p = { style: { "text-align": "right" } }, m = { style: { "margin-left": "20px" } }, h = /* @__PURE__ */ Object.assign({ name: "FormAdvice" }, {
+var p = ["colspan"], m = ["colspan"], h = { style: { "text-align": "right" } }, g = { style: { "margin-left": "20px" } }, _ = /* @__PURE__ */ Object.assign({ name: "FormAdvice" }, {
 	__name: "FormAdvice",
 	props: {
 		valueColspan: Number,
 		labelColspan: Number
 	},
-	setup(h) {
-		let g = h, _ = o("columnSize", 0), v = o("flowContext", null), y = t(() => g.labelColspan && g.valueColspan || g.labelColspan && !g.valueColspan ? g.labelColspan : !g.labelColspan && g.valueColspan && _.value ? _.value - g.valueColspan : 0), b = t(() => g.labelColspan && g.valueColspan ? g.valueColspan : g.labelColspan && !g.valueColspan ? _.value ? _.value - g.labelColspan : 0 : !g.labelColspan && g.valueColspan ? g.valueColspan : _.value ? _.value - 1 : 0);
-		return (t, o) => {
-			var h;
-			return s(), r("tbody", null, [(s(!0), r(e, null, c((h = u(v)) == null ? void 0 : h.formComments, (t) => (s(), r(e, null, [t.comments.length ? (s(), r("tr", { key: t.id }, [i("td", {
+	setup(_) {
+		let v = _, y = c(e, 0), b = c(t, null), x = r(() => v.labelColspan && v.valueColspan || v.labelColspan && !v.valueColspan ? v.labelColspan : !v.labelColspan && v.valueColspan && y.value ? y.value - v.valueColspan : 0), S = r(() => v.labelColspan && v.valueColspan ? v.valueColspan : v.labelColspan && !v.valueColspan ? y.value ? y.value - v.labelColspan : 0 : !v.labelColspan && v.valueColspan ? v.valueColspan : y.value ? y.value - 1 : 0);
+		return (e, t) => {
+			var r;
+			return l(), a("tbody", null, [(l(!0), a(n, null, u((r = f(b)) == null ? void 0 : r.formComments, (e) => (l(), a(n, null, [e.comments.length ? (l(), a("tr", { key: e.id }, [o("td", {
 				class: "label",
 				style: {
 					height: "100px",
 					"line-height": "24px"
 				},
-				colspan: y.value
-			}, l(t.name), 9, d), i("td", {
+				colspan: f(x)
+			}, d(e.name), 9, p), o("td", {
 				class: "input",
-				colspan: b.value
-			}, [i("ul", null, [(s(!0), r(e, null, c(t.comments, (e) => (s(), r("li", { key: e.id }, [i("p", null, l(e.message), 1), i("p", p, [a(l(e.personalName) + " ", 1), i("span", m, l(e.time.substring(0, 10)), 1)])]))), 128))])], 8, f)])) : n("v-if", !0)], 64))), 256))]);
+				colspan: f(S)
+			}, [o("ul", null, [(l(!0), a(n, null, u(e.comments, (e) => (l(), a("li", { key: e.id }, [o("p", null, d(e.message), 1), o("p", h, [s(d(e.personalName) + " ", 1), o("span", g, d(e.time.substring(0, 10)), 1)])]))), 128))])], 8, m)])) : i("v-if", !0)], 64))), 256))]);
 		};
 	}
 });
 //#endregion
-export { h as default };
+export { _ as default };

package/form-button/index.d.ts

@@ -0,0 +1,123 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').DefineComponent<globalThis.ExtractPropTypes<{
+    stop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prevent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    message: StringConstructor;
+    confirmable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    confirmText: {
+        type: StringConstructor;
+        default: string;
+    };
+    confirmType: {
+        type: StringConstructor;
+        default: string;
+    };
+    confirmTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    loadable: BooleanConstructor;
+    loadingText: {
+        type: StringConstructor;
+        default: string;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: StringConstructor;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<{
+    stop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prevent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    message: StringConstructor;
+    confirmable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    confirmText: {
+        type: StringConstructor;
+        default: string;
+    };
+    confirmType: {
+        type: StringConstructor;
+        default: string;
+    };
+    confirmTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    loadable: BooleanConstructor;
+    loadingText: {
+        type: StringConstructor;
+        default: string;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: StringConstructor;
+}>> & Readonly<{}>, {
+    text: string;
+    stop: boolean;
+    prevent: boolean;
+    loadable: boolean;
+    loadingText: string;
+    confirmable: boolean;
+    confirmType: string;
+    confirmText: string;
+    confirmTitle: string;
+    tag: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any> | {
+    props: {
+        type: {
+            type: StringConstructor;
+            default: string;
+        };
+        size: StringConstructor;
+        icon: {
+            type: StringConstructor;
+            default: string;
+        };
+        nativeType: {
+            type: StringConstructor;
+            default: string;
+        };
+        loading: BooleanConstructor;
+        disabled: BooleanConstructor;
+        plain: BooleanConstructor;
+        autofocus: BooleanConstructor;
+        round: BooleanConstructor;
+        confirmable: BooleanConstructor;
+        text: {
+            type: StringConstructor;
+            default: string;
+        };
+        tag: {
+            type: StringConstructor;
+            default: string;
+        };
+    };
+}, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/form-button/index.mjs

@@ -0,0 +1,36 @@
+import e from "../confirmable/index.mjs";
+//#region src/components/button/FormButton.vue
+var t = {
+	name: "FormButton",
+	mixins: [e, { props: {
+		type: {
+			type: String,
+			default: "danger"
+		},
+		size: String,
+		icon: {
+			type: String,
+			default: ""
+		},
+		nativeType: {
+			type: String,
+			default: "button"
+		},
+		loading: Boolean,
+		disabled: Boolean,
+		plain: Boolean,
+		autofocus: Boolean,
+		round: Boolean,
+		confirmable: Boolean,
+		text: {
+			type: String,
+			default: ""
+		},
+		tag: {
+			type: String,
+			default: "AwesomeButton"
+		}
+	} }]
+};
+//#endregion
+export { t as default };

package/form-card/index.d.ts

@@ -0,0 +1,14 @@
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+type __VLS_TemplateResult = {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};

package/form-card/index.mjs

@@ -0,0 +1,18 @@
+import { formViewContextKey as e } from "../constants/index.mjs";
+import { createElementBlock as t, createElementVNode as n, inject as r, normalizeStyle as i, openBlock as a, renderSlot as o, unref as s } from "vue";
+//#region src/components/form/FormCard.vue
+var c = { class: "form-content" }, l = /* @__PURE__ */ Object.assign({ name: "FormCard" }, {
+	__name: "FormCard",
+	setup(l) {
+		let u = r(e, null);
+		return (e, r) => {
+			var l;
+			return a(), t("div", {
+				class: "form-card",
+				style: i((l = s(u)) == null ? void 0 : l.formCardStyle)
+			}, [n("div", c, [o(e.$slots, "default")])], 4);
+		};
+	}
+});
+//#endregion
+export { l as default };