@nutui/nutui 3.2.5 → 3.2.6-beta.1

package/dist/packages/_es/Picker.js

@@ -1,14 +1,17 @@
 /*!
-* @nutui/nutui v3.2.5 Tue Oct 25 2022 18:40:57 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.2.6-beta.1 Mon Oct 31 2022 19:38:22 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { ref, reactive, computed, watch, onMounted, toRefs, openBlock, createElementBlock, createElementVNode, normalizeStyle, Fragment, renderList, normalizeClass, toDisplayString, createCommentVNode, onBeforeUnmount, resolveComponent, createVNode, withCtx, renderSlot } from "vue";
+import { ref, reactive, computed, watch, onMounted, toRefs, openBlock, createElementBlock, createElementVNode, normalizeStyle, Fragment, renderList, normalizeClass, toDisplayString, createCommentVNode, createTextVNode, onBeforeUnmount, resolveComponent, createVNode, withCtx, renderSlot } from "vue";
 import { c as createComponent } from "./component.js";
-import Popup, { popupProps } from "./Popup.js";
-import { u as useTouch } from "./index4.js";
+import { popupProps } from "./Popup.js";
+import { u as useTouch } from "./index3.js";
 import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import { u as useTaroRect } from "./index.js";
+import Taro from "@tarojs/taro";
 import "../locale/lang";
+import "./use-lock-scroll.js";
 import "./OverLay.js";
 import "./Icon.js";
 import "./pxCheck.js";
@@ -17,6 +20,10 @@ const _sfc_main$1 = create$1({
   props: {
     value: [String, Number],
     columnsType: String,
+    lineSpacing: {
+      type: Number,
+      default: 36
+    },
     itemShow: {
       type: Boolean,
       default: false
@@ -42,6 +49,7 @@ const _sfc_main$1 = create$1({
   setup(props, { emit }) {
     const touch = useTouch();
     const wrapper = ref();
+    const itemref = ref();
     const state = reactive({
       touchParams: {
         startY: 0,
@@ -54,28 +62,29 @@ const _sfc_main$1 = create$1({
       currIndex: 1,
       transformY: 0,
       scrollDistance: 0,
-      lineSpacing: 36,
       rotation: 20,
       timer: null
     });
     const roller = ref(null);
     const list = ref(null);
+    const listitem = ref(null);
     const moving = ref(false);
     const touchDeg = ref(0);
     const touchTime = ref(0);
+    const touchTranslateY = ref(0);
     const DEFAULT_DURATION = 200;
     const INERTIA_TIME = 300;
     const INERTIA_DISTANCE = 15;
-    const touchRollerStyle = computed(() => {
+    const touchTileStyle = computed(() => {
       return {
         transition: `transform ${touchTime.value}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,
-        transform: `rotate3d(1, 0, 0, ${touchDeg.value})`
+        transform: `translate3d(0, ${state.scrollDistance}px, 0)`
       };
     });
-    const touchTileStyle = computed(() => {
+    const touchRollerStyle = computed(() => {
       return {
         transition: `transform ${touchTime.value}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,
-        transform: `translate3d(0, ${state.scrollDistance}px, 0)`
+        transform: `rotate3d(1, 0, 0, ${touchDeg.value})`
       };
     });
     const setRollerStyle = (index) => {
@@ -97,7 +106,7 @@ const _sfc_main$1 = create$1({
     };
     const onTouchMove = (event) => {
       touch.move(event);
-      if (touch.isVertical()) {
+      if (touch.isVertical) {
         moving.value = true;
         preventDefault(event, true);
       }
@@ -141,6 +150,7 @@ const _sfc_main$1 = create$1({
         touchTime.value = 0;
       }
       touchDeg.value = deg;
+      touchTranslateY.value = translateY;
       state.scrollDistance = translateY;
     };
     const setMove = (move, type, time) => {
@@ -149,22 +159,22 @@ const _sfc_main$1 = create$1({
         if (updateMove > 0) {
           updateMove = 0;
         }
-        if (updateMove < -(props.column.length - 1) * state.lineSpacing) {
-          updateMove = -(props.column.length - 1) * state.lineSpacing;
+        if (updateMove < -(props.column.length - 1) * props.lineSpacing) {
+          updateMove = -(props.column.length - 1) * props.lineSpacing;
         }
-        let endMove = Math.round(updateMove / state.lineSpacing) * state.lineSpacing;
-        let deg = `${(Math.abs(Math.round(endMove / state.lineSpacing)) + 1) * state.rotation}deg`;
+        let endMove = Math.round(updateMove / props.lineSpacing) * props.lineSpacing;
+        let deg = `${(Math.abs(Math.round(endMove / props.lineSpacing)) + 1) * state.rotation}deg`;
         setTransform(endMove, type, time, deg);
-        state.currIndex = Math.abs(Math.round(endMove / state.lineSpacing)) + 1;
+        state.currIndex = Math.abs(Math.round(endMove / props.lineSpacing)) + 1;
       } else {
         let deg = 0;
-        let currentDeg = (-updateMove / state.lineSpacing + 1) * state.rotation;
+        let currentDeg = (-updateMove / props.lineSpacing + 1) * state.rotation;
         const maxDeg = (props.column.length + 1) * state.rotation;
         const minDeg = 0;
         deg = Math.min(Math.max(currentDeg, minDeg), maxDeg);
         if (minDeg < deg && deg < maxDeg) {
           setTransform(updateMove, null, void 0, deg + "deg");
-          state.currIndex = Math.abs(Math.round(updateMove / state.lineSpacing)) + 1;
+          state.currIndex = Math.abs(Math.round(updateMove / props.lineSpacing)) + 1;
         }
       }
     };
@@ -175,7 +185,7 @@ const _sfc_main$1 = create$1({
       const { column: column2 } = props;
       let index = column2.findIndex((columnItem) => columnItem.value == props.value);
       state.currIndex = index === -1 ? 1 : index + 1;
-      let move = index === -1 ? 0 : index * state.lineSpacing;
+      let move = index === -1 ? 0 : index * props.lineSpacing;
       type && setChooseValue();
       setMove(-move);
     };
@@ -214,36 +224,47 @@ const _sfc_main$1 = create$1({
         deep: true
       }
     );
+    watch(
+      () => props.lineSpacing,
+      (val) => {
+        console.log("\u66F4\u65B0");
+        modifyStatus(false);
+      },
+      {
+        deep: true
+      }
+    );
     onMounted(() => {
-      modifyStatus(true);
+      modifyStatus(false);
     });
+    const refRandomId = Math.random().toString(36).slice(-8);
     return {
       ...toRefs(state),
       ...toRefs(props),
       wrapper,
+      itemref,
       setRollerStyle,
       isHidden,
       roller,
       list,
+      listitem,
       onTouchStart,
       onTouchMove,
       onTouchEnd,
-      touchRollerStyle,
       touchTileStyle,
+      touchRollerStyle,
       setMove,
+      refRandomId,
       stopMomentum
     };
   }
 });
-const _hoisted_1$1 = {
+const _hoisted_1$1 = ["id"];
+const _hoisted_2$1 = {
   key: 1,
   class: "nut-picker-roller-item-tile"
 };
-const _hoisted_2$1 = /* @__PURE__ */ createElementVNode("view", { class: "nut-picker-roller-mask" }, null, -1);
-const _hoisted_3$1 = {
-  key: 0,
-  class: "nut-picker-content"
-};
+const _hoisted_3$1 = /* @__PURE__ */ createElementVNode("view", { class: "nut-picker-roller-mask" }, null, -1);
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("view", {
     class: "nut-picker__list",
@@ -254,6 +275,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     createElementVNode("view", {
       class: "nut-picker-roller",
       ref: "roller",
+      id: "roller" + _ctx.refRandomId,
       style: normalizeStyle(_ctx.threeDimensional ? _ctx.touchRollerStyle : _ctx.touchTileStyle),
       onTransitionend: _cache[0] || (_cache[0] = (...args) => _ctx.stopMomentum && _ctx.stopMomentum(...args))
     }, [
@@ -266,26 +288,20 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             class: normalizeClass(["nut-picker-roller-item", { "nut-picker-roller-item-hidden": _ctx.isHidden(index + 1) }]),
             style: normalizeStyle(_ctx.setRollerStyle(index + 1))
           }, toDisplayString(item.text), 7)) : createCommentVNode("", true),
-          item && item.text && !_ctx.threeDimensional ? (openBlock(), createElementBlock("view", _hoisted_1$1, toDisplayString(item.text), 1)) : createCommentVNode("", true)
+          createTextVNode(),
+          item && item.text && !_ctx.threeDimensional ? (openBlock(), createElementBlock("view", _hoisted_2$1, toDisplayString(item.text), 1)) : createCommentVNode("", true)
         ], 64);
       }), 128))
