@opentiny/vue-renderless 3.6.7 → 3.8.0

package/date-picker-mobile/index.js

@@ -0,0 +1,250 @@
+import "../chunk-PKUHTIDK.js";
+const getFormatTime = (time) => {
+  return ("0" + time).slice(-2);
+};
+const getDaysByMonth = (year, month) => {
+  return new Date(year, month, 0).getDate();
+};
+const isSameDay = (day1, day2) => {
+  const theDay1 = new Date(day1);
+  const theDay2 = new Date(day2);
+  return theDay1.getFullYear() === theDay2.getFullYear() && theDay1.getMonth() === theDay2.getMonth() && theDay1.getDate() === theDay2.getDate();
+};
+const getCurrentDate = () => (dateValue) => {
+  const today = /* @__PURE__ */ new Date();
+  const theDate = new Date(dateValue);
+  const year = theDate.getFullYear();
+  const month = theDate.getMonth() + 1;
+  const day = theDate.getDate();
+  const yearMonth = year + "/" + month;
+  const startWeek = new Date(year, month - 1, 1).getDay();
+  const index = startWeek + day - 1;
+  return {
+    date: yearMonth + "/" + day,
+    yearMonth,
+    index,
+    day,
+    year,
+    month,
+    isStartDay: false,
+    isEndDay: false,
+    isToday: isSameDay(today, theDate)
+  };
+};
+const getFormatDate = (date, yearUnit = "/", monthUnit = "/", dayUnit = "") => {
+  const theDate = new Date(date);
+  return theDate.getFullYear() + yearUnit + (theDate.getMonth() + 1) + monthUnit + theDate.getDate() + dayUnit;
+};
+const loadingDate = ({ state, api }) => (direction) => {
+  const list = Object.keys(state.dateList);
+  let date;
+  if (direction === "top") {
+    const yearMonth = list[0].split("/").map((item) => +item);
+    const year = yearMonth[1] === 1 ? yearMonth[0] - 1 : yearMonth[0];
+    const month = yearMonth[1] === 1 ? 11 : yearMonth[1] - 1;
+    date = new Date(year, month, 1);
+  } else {
+    const yearMonth = list[list.length - 1].split("/").map((item) => +item);
+    date = new Date(yearMonth[0], yearMonth[1] - 2, 1);
+  }
+  api.initPanel(date, direction, 2);
+  setTimeout(() => {
+    state.loading = false;
+  }, 300);
+};
+const initPanel = ({ state, api }) => (dateValue, direction, yearNum = 1) => {
+  const currentDate = dateValue || (Array.isArray(state.date) ? state.date[1] : state.date) || /* @__PURE__ */ new Date();
+  let month = currentDate.getMonth() + 1;
+  let year = direction === "top" ? currentDate.getFullYear() - 1 : currentDate.getFullYear();
+  if (yearNum === 1 && !direction) {
+    if (month <= 6) {
+      year -= 1;
+      month += 6;
+    } else {
+      month -= 6;
+    }
+  }
+  let date = new Date(year, month - 1, 1);
+  const dateList = {};
+  Array.from({ length: 12 * yearNum }).map(() => {
+    const startWeek = date.getDay();
+    dateList[year + "/" + month] = Array.from({ length: startWeek }).map(() => ({}));
+    const days = getDaysByMonth(year, month);
+    Array.from({ length: days }).map((v, index) => {
+      const day = index + 1;
+      const dayInfo = api.getCurrentDate(new Date(year, month - 1, day));
+      dateList[year + "/" + month].push(dayInfo);
+    });
+    month++;
+    if (month > 12) {
+      year++;
+      month = 1;
+    }
+    date = new Date(year, month - 1, 1);
+  });
+  state.dateList = dateList;
+};
+const getWeeksByMonth = ({ state }) => (yearMonth) => {
+  const length = state.dateList[yearMonth].length;
+  return Math.ceil(length / 7);
+};
+const getDaysByWeek = ({ state, api }) => (yearMonth, week) => {
+  const length = state.dateList[yearMonth].length;
+  const weeks = api.getWeeksByMonth(yearMonth);
+  return week === weeks ? length % 7 : 7;
+};
+const getDate = ({ state }) => ({ date, yearMonth, index }) => {
+  let currentDate;
+  if (date) {
+    const theDate = new Date(date);
+    currentDate = state.dateList[`${theDate.getFullYear()}/${theDate.getMonth + 1}`].filter((item) => item.day === theDate.getDate()).shift();
+  } else {
+    currentDate = state.dateList[yearMonth][index];
+  }
+  return currentDate || {};
+};
+const getSelectedPosition = ({ state }) => (dateFormat) => {
+  const { selected } = state;
+  if (!selected.length) {
+    return "";
+  }
+  const index = selected.map((item) => getFormatDate(item)).indexOf(dateFormat);
+  const length = selected.length;
+  return index === 0 ? "start" : index === length - 1 ? "end" : index > -1 ? "inner" : "";
+};
+const watchVisible = ({ emit, api, nextTick, vm }) => (bool) => {
+  if (bool) {
+    api.watchModelValue();
+    nextTick(() => {
+      const refBody = vm.$refs.datePickerBody;
+      if (refBody.scrollHeight && !refBody.scrollTop) {
+        refBody.scrollTop = refBody.scrollHeight / 2;
+      }
+    });
+  }
+  emit("update:visible", bool);
+};
+const watchModelValue = ({ props, state }) => () => {
+  const { modelValue, type } = props;
+  if (["daterange", "datetimerange"].includes(type)) {
+    state.date = modelValue && modelValue.length ? modelValue.map((date) => new Date(date)) : [];
+  }
+  if (["datetime", "date"].includes(type)) {
+    state.date = modelValue ? new Date(modelValue) : /* @__PURE__ */ new Date();
+  }
+  if (["datetimerange", "datetime"].includes(type)) {
+    const length = type === "datetime" ? 1 : 2;
+    Array.from({ length }).forEach((v, index) => {
+      const date = type === "datetime" ? state.date : state.date[index];
+      if (date) {
+        state.timeList[index] = [
+          getFormatTime(date.getHours()),
+          getFormatTime(date.getMinutes()),
+          getFormatTime(date.getSeconds())
+        ];
+      }
+    });
+  }
+};
+const selectOption = ({ emit, state, props }) => ({ yearMonth, index }) => {
+  const { type } = props;
+  const currentDateInfo = state.dateList[yearMonth][index];
+  if (!currentDateInfo) {
+    return;
+  }
+  if (["daterange", "datetimerange"].includes(type)) {
+    if (state.date.length > 1) {
+      state.date = [];
+    }
+    state.date.push(new Date(currentDateInfo.date));
+    if (state.date.length === 2) {
+      state.date.sort((a, b) => a.getTime() - b.getTime());
+    }
+  } else {
+    state.date = new Date(currentDateInfo.date);
+    emit("click", currentDateInfo);
+  }
+};
+const confirm = ({ emit, state, props, api }) => () => {
+  const { date, timeList } = state;
+  const { type } = props;
+  if (["daterange", "datetimerange", "datetime"].includes(type)) {
+    const length = type === "datetime" ? 1 : 2;
+    Array.from({ length }).forEach((v, index) => {
+      let thisDate = type === "datetime" ? date : date[index];
+      if (thisDate) {
+        const currentDate = api.getCurrentDate(thisDate);
+        const time = timeList[index];
+        thisDate = new Date(currentDate.year, currentDate.month - 1, currentDate.day, time[0], time[1], time[2]);
+        if (type === "datetime") {
+          state.date = thisDate;
+        } else {
+          state.date[index] = thisDate;
+        }
+      }
+    });
+  }
+  emit("confirm", state.date);
+  emit("update:visible", false);
+  emit("update:modelValue", state.date);
+};
+const timeConfirm = ({ emit, state }) => (value) => {
+  state.timeVisible = false;
+  state.timeList[state.showTimeIndex] = value;
+  emit("time-confirm", value);
+};
+const timeToggle = ({ state }) => (index) => {
+  state.showTimeIndex = index;
+  state.time = state.timeList[index];
+  state.timeVisible = true;
+};
+const selectedComputed = ({ state, props }) => () => {
+  if (["daterange", "datetimerange"].includes(props.type)) {
+    if (state.date && state.date.length) {
+      if (state.date.length === 1) {
+        return [state.date[0]];
+      }
+      const list = [];
+      let date1 = state.date[0].getTime();
+      let date2 = state.date[1].getTime();
+      while (date1 <= date2) {
+        list.push(new Date(date1));
+        date1 += 3600 * 24 * 1e3;
+      }
+      return list;
+    } else {
+      return [];
+    }
+  } else {
+    return state.date ? [getFormatDate(state.date)] : [];
+  }
+};
+const scrollLoadHandler = ({ state, vm, api }) => () => {
+  const refBody = vm.$refs.datePickerBody;
+  if (refBody.scrollHeight && refBody.scrollTop < 50 && !state.loading) {
+    state.loading = true;
+    api.loadingDate("top");
+  } else if (refBody.scrollHeight && refBody.scrollHeight - refBody.offsetHeight - refBody.scrollTop < 10 && !state.loading) {
+    state.loading = true;
+    api.loadingDate("down");
+    refBody.scrollTop = 50;
+  }
+};
+export {
+  confirm,
+  getCurrentDate,
+  getDate,
+  getDaysByWeek,
+  getFormatDate,
+  getSelectedPosition,
+  getWeeksByMonth,
+  initPanel,
+  loadingDate,
+  scrollLoadHandler,
+  selectOption,
+  selectedComputed,
+  timeConfirm,
+  timeToggle,
+  watchModelValue,
+  watchVisible
+};

