vft 0.0.1

package/src/use/use-forward-ref.ts

@@ -0,0 +1,35 @@
+import { provide } from 'vue';
+
+import type { InjectionKey, ObjectDirective, Ref } from 'vue';
+
+type ForwardRefSetter = <T>(el: T) => void;
+
+export type ForwardRefInjectionContext = {
+  setForwardRef: ForwardRefSetter;
+};
+
+export const FORWARD_REF_INJECTION_KEY: InjectionKey<ForwardRefInjectionContext> = Symbol('elForwardRef');
+
+export const useForwardRef = <T>(forwardRef: Ref<T | null>) => {
+  const setForwardRef = (el: T) => {
+    forwardRef.value = el;
+  };
+
+  provide(FORWARD_REF_INJECTION_KEY, {
+    setForwardRef
+  });
+};
+
+export const useForwardRefDirective = (setForwardRef: ForwardRefSetter): ObjectDirective => {
+  return {
+    mounted(el) {
+      setForwardRef(el);
+    },
+    updated(el) {
+      setForwardRef(el);
+    },
+    unmounted() {
+      setForwardRef(null);
+    }
+  };
+};

package/src/use/use-global-config/index.ts

@@ -0,0 +1,81 @@
+import { keysOf } from '@vri/utils';
+import { debugWarn } from '../../utils';
+import { computed, getCurrentInstance, inject, provide, ref, unref } from 'vue';
+import { CONFIG_PROVIDER_KEY, type ConfigProviderContext } from '../../common/config-provider/types';
+
+import type { MaybeRef } from '@vueuse/core';
+import type { App, Ref } from 'vue';
+
+const globalConfig = ref<ConfigProviderContext>();
+
+/**
+ * @description 如果能拿到 vue 实例，则返回
+ * @author wfd
+ * @date 2022/10/18 13:06
+ * @example
+ * @param {K} key
+ * @param {D} defaultValue
+ * @returns {Ref<Exclude<ConfigProviderContext[K], undefined> | D>}
+ */
+export function useGlobalConfig<
+  K extends keyof ConfigProviderContext,
+  D extends ConfigProviderContext[K]
+>(
+  key: K,
+  defaultValue?: D
+): Ref<Exclude<ConfigProviderContext[K], undefined> | D>
+export function useGlobalConfig(): Ref<ConfigProviderContext>
+export function useGlobalConfig(
+  key?: keyof ConfigProviderContext,
+  defaultValue = undefined
+) {
+  const config = getCurrentInstance()
+    ? inject(CONFIG_PROVIDER_KEY, globalConfig)
+    : globalConfig;
+  if (key) {
+    return computed(() => config.value?.[key] ?? defaultValue);
+  } else {
+    return config;
+  }
+}
+
+export const provideGlobalConfig = (
+  config: MaybeRef<ConfigProviderContext>,
+  app?: App,
+  global = false
+) => {
+  const inSetup = !!getCurrentInstance();
+  const oldConfig = inSetup ? useGlobalConfig() : undefined;
+
+  const provideFn = app?.provide ?? (inSetup ? provide : undefined);
+  if (!provideFn) {
+    debugWarn(
+      'provideGlobalConfig',
+      'provideGlobalConfig() can only be used inside setup().'
+    );
+    return;
+  }
+
+  const context = computed(() => {
+    const cfg = unref(config);
+    if (!oldConfig?.value) return cfg;
+    return mergeConfig(oldConfig.value, cfg);
+  });
+  provideFn(CONFIG_PROVIDER_KEY, context);
+  if (global || !globalConfig.value) {
+    globalConfig.value = context.value;
+  }
+  return context;
+};
+
+const mergeConfig = (
+  a: ConfigProviderContext,
+  b: ConfigProviderContext
+): ConfigProviderContext => {
+  const keys = [...new Set([...keysOf(a), ...keysOf(b)])];
+  const obj: Record<string, any> = {};
+  for (const key of keys) {
+    obj[key] = b[key] ?? a[key];
+  }
+  return obj;
+};

package/src/use/use-id/index.ts

