@antsoo-lib/components 0.1.11 → 0.1.12

package/src/anchor/Anchor.tsx

@@ -1,331 +0,0 @@
-import scrollIntoView from 'scroll-into-view-if-needed'
-
-import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'
-import {
-  computed,
-  defineComponent,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  onUpdated,
-  reactive,
-  ref,
-} from 'vue'
-
-import classNames from '../_util/classNames'
-import getScroll from '../_util/getScroll'
-import scrollTo from '../_util/scrollTo'
-import { arrayType } from '../_util/type'
-import PropTypes from '../_util/vue-types'
-import Affix from '../affix'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import addEventListener from '../vc-util/Dom/addEventListener'
-import devWarning from '../vc-util/devWarning'
-import type { AnchorLinkItemProps } from './AnchorLink'
-import AnchorLink from './AnchorLink'
-import useProvideAnchor from './context'
-import useStyle from './style'
-
-export type AnchorDirection = 'vertical' | 'horizontal'
-
-function getDefaultContainer() {
-  return window
-}
-
-function getOffsetTop(element: HTMLElement, container: AnchorContainer): number {
-  if (!element.getClientRects().length) {
-    return 0
-  }
-
-  const rect = element.getBoundingClientRect()
-
-  if (rect.width || rect.height) {
-    if (container === window) {
-      container = element.ownerDocument!.documentElement!
-      return rect.top - container.clientTop
-    }
-    return rect.top - (container as HTMLElement).getBoundingClientRect().top
-  }
-
-  return rect.top
-}
-
-const sharpMatcherRegx = /#([\S ]+)$/
-
-interface Section {
-  link: string
-  top: number
-}
-
-export type AnchorContainer = HTMLElement | Window
-
-export const anchorProps = () => ({
-  prefixCls: String,
-  offsetTop: Number,
-  bounds: Number,
-  affix: { type: Boolean, default: true },
-  showInkInFixed: { type: Boolean, default: false },
-  getContainer: Function as PropType<() => AnchorContainer>,
-  wrapperClass: String,
-  wrapperStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
-  getCurrentAnchor: Function as PropType<(activeLink: string) => string>,
-  targetOffset: Number,
-  items: arrayType<AnchorLinkItemProps[]>(),
-  direction: PropTypes.oneOf(['vertical', 'horizontal'] as AnchorDirection[]).def('vertical'),
-  onChange: Function as PropType<(currentActiveLink: string) => void>,
-  onClick: Function as PropType<(e: MouseEvent, link: { title: any; href: string }) => void>,
-})
-
-export type AnchorProps = Partial<ExtractPropTypes<ReturnType<typeof anchorProps>>>
-
-export interface AnchorState {
-  scrollContainer: HTMLElement | Window
-  links: string[]
-  scrollEvent: any
-  animating: boolean
-}
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'AAnchor',
-  inheritAttrs: false,
-  props: anchorProps(),
-  setup(props, { emit, attrs, slots, expose }) {
-    const { prefixCls, getTargetContainer, direction } = useConfigInject('anchor', props)
-    const anchorDirection = computed(() => props.direction ?? 'vertical')
-
-    if (process.env.NODE_ENV !== 'production') {
-      devWarning(
-        props.items && typeof slots.default !== 'function',
-        'Anchor',
-        '`Anchor children` is deprecated. Please use `items` instead.',
-      )
-    }
-
-    if (process.env.NODE_ENV !== 'production') {
-      devWarning(
-        !(anchorDirection.value === 'horizontal' && props.items?.some((n) => 'children' in n)),
-        'Anchor',
-        '`Anchor items#children` is not supported when `Anchor` direction is horizontal.',
-      )
-    }
-
-    const spanLinkNode = ref<HTMLSpanElement>(null)
-    const anchorRef = ref()
-    const state = reactive<AnchorState>({
-      links: [],
-      scrollContainer: null,
-      scrollEvent: null,
-      animating: false,
-    })
-    const activeLink = ref(null)
-    const getContainer = computed(() => {
-      const { getContainer } = props
-      return getContainer || getTargetContainer?.value || getDefaultContainer
-    })
-    // func...
-    const getCurrentAnchor = (offsetTop = 0, bounds = 5) => {
-      const linkSections: Array<Section> = []
-      const container = getContainer.value()
-      state.links.forEach((link) => {
-        const sharpLinkMatch = sharpMatcherRegx.exec(link.toString())
-        if (!sharpLinkMatch) {
-          return
-        }
-        const target = document.getElementById(sharpLinkMatch[1])
-        if (target) {
-          const top = getOffsetTop(target, container)
-          if (top < offsetTop + bounds) {
-            linkSections.push({
-              link,
-              top,
-            })
-          }
-        }
-      })
-
-      if (linkSections.length) {
-        const maxSection = linkSections.reduce((prev, curr) => (curr.top > prev.top ? curr : prev))
-        return maxSection.link
-      }
-      return ''
-    }
-    const setCurrentActiveLink = (link: string) => {
-      const { getCurrentAnchor } = props
-      if (activeLink.value === link) {
-        return
-      }
-      activeLink.value = typeof getCurrentAnchor === 'function' ? getCurrentAnchor(link) : link
-      emit('change', link)
-    }
-    const handleScrollTo = (link: string) => {
-      const { offsetTop, targetOffset } = props
-
-      setCurrentActiveLink(link)
-      const sharpLinkMatch = sharpMatcherRegx.exec(link)
-      if (!sharpLinkMatch) {
-        return
-      }
-      const targetElement = document.getElementById(sharpLinkMatch[1])
-      if (!targetElement) {
-        return
-      }
-
-      const container = getContainer.value()
-      const scrollTop = getScroll(container, true)
-      const eleOffsetTop = getOffsetTop(targetElement, container)
-      let y = scrollTop + eleOffsetTop
-      y -= targetOffset !== undefined ? targetOffset : offsetTop || 0
-      state.animating = true
-
-      scrollTo(y, {
-        callback: () => {
-          state.animating = false
-        },
-        getContainer: getContainer.value,
-      })
-    }
-    expose({
-      scrollTo: handleScrollTo,
-    })
-    const handleScroll = () => {
-      if (state.animating) {
-        return
-      }
-      const { offsetTop, bounds, targetOffset } = props
-      const currentActiveLink = getCurrentAnchor(
-        targetOffset !== undefined ? targetOffset : offsetTop || 0,
-        bounds,
-      )
-      setCurrentActiveLink(currentActiveLink)
-    }
-
-    const updateInk = () => {
-      const linkNode = anchorRef.value.querySelector(`.${prefixCls.value}-link-title-active`)
-      if (linkNode && spanLinkNode.value) {
-        const horizontalAnchor = anchorDirection.value === 'horizontal'
-        spanLinkNode.value.style.top = horizontalAnchor
-          ? ''
-          : `${linkNode.offsetTop + linkNode.clientHeight / 2}px`
-        spanLinkNode.value.style.height = horizontalAnchor ? '' : `${linkNode.clientHeight}px`
-        spanLinkNode.value.style.left = horizontalAnchor ? `${linkNode.offsetLeft}px` : ''
-        spanLinkNode.value.style.width = horizontalAnchor ? `${linkNode.clientWidth}px` : ''
-        if (horizontalAnchor) {
-          scrollIntoView(linkNode, {
-            scrollMode: 'if-needed',
-            block: 'nearest',
-          })
-        }
-      }
-    }
-
-    useProvideAnchor({
-      registerLink: (link: string) => {
-        if (!state.links.includes(link)) {
-          state.links.push(link)
-        }
-      },
-      unregisterLink: (link: string) => {
-        const index = state.links.indexOf(link)
-        if (index !== -1) {
-          state.links.splice(index, 1)
-        }
-      },
-      activeLink,
-      scrollTo: handleScrollTo,
-      handleClick: (e, info) => {
-        emit('click', e, info)
-      },
-      direction: anchorDirection,
-    })
-
-    onMounted(() => {
-      nextTick(() => {
-        const container = getContainer.value()
-        state.scrollContainer = container
-        state.scrollEvent = addEventListener(state.scrollContainer, 'scroll', handleScroll)
-        handleScroll()
-      })
-    })
-    onBeforeUnmount(() => {
-      if (state.scrollEvent) {
-        state.scrollEvent.remove()
-      }
-    })
-    onUpdated(() => {
-      if (state.scrollEvent) {
-        const currentContainer = getContainer.value()
-        if (state.scrollContainer !== currentContainer) {
-          state.scrollContainer = currentContainer
-          state.scrollEvent.remove()
-          state.scrollEvent = addEventListener(state.scrollContainer, 'scroll', handleScroll)
-          handleScroll()
-        }
-      }
-      updateInk()
-    })
-
-    const createNestedLink = (options?: AnchorLinkItemProps[]) =>
-      Array.isArray(options)
-        ? options.map((option) => {
-            const { children, key, href, target, class: cls, style, title } = option
-            return (
-              <AnchorLink
-                key={key}
-                href={href}
-                target={target}
-                class={cls}
-                style={style}
-                title={title}
-                customTitleProps={option}
-                v-slots={{ customTitle: slots.customTitle }}
-              >
-                {anchorDirection.value === 'vertical' ? createNestedLink(children) : null}
-              </AnchorLink>
-            )
-          })
-        : null
-
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-
-    return () => {
-      const { offsetTop, affix, showInkInFixed } = props
-      const pre = prefixCls.value
-      const inkClass = classNames(`${pre}-ink`, {
-        [`${pre}-ink-visible`]: activeLink.value,
-      })
-
-      const wrapperClass = classNames(hashId.value, props.wrapperClass, `${pre}-wrapper`, {
-        [`${pre}-wrapper-horizontal`]: anchorDirection.value === 'horizontal',
-        [`${pre}-rtl`]: direction.value === 'rtl',
-      })
-
-      const anchorClass = classNames(pre, {
-        [`${pre}-fixed`]: !affix && !showInkInFixed,
-      })
-
-      const wrapperStyle = {
-        maxHeight: offsetTop ? `calc(100vh - ${offsetTop}px)` : '100vh',
-        ...props.wrapperStyle,
-      }
-      const anchorContent = (
-        <div class={wrapperClass} style={wrapperStyle} ref={anchorRef}>
-          <div class={anchorClass}>
-            <span class={inkClass} ref={spanLinkNode} />
-            {Array.isArray(props.items) ? createNestedLink(props.items) : slots.default?.()}
-          </div>
-        </div>
-      )
-
-      return wrapSSR(
-        !affix ? (
-          anchorContent
-        ) : (
-          <Affix {...attrs} offsetTop={offsetTop} target={getContainer.value}>
-            {anchorContent}
-          </Affix>
-        ),
-      )
-    }
-  },
-})

