@web-utils/component 2.7.36 → 2.8.0

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

@@ -1,437 +0,0 @@
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-import { hasOwn, toStringArray, animate, isInContainer } from "@web-utils/core";
-import { merge } from "@web-utils/integrations/lodash";
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.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: !_vm.isFormLoading,
-      expression: "!isFormLoading"
-    }],
-    staticClass: "form-view-toolbar"
-  }, [_vm._t("form-view-toolbar", function() {
-    return [_c("Toolbar", _vm._g(_vm._b({
-      on: {
-        "edit": _vm.onEdit
-      },
-      scopedSlots: _vm._u([{
-        key: "default",
-        fn: function(_ref) {
-          var buttons = _ref.buttons;
-          return [_vm._t("toolbar-button", null, {
-            "buttons": buttons
-          })];
-        }
-      }, _vm._l(_vm.getToolbarSlotKeys(), function(item) {
-        return {
-          key: item,
-          fn: function() {
-            return [_vm._t(item)];
-          },
-          proxy: true
-        };
-      }), {
-        key: "toolbar-right",
-        fn: function() {
-          return [_vm._t("toolbar-right")];
-        },
-        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: !_vm.isFormLoading,
-      expression: "!isFormLoading"
-    }],
-    staticClass: "form-scroller-wrapper"
-  }, [_c("div", {
-    ref: "formScroller",
-    class: ["form-scroller", "absolute-box", _vm.contentClass],
-    on: {
-      "scroll": _vm.onFormScroll
-    }
-  }, [_vm.notForm ? _c("div", {
-    staticClass: "not-form",
-    style: {
-      width: _vm.formWidth
-    }
-  }, [_vm.title ? _c("div", {
-    staticClass: "form-view-title"
-  }, [_vm._v(" " + _vm._s(_vm.title) + " ")]) : _vm._e(), _vm._t("default", function() {
-    return [_c("EmptyView", {
-      attrs: {
-        "empty-tips": "请添加表单内容"
-      }
-    })];
-  }), _vm.footerBarButtons.length ? _c("Toolbar", _vm._g(_vm._b({
-    attrs: {
-      "footer": ""
-    },
-    scopedSlots: _vm._u([{
-      key: "default",
-      fn: function(_ref2) {
-        var buttons = _ref2.buttons, footer = _ref2.footer;
-        return [_vm._t("footer-button", null, {
-          "buttons": buttons,
-          "footer": footer
-        })];
-      }
-    }, _vm._l(_vm.getFooterSlotKeys(), function(item) {
-      return {
-        key: _vm.getFooterSlotKey(item),
-        fn: function() {
-          return [_vm._t(item)];
-        },
-        proxy: true
-      };
-    })], 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": _vm.unLimit
-    }],
-    style: {
-      width: `calc(${_vm.formWidth} + 40px)`
-    }
-  }, [_c("div", {
-    staticClass: "form-content"
-  }, [_vm.title ? _c("div", {
-    staticClass: "form-view-title"
-  }, [_vm._v(" " + _vm._s(_vm.title) + " ")]) : _vm._e(), _vm._t("default", function() {
-    return [_c("EmptyView", {
-      attrs: {
-        "empty-tips": "请添加表单内容"
-      }
-    })];
-  }), _vm.footerBarButtons.length ? _c("Toolbar", _vm._g(_vm._b({
-    attrs: {
-      "footer": ""
-    },
-    scopedSlots: _vm._u([{
-      key: "default",
-      fn: function(_ref3) {
-        var buttons = _ref3.buttons, footer = _ref3.footer;
-        return [_vm._t("footer-button", null, {
-          "buttons": buttons,
-          "footer": footer
-        })];
-      }
-    }, _vm._l(_vm.getFooterSlotKeys(), function(item) {
-      return {
-        key: _vm.getFooterSlotKey(item),
-        fn: function() {
-          return [_vm._t(item)];
-        },
-        proxy: true
-      };
-    })], 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": _vm.unLimit
-    }],
-    staticStyle: {
-      "min-height": "0"
-    },
-    style: {
-      width: `calc(${_vm.formWidth} + 40px)`
-    }
-  }, [_c("div", {
-    staticClass: "form-content"
-  }, [_vm.$parent.$options.flowForm && _vm.flowContext.logs.length ? _c("FormItemGroup", {
-    attrs: {
-      "block-title": "流程日志"
-    }
-  }, [_c("FlowLog", {
-    staticClass: "flow-log",
-    attrs: {
-      "fetch": false,
-      "show-title": false,
-      "business-key": _vm.$parent.bizKey
-    }
-  })], 1) : _vm._e(), _vm._t("form-bottom")], 2)]) : _vm._e()]), _c("ResizeObserver", {
-    on: {
-      "notify": _vm.onFormResize
-    }
-  })], 1), _vm.formNav && !_vm.isFormLoading && _vm.showNav && _vm.groups.length ? _c("div", {
-    staticClass: "form-nav"
-  }, [_c("div", {
-    staticClass: "form-nav-header"
-  }, [_vm._v(" 表单导航 ")]), _c("ul", {
-    staticClass: "form-nav-list"
-  }, _vm._l(_vm.groups, function(item, index) {
-    return _c("li", {
-      key: item.blockTitle,
-      class: ["form-nav-item", {
-        active: _vm.activeIndex === index
-      }],
-      on: {
-        "click": function($event) {
-          return _vm.navItemClick(item, index);
-        }
-      }
-    }, [_vm._v(" " + _vm._s(item.blockTitle) + " ")]);
-  }), 0)]) : _vm._e(), _vm.isFormLoading ? _c("LoadingView", {
-    attrs: {
-      "icon-size": "34px",
-      "font-size": "16px"
-    }
-  }) : _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: {
-      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: true
-    },
-    formNav: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      groups: [],
-      activeIndex: -1,
-      tryByClick: false,
-      showNav: false
-    };
-  },
-  computed: {
-    isFormLoading() {
-      return this.loading || hasOwn(this.$parent, "isFormLoaded") ? !this.$parent.isFormLoaded : false;
-    },
-    toolbarProps() {
-      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((value) => !bottomButtons.includes(value) && value.indexOf(":down") < 0).map((value) => value.replace(":up", ""));
-    },
-    footerBarButtons() {
-      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", (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;
-        }
-      }
-    });
-    this.onFormResize({ width: window.document.body.clientWidth });
-  },
-  activated() {
-    return __async(this, null, function* () {
-      if (this.$refs.formScroller) {
-        yield this.$nextTick();
-        this.scrollTo(this.formScrollTop, this.formScrollLeft);
-      }
-    });
-  },
-  methods: {
-    getToolbarSlotKeys() {
-      return Object.keys(this.$scopedSlots).filter((value) => builtInButtons.includes(value));
-    },
-    getFooterSlotKeys() {
-      return Object.keys(this.$scopedSlots).filter((value) => footerButtons.includes(value));
-    },
-    getFooterSlotKey(key) {
-      return key.replace("-down", "");
-    },
-    onFormResize({ width }) {
-      this.showNav = width > 1500;
-    },
-    onEdit() {
-      if (!this.toolbarListeners.edit && hasOwn(this.$parent, "disabled")) {
-        this.$parent.disabled = false;
-      }
-    },
-    navItemClick(item, index) {
-      return __async(this, null, function* () {
-        if (!this.showNav) {
-          return;
-        }
-        yield this.$nextTick();
-        this.activeFormItemGroup(item, index);
-        if (!item.expand) {
-          item.open();
-        }
-      });
-    },
-    activeFormItemGroup(tab, index) {
-      this.$refs.formScroller.scrollTop = tab.$el.offsetTop - 10;
-      animate(tab.$el, "breathe-indicator-animation");
-      this.tryByClick = true;
-      this.activeIndex = index;
-    },
-    tryActive() {
-      return __async(this, null, function* () {
-        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;
-      if (!this.tryByClick && this.groups.length) {
-        window.requestAnimationFrame(this.tryActive);
-      }
-      this.tryByClick = false;
-    },
-    scrollTo(top, left) {
-      if (top) {
-        this.$refs.formScroller.scrollTop = top;
-      }
-      if (left) {
-        this.$refs.formScroller.scrollLeft = left;
-      }
-    }
-  }
-};
-const __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  __vue2_script,
-  render,
-  staticRenderFns,
-  false,
-  __vue2_injectStyles,
-  null,
-  null,
-  null
-);
-function __vue2_injectStyles(context) {
-  for (let o in __cssModules) {
-    this[o] = __cssModules[o];
-  }
-}
-const FormView = /* @__PURE__ */ function() {
-  return __component__.exports;
-}();
-export {
-  FormView as default
-};

package/dist/components/form-view/style.css

@@ -1,158 +0,0 @@
-/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
-/* 应用头部高度 */
-/* 页面宽度 */
-/* 侧栏宽度 */
-/* 标签高度 */
-/* 页面头部工具条高度 */
-.form-view {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-.form-view .form-scroller-wrapper {
-  position: relative;
-  flex: 1;
-}
-.form-view .not-form {
-  margin: 0 auto;
-}
-.form-view .form-view-toolbar {
-  overflow: hidden;
-}
-.form-view .form-scroller {
-  flex: 1;
-  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 {
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  max-width: 1000px;
-  margin: 14px auto;
-  padding: 20px;
-  color: #303133;
-  background-color: #fff;
-  border: 1px solid #ebeef5;
-  border-radius: 4px;
-  transition: 0.3s;
-}
-.form-view .form-card.un-limit {
-  max-width: 100%;
-}
-.form-view .form-nav {
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  position: absolute;
-  top: 55px;
-  left: 20px;
-  background-color: white;
-}
-.form-view .form-nav-list {
-  min-width: 180px;
-  padding: 10px 20px;
-}
-.form-view .form-nav-header {
-  position: relative;
-  padding: 5px 20px;
-  color: #e34e55;
-  font-weight: bold;
-  font-size: 15px;
-  background-color: #f3f5fb;
-}
-.form-view .form-nav-item {
-  position: relative;
-  padding: 5px 0;
-  font-family: element-icons !important;
-  cursor: pointer;
-}
-.form-view .form-nav-item.active, .form-view .form-nav-item:hover {
-  color: #e34e55;
-  font-weight: bold;
-}
-.form-view .form-nav-item.active::before {
-  position: absolute;
-  left: -14px;
-  content: "\e6e0";
-}
-.form-view .form-view-title {
-  width: 100%;
-  height: 36px;
-  margin-bottom: 10px;
-  color: #333;
-  font-size: 22px;
-  line-height: 36px;
-  text-align: center;
-  background-color: #fff;
-}
-.form-view .tip {
-  margin: 20px 0;
-  padding: 8px 16px;
-  background-color: #ecf8ff;
-  border-left: 5px solid #50bfff;
-  border-radius: 4px;
-}
-.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-size: 19px;
-  font-family: impact, Constantia, Georgia;
-}
-.form-view .el-table .el-table__header th {
-  color: #595959;
-  font-weight: normal;
-  background: #fff;
-}
-.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 {
-  padding: 0;
-  padding-left: 4px;
-  line-height: 1.6;
-  white-space: normal;
-  word-break: break-word;
-  background: transparent;
-  border: 0;
-}
-@media screen and (min-width: 1700px) {
-.form-view.form-view__lg .form-card {
-    position: relative;
-    left: 60px;
-}
-}