@opentiny/vue-renderless/year-range/vue.js

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

import "../chunk-G2ADBYYC.js";
import {
  handleChangeRange,
  resetView,
  rightPrevYear,
  rightNextYear,
  isValidValue,
  handleConfirm,
  leftPrevYear,
  leftNextYear,
  watchValue,
  handleShortcutClick,
  watchDefaultValue,
  handleRangePick,
  handleClear,
  doPick,
  watchModelValue
} from "./index";
import { DATEPICKER, nextYear } from "@opentiny/utils";
const api = [
  "state",
  "rightPrevYear",
  "rightNextYear",
  "handleRangePick",
  "handleShortcutClick",
  "handleChangeRange",
  "leftPrevYear",
  "leftNextYear",
  "watchModelValue"
];
const initState = ({ reactive, computed, api: api2, props, t }) => {
  const initStartYear = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 10) * 10;
  const state = reactive({
    selectionMode: DATEPICKER.YearRange,
    popperClass: props.popperClass || "",
    value: props.modelValue || [],
    defaultValue: null,
    defaultTime: null,
    minDate: "",
    maxDate: "",
    leftDate: /* @__PURE__ */ new Date(),
    rightDate: nextYear(/* @__PURE__ */ new Date()),
    rangeState: { startDate: null, endDate: null, selecting: false, row: null, column: null },
    shortcuts: props.shortcuts || [],
    visible: "",
    disabledDate: props.disabledDate || null,
    format: props.format || "",
    arrowControl: false,
    unlinkPanels: props.unlinkPanels || false,
    leftStartYear: initStartYear,
    rightStartYear: initStartYear + DATEPICKER.PanelYearNum,
    enableYearArrow: computed(
      () => props.unlinkPanels && state.rightStartYear > state.leftStartYear + DATEPICKER.PanelYearNum
    ),
    btnDisabled: computed(
      () => !(state.minDate && state.maxDate && !state.selecting && api2.isValidValue([state.minDate, state.maxDate]))
    ),
    leftLabel: computed(
      () => `${state.leftStartYear} ${t("ui.datepicker.year")} - ${state.leftStartYear + DATEPICKER.PanelYearNum - 1} ${t(
        "ui.datepicker.year"
      )}`
    ),
    rightLabel: computed(
      () => `${state.rightStartYear} ${t("ui.datepicker.year")} - ${state.rightStartYear + DATEPICKER.PanelYearNum - 1} ${t(
        "ui.datepicker.year"
      )}`
    )
  });
  return state;
};
const renderless = (props, { computed, reactive, watch }, { t, emit: $emit }) => {
  const emit = props.emitter ? props.emitter.emit : $emit;
  const api2 = {};
  const state = initState({ reactive, computed, api: api2, props, t });
  Object.assign(api2, {
    state,
    doPick: doPick(emit),
    resetView: resetView(state),
    watchValue: watchValue({ state }),
    isValidValue: isValidValue(state),
    leftPrevYear: leftPrevYear(state, api2),
    leftNextYear: leftNextYear(state),
    rightPrevYear: rightPrevYear(state),
    rightNextYear: rightNextYear(state, api2),
    handleClear: handleClear({ emit, state }),
    handleChangeRange: handleChangeRange(state, props),
    handleShortcutClick: handleShortcutClick(state, api2, props),
    watchDefaultValue: watchDefaultValue({ state }),
    handleConfirm: handleConfirm({ api: api2, emit, state, props, t }),
    handleRangePick: handleRangePick({ api: api2, state, props, t }),
    watchModelValue: watchModelValue({ state })
  });
  watch(() => props.modelValue, api2.watchModelValue, { immediate: true });
  watch(() => state.value, api2.watchValue);
  watch(() => state.defaultValue, api2.watchDefaultValue);
  return api2;
};
export {
  api,
  renderless
};