@ibiz-template/vue3-components 0.7.31-alpha.0 → 0.7.37-alpha.5

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

@@ -0,0 +1,339 @@
+import { isVNode, ref, createVNode, resolveComponent, watch, onMounted, onBeforeUnmount, defineComponent } from 'vue';
+import { getDatePickerProps, useNamespace } from '@ibiz-template/vue3-util';
+import dayjs from 'dayjs';
+import quarterRangeSelect from './components/quarter-range-select/quarter-range-select.mjs';
+import yearRangeSelect from './components/year-range-select/year-range-select.mjs';
+import weekRangeSelect from './components/week-range-select/week-range-select.mjs';
+import './date-range-select.css';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const IBizDateRangeSelect = /* @__PURE__ */ defineComponent({
+  name: "IBizDateRangeSelect",
+  components: {
+    "bi-quarter-range-select": quarterRangeSelect,
+    "bi-year-range-select": yearRangeSelect,
+    "bi-week-range-select": weekRangeSelect
+  },
+  props: {
+    ...getDatePickerProps(),
+    value: {
+      type: Object
+    }
+  },
+  emits: ["change"],
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("date-range-select");
+    const c = props.controller;
+    const unitValue = ref(c.defaultUnit);
+    const curValue = ref();
+    const timeType = ref("DYNAMIC");
+    const editorRef = ref({
+      DYNAMIC: null,
+      STATIC: null
+    });
+    const popVisible = ref({
+      ALL: false,
+      STATIC: false,
+      DYNAMIC: false
+    });
+    const selectValue = ref();
+    const isOverClose = ref(false);
+    const units = [{
+      value: "DAY",
+      label: ibiz.i18n.t("editor.dateRangeSelect.day")
+    }, {
+      value: "WEEK",
+      label: ibiz.i18n.t("editor.dateRangeSelect.week")
+    }, {
+      value: "MONTH",
+      label: ibiz.i18n.t("editor.dateRangeSelect.month")
+    }, {
+      value: "QUARTER",
+      label: ibiz.i18n.t("editor.dateRangeSelect.quarter")
+    }, {
+      value: "YEAR",
+      label: ibiz.i18n.t("editor.dateRangeSelect.year")
+    }];
+    const timeTypes = [{
+      caption: ibiz.i18n.t("editor.dateRangeSelect.static"),
+      type: "STATIC"
+    }, {
+      caption: ibiz.i18n.t("editor.dateRangeSelect.dynamic"),
+      type: "DYNAMIC"
+    }];
+    const handleTimeToText = (type, value, start, end) => {
+      selectValue.value = c.handleTimeToText(type, unitValue.value, value, start, end);
+    };
+    const initDate = () => {
+      curValue.value = c.initDefaultDate(unitValue.value);
+      const {
+        start,
+        end,
+        emitStart,
+        emitEnd
+      } = props.controller.computedDateTypesTime(unitValue.value, "DYNAMIC", curValue.value[0], curValue.value[1]);
+      handleTimeToText("DYNAMIC", curValue.value, start, end);
+      emit("change", {
+        unit: unitValue.value,
+        type: "DYNAMIC",
+        start: emitStart,
+        end: emitEnd
+      });
+    };
+    const unitChange = () => {
+      initDate();
+    };
+    const renderDateUnit = () => {
+      let _slot;
+      return createVNode("div", {
+        "class": ns.e("date-unit")
+      }, [createVNode("span", {
+        "class": ns.em("date-unit", "label")
+      }, [ibiz.i18n.t("editor.dateRangeSelect.dateUnit")]), createVNode("div", {
+        "class": ns.em("date-unit", "editor")
+      }, [createVNode(resolveComponent("el-select"), {
+        "modelValue": unitValue.value,
+        "onUpdate:modelValue": ($event) => unitValue.value = $event,
+        "class": ns.em("date-unit", "editor-select"),
+        "onChange": unitChange
+      }, _isSlot(_slot = units.map((item) => {
+        return createVNode(resolveComponent("el-option"), {
+          "key": item.value,
+          "value": item.value,
+          "label": item.label
+        }, {
+          default: () => {
+            return item.label;
+          }
+        });
+      })) ? _slot : {
+        default: () => [_slot]
+      })])]);
+    };
+    const renderSelectValue = () => {
+      return createVNode("div", {
+        "class": ns.e("select-value")
+      }, [selectValue.value]);
+    };
+    const onTypeClick = (type, event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      if (popVisible.value.STATIC || popVisible.value.DYNAMIC) {
+        popVisible.value[timeType.value] = false;
+        isOverClose.value = true;
+        editorRef.value[type].handleClose();
+      } else {
+        isOverClose.value = true;
+        timeType.value = type;
+        popVisible.value[type] = true;
+        editorRef.value[type].handleOpen();
+      }
+      if (curValue.value && Array.isArray(curValue.value) && curValue.value.length > 0) {
+        const {
+          start,
+          end
+        } = props.controller.computedDateTypesTime(unitValue.value, timeType.value, curValue.value[0], curValue.value[1]);
+        handleTimeToText(timeType.value, curValue.value, start, end);
+      }
+    };
+    const onTimeChange = (type, value) => {
+      popVisible.value[type] = false;
+      popVisible.value.ALL = false;
+      curValue.value = value;
+      const {
+        start,
+        end,
+        emitStart,
+        emitEnd
+      } = props.controller.computedDateTypesTime(unitValue.value, type, value[0], value[1]);
+      handleTimeToText(type, value, start, end);
+      emit("change", {
+        start: emitStart,
+        end: emitEnd,
+        unit: unitValue.value,
+        type: timeType.value
+      });
+    };
+    const datePanelVisible = (type, visible) => {
+      var _a;
+      if (!visible) {
+        popVisible.value[type] = false;
+        if (!popVisible.value.STATIC && !popVisible.value.DYNAMIC && !isOverClose.value) {
+          popVisible.value.ALL = false;
+        } else {
+          isOverClose.value = false;
+          if (((_a = props.value) == null ? void 0 : _a.type) && timeType.value !== props.value.type) {
+            popVisible.value.ALL = false;
+            onTimeChange(timeType.value, curValue.value);
+          }
+        }
+      }
+    };
+    const onOpen = (_event) => {
+      _event.stopPropagation();
+      _event.preventDefault();
+      popVisible.value.ALL = !popVisible.value.ALL;
+    };
+    const setRef = (tag, el) => {
+      editorRef.value[tag] = el;
+    };
+    const renderTimeRange = (type) => {
+      if (unitValue.value === "QUARTER") {
+        return createVNode(resolveComponent("bi-quarter-range-select"), {
+          "ref": (el) => setRef(type, el),
+          "class": [ns.em("date-type", "editor"), ns.em("date-type", "quarter")],
+          "value": curValue.value,
+          "onVisibleChange": (visible) => datePanelVisible(type, visible),
+          "onChange": (value) => onTimeChange(type, value)
+        }, null);
+      }
+      if (unitValue.value === "YEAR") {
+        return createVNode(resolveComponent("bi-year-range-select"), {
+          "ref": (el) => setRef(type, el),
+          "class": [ns.em("date-type", "editor"), ns.em("date-type", "year")],
+          "value": curValue.value,
+          "onVisibleChange": (visible) => datePanelVisible(type, visible),
+          "onChange": (value) => onTimeChange(type, value)
+        }, null);
+      }
+      if (unitValue.value === "WEEK") {
+        return createVNode(resolveComponent("bi-week-range-select"), {
+          "ref": (el) => setRef(type, el),
+          "class": [ns.em("date-type", "editor"), ns.em("date-type", "week")],
+          "value": curValue.value,
+          "onChange": (value) => onTimeChange(type, value),
+          "onVisibleChange": (visible) => datePanelVisible(type, visible)
+        }, null);
+      }
+      const unitType = unitValue.value === "DAY" ? "daterange" : "monthrange";
+      const format = unitValue.value === "DAY" ? "YYYY-MM-DD" : "YYYY-MM";
+      return createVNode(resolveComponent("el-date-picker"), {
+        "ref": (el) => setRef(type, el),
+        "modelValue": curValue.value,
+        "onUpdate:modelValue": ($event) => curValue.value = $event,
+        "class": ns.em("date-type", "editor"),
+        "type": unitType,
+        "format": "YYYY-MM-DD",
+        "value-format": format,
+        "onVisibleChange": (visible) => datePanelVisible(type, visible),
+        "onChange": (value) => onTimeChange(type, value)
+      }, null);
+    };
+    const renderDateRange = () => {
+      return createVNode("div", {
+        "class": ns.e("date-range")
+      }, [createVNode("div", {
+        "class": ns.em("date-range", "label")
+      }, [ibiz.i18n.t("editor.dateRangeSelect.daterange")]), createVNode(resolveComponent("el-popover"), {
+        "visible": popVisible.value.ALL || popVisible.value.DYNAMIC || popVisible.value.STATIC,
+        "trigger": "click",
+        "width": "240px",
+        "popper-class": ns.b("date-range-select")
+      }, {
+        reference: () => {
+          return createVNode("div", {
+            "class": ns.em("date-range", "editor"),
+            "onClick": onOpen
+          }, [createVNode("span", {
+            "class": ns.em("select", "time-caption")
+          }, [renderSelectValue()]), createVNode("i", {
+            "class": "fa fa-angle-down",
+            "aria-hidden": "true"
+          }, null)]);
+        },
+        default: () => {
+          return createVNode("div", {
+            "class": ns.e("date-type")
+          }, [timeTypes.map((item) => {
+            return createVNode("div", {
+              "class": ns.em("date-type", "item"),
+              "onClick": (event) => onTypeClick(item.type, event)
+            }, [createVNode("span", {
+              "class": ns.em("date-type", "item-caption")
+            }, [item.caption]), createVNode("span", {
+              "class": ns.em("date-type", "item-icon")
+            }, [item.type === timeType.value && createVNode("svg", {
+              "viewBox": "0 0 16 16",
+              "xmlns": "http://www.w3.org/2000/svg",
+              "height": "1em",
+              "width": "1em",
+              "focusable": "false"
+            }, [createVNode("g", {
+              "id": "agctips/check",
+              "stroke-width": "1",
+              "fill-rule": "evenodd"
+            }, [createVNode("path", {
+              "id": "agc\u8DEF\u5F84-12",
+              "d": "M6.012 11.201L1.313 6.832l-.817.879 5.54 5.15 9.304-9.163-.842-.855z"
+            }, null)])]), createVNode("i", {
+              "class": "fa fa-angle-right",
+              "aria-hidden": "true"
+            }, null)]), renderTimeRange(item.type)]);
+          })]);
+        }
+      })]);
+    };
+    const setPopVisible = () => {
+      if (!popVisible.value.DYNAMIC && !popVisible.value.STATIC) {
+        popVisible.value.ALL = false;
+      }
+    };
+    watch(() => props.value, (newVal) => {
+      if (newVal && Object.keys(newVal).length > 0) {
+        const {
+          start,
+          end,
+          unit,
+          type
+        } = newVal;
+        unitValue.value = unit;
+        timeType.value = type;
+        if (props.controller.emitMode === "TIME") {
+          if (unit === "YEAR") {
+            curValue.value = [new Date(String(start)).getFullYear(), new Date(String(end)).getFullYear()];
+          } else {
+            curValue.value = [dayjs(start).format("YYYY-MM-DD"), dayjs(end).format("YYYY-MM-DD")];
+          }
+          const {
+            start: _start,
+            end: _end
+          } = props.controller.computedDateTypesTime(unitValue.value, type, start, end);
+          handleTimeToText(timeType.value, curValue.value, _start, _end);
+        } else {
+          curValue.value = c.computedDynamicTimeToDate(unitValue.value, timeType.value, start, end);
+          handleTimeToText(timeType.value, curValue.value, start, end);
+        }
+      } else {
+        initDate();
+      }
+    }, {
+      immediate: true
+    });
+    onMounted(() => {
+      window.addEventListener("click", setPopVisible);
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("click", setPopVisible);
+    });
+    return {
+      ns,
+      c,
+      renderDateUnit,
+      renderDateRange,
+      onOpen
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b(),
+      "onClick": this.onOpen
+    }, [this.c.switchUnit && this.renderDateUnit(), this.renderDateRange()]);
+  }
+});
+
+export { IBizDateRangeSelect };

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

