From 58f95fd214c0c77d3d5fb9d98b9397e6c01f01d8 Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Thu, 25 Apr 2024 17:49:42 +0800
Subject: [PATCH] refactor(directive): v-slot & defineSlots

---
 pages.json                                    | 10 ++++--
 pages/directive/v-slot/Foo-composition.uvue   | 19 ++++++++++++
 pages/directive/v-slot/Foo-options.uvue       | 24 ++++++++++++++
 pages/directive/v-slot/counter.uvue           | 27 ----------------
 .../directive/v-slot/v-slot-composition.uvue  | 28 +++++++++++++++++
 pages/directive/v-slot/v-slot-options.uvue    | 31 +++++++++++++++++++
 pages/directive/v-slot/v-slot.test.js         | 29 ++++++++++++-----
 pages/directive/v-slot/v-slot.uvue            | 24 --------------
 pages/index/index.uvue                        | 16 ++++++++++
 9 files changed, 147 insertions(+), 61 deletions(-)
 create mode 100644 pages/directive/v-slot/Foo-composition.uvue
 create mode 100644 pages/directive/v-slot/Foo-options.uvue
 delete mode 100644 pages/directive/v-slot/counter.uvue
 create mode 100644 pages/directive/v-slot/v-slot-composition.uvue
 create mode 100644 pages/directive/v-slot/v-slot-options.uvue
 delete mode 100644 pages/directive/v-slot/v-slot.uvue

diff --git a/pages.json b/pages.json
index 0ea0937..c6b36af 100644
--- a/pages.json
+++ b/pages.json
@@ -265,14 +265,18 @@
         "navigationBarTitleText": "defineModel"
       }
     },
-
-
     {
-      "path": "pages/directive/v-slot/v-slot",
+      "path": "pages/directive/v-slot/v-slot-options",
       "style": {
         "navigationBarTitleText": "v-slot"
       }
     },
