From 6c0cb3041a29aa9b27634e504f6374888e628a67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E4=BB=AA=E5=BC=8F?= <854085467@qq.com>
Date: Fri, 15 Oct 2021 23:52:01 +0800
Subject: [PATCH] =?UTF-8?q?feat(tab):=20=E6=96=B0=E5=A2=9E=20allowClose=20?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7,=20change=20close=20=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/zh-CN/components/carousel.md |  7 +++-
 docs/docs/zh-CN/components/tab.md      | 53 ++++++++++++++++++++++++--
 src/index.ts                           |  8 ++--
 src/module/carousel/index.vue          | 19 +++++++--
 src/module/carouselItem/index.ts       |  9 +++++
 src/module/carouselItem/index.vue      |  9 +++++
 src/module/checkboxGroup/index.vue     |  2 +-
 src/module/tab/index.vue               | 13 +++++--
 8 files changed, 104 insertions(+), 16 deletions(-)
 create mode 100644 src/module/carouselItem/index.ts
 create mode 100644 src/module/carouselItem/index.vue

diff --git a/docs/docs/zh-CN/components/carousel.md b/docs/docs/zh-CN/components/carousel.md
index 831f909a..bf7426a1 100644
--- a/docs/docs/zh-CN/components/carousel.md
+++ b/docs/docs/zh-CN/components/carousel.md
@@ -1,7 +1,12 @@
 ::: demo
 
 <template>
-  <lay-carousel></lay-carousel>
+  <lay-carousel>
+    <lay-carousel-item>条目一</lay-carousel-item>
+    <lay-carousel-item>条目二</lay-carousel-item>
+    <lay-carousel-item>条目三</lay-carousel-item>
+    <lay-carousel-item>条目四</lay-carousel-item>
+  </lay-carousel>
 </template>
 
 <script>
diff --git a/docs/docs/zh-CN/components/tab.md b/docs/docs/zh-CN/components/tab.md
index 60128625..d8ae0105 100644
--- a/docs/docs/zh-CN/components/tab.md
+++ b/docs/docs/zh-CN/components/tab.md
@@ -76,12 +76,59 @@ export default {
 
 :::
 
+::: demo
+
+<template>
+  <lay-tab type="card" v-model="current3" :allow-close="allowClose" @change="change" @close="close">
+    <lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
+    <lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
+  </lay-tab>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const current4 = ref("1")
+    const allowClose = ref(true)
+
+    const change = function(id){
+      console.log("当前值:" +id)
+    }
+
+    const close = function(id){
+      console.log("需要关闭:" + id)
+    }
+
+    return {
+      current3,
+      allowClose,
+      change,
+      close
+    }
+  }
+}
+</script>
+
+:::
+
 ::: field tab attributes 
 
 :::
 
-
-|         |          |                |
+| Name    | Description   | Accepted Values   |
 | ------- | -------- | -------------- |
 | v-model | 当前激活 | --             |
-| type    | 主题样式 | `card` `brief` |
+| type    | 主题样式 | --             |
+| allow-close | 允许关闭 | `true` `false` |
+
+::: field tab events  
+
+:::
+
+| Name   | Description | Accepted Params  |
+| -------- | ---- | ----------------------- | 
+| change       | 选中切换 | --  | 
+| close     | 关闭事件 | --  | 
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 88a39654..3964fb5a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -56,7 +56,7 @@ import LayTransfer from './module/transfer/index'
 import LayCheckboxGroup from './module/checkboxGroup/index'
 import LaySlider from './module/slider/index'
 import LayCarousel from './module/carousel/index'
-
+import LayCarouselItem from './module/carouselItem/index'
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -112,7 +112,8 @@ const components: Record<string, IDefineComponent> = {
   LayTransfer,
   LayCheckboxGroup,
   LaySlider,
-  LayCarousel
+  LayCarousel,
+  LayCarouselItem
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -125,8 +126,6 @@ const install = (app: App, options?: InstallOptions): void => {
   }
 }
 
