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

package/lib/editor/date-range-select/date-range-select-picker/components/year-range-select/year-range-select.cjs

@@ -0,0 +1,262 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./year-range-select.css');
+
+"use strict";
+var yearRangeSelect = /* @__PURE__ */ vue.defineComponent({
+  name: "BIYearRangeSelect",
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["change", "visibleChange"],
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("bi-year-range-select");
+    const hoverItem = vue.ref();
+    const visible = vue.ref(false);
+    const leftYears = vue.ref([(/* @__PURE__ */ new Date()).getFullYear() - (/* @__PURE__ */ new Date()).getFullYear() % 10, (/* @__PURE__ */ new Date()).getFullYear() + (9 - (/* @__PURE__ */ new Date()).getFullYear() % 10)]);
+    const rightYears = vue.ref([(/* @__PURE__ */ new Date()).getFullYear() + (10 - (/* @__PURE__ */ new Date()).getFullYear() % 10), (/* @__PURE__ */ new Date()).getFullYear() + (19 - (/* @__PURE__ */ new Date()).getFullYear() % 10)]);
+    const years = vue.ref({
+      start: void 0,
+      end: void 0
+    });
+    const prevYears = vue.ref([]);
+    const nextYears = vue.ref([]);
+    const init = () => {
+      leftYears.value = [(/* @__PURE__ */ new Date()).getFullYear() - (/* @__PURE__ */ new Date()).getFullYear() % 10, (/* @__PURE__ */ new Date()).getFullYear() + (9 - (/* @__PURE__ */ new Date()).getFullYear() % 10)];
+      rightYears.value = [(/* @__PURE__ */ new Date()).getFullYear() + (10 - (/* @__PURE__ */ new Date()).getFullYear() % 10), (/* @__PURE__ */ new Date()).getFullYear() + (19 - (/* @__PURE__ */ new Date()).getFullYear() % 10)];
+    };
+    const computedBatchYears = (left, right) => {
+      let value = left - 1;
+      const tempYears = [];
+      while (value <= right + 1) {
+        tempYears.push(value);
+        value += 1;
+      }
+      return tempYears;
+    };
+    prevYears.value = computedBatchYears(leftYears.value[0], leftYears.value[1]);
+    nextYears.value = computedBatchYears(rightYears.value[0], rightYears.value[1]);
+    vue.watch(() => props.value, (newVal) => {
+      if (newVal && Array.isArray(newVal) && newVal.length > 0) {
+        const start = Number(newVal[0]);
+        const end = Number(newVal[1]);
+        if (!Number.isNaN(start) && !Number.isNaN(end)) {
+          leftYears.value = [start - start % 10, start + (9 - start % 10)];
+          years.value.start = start;
+          rightYears.value = [end - end % 10, end + (9 - end % 10)];
+          years.value.end = end;
+        }
+      } else {
+        init();
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    const onReduce = (tag) => {
+      if (tag === "left") {
+        leftYears.value[0] -= 10;
+        leftYears.value[1] -= 10;
+        prevYears.value = computedBatchYears(leftYears.value[0], leftYears.value[1]);
+      } else {
+        rightYears.value[0] -= 10;
+        rightYears.value[1] -= 10;
+        nextYears.value = computedBatchYears(rightYears.value[0], rightYears.value[1]);
+      }
+    };
+    const onAdd = (tag) => {
+      if (tag === "left") {
+        leftYears.value[0] += 10;
+        leftYears.value[1] += 10;
+        prevYears.value = computedBatchYears(leftYears.value[0], leftYears.value[1]);
+      } else {
+        rightYears.value[0] += 10;
+        rightYears.value[1] += 10;
+        nextYears.value = computedBatchYears(rightYears.value[0], rightYears.value[1]);
+      }
+    };
+    const renderLeftIcon = (tag) => {
+      if (tag === "right" && leftYears.value && rightYears.value && leftYears.value.at(-1) === rightYears.value[0] - 1) {
+        return vue.createVNode("div", null, null);
+      }
+      return vue.createVNode("svg", {
+        "onClick": () => onReduce(tag),
+        "viewBox": "0 0 16 16",
+        "xmlns": "http://www.w3.org/2000/svg",
+        "height": "1em",
+        "width": "1em",
+        "focusable": "false",
+        "fill": "currentColor"
+      }, [vue.createVNode("g", {
+        "id": "aav1.icon\u56FE\u6807/5.navigation/angle-double-left",
+        "stroke-width": "1",
+        "fill-rule": "evenodd"
+      }, [vue.createVNode("path", {
+        "d": "M7.984 7l4.75 4.762-.832.817-3.924-3.924-3.99 3.99-.825-.836L7.973 7l.005.006L7.984 7zm0-4l4.75 4.762-.832.817-3.924-3.924-3.99 3.99-.825-.836L7.973 3l.005.006L7.984 3z",
+        "id": "aav\u5F62\u72B6\u7ED3\u5408",
+        "transform": "rotate(-90 7.949 7.822)"
+      }, null)])]);
+    };
+    const renderRightIcon = (tag) => {
+      if (tag === "left" && leftYears.value && rightYears.value && leftYears.value.at(-1) === rightYears.value[0] - 1) {
+        return vue.createVNode("div", null, null);
+      }
+      return vue.createVNode("svg", {
+        "onClick": () => onAdd(tag),
+        "viewBox": "0 0 16 16",
+        "xmlns": "http://www.w3.org/2000/svg",
+        "height": "1em",
+        "width": "1em",
+        "focusable": "false",
+        "fill": "currentColor"
+      }, [vue.createVNode("g", {
+        "id": "aaw1.icon\u56FE\u6807/5.navigation/angle-double-right",
+        "stroke-width": "1",
+        "fill-rule": "evenodd"
+      }, [vue.createVNode("path", {
+        "d": "M7.984 7.3l4.75 4.762-.832.817-3.924-3.924-3.99 3.99-.825-.836L7.973 7.3l.005.006.006-.006zm0-4l4.75 4.762-.832.817-3.924-3.924-3.99 3.99-.825-.836L7.973 3.3l.005.006.006-.006z",
+        "id": "aaw\u5F62\u72B6\u7ED3\u5408",
+        "transform": "rotate(90 7.949 8.122)"
+      }, null)])]);
+    };
+    const emitFunc = () => {
+      var _a, _b;
+      emit("change", [(_a = years.value.start) == null ? void 0 : _a.toString(), (_b = years.value.end) == null ? void 0 : _b.toString()]);
+      visible.value = false;
+    };
+    const onItemClick = (year) => {
+      if (years.value.start && years.value.end) {
+        years.value.start = void 0;
+        years.value.end = void 0;
+      }
+      if (!years.value.start) {
+        years.value.start = year;
+      } else {
+        if (year >= years.value.start) {
+          years.value.end = year;
+        } else {
+          const tempvalue = years.value.start;
+          years.value.start = year;
+          years.value.end = tempvalue;
+        }
+        emitFunc();
+      }
+    };
+    const computedSelectArea = (year) => {
+      if (years.value.start && years.value.end && year >= years.value.start && year <= years.value.end) {
+        return true;
+      }
+      return false;
+    };
+    const computedHoverSelectArea = (year) => {
+      if (years.value.start && !years.value.end && hoverItem.value) {
+        let tempStart = years.value.start;
+        let tempEnd = hoverItem.value;
+        if (hoverItem.value < years.value.start) {
+          tempEnd = years.value.start;
+          tempStart = hoverItem.value;
+        }
+        if (year >= tempStart && year <= tempEnd) {
+          return true;
+        }
+      }
+      return false;
+    };
+    const computedSelected = (year) => {
+      if (years.value.start === year || years.value.end === year) {
+        return true;
+      }
+      return false;
+    };
+    const isCurYear = (year) => {
+      return year === (/* @__PURE__ */ new Date()).getFullYear();
+    };
+    const onMouseHover = (year) => {
+      hoverItem.value = year;
+    };
+    const onMouseleave = () => {
+      hoverItem.value = null;
+    };
+    const renderSelect = () => {
+      var _a, _b;
+      return vue.createVNode("div", {
+        "class": ns.e("date-panel")
+      }, [vue.createVNode("div", {
+        "class": ns.em("date-panel", "left")
+      }, [vue.createVNode("div", {
+        "class": ns.em("date-panel", "left-header")
+      }, [renderLeftIcon("left"), vue.createVNode("span", null, [(_a = leftYears.value) == null ? void 0 : _a.join("-")]), renderRightIcon("left")]), vue.createVNode("div", {
+        "class": ns.em("date-panel", "left-content")
+      }, [prevYears.value.map((item) => {
+        return vue.createVNode("div", {
+          "class": [ns.em("date-panel", "left-item"), ns.is("selected", computedSelected(item)), ns.is("include", computedSelectArea(item)), ns.is("hover", hoverItem.value === item), ns.is("curyear", isCurYear(item)), ns.is("hoverinclude", computedHoverSelectArea(item))],
+          "onClick": () => onItemClick(item),
+          "onMouseenter": () => onMouseHover(item),
+          "onMouseleave": () => onMouseleave()
+        }, [item]);
+      })])]), vue.createVNode("div", {
+        "class": ns.em("date-panel", "right")
+      }, [vue.createVNode("div", {
+        "class": ns.em("date-panel", "right-header")
+      }, [renderLeftIcon("right"), vue.createVNode("span", null, [(_b = rightYears.value) == null ? void 0 : _b.join("-")]), renderRightIcon("right")]), vue.createVNode("div", {
+        "class": ns.em("date-panel", "right-content")
+      }, [nextYears.value.map((item) => {
+        return vue.createVNode("div", {
+          "class": [ns.em("date-panel", "right-item"), ns.is("selected", computedSelected(item)), ns.is("include", computedSelectArea(item)), ns.is("hover", hoverItem.value === item), ns.is("curyear", isCurYear(item)), ns.is("hoverinclude", computedHoverSelectArea(item))],
+          "onClick": () => onItemClick(item),
+          "onMouseenter": () => onMouseHover(item),
+          "onMouseleave": () => onMouseleave()
+        }, [item]);
+      })])])]);
+    };
+    const visibleChange = (tag) => {
+      visible.value = tag;
+      emit("visibleChange", tag);
+    };
+    const handleClose = () => {
+      visible.value = true;
+    };
+    const handleOpen = () => {
+      visible.value = true;
+    };
+    return {
+      ns,
+      visible,
+      renderSelect,
+      handleClose,
+      handleOpen,
+      visibleChange
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode(vue.resolveComponent("el-popover"), {
+      "visible": this.visible,
+      "onUpdate:visible": ($event) => this.visible = $event,
+      "trigger": "click",
+      "width": 600,
+      "placement": "top",
+      "onAfterEnter": () => this.visibleChange(true),
+      "onAfterLeave": () => this.visibleChange(false)
+    }, {
+      default: () => {
+        return this.renderSelect();
+      },
+      reference: () => {
+        return vue.createVNode("div", null, null);
+      }
+    })]);
+  }
+});
+
+exports.default = yearRangeSelect;

package/lib/editor/date-range-select/date-range-select-picker/components/year-range-select/year-range-select.css

@@ -0,0 +1 @@
+.ibiz-bi-year-range-select__date-panel{display:flex;height:200px}.ibiz-bi-year-range-select__date-panel--left{flex:1}.ibiz-bi-year-range-select__date-panel--left-header{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 var(--ibiz-spacing-base-loose);color:var(--ibiz-color-primary-light-active);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-bi-year-range-select__date-panel--left-header svg{color:var(--ibiz-color-black);cursor:pointer}.ibiz-bi-year-range-select__date-panel--left-header svg:hover{color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--left-content{padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose)}.ibiz-bi-year-range-select__date-panel--left-item{position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:var(--ibiz-height-control-default);margin-top:var(--ibiz-spacing-extra-tight);margin-left:var(--ibiz-spacing-loose);cursor:pointer;border-radius:var(--ibiz-border-radius-small)}.ibiz-bi-year-range-select__date-panel--left-item::before{position:absolute;right:0;display:inline-block;width:calc(100% + var(--ibiz-spacing-loose));height:calc(100% + var(--ibiz-spacing-extra-tight));content:""}.ibiz-bi-year-range-select__date-panel--left-item.is-include{background:var(--ibiz-color-secondary-light-default)}.ibiz-bi-year-range-select__date-panel--left-item.is-selected{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--left-item.is-selected.is-curyear{color:var(--ibiz-color-primary-text)}.ibiz-bi-year-range-select__date-panel--left-item.is-hoverinclude{background:var(--ibiz-color-secondary-light-default)}.ibiz-bi-year-range-select__date-panel--left-item.is-hoverinclude.is-include{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--left-item.is-hoverinclude.is-hover{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--left-item.is-hoverinclude.is-selected{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--left-item.is-hover{color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--left-item.is-hover.is-selected{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--left-item.is-curyear{font-weight:700;color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--right{flex:1}.ibiz-bi-year-range-select__date-panel--right-header{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 var(--ibiz-spacing-base-loose);color:var(--ibiz-color-primary-light-active);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-bi-year-range-select__date-panel--right-header svg{color:var(--ibiz-color-black);cursor:pointer}.ibiz-bi-year-range-select__date-panel--right-header svg:hover{color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--right-content{padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose)}.ibiz-bi-year-range-select__date-panel--right-item{position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:var(--ibiz-height-control-default);margin-top:var(--ibiz-spacing-extra-tight);margin-left:var(--ibiz-spacing-loose);cursor:pointer;border-radius:var(--ibiz-border-radius-small)}.ibiz-bi-year-range-select__date-panel--right-item::before{position:absolute;right:0;display:inline-block;width:calc(100% + var(--ibiz-spacing-loose));height:calc(100% + var(--ibiz-spacing-extra-tight));content:""}.ibiz-bi-year-range-select__date-panel--right-item.is-include{background:var(--ibiz-color-secondary-light-default)}.ibiz-bi-year-range-select__date-panel--right-item.is-selected{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--right-item.is-selected.is-curyear{color:var(--ibiz-color-primary-text)}.ibiz-bi-year-range-select__date-panel--right-item.is-hoverinclude{background:var(--ibiz-color-secondary-light-default)}.ibiz-bi-year-range-select__date-panel--right-item.is-hoverinclude.is-include{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--right-item.is-hoverinclude.is-hover{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--right-item.is-hoverinclude.is-selected{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--right-item.is-hover{color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--right-item.is-hover.is-selected{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--right-item.is-curyear{font-weight:700;color:var(--ibiz-color-primary)}

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

@@ -0,0 +1,318 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var quarterRangeSelect = require('./components/quarter-range-select/quarter-range-select.cjs');
+var yearRangeSelect = require('./components/year-range-select/year-range-select.cjs');
+var weekRangeSelect = require('./components/week-range-select/week-range-select.cjs');
+require('./date-range-select.css');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const IBizDateRangeSelect = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizDateRangeSelect",
+  components: {
+    "bi-quarter-range-select": quarterRangeSelect.default,
+    "bi-year-range-select": yearRangeSelect.default,
+    "bi-week-range-select": weekRangeSelect.default
+  },
+  props: {
+    ...vue3Util.getDatePickerProps(),
+    value: {
+      type: Object
+    }
+  },
+  emits: ["change"],
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("date-range-select");
+    const c = props.controller;
+    const unitValue = vue.ref(c.defaultUnit);
+    const curValue = vue.ref();
+    const timeType = vue.ref("DYNAMIC");
+    const editorRef = vue.ref({
+      DYNAMIC: null,
+      STATIC: null
+    });
+    const popVisible = vue.ref({
+      ALL: false,
+      STATIC: false,
+      DYNAMIC: false
+    });
+    const selectValue = vue.ref();
+    const isOverClose = vue.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
+      } = 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,
+        end
+      });
+    };
+    const unitChange = () => {
+      initDate();
+    };
+    const renderDateUnit = () => {
+      let _slot;
+      return vue.createVNode("div", {
+        "class": ns.e("date-unit")
+      }, [vue.createVNode("span", {
+        "class": ns.em("date-unit", "label")
+      }, [ibiz.i18n.t("editor.dateRangeSelect.dateUnit")]), vue.createVNode("div", {
+        "class": ns.em("date-unit", "editor")
+      }, [vue.createVNode(vue.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 vue.createVNode(vue.resolveComponent("el-option"), {
+          "key": item.value,
+          "value": item.value,
+          "label": item.label
+        }, {
+          default: () => {
+            return item.label;
+          }
+        });
+      })) ? _slot : {
+        default: () => [_slot]
+      })])]);
+    };
+    const renderSelectValue = () => {
+      return vue.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
+      } = props.controller.computedDateTypesTime(unitValue.value, type, value[0], value[1]);
+      handleTimeToText(type, value, start, end);
+      emit("change", {
+        start,
+        end,
+        unit: unitValue.value,
+        type: timeType.value
+      });
+    };
+    const datePanelVisible = (type, visible) => {
+      if (!visible) {
+        popVisible.value[type] = false;
+        if (!popVisible.value.STATIC && !popVisible.value.DYNAMIC && !isOverClose.value) {
+          popVisible.value.ALL = false;
+        } else {
+          isOverClose.value = false;
+        }
+      }
+    };
+    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 vue.createVNode(vue.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 vue.createVNode(vue.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 vue.createVNode(vue.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 vue.createVNode(vue.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 vue.createVNode("div", {
+        "class": ns.e("date-range")
+      }, [vue.createVNode("div", {
+        "class": ns.em("date-range", "label")
+      }, [ibiz.i18n.t("editor.dateRangeSelect.daterange")]), vue.createVNode(vue.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 vue.createVNode("div", {
+            "class": ns.em("date-range", "editor"),
+            "onClick": onOpen
+          }, [vue.createVNode("span", {
+            "class": ns.em("select", "time-caption")
+          }, [renderSelectValue()]), vue.createVNode("i", {
+            "class": "fa fa-angle-down",
+            "aria-hidden": "true"
+          }, null)]);
+        },
+        default: () => {
+          return vue.createVNode("div", {
+            "class": ns.e("date-type")
+          }, [timeTypes.map((item) => {
+            return vue.createVNode("div", {
+              "class": ns.em("date-type", "item"),
+              "onClick": (event) => onTypeClick(item.type, event)
+            }, [vue.createVNode("span", {
+              "class": ns.em("date-type", "item-caption")
+            }, [item.caption]), vue.createVNode("span", {
+              "class": ns.em("date-type", "item-icon")
+            }, [item.type === timeType.value && vue.createVNode("svg", {
+              "viewBox": "0 0 16 16",
+              "xmlns": "http://www.w3.org/2000/svg",
+              "height": "1em",
+              "width": "1em",
+              "focusable": "false"
+            }, [vue.createVNode("g", {
+              "id": "agctips/check",
+              "stroke-width": "1",
+              "fill-rule": "evenodd"
+            }, [vue.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)])]), vue.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;
+      }
+    };
+    vue.watch(() => props.value, (newVal) => {
+      if (newVal && Object.keys(newVal).length > 0) {
+        const {
+          start,
+          end,
+          unit,
+          type
+        } = newVal;
+        unitValue.value = unit;
+        timeType.value = type;
+        curValue.value = c.computedDynamicTimeToDate(unitValue.value, timeType.value, start, end);
+        handleTimeToText(timeType.value, curValue.value, start, end);
+      } else {
+        initDate();
+      }
+    }, {
+      immediate: true
+    });
+    vue.onMounted(() => {
+      window.addEventListener("click", setPopVisible);
+    });
+    vue.onBeforeUnmount(() => {
+      window.removeEventListener("click", setPopVisible);
+    });
+    return {
+      ns,
+      c,
+      renderDateUnit,
+      renderDateRange,
+      onOpen
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b(),
+      "onClick": this.onOpen
+    }, [this.c.switchUnit && this.renderDateUnit(), this.renderDateRange()]);
+  }
+});
+
+exports.IBizDateRangeSelect = IBizDateRangeSelect;

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

@@ -0,0 +1 @@
+.ibiz-date-range-select{width:100%}.ibiz-date-range-select__date-unit{width:100%}.ibiz-date-range-select__date-unit--label{font-size:var(--ibiz-font-size-regular)}.ibiz-date-range-select__date-unit--label::after{position:relative;top:0;left:var(--ibiz-spacing-extra-tight);color:var(--ibiz-color-danger);content:"*"}.ibiz-date-range-select__date-unit--editor-select{width:100%;margin-top:12px}.ibiz-date-range-select__date-range{width:100%;margin-top:12px}.ibiz-date-range-select__date-range--label{font-size:var(--ibiz-font-size-regular)}.ibiz-date-range-select__date-range--label::after{position:relative;top:0;left:var(--ibiz-spacing-extra-tight);color:var(--ibiz-color-danger);content:"*"}.ibiz-date-range-select__date-range--editor{display:inline-flex;flex-grow:1;align-items:center;justify-content:space-between;width:100%;padding:1px 11px;margin-top:var(--ibiz-spacing-base-tight);font-size:var(--ibiz-font-size-small);line-height:32px;cursor:pointer;background-image:none;border-radius:var(--ibiz-border-radius-small);box-shadow:0 0 0 1px var(--ibiz-color-border) inset;transition:all .2s;transform:translate3d(0,0,0)}.ibiz-date-range-select__date-range--editor i{color:var(--ibiz-color-tertiary-light-active)}.ibiz-date-range-select__date-range--editor:hover{box-shadow:0 0 0 1px var(--ibiz-color-primary) inset}.ibiz-date-range-select__date-type{padding:var(--ibiz-spacing-base-tight) 0}.ibiz-date-range-select__date-type--item{position:relative;display:flex;align-items:center;width:100%;height:32px;padding:0 var(--ibiz-spacing-base-tight);cursor:pointer}.ibiz-date-range-select__date-type--item:hover{background-color:var(--ibiz-color-fill-1)}.ibiz-date-range-select__date-type--item-caption{flex:1}.ibiz-date-range-select__date-type--item-icon{margin-top:2px}.ibiz-date-range-select__date-type--item-icon i{margin-left:var(--ibiz-spacing-base-tight);font-size:var(--ibiz-font-size-header-5)}.ibiz-date-range-select__date-type--editor{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;visibility:hidden}.ibiz-date-range-select__date-type--quarter{z-index:-10;visibility:visible;opacity:0}.ibiz-date-range-select__date-type--quarter .el-tooltip__trigger{width:100%;height:100%}.ibiz-date-range-select__date-type--year{z-index:-10;visibility:visible;opacity:0}.ibiz-date-range-select__date-type--year .el-tooltip__trigger{width:100%;height:100%}.ibiz-date-range-select__date-type--week{z-index:-10;visibility:visible;opacity:0}.ibiz-date-range-select__date-type--week .el-tooltip__trigger{width:100%;height:100%}.ibiz-date-range-select__select-value{height:32px;overflow:hidden;text-overflow:ellipsis}