vft 0.0.1 → 0.0.3

package/src/utils/aria.ts

@@ -1,126 +0,0 @@
-const FOCUSABLE_ELEMENT_SELECTORS = 'a[href],button:not([disabled]),button:not([hidden]),:not([tabindex="-1"]),input:not([disabled]),input:not([type="hidden"]),select:not([disabled]),textarea:not([disabled])';
-
-/**
- * Determine if the testing element is visible on screen no matter if its on the viewport or not
- */
-export const isVisible = (element: HTMLElement) => {
-  if (process.env.NODE_ENV === 'test') return true;
-  const computed = getComputedStyle(element);
-  // element.offsetParent won't work on fix positioned
-  // WARNING: potential issue here, going to need some expert advices on this issue
-  return computed.position === 'fixed' ? false : element.offsetParent !== null;
-};
-
-export const obtainAllFocusableElements = (
-  element: HTMLElement
-): HTMLElement[] => {
-  return Array.from(
-    element.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENT_SELECTORS)
-  ).filter((item: HTMLElement) => isFocusable(item) && isVisible(item));
-};
-
-/**
- * @desc Determine if target element is focusable
- * @param element {HTMLElement}
- * @returns {Boolean} true if it is focusable
- */
-export const isFocusable = (element: HTMLElement): boolean => {
-  if (
-    element.tabIndex > 0 ||
-    (element.tabIndex === 0 && element.getAttribute('tabIndex') !== null)
-  ) {
-    return true;
-  }
-  // HTMLButtonElement has disabled
-  if ((element as HTMLButtonElement).disabled) {
-    return false;
-  }
-
-  switch (element.nodeName) {
-    case 'A': {
-      // casting current element to Specific HTMLElement in order to be more type precise
-      return (
-        !!(element as HTMLAnchorElement).href &&
-        (element as HTMLAnchorElement).rel !== 'ignore'
-      );
-    }
-    case 'INPUT': {
-      return !(
-        (element as HTMLInputElement).type === 'hidden' ||
-        (element as HTMLInputElement).type === 'file'
-      );
-    }
-    case 'BUTTON':
-    case 'SELECT':
-    case 'TEXTAREA': {
-      return true;
-    }
-    default: {
-      return false;
-    }
-  }
-};
-
-/**
- * @desc Set Attempt to set focus on the current node.
- * @param element
- *          The node to attempt to focus on.
- * @returns
- *  true if element is focused.
- */
-export const attemptFocus = (element: HTMLElement): boolean => {
-  if (!isFocusable(element)) {
-    return false;
-  }
-  // Remove the old try catch block since there will be no error to be thrown
-  element.focus?.();
-  return document.activeElement === element;
-};
-
-/**
- * Trigger an event
- * mouseenter, mouseleave, mouseover, keyup, change, click, etc.
- * @param  {HTMLElement} elm
- * @param  {String} name
- * @param  {*} opts
- */
-export const triggerEvent = function (
-  elm: HTMLElement,
-  name: string,
-  ...opts: Array<boolean>
-): HTMLElement {
-  let eventName: string;
-
-  if (name.includes('mouse') || name.includes('click')) {
-    eventName = 'MouseEvents';
-  } else if (name.includes('key')) {
-    eventName = 'KeyboardEvent';
-  } else {
-    eventName = 'HTMLEvents';
-  }
-  const evt = document.createEvent(eventName);
-
-  evt.initEvent(name, ...opts);
-  elm.dispatchEvent(evt);
-  return elm;
-};
-
-export const isLeaf = (el: HTMLElement) => !el.getAttribute('aria-owns');
-
-export const getSibling = (
-  el: HTMLElement,
-  distance: number,
-  elClass: string
-) => {
-  const { parentNode } = el;
-  if (!parentNode) return null;
-  const siblings = parentNode.querySelectorAll(elClass);
-  const index = Array.prototype.indexOf.call(siblings, el);
-  return siblings[index + distance] || null;
-};
-
-export const focusNode = (el: HTMLElement) => {
-  if (!el) return;
-  el.focus();
-  !isLeaf(el) && el.click();
-};

package/src/utils/arrays.ts

