@nutui/nutui 4.0.11 → 4.0.12

package/dist/packages/_es/Picker.js

@@ -1,120 +1,178 @@
-var le = Object.defineProperty, oe = Object.defineProperties;
-var ae = Object.getOwnPropertyDescriptors;
-var Q = Object.getOwnPropertySymbols;
-var re = Object.prototype.hasOwnProperty, se = Object.prototype.propertyIsEnumerable;
-var W = (e, n, a) => n in e ? le(e, n, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[n] = a, B = (e, n) => {
-  for (var a in n || (n = {}))
-    re.call(n, a) && W(e, a, n[a]);
-  if (Q)
-    for (var a of Q(n))
-      se.call(n, a) && W(e, a, n[a]);
-  return e;
-}, L = (e, n) => oe(e, ae(n));
-import { reactive as x, ref as $, computed as b, watch as E, toRefs as J, onMounted as ue, openBlock as S, createElementBlock as D, createElementVNode as N, normalizeStyle as I, Fragment as U, renderList as _, normalizeClass as ee, toDisplayString as R, createCommentVNode as j, resolveComponent as ie, renderSlot as X, createVNode as ce } from "vue";
-import { c as q, d as Z, e as me } from "./component-234624bc.js";
-import { p as de } from "./pxCheck-38173291.js";
-import { u as he } from "./index-53ec2d4d.js";
-import { _ as te } from "./_plugin-vue_export-helper-dad06003.js";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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-81a4c1d0.js";
+import { p as pxCheck } from "./pxCheck-c6b9f6b7.js";
+import { u as useTouch } from "./index-7a7385e4.js";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
 import "../locale/lang";
-const { componentName: fe } = q("picker"), ve = (e, n) => {
-  const a = x({
-    formattedColumns: e.columns
-  }), t = $([]), y = $([]), p = (l) => {
-    l && y.value.length < d.value.length && y.value.push(l);
-  }, r = b(() => ({
-    [fe]: !0
-  })), s = b(() => d.value.map((l, c) => l.find((T) => T.value === t.value[c]))), g = b(() => {
-    const l = a.formattedColumns[0];
-    if (l) {
-      if (Array.isArray(l))
+const { componentName: componentName$1 } = createComponent("picker");
+const usePicker = (props, emit) => {
+  const state = reactive({
+    formattedColumns: props.columns
+  });
+  const 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(() => {
+    return columnsList.value.map((column2, index) => {
+      return column2.find((item) => item.value === defaultValues.value[index]);
+    });
+  });
+  const columnsType = computed(() => {
+    const firstColumn = state.formattedColumns[0];
+    if (firstColumn) {
+      if (Array.isArray(firstColumn)) {
         return "multiple";
-      if ("children" in l)
+      }
+      if ("children" in firstColumn) {
         return "cascade";
+      }
     }
     return "single";
-  }), d = b(() => {
-    switch (g.value) {
+  });
+  const columnsList = computed(() => {
+    switch (columnsType.value) {
       case "multiple":
-        return a.formattedColumns;
+        return state.formattedColumns;
       case "cascade":
-        return H(a.formattedColumns, t.value ? t.value : []);
+        return formatCascade(state.formattedColumns, defaultValues.value ? defaultValues.value : []);
       default:
-        return [a.formattedColumns];
+        return [state.formattedColumns];
     }
-  }), H = (l, c) => {
-    const T = [];
-    let u = {
+  });
+  const formatCascade = (columns, defaultValues2) => {
+    const formatted = [];
+    let cursor = {
       text: "",
       value: "",
-      children: l
-    }, z = 0;
-    for (; u && u.children; ) {
-      const P = u.children, w = c[z];
-      let C = P.findIndex((O) => O.value === w);
-      C === -1 && (C = 0), u = u.children[C], z++, T.push(P);
+      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 T;
-  }, M = () => {
-    n("cancel", {
-      selectedValue: t.value,
-      selectedOptions: s.value
+    return formatted;
+  };
+  const cancel = () => {
+    emit("cancel", {
+      selectedValue: defaultValues.value,
+      selectedOptions: selectedOptions.value
     });
-  }, A = (l, c) => {
-    if (c && Object.keys(c).length) {
-      if (t.value = t.value ? t.value : [], g.value === "cascade") {
-        t.value[l] = c.value ? c.value : "";
-        let T = l, u = c;
-        for (; u && u.children && u.children[0]; )
-          t.value[T + 1] = u.children[0].value, T++, u = u.children[0];
-        u && u.children && u.children.length === 0 && (t.value = t.value.slice(0, T + 1));
-      } else
-        t.value[l] = c.hasOwnProperty("value") ? c.value : "";
-      n("change", {
-        columnIndex: l,
-        selectedValue: t.value,
-        selectedOptions: s.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);
       });
     }
-  }, f = () => {
-    t.value && !t.value.length && d.value.forEach((l) => {
-      t.value.push(l[0].value);
-    }), n("confirm", {
-      selectedValue: t.value,
-      selectedOptions: s.value
+    emit("confirm", {
+      selectedValue: defaultValues.value,
+      selectedOptions: selectedOptions.value
     });
-  }, Y = (l, c) => JSON.stringify(l) === JSON.stringify(c);
-  return E(
-    () => e.modelValue,
-    (l) => {
-      Y(l, t.value) || (t.value = l);
+  };
+  const isSameValue = (valA, valB) => JSON.stringify(valA) === JSON.stringify(valB);
+  watch(
+    () => props.modelValue,
+    (newValues) => {
+      if (!isSameValue(newValues, defaultValues.value)) {
+        defaultValues.value = newValues;
+      }
     },
-    { deep: !0, immediate: !0 }
-  ), E(
-    t,
-    (l) => {
-      Y(l, e.modelValue) || n("update:modelValue", l);
+    { deep: true, immediate: true }
+  );
+  watch(
+    defaultValues,
+    (newValues) => {
+      if (!isSameValue(newValues, props.modelValue)) {
+        emit("update:modelValue", newValues);
+      }
     },
-    { deep: !0 }
-  ), E(
-    () => e.columns,
-    (l) => {
-      l.length && (a.formattedColumns = l);
+    { deep: true }
+  );
+  watch(
+    () => props.columns,
+    (val) => {
+      if (val.length)
+        state.formattedColumns = val;
     }
-  ), L(B({
-    classes: r
-  }, J(a)), {
-    columnsType: g,
-    columnsList: d,
-    cancel: M,
-    changeHandler: A,
-    confirm: f,
-    defaultValues: t,
-    pickerColumn: y,
-    swipeRef: p,
-    selectedOptions: s,
-    isSameValue: Y
+  );
+  return __spreadProps(__spreadValues({
+    classes
+  }, toRefs(state)), {
+    columnsType,
+    columnsList,
+    cancel,
+    changeHandler,
+    confirm,
+    defaultValues,
+    pickerColumn,
+    swipeRef,
+    selectedOptions,
+    isSameValue
   });
-}, { create: pe } = q("picker-column"), ge = pe({
+};
+const { create: create$1 } = createComponent("picker-column");
+const _sfc_main$1 = create$1({
   props: {
     // 当前选中项
     value: [String, Number],
@@ -126,7 +184,7 @@ const { componentName: fe } = q("picker"), ve = (e, n) => {
     // 是否开启3D效果
     threeDimensional: {
       type: Boolean,
-      default: !0
+      default: true
     },
     swipeDuration: {
       type: [Number, String],
@@ -142,8 +200,9 @@ const { componentName: fe } = q("picker"), ve = (e, n) => {
     }
   },
   emits: ["click", "change"],
-  setup(e, { emit: n }) {
-    const a = he(), t = x({
+  setup(props, { emit }) {
+    const touch = useTouch();
+    const state = reactive({
       touchParams: {
         startY: 0,
         endY: 0,
@@ -156,141 +215,227 @@ const { componentName: fe } = q("picker"), ve = (e, n) => {
       transformY: 0,
       scrollDistance: 0,
       rotation: 20
-    }), y = $(null), p = $(!1), r = $(0), s = $(0), g = 200, d = 300, H = 15, M = b(() => ({
-      transition: `transform ${s.value}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,
-      transform: `rotate3d(1, 0, 0, ${r.value})`,
-      top: `calc(50% - ${+e.optionHeight / 2}px)`
-    })), A = b(() => {
-      const { optionHeight: o } = e;
+    });
+    const roller = ref(null);
+    const moving = ref(false);
+    const touchDeg = ref(0);
+    const touchTime = ref(0);
+    const DEFAULT_DURATION = 200;
+    const INERTIA_TIME = 300;
+    const INERTIA_DISTANCE = 15;
+    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})`,
+        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)`,
+        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 {
-        transition: `transform ${s.value}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,
-        transform: `translate3d(0, ${t.scrollDistance}px, 0)`,
-        top: `calc(50% - ${+o / 2}px)`,
-        height: `${o}px`
+        backgroundSize: `100% ${(+props.visibleOptionNum - 1) * +props.optionHeight / 2}px`
       };
-    }), f = (o) => `transform: rotate3d(1, 0, 0, ${-t.rotation * o}deg) translate3d(0px, 0px, 104px)`, Y = b(() => ({
-      backgroundSize: `100% ${(+e.visibleOptionNum - 1) * +e.optionHeight / 2}px`
-    })), l = (o) => {
-      if (a.start(o), p.value) {
-        let m = y.value;
-        const { transform: i } = window.getComputedStyle(m);
-        if (e.threeDimensional) {
-          const h = Math.floor(parseInt(r.value) / 360), v = +i.split(", ")[5], k = +i.split(", ")[6] < 0 ? 180 : 0, V = h * 360 + Math.acos(v) / Math.PI * 180 + k;
-          t.scrollDistance = -Math.abs((V / t.rotation - 1) * +e.optionHeight);
-        } else
-          t.scrollDistance = +i.slice(7, i.length - 1).split(", ")[5];
+    });
+    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(parseInt(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) * +props.optionHeight);
+        } else {
+          state.scrollDistance = +transform.slice(7, transform.length - 1).split(", ")[5];
+        }
+      }
+      preventDefault(event, true);
+      state.touchParams.startY = touch.deltaY.value;
+      state.touchParams.startTime = Date.now();
+      state.transformY = state.scrollDistance;
+    };
+    const onTouchMove = (event) => {
+      touch.move(event);
+      if (touch.isVertical()) {
+        moving.value = true;
+        preventDefault(event, true);
       }
-      Z(o, !0), t.touchParams.startY = a.deltaY.value, t.touchParams.startTime = Date.now(), t.transformY = t.scrollDistance;
-    }, c = (o) => {
-      a.move(o), a.isVertical() && (p.value = !0, Z(o, !0)), t.touchParams.lastY = a.deltaY.value;
-      let m = t.touchParams.lastY - t.touchParams.startY;
-      w(m);
-    }, T = () => {
-      t.touchParams.lastY = a.deltaY.value, t.touchParams.lastTime = Date.now();
-      let o = t.touchParams.lastY - t.touchParams.startY, m = t.touchParams.lastTime - t.touchParams.startTime;
-      if (m <= d && Math.abs(o) > H) {
-        const i = u(o, m);
-        w(i, "end", +e.swipeDuration);
+      state.touchParams.lastY = touch.deltaY.value;
+      let move = state.touchParams.lastY - state.touchParams.startY;
+      setMove(move);
+    };
+    const onTouchEnd = () => {
+      state.touchParams.lastY = touch.deltaY.value;
+      state.touchParams.lastTime = Date.now();
+      let move = state.touchParams.lastY - state.touchParams.startY;
+      let moveTime = state.touchParams.lastTime - state.touchParams.startTime;
+      if (moveTime <= INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {
+        const distance = momentum(move, moveTime);
+        setMove(distance, "end", +props.swipeDuration);
         return;
-      } else
-        w(o, "end");
+      } else {
+        setMove(move, "end");
+      }
       setTimeout(() => {
-        a.reset(), p.value = !1;
+        touch.reset();
+        moving.value = false;
       }, 0);
-    }, u = (o, m) => (o = Math.abs(o / m) / 3e-3 * (o < 0 ? -1 : 1), o), z = (o) => o >= t.currIndex + 8 || o <= t.currIndex - 8, P = (o = 0, m, i = g, h) => {
-      m === "end" ? s.value = i : s.value = 0, r.value = h, t.scrollDistance = o;
-    }, w = (o, m, i) => {
-      const { optionHeight: h } = e;
-      let v = o + t.transformY;
-      if (m === "end") {
-        v > 0 && (v = 0), v < -(e.column.length - 1) * +h && (v = -(e.column.length - 1) * +h);
-        let k = Math.round(v / +h) * +h, V = `${(Math.abs(Math.round(k / +h)) + 1) * t.rotation}deg`;
-        P(k, m, i, V), t.currIndex = Math.abs(Math.round(k / +h)) + 1;
+    };
+    const momentum = (distance, duration) => {
+      const speed = Math.abs(distance / duration);
+      distance = speed / 3e-3 * (distance < 0 ? -1 : 1);
+      return distance;
+    };
+    const isHidden = (index) => {
+      if (index >= state.currIndex + 8 || index <= state.currIndex - 8) {
+        return true;
+      } else {
+        return false;
+      }
+    };
+    const setTransform = (translateY = 0, type, time = DEFAULT_DURATION, deg) => {
+      if (type === "end") {
+        touchTime.value = time;
+      } else {
+        touchTime.value = 0;
+      }
+      touchDeg.value = deg;
+      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) * +optionHeight) {
+          updateMove = -(props.column.length - 1) * +optionHeight;
+        }
+        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 / +optionHeight)) + 1;
       } else {
-        let k = 0, V = (-v / +h + 1) * t.rotation;
-        const G = (e.column.length + 1) * t.rotation, K = 0;
-        k = me(V, K, G), K < k && k < G && (P(v, null, void 0, k + "deg"), t.currIndex = Math.abs(Math.round(v / +h)) + 1);
+        let deg = 0;
+        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 / +optionHeight)) + 1;
+        }
       }
-    }, C = () => {
-      n("change", e.column[t.currIndex - 1]);
-    }, O = (o) => {
-      const { column: m } = e;
-      let i = m.findIndex((v) => v.value === e.value);
-      t.currIndex = i === -1 ? 1 : i + 1;
-      let h = i === -1 ? 0 : i * +e.optionHeight;
-      o && C(), w(-h);
-    }, ne = () => {
-      p.value = !1, s.value = 0, C();
     };
-    return E(
-      () => e.column,
-      (o) => {
-        e.column && e.column.length > 0 && (t.transformY = 0, O(!1));
+    const setChooseValue = () => {
+      emit("change", props.column[state.currIndex - 1]);
+    };
+    const modifyStatus = (type) => {
+      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.optionHeight;
+      type && setChooseValue();
+      setMove(-move);
+    };
+    const stopMomentum = () => {
+      moving.value = false;
+      touchTime.value = 0;
+      setChooseValue();
+    };
+    watch(
+      () => props.column,
+      (val) => {
+        if (props.column && props.column.length > 0) {
+          state.transformY = 0;
+          modifyStatus(false);
+        }
       },
       {
-        deep: !0
+        deep: true
       }
-    ), E(
-      () => e.value,
-      (o) => {
-        t.transformY = 0, O(!1);
+    );
+    watch(
+      () => props.value,
+      (val) => {
+        state.transformY = 0;
+        modifyStatus(false);
       },
       {
-        deep: !0
+        deep: true
       }
-    ), ue(() => {
-      O(!0);
-    }), L(B(B({}, J(t)), J(e)), {
-      setRollerStyle: f,
-      isHidden: z,
-      roller: y,
-      onTouchStart: l,
-      onTouchMove: c,
-      onTouchEnd: T,
-      touchRollerStyle: M,
-      touchTileStyle: A,
-      setMove: w,
-      stopMomentum: ne,
-      pxCheck: de,
-      maskStyles: Y
+    );
+    onMounted(() => {
+      modifyStatus(true);
+    });
+    return __spreadProps(__spreadValues(__spreadValues({}, toRefs(state)), toRefs(props)), {
+      setRollerStyle,
+      isHidden,
+      roller,
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      touchRollerStyle,
+      touchTileStyle,
+      setMove,
+      stopMomentum,
+      pxCheck,
+      maskStyles
     });
   }
 });
-function ye(e, n, a, t, y, p) {
-  return S(), D("view", {
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
     class: "nut-picker__list",
-    onTouchstart: n[1] || (n[1] = (...r) => e.onTouchStart && e.onTouchStart(...r)),
-    onTouchmove: n[2] || (n[2] = (...r) => e.onTouchMove && e.onTouchMove(...r)),
-    onTouchend: n[3] || (n[3] = (...r) => e.onTouchEnd && e.onTouchEnd(...r))
+    onTouchstart: _cache[1] || (_cache[1] = (...args) => _ctx.onTouchStart && _ctx.onTouchStart(...args)),
+    onTouchmove: _cache[2] || (_cache[2] = (...args) => _ctx.onTouchMove && _ctx.onTouchMove(...args)),
+    onTouchend: _cache[3] || (_cache[3] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args))
   }, [
-    N("view", {
+    createElementVNode("view", {
       class: "nut-picker-roller",
       ref: "roller",
-      style: I(e.threeDimensional ? e.touchRollerStyle : e.touchTileStyle),
-      onTransitionend: n[0] || (n[0] = (...r) => e.stopMomentum && e.stopMomentum(...r))
+      style: normalizeStyle(_ctx.threeDimensional ? _ctx.touchRollerStyle : _ctx.touchTileStyle),
+      onTransitionend: _cache[0] || (_cache[0] = (...args) => _ctx.stopMomentum && _ctx.stopMomentum(...args))
     }, [
-      (S(!0), D(U, null, _(e.column, (r, s) => (S(), D(U, {
-        key: r.value ? r.value : s
-      }, [
-        r && r.text && e.threeDimensional ? (S(), D("view", {
-          key: 0,
-          class: ee(["nut-picker-roller-item", { "nut-picker-roller-item-hidden": e.isHidden(s + 1) }]),
-          style: I(e.setRollerStyle(s + 1))
-        }, R(r.text), 7)) : j("", !0),
-        r && r.text && !e.threeDimensional ? (S(), D("view", {
-          key: 1,
-          class: "nut-picker-roller-item-tile",
-          style: I({ height: e.pxCheck(e.optionHeight), lineHeight: e.pxCheck(e.optionHeight) })
-        }, R(r.text), 5)) : j("", !0)
-      ], 64))), 128))
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.column, (item, index) => {
+        return openBlock(), createElementBlock(Fragment, {
+          key: item.value ? item.value : index
+        }, [
+          item && item.text && _ctx.threeDimensional ? (openBlock(), createElementBlock("view", {
+            key: 0,
+            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", {
+            key: 1,
+            class: "nut-picker-roller-item-tile",
+            style: normalizeStyle({ height: _ctx.pxCheck(_ctx.optionHeight), lineHeight: _ctx.pxCheck(_ctx.optionHeight) })
+          }, toDisplayString(item.text), 5)) : createCommentVNode("", true)
+        ], 64);
+      }), 128))
     ], 36),
-    N("view", {
+    createElementVNode("view", {
       class: "nut-picker-roller-mask",
-      style: I(e.maskStyles)
+      style: normalizeStyle(_ctx.maskStyles)
     }, null, 4)
   ], 32);
 }
-const F = /* @__PURE__ */ te(ge, [["render", ye]]), Te = {
+const column = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const baseProps = {
   modelValue: {
     type: Array,
     default: () => []
@@ -309,11 +454,13 @@ const F = /* @__PURE__ */ te(ge, [["render", ye]]), Te = {
   },
   columns: {
     type: Array,
-    default: () => []
+    default: () => {
+      return [];
+    }
   },
   threeDimensional: {
     type: Boolean,
-    default: !0
+    default: true
   },
   swipeDuration: {
     type: [Number, String],
@@ -321,7 +468,7 @@ const F = /* @__PURE__ */ te(ge, [["render", ye]]), Te = {
   },
   showToolbar: {
     type: Boolean,
-    default: !0
+    default: true
   },
   visibleOptionNum: {
     type: [Number, String],
@@ -331,87 +478,102 @@ const F = /* @__PURE__ */ te(ge, [["render", ye]]), Te = {
     type: [Number, String],
     default: 36
   }
-}, { componentName: Ve, create: ke, translate: Se } = q("picker"), De = ke({
+};
+const { componentName, create, translate } = createComponent("picker");
+const _sfc_main = create({
   components: {
-    [F.name]: F
+    [column.name]: column
   },
-  props: Te,
+  props: baseProps,
   emits: ["cancel", "change", "confirm", "update:modelValue"],
-  setup(e, { emit: n }) {
-    const { changeHandler: a, confirm: t, defaultValues: y, columnsList: p, columnsType: r, classes: s, cancel: g } = ve(e, n), d = $([]), H = (f) => {
-      f && d.value.length < p.value.length && d.value.push(f);
-    }, M = b(() => {
-      const f = {};
-      return f.height = `${+e.visibleOptionNum * +e.optionHeight}px`, f["--lineHeight"] = `${+e.optionHeight}px`, f;
+  setup(props, { emit }) {
+    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 columnStyle = computed(() => {
+      const styles = {};
+      styles.height = `${+props.visibleOptionNum * +props.optionHeight}px`;
+      styles["--lineHeight"] = `${+props.optionHeight}px`;
+      return styles;
     });
+    const confirmHandler = () => {
+      pickerColumn.value.length > 0 && pickerColumn.value.forEach((column2) => {
+        column2.stopMomentum();
+      });
+      confirm();
+    };
     return {
-      classes: s,
-      column: F,
-      columnsType: r,
-      columnsList: p,
-      cancel: g,
-      changeHandler: a,
-      confirmHandler: () => {
-        d.value.length > 0 && d.value.forEach((f) => {
-          f.stopMomentum();
-        }), t();
-      },
-      defaultValues: y,
-      translate: Se,
-      pickerColumn: d,
-      swipeRef: H,
-      columnStyle: M
+      classes,
+      column,
+      columnsType,
+      columnsList,
+      cancel,
+      changeHandler,
+      confirmHandler,
+      defaultValues,
+      translate,
+      pickerColumn,
+      swipeRef,
+      columnStyle
     };
   }
-}), be = {
+});
+const _hoisted_1 = {
   key: 0,
   class: "nut-picker__bar"
-}, we = { class: "nut-picker__title" };
-function $e(e, n, a, t, y, p) {
-  const r = ie("nut-picker-column");
-  return S(), D("div", {
-    class: ee(e.classes)
+};
+const _hoisted_2 = { class: "nut-picker__title" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_picker_column = resolveComponent("nut-picker-column");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.classes)
   }, [
-    e.showToolbar ? (S(), D("view", be, [
-      N("view", {
+    _ctx.showToolbar ? (openBlock(), createElementBlock("view", _hoisted_1, [
+      createElementVNode("view", {
         class: "nut-picker__left",
-        onClick: n[0] || (n[0] = (...s) => e.cancel && e.cancel(...s))
-      }, R(e.cancelText || e.translate("cancel")), 1),
-      N("view", we, R(e.title), 1),
-      N("view", {
+        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: n[1] || (n[1] = (s) => e.confirmHandler())
-      }, R(e.okText || e.translate("confirm")), 1)
-    ])) : j("", !0),
-    X(e.$slots, "top"),
-    N("view", {
+        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: I(e.columnStyle)
+      style: normalizeStyle(_ctx.columnStyle)
     }, [
-      (S(!0), D(U, null, _(e.columnsList, (s, g) => (S(), D("view", {
-        class: "nut-picker__columnitem",
-        key: g
-      }, [
-        ce(r, {
-          ref_for: !0,
-          ref: e.swipeRef,
-          column: s,
-          columnsType: e.columnsType,
-          value: e.defaultValues && e.defaultValues[g],
-          threeDimensional: e.threeDimensional,
-          swipeDuration: e.swipeDuration,
-          visibleOptionNum: e.visibleOptionNum,
-          optionHeight: e.optionHeight,
-          onChange: (d) => {
-            e.changeHandler(g, d);
-          }
-        }, null, 8, ["column", "columnsType", "value", "threeDimensional", "swipeDuration", "visibleOptionNum", "optionHeight", "onChange"])
-      ]))), 128))
+      (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),
-    X(e.$slots, "default")
+    renderSlot(_ctx.$slots, "default")
   ], 2);
 }
-const Ie = /* @__PURE__ */ te(De, [["render", $e]]);
+const Picker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  Ie as default
+  Picker as default
 };