@@ -0,0 +1,43 @@
+import { computed, getCurrentInstance, inject, unref } from 'vue';
+import { isClient } from '@vueuse/core';
+import { debugWarn } from '../../utils';
+import { useGlobalConfig } from '../use-global-config';
+import { defaultNamespace } from '../use-namespace';
+
+import type { InjectionKey, Ref } from 'vue';
+import type { MaybeRef } from '@vueuse/core';
+
+export type ElIdInjectionContext = {
+  prefix: number;
+  current: number;
+};
+
+const defaultIdInjection = {
+  prefix: Math.floor(Math.random() * 10000),
+  current: 0
+};
+
+export const ID_INJECTION_KEY: InjectionKey<ElIdInjectionContext> = Symbol('elIdInjection');
+
+export const useIdInjection = (): ElIdInjectionContext => {
+  return getCurrentInstance() ? inject(ID_INJECTION_KEY, defaultIdInjection) : defaultIdInjection;
+};
+
+export const useId = (deterministicId?: MaybeRef<string>): Ref<string> => {
+  const idInjection = useIdInjection();
+  if (!isClient && idInjection === defaultIdInjection) {
+    debugWarn(
+      'IdInjection',
+      `Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed
+usage: app.provide(ID_INJECTION_KEY, {
+  prefix: number,
+  current: number,
+})`
+    );
+  }
+
+  const namespace = useGlobalConfig('namespace', defaultNamespace);
+  const idRef = computed(() => unref(deterministicId) || `${namespace.value}-id-${idInjection.prefix}-${idInjection.current++}`);
+
+  return idRef;
+};

package/src/use/use-model-toggle/index.ts

@@ -0,0 +1,151 @@
+import { computed, getCurrentInstance, onMounted, watch } from 'vue';
+import { isFunction } from '@vue/shared';
+import { isClient } from '@vueuse/core';
+import { isBoolean } from '@vri/utils';
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
+
+import type { ComponentPublicInstance, Ref } from 'vue';
+
+export const createModelToggleComposable = <T extends string>(name: T) => {
+  const updateEventKey = `update:${name}` as const;
+  const updateEventKeyRaw = `onUpdate:${name}` as const;
+
+  const useModelToggle = ({ indicator, toggleReason, shouldHideWhenRouteChanges, shouldProceed, onShow, onHide }: ModelToggleParams) => {
+    const instance = getCurrentInstance()!;
+    const { emit } = instance;
+    const props = instance.props as any & {
+      disabled: boolean;
+    };
+    const hasUpdateHandler = computed(() => isFunction(props[updateEventKeyRaw]));
+    // when it matches the default value we say this is absent
+    // though this could be mistakenly passed from the user but we need to rule out that
+    // condition
+    const isModelBindingAbsent = computed(() => props[name] === null);
+
+    const doShow = (event?: Event) => {
+      if (indicator.value === true) {
+        return;
+      }
+
+      indicator.value = true;
+      if (toggleReason) {
+        toggleReason.value = event;
+      }
+      if (isFunction(onShow)) {
+        onShow(event);
+      }
+    };
+
+    const doHide = (event?: Event) => {
+      if (indicator.value === false) {
+        return;
+      }
+
+      indicator.value = false;
+      if (toggleReason) {
+        toggleReason.value = event;
+      }
+      if (isFunction(onHide)) {
+        onHide(event);
+      }
+    };
+
+    const show = (event?: Event) => {
+      if (props.disabled === true || (isFunction(shouldProceed) && !shouldProceed())) return;
+
+      const shouldEmit = hasUpdateHandler.value && isClient;
+
+      if (shouldEmit) {
+        emit(updateEventKey, true);
+      }
+
+      if (isModelBindingAbsent.value || !shouldEmit) {
+        doShow(event);
+      }
+    };
+
+    const hide = (event?: Event) => {
+      if (props.disabled === true || !isClient) return;
+
+      const shouldEmit = hasUpdateHandler.value && isClient;
+
+      if (shouldEmit) {
+        emit(updateEventKey, false);
+      }
+
+      if (isModelBindingAbsent.value || !shouldEmit) {
+        doHide(event);
+      }
+    };
+
+    const onChange = (val: boolean) => {
+      if (!isBoolean(val)) return;
+      if (props.disabled && val) {
+        if (hasUpdateHandler.value) {
+          emit(updateEventKey, false);
+        }
+      } else if (indicator.value !== val) {
+        if (val) {
+          doShow();
+        } else {
+          doHide();
+        }
+      }
+    };
+
+    const toggle = () => {
+      if (indicator.value) {
+        hide();
+      } else {
+        show();
+      }
+    };
+
+    watch(() => props[name], onChange);
+
+    if (shouldHideWhenRouteChanges && instance.appContext.config.globalProperties.$route !== undefined) {
+      watch(
+        () => ({
+          ...(
+            instance.proxy as ComponentPublicInstance<{
+              $route: RouteLocationNormalizedLoaded;
+            }>
+          ).$route
+        }),
+        () => {
+          if (shouldHideWhenRouteChanges.value && indicator.value) {
+            hide();
+          }
+        }
+      );
+    }
+
+    onMounted(() => {
+      onChange(props[name]);
+    });
+
+    return {
+      hide,
+      show,
+      toggle,
+      hasUpdateHandler
+    };
+  };
+
+  return {
+    useModelToggle
+  };
+};
+
+const { useModelToggle } = createModelToggleComposable('modelValue');
+
+export { useModelToggle };
+
+export type ModelToggleParams = {
+  indicator: Ref<boolean>;
+  toggleReason?: Ref<Event | undefined>;
+  shouldHideWhenRouteChanges?: Ref<boolean>;
+  shouldProceed?: () => boolean;
+  onShow?: (event?: Event) => void;
+  onHide?: (event?: Event) => void;
+};

