@ibiz-template/vue3-components 0.7.30 → 0.7.34

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

@@ -0,0 +1,335 @@
+import { defineComponent, ref, watch, createVNode, resolveComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './quarter-range-select.css';
+
+"use strict";
+var quarterRangeSelect = /* @__PURE__ */ defineComponent({
+  name: "BIQuarterRangeSelect",
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["change", "visibleChange"],
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("bi-quarter-range-select");
+    const leftYear = ref();
+    const rightYear = ref();
+    const startQuarter = ref();
+    const endQuarter = ref();
+    const hoverItem = ref();
+    const visible = ref(false);
+    const quarterItems = ["Q1", "Q2", "Q3", "Q4"];
+    const computedDate = (year, index, mode) => {
+      let month = index * 3;
+      if (mode === "START") {
+        month -= 2;
+      }
+      const tempDate = new Date("".concat(year, "-").concat(month));
+      if (mode === "START") {
+        tempDate.setDate(1);
+        tempDate.setHours(0, 0, 0, 0);
+      } else {
+        const big = [1, 3, 5, 7, 8, 10, 12];
+        if (big.includes(month)) {
+          tempDate.setDate(31);
+        } else {
+          tempDate.setDate(30);
+        }
+        tempDate.setHours(23, 59, 59, 0);
+      }
+      return tempDate;
+    };
+    const init = () => {
+      leftYear.value = (/* @__PURE__ */ new Date()).getFullYear();
+      rightYear.value = (/* @__PURE__ */ new Date()).getFullYear() + 1;
+      startQuarter.value = null;
+      endQuarter.value = null;
+    };
+    watch(() => props.value, (newVal) => {
+      if (newVal && Array.isArray(newVal) && newVal.length > 0) {
+        const startDate = new Date(newVal[0]);
+        const endDate = new Date(newVal[1]);
+        leftYear.value = startDate.getFullYear();
+        const tempEnd = endDate.getFullYear();
+        if (leftYear.value === tempEnd) {
+          rightYear.value = leftYear.value + 1;
+        } else {
+          rightYear.value = tempEnd;
+        }
+        const startIndex = Math.ceil((startDate.getMonth() + 1) / 3);
+        const endIndex = Math.ceil((endDate.getMonth() + 1) / 3);
+        startQuarter.value = computedDate(leftYear.value, startIndex, "START");
+        endQuarter.value = computedDate(tempEnd, endIndex, "END");
+      } else {
+        init();
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    const onReduce = (tag) => {
+      if (tag === "left") {
+        leftYear.value -= 1;
+      } else {
+        rightYear.value -= 1;
+      }
+    };
+    const onAdd = (tag) => {
+      if (tag === "left") {
+        leftYear.value += 1;
+      } else {
+        rightYear.value += 1;
+      }
+    };
+    const renderLeftIcon = (tag) => {
+      if (tag === "right" && leftYear.value === rightYear.value) {
+        return createVNode("div", null, null);
+      }
+      return 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"
+      }, [createVNode("g", {
+        "id": "aav1.icon\u56FE\u6807/5.navigation/angle-double-left",
+        "stroke-width": "1",
+        "fill-rule": "evenodd"
+      }, [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" && leftYear.value === rightYear.value) {
+        return createVNode("div", null, null);
+      }
+      return 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"
+      }, [createVNode("g", {
+        "id": "aaw1.icon\u56FE\u6807/5.navigation/angle-double-right",
+        "stroke-width": "1",
+        "fill-rule": "evenodd"
+      }, [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 = () => {
+      emit("change", [startQuarter.value.toLocaleDateString(), endQuarter.value.toLocaleDateString()]);
+      visible.value = false;
+    };
+    const onItemClick = (year, index) => {
+      if (startQuarter.value && endQuarter.value) {
+        startQuarter.value = null;
+        endQuarter.value = null;
+      }
+      if (!startQuarter.value) {
+        startQuarter.value = computedDate(year, index, "START");
+      } else {
+        const tempStartYear = startQuarter.value.getFullYear();
+        const tempStartMonth = startQuarter.value.getMonth() + 1;
+        const tempStartQuarter = Math.ceil(tempStartMonth / 3);
+        if (year > tempStartYear) {
+          endQuarter.value = computedDate(year, index, "END");
+        } else if (year < tempStartYear) {
+          endQuarter.value = computedDate(tempStartYear, tempStartQuarter, "END");
+          startQuarter.value = computedDate(year, index, "START");
+        } else if (index >= tempStartQuarter) {
+          endQuarter.value = computedDate(year, index, "END");
+        } else {
+          endQuarter.value = computedDate(tempStartYear, tempStartQuarter, "END");
+          startQuarter.value = computedDate(year, index, "START");
+        }
+        emitFunc();
+      }
+    };
+    const computedSelectArea = (year, index) => {
+      if (leftYear.value && rightYear.value && startQuarter.value && endQuarter.value) {
+        const tempStartYear = startQuarter.value.getFullYear();
+        const tempEndYear = endQuarter.value.getFullYear();
+        const tempStartMonth = startQuarter.value.getMonth() + 1;
+        const tempEndMonth = endQuarter.value.getMonth() + 1;
+        const tempStartQuarter = Math.ceil(tempStartMonth / 3);
+        const tempEndQuarter = Math.ceil(tempEndMonth / 3);
+        if (year > tempStartYear && year < tempEndYear) {
+          return true;
+        }
+        if (year === tempStartYear && year < tempEndYear && index >= tempStartQuarter) {
+          return true;
+        }
+        if (year === tempEndYear && year > tempStartYear && index <= tempEndQuarter) {
+          return true;
+        }
+        if (year === tempStartYear && year === tempEndYear && index <= tempEndQuarter && index >= tempStartQuarter) {
+          return true;
+        }
+      }
+      return false;
+    };
+    const computedHoverSelectArea = (year, index) => {
+      if (leftYear.value && rightYear.value && startQuarter.value && !endQuarter.value && hoverItem.value) {
+        const tempHoverYear = hoverItem.value.getFullYear();
+        const tempHoverMonth = hoverItem.value.getMonth() + 1;
+        const tempHoverQuarter = Math.ceil(tempHoverMonth / 3);
+        let tempStart = startQuarter.value;
+        let tempEnd = hoverItem.value;
+        const startDateYear = startQuarter.value.getFullYear();
+        const startDateMonth = startQuarter.value.getMonth() + 1;
+        const startDateQuarter = Math.ceil(startDateMonth / 3);
+        if (tempHoverYear <= startDateYear && tempHoverQuarter <= startDateQuarter) {
+          tempEnd = startQuarter.value;
+          tempStart = hoverItem.value;
+        }
+        const tempStartYear = tempStart.getFullYear();
+        const tempEndYear = tempEnd.getFullYear();
+        const tempStartMonth = tempStart.getMonth() + 1;
+        const tempEndMonth = tempEnd.getMonth() + 1;
+        const tempStartQuarter = Math.ceil(tempStartMonth / 3);
+        const tempEndQuarter = Math.ceil(tempEndMonth / 3);
+        if (year > tempStartYear && year < tempEndYear) {
+          return true;
+        }
+        if (year === tempStartYear && year < tempEndYear && index >= tempStartQuarter) {
+          return true;
+        }
+        if (year === tempEndYear && year > tempStartYear && index <= tempEndQuarter) {
+          return true;
+        }
+        if (tempHoverYear <= startDateYear && tempHoverQuarter < startDateQuarter && year === tempHoverYear && index >= tempHoverQuarter && index <= startDateQuarter) {
+          return true;
+        }
+        if (tempHoverYear >= startDateYear && tempHoverQuarter > startDateQuarter && year === tempHoverYear && index <= tempHoverQuarter && index >= startDateQuarter) {
+          return true;
+        }
+      }
+      return false;
+    };
+    const computedSelected = (year, index) => {
+      if (startQuarter.value) {
+        const tempStartYear = startQuarter.value.getFullYear();
+        const tempStartMonth = startQuarter.value.getMonth() + 1;
+        const tempStartQuarter = Math.ceil(tempStartMonth / 3);
+        if (year === tempStartYear && tempStartQuarter === index) {
+          return true;
+        }
+      }
+      if (endQuarter.value) {
+        const tempEndYear = endQuarter.value.getFullYear();
+        const tempEndMonth = endQuarter.value.getMonth() + 1;
+        const tempEndQuarter = Math.ceil(tempEndMonth / 3);
+        if (year === tempEndYear && tempEndQuarter === index) {
+          return true;
+        }
+      }
+      return false;
+    };
+    const computedHover = (year, index) => {
+      if (hoverItem.value) {
+        return hoverItem.value.getTime() === computedDate(year, index, "START").getTime();
+      }
+      return false;
+    };
+    const computedCurQuarter = (year, index) => {
+      const curDate = computedDate(year, index, "START");
+      const toDay = /* @__PURE__ */ new Date();
+      const tempStartMonth = curDate.getMonth() + 1;
+      const tempStartQuarter = Math.ceil(tempStartMonth / 3);
+      const toYear = toDay.getFullYear();
+      const tempToDayMonth = toDay.getMonth() + 1;
+      const tempToDayQuarter = Math.ceil(tempToDayMonth / 3);
+      return year === toYear && tempStartQuarter === tempToDayQuarter;
+    };
+    const onMouseHover = (year, index) => {
+      hoverItem.value = computedDate(year, index, "START");
+    };
+    const onMouseleave = () => {
+      hoverItem.value = null;
+    };
+    const renderSelect = () => {
+      return createVNode("div", {
+        "class": ns.e("date-panel")
+      }, [createVNode("div", {
+        "class": ns.em("date-panel", "left")
+      }, [createVNode("div", {
+        "class": ns.em("date-panel", "left-header")
+      }, [renderLeftIcon("left"), createVNode("span", null, [leftYear.value, ibiz.i18n.t("editor.dateRangeSelect.year")]), renderRightIcon("left")]), createVNode("div", {
+        "class": ns.em("date-panel", "left-content")
+      }, [quarterItems.map((item, index) => {
+        return createVNode("div", {
+          "class": [ns.em("date-panel", "left-item"), ns.is("include", computedSelectArea(leftYear.value, index + 1)), ns.is("selected", computedSelected(leftYear.value, index + 1)), ns.is("hoverinclude", computedHoverSelectArea(leftYear.value, index + 1)), ns.is("curquarter", computedCurQuarter(leftYear.value, index + 1)), ns.is("hover", computedHover(leftYear.value, index + 1))],
+          "onClick": () => onItemClick(leftYear.value, index + 1),
+          "onMouseenter": () => onMouseHover(leftYear.value, index + 1),
+          "onMouseleave": () => onMouseleave()
+        }, [item]);
+      })])]), createVNode("div", {
+        "class": ns.em("date-panel", "right")
+      }, [createVNode("div", {
+        "class": ns.em("date-panel", "right-header")
+      }, [renderLeftIcon("right"), createVNode("span", null, [rightYear.value, ibiz.i18n.t("editor.dateRangeSelect.year")]), renderRightIcon("right")]), createVNode("div", {
+        "class": ns.em("date-panel", "right-content")
+      }, [quarterItems.map((item, index) => {
+        return createVNode("div", {
+          "class": [ns.em("date-panel", "right-item"), ns.is("selected", computedSelected(rightYear.value, index + 1)), ns.is("include", computedSelectArea(rightYear.value, index + 1)), ns.is("hoverinclude", computedHoverSelectArea(rightYear.value, index + 1)), ns.is("curquarter", computedCurQuarter(rightYear.value, index + 1)), ns.is("hover", computedHover(rightYear.value, index + 1))],
+          "onClick": () => onItemClick(rightYear.value, index + 1),
+          "onMouseenter": () => onMouseHover(rightYear.value, index + 1),
+          "onMouseleave": () => onMouseleave()
+        }, [item]);
+      })])])]);
+    };
+    const handleClose = () => {
+      visible.value = false;
+    };
+    const handleOpen = () => {
+      visible.value = true;
+    };
+    const visibleChange = (_visible) => {
+      emit("visibleChange", _visible);
+    };
+    return {
+      ns,
+      renderSelect,
+      visible,
+      handleClose,
+      handleOpen,
+      visibleChange
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode(resolveComponent("el-popover"), {
+      "visible": this.visible,
+      "onUpdate:visible": ($event) => this.visible = $event,
+      "trigger": "click",
+      "width": 600,
+      "popper-class": this.ns.b("quarter-pop"),
+      "placement": "right",
+      "onAfterEnter": () => this.visibleChange(true),
+      "onAfterLeave": () => this.visibleChange(false)
+    }, {
+      default: () => {
+        return this.renderSelect();
+      },
+      reference: () => {
+        return createVNode("div", null, null);
+      }
+    })]);
+  }
+});
+
+export { quarterRangeSelect as default };

package/es/editor/date-range-select/date-range-select-picker/components/week-range-select/week-range-select.css

@@ -0,0 +1 @@
+.ibiz-bi-week-range{width:100%;height:100%;cursor:pointer}.ibiz-bi-week-range .el-date-editor{width:0;height:0;cursor:pointer}.ibiz-bi-week-range__cell-item{box-sizing:border-box;height:30px;padding:var(--ibiz-spacing-super-tight) 0}.ibiz-bi-week-range__cell-item--text{position:absolute;left:50%;display:block;width:24px;height:24px;margin:0 auto;line-height:24px;border-radius:50%;transform:translateX(-50%)}.ibiz-bi-week-range__cell-item--text.is-today{color:var(--ibiz-color-primary)}.ibiz-bi-week-range__cell-item.is-started{width:100%;margin-left:5px;color:var(--ibiz-color-primary-text);background:var(--ibiz-color-primary)}.ibiz-bi-week-range__cell-item.is-started .ibiz-bi-week-range__cell-item--text{color:var(--ibiz-color-primary-text);background:var(--ibiz-color-primary)}.ibiz-bi-week-range__cell-item.is-started.is-monday{border-top-left-radius:var(--ibiz-border-radius-small);border-bottom-left-radius:var(--ibiz-border-radius-small)}.ibiz-bi-week-range__cell-item.is-started.is-left{border-top-left-radius:var(--ibiz-border-radius-small);border-bottom-left-radius:var(--ibiz-border-radius-small)}.ibiz-bi-week-range__cell-item.is-started.is-sunday{position:relative;z-index:10;border-top-right-radius:var(--ibiz-border-radius-small);border-bottom-right-radius:var(--ibiz-border-radius-small)}.ibiz-bi-week-range__cell-item.is-started.is-right{border-top-right-radius:var(--ibiz-border-radius-small);border-bottom-right-radius:var(--ibiz-border-radius-small)}.ibiz-bi-week-range__cell-item.is-ended{z-index:10;width:100%;margin-right:var(--ibiz-spacing-extra-tight);color:var(--ibiz-color-primary-text);background:var(--ibiz-color-primary)}.ibiz-bi-week-range__cell-item.is-ended .ibiz-bi-week-range__cell-item--text{color:var(--ibiz-color-primary-text);background:var(--ibiz-color-primary)}.ibiz-bi-week-range__cell-item.is-ended.is-monday{border-top-left-radius:5px;border-bottom-left-radius:5px}.ibiz-bi-week-range__cell-item.is-ended.is-left{border-top-left-radius:var(--ibiz-border-radius-small);border-bottom-left-radius:var(--ibiz-border-radius-small)}.ibiz-bi-week-range__cell-item.is-ended.is-sunday{border-top-right-radius:5px;border-bottom-right-radius:5px}.ibiz-bi-week-range__cell-item.is-ended.is-right{border-top-right-radius:var(--ibiz-border-radius-small);border-bottom-right-radius:var(--ibiz-border-radius-small)}.ibiz-bi-week-range__cell-item.is-inrange{color:var(--ibiz-color-text-0);background:var(--ibiz-color-secondary-light-default)}.ibiz-bi-week-range__cell-item.is-inrange.is-hover{background:var(--ibiz-color-secondary-light-default)}.ibiz-bi-week-range__cell-item.is-hover{color:var(--ibiz-color-primary);background:0 0}.ibiz-bi-week-range__cell-item.is-inhoverrange{color:var(--ibiz-color-text-0);background:var(--ibiz-color-secondary-light-default)}.ibiz-bi-week-range__cell-item.is-inhoverrange.is-hover{color:var(--ibiz-color-primary-text);background:var(--ibiz-color-primary)}.ibiz-bi-week-range__cell-item.is-inhoverrange.is-left{border-top-left-radius:var(--ibiz-border-radius-small);border-bottom-left-radius:var(--ibiz-border-radius-small)}.ibiz-bi-week-range__cell-item.is-inhoverrange.is-right{border-top-right-radius:var(--ibiz-border-radius-small);border-bottom-right-radius:var(--ibiz-border-radius-small)}.ibiz-bi-week-range-picker-pop .el-date-table tr:hover{background-color:unset!important}.ibiz-bi-week-range-picker-pop.el-picker__popper .el-date-table__row .is-started{padding-left:5px;margin-left:0}

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

@@ -0,0 +1,260 @@
+import { defineComponent, ref, watch, createVNode, resolveComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import dayjs from 'dayjs';
+import '../../../../../node_modules/.pnpm/dayjs@1.11.12/node_modules/dayjs/locale/zh-cn.mjs';
+import './week-range-select.css';
+
+"use strict";
+var weekRangeSelect = /* @__PURE__ */ defineComponent({
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["change", "visibleChange"],
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("bi-week-range");
+    const curValue = ref();
+    const weekRangeRef = ref();
+    const visible = ref(false);
+    const Today = dayjs(/* @__PURE__ */ new Date()).format("YYYY/MM/DD");
+    const start = ref();
+    const end = ref();
+    let clicked = false;
+    const hoverItem = ref();
+    const initSelectDate = () => {
+      start.value = null;
+      end.value = null;
+    };
+    watch(() => props.value, (newVal) => {
+      if (newVal && Array.isArray(newVal)) {
+        start.value = new Date(newVal[0]);
+        end.value = new Date(newVal[1]);
+      } else {
+        initSelectDate();
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    const computedDateWeekSunday = (date) => {
+      const day = date.getDay();
+      let weekday = day;
+      if (day === 0) {
+        weekday = 7;
+      }
+      const sunday = date.getTime() + (7 - weekday) * 24 * 60 * 60 * 1e3;
+      const tempEnd = new Date(sunday);
+      tempEnd.setHours(23, 59, 59, 0);
+      return tempEnd;
+    };
+    const computedDateWeekMonday = (date) => {
+      const day = date.getDay();
+      let weekday = day;
+      if (day === 0) {
+        weekday = 7;
+      }
+      const monday = date.getTime() - (weekday - 1) * 24 * 60 * 60 * 1e3;
+      const tempStart = new Date(monday);
+      tempStart.setHours(0, 0, 0, 0);
+      return tempStart;
+    };
+    const isInRange = (cell) => {
+      const {
+        date
+      } = cell;
+      const curTime = date.getTime();
+      if (start.value && end.value) {
+        const startTime = start.value.getTime();
+        const endTime = end.value.getTime();
+        if (curTime >= startTime && curTime <= endTime) {
+          return true;
+        }
+      }
+      return false;
+    };
+    const isEnded = (cell) => {
+      const {
+        date
+      } = cell;
+      if (end.value) {
+        const sunday = computedDateWeekSunday(end.value);
+        const monday = computedDateWeekMonday(end.value);
+        if (date.getTime() >= monday.getTime() && date.getTime() <= sunday.getTime()) {
+          return true;
+        }
+        return false;
+      }
+    };
+    const isStarted = (cell) => {
+      const {
+        date
+      } = cell;
+      if (start.value) {
+        const sunday = computedDateWeekSunday(start.value);
+        const monday = computedDateWeekMonday(start.value);
+        if (date.getTime() >= monday.getTime() && date.getTime() <= sunday.getTime()) {
+          return true;
+        }
+        return false;
+      }
+    };
+    const isToday = (cell) => {
+      const format = "YYYY/MM/DD";
+      return cell.dayjs.format(format) === Today;
+    };
+    const handleChange = () => {
+      if (start.value && end.value) {
+        const startDate = start.value.toLocaleDateString();
+        const endDate = end.value.toLocaleDateString();
+        emit("change", [startDate, endDate]);
+      }
+    };
+    const cellClick = (cell) => {
+      const {
+        date
+      } = cell;
+      if (!clicked) {
+        initSelectDate();
+        start.value = computedDateWeekMonday(date);
+        clicked = true;
+      } else {
+        const tempSunday = computedDateWeekSunday(date);
+        const tempMonday = computedDateWeekMonday(date);
+        if (tempMonday.getTime() > start.value.getTime()) {
+          end.value = tempSunday;
+        } else {
+          end.value = computedDateWeekSunday(start.value);
+          start.value = tempMonday;
+        }
+        clicked = false;
+      }
+    };
+    const weekRangeClick = () => {
+      if (visible.value) {
+        weekRangeRef.value.handleClose();
+      } else {
+        weekRangeRef.value.handleOpen();
+      }
+    };
+    const visibleChange = (tag) => {
+      visible.value = tag;
+      emit("visibleChange", tag);
+    };
+    const handleClose = () => {
+      weekRangeRef.value.handleClose();
+    };
+    const handleOpen = () => {
+      weekRangeRef.value.handleOpen();
+    };
+    const isHover = (cell) => {
+      const {
+        date
+      } = cell;
+      if (hoverItem.value) {
+        const monday = computedDateWeekMonday(hoverItem.value);
+        const sunday = computedDateWeekSunday(hoverItem.value);
+        const currentTime = date.getTime();
+        if (monday.getTime() <= currentTime && sunday.getTime() >= currentTime) {
+          return true;
+        }
+      }
+      return false;
+    };
+    const isInHoverRange = (cell) => {
+      var _a;
+      const {
+        date
+      } = cell;
+      const curTime = date.getTime();
+      if (start.value && !end.value && hoverItem.value) {
+        const curHoverTime = (_a = hoverItem.value) == null ? void 0 : _a.getTime();
+        let tempStart = start.value;
+        let tempEnd = hoverItem.value;
+        if (curHoverTime < start.value.getTime()) {
+          tempEnd = start.value;
+          tempStart = hoverItem.value;
+        }
+        const startTime = tempStart.getTime();
+        const endTime = tempEnd.getTime();
+        if (curTime >= startTime && curTime <= endTime) {
+          return true;
+        }
+        return isHover(cell);
+      }
+      return false;
+    };
+    const onMouseHover = (cell) => {
+      const {
+        date
+      } = cell;
+      hoverItem.value = date;
+    };
+    const onMouseleave = () => {
+      hoverItem.value = null;
+    };
+    const isMonday = (cell) => {
+      const {
+        date
+      } = cell;
+      return date.getDay() === 1;
+    };
+    const isSunday = (cell) => {
+      const {
+        date
+      } = cell;
+      return date.getDay() === 0;
+    };
+    return {
+      ns,
+      curValue,
+      weekRangeRef,
+      isInRange,
+      isInHoverRange,
+      isEnded,
+      isStarted,
+      isToday,
+      weekRangeClick,
+      cellClick,
+      visibleChange,
+      handleChange,
+      handleClose,
+      handleOpen,
+      isHover,
+      isMonday,
+      isSunday,
+      onMouseHover,
+      onMouseleave
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b(),
+      "onClick": this.weekRangeClick
+    }, [createVNode(resolveComponent("el-date-picker"), {
+      "ref": "weekRangeRef",
+      "modelValue": this.curValue,
+      "onUpdate:modelValue": ($event) => this.curValue = $event,
+      "popper-class": this.ns.b("picker-pop"),
+      "type": "daterange",
+      "onChange": this.handleChange,
+      "onVisibleChange": this.visibleChange
+    }, {
+      default: (cell) => {
+        return createVNode("div", {
+          "class": [this.ns.e("cell-item"), this.ns.is("inrange", this.isInRange(cell) && !this.isEnded(cell) && !this.isStarted(cell)), this.ns.is("inhoverrange", this.isInHoverRange(cell) && !this.isEnded(cell) && !this.isStarted(cell)), this.ns.is("hover", this.isHover(cell) && !this.isEnded(cell) && !this.isStarted(cell)), this.ns.is("left", cell.column === 0), this.ns.is("right", cell.column === 6), this.ns.is("ended", this.isEnded(cell)), this.ns.is("started", this.isStarted(cell)), this.ns.is("monday", this.isMonday(cell)), this.ns.is("sunday", this.isSunday(cell))],
+          "onMouseenter": () => this.onMouseHover(cell),
+          "onMouseleave": () => this.onMouseleave(),
+          "onClick": () => this.cellClick(cell)
+        }, [createVNode("span", {
+          "class": [this.ns.em("cell-item", "text"), this.ns.is("today", this.isToday(cell))]
+        }, [cell.text])]);
+      }
+    })]);
+  }
+});
+
+export { weekRangeSelect as default };

package/es/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)}