@nutui/nutui 3.3.1 → 4.0.0-beta.0

package/dist/packages/_es/Picker.js

@@ -1,32 +1,175 @@
 /*!
-* @nutui/nutui v3.3.1 Fri Dec 16 2022 17:34:28 GMT+0800 (中国标准时间)
+* @nutui/nutui v4.0.0-beta.0 Mon Dec 26 2022 00:00:21 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 { c as createComponent, a as preventDefault, d as clamp } from "./component.js";
-import Popup from "./Popup.js";
-import { p as popupProps } from "./props.js";
-import { u as useTouch } from "./index4.js";
-import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import { reactive, ref, computed, watch, toRefs, onMounted, openBlock, createElementBlock, createElementVNode, normalizeStyle, Fragment, renderList, normalizeClass, toDisplayString, createCommentVNode, resolveComponent, renderSlot, createVNode } from "vue";
+import { c as createComponent, d as preventDefault, e as clamp } from "./component.fb9ce7ad.js";
+import { p as pxCheck } from "./pxCheck.09969b22.js";
+import { u as useTouch } from "./index.983240fc.js";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.bf57b04e.js";
 import "../locale/lang";
+const { componentName: componentName$1 } = createComponent("picker");
+const usePicker = (props, emit) => {
+  const state = reactive({
+    formattedColumns: props.columns
+  });
+  let defaultValues = ref([]);
+  const pickerColumn = ref([]);
+  const swipeRef = (el) => {
+    if (el && pickerColumn.value.length < columnsList.value.length) {
+      pickerColumn.value.push(el);
+    }
+  };
+  const classes = computed(() => {
+    const prefixCls = componentName$1;
+    return {
+      [prefixCls]: true
+    };
+  });
+  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]);
+    });
+    return optins;
+  });
+  const columnsType = computed(() => {
+    const firstColumn = state.formattedColumns[0];
+    if (firstColumn) {
+      if (Array.isArray(firstColumn)) {
+        return "multiple";
+      }
+      if ("children" in firstColumn) {
+        return "cascade";
+      }
+    }
+    return "single";
+  });
+  const columnsList = computed(() => {
+    switch (columnsType.value) {
+      case "multiple":
+        return state.formattedColumns;
+      case "cascade":
+        return formatCascade(state.formattedColumns, defaultValues.value ? defaultValues.value : []);
+      default:
+        return [state.formattedColumns];
+    }
+  });
+  const formatCascade = (columns, defaultValues2) => {
+    const formatted = [];
+    let cursor = {
+      text: "",
+      value: "",
+      children: columns
+    };
+    let columnIndex = 0;
+    while (cursor && cursor.children) {
+      const options = cursor.children;
+      const value = defaultValues2[columnIndex];
+      let index = options.findIndex((columnItem) => columnItem.value == value);
+      if (index == -1)
+        index = 0;
+      cursor = cursor.children[index];
+      columnIndex++;
+      formatted.push(options);
+    }
+    return formatted;
+  };
+  const cancel = () => {
+    emit("cancel", {
+      selectedValue: defaultValues.value,
+      selectedOptions: selectedOptions.value
+    });
+  };
+  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;
+        let cursor = option;
+        while (cursor && cursor.children && cursor.children[0]) {
+          defaultValues.value[index + 1] = cursor.children[0].value;
+          index++;
+          cursor = cursor.children[0];
+        }
+        if (cursor && cursor.children && cursor.children.length == 0) {
+          defaultValues.value = defaultValues.value.slice(0, index + 1);
+        }
+      } else {
+        defaultValues.value[columnIndex] = option.hasOwnProperty("value") ? option.value : "";
+      }
+      emit("change", {
+        columnIndex,
+        selectedValue: defaultValues.value,
+        selectedOptions: selectedOptions.value
+      });
+    }
+  };
+  const confirm = () => {
+    if (defaultValues.value && !defaultValues.value.length) {
+      columnsList.value.forEach((columns) => {
+        defaultValues.value.push(columns[0].value);
+      });
+    }
+    emit("confirm", {
+      selectedValue: defaultValues.value,
+      selectedOptions: selectedOptions.value
+    });
+  };
+  const isSameValue = (valA, valB) => JSON.stringify(valA) === JSON.stringify(valB);
+  watch(
+    () => props.modelValue,
+    (newValues) => {
+      if (!isSameValue(newValues, defaultValues.value)) {
+        defaultValues.value = newValues;
+      }
+    },
+    { deep: true, immediate: true }
+  );
+  watch(
+    defaultValues,
+    (newValues) => {
+      if (!isSameValue(newValues, props.modelValue)) {
+        emit("update:modelValue", newValues);
+      }
+    },
+    { deep: true }
+  );
+  watch(
+    () => props.columns,
+    (val) => {
+      if (val.length)
+        state.formattedColumns = val;
+    }
+  );
+  return {
+    classes,
+    ...toRefs(state),
+    columnsType,
+    columnsList,
+    cancel,
+    changeHandler,
+    confirm,
+    defaultValues,
+    pickerColumn,
+    swipeRef,
+    selectedOptions,
+    isSameValue
+  };
+};
 const { create: create$1 } = createComponent("picker-column");
 const _sfc_main$1 = create$1({
   props: {
     value: [String, Number],
     columnsType: String,
-    itemShow: {
-      type: Boolean,
-      default: false
-    },
     column: {
       type: Array,
       default: () => []
     },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
     threeDimensional: {
       type: Boolean,
       default: true
@@ -34,12 +177,19 @@ const _sfc_main$1 = create$1({
     swipeDuration: {
       type: [Number, String],
       default: 1e3
+    },
+    visibleOptionNum: {
+      type: [Number, String],
+      default: 7
+    },
+    optionHeight: {
+      type: [Number, String],
+      default: 36
     }
   },
   emits: ["click", "change"],
   setup(props, { emit }) {
     const touch = useTouch();
-    const wrapper = ref();
     const state = reactive({
       touchParams: {
         startY: 0,
@@ -52,7 +202,6 @@ const _sfc_main$1 = create$1({
       currIndex: 1,
       transformY: 0,
       scrollDistance: 0,
-      lineSpacing: 36,
       rotation: 20
     });
     const roller = ref(null);
@@ -65,29 +214,38 @@ const _sfc_main$1 = create$1({
     const touchRollerStyle = computed(() => {
       return {
         transition: `transform ${touchTime.value}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,
-        transform: `rotate3d(1, 0, 0, ${touchDeg.value})`
+        transform: `rotate3d(1, 0, 0, ${touchDeg.value})`,
+        top: `calc(50% - ${+props.optionHeight / 2}px)`
       };
     });
     const touchTileStyle = computed(() => {
+      const { optionHeight } = props;
       return {
         transition: `transform ${touchTime.value}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,
-        transform: `translate3d(0, ${state.scrollDistance}px, 0)`
+        transform: `translate3d(0, ${state.scrollDistance}px, 0)`,
+        top: `calc(50% - ${+optionHeight / 2}px)`,
+        height: `${optionHeight}px`
       };
     });
     const setRollerStyle = (index) => {
       return `transform: rotate3d(1, 0, 0, ${-state.rotation * index}deg) translate3d(0px, 0px, 104px)`;
     };
+    const maskStyles = computed(() => {
+      return {
+        backgroundSize: `100% ${(+props.visibleOptionNum - 1) * +props.optionHeight / 2}px`
+      };
+    });
     const onTouchStart = (event) => {
       touch.start(event);
       if (moving.value) {
         let dom = roller.value;
         const { transform } = window.getComputedStyle(dom);
         if (props.threeDimensional) {
-          const circle = Math.floor(parseFloat(touchDeg.value) / 360);
+          const circle = Math.floor(touchDeg.value / 360);
           const cos = +transform.split(", ")[5];
           const sin = +transform.split(", ")[6] < 0 ? 180 : 0;
           const endDeg = circle * 360 + Math.acos(cos) / Math.PI * 180 + sin;
-          state.scrollDistance = -Math.abs((endDeg / state.rotation - 1) * state.lineSpacing);
+          state.scrollDistance = -Math.abs((endDeg / state.rotation - 1) * +props.optionHeight);
         } else {
           state.scrollDistance = +transform.slice(7, transform.length - 1).split(", ")[5];
         }
@@ -106,7 +264,7 @@ const _sfc_main$1 = create$1({
       let move = state.touchParams.lastY - state.touchParams.startY;
       setMove(move);
     };
-    const onTouchEnd = (event) => {
+    const onTouchEnd = () => {
       state.touchParams.lastY = touch.deltaY.value;
       state.touchParams.lastTime = Date.now();
       let move = state.touchParams.lastY - state.touchParams.startY;
@@ -145,27 +303,28 @@ const _sfc_main$1 = create$1({
       state.scrollDistance = translateY;
     };
     const setMove = (move, type, time) => {
+      const { optionHeight } = props;
       let updateMove = move + state.transformY;
       if (type === "end") {
         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) * +optionHeight) {
+          updateMove = -(props.column.length - 1) * +optionHeight;
         }
-        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 / +optionHeight) * +optionHeight;
+        let deg = `${(Math.abs(Math.round(endMove / +optionHeight)) + 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 / +optionHeight)) + 1;
       } else {
         let deg = 0;
-        let currentDeg = (-updateMove / state.lineSpacing + 1) * state.rotation;
+        let currentDeg = (-updateMove / +optionHeight + 1) * state.rotation;
         const maxDeg = (props.column.length + 1) * state.rotation;
         const minDeg = 0;
         deg = clamp(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 / +optionHeight)) + 1;
         }
       }
     };
@@ -176,7 +335,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.optionHeight;
       type && setChooseValue();
       setMove(-move);
     };
@@ -213,7 +372,6 @@ const _sfc_main$1 = create$1({
     return {
       ...toRefs(state),
       ...toRefs(props),
-      wrapper,
       setRollerStyle,
       isHidden,
       roller,
@@ -223,15 +381,12 @@ const _sfc_main$1 = create$1({
       touchRollerStyle,
       touchTileStyle,
       setMove,
-      stopMomentum
+      stopMomentum,
+      pxCheck,
+      maskStyles
     };
   }
 });
-const _hoisted_1$1 = {
-  key: 1,
-  class: "nut-picker-roller-item-tile"
-};
-const _hoisted_2$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,312 +409,160 @@ 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)
+          item && item.text && !_ctx.threeDimensional ? (openBlock(), createElementBlock("view", {
+            key: 1,
+            class: "nut-picker-roller-item-tile",
+            style: normalizeStyle({ height: _ctx.pxCheck(_ctx.optionHeight) })
+          }, toDisplayString(item.text), 5)) : createCommentVNode("", true)
         ], 64);
       }), 128))
     ], 36),
-    _hoisted_2$1
+    createElementVNode("view", {
+      class: "nut-picker-roller-mask",
+      style: normalizeStyle(_ctx.maskStyles)
+    }, null, 4)
   ], 32);
 }
-var column = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const column = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const baseProps = {
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  title: {
+    type: String,
+    default: ""
+  },
+  cancelText: {
+    type: String,
+    default: ""
+  },
+  okText: {
+    type: String,
+    default: ""
+  },
+  columns: {
+    type: Array,
+    default: () => {
+      return [];
+    }
+  },
+  threeDimensional: {
+    type: Boolean,
+    default: true
+  },
+  swipeDuration: {
+    type: [Number, String],
+    default: 1e3
+  },
+  showToolbar: {
+    type: Boolean,
+    default: true
+  },
+  visibleOptionNum: {
+    type: [Number, String],
+    default: 7
+  },
+  optionHeight: {
+    type: [Number, String],
+    default: 36
+  }
+};
 const { componentName, create, translate } = createComponent("picker");
 const _sfc_main = create({
   components: {
-    [column.name]: column,
-    [Popup.name]: Popup
-  },
-  props: {
-    ...popupProps,
-    modelValue: {
-      type: Array,
-      default: () => []
-    },
-    title: {
-      type: String,
-      default: ""
-    },
-    cancelText: {
-      type: String,
-      default: ""
-    },
-    okText: {
-      type: String,
-      default: ""
-    },
-    columns: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    threeDimensional: {
-      type: Boolean,
-      default: true
-    },
-    swipeDuration: {
-      type: [Number, String],
-      default: 1e3
-    },
-    showOkText: {
-      type: Boolean,
-      default: true
-    },
-    showCancelText: {
-      type: Boolean,
-      default: true
-    }
+    [column.name]: column
   },
-  emits: ["close", "change", "confirm", "update:visible", "update:modelValue"],
+  props: baseProps,
+  emits: ["cancel", "change", "confirm", "update:modelValue"],
   setup(props, { emit }) {
-    const state = reactive({
-      show: false,
-      formattedColumns: props.columns
-    });
-    let defaultValues = ref(
-      Array.isArray(props.modelValue) && props.modelValue.length > 0 ? props.modelValue : []
-    );
+    const { changeHandler, confirm, defaultValues, columnsList, columnsType, classes, cancel } = usePicker(props, emit);
     const pickerColumn = ref([]);
     const swipeRef = (el) => {
       if (el && pickerColumn.value.length < columnsList.value.length) {
         pickerColumn.value.push(el);
       }
     };
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-    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]);
-      });
-      return optins;
+    const columnStyle = computed(() => {
+      const styles = {};
+      styles.height = `${+props.visibleOptionNum * +props.optionHeight}px`;
+      styles["--lineHeight"] = `${+props.optionHeight}px`;
+      return styles;
     });
-    const columnsType = computed(() => {
-      const firstColumn = state.formattedColumns[0];
-      if (firstColumn) {
-        if (Array.isArray(firstColumn)) {
-          return "multiple";
-        }
-        if ("children" in firstColumn) {
-          return "cascade";
-        }
-      }
-      return "single";
-    });
-    const columnsList = computed(() => {
-      switch (columnsType.value) {
-        case "multiple":
-          return state.formattedColumns;
-        case "cascade":
-          return formatCascade(
-            state.formattedColumns,
-            defaultValues.value ? defaultValues.value : []
-          );
-        default:
-          return [state.formattedColumns];
-      }
-    });
-    const formatCascade = (columns, defaultValues2) => {
-      const formatted = [];
-      let cursor = {
-        text: "",
-        value: "",
-        children: columns
-      };
-      let columnIndex = 0;
-      while (cursor && cursor.children) {
-        const options = cursor.children;
-        const value = defaultValues2[columnIndex];
-        let index = options.findIndex((columnItem) => columnItem.value == value);
-        if (index == -1)
-          index = 0;
-        cursor = cursor.children[index];
-        columnIndex++;
-        formatted.push(options);
-      }
-      return formatted;
-    };
-    const close = () => {
-      emit("close", {
-        selectedValue: defaultValues.value,
-        selectedOptions: selectedOptions.value
-      });
-      emit("update:visible", false);
-    };
-    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;
-          let cursor = option;
-          while (cursor && cursor.children && cursor.children[0]) {
-            defaultValues.value[index + 1] = cursor.children[0].value;
-            index++;
-            cursor = cursor.children[0];
-          }
-          if (cursor && cursor.children && cursor.children.length == 0) {
-            defaultValues.value = defaultValues.value.slice(0, index + 1);
-          }
-        } else {
-          defaultValues.value[columnIndex] = option.hasOwnProperty("value") ? option.value : "";
-        }
-        emit("change", {
-          columnIndex,
-          selectedValue: defaultValues.value,
-          selectedOptions: selectedOptions.value
-        });
-      }
-    };
     const confirmHandler = () => {
       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]);
-        });
-      }
-      emit("confirm", {
-        selectedValue: defaultValues.value,
-        selectedOptions: selectedOptions.value
-      });
-      emit("update:visible", false);
+      confirm();
     };
-    const isSameValue = (valA, valB) => JSON.stringify(valA) === JSON.stringify(valB);
-    onMounted(() => {
-      if (props.visible)
-        state.show = props.visible;
-    });
-    onBeforeUnmount(() => {
-      if (props.visible)
-        state.show = false;
-    });
-    watch(
-      () => props.modelValue,
-      (newValues) => {
-        if (!isSameValue(newValues, defaultValues.value)) {
-          defaultValues.value = newValues;
-        }
-      },
-      { deep: true }
-    );
-    watch(
-      defaultValues,
-      (newValues) => {
-        if (!isSameValue(newValues, props.modelValue)) {
-          emit("update:modelValue", newValues);
-        }
-      },
-      { deep: true }
-    );
-    watch(
-      () => props.visible,
-      (val) => {
-        state.show = val;
-        if (val) {
-          pickerColumn.value = [];
-        }
-      }
-    );
-    watch(
-      () => props.columns,
-      (val) => {
-        if (val.length)
-          state.formattedColumns = val;
-      }
-    );
     return {
       classes,
-      ...toRefs(state),
       column,
       columnsType,
       columnsList,
-      close,
+      cancel,
       changeHandler,
       confirmHandler,
       defaultValues,
       translate,
       pickerColumn,
-      swipeRef
+      swipeRef,
+      columnStyle
     };
   }
 });
-const _hoisted_1 = { class: "nut-picker__bar" };
+const _hoisted_1 = {
+  key: 0,
+  class: "nut-picker__bar"
+};
 const _hoisted_2 = { class: "nut-picker__title" };
-const _hoisted_3 = { class: "nut-picker__column" };
 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");
-  return openBlock(), createElementBlock("view", {
+  return openBlock(), createElementBlock("div", {
     class: normalizeClass(_ctx.classes)
   }, [
-    createVNode(_component_nut_popup, {
-      position: "bottom",
-      visible: _ctx.show,
-      "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,
-      teleportDisable: _ctx.teleportDisable,
-      safeAreaInsetBottom: _ctx.safeAreaInsetBottom,
-      destroyOnClose: _ctx.destroyOnClose
-    }, {
-      default: withCtx(() => [
-        createElementVNode("view", _hoisted_1, [
-          _ctx.showCancelText ? (openBlock(), createElementBlock("view", {
-            key: 0,
-            class: "nut-picker__left",
-            onClick: _cache[0] || (_cache[0] = (...args) => _ctx.close && _ctx.close(...args))
-          }, toDisplayString(_ctx.cancelText || _ctx.translate("cancel")), 1)) : createCommentVNode("", true),
-          createElementVNode("view", _hoisted_2, toDisplayString(_ctx.title), 1),
-          _ctx.showOkText ? (openBlock(), createElementBlock("view", {
-            key: 1,
-            class: "nut-picker__right",
-            onClick: _cache[1] || (_cache[1] = ($event) => _ctx.confirmHandler())
-          }, toDisplayString(_ctx.okText || _ctx.translate("confirm")), 1)) : createCommentVNode("", true)
-        ]),
-        renderSlot(_ctx.$slots, "top"),
-        createElementVNode("view", _hoisted_3, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columnsList, (column2, columnIndex) => {
-            return openBlock(), createElementBlock("view", {
-              class: "nut-picker__columnitem",
-              key: columnIndex
-            }, [
-              createVNode(_component_nut_picker_column, {
-                ref_for: true,
-                ref: _ctx.swipeRef,
-                itemShow: _ctx.show,
-                column: column2,
-                readonly: _ctx.readonly,
-                columnsType: _ctx.columnsType,
-                value: _ctx.defaultValues && _ctx.defaultValues[columnIndex],
-                threeDimensional: _ctx.threeDimensional,
-                swipeDuration: _ctx.swipeDuration,
-                onChange: (option) => {
-                  _ctx.changeHandler(columnIndex, option);
-                }
-              }, null, 8, ["itemShow", "column", "readonly", "columnsType", "value", "threeDimensional", "swipeDuration", "onChange"])
-            ]);
-          }), 128))
-        ]),
-        renderSlot(_ctx.$slots, "default")
-      ]),
-      _: 3
-    }, 8, ["visible", "teleport", "lock-scroll", "close-on-click-overlay", "onClose", "teleportDisable", "safeAreaInsetBottom", "destroyOnClose"])
+    _ctx.showToolbar ? (openBlock(), createElementBlock("view", _hoisted_1, [
+      createElementVNode("view", {
+        class: "nut-picker__left",
+        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.cancel && _ctx.cancel(...args))
+      }, toDisplayString(_ctx.cancelText || _ctx.translate("cancel")), 1),
+      createElementVNode("view", _hoisted_2, toDisplayString(_ctx.title), 1),
+      createElementVNode("view", {
+        class: "nut-picker__right",
+        onClick: _cache[1] || (_cache[1] = ($event) => _ctx.confirmHandler())
+      }, toDisplayString(_ctx.okText || _ctx.translate("confirm")), 1)
+    ])) : createCommentVNode("", true),
+    renderSlot(_ctx.$slots, "top"),
+    createElementVNode("view", {
+      class: "nut-picker__column",
+      style: normalizeStyle(_ctx.columnStyle)
+    }, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columnsList, (column2, columnIndex) => {
+        return openBlock(), createElementBlock("view", {
+          class: "nut-picker__columnitem",
+          key: columnIndex
+        }, [
+          createVNode(_component_nut_picker_column, {
+            ref_for: true,
+            ref: _ctx.swipeRef,
+            column: column2,
+            columnsType: _ctx.columnsType,
+            value: _ctx.defaultValues && _ctx.defaultValues[columnIndex],
+            threeDimensional: _ctx.threeDimensional,
+            swipeDuration: _ctx.swipeDuration,
+            visibleOptionNum: _ctx.visibleOptionNum,
+            optionHeight: _ctx.optionHeight,
+            onChange: (option) => {
+              _ctx.changeHandler(columnIndex, option);
+            }
+          }, null, 8, ["column", "columnsType", "value", "threeDimensional", "swipeDuration", "visibleOptionNum", "optionHeight", "onChange"])
+        ]);
+      }), 128))
+    ], 4),
+    renderSlot(_ctx.$slots, "default")
   ], 2);
 }
-var Picker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { Picker as default };
+const Picker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  Picker as default
+};