vft 0.0.1

package/src/web/filter/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div :class="ns.b()" :style="filterStyle">
+    <div :class="ns.e('filter-menu')" v-for="(menu, index) in menus" :key="menu.title">
+      <!-- 单选、多选、级联、更多 -->
+      <template v-if="menu.component !== ComponentType.DATE">
+        <component
+          :is="filterComponents[index]"
+          :title="menu.title"
+          :options="menu.options"
+          :type="menu?.type"
+          :label-key="menu?.labelKey"
+          :value-key="menu?.valueKey"
+          :children-key="menu?.childrenKey"
+          :has-all="menu?.hasAll"
+          :hide-search="menu?.hideSearch"
+          :value="menu?.value"
+          :required="menu?.required"
+          @submit="menu.submitFn"
+        />
+      </template>
+      <!-- 日期 -->
+      <template v-else>
+        <component :is="filterComponents[index]" :title="menu.title" :type="menu?.type" :shortcuts="menu?.shortcuts" @submit="menu.submitFn"/>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type CSSProperties, defineAsyncComponent, computed } from 'vue';
+import { useNamespace } from '../../use';
+import { ComponentType, type FilterMenuProps } from './type';
+
+interface FilterProps {
+  menus: Array<FilterMenuProps>;
+  gap?: string | number;
+}
+
+const { menus, gap = 40 } = defineProps<FilterProps>();
+
+const ns = /* hoist-static*/ useNamespace('filter');
+defineOptions({ name: ns.b() });
+
+const filterStyle = computed(() => {
+  return {
+    ...ns.cssVarBlock({
+      gap: isNaN(+gap) ? `${gap}` : `${gap}px`
+    })
+  } as CSSProperties;
+});
+
+let filterComponents: any = {};
+menus.forEach((menu, index) => {
+  filterComponents[index] = defineAsyncComponent(() => import(`../${menu.component}/index.vue`));
+});
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/src/web/filter/type.ts

@@ -0,0 +1,13 @@
+export enum ComponentType {
+  CASCADER = 'cascader-select',
+  SINGLE = 'single-select',
+  MULTIPLE = 'multiple-select',
+  DATE = 'datepicker',
+  TILED = 'tiled-select'
+}
+
+export interface FilterMenuProps {
+  component: ComponentType;
+  submitFn: Function;
+  [key: string]: any;
+}

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

@@ -0,0 +1,6 @@
+import FocusTrap from './index.vue';
+
+export { FocusTrap };
+
+export * from './tokens';
+export * from './utils';

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

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

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

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

@@ -0,0 +1,22 @@
+$name: full-screen;
+
+@include set-root-css-vars($name, $full-screen);
+
+@function getCompCssVar($value) {
+  @return getCssVar($name, $value);
+}
+
+@include b($name) {
+  color: getCompCssVar('color');
+  font-size: getCompCssVar('font-size');
+  transition: color 0.2s;
+  i {
+    margin-right: 2px;
+  }
+  &:hover {
+    color: getCompCssVar('hover-color');
+    i {
+      color: getCompCssVar('hover-color');
+    }
+  }
+}

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

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

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

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

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