vft 0.0.1 → 0.0.3

package/src/web/focus-trap/index.vue

@@ -1,328 +0,0 @@
-<template>
-  <slot :handle-keydown="onKeydown" />
-</template>
-
-<script lang="ts">
-import { EVENT_CODE } from '@vri/constants';
-import { useEscapeKeydown } from '@vri/use';
-import { isString } from '@vri/utils';
-import { isNil } from 'lodash';
-import type { PropType } from 'vue';
-import {
-  defineComponent,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  provide,
-  ref,
-  unref,
-  watch
-} from 'vue';
-import {
-  FOCUS_AFTER_RELEASED,
-  FOCUS_AFTER_TRAPPED,
-  FOCUS_AFTER_TRAPPED_OPTS,
-  FOCUS_TRAP_INJECTION_KEY,
-  ON_RELEASE_FOCUS_EVT,
-  ON_TRAP_FOCUS_EVT
-} from './tokens';
-import type { FocusLayer } from './utils';
-import {
-  createFocusOutPreventedEvent,
-  focusableStack,
-  focusFirstDescendant,
-  getEdges,
-  isFocusCausedByUserEvent,
-  obtainAllFocusableElements,
-  tryFocus,
-  useFocusReason
-} from './utils';
-
-export default defineComponent({
-  name: 'VriFocusTrap',
-  inheritAttrs: false,
-  props: {
-    loop: Boolean,
-    trapped: Boolean,
-    focusTrapEl: Object as PropType<HTMLElement>,
-    focusStartEl: {
-      type: [Object, String] as PropType<'container' | 'first' | HTMLElement>,
-      default: 'first'
-    }
-  },
-  emits: [
-    ON_TRAP_FOCUS_EVT,
-    ON_RELEASE_FOCUS_EVT,
-    'focusin',
-    'focusout',
-    'focusout-prevented',
-    'release-requested'
-  ],
-  setup (props, { emit }) {
-    const forwardRef = ref<HTMLElement | undefined>();
-    let lastFocusBeforeTrapped: HTMLElement | null;
-    let lastFocusAfterTrapped: HTMLElement | null;
-
-    const { focusReason } = useFocusReason();
-
-    useEscapeKeydown((event) => {
-      if (props.trapped && !focusLayer.paused) {
-        emit('release-requested', event);
-      }
-    });
-
-    const focusLayer: FocusLayer = {
-      paused: false,
-      pause () {
-        this.paused = true;
-      },
-      resume () {
-        this.paused = false;
-      }
-    };
-
-    const onKeydown = (e: KeyboardEvent) => {
-      if (!props.loop && !props.trapped) return;
-      if (focusLayer.paused) return;
-
-      const { key, altKey, ctrlKey, metaKey, currentTarget, shiftKey } = e;
-      const { loop } = props;
-      const isTabbing =
-        key === EVENT_CODE.tab && !altKey && !ctrlKey && !metaKey;
-
-      const currentFocusingEl = document.activeElement;
-      if (isTabbing && currentFocusingEl) {
-        const container = currentTarget as HTMLElement;
-        const [first, last] = getEdges(container);
-        const isTabbable = first && last;
-        if (!isTabbable) {
-          if (currentFocusingEl === container) {
-            const focusoutPreventedEvent = createFocusOutPreventedEvent({
-              focusReason: focusReason.value
-            });
-            emit('focusout-prevented', focusoutPreventedEvent);
-            if (!focusoutPreventedEvent.defaultPrevented) {
-              e.preventDefault();
-            }
-          }
-        } else {
-          if (!shiftKey && currentFocusingEl === last) {
-            const focusoutPreventedEvent = createFocusOutPreventedEvent({
-              focusReason: focusReason.value
-            });
-            emit('focusout-prevented', focusoutPreventedEvent);
-            if (!focusoutPreventedEvent.defaultPrevented) {
-              e.preventDefault();
-              if (loop) tryFocus(first, true);
-            }
-          } else if (
-            shiftKey &&
-            [first, container].includes(currentFocusingEl as HTMLElement)
-          ) {
-            const focusoutPreventedEvent = createFocusOutPreventedEvent({
-              focusReason: focusReason.value
-            });
-            emit('focusout-prevented', focusoutPreventedEvent);
-            if (!focusoutPreventedEvent.defaultPrevented) {
-              e.preventDefault();
-              if (loop) tryFocus(last, true);
-            }
-          }
-        }
-      }
-    };
-
-    provide(FOCUS_TRAP_INJECTION_KEY, {
-      focusTrapRef: forwardRef,
-      onKeydown
-    });
-
-    watch(
-      () => props.focusTrapEl,
-      (focusTrapEl) => {
-        if (focusTrapEl) {
-          forwardRef.value = focusTrapEl;
-        }
-      },
-      { immediate: true }
-    );
-
-    watch([forwardRef], ([forwardRef], [oldForwardRef]) => {
-      if (forwardRef) {
-        forwardRef.addEventListener('keydown', onKeydown);
-        forwardRef.addEventListener('focusin', onFocusIn);
-        forwardRef.addEventListener('focusout', onFocusOut);
-      }
-      if (oldForwardRef) {
-        oldForwardRef.removeEventListener('keydown', onKeydown);
-        oldForwardRef.removeEventListener('focusin', onFocusIn);
-        oldForwardRef.removeEventListener('focusout', onFocusOut);
-      }
-    });
-
-    const trapOnFocus = (e: Event) => {
-      emit(ON_TRAP_FOCUS_EVT, e);
-    };
-    const releaseOnFocus = (e: Event) => emit(ON_RELEASE_FOCUS_EVT, e);
-
-    const onFocusIn = (e: FocusEvent) => {
-      const trapContainer = unref(forwardRef);
-      if (!trapContainer) return;
-
-      const target = e.target as HTMLElement | null;
-      const relatedTarget = e.relatedTarget as HTMLElement | null;
-      const isFocusedInTrap = target && trapContainer.contains(target);
-
-      if (!props.trapped) {
-        const isPrevFocusedInTrap =
-          relatedTarget && trapContainer.contains(relatedTarget);
-        if (!isPrevFocusedInTrap) {
-          lastFocusBeforeTrapped = relatedTarget;
-        }
-      }
-
-      if (isFocusedInTrap) emit('focusin', e);
-
-      if (focusLayer.paused) return;
-
-      if (props.trapped) {
-        if (isFocusedInTrap) {
-          lastFocusAfterTrapped = target;
-        } else {
-          tryFocus(lastFocusAfterTrapped, true);
-        }
-      }
-    };
-
-    const onFocusOut = (e: Event) => {
-      const trapContainer = unref(forwardRef);
-      if (focusLayer.paused || !trapContainer) return;
-
-      if (props.trapped) {
-        const relatedTarget = (e as FocusEvent)
-          .relatedTarget as HTMLElement | null;
-        if (!isNil(relatedTarget) && !trapContainer.contains(relatedTarget)) {
-          // Give embedded focus layer time to pause this layer before reclaiming focus
-          // And only reclaim focus if it should currently be trapping
-          setTimeout(() => {
-            if (!focusLayer.paused && props.trapped) {
-              const focusoutPreventedEvent = createFocusOutPreventedEvent({
-                focusReason: focusReason.value
-              });
-              emit('focusout-prevented', focusoutPreventedEvent);
-              if (!focusoutPreventedEvent.defaultPrevented) {
-                tryFocus(lastFocusAfterTrapped, true);
-              }
-            }
-          }, 0);
-        }
-      } else {
-        const target = e.target as HTMLElement | null;
-        const isFocusedInTrap = target && trapContainer.contains(target);
-        if (!isFocusedInTrap) emit('focusout', e);
-      }
-    };
-
-    async function startTrap () {
-      // Wait for forwardRef to resolve
-      await nextTick();
-      const trapContainer = unref(forwardRef);
-      if (trapContainer) {
-        focusableStack.push(focusLayer);
-        const prevFocusedElement = trapContainer.contains(
-          document.activeElement
-        )
-          ? lastFocusBeforeTrapped
-          : document.activeElement;
-        lastFocusBeforeTrapped = prevFocusedElement as HTMLElement | null;
-        const isPrevFocusContained = trapContainer.contains(prevFocusedElement);
-        if (!isPrevFocusContained) {
-          const focusEvent = new Event(
-            FOCUS_AFTER_TRAPPED,
-            FOCUS_AFTER_TRAPPED_OPTS
-          );
-          trapContainer.addEventListener(FOCUS_AFTER_TRAPPED, trapOnFocus);
-          trapContainer.dispatchEvent(focusEvent);
-          if (!focusEvent.defaultPrevented) {
-            nextTick(() => {
-              let focusStartEl = props.focusStartEl;
-              if (!isString(focusStartEl)) {
-                tryFocus(focusStartEl);
-                if (document.activeElement !== focusStartEl) {
-                  focusStartEl = 'first';
-                }
-              }
-              if (focusStartEl === 'first') {
-                focusFirstDescendant(
-                  obtainAllFocusableElements(trapContainer),
-                  true
-                );
-              }
-              if (
-                document.activeElement === prevFocusedElement ||
-                focusStartEl === 'container'
-              ) {
-                tryFocus(trapContainer);
-              }
-            });
-          }
-        }
-      }
-    }
-
-    function stopTrap () {
-      const trapContainer = unref(forwardRef);
-
-      if (trapContainer) {
-        trapContainer.removeEventListener(FOCUS_AFTER_TRAPPED, trapOnFocus);
-
-        const releasedEvent = new CustomEvent(FOCUS_AFTER_RELEASED, {
-          ...FOCUS_AFTER_TRAPPED_OPTS,
-          detail: {
-            focusReason: focusReason.value
-          }
-        });
-        trapContainer.addEventListener(FOCUS_AFTER_RELEASED, releaseOnFocus);
-        trapContainer.dispatchEvent(releasedEvent);
-
-        if (
-          !releasedEvent.defaultPrevented &&
-          (focusReason.value === 'keyboard' || !isFocusCausedByUserEvent())
-        ) {
-          tryFocus(lastFocusBeforeTrapped ?? document.body, true);
-        }
-
-        trapContainer.removeEventListener(FOCUS_AFTER_RELEASED, trapOnFocus);
-        focusableStack.remove(focusLayer);
-      }
-    }
-
-    onMounted(() => {
-      if (props.trapped) {
-        startTrap();
-      }
-
-      watch(
-        () => props.trapped,
-        (trapped) => {
-          if (trapped) {
-            startTrap();
-          } else {
-            stopTrap();
-          }
-        }
-      );
-    });
-
-    onBeforeUnmount(() => {
-      if (props.trapped) {
-        stopTrap();
-      }
-    });
-
-    return {
-      onKeydown
-    };
-  }
-});
-</script>

