@ibiz-template/mob-vue3-components 0.0.1-alpha.19

package/lib/editor/date-picker/ibiz-date-picker/ibiz-date-picker.cjs

@@ -0,0 +1,118 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./ibiz-date-picker.css');
+var dayjs = require('dayjs');
+var rolldate_min = require('../../../node_modules/.pnpm/rolldate@3.1.3/node_modules/rolldate/dist/rolldate.min.cjs');
+var rightIcon = require('../../common/right-icon/right-icon.cjs');
+
+"use strict";
+const IBizDatePicker = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizDatePicker",
+  props: vue3Util.getDatePickerProps(),
+  emits: vue3Util.getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("date-picker");
+    const c = props.controller;
+    const editorModel = c.model;
+    const currentYear = dayjs().year();
+    const beginYear = currentYear - 100;
+    const endYear = currentYear + 100;
+    const minStep = 1;
+    const rollDateInstance = vue.ref(null);
+    const lang = {
+      title: "\u9009\u62E9\u65E5\u671F",
+      cancel: "\u53D6\u6D88",
+      confirm: "\u786E\u8BA4",
+      year: "\u5E74",
+      month: "\u6708",
+      day: "\u65E5",
+      hour: "\u65F6",
+      min: "\u5206",
+      sec: "\u79D2"
+    };
+    const editorRef = vue.ref();
+    const format = vue.ref("YYYY-MM-DD hh:mm:ss");
+    const valueFormat = c.valueFormat;
+    if (valueFormat) {
+      format.value = valueFormat;
+    }
+    const formatValue = vue.ref();
+    vue.watch(() => props.value, (newVal, oldVal) => {
+      if (newVal && newVal !== oldVal) {
+        const formatVal = dayjs(newVal).format(valueFormat);
+        if (formatVal !== "Invalid Date") {
+          formatValue.value = formatVal;
+        } else {
+          formatValue.value = newVal;
+        }
+      }
+    }, {
+      immediate: true
+    });
+    const onConfirm = (value) => {
+      emit("change", value);
+    };
+    const onFocus = () => {
+      emit("focus");
+    };
+    const onBlur = () => {
+      emit("blur");
+    };
+    vue.onMounted(() => {
+      const el = editorRef.value;
+      if (el) {
+        rollDateInstance.value = new rolldate_min.default({
+          el,
+          format: format.value,
+          beginYear,
+          endYear,
+          minStep,
+          lang,
+          value: formatValue.value,
+          confirm: (value) => {
+            onConfirm(value);
+            return value;
+          },
+          init: () => {
+            if (props.disabled || props.readonly) {
+              return false;
+            }
+          }
+        });
+      }
+    });
+    return {
+      ns,
+      c,
+      editorModel,
+      format,
+      formatValue,
+      onFocus,
+      onBlur,
+      editorRef
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : ""]
+    }, [this.readonly ? this.formatValue : [vue.createVNode(vue.resolveComponent("van-field"), null, {
+      input: vue.createVNode("input", {
+        "ref": "editorRef",
+        "type": "text",
+        "value": this.formatValue,
+        "placeholder": this.c.placeHolder,
+        "onBlur": this.onBlur,
+        "onFocus": this.onFocus,
+        "disabled": this.disabled,
+        "readonly": this.readonly
+      }, null),
+      "right-icon": vue.createVNode(rightIcon.IBizCommonRightIcon, null, null)
+    })]]);
+  }
+});
+
+exports.IBizDatePicker = IBizDatePicker;

package/lib/editor/date-picker/ibiz-date-picker/ibiz-date-picker.css

@@ -0,0 +1 @@
+.ibiz-date-picker input{width:100%;font-size:var(--ibiz-form-item-font-size);color:var(--ibiz-form-item-text-color);text-align:inherit;background-color:transparent;border:none;border-color:var(--ibiz-form-item-border-color);box-shadow:none}.ibiz-date-picker input::-moz-placeholder{color:var(--ibiz-form-item-placeholder-color)}.ibiz-date-picker input::placeholder{color:var(--ibiz-form-item-placeholder-color)}.ibiz-date-picker input[disabled]{color:var(--ibiz-form-item-disabled-color);background-color:var(--ibiz-form-item-disabled-bg-color);border-color:var(--ibiz-form-item-disabled-border-color)}.ibiz-date-picker--readonly{color:var(--ibiz-form-item-readonly-color)}

