@fox-js/foxui 4.0.1-4 → 4.0.1-5

package/dist/foxui.es.js

@@ -1,6 +1,6 @@
 
 /*!
- * @fox-js/foxui v4.0.0 Thu Sep 08 2022 20:09:31 GMT+0800 (中国标准时间)
+ * @fox-js/foxui v4.0.0 Wed Sep 14 2022 20:37:50 GMT+0800 (中国标准时间)
  */
 import { getCurrentInstance, inject, effectScope, watchEffect, nextTick, reactive, isReactive, provide, onUnmounted, watch, computed, toRef, ref, unref, defineComponent, onMounted, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, resolveComponent, createBlock, createCommentVNode, toDisplayString, Fragment, renderList, createTextVNode, createVNode, shallowRef, markRaw, triggerRef, h, createElementVNode, Transition, withCtx, withDirectives, vShow, render as render$5, onDeactivated, onBeforeUnmount, onActivated, withModifiers, onBeforeMount, toRefs, Teleport, toRaw, createSlots, readonly, useSlots, shallowReactive, isVNode, mergeProps, vModelText, resolveDynamicComponent } from 'vue';
 import { isEqual, toBoolean, extend, toNumber, isObject, isDate, isPromise } from '@fox-js/fox';
@@ -2233,7 +2233,7 @@ const component$c = (componentName, scope) => {
   };
 };
 
-const _hoisted_1$1i = {
+const _hoisted_1$1j = {
   key: 1,
   class: "fox-header__title"
 };
@@ -2241,7 +2241,7 @@ const _hoisted_2$10 = {
   key: 0,
   class: "tab-title"
 };
-const _hoisted_3$N = ["onClick"];
+const _hoisted_3$O = ["onClick"];
 const _hoisted_4$C = {
   key: 0,
   class: "fox-tab-active__line"
@@ -2279,7 +2279,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
         ], 4))
       : createCommentVNode("", true),
     (_ctx.mTitleShow)
-      ? (openBlock(), createElementBlock("view", _hoisted_1$1i, [
+      ? (openBlock(), createElementBlock("view", _hoisted_1$1j, [
           renderSlot(_ctx.$slots, "default", {}, () => [
             (_ctx.mTabsShow)
               ? (openBlock(), createElementBlock("view", _hoisted_2$10, [
@@ -2296,7 +2296,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
                             createVNode(_component_fox_icon, { name: "joy-smile" })
                           ]))
                         : createCommentVNode("", true)
-                    ], 14, _hoisted_3$N))
+                    ], 14, _hoisted_3$O))
                   }), 128))
                 ]))
               : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
@@ -2898,7 +2898,7 @@ const _sfc_main$1T = create$1T({
     };
   }
 });
-const _hoisted_1$1h = ["innerHTML"];
+const _hoisted_1$1i = ["innerHTML"];
 const _hoisted_2$$ = ["innerHTML"];
 function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("view", {
@@ -2908,7 +2908,7 @@ function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
       key: 0,
       class: normalizeClass(["fox-price--symbol", `fox-price--symbol-${_ctx.size}`]),
       innerHTML: _ctx.showSymbol
-    }, null, 10, _hoisted_1$1h)) : createCommentVNode("", true),
+    }, null, 10, _hoisted_1$1i)) : createCommentVNode("", true),
     createElementVNode("view", {
       class: normalizeClass(`fox-price--${_ctx.size}`)
     }, toDisplayString(_ctx.intText), 3),
@@ -3008,7 +3008,7 @@ const _sfc_main$1S = create$1S({
     };
   }
 });
-const _hoisted_1$1g = {
+const _hoisted_1$1h = {
   key: 1,
   class: "text"
 };
@@ -3028,7 +3028,7 @@ function _sfc_render$1z(_ctx, _cache, $props, $setup, $data, $options) {
             key: 0,
             price: _ctx.message,
             position: "before"
-          }, null, 8, ["price"])) : (openBlock(), createElementBlock("span", _hoisted_1$1g, toDisplayString(_ctx.message), 1))
+          }, null, 8, ["price"])) : (openBlock(), createElementBlock("span", _hoisted_1$1h, toDisplayString(_ctx.message), 1))
         ], 6),
         createElementVNode("view", {
           class: normalizeClass(_ctx.arrowClasses),
@@ -3395,7 +3395,7 @@ const _sfc_main$1R = create$1R({
     };
   }
 });
