chore: move useRelation to @vant/use

src/action-bar-button/index.js

@@ -3,7 +3,7 @@ import { createNamespace } from '../utils';
 import { ACTION_BAR_KEY } from '../action-bar';
 
 // Composition
-import { useParent } from '../composition/use-relation';
+import { useParent } from '@vant/use';
 import { useExpose } from '../composition/use-expose';
 import { useRoute, routeProps } from '../composition/use-route';
 

src/action-bar-icon/index.tsx

@@ -2,7 +2,7 @@ import { createNamespace } from '../utils';
 import { ACTION_BAR_KEY } from '../action-bar';
 
 // Composition
-import { useParent } from '../composition/use-relation';
+import { useParent } from '@vant/use';
 import { useRoute, routeProps } from '../composition/use-route';
 
 // Components

src/action-bar/index.js

@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { useChildren } from '../composition/use-relation';
+import { useChildren } from '@vant/use';
 
 const [createComponent, bem] = createNamespace('action-bar');
 

src/checkbox-group/index.js

@@ -1,8 +1,8 @@
 import { watch } from 'vue';
 import { createNamespace } from '../utils';
 import { CHECKBOX_KEY } from '../checkbox';
+import { useChildren } from '@vant/use';
 import { useExpose } from '../composition/use-expose';
-import { useChildren } from '../composition/use-relation';
 import { useLinkField } from '../composition/use-link-field';
 
 const [createComponent, bem] = createNamespace('checkbox-group');

src/checkbox/index.js

@@ -1,8 +1,8 @@
 import { computed, watch } from 'vue';
 import { createNamespace, pick } from '../utils';
+import { useParent } from '@vant/use';
 import { useExpose } from '../composition/use-expose';
 import { useLinkField } from '../composition/use-link-field';
-import { useParent } from '../composition/use-relation';
 import Checker, { checkerProps } from './Checker';
 
 const [createComponent, bem] = createNamespace('checkbox');

src/col/index.tsx

@@ -1,6 +1,6 @@
 import { computed, PropType } from 'vue';
 import { createNamespace } from '../utils';
-import { useParent } from '../composition/use-relation';
+import { useParent } from '@vant/use';
 import { ROW_KEY, RowProvide } from '../row';
 
 const [createComponent, bem] = createNamespace('col');

src/collapse-item/index.js

@@ -4,7 +4,7 @@ import { ref, watch, computed, nextTick } from 'vue';
 import { raf, doubleRaf, createNamespace } from '../utils';
 
 // Composition
-import { useParent } from '../composition/use-relation';
+import { useParent } from '@vant/use';
 import { useLazyRender } from '../composition/use-lazy-render';
 
 // Components

src/collapse/index.js

@@ -1,6 +1,6 @@
 import { createNamespace } from '../utils';
 import { BORDER_TOP_BOTTOM } from '../utils/constant';
-import { useChildren } from '../composition/use-relation';
+import { useChildren } from '@vant/use';
 
 const [createComponent, bem] = createNamespace('collapse');
 

src/composition/use-relation.ts

@@ -1,129 +0,0 @@
-import {
-  VNode,
-  inject,
-  isVNode,
-  provide,
-  computed,
-  reactive,
-  onUnmounted,
-  getCurrentInstance,
-  VNodeNormalizedChildren,
-  ComponentPublicInstance as PublicInstance,
-  ComponentInternalInstance as InternalInstance,
-} from 'vue';
-
-export function flattenVNodes(children: VNodeNormalizedChildren) {
-  const result: VNode[] = [];
-
-  const traverse = (children: VNodeNormalizedChildren) => {
-    if (Array.isArray(children)) {
-      children.forEach((child) => {
-        if (isVNode(child)) {
-          result.push(child);
-
-          if (child.component?.subTree) {
-            traverse(child.component.subTree.children);
-          }
-
-          if (child.children) {
-            traverse(child.children);
-          }
-        }
-      });
-    }
-  };
-
-  traverse(children);
-
-  return result;
-}
-
-// sort children instances by vnodes order
-export function sortChildren(
-  parent: InternalInstance,
-  publicChildren: PublicInstance[],
-  internalChildren: InternalInstance[]
-) {
-  const vnodes = flattenVNodes(parent.subTree.children);
-
-  internalChildren.sort(
-    (a, b) => vnodes.indexOf(a.vnode) - vnodes.indexOf(b.vnode)
-  );
-
-  const orderedPublicChildren = internalChildren.map((item) => item.proxy!);
-
-  publicChildren.sort((a, b) => {
-    const indexA = orderedPublicChildren.indexOf(a);
-    const indexB = orderedPublicChildren.indexOf(b);
-    return indexA - indexB;
-  });
-}
-
-export function useChildren(key: string) {
-  const publicChildren: PublicInstance[] = reactive([]);
-  const internalChildren: InternalInstance[] = reactive([]);
-  const parent = getCurrentInstance()!;
-
-  const linkChildren = (value: any) => {
-    const link = (child: InternalInstance) => {
-      if (child.proxy) {
-        internalChildren.push(child);
-        publicChildren.push(child.proxy);
-        sortChildren(parent, publicChildren, internalChildren);
-      }
-    };
-
-    const unlink = (child: InternalInstance) => {
-      const index = internalChildren.indexOf(child);
-      publicChildren.splice(index, 1);
-      internalChildren.splice(index, 1);
-    };
-
-    provide(key, {
-      link,
-      unlink,
-      children: publicChildren,
-      internalChildren,
-      ...value,
-    });
-  };
-
-  return {
-    children: publicChildren,
-    linkChildren,
-  };
-}
-
-type ParentProvide<T> = T & {
-  link(child: InternalInstance): void;
-  unlink(child: InternalInstance): void;
-  children: PublicInstance[];
-  internalChildren: InternalInstance[];
-};
-
-export function useParent<T>(key: string) {
-  const parent = inject<ParentProvide<T> | null>(key, null);
-
-  if (parent) {
-    const instance = getCurrentInstance();
-
-    if (instance) {
-      const { link, unlink, internalChildren, ...rest } = parent;
-
-      link(instance);
-
-      onUnmounted(() => {
-        unlink(instance);
-      });
-
-      const index = computed(() => internalChildren.indexOf(instance));
-
-      return {
-        parent: rest,
-        index,
-      };
-    }
-  }
-
-  return {};
-}

