feat: add slot data type.

chizukicn · Jun 19, 2023 · beae558 · beae558
1 parent 777d0f5
commit beae558
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git a/packages/hoci/src/components/selection/constants.ts b/packages/hoci/src/components/selection/constants.ts
@@ -1,5 +1,4 @@
 import type { MaybeRef } from "@vueuse/core";
-import type { MaybePromise } from "maybe-types";
 import type { InjectionKey, Ref } from "vue";
 import type { ActivateEvent, ClassType, ElementLike } from "../../types";
 
@@ -20,7 +19,7 @@ export const ItemOptionsSymbol = Symbol("[hi-selection]options");
 
 export const ActivateEventSymbol: InjectionKey<Ref<ActivateEvent>> = Symbol("[hi-selection]activate-event");
 
-export const ChangeActiveSymbol: InjectionKey<(_: any) => MaybePromise<void>> = Symbol("[hi-selection]change-active");
+export const ChangeActiveSymbol: InjectionKey<(_: any) => void> = Symbol("[hi-selection]change-active");
 
 export const IsActiveSymbol: InjectionKey<(_: any) => boolean> = Symbol("[hi-selection]is-active");
 

diff --git a/packages/hoci/src/components/selection/item.ts b/packages/hoci/src/components/selection/item.ts
@@ -56,9 +56,14 @@ export const useSelectionItem = defineHookComponent({
 
     const parentLabel = resolveRef(inject(ItemLabelSymbol));
 
+    const activate = () => {
+      changeActive(props.value);
+    };
+
     function render() {
       return renderSlot(slots, "default", {
-        active: isActive(props.value)
+        active: isActive(props.value),
+        activate
       }, () => {
         let label = props.label ?? parentLabel.value;
         if (label) {
@@ -140,3 +145,8 @@ export const HiItem = defineComponent({
       );
   }
 });
+
+export interface HiItemSlotsData {
+  active: boolean
+  activate(): void
+}
diff --git a/packages/hoci/src/components/selection/list.ts b/packages/hoci/src/components/selection/list.ts
@@ -8,7 +8,7 @@ import {
   reactive,
   renderSlot
 } from "vue";
-import type { ActivateEvent } from "../../types";
+import type { ActivateEvent, ElementLike } from "../../types";
 import { classPropType, labelPropType, valuePropType } from "../../constants";
 import {
   defineHookComponent,
@@ -160,22 +160,22 @@ export const useSelectionList = defineHookComponent({
       return actives.includes(value);
     }
 
-    async function changeActive(option: any) {
-      if (isActive(option)) {
+    function changeActive(value: any) {
+      if (isActive(value)) {
         if (props.multiple || props.clearable) {
-          actives.splice(actives.indexOf(option), 1);
+          actives.splice(actives.indexOf(value), 1);
           emitChange();
         }
       } else {
         if (props.multiple) {
           const limit
             = typeof props.multiple === "number" ? props.multiple : Infinity;
           if (actives.length < limit) {
-            actives.push(option);
+            actives.push(value);
             emitChange();
           }
         } else {
-          actives.splice(0, actives.length, option);
+          actives.splice(0, actives.length, value);
           emitChange();
         }
       }
@@ -213,7 +213,9 @@ export const useSelectionList = defineHookComponent({
 
     function render() {
       return h(props.tag, {}, renderSlot(slots, "default", {
-        isActive
+        isActive,
+        changeActive,
+        renderItem
       }));
     }
 
@@ -237,3 +239,9 @@ export const HiSelection = defineComponent({
     return () => render();
   }
 });
+
+export interface HiSelectionSlotData {
+  isActive(value: any): boolean
+  changeActive(value: any): void
+  renderItem: () => ElementLike
+}