vant 3.3.1 → 3.3.4

package/es/calendar/Calendar.js

@@ -220,7 +220,7 @@ export default defineComponent({
         months.value.some((month, index) => {
           if (compareMonth(month, targetDate) === 0) {
             if (bodyRef.value) {
-              monthRefs.value[index].scrollIntoView(bodyRef.value);
+              monthRefs.value[index].scrollToDate(bodyRef.value, targetDate);
             }
 
             return true;
@@ -230,10 +230,9 @@ export default defineComponent({
         });
         onScroll();
       });
-    }; // scroll to current month
-
+    };
 
-    var scrollIntoView = () => {
+    var scrollToCurrentDate = () => {
       if (props.poppable && !props.show) {
         return;
       }
@@ -255,7 +254,7 @@ export default defineComponent({
         // add Math.floor to avoid decimal height issues
         // https://github.com/youzan/vant/issues/5640
         bodyHeight = Math.floor(useRect(bodyRef).height);
-        scrollIntoView();
+        scrollToCurrentDate();
       });
     };
 
@@ -265,7 +264,7 @@ export default defineComponent({
       }
 
       currentDate.value = date;
-      scrollIntoView();
+      scrollToCurrentDate();
     };
 
     var checkRange = date => {
@@ -303,13 +302,8 @@ export default defineComponent({
         var valid = checkRange(date);
 
         if (!valid) {
-          // auto selected to max range if showConfirm
-          if (props.showConfirm) {
-            setCurrentDate([date[0], getDayByOffset(date[0], +props.maxRange - 1)]);
-          } else {
-            setCurrentDate(date);
-          }
-
+          // auto selected to max range
+          setCurrentDate([date[0], getDayByOffset(date[0], +props.maxRange - 1)]);
           return;
         }
       }
@@ -467,7 +461,7 @@ export default defineComponent({
       }
 
       currentDate.value = value;
-      scrollIntoView();
+      scrollToCurrentDate();
     });
     useExpose({
       reset,

package/es/calendar/CalendarMonth.js

@@ -58,15 +58,6 @@ export default defineComponent({
 
     var getTitle = () => title.value;
 
-    var scrollIntoView = body => {
-      var el = props.showSubtitle ? daysRef.value : monthRef.value;
-
-      if (el) {
-        var scrollTop = useRect(el).top - useRect(body).top + body.scrollTop;
-        setScrollTop(body, scrollTop);
-      }
-    };
-
     var getMultipleDayType = day => {
       var isSelected = date => props.currentDate.some(item => compareDay(item, date) === 0);
 
@@ -219,6 +210,16 @@ export default defineComponent({
     });
     var disabledDays = computed(() => days.value.filter(day => day.type === 'disabled'));
 
+    var scrollToDate = (body, targetDate) => {
+      if (daysRef.value) {
+        var daysRect = useRect(daysRef.value);
+        var totalRows = placeholders.value.length;
+        var currentRow = Math.ceil((targetDate.getDate() + offset.value) / 7);
+        var rowOffset = (currentRow - 1) * daysRect.height / totalRows;
+        setScrollTop(body, daysRect.top + rowOffset + body.scrollTop - useRect(body).top);
+      }
+    };
+
     var renderDay = (item, index) => _createVNode(CalendarDay, {
       "item": item,
       "index": index,
@@ -238,7 +239,7 @@ export default defineComponent({
       getTitle,
       getHeight: () => height.value,
       setVisible,
-      scrollIntoView,
+      scrollToDate,
       disabledDays
     });
     return () => _createVNode("div", {

package/es/calendar/types.d.ts

@@ -21,6 +21,6 @@ export declare type CalendarMonthInstance = ComponentPublicInstance<CalendarMont
     getTitle: () => string;
     getHeight: () => number;
     setVisible: (value?: boolean | undefined) => void;
-    scrollIntoView: (body: Element) => void;
+    scrollToDate: (body: Element, targetDate: Date) => void;
     disabledDays: Ref<ComputedRef<CalendarDayItem[]>>;
 }>;

package/es/index.d.ts

@@ -90,4 +90,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "3.3.1";
+export const version: "3.3.4";

package/es/index.js

@@ -84,7 +84,7 @@ import { Tag } from './tag';
 import { Toast } from './toast';
 import { TreeSelect } from './tree-select';
 import { Uploader } from './uploader';
-var version = '3.3.1';
+var version = '3.3.4';
 
 function install(app) {
   var components = [ActionBar, ActionBarButton, ActionBarIcon, ActionSheet, AddressEdit, AddressList, Area, Badge, Button, Calendar, Card, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Circle, Col, Collapse, CollapseItem, ConfigProvider, ContactCard, ContactEdit, ContactList, CountDown, Coupon, CouponCell, CouponList, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, Form, Grid, GridItem, Icon, Image, ImagePreview, IndexAnchor, IndexBar, List, Loading, Locale, NavBar, NoticeBar, Notify, NumberKeyboard, Overlay, Pagination, PasswordInput, Picker, Popover, Popup, Progress, PullRefresh, Radio, RadioGroup, Rate, Row, Search, ShareSheet, Sidebar, SidebarItem, Skeleton, Slider, Step, Stepper, Steps, Sticky, SubmitBar, Swipe, SwipeCell, SwipeItem, Switch, Tab, Tabbar, TabbarItem, Tabs, Tag, Toast, TreeSelect, Uploader];

package/es/locale/lang/pt-BR.d.ts

@@ -0,0 +1,73 @@
+declare const _default: {
+    name: string;
+    tel: string;
+    save: string;
+    confirm: string;
+    cancel: string;
+    delete: string;
+    loading: string;
+    noCoupon: string;
+    nameEmpty: string;
+    telInvalid: string;
+    vanCalendar: {
+        end: string;
+        start: string;
+        title: string;
+        startEnd: string;
+        weekdays: string[];
+        monthTitle: (year: number, month: number) => string;
+        rangePrompt: (maxRange: number) => string;
+    };
+    vanCascader: {
+        select: string;
+    };
+    vanContactCard: {
+        addText: string;
+    };
+    vanContactList: {
+        addText: string;
+    };
+    vanPagination: {
+        prev: string;
+        next: string;
+    };
+    vanPullRefresh: {
+        pulling: string;
+        loosing: string;
+    };
+    vanSubmitBar: {
+        label: string;
+    };
+    vanCoupon: {
+        unlimited: string;
+        discount: (discount: number) => string;
+        condition: (condition: number) => string;
+    };
+    vanCouponCell: {
+        title: string;
+        count: (count: number) => string;
+    };
+    vanCouponList: {
+        exchange: string;
+        close: string;
+        enable: string;
+        disabled: string;
+        placeholder: string;
+    };
+    vanAddressEdit: {
+        area: string;
+        postal: string;
+        areaEmpty: string;
+        addressEmpty: string;
+        postalEmpty: string;
+        defaultAddress: string;
+    };
+    vanAddressEditDetail: {
+        label: string;
+        placeholder: string;
+    };
+    vanAddressList: {
+        add: string;
+    };
+};
+export default _default;

package/es/locale/lang/pt-BR.js

@@ -0,0 +1,72 @@
+export default {
+  name: 'Nome',
+  tel: 'Fone',
+  save: 'Salvar',
+  confirm: 'Confirmar',
+  cancel: 'Cancelar',
+  delete: 'Excluir',
+  loading: 'Carregando...',
+  noCoupon: 'Nenhum cupom',
+  nameEmpty: 'Por favor, preencha o nome',
+  telInvalid: 'Telefone em formato inválido',
+  vanCalendar: {
+    end: 'Fim',
+    start: 'Início',
+    title: 'Calendário',
+    startEnd: 'Início/Fim',
+    weekdays: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
+    monthTitle: (year, month) => month + "/" + year,
+    rangePrompt: maxRange => "Escolha no m\xE1ximo " + maxRange + " dias"
+  },
+  vanCascader: {
+    select: 'Selecione'
+  },
+  vanContactCard: {
+    addText: 'Adicionar informações de contato'
+  },
+  vanContactList: {
+    addText: 'Adicionar novo contato'
+  },
+  vanPagination: {
+    prev: 'Anterior',
+    next: 'Próximo'
+  },
+  vanPullRefresh: {
+    pulling: 'Puxe para atualizar...',
+    loosing: 'Solte para atualizar...'
+  },
+  vanSubmitBar: {
+    label: 'Total：'
+  },
+  vanCoupon: {
+    unlimited: 'Ilimitado',
+    discount: discount => discount * 10 + "% de desconto",
+    condition: condition => "Pelo menos " + condition
+  },
+  vanCouponCell: {
+    title: 'Cupom',
+    count: count => "Voc\xEA possui " + count + " cupom(ns)"
+  },
+  vanCouponList: {
+    exchange: 'Usar',
+    close: 'Fechar',
+    enable: 'Disponível',
+    disabled: 'Indisponível',
+    placeholder: 'Código do cupom'
+  },
+  vanAddressEdit: {
+    area: 'Área',
+    postal: 'CEP',
+    areaEmpty: 'Por favor, selecione uma área de recebimento',
+    addressEmpty: 'Endereço não pode ser vazio',
+    postalEmpty: 'CEP inválido',
+    defaultAddress: 'Usar como endereço padrão'
+  },
+  vanAddressEditDetail: {
+    label: 'Endereço',
+    placeholder: 'Endereço'
+  },
+  vanAddressList: {
+    add: 'Adicionar novo endereço'
+  }
+};

package/es/swipe/Swipe.js

@@ -259,10 +259,16 @@ export default defineComponent({
 
     var onTouchMove = event => {
       if (props.touchable && state.swiping) {
-        touch.move(event);
+        touch.move(event); // if user starting to touchmove, prevent the event bubbling to
+        // avoid affecting the parent components
 
-        if (isCorrectDirection.value) {
+        var shouldPrevent = isCorrectDirection.value || touch.offsetY.value > touch.offsetX.value === props.vertical;
+
+        if (shouldPrevent) {
           preventDefault(event, props.stopPropagation);
+        }
+
+        if (isCorrectDirection.value) {
           move({
             offset: delta.value
           });

package/es/swipe/index.css

@@ -1 +1 @@
-:root{--van-swipe-indicator-size:6px;--van-swipe-indicator-margin:var(--van-padding-sm);--van-swipe-indicator-active-opacity:1;--van-swipe-indicator-inactive-opacity:0.3;--van-swipe-indicator-active-background-color:var(--van-primary-color);--van-swipe-indicator-inactive-background-color:var(--van-border-color)}.van-swipe{position:relative;overflow:hidden;cursor:-webkit-grab;cursor:grab;-webkit-user-select:none;user-select:none}.van-swipe__track{display:flex;height:100%}.van-swipe__track--vertical{flex-direction:column}.van-swipe__indicators{position:absolute;bottom:var(--van-swipe-indicator-margin);left:50%;display:flex;transform:translateX(-50%)}.van-swipe__indicators--vertical{top:50%;bottom:auto;left:var(--van-swipe-indicator-margin);flex-direction:column;transform:translateY(-50%)}.van-swipe__indicators--vertical .van-swipe__indicator:not(:last-child){margin-bottom:var(--van-swipe-indicator-size)}.van-swipe__indicator{width:var(--van-swipe-indicator-size);height:var(--van-swipe-indicator-size);background-color:var(--van-swipe-indicator-inactive-background-color);border-radius:100%;opacity:var(--van-swipe-indicator-inactive-opacity);transition:opacity var(--van-animation-duration-fast),background-color var(--van-animation-duration-fast)}.van-swipe__indicator:not(:last-child){margin-right:var(--van-swipe-indicator-size)}.van-swipe__indicator--active{background-color:var(--van-swipe-indicator-active-background-color);opacity:var(--van-swipe-indicator-active-opacity)}
+:root{--van-swipe-indicator-size:6px;--van-swipe-indicator-margin:var(--van-padding-sm);--van-swipe-indicator-active-opacity:1;--van-swipe-indicator-inactive-opacity:0.3;--van-swipe-indicator-active-background-color:var(--van-primary-color);--van-swipe-indicator-inactive-background-color:var(--van-border-color)}.van-swipe{position:relative;overflow:hidden;transform:translateZ(0);cursor:-webkit-grab;cursor:grab;-webkit-user-select:none;user-select:none}.van-swipe__track{display:flex;height:100%}.van-swipe__track--vertical{flex-direction:column}.van-swipe__indicators{position:absolute;bottom:var(--van-swipe-indicator-margin);left:50%;display:flex;transform:translateX(-50%)}.van-swipe__indicators--vertical{top:50%;bottom:auto;left:var(--van-swipe-indicator-margin);flex-direction:column;transform:translateY(-50%)}.van-swipe__indicators--vertical .van-swipe__indicator:not(:last-child){margin-bottom:var(--van-swipe-indicator-size)}.van-swipe__indicator{width:var(--van-swipe-indicator-size);height:var(--van-swipe-indicator-size);background-color:var(--van-swipe-indicator-inactive-background-color);border-radius:100%;opacity:var(--van-swipe-indicator-inactive-opacity);transition:opacity var(--van-animation-duration-fast),background-color var(--van-animation-duration-fast)}.van-swipe__indicator:not(:last-child){margin-right:var(--van-swipe-indicator-size)}.van-swipe__indicator--active{background-color:var(--van-swipe-indicator-active-background-color);opacity:var(--van-swipe-indicator-active-opacity)}

package/es/swipe/index.less

@@ -12,6 +12,8 @@
 .van-swipe {
   position: relative;
   overflow: hidden;
+  // https://github.com/youzan/vant/issues/9931
+  transform: translateZ(0);
   cursor: grab;
   user-select: none;
 

package/es/tab/Tab.js

@@ -94,7 +94,7 @@ export default defineComponent({
         return _createVNode(SwipeItem, {
           "id": id,
           "role": "tabpanel",
-          "class": bem('pane-wrapper', {
+          "class": bem('panel-wrapper', {
             inactive: !active.value
           }),
           "tabindex": active.value ? 0 : -1,

package/es/tabbar-item/TabbarItem.js

@@ -60,9 +60,11 @@ export default defineComponent({
         var config = isObject(to) ? to : {
           path: to
         };
-        var pathMatched = 'path' in config && config.path === $route.path;
-        var nameMatched = 'name' in config && config.name === $route.name;
-        return pathMatched || nameMatched;
+        return !!$route.matched.find(val => {
+          var pathMatched = 'path' in config && config.path === val.path;
+          var nameMatched = 'name' in config && config.name === val.name;
+          return pathMatched || nameMatched;
+        });
       }
 
       return ((_props$name = props.name) != null ? _props$name : index.value) === modelValue;

package/es/uploader/Uploader.js

@@ -1,5 +1,5 @@
 import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
-import { ref, reactive, defineComponent } from 'vue'; // Utils
+import { ref, reactive, defineComponent, onBeforeUnmount } from 'vue'; // Utils
 
 import { pick, extend, isPromise, truthProp, numericProp, getSizeStyle, makeArrayProp, makeStringProp, makeNumericProp } from '../utils';
 import { bem, name, toArray, isOversize, filterFiles, isImageFile, readFileContent } from './utils'; // Composables
@@ -50,6 +50,7 @@ export default defineComponent({
       slots
     } = _ref;
     var inputRef = ref();
+    var urls = [];
 
     var getDetail = function (index) {
       if (index === void 0) {
@@ -182,7 +183,14 @@ export default defineComponent({
     var previewImage = item => {
       if (props.previewFullImage) {
         var imageFiles = props.modelValue.filter(isImageFile);
-        var images = imageFiles.map(item => item.content || item.url).filter(Boolean);
+        var images = imageFiles.map(item => {
+          if (item.file && !item.url) {
+            item.url = URL.createObjectURL(item.file);
+            urls.push(item.url);
+          }
+
+          return item.url;
+        }).filter(Boolean);
         imagePreview = ImagePreview(extend({
           images,
           startPosition: imageFiles.indexOf(item),
@@ -269,6 +277,9 @@ export default defineComponent({
       }
     };
 
+    onBeforeUnmount(() => {
+      urls.forEach(url => URL.revokeObjectURL(url));
+    });
     useExpose({
       chooseFile,
       closeImagePreview

package/lib/calendar/Calendar.js

@@ -237,7 +237,7 @@ var _default = (0, _vue.defineComponent)({
         months.value.some((month, index) => {
           if ((0, _utils2.compareMonth)(month, targetDate) === 0) {
             if (bodyRef.value) {
-              monthRefs.value[index].scrollIntoView(bodyRef.value);
+              monthRefs.value[index].scrollToDate(bodyRef.value, targetDate);
             }
 
             return true;
@@ -247,10 +247,9 @@ var _default = (0, _vue.defineComponent)({
         });
         onScroll();
       });
-    }; // scroll to current month
-
+    };
 
-    var scrollIntoView = () => {
+    var scrollToCurrentDate = () => {
       if (props.poppable && !props.show) {
         return;
       }
@@ -272,7 +271,7 @@ var _default = (0, _vue.defineComponent)({
         // add Math.floor to avoid decimal height issues
         // https://github.com/youzan/vant/issues/5640
         bodyHeight = Math.floor((0, _use.useRect)(bodyRef).height);
-        scrollIntoView();
+        scrollToCurrentDate();
       });
     };
 
@@ -282,7 +281,7 @@ var _default = (0, _vue.defineComponent)({
       }
 
       currentDate.value = date;
-      scrollIntoView();
+      scrollToCurrentDate();
     };
 
     var checkRange = date => {
@@ -320,13 +319,8 @@ var _default = (0, _vue.defineComponent)({
         var valid = checkRange(date);
 
         if (!valid) {
-          // auto selected to max range if showConfirm
-          if (props.showConfirm) {
-            setCurrentDate([date[0], (0, _utils2.getDayByOffset)(date[0], +props.maxRange - 1)]);
-          } else {
-            setCurrentDate(date);
-          }
-
+          // auto selected to max range
+          setCurrentDate([date[0], (0, _utils2.getDayByOffset)(date[0], +props.maxRange - 1)]);
           return;
         }
       }
@@ -484,7 +478,7 @@ var _default = (0, _vue.defineComponent)({
       }
 
       currentDate.value = value;
-      scrollIntoView();
+      scrollToCurrentDate();
     });
     (0, _useExpose.useExpose)({
       reset,

package/lib/calendar/CalendarMonth.js

@@ -72,15 +72,6 @@ var _default = (0, _vue.defineComponent)({
 
     var getTitle = () => title.value;
 
-    var scrollIntoView = body => {
-      var el = props.showSubtitle ? daysRef.value : monthRef.value;
-
-      if (el) {
-        var scrollTop = (0, _use.useRect)(el).top - (0, _use.useRect)(body).top + body.scrollTop;
-        (0, _utils.setScrollTop)(body, scrollTop);
-      }
-    };
-
     var getMultipleDayType = day => {
       var isSelected = date => props.currentDate.some(item => (0, _utils3.compareDay)(item, date) === 0);
 
@@ -233,6 +224,16 @@ var _default = (0, _vue.defineComponent)({
     });
     var disabledDays = (0, _vue.computed)(() => days.value.filter(day => day.type === 'disabled'));
 
+    var scrollToDate = (body, targetDate) => {
+      if (daysRef.value) {
+        var daysRect = (0, _use.useRect)(daysRef.value);
+        var totalRows = placeholders.value.length;
+        var currentRow = Math.ceil((targetDate.getDate() + offset.value) / 7);
+        var rowOffset = (currentRow - 1) * daysRect.height / totalRows;
+        (0, _utils.setScrollTop)(body, daysRect.top + rowOffset + body.scrollTop - (0, _use.useRect)(body).top);
+      }
+    };
+
     var renderDay = (item, index) => (0, _vue.createVNode)(_CalendarDay.default, {
       "item": item,
       "index": index,
@@ -252,7 +253,7 @@ var _default = (0, _vue.defineComponent)({
       getTitle,
       getHeight: () => height.value,
       setVisible,
-      scrollIntoView,
+      scrollToDate,
       disabledDays
     });
     return () => (0, _vue.createVNode)("div", {

package/lib/calendar/types.d.ts

@@ -21,6 +21,6 @@ export declare type CalendarMonthInstance = ComponentPublicInstance<CalendarMont
     getTitle: () => string;
     getHeight: () => number;
     setVisible: (value?: boolean | undefined) => void;
-    scrollIntoView: (body: Element) => void;
+    scrollToDate: (body: Element, targetDate: Date) => void;
     disabledDays: Ref<ComputedRef<CalendarDayItem[]>>;
 }>;