src/dropdown-item/index.js

@@ -5,8 +5,8 @@ import { createNamespace } from '../utils';
 import { DROPDOWN_KEY } from '../dropdown-menu';
 
 // Composition
+import { useParent } from '@vant/use';
 import { useExpose } from '../composition/use-expose';
-import { useParent } from '../composition/use-relation';
 
 // Components
 import Cell from '../cell';

src/dropdown-menu/index.js

@@ -4,9 +4,13 @@ import { ref, computed } from 'vue';
 import { createNamespace, isDef } from '../utils';
 
 // Composition
-import { useClickAway, useScrollParent, useEventListener } from '@vant/use';
+import {
+  useChildren,
+  useClickAway,
+  useScrollParent,
+  useEventListener,
+} from '@vant/use';
 import { useRect } from '../composition/use-rect';
-import { useChildren } from '../composition/use-relation';
 
 const [createComponent, bem] = createNamespace('dropdown-menu');
 

src/field/index.js

@@ -23,8 +23,8 @@ import {
 } from '../utils';
 
 // Composition
+import { useParent } from '@vant/use';
 import { useExpose } from '../composition/use-expose';
-import { useParent } from '../composition/use-relation';
 
 // Components
 import Icon from '../icon';

src/form/index.js

@@ -1,6 +1,6 @@
 import { createNamespace } from '../utils';
+import { useChildren } from '@vant/use';
 import { useExpose } from '../composition/use-expose';
-import { useChildren } from '../composition/use-relation';
 
 const [createComponent, bem] = createNamespace('form');
 

src/grid-item/index.js

@@ -6,7 +6,7 @@ import { BORDER } from '../utils/constant';
 import { GRID_KEY } from '../grid';
 
 // Composition
-import { useParent } from '../composition/use-relation';
+import { useParent } from '@vant/use';
 import { useRoute, routeProps } from '../composition/use-route';
 
 // Components

src/grid/index.js

@@ -1,6 +1,6 @@
 import { createNamespace, addUnit } from '../utils';
 import { BORDER_TOP } from '../utils/constant';
-import { useChildren } from '../composition/use-relation';
+import { useChildren } from '@vant/use';
 
 const [createComponent, bem] = createNamespace('grid');
 

src/index-anchor/index.js

@@ -6,9 +6,9 @@ import { BORDER_BOTTOM } from '../utils/constant';
 import { INDEX_BAR_KEY } from '../index-bar';
 
 // Composition
+import { useParent } from '@vant/use';
 import { useHeight } from '../composition/use-rect';
 import { useExpose } from '../composition/use-expose';
-import { useParent } from '../composition/use-relation';
 
 const [createComponent, bem] = createNamespace('index-anchor');
 

src/index-bar/index.js

@@ -13,10 +13,9 @@ import {
 } from '../utils';
 
 // Composition
-import { useScrollParent, useEventListener } from '@vant/use';
+import { useChildren, useScrollParent, useEventListener } from '@vant/use';
 import { useRect } from '../composition/use-rect';
 import { useTouch } from '../composition/use-touch';
-import { useChildren } from '../composition/use-relation';
 
 export const INDEX_BAR_KEY = 'vanIndexBar';
 

src/picker/PickerColumn.js

@@ -6,9 +6,9 @@ import { deepClone } from '../utils/deep-clone';
 import { range, isObject, createNamespace, preventDefault } from '../utils';
 
 // Composition
+import { useParent } from '@vant/use';
 import { useTouch } from '../composition/use-touch';
 import { useExpose } from '../composition/use-expose';
-import { useParent } from '../composition/use-relation';
 
 const DEFAULT_DURATION = 200;
 

src/picker/index.js

@@ -6,8 +6,8 @@ import { unitToPx, preventDefault, createNamespace } from '../utils';
 import { BORDER_UNSET_TOP_BOTTOM } from '../utils/constant';
 
 // Composition