@@ -1,13 +0,0 @@
-export const unique = <T>(arr: T[]) => [...new Set(arr)];
-
-type Many<T> = T | ReadonlyArray<T>
-// TODO: rename to `ensureArray`
-/** like `_.castArray`, except falsy value returns empty array. */
-export const castArray = <T>(arr: Many<T>): T[] => {
-  if (!arr && (arr as any) !== 0) return [];
-  return Array.isArray(arr) ? arr : [arr];
-};
-
-// TODO: remove import alias
-// avoid naming conflicts
-export { castArray as ensureArray } from 'lodash';

package/src/utils/error.ts

@@ -1,23 +0,0 @@
-import { isString } from '@vri/utils';
-
-class VriError extends Error {
-  constructor(m: string) {
-    super(m);
-    this.name = 'VriError';
-  }
-}
-
-export function throwError(scope: string, m: string): never {
-  throw new VriError(`[${scope}] ${m}`);
-}
-
-export function debugWarn(err: Error): void
-export function debugWarn(scope: string, message: string): void
-export function debugWarn(scope: string | Error, message?: string): void {
-  if (process.env.NODE_ENV !== 'production') {
-    const error: Error = isString(scope)
-      ? new VriError(`[${scope}] ${message}`)
-      : scope;
-    console.warn(error);
-  }
-}

package/src/utils/event.ts

@@ -1,15 +0,0 @@
-export const composeEventHandlers = <E>(theirsHandler?: (event: E) => boolean | void, oursHandler?: (event: E) => void, { checkForDefaultPrevented = true } = {}) => {
-  const handleEvent = (event: E) => {
-    const shouldPrevent = theirsHandler?.(event);
-
-    if (checkForDefaultPrevented === false || !shouldPrevent) {
-      return oursHandler?.(event);
-    }
-  };
-  return handleEvent;
-};
-
-type WhenMouseHandler = (e: PointerEvent) => any;
-export const whenMouse = (handler: WhenMouseHandler): WhenMouseHandler => {
-  return (e: PointerEvent) => (e.pointerType === 'mouse' ? handler(e) : undefined);
-};

package/src/utils/helper.ts

@@ -1,7 +0,0 @@
-export const getSizeType = (type) => {
-  const typeList = ['large', 'small'];
-  if (typeList.includes(type)) {
-    return type;
-  }
-  return false;
-};

package/src/utils/index.ts

@@ -1,8 +0,0 @@
-export * from './error';
-export * from './vnode';
-export * from './event';
-export * from './scroll';
-export * from './aria';
-export * from './arrays';
-export * from './rand';
-export * from './helper';

package/src/utils/interceptor.ts

@@ -1,39 +0,0 @@
-import { isPromise, noop } from '@vri/utils';
-
-export type Interceptor = (...args: any[]) => Promise<boolean> | boolean | undefined | void;
-
-export function callInterceptor(
-  interceptor: Interceptor | undefined,
-  {
-    args = [],
-    done,
-    canceled
-  }: {
-    args?: unknown[];
-    done: () => void;
-    canceled?: () => void;
-  }
-) {
-  if (interceptor) {
-    // eslint-disable-next-line prefer-spread
-    const returnVal = interceptor.apply(null, args);
-
-    if (isPromise(returnVal)) {
-      returnVal
-        .then((value) => {
-          if (value) {
-            done();
-          } else if (canceled) {
-            canceled();
-          }
-        })
-        .catch(noop);
-    } else if (returnVal) {
-      done();
-    } else if (canceled) {
-      canceled();
-    }
-  } else {
-    done();
-  }
-}

package/src/utils/mount-component.ts

