refactor(directive): v-slot & defineSlots

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": {

pages/directive/v-slot/Foo-composition.uvue

+<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>

pages/directive/v-slot/Foo-options.uvue

+<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>

pages/directive/v-slot/counter.uvue

-<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

pages/directive/v-slot/v-slot-composition.uvue

+<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>

pages/directive/v-slot/v-slot-options.uvue

+<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>

pages/directive/v-slot/v-slot.test.js

-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)
   })
 })

pages/directive/v-slot/v-slot.uvue

-<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

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',
+                },
+              ]
+            },
           ]
         },
         {