chore: fix all typos (#9053)

docs/markdown/changelog.en-US.md

@@ -317,7 +317,7 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
 **Bug Fixes**
 
 - ActionSheet: fix safe-area-inset-bottom prop not work [#8085](https://github.com/youzan/vant/issues/8085)
-- DateTimePicker: fix incorrecrt inital value [#8193](https://github.com/youzan/vant/issues/8193)
+- DateTimePicker: fix incorrect initial value [#8193](https://github.com/youzan/vant/issues/8193)
 - Form: may scroll to incorrect field after submitted [#8159](https://github.com/youzan/vant/issues/8159)
 - ImagePreview: fix incorrect image display during the second call [#8060](https://github.com/youzan/vant/issues/8060)
 - IndexBar: failed to render active anchor when inited [#8164](https://github.com/youzan/vant/issues/8164)

src/area/README.md

@@ -20,7 +20,7 @@ app.use(Area);
 
 ### Basic Usage
 
-To initailize `Area` component, `area-list` property is required.
+To initialize `Area` component, `area-list` property is required.
 
 ```html
 <van-area title="Title" :area-list="areaList" />

src/button/README.md

@@ -45,8 +45,8 @@ app.use(Button);
 ### Disabled
 
 ```html
-<van-button disabled type="primary">Diabled</van-button>
+<van-button disabled type="primary">Disabled</van-button>
-<van-button disabled type="primary">Diabled</van-button>
+<van-button disabled type="primary">Disabled</van-button>
 ```
 
 ### Loading

src/button/README.zh-CN.md

@@ -203,8 +203,8 @@ app.use(Button);
 | --van-button-danger-background-color | _var(--van-danger-color)_ | - |
 | --van-button-danger-border-color | _var(--van-danger-color)_ | - |
 | --van-button-warning-color | _var(--van-white)_ | - |
-| --van-button-warning-background-color | _var(--van-organge)_ | - |
+| --van-button-warning-background-color | _var(--van-orange)_ | - |
-| --van-button-warning-border-color | _var(--van-organge)_ | - |
+| --van-button-warning-border-color | _var(--van-orange)_ | - |
 | --van-button-border-width | _var(--van-border-width-base)_ | - |
 | --van-button-border-radius | _var(--van-border-radius-sm)_ | - |
 | --van-button-round-border-radius | _var(--van-border-radius-max)_ | - |

src/circle/README.md

@@ -134,7 +134,7 @@ export default {
 | speed | Animate speed（rate/s） | _number \| string_ | `0` |
 | text | Text | _string_ | - |
 | stroke-width | Stroke width | _number \| string_ | `40` |
-| stroke-linecap | Stroke linecap，can be set to `sqaure` `butt` | _string_ | `round` |
+| stroke-linecap | Stroke linecap，can be set to `square` `butt` | _string_ | `round` |
 | clockwise | Whether to be clockwise | _boolean_ | `true` |
 
 ### Slots

src/circle/README.zh-CN.md

@@ -146,7 +146,7 @@ export default {
 | speed | 动画速度（单位为 rate/s） | _number \| string_ | `0` |
 | text | 文字 | _string_ | - |
 | stroke-width | 进度条宽度 | _number \| string_ | `40` |
-| stroke-linecap | 进度条端点的形状，可选值为 `sqaure` `butt` | _string_ | `round` |
+| stroke-linecap | 进度条端点的形状，可选值为 `square` `butt` | _string_ | `round` |
 | clockwise | 是否顺时针增加 | _boolean_ | `true` |
 
 ### Slots

src/col/test/__snapshots__/index.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render Col correcly 1`] = `
+exports[`should render Col correctly 1`] = `
 <div class="van-col van-col--8">
 </div>
 `;

src/col/test/index.spec.tsx

@@ -2,7 +2,7 @@ import { Col } from '..';
 import { Row } from '../../row';
 import { mount } from '../../../test';
 
-test('should render Col correcly', () => {
+test('should render Col correctly', () => {
   const wrapper = mount(Col, {
     props: {
       span: 8,

src/datetime-picker/test/index.spec.ts

@@ -45,7 +45,7 @@ test('v-model', async () => {
   expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual(minDate);
 });
 
-test('value has an inital value', async () => {
+test('value has an initial value', async () => {
   const defaultValue = new Date(2020, 0, 0, 0, 0);
   const wrapper = mount(DatePicker, {
     propsData: {

src/datetime-picker/test/time-picker.spec.tsx

@@ -115,7 +115,7 @@ test('change min-minute and emit correct value', async () => {
 test('set max-hour & max-minute smaller than current then emit correct value', async () => {
   const wrapper = mount(TimePicker, {
     props: {
-      modelvalue: '23:59',
+      modelValue: '23:59',
     },
   });
 

src/empty/README.md

@@ -76,7 +76,7 @@ Use the image prop to display different placeholder images.
 | --- | --- | --- | --- |
 | image | Image type，can be set to `error` `network` `search` or image URL | _string_ | `default` |
 | image-size | Image size | _number \| string_ | - |
-| description | Desciption | _string_ | - |
+| description | Description | _string_ | - |
 
 ### Slots
 

src/empty/demo/index.vue

@@ -4,7 +4,7 @@
   </demo-block>
 
   <demo-block :title="t('imageType')">
-    <van-tabs v-model="active">
+    <van-tabs v-model:active="active">
       <van-tab name="error" :title="t('error')">
         <van-empty image="error" :description="t('description')" />
       </van-tab>

src/empty/test/__snapshots__/demo.spec.ts.snap

@@ -12,9 +12,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-tabs van-tabs--line"
+  <div class="van-tabs van-tabs--line">
-       modelvalue="error"
-  >
     <div class="van-tabs__wrap">
       <div role="tablist"
            class="van-tabs__nav van-tabs__nav--line"

src/field/test/index.spec.js

@@ -1,7 +1,7 @@
 import { Field } from '..';
 import { mount } from '../../../test';
 
-test('should emit "update:modelValue" event when after inputing', () => {
+test('should emit "update:modelValue" event when after inputting', () => {
   const wrapper = mount(Field);
   const input = wrapper.find('input');
 
@@ -16,7 +16,7 @@ test('should emit click-input event when input is clicked', () => {
   expect(wrapper.emitted('click-input')[0][0]).toBeTruthy();
 });
 
-test('should evit click-input event when using input slot', () => {
+test('should emit click-input event when using input slot', () => {
   const wrapper = mount(Field, {
     slots: {
       input: () => 'Custom Input',

src/icon/demo/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <van-tabs v-model="tab" sticky>
+  <van-tabs v-model:active="tab" sticky>
     <van-tab :title="t('demo')">
       <demo-block :title="t('basicUsage')">
         <van-row>

src/icon/test/__snapshots__/demo.spec.ts.snap

@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render demo and match snapshot 1`] = `
-<div class="van-tabs van-tabs--line"
+<div class="van-tabs van-tabs--line">
-     modelvalue="0"
->
   <div>
     <div class="van-sticky">
       <div class="van-tabs__wrap">

src/image-preview/README.md

@@ -195,14 +195,14 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get ImagePreview instance and call i
 | index | Custom index | { index: index of current image } |
 | cover | Custom content that covers the image preview | - |
 
-### onClose Parematers
+### onClose Parameters
 
 | Attribute | Description            | Type     |
 | --------- | ---------------------- | -------- |
 | url       | Url of current image   | _number_ |
 | index     | Index of current image | _number_ |
 
-### onScale Parematers
+### onScale Parameters
 
 | Attribute | Description            | Type     |
 | --------- | ---------------------- | -------- |

src/image/README.md

@@ -90,7 +90,7 @@ app.use(Lazyload);
 
 ### fit optional value
 
-| name | desctription |
+| name | description |
 | --- | --- |
 | contain | Keep aspect ratio, fully display the long side of the image |
 | cover | Keep aspect ratio, fully display the short side of the image, cutting the long side |

src/index-bar/demo/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <van-tabs v-model="activeTab">
+  <van-tabs v-model:active="activeTab">
     <van-tab :title="t('basicUsage')">
       <van-index-bar>
         <div v-for="index in indexList" :key="index">

src/index-bar/test/__snapshots__/demo.spec.ts.snap

@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render demo and match snapshot 1`] = `
-<div class="van-tabs van-tabs--line"
+<div class="van-tabs van-tabs--line">
-     modelvalue="0"
->
   <div class="van-tabs__wrap">
     <div role="tablist"
          class="van-tabs__nav van-tabs__nav--line"

src/nav-bar/README.md

@@ -68,7 +68,7 @@ export default {
 | left-arrow | Whether to show left arrow | _boolean_ | `false` |
 | border | Whether to show bottom border | _boolean_ | `true` |
 | fixed | Whether to fixed top | _boolean_ | `false` |
-| placeholder | Whether to generage a placeholder element when fixed | _boolean_ | `false` |
+| placeholder | Whether to generate a placeholder element when fixed | _boolean_ | `false` |
 | z-index | Z-index | _number \| string_ | `1` |
 | safe-area-inset-top | Whether to enable top safe area adaptation | _boolean_ | `false` |
 

src/slider/README.md

@@ -169,8 +169,8 @@ export default {
 | ------------------ | ------------------------------ | ------------------- |
 | update:model-value | Emitted when value is changing | _value: number_     |
 | change             | Emitted after value changed    | _value: number_     |
-| drag-start         | Emitted when start draging     | _event: TouchEvent_ |
+| drag-start         | Emitted when start dragging    | _event: TouchEvent_ |
-| drag-end           | Emitted when end draging       | _event: TouchEvent_ |
+| drag-end           | Emitted when end dragging      | _event: TouchEvent_ |
 
 ### Slots
 

src/slider/Slider.tsx

@@ -58,7 +58,7 @@ export default defineComponent({
     let currentValue: SliderValue;
 
     const root = ref<HTMLElement>();
-    const dragStatus = ref<'start' | 'draging' | ''>();
+    const dragStatus = ref<'start' | 'dragging' | ''>();
     const touch = useTouch();
 
     const scope = computed(() => Number(props.max) - Number(props.min));
@@ -197,7 +197,7 @@ export default defineComponent({
 
       preventDefault(event, true);
       touch.move(event);
-      dragStatus.value = 'draging';
+      dragStatus.value = 'dragging';
 
       const rect = useRect(root);
       const delta = props.vertical ? touch.deltaY.value : touch.deltaX.value;
@@ -218,7 +218,7 @@ export default defineComponent({
         return;
       }
 
-      if (dragStatus.value === 'draging') {
+      if (dragStatus.value === 'dragging') {
         updateValue(currentValue, true);
         emit('drag-end', event);
       }

src/stepper/test/index.spec.ts

@@ -325,7 +325,7 @@ test('should hide input when show-input prop is false', () => {
   expect(wrapper.find('input').isVisible()).toBeFalsy();
 });
 
-test('should limit dicimal length when using decimal-length prop', async () => {
+test('should limit decimal length when using decimal-length prop', async () => {
   const wrapper = mount(Stepper, {
     props: {
       step: 0.2,
@@ -339,7 +339,7 @@ test('should limit dicimal length when using decimal-length prop', async () => {
   expect(wrapper.emitted('update:modelValue')![1]).toEqual(['1.20']);
 });
 
-test('should limit decimal-length when inputing', async () => {
+test('should limit decimal-length when inputting', async () => {
   const wrapper = mount(Stepper, {
     props: {
       step: 0.2,

src/swipe-cell/test/index.spec.js

@@ -110,7 +110,7 @@ test('should emit close event with name when using name prop', () => {
   expect(wrapper.emitted('close')[0]).toEqual([{ name: 'test' }]);
 });
 
-test('should reset transform after short draging', async () => {
+test('should reset transform after short dragging', async () => {
   const wrapper = mount(SwipeCell, defaultProps);
 
   triggerDrag(wrapper, 5, 0);

src/tab/test/index.legacy.js

@@ -61,7 +61,7 @@ test('swipe to switch tab', async () => {
   const onChange = jest.fn();
   const wrapper = mount({
     template: `
-      <van-tabs v-model="active" swipeable @change="onChange">
+      <van-tabs v-model:active="active" swipeable @change="onChange">
         <van-tab title="title1">Text</van-tab>
         <van-tab title="title2">Text</van-tab>
         <van-tab title="title3" disabled>Text</van-tab>
@@ -153,7 +153,7 @@ test('name prop', async () => {
 
   const wrapper = mount({
     template: `
-      <van-tabs v-model="active" @click="onClick" @disabled="onDisabled" @change="onChange">
+      <van-tabs v-model:active="active" @click="onClick" @disabled="onDisabled" @change="onChange">
         <van-tab title="title1" name="a">Text</van-tab>
         <van-tab title="title2" name="b">Text</van-tab>
         <van-tab title="title3" name="c" disabled>Text</van-tab>
@@ -301,7 +301,7 @@ test('rendered event', async () => {
 
   const wrapper = mount({
     template: `
-      <van-tabs v-model="active" @rendered="onRendered">
+      <van-tabs v-model:active="active" @rendered="onRendered">
         <van-tab name="a" title="title1">Text</van-tab>
         <van-tab name="b" title="title2">Title2</van-tab>
       </van-tabs>

src/tabbar/README.md

@@ -171,7 +171,7 @@ export default {
 | active-color | Color of active tab item | _string_ | `#1989fa` |
 | inactive-color | Color of inactive tab item | _string_ | `#7d7e80` |
 | route | Whether to enable route mode | _boolean_ | `false` |
-| placeholder | Whether to generage a placeholder element when fixed | _boolean_ | `false` |
+| placeholder | Whether to generate a placeholder element when fixed | _boolean_ | `false` |
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `false` |
 | before-change | Callback function before changing tabs，return `false` to prevent change，support return Promise | _(name) => boolean \| Promise_ | - |
 

src/toast/README.md

@@ -147,7 +147,7 @@ Toast.resetDefaultOptions('loading');
 | Toast.success | `options \| message` | toast instance | Show success toast |
 | Toast.fail | `options \| message` | toast instance | Show fail toast |
 | Toast.clear | `clearAll: boolean` | `void` | Close toast |
-| Toast.allowMultiple | - | `void` | Allow multlple toast at the same time |
+| Toast.allowMultiple | - | `void` | Allow multiple toast at the same time |
 | Toast.setDefaultOptions | `type \| options` | `void` | Set default options of all toasts |
 | Toast.resetDefaultOptions | `type` | `void` | Reset default options of all toasts |