@nutui/nutui 3.2.6-beta.1 → 3.2.6-beta.2

package/dist/packages/_es/Picker.js

@@ -1,17 +1,14 @@
 /*!
-* @nutui/nutui v3.2.6-beta.1 Mon Oct 31 2022 19:38:22 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.2.6-beta.2 Fri Nov 04 2022 17:24:29 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, createTextVNode, onBeforeUnmount, resolveComponent, createVNode, withCtx, renderSlot } from "vue";
+import { ref, reactive, computed, watch, onMounted, toRefs, openBlock, createElementBlock, createElementVNode, normalizeStyle, Fragment, renderList, normalizeClass, toDisplayString, createCommentVNode, onBeforeUnmount, resolveComponent, createVNode, withCtx, renderSlot } from "vue";
 import { c as createComponent } from "./component.js";
-import { popupProps } from "./Popup.js";
-import { u as useTouch } from "./index3.js";
+import Popup, { popupProps } from "./Popup.js";
+import { u as useTouch } from "./index4.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";
@@ -20,10 +17,6 @@ const _sfc_main$1 = create$1({
   props: {
     value: [String, Number],
     columnsType: String,
-    lineSpacing: {
-      type: Number,
-      default: 36
-    },
     itemShow: {
       type: Boolean,
       default: false
@@ -49,7 +42,6 @@ const _sfc_main$1 = create$1({
   setup(props, { emit }) {
     const touch = useTouch();
     const wrapper = ref();
-    const itemref = ref();
     const state = reactive({
       touchParams: {
         startY: 0,
@@ -62,29 +54,28 @@ 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 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 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 setRollerStyle = (index) => {
@@ -106,7 +97,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);
       }
@@ -150,7 +141,6 @@ const _sfc_main$1 = create$1({
         touchTime.value = 0;
       }
       touchDeg.value = deg;
-      touchTranslateY.value = translateY;
       state.scrollDistance = translateY;
     };
     const setMove = (move, type, time) => {
@@ -159,22 +149,22 @@ const _sfc_main$1 = create$1({
         if (updateMove > 0) {
           updateMove = 0;
         }
-        if (updateMove < -(props.column.length - 1) * props.lineSpacing) {
-          updateMove = -(props.column.length - 1) * props.lineSpacing;
+        if (updateMove < -(props.column.length - 1) * state.lineSpacing) {
+          updateMove = -(props.column.length - 1) * state.lineSpacing;
         }
-        let endMove = Math.round(updateMove / props.lineSpacing) * props.lineSpacing;
-        let deg = `${(Math.abs(Math.round(endMove / props.lineSpacing)) + 1) * state.rotation}deg`;
+        let endMove = Math.round(updateMove / state.lineSpacing) * state.lineSpacing;
+        let deg = `${(Math.abs(Math.round(endMove / state.lineSpacing)) + 1) * state.rotation}deg`;
         setTransform(endMove, type, time, deg);
-        state.currIndex = Math.abs(Math.round(endMove / props.lineSpacing)) + 1;
+        state.currIndex = Math.abs(Math.round(endMove / state.lineSpacing)) + 1;
       } else {
         let deg = 0;
-        let currentDeg = (-updateMove / props.lineSpacing + 1) * state.rotation;
+        let currentDeg = (-updateMove / state.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 / props.lineSpacing)) + 1;
+          state.currIndex = Math.abs(Math.round(updateMove / state.lineSpacing)) + 1;
         }
       }
     };
@@ -185,7 +175,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 * props.lineSpacing;
+      let move = index === -1 ? 0 : index * state.lineSpacing;
       type && setChooseValue();
       setMove(-move);
     };
@@ -224,47 +214,36 @@ const _sfc_main$1 = create$1({
         deep: true
       }
     );
-    watch(
-      () => props.lineSpacing,
-      (val) => {
-        console.log("\u66F4\u65B0");
-        modifyStatus(false);
-      },
-      {
-        deep: true
-      }
-    );
     onMounted(() => {
-      modifyStatus(false);
+      modifyStatus(true);
     });
-    const refRandomId = Math.random().toString(36).slice(-8);
     return {
       ...toRefs(state),
       ...toRefs(props),
       wrapper,
-      itemref,
       setRollerStyle,
       isHidden,
       roller,
       list,
-      listitem,
       onTouchStart,
       onTouchMove,
       onTouchEnd,
-      touchTileStyle,
       touchRollerStyle,
+      touchTileStyle,
       setMove,
-      refRandomId,
       stopMomentum
     };
   }
 });
-const _hoisted_1$1 = ["id"];
-const _hoisted_2$1 = {
+const _hoisted_1$1 = {
   key: 1,
   class: "nut-picker-roller-item-tile"
 };
-const _hoisted_3$1 = /* @__PURE__ */ createElementVNode("view", { class: "nut-picker-roller-mask" }, null, -1);
+const _hoisted_2$1 = /* @__PURE__ */ createElementVNode("view", { class: "nut-picker-roller-mask" }, null, -1);
+const _hoisted_3$1 = {
+  key: 0,
+  class: "nut-picker-content"
+};
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("view", {
     class: "nut-picker__list",
@@ -275,7 +254,6 @@ 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))
     }, [
@@ -288,20 +266,26 @@ 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),
-          createTextVNode(),
-          item && item.text && !_ctx.threeDimensional ? (openBlock(), createElementBlock("view", _hoisted_2$1, toDisplayString(item.text), 1)) : createCommentVNode("", true)
+          item && item.text && !_ctx.threeDimensional ? (openBlock(), createElementBlock("view", _hoisted_1$1, toDisplayString(item.text), 1)) : createCommentVNode("", true)
         ], 64);
       }), 128))
