fix(Field): icon position when label align is top (#11112)

Co-authored-by: redsun1992 <sunhao@starwrap.net>

packages/vant-cli/src/compiler/gen-site-desktop-shared.ts

@@ -1,12 +1,7 @@
 import glob from 'fast-glob';
 import { join, parse } from 'path';
 import { existsSync, readFileSync, readdirSync } from 'fs';
-import {
-  isDev,
-  pascalize,
-  getVantConfig,
-  normalizePath,
-} from '../common/index.js';
+import { pascalize, getVantConfig, normalizePath } from '../common/index.js';
 import {
   SRC_DIR,
   DOCS_DIR,
@@ -80,10 +75,7 @@ function genImportDocuments(items: DocumentItem[]) {
   return items
     .map((item) => {
       const path = normalizePath(item.path);
-      if (isDev()) {
-        return `const ${item.name} = () => import('${path}');`;
-      }
-      return `import ${item.name} from '${path}';`;
+      return `const ${item.name} = () => import('${path}');`;
     })
     .join('\n');
 }

packages/vant/src/field/Field.tsx

@@ -589,16 +589,18 @@ export default defineComponent({
       const Label = renderLabel();
       const LeftIcon = renderLeftIcon();
 
+      const renderTitle = () =>
+        labelAlign === 'top' ? [LeftIcon, Label] : Label;
+
       return (
         <Cell
           v-slots={{
-            icon: LeftIcon ? () => LeftIcon : null,
-            title: Label ? () => Label : null,
+            icon: LeftIcon && labelAlign !== 'top' ? () => LeftIcon : null,
+            title: Label || labelAlign === 'top' ? renderTitle : null,
             value: renderFieldBody,
             extra: slots.extra,
           }}
           size={props.size}
-          icon={props.leftIcon}
           class={bem({
             error: showError.value,
             disabled,

packages/vant/src/field/README.md

@@ -276,7 +276,7 @@ Use `input-align` prop to align the input value.
 | arrow-direction | Can be set to `left` `up` `down` | _string_ | `right` |
 | label-class | Label className | _string \| Array \| object_ | - |
 | label-width | Label width | _number \| string_ | `6.2em` |
-| label-align | Label align, can be set to `center` `right` | _FieldTextAlign_ | `left` |
+| label-align | Label align, can be set to `center` `right` `top` | _FieldTextAlign_ | `left` |
 | input-align | Input align, can be set to `center` `right` | _FieldTextAlign_ | `left` |
 | autosize | Textarea auto resize, can accept an object,<br>e.g. { maxHeight: 100, minHeight: 50 } | _boolean \| FieldAutosizeConfig_ | `false` |
 | left-icon | Left side icon name | _string_ | - |

packages/vant/src/field/README.zh-CN.md

@@ -295,7 +295,7 @@ export default {
 | arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | `right` |
 | label-class | 左侧文本额外类名 | _string \| Array \| object_ | - |
 | label-width | 左侧文本宽度，默认单位为 `px` | _number \| string_ | `6.2em` |
-| label-align | 左侧文本对齐方式，可选值为 `center` `right` | _FieldTextAlign_ | `left` |
+| label-align | 左侧文本对齐方式，可选值为 `center` `right` `top` | _FieldTextAlign_ | `left` |
 | input-align | 输入框对齐方式，可选值为 `center` `right` | _FieldTextAlign_ | `left` |
 | autosize | 是否自适应内容高度，只对 textarea 有效，<br>可传入对象,如 { maxHeight: 100, minHeight: 50 }，<br>单位为`px` | _boolean \| FieldAutosizeConfig_ | `false` |
 | left-icon | 左侧图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |

packages/vant/src/field/index.less

@@ -21,6 +21,8 @@
 }
 
 .van-field {
+  flex-wrap: wrap;
+
   &__label {
     flex: none;
     box-sizing: border-box;
@@ -38,6 +40,12 @@
       text-align: right;
     }
 
+    &--top {
+      display: flex;
+      width: 100%;
+      text-align: left;
+    }
+
     &--required {
       &::before {
         margin-right: 2px;

packages/vant/src/field/test/__snapshots__/index.spec.js.snap

@@ -47,6 +47,31 @@ exports[`should render label slot correctly 1`] = `
 </div>
 `;
 
+exports[`should render left icon inside label when label-align is top 1`] = `
+<div class="van-cell van-field van-field--label-top">
+  <div class="van-cell__title van-field__label van-field__label--top">
+    <div class="van-field__left-icon">
+      <i class="van-badge__wrapper van-icon van-icon-success">
+      </i>
+    </div>
+    <label id="van-field-label"
+           for="van-field-input"
+    >
+      Label
+    </label>
+  </div>
+  <div class="van-cell__value van-field__value">
+    <div class="van-field__body">
+      <input type="text"
+             id="van-field-input"
+             class="van-field__control"
+             aria-labelledby="van-field-label"
+      >
+    </div>
+  </div>
+</div>
+`;
+
 exports[`should render textarea when type is textarea 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__value van-field__value">

packages/vant/src/field/test/index.spec.js

@@ -509,3 +509,14 @@ test('should render word limit with emoji correctly', () => {
   });
   expect(wrapper.find('.van-field__word-limit').html()).toMatchSnapshot();
 });
+
+test('should render left icon inside label when label-align is top', () => {
+  const wrapper = mount(Field, {
+    props: {
+      label: 'Label',
+      labelAlign: 'top',
+      leftIcon: 'success',
+    },
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});

packages/vant/src/field/types.ts

@@ -28,7 +28,7 @@ export type FieldType =
   | 'textarea'
   | 'datetime-local';
 
-export type FieldTextAlign = 'left' | 'center' | 'right';
+export type FieldTextAlign = 'left' | 'center' | 'right' | 'top';
 
 export type FieldClearTrigger = 'always' | 'focus';
 

packages/vant/src/form/README.md

@@ -492,7 +492,7 @@ export default {
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
 | label-width | Field label width | _number \| string_ | `6.2em` |
-| label-align | Field label align, can be set to `center` `right` | _string_ | `left` |
+| label-align | Field label align, can be set to `center` `right` `top` | _string_ | `left` |
 | input-align | Field input align, can be set to `center` `right` | _string_ | `left` |
 | error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` |
 | validate-trigger | When to validate the form, can be set to `onChange`、`onSubmit`, supports using array to set multiple values | _string \| string[]_ | `onBlur` |

packages/vant/src/form/README.zh-CN.md

@@ -524,7 +524,7 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | label-width | 表单项 label 宽度，默认单位为`px` | _number \| string_ | `6.2em` |
-| label-align | 表单项 label 对齐方式，可选值为 `center` `right` | _string_ | `left` |
+| label-align | 表单项 label 对齐方式，可选值为 `center` `right` `top` | _string_ | `left` |
 | input-align | 输入框对齐方式，可选值为 `center` `right` | _string_ | `left` |
 | error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `left` |
 | validate-trigger | 表单校验触发时机，可选值为 `onChange`、`onSubmit`，支持通过数组同时设置多个值，具体用法见下方表格 | _string \| string[]_ | `onBlur` |