package/src/web/focus-trap/tokens.ts

@@ -1,23 +0,0 @@
-import type { InjectionKey, Ref } from 'vue';
-
-export const FOCUS_AFTER_TRAPPED = 'focus-trap.focus-after-trapped';
-export const FOCUS_AFTER_RELEASED = 'focus-trap.focus-after-released';
-export const FOCUSOUT_PREVENTED = 'focus-trap.focusout-prevented';
-export const FOCUS_AFTER_TRAPPED_OPTS: EventInit = {
-  cancelable: true,
-  bubbles: false
-};
-export const FOCUSOUT_PREVENTED_OPTS: EventInit = {
-  cancelable: true,
-  bubbles: false
-};
-
-export const ON_TRAP_FOCUS_EVT = 'focusAfterTrapped';
-export const ON_RELEASE_FOCUS_EVT = 'focusAfterReleased';
-
-export type FocusTrapInjectionContext = {
-  focusTrapRef: Ref<HTMLElement | undefined>;
-  onKeydown: (e: KeyboardEvent) => void;
-};
-
-export const FOCUS_TRAP_INJECTION_KEY: InjectionKey<FocusTrapInjectionContext> = Symbol('elFocusTrap');

package/src/web/focus-trap/utils.ts

@@ -1,178 +0,0 @@
-import { onBeforeUnmount, onMounted, ref } from 'vue';
-import { FOCUSOUT_PREVENTED, FOCUSOUT_PREVENTED_OPTS } from './tokens';
-
-const focusReason = ref<'pointer' | 'keyboard'>();
-const lastUserFocusTimestamp = ref<number>(0);
-const lastAutomatedFocusTimestamp = ref<number>(0);
-let focusReasonUserCount = 0;
-
-export type FocusLayer = {
-  paused: boolean;
-  pause: () => void;
-  resume: () => void;
-};
-
-export type FocusStack = FocusLayer[];
-
-export const obtainAllFocusableElements = (element: HTMLElement): HTMLElement[] => {
-  const nodes: HTMLElement[] = [];
-  const walker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT, {
-    acceptNode: (
-      node: Element & {
-        disabled: boolean;
-        hidden: boolean;
-        type: string;
-        tabIndex: number;
-      }
-    ) => {
-      const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';
-      if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
-      return node.tabIndex >= 0 || node === document.activeElement ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
-    }
-  });
-  while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement);
-
-  return nodes;
-};
-
-export const getVisibleElement = (elements: HTMLElement[], container: HTMLElement) => {
-  for (const element of elements) {
-    if (!isHidden(element, container)) return element;
-  }
-};
-
-export const isHidden = (element: HTMLElement, container: HTMLElement) => {
-  if (process.env.NODE_ENV === 'test') return false;
-  if (getComputedStyle(element).visibility === 'hidden') return true;
-
-  while (element) {
-    if (container && element === container) return false;
-    if (getComputedStyle(element).display === 'none') return true;
-    element = element.parentElement as HTMLElement;
-  }
-
-  return false;
-};
-
-export const getEdges = (container: HTMLElement) => {
-  const focusable = obtainAllFocusableElements(container);
-  const first = getVisibleElement(focusable, container);
-  const last = getVisibleElement(focusable.reverse(), container);
-  return [first, last];
-};
-
-const isSelectable = (element: any): element is HTMLInputElement & { select: () => void } => {
-  return element instanceof HTMLInputElement && 'select' in element;
-};
-
-export const tryFocus = (element?: HTMLElement | { focus: () => void } | null, shouldSelect?: boolean) => {
-  if (element && element.focus) {
-    const prevFocusedElement = document.activeElement;
-    element.focus({ preventScroll: true });
-    lastAutomatedFocusTimestamp.value = window.performance.now();
-    if (element !== prevFocusedElement && isSelectable(element) && shouldSelect) {
-      if (element.tagName === 'INPUT') {
-        element.setSelectionRange(element.value.length, element.value.length);
-        return;
-      }
-      element.select();
-    }
-  }
-};
-
-function removeFromStack<T>(list: T[], item: T) {
-  const copy = [...list];
-
-  const idx = list.indexOf(item);
-
-  if (idx !== -1) {
-    copy.splice(idx, 1);
-  }
-  return copy;
-}
-
-const createFocusableStack = () => {
-  let stack = [] as FocusStack;
-
-  const push = (layer: FocusLayer) => {
-    const currentLayer = stack[0];
-
-    if (currentLayer && layer !== currentLayer) {
-      currentLayer.pause();
-    }
-
-    stack = removeFromStack(stack, layer);
-    stack.unshift(layer);
-  };
-
-  const remove = (layer: FocusLayer) => {
-    stack = removeFromStack(stack, layer);
-    stack[0]?.resume?.();
-  };
-
-  return {
-    push,
-    remove
-  };
-};
-
-export const focusFirstDescendant = (elements: HTMLElement[], shouldSelect = false) => {
-  const prevFocusedElement = document.activeElement;
-  for (const element of elements) {
-    tryFocus(element, shouldSelect);
-    if (document.activeElement !== prevFocusedElement) return;
-  }
-};
-
-export const focusableStack = createFocusableStack();
-
-export const isFocusCausedByUserEvent = (): boolean => {
-  return lastUserFocusTimestamp.value > lastAutomatedFocusTimestamp.value;
-};
-
-const notifyFocusReasonPointer = () => {
-  focusReason.value = 'pointer';
-  lastUserFocusTimestamp.value = window.performance.now();
-};
-
-const notifyFocusReasonKeydown = () => {
-  focusReason.value = 'keyboard';
-  lastUserFocusTimestamp.value = window.performance.now();
-};
-
-export const useFocusReason = (): {
-  focusReason: typeof focusReason;
-  lastUserFocusTimestamp: typeof lastUserFocusTimestamp;
-  lastAutomatedFocusTimestamp: typeof lastAutomatedFocusTimestamp;
-} => {
-  onMounted(() => {
-    if (focusReasonUserCount === 0) {
-      document.addEventListener('mousedown', notifyFocusReasonPointer);
-      document.addEventListener('touchstart', notifyFocusReasonPointer);
-      document.addEventListener('keydown', notifyFocusReasonKeydown);
-    }
-    focusReasonUserCount++;
-  });
-
-  onBeforeUnmount(() => {
-    focusReasonUserCount--;
-    if (focusReasonUserCount <= 0) {
-      document.removeEventListener('mousedown', notifyFocusReasonPointer);
-      document.removeEventListener('touchstart', notifyFocusReasonPointer);
-      document.removeEventListener('keydown', notifyFocusReasonKeydown);
-    }
-  });
-
-  return {
-    focusReason,
-    lastUserFocusTimestamp,
-    lastAutomatedFocusTimestamp
-  };
-};
-
-export const createFocusOutPreventedEvent = (detail: CustomEventInit['detail']) => {
-  return new CustomEvent(FOCUSOUT_PREVENTED, {
-    ...FOCUSOUT_PREVENTED_OPTS,
-    detail
-  });
-};