package/src/anchor/AnchorLink.tsx

@@ -1,108 +0,0 @@
-import type { ExtractPropTypes } from 'vue'
-import { defineComponent, nextTick, onBeforeUnmount, onMounted, watch } from 'vue'
-
-import classNames from '../_util/classNames'
-import type { CSSProperties } from '../_util/cssinjs/hooks/useStyleRegister'
-import { initDefaultProps } from '../_util/props-util'
-import type { CustomSlotsType, Key, VueNode } from '../_util/type'
-import { anyType, objectType } from '../_util/type'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import { useInjectAnchor } from './context'
-
-export const anchorLinkProps = () => ({
-  prefixCls: String,
-  href: String,
-  title: anyType<VueNode | ((item: any) => VueNode)>(),
-  target: String,
-  /* private use  */
-  customTitleProps: objectType<AnchorLinkItemProps>(),
-})
-export interface AnchorLinkItemProps {
-  key: Key
-  class?: string
-  style?: CSSProperties
-  href?: string
-  target?: string
-  children?: AnchorLinkItemProps[]
-  title?: VueNode | ((item: AnchorLinkItemProps) => VueNode)
-}
-
-export type AnchorLinkProps = Partial<ExtractPropTypes<ReturnType<typeof anchorLinkProps>>>
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'AAnchorLink',
-  inheritAttrs: false,
-  props: initDefaultProps(anchorLinkProps(), { href: '#' }),
-  slots: Object as CustomSlotsType<{
-    title: any
-    default: any
-    customTitle: any
-  }>,
-  setup(props, { slots, attrs }) {
-    let mergedTitle = null
-    const {
-      handleClick: contextHandleClick,
-      scrollTo,
-      unregisterLink,
-      registerLink,
-      activeLink,
-    } = useInjectAnchor()
-    const { prefixCls } = useConfigInject('anchor', props)
-
-    const handleClick = (e: Event) => {
-      const { href } = props
-      contextHandleClick(e, { title: mergedTitle, href })
-      scrollTo(href)
-    }
-
-    watch(
-      () => props.href,
-      (val, oldVal) => {
-        nextTick(() => {
-          unregisterLink(oldVal)
-          registerLink(val)
-        })
-      },
-    )
-
-    onMounted(() => {
-      registerLink(props.href)
-    })
-
-    onBeforeUnmount(() => {
-      unregisterLink(props.href)
-    })
-
-    return () => {
-      const { href, target, title = slots.title, customTitleProps = {} } = props
-      const pre = prefixCls.value
-      mergedTitle = typeof title === 'function' ? title(customTitleProps) : title
-      const active = activeLink.value === href
-      const wrapperClassName = classNames(
-        `${pre}-link`,
-        {
-          [`${pre}-link-active`]: active,
-        },
-        attrs.class,
-      )
-      const titleClassName = classNames(`${pre}-link-title`, {
-        [`${pre}-link-title-active`]: active,
-      })
-      return (
-        <div {...attrs} class={wrapperClassName}>
-          <a
-            class={titleClassName}
-            href={href}
-            title={typeof mergedTitle === 'string' ? mergedTitle : ''}
-            target={target}
-            onClick={handleClick}
-          >
-            {slots.customTitle ? slots.customTitle(customTitleProps) : mergedTitle}
-          </a>
-          {slots.default?.()}
-        </div>
-      )
-    }
-  },
-})

