winbox-ui-next/lib/date-picker/picker.js

We Design Vue 2.0: A Vue.js 3 UI Library

"use strict";
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var vue = require("vue");
var date = require("../_utils/date.js");
var globalConfig = require("../_utils/global-config.js");
var useState = require("../_hooks/use-state.js");
var usePickerState = require("./hooks/use-picker-state.js");
var input = require("../_components/picker/input.js");
var index = require("../trigger/index.js");
var index$3 = require("../time-picker/utils/index.js");
var pickerPanel = require("./picker-panel.js");
var pick = require("../_utils/pick.js");
var useFormat = require("./hooks/use-format.js");
var is = require("../_utils/is.js");
var index$1 = require("../icon/icon-calendar/index.js");
var useIsDisabledDate = require("./hooks/use-is-disabled-date.js");
var useMergeState = require("../_hooks/use-merge-state.js");
var useProvideDatepickerTransform = require("./hooks/use-provide-datepicker-transform.js");
var useHeaderValue = require("./hooks/use-header-value.js");
var omit = require("../_utils/omit.js");
var useTimePickerValue = require("./hooks/use-time-picker-value.js");
var index$4 = require("./utils/index.js");
var useValueFormat = require("./hooks/use-value-format.js");
var useFormItem = require("../_hooks/use-form-item.js");
var index$2 = require("../locale/index.js");
var pluginVue_exportHelper = require("../_virtual/plugin-vue_export-helper");
const _sfc_main = vue.defineComponent({
  name: "Picker",
  components: {
    DateInput: input,
    Trigger: index,
    PickerPanel: pickerPanel,
    IconCalendar: index$1
  },
  inheritAttrs: false,
  props: {
    locale: {
      type: Object
    },
    hideTrigger: {
      type: Boolean
    },
    clearable: {
      type: Boolean,
      default: true
    },
    readonly: {
      type: Boolean
    },
    error: {
      type: Boolean
    },
    size: {
      type: String
    },
    shortcuts: {
      type: Array,
      default: () => []
    },
    shortcutsPosition: {
      type: String,
      default: "bottom"
    },
    position: {
      type: String,
      default: "bl"
    },
    popupVisible: {
      type: Boolean,
      default: void 0
    },
    defaultPopupVisible: {
      type: Boolean,
      default: false
    },
    triggerProps: {
      type: Object
    },
    unmountOnClose: {
      type: Boolean
    },
    placeholder: {
      type: String
    },
    disabled: {
      type: Boolean
    },
    disabledDate: {
      type: Function
    },
    disabledTime: {
      type: Function
    },
    pickerValue: {
      type: [Object, String, Number]
    },
    defaultPickerValue: {
      type: [Object, String, Number]
    },
    popupContainer: {
      type: [String, Object]
    },
    mode: {
      type: String,
      default: "date"
    },
    format: {
      type: [String, Function]
    },
    valueFormat: {
      type: String
    },
    previewShortcut: {
      type: Boolean,
      default: true
    },
    showConfirmBtn: {
      type: Boolean
    },
    showTime: {
      type: Boolean
    },
    timePickerProps: {
      type: Object
    },
    showNowBtn: {
      type: Boolean,
      defaut: true
    },
    dayStartOfWeek: {
      type: Number,
      default: 0
    },
    modelValue: {
      type: [Object, String, Number]
    },
    defaultValue: {
      type: [Object, String, Number]
    }
  },
  emits: {
    "change": (value, dateString, date2) => {
      return true;
    },
    "update:modelValue": (value) => {
      return true;
    },
    "select": (value, dateString, date2) => {
      return true;
    },
    "popup-visible-change": (visible) => {
      return true;
    },
    "update:popupVisible": (visible) => {
      return true;
    },
    "ok": (value, dateString, date2) => {
      return true;
    },
    "clear": () => {
      return true;
    },
    "select-shortcut": (shortcut) => {
      return true;
    },
    "picker-value-change": (value, date2, dateString) => {
      return true;
    },
    "update:pickerValue": (value) => {
      return true;
    }
  },
  setup(props, { emit, slots }) {
    const {
      mode,
      modelValue,
      defaultValue,
      format,
      valueFormat,
      placeholder,
      popupVisible,
      defaultPopupVisible,
      disabled,
      showTime,
      timePickerProps,
      disabledDate,
      disabledTime,
      readonly,
      locale,
      pickerValue,
      defaultPickerValue,
      dayStartOfWeek,
      previewShortcut,
      showConfirmBtn
    } = vue.toRefs(props);
    const { locale: globalLocal } = index$2.useI18n();
    vue.watchEffect(() => {
      date.initializeDateLocale(globalLocal.value, dayStartOfWeek.value);
    });
    const { mergedDisabled, eventHandlers } = useFormItem.useFormItem({ disabled });
    const datePickerT = useProvideDatepickerTransform(vue.reactive({
      locale
    }));
    const prefixCls = globalConfig.getPrefixCls("picker");
    const refInput = vue.ref();
    const computedPlaceholder = vue.computed(() => (placeholder == null ? void 0 : placeholder.value) || {
      date: datePickerT("datePicker.placeholder.date"),
      month: datePickerT("datePicker.placeholder.month"),
      year: datePickerT("datePicker.placeholder.year"),
      week: datePickerT("datePicker.placeholder.week"),
      quarter: datePickerT("datePicker.placeholder.quarter")
    }[mode.value] || datePickerT("datePicker.placeholder.date"));
    const {
      format: computedFormat,
      valueFormat: returnValueFormat,
      parseValueFormat
    } = useFormat["default"](vue.reactive({ format, mode, showTime, valueFormat }));
    const inputFormat = vue.computed(() => format && is.isFunction(format.value) ? (value) => {
      var _a;
      return (_a = format.value) == null ? void 0 : _a.call(format, date.getDateValue(value));
    } : computedFormat.value);
    const getReturnValue = useValueFormat.useReturnValue(vue.reactive({
      format: returnValueFormat
    }));
    const isDisabledDate = useIsDisabledDate(vue.reactive({
      mode,
      disabledDate,
      disabledTime,
      showTime
    }));
    const needConfirm = vue.computed(() => showTime.value || showConfirmBtn.value);
    const confirmBtnDisabled = vue.computed(() => needConfirm.value && (!forSelectedValue.value || isDisabledDate(forSelectedValue.value)));
    const isDateTime = vue.computed(() => mode.value === "date" && showTime.value);
    const { value: selectedValue, setValue: setSelectedValue } = usePickerState(vue.reactive({
      modelValue,
      defaultValue,
      format: parseValueFormat
    }));
    const [processValue, setProcessValue] = useState();
    const [previewValue, setPreviewValue] = useState();
    const forSelectedValue = vue.computed(() => {
      var _a;
      return (_a = processValue.value) != null ? _a : selectedValue.value;
    });
    const panelValue = vue.computed(() => {
      var _a, _b;
      return (_b = (_a = previewValue.value) != null ? _a : processValue.value) != null ? _b : selectedValue.value;
    });
    const [inputValue, setInputValue] = useState();
    const [panelVisible, setLocalPanelVisible] = useMergeState(defaultPopupVisible.value, vue.reactive({ value: popupVisible }));
    const setPanelVisible = (newVisible) => {
      if (panelVisible.value !== newVisible) {
        setLocalPanelVisible(newVisible);
        emit("popup-visible-change", newVisible);
        emit("update:popupVisible", newVisible);
      }
    };
    const { headerValue, setHeaderValue, headerOperations, resetHeaderValue } = useHeaderValue(vue.reactive({
      mode,
      value: pickerValue,
      defaultValue: defaultPickerValue,
      selectedValue: panelValue,
      format: parseValueFormat,
      onChange: (newVal) => {
        const returnValue = getReturnValue(newVal);
        const formattedValue = index$3.getFormattedValue(newVal, parseValueFormat.value);
        const dateValue = date.getDateValue(newVal);
        emit("picker-value-change", returnValue, dateValue, formattedValue);
        emit("update:pickerValue", returnValue);
      }
    }));
    const [timePickerValue, , resetTimePickerValue] = useTimePickerValue(vue.reactive({
      timePickerProps,
      selectedValue: panelValue
    }));
    const inputEditable = vue.computed(() => !readonly.value && !is.isFunction(inputFormat.value));
    const headerMode = vue.ref();
    vue.watch(panelVisible, (newVisible) => {
      setProcessValue(void 0);
      setPreviewValue(void 0);
      if (newVisible) {
        resetHeaderValue();
        resetTimePickerValue();
      }
      if (!newVisible) {
        setInputValue(void 0);
      }
    });
    function emitChange(value, emitOk) {
      var _a, _b;
      const returnValue = value ? getReturnValue(value) : void 0;
      const formattedValue = index$3.getFormattedValue(value, parseValueFormat.value);
      const dateValue = date.getDateValue(value);
      if (date.isValueChange(value, selectedValue.value)) {
        emit("update:modelValue", returnValue);
        emit("change", returnValue, dateValue, formattedValue);
        (_b = (_a = eventHandlers.value) == null ? void 0 : _a.onChange) == null ? void 0 : _b.call(_a);
      }
      if (emitOk) {
        emit("ok", returnValue, dateValue, formattedValue);
      }
    }
    function confirm(value, showPanel, emitOk) {
      if (isDisabledDate(value)) {
        return;
      }
      emitChange(value, emitOk);
      setSelectedValue(value);
      setProcessValue(void 0);
      setPreviewValue(void 0);
      setInputValue(void 0);
      headerMode.value = void 0;
      if (is.isBoolean(showPanel)) {
        setPanelVisible(showPanel);
      }
    }
    function select(value, emitSelect) {
      setProcessValue(value);
      setPreviewValue(void 0);
      setInputValue(void 0);
      headerMode.value = void 0;
      if (emitSelect) {
        const returnValue = value ? getReturnValue(value) : void 0;
        const formattedValue = index$3.getFormattedValue(value, parseValueFormat.value);
        const dateValue = date.getDateValue(value);
        emit("select", returnValue, dateValue, formattedValue);
      }
    }
    function focusInput(index2) {
      refInput.value && refInput.value.focus && refInput.value.focus(index2);
    }
    function getMergedOpValue(date$1, time) {
      if (!isDateTime.value && !timePickerProps.value)
        return date$1;
      return index$4.mergeValueWithTime(date.getNow(), date$1, time);
    }
    function onPanelVisibleChange(visible) {
      if (mergedDisabled.value)
        return;
      setPanelVisible(visible);
    }
    function onInputClear(e) {
      e.stopPropagation();
      confirm(void 0);
      emit("clear");
    }
    function onInputBlur() {
      var _a, _b;
      (_b = (_a = eventHandlers.value) == null ? void 0 : _a.onBlur) == null ? void 0 : _b.call(_a);
    }
    function onInputChange(e) {
      setPanelVisible(true);
      const targetValue = e.target.value;
      setInputValue(targetValue);
      if (!index$3.isValidInputValue(targetValue, computedFormat.value))
        return;
      const newValue = date.dayjs(targetValue, computedFormat.value);
      if (isDisabledDate(newValue))
        return;
      if (needConfirm.value) {
        select(newValue);
      } else {
        confirm(newValue, true);
      }
    }
    function onInputPressEnter() {
      confirm(panelValue.value, false);
    }
    function onPanelSelect(value) {
      if (needConfirm.value) {
        select(value, true);
      } else {
        confirm(value, false);
      }
    }
    function onPanelCellClick(value) {
      const newValue = getMergedOpValue(value, timePickerValue.value);
      onPanelSelect(newValue);
    }
    function onTimePickerSelect(time) {
      const newValue = getMergedOpValue(panelValue.value || date.getNow(), time);
      onPanelSelect(newValue);
    }
    function onPanelConfirm() {
      confirm(panelValue.value, false, true);
    }
    function onPanelClick() {
      focusInput();
    }
    let clearPreviewTimer;
    vue.onUnmounted(() => {
      clearTimeout(clearPreviewTimer);
    });
    function onPanelShortcutMouseEnter(value) {
      clearTimeout(clearPreviewTimer);
      setPreviewValue(value);
      setInputValue(void 0);
    }
    function onPanelShortcutMouseLeave() {
      clearTimeout(clearPreviewTimer);
      clearPreviewTimer = setTimeout(() => {
        setPreviewValue(void 0);
      }, 100);
    }
    function onPanelShortcutClick(value, shortcut) {
      emit("select-shortcut", shortcut);
      confirm(value, false);
    }
    function onPanelHeaderLabelClick(type) {
      headerMode.value = type;
    }
    function onMonthHeaderClick() {
      headerMode.value = "year";
    }
    function onPanelHeaderSelect(date2) {
      let newValue = headerValue.value;
      newValue = newValue.set("year", date2.year());
      if (headerMode.value === "month") {
        newValue = newValue.set("month", date2.month());
      }
      setHeaderValue(newValue);
      if (mode.value === "quarter" || mode.value === "month") {
        headerMode.value = void 0;
        return;
      }
      headerMode.value = headerMode.value === "year" ? "month" : void 0;
    }
    const computedTimePickerProps = vue.computed(() => __spreadProps(__spreadValues({
      format: computedFormat.value
    }, omit.omit((timePickerProps == null ? void 0 : timePickerProps.value) || {}, ["defaultValue"])), {
      visible: panelVisible.value
    }));
    const panelProps = vue.computed(() => __spreadProps(__spreadValues({}, pick(props, [
      "mode",
      "shortcuts",
      "shortcutsPosition",
      "dayStartOfWeek",
      "disabledDate",
      "disabledTime",
      "showTime",
      "hideTrigger"
    ])), {
      showNowBtn: props.showNowBtn && mode.value === "date",
      prefixCls,
      format: parseValueFormat.value,
      value: panelValue.value,
      visible: panelVisible.value,
      showConfirmBtn: needConfirm.value,
      confirmBtnDisabled: confirmBtnDisabled.value,
      timePickerProps: computedTimePickerProps.value,
      extra: slots.extra,
      dateRender: slots.cell,
      headerValue,
      headerIcons: {
        prev: slots["icon-prev"],
        prevDouble: slots["icon-prev-double"],
        next: slots["icon-next"],
        nextDouble: slots["icon-next-double"]
      },
      headerOperations: headerOperations.value,
      timePickerValue: timePickerValue.value,
      headerMode: headerMode.value,
      onCellClick: onPanelCellClick,
      onTimePickerSelect,
      onConfirm: onPanelConfirm,
      onShortcutClick: onPanelShortcutClick,
      onShortcutMouseEnter: previewShortcut.value ? onPanelShortcutMouseEnter : void 0,
      onShortcutMouseLeave: previewShortcut.value ? onPanelShortcutMouseLeave : void 0,
      onTodayBtnClick: onPanelSelect,
      onHeaderLabelClick: onPanelHeaderLabelClick,
      onHeaderSelect: onPanelHeaderSelect,
      onMonthHeaderClick
    }));
    return {
      prefixCls,
      refInput,
      panelProps,
      panelValue,
      inputValue,
      selectedValue,
      inputFormat,
      computedPlaceholder,
      panelVisible,
      inputEditable,
      needConfirm,
      mergedDisabled,
      onPanelVisibleChange,
      onInputClear,
      onInputChange,
      onInputPressEnter,
      onInputBlur,
      onPanelClick
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_IconCalendar = vue.resolveComponent("IconCalendar");
  const _component_DateInput = vue.resolveComponent("DateInput");
  const _component_PickerPanel = vue.resolveComponent("PickerPanel");
  const _component_Trigger = vue.resolveComponent("Trigger");
  return !_ctx.hideTrigger ? (vue.openBlock(), vue.createBlock(_component_Trigger, vue.mergeProps({
    key: 0,
    trigger: "click",
    "animation-name": "slide-dynamic-origin",
    "auto-fit-transform-origin": "",
    "click-to-close": false,
    "popup-offset": 4
  }, _ctx.triggerProps, {
    position: _ctx.position,
    disabled: _ctx.mergedDisabled || _ctx.readonly,
    "prevent-focus": true,
    "popup-visible": _ctx.panelVisible,
    "unmount-on-close": _ctx.unmountOnClose,
    "popup-container": _ctx.popupContainer,
    onPopupVisibleChange: _ctx.onPanelVisibleChange
  }), {
    content: vue.withCtx(() => [
      vue.createVNode(_component_PickerPanel, vue.mergeProps(_ctx.panelProps, { onClick: _ctx.onPanelClick }), null, 16, ["onClick"])
    ]),
    default: vue.withCtx(() => [
      vue.renderSlot(_ctx.$slots, "default", {}, () => [
        vue.createVNode(_component_DateInput, vue.mergeProps(_ctx.$attrs, {
          ref: "refInput",
          size: _ctx.size,
          focused: _ctx.panelVisible,
          visible: _ctx.panelVisible,
          error: _ctx.error,
          disabled: _ctx.mergedDisabled,
          readonly: !_ctx.inputEditable,
          clearable: _ctx.clearable && !_ctx.readonly,
          placeholder: _ctx.computedPlaceholder,
          "input-value": _ctx.inputValue,
          value: _ctx.needConfirm ? _ctx.panelValue : _ctx.selectedValue,
          format: _ctx.inputFormat,
          onClear: _ctx.onInputClear,
          onChange: _ctx.onInputChange,
          onPressEnter: _ctx.onInputPressEnter
        }), vue.createSlots({
          "suffix-icon": vue.withCtx(() => [
            vue.renderSlot(_ctx.$slots, "suffix-icon", {}, () => [
              vue.createVNode(_component_IconCalendar)
            ])
          ]),
          _: 2
        }, [
          _ctx.$slots.prefix ? {
            name: "prefix",
            fn: vue.withCtx(() => [
              vue.renderSlot(_ctx.$slots, "prefix")
            ])
          } : void 0
        ]), 1040, ["size", "focused", "visible", "error", "disabled", "readonly", "clearable", "placeholder", "input-value", "value", "format", "onClear", "onChange", "onPressEnter"])
      ])
    ]),
    _: 3
  }, 16, ["position", "disabled", "popup-visible", "unmount-on-close", "popup-container", "onPopupVisibleChange"])) : (vue.openBlock(), vue.createBlock(_component_PickerPanel, vue.normalizeProps(vue.mergeProps({ key: 1 }, __spreadValues(__spreadValues({}, _ctx.$attrs), _ctx.panelProps))), null, 16));
}
var Picker = /* @__PURE__ */ pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
module.exports = Picker;