plus-pro-components/lib/components/date-picker/src/index.vue2.js

Page level components developed based on Element Plus.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var elementPlus = require('element-plus');
require('../../utils/index.js');
require('../../../hooks/index.js');
var useLocale = require('../../../hooks/useLocale.js');
var is = require('../../utils/is.js');

const _hoisted_1 = { class: "plus-date-picker__middle" };
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "PlusDatePicker"
  },
  __name: "index",
  props: {
    modelValue: { default: () => [] },
    rangeSeparator: { default: "/" },
    valueFormat: { default: "YYYY-MM-DD HH:mm:ss" },
    type: { default: "datetime" },
    startProps: { default: () => ({}) },
    endProps: { default: () => ({}) },
    disabled: { type: Boolean, default: false },
    startDisabledDate: { type: Function, default: (startTime, endValue) => {
      if (!endValue) return false;
      return startTime.getTime() > new Date(endValue).getTime();
    } },
    endDisabledDate: { type: Function, default: (endTime, startValue) => {
      if (!startValue) return false;
      return endTime.getTime() < new Date(startValue).getTime();
    } }
  },
  emits: ["change", "focus", "update:modelValue"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const { t } = useLocale.useLocale();
    const attrs = vue.useAttrs();
    const computedStartProps = vue.computed(() => ({ ...attrs, ...props.startProps }));
    const computedEndProps = vue.computed(() => ({ ...attrs, ...props.endProps }));
    const startPickerInstance = vue.ref();
    const endPickerInstance = vue.ref();
    const state = vue.reactive({
      start: "",
      end: ""
    });
    const formDisabled = elementPlus.useFormDisabled();
    const isFocus = vue.ref(false);
    const handleFocus = (event) => {
      isFocus.value = true;
      emit("focus", event);
    };
    const onClickOutside = () => {
      isFocus.value = false;
    };
    const subStartDisabledDate = (time) => {
      if (props.startDisabledDate && is.isFunction(props.startDisabledDate)) {
        return props.startDisabledDate(time, state.end);
      }
      return false;
    };
    const subEndDisabledDate = (time) => {
      if (props.endDisabledDate && is.isFunction(props.endDisabledDate)) {
        return props.endDisabledDate(time, state.start);
      }
      return false;
    };
    vue.watch(
      () => props.modelValue,
      (val) => {
        const [start, end] = val;
        state.start = start;
        state.end = end;
      },
      {
        immediate: true
      }
    );
    const handleChange = () => {
      const res = [state.start, state.end];
      emit("update:modelValue", res);
      emit("change", res);
    };
    __expose({
      startPickerInstance,
      endPickerInstance
    });
    return (_ctx, _cache) => {
      return vue.withDirectives((vue.openBlock(), vue.createElementBlock(
        "div",
        {
          class: vue.normalizeClass(["plus-date-picker", {
            "is-focus": isFocus.value,
            "is-disabled": vue.unref(formDisabled)
          }])
        },
        [
          vue.createVNode(vue.unref(elementPlus.ElDatePicker), vue.mergeProps({
            ref_key: "startPickerInstance",
            ref: startPickerInstance,
            modelValue: state.start,
            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.start = $event),
            type: _ctx.type,
            "value-format": _ctx.valueFormat,
            placeholder: vue.unref(t)("plus.datepicker.startPlaceholder"),
            "disabled-date": subStartDisabledDate,
            class: "plus-date-picker__start",
            clearable: "",
            disabled: vue.unref(formDisabled)
          }, computedStartProps.value, {
            onChange: handleChange,
            onFocus: handleFocus
          }), null, 16, ["modelValue", "type", "value-format", "placeholder", "disabled"]),
          vue.createElementVNode(
            "span",
            _hoisted_1,
            vue.toDisplayString(_ctx.rangeSeparator),
            1
            /* TEXT */
          ),
          vue.createVNode(vue.unref(elementPlus.ElDatePicker), vue.mergeProps({
            ref_key: "endPickerInstance",
            ref: endPickerInstance,
            modelValue: state.end,
            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => state.end = $event),
            "value-format": _ctx.valueFormat,
            type: _ctx.type,
            placeholder: vue.unref(t)("plus.datepicker.endPlaceholder"),
            "disabled-date": subEndDisabledDate,
            class: "plus-date-picker__end",
            clearable: "",
            disabled: vue.unref(formDisabled)
          }, computedEndProps.value, {
            onChange: handleChange,
            onFocus: handleFocus
          }), null, 16, ["modelValue", "value-format", "type", "placeholder", "disabled"])
        ],
        2
        /* CLASS */
      )), [
        [vue.unref(elementPlus.ClickOutside), onClickOutside]
      ]);
    };
  }
});

exports.default = _sfc_main;