@antsoo-lib/components 0.1.2 → 0.1.4

package/src/anchor/Anchor.tsx

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

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

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

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

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

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