@antsoo-lib/components 0.1.11 → 0.1.12

package/src/_util/wave/util.ts

@@ -1,34 +0,0 @@
-export function isNotGrey(color: string) {
-  const match = (color || '').match(/rgba?\((\d*), (\d*), (\d*)(, [\d.]*)?\)/)
-  if (match && match[1] && match[2] && match[3]) {
-    return !(match[1] === match[2] && match[2] === match[3])
-  }
-  return true
-}
-
-export function isValidWaveColor(color: string) {
-  return (
-    color &&
-    color !== '#fff' &&
-    color !== '#ffffff' &&
-    color !== 'rgb(255, 255, 255)' &&
-    color !== 'rgba(255, 255, 255, 1)' &&
-    isNotGrey(color) &&
-    !/rgba\((?:\d*, ){3}0\)/.test(color) && // any transparent rgba color
-    color !== 'transparent'
-  )
-}
-
-export function getTargetWaveColor(node: HTMLElement) {
-  const { borderTopColor, borderColor, backgroundColor } = getComputedStyle(node)
-  if (isValidWaveColor(borderTopColor)) {
-    return borderTopColor
-  }
-  if (isValidWaveColor(borderColor)) {
-    return borderColor
-  }
-  if (isValidWaveColor(backgroundColor)) {
-    return backgroundColor
-  }
-  return null
-}

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

@@ -1,47 +0,0 @@
----
-category: Components
-type: Other
-title: Affix
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YSm4RI3iOJ8AAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*03dxS64LxeQAAAAAAAAAAAAADrJ8AQ/original
----
-
-Wrap Affix around another component to make it stick the viewport.
-
-## When To Use
-
-On longer web pages, its helpful for some content to stick to the viewport. This is common for menus and actions.
-
-Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.
-
-## API
-
-| Property     | Description                                        | Type              | Default      | Version |
-| ------------ | -------------------------------------------------- | ----------------- | ------------ | ------- |
-| offsetBottom | Offset from the bottom of the viewport (in pixels) | number            | -            |         |
-| offsetTop    | Offset from the top of the viewport (in pixels)    | number            | 0            |         |
-| target       | Specifies the scrollable area DOM node             | () => HTMLElement | () => window |         |
-
-### events
-
-| Events Name | Description                              | Arguments                   | Version |
-| ----------- | ---------------------------------------- | --------------------------- | ------- |
-| change      | Callback for when Affix state is changed | (affixed?: boolean) => void |         |
-
-**Note:** Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself:
-
-```html
-<a-affix :style="{ position: 'absolute', top: y, left: x}">...</a-affix>
-```
-
-## FAQ
-
-### When binding container with `target` in Affix, elements sometimes move out of the container.
-
-We only listen to container scroll events for performance consideration. You can add custom listeners if you still want to, like react demo <https://codesandbox.io/s/2xyj5zr85p>
-
-Related issues：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)
-
-### When Affix is ​​used in a horizontal scroll container, the position of the element `left` is incorrect.
-
-Affix is ​​generally only applicable to areas with one-way scrolling, and only supports usage in vertical scrolling containers. If you want to use it in a horizontal container, you can consider implementing with the native `position: sticky` property.

package/src/affix/index.tsx

