feat: add active slot-scope.

chizukicn · Apr 27, 2023 · 25d2ea1 · 25d2ea1
1 parent 6646cbd
commit 25d2ea1
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/packages/hoci/src/components/selection/item.ts b/packages/hoci/src/components/selection/item.ts
@@ -51,10 +51,15 @@ export const selectionItemProps = defineHookProps({
 export const useSelectionItem = defineHookComponent({
   props: selectionItemProps,
   setup(props, { slots }) {
+    const isActive = inject(IsActiveSymbol, () => false);
+    const changeActive = inject(ChangeActiveSymbol, () => {});
+
     const parentLabel = resolveRef(inject(ItemLabelSymbol));
 
     function render() {
-      return renderSlot(slots, "default", {}, () => {
+      return renderSlot(slots, "default", {
+        active: isActive(props.value)
+      }, () => {
         let label = props.label ?? parentLabel.value;
         if (label) {
           if (typeof label == "function") {
@@ -84,10 +89,6 @@ export const useSelectionItem = defineHookComponent({
       onDeactivated(() => remove());
     }
 
-    const isActive = inject(IsActiveSymbol, () => false);
-
-    const changeActive = inject(ChangeActiveSymbol, () => {});
-
     const activeClass = computed(
       () => inject(ActiveClassSymbol)?.value ?? "active"
     );

diff --git a/packages/hoci/src/components/selection/list.ts b/packages/hoci/src/components/selection/list.ts
@@ -212,7 +212,9 @@ export const useSelectionList = defineHookComponent({
     }
 
     function render() {
-      return h(props.tag, {}, renderSlot(slots, "default", {}));
+      return h(props.tag, {}, renderSlot(slots, "default", {
+        isActive
+      }));
     }
 
     return {

diff --git a/packages/hoci/src/components/switch.ts b/packages/hoci/src/components/switch.ts
@@ -84,13 +84,13 @@ export const useSwitch = defineHookComponent({
 });
 
 export const HiSwitch = defineComponent({
-  name: "ISwitch",
+  name: "HiSwitch",
   props: switchProps,
   emits: switchEmits,
 
   setup(props, context) {
     const { slots } = context;
-    const { switchClass, toggle } = useSwitch(props, context);
+    const { switchClass, toggle, modelValue } = useSwitch(props, context);
 
     return () => {
       return h(
@@ -99,7 +99,9 @@ export const HiSwitch = defineComponent({
           class: switchClass.value,
           [`on${capitalize(props.activateEvent)}`]: toggle
         },
-        renderSlot(slots, "default")
+        renderSlot(slots, "default", {
+          active: modelValue.value
+        })
       );
     };
   }