vant 3.4.5 → 4.0.0-alpha.0

package/es/picker/PickerColumn.js

@@ -1,35 +1,26 @@
 import { createVNode as _createVNode } from "vue";
-import { ref, watch, reactive, defineComponent } from "vue";
-import { deepClone } from "../utils/deep-clone";
-import { clamp, isObject, unknownProp, numericProp, makeArrayProp, makeNumberProp, preventDefault, createNamespace, makeRequiredProp } from "../utils";
+import { ref, watchEffect, defineComponent } from "vue";
+import { clamp, numericProp, makeArrayProp, preventDefault, createNamespace, makeRequiredProp } from "../utils";
+import { getElementTranslateY, findIndexOfEnabledOption } from "./utils";
 import { useParent } from "@vant/use";
 import { useTouch } from "../composables/use-touch";
 import { useExpose } from "../composables/use-expose";
 const DEFAULT_DURATION = 200;
-const MOMENTUM_LIMIT_TIME = 300;
-const MOMENTUM_LIMIT_DISTANCE = 15;
+const MOMENTUM_TIME = 300;
+const MOMENTUM_DISTANCE = 15;
 const [name, bem] = 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);
-const isOptionDisabled = (option) => isObject(option) && option.disabled;
 var stdin_default = defineComponent({
   name,
   props: {
-    textKey: makeRequiredProp(String),
+    value: numericProp,
+    fields: makeRequiredProp(Object),
+    options: makeArrayProp(),
     readonly: Boolean,
     allowHtml: Boolean,
-    className: unknownProp,
-    itemHeight: makeRequiredProp(Number),
-    defaultIndex: makeNumberProp(0),
+    optionHeight: makeRequiredProp(Number),
     swipeDuration: makeRequiredProp(numericProp),
-    initialOptions: makeArrayProp(),
-    visibleItemCount: makeRequiredProp(numericProp)
+    visibleOptionNum: makeRequiredProp(numericProp)
   },
   emits: ["change"],
   setup(props, {
@@ -42,75 +33,46 @@ var stdin_default = defineComponent({
     let momentumOffset;
     let transitionEndTrigger;
     const wrapper = ref();
-    const state = reactive({
-      index: props.defaultIndex,
-      offset: 0,
-      duration: 0,
-      options: deepClone(props.initialOptions)
-    });
+    const currentOffset = ref(0);
+    const currentDuration = ref(0);
     const touch = useTouch();
-    const count = () => state.options.length;
-    const baseOffset = () => props.itemHeight * (+props.visibleItemCount - 1) / 2;
-    const adjustIndex = (index) => {
-      index = 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 count = () => props.options.length;
+    const baseOffset = () => props.optionHeight * (+props.visibleOptionNum - 1) / 2;
+    const updateValueByIndex = (index) => {
+      const enabledIndex = findIndexOfEnabledOption(props.options, index);
+      const offset = -enabledIndex * props.optionHeight;
       const trigger = () => {
-        if (index !== state.index) {
-          state.index = index;
-          if (emitChange) {
-            emit("change", index);
-          }
+        const value = props.options[enabledIndex][props.fields.value];
+        if (value !== props.value) {
+          emit("change", value);
         }
       };
-      if (moving && offset !== state.offset) {
+      if (moving && offset !== currentOffset.value) {
         transitionEndTrigger = trigger;
       } else {
         trigger();
       }
-      state.offset = offset;
-    };
-    const setOptions = (options) => {
-      if (JSON.stringify(options) !== JSON.stringify(state.options)) {
-        state.options = deepClone(options);
-        setIndex(props.defaultIndex);
-      }
+      currentOffset.value = offset;
     };
     const onClickItem = (index) => {
       if (moving || props.readonly) {
         return;
       }
       transitionEndTrigger = null;
-      state.duration = DEFAULT_DURATION;
-      setIndex(index, true);
+      currentDuration.value = DEFAULT_DURATION;
+      updateValueByIndex(index);
     };
-    const getOptionText = (option) => {
-      if (isObject(option) && props.textKey in option) {
-        return option[props.textKey];
-      }
-      return option;
-    };
-    const getIndexByOffset = (offset) => clamp(Math.round(-offset / props.itemHeight), 0, count() - 1);
+    const getIndexByOffset = (offset) => clamp(Math.round(-offset / props.optionHeight), 0, count() - 1);
     const momentum = (distance, duration) => {
       const speed = Math.abs(distance / duration);
-      distance = state.offset + speed / 3e-3 * (distance < 0 ? -1 : 1);
+      distance = currentOffset.value + speed / 3e-3 * (distance < 0 ? -1 : 1);
       const index = getIndexByOffset(distance);
-      state.duration = +props.swipeDuration;
-      setIndex(index, true);
+      currentDuration.value = +props.swipeDuration;
+      updateValueByIndex(index);
     };
     const stopMomentum = () => {
       moving = false;
-      state.duration = 0;
+      currentDuration.value = 0;
       if (transitionEndTrigger) {
         transitionEndTrigger();
         transitionEndTrigger = null;
@@ -123,12 +85,10 @@ var stdin_default = defineComponent({
       touch.start(event);
       if (moving) {
         const translateY = getElementTranslateY(wrapper.value);
-        state.offset = Math.min(0, translateY - baseOffset());
-        startOffset = state.offset;
-      } else {
-        startOffset = state.offset;
+        currentOffset.value = Math.min(0, translateY - baseOffset());
       }
-      state.duration = 0;
+      currentDuration.value = 0;
+      startOffset = currentOffset.value;
       touchStartTime = Date.now();
       momentumOffset = startOffset;
       transitionEndTrigger = null;
@@ -142,46 +102,49 @@ var stdin_default = defineComponent({
         moving = true;
         preventDefault(event, true);
       }
-      state.offset = clamp(startOffset + touch.deltaY.value, -(count() * props.itemHeight), props.itemHeight);
+      currentOffset.value = clamp(startOffset + touch.deltaY.value, -(count() * props.optionHeight), props.optionHeight);
       const now = Date.now();
-      if (now - touchStartTime > MOMENTUM_LIMIT_TIME) {
+      if (now - touchStartTime > MOMENTUM_TIME) {
         touchStartTime = now;
-        momentumOffset = state.offset;
+        momentumOffset = currentOffset.value;
       }
     };
     const onTouchEnd = () => {
       if (props.readonly) {
         return;
       }
-      const distance = state.offset - momentumOffset;
+      const distance = currentOffset.value - momentumOffset;
       const duration = Date.now() - touchStartTime;
-      const allowMomentum = duration < MOMENTUM_LIMIT_TIME && Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE;
-      if (allowMomentum) {
+      const startMomentum = duration < MOMENTUM_TIME && Math.abs(distance) > MOMENTUM_DISTANCE;
+      if (startMomentum) {
         momentum(distance, duration);
         return;
       }
-      const index = getIndexByOffset(state.offset);
-      state.duration = DEFAULT_DURATION;
-      setIndex(index, true);
+      const index = getIndexByOffset(currentOffset.value);
+      currentDuration.value = DEFAULT_DURATION;
+      updateValueByIndex(index);
       setTimeout(() => {
         moving = false;
       }, 0);
     };
     const renderOptions = () => {
       const optionStyle = {
-        height: `${props.itemHeight}px`
+        height: `${props.optionHeight}px`
       };
-      return state.options.map((option, index) => {
-        const text = getOptionText(option);
-        const disabled = isOptionDisabled(option);
+      return props.options.map((option, index) => {
+        const text = option[props.fields.text];
+        const {
+          disabled
+        } = option;
+        const value = option[props.fields.value];
         const data = {
           role: "button",
           style: optionStyle,
           tabindex: disabled ? -1 : 0,
-          class: bem("item", {
+          class: [bem("item", {
             disabled,
-            selected: index === state.index
-          }),
+            selected: value === props.value
+          }), option.className],
           onClick: () => onClickItem(index)
         };
         const childData = {
@@ -191,31 +154,18 @@ var stdin_default = defineComponent({
         return _createVNode("li", data, [slots.option ? slots.option(option) : _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];
-    setIndex(state.index);
     useParent(PICKER_KEY);
     useExpose({
-      state,
-      setIndex,
-      getValue,
-      setValue,
-      setOptions,
       stopMomentum
     });
-    watch(() => props.initialOptions, setOptions);
-    watch(() => props.defaultIndex, (value) => setIndex(value));
+    watchEffect(() => {
+      const index = props.options.findIndex((option) => option[props.fields.value] === props.value);
+      const enabledIndex = findIndexOfEnabledOption(props.options, index);
+      const offset = -enabledIndex * props.optionHeight;
+      currentOffset.value = offset;
+    });
     return () => _createVNode("div", {
-      "class": [bem(), props.className],
+      "class": bem(),
       "onTouchstart": onTouchStart,
       "onTouchmove": onTouchMove,
       "onTouchend": onTouchEnd,
@@ -223,9 +173,9 @@ var stdin_default = defineComponent({
     }, [_createVNode("ul", {
       "ref": wrapper,
       "style": {
-        transform: `translate3d(0, ${state.offset + baseOffset()}px, 0)`,
-        transitionDuration: `${state.duration}ms`,
-        transitionProperty: state.duration ? "all" : "none"
+        transform: `translate3d(0, ${currentOffset.value + baseOffset()}px, 0)`,
+        transitionDuration: `${currentDuration.value}ms`,
+        transitionProperty: currentDuration.value ? "all" : "none"
       },
       "class": bem("wrapper"),
       "onTransitionend": stopMomentum

package/es/picker/index.css

@@ -1 +1 @@
-: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)}
+body{--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-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-theme-dark{--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{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-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/es/picker/index.d.ts

@@ -4,7 +4,7 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -16,7 +16,7 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -24,25 +24,24 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
     confirmButtonText: StringConstructor;
 } & {
     columns: {
-        type: import("vue").PropType<(import("./types").PickerOption | import("./types").PickerColumn)[]>;
+        type: import("vue").PropType<(import("./types").PickerColumn | import("./types").PickerOption)[]>;
         default: () => never[];
     };
-    valueKey: StringConstructor;
-    defaultIndex: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
+    modelValue: {
+        type: import("vue").PropType<(string | number)[]>;
+        default: () => never[];
     };
     toolbarPosition: {
         type: import("vue").PropType<import("./types").PickerToolbarPosition>;
         default: import("./types").PickerToolbarPosition;
     };
     columnsFieldNames: import("vue").PropType<import("./types").PickerFieldNames>;
-}, () => 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<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "cancel" | "confirm")[], "update:modelValue" | "change" | "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     title: StringConstructor;
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -54,7 +53,7 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -62,13 +61,12 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
     confirmButtonText: StringConstructor;
 } & {
     columns: {
-        type: import("vue").PropType<(import("./types").PickerOption | import("./types").PickerColumn)[]>;
+        type: import("vue").PropType<(import("./types").PickerColumn | import("./types").PickerOption)[]>;
         default: () => never[];
     };
-    valueKey: StringConstructor;
-    defaultIndex: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
+    modelValue: {
+        type: import("vue").PropType<(string | number)[]>;
+        default: () => never[];
     };
     toolbarPosition: {
         type: import("vue").PropType<import("./types").PickerToolbarPosition>;
@@ -77,23 +75,24 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
     columnsFieldNames: import("vue").PropType<import("./types").PickerFieldNames>;
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
 }, {
+    modelValue: (string | number)[];
     readonly: boolean;
     loading: boolean;
-    defaultIndex: string | number;
     allowHtml: boolean;
-    itemHeight: string | number;
+    optionHeight: string | number;
     showToolbar: boolean;
     swipeDuration: string | number;
-    visibleItemCount: string | number;
-    columns: (import("./types").PickerOption | import("./types").PickerColumn)[];
+    visibleOptionNum: string | number;
+    columns: (import("./types").PickerColumn | import("./types").PickerOption)[];
     toolbarPosition: import("./types").PickerToolbarPosition;
 }>>;
 export default Picker;
 export type { PickerProps };
-export type { PickerColumn, PickerOption, PickerInstance, PickerFieldNames, PickerObjectColumn, PickerObjectOption, PickerToolbarPosition, } from './types';
+export type { PickerColumn, PickerOption, PickerInstance, PickerFieldNames, PickerToolbarPosition, PickerCancelEventParams, PickerChangeEventParams, PickerConfirmEventParams, } from './types';
 declare module 'vue' {
     interface GlobalComponents {
         VanPicker: typeof Picker;

package/es/picker/index.less

@@ -1,26 +1,38 @@
-@import './var.less';
+body {
+  --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-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: 0.3;
+  --van-picker-loading-icon-color: var(--van-primary-color);
+  --van-picker-loading-mask-color: rgba(255, 255, 255, 0.9);
+  --van-picker-mask-color: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.9),
+      rgba(255, 255, 255, 0.4)
+    ),
+    linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
+}
 
-: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-theme-dark {
+  --van-picker-mask-color: linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 0.6),
+      rgba(0, 0, 0, 0.1)
+    ),
+    linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1));
 }
 
 .van-picker {
   position: relative;
-  background: var(--van-picker-background-color);
+  background: var(--van-picker-background);
   user-select: none;
 
   &__toolbar {
@@ -49,7 +61,7 @@
 
   &__title {
     max-width: 50%;
-    font-weight: var(--van-font-weight-bold);
+    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;

package/es/picker/types.d.ts

@@ -3,35 +3,21 @@ import type { PickerProps } from './Picker';
 export declare type PickerToolbarPosition = 'top' | 'bottom';
 export declare type PickerFieldNames = {
     text?: string;
-    values?: string;
+    value?: string;
     children?: string;
 };
-export declare type PickerObjectOption = {
+export declare type PickerOption = {
     text?: string | number;
+    value?: string | number;
     disabled?: boolean;
-    [key: PropertyKey]: any;
-};
-export declare type PickerOption = string | number | PickerObjectOption;
-export declare type PickerObjectColumn = {
-    values?: PickerOption[];
     children?: PickerColumn;
     className?: unknown;
-    defaultIndex?: number;
     [key: PropertyKey]: any;
 };
-export declare type PickerColumn = PickerOption[] | PickerObjectColumn;
+export declare type PickerColumn = PickerOption[];
 export declare type PickerExpose = {
     confirm: () => void;
-    getValues: <T = PickerOption>() => T[];
-    setValues: (values: string[]) => void;
-    getIndexes: () => number[];
-    setIndexes: (indexes: number[]) => void;
-    getColumnIndex: (index: number) => number;
-    setColumnIndex: (columnIndex: number, optionIndex: number) => void;
-    getColumnValue: <T = PickerOption>(index: number) => T;
-    setColumnValue: (index: number, value: string) => void;
-    getColumnValues: <T = PickerOption>(index: number) => T[];
-    setColumnValues: (index: number, options: PickerOption[]) => void;
+    getSelectedOptions: () => Array<PickerOption | undefined>;
 };
 export declare type PickerColumnProvide = {
     state: {
@@ -47,3 +33,11 @@ export declare type PickerColumnProvide = {
     stopMomentum: () => void;
 };
 export declare type PickerInstance = ComponentPublicInstance<PickerProps, PickerExpose>;
+export declare type PickerConfirmEventParams = {
+    selectedValues: Array<number | string>;
+    selectedOptions: Array<PickerOption | undefined>;
+};
+export declare type PickerCancelEventParams = PickerConfirmEventParams;
+export declare type PickerChangeEventParams = PickerConfirmEventParams & {
+    columnIndex: number;
+};

package/es/picker/utils.d.ts

@@ -0,0 +1,10 @@
+import type { Ref } from 'vue';
+import type { PickerOption, PickerColumn, PickerFieldNames } from './types';
+export declare const getFirstEnabledOption: (options: PickerOption[]) => PickerOption | undefined;
+export declare function getColumnsType(columns: PickerColumn | PickerColumn[], fields: Required<PickerFieldNames>): "default" | "multiple" | "cascade";
+export declare function findIndexOfEnabledOption(options: PickerOption[], index: number): number;
+export declare const isOptionExist: (options: PickerOption[], value: number | string | undefined, fields: Required<PickerFieldNames>) => boolean;
+export declare function findOptionByValue(options: PickerOption[], value: number | string, fields: Required<PickerFieldNames>): PickerOption | undefined;
+export declare function formatCascadeColumns(columns: PickerColumn | PickerColumn[], fields: Required<PickerFieldNames>, selectedValues: Ref<Array<number | string>>): PickerColumn[];
+export declare function getElementTranslateY(element: Element): number;
+export declare function assignDefaultFields(fields: PickerFieldNames | undefined): Required<PickerFieldNames>;

package/es/picker/utils.js

@@ -0,0 +1,73 @@
+import { isDef, clamp, extend } from "../utils";
+const getFirstEnabledOption = (options) => options.find((option) => !option.disabled) || options[0];
+function getColumnsType(columns, fields) {
+  const firstColumn = columns[0];
+  if (firstColumn) {
+    if (Array.isArray(firstColumn)) {
+      return "multiple";
+    }
+    if (fields.children in firstColumn) {
+      return "cascade";
+    }
+  }
+  return "default";
+}
+function findIndexOfEnabledOption(options, index) {
+  index = clamp(index, 0, options.length);
+  for (let i = index; i < options.length; i++) {
+    if (!options[i].disabled)
+      return i;
+  }
+  for (let i = index - 1; i >= 0; i--) {
+    if (!options[i].disabled)
+      return i;
+  }
+  return 0;
+}
+const isOptionExist = (options, value, fields) => value !== void 0 && !!options.find((option) => option[fields.value] === value);
+function findOptionByValue(options, value, fields) {
+  const index = options.findIndex((option) => option[fields.value] === value);
+  const enabledIndex = findIndexOfEnabledOption(options, index);
+  return options[enabledIndex];
+}
+function formatCascadeColumns(columns, fields, selectedValues) {
+  const formatted = [];
+  let cursor = {
+    [fields.children]: columns
+  };
+  let columnIndex = 0;
+  while (cursor && cursor[fields.children]) {
+    const options = cursor[fields.children];
+    const value = selectedValues.value[columnIndex];
+    cursor = isDef(value) ? findOptionByValue(options, value, fields) : void 0;
+    if (!cursor && options.length) {
+      const firstValue = getFirstEnabledOption(options)[fields.value];
+      cursor = findOptionByValue(options, firstValue, fields);
+    }
+    columnIndex++;
+    formatted.push(options);
+  }
+  return formatted;
+}
+function getElementTranslateY(element) {
+  const { transform } = window.getComputedStyle(element);
+  const translateY = transform.slice(7, transform.length - 1).split(", ")[5];
+  return Number(translateY);
+}
+function assignDefaultFields(fields) {
+  return extend({
+    text: "text",
+    value: "value",
+    children: "children"
+  }, fields);
+}
+export {
+  assignDefaultFields,
+  findIndexOfEnabledOption,
+  findOptionByValue,
+  formatCascadeColumns,
+  getColumnsType,
+  getElementTranslateY,
+  getFirstEnabledOption,
+  isOptionExist
+};

package/es/popover/Popover.d.ts

@@ -149,13 +149,13 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:show"?: ((...args: any[]) => any) | undefined;
 }, {
     offset: [number, number];
+    theme: PopoverTheme;
     overlay: boolean;
     show: boolean;
     teleport: string | import("vue").RendererElement | null | undefined;
     closeOnClickOverlay: boolean;
     actions: PopoverAction[];
     closeOnClickAction: boolean;
-    theme: PopoverTheme;
     closeOnClickOutside: boolean;
     trigger: PopoverTrigger;
     showArrow: boolean;

package/es/popover/index.css

@@ -1 +1 @@
-:root{--van-popover-arrow-size: 6px;--van-popover-border-radius: var(--van-border-radius-lg);--van-popover-action-width: 128px;--van-popover-action-height: 44px;--van-popover-action-font-size: var(--van-font-size-md);--van-popover-action-line-height: var(--van-line-height-md);--van-popover-action-icon-size: 20px;--van-popover-light-text-color: var(--van-text-color);--van-popover-light-background-color: var(--van-background-color-light);--van-popover-light-action-disabled-text-color: var(--van-text-color-3);--van-popover-dark-text-color: var(--van-white);--van-popover-dark-background-color: #4a4a4a;--van-popover-dark-action-disabled-text-color: var(--van-text-color-2)}.van-popover{position:absolute;overflow:visible;background-color:transparent;transition:opacity .15s,transform .15s}.van-popover__wrapper{display:inline-block}.van-popover__arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid;border-width:var(--van-popover-arrow-size)}.van-popover__content{overflow:hidden;border-radius:var(--van-popover-border-radius)}.van-popover__action{position:relative;display:flex;align-items:center;box-sizing:border-box;width:var(--van-popover-action-width);height:var(--van-popover-action-height);padding:0 var(--van-padding-md);font-size:var(--van-popover-action-font-size);line-height:var(--van-line-height-md);cursor:pointer}.van-popover__action:last-child .van-popover__action-text:after{display:none}.van-popover__action-text{display:flex;flex:1;align-items:center;justify-content:center;height:100%}.van-popover__action-icon{margin-right:var(--van-padding-xs);font-size:var(--van-popover-action-icon-size)}.van-popover__action--with-icon .van-popover__action-text{justify-content:flex-start}.van-popover[data-popper-placement^=top] .van-popover__arrow{bottom:0;border-top-color:currentColor;border-bottom-width:0;transform:translate(-50%);margin-bottom:calc(var(--van-popover-arrow-size) * -1)}.van-popover[data-popper-placement=top]{transform-origin:50% 100%}.van-popover[data-popper-placement=top] .van-popover__arrow{left:50%}.van-popover[data-popper-placement=top-start]{transform-origin:0 100%}.van-popover[data-popper-placement=top-start] .van-popover__arrow{left:var(--van-padding-md)}.van-popover[data-popper-placement=top-end]{transform-origin:100% 100%}.van-popover[data-popper-placement=top-end] .van-popover__arrow{right:var(--van-padding-md)}.van-popover[data-popper-placement^=left] .van-popover__arrow{right:0;border-right-width:0;border-left-color:currentColor;transform:translateY(-50%);margin-right:calc(var(--van-popover-arrow-size) * -1)}.van-popover[data-popper-placement=left]{transform-origin:100% 50%}.van-popover[data-popper-placement=left] .van-popover__arrow{top:50%}.van-popover[data-popper-placement=left-start]{transform-origin:100% 0}.van-popover[data-popper-placement=left-start] .van-popover__arrow{top:var(--van-padding-md)}.van-popover[data-popper-placement=left-end]{transform-origin:100% 100%}.van-popover[data-popper-placement=left-end] .van-popover__arrow{bottom:var(--van-padding-md)}.van-popover[data-popper-placement^=right] .van-popover__arrow{left:0;border-right-color:currentColor;border-left-width:0;transform:translateY(-50%);margin-left:calc(var(--van-popover-arrow-size) * -1)}.van-popover[data-popper-placement=right]{transform-origin:0 50%}.van-popover[data-popper-placement=right] .van-popover__arrow{top:50%}.van-popover[data-popper-placement=right-start]{transform-origin:0 0}.van-popover[data-popper-placement=right-start] .van-popover__arrow{top:var(--van-padding-md)}.van-popover[data-popper-placement=right-end]{transform-origin:0 100%}.van-popover[data-popper-placement=right-end] .van-popover__arrow{bottom:var(--van-padding-md)}.van-popover[data-popper-placement^=bottom] .van-popover__arrow{top:0;border-top-width:0;border-bottom-color:currentColor;transform:translate(-50%);margin-top:calc(var(--van-popover-arrow-size) * -1)}.van-popover[data-popper-placement=bottom]{transform-origin:50% 0}.van-popover[data-popper-placement=bottom] .van-popover__arrow{left:50%}.van-popover[data-popper-placement=bottom-start]{transform-origin:0 0}.van-popover[data-popper-placement=bottom-start] .van-popover__arrow{left:var(--van-padding-md)}.van-popover[data-popper-placement=bottom-end]{transform-origin:100% 0}.van-popover[data-popper-placement=bottom-end] .van-popover__arrow{right:var(--van-padding-md)}.van-popover--light{color:var(--van-popover-light-text-color)}.van-popover--light .van-popover__content{background:var(--van-popover-light-background-color);box-shadow:0 2px 12px rgba(50,50,51,.12)}.van-popover--light .van-popover__arrow{color:var(--van-popover-light-background-color)}.van-popover--light .van-popover__action:active{background-color:var(--van-active-color)}.van-popover--light .van-popover__action--disabled{color:var(--van-popover-light-action-disabled-text-color);cursor:not-allowed}.van-popover--light .van-popover__action--disabled:active{background-color:transparent}.van-popover--dark{color:var(--van-popover-dark-text-color)}.van-popover--dark .van-popover__content{background:var(--van-popover-dark-background-color)}.van-popover--dark .van-popover__arrow{color:var(--van-popover-dark-background-color)}.van-popover--dark .van-popover__action:active{background-color:rgba(0,0,0,.2)}.van-popover--dark .van-popover__action--disabled{color:var(--van-popover-dark-action-disabled-text-color)}.van-popover--dark .van-popover__action--disabled:active{background-color:transparent}.van-popover--dark .van-popover__action-text:after{border-color:var(--van-gray-7)}.van-popover-zoom-enter-from,.van-popover-zoom-leave-active{transform:scale(.8);opacity:0}.van-popover-zoom-enter-active{transition-timing-function:var(--van-animation-timing-function-enter)}.van-popover-zoom-leave-active{transition-timing-function:var(--van-animation-timing-function-leave)}
+body{--van-popover-arrow-size: 6px;--van-popover-radius: var(--van-radius-lg);--van-popover-action-width: 128px;--van-popover-action-height: 44px;--van-popover-action-font-size: var(--van-font-size-md);--van-popover-action-line-height: var(--van-line-height-md);--van-popover-action-icon-size: 20px;--van-popover-light-text-color: var(--van-text-color);--van-popover-light-background: var(--van-background-2);--van-popover-light-action-disabled-text-color: var(--van-text-color-3);--van-popover-dark-text-color: var(--van-white);--van-popover-dark-background: #4a4a4a;--van-popover-dark-action-disabled-text-color: var(--van-text-color-2)}.van-popover{position:absolute;overflow:visible;background-color:transparent;transition:opacity .15s,transform .15s}.van-popover__wrapper{display:inline-block}.van-popover__arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid;border-width:var(--van-popover-arrow-size)}.van-popover__content{overflow:hidden;border-radius:var(--van-popover-radius)}.van-popover__action{position:relative;display:flex;align-items:center;box-sizing:border-box;width:var(--van-popover-action-width);height:var(--van-popover-action-height);padding:0 var(--van-padding-md);font-size:var(--van-popover-action-font-size);line-height:var(--van-line-height-md);cursor:pointer}.van-popover__action:last-child .van-popover__action-text:after{display:none}.van-popover__action-text{display:flex;flex:1;align-items:center;justify-content:center;height:100%}.van-popover__action-icon{margin-right:var(--van-padding-xs);font-size:var(--van-popover-action-icon-size)}.van-popover__action--with-icon .van-popover__action-text{justify-content:flex-start}.van-popover[data-popper-placement^=top] .van-popover__arrow{bottom:0;border-top-color:currentColor;border-bottom-width:0;transform:translate(-50%);margin-bottom:calc(var(--van-popover-arrow-size) * -1)}.van-popover[data-popper-placement=top]{transform-origin:50% 100%}.van-popover[data-popper-placement=top] .van-popover__arrow{left:50%}.van-popover[data-popper-placement=top-start]{transform-origin:0 100%}.van-popover[data-popper-placement=top-start] .van-popover__arrow{left:var(--van-padding-md)}.van-popover[data-popper-placement=top-end]{transform-origin:100% 100%}.van-popover[data-popper-placement=top-end] .van-popover__arrow{right:var(--van-padding-md)}.van-popover[data-popper-placement^=left] .van-popover__arrow{right:0;border-right-width:0;border-left-color:currentColor;transform:translateY(-50%);margin-right:calc(var(--van-popover-arrow-size) * -1)}.van-popover[data-popper-placement=left]{transform-origin:100% 50%}.van-popover[data-popper-placement=left] .van-popover__arrow{top:50%}.van-popover[data-popper-placement=left-start]{transform-origin:100% 0}.van-popover[data-popper-placement=left-start] .van-popover__arrow{top:var(--van-padding-md)}.van-popover[data-popper-placement=left-end]{transform-origin:100% 100%}.van-popover[data-popper-placement=left-end] .van-popover__arrow{bottom:var(--van-padding-md)}.van-popover[data-popper-placement^=right] .van-popover__arrow{left:0;border-right-color:currentColor;border-left-width:0;transform:translateY(-50%);margin-left:calc(var(--van-popover-arrow-size) * -1)}.van-popover[data-popper-placement=right]{transform-origin:0 50%}.van-popover[data-popper-placement=right] .van-popover__arrow{top:50%}.van-popover[data-popper-placement=right-start]{transform-origin:0 0}.van-popover[data-popper-placement=right-start] .van-popover__arrow{top:var(--van-padding-md)}.van-popover[data-popper-placement=right-end]{transform-origin:0 100%}.van-popover[data-popper-placement=right-end] .van-popover__arrow{bottom:var(--van-padding-md)}.van-popover[data-popper-placement^=bottom] .van-popover__arrow{top:0;border-top-width:0;border-bottom-color:currentColor;transform:translate(-50%);margin-top:calc(var(--van-popover-arrow-size) * -1)}.van-popover[data-popper-placement=bottom]{transform-origin:50% 0}.van-popover[data-popper-placement=bottom] .van-popover__arrow{left:50%}.van-popover[data-popper-placement=bottom-start]{transform-origin:0 0}.van-popover[data-popper-placement=bottom-start] .van-popover__arrow{left:var(--van-padding-md)}.van-popover[data-popper-placement=bottom-end]{transform-origin:100% 0}.van-popover[data-popper-placement=bottom-end] .van-popover__arrow{right:var(--van-padding-md)}.van-popover--light{color:var(--van-popover-light-text-color)}.van-popover--light .van-popover__content{background:var(--van-popover-light-background);box-shadow:0 2px 12px rgba(50,50,51,.12)}.van-popover--light .van-popover__arrow{color:var(--van-popover-light-background)}.van-popover--light .van-popover__action:active{background-color:var(--van-active-color)}.van-popover--light .van-popover__action--disabled{color:var(--van-popover-light-action-disabled-text-color);cursor:not-allowed}.van-popover--light .van-popover__action--disabled:active{background-color:transparent}.van-popover--dark{color:var(--van-popover-dark-text-color)}.van-popover--dark .van-popover__content{background:var(--van-popover-dark-background)}.van-popover--dark .van-popover__arrow{color:var(--van-popover-dark-background)}.van-popover--dark .van-popover__action:active{background-color:rgba(0,0,0,.2)}.van-popover--dark .van-popover__action--disabled{color:var(--van-popover-dark-action-disabled-text-color)}.van-popover--dark .van-popover__action--disabled:active{background-color:transparent}.van-popover--dark .van-popover__action-text:after{border-color:var(--van-gray-7)}.van-popover-zoom-enter-from,.van-popover-zoom-leave-active{transform:scale(.8);opacity:0}.van-popover-zoom-enter-active{transition-timing-function:var(--van-ease-out)}.van-popover-zoom-leave-active{transition-timing-function:var(--van-ease-in)}