pref(form): 新增 form 组件 submit 事件 model 属性

docs/docs/zh-CN/components/animation.md

@@ -69,7 +69,6 @@ export default {
 :::
 
 ::: field 动画类名
-
 :::
 
 | Name   | Description | Accepted Values  |

docs/docs/zh-CN/components/avatar.md

@@ -80,7 +80,7 @@ export default {
 
 :::
 
-::: 头像属性
+::: field 头像属性
 :::
 
 |        |      |                |

docs/docs/zh-CN/components/badge.md

@@ -1,3 +1,6 @@
+::: field 基础使用
+:::
+
 ::: demo
 
 <template>
@@ -34,7 +37,6 @@ export default {
 :::
 
 ::: field 徽章属性
-
 :::
 
 |       |      |                                               |

docs/docs/zh-CN/components/form.md

@@ -1,138 +1,40 @@
-::: demo
+::: field 基础使用
-
-<template>
-  <lay-input v-model="data"></lay-input>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const data = ref("内容");
-
-    return {
-      data
-    }
-  }
-}
-</script>
-
 :::
 
 ::: demo
 
 <template>
-  <lay-input placeholder="请输入密码" type="password"></lay-input>
+  <lay-form @submit="submit" :model="model">
-</template>
+    <lay-form-item label="账户">
-
+      <lay-input v-model="model.username"></lay-input>
-<script>
+    </lay-form-item>
-import { ref } from 'vue'
+    <lay-form-item label="密码">
-
+      <lay-input v-model="model.password"></lay-input>
-export default {
+    </lay-form-item>
-  setup() {
+    <lay-form-item>
-
+      <lay-button naive-type="submit">提交</lay-button>
-    return {
+    </lay-form-item>
-
-    }
-  }
-}
-</script>
-
-:::
-
-::: demo
-
-<template>
-  <lay-textarea placeholder="请输入密码"></lay-textarea>
-  <br>
-  <lay-textarea placeholder="请输入密码" v-model="data"></lay-textarea>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const data = ref("内容");
-
-    return {
-      data
-    }
-  }
-}
-</script>
-
-:::
-
-::: demo
-
-<template>
-  <lay-switch v-model="active"></lay-switch>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const active = ref(true);
-
-    return {
-        active
-    }
-  }
-}
-</script>
-
-:::
-
-::: demo
-
-<template>
-  <lay-switch v-model="active" disabled></lay-switch>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const active = ref(true);
-
-    return {
-        active
-    }
-  }
-}
-</script>
-
-:::
-
-::: demo
-
-<template>
-  <lay-form>
-    <lay-checkbox v-model="checked" label="1">写作</lay-checkbox>
-    <lay-checkbox v-model="checked" label="2">画画</lay-checkbox>
-    <lay-checkbox v-model="checked" label="3">运动</lay-checkbox>
   </lay-form>
 </template>
 
 <script>
-import { ref } from 'vue'
+import { ref, reactive } from 'vue'
 
 export default {
   setup() {
 
-    const checked = ref(['1','2']);
+    const model = reactive({
+        username: "admin",
+        password: "admin"
+    })
+
+    const submit = function(val) {
+      alert(JSON.stringify(val))
+    }
 
     return {
-        checked
+      model,
+      submit
     }
   }
 }
@@ -140,84 +42,23 @@ export default {
 
 :::
 
-::: demo
+::: field 表单事件
-
-<template>
-  <lay-form>
-    <lay-checkbox name="like" skin="primary" v-model="checked" label="1">写作</lay-checkbox>
-    <lay-checkbox name="like" skin="primary" v-model="checked" label="2">画画</lay-checkbox>
-    <lay-checkbox name="like" skin="primary" v-model="checked" label="3">运动</lay-checkbox>
-  </lay-form>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const checked = ref(['1','2']);
-
-    return {
-        checked
-    }
-  }
-}
-</script>
-
 :::
 
-::: demo
+| Name   | Description | Accepted Values  |
-
+| ----- | ------ | -------------- |
-<template>
+| model | 表单绑定值 | -- |
-  <lay-form>
-    <lay-radio v-model="selected" name="action" label="1">写作</lay-radio>
-    <lay-radio v-model="selected" name="action" label="2">画画</lay-radio>
-    <lay-radio v-model="selected" name="action" label="3">运动</lay-radio>
-  </lay-form>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const selected = ref("1");
-
-    return {
-        selected
-    }
-  }
-}
-</script>
 
+::: field 表单事件
 :::
 
-::: demo
+| Name   | Description | Accepted Values  |
-
+| ----- | ------ | -------------- |
-<template>
+| submit | 提交事件 | -- |
-  <lay-form>
-    <lay-select v-model="select">
-      <lay-select-option value="beijing" label="北京"></lay-select-option>
-      <lay-select-option value="jinan" label="济南"></lay-select-option>
-    </lay-select>
-  </lay-form>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const select = ref("jinan")
-
-    return {
-      select
-    }
-  }
-}
-</script>
 
+::: field 表单项属性
 :::
