From 25633a6ca75f0390b5e661d521477266a7924b4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Sun, 9 Jan 2022 22:41:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20avatar-list=20=E5=A4=B4?=
 =?UTF-8?q?=E5=83=8F=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/avatar.md | 39 +++++++++++++++++++++++--
 example/docs/zh-CN/guide/changelog.md   | 10 +++++++
 example/src/assets/css/markdown.css     |  4 ---
 example/src/layouts/Layout.vue          |  2 +-
 example/src/view/index.vue              |  2 +-
 package.json                            |  2 +-
 src/index.ts                            |  3 ++
 src/module/avatar/index.less            |  5 ++++
 src/module/avatarList/index.ts          |  9 ++++++
 src/module/avatarList/index.vue         | 15 ++++++++++
 src/module/menuItem/index.vue           |  2 +-
 src/module/subMenu/index.vue            |  2 +-
 12 files changed, 83 insertions(+), 12 deletions(-)
 create mode 100644 src/module/avatarList/index.ts
 create mode 100644 src/module/avatarList/index.vue

diff --git a/example/docs/zh-CN/components/avatar.md b/example/docs/zh-CN/components/avatar.md
index ca80adf5..7e423ed2 100644
--- a/example/docs/zh-CN/components/avatar.md
+++ b/example/docs/zh-CN/components/avatar.md
@@ -38,9 +38,7 @@ export default {
 
 <script>
 import { ref } from 'vue'
-
 export default {
-
     setup() {
 
         const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
@@ -61,8 +59,11 @@ export default {
 
 <template>
   <lay-avatar :src="src" size="xs"></lay-avatar> 
+  &nbsp;&nbsp; 
   <lay-avatar :src="src" size="sm"></lay-avatar>
+  &nbsp;&nbsp;
   <lay-avatar :src="src"></lay-avatar>
+  &nbsp;&nbsp;
   <lay-avatar :src="src" size="lg"></lay-avatar>
 </template>
 
@@ -83,6 +84,38 @@ export default {
 
 :::
 
+::: title 头像列表
+:::
+
+::: demo
+
+<template>
+  <lay-avatar-list>
+    <lay-avatar :src="src" radius></lay-avatar>
+    <lay-avatar :src="src" radius></lay-avatar>
+    <lay-avatar :src="src" radius></lay-avatar>
+    <lay-avatar :src="src" radius></lay-avatar>
+    <lay-avatar :src="src" radius></lay-avatar>
+  </lay-avatar-list>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+    setup() {
+
+        const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
+
+        return {
+          src
+        }
+  }
+}
+</script>
+
+:::
+
 ::: title 头像属性
 :::
 
@@ -97,4 +130,4 @@ export default {
 :::
 
 ::: comment
-:::
\ No newline at end of file
+:::
diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index 6baa22fb..bcff068b 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -11,6 +11,16 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="0.3.x">
+      <ul> 
+      <a name="0-3-4"> </a> 
+      <li> 
+        <h3>0.3.4 <span class="layui-badge-rim">2022-01-09</span></h3> 
+        <ul> 
+          <li>[新增] avatar-list 头像列表组件。</li>
+          <li>[修复] menu-item 与 sub-menu 组件的 title 属性必填警告。</li>
+        </ul> 
+      </li>
+    </ul>
     <ul> 
       <a name="0-3-3"> </a> 
       <li> 
diff --git a/example/src/assets/css/markdown.css b/example/src/assets/css/markdown.css
index db461523..89f15ce0 100644
--- a/example/src/assets/css/markdown.css
+++ b/example/src/assets/css/markdown.css
@@ -110,10 +110,6 @@ form {
   margin: 0;
 }
 
-.source .layui-avatar {
-  margin-right: 30px;
-}
-
 .site-doc-icon {
   margin-bottom: 50px;
   font-size: 0;
diff --git a/example/src/layouts/Layout.vue b/example/src/layouts/Layout.vue
index 6bfe91a1..21d3d9c9 100644
--- a/example/src/layouts/Layout.vue
+++ b/example/src/layouts/Layout.vue
@@ -43,7 +43,7 @@
           </a>
         </li>
         <li class="layui-nav-item">
-          <a href="javascript:void(0)"> 0.3.3 </a>
+          <a href="javascript:void(0)"> 0.3.4 </a>
         </li>
       </ul>
     </lay-header>
diff --git a/example/src/view/index.vue b/example/src/view/index.vue
index f0d862a6..43f43bb3 100644
--- a/example/src/view/index.vue
+++ b/example/src/view/index.vue
@@ -26,7 +26,7 @@
           >
         </div>
         <div class="site-version">
-          <span>当前版本：v<cite class="site-showv">0.3.3</cite></span>
+          <span>当前版本：v<cite class="site-showv">0.3.4</cite></span>
           <span
             ><router-link
               class="layui-inline site-down"
diff --git a/package.json b/package.json
index ac342901..894ab5ff 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "author": "sleeprite",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",
diff --git a/src/index.ts b/src/index.ts
index 8224c093..4891e412 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -9,6 +9,7 @@ import { layer } from "@layui/layer-vue";
 import LayLayer from "./module/layer/index";
 import LayBacktop from "./module/backTop/index";
 import LayAvatar from "./module/avatar/index";
+import LayAvatarList from "./module/avatarList/index";
 import LayRadio from "./module/radio/index";
 import LayButton from "./module/button/index";
 import LayButtonContainer from "./module/buttonContainer/index";
@@ -108,6 +109,7 @@ export const components: Record<string, IDefineComponent> = {
   LayBreadcrumb,
   LayBreadcrumbItem,
   LayAvatar,
+  LayAvatarList,
   LayField,
   LaySelect,
   LayScroll,
@@ -185,6 +187,7 @@ export {
   LayBreadcrumb,
   LayBreadcrumbItem,
   LayAvatar,
+  LayAvatarList,
   LayField,
   LaySelect,
   LayScroll,
diff --git a/src/module/avatar/index.less b/src/module/avatar/index.less
index e05a39e4..c872525e 100644
--- a/src/module/avatar/index.less
+++ b/src/module/avatar/index.less
@@ -40,3 +40,8 @@
   height: 28px;
   width: 28px;
 }
+
+.layui-avatar-list .layui-avatar {
+  margin-left: -10px;
+  display: inline-block;
+}
\ No newline at end of file
diff --git a/src/module/avatarList/index.ts b/src/module/avatarList/index.ts
new file mode 100644
index 00000000..af447511
--- /dev/null
+++ b/src/module/avatarList/index.ts
@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+import type { IDefineComponent } from "../type/index";
+
+Component.install = (app: App) => {
+  app.component(Component.name || "LayAvatarList", Component);
+};
+
+export default Component as IDefineComponent;
diff --git a/src/module/avatarList/index.vue b/src/module/avatarList/index.vue
new file mode 100644
index 00000000..09aefae8
--- /dev/null
+++ b/src/module/avatarList/index.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+export default {
+  name: "LayAvatarList",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps } from "vue";
+</script>
+
+<template>
+  <div class="layui-avatar-list">
+    <slot></slot>
+  </div>
+</template>
diff --git a/src/module/menuItem/index.vue b/src/module/menuItem/index.vue
index f3e6fbbf..6724627f 100644
--- a/src/module/menuItem/index.vue
+++ b/src/module/menuItem/index.vue
@@ -11,7 +11,7 @@ const slots = useSlots();
 
 const props = defineProps<{
   id: string;
-  title: string;
+  title?: string;
 }>();
 
 const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
diff --git a/src/module/subMenu/index.vue b/src/module/subMenu/index.vue
index 663895c4..79d34ffc 100644
--- a/src/module/subMenu/index.vue
+++ b/src/module/subMenu/index.vue
@@ -11,7 +11,7 @@ const slots = useSlots();
 
 const props = defineProps<{
   id: string;
-  title: string;
+  title?: string;
 }>();
 
 const isTree = inject("isTree");