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

package/es/editor/date-picker/date-picker-editor.controller.d.ts

@@ -0,0 +1,34 @@
+import { EditorController } from '@ibiz-template/runtime';
+import { IDatePicker } from '@ibiz/model-core';
+/**
+ * 选项框列表编辑器控制器
+ * @return {*}
+ * @author: zhujiamin
+ * @Date: 2022-08-25 10:57:58
+ */
+export declare class DatePickerEditorController extends EditorController<IDatePicker> {
+    /**
+     * 占位
+     * @return {*}
+     * @author: zhujiamin
+     * @Date: 2022-08-25 14:33:14
+     */
+    placeHolder: string;
+    /**
+     * 根据编辑器类型获取格式化
+     *
+     * @author lxm
+     * @date 2022-11-03 16:11:21
+     * @protected
+     * @returns {*}  {string}
+     */
+    getFormatByType(editorType: string | undefined): string;
+    /**
+     * 值格式化
+     * @return {*}
+     * @author: zhujiamin
+     * @Date: 2022-08-25 14:33:14
+     */
+    valueFormat: string | undefined;
+    protected onInit(): Promise<void>;
+}

package/es/editor/date-picker/date-picker-editor.controller.mjs

@@ -0,0 +1,62 @@
+import { EditorController } 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 DatePickerEditorController extends EditorController {
+  constructor() {
+    super(...arguments);
+    /**
+     * 占位
+     * @return {*}
+     * @author: zhujiamin
+     * @Date: 2022-08-25 14:33:14
+     */
+    __publicField(this, "placeHolder", "\u8BF7\u9009\u62E9\u65E5\u671F");
+    /**
+     * 值格式化
+     * @return {*}
+     * @author: zhujiamin
+     * @Date: 2022-08-25 14:33:14
+     */
+    __publicField(this, "valueFormat");
+  }
+  /**
+   * 根据编辑器类型获取格式化
+   *
+   * @author lxm
+   * @date 2022-11-03 16:11:21
+   * @protected
+   * @returns {*}  {string}
+   */
+  getFormatByType(editorType) {
+    switch (editorType) {
+      case "MOBDATE":
+        return "YYYY-MM-DD hh:mm:ss";
+      case "MOBDATE_SECOND":
+        return "YYYY-MM-DD hh:mm:ss";
+      case "MOBDATE_NOTIME":
+        return "YYYY-MM-DD";
+      case "MOBDATE_HOUR":
+        return "YYYY-MM-DD hh";
+      case "MOBDATE_MINUTE":
+        return "YYYY-MM-DD hh:mm";
+      case "MOBDATE_NODAY":
+        return "hh:mm:ss";
+      case "MOBDATE_NODAY_NOSECOND":
+        return "hh:mm";
+      default:
+        return "YYYY-MM-DD hh:mm:ss";
+    }
+  }
+  async onInit() {
+    super.onInit();
+    this.valueFormat = this.getFormatByType(this.model.editorType);
+  }
+}
+
+export { DatePickerEditorController };

package/es/editor/date-picker/date-picker-editor.provider.d.ts

@@ -0,0 +1,17 @@
+import { IEditorContainerController, IEditorProvider } from '@ibiz-template/runtime';
+import { IDatePicker } from '@ibiz/model-core';
+import { DatePickerEditorController } from './date-picker-editor.controller';
+/**
+ * 日期时间选择器编辑器适配器
+ *
+ * @author lxm
+ * @date 2022-09-19 22:09:03
+ * @export
+ * @class DatePickerEditorProvider
+ * @implements {EditorProvider}
+ */
+export declare class DatePickerEditorProvider implements IEditorProvider {
+    formEditor: string;
+    gridEditor: string;
+    createController(editorModel: IDatePicker, parentController: IEditorContainerController): Promise<DatePickerEditorController>;
+}

package/es/editor/date-picker/date-picker-editor.provider.mjs

@@ -0,0 +1,22 @@
+import { DatePickerEditorController } from './date-picker-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 DatePickerEditorProvider {
+  constructor() {
+    __publicField(this, "formEditor", "IBizDatePicker");
+    __publicField(this, "gridEditor", "IBizDatePicker");
+  }
+  async createController(editorModel, parentController) {
+    const c = new DatePickerEditorController(editorModel, parentController);
+    await c.init();
+    return c;
+  }
+}
+
+export { DatePickerEditorProvider };

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

@@ -0,0 +1,55 @@
+import { Ref } from 'vue';
+import './ibiz-date-picker.scss';
+import { DatePickerEditorController } from '../date-picker-editor.controller';
+export declare const IBizDatePicker: import("vue").DefineComponent<{
+    value: (StringConstructor | NumberConstructor)[];
+    controller: import("@ibiz-template/vue3-util").RequiredProp<import("vue").PropType<DatePickerEditorController>, 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: DatePickerEditorController;
+    editorModel: import("@ibiz/model-core").IDatePicker;
+    format: Ref<string>;
+    formatValue: Ref<any>;
+    onFocus: () => void;
+    onBlur: () => void;
+    editorRef: Ref<any>;
+}, 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<DatePickerEditorController>, 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/date-picker/ibiz-date-picker/ibiz-date-picker.mjs

