vant 3.4.8 → 4.0.0-alpha.2

package/lib/tree-select/index.less

@@ -1,14 +1,12 @@
-@import './var.less';
-
-:root {
-  --van-tree-select-font-size: @tree-select-font-size;
-  --van-tree-select-nav-background-color: @tree-select-nav-background-color;
-  --van-tree-select-content-background-color: @tree-select-content-background-color;
-  --van-tree-select-nav-item-padding: @tree-select-nav-item-padding;
-  --van-tree-select-item-height: @tree-select-item-height;
-  --van-tree-select-item-active-color: @tree-select-item-active-color;
-  --van-tree-select-item-disabled-color: @tree-select-item-disabled-color;
-  --van-tree-select-item-selected-size: @tree-select-item-selected-size;
+body {
+  --van-tree-select-font-size: var(--van-font-size-md);
+  --van-tree-select-nav-background: var(--van-background);
+  --van-tree-select-content-background: var(--van-background-2);
+  --van-tree-select-nav-item-padding: 14px var(--van-padding-sm);
+  --van-tree-select-item-height: 48px;
+  --van-tree-select-item-active-color: var(--van-primary-color);
+  --van-tree-select-item-disabled-color: var(--van-gray-5);
+  --van-tree-select-item-selected-size: 16px;
 }
 
 .van-tree-select {
@@ -19,7 +17,7 @@
   &__nav {
     flex: 1;
     overflow-y: auto;
-    background: var(--van-tree-select-nav-background-color);
+    background: var(--van-tree-select-nav-background);
     -webkit-overflow-scrolling: touch;
 
     &-item {
@@ -30,14 +28,14 @@
   &__content {
     flex: 2;
     overflow-y: auto;
-    background: var(--van-tree-select-content-background-color);
+    background: var(--van-tree-select-content-background);
     -webkit-overflow-scrolling: touch;
   }
 
   &__item {
     position: relative;
     padding: 0 32px 0 var(--van-padding-md);
-    font-weight: var(--van-font-weight-bold);
+    font-weight: var(--van-font-bold);
     line-height: var(--van-tree-select-item-height);
     user-select: none;
     cursor: pointer;

package/lib/uploader/Uploader.d.ts

@@ -125,7 +125,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<UploaderMaxSize>;
         default: number;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "delete" | "oversize" | "click-upload" | "close-preview" | "click-preview")[], "update:modelValue" | "delete" | "oversize" | "click-upload" | "close-preview" | "click-preview", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "delete" | "oversize" | "clickUpload" | "closePreview" | "clickPreview")[], "update:modelValue" | "delete" | "oversize" | "clickUpload" | "closePreview" | "clickPreview", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     name: {
         type: (NumberConstructor | StringConstructor)[];
         default: string;
@@ -189,9 +189,9 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onDelete?: ((...args: any[]) => any) | undefined;
     onOversize?: ((...args: any[]) => any) | undefined;
-    "onClick-upload"?: ((...args: any[]) => any) | undefined;
-    "onClose-preview"?: ((...args: any[]) => any) | undefined;
-    "onClick-preview"?: ((...args: any[]) => any) | undefined;
+    onClickUpload?: ((...args: any[]) => any) | undefined;
+    onClosePreview?: ((...args: any[]) => any) | undefined;
+    onClickPreview?: ((...args: any[]) => any) | undefined;
 }, {
     name: string | number;
     accept: string;

package/lib/uploader/Uploader.js

@@ -63,7 +63,7 @@ const uploaderProps = {
 var stdin_default = (0, import_vue2.defineComponent)({
   name: import_utils2.name,
   props: uploaderProps,
-  emits: ["delete", "oversize", "click-upload", "close-preview", "click-preview", "update:modelValue"],
+  emits: ["delete", "oversize", "clickUpload", "closePreview", "clickPreview", "update:modelValue"],
   setup(props, {
     emit,
     slots
@@ -167,7 +167,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       readFile(file);
     };
     let imagePreview;
-    const onClosePreview = () => emit("close-preview");
+    const onClosePreview = () => emit("closePreview");
     const previewImage = (item) => {
       if (props.previewFullImage) {
         const imageFiles = props.modelValue.filter(import_utils2.isImageFile);
@@ -202,7 +202,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       return (0, import_vue.createVNode)(import_UploaderPreviewItem.default, (0, import_vue.mergeProps)({
         "item": item,
         "index": index,
-        "onClick": () => emit("click-preview", item, getDetail(index)),
+        "onClick": () => emit("clickPreview", item, getDetail(index)),
         "onDelete": () => deleteFile(item, index),
         "onPreview": () => previewImage(item)
       }, (0, import_utils.pick)(props, ["name", "lazyLoad"]), previewData), {
@@ -214,7 +214,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         return props.modelValue.map(renderPreviewItem);
       }
     };
-    const onClickUpload = (event) => emit("click-upload", event);
+    const onClickUpload = (event) => emit("clickUpload", event);
     const renderUpload = () => {
       if (props.modelValue.length >= props.maxCount || !props.showUpload) {
         return;

package/lib/uploader/index.css

@@ -1 +1 @@
-:root{--van-uploader-size: 80px;--van-uploader-icon-size: 24px;--van-uploader-icon-color: var(--van-gray-4);--van-uploader-text-color: var(--van-text-color-2);--van-uploader-text-font-size: var(--van-font-size-sm);--van-uploader-upload-background-color: var(--van-gray-1);--van-uploader-upload-active-color: var(--van-active-color);--van-uploader-delete-color: var(--van-white);--van-uploader-delete-icon-size: 14px;--van-uploader-delete-background-color: rgba(0, 0, 0, .7);--van-uploader-file-background-color: var(--van-background-color);--van-uploader-file-icon-size: 20px;--van-uploader-file-icon-color: var(--van-gray-7);--van-uploader-file-name-padding: 0 var(--van-padding-base);--van-uploader-file-name-margin-top: var(--van-padding-xs);--van-uploader-file-name-font-size: var(--van-font-size-sm);--van-uploader-file-name-text-color: var(--van-gray-7);--van-uploader-mask-text-color: var(--van-white);--van-uploader-mask-background-color: rgba(50, 50, 51, .88);--van-uploader-mask-icon-size: 22px;--van-uploader-mask-message-font-size: var(--van-font-size-sm);--van-uploader-mask-message-line-height: var(--van-line-height-xs);--van-uploader-loading-icon-size: 22px;--van-uploader-loading-icon-color: var(--van-white);--van-uploader-disabled-opacity: var(--van-disabled-opacity)}.van-uploader{position:relative;display:inline-block}.van-uploader__wrapper{display:flex;flex-wrap:wrap}.van-uploader__wrapper--disabled{opacity:var(--van-uploader-disabled-opacity)}.van-uploader__input{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;cursor:pointer;opacity:0}.van-uploader__input-wrapper{position:relative}.van-uploader__input:disabled{cursor:not-allowed}.van-uploader__upload{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;width:var(--van-uploader-size);height:var(--van-uploader-size);margin:0 var(--van-padding-xs) var(--van-padding-xs) 0;background:var(--van-uploader-upload-background-color)}.van-uploader__upload:active{background-color:var(--van-uploader-upload-active-color)}.van-uploader__upload--readonly:active{background-color:var(--van-uploader-upload-background-color)}.van-uploader__upload-icon{color:var(--van-uploader-icon-color);font-size:var(--van-uploader-icon-size)}.van-uploader__upload-text{margin-top:var(--van-padding-xs);color:var(--van-uploader-text-color);font-size:var(--van-uploader-text-font-size)}.van-uploader__preview{position:relative;margin:0 var(--van-padding-xs) var(--van-padding-xs) 0;cursor:pointer}.van-uploader__preview-image{display:block;width:var(--van-uploader-size);height:var(--van-uploader-size);overflow:hidden}.van-uploader__preview-delete{position:absolute;top:0;right:0;width:var(--van-uploader-delete-icon-size);height:var(--van-uploader-delete-icon-size);background:var(--van-uploader-delete-background-color);border-radius:0 0 0 12px}.van-uploader__preview-delete-icon{position:absolute;top:0;right:0;color:var(--van-uploader-delete-color);font-size:var(--van-uploader-delete-icon-size);transform:scale(.7) translate(10%,-10%)}.van-uploader__preview-cover{position:absolute;top:0;right:0;bottom:0;left:0}.van-uploader__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--van-uploader-mask-text-color);background:var(--van-uploader-mask-background-color)}.van-uploader__mask-icon{font-size:var(--van-uploader-mask-icon-size)}.van-uploader__mask-message{margin-top:6px;padding:0 var(--van-padding-base);font-size:var(--van-uploader-mask-message-font-size);line-height:var(--van-uploader-mask-message-line-height)}.van-uploader__loading{width:var(--van-uploader-loading-icon-size);height:var(--van-uploader-loading-icon-size);color:var(--van-uploader-loading-icon-color)}.van-uploader__file{display:flex;flex-direction:column;align-items:center;justify-content:center;width:var(--van-uploader-size);height:var(--van-uploader-size);background:var(--van-uploader-file-background-color)}.van-uploader__file-icon{color:var(--van-uploader-file-icon-color);font-size:var(--van-uploader-file-icon-size)}.van-uploader__file-name{box-sizing:border-box;width:100%;margin-top:var(--van-uploader-file-name-margin-top);padding:var(--van-uploader-file-name-padding);color:var(--van-uploader-file-name-text-color);font-size:var(--van-uploader-file-name-font-size);text-align:center}
+body{--van-uploader-size: 80px;--van-uploader-icon-size: 24px;--van-uploader-icon-color: var(--van-gray-4);--van-uploader-text-color: var(--van-text-color-2);--van-uploader-text-font-size: var(--van-font-size-sm);--van-uploader-upload-background: var(--van-gray-1);--van-uploader-upload-active-color: var(--van-active-color);--van-uploader-delete-color: var(--van-white);--van-uploader-delete-icon-size: 14px;--van-uploader-delete-background: rgba(0, 0, 0, .7);--van-uploader-file-background: var(--van-background);--van-uploader-file-icon-size: 20px;--van-uploader-file-icon-color: var(--van-gray-7);--van-uploader-file-name-padding: 0 var(--van-padding-base);--van-uploader-file-name-margin-top: var(--van-padding-xs);--van-uploader-file-name-font-size: var(--van-font-size-sm);--van-uploader-file-name-text-color: var(--van-gray-7);--van-uploader-mask-text-color: var(--van-white);--van-uploader-mask-background: rgba(50, 50, 51, .88);--van-uploader-mask-icon-size: 22px;--van-uploader-mask-message-font-size: var(--van-font-size-sm);--van-uploader-mask-message-line-height: var(--van-line-height-xs);--van-uploader-loading-icon-size: 22px;--van-uploader-loading-icon-color: var(--van-white);--van-uploader-disabled-opacity: var(--van-disabled-opacity)}.van-uploader{position:relative;display:inline-block}.van-uploader__wrapper{display:flex;flex-wrap:wrap}.van-uploader__wrapper--disabled{opacity:var(--van-uploader-disabled-opacity)}.van-uploader__input{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;cursor:pointer;opacity:0}.van-uploader__input-wrapper{position:relative}.van-uploader__input:disabled{cursor:not-allowed}.van-uploader__upload{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;width:var(--van-uploader-size);height:var(--van-uploader-size);margin:0 var(--van-padding-xs) var(--van-padding-xs) 0;background:var(--van-uploader-upload-background)}.van-uploader__upload:active{background-color:var(--van-uploader-upload-active-color)}.van-uploader__upload--readonly:active{background-color:var(--van-uploader-upload-background)}.van-uploader__upload-icon{color:var(--van-uploader-icon-color);font-size:var(--van-uploader-icon-size)}.van-uploader__upload-text{margin-top:var(--van-padding-xs);color:var(--van-uploader-text-color);font-size:var(--van-uploader-text-font-size)}.van-uploader__preview{position:relative;margin:0 var(--van-padding-xs) var(--van-padding-xs) 0;cursor:pointer}.van-uploader__preview-image{display:block;width:var(--van-uploader-size);height:var(--van-uploader-size);overflow:hidden}.van-uploader__preview-delete{position:absolute;top:0;right:0;width:var(--van-uploader-delete-icon-size);height:var(--van-uploader-delete-icon-size);background:var(--van-uploader-delete-background);border-radius:0 0 0 12px}.van-uploader__preview-delete-icon{position:absolute;top:0;right:0;color:var(--van-uploader-delete-color);font-size:var(--van-uploader-delete-icon-size);transform:scale(.7) translate(10%,-10%)}.van-uploader__preview-cover{position:absolute;top:0;right:0;bottom:0;left:0}.van-uploader__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--van-uploader-mask-text-color);background:var(--van-uploader-mask-background)}.van-uploader__mask-icon{font-size:var(--van-uploader-mask-icon-size)}.van-uploader__mask-message{margin-top:6px;padding:0 var(--van-padding-base);font-size:var(--van-uploader-mask-message-font-size);line-height:var(--van-uploader-mask-message-line-height)}.van-uploader__loading{width:var(--van-uploader-loading-icon-size);height:var(--van-uploader-loading-icon-size);color:var(--van-uploader-loading-icon-color)}.van-uploader__file{display:flex;flex-direction:column;align-items:center;justify-content:center;width:var(--van-uploader-size);height:var(--van-uploader-size);background:var(--van-uploader-file-background)}.van-uploader__file-icon{color:var(--van-uploader-file-icon-color);font-size:var(--van-uploader-file-icon-size)}.van-uploader__file-name{box-sizing:border-box;width:100%;margin-top:var(--van-uploader-file-name-margin-top);padding:var(--van-uploader-file-name-padding);color:var(--van-uploader-file-name-text-color);font-size:var(--van-uploader-file-name-font-size);text-align:center}

package/lib/uploader/index.d.ts

@@ -59,7 +59,7 @@ export declare const Uploader: import("../utils").WithInstall<import("vue").Defi
         type: import("vue").PropType<import("./types").UploaderMaxSize>;
         default: number;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "delete" | "oversize" | "click-upload" | "close-preview" | "click-preview")[], "update:modelValue" | "delete" | "oversize" | "click-upload" | "close-preview" | "click-preview", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "delete" | "oversize" | "clickUpload" | "closePreview" | "clickPreview")[], "update:modelValue" | "delete" | "oversize" | "clickUpload" | "closePreview" | "clickPreview", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     name: {
         type: (NumberConstructor | StringConstructor)[];
         default: string;
@@ -123,9 +123,9 @@ export declare const Uploader: import("../utils").WithInstall<import("vue").Defi
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onDelete?: ((...args: any[]) => any) | undefined;
     onOversize?: ((...args: any[]) => any) | undefined;
-    "onClick-upload"?: ((...args: any[]) => any) | undefined;
-    "onClose-preview"?: ((...args: any[]) => any) | undefined;
-    "onClick-preview"?: ((...args: any[]) => any) | undefined;
+    onClickUpload?: ((...args: any[]) => any) | undefined;
+    onClosePreview?: ((...args: any[]) => any) | undefined;
+    onClickPreview?: ((...args: any[]) => any) | undefined;
 }, {
     name: string | number;
     accept: string;

package/lib/uploader/index.less

@@ -1,31 +1,29 @@
-@import './var.less';
-
-:root {
-  --van-uploader-size: @uploader-size;
-  --van-uploader-icon-size: @uploader-icon-size;
-  --van-uploader-icon-color: @uploader-icon-color;
-  --van-uploader-text-color: @uploader-text-color;
-  --van-uploader-text-font-size: @uploader-text-font-size;
-  --van-uploader-upload-background-color: @uploader-upload-background-color;
-  --van-uploader-upload-active-color: @uploader-upload-active-color;
-  --van-uploader-delete-color: @uploader-delete-color;
-  --van-uploader-delete-icon-size: @uploader-delete-icon-size;
-  --van-uploader-delete-background-color: @uploader-delete-background-color;
-  --van-uploader-file-background-color: @uploader-file-background-color;
-  --van-uploader-file-icon-size: @uploader-file-icon-size;
-  --van-uploader-file-icon-color: @uploader-file-icon-color;
-  --van-uploader-file-name-padding: @uploader-file-name-padding;
-  --van-uploader-file-name-margin-top: @uploader-file-name-margin-top;
-  --van-uploader-file-name-font-size: @uploader-file-name-font-size;
-  --van-uploader-file-name-text-color: @uploader-file-name-text-color;
-  --van-uploader-mask-text-color: @uploader-mask-text-color;
-  --van-uploader-mask-background-color: @uploader-mask-background-color;
-  --van-uploader-mask-icon-size: @uploader-mask-icon-size;
-  --van-uploader-mask-message-font-size: @uploader-mask-message-font-size;
-  --van-uploader-mask-message-line-height: @uploader-mask-message-line-height;
-  --van-uploader-loading-icon-size: @uploader-loading-icon-size;
-  --van-uploader-loading-icon-color: @uploader-loading-icon-color;
-  --van-uploader-disabled-opacity: @uploader-disabled-opacity;
+body {
+  --van-uploader-size: 80px;
+  --van-uploader-icon-size: 24px;
+  --van-uploader-icon-color: var(--van-gray-4);
+  --van-uploader-text-color: var(--van-text-color-2);
+  --van-uploader-text-font-size: var(--van-font-size-sm);
+  --van-uploader-upload-background: var(--van-gray-1);
+  --van-uploader-upload-active-color: var(--van-active-color);
+  --van-uploader-delete-color: var(--van-white);
+  --van-uploader-delete-icon-size: 14px;
+  --van-uploader-delete-background: rgba(0, 0, 0, 0.7);
+  --van-uploader-file-background: var(--van-background);
+  --van-uploader-file-icon-size: 20px;
+  --van-uploader-file-icon-color: var(--van-gray-7);
+  --van-uploader-file-name-padding: 0 var(--van-padding-base);
+  --van-uploader-file-name-margin-top: var(--van-padding-xs);
+  --van-uploader-file-name-font-size: var(--van-font-size-sm);
+  --van-uploader-file-name-text-color: var(--van-gray-7);
+  --van-uploader-mask-text-color: var(--van-white);
+  --van-uploader-mask-background: rgba(50, 50, 51, 0.88);
+  --van-uploader-mask-icon-size: 22px;
+  --van-uploader-mask-message-font-size: var(--van-font-size-sm);
+  --van-uploader-mask-message-line-height: var(--van-line-height-xs);
+  --van-uploader-loading-icon-size: 22px;
+  --van-uploader-loading-icon-color: var(--van-white);
+  --van-uploader-disabled-opacity: var(--van-disabled-opacity);
 }
 
 .van-uploader {
@@ -70,14 +68,14 @@
     width: var(--van-uploader-size);
     height: var(--van-uploader-size);
     margin: 0 var(--van-padding-xs) var(--van-padding-xs) 0;
-    background: var(--van-uploader-upload-background-color);
+    background: var(--van-uploader-upload-background);
 
     &:active {
       background-color: var(--van-uploader-upload-active-color);
     }
 
     &--readonly:active {
-      background-color: var(--van-uploader-upload-background-color);
+      background-color: var(--van-uploader-upload-background);
     }
 
     &-icon {
@@ -110,7 +108,7 @@
       right: 0;
       width: var(--van-uploader-delete-icon-size);
       height: var(--van-uploader-delete-icon-size);
-      background: var(--van-uploader-delete-background-color);
+      background: var(--van-uploader-delete-background);
       border-radius: 0 0 0 12px;
 
       &-icon {
@@ -143,7 +141,7 @@
     align-items: center;
     justify-content: center;
     color: var(--van-uploader-mask-text-color);
-    background: var(--van-uploader-mask-background-color);
+    background: var(--van-uploader-mask-background);
 
     &-icon {
       font-size: var(--van-uploader-mask-icon-size);
@@ -170,7 +168,7 @@
     justify-content: center;
     width: var(--van-uploader-size);
     height: var(--van-uploader-size);
-    background: var(--van-uploader-file-background-color);
+    background: var(--van-uploader-file-background);
 
     &-icon {
       color: var(--van-uploader-file-icon-color);

package/lib/utils/basic.d.ts

@@ -14,3 +14,4 @@ export declare type Writeable<T> = {
     -readonly [P in keyof T]: T[P];
 };
 export declare function pick<T, U extends keyof T>(obj: T, keys: ReadonlyArray<U>, ignoreUndefined?: boolean): Writeable<Pick<T, U>>;
+export declare const isSameValue: (newValue: unknown, oldValue: unknown) => boolean;

package/lib/utils/basic.js

@@ -20,6 +20,7 @@ __export(stdin_exports, {
   extend: () => extend,
   get: () => get,
   inBrowser: () => inBrowser,
+  isSameValue: () => isSameValue,
   noop: () => noop,
   pick: () => pick
 });
@@ -45,3 +46,4 @@ function pick(obj, keys, ignoreUndefined) {
     return ret;
   }, {});
 }
+const isSameValue = (newValue, oldValue) => JSON.stringify(newValue) === JSON.stringify(oldValue);