@nutui/nutui 3.1.19-beta.0 → 3.1.19-beta.1

package/dist/packages/_es/{index5.js → index.taro.js}

@@ -15,13 +15,13 @@ var __spreadValues = (a, b) => {
   return a;
 };
 /*!
-* @nutui/nutui v3.1.19-beta.0 Mon Mar 28 2022 17:50:21 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.19-beta.1 Sat Apr 02 2022 16:26:37 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { ref, computed, reactive, watch, toRefs, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, renderSlot, Fragment, renderList, normalizeStyle, createTextVNode } from "vue";
+import { ref, computed, reactive, onMounted, watch, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, renderSlot, Fragment, renderList, createVNode, withCtx, normalizeStyle, createTextVNode } from "vue";
 import { c as createComponent } from "./component.js";
-import { r as requestAniFrame } from "./raf.js";
+import Taro from "@tarojs/taro";
 import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 const Utils = {
   isLeapYear: function(y) {
@@ -105,6 +105,7 @@ const Utils = {
   }
 };
 const { create } = createComponent("calendar-item");
+let TARO_ENV = {}.TARO_ENV;
 const _sfc_main = create({
   props: {
     type: {
@@ -163,12 +164,10 @@ const _sfc_main = create({
   emits: ["choose", "update", "close", "select"],
   setup(props, { emit, slots }) {
     const weeks = ref(["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"]);
-    const months = ref(null);
-    const monthsPanel = ref(null);
-    const weeksPanel = ref(null);
-    const viewArea = ref(null);
+    const scalePx = ref(2);
     const viewHeight = ref(0);
-    const compConthsData = computed(() => {
+    const months = ref(null);
+    computed(() => {
       return state.monthsData.slice(state.defaultRange[0], state.defaultRange[1]);
     });
     const showTopBtn = computed(() => {
@@ -182,7 +181,9 @@ const _sfc_main = create({
     });
     const state = reactive({
       yearMonthTitle: "",
-      defaultRange: [],
+      defaultRange: [0, 1],
+      compConthsDatas: [],
+      containerHeight: "",
       currDate: "",
       propStartDate: "",
       propEndDate: "",
@@ -208,6 +209,7 @@ const _sfc_main = create({
       timer: 0,
       currentIndex: 0,
       avgHeight: 0,
+      scrollTop: 0,
       monthsNum: 0
     });
     const splitDate = (date) => {
@@ -227,7 +229,7 @@ const _sfc_main = create({
       if (day.type == "curr") {
         if (!state.isRange && Utils.isEqual(state.currDate, currDate) || state.isRange && (isStart(currDate) || isEnd(currDate))) {
           return `${state.dayPrefix}-active`;
-        } else if (state.propStartDate && Utils.compareDate(currDate, state.propStartDate) || state.propEndDate && Utils.compareDate(state.propEndDate, currDate)) {
+        } else if (props.startDate && Utils.compareDate(currDate, props.startDate) || props.endDate && Utils.compareDate(props.endDate, currDate)) {
           return `${state.dayPrefix}-disabled`;
         } else if (state.isRange && Array.isArray(state.currDate) && Object.values(state.currDate).length == 2 && Utils.compareDate(state.currDate[0], currDate) && Utils.compareDate(currDate, state.currDate[1])) {
           return `${state.dayPrefix}-choose`;
@@ -350,7 +352,15 @@ const _sfc_main = create({
           ...getDaysStatus(currMonthDays, "curr", title)
         ]
       };
-      monthInfo.cssHeight = 39 + (monthInfo.monthData.length > 35 ? 384 : 320);
+      let titleHeight, itemHeight;
+      if (TARO_ENV === "h5") {
+        titleHeight = 46 * scalePx.value + 16 * scalePx.value * 2;
+        itemHeight = 128 * scalePx.value;
+      } else {
+        titleHeight = Math.floor(46 * scalePx.value) + Math.floor(16 * scalePx.value) * 2;
+        itemHeight = Math.floor(128 * scalePx.value);
+      }
+      monthInfo.cssHeight = titleHeight + (monthInfo.monthData.length > 35 ? itemHeight * 6 : itemHeight * 5);
       let cssScrollHeight = 0;
       if (state.monthsData.length > 0) {
         cssScrollHeight = state.monthsData[state.monthsData.length - 1].cssScrollHeight + state.monthsData[state.monthsData.length - 1].cssHeight;
@@ -437,26 +447,37 @@ const _sfc_main = create({
       }
       let lastItem = state.monthsData[state.monthsData.length - 1];
       let containerHeight = lastItem.cssHeight + lastItem.cssScrollHeight;
-      requestAniFrame(() => {
-        if ((months == null ? void 0 : months.value) && (monthsPanel == null ? void 0 : monthsPanel.value) && (viewArea == null ? void 0 : viewArea.value)) {
-          viewHeight.value = months.value.clientHeight;
-          monthsPanel.value.style.height = `${containerHeight}px`;
-          months.value.scrollTop = state.monthsData[state.currentIndex].cssScrollHeight;
-        }
-      });
+      state.containerHeight = `${containerHeight}px`;
+      state.scrollTop = state.monthsData[state.currentIndex].cssScrollHeight;
       state.avgHeight = Math.floor(containerHeight / (monthsNum + 1));
+      if (months == null ? void 0 : months.value) {
+        viewHeight.value = months.value.clientHeight;
+      }
+      if (TARO_ENV === "h5") {
+        Taro.nextTick(() => {
+          Taro.createSelectorQuery().select(".nut-calendar-content").boundingClientRect((res) => {
+            viewHeight.value = res.height;
+          }).exec();
+        });
+      }
     };
     const setDefaultRange = (monthsNum, current) => {
+      let rangeArr = [];
       if (monthsNum >= 3) {
         if (current > 0 && current < monthsNum) {
-          state.defaultRange = [current - 1, current + 3];
+          rangeArr = [current - 1, current + 3];
         } else if (current == 0) {
-          state.defaultRange = [current, current + 4];
+          rangeArr = [current, current + 4];
         } else if (current == monthsNum) {
-          state.defaultRange = [current - 2, current + 2];
+          rangeArr = [current - 2, current + 2];
         }
       } else {
-        state.defaultRange = [0, monthsNum + 2];
+        rangeArr = [0, monthsNum + 1];
+      }
+      if (JSON.stringify(state.defaultRange) !== JSON.stringify(rangeArr)) {
+        state.defaultRange[0] = rangeArr[0];
+        state.defaultRange[1] = rangeArr[1];
+        state.compConthsDatas = state.monthsData.slice(rangeArr[0], rangeArr[1]);
       }
       let defaultScrollTop = state.monthsData[state.defaultRange[0]].cssScrollHeight;
       state.translateY = defaultScrollTop;
@@ -498,7 +519,7 @@ const _sfc_main = create({
         }
       } else {
         const viewPosition = Math.round(currentScrollTop + viewHeight.value);
-        if (viewPosition < state.monthsData[current].cssScrollHeight + state.monthsData[current].cssHeight && currentScrollTop > state.monthsData[current - 1].cssScrollHeight) {
+        if (viewPosition < state.monthsData[current].cssScrollHeight + state.monthsData[current].cssHeight && currentScrollTop < state.monthsData[current].cssScrollHeight) {
           current -= 1;
         }
         if (current + 1 <= state.monthsNum && viewPosition >= state.monthsData[current + 1].cssScrollHeight + state.monthsData[current + 1].cssHeight) {
@@ -519,7 +540,21 @@ const _sfc_main = create({
       state.monthsData.splice(0);
       initData();
     };
-    initData();
+    onMounted(() => {
+      Taro.getSystemInfo({
+        success(res) {
+          let scale = 2;
+          let screenWidth = res.screenWidth;
+          let toFixed = 3;
+          if (TARO_ENV === "h5") {
+            toFixed = 5;
+          }
+          scale = Number((screenWidth / 750).toFixed(toFixed));
+          scalePx.value = scale;
+          initData();
+        }
+      });
+    });
     watch(() => props.defaultValue, (val) => {
       if (val) {
         if (props.poppable) {
@@ -529,7 +564,6 @@ const _sfc_main = create({
     });
     return __spreadValues(__spreadValues({
       weeks,
-      compConthsData,
       showTopBtn,
       topInfo,
       bottomInfo,
@@ -541,10 +575,7 @@ const _sfc_main = create({
       chooseDay,
       isCurrDay,
       confirm,
-      monthsPanel,
-      months,
-      weeksPanel,
-      viewArea
+      months
     }, toRefs(state)), toRefs(props));
   }
 });
@@ -560,13 +591,10 @@ const _hoisted_3 = {
   key: 2,
   class: "calendar-curr-month"
 };
-const _hoisted_4 = {
-  class: "calendar-weeks",
-  ref: "weeksPanel"
-};
+const _hoisted_4 = { class: "calendar-weeks" };
 const _hoisted_5 = {
   class: "calendar-months-panel",
-  ref: "monthsPanel"
+  style: { "{{heihgt": "containerHeight}}" }
 };
 const _hoisted_6 = { class: "calendar-month-title" };
 const _hoisted_7 = { class: "calendar-month-con" };
@@ -585,7 +613,7 @@ const _hoisted_12 = {
   class: "calendar-curr-tip-curr"
 };
 const _hoisted_13 = {
-  key: 4,
+  key: 3,
   class: "calendar-day-tip"
 };
 const _hoisted_14 = {
@@ -593,6 +621,7 @@ const _hoisted_14 = {
   class: "nut-calendar-footer"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_scroll_view = resolveComponent("scroll-view");
   return openBlock(), createElementBlock("view", {
     class: normalizeClass(["nut-calendar nut-calendar-taro", {
       "nut-calendar-tile": !_ctx.poppable,
@@ -614,71 +643,74 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             key: index
           }, toDisplayString(item), 1);
         }), 128))
-      ], 512)
+      ])
     ], 2),
-    createElementVNode("view", {
+    createVNode(_component_scroll_view, {
+      "scroll-top": _ctx.scrollTop,
+      "scroll-y": true,
       class: "nut-calendar-content",
-      ref: "months",
-      onScroll: _cache[0] || (_cache[0] = (...args) => _ctx.mothsViewScroll && _ctx.mothsViewScroll(...args))
-    }, [
-      createElementVNode("view", _hoisted_5, [
-        createElementVNode("view", {
-          class: "viewArea",
-          ref: "viewArea",
-          style: normalizeStyle({ transform: `translateY(${_ctx.translateY}px)` })
-        }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.compConthsData, (month, index) => {
-            return openBlock(), createElementBlock("view", {
-              class: "calendar-month",
-              key: index
-            }, [
-              createElementVNode("view", _hoisted_6, toDisplayString(month.title), 1),
-              createElementVNode("view", _hoisted_7, [
-                createElementVNode("view", {
-                  class: normalizeClass(["calendar-month-item", _ctx.type === "range" ? "month-item-range" : ""])
-                }, [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(month.monthData, (day, i) => {
-                    return openBlock(), createElementBlock("view", {
-                      key: i,
-                      class: normalizeClass(["calendar-month-day", _ctx.getClass(day, month)]),
-                      onClick: ($event) => _ctx.chooseDay(day, month)
-                    }, [
-                      createElementVNode("view", _hoisted_9, [
-                        renderSlot(_ctx.$slots, "day", {
-                          date: day.type == "curr" ? day : ""
-                        }, () => [
-                          createTextVNode(toDisplayString(day.type == "curr" ? day.day : ""), 1)
-                        ])
-                      ]),
-                      _ctx.topInfo ? (openBlock(), createElementBlock("view", _hoisted_10, [
-                        renderSlot(_ctx.$slots, "topInfo", {
-                          date: day.type == "curr" ? day : ""
-                        })
-                      ])) : createCommentVNode("", true),
-                      _ctx.bottomInfo ? (openBlock(), createElementBlock("view", _hoisted_11, [
-                        renderSlot(_ctx.$slots, "bottomInfo", {
-                          date: day.type == "curr" ? day : ""
-                        })
-                      ])) : createCommentVNode("", true),
-                      !_ctx.bottomInfo && _ctx.showToday && _ctx.isCurrDay(day) ? (openBlock(), createElementBlock("view", _hoisted_12, " \u4ECA\u5929 ")) : createCommentVNode("", true),
-                      _ctx.isStartTip(day, month) ? (openBlock(), createElementBlock("view", {
-                        key: 3,
-                        class: normalizeClass(["calendar-day-tip", { "calendar-curr-tips-top": _ctx.rangeTip(day, month) }])
-                      }, toDisplayString(_ctx.startText), 3)) : createCommentVNode("", true),
-                      _ctx.isEndTip(day, month) ? (openBlock(), createElementBlock("view", _hoisted_13, toDisplayString(_ctx.endText), 1)) : createCommentVNode("", true)
-                    ], 10, _hoisted_8);
-                  }), 128))
-                ], 2)
-              ])
-            ]);
-          }), 128))
-        ], 4)
-      ], 512)
-    ], 544),
+      onScroll: _ctx.mothsViewScroll,
+      ref: "months"
+    }, {
+      default: withCtx(() => [
+        createElementVNode("view", _hoisted_5, [
+          createElementVNode("view", {
+            class: "viewArea",
+            style: normalizeStyle({ transform: `translateY(${_ctx.translateY}px)` })
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.compConthsDatas, (month, index) => {
+              return openBlock(), createElementBlock("view", {
+                class: "calendar-month",
+                key: index
+              }, [
+                createElementVNode("view", _hoisted_6, toDisplayString(month.title), 1),
+                createElementVNode("view", _hoisted_7, [
+                  createElementVNode("view", {
+                    class: normalizeClass(["calendar-month-item", _ctx.type === "range" ? "month-item-range" : ""])
+                  }, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(month.monthData, (day, i) => {
+                      return openBlock(), createElementBlock("view", {
+                        key: i,
+                        class: normalizeClass(["calendar-month-day", _ctx.getClass(day, month)]),
+                        onClick: ($event) => _ctx.chooseDay(day, month)
+                      }, [
+                        createElementVNode("view", _hoisted_9, [
+                          renderSlot(_ctx.$slots, "day", {
+                            date: day.type == "curr" ? day : ""
+                          }, () => [
+                            createTextVNode(toDisplayString(day.type == "curr" ? day.day : ""), 1)
+                          ])
+                        ]),
+                        _ctx.topInfo ? (openBlock(), createElementBlock("view", _hoisted_10, [
+                          renderSlot(_ctx.$slots, "topInfo", {
+                            date: day.type == "curr" ? day : ""
+                          })
+                        ])) : createCommentVNode("", true),
+                        _ctx.bottomInfo ? (openBlock(), createElementBlock("view", _hoisted_11, [
+                          renderSlot(_ctx.$slots, "bottomInfo", {
+                            date: day.type == "curr" ? day : ""
+                          })
+                        ])) : createCommentVNode("", true),
+                        !_ctx.bottomInfo && _ctx.showToday && _ctx.isCurrDay(day) ? (openBlock(), createElementBlock("view", _hoisted_12, " \u4ECA\u5929 ")) : createCommentVNode("", true),
+                        createElementVNode("view", {
+                          class: normalizeClass({ "calendar-curr-tips-top": _ctx.rangeTip(day, month), "calendar-day-tip": true })
+                        }, toDisplayString(_ctx.isStartTip(day, month) ? _ctx.startText : ""), 3),
+                        _ctx.isEndTip(day, month) ? (openBlock(), createElementBlock("view", _hoisted_13, toDisplayString(_ctx.endText), 1)) : createCommentVNode("", true)
+                      ], 10, _hoisted_8);
+                    }), 128))
+                  ], 2)
+                ])
+              ]);
+            }), 128))
+          ], 4)
+        ])
+      ]),
+      _: 3
+    }, 8, ["scroll-top", "onScroll"]),
     _ctx.poppable && !_ctx.isAutoBackFill ? (openBlock(), createElementBlock("view", _hoisted_14, [
       createElementVNode("view", {
         class: "calendar-confirm-btn",
-        onClick: _cache[1] || (_cache[1] = (...args) => _ctx.confirm && _ctx.confirm(...args))
+        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.confirm && _ctx.confirm(...args))
       }, toDisplayString(_ctx.confirmText), 1)
     ])) : createCommentVNode("", true)
   ], 2);

package/dist/packages/_es/index2.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.19-beta.0 Mon Mar 28 2022 17:50:21 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.19-beta.1 Sat Apr 02 2022 16:26:37 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */

