chore: rename composables folder

src/composables/use-expose.ts

@@ -0,0 +1,9 @@
+import { getCurrentInstance } from 'vue';
+
+// expose public api
+export function useExpose(apis: Record<string, any>) {
+  const instance = getCurrentInstance();
+  if (instance) {
+    Object.assign(instance.proxy, apis);
+  }
+}

src/composables/use-height.ts

@@ -0,0 +1,14 @@
+import { useRect } from '@vant/use';
+import { Ref, ref, onMounted, nextTick } from 'vue';
+
+export const useHeight = (element: Element | Ref<Element>) => {
+  const height = ref();
+
+  onMounted(() => {
+    nextTick(() => {
+      height.value = useRect(element).height;
+    });
+  });
+
+  return height;
+};

src/composables/use-lazy-render.ts

@@ -0,0 +1,17 @@
+import { ref, watch, WatchSource } from 'vue';
+
+export function useLazyRender(show: WatchSource<boolean | undefined>) {
+  const inited = ref(false);
+
+  watch(
+    show,
+    (value) => {
+      if (value) {
+        inited.value = value;
+      }
+    },
+    { immediate: true }
+  );
+
+  return (render: () => JSX.Element) => () => (inited.value ? render() : null);
+}

src/composables/use-link-field.ts

@@ -0,0 +1,15 @@
+import { watch, inject } from 'vue';
+import { FIELD_KEY } from '../field';
+
+export function useLinkField(getValue: () => unknown) {
+  const field = inject(FIELD_KEY, null) as any;
+
+  if (field && !field.childFieldValue.value) {
+    field.childFieldValue.value = getValue;
+
+    watch(getValue, () => {
+      field.resetValidation();
+      field.validateWithTrigger('onChange');
+    });
+  }
+}

src/composables/use-lock-scroll.ts

@@ -0,0 +1,25 @@
+let count = 0;
+
+const CLASSNAME = 'van-overflow-hidden';
+
+export function useLockScroll(shouldLock: () => boolean) {
+  const lock = () => {
+    if (shouldLock()) {
+      if (!count) {
+        document.body.classList.add(CLASSNAME);
+      }
+      count++;
+    }
+  };
+
+  const unlock = () => {
+    if (shouldLock() && count) {
+      count--;
+      if (!count) {
+        document.body.classList.remove(CLASSNAME);
+      }
+    }
+  };
+
+  return [lock, unlock];
+}

src/composables/use-placeholder.tsx

@@ -0,0 +1,16 @@
+import { useHeight } from './use-height';
+import type { Ref } from 'vue';
+import type { BEM } from '../utils/create/bem';
+
+export function usePlaceholder(contentRef: Ref<Element>, bem: BEM) {
+  const height = useHeight(contentRef);
+
+  return (renderContent: () => JSX.Element) => (
+    <div
+      class={bem('placeholder')}
+      style={{ height: height.value ? `${height.value}px` : undefined }}
+    >
+      {renderContent()}
+    </div>
+  );
+}

src/composables/use-refs.ts

@@ -0,0 +1,15 @@
+import { ref, onBeforeUpdate } from 'vue';
+
+export function useRefs() {
+  const refs = ref([] as Element[]);
+
+  onBeforeUpdate(() => {
+    refs.value = [];
+  });
+
+  const setRefs = (index: number) => (el: Element) => {
+    refs.value[index] = el;
+  };
+
+  return [refs, setRefs];
+}

src/composables/use-route.ts

@@ -0,0 +1,36 @@
+/**
+ * Vue Router support
+ */
+import {
+  PropType,
+  ExtractPropTypes,
+  getCurrentInstance,
+  ComponentPublicInstance,
+} from 'vue';
+import type { RouteLocation } from 'vue-router';
+
+export const routeProps = {
+  to: [String, Object] as PropType<RouteLocation>,
+  url: String,
+  replace: Boolean,
+};
+
+export type RouteProps = ExtractPropTypes<typeof routeProps>;
+
+export function route(vm: ComponentPublicInstance<RouteProps>) {
+  const router = vm.$router;
+  const { to, url, replace } = vm;
+
+  if (to && router) {
+    router[replace ? 'replace' : 'push'](to);
+  } else if (url) {
+    replace ? location.replace(url) : (location.href = url);
+  }
+}
+
+export function useRoute() {
+  const vm = getCurrentInstance()!.proxy as ComponentPublicInstance<RouteProps>;
+  return () => {
+    route(vm);
+  };
+}

src/composables/use-touch.ts

@@ -0,0 +1,69 @@
+import { ref } from 'vue';
+
+const MIN_DISTANCE = 10;
+
+type Direction = '' | 'vertical' | 'horizontal';
+
+function getDirection(x: number, y: number) {
+  if (x > y && x > MIN_DISTANCE) {
+    return 'horizontal';
+  }
+  if (y > x && y > MIN_DISTANCE) {
+    return 'vertical';
+  }
+  return '';
+}
+
+export function useTouch() {
+  const startX = ref(0);
+  const startY = ref(0);
+  const deltaX = ref(0);
+  const deltaY = ref(0);
+  const offsetX = ref(0);
+  const offsetY = ref(0);
+  const direction = ref<Direction>('');
+
+  const isVertical = () => direction.value === 'vertical';
+  const isHorizontal = () => direction.value === 'horizontal';
+
+  const reset = () => {
+    deltaX.value = 0;
+    deltaY.value = 0;
+    offsetX.value = 0;
+    offsetY.value = 0;
+    direction.value = '';
+  };
+
+  const start = ((event: TouchEvent) => {
+    reset();
+    startX.value = event.touches[0].clientX;
+    startY.value = event.touches[0].clientY;
+  }) as EventListener;
+
+  const move = ((event: TouchEvent) => {
+    const touch = event.touches[0];
+    deltaX.value = touch.clientX - startX.value;
+    deltaY.value = touch.clientY - startY.value;
+    offsetX.value = Math.abs(deltaX.value);
+    offsetY.value = Math.abs(deltaY.value);
+
+    if (!direction.value) {
+      direction.value = getDirection(offsetX.value, offsetY.value);
+    }
+  }) as EventListener;
+
+  return {
+    move,
+    start,
+    reset,
+    startX,
+    startY,
+    deltaX,
+    deltaY,
+    offsetX,
+    offsetY,
+    direction,
+    isVertical,
+    isHorizontal,
+  };
+}

src/composables/use-visibility-change.ts

@@ -0,0 +1,38 @@
+import { inBrowser } from '../utils';
+import { Ref, onDeactivated, onBeforeUnmount } from 'vue';
+import { onMountedOrActivated } from '@vant/use';
+
+// @Experimental
+export function useVisibilityChange(
+  target: Ref<Element | undefined>,
+  onChange: (visible: boolean) => void
+) {
+  // compatibility: https://caniuse.com/#feat=intersectionobserver
+  if (!inBrowser || !window.IntersectionObserver) {
+    return;
+  }
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      // visibility changed
+      onChange(entries[0].intersectionRatio > 0);
+    },
+    { root: document.body }
+  );
+
+  const observe = () => {
+    if (target.value) {
+      observer.observe(target.value);
+    }
+  };
+
+  const unobserve = () => {
+    if (target.value) {
+      observer.unobserve(target.value);
+    }
+  };
+
+  onDeactivated(unobserve);
+  onBeforeUnmount(unobserve);
+  onMountedOrActivated(observe);
+}