package/src/use/use-namespace/index.ts

@@ -0,0 +1,91 @@
+import { useGlobalConfig } from '../use-global-config';
+
+export const defaultNamespace = 'vri';
+const statePrefix = 'is-';
+
+export const _bem = (namespace: string, block: string, blockSuffix: string, element: string, modifier: string) => {
+  let cls = `${namespace}-${block}`;
+  if (blockSuffix) {
+    cls += `-${blockSuffix}`;
+  }
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+};
+
+export const useNamespace = (block: string) => {
+  const namespace = useGlobalConfig('namespace', defaultNamespace);
+  // vri-button | (test) = vri-button-test
+  const b = (blockSuffix = '') => _bem(namespace.value, block, blockSuffix, '', '');
+  // e('test'): vri-button__test
+  const e = (element?: string) => (element ? _bem(namespace.value, block, '', element, '') : '');
+  // m('test'): vri-button--test
+  const m = (modifier?: string) => (modifier ? _bem(namespace.value, block, '', '', modifier) : '');
+  // be('test'): vri-button-par__sub
+  const be = (blockSuffix?: string, element?: string) => (blockSuffix && element ? _bem(namespace.value, block, blockSuffix, element, '') : '');
+  // em('test'): vri-button__par--sub
+  const em = (element?: string, modifier?: string) => (element && modifier ? _bem(namespace.value, block, '', element, modifier) : '');
+  // bm('test'): vri-button-par--sub
+  const bm = (blockSuffix?: string, modifier?: string) => (blockSuffix && modifier ? _bem(namespace.value, block, blockSuffix, '', modifier) : '');
+  // bem('test'): vri-button-par__sub--sun
+  const bem = (blockSuffix?: string, element?: string, modifier?: string) => (blockSuffix && element && modifier ? _bem(namespace.value, block, blockSuffix, element, modifier) : '');
+  // is('show', true): is-show
+  const is: {
+    (name: string, state: boolean | undefined): string;
+    (name: string): string;
+  } = (name: string, ...args: [boolean | undefined] | []) => {
+    const state = args.length >= 1 ? args[0]! : true;
+    return name && state ? `${statePrefix}${name}` : '';
+  };
+
+  // cssVar({'border-style': 'solid','border-width': '10px',}): { "--vri-border-style": "solid","--vri-border-width": "10px" }
+  const cssVar = (object: Record<string, string|undefined>) => {
+    const styles: Record<string, string> = {};
+    for (const key in object) {
+      if (object[key]) {
+        styles[`--${namespace.value}-${key}`] = object[key]!;
+      }
+    }
+    return styles;
+  };
+
+  // cssVarBlock({ 'border-style': 'solid', 'border-width': '10px' })：{ "--vri-button-border-style": "solid", "--vri-button-border-width": "10px" }
+  const cssVarBlock = (object: Record<string, string | undefined>) => {
+    const styles: Record<string, string> = {};
+    for (const key in object) {
+      if (object[key]) {
+        styles[`--${namespace.value}-${block}-${key}`] = object[key]!;
+      }
+    }
+    return styles;
+  };
+
+  // cssVarName('test')：--vri-test
+  const cssVarName = (name: string) => `--${namespace.value}-${name}`;
+
+  // cssVarBlockName('test')：--vri-button-test
+  const cssVarBlockName = (name: string) => `--${namespace.value}-${block}-${name}`;
+
+  return {
+    namespace,
+    b,
+    e,
+    m,
+    be,
+    em,
+    bm,
+    bem,
+    is,
+    // css
+    cssVar,
+    cssVarName,
+    cssVarBlock,
+    cssVarBlockName
+  };
+};
+
+export type UseNamespaceReturn = ReturnType<typeof useNamespace>;