package/dist/packages/_es/index3.js

@@ -1,36 +1,64 @@
 /*!
-* @nutui/nutui v3.1.19-beta.0 Mon Mar 28 2022 17:50:21 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.19-beta.1 Sat Apr 02 2022 16:26:37 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { unref } from "vue";
-function isWindow(val) {
-  return val === window;
-}
-const useRect = (elementRef) => {
-  const element = unref(elementRef);
-  if (isWindow(element)) {
-    const width = element.innerWidth;
-    const height = element.innerHeight;
-    return {
-      top: 0,
-      left: 0,
-      right: width,
-      bottom: height,
-      width,
-      height
-    };
+import { ref } from "vue";
+const MIN_DISTANCE = 10;
+function getDirection(x, y) {
+  if (x > y && x > MIN_DISTANCE) {
+    return "horizontal";
   }
-  if (element && element.getBoundingClientRect) {
-    return element.getBoundingClientRect();
+  if (y > x && y > MIN_DISTANCE) {
+    return "vertical";
   }
+  return "";
+}
+function useTouch() {
+  const startX = ref(0);
+  const startY = ref(0);
+  const deltaX = ref(0);
+  const deltaY = ref(0);
+  const offsetX = ref(0);
+  const offsetY = ref(0);
+  const direction = ref("");
+  const isVertical = () => direction.value === "vertical";
+  const isHorizontal = () => direction.value === "horizontal";
+  const reset = () => {
+    deltaX.value = 0;
+    deltaY.value = 0;
+    offsetX.value = 0;
+    offsetY.value = 0;
+    direction.value = "";
+  };
+  const start = (event) => {
+    reset();
+    startX.value = event.touches[0].clientX;
+    startY.value = event.touches[0].clientY;
+  };
+  const move = (event) => {
+    const touch = event.touches[0];
+    deltaX.value = touch.clientX - startX.value;
+    deltaY.value = touch.clientY - startY.value;
+    offsetX.value = Math.abs(deltaX.value);
+    offsetY.value = Math.abs(deltaY.value);
+    if (!direction.value) {
+      direction.value = getDirection(offsetX.value, offsetY.value);
+    }
+  };
   return {
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    width: 0,
-    height: 0
+    move,
+    start,
+    reset,
+    startX,
+    startY,
+    deltaX,
+    deltaY,
+    offsetX,
+    offsetY,
+    direction,
+    isVertical,
+    isHorizontal
   };
-};
-export { useRect as u };
+}
+export { useTouch as u };