package/date-picker-mobile/vue.js

@@ -0,0 +1,86 @@
+import "../chunk-PKUHTIDK.js";
+import { on, off } from "../common/deps/dom";
+import {
+  initPanel,
+  getFormatDate,
+  getCurrentDate,
+  getSelectedPosition,
+  getWeeksByMonth,
+  getDaysByWeek,
+  getDate,
+  watchVisible,
+  watchModelValue,
+  selectOption,
+  timeToggle,
+  timeConfirm,
+  selectedComputed,
+  scrollLoadHandler,
+  loadingDate,
+  confirm
+} from "./index";
+const api = [
+  "state",
+  "getDate",
+  "getWeeksByMonth",
+  "getDaysByWeek",
+  "getSelectedPosition",
+  "selectOption",
+  "confirm",
+  "timeToggle",
+  "timeConfirm",
+  "getFormatDate"
+];
+const renderless = (props, { computed, reactive, watch, onMounted, onBeforeUnmount }, { emit, vm, nextTick }) => {
+  const api2 = {};
+  const state = reactive({
+    toggle: false,
+    date: null,
+    loading: false,
+    dateList: {},
+    timeVisible: false,
+    showTimeIndex: 0,
+    time: ["00", "00", "00"],
+    timeList: [
+      ["00", "00", "00"],
+      ["00", "00", "00"]
+    ],
+    selected: computed(() => api2.selectedComputed()),
+    months: computed(() => Object.keys(state.dateList)),
+    btnDisabled: computed(
+      () => ["daterange", "datetimerange"].includes(props.type) && state.date && state.date.length === 1
+    )
+  });
+  Object.assign(api2, {
+    state,
+    initPanel: initPanel({ state, api: api2 }),
+    getCurrentDate: getCurrentDate(),
+    getWeeksByMonth: getWeeksByMonth({ state }),
+    getDate: getDate({ state }),
+    getDaysByWeek: getDaysByWeek({ state, api: api2 }),
+    getSelectedPosition: getSelectedPosition({ state }),
+    confirm: confirm({ state, emit, props, api: api2 }),
+    timeConfirm: timeConfirm({ state, emit }),
+    selectOption: selectOption({ state, emit, props }),
+    timeToggle: timeToggle({ state }),
+    watchVisible: watchVisible({ emit, api: api2, nextTick, vm }),
+    watchModelValue: watchModelValue({ props, state }),
+    selectedComputed: selectedComputed({ props, state }),
+    scrollLoadHandler: scrollLoadHandler({ state, vm, api: api2 }),
+    loadingDate: loadingDate({ state, api: api2 }),
+    getFormatDate
+  });
+  watch(() => props.visible, api2.watchVisible);
+  watch(() => props.modelValue, api2.watchModelValue, { immediate: true });
+  onMounted(() => {
+    api2.initPanel();
+    on(vm.$refs.datePickerBody, "scroll", api2.scrollLoadHandler);
+  });
+  onBeforeUnmount(() => {
+    off(vm.$refs.datePickerBody, "scroll", api2.scrollLoadHandler);
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/date-range/index.js

@@ -11,7 +11,7 @@ import {
   nextMonth,
   prevMonth,
   modifyWithTimeString
-} from "@opentiny/vue-renderless/common/deps/date-util";
+} from "../common/deps/date-util";
 const calcDefaultValue = (defaultValue) => {
   if (Array.isArray(defaultValue)) {
     return [new Date(defaultValue[0]), new Date(defaultValue[1])];

package/date-range/vue.js

@@ -40,7 +40,7 @@ import {
   computerLabel,
   computerEnableYearArrow
 } from "./index";
-import { nextMonth, extractDateFormat, extractTimeFormat } from "@opentiny/vue-renderless/common/deps/date-util";
+import { nextMonth, extractDateFormat, extractTimeFormat } from "../common/deps/date-util";
 const api = [
   "state",
   "handleShortcutClick",

package/date-table/index.js

@@ -1,7 +1,7 @@
 import "../chunk-PKUHTIDK.js";
-import { formatDate } from "@opentiny/vue-renderless/common/deps/date-util";
-import { getFirstDayOfMonth, getDayCountOfMonth, getWeekNumber, prevDate, nextDate, isDate, clearTime } from "@opentiny/vue-renderless/common/deps/date-util";
-import { DATEPICKER } from "@opentiny/vue-renderless/common";
+import { formatDate } from "../common/deps/date-util";
+import { getFirstDayOfMonth, getDayCountOfMonth, getWeekNumber, prevDate, nextDate, isDate, clearTime } from "../common/deps/date-util";
+import { DATEPICKER } from "../common";
 const formatJudg = ({ day, offset, j, i, cell, count, dateCountOfLastMonth }) => {
   const nodfpm = day + offset < 0 ? 7 + day + offset : day + offset;
   if (j + i * 7 >= nodfpm) {

package/date-table/vue.js

@@ -15,7 +15,7 @@ import {
   getCellRangeClasses,
   getCell
 } from "./index";
-import { getStartDateOfMonth } from "@opentiny/vue-renderless/common/deps/date-util";
+import { getStartDateOfMonth } from "../common/deps/date-util";
 const api = ["state", "getCellClasses", "isWeekActive", "handleMouseMove", "handleClick"];
 const initState = ({ reactive, computed, api: api2, props }) => {
   const state = reactive({

package/dialog-box/index.js

@@ -1,25 +1,27 @@
 import "../chunk-PKUHTIDK.js";
-import { on, off, addClass, removeClass } from "@opentiny/vue-renderless/common/deps/dom";
-import { emitEvent } from "@opentiny/vue-renderless/common/event";
-import { getDomNode } from "@opentiny/vue-renderless/common/deps/dom";
+import { on, off, addClass, removeClass } from "../common/deps/dom";
+import { emitEvent } from "../common/event";
+import { getDomNode } from "../common/deps/dom";
 const computedAnimationName = ({ constants, props }) => () => props.rightSlide ? constants.DIALOG_SLIDER_RIGHT : constants.DIALOG_FADE;
 const computedAddUnit = (value) => isNaN(Number(value)) ? value : value + "px";
 const computedStyle = ({ props, state }) => () => {
   const style = {};
-  let { width, top, rightSlide } = props;
+  let { width, top, rightSlide, maxHeight } = props;
   if (top === void 0) {
     top = rightSlide ? "0" : "15vh";
   }
   width = computedAddUnit(width);
   top = computedAddUnit(top);
+  maxHeight = computedAddUnit(maxHeight);
   if (!state.isFull) {
     style.width = width;
-    style.top = top;
+    style.top = state.top || top;
+    style.maxHeight = maxHeight;
     if (rightSlide) {
       style.right = 0;
       style.height = "calc(100vh - " + style.top + ")";
     } else {
-      style.left = "calc((100vw - " + width + ") / 2)";
+      style.left = state.left || "calc((100vw - " + width + ") / 2)";
     }
   }
   return style;
@@ -171,6 +173,8 @@ const handleDrag = ({ parent, props, state, emit }) => (event) => {
     top = top < 0 ? 0 : top > maxY ? maxY : top;
     modalBoxElem.style.left = `${left}px`;
     modalBoxElem.style.top = `${top}px`;
+    state.left = `${left}px`;
+    state.top = `${top}px`;
     state.emitter.emit("boxdrag");
     emit("drag-move", event2);
   };

package/dialog-box/vue.js

@@ -19,7 +19,7 @@ import {
   showScrollbar,
   hideScrollbar
 } from "./index";
-import usePopup from "@opentiny/vue-renderless/common/deps/vue-popup";
+import usePopup from "../common/deps/vue-popup";
 const api = ["afterEnter", "afterLeave", "handleClose", "handleWrapperClick", "handleCancel", "handleConfirm", "handleDrag", "state"];
 const initState = ({ reactive, computed, api: api2, emitter, props }) => {
   const state = reactive({