✨(form-item): 新增 label-position 对齐方式

package/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "1.1.5-alpha.4",
+  "version": "1.1.5-alpha.5",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",

package/component/src/component/form/index.less

@@ -4,6 +4,23 @@
   *zoom: 1;
 }
 
+.layui-form-item-right .layui-form-label {
+  text-align: right;
+}
+
+.layui-form-item-left .layui-form-label {
+  text-align: left;
+}
+
+.layui-form-item-top .layui-form-label {
+  text-align: left;
+  float: none;
+}
+
+.layui-form-item-top > div {
+  margin-left: 0;
+}
+
 .layui-form-item:after {
   content: "\20";
   clear: both;

package/component/src/component/formItem/index.vue

@@ -32,6 +32,7 @@ export interface LayFormItemProps {
   prop?: string;
   mode?: string;
   label?: string;
+  labelPosition?: string;
   errorMessage?: string;
   rules?: Rule;
   required?: boolean;
@@ -39,6 +40,7 @@ export interface LayFormItemProps {
 
 const props = withDefaults(defineProps<LayFormItemProps>(), {
   mode: "block",
+  labelPosition: 'right'
 });
 
 const layForm = inject("LayForm", {} as LayFormContext);
@@ -163,7 +165,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="layui-form-item" ref="formItemRef">
+  <div class="layui-form-item" :class="[`layui-form-item-${labelPosition}`]" ref="formItemRef">
     <label class="layui-form-label">
       <span
         v-if="props.prop && isRequired"

package/document/src/document/zh-CN/components/form.md

@@ -70,6 +70,78 @@ export default {
 
 :::
 
+::: title 对齐方式
+:::
+
+::: demo
+
+<template>
+  <lay-form :model="model">
+    <lay-form-item label="账户" :label-position="labelPosition" prop="username">
+      <lay-input v-model="model.username"></lay-input>
+    </lay-form-item>
+    <lay-form-item label="密码" :label-position="labelPosition" prop="password">
+      <lay-input v-model="model.password" type="password"></lay-input>
+    </lay-form-item>
+    <lay-form-item label="爱好" :label-position="labelPosition" prop="hobby">
+      <lay-select v-model="model.hobby">
+        <lay-select-option value="1" label="学习"></lay-select-option>
+        <lay-select-option value="2" label="编码"></lay-select-option>
+        <lay-select-option value="3" label="运动"></lay-select-option>
+      </lay-select>
+    </lay-form-item>
+    <lay-form-item label="特长" :label-position="labelPosition" prop="specialty">
+      <lay-radio v-model="labelPosition" name="labelPosition" label="left">左</lay-radio>
+      <lay-radio v-model="labelPosition" name="labelPosition" label="top">上</lay-radio>
+      <lay-radio v-model="labelPosition" name="labelPosition" label="right">右</lay-radio>
+    </lay-form-item>
+    <lay-form-item label="描述" :label-position="labelPosition" prop="desc">
+      <lay-textarea placeholder="请输入描述" v-model="model.desc"></lay-textarea>
+    </lay-form-item>
+    <lay-form-item>
+      <lay-button @click="submitClick">提交</lay-button>
+    </lay-form-item>
+  </lay-form>
+</template>
+
+<script>
+import { ref, reactive } from 'vue'
+import {layer} from '@layui/layer-vue'
+
+export default {
+  setup() {
+
+    const model = reactive({
+        username: "admin",
+        password: "123456",
+        specialty: "1"
+    })
+    
+    const labelPosition = ref('right');
+
+    const submitClick = function(){
+      layer.open({
+        type: 1,
+        title:"表单结果", 
+        content: `<div style="padding: 10px">${JSON.stringify(model)}</div>`, 
+        shade: false,
+        isHtmlFragment: true,
+        btn : [{ text: '确认', callback(index) {  layer.close(index) }}],
+        area : '500px'
+      });
+    };
+
+    return {
+      model,
+      submitClick,
+      labelPosition
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 表单基本校验功能
 :::
 

package/document/src/document/zh-CN/guide/changelog.md

@@ -16,11 +16,11 @@
       <li> 
         <h3>1.1.5 <span class="layui-badge-rim">2022-06-04</span></h3> 
         <ul>
-          <li>[修复] tab 组件 brief 风格 background-color 为 transparent 透明色</li>
           <li>[修复] tab 组件 brief 风格 position 为 bottom 时 active-bar 的位置</li>
+          <li>[修复] tab 组件 brief 风格 background-color 为 transparent 透明色</li>
           <li>[优化] tab 组件 tab-panel 宽度超出当前组件宽度时, 增加左右滑动的能力</li>
-          <li>[优化] layer 组件 夜间模式 无边框的问题</li>
+          <li>[优化] input 组件 foucs 状态, 新增 global-checked-color 选中色</li>
-          <li>[其他] 本地化 docsearch 静态资源</li>
+          <li>[优化] layer 组件 夜间模式 样式, 新增 border 边框样式</li>
         </ul>
       </li>
     </ul>