@web-utils/component 2.7.35 → 2.7.37

package/dist/components/form-textarea/index.mjs

@@ -0,0 +1,113 @@
+var u = Object.defineProperty;
+var l = Object.getOwnPropertySymbols;
+var p = Object.prototype.hasOwnProperty, m = Object.prototype.propertyIsEnumerable;
+var s = (e, t, r) => t in e ? u(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, n = (e, t) => {
+  for (var r in t || (t = {}))
+    p.call(t, r) && s(e, r, t[r]);
+  if (l)
+    for (var r of l(t))
+      m.call(t, r) && s(e, r, t[r]);
+  return e;
+};
+import { f as c } from "../../chunks/form-input-mixin.e3b4c68c.mjs";
+import { d as f, n as d } from "../../chunks/index.9b7a65d1.mjs";
+import _ from "element-ui/lib/input";
+import { n as h } from "../../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var x = function() {
+  var e = this, t = e.$createElement, r = e._self._c || t;
+  return r("FormItem", e._b({
+    attrs: {
+      block: e.block,
+      rules: e.computeRules,
+      disabled: e.inputDisabled
+    },
+    scopedSlots: e._u([{
+      key: "default",
+      fn: function() {
+        return [r("ElInput", e._g(e._b({
+          attrs: {
+            value: e.value,
+            type: "textarea",
+            rows: e.rows,
+            resize: e.resize ? null : "none",
+            "show-word-limit": e.showWordLimit,
+            disabled: e.inputDisabled,
+            maxlength: e.maxLength,
+            placeholder: e.computePlaceholder
+          },
+          on: {
+            input: function(o) {
+              return e.$emit("input", o);
+            }
+          }
+        }, "ElInput", e.inputProps, !1), e.listeners))];
+      },
+      proxy: !0
+    }, {
+      key: "error",
+      fn: function(o) {
+        var i = o.error;
+        return [e._t("error", null, {
+          error: i
+        })];
+      }
+    }, {
+      key: "label",
+      fn: function() {
+        return [e._t("label")];
+      },
+      proxy: !0
+    }], null, !0)
+  }, "FormItem", e.formItemProps, !1));
+}, y = [];
+const v = Object.keys(_.props).filter((e) => !["value", "placeholder", "type", "rows", "resize", "showWordLimit", "maxLength", "maxlength"].includes(e)), b = {
+  name: "FormTextarea",
+  mixins: [c],
+  props: {
+    value: {
+      type: [String, Number]
+    },
+    rows: {
+      type: String,
+      default: "4"
+    },
+    resize: Boolean,
+    showWordLimit: {
+      type: Boolean,
+      default: !0
+    },
+    maxLength: {
+      type: String,
+      default: "800"
+    },
+    block: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  computed: {
+    inputProps() {
+      return f(n(n({}, d(this.$attrs)), this.$props), v);
+    }
+  }
+}, a = {};
+var g = /* @__PURE__ */ h(
+  b,
+  x,
+  y,
+  !1,
+  w,
+  null,
+  null,
+  null
+);
+function w(e) {
+  for (let t in a)
+    this[t] = a[t];
+}
+const F = /* @__PURE__ */ function() {
+  return g.exports;
+}();
+export {
+  F as default
+};

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

@@ -0,0 +1,366 @@
+var c = (t, e, o) => new Promise((r, s) => {
+  var n = (i) => {
+    try {
+      a(o.next(i));
+    } catch (f) {
+      s(f);
+    }
+  }, l = (i) => {
+    try {
+      a(o.throw(i));
+    } catch (f) {
+      s(f);
+    }
+  }, a = (i) => i.done ? r(i.value) : Promise.resolve(i.value).then(n, l);
+  a((o = o.apply(t, e)).next());
+});
+import { hasOwn as d, toStringArray as b, animate as v, isInContainer as _ } from "@web-utils/core";
+import { merge as g } from "@web-utils/integrations/lodash";
+import { n as y } from "../../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var w = function() {
+  var t = this, e = t.$createElement, o = t._self._c || e;
+  return o("div", {
+    class: ["form-view", t.className]
+  }, [t.showToolbar ? o("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: !t.isFormLoading,
+      expression: "!isFormLoading"
+    }],
+    staticClass: "form-view-toolbar"
+  }, [t._t("form-view-toolbar", function() {
+    return [o("Toolbar", t._g(t._b({
+      on: {
+        edit: t.onEdit
+      },
+      scopedSlots: t._u([{
+        key: "default",
+        fn: function(r) {
+          var s = r.buttons;
+          return [t._t("toolbar-button", null, {
+            buttons: s
+          })];
+        }
+      }, 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", Object.assign({}, t.toolbarProps, {
+      buttons: t.toolbarButtons
+    }), !1), t.toolbarListeners))];
+  })], 2) : t._e(), o("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: !t.isFormLoading,
+      expression: "!isFormLoading"
+    }],
+    staticClass: "form-scroller-wrapper"
+  }, [o("div", {
+    ref: "formScroller",
+    class: ["form-scroller", "absolute-box", t.contentClass],
+    on: {
+      scroll: t.onFormScroll
+    }
+  }, [t.notForm ? o("div", {
+    staticClass: "not-form",
+    style: {
+      width: t.formWidth
+    }
+  }, [t.title ? o("div", {
+    staticClass: "form-view-title"
+  }, [t._v(" " + t._s(t.title) + " ")]) : t._e(), t._t("default", function() {
+    return [o("EmptyView", {
+      attrs: {
+        "empty-tips": "请添加表单内容"
+      }
+    })];
+  }), t.footerBarButtons.length ? o("Toolbar", t._g(t._b({
+    attrs: {
+      footer: ""
+    },
+    scopedSlots: t._u([{
+      key: "default",
+      fn: function(r) {
+        var s = r.buttons, n = r.footer;
+        return [t._t("footer-button", null, {
+          buttons: s,
+          footer: n
+        })];
+      }
+    }, t._l(t.getFooterSlotKeys(), function(r) {
+      return {
+        key: t.getFooterSlotKey(r),
+        fn: function() {
+          return [t._t(r)];
+        },
+        proxy: !0
+      };
+    })], 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", {
+    class: ["form-card", {
+      "un-limit": t.unLimit
+    }],
+    style: {
+      width: `calc(${t.formWidth} + 40px)`
+    }
+  }, [o("div", {
+    staticClass: "form-content"
+  }, [t.title ? o("div", {
+    staticClass: "form-view-title"
+  }, [t._v(" " + t._s(t.title) + " ")]) : t._e(), t._t("default", function() {
+    return [o("EmptyView", {
+      attrs: {
+        "empty-tips": "请添加表单内容"
+      }
+    })];
+  }), t.footerBarButtons.length ? o("Toolbar", t._g(t._b({
+    attrs: {
+      footer: ""
+    },
+    scopedSlots: t._u([{
+      key: "default",
+      fn: function(r) {
+        var s = r.buttons, n = r.footer;
+        return [t._t("footer-button", null, {
+          buttons: s,
+          footer: n
+        })];
+      }
+    }, t._l(t.getFooterSlotKeys(), function(r) {
+      return {
+        key: t.getFooterSlotKey(r),
+        fn: function() {
+          return [t._t(r)];
+        },
+        proxy: !0
+      };
+    })], 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", {
+    class: ["form-card", {
+      "un-limit": t.unLimit
+    }],
+    staticStyle: {
+      "min-height": "0"
+    },
+    style: {
+      width: `calc(${t.formWidth} + 40px)`
+    }
+  }, [o("div", {
+    staticClass: "form-content"
+  }, [t.$parent.$options.flowForm && t.flowContext.logs.length ? o("FormItemGroup", {
+    attrs: {
+      "block-title": "流程日志"
+    }
+  }, [o("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()]), o("ResizeObserver", {
+    on: {
+      notify: t.onFormResize
+    }
+  })], 1), t.formNav && !t.isFormLoading && t.showNav && t.groups.length ? o("div", {
+    staticClass: "form-nav"
+  }, [o("div", {
+    staticClass: "form-nav-header"
+  }, [t._v(" 表单导航 ")]), o("ul", {
+    staticClass: "form-nav-list"
+  }, t._l(t.groups, function(r, s) {
+    return o("li", {
+      key: r.blockTitle,
+      class: ["form-nav-item", {
+        active: t.activeIndex === s
+      }],
+      on: {
+        click: function(n) {
+          return t.navItemClick(r, s);
+        }
+      }
+    }, [t._v(" " + t._s(r.blockTitle) + " ")]);
+  }), 0)]) : t._e(), t.isFormLoading ? o("LoadingView", {
+    attrs: {
+      "icon-size": "34px",
+      "font-size": "16px"
+    }
+  }) : t._e()], 1);
+}, x = [];
+const p = ["back", "create", "save", "withdraw", "edit", "submit", "publish", "agree", "disagree", "reject", "finish", "cancel", "enable", "exp", "imp", "del", "disabled", "reload", "slot"], $ = p.map((t) => `${t}-down`), S = ["back", "withdraw", "edit"], m = ["save", "submit", "", "publish", "agree", "disagree", "reject", "finish", "cancel"], u = (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;
+}, F = {
+  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: !0
+    },
+    formNav: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  data() {
+    return {
+      groups: [],
+      activeIndex: -1,
+      tryByClick: !1,
+      showNav: !1
+    };
+  },
+  computed: {
+    isFormLoading() {
+      return this.loading || d(this.$parent, "isFormLoaded") ? !this.$parent.isFormLoaded : !1;
+    },
+    toolbarProps() {
+      var r;
+      const t = {}, e = ((r = this.toolbarAttrs) == null ? void 0 : r.buttons) || this.$parent.buttons, o = g({}, this.toolbarAttrs, t);
+      return o.buttons = e || ["back"], o.buttons = b(o.buttons), o;
+    },
+    toolbarButtons() {
+      return this.toolbarProps.buttons.filter((t) => !m.includes(t) && t.indexOf(":down") < 0).map((t) => t.replace(":up", ""));
+    },
+    footerBarButtons() {
+      let t = this.toolbarProps.buttons.filter((e) => !S.includes(e) && (m.includes(e) || e.indexOf(":down") > -1)).map((e) => e.replace(":down", ""));
+      return t = t || [], this.$parent.isEnabled && !t.includes("cancel") && t.push("cancel"), t;
+    }
+  },
+  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 = u(e.$el, "form-card"), s = u(o.$el, "form-card");
+        if (r === s) {
+          const n = [].indexOf.call(e.$el.parentNode.children, e.$el), l = [].indexOf.call(o.$el.parentNode.children, o.$el);
+          return n - l;
+        } else {
+          const n = u(r, "form-scroller"), l = [].indexOf.call(n.children, r), a = [].indexOf.call(n.children, s);
+          return l - a;
+        }
+      }), 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 });
+  },
+  activated() {
+    return c(this, null, function* () {
+      this.$refs.formScroller && (yield this.$nextTick(), this.scrollTo(this.formScrollTop, this.formScrollLeft));
+    });
+  },
+  methods: {
+    getToolbarSlotKeys() {
+      return Object.keys(this.$scopedSlots).filter((t) => p.includes(t));
+    },
+    getFooterSlotKeys() {
+      return Object.keys(this.$scopedSlots).filter((t) => $.includes(t));
+    },
+    getFooterSlotKey(t) {
+      return t.replace("-down", "");
+    },
+    onFormResize({ width: t }) {
+      this.showNav = t > 1500;
+    },
+    onEdit() {
+      !this.toolbarListeners.edit && d(this.$parent, "disabled") && (this.$parent.disabled = !1);
+    },
+    navItemClick(t, e) {
+      return c(this, null, function* () {
+        this.showNav && (yield this.$nextTick(), this.activeFormItemGroup(t, e), t.expand || t.open());
+      });
+    },
+    activeFormItemGroup(t, e) {
+      this.$refs.formScroller.scrollTop = t.$el.offsetTop - 10, v(t.$el, "breathe-indicator-animation"), this.tryByClick = !0, this.activeIndex = e;
+    },
+    tryActive() {
+      return c(this, null, function* () {
+        if (this.showNav) {
+          for (let t = 0; t < this.groups.length; t++)
+            if (_(this.groups[t].$el, this.$refs.formScroller, { bottomOffset: 10 })) {
+              this.activeIndex = t;
+              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(t, e) {
+      t && (this.$refs.formScroller.scrollTop = t), e && (this.$refs.formScroller.scrollLeft = e);
+    }
+  }
+}, h = {};
+var k = /* @__PURE__ */ y(
+  F,
+  w,
+  x,
+  !1,
+  B,
+  null,
+  null,
+  null
+);
+function B(t) {
+  for (let e in h)
+    this[e] = h[e];
+}
+const T = /* @__PURE__ */ function() {
+  return k.exports;
+}();
+export {
+  T as default
+};

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

@@ -1,158 +1 @@
-/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
-/* 应用头部高度 */
-/* 页面宽度 */
-/* 侧栏宽度 */
-/* 标签高度 */
-/* 页面头部工具条高度 */
-.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;
-}
-}
+.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 #0000001a;max-width:1000px;margin:14px auto;padding:20px;color:#303133;background-color:#fff;border:1px solid #ebeef5;border-radius:4px;transition:.3s}.form-view .form-card.un-limit{max-width:100%}.form-view .form-nav{box-shadow:0 2px 12px #0000001a;position:absolute;top:55px;left:20px;background-color:#fff}.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:700;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:700}.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:400;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 0 0 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}}