vft 0.0.1 → 0.0.3

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

@@ -1,35 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,151 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,24 +0,0 @@
-/**
- * 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

@@ -1,17 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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();
-  });
-}