@antsoo-lib/components 0.1.2 → 0.1.4

package/src/qrcode/QRCode.tsx

@@ -0,0 +1,354 @@
+import type { CSSProperties } from 'vue'
+import { computed, defineComponent, shallowRef, watch, watchEffect } from 'vue'
+
+import type { ImageSettings } from './interface'
+import { qrProps } from './interface'
+import qrcodegen from './qrcodegen'
+
+type Modules = ReturnType<qrcodegen.QrCode['getModules']>
+interface Excavation {
+  x: number
+  y: number
+  w: number
+  h: number
+}
+
+const ERROR_LEVEL_MAP: { [index: string]: qrcodegen.QrCode.Ecc } = {
+  L: qrcodegen.QrCode.Ecc.LOW,
+  M: qrcodegen.QrCode.Ecc.MEDIUM,
+  Q: qrcodegen.QrCode.Ecc.QUARTILE,
+  H: qrcodegen.QrCode.Ecc.HIGH,
+}
+
+const DEFAULT_SIZE = 128
+const DEFAULT_LEVEL = 'L'
+const DEFAULT_BGCOLOR = '#FFFFFF'
+const DEFAULT_FGCOLOR = '#000000'
+const DEFAULT_INCLUDEMARGIN = false
+
+const SPEC_MARGIN_SIZE = 4
+const DEFAULT_MARGIN_SIZE = 0
+
+// This is *very* rough estimate of max amount of QRCode allowed to be covered.
+// It is "wrong" in a lot of ways (area is a terrible way to estimate, it
+// really should be number of modules covered), but if for some reason we don't
+// get an explicit height or width, I'd rather default to something than throw.
+const DEFAULT_IMG_SCALE = 0.1
+
+function generatePath(modules: Modules, margin = 0): string {
+  const ops: Array<string> = []
+  modules.forEach((row, y) => {
+    let start: number | null = null
+    row.forEach((cell, x) => {
+      if (!cell && start !== null) {
+        // M0 0h7v1H0z injects the space with the move and drops the comma,
+        // saving a char per operation
+        ops.push(`M${start + margin} ${y + margin}h${x - start}v1H${start + margin}z`)
+        start = null
+        return
+      }
+
+      // end of row, clean up or skip
+      if (x === row.length - 1) {
+        if (!cell) {
+          // We would have closed the op above already so this can only mean
+          // 2+ light modules in a row.
+          return
+        }
+        if (start === null) {
+          // Just a single dark module.
+          ops.push(`M${x + margin},${y + margin} h1v1H${x + margin}z`)
+        } else {
+          // Otherwise finish the current line.
+          ops.push(`M${start + margin},${y + margin} h${x + 1 - start}v1H${start + margin}z`)
+        }
+        return
+      }
+
+      if (cell && start === null) {
+        start = x
+      }
+    })
+  })
+  return ops.join('')
+}
+
+// We could just do this in generatePath, except that we want to support
+// non-Path2D canvas, so we need to keep it an explicit step.
+function excavateModules(modules: Modules, excavation: Excavation): Modules {
+  return modules.slice().map((row, y) => {
+    if (y < excavation.y || y >= excavation.y + excavation.h) {
+      return row
+    }
+    return row.map((cell, x) => {
+      if (x < excavation.x || x >= excavation.x + excavation.w) {
+        return cell
+      }
+      return false
+    })
+  })
+}
+
+function getImageSettings(
+  cells: Modules,
+  size: number,
+  margin: number,
+  imageSettings?: ImageSettings,
+): null | {
+  x: number
+  y: number
+  h: number
+  w: number
+  excavation: Excavation | null
+} {
+  if (imageSettings == null) {
+    return null
+  }
+  const numCells = cells.length + margin * 2
+  const defaultSize = Math.floor(size * DEFAULT_IMG_SCALE)
+  const scale = numCells / size
+  const w = (imageSettings.width || defaultSize) * scale
+  const h = (imageSettings.height || defaultSize) * scale
+  const x = imageSettings.x == null ? cells.length / 2 - w / 2 : imageSettings.x * scale
+  const y = imageSettings.y == null ? cells.length / 2 - h / 2 : imageSettings.y * scale
+
+  let excavation = null
+  if (imageSettings.excavate) {
+    const floorX = Math.floor(x)
+    const floorY = Math.floor(y)
+    const ceilW = Math.ceil(w + x - floorX)
+    const ceilH = Math.ceil(h + y - floorY)
+    excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH }
+  }
+
+  return { x, y, h, w, excavation }
+}
+
+function getMarginSize(includeMargin: boolean, marginSize?: number): number {
+  if (marginSize != null) {
+    return Math.floor(marginSize)
+  }
+  return includeMargin ? SPEC_MARGIN_SIZE : DEFAULT_MARGIN_SIZE
+}
+
+// For canvas we're going to switch our drawing mode based on whether or not
+// the environment supports Path2D. We only need the constructor to be
+// supported, but Edge doesn't actually support the path (string) type
+// argument. Luckily it also doesn't support the addPath() method. We can
+// treat that as the same thing.
+const SUPPORTS_PATH2D = (function () {
+  try {
+    new Path2D().addPath(new Path2D())
+  } catch (e) {
+    return false
+  }
+  return true
+})()
+
+export const QRCodeCanvas = defineComponent({
+  name: 'QRCodeCanvas',
+  inheritAttrs: false,
+  props: { ...qrProps(), level: String, bgColor: String, fgColor: String, marginSize: Number },
+  setup(props, { attrs, expose }) {
+    const imgSrc = computed(() => props.imageSettings?.src)
+    const _canvas = shallowRef<HTMLCanvasElement>(null)
+    const _image = shallowRef<HTMLImageElement>(null)
+    const isImgLoaded = shallowRef(false)
+    expose({
+      toDataURL: (type?: string, quality?: any) => {
+        return _canvas.value?.toDataURL(type, quality)
+      },
+    })
+    watchEffect(
+      () => {
+        const {
+          value,
+          size = DEFAULT_SIZE,
+          level = DEFAULT_LEVEL,
+          bgColor = DEFAULT_BGCOLOR,
+          fgColor = DEFAULT_FGCOLOR,
+          includeMargin = DEFAULT_INCLUDEMARGIN,
+          marginSize,
+          imageSettings,
+        } = props
+        if (_canvas.value != null) {
+          const canvas = _canvas.value
+
+          const ctx = canvas.getContext('2d')
+          if (!ctx) {
+            return
+          }
+
+          let cells = qrcodegen.QrCode.encodeText(value, ERROR_LEVEL_MAP[level]).getModules()
+          const margin = getMarginSize(includeMargin, marginSize)
+          const numCells = cells.length + margin * 2
+          const calculatedImageSettings = getImageSettings(cells, size, margin, imageSettings)
+
+          const image = _image.value
+          const haveImageToRender =
+            isImgLoaded.value &&
+            calculatedImageSettings != null &&
+            image !== null &&
+            image.complete &&
+            image.naturalHeight !== 0 &&
+            image.naturalWidth !== 0
+
+          if (haveImageToRender) {
+            if (calculatedImageSettings.excavation != null) {
+              cells = excavateModules(cells, calculatedImageSettings.excavation)
+            }
+          }
+
+          // We're going to scale this so that the number of drawable units
+          // matches the number of cells. This avoids rounding issues, but does
+          // result in some potentially unwanted single pixel issues between
+          // blocks, only in environments that don't support Path2D.
+          const pixelRatio = window.devicePixelRatio || 1
+          canvas.height = canvas.width = size * pixelRatio
+          const scale = (size / numCells) * pixelRatio
+          ctx.scale(scale, scale)
+
+          // Draw solid background, only paint dark modules.
+          ctx.fillStyle = bgColor
+          ctx.fillRect(0, 0, numCells, numCells)
+
+          ctx.fillStyle = fgColor
+          if (SUPPORTS_PATH2D) {
+            // $FlowFixMe: Path2D c'tor doesn't support args yet.
+            ctx.fill(new Path2D(generatePath(cells, margin)))
+          } else {
+            cells.forEach((row, rdx) => {
+              row.forEach((cell, cdx) => {
+                if (cell) {
+                  ctx.fillRect(cdx + margin, rdx + margin, 1, 1)
+                }
+              })
+            })
+          }
+
+          if (haveImageToRender) {
+            ctx.drawImage(
+              image,
+              calculatedImageSettings.x + margin,
+              calculatedImageSettings.y + margin,
+              calculatedImageSettings.w,
+              calculatedImageSettings.h,
+            )
+          }
+        }
+      },
+      { flush: 'post' },
+    )
+    watch(imgSrc, () => {
+      isImgLoaded.value = false
+    })
+
+    return () => {
+      const size = props.size ?? DEFAULT_SIZE
+      const canvasStyle = { height: `${size}px`, width: `${size}px` }
+
+      let img = null
+      if (imgSrc.value != null) {
+        img = (
+          <img
+            src={imgSrc.value}
+            key={imgSrc.value}
+            style={{ display: 'none' }}
+            onLoad={() => {
+              isImgLoaded.value = true
+            }}
+            ref={_image}
+          />
+        )
+      }
+      return (
+        <>
+          <canvas {...attrs} style={[canvasStyle, attrs.style as CSSProperties]} ref={_canvas} />
+          {img}
+        </>
+      )
+    }
+  },
+})
+
+export const QRCodeSVG = defineComponent({
+  name: 'QRCodeSVG',
+  inheritAttrs: false,
+  props: {
+    ...qrProps(),
+    color: String,
+    level: String,
+    bgColor: String,
+    fgColor: String,
+    marginSize: Number,
+    title: String,
+  },
+  setup(props) {
+    let cells = null
+    let margin = null
+    let numCells = null
+    let calculatedImageSettings = null
+
+    let fgPath = null
+    let image = null
+
+    watchEffect(() => {
+      const {
+        value,
+        size = DEFAULT_SIZE,
+        level = DEFAULT_LEVEL,
+        includeMargin = DEFAULT_INCLUDEMARGIN,
+        marginSize,
+        imageSettings,
+      } = props
+
+      cells = qrcodegen.QrCode.encodeText(value, ERROR_LEVEL_MAP[level]).getModules()
+
+      margin = getMarginSize(includeMargin, marginSize)
+      numCells = cells.length + margin * 2
+      calculatedImageSettings = getImageSettings(cells, size, margin, imageSettings)
+
+      if (imageSettings != null && calculatedImageSettings != null) {
+        if (calculatedImageSettings.excavation != null) {
+          cells = excavateModules(cells, calculatedImageSettings.excavation)
+        }
+
+        image = (
+          <image
+            xlinkHref={imageSettings.src}
+            height={calculatedImageSettings.h}
+            width={calculatedImageSettings.w}
+            x={calculatedImageSettings.x + margin}
+            y={calculatedImageSettings.y + margin}
+            preserveAspectRatio="none"
+          />
+        )
+      }
+
+      // Drawing strategy: instead of a rect per module, we're going to create a
+      // single path for the dark modules and layer that on top of a light rect,
+      // for a total of 2 DOM nodes. We pay a bit more in string concat but that's
+      // way faster than DOM ops.
+      // For level 1, 441 nodes -> 2
+      // For level 40, 31329 -> 2
+      fgPath = generatePath(cells, margin)
+    })
+
+    return () => {
+      const bgColor = props.bgColor && DEFAULT_BGCOLOR
+      const fgColor = props.fgColor && DEFAULT_FGCOLOR
+      return (
+        <svg height={props.size} width={props.size} viewBox={`0 0 ${numCells} ${numCells}`}>
+          {!!props.title && <title>{props.title}</title>}
+          <path
+            fill={bgColor}
+            d={`M0,0 h${numCells}v${numCells}H0z`}
+            shape-rendering="crispEdges"
+          />
+          <path fill={fgColor} d={fgPath} shape-rendering="crispEdges" />
+          {image}
+        </svg>
+      )
+    }
+  },
+})

