docs(Field): add label-align demo (#11121)

* fix(cli): duplicate vue in first dev

* docs: add changelog

packages/create-vant-cli-app/generators/vue3/package.json.tpl

@@ -31,7 +31,7 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@vant/cli": "^4.0.0",
+    "@vant/cli": "^5.0.0",
     "vue": "^3.0.0",
     "sass": "^1.49.7"
   },

packages/create-vant-cli-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vant-cli-app",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Create Vant CLI App",
   "main": "lib/index.js",
   "bin": {

packages/vant-cli/changelog.md

@@ -1,5 +1,11 @@
 # 更新日志
 
+## v5.0.2
+
+`2022-10-07`
+
+- 修复首次运行 dev 时 vite 引入了两份 Vue 代码导致渲染失败的问题
+
 ## v5.0.1
 
 `2022-10-06`

packages/vant-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/cli",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "type": "module",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

packages/vant-cli/src/config/vite.site.ts

@@ -144,6 +144,11 @@ export function getViteConfigForSiteDev(): InlineConfig {
   return {
     root: SITE_SRC_DIR,
 
+    optimizeDeps: {
+      // https://github.com/youzan/vant/issues/10930
+      include: ['vue', 'vue-router'],
+    },
+
     plugins: [
       vitePluginGenVantBaseCode(),
       vitePluginVue({

packages/vant/src/field/README.md

@@ -241,6 +241,21 @@ Use `input-align` prop to align the input value.
 </van-cell-group>
 ```
 
+### Label Align
+
+Use `label-align` prop to align the input value.
+
+```html
+<van-cell-group inset>
+  <van-field
+    v-model="value"
+    label="Tel"
+    placeholder="Please input tel number"
+    input-align="top"
+  />
+</van-cell-group>
+```
+
 ## API
 
 ### Props

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

@@ -260,6 +260,21 @@ export default {
 </van-cell-group>
 ```
 
+### 输入框文本位置
+
+通过 `label-align` 属性可以设置输入框文本的位置，可选值为 `center`、`right`、`top`。
+
+```html
+<van-cell-group inset>
+  <van-field
+    v-model="value"
+    label="手机号"
+    placeholder="请输入手机号"
+    input-align="top"
+  />
+</van-cell-group>
+```
+
 ## API
 
 ### Props

packages/vant/src/field/demo/LabelAlign.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import VanField from '..';
+import VanCellGroup from '../../cell-group';
+import { ref } from 'vue';
+import { useTranslate } from '../../../docs/site';
+
+const t = useTranslate({
+  'zh-CN': {
+    text: '手机号',
+    labelAlign: '输入框文本位置',
+    alignPlaceHolder: '请输入手机号',
+  },
+  'en-US': {
+    text: 'Tel',
+    labelAlign: 'Label Align',
+    alignPlaceHolder: 'Please input tel number',
+  },
+});
+
+const value = ref('');
+</script>
+
+<template>
+  <demo-block :title="t('labelAlign')">
+    <van-cell-group inset>
+      <van-field
+        v-model="value"
+        :label="t('text')"
+        :placeholder="t('alignPlaceHolder')"
+        label-align="top"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>

packages/vant/src/field/demo/index.vue

@@ -9,6 +9,7 @@ import FormatValue from './FormatValue.vue';
 import Autosize from './Autosize.vue';
 import ShowWordLimit from './ShowWordLimit.vue';
 import InputAlign from './InputAlign.vue';
+import LabelAlign from './LabelAlign.vue';
 </script>
 
 <template>
@@ -22,4 +23,5 @@ import InputAlign from './InputAlign.vue';
   <autosize />
   <show-word-limit />
   <input-align />
+  <label-align />
 </template>

packages/vant/src/field/index.less

@@ -44,6 +44,7 @@
       display: flex;
       width: 100%;
       text-align: left;
+      margin-bottom: var(--van-padding-base);
     }
 
     &--required {

packages/vant/src/field/test/__snapshots__/demo.spec.ts.snap

@@ -417,4 +417,27 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
 </div>
+<div>
+  <div class="van-cell-group van-cell-group--inset">
+    <div class="van-cell van-field van-field--label-top">
+      <div class="van-cell__title van-field__label van-field__label--top">
+        <label id="van-field-label"
+               for="van-field-input"
+        >
+          Tel
+        </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"
+                 placeholder="Please input tel number"
+                 aria-labelledby="van-field-label"
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;