vft 0.0.1 → 0.0.2

package/src/web/popper/popper.vue

@@ -1,57 +0,0 @@
-<template>
-  <slot />
-</template>
-
-<script lang="ts" setup>
-import type { Instance as PopperInstance } from '@popperjs/core';
-import { computed, provide, ref } from 'vue';
-import './index.scss';
-import type { VriPopperInjectionContext } from './tokens';
-import { POPPER_INJECTION_KEY } from './tokens';
-
-defineOptions({
-  name: 'VriPopperRoot',
-  inheritAttrs: false
-});
-
-interface Props {
-  role?: 'dialog' | 'grid' | 'group' | 'listbox' | 'menu' | 'navigation' | 'tooltip' | 'tree';
-}
-
-const {
-  role = 'tooltip'
-} = defineProps<Props>();
-
-const triggerRef = ref<HTMLElement>();
-const popperInstanceRef = ref<PopperInstance>();
-const contentRef = ref<HTMLElement>();
-const referenceRef = ref<HTMLElement>();
-const _role = computed(() => role);
-
-const popperProvides = {
-  /**
-   * @description trigger element
-   */
-  triggerRef,
-  /**
-   * @description popperjs instance
-   */
-  popperInstanceRef,
-  /**
-   * @description popper content element
-   */
-  contentRef,
-  /**
-   * @description popper reference element
-   */
-  referenceRef,
-  /**
-   * @description role determines how aria attributes are distributed
-   */
-  role: _role
-} as VriPopperInjectionContext;
-
-defineExpose(popperProvides);
-
-provide(POPPER_INJECTION_KEY, popperProvides);
-</script>

package/src/web/popper/tokens.ts

@@ -1,28 +0,0 @@
-import type { ComputedRef, InjectionKey, Ref } from 'vue';
-import type { Instance } from '@popperjs/core';
-
-export type Measurable = {
-  getBoundingClientRect: () => DOMRect;
-};
-
-/**
- * triggerRef indicates the element that triggers popper
- * contentRef indicates the element of popper content
- * referenceRef indicates the element that popper content relative with
- */
-export type VriPopperInjectionContext = {
-  triggerRef: Ref<Measurable | undefined>;
-  contentRef: Ref<HTMLElement | undefined>;
-  popperInstanceRef: Ref<Instance | undefined>;
-  referenceRef: Ref<Measurable | undefined>;
-  role: ComputedRef<string>;
-};
-
-export type ElPopperContentInjectionContext = {
-  arrowRef: Ref<HTMLElement | undefined>;
-  arrowOffset: Ref<number | undefined>;
-};
-
-export const POPPER_INJECTION_KEY: InjectionKey<VriPopperInjectionContext> = Symbol('popper');
-
-export const POPPER_CONTENT_INJECTION_KEY: InjectionKey<ElPopperContentInjectionContext> = Symbol('popperContent');

package/src/web/popper/trigger.vue