package/lib/editor/date-picker/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var ibizDatePicker = require('./ibiz-date-picker/ibiz-date-picker.cjs');
+var datePickerEditor_controller = require('./date-picker-editor.controller.cjs');
+var datePickerEditor_provider = require('./date-picker-editor.provider.cjs');
+
+"use strict";
+
+exports.IBizDatePicker = ibizDatePicker.IBizDatePicker;
+exports.DatePickerEditorController = datePickerEditor_controller.DatePickerEditorController;
+exports.DatePickerEditorProvider = datePickerEditor_provider.DatePickerEditorProvider;

package/lib/editor/date-range/date-range-editor.controller.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+var runtime = require('@ibiz-template/runtime');
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class DateRangeEditorController extends runtime.EditorController {
+  constructor() {
+    super(...arguments);
+    /**
+     * 值格式化
+     * @return {*}
+     * @author: zhujiamin
+     * @Date: 2022-08-25 14:33:14
+     */
+    __publicField(this, "valueFormat");
+  }
+  /**
+   * 根据编辑器类型获取格式化
+   *
+   * @author lxm
+   * @date 2022-11-03 16:11:21
+   * @public
+   * @returns {*}  {string}
+   */
+  getFormatByType() {
+    switch (this.model.editorType) {
+      case "MOBDATERANGE":
+        return "YYYY-MM-DD hh:mm:ss";
+      case "MOBDATERANGE_NOTIME":
+        return "YYYY-MM-DD";
+      default:
+        return "YYYY-MM-DD hh:mm:ss";
+    }
+  }
+  async onInit() {
+    super.onInit();
+    this.valueFormat = this.getFormatByType();
+  }
+}
+
+exports.DateRangeEditorController = DateRangeEditorController;

package/lib/editor/date-range/date-range-editor.provider.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var dateRangeEditor_controller = require('./date-range-editor.controller.cjs');
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class DateRangeEditorProvider {
+  constructor() {
+    __publicField(this, "formEditor", "IBizDateRangePicker");
+    __publicField(this, "gridEditor", "IBizDateRangePicker");
+  }
+  async createController(editorModel, parentController) {
+    const c = new dateRangeEditor_controller.DateRangeEditorController(editorModel, parentController);
+    await c.init();
+    return c;
+  }
+}
+
+exports.DateRangeEditorProvider = DateRangeEditorProvider;

package/lib/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.cjs

