@opentiny/vue-renderless 3.11.8 → 3.12.0

package/calendar-bar/vue.js

@@ -1,6 +1,7 @@
 import "../chunk-G2ADBYYC.js";
 import {
   getCalendarDays,
+  computedData,
   computedCurrentRow,
   computedFilteredCalendarDays,
   handleDraggerClick,
@@ -16,7 +17,16 @@ import {
   setCascaderVisible,
   handleCascaderChange,
   computeCascaderOptions,
-  i18nYearMonth
+  getAllDatesOfCurrWeek,
+  updateCalendarDays,
+  showWeekChange,
+  getWeekOfDate,
+  getPrevWeek,
+  getNextWeek,
+  i18nYearMonth,
+  touchstart,
+  touchmove,
+  touchend
 } from "./index";
 import throttle from "../common/deps/throttle";
 const api = [
@@ -29,52 +39,116 @@ const api = [
   "throttledHandleDraggerTouchmove",
   "setCascaderVisible",
   "handleCascaderChange",
-  "i18nYearMonth"
+  "i18nYearMonth",
+  "touchstart",
+  "touchmove",
+  "touchend"
 ];
-const renderless = (props, { reactive, computed, onBeforeMount, onMounted }, { emit, vm, t }) => {
+const initWatch = ({ watch, api: api2, state, emit }) => {
+  watch(
+    () => state.weekDates,
+    (value, oldValue) => {
+      if (state.dragging || state.touching)
+        return;
+      state.prevWeekDates = api2.getWeekOfDate("prev", state.weekDates[3].dateStr);
+      state.nextWeekDates = api2.getWeekOfDate("next", state.weekDates[3].dateStr);
+      state.copyWeekDates = state.weekDates.slice(0);
+      emit("week-change", value, oldValue);
+    },
+    { deep: true }
+  );
+  watch(
+    () => state.showWeek,
+    (value) => {
+      api2.showWeekChange(value);
+    }
+  );
+};
+const renderless = (props, { reactive, computed, onBeforeMount, onMounted, watch }, { emit, vm, t }) => {
   const state = reactive({
     minSize2: "min-width: 3rem; min-height: 2rem",
     minSize3: "min-width: 3rem; min-height: 3rem",
     dayOfWeek: 7,
+    showRows: 0,
     weekDays: [],
+    prevWeekDates: [],
+    weekDates: [],
+    nextWeekDates: [],
+    lastCalendarDays: [],
     calendarDays: [],
+    nextCalendarDays: [],
+    threeMonthDays: [],
+    copyWeekDates: [],
+    calendarDaysCopy: [],
     currentYear: "",
     currentMonth: "",
+    data: computed(() => api2.computedData()),
     currentRow: computed(() => api2.computedCurrentRow()),
     filteredCalendarDays: computed(() => api2.computedFilteredCalendarDays()),
     visibleRows: [],
     itemHeight: 0,
     totalRows: computed(() => api2.computedTotalRows()),
+    showWeek: true,
     dragging: false,
     touching: false,
+    delta: 0,
+    duration: 300,
+    offsetPos: {
+      X: 0,
+      Y: 0
+    },
+    deltaPos: {
+      X: 0,
+      Y: 0
+    },
+    startPos: {
+      X: 0,
+      Y: 0
+    },
+    activeRow: 0,
+    activeDate: "",
     cascaderCurrent: [],
     cascaderOptions: computed(() => api2.computeCascaderOptions()),
     cascaderVisible: false
   });
   const api2 = {
     state,
+    touchstart: touchstart({ state }),
+    touchmove: touchmove({ state }),
     getCalendarDays: getCalendarDays(state),
+    computedData: computedData(state),
     computedCurrentRow: computedCurrentRow(state),
     computedFilteredCalendarDays: computedFilteredCalendarDays(state),
-    handleDraggerClick: handleDraggerClick(state),
+    handleDraggerClick: handleDraggerClick(state, emit),
     calcCalendarItemHeight: calcCalendarItemHeight({ state, vm }),
     computedTotalRows: computedTotalRows(state),
     throttledHandleMousemove: throttle(20, handleMousemove({ state, vm })),
     handleDraggerTouchstart: handleDraggerTouchstart({ state, vm }),
-    handleDraggerTouchend: handleDraggerTouchend({ state, vm }),
+    handleDraggerTouchend: handleDraggerTouchend({ state, vm, emit }),
     throttledHandleDraggerTouchmove: throttle(20, handleDraggerTouchmove({ state, vm })),
     setCascaderVisible: setCascaderVisible(state),
     computeCascaderOptions: computeCascaderOptions(t),
     i18nYearMonth: i18nYearMonth({ state, t })
   };
   Object.assign(api2, {
-    handleClickDay: handleClickDay({ api: api2, emit, props }),
+    getPrevWeek: getPrevWeek({ props, emit, api: api2, state }),
+    getNextWeek: getNextWeek({ props, emit, api: api2, state }),
+    showWeekChange: showWeekChange({ props, state }),
+    updateCalendarDays: updateCalendarDays({ props, state, api: api2, emit }),
+    getAllDatesOfCurrWeek: getAllDatesOfCurrWeek({ state, props }),
+    getWeekOfDate: getWeekOfDate({ api: api2 }),
+    touchend: touchend({ props, state, api: api2, vm, emit }),
+    handleClickDay: handleClickDay({ api: api2, emit, props, state }),
     handleDraggerMousedown: handleDraggerMousedown({ api: api2, state, vm }),
-    handleMouseup: handleMouseup({ api: api2, state, vm }),
+    handleMouseup: handleMouseup({ api: api2, state, vm, emit }),
     handleCascaderChange: handleCascaderChange({ api: api2, emit, props, state })
   });
+  initWatch({ watch, api: api2, state, emit });
   onBeforeMount(() => {
-    api2.getCalendarDays(props.modelValue, props.config);
+    api2.getCalendarDays(props.modelValue, props.config, "cur");
+    api2.getCalendarDays(props.modelValue, props.config, "last");
+    api2.getCalendarDays(props.modelValue, props.config, "next");
+    state.weekDates = api2.getAllDatesOfCurrWeek(props.modelValue || /* @__PURE__ */ new Date());
   });
   onMounted(() => {
     api2.calcCalendarItemHeight();

package/calendar-view/index.js

@@ -285,7 +285,7 @@ const getEventByDate = ({ state }) => (date, events) => {
 const getEventByTime = ({ props, state }) => (day, start, end) => {
   const date = typeof day === "object" ? day.year + "-" + day.month + "-" + day.value : day;
   const startTime = getTime(date + " " + start);
-  const endTime = getTime(date + " " + (end ? end : start));
+  const endTime = getTime(date + " " + (end || start));
   let result = [];
   if (state.mode === "timeline") {
     const halfHourMillisecond = 30 * 60 * 1e3;
@@ -314,7 +314,7 @@ const getEventByTime = ({ props, state }) => (day, start, end) => {
 const isStartOrEndDay = ({ state }) => (type, day, start, end, event) => {
   const date = day.toString().length > 2 ? day : state.activeYear + "-" + state.activeMonth + "-" + day;
   const startTime = getTime(date + " " + start);
-  const endTime = getTime(date + " " + (end ? end : start));
+  const endTime = getTime(date + " " + (end || start));
   if (type === "start") {
     return event.start >= startTime && event.start < endTime;
   } else {

package/card/index.js

@@ -5,23 +5,23 @@ const handelIconClick = ({ emit }) => (item, index, event) => {
     return;
   emit("icon-click", item, index, event);
 };
-const getSliceNum = ({ props }) => () => {
+const getSliceNum = ({ state }) => () => {
   const sliceNumMap = {
     "mini": 1,
     "small": 2,
     "medium": 3,
     "large": 5
   };
-  return sliceNumMap[props.size];
+  return sliceNumMap[state.size];
 };
-const getIconNum = ({ props }) => () => {
+const getIconNum = ({ state }) => () => {
   const iconNumMap = {
     "mini": 2,
     "small": 3,
     "medium": 4,
     "large": 6
   };
-  return iconNumMap[props.size];
+  return iconNumMap[state.size];
 };
 const handleChange = ({ constants, dispatch, emit, state, nextTick }) => () => {
   nextTick(() => {

package/card/vue.js

@@ -12,7 +12,7 @@ import {
   computedStore,
   getItemChecked
 } from "./index";
-const api = ["state", "handelIconClick"];
+const api = ["state", "handelIconClick", "handleChange"];
 const renderless = (props, { reactive, watch, computed }, { vm, parent, emit, constants, nextTick, dispatch }) => {
   const api2 = {};
   const state = reactive({
@@ -23,7 +23,7 @@ const renderless = (props, { reactive, watch, computed }, { vm, parent, emit, co
     iconNum: computed(() => api2.getIconNum()),
     effectOptions: computed(() => props.options.filter((item) => !item.hidden)),
     store: computed(() => api2.computedStore()),
-    cardClass: computed(() => props.cardClass || state.cardGroup.cardClass || ""),
+    customClass: computed(() => props.customClass || state.cardGroup.customClass || ""),
     autoWidth: computed(() => props.autoWidth || state.cardGroup.autoWidth),
     height: computed(() => props.height || state.cardGroup.height),
     status: computed(() => props.status || state.cardGroup.status || "default"),
@@ -52,7 +52,6 @@ const renderless = (props, { reactive, watch, computed }, { vm, parent, emit, co
     handelIconClick: handelIconClick({ emit }),
     getItemChecked: getItemChecked({ state, props })
   });
-  watch(() => state.model, api2.handleChange, { deep: true });
   watch(
     () => state.disabled,
     () => {

package/card-group/vue.js

@@ -1,14 +1,10 @@
 import "../chunk-G2ADBYYC.js";
-import { getStyle } from "./index";
 const api = ["state"];
-const renderless = (props, { reactive, computed }, { vm }) => {
+const renderless = (props, { reactive }, { vm }) => {
   const api2 = {};
-  const state = reactive({
-    style: computed(() => api2.getStyle())
-  });
+  const state = reactive({});
   Object.assign(api2, {
-    state,
-    getStyle: getStyle({ props })
+    state
   });
   vm.$on("handleChange", (value) => {
     vm.$emit("change", value);

package/carousel/index.js

@@ -1,20 +1,7 @@
 import "../chunk-G2ADBYYC.js";
 import throttle from "../common/deps/throttle";
+import { getDirection } from "../common/deps/touch";
 import { POSITION } from "../common";
-const pauseTimer = (state) => () => clearInterval(state.timer);
-const playSlides = ({ props, state }) => () => {
-  if (state.activeIndex < state.items.length - 1) {
-    state.activeIndex++;
-  } else if (props.loop) {
-    state.activeIndex = 0;
-  }
-};
-const startTimer = ({ api, props, state }) => () => {
-  if (props.interval <= 0 || !props.autoplay) {
-    return;
-  }
-  state.timer = setInterval(api.playSlides, props.interval);
-};
 const handleMouseEnter = ({ api, state }) => () => {
   state.hover = true;
   api.pauseTimer();
@@ -52,10 +39,26 @@ const resetItemPosition = (state) => (oldIndex) => {
     });
   }
 };
+const playSlides = ({ props, state }) => () => {
+  if (state.activeIndex < state.items.length - 1) {
+    state.activeIndex++;
+  } else if (props.loop) {
+    state.activeIndex = 0;
+  }
+};
+const pauseTimer = (state) => () => clearInterval(state.timer);
+const startTimer = ({ api, props, state }) => () => {
+  if (props.interval <= 0 || !props.autoplay) {
+    return;
+  }
+  state.timer = setInterval(api.playSlides, props.interval);
+};
 const setActiveItem = ({ api, props, state }) => (index) => {
   if (typeof index === "string") {
-    const filteredItems = state.items.findIndex((item) => item.name === index);
-    index = filteredItems === -1 ? index : filteredItems;
+    const filteredItems = state.items.filter((item) => item.name === index);
+    if (filteredItems.length > 0) {
+      index = state.items.indexOf(filteredItems[0]);
+    }
   }
   index = Number(index);
   if (isNaN(index) || index !== Math.floor(index)) {
@@ -101,7 +104,13 @@ const computedStyle = ({ props }) => () => {
   if (props.height) {
     return { "height": props.height };
   } else {
-    return { "aspect-ratio": props.aspectRatio.replace(":", " / ") };
+    if (CSS.supports("aspect-ratio", "auto")) {
+      return { "aspect-ratio": props.aspectRatio.replace(":", " / ") };
+    } else {
+      const ratio = props.aspectRatio.split(":");
+      const paddingTop = (ratio[1] / ratio[0] * 100).toFixed(2) + "%";
+      return { "width": "100%", "height": 0, "padding-top": paddingTop };
+    }
   }
 };
 const onComplete = ({ count, emit, props, state }) => (total) => {
@@ -171,16 +180,6 @@ const touchend = ({ state, api }) => (event) => {
   }
   api.startTimer();
 };
-function getDirection(x, y) {
-  const MIN_DISTANCE = 10;
-  if (x > y && x > MIN_DISTANCE) {
-    return "horizontal";
-  }
-  if (y > x && y > MIN_DISTANCE) {
-    return "vertical";
-  }
-  return "";
-}
 function resetTouchStatus(state) {
   state.direction = "";
   state.delta = 0;

package/carousel/vue.js

@@ -58,19 +58,19 @@ const api = [
 ];
 const initState = ({ reactive, computed, api: api2 }) => {
   const state = reactive({
-    items: [],
     itemsTranslate: [],
+    items: [],
     timer: null,
     hover: false,
     activeIndex: -1,
     completed: false,
-    containerWidth: 0,
     delta: 0,
-    startPos: {
+    containerWidth: 0,
+    deltaPos: {
       X: 0,
       Y: 0
     },
-    deltaPos: {
+    startPos: {
       X: 0,
       Y: 0
     },
@@ -79,44 +79,44 @@ const initState = ({ reactive, computed, api: api2 }) => {
       Y: 0
     },
     touchTime: 0,
-    direction: "",
     size: 0,
+    direction: "",
     moving: false,
-    moveDisable: false,
     isCorrectDirection: false,
+    moveDisable: false,
     noTouchNode: ["svg", "BUTTON", "path", "g"],
     style: computed(() => api2.computedStyle()),
     hasLabel: computed(() => api2.computedHasLabel(state.items))
   });
   return state;
 };
-const initApi = ({ api: api2, state, props, emit, vm }) => {
+const initApi = ({ vm, api: api2, state, props, emit }) => {
   Object.assign(api2, {
     state,
     computedHasLabel,
+    touchend: touchend({ state, api: api2 }),
     touchstart: touchstart({ state, api: api2 }),
     touchmove: touchmove({ props, state, vm }),
-    touchend: touchend({ state, api: api2 }),
     playSlides: playSlides({ props, state }),
-    pauseTimer: pauseTimer(state),
     onComplete: onComplete({ count: 0, emit, props, state }),
+    pauseTimer: pauseTimer(state),
     itemInStage: itemInStage(state),
     resetItemPosition: resetItemPosition(state),
+    watchItems: watchItems({ api: api2, props }),
     handleButtonLeave: handleButtonLeave(state),
     handleIndicatorClick: handleIndicatorClick(state),
     handleIndicatorHover: handleIndicatorHover({ props, state }),
-    watchItems: watchItems({ api: api2, props }),
     watchActiveIndex: watchActiveIndex({ api: api2, emit }),
     watchAutoplay: watchAutoplay(api2),
     startTimer: startTimer({ api: api2, props, state }),
     prev: prev({ api: api2, state }),
     next: next({ api: api2, state }),
+    throttledArrowClick: throttledArrowClick(api2),
     setActiveItem: setActiveItem({ api: api2, props, state }),
     handleMouseEnter: handleMouseEnter({ api: api2, state }),
     handleMouseLeave: handleMouseLeave({ api: api2, state }),
-    handleButtonEnter: handleButtonEnter({ api: api2, state }),
-    throttledArrowClick: throttledArrowClick(api2),
     throttledIndicatorHover: throttledIndicatorHover(api2),
+    handleButtonEnter: handleButtonEnter({ api: api2, state }),
     computedStyle: computedStyle({ props })
   });
 };
@@ -124,17 +124,39 @@ const initWatch = ({ watch, props, api: api2, state }) => {
   watch(() => props.autoplay, api2.watchAutoplay);
   watch(
     () => props.loop,
-    () => {
-      api2.setActiveItem(state.activeIndex);
-    }
+    () => api2.setActiveItem(state.activeIndex)
   );
 };
-const useItems = ({ api: api2, onMounted, state, watch, constants, childrenHandler }) => {
+const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, watch }, { vm, parent, emit, constants, childrenHandler }) => {
+  const api2 = {};
+  const state = initState({ reactive, computed, api: api2 });
+  initApi({ vm, api: api2, state, props, emit });
+  const { updateItems } = useItems({ api: api2, vm, onMounted, state, watch, constants, childrenHandler, parent });
+  api2.updateItems = updateItems;
+  useActiveIndex({ api: api2, parent, props, state, watch });
+  useResizeListener({ api: api2, onBeforeUnmount, onMounted, parent });
+  initWatch({ watch, props, api: api2, state });
+  onMounted(() => {
+    api2.startTimer();
+    api2.onComplete(state.items.length);
+  });
+  parent.$on("updateItems", api2.updateItems);
+  parent.$on("complete", () => {
+    api2.onComplete(state.items.length);
+  });
+  return api2;
+};
+const useItems = ({ api: api2, onMounted, state, watch, constants, childrenHandler, parent }) => {
   const updateItems = () => {
-    const $children = [];
-    childrenHandler(({ options, vm }) => {
-      options.name === constants.CHILD_NAME && $children.push(vm);
+    let $children = [];
+    $children = parent.$children && parent.$children[0].$children.filter((child) => {
+      return child.$el.classList && Array.from(child.$el.classList).includes("tiny-carousel__item");
     });
+    if (!$children.length) {
+      childrenHandler(({ options, vm }) => {
+        options.name === constants.CHILD_NAME && $children.push(vm);
+      });
+    }
     state.items = $children;
   };
   watch(
@@ -163,33 +185,6 @@ const useResizeListener = ({ api: api2, onBeforeUnmount, onMounted, parent }) =>
     }
   });
 };
-const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, watch }, { vm, parent, constants, emit, childrenHandler }) => {
-  const api2 = {};
-  const state = initState({ reactive, computed, api: api2 });
-  initApi({ api: api2, state, props, emit, vm });
-  const { updateItems } = useItems({
-    api: api2,
-    vm,
-    onMounted,
-    state,
-    watch,
-    constants,
-    childrenHandler
-  });
-  api2.updateItems = updateItems;
-  useActiveIndex({ api: api2, parent, props, state, watch });
-  useResizeListener({ api: api2, onBeforeUnmount, onMounted, parent });
-  initWatch({ watch, props, api: api2, state });
-  onMounted(() => {
-    api2.startTimer();
-    api2.onComplete(state.items.length);
-  });
-  parent.$on("updateItems", api2.updateItems);
-  parent.$on("complete", () => {
-    api2.onComplete(state.items.length);
-  });
-  return api2;
-};
 export {
   api,
   renderless,

package/carousel-item/index.js

@@ -1,4 +1,6 @@
-import "../chunk-G2ADBYYC.js";
+import {
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
 const processIndex = ({ activeIndex, index, length }) => {
   if (activeIndex === 0 && index === length - 1) {
     return -1;
@@ -47,20 +49,21 @@ const translateItem = ({ api, CARD_SCALE, parent, state }) => ({ activeIndex, in
   }
   state.ready = true;
 };
-const handleItemClick = (parent) => () => {
+const handleItemClick = ({ state, parent }) => () => {
   const vnode = parent.$parent;
   if (vnode && vnode.type === parent.$constants.TYPE_CARD) {
-    const index = vnode.state.items.findIndex((item) => item.$el === parent.$el);
+    const index = vnode.state.items.findIndex((item) => item.state.translate === state.translate);
     vnode.setActiveItem(index);
   }
 };
-const computedTransform = ({ parent, TYPE_VERTICAL }) => (state) => {
+const computedTransform = ({ parent, TYPE_VERTICAL, mode, state }) => () => {
   const TRANSLATE = parent.$parent.type === TYPE_VERTICAL ? `translateY(${state.translate + state.delta}px) scale(${state.scale})` : `translateX(${state.translate + state.delta}px) scale(${state.scale})`;
-  return {
+  const style = mode === "mobile-first" ? { width: "100%", height: "100%" } : {};
+  return __spreadValues({
     msTransform: TRANSLATE,
     webkitTransform: TRANSLATE,
     transform: TRANSLATE
-  };
+  }, style);
 };
 const resetAnimatingMf = (state) => () => {
   state.animatingMf = false;

package/carousel-item/vue.js

@@ -27,7 +27,7 @@ const api = [
   "resetAnimatingMf",
   "setDelta"
 ];
-const renderless = (props, { computed, onMounted, onUnmounted, reactive }, { parent, dispatch }) => {
+const renderless = (props, { computed, onMounted, onUnmounted, reactive }, { parent, dispatch, mode }) => {
   const api2 = {};
   const CARD_SCALE = parent.$constants.CARD_SCALE;
   const TYPE_VERTICAL = parent.$constants.TYPE_VERTICAL;
@@ -45,14 +45,14 @@ const renderless = (props, { computed, onMounted, onUnmounted, reactive }, { par
     hasTitle: computed(() => !!props.title),
     moving: computed(() => parent.$parent.state.moving),
     animate: computed(() => Math.abs(parent.$parent.state.delta) > 0 ? !state.animatingMf : state.animating),
-    getTransform: computed(() => api2.computedTransform(state)),
+    getTransform: computed(() => api2.computedTransform()),
     delta: 0
   });
   Object.assign(api2, {
     state,
     processIndex,
-    handleItemClick: handleItemClick(parent),
-    computedTransform: computedTransform({ parent, TYPE_VERTICAL }),
+    handleItemClick: handleItemClick({ state, parent }),
+    computedTransform: computedTransform({ parent, TYPE_VERTICAL, mode, state }),
     calculateTranslate: calculateTranslate({ CARD_SCALE, state }),
     translateItem: translateItem({ api: api2, CARD_SCALE, parent, state }),
     setDelta: setDelta({ state }),

package/cascader-mobile/index.js

@@ -8,7 +8,11 @@ const close = ({ state, emit }) => () => {
 const syncCheckStatus = ({ state, props, api }) => (value) => {
   const { valueField, textField, modelValue: propsModelValue, visible } = props;
   const { lazy, isLeaf: leafField } = api.getNodeConfig();
-  let currentData, navList = [], modelValue = value || propsModelValue || [], len = modelValue.length, isLeaf;
+  let currentData;
+  let navList = [];
+  let modelValue = value || propsModelValue || [];
+  let len = modelValue.length;
+  let isLeaf;
   if (!visible) {
     return;
   }

package/cascader-mobile/vue.js

@@ -51,7 +51,8 @@ const renderless = (props, { computed, reactive, watch }, { emit, constants }) =
       filterOptions: []
     },
     options: computed(() => {
-      let arr, list = [state.rootData];
+      let arr;
+      let list = [state.rootData];
       state.navList.map((option) => {
         arr = option.childNodes;
         arr && arr.length && list.push(arr);

package/cascader-panel/index.js

@@ -206,8 +206,12 @@ const getCheckedNodes = ({ api, state }) => (leafOnly, cascaderCheckedValue) =>
       return flag;
     }
     for (let i = 0; i < checkedValue.length; i++) {
-      if (Array.isArray(checkedValue[i]) && checkedValue[i].length) {
-        flag = checkedValue[i][checkedValue[i].length - 1] === str;
+      if (Array.isArray(checkedValue[i])) {
+        if (checkedValue[i].length) {
+          flag = checkedValue[i][checkedValue[i].length - 1] === str;
+        }
+      } else {
+        flag = checkedValue[i] === str;
       }
       if (flag) {
         break;