@@ -1,166 +0,0 @@
-<template>
-  <only-child
-    v-if="!virtualTriggering"
-    v-bind="$attrs"
-    :aria-controls="ariaControls"
-    :aria-describedby="ariaDescribedby"
-    :aria-expanded="ariaExpanded"
-    :aria-haspopup="ariaHaspopup"
-  >
-    <slot />
-  </only-child>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, onBeforeUnmount, onMounted, watch, getCurrentInstance } from 'vue';
-import { isNil } from 'lodash';
-import { unrefElement } from '@vueuse/core';
-import { OnlyChild } from '../only-child';
-import { useForwardRef } from '../../use';
-import { POPPER_INJECTION_KEY } from './tokens';
-import { isElement } from '@vri/utils';
-
-import type { WatchStopHandle } from 'vue';
-import type { Measurable } from './types';
-
-defineOptions({
-  name: 'VriPopperTrigger',
-  inheritAttrs: false
-});
-
-interface Props {
-  virtualRef?: Measurable
-  virtualTriggering?: boolean
-  onMouseenter?: Function
-  onMouseleave?: Function
-  onClick?: Function
-  onKeydown?: Function
-  onFocus?: Function
-  onBlur?: Function
-  onContextmenu?: Function
-  id?: string
-  open?: boolean
-}
-
-const {
-  id,
-  open,
-  virtualRef
-} = defineProps<Props>();
-
-const instance = getCurrentInstance()!;
-
-const { role, triggerRef } = inject(POPPER_INJECTION_KEY, undefined)!;
-
-useForwardRef(triggerRef);
-
-const ariaControls = computed<string | undefined>(() => {
-  return ariaHaspopup.value ? id : undefined;
-});
-
-const ariaDescribedby = computed<string | undefined>(() => {
-  if (role && role.value === 'tooltip') {
-    return open && id ? id : undefined;
-  }
-  return undefined;
-});
-
-const ariaHaspopup = computed<string | undefined>(() => {
-  if (role && role.value !== 'tooltip') {
-    return role.value;
-  }
-  return undefined;
-});
-
-const ariaExpanded = computed<string | undefined>(() => {
-  return ariaHaspopup.value ? `${open}` : undefined;
-});
-
-let virtualTriggerAriaStopWatch: WatchStopHandle | undefined = undefined;
-
-onMounted(() => {
-  watch(
-    () => virtualRef,
-    (virtualEl) => {
-      if (virtualEl) {
-        triggerRef.value = unrefElement(virtualEl as HTMLElement);
-      }
-    },
-    {
-      immediate: true
-    }
-  );
-
-  watch(
-    triggerRef,
-    (el, prevEl) => {
-      virtualTriggerAriaStopWatch?.();
-      virtualTriggerAriaStopWatch = undefined;
-      if (isElement(el)) {
-        ;(
-          [
-            'onMouseenter',
-            'onMouseleave',
-            'onClick',
-            'onKeydown',
-            'onFocus',
-            'onBlur',
-            'onContextmenu'
-          ] as const
-        ).forEach((eventName) => {
-          const handler: any = instance.props[eventName];
-          if (handler) {
-            ;(el as HTMLElement).addEventListener(
-              eventName.slice(2).toLowerCase(),
-              handler
-            )
-            ;(prevEl as HTMLElement)?.removeEventListener?.(
-              eventName.slice(2).toLowerCase(),
-              handler
-            );
-          }
-        });
-        virtualTriggerAriaStopWatch = watch(
-          [ariaControls, ariaDescribedby, ariaHaspopup, ariaExpanded],
-          (watches) => {
-            ;[
-              'aria-controls',
-              'aria-describedby',
-              'aria-haspopup',
-              'aria-expanded'
-            ].forEach((key, idx) => {
-              isNil(watches[idx])
-                ? el.removeAttribute(key)
-                : el.setAttribute(key, watches[idx]!);
-            });
-          },
-          { immediate: true }
-        );
-      }
-      if (isElement(prevEl)) {
-        ;[
-          'aria-controls',
-          'aria-describedby',
-          'aria-haspopup',
-          'aria-expanded'
-        ].forEach((key) => prevEl.removeAttribute(key));
-      }
-    },
-    {
-      immediate: true
-    }
-  );
-});
-
-onBeforeUnmount(() => {
-  virtualTriggerAriaStopWatch?.();
-  virtualTriggerAriaStopWatch = undefined;
-});
-
-defineExpose({
-  /**
-   * @description trigger element
-   */
-  triggerRef
-});
-</script>

package/src/web/popper/types.ts

@@ -1,49 +0,0 @@
-import type { Options, Placement } from '@popperjs/core';
-import { type StyleValue } from 'vue';
-
-export type Measurable = {
-  getBoundingClientRect: () => DOMRect;
-};
-
-export interface CreatePopperInstanceParams {
-  referenceEl: Measurable;
-  popperContentEl: HTMLElement;
-  arrowEl: HTMLElement | undefined;
-}
-
-export interface PopperCoreConfigProps {
-  boundariesPadding?: number;
-  fallbackPlacements?: Placement[];
-  gpuAcceleration?: boolean;
-  offset?: number;
-  placement?: Placement;
-  popperOptions?: Partial<Options>;
-  strategy?: 'fixed' | 'absolute';
-}
-
-export interface PopperContentProps {
-  boundariesPadding?: number;
-  fallbackPlacements?: Placement[];
-  gpuAcceleration?: boolean;
-  offset?: number;
-  placement?: Placement;
-  popperOptions?: Partial<Options>;
-  strategy?: 'fixed' | 'absolute';
-  id?: string;
-  style?: StyleValue;
-  className?: ClassType;
-  effect?: string;
-  visible?: boolean;
-  enterable?: boolean;
-  pure?: boolean;
-  focusOnShow?: boolean;
-  trapping?: boolean;
-  popperClass?: ClassType;
-  popperStyle?: StyleValue;
-  referenceEl?: HTMLElement;
-  triggerTargetEl?: HTMLElement;
-  stopPopperMouseEvent?: boolean;
-  ariaLabel?: string;
-  virtualTriggering?: boolean;
-  zIndex?: number;
-}

