vant 3.6.15 → 3.6.16

package/lib/picker/PickerColumn.js

@@ -22,29 +22,39 @@ __export(stdin_exports, {
 });
 module.exports = __toCommonJS(stdin_exports);
 var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_deep_clone = require("../utils/deep-clone");
 var import_utils = require("../utils");
-var import_utils2 = require("./utils");
 var import_use = require("@vant/use");
 var import_use_touch = require("../composables/use-touch");
 var import_use_expose = require("../composables/use-expose");
 const DEFAULT_DURATION = 200;
-const MOMENTUM_TIME = 300;
-const MOMENTUM_DISTANCE = 15;
+const MOMENTUM_LIMIT_TIME = 300;
+const MOMENTUM_LIMIT_DISTANCE = 15;
 const [name, bem] = (0, import_utils.createNamespace)("picker-column");
+function getElementTranslateY(element) {
+  const {
+    transform
+  } = window.getComputedStyle(element);
+  const translateY = transform.slice(7, transform.length - 1).split(", ")[5];
+  return Number(translateY);
+}
 const PICKER_KEY = Symbol(name);
-var stdin_default = (0, import_vue.defineComponent)({
+const isOptionDisabled = (option) => (0, import_utils.isObject)(option) && option.disabled;
+var stdin_default = (0, import_vue2.defineComponent)({
   name,
   props: {
-    value: import_utils.numericProp,
-    fields: (0, import_utils.makeRequiredProp)(Object),
-    options: (0, import_utils.makeArrayProp)(),
+    textKey: (0, import_utils.makeRequiredProp)(String),
     readonly: Boolean,
     allowHtml: Boolean,
-    optionHeight: (0, import_utils.makeRequiredProp)(Number),
+    className: import_utils.unknownProp,
+    itemHeight: (0, import_utils.makeRequiredProp)(Number),
+    defaultIndex: (0, import_utils.makeNumberProp)(0),
     swipeDuration: (0, import_utils.makeRequiredProp)(import_utils.numericProp),
-    visibleOptionNum: (0, import_utils.makeRequiredProp)(import_utils.numericProp)
+    initialOptions: (0, import_utils.makeArrayProp)(),
+    visibleItemCount: (0, import_utils.makeRequiredProp)(import_utils.numericProp)
   },
-  emits: ["change", "clickOption", "scrollInto"],
+  emits: ["change"],
   setup(props, {
     emit,
     slots
@@ -54,76 +64,101 @@ var stdin_default = (0, import_vue.defineComponent)({
     let touchStartTime;
     let momentumOffset;
     let transitionEndTrigger;
-    const root = (0, import_vue.ref)();
-    const wrapper = (0, import_vue.ref)();
-    const currentOffset = (0, import_vue.ref)(0);
-    const currentDuration = (0, import_vue.ref)(0);
+    const root = (0, import_vue2.ref)();
+    const wrapper = (0, import_vue2.ref)();
+    const state = (0, import_vue2.reactive)({
+      index: props.defaultIndex,
+      offset: 0,
+      duration: 0,
+      options: (0, import_deep_clone.deepClone)(props.initialOptions)
+    });
     const touch = (0, import_use_touch.useTouch)();
-    const count = () => props.options.length;
-    const baseOffset = () => props.optionHeight * (+props.visibleOptionNum - 1) / 2;
-    const updateValueByIndex = (index) => {
-      let enabledIndex = (0, import_utils2.findIndexOfEnabledOption)(props.options, index);
-      const offset = -enabledIndex * props.optionHeight;
+    const count = () => state.options.length;
+    const baseOffset = () => props.itemHeight * (+props.visibleItemCount - 1) / 2;
+    const adjustIndex = (index) => {
+      index = (0, import_utils.clamp)(index, 0, count());
+      for (let i = index; i < count(); i++) {
+        if (!isOptionDisabled(state.options[i]))
+          return i;
+      }
+      for (let i = index - 1; i >= 0; i--) {
+        if (!isOptionDisabled(state.options[i]))
+          return i;
+      }
+    };
+    const setIndex = (index, emitChange) => {
+      index = adjustIndex(index) || 0;
+      const offset = -index * props.itemHeight;
       const trigger = () => {
-        if (enabledIndex > count() - 1) {
-          enabledIndex = (0, import_utils2.findIndexOfEnabledOption)(props.options, index);
-        }
-        const value = props.options[enabledIndex][props.fields.value];
-        if (value !== props.value) {
-          emit("change", value);
+        if (index !== state.index) {
+          state.index = index;
+          if (emitChange) {
+            emit("change", index);
+          }
         }
       };
-      if (moving && offset !== currentOffset.value) {
+      if (moving && offset !== state.offset) {
         transitionEndTrigger = trigger;
       } else {
         trigger();
       }
-      currentOffset.value = offset;
+      state.offset = offset;
+    };
+    const setOptions = (options) => {
+      if (JSON.stringify(options) !== JSON.stringify(state.options)) {
+        state.options = (0, import_deep_clone.deepClone)(options);
+        setIndex(props.defaultIndex);
+      }
     };
-    const isReadonly = () => props.readonly || !props.options.length;
-    const onClickOption = (index) => {
-      if (moving || isReadonly()) {
+    const onClickItem = (index) => {
+      if (moving || props.readonly) {
         return;
       }
       transitionEndTrigger = null;
-      currentDuration.value = DEFAULT_DURATION;
-      updateValueByIndex(index);
-      emit("clickOption", props.options[index]);
+      state.duration = DEFAULT_DURATION;
+      setIndex(index, true);
     };
-    const getIndexByOffset = (offset) => (0, import_utils.clamp)(Math.round(-offset / props.optionHeight), 0, count() - 1);
-    const currentIndex = (0, import_vue.computed)(() => getIndexByOffset(currentOffset.value));
+    const getOptionText = (option) => {
+      if ((0, import_utils.isObject)(option) && props.textKey in option) {
+        return option[props.textKey];
+      }
+      return option;
+    };
+    const getIndexByOffset = (offset) => (0, import_utils.clamp)(Math.round(-offset / props.itemHeight), 0, count() - 1);
     const momentum = (distance, duration) => {
       const speed = Math.abs(distance / duration);
-      distance = currentOffset.value + speed / 3e-3 * (distance < 0 ? -1 : 1);
+      distance = state.offset + speed / 3e-3 * (distance < 0 ? -1 : 1);
       const index = getIndexByOffset(distance);
-      currentDuration.value = +props.swipeDuration;
-      updateValueByIndex(index);
+      state.duration = +props.swipeDuration;
+      setIndex(index, true);
     };
     const stopMomentum = () => {
       moving = false;
-      currentDuration.value = 0;
+      state.duration = 0;
       if (transitionEndTrigger) {
         transitionEndTrigger();
         transitionEndTrigger = null;
       }
     };
     const onTouchStart = (event) => {
-      if (isReadonly()) {
+      if (props.readonly) {
         return;
       }
       touch.start(event);
       if (moving) {
-        const translateY = (0, import_utils2.getElementTranslateY)(wrapper.value);
-        currentOffset.value = Math.min(0, translateY - baseOffset());
+        const translateY = getElementTranslateY(wrapper.value);
+        state.offset = Math.min(0, translateY - baseOffset());
+        startOffset = state.offset;
+      } else {
+        startOffset = state.offset;
       }
-      currentDuration.value = 0;
-      startOffset = currentOffset.value;
+      state.duration = 0;
       touchStartTime = Date.now();
       momentumOffset = startOffset;
       transitionEndTrigger = null;
     };
     const onTouchMove = (event) => {
-      if (isReadonly()) {
+      if (props.readonly) {
         return;
       }
       touch.move(event);
@@ -131,89 +166,95 @@ var stdin_default = (0, import_vue.defineComponent)({
         moving = true;
         (0, import_utils.preventDefault)(event, true);
       }
-      const newOffset = (0, import_utils.clamp)(startOffset + touch.deltaY.value, -(count() * props.optionHeight), props.optionHeight);
-      const newIndex = getIndexByOffset(newOffset);
-      if (newIndex !== currentIndex.value) {
-        emit("scrollInto", props.options[newIndex]);
-      }
-      currentOffset.value = newOffset;
+      state.offset = (0, import_utils.clamp)(startOffset + touch.deltaY.value, -(count() * props.itemHeight), props.itemHeight);
       const now = Date.now();
-      if (now - touchStartTime > MOMENTUM_TIME) {
+      if (now - touchStartTime > MOMENTUM_LIMIT_TIME) {
         touchStartTime = now;
-        momentumOffset = newOffset;
+        momentumOffset = state.offset;
       }
     };
     const onTouchEnd = () => {
-      if (isReadonly()) {
+      if (props.readonly) {
         return;
       }
-      const distance = currentOffset.value - momentumOffset;
+      const distance = state.offset - momentumOffset;
       const duration = Date.now() - touchStartTime;
-      const startMomentum = duration < MOMENTUM_TIME && Math.abs(distance) > MOMENTUM_DISTANCE;
-      if (startMomentum) {
+      const allowMomentum = duration < MOMENTUM_LIMIT_TIME && Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE;
+      if (allowMomentum) {
         momentum(distance, duration);
         return;
       }
-      const index = getIndexByOffset(currentOffset.value);
-      currentDuration.value = DEFAULT_DURATION;
-      updateValueByIndex(index);
+      const index = getIndexByOffset(state.offset);
+      state.duration = DEFAULT_DURATION;
+      setIndex(index, true);
       setTimeout(() => {
         moving = false;
       }, 0);
     };
     const renderOptions = () => {
       const optionStyle = {
-        height: `${props.optionHeight}px`
+        height: `${props.itemHeight}px`
       };
-      return props.options.map((option, index) => {
-        const text = option[props.fields.text];
-        const {
-          disabled
-        } = option;
-        const value = option[props.fields.value];
+      return state.options.map((option, index) => {
+        const text = getOptionText(option);
+        const disabled = isOptionDisabled(option);
         const data = {
           role: "button",
           style: optionStyle,
           tabindex: disabled ? -1 : 0,
-          class: [bem("item", {
+          class: bem("item", {
             disabled,
-            selected: value === props.value
-          }), option.className],
-          onClick: () => onClickOption(index)
+            selected: index === state.index
+          }),
+          onClick: () => onClickItem(index)
         };
         const childData = {
           class: "van-ellipsis",
           [props.allowHtml ? "innerHTML" : "textContent"]: text
         };
-        return (0, import_vue.createVNode)("li", data, [slots.option ? slots.option(option, index) : (0, import_vue.createVNode)("div", childData, null)]);
+        return (0, import_vue.createVNode)("li", data, [slots.option ? slots.option(option) : (0, import_vue.createVNode)("div", childData, null)]);
       });
     };
+    const setValue = (value) => {
+      const {
+        options
+      } = state;
+      for (let i = 0; i < options.length; i++) {
+        if (getOptionText(options[i]) === value) {
+          return setIndex(i);
+        }
+      }
+    };
+    const getValue = () => state.options[state.index];
+    const hasOptions = () => state.options.length;
+    setIndex(state.index);
     (0, import_use.useParent)(PICKER_KEY);
     (0, import_use_expose.useExpose)({
+      state,
+      setIndex,
+      getValue,
+      setValue,
+      setOptions,
+      hasOptions,
       stopMomentum
     });
-    (0, import_vue.watchEffect)(() => {
-      const index = moving ? Math.floor(-currentOffset.value / props.optionHeight) : props.options.findIndex((option) => option[props.fields.value] === props.value);
-      const enabledIndex = (0, import_utils2.findIndexOfEnabledOption)(props.options, index);
-      const offset = -enabledIndex * props.optionHeight;
-      if (moving && enabledIndex < index) stopMomentum();
-      currentOffset.value = offset;
-    });
+    (0, import_vue2.watch)(() => props.initialOptions, setOptions);
+    (0, import_vue2.watch)(() => props.defaultIndex, (value) => setIndex(value));
     (0, import_use.useEventListener)("touchmove", onTouchMove, {
       target: root
     });
     return () => (0, import_vue.createVNode)("div", {
       "ref": root,
-      "class": bem(),
+      "class": [bem(), props.className],
       "onTouchstartPassive": onTouchStart,
       "onTouchend": onTouchEnd,
       "onTouchcancel": onTouchEnd
     }, [(0, import_vue.createVNode)("ul", {
       "ref": wrapper,
       "style": {
-        transform: `translate3d(0, ${currentOffset.value + baseOffset()}px, 0)`,
-        transitionDuration: `${currentDuration.value}ms`,
-        transitionProperty: currentDuration.value ? "all" : "none"
+        transform: `translate3d(0, ${state.offset + baseOffset()}px, 0)`,
+        transitionDuration: `${state.duration}ms`,
+        transitionProperty: state.duration ? "all" : "none"
       },
       "class": bem("wrapper"),
       "onTransitionend": stopMomentum

package/lib/picker/index.css

@@ -1 +1 @@
-:root,:host{--van-picker-background: var(--van-background-2);--van-picker-toolbar-height: 44px;--van-picker-title-font-size: var(--van-font-size-lg);--van-picker-title-line-height: var(--van-line-height-md);--van-picker-action-padding: 0 var(--van-padding-md);--van-picker-action-font-size: var(--van-font-size-md);--van-picker-confirm-action-color: var(--van-primary-color);--van-picker-cancel-action-color: var(--van-text-color-2);--van-picker-option-font-size: var(--van-font-size-lg);--van-picker-option-padding: 0 var(--van-padding-base);--van-picker-option-text-color: var(--van-text-color);--van-picker-option-disabled-opacity: .3;--van-picker-loading-icon-color: var(--van-primary-color);--van-picker-loading-mask-color: rgba(255, 255, 255, .9);--van-picker-mask-color: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)), linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4))}.van-theme-dark{--van-picker-loading-mask-color: rgba(0, 0, 0, .6);--van-picker-mask-color: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1)), linear-gradient(0deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1))}.van-picker{position:relative;background:var(--van-picker-background);-webkit-user-select:none;user-select:none}.van-picker__toolbar{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--van-picker-toolbar-height)}.van-picker__cancel,.van-picker__confirm{height:100%;padding:var(--van-picker-action-padding);font-size:var(--van-picker-action-font-size);background-color:transparent;border:none}.van-picker__confirm{color:var(--van-picker-confirm-action-color)}.van-picker__cancel{color:var(--van-picker-cancel-action-color)}.van-picker__title{position:absolute;left:50%;color:var(--van-text-color);max-width:50%;font-weight:var(--van-font-bold);font-size:var(--van-picker-title-font-size);line-height:var(--van-picker-title-line-height);text-align:center;transform:translate(-50%)}.van-picker__columns{position:relative;display:flex;cursor:-webkit-grab;cursor:grab}.van-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:center;justify-content:center;color:var(--van-picker-loading-icon-color);background:var(--van-picker-loading-mask-color)}.van-picker__frame{position:absolute;top:50%;right:var(--van-padding-md);left:var(--van-padding-md);z-index:2;transform:translateY(-50%);pointer-events:none}.van-picker__mask{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-image:var(--van-picker-mask-color);background-repeat:no-repeat;background-position:top,bottom;transform:translateZ(0);pointer-events:none}.van-picker-column{flex:1;overflow:hidden;font-size:var(--van-picker-option-font-size)}.van-picker-column__wrapper{transition-timing-function:cubic-bezier(.23,1,.68,1)}.van-picker-column__item{display:flex;align-items:center;justify-content:center;padding:var(--van-picker-option-padding);color:var(--van-picker-option-text-color)}.van-picker-column__item--disabled{cursor:not-allowed;opacity:var(--van-picker-option-disabled-opacity)}
+:root{--van-picker-background-color: var(--van-background-color-light);--van-picker-toolbar-height: 44px;--van-picker-title-font-size: var(--van-font-size-lg);--van-picker-title-line-height: var(--van-line-height-md);--van-picker-action-padding: 0 var(--van-padding-md);--van-picker-action-font-size: var(--van-font-size-md);--van-picker-confirm-action-color: var(--van-text-link-color);--van-picker-cancel-action-color: var(--van-text-color-2);--van-picker-option-font-size: var(--van-font-size-lg);--van-picker-option-padding: 0 var(--van-padding-base);--van-picker-option-text-color: var(--van-text-color);--van-picker-option-disabled-opacity: .3;--van-picker-loading-icon-color: var(--van-primary-color);--van-picker-loading-mask-color: rgba(255, 255, 255, .9);--van-picker-mask-color: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)), linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4))}.van-picker{position:relative;background:var(--van-picker-background-color);-webkit-user-select:none;user-select:none}.van-picker__toolbar{display:flex;align-items:center;justify-content:space-between;height:var(--van-picker-toolbar-height)}.van-picker__cancel,.van-picker__confirm{height:100%;padding:var(--van-picker-action-padding);font-size:var(--van-picker-action-font-size);background-color:transparent;border:none}.van-picker__confirm{color:var(--van-picker-confirm-action-color)}.van-picker__cancel{color:var(--van-picker-cancel-action-color)}.van-picker__title{max-width:50%;font-weight:var(--van-font-weight-bold);font-size:var(--van-picker-title-font-size);line-height:var(--van-picker-title-line-height);text-align:center}.van-picker__columns{position:relative;display:flex;cursor:-webkit-grab;cursor:grab}.van-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:center;justify-content:center;color:var(--van-picker-loading-icon-color);background:var(--van-picker-loading-mask-color)}.van-picker__frame{position:absolute;top:50%;right:var(--van-padding-md);left:var(--van-padding-md);z-index:2;transform:translateY(-50%);pointer-events:none}.van-picker__mask{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-image:var(--van-picker-mask-color);background-repeat:no-repeat;background-position:top,bottom;transform:translateZ(0);pointer-events:none}.van-picker-column{flex:1;overflow:hidden;font-size:var(--van-picker-option-font-size)}.van-picker-column__wrapper{transition-timing-function:cubic-bezier(.23,1,.68,1)}.van-picker-column__item{display:flex;align-items:center;justify-content:center;padding:var(--van-picker-option-padding);color:var(--van-picker-option-text-color)}.van-picker-column__item--disabled{cursor:not-allowed;opacity:var(--van-picker-option-disabled-opacity)}

package/lib/picker/index.d.ts

@@ -1,9 +1,10 @@
 import { PickerProps } from './Picker';
-export declare const Picker: import("../utils").WithInstall<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+export declare const Picker: import("../utils").WithInstall<import("vue").DefineComponent<{
+    title: StringConstructor;
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    optionHeight: {
+    itemHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -15,33 +16,33 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleOptionNum: {
+    visibleItemCount: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-} & {
-    title: StringConstructor;
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
     columns: {
-        type: import("vue").PropType<T[]>;
+        type: import("vue").PropType<(import("./types").PickerOption | import("./types").PickerColumn)[]>;
         default: () => never[];
     };
-    modelValue: {
-        type: import("vue").PropType<T[]>;
-        default: () => never[];
+    valueKey: StringConstructor;
+    defaultIndex: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
     };
     toolbarPosition: {
-        type: import("vue").PropType<T_1>;
+        type: import("vue").PropType<import("./types").PickerToolbarPosition>;
         default: import("./types").PickerToolbarPosition;
     };
     columnsFieldNames: import("vue").PropType<import("./types").PickerFieldNames>;
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "cancel" | "change" | "confirm" | "clickOption" | "scrollInto")[], "update:modelValue" | "cancel" | "change" | "confirm" | "clickOption" | "scrollInto", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "cancel" | "confirm")[], "change" | "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    title: StringConstructor;
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    optionHeight: {
+    itemHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -53,51 +54,46 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleOptionNum: {
+    visibleItemCount: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-} & {
-    title: StringConstructor;
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
     columns: {
-        type: import("vue").PropType<T[]>;
+        type: import("vue").PropType<(import("./types").PickerOption | import("./types").PickerColumn)[]>;
         default: () => never[];
     };
-    modelValue: {
-        type: import("vue").PropType<T[]>;
-        default: () => never[];
+    valueKey: StringConstructor;
+    defaultIndex: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
     };
     toolbarPosition: {
-        type: import("vue").PropType<T_1>;
+        type: import("vue").PropType<import("./types").PickerToolbarPosition>;
         default: import("./types").PickerToolbarPosition;
     };
     columnsFieldNames: import("vue").PropType<import("./types").PickerFieldNames>;
-}>> & Readonly<{
+}>> & {
     onChange?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
-    onClickOption?: ((...args: any[]) => any) | undefined;
-    onScrollInto?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
-}>, {
-    modelValue: import("../utils").Numeric[];
+}, {
     readonly: boolean;
     loading: boolean;
+    defaultIndex: string | number;
     allowHtml: boolean;
-    optionHeight: string | number;
+    itemHeight: string | number;
     showToolbar: boolean;
     swipeDuration: string | number;
-    visibleOptionNum: string | number;
-    columns: (import("./types").PickerColumn | import("./types").PickerOption)[];
+    visibleItemCount: string | number;
+    columns: (import("./types").PickerOption | import("./types").PickerColumn)[];
     toolbarPosition: import("./types").PickerToolbarPosition;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+}>>;
 export default Picker;
-export { pickerProps } from './Picker';
 export type { PickerProps };
-export type { PickerColumn, PickerOption, PickerInstance, PickerThemeVars, PickerFieldNames, PickerToolbarPosition, PickerCancelEventParams, PickerChangeEventParams, PickerConfirmEventParams, } from './types';
+export type { PickerColumn, PickerOption, PickerInstance, PickerFieldNames, PickerObjectColumn, PickerObjectOption, PickerToolbarPosition, } from './types';
 declare module 'vue' {
     interface GlobalComponents {
         VanPicker: typeof Picker;

package/lib/picker/index.js

@@ -17,10 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -28,12 +24,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var stdin_exports = {};
 __export(stdin_exports, {
   Picker: () => Picker,
-  default: () => stdin_default,
-  pickerProps: () => import_Picker2.pickerProps
+  default: () => stdin_default
 });
 module.exports = __toCommonJS(stdin_exports);
 var import_utils = require("../utils");
 var import_Picker = __toESM(require("./Picker"));
-var import_Picker2 = require("./Picker");
 const Picker = (0, import_utils.withInstall)(import_Picker.default);
 var stdin_default = Picker;

package/lib/picker/index.less

@@ -0,0 +1,125 @@
+@import './var.less';
+
+:root {
+  --van-picker-background-color: @picker-background-color;
+  --van-picker-toolbar-height: @picker-toolbar-height;
+  --van-picker-title-font-size: @picker-title-font-size;
+  --van-picker-title-line-height: @picker-title-line-height;
+  --van-picker-action-padding: @picker-action-padding;
+  --van-picker-action-font-size: @picker-action-font-size;
+  --van-picker-confirm-action-color: @picker-confirm-action-color;
+  --van-picker-cancel-action-color: @picker-cancel-action-color;
+  --van-picker-option-font-size: @picker-option-font-size;
+  --van-picker-option-padding: @picker-option-padding;
+  --van-picker-option-text-color: @picker-option-text-color;
+  --van-picker-option-disabled-opacity: @picker-option-disabled-opacity;
+  --van-picker-loading-icon-color: @picker-loading-icon-color;
+  --van-picker-loading-mask-color: @picker-loading-mask-color;
+  --van-picker-mask-color: @picker-mask-color;
+}
+
+.van-picker {
+  position: relative;
+  background: var(--van-picker-background-color);
+  user-select: none;
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: var(--van-picker-toolbar-height);
+  }
+
+  &__cancel,
+  &__confirm {
+    height: 100%;
+    padding: var(--van-picker-action-padding);
+    font-size: var(--van-picker-action-font-size);
+    background-color: transparent;
+    border: none;
+  }
+
+  &__confirm {
+    color: var(--van-picker-confirm-action-color);
+  }
+
+  &__cancel {
+    color: var(--van-picker-cancel-action-color);
+  }
+
+  &__title {
+    max-width: 50%;
+    font-weight: var(--van-font-weight-bold);
+    font-size: var(--van-picker-title-font-size);
+    line-height: var(--van-picker-title-line-height);
+    text-align: center;
+  }
+
+  &__columns {
+    position: relative;
+    display: flex;
+    cursor: grab;
+  }
+
+  &__loading {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--van-picker-loading-icon-color);
+    background: var(--van-picker-loading-mask-color);
+  }
+
+  &__frame {
+    position: absolute;
+    top: 50%;
+    right: var(--van-padding-md);
+    left: var(--van-padding-md);
+    z-index: 2;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  &__mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    background-image: var(--van-picker-mask-color);
+    background-repeat: no-repeat;
+    background-position: top, bottom;
+    // fix rendering failure during animation on safari
+    transform: translateZ(0);
+    pointer-events: none;
+  }
+
+  &-column {
+    flex: 1;
+    overflow: hidden;
+    font-size: var(--van-picker-option-font-size);
+
+    &__wrapper {
+      transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);
+    }
+
+    &__item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--van-picker-option-padding);
+      color: var(--van-picker-option-text-color);
+
+      &--disabled {
+        cursor: not-allowed;
+        opacity: var(--van-picker-option-disabled-opacity);
+      }
+    }
+  }
+}

package/lib/picker/style/index.js

@@ -1,10 +1,3 @@
 require("../../style/base.css");
-require("../../badge/index.css");
 require("../../loading/index.css");
-require("../../sticky/index.css");
-require("../../swipe/index.css");
-require("../../swipe-item/index.css");
-require("../../tabs/index.css");
-require("../../tab/index.css");
-require("../../picker-group/index.css");
 require("../index.css");

package/lib/picker/style/less.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/picker/style/less.js

@@ -0,0 +1,3 @@
+require("../../style/base.less");
+require("../../loading/index.less");
+require("../index.less");