package/src/qrcode/index.en-US.md

@@ -0,0 +1,43 @@
+---
+category: Components
+type: Data Display
+title: QRCode
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cJopQrf0ncwAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M4PBTZ_n9OgAAAAAAAAAAAAADrJ8AQ/original
+tag: New
+---
+
+## When To Use
+
+Used when the link needs to be converted into a QR Code.
+
+## API
+
+| Property   | Description                                       | Type                                            | Default       | version        |
+| ---------- | ------------------------------------------------- | ----------------------------------------------- | ------------- | -------------- |
+| value      | scanned link                                      | string                                          | -             |                |
+| type       | render type                                       | `'canvas'` \| `'svg'`                           | `canvas`      |                |
+| icon       | include image url (only image link are supported) | string                                          | -             |                |
+| size       | QRCode size                                       | number                                          | 128           |                |
+| iconSize   | include image size                                | number                                          | 32            |                |
+| color      | QRCode Color                                      | string                                          | `#000`        |                |
+| bgColor    | QRCode Background Color                           | string                                          | `transparent` |                |
+| bordered   | Whether has border style                          | boolean                                         | `true`        |                |
+| errorLevel | Error Code Level                                  | `'L'` \| `'M'` \| `'Q'` \| `'H'`                | `'M'`         |                |
+| status     | QRCode status                                     | `active` \| `expired` \| `loading` \| `scanned` | `active`      | scanned: 4.0.9 |
+
+### events
+
+| Events Name | Description | Arguments    | Version |
+| ----------- | ----------- | ------------ | ------- |
+| refresh     | callback    | `() => void` | -       |
+
+## FAQ
+
+### About QRCode ErrorLevel
+
+The ErrorLevel means that the QR code can be scanned normally after being blocked, and the maximum area that can be blocked is the error correction rate.
+
+Generally, the QR code is divided into 4 error correction levels: Level `L` can correct about `7%` errors, Level `M` can correct about `15%` errors, Level `Q` can correct about `25%` errors, and Level `H` can correct about `30%` errors. When the content encoding of the QR code carries less information, in other words, when the value link is short, set different error correction levels, and the generated image will not change.
+
+> For more information, see the: [https://www.qrcode.com/en/about/error_correction](https://www.qrcode.com/en/about/error_correction.html)

package/src/qrcode/index.tsx

@@ -0,0 +1,117 @@
+import { ReloadOutlined } from '@ant-design/icons-vue'
+
+import { computed, defineComponent, ref } from 'vue'
+import type { CSSProperties, ExtractPropTypes } from 'vue'
+
+import { withInstall } from '../_util/type'
+import warning from '../_util/warning'
+import Button from '../button'
+import useConfigInject from '../config-provider/hooks/useConfigInject'
+import { useLocaleReceiver } from '../locale/LocaleReceiver'
+import Spin from '../spin'
+import { useToken } from '../theme/internal'
+import { QRCodeCanvas, QRCodeSVG } from './QRCode'
+import { qrcodeProps } from './interface'
+import useStyle from './style'
+
+export type QRCodeProps = Partial<ExtractPropTypes<ReturnType<typeof qrcodeProps>>>
+const QRCode = defineComponent({
+  name: 'AQrcode',
+  inheritAttrs: false,
+  props: qrcodeProps(),
+  emits: ['refresh'],
+  setup(props, { emit, attrs, expose }) {
+    if (process.env.NODE_ENV !== 'production') {
+      warning(
+        !(props.icon && props.errorLevel === 'L'),
+        'QRCode',
+        'ErrorLevel `L` is not recommended to be used with `icon`, for scanning result would be affected by low level.',
+      )
+    }
+    const [locale] = useLocaleReceiver('QRCode')
+    const { prefixCls } = useConfigInject('qrcode', props)
+    const [wrapSSR, hashId] = useStyle(prefixCls)
+    const [, token] = useToken()
+    const qrCodeCanvas = ref()
+    expose({
+      toDataURL: (type?: string, quality?: any) => {
+        return qrCodeCanvas.value?.toDataURL(type, quality)
+      },
+    })
+    const qrCodeProps = computed(() => {
+      const {
+        value,
+        icon = '',
+        size = 160,
+        iconSize = 40,
+        color = token.value.colorText,
+        bgColor = 'transparent',
+        errorLevel = 'M',
+      } = props
+      const imageSettings: QRCodeProps['imageSettings'] = {
+        src: icon,
+        x: undefined,
+        y: undefined,
+        height: iconSize,
+        width: iconSize,
+        excavate: true,
+      }
+      return {
+        value,
+        size: size - (token.value.paddingSM + token.value.lineWidth) * 2,
+        level: errorLevel,
+        bgColor,
+        fgColor: color,
+        imageSettings: icon ? imageSettings : undefined,
+      }
+    })
+    return () => {
+      const pre = prefixCls.value
+      return wrapSSR(
+        <div
+          {...attrs}
+          style={[
+            attrs.style as CSSProperties,
+            {
+              width: `${props.size}px`,
+              height: `${props.size}px`,
+              backgroundColor: qrCodeProps.value.bgColor,
+            },
+          ]}
+          class={[
+            hashId.value,
+            pre,
+            {
+              [`${pre}-borderless`]: !props.bordered,
+            },
+          ]}
+        >
+          {props.status !== 'active' && (
+            <div class={`${pre}-mask`}>
+              {props.status === 'loading' && <Spin />}
+              {props.status === 'expired' && (
+                <>
+                  <p class={`${pre}-expired`}>{locale.value.expired}</p>
+                  <Button
+                    type="link"
+                    onClick={(e) => emit('refresh', e)}
+                    v-slots={{ icon: () => <ReloadOutlined /> }}
+                  >
+                    {locale.value.refresh}
+                  </Button>
+                </>
+              )}
+              {props.status === 'scanned' && <p class={`${pre}-scanned`}>{locale.value.scanned}</p>}
+            </div>
+          )}
+          {props.type === 'canvas' ? (
+            <QRCodeCanvas ref={qrCodeCanvas} {...qrCodeProps.value} />
+          ) : (
+            <QRCodeSVG {...qrCodeProps.value} />
+          )}
+        </div>,
+      )
+    }
+  },
+})
+export default withInstall(QRCode)

package/src/qrcode/index.zh-CN.md

@@ -0,0 +1,44 @@
+---
+category: Components
+subtitle: 二维码
+type: 数据展示
+title: QRCode
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cJopQrf0ncwAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M4PBTZ_n9OgAAAAAAAAAAAAADrJ8AQ/original
+tag: New
+---
+
+## 何时使用
+
+当需要将链接转换成为二维码时使用。
+
+## API
+
+| 参数       | 说明                                     | 类型                                            | 默认值        | version        |
+| ---------- | ---------------------------------------- | ----------------------------------------------- | ------------- | -------------- |
+| value      | 扫描后的地址                             | string                                          | -             |                |
+| type       | 渲染类型                                 | `'canvas'` \| `'svg'`                           | `canvas`      |                |
+| icon       | 二维码中图片的地址（目前只支持图片地址） | string                                          | -             |                |
+| size       | 二维码大小                               | number                                          | 160           |                |
+| iconSize   | 二维码中图片的大小                       | number                                          | 40            |                |
+| color      | 二维码颜色                               | string                                          | `#000`        |                |
+| bgColor    | 二维码背景颜色                           | string                                          | `transparent` |                |
+| bordered   | 是否有边框                               | boolean                                         | `true`        |                |
+| errorLevel | 二维码纠错等级                           | `'L'` \| `'M'` \| `'Q'` \| `'H'`                | `'M'`         |                |
+| status     | 二维码状态                               | `active` \| `expired` \| `loading` \| `scanned` | `active`      | scanned: 4.0.9 |
+
+### 事件
+
+| 事件名称 | 说明                 | 回调参数     | 版本 |
+| -------- | -------------------- | ------------ | ---- |
+| refresh  | 点击"点击刷新"的回调 | `() => void` | -    |
+
+## FAQ
+
+### 关于二维码纠错等级
+
+纠错等级也叫纠错率，就是指二维码可以被遮挡后还能正常扫描，而这个能被遮挡的最大面积就是纠错率。
+
+通常情况下二维码分为 4 个纠错级别：`L级` 可纠正约 `7%` 错误、`M级` 可纠正约 `15%` 错误、`Q级` 可纠正约 `25%` 错误、`H级` 可纠正约`30%` 错误。并不是所有位置都可以缺损，像最明显的三个角上的方框，直接影响初始定位。中间零散的部分是内容编码，可以容忍缺损。当二维码的内容编码携带信息比较少的时候，也就是链接比较短的时候，设置不同的纠错等级，生成的图片不会发生变化。
+
+> 有关更多信息，可参阅相关资料：[https://www.qrcode.com/zh/about/error_correction](https://www.qrcode.com/zh/about/error_correction.html)

package/src/qrcode/interface.ts

@@ -0,0 +1,51 @@
+import { objectType, stringType } from '../_util/type'
+
+export interface ImageSettings {
+  src: string
+  height: number
+  width: number
+  excavate: boolean
+  x?: number
+  y?: number
+}
+export const qrProps = () => {
+  return {
+    size: { type: Number, default: 160 },
+    value: { type: String, required: true },
+    type: stringType<'canvas' | 'svg'>('canvas'),
+    color: String,
+    bgColor: String,
+    includeMargin: Boolean,
+    imageSettings: objectType<ImageSettings>(),
+  }
+}
+
+export const qrcodeProps = () => {
+  return {
+    ...qrProps(),
+    errorLevel: stringType<'L' | 'M' | 'Q' | 'H'>('M'),
+
+    icon: String,
+    iconSize: { type: Number, default: 40 },
+
+    status: stringType<'active' | 'expired' | 'loading' | 'scanned'>('active'),
+    bordered: { type: Boolean, default: true },
+  }
+}
+
+export interface QRCodeCanvasColor {
+  dark?: string // 默认#000000ff
+  light?: string // 默认#ffffffff
+}
+
+export interface QRCodeCanvasOptions {
+  version?: number
+  errorCorrectionLevel?: string // 默认"M"
+  maskPattern?: number // 遮罩符号的掩码图案
+  toSJISFunc?: Function // 将汉字转换为其 Shift JIS 值的帮助程序函数
+  margin?: number
+  scale?: number
+  small?: boolean
+  width: number
+  color?: QRCodeCanvasColor
+}