+
+| Name   | Description | Accepted Values  |
+| ----- | ------ | -------------- |
+| label | 标题名称 | -- |

docs/docs/zh-CN/components/panel.md

@@ -20,3 +20,10 @@ export default {
 </script>
 
 :::
+
+::: field 面板插槽
+:::
+
+| Name   | Description | Accepted Values  |
+| ----- | ------ | -------------- |
+| default | 默认插槽 | -- |

docs/docs/zh-CN/guide/changelog.md

@@ -4,13 +4,16 @@
 ::: demo
 <template>
 <lay-timeline>
-<lay-timeline-item title="0.1.6">
+<lay-timeline-item title="0.1.7">
-[修复] menu 菜单 selectedKey 选中项 openKeys 打开项 props 双绑。<br>
-[修复] tab 选项卡 v-model 激活项 双绑。<br>
-[修复] tab 选项卡 tab-item 组件套用 for 循环无法获取 props 属性。<br>
 [新增] page 分页 prev 插槽。<br>
 [新增] page 分页 next 插槽。<br>
 [新增] button 按钮 naiveType 属性, 原生 type 属性, 支持 button, submit 可选值。<br>
+[新增] form 表单 model 属性, 共 submit 等事件作为入参。<br>
+[新增] form 表单 submit 事件, 内部 submit 提交回调。<br>
+[修复] menu 菜单 selectedKey 选中项 openKeys 打开项 props 双绑。<br>
+[修复] tab 选项卡 v-model 激活项 双绑。<br>
+[修复] tab 选项卡 tab-item 组件套用 for 循环无法获取 props 属性。<br>
+[重构] tree 树内部逻辑, 优化性能。<br>
 </lay-timeline-item>
 <lay-timeline-item title="0.1.4">
 [新增] button 按钮 loading 属性, 提供 加载 状态。<br>

docs/src/layouts/Layout.vue

@@ -31,7 +31,7 @@
             </a>
           </li>
           <li class="layui-nav-item">
-            <a href="javascript:void(0)"> 0.1.6 </a>
+            <a href="javascript:void(0)"> 0.1.7 </a>
           </li>
         </ul>
       </lay-header>

src/css/layui.css

@@ -3653,7 +3653,6 @@ a cite {
 
 .layui-table-view .layui-table td,
 .layui-table-view .layui-table th {
-  padding: 5px 0px;
   border-top: none;
   border-left: none;
 }

src/module/form/index.vue

@@ -1,7 +1,25 @@
 <template>
-  <form class="layui-form">
+  <form class="layui-form" @submit="submit">
     <slot />
   </form>
 </template>
 
-<script setup name="LayForm" lang="ts"></script>
+<script setup name="LayForm" lang="ts">
+
+const props = withDefaults(
+  defineProps<{
+    model?: object
+  }>(),
+  {
+    model: function(){
+      return {}
+    }
+  }
+)
+
+const emit = defineEmits(['submit'])
+
+const submit = function () {
+  emit('submit',props.model)
+}
+</script>

src/module/formItem/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="layui-form-item">
     <label class="layui-form-label">{{ label }}</label>
-    <div :class="[mode ? 'layui-input-' + mode : '']" class="layui-input-block">
+    <div :class="[mode ? 'layui-input-' + mode : '']">
       <slot />
     </div>
   </div>
@@ -15,7 +15,7 @@ const props = withDefaults(
     label?: string
   }>(),
   {
-    mode: 'block',
+    mode: 'block'
   }
 )
 </script>

src/module/table/index.vue

@@ -21,7 +21,7 @@
       </div>
       <div class="layui-table-box">
         <div class="layui-table-header">
-          <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
+          <table cellspacing="0" cellpadding="0" border="0" class="layui-table" lay-size="sm">
             <thead>
               <tr>
                 <th v-if="checkbox" class="layui-table-col-special">
@@ -47,7 +47,7 @@
           </table>
         </div>
         <div class="layui-table-body layui-table-main">
-          <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
+          <table cellspacing="0" cellpadding="0" border="0" class="layui-table" lay-size="sm">
             <tbody>
               <template v-for="data in dataSource" :key="data">
                 <tr>
@@ -63,10 +63,9 @@
                   </td>
                   <template v-for="column in columns" :key="column">
                     <template v-if="column.customSlot">
-                      <td>
+                      <td class="layui-table-cell">
                         <div
                           :style="{ width: column.width }"
-                          style="padding: 0px 16px"
                         >
                           <slot :name="column.customSlot" :data="data" />
                         </div>
@@ -78,10 +77,9 @@
                       v-else
                       :key="index"
                     >
-                      <td v-if="column.key == key">
+                      <td class="layui-table-cell" v-if="column.key == key">
                         <div
                           :style="{ width: column.width }"
-                          style="padding: 0px 16px"
                         >
                           <span v-if="column.slot">
                             <slot :name="column.slot" :data="data" />
@@ -141,7 +139,7 @@ const props = withDefaults(
     },
     selectedKeys: function () {
       return []
-    },
+    }
   }
 )