@antsoo-lib/components 0.1.11 → 0.1.12

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

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

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

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

@@ -1,147 +0,0 @@
-/**
- * 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

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

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

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

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