@@ -1,287 +0,0 @@
-import type { CSSProperties, ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import {
-  computed,
-  defineComponent,
-  getCurrentInstance,
-  onMounted,
-  onUnmounted,
-  onUpdated,
-  reactive,
-  shallowRef,
-  watch,
-} from 'vue'
-
-import classNames from '../_util/classNames'
-import omit from '../_util/omit'
-import throttleByAnimationFrame from '../_util/throttleByAnimationFrame'
-import { withInstall } from '../_util/type'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import ResizeObserver from '../vc-resize-observer'
-import useStyle from './style'
-import {
-  addObserveTarget,
-  getFixedBottom,
-  getFixedTop,
-  getTargetRect,
-  removeObserveTarget,
-} from './utils'
-
-function getDefaultTarget() {
-  return typeof window !== 'undefined' ? window : null
-}
-enum AffixStatus {
-  None,
-  Prepare,
-}
-export interface AffixState {
-  affixStyle?: CSSProperties
-  placeholderStyle?: CSSProperties
-  status: AffixStatus
-  lastAffix: boolean
-  prevTarget: Window | HTMLElement | null
-}
-
-// Affix
-export function affixProps() {
-  return {
-    /**
-     * 距离窗口顶部达到指定偏移量后触发
-     */
-    offsetTop: Number,
-    /** 距离窗口底部达到指定偏移量后触发 */
-    offsetBottom: Number,
-    /** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */
-    target: {
-      type: Function as PropType<() => Window | HTMLElement | null>,
-      default: getDefaultTarget,
-    },
-    prefixCls: String,
-    /** 固定状态改变时触发的回调函数 */
-    onChange: Function as PropType<AffixEmits['change']>,
-    onTestUpdatePosition: Function as PropType<AffixEmits['testUpdatePosition']>,
-  }
-}
-
-export type AffixProps = Partial<ExtractPropTypes<ReturnType<typeof affixProps>>>
-
-export interface AffixEmits {
-  change: (lastAffix: boolean) => void
-  testUpdatePosition: () => void
-}
-
-export interface AffixExpose {
-  updatePosition: (...args: any[]) => void
-  lazyUpdatePosition: (...args: any[]) => void
-}
-
-export type AffixInstance = ComponentPublicInstance<AffixProps, AffixExpose>
-const Affix = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'AAffix',
-  inheritAttrs: false,
-  props: affixProps(),
-  setup(props, { slots, emit, expose, attrs }) {
-    const placeholderNode = shallowRef()
-    const fixedNode = shallowRef()
-    const state = reactive({
-      affixStyle: undefined,
-      placeholderStyle: undefined,
-      status: AffixStatus.None,
-      lastAffix: false,
-      prevTarget: null,
-      timeout: null,
-    })
-    const currentInstance = getCurrentInstance()
-
-    const offsetTop = computed(() => {
-      return props.offsetBottom === undefined && props.offsetTop === undefined ? 0 : props.offsetTop
-    })
-    const offsetBottom = computed(() => props.offsetBottom)
-    const measure = () => {
-      const { status, lastAffix } = state
-      const { target } = props
-      if (status !== AffixStatus.Prepare || !fixedNode.value || !placeholderNode.value || !target) {
-        return
-      }
-
-      const targetNode = target()
-      if (!targetNode) {
-        return
-      }
-
-      const newState = {
-        status: AffixStatus.None,
-      } as AffixState
-      const placeholderRect = getTargetRect(placeholderNode.value as HTMLElement)
-
-      if (
-        placeholderRect.top === 0 &&
-        placeholderRect.left === 0 &&
-        placeholderRect.width === 0 &&
-        placeholderRect.height === 0
-      ) {
-        return
-      }
-
-      const targetRect = getTargetRect(targetNode)
-      const fixedTop = getFixedTop(placeholderRect, targetRect, offsetTop.value)
-      const fixedBottom = getFixedBottom(placeholderRect, targetRect, offsetBottom.value)
-      if (
-        placeholderRect.top === 0 &&
-        placeholderRect.left === 0 &&
-        placeholderRect.width === 0 &&
-        placeholderRect.height === 0
-      ) {
-        return
-      }
-
-      if (fixedTop !== undefined) {
-        const width = `${placeholderRect.width}px`
-        const height = `${placeholderRect.height}px`
-
-        newState.affixStyle = {
-          position: 'fixed',
-          top: fixedTop,
-          width,
-          height,
-        }
-        newState.placeholderStyle = {
-          width,
-          height,
-        }
-      } else if (fixedBottom !== undefined) {
-        const width = `${placeholderRect.width}px`
-        const height = `${placeholderRect.height}px`
-
-        newState.affixStyle = {
-          position: 'fixed',
-          bottom: fixedBottom,
-          width,
-          height,
-        }
-        newState.placeholderStyle = {
-          width,
-          height,
-        }
-      }
-
-      newState.lastAffix = !!newState.affixStyle
-      if (lastAffix !== newState.lastAffix) {
-        emit('change', newState.lastAffix)
-      }
-      // update state
-      Object.assign(state, newState)
-    }
-    const prepareMeasure = () => {
-      Object.assign(state, {
-        status: AffixStatus.Prepare,
-        affixStyle: undefined,
-        placeholderStyle: undefined,
-      })
-      // Test if `updatePosition` called
-      if (process.env.NODE_ENV === 'test') {
-        emit('testUpdatePosition')
-      }
-    }
-
-    const updatePosition = throttleByAnimationFrame(() => {
-      prepareMeasure()
-    })
-    const lazyUpdatePosition = throttleByAnimationFrame(() => {
-      const { target } = props
-      const { affixStyle } = state
-
-      // Check position change before measure to make Safari smooth
-      if (target && affixStyle) {
-        const targetNode = target()
-        if (targetNode && placeholderNode.value) {
-          const targetRect = getTargetRect(targetNode)
-          const placeholderRect = getTargetRect(placeholderNode.value as HTMLElement)
-          const fixedTop = getFixedTop(placeholderRect, targetRect, offsetTop.value)
-          const fixedBottom = getFixedBottom(placeholderRect, targetRect, offsetBottom.value)
-          if (
-            (fixedTop !== undefined && affixStyle.top === fixedTop) ||
-            (fixedBottom !== undefined && affixStyle.bottom === fixedBottom)
-          ) {
-            return
-          }
-        }
-      }
-      // Directly call prepare measure since it's already throttled.
-      prepareMeasure()
-    })
-
-    expose({
-      updatePosition,
-      lazyUpdatePosition,
-    })
-    watch(
-      () => props.target,
-      (val) => {
-        const newTarget = val?.() || null
-        if (state.prevTarget !== newTarget) {
-          removeObserveTarget(currentInstance)
-          if (newTarget) {
-            addObserveTarget(newTarget, currentInstance)
-            // Mock Event object.
-            updatePosition()
-          }
-          state.prevTarget = newTarget
-        }
-      },
-    )
-    watch(() => [props.offsetTop, props.offsetBottom], updatePosition)
-    onMounted(() => {
-      const { target } = props
-      if (target) {
-        // [Legacy] Wait for parent component ref has its value.
-        // We should use target as directly element instead of function which makes element check hard.
-        state.timeout = setTimeout(() => {
-          addObserveTarget(target(), currentInstance)
-          // Mock Event object.
-          updatePosition()
-        })
-      }
-    })
-    onUpdated(() => {
-      measure()
-    })
-    onUnmounted(() => {
-      clearTimeout(state.timeout)
-      removeObserveTarget(currentInstance)
-      ;(updatePosition as any).cancel()
-      // https://github.com/ant-design/ant-design/issues/22683
-      ;(lazyUpdatePosition as any).cancel()
-    })
-
-    const { prefixCls } = useConfigInject('affix', props)
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-    return () => {
-      const { affixStyle, placeholderStyle, status } = state
-      const className = classNames({
-        [prefixCls.value]: affixStyle,
-        [hashId.value]: true,
-      })
-      const restProps = omit(props, [
-        'prefixCls',
-        'offsetTop',
-        'offsetBottom',
-        'target',
-        'onChange',
-        'onTestUpdatePosition',
-      ])
-      return wrapSSR(
-        <ResizeObserver onResize={updatePosition}>
-          <div {...restProps} {...attrs} ref={placeholderNode} data-measure-status={status}>
-            {affixStyle && <div style={placeholderStyle} aria-hidden="true" />}
-            <div class={className} ref={fixedNode} style={affixStyle}>
-              {slots.default?.()}
-            </div>
-          </div>
-        </ResizeObserver>,
-      )
-    }
-  },
-})
-
-export default withInstall(Affix)

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