@@ -0,0 +1,194 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./ibiz-date-range-picker.css');
+var rolldate_min = require('../../../node_modules/.pnpm/rolldate@3.1.3/node_modules/rolldate/dist/rolldate.min.cjs');
+var dayjs = require('dayjs');
+
+"use strict";
+const IBizDateRangePicker = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizDateRangePicker",
+  props: vue3Util.getDateRangeProps(),
+  emits: vue3Util.getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("date-range-picker");
+    const c = props.controller;
+    const editorModel = c.model;
+    const currentYear = dayjs().year();
+    const beginYear = currentYear - 100;
+    const endYear = currentYear + 100;
+    const minStep = 1;
+    const items = [];
+    const lang = {
+      title: "\u9009\u62E9\u65E5\u671F",
+      cancel: "\u53D6\u6D88",
+      confirm: "\u786E\u8BA4",
+      year: "\u5E74",
+      month: "\u6708",
+      day: "\u65E5",
+      hour: "\u65F6",
+      min: "\u5206",
+      sec: "\u79D2"
+    };
+    let valueSeparator = ";";
+    let startPlaceHolder = "";
+    let endPlaceHolder = "";
+    let rangeSeparator = "~";
+    const startEditorRef = vue.ref();
+    const endEditorRef = vue.ref();
+    if (editorModel.editorParams) {
+      if (editorModel.editorParams.valueSeparator) {
+        valueSeparator = editorModel.editorParams.valueSeparator;
+      }
+      if (editorModel.editorParams.startPlaceHolder) {
+        startPlaceHolder = editorModel.editorParams.startPlaceHolder;
+      }
+      if (editorModel.editorParams.endPlaceHolder) {
+        endPlaceHolder = editorModel.editorParams.endPlaceHolder;
+      }
+      if (editorModel.editorParams.rangeSeparator) {
+        rangeSeparator = editorModel.editorParams.rangeSeparator;
+      }
+    }
+    const format = vue.ref("YYYY-MM-DD");
+    const valueFormat = c.valueFormat;
+    if (valueFormat) {
+      format.value = valueFormat;
+    }
+    const refFormItem = vue.ref([]);
+    const editorItems = editorModel.editorItems;
+    if (editorItems && editorItems.length > 0) {
+      const editorItemNames = editorItems.map((item) => item.id);
+      refFormItem.value = editorItemNames;
+    }
+    const valueArray = vue.computed(() => {
+      if (refFormItem.value && refFormItem.value.length > 0) {
+        const array = refFormItem.value.map((name) => {
+          return props.data[name] || "";
+        });
+        return array;
+      }
+      if (props.value && typeof props.value === "string") {
+        return props.value.split(valueSeparator);
+      }
+      return [];
+    });
+    const startFormatValue = vue.computed(() => {
+      var _a;
+      return ((_a = valueArray.value) == null ? void 0 : _a[0]) || "";
+    });
+    const endFormatValue = vue.computed(() => {
+      var _a;
+      return ((_a = valueArray.value) == null ? void 0 : _a[1]) || "";
+    });
+    const onFocus = () => {
+      emit("focus");
+    };
+    const onBlur = () => {
+      emit("blur");
+    };
+    const onConfirm = (value, index) => {
+      const formatVal = dayjs(value).format(valueFormat);
+      if (formatVal !== "Invalid Date") {
+        items[index] = formatVal;
+      } else {
+        items[index] = value;
+      }
+      if (items.length === 2) {
+        emit("change", items.join(valueSeparator));
+      }
+      if (refFormItem.value) {
+        const valueName = refFormItem.value[index];
+        emit("change", value, valueName);
+      }
+    };
+    vue.onMounted(() => {
+      const rollDateOpt = {
+        format: format.value,
+        beginYear,
+        endYear,
+        minStep,
+        lang,
+        init: () => {
+          if (props.disabled || props.readonly) {
+            return false;
+          }
+        }
+      };
+      const el = startEditorRef.value;
+      if (el) {
+        new rolldate_min.default({
+          el,
+          value: startFormatValue.value,
+          confirm: (value) => {
+            onConfirm(value, 0);
+            return value;
+          },
+          ...rollDateOpt
+        });
+      }
+      const el2 = endEditorRef.value;
+      if (el2) {
+        new rolldate_min.default({
+          el: el2,
+          value: endFormatValue.value,
+          confirm: (value) => {
+            onConfirm(value, 1);
+            return value;
+          },
+          ...rollDateOpt
+        });
+      }
+    });
+    return {
+      ns,
+      c,
+      refFormItem,
+      format,
+      valueSeparator,
+      startPlaceHolder,
+      endPlaceHolder,
+      rangeSeparator,
+      startEditorRef,
+      endEditorRef,
+      endFormatValue,
+      startFormatValue,
+      onFocus,
+      onBlur
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": [this.ns.b()]
+    }, [vue.createVNode(vue.resolveComponent("van-field"), null, {
+      input: vue.createVNode("input", {
+        "ref": "startEditorRef",
+        "type": "text",
+        "value": this.startFormatValue,
+        "placeholder": this.startPlaceHolder,
+        "onBlur": this.onBlur,
+        "onFocus": this.onFocus,
+        "disabled": this.disabled,
+        "readonly": this.readonly
+      }, null)
+    }), vue.createVNode("div", {
+      "class": this.ns.b("separator")
+    }, [this.rangeSeparator]), vue.createVNode(vue.resolveComponent("van-field"), null, {
+      input: vue.createVNode("input", {
+        "ref": "endEditorRef",
+        "type": "text",
+        "value": this.endFormatValue,
+        "placeholder": this.endPlaceHolder,
+        "onBlur": this.onBlur,
+        "onFocus": this.onFocus,
+        "disabled": this.disabled,
+        "readonly": this.readonly
+      }, null)
+    })]);
+  }
+});
+
+exports.IBizDateRangePicker = IBizDateRangePicker;