@@ -1,65 +0,0 @@
-import { createApp, reactive, type Component } from 'vue';
-import { useExpose } from '@vri/use';
-
-/**
- * @description popup 组件的状态控制
- * @author wfd
- * @date 2022/7/13 13:40
- * @example
- */
-export function usePopupState() {
-  const state = reactive<{
-    show: boolean;
-    [key: string]: any;
-  }>({
-    show: false
-  });
-
-  // 切换 show 的状态
-  const toggle = (show: boolean) => {
-    state.show = show;
-  };
-
-  // 如果是 open 说明是打开 popup，transitionAppear 设置为 true
-  const open = (props: Record<string, any>) => {
-    // 这里直接用 Object.assign 的原因是可以，合并后 state 会被直接改变
-    Object.assign(state, props, { transitionAppear: true });
-    // 将 show 改为 true
-    toggle(true);
-  };
-
-  // 关闭 popup 事件
-  const close = () => toggle(false);
-
-  // 将 open, close, toggle 合并到 instance 实例对象的 proxy 属性中
-  useExpose({ open, close, toggle });
-
-  return {
-    open,
-    close,
-    state,
-    toggle
-  };
-}
-
-/**
- * @description mountComponent
- * @author wfd
- * @date 2022/7/12 20:13
- * @example
- * @param RootComponent
- */
-export function mountComponent(RootComponent: Component) {
-  const app = createApp(RootComponent);
-  const root = document.createElement('div');
-
-  document.body.appendChild(root);
-
-  return {
-    instance: app.mount(root),
-    unmount() {
-      app.unmount();
-      document.body.removeChild(root);
-    }
-  };
-}

package/src/utils/popper.ts

@@ -1,6 +0,0 @@
-import { createPopper } from '@popperjs/core/lib/popper-lite';
-import offsetModifier from '@popperjs/core/lib/modifiers/offset';
-import type { Instance, Placement } from '@popperjs/core';
-
-export { createPopper, offsetModifier };
-export type { Instance, Placement };

package/src/utils/rand.ts

@@ -1,12 +0,0 @@
-/**
- * Generate random number in range [0, 1000]
- * Maybe replace with [uuid](https://www.npmjs.com/package/uuid)
- */
-export const generateId = (): number => Math.floor(Math.random() * 10000);
-
-/**
- * Generating a random int in range (0, max - 1)
- * @param max {number}
- */
-export const getRandomInt = (max: number) =>
-  Math.floor(Math.random() * Math.floor(max));

package/src/utils/scroll.ts

@@ -1,101 +0,0 @@
-import { isClient } from '@vueuse/core';
-import { getStyle } from '@vri/utils';
-
-export const isScroll = (el: HTMLElement, isVertical?: boolean): boolean => {
-  if (!isClient) return false;
-
-  const key = (
-    {
-      undefined: 'overflow',
-      true: 'overflow-y',
-      false: 'overflow-x'
-    } as const
-  )[String(isVertical)]!;
-  const overflow = getStyle(el, key);
-  return ['scroll', 'auto', 'overlay'].some((s) => overflow.includes(s));
-};
-
-export const getScrollContainer = (
-  el: HTMLElement,
-  isVertical?: boolean
-): Window | HTMLElement | undefined => {
-  if (!isClient) return;
-
-  let parent: HTMLElement = el;
-  while (parent) {
-    if ([window, document, document.documentElement].includes(parent))
-      return window;
-
-    if (isScroll(parent, isVertical)) return parent;
-
-    parent = parent.parentNode as HTMLElement;
-  }
-
-  return parent;
-};
-
-let scrollBarWidth: number;
-export const getScrollBarWidth = (namespace: string): number => {
-  if (!isClient) return 0;
-  if (scrollBarWidth !== undefined) return scrollBarWidth;
-
-  const outer = document.createElement('div');
-  outer.className = `${namespace}-scrollbar__wrap`;
-  outer.style.visibility = 'hidden';
-  outer.style.width = '100px';
-  outer.style.position = 'absolute';
-  outer.style.top = '-9999px';
-  document.body.appendChild(outer);
-
-  const widthNoScroll = outer.offsetWidth;
-  outer.style.overflow = 'scroll';
-
-  const inner = document.createElement('div');
-  inner.style.width = '100%';
-  outer.appendChild(inner);
-
-  const widthWithScroll = inner.offsetWidth;
-  outer.parentNode?.removeChild(outer);
-  scrollBarWidth = widthNoScroll - widthWithScroll;
-
-  return scrollBarWidth;
-};
-
-/**
- * Scroll with in the container element, positioning the **selected** element at the top
- * of the container
- */
-export function scrollIntoView(
-  container: HTMLElement,
-  selected: HTMLElement
-): void {
-  if (!isClient) return;
-
-  if (!selected) {
-    container.scrollTop = 0;
-    return;
-  }
-
-  const offsetParents: HTMLElement[] = [];
-  let pointer = selected.offsetParent;
-  while (
-    pointer !== null &&
-    container !== pointer &&
-    container.contains(pointer)
-  ) {
-    offsetParents.push(pointer as HTMLElement);
-    pointer = (pointer as HTMLElement).offsetParent;
-  }
-  const top =
-    selected.offsetTop +
-    offsetParents.reduce((prev, curr) => prev + curr.offsetTop, 0);
-  const bottom = top + selected.offsetHeight;
-  const viewRectTop = container.scrollTop;
-  const viewRectBottom = viewRectTop + container.clientHeight;
-
-  if (top < viewRectTop) {
-    container.scrollTop = top;
-  } else if (bottom > viewRectBottom) {
-    container.scrollTop = bottom - container.clientHeight;
-  }
-}

