@wocwin/t-ui-plus/es/packages/components/date-picker/src/index.vue2.mjs

Page level components developed based on Element Plus.

import { defineComponent, useAttrs, useSlots, computed, ref, reactive, watch, resolveComponent, createElementBlock, openBlock, createVNode, mergeProps, isRef, unref, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
import '../../../hooks/index.mjs';
import { useLocale } from '../../../hooks/useLocale.mjs';

var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "TDatePicker"
  },
  __name: "index",
  props: {
    modelValue: {},
    plusTime: { type: Boolean, default: false },
    type: { default: "date" },
    shortcuts: {},
    isPickerOptions: { type: Boolean, default: false }
  },
  emits: ["update:modelValue", "change"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const { t } = useLocale();
    const attrs = useAttrs();
    const slots = useSlots();
    let time = computed({
      get() {
        return props.modelValue;
      },
      set(val) {
        emits("update:modelValue", val);
      }
    });
    const DatePicker = ref();
    const attrsBind = computed(() => {
      const baseAttrs = {
        date: { "value-format": "YYYY-MM-DD", placeholder: t("plus.datepicker.date") },
        dates: { "value-format": "YYYY-MM-DD", placeholder: t("plus.datepicker.dates") },
        week: { format: "YYYY \u7B2C ww \u5468", placeholder: t("plus.datepicker.week") },
        month: {
          "value-format": "YYYY-MM",
          format: "YYYY-MM",
          placeholder: t("plus.datepicker.month")
        },
        months: {
          "value-format": "YYYY-MM",
          format: "YYYY-MM",
          placeholder: t("plus.datepicker.months")
        },
        year: { "value-format": "YYYY", format: "YYYY", placeholder: t("plus.datepicker.year") },
        years: { "value-format": "YYYY", format: "YYYY", placeholder: t("plus.datepicker.years") },
        daterange: {
          "value-format": "YYYY-MM-DD",
          "range-separator": "~",
          "start-placeholder": t("plus.datepicker.startDatePlaceholder"),
          "end-placeholder": t("plus.datepicker.endDatePlaceholder")
        },
        monthrange: {
          "value-format": "YYYY-MM",
          "range-separator": "~",
          "start-placeholder": t("plus.datepicker.startMonthPlaceholder"),
          "end-placeholder": t("plus.datepicker.endMonthPlaceholder")
        },
        datetime: {
          format: "YYYY-MM-DD HH:mm:ss",
          "value-format": "YYYY-MM-DD HH:mm:ss",
          placeholder: t("plus.datepicker.datetime")
        },
        datetimerange: {
          format: "YYYY-MM-DD HH:mm:ss",
          "value-format": "YYYY-MM-DD HH:mm:ss",
          "range-separator": "~",
          "start-placeholder": t("plus.datepicker.startTimePlaceholder"),
          "end-placeholder": t("plus.datepicker.endTimePlaceholder")
        }
      };
      const typeAttrs = baseAttrs[props.type] || {};
      return {
        ...typeAttrs,
        ...attrs
      };
    });
    const state = reactive({
      dateOptions: props.shortcuts
    });
    const getShortcuts = (type) => {
      const shortcuts = {
        date: [
          { text: t("plus.datepicker.shortcutsDate.today"), value: /* @__PURE__ */ new Date() },
          {
            text: t("plus.datepicker.shortcutsDate.yesterday"),
            value: () => subtractDays(/* @__PURE__ */ new Date(), 1)
          },
          {
            text: t("plus.datepicker.shortcutsDate.lastWeek"),
            value: () => subtractDays(/* @__PURE__ */ new Date(), 7)
          }
        ],
        daterange: [
          {
            text: t("plus.datepicker.shortcutsDaterange.pastWeek"),
            value: () => [subtractDays(/* @__PURE__ */ new Date(), 7), /* @__PURE__ */ new Date()]
          },
          {
            text: t("plus.datepicker.shortcutsDaterange.pastMonth"),
            value: () => [subtractDays(/* @__PURE__ */ new Date(), 30), /* @__PURE__ */ new Date()]
          },
          {
            text: t("plus.datepicker.shortcutsDaterange.pastThreeMonths"),
            value: () => [subtractDays(/* @__PURE__ */ new Date(), 90), /* @__PURE__ */ new Date()]
          }
        ],
        monthrange: [
          { text: t("plus.datepicker.shortcutsMonthrange.thisMonth"), value: [/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date()] },
          {
            text: t("plus.datepicker.shortcutsMonthrange.thisYear"),
            value: () => [new Date((/* @__PURE__ */ new Date()).getFullYear(), 0), /* @__PURE__ */ new Date()]
          },
          {
            text: t("plus.datepicker.shortcutsMonthrange.pastSixMonths"),
            value: () => [subtractMonths(/* @__PURE__ */ new Date(), 6), /* @__PURE__ */ new Date()]
          }
        ],
        datetime: [
          { text: t("plus.datepicker.shortcutsDatetime.today"), value: /* @__PURE__ */ new Date() },
          {
            text: t("plus.datepicker.shortcutsDatetime.yesterday"),
            value: () => subtractDays(/* @__PURE__ */ new Date(), 1)
          },
          {
            text: t("plus.datepicker.shortcutsDatetime.lastWeek"),
            value: () => subtractDays(/* @__PURE__ */ new Date(), 7)
          }
        ],
        datetimerange: [
          {
            text: t("plus.datepicker.shortcutsDatetimerange.pastWeek"),
            value: () => [subtractDays(/* @__PURE__ */ new Date(), 7), /* @__PURE__ */ new Date()]
          },
          {
            text: t("plus.datepicker.shortcutsDatetimerange.pastMonth"),
            value: () => [subtractDays(/* @__PURE__ */ new Date(), 30), /* @__PURE__ */ new Date()]
          },
          {
            text: t("plus.datepicker.shortcutsDatetimerange.pastThreeMonths"),
            value: () => [subtractDays(/* @__PURE__ */ new Date(), 90), /* @__PURE__ */ new Date()]
          }
        ]
      };
      return shortcuts[type] || [];
    };
    const subtractDays = (date, days) => {
      const newDate = new Date(date);
      newDate.setDate(newDate.getDate() - days);
      return newDate;
    };
    const subtractMonths = (date, months) => {
      const newDate = new Date(date);
      newDate.setMonth(newDate.getMonth() - months);
      return newDate;
    };
    const dateChange = (val) => {
      var _a, _b, _c, _d, _e;
      if (props.type === "daterange" && val) {
        let [startTime, endTime] = val;
        if (props.plusTime) {
          startTime += " 00:00:00";
          endTime += " 23:59:59";
        }
        time.value = [startTime, endTime];
        emits("change", [startTime, endTime]);
        (_a = DatePicker.value.getElementsByClassName("el-range-input")[0]) == null ? void 0 : _a.blur();
        (_b = DatePicker.value.getElementsByClassName("el-range-input")[1]) == null ? void 0 : _b.blur();
      } else {
        emits("change", val);
        if (props.type.includes("range")) {
          (_c = DatePicker.value.getElementsByClassName("el-range-input")[0]) == null ? void 0 : _c.blur();
          (_d = DatePicker.value.getElementsByClassName("el-range-input")[1]) == null ? void 0 : _d.blur();
        } else {
          (_e = DatePicker.value.getElementsByClassName("el-input__inner")[0]) == null ? void 0 : _e.blur();
        }
      }
    };
    if (props.isPickerOptions) {
      state.dateOptions = getShortcuts(props.type);
    }
    watch(
      () => props.shortcuts,
      (val) => {
        if (props.isPickerOptions) {
          state.dateOptions = getShortcuts(props.type);
        } else {
          state.dateOptions = val;
        }
      },
      { deep: true }
    );
    const clear = () => {
      emits("update:modelValue", null);
    };
    __expose({ state, clear });
    return (_ctx, _cache) => {
      const _component_el_date_picker = resolveComponent("el-date-picker");
      return openBlock(), createElementBlock(
        "div",
        {
          class: "t-date-picker",
          ref_key: "DatePicker",
          ref: DatePicker
        },
        [
          createVNode(_component_el_date_picker, mergeProps({
            type: _ctx.type,
            modelValue: unref(time),
            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(time) ? time.value = $event : time = $event),
            shortcuts: state.dateOptions,
            onChange: dateChange
          }, attrsBind.value), createSlots({
            _: 2
            /* DYNAMIC */
          }, [
            renderList(unref(slots), (_index, name) => {
              return {
                name,
                fn: withCtx((data) => [
                  renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(data)))
                ])
              };
            })
          ]), 1040, ["type", "modelValue", "shortcuts"])
        ],
        512
        /* NEED_PATCH */
      );
    };
  }
});

export { _sfc_main as default };