package/lib/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.css

@@ -0,0 +1 @@
+.ibiz-date-range-picker{display:flex;align-items:center;justify-content:center}.ibiz-date-range-picker input{width:100%;font-size:var(--ibiz-form-item-font-size);color:var(--ibiz-form-item-text-color);text-align:center;background-color:transparent;border:none;border-color:var(--ibiz-form-item-border-color);box-shadow:none}

package/lib/editor/date-range/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var ibizDateRangePicker = require('./ibiz-date-range-picker/ibiz-date-range-picker.cjs');
+var dateRangeEditor_controller = require('./date-range-editor.controller.cjs');
+var dateRangeEditor_provider = require('./date-range-editor.provider.cjs');
+
+"use strict";
+
+exports.IBizDateRangePicker = ibizDateRangePicker.IBizDateRangePicker;
+exports.DateRangeEditorController = dateRangeEditor_controller.DateRangeEditorController;
+exports.DateRangeEditorProvider = dateRangeEditor_provider.DateRangeEditorProvider;

package/lib/editor/dropdown-list/dropdown-list-editor.controller.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+var runtime = require('@ibiz-template/runtime');
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class DropDownListEditorController extends runtime.CodeListEditorController {
+  constructor() {
+    super(...arguments);
+    /**
+     * 占位
+     * @return {*}
+     * @author: zhujiamin
+     * @Date: 2022-08-25 14:33:14
+     */
+    __publicField(this, "placeHolder", "\u8BF7\u9009\u62E9");
+    /**
+     * 是否多选
+     * @return {*}
+     * @author: zhujiamin
+     * @Date: 2022-08-25 14:33:14
+     */
+    __publicField(this, "multiple", false);
+  }
+  async onInit() {
+    super.onInit();
+  }
+}
+
+exports.DropDownListEditorController = DropDownListEditorController;

package/lib/editor/dropdown-list/dropdown-list-editor.provider.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var dropdownListEditor_controller = require('./dropdown-list-editor.controller.cjs');
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class DropDownListEditorProvider {
+  constructor() {
+    __publicField(this, "formEditor", "IBizDropdown");
+    __publicField(this, "gridEditor", "IBizDropdown");
+  }
+  async createController(editorModel, parentController) {
+    const c = new dropdownListEditor_controller.DropDownListEditorController(editorModel, parentController);
+    await c.init();
+    return c;
+  }
+}
+
+exports.DropDownListEditorProvider = DropDownListEditorProvider;

package/lib/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.cjs

