@web-utils/component 4.0.16 → 5.0.0-beta01

package/form-view/index.mjs

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