@@ -1,50 +0,0 @@
----
-category: Components
-subtitle: 固钉
-type: 其他
-title: Affix
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YSm4RI3iOJ8AAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*03dxS64LxeQAAAAAAAAAAAAADrJ8AQ/original
----
-
-将页面元素钉在可视范围。
-
-## 何时使用
-
-当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
-
-页面可视范围过小时，慎用此功能以免遮挡页面内容。
-
-## API
-
-| 成员         | 说明                                                                   | 类型              | 默认值       | 版本 |
-| ------------ | ---------------------------------------------------------------------- | ----------------- | ------------ | ---- |
-| offsetBottom | 距离窗口底部达到指定偏移量后触发                                       | number            |              |      |
-| offsetTop    | 距离窗口顶部达到指定偏移量后触发                                       | number            | 0            |      |
-| target       | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |      |
-
-### 事件
-
-| 事件名称 | 说明                         | 回调参数                    | 版本 |     |
-| -------- | ---------------------------- | --------------------------- | ---- | --- |
-| change   | 固定状态改变时触发的回调函数 | (affixed?: boolean) => void | -    |     |
-
-**注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：
-
-```html
-<a-affix :style="{ position: 'absolute', top: y, left: x}">...</a-affix>
-```
-
-## FAQ
-
-### Affix 使用 `target` 绑定容器时，元素会跑到容器外。
-
-从性能角度考虑，我们只监听容器滚动事件。如果希望任意滚动，你可以在窗体添加滚动监听, 参考 react 版本示例 <https://codesandbox.io/s/2xyj5zr85p>
-
-相关 issue：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)
-
-### Affix 在水平滚动容器中使用时， 元素 `left` 位置不正确。
-
-Affix 一般只适用于单向滚动的区域，只支持在垂直滚动容器中使用。如果希望在水平容器中使用，你可以考虑使用 原生 `position: sticky` 实现。
-
-相关 issue: [#29108](https://github.com/ant-design/ant-design/issues/29108)

package/src/affix/style/index.ts

@@ -1,27 +0,0 @@
-import type { CSSObject } from '../../_util/cssinjs'
-import type { FullToken, GenerateStyle } from '../../theme/internal'
-import { genComponentStyleHook, mergeToken } from '../../theme/internal'
-
-interface AffixToken extends FullToken<'Affix'> {
-  zIndexPopup: number
-}
-
-// ============================== Shared ==============================
-const genSharedAffixStyle: GenerateStyle<AffixToken> = (token): CSSObject => {
-  const { componentCls } = token
-
-  return {
-    [componentCls]: {
-      position: 'fixed',
-      zIndex: token.zIndexPopup,
-    },
-  }
-}
-
-// ============================== Export ==============================
-export default genComponentStyleHook('Affix', (token) => {
-  const affixToken = mergeToken<AffixToken>(token, {
-    zIndexPopup: token.zIndexBase + 10,
-  })
-  return [genSharedAffixStyle(affixToken)]
-})

package/src/affix/utils.ts

@@ -1,107 +0,0 @@
-import supportsPassive from '../_util/supportsPassive'
-import addEventListener from '../vc-util/Dom/addEventListener'
-
-export type BindElement = HTMLElement | Window | null | undefined
-
-export function getTargetRect(target: BindElement): DOMRect {
-  return target !== window
-    ? (target as HTMLElement).getBoundingClientRect()
-    : ({ top: 0, bottom: window.innerHeight } as DOMRect)
-}
-
-export function getFixedTop(placeholderRect: DOMRect, targetRect: DOMRect, offsetTop: number) {
-  if (offsetTop !== undefined && targetRect.top > placeholderRect.top - offsetTop) {
-    return `${offsetTop + targetRect.top}px`
-  }
-  return undefined
-}
-
-export function getFixedBottom(
-  placeholderRect: DOMRect,
-  targetRect: DOMRect,
-  offsetBottom: number,
-) {
-  if (offsetBottom !== undefined && targetRect.bottom < placeholderRect.bottom + offsetBottom) {
-    const targetBottomOffset = window.innerHeight - targetRect.bottom
-    return `${offsetBottom + targetBottomOffset}px`
-  }
-  return undefined
-}
-
-// ======================== Observer ========================
-const TRIGGER_EVENTS = [
-  'resize',
-  'scroll',
-  'touchstart',
-  'touchmove',
-  'touchend',
-  'pageshow',
-  'load',
-]
-
-interface ObserverEntity {
-  target: HTMLElement | Window
-  affixList: any[]
-  eventHandlers: { [eventName: string]: any }
-}
-
-let observerEntities: ObserverEntity[] = []
-
-export function getObserverEntities() {
-  // Only used in test env. Can be removed if refactor.
-  return observerEntities
-}
-
-export function addObserveTarget<T>(target: HTMLElement | Window | null, affix: T): void {
-  if (!target) return
-
-  let entity = observerEntities.find((item) => item.target === target)
-
-  if (entity) {
-    entity.affixList.push(affix)
-  } else {
-    entity = {
-      target,
-      affixList: [affix],
-      eventHandlers: {},
-    }
-    observerEntities.push(entity)
-
-    // Add listener
-    TRIGGER_EVENTS.forEach((eventName) => {
-      entity!.eventHandlers[eventName] = addEventListener(target, eventName, () => {
-        entity!.affixList.forEach(
-          (targetAffix) => {
-            const { lazyUpdatePosition } = (targetAffix as any).exposed
-            lazyUpdatePosition()
-          },
-          (eventName === 'touchstart' || eventName === 'touchmove') && supportsPassive
-            ? ({ passive: true } as EventListenerOptions)
-            : false,
-        )
-      })
-    })
-  }
-}
-
-export function removeObserveTarget<T>(affix: T): void {
-  const observerEntity = observerEntities.find((oriObserverEntity) => {
-    const hasAffix = oriObserverEntity.affixList.includes(affix)
-    if (hasAffix) {
-      oriObserverEntity.affixList = oriObserverEntity.affixList.filter((item) => item !== affix)
-    }
-    return hasAffix
-  })
-
-  if (observerEntity && observerEntity.affixList.length === 0) {
-    observerEntities = observerEntities.filter((item) => item !== observerEntity)
-
-    // Remove listener
-    TRIGGER_EVENTS.forEach((eventName) => {
-      const handler = observerEntity.eventHandlers[eventName]
-      if (handler && handler.remove) {
-        handler.remove()
-      }
-    })
-  }
-}

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

@@ -1,36 +0,0 @@
----
-category: Components
-type: Feedback
-title: Alert
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Ct7bT7rrTTAAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-U3XQqYN7VsAAAAAAAAAAAAADrJ8AQ/original
----
-
-Alert component for feedback.
-
-## When To Use
-
-- When you need to show alert messages to users.
-- When you need a persistent static container which is closable by user actions.
-
-## API
-
-| Property    | Description                                                          | Type          | Default                                      | Version |
-| ----------- | -------------------------------------------------------------------- | ------------- | -------------------------------------------- | ------- |
-| action      | The action of Alert                                                  | slot          | -                                            | 4.0.0   |
-| afterClose  | Called when close animation is finished                              | () => void    | -                                            |         |
-| banner      | Whether to show as banner                                            | boolean       | false                                        |         |
-| closable    | Whether Alert can be closed                                          | boolean       |                                              |         |
-| closeIcon   | Custom close icon                                                    | slot          | `<CloseOutlined />`                          | 3.0     |
-| closeText   | Close text to show                                                   | string\|slot  | -                                            |         |
-| description | Additional content of Alert                                          | string\|slot  | -                                            |         |
-| icon        | Custom icon, effective when `showIcon` is `true`                     | vnode \| slot | -                                            |         |
-| message     | Content of Alert                                                     | string\|slot  | -                                            |         |
-| showIcon    | Whether to show icon                                                 | boolean       | false,in `banner` mode default is true       |         |
-| type        | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string        | `info`,in `banner` mode default is `warning` |         |
-
-### events
-
-| Events Name | Description                   | Arguments               | Version |
-| ----------- | ----------------------------- | ----------------------- | ------- |
-| close       | Callback when Alert is closed | (e: MouseEvent) => void | -       |