+    {
+      "path": "pages/directive/v-slot/v-slot-composition",
+      "style": {
+        "navigationBarTitleText": "defineSlots"
+      }
+    },
     {
       "path": "pages/component-instance/slots/slots-options",
       "style": {
diff --git a/pages/directive/v-slot/Foo-composition.uvue b/pages/directive/v-slot/Foo-composition.uvue
new file mode 100644
index 0000000..b562856
--- /dev/null
+++ b/pages/directive/v-slot/Foo-composition.uvue
@@ -0,0 +1,19 @@
+<template>
+  <view>
+    <slot name="header" :msg="msg"></slot>
+    <slot :num="num"></slot>
+    <slot name="footer" :arr="arr"></slot>
+  </view>
+</template>
+
+<script setup lang='uts'>
+  const msg = ref('foo msg')
+  const num = ref<number>(0)
+  const arr = ref<string[]>(['a', 'b', 'c'])
+
+  defineSlots<{
+    header(props : { msg : string }) : any,
+    default(props : { num : number }) : any,
+    footer(props : { arr : string[] }) : any
+  }>()
+</script>
diff --git a/pages/directive/v-slot/Foo-options.uvue b/pages/directive/v-slot/Foo-options.uvue
new file mode 100644
index 0000000..e2ab869
--- /dev/null
+++ b/pages/directive/v-slot/Foo-options.uvue
@@ -0,0 +1,24 @@
+<template>
+  <view>
+    <slot name="header" :msg="msg"></slot>
+    <slot :num="num"></slot>
+    <slot name="footer" :arr="arr"></slot>
+  </view>
+</template>
+
+<script lang="uts">
+  export default {
+    slots: Object as SlotsType<{
+      header: { msg: string }
+      default: { num: number }
+      footer: { arr: string[] }
+    }>,
+    data(){
+      return {
+        msg: 'foo msg',
+        num: 0,
+        arr: ['a','b', 'c']
+      }
+    }
+  }
+</script>
diff --git a/pages/directive/v-slot/counter.uvue b/pages/directive/v-slot/counter.uvue
deleted file mode 100644
index 9cf32d7..0000000
--- a/pages/directive/v-slot/counter.uvue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <view>
-    <slot />
-    <!-- <slot :loading="loading" :error="message" /> -->
-  </view>
-</template>
-
-<script>
-  export default {
-    props: {
-      number: {
-        type: Number,
-        default: 0
-      }
-    },
-    data() {
-      return {
-        loading: false,
-        message: ''
-      }
-    },
-    created() {
-    },
-    methods: {
-    }
-  }
-</script>
\ No newline at end of file
diff --git a/pages/directive/v-slot/v-slot-composition.uvue b/pages/directive/v-slot/v-slot-composition.uvue
new file mode 100644
index 0000000..bdeffe3
--- /dev/null
+++ b/pages/directive/v-slot/v-slot-composition.uvue
@@ -0,0 +1,28 @@
+<template>
+  <view class="page">
+    <Foo>
+      <template #header="{ msg }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>header slot msg:</text>
+          <text id="slot-header">{{ msg }}</text>
+        </view>
+      </template>
+      <template #default="{ num }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>default slot num:</text>
+          <text id="slot-default">{{ num }}</text>
+        </view>
+      </template>
+      <template #footer="{ arr }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>footer slot arr:</text>
+          <text id="slot-footer">{{ JSON.stringify(arr) }}</text>
+        </view>
+      </template>
+    </Foo>
+  </view>
+</template>
+
+<script setup lang="uts">
+import Foo from './Foo-composition.uvue'
+</script>
diff --git a/pages/directive/v-slot/v-slot-options.uvue b/pages/directive/v-slot/v-slot-options.uvue
new file mode 100644
index 0000000..02a9e24
--- /dev/null
+++ b/pages/directive/v-slot/v-slot-options.uvue
@@ -0,0 +1,31 @@
+<template>
+  <view class="page">
+    <Foo>
+      <template #header="{ msg }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>header slot msg:</text>
+          <text id="slot-header">{{ msg }}</text>
+        </view>
+      </template>
+      <template #default="{ num }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>default slot num:</text>
+          <text id="slot-default">{{ num }}</text>
+        </view>
+      </template>
+      <template #footer="{ arr }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>footer slot arr:</text>
+          <text id="slot-footer">{{ JSON.stringify(arr) }}</text>
+        </view>
+      </template>
+    </Foo>
+  </view>
+</template>
+
+<script lang="uts">
+import Foo from './Foo-options.uvue'
+export default {
+  components: {Foo}
+}
+</script>
diff --git a/pages/directive/v-slot/v-slot.test.js b/pages/directive/v-slot/v-slot.test.js
index 93ce35c..bce6e0b 100644
--- a/pages/directive/v-slot/v-slot.test.js
+++ b/pages/directive/v-slot/v-slot.test.js
@@ -1,13 +1,28 @@
-const PAGE_PATH = '/pages/directive/v-slot/v-slot'
+const OPTIONS_PAGE_PATH = '/pages/directive/v-slot/v-slot-options'
+const COMPOSITION_PAGE_PATH = '/pages/directive/v-slot/v-slot-composition'
 
 describe('v-slot', () => {
   let page
-  beforeAll(async () => {
-    page = await program.reLaunch(PAGE_PATH)
-    await page.waitFor(500)
+  
+  const test = async (pagePath) => {
+    page = await program.reLaunch(pagePath)
+    await page.waitFor('view')
+    
+    const slotHeader = await page.$('#slot-header')
+    expect(await slotHeader.text()).toBe('foo msg')
+
+    const slotContent = await page.$('#slot-default')
+    expect(await slotContent.text()).toBe('0')
+
+    const slotFooter = await page.$('#slot-footer')
+    expect(await slotFooter.text()).toBe('["a","b","c"]')
+  }
+  
+  it('v-slot', async () => {
+    await test(OPTIONS_PAGE_PATH)
   })
-  it('default', async () => {
-    const defaultText = await page.$('.default')
-    expect(await defaultText.text()).toBe('loading')
+  
+  it('defineSlots', async () => {
+    await test(COMPOSITION_PAGE_PATH)
   })
 })
diff --git a/pages/directive/v-slot/v-slot.uvue b/pages/directive/v-slot/v-slot.uvue
deleted file mode 100644
index 8bbc5a0..0000000
--- a/pages/directive/v-slot/v-slot.uvue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <view class="page">
-    <view class="split-title">v-slot</view>
-    <counter class="default" v-slot:default>loading</counter>
-  </view>
-</template>
-
-<script>
-  import counter from "./counter.uvue"
-  export default {
-    components: {
-      counter
-    },
-    data() {
-      return {
-      }
-    },
-    methods: {
-    }
-  }
-</script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/pages/index/index.uvue b/pages/index/index.uvue
index e9ae529..54ddc7b 100644
--- a/pages/index/index.uvue
+++ b/pages/index/index.uvue
@@ -822,6 +822,22 @@ export default {
                 },
               ]
             },
+            {
+              id: 'v-slot',
+              name: 'v-slot',
+              children: [
+                {
+                  id: 'v-model-options',
+                  name: 'v-slot',
+                  url: 'v-slot-options',
+                },
+                {
+                  id: 'v-slot-composition',
+                  name: 'defineSlots',
+                  url: 'v-slot-composition',
+                },
+              ]
+            },
           ]
         },
         {
-- 
GitLab