package/src/anchor/context.ts

@@ -1,36 +0,0 @@
-import type { ComputedRef, InjectionKey, Ref } from 'vue'
-import { computed, inject, provide } from 'vue'
-
-import type { AnchorDirection } from './Anchor'
-
-export interface AnchorContext {
-  registerLink: (link: string) => void
-  unregisterLink: (link: string) => void
-  activeLink: Ref<string>
-  scrollTo: (link: string) => void
-  handleClick: (e: Event, info: { title: any; href: string }) => void
-  direction: ComputedRef<AnchorDirection>
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function noop(..._any: any[]): any {}
-
-export const AnchorContextKey: InjectionKey<AnchorContext> = Symbol('anchorContextKey')
-
-const useProvideAnchor = (state: AnchorContext) => {
-  provide(AnchorContextKey, state)
-}
-
-const useInjectAnchor = () => {
-  return inject(AnchorContextKey, {
-    registerLink: noop,
-    unregisterLink: noop,
-    scrollTo: noop,
-    activeLink: computed(() => ''),
-    handleClick: noop,
-    direction: computed(() => 'vertical'),
-  } as AnchorContext)
-}
-
-export { useInjectAnchor, useProvideAnchor }
-export default useProvideAnchor

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

@@ -1,59 +0,0 @@
----
-category: Components
-type: Navigation
-cols: 1
-title: Anchor
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*TBTSR4PyVmkAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JGb3RIzyOCkAAAAAAAAAAAAADrJ8AQ/original
----
-
-Hyperlinks to scroll on one page.
-
-## When To Use
-
-For displaying anchor hyperlinks on page and jumping between them.
-
-## API
-
-### Anchor Props
-
-| Property         | Description                                                                                   | Type                                                         | Default      | Version         |
-| ---------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ------------ | --------------- |
-| affix            | Fixed mode of Anchor                                                                          | boolean                                                      | true         |                 |
-| bounds           | Bounding distance of anchor area                                                              | number                                                       | 5(px)        |                 |
-| getContainer     | Scrolling container                                                                           | () => HTMLElement                                            | () => window |                 |
-| getCurrentAnchor | Customize the anchor highlight                                                                | (activeLink: string) => string                               | -            | activeLink(3.3) |
-| offsetBottom     | Pixels to offset from bottom when calculating position of scroll                              | number                                                       | -            |                 |
-| offsetTop        | Pixels to offset from top when calculating position of scroll                                 | number                                                       | 0            |                 |
-| showInkInFixed   | Whether show ink-square when `：affix="false"`                                                | boolean                                                      | false        |                 |
-| targetOffset     | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetoffset) | number                                                       | `offsetTop`  | 1.5.0           |
-| wrapperClass     | The class name of the container                                                               | string                                                       | -            |                 |
-| wrapperStyle     | The style of the container                                                                    | object                                                       | -            |                 |
-| items            | Data configuration option content, support nesting through children                           | { key, href, title, target, children }\[] [see](#anchoritem) | -            | 4.0             |
-| direction        | Set Anchor direction                                                                          | `vertical` \| `horizontal`                                   | `vertical`   | 4.0             |
-| customTitle      | custom option title by slot                                                                   | v-slot="AnchorItem"                                          | -            | 4.0             |
-
-### AnchorItem
-
-| Property | Description                                                                             | Type                                     | Default | Version |
-| -------- | --------------------------------------------------------------------------------------- | ---------------------------------------- | ------- | ------- |
-| key      | The unique identifier of the Anchor Link                                                | string \| number                         | -       |         |
-| href     | The target of hyperlink                                                                 | string                                   |         |         |
-| target   | Specifies where to display the linked URL                                               | string                                   |         |         |
-| title    | The content of hyperlink                                                                | VueNode \| (item: AnchorItem) => VueNode |         |         |
-| children | Nested Anchor Link, `Attention: This attribute does not support horizontal orientation` | [AnchorItem](#anchoritem)\[]             | -       |         |
-
-### Events
-
-| Events Name | Description                             | Arguments                             | Version |       |
-| ----------- | --------------------------------------- | ------------------------------------- | ------- | ----- |
-| change      | Listening for anchor link change        | (currentActiveLink: string) => void   |         | 1.5.0 |
-| click       | set the handler to handle `click` event | Function(e: MouseEvent, link: Object) |         |       |
-
-### Link Props
-
-| Property | Description                               | Type         | Default | Version |
-| -------- | ----------------------------------------- | ------------ | ------- | ------- |
-| href     | target of hyperlink                       | string       |         |         |
-| target   | Specifies where to display the linked URL | string       |         | 1.5.0   |
-| title    | content of hyperlink                      | string\|slot |         |         |

package/src/anchor/index.tsx

@@ -1,23 +0,0 @@
-import type { App, Plugin } from 'vue'
-
-import type { AnchorProps } from './Anchor'
-import Anchor from './Anchor'
-import type { AnchorLinkItemProps, AnchorLinkProps } from './AnchorLink'
-import AnchorLink from './AnchorLink'
-
-Anchor.Link = AnchorLink
-
-/* istanbul ignore next */
-Anchor.install = function (app: App) {
-  app.component(Anchor.name, Anchor)
-  app.component(Anchor.Link.name, Anchor.Link)
-  return app
-}
-
-export type { AnchorLinkItemProps, AnchorLinkProps, AnchorProps }
-export { AnchorLink, AnchorLink as Link }
-
-export default Anchor as typeof Anchor &
-  Plugin & {
-    readonly Link: typeof AnchorLink
-  }

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

@@ -1,60 +0,0 @@
----
-category: Components
-subtitle: 锚点
-cols: 1
-type: 导航
-title: Anchor
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*TBTSR4PyVmkAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JGb3RIzyOCkAAAAAAAAAAAAADrJ8AQ/original
----
-
-用于跳转到页面指定位置。
-
-## 何时使用
-
-需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
-
-## API
-
-### Anchor Props
-
-| 成员             | 说明                                                                                | 类型                                                            | 默认值       | 版本            |
-| ---------------- | ----------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------------ | --------------- |
-| affix            | 固定模式                                                                            | boolean                                                         | true         |                 |
-| bounds           | 锚点区域边界                                                                        | number                                                          | 5(px)        |                 |
-| getContainer     | 指定滚动的容器                                                                      | () => HTMLElement                                               | () => window |                 |
-| getCurrentAnchor | 自定义高亮的锚点                                                                    | (activeLink: string) => string                                  | -            | activeLink(3.3) |
-| offsetBottom     | 距离窗口底部达到指定偏移量后触发                                                    | number                                                          |              |                 |
-| offsetTop        | 距离窗口顶部达到指定偏移量后触发                                                    | number                                                          |              |                 |
-| showInkInFixed   | `:affix="false"` 时是否显示小方块                                                   | boolean                                                         | false        |                 |
-| targetOffset     | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetoffset) | number                                                          | `offsetTop`  | 1.5.0           |
-| wrapperClass     | 容器的类名                                                                          | string                                                          | -            |                 |
-| wrapperStyle     | 容器样式                                                                            | object                                                          | -            |                 |
-| items            | 数据化配置选项内容，支持通过 children 嵌套                                          | { key, href, title, target, children }\[] [具体见](#anchoritem) | -            | 4.0             |
-| direction        | 设置导航方向                                                                        | `vertical` \| `horizontal`                                      | `vertical`   | 4.0             |
-| customTitle      | 使用插槽自定义选项 title                                                            | v-slot="AnchorItem"                                             | -            | 4.0             |
-
-### AnchorItem
-
-| 成员     | 说明                                             | 类型                                     | 默认值 | 版本 |
-| -------- | ------------------------------------------------ | ---------------------------------------- | ------ | ---- |
-| key      | 唯一标志                                         | string \| number                         | -      |      |
-| href     | 锚点链接                                         | string                                   | -      |      |
-| target   | 该属性指定在何处显示链接的资源                   | string                                   | -      |      |
-| title    | 文字内容                                         | VueNode \| (item: AnchorItem) => VueNode | -      |      |
-| children | 嵌套的 Anchor Link，`注意：水平方向该属性不支持` | [AnchorItem](#anchoritem)\[]             | -      |      |
-
-### 事件
-
-| 事件名称 | 说明                   | 回调参数                              | 版本 |       |
-| -------- | ---------------------- | ------------------------------------- | ---- | ----- |
-| change   | 监听锚点链接改变       | (currentActiveLink: string) => void   |      | 1.5.0 |
-| click    | `click` 事件的 handler | Function(e: MouseEvent, link: Object) |      |       |
-
-### Link Props
-
-| 成员   | 说明                             | 类型         | 默认值 | 版本  |
-| ------ | -------------------------------- | ------------ | ------ | ----- |
-| href   | 锚点链接                         | string       |        |       |
-| target | 该属性指定在何处显示链接的资源。 | string       |        | 1.5.0 |
-| title  | 文字内容                         | string\|slot |        |       |