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

package/form-view/index.d.ts

@@ -1,2 +1,227 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import('vue').DefineComponent<globalThis.ExtractPropTypes<{
+    notForm: BooleanConstructor;
+    loading: BooleanConstructor;
+    unLimit: BooleanConstructor;
+    formWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    toolbarAttrs: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+    toolbarListeners: {
+        type: ObjectConstructor;
+    };
+    contentClass: {
+        type: StringConstructor;
+    };
+    className: {
+        type: StringConstructor;
+    };
+    title: {
+        type: StringConstructor;
+    };
+    showToolbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    formNav: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {
+    groups: never[];
+    activeIndex: number;
+    tryByClick: boolean;
+    showNav: boolean;
+}, {
+    isFormLoading(): boolean;
+    toolbarProps(): any;
+    toolbarButtons(): any;
+    footerBarButtons(): any;
+}, {
+    addGroup(group: any): void;
+    removeGroup(tab: any): void;
+    getToolbarSlotKeys(): string[];
+    getFooterSlotKeys(): string[];
+    getFooterSlotKey(key: any): any;
+    onFormResize({ width }: {
+        width: any;
+    }): void;
+    onEdit(): void;
+    navItemClick(item: any, index: any): Promise<void>;
+    activeFormItemGroup(tab: any, index: any): void;
+    tryActive(): void;
+    onFormScroll(): void;
+    scrollTo(top: any, left: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<{
+    notForm: BooleanConstructor;
+    loading: BooleanConstructor;
+    unLimit: BooleanConstructor;
+    formWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    toolbarAttrs: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+    toolbarListeners: {
+        type: ObjectConstructor;
+    };
+    contentClass: {
+        type: StringConstructor;
+    };
+    className: {
+        type: StringConstructor;
+    };
+    title: {
+        type: StringConstructor;
+    };
+    showToolbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    formNav: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    loading: boolean;
+    notForm: boolean;
+    unLimit: boolean;
+    formWidth: string;
+    toolbarAttrs: Record<string, any>;
+    showToolbar: boolean;
+    formNav: boolean;
+}, {}, {}, {}, string, () => {
+    formView: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<globalThis.ExtractPropTypes<{
+        notForm: BooleanConstructor;
+        loading: BooleanConstructor;
+        unLimit: BooleanConstructor;
+        formWidth: {
+            type: StringConstructor;
+            default: string;
+        };
+        toolbarAttrs: {
+            type: ObjectConstructor;
+            default: () => void;
+        };
+        toolbarListeners: {
+            type: ObjectConstructor;
+        };
+        contentClass: {
+            type: StringConstructor;
+        };
+        className: {
+            type: StringConstructor;
+        };
+        title: {
+            type: StringConstructor;
+        };
+        showToolbar: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        formNav: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{}>, {}, {
+        groups: never[];
+        activeIndex: number;
+        tryByClick: boolean;
+        showNav: boolean;
+    }, {
+        isFormLoading(): boolean;
+        toolbarProps(): any;
+        toolbarButtons(): any;
+        footerBarButtons(): any;
+    }, {
+        addGroup(group: any): void;
+        removeGroup(tab: any): void;
+        getToolbarSlotKeys(): string[];
+        getFooterSlotKeys(): string[];
+        getFooterSlotKey(key: any): any;
+        onFormResize({ width }: {
+            width: any;
+        }): void;
+        onEdit(): void;
+        navItemClick(item: any, index: any): Promise<void>;
+        activeFormItemGroup(tab: any, index: any): void;
+        tryActive(): void;
+        onFormScroll(): void;
+        scrollTo(top: any, left: any): void;
+    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, {}, {}, false, {
+        flowContext: {
+            default: {};
+        };
+    }, {}, {}, {}, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<globalThis.ExtractPropTypes<{
+        notForm: BooleanConstructor;
+        loading: BooleanConstructor;
+        unLimit: BooleanConstructor;
+        formWidth: {
+            type: StringConstructor;
+            default: string;
+        };
+        toolbarAttrs: {
+            type: ObjectConstructor;
+            default: () => void;
+        };
+        toolbarListeners: {
+            type: ObjectConstructor;
+        };
+        contentClass: {
+            type: StringConstructor;
+        };
+        className: {
+            type: StringConstructor;
+        };
+        title: {
+            type: StringConstructor;
+        };
+        showToolbar: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        formNav: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{}>, {}, {
+        groups: never[];
+        activeIndex: number;
+        tryByClick: boolean;
+        showNav: boolean;
+    }, {
+        isFormLoading(): boolean;
+        toolbarProps(): any;
+        toolbarButtons(): any;
+        footerBarButtons(): any;
+    }, {
+        addGroup(group: any): void;
+        removeGroup(tab: any): void;
+        getToolbarSlotKeys(): string[];
+        getFooterSlotKeys(): string[];
+        getFooterSlotKey(key: any): any;
+        onFormResize({ width }: {
+            width: any;
+        }): void;
+        onEdit(): void;
+        navItemClick(item: any, index: any): Promise<void>;
+        activeFormItemGroup(tab: any, index: any): void;
+        tryActive(): void;
+        onFormScroll(): void;
+        scrollTo(top: any, left: any): void;
+    }, {}>;
+}, true, {}, any>;

package/form-view/index.mjs

@@ -1,9 +1,284 @@
+import { t as e } from "../chunks/B1MSrc6f.mjs";
+import t from "../element-resize-observer/index.mjs";
+import n from "../empty-view/index.mjs";
+import { t as r } from "../chunks/DPgFZVE12.mjs";
+import i from "../loading-view/index.mjs";
+import { t as a } from "../chunks/3Zmtl1F82.mjs";
+import { Fragment as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createSlots as d, createVNode as f, mergeProps as p, normalizeClass as m, normalizeStyle as h, openBlock as g, renderList as _, renderSlot as v, resolveComponent as y, toDisplayString as b, toHandlers as x, vShow as S, withCtx as C, withDirectives as w } from "vue";
+import { animate as T, hasOwn as E, isInContainer as D, toStringArray as O } from "@web-utils/core";
+import { merge as k } from "@web-utils/integrations/lodash";
+import "./style.css";
 //#region src/components/form/FormView.vue
-var e = /* @__PURE__ */ Object.assign({ name: "FormView" }, {
-	__name: "FormView",
-	setup(e) {
-		return (e, t) => null;
+var A = [
+	"back",
+	"create",
+	"save",
+	"withdraw",
+	"edit",
+	"submit",
+	"publish",
+	"agree",
+	"disagree",
+	"reject",
+	"finish",
+	"cancel",
+	"enable",
+	"exp",
+	"imp",
+	"del",
+	"disabled",
+	"reload",
+	"slot"
+], j = A.map((e) => `${e}-down`), M = [
+	"back",
+	"withdraw",
+	"edit"
+], N = [
+	"save",
+	"submit",
+	"",
+	"publish",
+	"agree",
+	"disagree",
+	"reject",
+	"finish",
+	"cancel"
+], P = (e, t) => {
+	if (e.classList.contains(t)) return e;
+	let n = e.parentNode;
+	for (; n && !n.classList.contains(t);) n = n.parentNode;
+	return n.classList.contains(t) ? n : null;
+}, F = {
+	name: "FormView",
+	inject: { flowContext: { default: {} } },
+	provide() {
+		return { formView: this };
+	},
+	props: {
+		notForm: Boolean,
+		loading: Boolean,
+		unLimit: Boolean,
+		formWidth: {
+			type: String,
+			default: "75%"
+		},
+		toolbarAttrs: {
+			type: Object,
+			default: () => {}
+		},
+		toolbarListeners: { type: Object },
+		contentClass: { type: String },
+		className: { type: String },
+		title: { type: String },
+		showToolbar: {
+			type: Boolean,
+			default: !0
+		},
+		formNav: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	data() {
+		return {
+			groups: [],
+			activeIndex: -1,
+			tryByClick: !1,
+			showNav: !1
+		};
+	},
+	computed: {
+		isFormLoading() {
+			return this.loading || E(this.$parent, "isFormLoaded") ? !this.$parent.isFormLoaded : !1;
+		},
+		toolbarProps() {
+			var e;
+			let t = {}, n = ((e = this.toolbarAttrs) == null ? void 0 : e.buttons) || this.$parent.buttons, r = k({}, this.toolbarAttrs, t);
+			return r.buttons = n || ["back"], r.buttons = O(r.buttons), r;
+		},
+		toolbarButtons() {
+			return this.toolbarProps.buttons.filter((e) => !N.includes(e) && e.indexOf(":down") < 0).map((e) => e.replace(":up", ""));
+		},
+		footerBarButtons() {
+			let e = this.toolbarProps.buttons.filter((e) => !M.includes(e) && (N.includes(e) || e.indexOf(":down") > -1)).map((e) => e.replace(":down", ""));
+			return e = e || [], this.$parent.isEnabled && !e.includes("cancel") && e.push("cancel"), e;
+		}
+	},
+	created() {
+		this.onFormResize({ width: window.document.body.clientWidth });
+	},
+	async activated() {
+		this.$refs.formScroller && (await this.$nextTick(), this.scrollTo(this.formScrollTop, this.formScrollLeft));
+	},
+	methods: {
+		addGroup(e) {
+			e && (this.activeIndex === -1 && (this.activeIndex = 0), this.groups.push(e), this.groups = this.groups.sort((e, t) => {
+				let n = P(e.$el, "form-card"), r = P(t.$el, "form-card");
+				if (n === r) return [].indexOf.call(e.$el.parentNode.children, e.$el) - [].indexOf.call(t.$el.parentNode.children, t.$el);
+				{
+					let e = P(n, "form-scroller");
+					return [].indexOf.call(e.children, n) - [].indexOf.call(e.children, r);
+				}
+			}), e.active && (this.activeIndex = this.groups.indexOf(e), this.navItemClick(e, this.activeIndex)));
+		},
+		removeGroup(e) {
+			if (e) {
+				let t = this.groups.indexOf(e);
+				this.groups.splice(t, 1), this.activeIndex > this.groups.length - 1 && (this.activeIndex = 0);
+			}
+		},
+		getToolbarSlotKeys() {
+			return Object.keys(this.$slots).filter((e) => A.includes(e));
+		},
+		getFooterSlotKeys() {
+			return Object.keys(this.$slots).filter((e) => j.includes(e));
+		},
+		getFooterSlotKey(e) {
+			return e.replace("-down", "");
+		},
+		onFormResize({ width: e }) {
+			this.showNav = e > 1500;
+		},
+		onEdit() {
+			!this.toolbarListeners.edit && E(this.$parent, "disabled") && (this.$parent.disabled = !1);
+		},
+		async navItemClick(e, t) {
+			this.showNav && (await this.$nextTick(), this.activeFormItemGroup(e, t), e.expand || e.open());
+		},
+		activeFormItemGroup(e, t) {
+			this.$refs.formScroller.scrollTop = e.$el.offsetTop - 10, T(e.$el, "breathe-indicator-animation"), this.tryByClick = !0, this.activeIndex = t;
+		},
+		tryActive() {
+			if (this.showNav) {
+				for (let e = 0; e < this.groups.length; e++) if (D(this.groups[e].$el, this.$refs.formScroller, { bottomOffset: 10 })) {
+					this.activeIndex = e;
+					break;
+				}
+			}
+		},
+		onFormScroll() {
+			this.formScrollTop = this.$refs.formScroller.scrollTop, this.formScrollLeft = this.$refs.formScroller.scrollLeft, !this.tryByClick && this.groups.length && window.requestAnimationFrame(this.tryActive), this.tryByClick = !1;
+		},
+		scrollTo(e, t) {
+			e && (this.$refs.formScroller.scrollTop = e), t && (this.$refs.formScroller.scrollLeft = t);
+		}
 	}
-});
+}, I = {
+	key: 0,
+	class: "form-view-toolbar"
+}, L = { class: "form-scroller-wrapper" }, R = {
+	key: 0,
+	class: "form-view-title"
+}, z = { class: "form-content" }, B = {
+	key: 0,
+	class: "form-view-title"
+}, V = { class: "form-content" }, H = {
+	key: 1,
+	class: "form-nav"
+}, U = { class: "form-nav-list" }, W = ["onClick"];
+function G(e, T, E, D, O, k) {
+	let A = a, j = n, M = y("FlowLog"), N = r, P = t, F = i;
+	return g(), l("div", { class: m(["form-view", E.className]) }, [
+		c(" 顶部工具栏 "),
+		E.showToolbar ? w((g(), l("div", I, [v(e.$slots, "form-view-toolbar", {}, () => [f(A, p({
+			...k.toolbarProps,
+			buttons: k.toolbarButtons
+		}, { onEdit: k.onEdit }, x(E.toolbarListeners)), d({
+			default: C(({ buttons: t }) => [v(e.$slots, "toolbar-button", { buttons: t })]),
+			"toolbar-right": C(() => [v(e.$slots, "toolbar-right")]),
+			_: 2
+		}, [_(k.getToolbarSlotKeys(), (t) => ({
+			name: t,
+			fn: C(() => [v(e.$slots, t)])
+		}))]), 1040, ["onEdit"])])], 512)), [[S, !k.isFormLoading]]) : c("v-if", !0),
+		c(" 内容 "),
+		w(u("div", L, [u("div", {
+			ref: "formScroller",
+			class: m(["form-scroller", E.contentClass]),
+			onScroll: T[0] || (T[0] = (...e) => k.onFormScroll && k.onFormScroll(...e))
+		}, [
+			c(" 非表单 "),
+			E.notForm ? (g(), l("div", {
+				key: 0,
+				style: h({ width: E.formWidth }),
+				class: "not-form"
+			}, [
+				E.title ? (g(), l("div", R, b(E.title), 1)) : c("v-if", !0),
+				c(" 表单内容 "),
+				v(e.$slots, "default", {}, () => [f(j, { "empty-tips": "请添加表单内容" })]),
+				c(" 底部工具栏 "),
+				k.footerBarButtons.length ? (g(), s(A, p({ key: 1 }, {
+					...k.toolbarProps,
+					buttons: k.footerBarButtons
+				}, { footer: "" }, x(E.toolbarListeners)), d({
+					default: C(({ buttons: t, footer: n }) => [v(e.$slots, "footer-button", {
+						buttons: t,
+						footer: n
+					})]),
+					_: 2
+				}, [_(k.getFooterSlotKeys(), (t) => ({
+					name: k.getFooterSlotKey(t),
+					fn: C(() => [v(e.$slots, t)])
+				}))]), 1040)) : c("v-if", !0),
+				c(" 表单底部 "),
+				e.$slots["form-bottom"] ? v(e.$slots, "form-bottom", { key: 2 }) : c("v-if", !0)
+			], 4)) : (g(), l(o, { key: 1 }, [c(" 表单 "), u("div", {
+				class: m(["form-card", { "un-limit": E.unLimit }]),
+				style: h({ width: `calc(${E.formWidth} + 40px)` })
+			}, [u("div", z, [
+				c(" 表单内容 "),
+				E.title ? (g(), l("div", B, b(E.title), 1)) : c("v-if", !0),
+				v(e.$slots, "default", {}, () => [f(j, { "empty-tips": "请添加表单内容" })]),
+				c(" 底部工具栏 "),
+				k.footerBarButtons.length ? (g(), s(A, p({ key: 1 }, {
+					...k.toolbarProps,
+					buttons: k.footerBarButtons
+				}, { footer: "" }, x(E.toolbarListeners)), d({
+					default: C(({ buttons: t, footer: n }) => [v(e.$slots, "footer-button", {
+						buttons: t,
+						footer: n
+					})]),
+					_: 2
+				}, [_(k.getFooterSlotKeys(), (t) => ({
+					name: k.getFooterSlotKey(t),
+					fn: C(() => [v(e.$slots, t)])
+				}))]), 1040)) : c("v-if", !0)
+			])], 6)], 2112)),
+			e.$slots["form-bottom"] || e.$parent.$options.flowForm && k.flowContext.logs.length ? (g(), l("div", {
+				key: 2,
+				class: m(["form-card", { "un-limit": E.unLimit }]),
+				style: h([{ width: `calc(${E.formWidth} + 40px)` }, { "min-height": "0" }])
+			}, [u("div", V, [
+				e.$parent.$options.flowForm && k.flowContext.logs.length ? (g(), s(N, {
+					key: 0,
+					"block-title": "流程日志"
+				}, {
+					default: C(() => [f(M, {
+						class: "flow-log",
+						fetch: !1,
+						"show-title": !1,
+						"business-key": e.$parent.bizKey
+					}, null, 8, ["business-key"])]),
+					_: 1
+				})) : c("v-if", !0),
+				c(" 表单底部 "),
+				v(e.$slots, "form-bottom")
+			])], 6)) : c("v-if", !0)
+		], 34), f(P, { onNotify: k.onFormResize }, null, 8, ["onNotify"])], 512), [[S, !k.isFormLoading]]),
+		c(" 表单导航 "),
+		E.formNav && !k.isFormLoading && O.showNav && O.groups.length ? (g(), l("div", H, [T[1] || (T[1] = u("div", { class: "form-nav-header" }, "表单导航", -1)), u("ul", U, [(g(!0), l(o, null, _(O.groups, (e, t) => (g(), l("li", {
+			key: e.blockTitle,
+			class: m(["form-nav-item", { active: O.activeIndex === t }]),
+			onClick: (n) => k.navItemClick(e, t)
+		}, b(e.blockTitle), 11, W))), 128))])])) : c("v-if", !0),
+		c(" 加载提示 "),
+		k.isFormLoading ? (g(), s(F, {
+			key: 2,
+			"icon-size": "34px",
+			"font-size": "16px"
+		})) : c("v-if", !0)
+	], 2);
+}
+var K = /* @__PURE__ */ e(F, [["render", G]]);
 //#endregion
-export { e as default };
+export { K as default };

package/form-view/style.css

@@ -0,0 +1 @@
+.form-view{flex-direction:column;height:100%;display:flex}.form-view .form-scroller-wrapper{flex:1;position:relative}.form-view .not-form{margin:0 auto}.form-view .form-view-toolbar{overflow:hidden}.form-view .form-scroller{flex:1;position:absolute;top:0;bottom:0;left:0;right:0;overflow:auto}.form-view .form-scroller .el-row{position:static}.form-view .form-content .el-form .el-row{padding-right:2rem}.form-view .form-content .el-form .el-row .el-row{padding-right:0}.form-view .form-card{color:#303133;background-color:#fff;border:1px solid #ebeef5;border-radius:4px;max-width:1000px;margin:14px auto;padding:20px;transition:all .3s;overflow:hidden;box-shadow:0 2px 12px #0000001a}.form-view .form-card.un-limit{max-width:100%}.form-view .form-nav{background-color:#fff;position:absolute;top:55px;left:20px;box-shadow:0 2px 12px #0000001a}.form-view .form-nav-list{min-width:180px;padding:10px 20px}.form-view .form-nav-header{color:#e34e55;background-color:#f3f5fb;padding:5px 20px;font-size:15px;font-weight:700;position:relative}.form-view .form-nav-item{cursor:pointer;padding:5px 0;font-family:element-icons,serif;font-size:14px;list-style:none;position:relative}.form-view .form-nav-item.active,.form-view .form-nav-item:hover{color:#e34e55;font-weight:700}.form-view .form-nav-item.active:before{content:"";position:absolute;left:-14px}.form-view .form-view-title{color:#333;text-align:center;background-color:#fff;width:100%;height:36px;margin-bottom:10px;font-size:22px;line-height:36px}.form-view .tip{background-color:#ecf8ff;border-left:5px solid #50bfff;border-radius:4px;margin:20px 0;padding:8px 16px}.form-view .tip p{color:#5e6d82;font-size:14px;line-height:1.5em}.form-view .tip.danger{background-color:#fde2e2;border-left-color:#f56c6c}.form-view .tip.danger p{color:#564646}.form-view .tip.warning{background-color:#f7efe2;border-left-color:#e6a23c}.form-view .tip.warning p{color:#5d564b}.form-view .select-num{color:#898989;font-size:12px}.form-view .select-num .num{font-family:impact,Constantia,Georgia,serif;font-size:19px}.form-view .el-table .el-table__header th{color:#595959;background:#fff;font-weight:400}.form-view .el-table td{padding:4px 0}.form-view .el-table td .cell .el-input .el-input__inner{padding-left:4px}.form-view .el-table td .cell .el-input.el-input--prefix .el-input__inner{padding-left:30px}.form-view .el-table td .cell .el-input.is-disabled .el-input__suffix{display:none}.form-view .el-table td .cell .el-input.is-disabled .el-input__inner{white-space:normal;word-break:break-word;background:0 0;border:0;padding:0 0 0 4px;line-height:1.6}@keyframes breathe-indicator{0%{box-shadow:0 0 0 0 var(--color-primary,red)}to{box-shadow:0 0 4px 1px var(--color-primary,red)}}.form-view .breathe-indicator-animation{animation-name:breathe-indicator;animation-duration:.3s;animation-timing-function:ease-in-out;animation-iteration-count:4;animation-direction:alternate;animation-delay:.1s}@media screen and (min-width:1700px){.form-view.form-view__lg .form-card{position:relative;left:60px}}