@antsoo-lib/components 0.1.2 → 0.1.4

package/src/vc-virtual-list/utils/algorithmUtil.js

@@ -0,0 +1,81 @@
+/**
+ * Get index with specific start index one by one. e.g.
+ * min: 3, max: 9, start: 6
+ *
+ * Return index is:
+ * [0]: 6
+ * [1]: 7
+ * [2]: 5
+ * [3]: 8
+ * [4]: 4
+ * [5]: 9
+ * [6]: 3
+ */
+export function getIndexByStartLoc(min, max, start, index) {
+  const beforeCount = start - min
+  const afterCount = max - start
+  const balanceCount = Math.min(beforeCount, afterCount) * 2
+
+  // Balance
+  if (index <= balanceCount) {
+    const stepIndex = Math.floor(index / 2)
+    if (index % 2) {
+      return start + stepIndex + 1
+    }
+    return start - stepIndex
+  }
+
+  // One is out of range
+  if (beforeCount > afterCount) {
+    return start - (index - afterCount)
+  }
+  return start + (index - beforeCount)
+}
+
+/**
+ * We assume that 2 list has only 1 item diff and others keeping the order.
+ * So we can use dichotomy algorithm to find changed one.
+ */
+export function findListDiffIndex(originList, targetList, getKey) {
+  const originLen = originList.length
+  const targetLen = targetList.length
+
+  let shortList
+  let longList
+
+  if (originLen === 0 && targetLen === 0) {
+    return null
+  }
+
+  if (originLen < targetLen) {
+    shortList = originList
+    longList = targetList
+  } else {
+    shortList = targetList
+    longList = originList
+  }
+
+  const notExistKey = { __EMPTY_ITEM__: true }
+  function getItemKey(item) {
+    if (item !== undefined) {
+      return getKey(item)
+    }
+    return notExistKey
+  }
+
+  // Loop to find diff one
+  let diffIndex = null
+  let multiple = Math.abs(originLen - targetLen) !== 1
+  for (let i = 0; i < longList.length; i += 1) {
+    const shortKey = getItemKey(shortList[i])
+    const longKey = getItemKey(longList[i])
+
+    if (shortKey !== longKey) {
+      diffIndex = i
+      multiple = multiple || shortKey !== getItemKey(longList[i + 1])
+      break
+    }
+  }
+
+  return diffIndex === null ? null : { index: diffIndex, multiple }
+}

package/src/vc-virtual-list/utils/isFirefox.ts

@@ -0,0 +1,3 @@
+const isFF = typeof navigator === 'object' && /Firefox/i.test(navigator.userAgent)
+
+export default isFF

package/src/vc-virtual-list/utils/itemUtil.js