package/src/web/popper/utils.ts

@@ -1,81 +0,0 @@
-import { isClient, unrefElement } from '@vueuse/core';
-import type { ComponentPublicInstance } from 'vue';
-import type { MaybeRef } from '@vueuse/core';
-import type { Measurable } from './tokens';
-import type { PopperCoreConfigProps } from './types';
-
-type ArrowProps = {
-  arrowEl: HTMLElement | undefined;
-  arrowOffset: number | undefined;
-};
-
-export const buildPopperOptions = (props: PopperCoreConfigProps, arrowProps: ArrowProps) => {
-  const { placement, strategy, popperOptions } = props;
-  const options = {
-    placement,
-    strategy,
-    ...popperOptions,
-    modifiers: genModifiers(props)
-  };
-
-  attachArrow(options, arrowProps);
-  deriveExtraModifiers(options, popperOptions?.modifiers);
-  return options;
-};
-
-export const unwrapMeasurableEl = ($el: MaybeRef<Measurable | undefined | ComponentPublicInstance>) => {
-  if (!isClient) return;
-  return unrefElement($el as HTMLElement);
-};
-
-function genModifiers(options: PopperCoreConfigProps) {
-  const { offset, gpuAcceleration, fallbackPlacements } = options;
-  return [
-    {
-      name: 'offset',
-      options: {
-        offset: [0, offset ?? 12]
-      }
-    },
-    {
-      name: 'preventOverflow',
-      options: {
-        padding: {
-          top: 2,
-          bottom: 2,
-          left: 5,
-          right: 5
-        }
-      }
-    },
-    {
-      name: 'flip',
-      options: {
-        padding: 5,
-        fallbackPlacements
-      }
-    },
-    {
-      name: 'computeStyles',
-      options: {
-        gpuAcceleration
-      }
-    }
-  ];
-}
-
-function attachArrow(options: any, { arrowEl, arrowOffset }: ArrowProps) {
-  options.modifiers.push({
-    name: 'arrow',
-    options: {
-      element: arrowEl,
-      padding: arrowOffset ?? 5
-    }
-  } as any);
-}
-
-function deriveExtraModifiers(options: any, modifiers: PopperCoreConfigProps['popperOptions']['modifiers']) {
-  if (modifiers) {
-    options.modifiers = [...options.modifiers, ...(modifiers ?? [])];
-  }
-}

package/src/web/qrcode/drawCanvas.ts

@@ -1,32 +0,0 @@
-import { toCanvas } from 'qrcode';
-import type { QRCodeRenderersOptions } from 'qrcode';
-import type { RenderQrCodeParams, ContentType } from './types';
-import { cloneDeep } from 'lodash';
-
-export const renderQrCode = ({ canvas, content, width = 0, options: params = {} }: RenderQrCodeParams) => {
-  const options = cloneDeep(params);
-  // 容错率，默认对内容少的二维码采用高容错率，内容多的二维码采用低容错率
-  options.errorCorrectionLevel = options.errorCorrectionLevel || getErrorCorrectionLevel(content);
-
-  return getOriginWidth(content, options).then((_width: number) => {
-    options.scale = width === 0 ? undefined : (width / _width) * 4;
-    return toCanvas(canvas, content, options);
-  });
-};
-
-// 得到原QrCode的大小，以便缩放得到正确的QrCode大小
-function getOriginWidth(content: ContentType, options: QRCodeRenderersOptions) {
-  const _canvas = document.createElement('canvas');
-  return toCanvas(_canvas, content, options).then(() => _canvas.width);
-}
-
-// 对于内容少的QrCode，增大容错率
-function getErrorCorrectionLevel(content: ContentType) {
-  if (content.length > 36) {
-    return 'M';
-  } else if (content.length > 16) {
-    return 'Q';
-  } else {
-    return 'H';
-  }
-}

