vft 0.0.1

package/src/utils/aria.ts

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

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

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

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

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

package/src/utils/index.ts

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

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

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

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

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

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

@@ -0,0 +1,169 @@
+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.scss

@@ -0,0 +1,50 @@
+$name: avatar;
+
+@include set-root-css-vars($name, $avatar);
+
+@include b($name) {
+  @include set-component-css-var('avatar-size', $avatar-size);
+
+  @include set-css-var-value(
+    ('avatar', 'size'),
+    map-get($avatar-size, 'default')
+  );
+
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  text-align: center;
+  overflow: hidden;
+  color: getCssVar('avatar', 'text-color');
+  background: getCssVar('avatar', 'bg-color');
+  width: getCssVar('avatar', 'size');
+  height: getCssVar('avatar', 'size');
+  font-size: getCssVar('avatar', 'text-size');
+
+  > img {
+    display: block;
+    height: 100%;
+  }
+
+  @include m(circle) {
+    border-radius: 50%;
+  }
+
+  @include m(square) {
+    border-radius: getCssVar('avatar', 'border-radius');
+  }
+
+  @include m(icon) {
+    font-size: getCssVar('avatar', 'icon-size');
+  }
+
+  @each $size in (small, large) {
+    @include m($size) {
+      @include set-css-var-value(
+        ('avatar', 'size'),
+        map-get($avatar-size, $size)
+      );
+    }
+  }
+}

package/src/web/avatar/index.ts

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