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

package/es/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.mjs

@@ -0,0 +1,192 @@
+import { ref, computed, onMounted, resolveComponent, createVNode, defineComponent } from 'vue';
+import { getDateRangeProps, getEditorEmits, useNamespace } from '@ibiz-template/vue3-util';
+import './ibiz-date-range-picker.css';
+import RollDate from '../../../node_modules/.pnpm/rolldate@3.1.3/node_modules/rolldate/dist/rolldate.min.mjs';
+import dayjs from 'dayjs';
+
+"use strict";
+const IBizDateRangePicker = /* @__PURE__ */ defineComponent({
+  name: "IBizDateRangePicker",
+  props: getDateRangeProps(),
+  emits: getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = 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 = ref();
+    const endEditorRef = 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 = ref("YYYY-MM-DD");
+    const valueFormat = c.valueFormat;
+    if (valueFormat) {
+      format.value = valueFormat;
+    }
+    const refFormItem = ref([]);
+    const editorItems = editorModel.editorItems;
+    if (editorItems && editorItems.length > 0) {
+      const editorItemNames = editorItems.map((item) => item.id);
+      refFormItem.value = editorItemNames;
+    }
+    const valueArray = 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 = computed(() => {
+      var _a;
+      return ((_a = valueArray.value) == null ? void 0 : _a[0]) || "";
+    });
+    const endFormatValue = 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);
+      }
+    };
+    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({
+          el,
+          value: startFormatValue.value,
+          confirm: (value) => {
+            onConfirm(value, 0);
+            return value;
+          },
+          ...rollDateOpt
+        });
+      }
+      const el2 = endEditorRef.value;
+      if (el2) {
+        new RollDate({
+          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 createVNode("div", {
+      "class": [this.ns.b()]
+    }, [createVNode(resolveComponent("van-field"), null, {
+      input: 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)
+    }), createVNode("div", {
+      "class": this.ns.b("separator")
+    }, [this.rangeSeparator]), createVNode(resolveComponent("van-field"), null, {
+      input: 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)
+    })]);
+  }
+});
+
+export { IBizDateRangePicker };

package/es/editor/date-range/index.d.ts

@@ -0,0 +1,3 @@
+export { IBizDateRangePicker } from './ibiz-date-range-picker/ibiz-date-range-picker';
+export * from './date-range-editor.controller';
+export * from './date-range-editor.provider';

package/es/editor/date-range/index.mjs

@@ -0,0 +1,5 @@
+export { IBizDateRangePicker } from './ibiz-date-range-picker/ibiz-date-range-picker.mjs';
+export { DateRangeEditorController } from './date-range-editor.controller.mjs';
+export { DateRangeEditorProvider } from './date-range-editor.provider.mjs';
+
+"use strict";

package/es/editor/dropdown-list/dropdown-list-editor.controller.d.ts

@@ -0,0 +1,25 @@
+import { CodeListEditorController } from '@ibiz-template/runtime';
+import { IDropDownList } from '@ibiz/model-core';
+/**
+ * 下拉列表框编辑器控制器
+ * @return {*}
+ * @author: zhujiamin
+ * @Date: 2022-08-25 10:57:58
+ */
+export declare class DropDownListEditorController extends CodeListEditorController<IDropDownList> {
+    /**
+     * 占位
+     * @return {*}
+     * @author: zhujiamin
+     * @Date: 2022-08-25 14:33:14
+     */
+    placeHolder: string;
+    /**
+     * 是否多选
+     * @return {*}
+     * @author: zhujiamin
+     * @Date: 2022-08-25 14:33:14
+     */
+    multiple: boolean;
+    protected onInit(): Promise<void>;
+}

package/es/editor/dropdown-list/dropdown-list-editor.controller.mjs

@@ -0,0 +1,33 @@
+import { CodeListEditorController } from '@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 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();
+  }
+}
+
+export { DropDownListEditorController };

package/es/editor/dropdown-list/dropdown-list-editor.provider.d.ts

@@ -0,0 +1,17 @@
+import { IEditorContainerController, IEditorProvider } from '@ibiz-template/runtime';
+import { IDropDownList } from '@ibiz/model-core';
+import { DropDownListEditorController } from './dropdown-list-editor.controller';
+/**
+ * 多选框列表编辑器适配器
+ *
+ * @author lxm
+ * @date 2022-09-19 22:09:03
+ * @export
+ * @class DropDownListEditorProvider
+ * @implements {EditorProvider}
+ */
+export declare class DropDownListEditorProvider implements IEditorProvider {
+    formEditor: string;
+    gridEditor: string;
+    createController(editorModel: IDropDownList, parentController: IEditorContainerController): Promise<DropDownListEditorController>;
+}

