@web-utils/component 2.0.9 → 2.0.11

package/dist/components/form-view/index.js

@@ -1,200 +1,211 @@
-import { hasOwn as a, merge as m, toStringArray as h, animate as p, isInContainer as b } from "@web-utils/core";
-import { n as v } from "../../chunks/5d4282fb.js";
-var _ = function() {
-  var t = this, e = t.$createElement, o = t._self._c || e;
-  return o("div", {
-    class: ["form-view", t.className]
-  }, [t.showToolbar ? o("div", {
+import { hasOwn, merge, toStringArray, animate, isInContainer } from "@web-utils/core";
+import { n as normalizeComponent } from "../../chunks/3d28cc08.js";
+var render = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    class: ["form-view", _vm.className]
+  }, [_vm.showToolbar ? _c("div", {
     directives: [{
       name: "show",
       rawName: "v-show",
-      value: !t.isFormLoading,
+      value: !_vm.isFormLoading,
       expression: "!isFormLoading"
     }],
     staticClass: "form-view-toolbar"
-  }, [t._t("form-view-toolbar", function() {
-    return [o("Toolbar", t._g(t._b({
+  }, [_vm._t("form-view-toolbar", function() {
+    return [_c("Toolbar", _vm._g(_vm._b({
       on: {
-        edit: t.onEdit
+        "edit": _vm.onEdit
       },
-      scopedSlots: t._u([{
+      scopedSlots: _vm._u([{
         key: "default",
-        fn: function(r) {
-          var s = r.buttons;
-          return [t._t("toolbar-button", null, {
-            buttons: s
+        fn: function(_ref) {
+          var buttons = _ref.buttons;
+          return [_vm._t("toolbar-button", null, {
+            "buttons": buttons
           })];
         }
-      }, t._l(t.getToolbarSlotKeys(), function(r) {
+      }, _vm._l(_vm.getToolbarSlotKeys(), function(item) {
         return {
-          key: r,
+          key: item,
           fn: function() {
-            return [t._t(r)];
+            return [_vm._t(item)];
           },
-          proxy: !0
+          proxy: true
         };
       }), {
         key: "toolbar-right",
         fn: function() {
-          return [t._t("toolbar-right")];
+          return [_vm._t("toolbar-right")];
         },
-        proxy: !0
-      }], null, !0)
-    }, "Toolbar", Object.assign({}, t.toolbarProps, {
-      buttons: t.toolbarButtons
-    }), !1), t.toolbarListeners))];
-  })], 2) : t._e(), o("div", {
+        proxy: true
+      }], null, true)
+    }, "Toolbar", Object.assign({}, _vm.toolbarProps, {
+      buttons: _vm.toolbarButtons
+    }), false), _vm.toolbarListeners))];
+  })], 2) : _vm._e(), _c("div", {
     directives: [{
       name: "show",
       rawName: "v-show",
-      value: !t.isFormLoading,
+      value: !_vm.isFormLoading,
       expression: "!isFormLoading"
     }],
     staticClass: "form-scroller-wrapper"
-  }, [o("div", {
+  }, [_c("div", {
     ref: "formScroller",
-    class: ["form-scroller", "absolute-box", t.contentClass],
+    class: ["form-scroller", "absolute-box", _vm.contentClass],
     on: {
-      scroll: t.onFormScroll
+      "scroll": _vm.onFormScroll
     }
-  }, [t.notForm ? o("div", {
+  }, [_vm.notForm ? _c("div", {
     staticClass: "not-form",
     style: {
-      width: t.formWidth
+      width: _vm.formWidth
     }
-  }, [t.title ? o("div", {
+  }, [_vm.title ? _c("div", {
     staticClass: "form-view-title"
-  }, [t._v(" " + t._s(t.title) + " ")]) : t._e(), t._t("default", function() {
-    return [o("EmptyView", {
+  }, [_vm._v(" " + _vm._s(_vm.title) + " ")]) : _vm._e(), _vm._t("default", function() {
+    return [_c("EmptyView", {
       attrs: {
         "empty-tips": "请添加表单内容"
       }
     })];
-  }), t.footerBarButtons.length ? o("Toolbar", t._g(t._b({
+  }), _vm.footerBarButtons.length ? _c("Toolbar", _vm._g(_vm._b({
     attrs: {
-      footer: ""
+      "footer": ""
     },
-    scopedSlots: t._u([{
+    scopedSlots: _vm._u([{
       key: "default",
-      fn: function(r) {
-        var s = r.buttons, n = r.footer;
-        return [t._t("footer-button", null, {
-          buttons: s,
-          footer: n
+      fn: function(_ref2) {
+        var buttons = _ref2.buttons, footer = _ref2.footer;
+        return [_vm._t("footer-button", null, {
+          "buttons": buttons,
+          "footer": footer
         })];
       }
-    }, t._l(t.getFooterSlotKeys(), function(r) {
+    }, _vm._l(_vm.getFooterSlotKeys(), function(item) {
       return {
-        key: t.getFooterSlotKey(r),
+        key: _vm.getFooterSlotKey(item),
         fn: function() {
-          return [t._t(r)];
+          return [_vm._t(item)];
         },
-        proxy: !0
+        proxy: true
       };
-    })], null, !0)
-  }, "Toolbar", Object.assign({}, t.toolbarProps, {
-    buttons: t.footerBarButtons
-  }), !1), t.toolbarListeners)) : t._e(), t.$scopedSlots["form-bottom"] ? t._t("form-bottom") : t._e()], 2) : o("div", {
+    })], null, true)
+  }, "Toolbar", Object.assign({}, _vm.toolbarProps, {
+    buttons: _vm.footerBarButtons
+  }), false), _vm.toolbarListeners)) : _vm._e(), _vm.$scopedSlots["form-bottom"] ? _vm._t("form-bottom") : _vm._e()], 2) : _c("div", {
     class: ["form-card", {
-      "un-limit": t.unLimit
+      "un-limit": _vm.unLimit
     }],
     style: {
-      width: `calc(${t.formWidth} + 40px)`
+      width: `calc(${_vm.formWidth} + 40px)`
     }
-  }, [o("div", {
+  }, [_c("div", {
     staticClass: "form-content"
-  }, [t.title ? o("div", {
+  }, [_vm.title ? _c("div", {
     staticClass: "form-view-title"
-  }, [t._v(" " + t._s(t.title) + " ")]) : t._e(), t._t("default", function() {
-    return [o("EmptyView", {
+  }, [_vm._v(" " + _vm._s(_vm.title) + " ")]) : _vm._e(), _vm._t("default", function() {
+    return [_c("EmptyView", {
       attrs: {
         "empty-tips": "请添加表单内容"
       }
     })];
-  }), t.footerBarButtons.length ? o("Toolbar", t._g(t._b({
+  }), _vm.footerBarButtons.length ? _c("Toolbar", _vm._g(_vm._b({
     attrs: {
-      footer: ""
+      "footer": ""
     },
-    scopedSlots: t._u([{
+    scopedSlots: _vm._u([{
       key: "default",
-      fn: function(r) {
-        var s = r.buttons, n = r.footer;
-        return [t._t("footer-button", null, {
-          buttons: s,
-          footer: n
+      fn: function(_ref3) {
+        var buttons = _ref3.buttons, footer = _ref3.footer;
+        return [_vm._t("footer-button", null, {
+          "buttons": buttons,
+          "footer": footer
         })];
       }
-    }, t._l(t.getFooterSlotKeys(), function(r) {
+    }, _vm._l(_vm.getFooterSlotKeys(), function(item) {
       return {
-        key: t.getFooterSlotKey(r),
+        key: _vm.getFooterSlotKey(item),
         fn: function() {
-          return [t._t(r)];
+          return [_vm._t(item)];
         },
-        proxy: !0
+        proxy: true
       };
-    })], null, !0)
-  }, "Toolbar", Object.assign({}, t.toolbarProps, {
-    buttons: t.footerBarButtons
-  }), !1), t.toolbarListeners)) : t._e()], 2)]), t.$scopedSlots["form-bottom"] || t.$parent.$options.flowForm && t.flowContext.logs.length ? o("div", {
+    })], null, true)
+  }, "Toolbar", Object.assign({}, _vm.toolbarProps, {
+    buttons: _vm.footerBarButtons
+  }), false), _vm.toolbarListeners)) : _vm._e()], 2)]), _vm.$scopedSlots["form-bottom"] || _vm.$parent.$options.flowForm && _vm.flowContext.logs.length ? _c("div", {
     class: ["form-card", {
-      "un-limit": t.unLimit
+      "un-limit": _vm.unLimit
     }],
     staticStyle: {
       "min-height": "0"
     },
     style: {
-      width: `calc(${t.formWidth} + 40px)`
+      width: `calc(${_vm.formWidth} + 40px)`
     }
-  }, [o("div", {
+  }, [_c("div", {
     staticClass: "form-content"
-  }, [t.$parent.$options.flowForm && t.flowContext.logs.length ? o("FormItemGroup", {
+  }, [_vm.$parent.$options.flowForm && _vm.flowContext.logs.length ? _c("FormItemGroup", {
     attrs: {
       "block-title": "流程日志"
     }
-  }, [o("FlowLog", {
+  }, [_c("FlowLog", {
     staticClass: "flow-log",
     attrs: {
-      fetch: !1,
-      "show-title": !1,
-      "business-key": t.$parent.bizKey
+      "fetch": false,
+      "show-title": false,
+      "business-key": _vm.$parent.bizKey
     }
-  })], 1) : t._e(), t._t("form-bottom")], 2)]) : t._e()]), o("ResizeObserver", {
+  })], 1) : _vm._e(), _vm._t("form-bottom")], 2)]) : _vm._e()]), _c("ResizeObserver", {
     on: {
-      notify: t.onFormResize
+      "notify": _vm.onFormResize
     }
-  })], 1), t.formNav && !t.isFormLoading && t.showNav && t.groups.length ? o("div", {
+  })], 1), _vm.formNav && !_vm.isFormLoading && _vm.showNav && _vm.groups.length ? _c("div", {
     staticClass: "form-nav"
-  }, [o("div", {
+  }, [_c("div", {
     staticClass: "form-nav-header"
-  }, [t._v(" 表单导航 ")]), o("ul", {
+  }, [_vm._v(" 表单导航 ")]), _c("ul", {
     staticClass: "form-nav-list"
-  }, t._l(t.groups, function(r, s) {
-    return o("li", {
-      key: r.blockTitle,
+  }, _vm._l(_vm.groups, function(item, index) {
+    return _c("li", {
+      key: item.blockTitle,
       class: ["form-nav-item", {
-        active: t.activeIndex === s
+        active: _vm.activeIndex === index
       }],
       on: {
-        click: function(n) {
-          return t.navItemClick(r, s);
+        "click": function($event) {
+          return _vm.navItemClick(item, index);
         }
       }
-    }, [t._v(" " + t._s(r.blockTitle) + " ")]);
-  }), 0)]) : t._e(), t.isFormLoading ? o("LoadingView", {
+    }, [_vm._v(" " + _vm._s(item.blockTitle) + " ")]);
+  }), 0)]) : _vm._e(), _vm.isFormLoading ? _c("LoadingView", {
     attrs: {
       "icon-size": "34px",
       "font-size": "16px"
     }
-  }) : t._e()], 1);
-}, g = [];
-const u = ["back", "create", "save", "withdraw", "edit", "submit", "publish", "agree", "disagree", "reject", "finish", "cancel", "enable", "exp", "imp", "del", "disabled", "reload", "slot"], y = u.map((t) => `${t}-down`), w = ["back", "withdraw", "edit"], c = ["save", "submit", "", "publish", "agree", "disagree", "reject", "finish", "cancel"], l = (t, e) => {
-  if (t.classList.contains(e))
-    return t;
-  let o = t.parentNode;
-  for (; o && !o.classList.contains(e); )
-    o = o.parentNode;
-  return o.classList.contains(e) ? o : null;
-}, x = {
+  }) : _vm._e()], 1);
+};
+var staticRenderFns = [];
+const FormView_vue_vue_type_style_index_0_lang = "";
+const builtInButtons = ["back", "create", "save", "withdraw", "edit", "submit", "publish", "agree", "disagree", "reject", "finish", "cancel", "enable", "exp", "imp", "del", "disabled", "reload", "slot"];
+const footerButtons = builtInButtons.map((value) => `${value}-down`);
+const topButtons = ["back", "withdraw", "edit"];
+const bottomButtons = ["save", "submit", "", "publish", "agree", "disagree", "reject", "finish", "cancel"];
+const findParent = (el, selector) => {
+  if (el.classList.contains(selector)) {
+    return el;
+  }
+  let parent = el.parentNode;
+  while (parent && !parent.classList.contains(selector)) {
+    parent = parent.parentNode;
+  }
+  return parent.classList.contains(selector) ? parent : null;
+};
+const __vue2_script = {
   name: "FormView",
   inject: {
     flowContext: {
@@ -228,116 +239,172 @@ const u = ["back", "create", "save", "withdraw", "edit", "submit", "publish", "a
     },
     showToolbar: {
       type: Boolean,
-      default: !0
+      default: true
     },
     formNav: {
       type: Boolean,
-      default: !0
+      default: true
     }
   },
   data() {
     return {
       groups: [],
       activeIndex: -1,
-      tryByClick: !1,
-      showNav: !1
+      tryByClick: false,
+      showNav: false
     };
   },
   computed: {
     isFormLoading() {
-      return this.loading || a(this.$parent, "isFormLoaded") ? !this.$parent.isFormLoaded : !1;
+      return this.loading || hasOwn(this.$parent, "isFormLoaded") ? !this.$parent.isFormLoaded : false;
     },
     toolbarProps() {
-      var r;
-      const t = {}, e = ((r = this.toolbarAttrs) == null ? void 0 : r.buttons) || this.$parent.buttons, o = m({}, this.toolbarAttrs, t);
-      return o.buttons = e || ["back"], o.buttons = h(o.buttons), o;
+      var _a;
+      const defaultProps = {};
+      const buttons = ((_a = this.toolbarAttrs) == null ? void 0 : _a.buttons) || this.$parent.buttons;
+      const toolbarAttrs = merge({}, this.toolbarAttrs, defaultProps);
+      toolbarAttrs.buttons = buttons || ["back"];
+      toolbarAttrs.buttons = toStringArray(toolbarAttrs.buttons);
+      return toolbarAttrs;
     },
     toolbarButtons() {
-      return this.toolbarProps.buttons.filter((t) => !c.includes(t) && t.indexOf(":down") < 0).map((t) => t.replace(":up", ""));
+      return this.toolbarProps.buttons.filter((value) => !bottomButtons.includes(value) && value.indexOf(":down") < 0).map((value) => value.replace(":up", ""));
     },
     footerBarButtons() {
-      let t = this.toolbarProps.buttons.filter((e) => !w.includes(e) && (c.includes(e) || e.indexOf(":down") > -1)).map((e) => e.replace(":down", ""));
-      return t = t || [], this.$parent.isEnabled && !t.includes("cancel") && t.push("cancel"), t;
+      let footerBarButtons = this.toolbarProps.buttons.filter((value) => !topButtons.includes(value) && (bottomButtons.includes(value) || value.indexOf(":down") > -1)).map((value) => value.replace(":down", ""));
+      footerBarButtons = footerBarButtons || [];
+      if (this.$parent.isEnabled && !footerBarButtons.includes("cancel")) {
+        footerBarButtons.push("cancel");
+      }
+      return footerBarButtons;
     }
   },
   created() {
-    this.$on("FormView.addGroup", (t) => {
-      t && (this.activeIndex === -1 && (this.activeIndex = 0), this.groups.push(t), this.groups = this.groups.sort((e, o) => {
-        const r = l(e.$el, "form-card"), s = l(o.$el, "form-card");
-        if (r === s) {
-          const n = [].indexOf.call(e.$el.parentNode.children, e.$el), i = [].indexOf.call(o.$el.parentNode.children, o.$el);
-          return n - i;
-        } else {
-          const n = l(r, "form-scroller"), i = [].indexOf.call(n.children, r), d = [].indexOf.call(n.children, s);
-          return i - d;
+    this.$on("FormView.addGroup", (group) => {
+      if (group) {
+        if (this.activeIndex === -1) {
+          this.activeIndex = 0;
+        }
+        this.groups.push(group);
+        this.groups = this.groups.sort((aTab, bTab) => {
+          const formCardA = findParent(aTab.$el, "form-card");
+          const formCardB = findParent(bTab.$el, "form-card");
+          if (formCardA === formCardB) {
+            const aIndex = [].indexOf.call(aTab.$el.parentNode.children, aTab.$el);
+            const bIndex = [].indexOf.call(bTab.$el.parentNode.children, bTab.$el);
+            return aIndex - bIndex;
+          } else {
+            const formScroller = findParent(formCardA, "form-scroller");
+            const aBlockIndex = [].indexOf.call(formScroller.children, formCardA);
+            const bBlockIndex = [].indexOf.call(formScroller.children, formCardB);
+            return aBlockIndex - bBlockIndex;
+          }
+        });
+        if (group.active) {
+          this.activeIndex = this.groups.indexOf(group);
+          this.navItemClick(group, this.activeIndex);
+        }
+      }
+    });
+    this.$on("FormView.removeGroup", (tab) => {
+      if (tab) {
+        const index = this.groups.indexOf(tab);
+        this.groups.splice(index, 1);
+        if (this.activeIndex > this.groups.length - 1) {
+          this.activeIndex = 0;
         }
-      }), t.active && (this.activeIndex = this.groups.indexOf(t), this.navItemClick(t, this.activeIndex)));
-    }), this.$on("FormView.removeGroup", (t) => {
-      if (t) {
-        const e = this.groups.indexOf(t);
-        this.groups.splice(e, 1), this.activeIndex > this.groups.length - 1 && (this.activeIndex = 0);
       }
-    }), this.onFormResize({ width: window.document.body.clientWidth });
+    });
+    this.onFormResize({ width: window.document.body.clientWidth });
   },
   async activated() {
-    this.$refs.formScroller && (await this.$nextTick(), this.scrollTo(this.formScrollTop, this.formScrollLeft));
+    if (this.$refs.formScroller) {
+      await this.$nextTick();
+      this.scrollTo(this.formScrollTop, this.formScrollLeft);
+    }
   },
   methods: {
     getToolbarSlotKeys() {
-      return Object.keys(this.$scopedSlots).filter((t) => u.includes(t));
+      return Object.keys(this.$scopedSlots).filter((value) => builtInButtons.includes(value));
     },
     getFooterSlotKeys() {
-      return Object.keys(this.$scopedSlots).filter((t) => y.includes(t));
+      return Object.keys(this.$scopedSlots).filter((value) => footerButtons.includes(value));
     },
-    getFooterSlotKey(t) {
-      return t.replace("-down", "");
+    getFooterSlotKey(key) {
+      return key.replace("-down", "");
     },
-    onFormResize({ width: t }) {
-      this.showNav = t > 1500;
+    onFormResize({ width }) {
+      this.showNav = width > 1500;
     },
     onEdit() {
-      !this.toolbarListeners.edit && a(this.$parent, "disabled") && (this.$parent.disabled = !1);
+      if (!this.toolbarListeners.edit && hasOwn(this.$parent, "disabled")) {
+        this.$parent.disabled = false;
+      }
     },
-    async navItemClick(t, e) {
-      this.showNav && (await this.$nextTick(), this.activeFormItemGroup(t, e), t.expand || t.open());
+    async navItemClick(item, index) {
+      if (!this.showNav) {
+        return;
+      }
+      await this.$nextTick();
+      this.activeFormItemGroup(item, index);
+      if (!item.expand) {
+        item.open();
+      }
     },
-    activeFormItemGroup(t, e) {
-      this.$refs.formScroller.scrollTop = t.$el.offsetTop - 10, p(t.$el, "breathe-indicator-animation"), this.tryByClick = !0, this.activeIndex = e;
+    activeFormItemGroup(tab, index) {
+      this.$refs.formScroller.scrollTop = tab.$el.offsetTop - 10;
+      animate(tab.$el, "breathe-indicator-animation");
+      this.tryByClick = true;
+      this.activeIndex = index;
     },
     async tryActive() {
-      if (this.showNav) {
-        for (let t = 0; t < this.groups.length; t++)
-          if (b(this.groups[t].$el, this.$refs.formScroller, { bottomOffset: 10 })) {
-            this.activeIndex = t;
-            break;
-          }
+      if (!this.showNav) {
+        return;
+      }
+      for (let i = 0; i < this.groups.length; i++) {
+        if (isInContainer(this.groups[i].$el, this.$refs.formScroller, { bottomOffset: 10 })) {
+          this.activeIndex = i;
+          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;
+      this.formScrollTop = this.$refs.formScroller.scrollTop;
+      this.formScrollLeft = this.$refs.formScroller.scrollLeft;
+      if (!this.tryByClick && this.groups.length) {
+        window.requestAnimationFrame(this.tryActive);
+      }
+      this.tryByClick = false;
     },
-    scrollTo(t, e) {
-      t && (this.$refs.formScroller.scrollTop = t), e && (this.$refs.formScroller.scrollLeft = e);
+    scrollTo(top, left) {
+      if (top) {
+        this.$refs.formScroller.scrollTop = top;
+      }
+      if (left) {
+        this.$refs.formScroller.scrollLeft = left;
+      }
     }
   }
-}, f = {};
-var $ = /* @__PURE__ */ v(
-  x,
-  _,
-  g,
-  !1,
-  S,
+};
+const __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
+  false,
+  __vue2_injectStyles,
   null,
   null,
   null
 );
-function S(t) {
-  for (let e in f)
-    this[e] = f[e];
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
 }
-const B = /* @__PURE__ */ function() {
-  return $.exports;
+const FormView = /* @__PURE__ */ function() {
+  return __component__.exports;
 }();
 export {
-  B as default
+  FormView as default
 };