package/src/web/full-screen/index.ts

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

package/src/web/full-screen/index.vue

@@ -1,24 +0,0 @@
-<script lang="ts" setup>
-import { useFullscreen } from '@vri/use';
-import { Icon } from '../../';
-import { useNamespace } from '../../use';
-
-const ns = /* hoist-static*/ useNamespace('full-screen');
-
-defineOptions({
-	name: ns.b()
-});
-
-const { toggle, isFullscreen } = useFullscreen();
-</script>
-
-<template>
-  <span :class="ns.b()" @click="toggle">
-    <icon :icon="!isFullscreen ? 'vi-full-screen' : 'vi-exit-screen'" />
-    {{ !isFullscreen ? '全屏' : '退出全屏' }}
-  </span>
-</template>
-
-<style lang="scss">
-@import "./index.scss";
-</style>

package/src/web/icon-text/index.ts

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

package/src/web/icon-text/index.vue

@@ -1,77 +0,0 @@
-<script lang="ts" setup>
-import { addUnit, singleAttrToObj } from '@vri/utils';
-import { computed } from 'vue';
-import { Icon as VIcon } from '../../common/icon';
-import { type IconProps } from '../../common/icon/types';
-import { useNamespace } from '../../use';
-
-interface IconTextProps {
-  text: string;
-  icon: IconProps;
-  color?: string;
-  hoverColor?: string;
-  distance?: Numberish;
-  reverse?: boolean;
-}
-
-const {
-  text, icon, color = '#434343', hoverColor, reverse, distance
-} = defineProps<IconTextProps>();
-
-const ns = /* hoist-static*/ useNamespace('icon-text');
-
-defineOptions({
-  name: ns.b()
-});
-
-const emit = defineEmits(['click']);
-
-const _hoverColor = computed(() => {
-  return hoverColor ? hoverColor : color;
-});
-
-const _icon = computed(() => {
-  return singleAttrToObj(icon, 'icon', { size: 16, color }) as IconProps;
-});
-
-const distanceStyle = computed(() => {
-  return reverse ? { marginLeft: addUnit(distance) } : { marginRight: addUnit(distance) };
-});
-</script>
-
-<template>
-  <span :class="ns.b()" @click="emit('click')">
-    <v-icon v-if="!reverse" v-bind="_icon" :style="distanceStyle"/>
-    {{ text }}
-    <v-icon v-if="reverse" v-bind="_icon" :style="distanceStyle"/>
-  </span>
-</template>
-
-<style lang="scss">
-$name: icon-text;
-$icon-text: () !default;
-$icon-text: map-merge((
-  'text-color': white,
-), $icon-text);
-
-@include set-root-css-vars($name, $icon-text);
-
-@function getCompCssVar($value) {
-  @return getCssVar($name, $value);
-}
-
-@include b($name) {
-  display: flex;
-  align-items: center;
-
-  color: v-bind('color');
-
-  &:hover {
-    color: v-bind('_hoverColor');
-
-    i {
-      color: v-bind('_hoverColor') !important;
-    }
-  }
-}
-</style>

package/src/web/image/index.ts

@@ -1,5 +0,0 @@
-import Image from './index.vue';
-
-export * from './types';
-
-export { Image };