-    ], 44, _hoisted_1$1),
-    createTextVNode(),
-    _hoisted_3$1
+    ], 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)
   ], 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
+    [column.name]: column,
+    [Popup.name]: Popup
   },
   props: {
     ...popupProps,
@@ -344,15 +328,11 @@ const _sfc_main = create({
   setup(props, { emit }) {
     const state = reactive({
       show: false,
-      formattedColumns: props.columns,
-      lineSpacing: 36,
-      picking: false,
-      ENV: Taro.getEnv(),
-      ENV_TYPE: Taro.ENV_TYPE
+      formattedColumns: props.columns
     });
-    const pickerline = ref(null);
-    let defaultValues = ref(props.modelValue);
-    let defaultIndexes = ref([]);
+    let defaultValues = ref(
+      Array.isArray(props.modelValue) && props.modelValue.length > 0 ? props.modelValue : []
+    );
     const pickerColumn = ref([]);
     const swipeRef = (el) => {
       if (el && pickerColumn.value.length < columnsList.value.length) {
@@ -367,13 +347,11 @@ 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(() => {
@@ -393,7 +371,10 @@ const _sfc_main = create({
         case "multiple":
           return state.formattedColumns;
         case "cascade":
-          return formatCascade(state.formattedColumns, defaultValues.value);
+          return formatCascade(
+            state.formattedColumns,
+            defaultValues.value ? defaultValues.value : []
+          );
         default:
           return [state.formattedColumns];
       }
@@ -427,6 +408,7 @@ const _sfc_main = create({
     };
     const changeHandler = (columnIndex, option) => {
       if (option && Object.keys(option).length) {
+        defaultValues.value = defaultValues.value ? defaultValues.value : [];
         if (columnsType.value === "cascade") {
           defaultValues.value[columnIndex] = option.value ? option.value : "";
           let index = columnIndex;
@@ -449,83 +431,25 @@ const _sfc_main = create({
         });
       }
     };
-    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 = () => {
+      pickerColumn.value.length > 0 && pickerColumn.value.forEach((column2) => {
+        column2.stopMomentum();
+      });
       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 (Taro.getEnv() == Taro.ENV_TYPE.WEB) {
-          setTimeout(() => {
-            getReference();
-          }, 200);
-        } else {
-          defaultIndexes.value = defaultValuesConvert.value;
-        }
+      if (props.visible)
         state.show = props.visible;
-      }
     });
     onBeforeUnmount(() => {
       if (props.visible)
@@ -537,7 +461,6 @@ const _sfc_main = create({
         const isSameValue = JSON.stringify(newValues) === JSON.stringify(defaultValues.value);
         if (!isSameValue) {
           defaultValues.value = newValues;
-          defaultIndexes.value = defaultValuesConvert.value;
         }
       },
       { deep: true }
@@ -550,21 +473,14 @@ const _sfc_main = create({
           emit("update:modelValue", newValues);
         }
       },
-      { immediate: true }
+      { deep: true }
     );
     watch(
       () => props.visible,
       (val) => {
         state.show = val;
         if (val) {
-          if (Taro.getEnv() == Taro.ENV_TYPE.WEB) {
-            setTimeout(() => {
-              getReference();
-            }, 200);
-            pickerColumn.value = [];
-          } else {
-            defaultIndexes.value = defaultValuesConvert.value;
-          }
+          pickerColumn.value = [];
         }
       }
     );
@@ -585,27 +501,19 @@ const _sfc_main = create({
       changeHandler,
       confirmHandler,
       defaultValues,
-      defaultIndexes,
       translate,
       pickerColumn,
-      swipeRef,
-      refRandomId,
-      pickerline,
-      tileChange,
-      defaultValuesConvert,
-      handlePickstart,
-      handlePickend
+      swipeRef
     };
   }
 });
 const _hoisted_1 = { class: "nut-picker__bar" };
 const _hoisted_2 = { class: "nut-picker__title" };
-const _hoisted_3 = ["value"];
-const _hoisted_4 = {
-  key: 1,
-  class: "nut-picker__column"
+const _hoisted_3 = {
+  class: "nut-picker__column",
+  ref: "wrapHeight"
 };
-const _hoisted_5 = ["id"];
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("view", { class: "nut-picker__hairline" }, null, -1);
 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");
@@ -615,12 +523,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     createVNode(_component_nut_popup, {
       position: "bottom",
       visible: _ctx.show,
-      "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => _ctx.show = $event),
+      "onUpdate:visible": _cache[2] || (_cache[2] = ($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
     }, {
@@ -630,46 +539,15 @@ 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"),
-        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(),
+        createElementVNode("view", _hoisted_3, [
+          _hoisted_4,
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columnsList, (column2, columnIndex) => {
             return openBlock(), createElementBlock("view", {
               class: "nut-picker__columnitem",
@@ -682,23 +560,21 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 column: column2,
                 readonly: _ctx.readonly,
                 columnsType: _ctx.columnsType,
-                value: _ctx.defaultValues[columnIndex],
-                threeDimensional: false,
+                value: _ctx.defaultValues && _ctx.defaultValues[columnIndex],
+                threeDimensional: _ctx.threeDimensional,
                 swipeDuration: _ctx.swipeDuration,
-                lineSpacing: _ctx.lineSpacing,
                 onChange: (option) => {
                   _ctx.changeHandler(columnIndex, option);
                 }
-              }, null, 8, ["itemShow", "column", "readonly", "columnsType", "value", "swipeDuration", "lineSpacing", "onChange"])
+              }, null, 8, ["itemShow", "column", "readonly", "columnsType", "value", "threeDimensional", "swipeDuration", "onChange"])
             ]);
           }), 128))
-        ])) : createCommentVNode("", true),
-        createTextVNode(),
+        ], 512),
         renderSlot(_ctx.$slots, "default")
       ]),
       _: 3
-    }, 8, ["visible", "teleport", "lock-scroll", "close-on-click-overlay", "onClose", "safeAreaInsetBottom", "destroyOnClose"])
+    }, 8, ["visible", "teleport", "lock-scroll", "close-on-click-overlay", "onClose", "isWrapTeleport", "safeAreaInsetBottom", "destroyOnClose"])
   ], 2);
 }
-var nutPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { nutPicker as default };
+var Picker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { Picker as default };