@@ -0,0 +1,116 @@
+import { ref, watch, onMounted, resolveComponent, createVNode, defineComponent } from 'vue';
+import { getDatePickerProps, getEditorEmits, useNamespace } from '@ibiz-template/vue3-util';
+import './ibiz-date-picker.css';
+import dayjs from 'dayjs';
+import RollDate from '../../../node_modules/.pnpm/rolldate@3.1.3/node_modules/rolldate/dist/rolldate.min.mjs';
+import { IBizCommonRightIcon } from '../../common/right-icon/right-icon.mjs';
+
+"use strict";
+const IBizDatePicker = /* @__PURE__ */ defineComponent({
+  name: "IBizDatePicker",
+  props: getDatePickerProps(),
+  emits: getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = 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 = 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 = ref();
+    const format = ref("YYYY-MM-DD hh:mm:ss");
+    const valueFormat = c.valueFormat;
+    if (valueFormat) {
+      format.value = valueFormat;
+    }
+    const formatValue = ref();
+    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");
+    };
+    onMounted(() => {
+      const el = editorRef.value;
+      if (el) {
+        rollDateInstance.value = new RollDate({
+          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 createVNode("div", {
+      "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : ""]
+    }, [this.readonly ? this.formatValue : [createVNode(resolveComponent("van-field"), null, {
+      input: 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": createVNode(IBizCommonRightIcon, null, null)
+    })]]);
+  }
+});
+
+export { IBizDatePicker };

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

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

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

@@ -0,0 +1,5 @@
+export { IBizDatePicker } from './ibiz-date-picker/ibiz-date-picker.mjs';
+export { DatePickerEditorController } from './date-picker-editor.controller.mjs';
+export { DatePickerEditorProvider } from './date-picker-editor.provider.mjs';
+
+"use strict";

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

@@ -0,0 +1,28 @@
+import { EditorController } from '@ibiz-template/runtime';
+import { IDateRange } from '@ibiz/model-core';
+/**
+ * 时间范围编辑器控制器
+ *
+ * @export
+ * @class DateRangeEditorController
+ * @extends {EditorController}
+ */
+export declare class DateRangeEditorController extends EditorController<IDateRange> {
+    /**
+     * 根据编辑器类型获取格式化
+     *
+     * @author lxm
+     * @date 2022-11-03 16:11:21
+     * @public
+     * @returns {*}  {string}
+     */
+    getFormatByType(): string;
+    /**
+     * 值格式化
+     * @return {*}
+     * @author: zhujiamin
+     * @Date: 2022-08-25 14:33:14
+     */
+    valueFormat: string | undefined;
+    protected onInit(): Promise<void>;
+}

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

@@ -0,0 +1,45 @@
+import { EditorController } 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 DateRangeEditorController extends 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();
+  }
+}
+
+export { DateRangeEditorController };

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

@@ -0,0 +1,15 @@
+import { IEditorContainerController, IEditorProvider } from '@ibiz-template/runtime';
+import { IDateRange } from '@ibiz/model-core';
+import { DateRangeEditorController } from './date-range-editor.controller';
+/**
+ * 数值范围编辑器适配器
+ *
+ * @export
+ * @class DateRangeEditorProvider
+ * @implements {EditorProvider}
+ */
+export declare class DateRangeEditorProvider implements IEditorProvider {
+    formEditor: string;
+    gridEditor: string;
+    createController(editorModel: IDateRange, parentController: IEditorContainerController): Promise<DateRangeEditorController>;
+}

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

@@ -0,0 +1,22 @@
+import { DateRangeEditorController } from './date-range-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 DateRangeEditorProvider {
+  constructor() {
+    __publicField(this, "formEditor", "IBizDateRangePicker");
+    __publicField(this, "gridEditor", "IBizDateRangePicker");
+  }
+  async createController(editorModel, parentController) {
+    const c = new DateRangeEditorController(editorModel, parentController);
+    await c.init();
+    return c;
+  }
+}
+
+export { DateRangeEditorProvider };

package/es/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/es/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.d.ts

@@ -0,0 +1,61 @@
+import { Ref } from 'vue';
+import './ibiz-date-range-picker.scss';
+import { DateRangeEditorController } from '../date-range-editor.controller';
+export declare const IBizDateRangePicker: import("vue").DefineComponent<{
+    value: (StringConstructor | NumberConstructor)[];
+    controller: import("@ibiz-template/vue3-util").RequiredProp<import("vue").PropType<DateRangeEditorController>, 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: DateRangeEditorController;
+    refFormItem: Ref<string[]>;
+    format: Ref<string>;
+    valueSeparator: string;
+    startPlaceHolder: string;
+    endPlaceHolder: string;
+    rangeSeparator: string;
+    startEditorRef: Ref<any>;
+    endEditorRef: Ref<any>;
+    endFormatValue: import("vue").ComputedRef<any>;
+    startFormatValue: import("vue").ComputedRef<any>;
+    onFocus: () => void;
+    onBlur: () => 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<DateRangeEditorController>, 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;
+}, {}>;