package/src/web/qrcode/drawLogo.ts

@@ -1,82 +0,0 @@
-import { isString } from '@vri/utils';
-import type { LogoType, RenderQrCodeParams } from './types';
-
-export const drawLogo = ({ canvas, logo }: RenderQrCodeParams) => {
-  if (!logo) {
-    return new Promise((resolve) => {
-      resolve((canvas as HTMLCanvasElement).toDataURL());
-    });
-  }
-  const canvasWidth = (canvas as HTMLCanvasElement).width;
-  const { logoSize = 0.15, bgColor = '#fff', borderSize = 0.05, crossOrigin, borderRadius = 8, logoRadius = 0 } = logo as LogoType;
-
-  const logoSrc: string = isString(logo) ? logo : logo.src;
-  const logoWidth = canvasWidth * logoSize;
-  const logoXY = (canvasWidth * (1 - logoSize)) / 2;
-  const logoBgWidth = canvasWidth * (logoSize + borderSize);
-  const logoBgXY = (canvasWidth * (1 - logoSize - borderSize)) / 2;
-
-  const ctx = canvas.getContext('2d');
-  if (!ctx) return;
-
-  // logo 底色
-  canvasRoundRect(ctx)(logoBgXY, logoBgXY, logoBgWidth, logoBgWidth, borderRadius);
-  ctx.fillStyle = bgColor;
-  ctx.fill();
-
-  // logo
-  const image = new Image();
-  if (crossOrigin || logoRadius) {
-    image.setAttribute('crossOrigin', crossOrigin || 'anonymous');
-  }
-  image.src = logoSrc;
-
-  // 使用image绘制可以避免某些跨域情况
-  const drawLogoWithImage = (image: CanvasImageSource) => {
-    ctx.drawImage(image, logoXY, logoXY, logoWidth, logoWidth);
-  };
-
-  // 使用canvas绘制以获得更多的功能
-  const drawLogoWithCanvas = (image: HTMLImageElement) => {
-    const canvasImage = document.createElement('canvas');
-    canvasImage.width = logoXY + logoWidth;
-    canvasImage.height = logoXY + logoWidth;
-    const imageCanvas = canvasImage.getContext('2d');
-    if (!imageCanvas || !ctx) return;
-    imageCanvas.drawImage(image, logoXY, logoXY, logoWidth, logoWidth);
-
-    canvasRoundRect(ctx)(logoXY, logoXY, logoWidth, logoWidth, logoRadius);
-    if (!ctx) return;
-    const fillStyle = ctx.createPattern(canvasImage, 'no-repeat');
-    if (fillStyle) {
-      ctx.fillStyle = fillStyle;
-      ctx.fill();
-    }
-  };
-
-  // 将 logo绘制到 canvas上
-  return new Promise((resolve) => {
-    image.onload = () => {
-      logoRadius ? drawLogoWithCanvas(image) : drawLogoWithImage(image);
-      resolve((canvas as HTMLCanvasElement).toDataURL());
-    };
-  });
-};
-
-// copy来的方法，用于绘制圆角
-function canvasRoundRect(ctx: CanvasRenderingContext2D) {
-  return (x: number, y: number, w: number, h: number, r: number) => {
-    const minSize = Math.min(w, h);
-    if (r > minSize / 2) {
-      r = minSize / 2;
-    }
-    ctx.beginPath();
-    ctx.moveTo(x + r, y);
-    ctx.arcTo(x + w, y, x + w, y + h, r);
-    ctx.arcTo(x + w, y + h, x, y + h, r);
-    ctx.arcTo(x, y + h, x, y, r);
-    ctx.arcTo(x, y, x + w, y, r);
-    ctx.closePath();
-    return ctx;
-  };
-}

package/src/web/qrcode/index.ts

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

package/src/web/qrcode/index.vue