-    ], 36),
-    _hoisted_2$1,
-    _ctx.threeDimensional ? (openBlock(), createElementBlock("view", _hoisted_3$1, [
-      createElementVNode("view", {
-        class: "nut-picker-list-panel",
-        ref: "list",
-        style: normalizeStyle(_ctx.touchTileStyle)
-      }, null, 4)
-    ])) : createCommentVNode("", true)
+    ], 44, _hoisted_1$1),
+    createTextVNode(),
+    _hoisted_3$1
   ], 32);
 }
 var column = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
 const { componentName, create, translate } = createComponent("picker");
 const _sfc_main = create({
   components: {
-    [column.name]: column,
-    [Popup.name]: Popup
+    [column.name]: column
   },
   props: {
     ...popupProps,
@@ -328,9 +344,15 @@ const _sfc_main = create({
   setup(props, { emit }) {
     const state = reactive({
       show: false,
-      formattedColumns: props.columns
+      formattedColumns: props.columns,
+      lineSpacing: 36,
+      picking: false,
+      ENV: Taro.getEnv(),
+      ENV_TYPE: Taro.ENV_TYPE
     });
+    const pickerline = ref(null);
     let defaultValues = ref(props.modelValue);
+    let defaultIndexes = ref([]);
     const pickerColumn = ref([]);
     const swipeRef = (el) => {
       if (el && pickerColumn.value.length < columnsList.value.length) {
@@ -345,11 +367,13 @@ const _sfc_main = create({
     });
     const selectedOptions = computed(() => {
       let optins = [];
-      columnsList.value.map((column2, index) => {
-        let currOptions = [];
-        currOptions = column2.filter((item) => item.value == defaultValues.value[index]);
-        optins.push(currOptions[0]);
-      });
+      columnsList.value.map(
+        (column2, index) => {
+          let currOptions = [];
+          currOptions = column2.filter((item) => item.value == defaultValues.value[index]);
+          optins.push(currOptions[0]);
+        }
+      );
       return optins;
     });
     const columnsType = computed(() => {
@@ -425,25 +449,83 @@ const _sfc_main = create({
         });
       }
     };
-    const confirmHandler = () => {
-      pickerColumn.value.length > 0 && pickerColumn.value.forEach((column2) => {
-        column2.stopMomentum();
+    const defaultValuesConvert = computed(() => {
+      let defaultIndexs = [];
+      if (defaultValues.value.length > 0) {
+        defaultValues.value.forEach((value, index) => {
+          for (let i = 0; i < columnsList.value[index].length; i++) {
+            if (columnsList.value[index][i].value == value) {
+              defaultIndexs.push(i);
+              break;
+            }
+          }
+        });
+      }
+      return defaultIndexs;
+    });
+    const tileChange = ({ detail }) => {
+      console.log("\u9009\u62E9");
+      const prevDefaultValue = defaultIndexes.value;
+      let changeIndex = 0;
+      detail.value.forEach((col, index) => {
+        if (prevDefaultValue[index] != col)
+          changeIndex = index;
       });
+      if (state.show) {
+        defaultIndexes.value = detail.value;
+        changeHandler(changeIndex, columnsList.value[changeIndex][detail.value[changeIndex]]);
+      }
+    };
+    const confirmHandler = () => {
+      if (state.picking) {
+        console.log("\u6EDA\u52A8\u4E2D");
+        setTimeout(() => {
+          confirmHandlerAwit();
+        }, 0);
+      } else {
+        confirmHandlerAwit();
+      }
+    };
+    const confirmHandlerAwit = () => {
       if (defaultValues.value && !defaultValues.value.length) {
         columnsList.value.forEach((columns) => {
           defaultValues.value.push(columns[0].value);
           selectedOptions.value.push(columns[0]);
         });
       }
+      console.log("\u786E\u5B9A", defaultValues.value);
       emit("confirm", {
         selectedValue: defaultValues.value,
         selectedOptions: selectedOptions.value
       });
       emit("update:visible", false);
+      state.show = false;
+    };
+    const handlePickstart = () => {
+      console.log("\u5F00\u59CB\u6EDA\u52A8");
+      state.picking = true;
+    };
+    const handlePickend = () => {
+      console.log("\u6EDA\u52A8\u7ED3\u675F");
+      state.picking = false;
+    };
+    const refRandomId = Math.random().toString(36).slice(-8);
+    const getReference = async () => {
+      const refe = await useTaroRect(pickerline, Taro);
+      console.log(refe.height);
+      state.lineSpacing = refe.height ? refe.height : 36;
     };
     onMounted(() => {
-      if (props.visible)
+      if (props.visible) {
+        if (Taro.getEnv() == Taro.ENV_TYPE.WEB) {
+          setTimeout(() => {
+            getReference();
+          }, 200);
+        } else {
+          defaultIndexes.value = defaultValuesConvert.value;
+        }
         state.show = props.visible;
+      }
     });
     onBeforeUnmount(() => {
       if (props.visible)
@@ -455,6 +537,7 @@ const _sfc_main = create({
         const isSameValue = JSON.stringify(newValues) === JSON.stringify(defaultValues.value);
         if (!isSameValue) {
           defaultValues.value = newValues;
+          defaultIndexes.value = defaultValuesConvert.value;
         }
       },
       { deep: true }
@@ -473,8 +556,16 @@ const _sfc_main = create({
       () => props.visible,
       (val) => {
         state.show = val;
-        if (val)
-          pickerColumn.value = [];
+        if (val) {
+          if (Taro.getEnv() == Taro.ENV_TYPE.WEB) {
+            setTimeout(() => {
+              getReference();
+            }, 200);
+            pickerColumn.value = [];
+          } else {
+            defaultIndexes.value = defaultValuesConvert.value;
+          }
+        }
       }
     );
     watch(
@@ -494,19 +585,27 @@ const _sfc_main = create({
       changeHandler,
       confirmHandler,
       defaultValues,
+      defaultIndexes,
       translate,
       pickerColumn,
-      swipeRef
+      swipeRef,
+      refRandomId,
+      pickerline,
+      tileChange,
+      defaultValuesConvert,
+      handlePickstart,
+      handlePickend
     };
   }
 });
 const _hoisted_1 = { class: "nut-picker__bar" };
 const _hoisted_2 = { class: "nut-picker__title" };
-const _hoisted_3 = {
-  class: "nut-picker__column",
-  ref: "wrapHeight"
+const _hoisted_3 = ["value"];
+const _hoisted_4 = {
+  key: 1,
+  class: "nut-picker__column"
 };
-const _hoisted_4 = /* @__PURE__ */ createElementVNode("view", { class: "nut-picker__hairline" }, null, -1);
+const _hoisted_5 = ["id"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_nut_picker_column = resolveComponent("nut-picker-column");
   const _component_nut_popup = resolveComponent("nut-popup");
@@ -516,13 +615,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     createVNode(_component_nut_popup, {
       position: "bottom",
       visible: _ctx.show,
-      "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => _ctx.show = $event),
+      "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => _ctx.show = $event),
       teleport: _ctx.teleport,
       "lock-scroll": _ctx.lockScroll,
       "close-on-click-overlay": _ctx.closeOnClickOverlay,
       onClose: _ctx.close,
       round: true,
-      isWrapTeleport: _ctx.isWrapTeleport,
       safeAreaInsetBottom: _ctx.safeAreaInsetBottom,
       destroyOnClose: _ctx.destroyOnClose
     }, {
@@ -532,15 +630,46 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             class: "nut-picker__cancel nut-picker__left nut-picker__button",
             onClick: _cache[0] || (_cache[0] = (...args) => _ctx.close && _ctx.close(...args))
           }, toDisplayString(_ctx.cancelText || _ctx.translate("cancel")), 1),
+          createTextVNode(),
           createElementVNode("view", _hoisted_2, toDisplayString(_ctx.title), 1),
+          createTextVNode(),
           createElementVNode("view", {
             class: "nut-picker__confirm nut-picker__right nut-picker__button",
             onClick: _cache[1] || (_cache[1] = ($event) => _ctx.confirmHandler())
           }, toDisplayString(_ctx.okText || _ctx.translate("confirm")), 1)
         ]),
+        createTextVNode(),
         renderSlot(_ctx.$slots, "top"),
-        createElementVNode("view", _hoisted_3, [
-          _hoisted_4,
+        createTextVNode(),
+        _ctx.ENV == _ctx.ENV_TYPE.WEAPP ? (openBlock(), createElementBlock("picker-view", {
+          key: 0,
+          "indicator-style": "height: 34px;",
+          value: _ctx.defaultIndexes,
+          style: { "width": "100%", "height": "252px" },
+          "immediate-change": true,
+          onChange: _cache[2] || (_cache[2] = (...args) => _ctx.tileChange && _ctx.tileChange(...args)),
+          onPickstart: _cache[3] || (_cache[3] = (...args) => _ctx.handlePickstart && _ctx.handlePickstart(...args)),
+          onPickend: _cache[4] || (_cache[4] = (...args) => _ctx.handlePickend && _ctx.handlePickend(...args))
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columnsList, (column2, columnIndex) => {
+            return openBlock(), createElementBlock("picker-view-column", { key: columnIndex }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(column2, (item, index) => {
+                return openBlock(), createElementBlock("view", {
+                  class: "nut-picker-roller-item-tarotile",
+                  key: item.value ? item.value : index
+                }, toDisplayString(item.text), 1);
+              }), 128))
+            ]);
+          }), 128))
+        ], 40, _hoisted_3)) : createCommentVNode("", true),
+        createTextVNode(),
+        _ctx.ENV == _ctx.ENV_TYPE.WEB ? (openBlock(), createElementBlock("view", _hoisted_4, [
+          createElementVNode("view", {
+            class: "nut-picker__hairline",
+            ref: "pickerline",
+            id: "pickerline" + _ctx.refRandomId
+          }, null, 8, _hoisted_5),
+          createTextVNode(),
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columnsList, (column2, columnIndex) => {
             return openBlock(), createElementBlock("view", {
               class: "nut-picker__columnitem",
@@ -554,20 +683,22 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 readonly: _ctx.readonly,
                 columnsType: _ctx.columnsType,
                 value: _ctx.defaultValues[columnIndex],
-                threeDimensional: _ctx.threeDimensional,
+                threeDimensional: false,
                 swipeDuration: _ctx.swipeDuration,
+                lineSpacing: _ctx.lineSpacing,
                 onChange: (option) => {
                   _ctx.changeHandler(columnIndex, option);
                 }
-              }, null, 8, ["itemShow", "column", "readonly", "columnsType", "value", "threeDimensional", "swipeDuration", "onChange"])
+              }, null, 8, ["itemShow", "column", "readonly", "columnsType", "value", "swipeDuration", "lineSpacing", "onChange"])
             ]);
           }), 128))
-        ], 512),
+        ])) : createCommentVNode("", true),
+        createTextVNode(),
         renderSlot(_ctx.$slots, "default")
       ]),
       _: 3
-    }, 8, ["visible", "teleport", "lock-scroll", "close-on-click-overlay", "onClose", "isWrapTeleport", "safeAreaInsetBottom", "destroyOnClose"])
+    }, 8, ["visible", "teleport", "lock-scroll", "close-on-click-overlay", "onClose", "safeAreaInsetBottom", "destroyOnClose"])
   ], 2);
 }
-var Picker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { Picker as default };
+var nutPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { nutPicker as default };