-console.log('document Site : http://layui-vue.pearadmin.com')
-
 export {
   LayRadio,
   LayIcon,
@@ -182,6 +181,7 @@ export {
   LayCheckboxGroup,
   LaySlider,
   LayCarousel,
+  LayCarouselItem,
   install,
 }
 
diff --git a/src/module/carousel/index.vue b/src/module/carousel/index.vue
index a633f17e..87bdcefa 100644
--- a/src/module/carousel/index.vue
+++ b/src/module/carousel/index.vue
@@ -1,13 +1,12 @@
 <template>
   <div
     class="layui-carousel"
-    id="test1"
-    lay-anim=""
+    lay-anim
     lay-indicator="inside"
     lay-arrow="always"
-    style="width: 100%; height: 280px"
+    :style="{width:width,height:height}"
   >
-    <div carousel-item="">
+    <div carousel-item>
       <div> </div>
       <div> </div>
       <div> </div>
@@ -28,4 +27,16 @@
   </div>
 </template>
 <script setup name="LayCarousel" lang="ts">
+import { withDefaults, defineProps } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    width: string,
+    height: string
+  }>(),
+  {
+    width: '100%',
+    height: '280px'
+  }
+)
 </script>
\ No newline at end of file
diff --git a/src/module/carouselItem/index.ts b/src/module/carouselItem/index.ts
new file mode 100644
index 00000000..1acce590
--- /dev/null
+++ b/src/module/carouselItem/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 || 'LayCarouselItem', Component)
+}
+
+export default Component as IDefineComponent
diff --git a/src/module/carouselItem/index.vue b/src/module/carouselItem/index.vue
new file mode 100644
index 00000000..1bb53d5f
--- /dev/null
+++ b/src/module/carouselItem/index.vue
@@ -0,0 +1,9 @@
+<template>
+    <li class="layui-this">
+        <slot></slot>
+    </li>
+</template>
+<script setup name="LayCarousel" lang="ts">
+import { withDefaults, defineProps } from 'vue'
+
+</script>
\ No newline at end of file
diff --git a/src/module/checkboxGroup/index.vue b/src/module/checkboxGroup/index.vue
index e57f725c..4ea0b1d7 100644
--- a/src/module/checkboxGroup/index.vue
+++ b/src/module/checkboxGroup/index.vue
@@ -1,5 +1,5 @@
 <template>
-
+    <div class="layui-checkbox-group"></div>
 </template>
 
 <script setup name="LayCheckbox" lang="ts">
diff --git a/src/module/tab/index.vue b/src/module/tab/index.vue
index bed77eef..6aaf9863 100644
--- a/src/module/tab/index.vue
+++ b/src/module/tab/index.vue
@@ -5,9 +5,10 @@
         v-for="ss in slots"
         :key="ss"
         :class="[ss.props.id === modelValue ? 'layui-this' : '']"
-        @click="change(ss.props.id)"
+        @click.stop="change(ss.props.id)"
       >
         {{ ss.props.title }}
+        <i @click.stop="close(ss.props.id)"  v-if="allowClose" class="layui-icon layui-icon-close layui-unselect layui-tab-close"></i>
       </li>
     </ul>
     <div class="layui-tab-content">
@@ -17,7 +18,7 @@
 </template>
 
 <script setup name="LayTab" lang="ts">
-import { defineProps, inject, provide, ref, useSlots } from 'vue'
+import { defineProps, provide, ref, useSlots } from 'vue'
 
 const slot = useSlots() as any
 const slots = slot.default && slot.default()
@@ -25,17 +26,23 @@ const slots = slot.default && slot.default()
 const props = defineProps<{
   type?: string
   modelValue: string
+  allowClose?: boolean
 }>()
 
 // select update 时, 通知 change 事件
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue','change','close'])
 
 const active = ref(props.modelValue)
 
 const change = function (id: any) {
   emit('update:modelValue', id)
+  emit('change', id)
   active.value = id
 }
 
+const close = function(id: any) {
+  emit('close', id)
+}
+
 provide('active', active)
 </script>