package/src/use/use-ordered-children/index.ts

@@ -0,0 +1,43 @@
+import { isVNode, shallowRef } from 'vue';
+import { flattedChildren } from '../../utils';
+
+import type { ComponentInternalInstance, VNode } from 'vue';
+
+const getOrderedChildren = <T> (
+  vm: ComponentInternalInstance,
+  childComponentName: string,
+  children: Record<number, T>
+): T[] => {
+  const nodes = flattedChildren(vm.subTree).filter((n): n is VNode =>
+    isVNode(n) && (n.type as any)?.name === childComponentName && !!n.component
+  );
+  
+  const uids = nodes.map((n) => n.component!.uid);
+  return uids.map((uid) => children[uid]).filter((p) => !!p);
+};
+
+export const useOrderedChildren = <T extends {uid: number}> (
+  vm: ComponentInternalInstance,
+  childComponentName: string
+) => {
+  const children: Record<number, T> = {};
+  const orderedChildren = shallowRef<T[]>([]);
+  
+  const addChild = (child: T) => {
+    children[child.uid] = child;
+    orderedChildren.value = getOrderedChildren(vm, childComponentName, children);
+  };
+  
+  const removeChild = (uid: number) => {
+    delete children[uid];
+    orderedChildren.value = orderedChildren.value.filter(
+      (children) => children.uid !== uid
+    );
+  };
+  
+  return {
+    children: orderedChildren,
+    addChild,
+    removeChild
+  };
+};

package/src/use/use-popper-container/index.ts

@@ -0,0 +1,43 @@
+import { computed, onBeforeMount } from 'vue';
+import { isClient } from '@vueuse/core';
+import { useGlobalConfig } from '../use-global-config';
+import { defaultNamespace } from '../use-namespace';
+import { useIdInjection } from '../use-id';
+
+let cachedContainer: HTMLElement;
+
+export const usePopperContainerId = () => {
+  const namespace = useGlobalConfig('namespace', defaultNamespace);
+  const idInjection = useIdInjection();
+
+  const id = computed(() => {
+    return `${namespace.value}-popper-container-${idInjection.prefix}`;
+  });
+  const selector = computed(() => `#${id.value}`);
+
+  return {
+    id,
+    selector
+  };
+};
+
+const createContainer = (id: string) => {
+  const container = document.createElement('div');
+  container.id = id;
+  document.body.appendChild(container);
+  return container;
+};
+
+export const usePopperContainer = () => {
+  onBeforeMount(() => {
+    if (!isClient) return;
+
+    const { id, selector } = usePopperContainerId();
+    // This is for bypassing the error that when under testing env, we often encounter
+    // document.body.innerHTML = '' situation
+    // for this we need to disable the caching since it's not really needed
+    if (process.env.NODE_ENV === 'test' || (!cachedContainer && !document.body.querySelector(selector.value))) {
+      cachedContainer = createContainer(id.value);
+    }
+  });
+};

package/src/use/use-timeout/index.ts

