feat(client): support single k-slot

koishijs · May 15, 2023 · 9c73df7 · 9c73df7
1 parent 1986cf1
commit 9c73df7
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 13 deletions.
diff --git a/packages/client/app/layouts/status-bar.vue b/packages/client/app/layouts/status-bar.vue
@@ -1,7 +1,7 @@
 <template>
   <footer class="layout-status">
-    <k-slot name="status-left"></k-slot>
-    <k-slot name="status-right"></k-slot>
+    <div><k-slot name="status-left"></k-slot></div>
+    <div><k-slot name="status-right"></k-slot></div>
   </footer>
 </template>
 

diff --git a/packages/client/app/pages/home.vue b/packages/client/app/pages/home.vue
@@ -5,9 +5,9 @@
     </k-card>
     <el-scrollbar v-else-if="socket">
       <welcome></welcome>
-      <k-slot name="home"></k-slot>
-      <k-slot name="numeric" class="card-grid profile-grid"></k-slot>
-      <k-slot name="chart" class="card-grid chart-grid"></k-slot>
+      <div><k-slot name="home"></k-slot></div>
+      <div class="card-grid profile-grid"><k-slot name="numeric"></k-slot></div>
+      <div class="card-grid chart-grid"><k-slot name="chart"></k-slot></div>
     </el-scrollbar>
     <div v-else>
       <k-card class="connect">{{ global.messages?.connecting || '正在连接到 Koishi 服务器……' }}</k-card>

diff --git a/packages/client/app/pages/welcome.vue b/packages/client/app/pages/welcome.vue
@@ -2,7 +2,8 @@
   <div class="k-card welcome">
     <h1>{{ t('title') }}</h1>
     <p>{{ t('description') }}</p>
-    <k-slot name="welcome-choice" class="choices">
+    <div class="choices">
+      <k-slot name="welcome-choice">
       <a class="choice" href="https://koishi.chat" rel="noopener noreferer" target="_blank">
         <h2>{{ t('action.docs.title') }}</h2>
         <p>{{ t('action.docs.description') }}</p>
@@ -12,6 +13,7 @@
         <p>{{ t('action.forum.description') }}</p>
       </a>
     </k-slot>
+    </div>
   </div>
 </template>
 

diff --git a/packages/client/client/components/slot.ts b/packages/client/client/components/slot.ts
@@ -8,25 +8,28 @@ export interface SlotItem {
 
 export interface SlotOptions extends SlotItem {
   type: string
+  when?: () => boolean
 }
 
 export const KSlot = defineComponent({
   props: {
     name: String,
     data: Object,
-    tag: {
-      default: 'div',
-    },
+    single: Boolean,
   },
   setup(props, { slots }) {
     return () => {
-      const internal = [...slots.default?.() || []]
+      const internal = props.single ? [] : [...slots.default?.() || []]
         .filter(node => node.type === KSlotItem)
         .map(node => ({ node, order: node.props?.order || 0 }))
       const external = [...views[props.name] || []]
-        .map(item => ({ node: h(item.component, { data: props.data }), order: item.order }))
+        .filter(item => !item.when || item.when())
+        .map(item => ({ node: h(item.component, { data: props.data }), order: item.order, layer: 1 }))
       const children = [...internal, ...external].sort((a, b) => b.order - a.order)
-      return h(props.tag, children.map(item => item.node))
+      if (props.single) {
+        return children[0]?.node || slots.default?.()
+      }
+      return children.map(item => item.node)
     }
   },
 })
@@ -36,7 +39,6 @@ const KSlotItem = defineComponent({
     order: Number,
   },
   setup(props, { slots }) {
-    console.log(111, props, slots)
     return () => slots.default?.()
   },
 })