vft 0.0.1

package/src/web/popper/popper.vue

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

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

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

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

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

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

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

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

package/src/web/qrcode/index.vue

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

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

package/src/web/qrcode/toCanvas.ts

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

@@ -0,0 +1,38 @@
+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;
+}