package/src/utils/vnode.ts

@@ -1,169 +0,0 @@
-import {
-  Comment,
-  Fragment,
-  Text,
-  createBlock,
-  createCommentVNode,
-  isVNode,
-  openBlock
-} from 'vue';
-import { camelize, hasOwn, isArray } from '@vue/shared';
-import { debugWarn } from './error';
-import type {
-  VNode,
-  VNodeArrayChildren,
-  VNodeChild,
-  VNodeNormalizedChildren
-} from 'vue';
-
-const SCOPE = 'utils/vue/vnode';
-
-export enum PatchFlags {
-  TEXT = 1,
-  CLASS = 2,
-  STYLE = 4,
-  PROPS = 8,
-  FULL_PROPS = 16,
-  HYDRATE_EVENTS = 32,
-  STABLE_FRAGMENT = 64,
-  KEYED_FRAGMENT = 128,
-  UNKEYED_FRAGMENT = 256,
-  NEED_PATCH = 512,
-  DYNAMIC_SLOTS = 1024,
-  HOISTED = -1,
-  BAIL = -2,
-}
-
-export type VNodeChildAtom = Exclude<VNodeChild, Array<any>>
-export type RawSlots = Exclude<
-  VNodeNormalizedChildren,
-  Array<any> | null | string
->
-
-export function isFragment(node: VNode): boolean
-export function isFragment(node: unknown): node is VNode
-export function isFragment(node: unknown): node is VNode {
-  return isVNode(node) && node.type === Fragment;
-}
-
-export function isText(node: VNode): boolean
-export function isText(node: unknown): node is VNode
-export function isText(node: unknown): node is VNode {
-  return isVNode(node) && node.type === Text;
-}
-
-export function isComment(node: VNode): boolean
-export function isComment(node: unknown): node is VNode
-export function isComment(node: unknown): node is VNode {
-  return isVNode(node) && node.type === Comment;
-}
-
-const TEMPLATE = 'template';
-export function isTemplate(node: VNode): boolean
-export function isTemplate(node: unknown): node is VNode
-export function isTemplate(node: unknown): node is VNode {
-  return isVNode(node) && node.type === TEMPLATE;
-}
-
-/**
- * determine if the element is a valid element type rather than fragments and comment e.g. <template> v-if
- * @param node {VNode} node to be tested
- */
-export function isValidElementNode(node: VNode): boolean
-export function isValidElementNode(node: unknown): node is VNode
-export function isValidElementNode(node: unknown): node is VNode {
-  return isVNode(node) && !isFragment(node) && !isComment(node);
-}
-
-/**
- * get a valid child node (not fragment nor comment)
- * @param node {VNode} node to be searched
- * @param depth {number} depth to be searched
- */
-function getChildren(
-  node: VNodeNormalizedChildren | VNodeChild,
-  depth: number
-): VNodeNormalizedChildren | VNodeChild {
-  if (isComment(node)) return;
-  if (isFragment(node) || isTemplate(node)) {
-    return depth > 0 ? getFirstValidNode(node.children, depth - 1) : undefined;
-  }
-  return node;
-}
-
-export const getFirstValidNode = (
-  nodes: VNodeNormalizedChildren,
-  maxDepth = 3
-) => {
-  if (Array.isArray(nodes)) {
-    return getChildren(nodes[0], maxDepth);
-  } else {
-    return getChildren(nodes, maxDepth);
-  }
-};
-
-export function renderIf(
-  condition: boolean,
-  ...args: Parameters<typeof createBlock>
-) {
-  return condition ? renderBlock(...args) : createCommentVNode('v-if', true);
-}
-
-export function renderBlock(...args: Parameters<typeof createBlock>) {
-  return openBlock(), createBlock(...args);
-}
-
-export const getNormalizedProps = (node: VNode) => {
-  if (!isVNode(node)) {
-    debugWarn(SCOPE, '[getNormalizedProps] must be a VNode');
-    return {};
-  }
-
-  const raw = node.props || {};
-  const type = (isVNode(node.type) ? node.type.props : undefined) || {};
-  const props: Record<string, any> = {};
-
-  Object.keys(type).forEach((key) => {
-    if (hasOwn(type[key], 'default')) {
-      props[key] = type[key].default;
-    }
-  });
-
-  Object.keys(raw).forEach((key) => {
-    props[camelize(key)] = raw[key];
-  });
-
-  return props;
-};
-
-export const ensureOnlyChild = (children: VNodeArrayChildren | undefined) => {
-  if (!isArray(children) || children.length > 1) {
-    throw new Error('expect to receive a single Vue element child');
-  }
-  return children[0];
-};
-
-export type FlattenVNodes = Array<VNodeChildAtom | RawSlots>
-
-export const flattedChildren = (
-  children: FlattenVNodes | VNode | VNodeNormalizedChildren
-): FlattenVNodes => {
-  // transform to array
-  const vNodes = isArray(children) ? children : [children];
-  const result: FlattenVNodes = [];
-
-  vNodes.forEach((child) => {
-    if (isArray(child)) {
-      result.push(...flattedChildren(child));
-    } else if (isVNode(child) && isArray(child.children)) {
-      result.push(...flattedChildren(child.children));
-    } else {
-      result.push(child);
-      if (isVNode(child) && child.component?.subTree) {
-        result.push(...flattedChildren(child.component.subTree));
-      }
-    }
-  });
-  
-  return result;
-};