@@ -0,0 +1,147 @@
+/**
+ * Our algorithm have additional one ghost item
+ * whose index as `data.length` to simplify the calculation
+ */
+export const GHOST_ITEM_KEY = '__vc_ghost_item__'
+
+/**
+ * Safari has the elasticity effect which provides negative `scrollTop` value.
+ * We should ignore it since will make scroll animation shake.
+ */
+export function alignScrollTop(scrollTop, scrollRange) {
+  if (scrollTop < 0) {
+    return 0
+  }
+  if (scrollTop >= scrollRange) {
+    return scrollRange
+  }
+
+  return scrollTop
+}
+
+/**
+ * Get node `offsetHeight`. We prefer node is a dom element directly.
+ * But if not provided, downgrade to `findDOMNode` to get the real dom element.
+ */
+export function getNodeHeight(node) {
+  return node ? node.offsetHeight : 0
+}
+
+/**
+ * Calculate the located item absolute top with whole scroll height
+ */
+export function getItemAbsoluteTop({ scrollTop, ...rest }) {
+  return scrollTop + getItemRelativeTop(rest)
+}
+
+/**
+ * Calculate the located item related top with current window height
+ */
+export function getItemRelativeTop({
+  itemIndex,
+  itemOffsetPtg,
+  itemElementHeights,
+  scrollPtg,
+  clientHeight,
+  getItemKey,
+}) {
+  const locatedItemHeight = itemElementHeights[getItemKey(itemIndex)] || 0
+  const locatedItemTop = scrollPtg * clientHeight
+  const locatedItemOffset = itemOffsetPtg * locatedItemHeight
+  return Math.floor(locatedItemTop - locatedItemOffset)
+}
+
+export function getCompareItemRelativeTop({
+  locatedItemRelativeTop,
+  locatedItemIndex,
+  compareItemIndex,
+  startIndex,
+  endIndex,
+  getItemKey,
+  itemElementHeights,
+}) {
+  let originCompareItemTop = locatedItemRelativeTop
+  const compareItemKey = getItemKey(compareItemIndex)
+
+  if (compareItemIndex <= locatedItemIndex) {
+    for (let index = locatedItemIndex; index >= startIndex; index -= 1) {
+      const key = getItemKey(index)
+      if (key === compareItemKey) {
+        break
+      }
+
+      const prevItemKey = getItemKey(index - 1)
+      originCompareItemTop -= itemElementHeights[prevItemKey] || 0
+    }
+  } else {
+    for (let index = locatedItemIndex; index <= endIndex; index += 1) {
+      const key = getItemKey(index)
+      if (key === compareItemKey) {
+        break
+      }
+
+      originCompareItemTop += itemElementHeights[key] || 0
+    }
+  }
+
+  return originCompareItemTop
+}
+
+export function getScrollPercentage({ scrollTop, scrollHeight, clientHeight }) {
+  if (scrollHeight <= clientHeight) {
+    return 0
+  }
+
+  const scrollRange = scrollHeight - clientHeight
+  const alignedScrollTop = alignScrollTop(scrollTop, scrollRange)
+  const scrollTopPtg = alignedScrollTop / scrollRange
+  return scrollTopPtg
+}
+
+export function getElementScrollPercentage(element) {
+  if (!element) {
+    return 0
+  }
+
+  return getScrollPercentage(element)
+}
+
+/**
+ * Get location item and its align percentage with the scroll percentage.
+ * We should measure current scroll position to decide which item is the location item.
+ * And then fill the top count and bottom count with the base of location item.
+ *
+ * `total` should be the real count instead of `total - 1` in calculation.
+ */
+function getLocationItem(scrollPtg, total) {
+  const itemIndex = Math.floor(scrollPtg * total)
+  const itemTopPtg = itemIndex / total
+  const itemBottomPtg = (itemIndex + 1) / total
+  const itemOffsetPtg = (scrollPtg - itemTopPtg) / (itemBottomPtg - itemTopPtg)
+
+  return {
+    index: itemIndex,
+    offsetPtg: itemOffsetPtg,
+  }
+}
+
+/**
+ * Get display items start, end, located item index. This is pure math calculation
+ */
+export function getRangeIndex(scrollPtg, itemCount, visibleCount) {
+  const { index, offsetPtg } = getLocationItem(scrollPtg, itemCount)
+
+  const beforeCount = Math.ceil(scrollPtg * visibleCount)
+  const afterCount = Math.ceil((1 - scrollPtg) * visibleCount)
+
+  return {
+    itemIndex: index,
+    itemOffsetPtg: offsetPtg,
+    startIndex: Math.max(0, index - beforeCount),
+    endIndex: Math.min(itemCount - 1, index + afterCount),
+  }
+}
+
+export function requireVirtual(height, itemHeight, count, virtual) {
+  return virtual !== false && typeof height === 'number' && count * itemHeight > height
+}

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