package/es/editor/dropdown-list/dropdown-list-editor.provider.mjs

@@ -0,0 +1,22 @@
+import { DropDownListEditorController } from './dropdown-list-editor.controller.mjs';
+
+"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 DropDownListEditorController(editorModel, parentController);
+    await c.init();
+    return c;
+  }
+}
+
+export { DropDownListEditorProvider };

package/es/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/es/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.d.ts

@@ -0,0 +1,61 @@
+import { Ref } from 'vue';
+import './ibiz-dropdown.scss';
+import { DropDownListEditorController } from '../dropdown-list-editor.controller';
+export declare const IBizDropdown: import("vue").DefineComponent<{
+    value: (StringConstructor | NumberConstructor)[];
+    controller: import("@ibiz-template/vue3-util").RequiredProp<import("vue").PropType<DropDownListEditorController>, undefined, undefined>;
+    data: import("@ibiz-template/vue3-util").RequiredProp<import("vue").PropType<IData>, undefined, undefined>;
+    disabled: {
+        type: BooleanConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    c: DropDownListEditorController;
+    curValue: Ref<string | number | undefined>;
+    items: Ref<readonly IData[]>;
+    valueText: import("vue").ComputedRef<string>;
+    hasChildren: Ref<boolean>;
+    onBlur: () => void;
+    onFocus: () => void;
+    editorRef: Ref<any>;
+    treeNodes: Ref<IData[]>;
+    showPicker: Ref<boolean>;
+    onConfirm: ({ selectedOptions }: {
+        selectedOptions: IData[];
+    }) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (_value: unknown, _name?: string | undefined) => boolean;
+    blur: () => boolean;
+    focus: () => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: (StringConstructor | NumberConstructor)[];
+    controller: import("@ibiz-template/vue3-util").RequiredProp<import("vue").PropType<DropDownListEditorController>, undefined, undefined>;
+    data: import("@ibiz-template/vue3-util").RequiredProp<import("vue").PropType<IData>, undefined, undefined>;
+    disabled: {
+        type: BooleanConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onFocus?: (() => any) | undefined;
+    onBlur?: (() => any) | undefined;
+    onChange?: ((_value: unknown, _name?: string | undefined) => any) | undefined;
+}, {
+    disabled: boolean;
+    readonly: boolean;
+    autoFocus: boolean;
+}, {}>;

package/es/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.mjs

@@ -0,0 +1,149 @@
+import { ref, watch, computed, resolveComponent, createVNode, defineComponent } from 'vue';
+import { getDropdownProps, getEditorEmits, useNamespace } from '@ibiz-template/vue3-util';
+import './ibiz-dropdown.css';
+import { IBizCommonRightIcon } from '../../common/right-icon/right-icon.mjs';
+
+"use strict";
+const IBizDropdown = /* @__PURE__ */ defineComponent({
+  name: "IBizDropdown",
+  props: getDropdownProps(),
+  emits: getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("dropdown");
+    const c = props.controller;
+    const items = ref([]);
+    const showPicker = ref(false);
+    const hasChildren = ref(false);
+    const treeNodes = 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 = ref("");
+    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 = 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 = ref();
+    if (props.autoFocus) {
+      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" : [createVNode(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": createVNode(IBizCommonRightIcon, null, null)
+    }), createVNode(resolveComponent("van-popup"), {
+      "show": this.showPicker,
+      "onUpdate:show": ($event) => this.showPicker = $event,
+      "round": true,
+      "position": "bottom"
+    }, {
+      default: () => [createVNode(resolveComponent("van-picker"), {
+        "columns": this.items,
+        "onCancel": () => {
+          this.showPicker = false;
+        },
+        "onConfirm": this.onConfirm
+      }, null)]
+    })];
+    return createVNode("div", {
+      "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : ""]
+    }, [this.readonly ? this.valueText : editContent]);
+  }
+});
+
+export { IBizDropdown };

package/es/editor/dropdown-list/index.d.ts

@@ -0,0 +1,3 @@
+export { IBizDropdown } from './ibiz-dropdown/ibiz-dropdown';
+export * from './dropdown-list-editor.controller';
+export * from './dropdown-list-editor.provider';

package/es/editor/dropdown-list/index.mjs

@@ -0,0 +1,5 @@
+export { IBizDropdown } from './ibiz-dropdown/ibiz-dropdown.mjs';
+export { DropDownListEditorController } from './dropdown-list-editor.controller.mjs';
+export { DropDownListEditorProvider } from './dropdown-list-editor.provider.mjs';
+
+"use strict";

package/es/editor/index.d.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue';
+export declare const IBizEditor: {
+    install: (v: App) => void;
+};
+export default IBizEditor;