@@ -0,0 +1,328 @@
+import { EditorController } from '@ibiz-template/runtime';
+export declare class DateRangeSelectEditorController extends EditorController {
+    /**
+     * 是否显示时间单位选择
+     *
+     * @type {Boolean}
+     * @memberof DateRangeSelectEditorController
+     */
+    switchUnit: boolean;
+    /**
+     * 默认时间单位
+     *
+     * @type {('DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR')}
+     * @memberof DateRangeSelectEditorController
+     */
+    defaultUnit: 'DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR';
+    /**
+     * 抛出模式
+     * TIME模式则是抛出时间字符串 年-月-日 时:分:秒
+     * @type {('DEFAULT' | 'TIME')}
+     * @memberof DateRangeSelectEditorController
+     */
+    emitMode: 'DEFAULT' | 'TIME';
+    /**
+     * 初始化
+     *
+     * @return {*}  {Promise<void>}
+     * @memberof DateRangeSelectEditorController
+     */
+    init(): Promise<void>;
+    /**
+     * 初始化默认时间
+     *
+     * @param {('DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR')} unit
+     * @memberof DateRangeSelectEditorController
+     */
+    initDefaultDate: (unit: 'DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR') => Array<string | number> | undefined;
+    /**
+     * 计算动态时间间隔转具体时间
+     *
+     * @param {('DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR')} dateUnit
+     * @param {string} _start
+     * @param {string} _end
+     * @memberof DateRangeSelectEditorController
+     */
+    computedDynamicTimeToDate(dateUnit: 'DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR', dateType: 'DYNAMIC' | 'STATIC', _start: number, _end: number): Array<string | number>;
+    /**
+     * 时间间隔转季度
+     *
+     * @private
+     * @param {Date} current
+     * @param {number} timespan
+     * @memberof DateRangeSelectEditorController
+     */
+    private timeSpanConvertToQuarter;
+    /**
+     * 时间转年周
+     *
+     * @private
+     * @param {Date} current
+     * @param {number} timespan
+     * @memberof DateRangeSelectEditorController
+     */
+    private timeSpanConvertToWeek;
+    /**
+     * 时间间隔转月份
+     *
+     * @private
+     * @param {Date} current
+     * @param {number} timespan
+     * @memberof DateRangeSelectEditorController
+     */
+    private timeSpanConvertToMonth;
+    /**
+     *计算在各个时间类型下的开始结束时间
+     *
+     * @param {('DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR')} dateUnit
+     * @param {('DYNAMIC' | 'STATIC')} dateType
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number; }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedDateTypesTime(dateUnit: 'DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR', dateType: 'DYNAMIC' | 'STATIC', _start: string, _end: string): {
+        start: number;
+        end: number;
+        emitStart: number | string;
+        emitEnd: number | string;
+    };
+    /**
+     * 计算完整时间格式
+     *
+     * @private
+     * @param {(string|number)} date
+     * @memberof DateRangeSelectEditorController
+     */
+    private computedFullDateFormat;
+    /**
+     * 计算动态类型时间
+     *
+     * @param {('DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR')} dateUnit
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedDynamicTime(dateUnit: 'DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR', _start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     * 计算天的前后间隔
+     *
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedDaysSpace(_start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     * 计算周的前后间隔
+     *
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedWeeksSpace(_start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     * 获取指定时间所在周星期一的时间
+     *
+     * @param {Date} date
+     * @return {*}
+     * @memberof DateRangeSelectEditorController
+     */
+    getDateWeekMonday(date: Date): Date;
+    /**
+     * 计算指定时间在年度内的周数
+     *
+     * @param {(Date | string)} endDate
+     * @return {*}
+     * @memberof DateRangeSelectEditorController
+     */
+    getYearWeek(endDate: Date): number;
+    /**
+     * 计算月的前后间隔
+     *
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedMonthsSpace(_start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     *计算季度的前后间隔
+     *
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedQuartersSpace(_start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     *计算年的前后间隔
+     *
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedYearsSpace(_start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     * 计算静态类型时间
+     *
+     * @param {('DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR')} dateUnit
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedStaticTime(dateUnit: 'DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR', _start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     * 计算 天 的时间范围,返回开始和结束时间的秒数
+     *
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{
+     *     start: number;
+     *     end: number;
+     *   }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedDaysTime(_start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     * 计算 周 的时间范围,返回开始和结束时间的秒数
+     *
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedWeeksTime(_start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     * 计算 月 的时间范围,返回开始和结束时间的秒数
+     *
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedMonthsTime(_start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     * 计算 季度 的时间范围,返回开始和结束时间的秒数
+     *
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedQuartersTime(_start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     * 计算 年 的时间范围,返回开始和结束时间的秒数
+     *
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedYearsTime(_start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     * 处理时间转文本
+     *
+     * @param {('DYNAMIC' | 'STATIC')} type
+     * @param {('DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR')} unit
+     * @param {string[]} value
+     * @param {number} start
+     * @param {number} end
+     * @memberof DateRangeSelectEditorController
+     */
+    handleTimeToText: (type: 'DYNAMIC' | 'STATIC', unit: 'DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR', value: string[], start: number, end: number) => string;
+    /**
+     * 计算天的显示文本
+     *
+     * @private
+     * @param {number} start
+     * @param {number} end
+     * @return {*}
+     * @memberof DateRangeSelectEditorController
+     */
+    private computedTextOfDay;
+    /**
+     * 计算周的文本
+     *
+     * @private
+     * @param {number} start
+     * @param {number} end
+     * @return {*}
+     * @memberof DateRangeSelectEditorController
+     */
+    private computedTextOfWeek;
+    /**
+     *  计算月的文本
+     *
+     * @private
+     * @param {number} start
+     * @param {number} end
+     * @return {*}
+     * @memberof DateRangeSelectEditorController
+     */
+    private computedTextOfMonth;
+    /**
+     *  计算季度的文本
+     *
+     * @private
+     * @param {number} start
+     * @param {number} end
+     * @param {number} tempStartYear
+     * @param {number} tempEndYear
+     * @param {number} tempStartMonth
+     * @param {number} tempEndMonth
+     * @return {*}
+     * @memberof DateRangeSelectEditorController
+     */
+    private computedTextOfQuarter;
+    /**
+     *  计算年的文本
+     *
+     * @private
+     * @param {number} start
+     * @param {number} end
+     * @return {*}
+     * @memberof DateRangeSelectEditorController
+     */
+    private computedTextOfYear;
+}