package/src/web/avatar/index.ts

@@ -1,3 +0,0 @@
-import Avatar from './index.vue';
-
-export { Avatar };

package/src/web/avatar/index.vue

@@ -1,83 +0,0 @@
-<template>
-  <span :class="avatarClass" :style="sizeStyle">
-    <img
-      v-if="(src || srcSet) && !hasLoadError"
-      :src="src"
-      :alt="alt"
-      :srcset="srcSet"
-      :style="fitStyle"
-      @error="handleError"
-    />
-    <Icon v-else-if="icon" />
-    <slot v-else />
-  </span>
-</template>
-
-<script lang="ts" setup>
-import { addUnit, isNumber, isString } from '@vri/utils';
-import type { CSSProperties } from 'vue';
-import { computed, ref, watch } from 'vue';
-import { Icon, type IconProps } from '../../common';
-import { useNamespace } from '../../use';
-
-interface Props {
-  size?: number | 'large' | 'default' | 'small'
-  shape?: 'circle' | 'square'
-  icon?: IconProps
-  src?: string
-  alt?: string
-  srcSet?: string
-  fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
-}
-
-const {
-  size = '',
-  shape = 'circle',
-  icon,
-  src,
-  alt,
-  srcSet,
-  fit = 'cover'
-} = defineProps<Props>();
-
-const emit = defineEmits(['error']);
-
-const ns = useNamespace('avatar');
-
-const hasLoadError = ref(false);
-
-const avatarClass = computed(() => {
-  const classList = [ns.b()];
-  if (isString(size)) classList.push(ns.m(size));
-  if (icon) classList.push(ns.m('icon'));
-  if (shape) classList.push(ns.m(shape));
-  return classList;
-});
-
-const sizeStyle = computed(() => {
-  return isNumber(size)
-    ? (ns.cssVarBlock({
-      size: addUnit(size) || ''
-    }) as CSSProperties)
-    : undefined;
-});
-
-const fitStyle = computed<CSSProperties>(() => ({
-  objectFit: fit
-}));
-
-// need reset hasLoadError to false if src changed
-watch(
-  () => src,
-  () => (hasLoadError.value = false)
-);
-
-function handleError (e: Event) {
-  hasLoadError.value = true;
-  emit('error', e);
-}
-</script>
-
-<style lang="scss">
-@import "./index.scss";
-</style>

package/src/web/back-top/index.ts

@@ -1,3 +0,0 @@
-import BackTop from './index.vue';
-
-export { BackTop };