@@ -0,0 +1,151 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./ibiz-dropdown.css');
+var rightIcon = require('../../common/right-icon/right-icon.cjs');
+
+"use strict";
+const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizDropdown",
+  props: vue3Util.getDropdownProps(),
+  emits: vue3Util.getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("dropdown");
+    const c = props.controller;
+    const items = vue.ref([]);
+    const showPicker = vue.ref(false);
+    const hasChildren = vue.ref(false);
+    const treeNodes = vue.ref([]);
+    const handleTreeNodes = (nodes) => {
+      if (nodes.length === 0) {
+        return [];
+      }
+      const list = [];
+      nodes.forEach((codeItem) => {
+        const tempObj = {
+          label: codeItem.text,
+          value: codeItem.value,
+          children: []
+        };
+        if (codeItem.children && codeItem.children.length > 0) {
+          tempObj.children = handleTreeNodes(codeItem.children);
+        }
+        list.push(tempObj);
+      });
+      return list;
+    };
+    c.loadCodeList(props.data).then((codeList) => {
+      items.value = codeList;
+      for (let i = 0; i < items.value.length; i++) {
+        const _item = items.value[i];
+        if (_item.children) {
+          hasChildren.value = true;
+          treeNodes.value = handleTreeNodes(codeList);
+          break;
+        }
+      }
+    });
+    const curValue = vue.ref("");
+    vue.watch(() => props.value, (newVal) => {
+      if (newVal || newVal === null) {
+        curValue.value = newVal;
+        if (newVal === null) {
+          curValue.value = "";
+        }
+        const index = items.value.findIndex((item) => Object.is(item.value, newVal));
+        if (index !== -1) {
+          curValue.value = items.value[index].text;
+        }
+      }
+    }, {
+      immediate: true
+    });
+    const valueText = vue.computed(() => {
+      const valueArr = Array.isArray(curValue.value) ? curValue.value : [curValue.value];
+      return items.value.filter((item) => valueArr.includes(item.value)).map((item) => item.text).join(",");
+    });
+    const editorRef = vue.ref();
+    if (props.autoFocus) {
+      vue.watch(editorRef, (newVal) => {
+        if (newVal) {
+          newVal.focus();
+        }
+      });
+    }
+    const onFocus = () => {
+      emit("focus");
+    };
+    const onBlur = () => {
+      setTimeout(() => {
+        emit("blur");
+      }, 100);
+    };
+    const onConfirm = ({
+      selectedOptions
+    }) => {
+      showPicker.value = false;
+      if (Array.isArray(selectedOptions)) {
+        curValue.value = selectedOptions[0].text;
+        const emitVal = selectedOptions.map((val) => {
+          return val.value;
+        }).join(",");
+        emit("change", selectedOptions.length === 0 ? null : emitVal);
+      }
+    };
+    return {
+      ns,
+      c,
+      curValue,
+      items,
+      valueText,
+      hasChildren,
+      onBlur,
+      onFocus,
+      editorRef,
+      treeNodes,
+      showPicker,
+      onConfirm
+    };
+  },
+  render() {
+    const editContent = this.hasChildren ? "\u6682\u672A\u652F\u6301\u6811\u5F62\u4E0B\u62C9\u9009\u62E9" : [vue.createVNode(vue.resolveComponent("van-field"), {
+      "ref": "editorRef",
+      "modelValue": this.curValue,
+      "onUpdate:modelValue": ($event) => this.curValue = $event,
+      "clearable": true,
+      "readonly": true,
+      "class": [this.ns.e("select")],
+      "placeholder": this.c.placeHolder,
+      "onBlur": this.onBlur,
+      "onFocus": this.onFocus,
+      "onClick": () => {
+        if (!this.disabled) {
+          this.showPicker = true;
+        }
+      }
+    }, {
+      "right-icon": vue.createVNode(rightIcon.IBizCommonRightIcon, null, null)
+    }), vue.createVNode(vue.resolveComponent("van-popup"), {
+      "show": this.showPicker,
+      "onUpdate:show": ($event) => this.showPicker = $event,
+      "round": true,
+      "position": "bottom"
+    }, {
+      default: () => [vue.createVNode(vue.resolveComponent("van-picker"), {
+        "columns": this.items,
+        "onCancel": () => {
+          this.showPicker = false;
+        },
+        "onConfirm": this.onConfirm
+      }, null)]
+    })];
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : ""]
+    }, [this.readonly ? this.valueText : editContent]);
+  }
+});
+
+exports.IBizDropdown = IBizDropdown;

package/lib/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.css

@@ -0,0 +1 @@
+.ibiz-dropdown{height:100%}.ibiz-dropdown__select{height:100%;font-size:var(--ibiz-form-item-font-size)}.ibiz-dropdown__select::after{display:none}.ibiz-dropdown__select .van-field__body{height:100%}.ibiz-dropdown .van-picker .van-picker__mask{background-image:var(--ibiz-color-overlay-bg)}

package/lib/editor/dropdown-list/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var ibizDropdown = require('./ibiz-dropdown/ibiz-dropdown.cjs');
+var dropdownListEditor_controller = require('./dropdown-list-editor.controller.cjs');
+var dropdownListEditor_provider = require('./dropdown-list-editor.provider.cjs');
+
+"use strict";
+
+exports.IBizDropdown = ibizDropdown.IBizDropdown;
+exports.DropDownListEditorController = dropdownListEditor_controller.DropDownListEditorController;
+exports.DropDownListEditorProvider = dropdownListEditor_provider.DropDownListEditorProvider;