feat(selection): add render return

chizukicn · Oct 17, 2023 · f190456 · f190456
1 parent 726a035
commit f190456
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 16 deletions.
diff --git a/packages/core/src/selection/component.ts b/packages/core/src/selection/component.ts
@@ -1,5 +1,4 @@
-import { defineComponent, h, renderSlot } from "vue";
-import type { HiSelectionSlotData } from "@hoci/core";
+import { defineComponent, h } from "vue";
 import { selectionEmits, selectionProps, useSelectionList } from "@hoci/core";
 
 export const HiSelection = defineComponent({
@@ -13,15 +12,8 @@ export const HiSelection = defineComponent({
   },
   emits: selectionEmits,
   setup(props, context) {
-    const { isActive, changeActive, renderItem } = useSelectionList(props, context);
-    const { slots } = context;
+    const { render } = useSelectionList(props, context);
 
-    const slotData: HiSelectionSlotData = {
-      isActive,
-      changeActive,
-      renderItem
-    };
-
-    return () => h(props.as, {}, renderSlot(slots, "default", slotData));
+    return () => h(props.as, {}, render());
   }
 });
diff --git a/packages/core/src/selection/index.ts b/packages/core/src/selection/index.ts
@@ -4,7 +4,8 @@ import {
   computed,
   inject,
   provide,
-  reactive
+  reactive,
+  renderSlot
 } from "vue";
 import {
   classPropType,
@@ -127,7 +128,7 @@ export function useSelectionContext() {
 export const useSelectionList = defineHookComponent({
   props: selectionProps,
   emits: selectionEmits,
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const options = reactive<Option[]>([]);
 
     function toArray(value?: any | any[]): any[] {
@@ -231,19 +232,30 @@ export const useSelectionList = defineHookComponent({
     }));
 
 
-    function renderItem() {
+    const renderItem = () => {
       const children = options
         .filter((e) => actives.includes(e.value))
         .map((e) => e.render());
       return props.multiple ? children : children[0];
-    }
+    };
+
+    const slotData: HiSelectionSlotData = {
+      isActive,
+      changeActive,
+      renderItem
+    };
+
+    const render = () => {
+      return renderSlot(slots, "default", slotData);
+    };
 
     return {
       options,
       actives,
       isActive,
       changeActive,
-      renderItem
+      renderItem,
+      render
     };
   }
 });