@@ -0,0 +1,42 @@
+---
+category: Components
+type: Other
+title: Watermark
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*wr1ISY50SyYAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*duAQQbjHlHQAAAAAAAAAAAAADrJ8AQ/original
+tag: New
+---
+
+Add specific text or patterns to the page.
+
+## When To Use
+
+- Use when the page needs to be watermarked to identify the copyright.
+- Suitable for preventing information theft.
+
+## API
+
+### Watermark
+
+| Property | Description                                                                                     | Type               | Default                    | Version |
+| -------- | ----------------------------------------------------------------------------------------------- | ------------------ | -------------------------- | ------- |
+| width    | The width of the watermark, the default value of `content` is its own width                     | number             | 120                        |         |
+| height   | The height of the watermark, the default value of `content` is its own height                   | number             | 64                         |         |
+| rotate   | When the watermark is drawn, the rotation Angle, unit `°`                                       | number             | -22                        |         |
+| zIndex   | The z-index of the appended watermark element                                                   | number             | 9                          |         |
+| image    | Image source, it is recommended to export 2x or 3x image, high priority                         | string             | -                          |         |
+| content  | Watermark text content                                                                          | string \| string[] | -                          |         |
+| font     | Text style                                                                                      | [Font](#font)      | [Font](#font)              |         |
+| gap      | The spacing between watermarks                                                                  | \[number, number\] | \[100, 100\]               |         |
+| offset   | The offset of the watermark from the upper left corner of the container. The default is `gap/2` | \[number, number\] | \[gap\[0\]/2, gap\[1\]/2\] |         |
+
+### Font
+
+<!-- prettier-ignore -->
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| color | font color | string | rgba(0,0,0,.15) |  |
+| fontSize | font size | number | 16 |  |
+| fontWeight | font weight | `normal` \| `light` \| `weight` \| number | normal |  |
+| fontFamily | font family | string | sans-serif |  |
+| fontStyle | font style  | `none` \| `normal` \| `italic` \| `oblique` | normal |  |

package/src/watermark/index.tsx

@@ -0,0 +1,260 @@
+import type { CSSProperties, ExtractPropTypes } from 'vue'
+import { computed, defineComponent, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'
+
+import { useMutationObserver } from '../_util/hooks/_vueuse/useMutationObserver'
+import { initDefaultProps } from '../_util/props-util'
+import { arrayType, objectType, someType, withInstall } from '../_util/type'
+import { useToken } from '../theme/internal'
+import { getPixelRatio, getStyleStr, reRendering, rotateWatermark } from './utils'
+
+/**
+ * Base size of the canvas, 1 for parallel layout and 2 for alternate layout
+ * Only alternate layout is currently supported
+ */
+const BaseSize = 2
+const FontGap = 3
+
+export interface WatermarkFontType {
+  color?: string
+  fontSize?: number | string
+  fontWeight?: 'normal' | 'light' | 'weight' | number
+  fontStyle?: 'none' | 'normal' | 'italic' | 'oblique'
+  fontFamily?: string
+}
+export const watermarkProps = () => ({
+  zIndex: Number,
+  rotate: Number,
+  width: Number,
+  height: Number,
+  image: String,
+  content: someType<string | string[]>([String, Array]),
+  font: objectType<WatermarkFontType>(),
+  rootClassName: String,
+  gap: arrayType<[number, number]>(),
+  offset: arrayType<[number, number]>(),
+})
+export type WatermarkProps = Partial<ExtractPropTypes<ReturnType<typeof watermarkProps>>>
+const Watermark = defineComponent({
+  name: 'AWatermark',
+  inheritAttrs: false,
+  props: initDefaultProps(watermarkProps(), {
+    zIndex: 9,
+    rotate: -22,
+    font: {},
+    gap: [100, 100],
+  }),
+  setup(props, { slots, attrs }) {
+    const [, token] = useToken()
+    const containerRef = shallowRef<HTMLDivElement>()
+    const watermarkRef = shallowRef<HTMLDivElement>()
+    const stopObservation = shallowRef(false)
+    const gapX = computed(() => props.gap?.[0] ?? 100)
+    const gapY = computed(() => props.gap?.[1] ?? 100)
+    const gapXCenter = computed(() => gapX.value / 2)
+    const gapYCenter = computed(() => gapY.value / 2)
+    const offsetLeft = computed(() => props.offset?.[0] ?? gapXCenter.value)
+    const offsetTop = computed(() => props.offset?.[1] ?? gapYCenter.value)
+    const fontSize = computed(() => props.font?.fontSize ?? token.value.fontSizeLG)
+    const fontWeight = computed(() => props.font?.fontWeight ?? 'normal')
+    const fontStyle = computed(() => props.font?.fontStyle ?? 'normal')
+    const fontFamily = computed(() => props.font?.fontFamily ?? 'sans-serif')
+    const color = computed(() => props.font?.color ?? token.value.colorFill)
+    const markStyle = computed(() => {
+      const markStyle: CSSProperties = {
+        zIndex: props.zIndex ?? 9,
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
+        backgroundRepeat: 'repeat',
+      }
+
+      /** Calculate the style of the offset */
+      let positionLeft = offsetLeft.value - gapXCenter.value
+      let positionTop = offsetTop.value - gapYCenter.value
+      if (positionLeft > 0) {
+        markStyle.left = `${positionLeft}px`
+        markStyle.width = `calc(100% - ${positionLeft}px)`
+        positionLeft = 0
+      }
+      if (positionTop > 0) {
+        markStyle.top = `${positionTop}px`
+        markStyle.height = `calc(100% - ${positionTop}px)`
+        positionTop = 0
+      }
+      markStyle.backgroundPosition = `${positionLeft}px ${positionTop}px`
+
+      return markStyle
+    })
+    const destroyWatermark = () => {
+      if (watermarkRef.value) {
+        watermarkRef.value.remove()
+        watermarkRef.value = undefined
+      }
+    }
+
+    const appendWatermark = (base64Url: string, markWidth: number) => {
+      if (containerRef.value && watermarkRef.value) {
+        stopObservation.value = true
+        watermarkRef.value.setAttribute(
+          'style',
+          getStyleStr({
+            ...markStyle.value,
+            backgroundImage: `url('${base64Url}')`,
+            backgroundSize: `${(gapX.value + markWidth) * BaseSize}px`,
+          }),
+        )
+        containerRef.value?.append(watermarkRef.value)
+        // Delayed execution
+        setTimeout(() => {
+          stopObservation.value = false
+        })
+      }
+    }
+    /**
+     * Get the width and height of the watermark. The default values are as follows
+     * Image: [120, 64]; Content: It's calculated by content;
+     */
+    const getMarkSize = (ctx: CanvasRenderingContext2D) => {
+      let defaultWidth = 120
+      let defaultHeight = 64
+      const content = props.content
+      const image = props.image
+      const width = props.width
+      const height = props.height
+      if (!image && ctx.measureText) {
+        ctx.font = `${Number(fontSize.value)}px ${fontFamily.value}`
+        const contents = Array.isArray(content) ? content : [content]
+        const widths = contents.map((item) => ctx.measureText(item!).width)
+        defaultWidth = Math.ceil(Math.max(...widths))
+        defaultHeight = Number(fontSize.value) * contents.length + (contents.length - 1) * FontGap
+      }
+      return [width ?? defaultWidth, height ?? defaultHeight] as const
+    }
+    const fillTexts = (
+      ctx: CanvasRenderingContext2D,
+      drawX: number,
+      drawY: number,
+      drawWidth: number,
+      drawHeight: number,
+    ) => {
+      const ratio = getPixelRatio()
+      const content = props.content
+      const mergedFontSize = Number(fontSize.value) * ratio
+      ctx.font = `${fontStyle.value} normal ${fontWeight.value} ${mergedFontSize}px/${drawHeight}px ${fontFamily.value}`
+      ctx.fillStyle = color.value
+      ctx.textAlign = 'center'
+      ctx.textBaseline = 'top'
+      ctx.translate(drawWidth / 2, 0)
+      const contents = Array.isArray(content) ? content : [content]
+      contents?.forEach((item, index) => {
+        ctx.fillText(item ?? '', drawX, drawY + index * (mergedFontSize + FontGap * ratio))
+      })
+    }
+    const renderWatermark = () => {
+      const canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')
+      const image = props.image
+      const rotate = props.rotate ?? -22
+
+      if (ctx) {
+        if (!watermarkRef.value) {
+          watermarkRef.value = document.createElement('div')
+        }
+
+        const ratio = getPixelRatio()
+        const [markWidth, markHeight] = getMarkSize(ctx)
+        const canvasWidth = (gapX.value + markWidth) * ratio
+        const canvasHeight = (gapY.value + markHeight) * ratio
+        canvas.setAttribute('width', `${canvasWidth * BaseSize}px`)
+        canvas.setAttribute('height', `${canvasHeight * BaseSize}px`)
+
+        const drawX = (gapX.value * ratio) / 2
+        const drawY = (gapY.value * ratio) / 2
+        const drawWidth = markWidth * ratio
+        const drawHeight = markHeight * ratio
+        const rotateX = (drawWidth + gapX.value * ratio) / 2
+        const rotateY = (drawHeight + gapY.value * ratio) / 2
+        /** Alternate drawing parameters */
+        const alternateDrawX = drawX + canvasWidth
+        const alternateDrawY = drawY + canvasHeight
+        const alternateRotateX = rotateX + canvasWidth
+        const alternateRotateY = rotateY + canvasHeight
+
+        ctx.save()
+        rotateWatermark(ctx, rotateX, rotateY, rotate)
+
+        if (image) {
+          const img = new Image()
+          img.onload = () => {
+            ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight)
+            /** Draw interleaved pictures after rotation */
+            ctx.restore()
+            rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate)
+            ctx.drawImage(img, alternateDrawX, alternateDrawY, drawWidth, drawHeight)
+            appendWatermark(canvas.toDataURL(), markWidth)
+          }
+          img.crossOrigin = 'anonymous'
+          img.referrerPolicy = 'no-referrer'
+          img.src = image
+        } else {
+          fillTexts(ctx, drawX, drawY, drawWidth, drawHeight)
+          /** Fill the interleaved text after rotation */
+          ctx.restore()
+          rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate)
+          fillTexts(ctx, alternateDrawX, alternateDrawY, drawWidth, drawHeight)
+          appendWatermark(canvas.toDataURL(), markWidth)
+        }
+      }
+    }
+    onMounted(() => {
+      renderWatermark()
+    })
+    watch(
+      () => [props, token.value.colorFill, token.value.fontSizeLG],
+      () => {
+        renderWatermark()
+      },
+      {
+        deep: true,
+        flush: 'post',
+      },
+    )
+    onBeforeUnmount(() => {
+      destroyWatermark()
+    })
+    const onMutate = (mutations: MutationRecord[]) => {
+      if (stopObservation.value) {
+        return
+      }
+      mutations.forEach((mutation) => {
+        if (reRendering(mutation, watermarkRef.value)) {
+          destroyWatermark()
+          renderWatermark()
+        }
+      })
+    }
+    useMutationObserver(containerRef, onMutate, {
+      attributes: true,
+      subtree: true,
+      childList: true,
+      attributeFilter: ['style', 'class'],
+    })
+    return () => {
+      return (
+        <div
+          {...attrs}
+          ref={containerRef}
+          class={[attrs.class, props.rootClassName]}
+          style={[{ position: 'relative' }, attrs.style as CSSProperties]}
+        >
+          {slots.default?.()}
+        </div>
+      )
+    }
+  },
+})
+
+export default withInstall(Watermark)

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