+import { useChildren } from '@vant/use';
 import { useExpose } from '../composition/use-expose';
-import { useChildren } from '../composition/use-relation';
 
 // Components
 import Loading from '../loading';

src/radio-group/index.js

@@ -1,6 +1,6 @@
 import { watch } from 'vue';
 import { createNamespace } from '../utils';
-import { useChildren } from '../composition/use-relation';
+import { useChildren } from '@vant/use';
 import { useLinkField } from '../composition/use-link-field';
 
 const [createComponent, bem] = createNamespace('radio-group');

src/radio/index.js

@@ -1,5 +1,5 @@
 import { pick, createNamespace } from '../utils';
-import { useParent } from '../composition/use-relation';
+import { useParent } from '@vant/use';
 import Checker, { checkerProps } from '../checkbox/Checker';
 import { RADIO_KEY } from '../radio-group';
 

src/row/index.tsx

@@ -1,6 +1,6 @@
 import { computed, PropType, ComputedRef } from 'vue';
 import { createNamespace } from '../utils';
-import { useChildren } from '../composition/use-relation';
+import { useChildren } from '@vant/use';
 
 const [createComponent, bem] = createNamespace('row');
 

src/sidebar-item/index.js

@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { useParent } from '../composition/use-relation';
+import { useParent } from '@vant/use';
 import { useRoute, routeProps } from '../composition/use-route';
 import { SIDEBAR_KEY } from '../sidebar';
 import Badge from '../badge';

src/sidebar/index.js

@@ -1,6 +1,6 @@
 import { watch } from 'vue';
 import { createNamespace } from '../utils';
-import { useChildren } from '../composition/use-relation';
+import { useChildren } from '@vant/use';
 
 const [createComponent, bem] = createNamespace('sidebar');
 

src/step/index.js

@@ -2,7 +2,7 @@ import { computed } from 'vue';
 import { createNamespace } from '../utils';
 import { BORDER } from '../utils/constant';
 import { STEPS_KEY } from '../steps';
-import { useParent } from '../composition/use-relation';
+import { useParent } from '@vant/use';
 import Icon from '../icon';
 
 const [createComponent, bem] = createNamespace('step');

src/steps/index.js

@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { useChildren } from '../composition/use-relation';
+import { useChildren } from '@vant/use';
 
 const [createComponent, bem] = createNamespace('steps');
 

src/swipe-item/index.js

@@ -1,8 +1,8 @@
 import { computed, nextTick, onMounted, reactive } from 'vue';
 import { SWIPE_KEY } from '../swipe';
 import { createNamespace } from '../utils';
+import { useParent } from '@vant/use';
 import { useExpose } from '../composition/use-expose';
-import { useParent } from '../composition/use-relation';
 
 const [createComponent, bem] = createNamespace('swipe-item');
 

src/swipe/index.js

@@ -19,11 +19,10 @@ import {
 } from '../utils';
 
 // Composition
-import { usePageVisibility, useWindowSize } from '@vant/use';
+import { useChildren, useWindowSize, usePageVisibility } from '@vant/use';
 import { useRect } from '../composition/use-rect';
 import { useTouch } from '../composition/use-touch';
 import { useExpose } from '../composition/use-expose';
-import { useChildren } from '../composition/use-relation';
 
 const [createComponent, bem] = createNamespace('swipe');
 

src/tab/index.js

@@ -3,8 +3,8 @@ import { createNamespace } from '../utils';
 import { TABS_KEY } from '../tabs';
 
 // Composition
+import { useParent } from '@vant/use';
 import { routeProps } from '../composition/use-route';
-import { useParent } from '../composition/use-relation';
 
 const [createComponent, bem] = createNamespace('tab');
 

src/tabbar-item/index.js

@@ -5,7 +5,7 @@ import { TABBAR_KEY } from '../tabbar';
 import { createNamespace, isObject, isDef } from '../utils';
 
 // Composition
-import { useParent } from '../composition/use-relation';
+import { useParent } from '@vant/use';
 import { routeProps, useRoute } from '../composition/use-route';
 
 // Components

src/tabbar/index.js

@@ -6,7 +6,7 @@ import { BORDER_TOP_BOTTOM } from '../utils/constant';
 import { callInterceptor } from '../utils/interceptor';
 
 // Composition
-import { useChildren } from '../composition/use-relation';
+import { useChildren } from '@vant/use';
 import { usePlaceholder } from '../composition/use-placeholder';
 
 const [createComponent, bem] = createNamespace('tabbar');

src/tabs/index.js

@@ -25,11 +25,15 @@ import { BORDER_TOP_BOTTOM } from '../utils/constant';
 import { callInterceptor } from '../utils/interceptor';
 
 // Composition
-import { useWindowSize, useScrollParent, useEventListener } from '@vant/use';
+import {
+  useChildren,
+  useWindowSize,
+  useScrollParent,
+  useEventListener,
+} from '@vant/use';
 import { route } from '../composition/use-route';
 import { useRefs } from '../composition/use-refs';
 import { useExpose } from '../composition/use-expose';
-import { useChildren } from '../composition/use-relation';
 
 // Components
 import Sticky from '../sticky';