@antsoo-lib/components 0.1.2 → 0.1.4

package/src/_util/wave/util.ts

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

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

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

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

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

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

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