@@ -1,107 +0,0 @@
-<template>
-  <div>
-    <component :is="tag" ref="wrapRef" />
-  </div>
-</template>
-<script setup lang="ts">
-import { toDataURL } from 'qrcode';
-import { onMounted, ref, unref } from 'vue';
-import { useNamespace } from '../../use';
-import { type LogoType, type QRCodeRenderersOptions, toCanvas } from './qrcodePlus';
-import { downloadByUrl } from '@vri/utils';
-
-interface Props {
-  /** 二维码资源 */
-  value?: string | any[];
-  /** 二维码配置 */
-  options?: QRCodeRenderersOptions;
-  /** 宽度 */
-  width?: number;
-  /** 中间的 logo */
-  logo?: LogoType;
-  /** img 不支持内嵌logo */
-  tag?: 'canvas' | 'img';
-}
-
-const {
-  value,
-  options,
-  width = 200,
-  logo,
-  tag = 'canvas'
-} = defineProps<Props>();
-
-const emit = defineEmits(['done', 'error']);
-
-const ns = /* hoist-static*/ useNamespace('qrcode');
-
-defineOptions({
-	name: ns.b()
-});
-
-const wrapRef = ref<HTMLCanvasElement | HTMLImageElement | null>(null);
-
-async function createQrcode () {
-  try {
-    const renderValue = String(value);
-    const wrapEl = unref(wrapRef);
-
-    if (!wrapEl) return;
-
-    if (tag === 'canvas') {
-      const url: string = await toCanvas({
-        canvas: wrapEl,
-        width,
-        logo,
-        content: renderValue,
-        options: options || {}
-      });
-      emit('done', { url, ctx: (wrapEl as HTMLCanvasElement).getContext('2d') });
-      return;
-    }
-
-    if (tag === 'img') {
-      const url = await toDataURL(renderValue, {
-        errorCorrectionLevel: 'H',
-        width,
-        ...options
-      });
-      (unref(wrapRef) as HTMLImageElement).src = url;
-      emit('done', { url });
-    }
-  } catch (error) {
-    emit('error', error);
-  }
-}
-
-/**
- * file download
- */
-function download (fileName?: string) {
-  let url = '';
-  const wrapEl = unref(wrapRef);
-  if (wrapEl instanceof HTMLCanvasElement) {
-    url = wrapEl.toDataURL();
-  } else if (wrapEl instanceof HTMLImageElement) {
-    url = wrapEl.src;
-  }
-  if (!url) return;
-  downloadByUrl({
-    url,
-    fileName
-  });
-}
-
-onMounted(createQrcode);
-
-const instance = getCurrentInstance()!;
-
-// 监听参数变化重新生成二维码
-watch(instance.props, () => {
-  createQrcode();
-}, { deep: true });
-
-defineExpose({
-  download
-});
-</script>

package/src/web/qrcode/qrcodePlus.ts

@@ -1,4 +0,0 @@
-// 参考 qr-code-with-logo 进行ts版本修改
-import { toCanvas } from './toCanvas';
-export * from './types';
-export { toCanvas };

package/src/web/qrcode/toCanvas.ts

@@ -1,11 +0,0 @@
-import { renderQrCode } from './drawCanvas';
-import { drawLogo } from './drawLogo';
-import type { RenderQrCodeParams } from './types';
-
-export const toCanvas = (options: RenderQrCodeParams) => {
-  return renderQrCode(options)
-    .then(() => {
-      return options;
-    })
-    .then(drawLogo) as Promise<string>;
-};

package/src/web/qrcode/types.ts

@@ -1,38 +0,0 @@
-import type { QRCodeSegment, QRCodeRenderersOptions } from 'qrcode';
-
-export type ContentType = string | QRCodeSegment[];
-
-export type { QRCodeRenderersOptions };
-
-export type LogoType = {
-  src: string;
-  logoSize: number;
-  borderColor: string;
-  bgColor: string;
-  borderSize: number;
-  crossOrigin: string;
-  borderRadius: number;
-  logoRadius: number;
-};
-
-export interface RenderQrCodeParams {
-  canvas: any;
-  content: ContentType;
-  width?: number;
-  options?: QRCodeRenderersOptions;
-  logo?: LogoType | string;
-  image?: HTMLImageElement;
-  downloadName?: string;
-  download?: boolean | Fn;
-}
-
-export type ToCanvasFn = (options: RenderQrCodeParams) => Promise<unknown>;
-
-export interface QrCodeActionType {
-  download: (fileName?: string) => void;
-}
-
-export interface QrcodeDoneEventParams {
-  url: string;
-  ctx?: CanvasRenderingContext2D | null;
-}

package/src/web/result/index.ts

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