@@ -0,0 +1,43 @@
+---
+category: Components
+subtitle: 水印
+type: 其他
+title: Watermark
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*wr1ISY50SyYAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*duAQQbjHlHQAAAAAAAAAAAAADrJ8AQ/original
+tag: New
+---
+
+给页面的某个区域加上水印。
+
+## 何时使用
+
+- 页面需要添加水印标识版权时使用。
+- 适用于防止信息盗用。
+
+## API
+
+### Watermark
+
+| 参数    | 说明                                       | 类型               | 默认值                     | 版本 |
+| ------- | ------------------------------------------ | ------------------ | -------------------------- | ---- |
+| width   | 水印的宽度，`content` 的默认值为自身的宽度 | number             | 120                        |      |
+| height  | 水印的高度，`content` 的默认值为自身的高度 | number             | 64                         |      |
+| rotate  | 水印绘制时，旋转的角度，单位 `°`           | number             | -22                        |      |
+| zIndex  | 追加的水印元素的 z-index                   | number             | 9                          |      |
+| image   | 图片源，建议导出 2 倍或 3 倍图，优先级高   | string             | -                          |      |
+| content | 水印文字内容                               | string \| string[] | -                          |      |
+| font    | 文字样式                                   | [Font](#font)      | [Font](#font)              |      |
+| gap     | 水印之间的间距                             | \[number, number\] | \[100, 100\]               |      |
+| offset  | 水印距离容器左上角的偏移量，默认为 `gap/2` | \[number, number\] | \[gap\[0\]/2, gap\[1\]/2\] |      |
+
+### Font
+
+<!-- prettier-ignore -->
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| color | 字体颜色 | string | rgba(0,0,0,.15) |  |
+| fontSize | 字体大小 | number | 16 |  |
+| fontWeight | 字体粗细 | `normal` \| `light` \| `weight` \| number | normal |  |
+| fontFamily | 字体类型 | string | sans-serif |  |
+| fontStyle | 字体样式 | `none` \| `normal` \| `italic` \| `oblique` | normal |  |

package/src/watermark/utils.ts

@@ -0,0 +1,43 @@
+import type { CSSProperties } from 'vue'
+
+/** converting camel-cased strings to be lowercase and link it with Separato */
+export function toLowercaseSeparator(key: string) {
+  return key.replace(/([A-Z])/g, '-$1').toLowerCase()
+}
+
+export function getStyleStr(style: CSSProperties): string {
+  return Object.keys(style)
+    .map((key: keyof CSSProperties) => `${toLowercaseSeparator(key)}: ${style[key]};`)
+    .join(' ')
+}
+
+/** Returns the ratio of the device's physical pixel resolution to the css pixel resolution */
+export function getPixelRatio() {
+  return window.devicePixelRatio || 1
+}
+
+/** Rotate with the watermark as the center point */
+export function rotateWatermark(
+  ctx: CanvasRenderingContext2D,
+  rotateX: number,
+  rotateY: number,
+  rotate: number,
+) {
+  ctx.translate(rotateX, rotateY)
+  ctx.rotate((Math.PI / 180) * Number(rotate))
+  ctx.translate(-rotateX, -rotateY)
+}
+
+/** Whether to re-render the watermark */
+export const reRendering = (mutation: MutationRecord, watermarkElement?: HTMLElement) => {
+  let flag = false
+  // Whether to delete the watermark node
+  if (mutation.removedNodes.length) {
+    flag = Array.from(mutation.removedNodes).includes(watermarkElement)
+  }
+  // Whether the watermark dom property value has been modified
+  if (mutation.type === 'attributes' && mutation.target === watermarkElement) {
+    flag = true
+  }
+  return flag
+}