@opentinyvue/vue-renderless 3.21.0

package/modal/vue.js

@@ -0,0 +1,122 @@
+import "../chunk-G2ADBYYC.js";
+import {
+  dragEvent,
+  handleEvent,
+  mousedownEvent,
+  toggleZoomEvent,
+  revert,
+  maximize,
+  getBox,
+  handleGlobalKeydownEvent,
+  close,
+  updateStyle,
+  addMsgQueue,
+  removeMsgQueue,
+  computedIsMsg,
+  watchValue,
+  created,
+  mounted,
+  beforeUnmouted,
+  selfClickEvent,
+  mouseEnterEvent,
+  mouseLeaveEvent,
+  updateZindex,
+  closeEvent,
+  confirmEvent,
+  cancelEvent,
+  open,
+  resetDragStyle,
+  resetModalViewPosition,
+  computedBoxStyle,
+  handleHashChange,
+  showScrollbar,
+  hideScrollbar,
+  watchVisible
+} from "./index";
+const api = [
+  "state",
+  "dragEvent",
+  "mousedownEvent",
+  "toggleZoomEvent",
+  "revert",
+  "maximize",
+  "getBox",
+  "close",
+  "updateStyle",
+  "selfClickEvent",
+  "mouseEnterEvent",
+  "mouseLeaveEvent",
+  "updateZindex",
+  "closeEvent",
+  "confirmEvent",
+  "cancelEvent",
+  "open",
+  "beforeUnmouted",
+  "resetDragStyle",
+  "resetModalViewPosition"
+];
+const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, watch }, { vm, emit, emitter, nextTick, broadcast, vm: parent, constants, mode }, { isMobileFirstMode }) => {
+  const api2 = {};
+  const lockScrollClass = constants.SCROLL_LOCK_CLASS(mode);
+  const state = reactive({
+    emitter: emitter(),
+    visible: false,
+    contentVisible: false,
+    cumsumZindex: 0,
+    modalTop: 0,
+    modalZindex: 0,
+    zoomLocat: null,
+    isMsg: computed(() => api2.computedIsMsg(props)),
+    prevEvent: null,
+    options: [],
+    theme: props.tiny_theme,
+    boxStyle: computed(() => api2.computedBoxStyle()),
+    timer: 0
+  });
+  Object.assign(api2, {
+    state,
+    broadcast,
+    computedIsMsg: computedIsMsg(),
+    updateStyle: updateStyle({ nextTick, props }),
+    getBox: getBox({ vm }),
+    watchValue: watchValue(api2),
+    created: created({ api: api2, props, state }),
+    mounted: mounted({ api: api2, parent, props, isMobileFirstMode, state }),
+    beforeUnmouted: beforeUnmouted({ api: api2, parent, isMobileFirstMode }),
+    selfClickEvent: selfClickEvent({ api: api2, parent, props }),
+    mouseEnterEvent: mouseEnterEvent(state),
+    mouseLeaveEvent: mouseLeaveEvent({ api: api2, props, state }),
+    updateZindex: updateZindex({ state, props }),
+    handleEvent: handleEvent({ api: api2, emit, parent, props, isMobileFirstMode }),
+    closeEvent: closeEvent(api2),
+    confirmEvent: confirmEvent({ api: api2, state }),
+    cancelEvent: cancelEvent(api2),
+    open: open({ api: api2, emit, nextTick, parent, props, state, isMobileFirstMode }),
+    addMsgQueue: addMsgQueue({ api: api2, parent }),
+    removeMsgQueue: removeMsgQueue({ api: api2, parent }),
+    close: close({ emit, parent, props, state }),
+    handleGlobalKeydownEvent: handleGlobalKeydownEvent(api2),
+    handleHashChange: handleHashChange(api2),
+    maximize: maximize({ api: api2, nextTick, props, state, isMobileFirstMode }),
+    revert: revert({ api: api2, nextTick, state, isMobileFirstMode }),
+    toggleZoomEvent: toggleZoomEvent({ api: api2, emit, parent, state, isMobileFirstMode }),
+    mousedownEvent: mousedownEvent({ api: api2, nextTick, props, state, emit, isMobileFirstMode }),
+    dragEvent: dragEvent({ api: api2, emit, parent, props, state }),
+    resetDragStyle: resetDragStyle(api2),
+    resetModalViewPosition: resetModalViewPosition(api2),
+    computedBoxStyle: computedBoxStyle({ props, isMobileFirstMode }),
+    watchVisible: watchVisible({ api: api2, props }),
+    hideScrollbar: hideScrollbar(lockScrollClass),
+    showScrollbar: showScrollbar(lockScrollClass)
+  });
+  watch(() => props.modelValue, api2.watchValue);
+  watch(() => state.visible, api2.watchVisible);
+  api2.created();
+  onMounted(api2.mounted);
+  onBeforeUnmount(api2.beforeUnmouted);
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/month-range/index.js

@@ -0,0 +1,134 @@
+import "../chunk-G2ADBYYC.js";
+import { isDate, modifyWithTimeString, prevYear, nextYear, nextMonth } from "../common/deps/date-util";
+const calcDefaultValue = (defaultValue) => {
+  if (Array.isArray(defaultValue)) {
+    return [new Date(defaultValue[0]), new Date(defaultValue[1])];
+  } else if (defaultValue) {
+    return [new Date(defaultValue), nextMonth(new Date(defaultValue))];
+  }
+  return [/* @__PURE__ */ new Date(), nextMonth(/* @__PURE__ */ new Date())];
+};
+const watchValue = ({ state }) => (val) => {
+  if (!val) {
+    state.maxDate = null;
+    state.minDate = null;
+  } else if (Array.isArray(val)) {
+    if (isDate(val[0])) {
+      state.minDate = new Date(val[0]);
+    } else {
+      state.minDate = null;
+    }
+    if (isDate(val[1])) {
+      state.maxDate = new Date(val[1]);
+    } else {
+      state.maxDate = null;
+    }
+    if (state.minDate) {
+      state.leftDate = state.minDate;
+      if (state.maxDate && state.unlinkPanels) {
+        const maxDateYear = state.maxDate.getFullYear();
+        const minDateYear = state.minDate.getFullYear();
+        state.rightDate = maxDateYear === minDateYear ? nextYear(state.maxDate) : state.maxDate;
+      } else {
+        state.rightDate = nextYear(state.leftDate);
+      }
+    } else {
+      state.leftDate = calcDefaultValue(state.defaultValue)[0];
+      state.rightDate = nextYear(state.leftDate);
+    }
+  }
+};
+const watchDefaultValue = ({ state }) => (value) => {
+  if (!Array.isArray(state.value)) {
+    const [left, right] = calcDefaultValue(value);
+    state.leftDate = left;
+    state.rightDate = value && value[1] && left.getFullYear() !== right.getFullYear() && state.unlinkPanels ? right : nextYear(state.leftDate);
+  }
+};
+const handleClear = ({ emit, state }) => () => {
+  state.minDate = null;
+  state.maxDate = null;
+  state.leftDate = calcDefaultValue(state.defaultValue)[0];
+  state.rightDate = nextYear(state.leftDate);
+  emit("pick", null);
+};
+const handleChangeRange = (state) => (val) => {
+  state.minDate = val.minDate;
+  state.maxDate = val.maxDate;
+  state.rangeState = val.rangeState;
+};
+const handleRangePick = ({ api, state, t }) => (val, close = true) => {
+  const defaultTime = state.defaultTime || [];
+  const max = modifyWithTimeString(val.maxDate, defaultTime[1], t);
+  const min = modifyWithTimeString(val.minDate, defaultTime[0], t);
+  if (state.minDate === min && state.maxDate === max) {
+    return;
+  }
+  if (state.onPick) {
+    state.onPick(val);
+  }
+  state.minDate = min;
+  state.maxDate = max;
+  setTimeout(() => {
+    state.minDate = min;
+    state.maxDate = max;
+  }, 10);
+  if (!close) {
+    return;
+  }
+  api.handleConfirm();
+};
+const handleShortcutClick = (api) => (shortcutObj) => {
+  if (shortcutObj.onClick) {
+    const choose = {
+      $emit: (type, [start, end]) => {
+        api.doPick(start, end);
+      }
+    };
+    shortcutObj.onClick(choose);
+  }
+};
+const doPick = (emit) => (begin, end) => {
+  emit("pick", [begin, end], false);
+};
+const leftPrevYear = (state) => () => {
+  state.leftDate = prevYear(state.leftDate);
+  if (!state.unlinkPanels) {
+    state.rightDate = prevYear(state.rightDate);
+  }
+};
+const rightNextYear = (state) => () => {
+  if (!state.unlinkPanels) {
+    state.leftDate = nextYear(state.leftDate);
+  }
+  state.rightDate = nextYear(state.rightDate);
+};
+const leftNextYear = (state) => () => state.leftDate = nextYear(state.leftDate);
+const rightPrevYear = (state) => () => state.rightDate = prevYear(state.rightDate);
+const handleConfirm = ({ api, emit, state }) => (visible = false) => {
+  if (api.isValidValue([state.minDate, state.maxDate])) {
+    emit("pick", [state.minDate, state.maxDate], visible);
+  }
+};
+const isValidValue = (state) => (value) => Array.isArray(value) && value && value[1] && value[0] && isDate(value[1]) && isDate(value[0]) && value[0].getTime() <= value[1].getTime() && (typeof state.disabledDate === "function" ? !state.disabledDate(value[1]) && !state.disabledDate(value[0]) : true);
+const resetView = (state) => () => {
+  state.minDate = state.value && isDate(state.value[0]) ? new Date(state.value[0]) : null;
+  state.maxDate = state.value && isDate(state.value[0]) ? new Date(state.value[1]) : null;
+};
+export {
+  calcDefaultValue,
+  doPick,
+  handleChangeRange,
+  handleClear,
+  handleConfirm,
+  handleRangePick,
+  handleShortcutClick,
+  isValidValue,
+  leftNextYear,
+  leftPrevYear,
+  resetView,
+  rightNextYear,
+  rightPrevYear,
+  watchDefaultValue,
+  watchValue
+};

package/month-range/vue.js

@@ -0,0 +1,88 @@
+import "../chunk-G2ADBYYC.js";
+import {
+  resetView,
+  isValidValue,
+  handleConfirm,
+  rightPrevYear,
+  leftNextYear,
+  rightNextYear,
+  leftPrevYear,
+  handleClear,
+  watchValue,
+  watchDefaultValue,
+  handleChangeRange,
+  handleRangePick,
+  handleShortcutClick,
+  doPick
+} from "./index";
+import { nextYear } from "../common/deps/date-util";
+const api = [
+  "state",
+  "rightNextYear",
+  "rightPrevYear",
+  "handleRangePick",
+  "handleShortcutClick",
+  "handleChangeRange",
+  "leftPrevYear",
+  "leftNextYear",
+  "isValidValue"
+];
+const initState = ({ reactive, computed, api: api2, t }) => {
+  const state = reactive({
+    popperClass: "",
+    value: [],
+    defaultValue: null,
+    defaultTime: null,
+    minDate: "",
+    maxDate: "",
+    leftDate: /* @__PURE__ */ new Date(),
+    rightDate: nextYear(/* @__PURE__ */ new Date()),
+    rangeState: { endDate: null, selecting: false, row: null, column: null },
+    shortcuts: "",
+    visible: "",
+    disabledDate: "",
+    format: "",
+    arrowControl: false,
+    unlinkPanels: false,
+    btnDisabled: computed(
+      () => !(state.minDate && state.maxDate && !state.selecting && api2.isValidValue([state.minDate, state.maxDate]))
+    ),
+    leftLabel: computed(() => state.leftDate.getFullYear() + " " + t("ui.datepicker.year")),
+    rightLabel: computed(() => state.rightDate.getFullYear() + " " + t("ui.datepicker.year")),
+    leftYear: computed(() => state.leftDate.getFullYear()),
+    rightYear: computed(
+      () => state.rightDate.getFullYear() === state.leftDate.getFullYear() ? state.leftDate.getFullYear() + 1 : state.rightDate.getFullYear()
+    ),
+    enableYearArrow: computed(() => state.unlinkPanels && state.rightYear > state.leftYear + 1)
+  });
+  return state;
+};
+const renderless = (props, { computed, reactive, watch }, { t, emit: $emit }) => {
+  const api2 = {};
+  const emit = props.emitter ? props.emitter.emit : $emit;
+  const state = initState({ reactive, computed, api: api2, t });
+  Object.assign(api2, {
+    state,
+    resetView: resetView(state),
+    handleChangeRange: handleChangeRange(state),
+    isValidValue: isValidValue(state),
+    leftNextYear: leftNextYear(state),
+    leftPrevYear: leftPrevYear(state),
+    doPick: doPick(emit),
+    rightNextYear: rightNextYear(state),
+    rightPrevYear: rightPrevYear(state),
+    watchValue: watchValue({ state }),
+    handleClear: handleClear({ emit, state }),
+    watchDefaultValue: watchDefaultValue({ state }),
+    handleConfirm: handleConfirm({ api: api2, emit, state }),
+    handleRangePick: handleRangePick({ api: api2, state, t }),
+    handleShortcutClick: handleShortcutClick(api2)
+  });
+  watch(() => state.value, api2.watchValue);
+  watch(() => state.defaultValue, api2.watchDefaultValue);
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/month-table/index.js

@@ -0,0 +1,194 @@
+import "../chunk-G2ADBYYC.js";
+import { toDate } from "../common/date";
+import { hasClass } from "../common/deps/dom";
+import { range as rangeDate, getDayCountOfMonth, nextDate } from "../common/deps/date-util";
+import { arrayFindIndex, coerceTruthyValueToArray, arrayFind } from "../date-table";
+import { DATEPICKER } from "../common";
+const datesInMonth = (year, month) => {
+  const numOfDays = getDayCountOfMonth(year, month);
+  const firstDay = new Date(year, month, 1);
+  return rangeDate(numOfDays).map((n) => nextDate(firstDay, n));
+};
+const clearDate = (date) => new Date(date.getFullYear(), date.getMonth());
+const getMonthTimestamp = (time) => {
+  if (typeof time === "number" || typeof time === "string") {
+    return clearDate(new Date(time)).getTime();
+  } else if (time instanceof Date) {
+    return clearDate(time).getTime();
+  }
+  return NaN;
+};
+const getRows = ({ props, state, vm }) => () => {
+  const tableRows = state.tableRows;
+  const disabledDate = state.disabledDate;
+  const selectedDate = [];
+  const now = getMonthTimestamp(/* @__PURE__ */ new Date());
+  const { date, minDate, maxDate } = props;
+  for (let i = 0; i < 3; i++) {
+    const row = tableRows[i];
+    for (let j = 0; j < 4; j++) {
+      let cell = row[j];
+      if (!cell) {
+        cell = {
+          type: DATEPICKER.Normal,
+          row: i,
+          column: j,
+          inRange: false,
+          start: false,
+          end: false
+        };
+      }
+      cell.type = DATEPICKER.Normal;
+      const index = i * 4 + j;
+      const time = new Date(date.getFullYear(), index).getTime();
+      cell.start = minDate && time === getMonthTimestamp(minDate);
+      cell.end = maxDate && time === getMonthTimestamp(maxDate);
+      cell.inRange = time >= getMonthTimestamp(minDate) && time <= getMonthTimestamp(maxDate);
+      const isToday = time === now;
+      if (isToday) {
+        cell.type = DATEPICKER.Today;
+      }
+      cell.text = index;
+      let cellDate = new Date(time);
+      cell.disabled = typeof disabledDate === "function" && disabledDate(cellDate);
+      cell.selected = arrayFind(selectedDate, (selectDate) => selectDate.getTime() === cellDate.getTime());
+      vm.$set(row, j, cell);
+    }
+  }
+  return tableRows;
+};
+const markRange = ({ props, state }) => (minDate, maxDate) => {
+  minDate = getMonthTimestamp(minDate);
+  maxDate = getMonthTimestamp(maxDate);
+  if (minDate > maxDate) {
+    ;
+    [minDate, maxDate] = [maxDate, minDate];
+  }
+  const rows = state.rows;
+  for (let i = 0, len = rows.length; i < len; i++) {
+    const row = rows[i];
+    for (let j = 0, l = row.length; j < l; j++) {
+      const cell = row[j];
+      const index = i * 4 + j;
+      const time = new Date(props.date.getFullYear(), index).getTime();
+      cell.start = minDate && time === minDate;
+      cell.end = maxDate && time === maxDate;
+      cell.inRange = minDate && time >= minDate && time <= maxDate;
+    }
+  }
+};
+const watchDate = ({ api, props }) => (value, oldvalue) => {
+  if (getMonthTimestamp(value) !== getMonthTimestamp(oldvalue)) {
+    api.markRange(props.minDate, props.maxDate);
+  }
+};
+const getTarget = (event) => {
+  let target = event.target;
+  if (target.tagName === "A") {
+    target = target.parentNode.parentNode;
+  }
+  if (target.tagName === "DIV") {
+    target = target.parentNode;
+  }
+  if (target.tagName !== "TD") {
+    return;
+  }
+  return target;
+};
+const handleMouseMove = ({ api, emit, props, state }) => (event) => {
+  if (!props.rangeState.selecting) {
+    return;
+  }
+  const target = getTarget(event);
+  if (!target) {
+    return;
+  }
+  const row = target.parentNode.rowIndex;
+  const colu = target.cellIndex;
+  if (state.rows[row][colu].disabled) {
+    return;
+  }
+  if (row !== state.lastRow || colu !== state.lastColumn) {
+    state.lastColumn = colu;
+    state.lastRow = row;
+    emit("changerange", {
+      maxDate: props.maxDate,
+      minDate: props.minDate,
+      rangeState: {
+        selecting: true,
+        endDate: api.getMonthOfCell(row * 4 + colu)
+      }
+    });
+  }
+};
+const handleMonthTableClick = ({ api, emit, props }) => (event) => {
+  const target = getTarget(event);
+  if (!target) {
+    return;
+  }
+  if (hasClass(target, "disabled")) {
+    return;
+  }
+  const column = target.cellIndex;
+  const row = target.parentNode.rowIndex;
+  const month = row * 4 + column;
+  const newDate = api.getMonthOfCell(month);
+  if (props.selectionMode === DATEPICKER.Range) {
+    if (props.rangeState.selecting) {
+      if (newDate < props.minDate) {
+        emit("pick", { minDate: newDate, maxDate: props.minDate });
+      } else {
+        emit("pick", { minDate: props.minDate, maxDate: newDate });
+      }
+      props.rangeState.selecting = false;
+    } else {
+      emit("pick", { minDate: newDate, maxDate: null });
+      props.rangeState.selecting = true;
+    }
+  } else {
+    emit("pick", month);
+  }
+};
+const cellMatchesDate = (props) => (cell, date) => {
+  const value = new Date(date);
+  return props.date.getFullYear() === value.getFullYear() && Number(cell.text) === value.getMonth();
+};
+const getCellStyle = ({ api, props }) => (cell) => {
+  const style = {};
+  const year = props.date.getFullYear();
+  const today = /* @__PURE__ */ new Date();
+  const month = cell.text;
+  const defaultValue = props.defaultValue ? Array.isArray(props.defaultValue) ? props.defaultValue : [props.defaultValue] : [];
+  style.disabled = typeof props.disabledDate === "function" ? datesInMonth(year, month).every(props.disabledDate) : false;
+  const execDate = typeof props.value === "object" ? props.value : toDate(props.value);
+  style.current = arrayFindIndex(
+    coerceTruthyValueToArray(execDate),
+    (date) => date.getFullYear() === year && date.getMonth() === month
+  ) >= 0;
+  style.today = today.getFullYear() === year && today.getMonth() === month;
+  style.default = defaultValue.some((date) => api.cellMatchesDate(cell, date));
+  if (cell.inRange) {
+    style[DATEPICKER.InRange] = true;
+    if (cell.start) {
+      style[DATEPICKER.StartDate] = true;
+    }
+    if (cell.end) {
+      style[DATEPICKER.EndDate] = true;
+    }
+  }
+  return style;
+};
+const getMonthOfCell = (props) => (month) => new Date(props.date.getFullYear(), month, 1);
+export {
+  cellMatchesDate,
+  clearDate,
+  datesInMonth,
+  getCellStyle,
+  getMonthOfCell,
+  getMonthTimestamp,
+  getRows,
+  handleMonthTableClick,
+  handleMouseMove,
+  markRange,
+  watchDate
+};

package/month-table/vue.js

@@ -0,0 +1,50 @@
+import "../chunk-G2ADBYYC.js";
+import {
+  getRows,
+  getMonthTimestamp,
+  markRange,
+  watchDate,
+  handleMouseMove,
+  handleMonthTableClick,
+  cellMatchesDate,
+  getCellStyle,
+  getMonthOfCell
+} from "./index";
+import { DATEPICKER } from "../common";
+const api = ["state", "handleMonthTableClick", "handleMouseMove", "getCellStyle"];
+const renderless = (props, { computed, reactive, watch }, { t, vm, emit }) => {
+  const api2 = {};
+  const { MonhtList } = DATEPICKER;
+  const state = reactive({
+    months: MonhtList,
+    tableRows: [[], [], []],
+    lastRow: null,
+    lastColumn: null,
+    rows: computed(() => api2.getRows())
+  });
+  Object.assign(api2, {
+    t,
+    state,
+    getMonthOfCell: getMonthOfCell(props),
+    cellMatchesDate: cellMatchesDate(props),
+    markRange: markRange({ api: api2, props, state }),
+    watchDate: watchDate({ api: api2, props }),
+    getMonthTimestamp: getMonthTimestamp(api2),
+    handleMouseMove: handleMouseMove({ api: api2, emit, props, state }),
+    handleMonthTableClick: handleMonthTableClick({ api: api2, emit, props }),
+    getCellStyle: getCellStyle({ api: api2, props }),
+    getRows: getRows({ props, state, vm })
+  });
+  watch(
+    () => props.rangeState,
+    (value) => api2.markRange(props.minDate, value.endDate),
+    { deep: true }
+  );
+  watch(() => props.minDate, api2.watchDate);
+  watch(() => props.maxDate, api2.watchDate);
+  return api2;
+};
+export {
+  api,
+  renderless
+};