@@ -0,0 +1,18 @@
+import { tryOnScopeDispose } from '@vueuse/core';
+
+export function useTimeout() {
+  let timeoutHandle: number;
+
+  const registerTimeout = (fn: (...args: any[]) => any, delay: number) => {
+    cancelTimeout();
+    timeoutHandle = window.setTimeout(fn, delay);
+  };
+  const cancelTimeout = () => window.clearTimeout(timeoutHandle);
+
+  tryOnScopeDispose(() => cancelTimeout());
+
+  return {
+    registerTimeout,
+    cancelTimeout
+  };
+}

package/src/use/use-z-index/index.ts

@@ -0,0 +1,20 @@
+import { computed, ref } from 'vue';
+import { useGlobalConfig } from '../use-global-config';
+
+const zIndex = ref(0);
+
+export const useZIndex = () => {
+  const initialZIndex = useGlobalConfig('zIndex', 2000); // TODO: move to @element-plus/constants
+  const currentZIndex = computed(() => initialZIndex.value + zIndex.value);
+
+  const nextZIndex = () => {
+    zIndex.value++;
+    return currentZIndex.value;
+  };
+
+  return {
+    initialZIndex,
+    currentZIndex,
+    nextZIndex
+  };
+};

package/src/use/useGlobalZIndex.ts

@@ -0,0 +1,24 @@
+/**
+ * Popup 组件的 z-index。
+ 
+ * 会影响以下组件：
+ *   - ActionSheet
+ *   - Calendar
+ *   - Dialog
+ *   - DropdownItem
+ *   - ImagePreview
+ *   - Notify
+ *   - Popup
+ *   - Popover
+ *   - ShareSheet
+ *   - Toast
+ */
+let globalZIndex = 2000;
+
+/** 全局 z-index 读取后自动递增 */
+export const useGlobalZIndex = () => ++globalZIndex;
+
+/** 全局 z-index */
+export const setGlobalZIndex = (val: number) => {
+  globalZIndex = val;
+};

package/src/use/useLazyRender.ts

@@ -0,0 +1,17 @@
+import { ref, watch, type 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;
+}

package/src/use/useLockScroll.ts

@@ -0,0 +1,66 @@
+import { type Ref, watch, onBeforeUnmount, onDeactivated } from 'vue';
+import { getScrollParent, useTouch, onMountedOrActivated } from '@vri/use';
+import { preventDefault } from '@vri/utils';
+
+let totalLockCount = 0;
+
+const BODY_LOCK_CLASS = 'vri-overflow-hidden';
+
+export function useLockScroll(rootRef: Ref<HTMLElement | undefined>, shouldLock: () => boolean) {
+  const touch = useTouch();
+
+  const onTouchMove = (event: TouchEvent) => {
+    touch.move(event);
+
+    const direction = touch.deltaY.value > 0 ? '10' : '01';
+    const el = getScrollParent(event.target as Element, rootRef.value) as HTMLElement;
+    const { scrollHeight, offsetHeight, scrollTop } = el;
+    let status = '11';
+
+    if (scrollTop === 0) {
+      status = offsetHeight >= scrollHeight ? '00' : '01';
+    } else if (scrollTop + offsetHeight >= scrollHeight) {
+      status = '10';
+    }
+
+    if (status !== '11' && touch.isVertical() && !(parseInt(status, 2) & parseInt(direction, 2))) {
+      preventDefault(event, true);
+    }
+  };
+
+  const lock = () => {
+    document.addEventListener('touchstart', touch.start);
+    document.addEventListener('touchmove', onTouchMove, { passive: false });
+
+    if (!totalLockCount) {
+      document.body.classList.add(BODY_LOCK_CLASS);
+    }
+
+    totalLockCount++;
+  };
+
+  const unlock = () => {
+    if (totalLockCount) {
+      document.removeEventListener('touchstart', touch.start);
+      document.removeEventListener('touchmove', onTouchMove);
+
+      totalLockCount--;
+
+      if (!totalLockCount) {
+        document.body.classList.remove(BODY_LOCK_CLASS);
+      }
+    }
+  };
+
+  const init = () => shouldLock() && lock();
+
+  const destroy = () => shouldLock() && unlock();
+
+  onMountedOrActivated(init);
+  onDeactivated(destroy);
+  onBeforeUnmount(destroy);
+
+  watch(shouldLock, (value) => {
+    value ? lock() : unlock();
+  });
+}