docs: improve Form demo (#9149)

src/address-edit/AddressEdit.tsx

@@ -355,8 +355,7 @@ export default defineComponent({
               v-show={props.showArea}
               readonly
               label={t('area')}
-              clickable={!disableArea}
-              rightIcon={!disableArea ? 'arrow' : undefined}
+              is-link={!disableArea}
               modelValue={areaText.value}
               placeholder={props.areaPlaceholder || t('areaPlaceholder')}
               errorMessage={errorInfo.areaCode}

src/address-edit/test/__snapshots__/demo.spec.ts.snap

@@ -50,12 +50,10 @@ exports[`should render demo and match snapshot 1`] = `
                    readonly
                    placeholder="Area"
             >
-            <div class="van-field__right-icon">
-              <i class="van-badge__wrapper van-icon van-icon-arrow">
-              </i>
-            </div>
           </div>
         </div>
+        <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+        </i>
       </div>
       <div class="van-cell van-field van-address-edit-detail">
         <div class="van-cell__title van-field__label">

src/address-edit/test/__snapshots__/index.spec.js.snap

@@ -55,12 +55,10 @@ exports[`should render AddressEdit correctly 1`] = `
                  readonly
                  placeholder="Area"
           >
-          <div class="van-field__right-icon">
-            <i class="van-badge__wrapper van-icon van-icon-arrow">
-            </i>
-          </div>
         </div>
       </div>
+      <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      </i>
     </div>
     <div class="van-cell van-field van-address-edit-detail">
       <div class="van-cell__title van-field__label">
@@ -142,12 +140,10 @@ exports[`should render AddressEdit with props correctly 1`] = `
                  readonly
                  placeholder="Area"
           >
-          <div class="van-field__right-icon">
-            <i class="van-badge__wrapper van-icon van-icon-arrow">
-            </i>
-          </div>
         </div>
       </div>
+      <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      </i>
     </div>
     <div class="van-cell van-field van-address-edit-detail">
       <div class="van-cell__title van-field__label">
@@ -270,15 +266,13 @@ exports[`should valid area code and render error message correctly 1`] = `
              readonly
              placeholder="Area"
       >
-      <div class="van-field__right-icon">
-        <i class="van-badge__wrapper van-icon van-icon-arrow">
-        </i>
-      </div>
     </div>
     <div class="van-field__error-message">
       Please select a receiving area
     </div>
   </div>
+  <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+  </i>
 </div>
 `;
 
@@ -299,12 +293,10 @@ exports[`should valid area code and render error message correctly 2`] = `
              readonly
              placeholder="Area"
       >
-      <div class="van-field__right-icon">
-        <i class="van-badge__wrapper van-icon van-icon-arrow">
-        </i>
-      </div>
     </div>
   </div>
+  <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+  </i>
 </div>
 `;
 

src/form/README.md

@@ -318,8 +318,8 @@ export default {
 ```html
 <van-field
   v-model="state.value"
+  is-link
   readonly
-  clickable
   name="picker"
   label="Picker"
   placeholder="Select city"
@@ -364,8 +364,8 @@ export default {
 ```html
 <van-field
   v-model="state.value"
+  is-link
   readonly
-  clickable
   name="datetimePicker"
   label="Datetime Picker"
   placeholder="Select time"
@@ -407,8 +407,8 @@ export default {
 ```html
 <van-field
   v-model="state.value"
+  is-link
   readonly
-  clickable
   name="area"
   label="Area Picker"
   placeholder="Select area"
@@ -454,8 +454,8 @@ export default {
 ```html
 <van-field
   v-model="state.value"
+  is-link
   readonly
-  clickable
   name="calendar"
   label="Calendar"
   placeholder="Select date"

src/form/README.zh-CN.md

@@ -345,8 +345,8 @@ export default {
 ```html
 <van-field
   v-model="state.value"
+  is-link
   readonly
-  clickable
   name="picker"
   label="选择器"
   placeholder="点击选择城市"
@@ -393,8 +393,8 @@ export default {
 ```html
 <van-field
   v-model="state.value"
+  is-link
   readonly
-  clickable
   name="datetimePicker"
   label="时间选择"
   placeholder="点击选择时间"
@@ -438,8 +438,8 @@ export default {
 ```html
 <van-field
   v-model="state.value"
+  is-link
   readonly
-  clickable
   name="area"
   label="地区选择"
   placeholder="点击选择省市区"
@@ -487,8 +487,8 @@ export default {
 ```html
 <van-field
   v-model="state.value"
+  is-link
   readonly
-  clickable
   name="calendar"
   label="日历"
   placeholder="点击选择日期"

src/form/demo/FieldTypeArea.vue

@@ -1,8 +1,8 @@
 <template>
   <van-field
     v-model="value"
+    is-link
     readonly
-    clickable
     name="area"
     :label="t('picker')"
     :placeholder="t('placeholder')"

src/form/demo/FieldTypeCalendar.vue

@@ -1,8 +1,8 @@
 <template>
   <van-field
     v-model="value"
+    is-link
     readonly
-    clickable
     name="calendar"
     :label="t('calendar')"
     :placeholder="t('placeholder')"

src/form/demo/FieldTypeDatetimePicker.vue

@@ -1,8 +1,8 @@
 <template>
   <van-field
     v-model="value"
+    is-link
     readonly
-    clickable
     name="datetimePicker"
     :label="t('label')"
     :placeholder="t('placeholder')"

src/form/demo/FieldTypePicker.vue

@@ -1,8 +1,8 @@
 <template>
   <van-field
     v-model="value"
+    is-link
     readonly
-    clickable
     name="picker"
     :label="t('picker')"
     :placeholder="t('placeholder')"

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

@@ -451,6 +451,8 @@ exports[`should render demo and match snapshot 1`] = `
             >
           </div>
         </div>
+        <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+        </i>
       </div>
       <div class="van-cell van-cell--clickable van-field"
            role="button"
@@ -471,6 +473,8 @@ exports[`should render demo and match snapshot 1`] = `
             >
           </div>
         </div>
+        <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+        </i>
       </div>
       <div class="van-cell van-cell--clickable van-field"
            role="button"
@@ -491,6 +495,8 @@ exports[`should render demo and match snapshot 1`] = `
             >
           </div>
         </div>
+        <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+        </i>
       </div>
       <div class="van-cell van-cell--clickable van-field"
            role="button"
@@ -511,6 +517,8 @@ exports[`should render demo and match snapshot 1`] = `
             >
           </div>
         </div>
+        <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+        </i>
       </div>
     </div>
     <div style="margin: 16px 16px 0px;">

src/picker/README.md

@@ -217,8 +217,8 @@ export default {
 ```html
 <van-field
   v-model="state.value"
+  is-link
   readonly
-  clickable
   label="City"
   placeholder="Choose City"
   @click="state.showPicker = true"

src/picker/README.zh-CN.md

@@ -241,8 +241,8 @@ export default {
 ```html
 <van-field
   v-model="state.value"
+  is-link
   readonly
-  clickable
   label="城市"
   placeholder="选择城市"
   @click="state.showPicker = true"

src/picker/demo/index.vue

@@ -49,8 +49,8 @@
   <demo-block card v-if="!isWeapp" :title="t('withPopup')">
     <van-field
       v-model="fieldValue"
+      is-link
       readonly
-      clickable
       :label="t('city')"
       :placeholder="t('chooseCity')"
       @click="onClickField"

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

@@ -692,6 +692,8 @@ exports[`should render demo and match snapshot 1`] = `
         >
       </div>
     </div>
+    <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+    </i>
   </div>
   <transition-stub>
   </transition-stub>