@web-utils/component 2.0.13 → 2.2.0

package/form-checkbox-group/index.mjs

@@ -0,0 +1,203 @@
+var p = Object.defineProperty;
+var i = Object.getOwnPropertySymbols;
+var h = Object.prototype.hasOwnProperty, c = Object.prototype.propertyIsEnumerable;
+var n = (e, t, r) => t in e ? p(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, l = (e, t) => {
+  for (var r in t || (t = {}))
+    h.call(t, r) && n(e, r, t[r]);
+  if (i)
+    for (var r of i(t))
+      c.call(t, r) && n(e, r, t[r]);
+  return e;
+};
+import { f } from "../chunks/form-input-mixin.IKogWBfn.mjs";
+import { f as m } from "../chunks/form-pick-mixin.y-qhZJi6.mjs";
+import { d, n as b } from "../chunks/index.LGsb2aDq.mjs";
+import s from "element-ui/lib/checkbox-group";
+import { n as y } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+var _ = function() {
+  var e = this, t = e.$createElement, r = e._self._c || t;
+  return r("FormItem", e._b({
+    class: ["form-checkbox-group", {
+      "form-checkbox-group-row": e.fillRow
+    }, e.ellipsis ? "form-checkbox-group-row-ellipsis" : e.fillRow ? "form-checkbox-group-row-break-word" : ""],
+    attrs: {
+      rules: e.computeRules,
+      disabled: e.inputDisabled
+    },
+    scopedSlots: e._u([{
+      key: "default",
+      fn: function() {
+        return [r("ElCheckboxGroup", e._g(e._b({
+          attrs: {
+            disabled: e.inputDisabled,
+            value: e.computeVal,
+            placeholder: e.computePlaceholder
+          },
+          on: {
+            input: e.emitInput
+          }
+        }, "ElCheckboxGroup", e.inputProps, !1), e.listeners), e._l(e.innerOptions, function(o) {
+          return r("ElCheckbox", {
+            key: o[e.valueKey],
+            attrs: {
+              label: o[e.valueKey]
+            }
+          }, [e._v(" " + e._s(o[e.labelKey]) + " ")]);
+        }), 1), e.computeVal.includes(e.otherVal) ? r("FormInput", {
+          staticClass: "form-checkbox-group-other",
+          style: e.otherLabel ? {
+            width: e.otherWidth
+          } : {
+            marginBottom: 0,
+            width: e.otherWidth
+          },
+          attrs: {
+            "wrap-col": !1,
+            "label-width": "0",
+            prop: e.otherProp,
+            required: !!e.otherProp,
+            placeholder: e.otherPlaceholder,
+            label: e.otherLabel,
+            "show-message": !!e.otherLabel,
+            value: e.other
+          },
+          on: {
+            input: function(o) {
+              return e.$emit("update:other", o);
+            }
+          }
+        }) : e._e()];
+      },
+      proxy: !0
+    }, {
+      key: "error",
+      fn: function(o) {
+        var u = o.error;
+        return [e._t("error", null, {
+          error: u
+        })];
+      }
+    }, {
+      key: "label",
+      fn: function() {
+        return [e._t("label")];
+      },
+      proxy: !0
+    }, {
+      key: "below",
+      fn: function() {
+        return [e._t("below")];
+      },
+      proxy: !0
+    }], null, !0)
+  }, "FormItem", e.formItemProps, !1));
+}, v = [];
+const x = Object.keys(s.props || s.default.props).filter((e) => !["value", "placeholder", "disabled"].includes(e)), g = {
+  name: "FormCheckboxGroup",
+  mixins: [f, m],
+  props: {
+    options: {
+      type: Array,
+      default: () => []
+    },
+    value: {
+      type: [String, Array]
+    },
+    other: {
+      type: String
+    },
+    otherVal: {
+      type: String
+    },
+    otherProp: {
+      type: String
+    },
+    otherPlaceholder: {
+      type: String
+    },
+    otherLabel: {
+      type: String
+    },
+    otherWidth: {
+      type: String,
+      default: "200px"
+    },
+    gender: Boolean,
+    confirm: Boolean,
+    labelProp: {
+      type: String,
+      default: "name"
+    },
+    valueProp: {
+      type: String,
+      default: "code"
+    },
+    split: Boolean,
+    classic: Boolean,
+    fillRow: Boolean,
+    ellipsis: Boolean
+  },
+  computed: {
+    prefix() {
+      return "请选择";
+    },
+    labelKey() {
+      return this.classic ? "label" : this.labelProp;
+    },
+    valueKey() {
+      return this.classic ? "value" : this.valueProp;
+    },
+    inputProps() {
+      return d(l(l({}, b(this.$attrs)), this.$props), x);
+    },
+    innerOptions() {
+      return this.gender ? [
+        {
+          [this.labelKey]: "男",
+          [this.valueKey]: "男"
+        },
+        {
+          [this.labelKey]: "女",
+          [this.valueKey]: "女"
+        }
+      ] : this.confirm ? [
+        {
+          [this.labelKey]: "是",
+          [this.valueKey]: "是"
+        },
+        {
+          [this.labelKey]: "否",
+          [this.valueKey]: "否"
+        }
+      ] : this.options;
+    },
+    computeVal() {
+      return this.split ? this.value ? this.value.split(",") : [] : this.value || [];
+    }
+  },
+  methods: {
+    emitInput(e) {
+      this.split ? this.$emit("input", e.join(",")) : this.$emit("input", e);
+    }
+  }
+}, a = {};
+var k = /* @__PURE__ */ y(
+  g,
+  _,
+  v,
+  !1,
+  P,
+  null,
+  null,
+  null
+);
+function P(e) {
+  for (let t in a)
+    this[t] = a[t];
+}
+const F = /* @__PURE__ */ function() {
+  return k.exports;
+}();
+export {
+  F as default
+};

package/form-checkbox-group/style.css

@@ -0,0 +1 @@
+.form-checkbox-group.form-checkbox-group-row.form-checkbox-group-row-ellipsis .el-checkbox__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.form-checkbox-group.form-checkbox-group-row.form-checkbox-group-row-break-word .el-checkbox__label{word-wrap:break-word;word-break:break-all}.form-checkbox-group.form-checkbox-group-row .el-checkbox-group{display:block}.form-checkbox-group.form-checkbox-group-row .el-checkbox{flex-flow:row;width:100%;display:flex}.form-checkbox-group.form-checkbox-group-row .el-checkbox__input{flex-shrink:0;top:3px}.form-checkbox-group.form-checkbox-group-row .el-checkbox__label{vertical-align:sub;flex:auto;margin-bottom:6px;display:block}.form-checkbox-group .form-checkbox-group-other{margin-left:10px;display:inline-block}.form-checkbox-group .form-checkbox-group-other .el-form-item__label{display:none}.form-checkbox-group .el-checkbox-group{line-height:inherit}.form-checkbox-group .el-checkbox{vertical-align:middle;margin-right:10px}.form-checkbox-group .el-checkbox__label{padding-left:4px}

package/form-date-picker/index.mjs

@@ -0,0 +1,191 @@
+var p = Object.defineProperty, h = Object.defineProperties;
+var d = Object.getOwnPropertyDescriptors;
+var a = Object.getOwnPropertySymbols;
+var f = Object.prototype.hasOwnProperty, c = Object.prototype.propertyIsEnumerable;
+var s = (e, t, r) => t in e ? p(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, i = (e, t) => {
+  for (var r in t || (t = {}))
+    f.call(t, r) && s(e, r, t[r]);
+  if (a)
+    for (var r of a(t))
+      c.call(t, r) && s(e, r, t[r]);
+  return e;
+}, o = (e, t) => h(e, d(t));
+import { f as y } from "../chunks/form-input-mixin.IKogWBfn.mjs";
+import { f as g } from "../chunks/form-pick-mixin.y-qhZJi6.mjs";
+import { toDate as l } from "@web-utils/integrations/dayjs";
+import { d as _, n as k } from "../chunks/index.LGsb2aDq.mjs";
+import { n as v } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+var x = function() {
+  var e = this, t = e.$createElement, r = e._self._c || t;
+  return r("FormItem", e._b({
+    attrs: {
+      rules: e.computeRules,
+      disabled: e.inputDisabled
+    },
+    scopedSlots: e._u([{
+      key: "default",
+      fn: function() {
+        return [r("ElDatePicker", e._g(e._b({
+          staticStyle: {
+            width: "100%"
+          },
+          attrs: {
+            "picker-options": e.pickerOption,
+            value: e.innerVal,
+            size: "mini",
+            placeholder: e.computePlaceholder,
+            type: e.type,
+            disabled: e.inputDisabled
+          },
+          on: {
+            input: e.emitInput
+          }
+        }, "ElDatePicker", e.inputProps, !1), e.listeners)), e.$slots.warn ? r("div", {
+          staticClass: "el-form-item__warn"
+        }, [e._t("warn")], 2) : e._e()];
+      },
+      proxy: !0
+    }, {
+      key: "error",
+      fn: function(u) {
+        var n = u.error;
+        return [e.$scopedSlots.error && e.$scopedSlots.error(n) ? r("div", {
+          staticClass: "el-form-item__error"
+        }, [e._t("error", function() {
+          return [e._v(" " + e._s(n) + " ")];
+        }, {
+          error: n
+        })], 2) : e._e()];
+      }
+    }, {
+      key: "label",
+      fn: function() {
+        return [e._t("label")];
+      },
+      proxy: !0
+    }], null, !0)
+  }, "FormItem", e.formItemProps, !1));
+}, P = [];
+const S = ["type", "timeArrowControl", "size", "format", "valueFormat", "readonly", "placeholder", "startPlaceholder", "endPlaceholder", "prefixIcon", "clearIcon", "name", "disabled", "clearable", "id", "popperClass", "editable", "align", "value", "defaultValue", "defaultTime", "rangeSeparator", "pickerOptions", "unlinkPanels", "validateEvent"].filter((e) => !["value", "placeholder", "disabled", "type", "pickerOptions"].includes(e)), D = {
+  name: "FormDatePicker",
+  mixins: [y, g],
+  props: {
+    format: {
+      type: String
+    },
+    valueFormat: {
+      type: String
+    },
+    rangeSeparator: {
+      type: String
+    },
+    startPlaceholder: {
+      type: String
+    },
+    endPlaceholder: {
+      type: String
+    },
+    start: {
+      type: String
+    },
+    end: {
+      type: String
+    },
+    year: Boolean,
+    month: Boolean,
+    dates: Boolean,
+    week: Boolean,
+    dateTime: Boolean,
+    dateTimeRange: Boolean,
+    dateRange: Boolean,
+    monthRange: Boolean,
+    miniDate: {
+      type: String
+    },
+    maxDate: {
+      type: String
+    },
+    pickerOptions: {
+      type: Object
+    },
+    split: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  computed: {
+    prefix() {
+      return "请选择";
+    },
+    mini() {
+      if (this.miniDate) {
+        const e = l(this.miniDate);
+        return e.setDate(e.getDate() - 1), e;
+      } else
+        return null;
+    },
+    max() {
+      return this.maxDate ? l(this.maxDate) : null;
+    },
+    pickerOption() {
+      return i({
+        disabledDate: (e) => {
+          if (!this.mini && !this.max)
+            return !1;
+          const t = e.getTime();
+          return this.mini && !this.max ? t <= this.mini.getTime() : !this.mini && this.max ? t >= this.max.getTime() : this.mini && this.max ? t <= this.mini.getTime() && t >= this.max.getTime() : !1;
+        }
+      }, this.pickerOptions);
+    },
+    innerVal() {
+      if (this.range && this.split) {
+        const e = [];
+        return e.push(this.start || ""), e.push(this.end || ""), e;
+      } else
+        return this.value;
+    },
+    fat() {
+      return this.year ? "yyyy" : this.month || this.monthRange ? "yyyy-MM" : this.week ? "yyyy 第 WW 周" : this.dateTime || this.dateTimeRange ? "yyyy-MM-dd HH:mm" : "yyyy-MM-dd";
+    },
+    inputProps() {
+      return _(o(i(i({}, k(this.$attrs)), this.$props), {
+        valueFormat: this.week ? "yyyy-MM-dd" : this.valueFormat || this.fat,
+        format: this.format || this.fat,
+        rangeSeparator: this.rangeSeparator || "至",
+        startPlaceholder: this.startPlaceholder || "开始日期",
+        endPlaceholder: this.endPlaceholder || "结束日期"
+      }), S);
+    },
+    range() {
+      return this.dateTimeRange || this.dateRange || this.monthRange;
+    },
+    type() {
+      return this.year ? "year" : this.month ? "month" : this.dates ? "dates" : this.week ? "week" : this.dateTime ? "datetime" : this.dateTimeRange ? "datetimerange" : this.dateRange ? "daterange" : this.monthRange ? "monthrange" : "date";
+    }
+  },
+  methods: {
+    emitInput(e) {
+      this.range && this.split ? e ? (this.$emit("update:start", e[0]), this.$emit("update:end", e[1])) : (this.$emit("update:start", null), this.$emit("update:end", null)) : this.$emit("input", e);
+    }
+  }
+}, m = {};
+var b = /* @__PURE__ */ v(
+  D,
+  x,
+  P,
+  !1,
+  T,
+  null,
+  null,
+  null
+);
+function T(e) {
+  for (let t in m)
+    this[t] = m[t];
+}
+const I = /* @__PURE__ */ function() {
+  return b.exports;
+}();
+export {
+  I as default
+};

package/form-holder/index.mjs

@@ -0,0 +1,129 @@
+var o = (e, r, i) => new Promise((d, s) => {
+  var f = (t) => {
+    try {
+      l(i.next(t));
+    } catch (a) {
+      s(a);
+    }
+  }, m = (t) => {
+    try {
+      l(i.throw(t));
+    } catch (a) {
+      s(a);
+    }
+  }, l = (t) => t.done ? d(t.value) : Promise.resolve(t.value).then(f, m);
+  l((i = i.apply(e, r)).next());
+});
+import { warning as u } from "@web-utils/core";
+import { e as c } from "../chunks/index.LGsb2aDq.mjs";
+import { n as p } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+var _ = function() {
+  var e = this, r = e.$createElement, i = e._self._c || r;
+  return i("ElForm", e._g(e._b({
+    ref: "form",
+    staticClass: "clear-fix",
+    attrs: {
+      model: e.model,
+      size: e.size,
+      disabled: e.disabled,
+      "label-width": e.labelWidth,
+      "label-position": e.labelPosition
+    }
+  }, "ElForm", e.$attrs, !1), e.$listeners), [e._t("default")], 2);
+}, h = [];
+const v = {
+  name: "FormHolder",
+  provide() {
+    return {
+      formHolder: this
+    };
+  },
+  props: {
+    /**
+     * 表单实体
+     */
+    model: {
+      type: Object
+    },
+    /**
+     * 表单元素大小
+     */
+    size: {
+      type: String,
+      default: "mini"
+    },
+    /**
+     * 是否禁用
+     */
+    disabled: Boolean,
+    /**
+     * 表单组件 label 位置,可选值 top,right,left
+     */
+    labelPosition: {
+      type: String,
+      default: "right"
+    },
+    /**
+     * 表单组件 label 宽度
+     */
+    labelWidth: {
+      type: String,
+      default: "160px"
+    },
+    /**
+     * 表单组件是否必填,设置为 false 即使表单输入组件设置了必填也不会校验必填,但可以使用 requiredFields 来排除需要必填的字段
+     */
+    required: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * 需要校验必填的字段, required 设置为 false 时有效
+     */
+    requiredFields: {
+      type: Array
+    }
+  },
+  watch: {
+    required() {
+      this.clearValidate();
+    }
+  },
+  created() {
+    this.required || u.call(c(this, (e) => ["FormView", "FormHolder"].includes(e.$options.name)), "一般情况下不建议设置 required=false,因为 required 设置为 false 后必填字段要自行维护,在处理表格时会比较复杂,请自行权衡利弊");
+  },
+  methods: {
+    clearValidate(e) {
+      var r;
+      (r = this.$refs.form) == null || r.clearValidate(e);
+    },
+    validate() {
+      return o(this, null, function* () {
+        return this.$refs.form.validate();
+      });
+    },
+    resetFields() {
+      return this.$refs.form.resetFields();
+    }
+  }
+}, n = {};
+var b = /* @__PURE__ */ p(
+  v,
+  _,
+  h,
+  !1,
+  F,
+  null,
+  null,
+  null
+);
+function F(e) {
+  for (let r in n)
+    this[r] = n[r];
+}
+const x = /* @__PURE__ */ function() {
+  return b.exports;
+}();
+export {
+  x as default
+};

package/form-input/index.mjs

@@ -0,0 +1,117 @@
+var p = Object.defineProperty;
+var s = Object.getOwnPropertySymbols;
+var m = Object.prototype.hasOwnProperty, c = Object.prototype.propertyIsEnumerable;
+var l = (e, t, r) => t in e ? p(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, o = (e, t) => {
+  for (var r in t || (t = {}))
+    m.call(t, r) && l(e, r, t[r]);
+  if (s)
+    for (var r of s(t))
+      c.call(t, r) && l(e, r, t[r]);
+  return e;
+};
+import { f as d } from "../chunks/form-input-mixin.IKogWBfn.mjs";
+import u from "element-ui/lib/input";
+import { d as _, n as f } from "../chunks/index.LGsb2aDq.mjs";
+import { n as v } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+var y = function() {
+  var e = this, t = e.$createElement, r = e._self._c || t;
+  return r("FormItem", e._b({
+    attrs: {
+      rules: e.computeRules,
+      disabled: e.inputDisabled
+    },
+    scopedSlots: e._u([{
+      key: "default",
+      fn: function() {
+        return [e._t("default", function() {
+          return [r("ElInput", e._g(e._b({
+            class: {
+              "is-readonly": e.readonly
+            },
+            attrs: {
+              value: e.value,
+              readonly: e.readonly,
+              maxlength: e.maxLength,
+              disabled: e.inputDisabled,
+              placeholder: e.computePlaceholder
+            },
+            on: {
+              input: e.emitInput
+            },
+            scopedSlots: e._u([{
+              key: "append",
+              fn: function() {
+                return [e._t("append")];
+              },
+              proxy: !0
+            }], null, !0)
+          }, "ElInput", e.inputProps, !1), e.listeners)), e.$slots.warn ? r("div", {
+            staticClass: "el-form-item__warn"
+          }, [e._t("warn")], 2) : e._e()];
+        })];
+      },
+      proxy: !0
+    }, {
+      key: "error",
+      fn: function(i) {
+        var n = i.error;
+        return [e.$scopedSlots.error && e.$scopedSlots.error(n) ? r("div", {
+          staticClass: "el-form-item__error"
+        }, [e._t("error", function() {
+          return [e._v(" " + e._s(n) + " ")];
+        }, {
+          error: n
+        })], 2) : e._e()];
+      }
+    }, {
+      key: "label",
+      fn: function() {
+        return [e._t("label")];
+      },
+      proxy: !0
+    }], null, !0)
+  }, "FormItem", e.formItemProps, !1));
+}, h = [];
+const b = Object.keys(u.props || u.default.props).filter((e) => !["value", "placeholder", "disabled"].includes(e)), x = {
+  name: "FormInput",
+  mixins: [d],
+  props: {
+    value: {
+      type: [String, Number]
+    },
+    maxLength: {
+      type: String,
+      default: "200"
+    }
+  },
+  computed: {
+    inputProps() {
+      return _(o(o({}, f(this.$attrs)), this.$props), b);
+    }
+  },
+  methods: {
+    emitInput(e) {
+      this.$emit("input", e);
+    }
+  }
+}, a = {};
+var I = /* @__PURE__ */ v(
+  x,
+  y,
+  h,
+  !1,
+  S,
+  null,
+  null,
+  null
+);
+function S(e) {
+  for (let t in a)
+    this[t] = a[t];
+}
+const w = /* @__PURE__ */ function() {
+  return I.exports;
+}();
+export {
+  w as default
+};