-const _hoisted_1$1f = { class: "text" };
+const _hoisted_1$1g = { class: "text" };
 function _sfc_render$1y(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_fox_icon = resolveComponent("fox-icon");
   return openBlock(), createElementBlock("view", {
@@ -3438,7 +3438,7 @@ function _sfc_render$1y(_ctx, _cache, $props, $setup, $data, $options) {
         class: "icon",
         name: _ctx.mIcon
       }, null, 8, ["name"])) : createCommentVNode("", true),
-      createElementVNode("view", _hoisted_1$1f, toDisplayString(_ctx.mTip), 1)
+      createElementVNode("view", _hoisted_1$1g, toDisplayString(_ctx.mTip), 1)
     ], 6)) : createCommentVNode("", true),
     renderSlot(_ctx.$slots, "hide")
   ], 6);
@@ -4290,7 +4290,7 @@ const _sfc_main$1N = create$1N({
     };
   }
 });
-const _hoisted_1$1e = ["rows", "disabled", "readonly", "value", "maxlength", "placeholder", "autofocus"];
+const _hoisted_1$1f = ["rows", "disabled", "readonly", "value", "maxlength", "placeholder", "autofocus"];
 const _hoisted_2$_ = {
   key: 0,
   class: "fox-textarea__limit"
@@ -4313,7 +4313,7 @@ function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
       maxlength: _ctx.maxLength,
       placeholder: _ctx.placeholder,
       autofocus: _ctx.autofocus
-    }, null, 44, _hoisted_1$1e),
+    }, null, 44, _hoisted_1$1f),
     _ctx.limitShow ? (openBlock(), createElementBlock("view", _hoisted_2$_, toDisplayString(_ctx.modelValue ? _ctx.modelValue.length : 0) + "/" + toDisplayString(_ctx.maxLength), 1)) : createCommentVNode("", true)
   ], 2);
 }
@@ -4470,7 +4470,7 @@ const popupProps = {
   }
 };
 
