refactor: improve relation api

src/action-bar-button/index.js

@@ -1,7 +1,7 @@
 import { ref, computed } from 'vue';
 import { createNamespace } from '../utils';
 import { route, routeProps } from '../utils/router';
-import { useChildren } from '../api/use-relation';
+import { useParent } from '../api/use-relation';
 import { ACTION_BAR_KEY } from '../action-bar';
 import Button from '../button';
 
@@ -19,18 +19,20 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
-    const { children, index } = useChildren(ACTION_BAR_KEY, ref(true));
+    const { parent, index } = useParent(ACTION_BAR_KEY, ref(true));
 
     const isFirst = computed(() => {
-      if (children) {
+      if (parent) {
-        const prev = children.value[index.value - 1];
+        const children = parent.children.value;
+        const prev = children[index.value - 1];
         return !(prev && prev.value);
       }
     });
 
     const isLast = computed(() => {
-      if (children) {
+      if (parent) {
-        const next = children.value[index.value + 1];
+        const children = parent.children.value;
+        const next = children[index.value + 1];
         return !(next && next.value);
       }
     });

src/action-bar-icon/index.js

@@ -1,7 +1,7 @@
 import { ref } from 'vue';
 import { createNamespace } from '../utils';
 import { route, routeProps } from '../utils/router';
-import { useChildren } from '../api/use-relation';
+import { useParent } from '../api/use-relation';
 import { ACTION_BAR_KEY } from '../action-bar';
 import Icon from '../icon';
 import Badge from '../badge';
@@ -20,7 +20,7 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
-    useChildren(ACTION_BAR_KEY, ref());
+    useParent(ACTION_BAR_KEY, ref());
 
     function genIcon() {
       const { dot, badge, icon, color, iconClass } = props;

src/action-bar/index.js

@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { useParent } from '../api/use-relation';
+import { useChildren } from '../api/use-relation';
 
 const [createComponent, bem] = createNamespace('action-bar');
 
@@ -14,7 +14,7 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
-    useParent(ACTION_BAR_KEY);
+    useChildren(ACTION_BAR_KEY);
 
     return () => (
       <div class={bem({ unfit: !props.safeAreaInsetBottom })}>

src/api/use-relation.ts

@@ -1,30 +1,33 @@
-import { ref, Ref, provide, inject, computed } from 'vue';
+import { ref, Ref, provide, inject, computed, onUnmounted } from 'vue';
 
 export type Parent = null | {
   children: Ref<unknown[]>;
 };
 
-export function useParent(key: string) {
+export function useChildren(key: string) {
   const children = ref<unknown>([]);
-
   provide(key, { children });
-
+  return children;
-  return {
-    children,
-  };
 }
 
-export function useChildren(key: string, child: unknown) {
+export function useParent(key: string, child: unknown) {
   const parent = inject<Parent>(key, null);
-  const children = parent?.children;
-  const index = computed(() => children?.value.indexOf(child));
 
   if (parent) {
-    parent.children.value.push(child);
+    const children = parent.children.value;
-  }
+    const index = computed(() => children.indexOf(child));
+
+    children.push(child);
+
+    onUnmounted(() => {
+      children.splice(index.value, 1);
+    });
 
     return {
       index,
-    children,
+      parent,
     };
   }
+
+  return {};
+}