-const commonProps = {
+const commonColumnProps = {
   readonly: {
     type: Boolean,
     default: false
@@ -4489,15 +4489,18 @@ const commonProps = {
     required: false,
     default: "value"
   },
-  itemOptions: {
-    type: [Object, Function],
-    required: false
+  threeDimensional: {
+    type: Boolean,
+    default: true
+  },
+  swipeDuration: {
+    type: [Number, String],
+    default: 1e3
   }
 };
-
 const pickerProps = {
   ...popupProps,
-  ...commonProps,
+  ...commonColumnProps,
   modelValue: {
     type: [String, Number, Boolean, Object, Array],
     default: ""
@@ -4636,7 +4639,7 @@ const _sfc_main$1K = create$1K({
   props: {
     ...popupProps
   },
-  emits: ["click", "click-close-icon", "open", "close", "opend", "closed", "update:visible", "click-overlay"],
+  emits: ["click", "click-close-icon", "open", "close", "opened", "closed", "update:visible", "click-overlay"],
   setup(props, { emit }) {
     const popupRef = ref();
     const state = reactive({
@@ -4701,7 +4704,7 @@ const _sfc_main$1K = create$1K({
       }
     };
     const onOpened = (e) => {
-      emit("opend", e);
+      emit("opened", e);
     };
     const onClosed = (e) => {
       emit("closed", e);
@@ -4765,7 +4768,7 @@ const _sfc_main$1K = create$1K({
     };
   }
 });
-const _hoisted_1$1d = { key: 1 };
+const _hoisted_1$1e = { key: 1 };
 function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_fox_overlay = resolveComponent("fox-overlay");
   const _component_fox_icon = resolveComponent("fox-icon");
@@ -4813,7 +4816,7 @@ function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _: 3
     }, 8, ["name", "onAfterEnter", "onAfterLeave"])
-  ], 8, ["to"])) : (openBlock(), createElementBlock("view", _hoisted_1$1d, [
+  ], 8, ["to"])) : (openBlock(), createElementBlock("view", _hoisted_1$1e, [
     _ctx.overlay ? (openBlock(), createBlock(_component_fox_overlay, {
       key: 0,
       visible: _ctx.visible,
@@ -4870,6 +4873,8 @@ function getDirection(x, y) {
 function useTouch$1() {
   const startX = ref(0);
   const startY = ref(0);
+  const startTime = ref(0);
+  const duration = ref(0);
   const moveX = ref(0);
   const moveY = ref(0);
   const deltaX = ref(0);
@@ -4885,11 +4890,13 @@ function useTouch$1() {
     offsetX.value = 0;
     offsetY.value = 0;
     direction.value = "";
+    startTime.value = 0;
   };
   const start = (event) => {
     reset();
     startX.value = event.touches[0].clientX;
     startY.value = event.touches[0].clientY;
+    startTime.value = Date.now();
   };
   const move = (event) => {
     const touch = event.touches[0];
@@ -4899,6 +4906,7 @@ function useTouch$1() {
     moveY.value = touch.clientY;
     offsetX.value = Math.abs(deltaX.value);
     offsetY.value = Math.abs(deltaY.value);
+    duration.value = Date.now() - startTime.value;
     if (!direction.value) {
       direction.value = getDirection(offsetX.value, offsetY.value);
     }
@@ -4909,6 +4917,8 @@ function useTouch$1() {
     reset,
     startX,
     startY,
+    startTime,
+    duration,
     moveX,
     moveY,
     deltaX,
@@ -4921,12 +4931,12 @@ function useTouch$1() {
   };
 }
 
-let gloabalItemHeight = 0;
+let globalItemHeight = 36;
 function getGlobalItemHeight() {
-  return gloabalItemHeight;
+  return globalItemHeight;
 }
 function setGlobalItemHeight(h) {
-  gloabalItemHeight = h;
+  globalItemHeight = h;
 }
 function getItemText$2(props, item) {
   if (typeof props.textName === "string" && props.textName.length > 0) {
@@ -4940,15 +4950,7 @@ function getItemValue$2(props, item) {
   }
   return item.value;
 }
-function getItemOptions$2(props, item, column, index) {
-  if (typeof props.itemOptions === "function") {
-    return props.itemOptions(item, column, index);
-  } else if (isObject(props.itemProps)) {
-    return props.itemOptions;
-  }
-  return null;
-}
-function getCoumnOptions(props, index) {
+function getColumnOptions(props, index) {
   if (typeof props.itemOptions === "function") {
     return props.columnOptions(index);
   } else {
@@ -5129,9 +5131,6 @@ const MOMENTUM_LIMIT_DISTANCE = 15;
 const MOMENTUM_LIMIT_TIME = 300;
 const DEFAULT_DURATION = 200;
 const { create: create$1J } = createComponent("picker-column");
-function range(num, min, max) {
-  return Math.min(Math.max(num, min), max);
-}
 function stopPropagation(event) {
   event.stopPropagation();
 }
@@ -5149,7 +5148,7 @@ const _sfc_main$1J = create$1J({
       type: Array,
       default: []
     },
-    column: {
+    columnIndex: {
       type: Number,
       required: true,
       default: 0
@@ -5164,39 +5163,66 @@ const _sfc_main$1J = create$1J({
       required: true,
       default: 35
     },
-    ...commonProps
+    ...commonColumnProps
   },
   emits: ["click", "change", "update:modelValue"],
   setup(props, { emit }) {
     const classes = computed(() => {
       return {
-        "fox-picker__content": true
+        "fox-picker__list": true
       };
     });
     const styles = computed(() => {
-      let height = toNumber(props.visibleItemCount) * +props.itemHeight;
+      const height = toNumber(props.visibleItemCount) * +props.itemHeight;
       return {
         height: `${height}px`
       };
     });
-    const wrapper = ref();
+    const contentClasses = computed(() => {
+      return {
+        "fox-picker__content": true,
+        "fox-picker__content-tile": !props.threeDimensional,
+        "fox-picker__content-roller": props.threeDimensional
+      };
+    });
+    const baseOffset = computed(() => {
+      return props.itemHeight * Math.floor(+props.visibleItemCount / 2);
+    });
+    const isHidden = (index) => {
+      if (index >= state.currIndex + 8 || index <= state.currIndex - 8) {
+        return true;
+      } else {
+        return false;
+      }
+    };
+    const touchRollerStyle = computed(() => {
+      return {
+        transition: `transform ${state.scrollTime}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,
+        transform: `rotate3d(1, 0, 0, ${state.deg})`,
+        top: `${baseOffset.value}px`
+      };
+    });
+    const setRollerStyle = (index) => {
+      return `transform: rotate3d(1, 0, 0, ${-state.rotation * index}deg) translate3d(0px, 0px, 104px)`;
+    };
+    const touchTileStyle = computed(() => {
+      return {
+        transition: `transform ${state.scrollTime}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,
+        transform: `translate3d(0, ${state.scrollDistance + baseOffset.value}px, 0)`
+      };
+    });
+    const roller = ref(null);
     const state = reactive({
-      offset: 0,
-      duration: 0,
+      currIndex: props.modelValue,
+      startDistance: 0,
+      scrollDistance: 0,
+      scrollTime: 0,
       moving: false,
-      startOffset: 0,
-      touchStartTime: 0,
-      momentumOffset: 0,
+      rotation: 20,
+      deg: 0,
       transitionEndTrigger: null
     });
-    watch([() => props.modelValue, () => props.itemHeight], ([val]) => {
-      setIndex(val);
-    });
     const source = toRef(props, "source");
-    const itemDisabled = (item, index) => {
-      let options = getItemOptions$2(props, item, props.column, index);
-      return options != null && options.disabled === true;
-    };
     const itemText = (item) => {
       return getItemText$2(props, item);
     };
@@ -5204,69 +5230,80 @@ const _sfc_main$1J = create$1J({
       return getItemValue$2(props, item);
     };
     const touch = useTouch$1();
-    const wrapperStyle = computed(() => ({
-      transform: `translate3d(0, ${state.offset + baseOffset()}px, 0)`,
-      transitionDuration: `${state.duration}ms`,
-      transitionProperty: state.duration ? "all" : "none"
-    }));
-    const getIndexByOffset = (offset) => {
-      return range(Math.round(-offset / +props.itemHeight), 0, props.source.length - 1);
-    };
-    const baseOffset = () => {
-      return +props.itemHeight * (+props.visibleItemCount - 1) / 2;
-    };
     const stopMomentum = () => {
-      state.moving = false;
-      state.duration = 0;
       if (state.transitionEndTrigger) {
         state.transitionEndTrigger();
         state.transitionEndTrigger = null;
       }
     };
-    const adjustIndex = (index) => {
-      index = range(index, 0, source.value.length);
-      for (let i = index; i < source.value.length; i++) {
-        if (!itemDisabled(source.value[i], i)) {
-          return i;
+    const setIndex = (index, emitChange = false, transition = false) => {
+      state.currIndex = index;
+      if (emitChange) {
+        const trigger = () => {
+          state.moving = false;
+          emit("update:modelValue", index);
+          emit("change", index);
+        };
+        if (transition) {
+          state.transitionEndTrigger = trigger;
+        } else {
+          trigger();
         }
       }
-      for (let i = index - 1; i >= 0; i--) {
-        if (!itemDisabled(source.value[i], i)) {
-          return i;
+    };
+    const setMove = (move, type, time) => {
+      let updateMove = move + state.startDistance;
+      if (type === "end") {
+        const min = -(source.value.length - 1) * props.itemHeight;
+        if (updateMove < min) {
+          updateMove = min;
+          if (!time || time <= 0) {
+            time = props.swipeDuration;
+          }
+        }
+        if (updateMove > 0) {
+          updateMove = 0;
+          if (!time || time <= 0) {
+            time = props.swipeDuration;
+          }
+        }
+        let updateIndex = Math.abs(Math.round(-updateMove / props.itemHeight));
+        const endMove = -updateIndex * props.itemHeight;
+        const deg = `${(updateIndex + 1) * state.rotation}deg`;
+        const transition = time ? time > 0 : false;
+        setIndex(updateIndex, true, transition);
+        setTransform(endMove, type, time, deg);
+      } else {
+        let deg = (-updateMove / props.itemHeight + 1) * state.rotation;
+        const maxDeg = (source.value.length + 1) * state.rotation;
+        const minDeg = 0;
+        deg = Math.min(Math.max(deg, minDeg), maxDeg);
+        if (props.threeDimensional && (deg < minDeg || deg > maxDeg)) {
+          return;
         }
+        setTransform(updateMove, null, void 0, `${deg}deg`);
       }
     };
-    const setIndex = (index, emitChange = false) => {
-      index = adjustIndex(index) ?? 0;
-      const offset = -index * +props.itemHeight;
-      const trigger = () => {
-        if (emitChange) {
-          emit("update:modelValue", index);
-          emit("change", index);
-        }
-      };
-      if (state.moving && offset !== state.offset) {
-        state.transitionEndTrigger = trigger;
+    const setTransform = (translateY = 0, type, time = DEFAULT_DURATION, deg) => {
+      if (type === "end") {
+        state.scrollTime = time;
       } else {
-        trigger();
+        state.scrollTime = 0;
       }
-      state.offset = offset;
+      state.deg = deg;
+      state.scrollDistance = translateY;
     };
     const momentum = (distance, duration) => {
       const speed = Math.abs(distance / duration);
-      distance = state.offset + speed / 0.03 * (distance < 0 ? -1 : 1);
-      const index = getIndexByOffset(distance);
-      setIndex(index, true);
+      distance = speed / 3e-3 * (distance < 0 ? -1 : 1);
+      return distance;
     };
     const onTouchStart = (event) => {
-      if (props.readonly) {
+      if (props.readonly || state.moving) {
         return;
       }
+      state.startDistance = state.scrollDistance;
       touch.start(event);
-      state.startOffset = state.offset;
-      state.duration = 0;
-      state.touchStartTime = Date.now();
-      state.momentumOffset = state.startOffset;
       state.transitionEndTrigger = null;
     };
     const onTouchMove = (event) => {
@@ -5279,55 +5316,61 @@ const _sfc_main$1J = create$1J({
         state.moving = true;
         preventDefault(event, true);
       }
-      const moveOffset = state.startOffset + touch.deltaY.value;
-      if (moveOffset > props.itemHeight) {
-        state.offset = props.itemHeight;
-      } else {
-        state.offset = state.startOffset + touch.deltaY.value;
-      }
-      const now = Date.now();
-      if (now - state.touchStartTime > MOMENTUM_LIMIT_TIME) {
-        state.touchStartTime = now;
-        state.momentumOffset = state.offset;
-      }
+      setMove(touch.deltaY.value, "", 0);
     };
     const onTouchEnd = () => {
-      const index = getIndexByOffset(state.offset);
-      state.duration = DEFAULT_DURATION;
-      setIndex(index, true);
-      const distance = state.offset - state.momentumOffset;
-      const duration = Date.now() - state.touchStartTime;
+      if (props.readonly) {
+        return;
+      }
+      const distance = touch.deltaY.value;
+      const duration = touch.duration.value;
       const allowMomentum = duration < MOMENTUM_LIMIT_TIME && Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE;
       if (allowMomentum) {
-        momentum(distance, duration);
-        return;
+        const moveDistance = momentum(distance, duration);
+        setMove(moveDistance, "end", props.swipeDuration);
+      } else {
+        setMove(distance, "end", 0);
       }
     };
-    onMounted(() => {
-      let h = +props.itemHeight;
-      if (h <= 0) {
-        return;
+    watch(
+      () => props.modelValue,
+      (val) => {
+        if (state.currIndex !== val) {
+          state.currIndex = val;
+          const moveDistance = -val * props.itemHeight;
+          setMove(moveDistance);
+        }
       }
-      setIndex(props.modelValue ?? 0);
+    );
+    onMounted(() => {
+      const moveDistance = -props.modelValue * props.itemHeight;
+      setMove(moveDistance);
     });
     return {
       classes,
       styles,
+      contentClasses,
       source,
-      itemDisabled,
       itemText,
       itemValue,
       ...toRefs(state),
-      wrapper,
+      roller,
       getItemText: getItemText$2,
       onTouchStart,
       onTouchMove,
       onTouchEnd,
-      wrapperStyle,
+      isHidden,
+      setRollerStyle,
+      touchRollerStyle,
+      touchTileStyle,
       stopMomentum
     };
   }
 });
+const _hoisted_1$1d = {
+  key: 1,
+  class: "fox-picker__item-tile"
+};
 function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("view", {
     class: normalizeClass(_ctx.classes),
@@ -5339,19 +5382,22 @@ function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
     onTransitionend: _cache[4] || (_cache[4] = (...args) => _ctx.stopMomentum && _ctx.stopMomentum(...args))
   }, [
     createElementVNode("view", {
-      ref: "wrapper",
-      class: "fox-picker__wrapper",
-      style: normalizeStyle(_ctx.wrapperStyle)
+      ref: "roller",
+      class: normalizeClass(_ctx.contentClasses),
+      style: normalizeStyle(_ctx.threeDimensional ? _ctx.touchRollerStyle : _ctx.touchTileStyle)
     }, [
       (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.source, (item, i) => {
-        return openBlock(), createElementBlock(Fragment, null, [
-          !_ctx.itemDisabled(item, i) ? (openBlock(), createElementBlock("view", {
-            key: i,
-            class: "fox-picker__item fox-picker__item-ref"
-          }, toDisplayString(_ctx.itemText(item, i)), 1)) : createCommentVNode("", true)
+        return openBlock(), createElementBlock(Fragment, {
+          key: `${_ctx.columnIndex}_${i}`
+        }, [
+          _ctx.threeDimensional ? (openBlock(), createElementBlock("view", {
+            key: 0,
+            class: normalizeClass(["fox-picker__item", { "fox-picker__item-hidden": _ctx.isHidden(i + 1) }]),
+            style: normalizeStyle(_ctx.setRollerStyle(i + 1))
+          }, toDisplayString(_ctx.itemText(item)), 7)) : (openBlock(), createElementBlock("view", _hoisted_1$1d, toDisplayString(_ctx.itemText(item)), 1))
         ], 64);
-      }), 256))
-    ], 4)
+      }), 128))
+    ], 6)
   ], 38);
 }
 var column = /* @__PURE__ */ _export_sfc(_sfc_main$1J, [["render", _sfc_render$1u]]);
@@ -5369,19 +5415,17 @@ const _sfc_main$1I = create$1I({
   setup(props, { emit }) {
     const { toLocaleRefs, t } = useFoxI18n(scope$s);
     const localeProps = toLocaleRefs(props, ["title", "cancelText", "clearText", "confirmText"]);
-    const cloumnsRef = ref();
+    const pickerLineRef = ref(null);
     const itemHeight = ref(getGlobalItemHeight());
     watch(
       () => props.visible,
       (visible) => {
         if (visible && itemHeight.value <= 0) {
           setTimeout(() => {
-            if (cloumnsRef.value) {
-              const node = cloumnsRef.value.querySelector(".fox-picker__item-ref");
-              if (node) {
-                itemHeight.value = node.getBoundingClientRect().height;
-                setGlobalItemHeight(itemHeight.value);
-              }
+            if (pickerLineRef.value) {
+              const rect = useRect(pickerLineRef.value);
+              itemHeight.value = rect.height;
+              setGlobalItemHeight(itemHeight.value);
             }
           }, 50);
         }
@@ -5461,7 +5505,7 @@ const _sfc_main$1I = create$1I({
       }
     );
     const getDefaultIndex = (column2) => {
-      let options = getCoumnOptions(props, column2);
+      let options = getColumnOptions(props, column2);
       if (isObject(options)) {
         return options.getDefautIndex ?? 0;
       }
@@ -5471,7 +5515,7 @@ const _sfc_main$1I = create$1I({
       if (props.readonly === true) {
         return true;
       }
-      let options = getCoumnOptions(props, column2);
+      let options = getColumnOptions(props, column2);
       if (isObject(options)) {
         return options.readonly ?? false;
       }
@@ -5613,7 +5657,7 @@ const _sfc_main$1I = create$1I({
     };
     return {
       ...localeProps,
-      cloumnsRef,
+      pickerLineRef,
       classes,
       popupStyles,
       columns,
@@ -5632,10 +5676,8 @@ const _sfc_main$1I = create$1I({
   }
 });
 const _hoisted_1$1c = { class: "fox-picker__bar" };
-const _hoisted_2$Z = {
-  class: "fox-picker__column",
-  ref: "cloumnsRef"
-};
+const _hoisted_2$Z = { class: "fox-picker__title" };
+const _hoisted_3$N = { class: "fox-picker__column" };
 function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_fox_picker_column = resolveComponent("fox-picker-column");
   const _component_fox_popup = resolveComponent("fox-popup");
@@ -5656,22 +5698,23 @@ function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
       default: withCtx(() => [
         createElementVNode("view", _hoisted_1$1c, [
           createElementVNode("view", {
-            class: "fox-picker__left fox-picker__button",
+            class: "fox-picker__cancel fox-picker__left fox-picker__button",
             onClick: _cache[0] || (_cache[0] = (...args) => _ctx.close && _ctx.close(...args))
           }, toDisplayString(_ctx.cancelText), 1),
-          createElementVNode("view", null, toDisplayString(_ctx.title), 1),
+          createElementVNode("view", _hoisted_2$Z, toDisplayString(_ctx.title), 1),
           createElementVNode("view", {
-            class: "fox-picker__button",
+            class: "fox-picker__confirm fox-picker__right fox-picker__button",
             onClick: _cache[1] || (_cache[1] = ($event) => _ctx.confirm())
           }, toDisplayString(_ctx.confirmText), 1)
         ]),
         renderSlot(_ctx.$slots, "top"),
-        createElementVNode("view", _hoisted_2$Z, [
+        createElementVNode("view", _hoisted_3$N, [
           createElementVNode("view", {
             class: "fox-picker__mask",
             style: normalizeStyle({ backgroundSize: `100% ${_ctx.top}px` })
           }, null, 4),
           createElementVNode("view", {
+            ref: "pickerLineRef",
             class: "fox-picker__hairline",
             style: normalizeStyle({ top: ` ${_ctx.top}px` })
           }, null, 4),
@@ -5683,18 +5726,19 @@ function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
               createVNode(_component_fox_picker_column, {
                 source: item,
                 readonly: _ctx.isReadonly(columnIndex),
-                column: columnIndex,
+                "column-index": columnIndex,
                 modelValue: _ctx.getIndex(columnIndex),
                 "onUpdate:modelValue": ($event) => _ctx.change(columnIndex, $event),
                 "visible-item-count": _ctx.visibleItemCount,
+                "three-dimensional": _ctx.threeDimensional,
+                "swipe-duration": _ctx.swipeDuration,
                 "item-height": _ctx.itemHeight,
-                "item-options": _ctx.itemOptions,
                 textName: _ctx.textName,
                 valueName: _ctx.valueName
-              }, null, 8, ["source", "readonly", "column", "modelValue", "onUpdate:modelValue", "visible-item-count", "item-height", "item-options", "textName", "valueName"])
+              }, null, 8, ["source", "readonly", "column-index", "modelValue", "onUpdate:modelValue", "visible-item-count", "three-dimensional", "swipe-duration", "item-height", "textName", "valueName"])
             ]);
           }), 128))
-        ], 512),
+        ]),
         renderSlot(_ctx.$slots, "default")
       ]),
       _: 3
@@ -7162,6 +7206,18 @@ let datepickerProps = {
     default: () => new Date(currentYear + 10, 11, 31),
     validator: isDate
   },
+  visibleItemCount: {
+    type: [Number, String],
+    default: 7
+  },
+  threeDimensional: {
+    type: Boolean,
+    default: true
+  },
+  swipeDuration: {
+    type: [Number, String],
+    default: 1e3
+  },
   isWrapTeleport: {
     type: Boolean,
     default: true
@@ -7440,6 +7496,9 @@ function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
     title: _ctx.title,
     onConfirm: _ctx.onConfirm,
     onClose: _ctx.onClose,
+    "visible-item-count": _ctx.visibleItemCount,
+    "three-dimensional": _ctx.threeDimensional,
+    "swipe-duration": _ctx.swipeDuration,
     isWrapTeleport: _ctx.isWrapTeleport
   }, {
     top: withCtx(() => [
@@ -7449,7 +7508,7 @@ function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
       renderSlot(_ctx.$slots, "default")
     ]),
     _: 3
-  }, 8, ["visible", "model-value", "source", "confirm-text", "cancel-text", "title", "onConfirm", "onClose", "isWrapTeleport"]);
+  }, 8, ["visible", "model-value", "source", "confirm-text", "cancel-text", "title", "onConfirm", "onClose", "visible-item-count", "three-dimensional", "swipe-duration", "isWrapTeleport"]);
 }
 var DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["render", _sfc_render$1q]]);
 
@@ -7556,9 +7615,9 @@ const _sfc_main$1C = create$1C({
     const onChange = (val) => {
       modelValue.value = val;
       if (props.valueFormat) {
-        let foramtVal = formatValue$2(props, val, props.valueFormat);
-        emitEvent("update:modelValue", foramtVal, {});
-        emitEvent("change", foramtVal, {});
+        let formatVal = formatValue$2(props, val, props.valueFormat);
+        emitEvent("update:modelValue", formatVal, {});
+        emitEvent("change", formatVal, {});
       } else {
         emitEvent("update:modelValue", val, {});
         emitEvent("change", val, {});
@@ -11984,7 +12043,7 @@ const _sfc_main$1d = create$1d({
     };
   }
 });
-const _hoisted_1$$ = { class: "fox-menu-item__content" };
+const _hoisted_1$$ = { class: "fox-menu-item__content fox-menu-item__overflow" };
 const _hoisted_2$Q = ["onClick"];
 function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_fox_icon = resolveComponent("fox-icon");
@@ -13583,6 +13642,10 @@ const _sfc_main$11 = create$11({
       type: Boolean,
       default: true
     },
+    clearIcon: {
+      type: String,
+      default: "circle-close"
+    },
     background: {
       type: String,
       default: ""
@@ -13591,6 +13654,11 @@ const _sfc_main$11 = create$11({
       type: String,
       default: ""
     },
+    focusStyle: {
+      type: Object,
+      default: () => {
+      }
+    },
     autofocus: {
       type: Boolean,
       default: false
@@ -13644,10 +13712,12 @@ const _sfc_main$11 = create$11({
       emit("update:modelValue", val, event);
       emit("change", val, event);
     };
+    const focusCss = ref({});
     const valueFocus = (event) => {
       const input = event.target;
       let value = input.value;
       state.active = true;
+      focusCss.value = props.focusStyle;
       emit("focus", value, event);
     };
     const valueBlur = (event) => {
@@ -13659,6 +13729,7 @@ const _sfc_main$11 = create$11({
       if (props.maxLength && value.length > Number(props.maxLength)) {
         value = value.slice(0, Number(props.maxLength));
       }
+      focusCss.value = {};
       emit("blur", value, event);
     };
     const handleClear = (event) => {
@@ -13700,6 +13771,7 @@ const _sfc_main$11 = create$11({
       handleSubmit,
       searchbarStyle,
       inputSearchbarStyle,
+      focusCss,
       clickInput,
       leftIconClick,
       rightIconClick,
@@ -13733,7 +13805,7 @@ function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
     ])) : createCommentVNode("", true),
     createElementVNode("view", {
       class: "fox-searchbar__search-input",
-      style: normalizeStyle(_ctx.inputSearchbarStyle)
+      style: normalizeStyle({ ..._ctx.inputSearchbarStyle, ..._ctx.focusCss })
     }, [
       _ctx.$slots.leftin ? (openBlock(), createElementBlock("view", {
         key: 0,
@@ -13769,10 +13841,10 @@ function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
           class: "fox-searchbar__input-clear"
         }, [
           createVNode(_component_fox_icon, {
-            name: "circle-close",
+            name: _ctx.clearIcon,
             size: "12",
             color: "#555"
-          })
+          }, null, 8, ["name"])
         ], 512)), [
           [vShow, _ctx.modelValue.length > 0]
         ]) : createCommentVNode("", true)
@@ -15782,9 +15854,10 @@ const _sfc_main$U = create$U({
     });
     onDeactivated(() => {
       state.keepAlive = true;
-      myDrag.removeEventListener("touchstart", touchStart);
-      myDrag.removeEventListener("touchmove", touchMove);
-      myDrag.removeEventListener("touchend", touchEnd);
+      const anyDrag = myDrag;
+      anyDrag.value.removeEventListener("touchstart", touchStart);
+      anyDrag.value.removeEventListener("touchmove", touchMove);
+      anyDrag.value.removeEventListener("touchend", touchEnd);
     });
     return {
       classes,