@antsoo-lib/components 0.1.2 → 0.1.4

package/src/float-button/FloatButton.tsx

@@ -0,0 +1,105 @@
+import { computed, defineComponent, ref } from 'vue'
+
+import classNames from '../_util/classNames'
+import { initDefaultProps } from '../_util/props-util'
+import warning from '../_util/warning'
+import Badge from '../badge'
+import useConfigInject from '../config-provider/hooks/useConfigInject'
+import Tooltip from '../tooltip'
+import Content from './FloatButtonContent'
+import { useInjectFloatButtonGroupContext } from './context'
+import { floatButtonProps } from './interface'
+// import { useCompactItemContext } from '../space/Compact';
+
+// CSSINJS
+import useStyle from './style'
+
+export const floatButtonPrefixCls = 'float-btn'
+
+const FloatButton = defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'AFloatButton',
+  inheritAttrs: false,
+  props: initDefaultProps(floatButtonProps(), { type: 'default', shape: 'circle' }),
+  setup(props, { attrs, slots }) {
+    const { prefixCls, direction } = useConfigInject(floatButtonPrefixCls, props)
+    const [wrapSSR, hashId] = useStyle(prefixCls)
+    const { shape: groupShape } = useInjectFloatButtonGroupContext()
+
+    const floatButtonRef = ref<HTMLAnchorElement | HTMLButtonElement>(null)
+
+    const mergeShape = computed(() => {
+      return groupShape?.value || props.shape
+    })
+
+    return () => {
+      const {
+        prefixCls: customPrefixCls,
+        type = 'default',
+        shape = 'circle',
+        description = slots.description?.(),
+        tooltip,
+        badge = {},
+        ...restProps
+      } = props
+
+      const classString = classNames(
+        prefixCls.value,
+        `${prefixCls.value}-${type}`,
+        `${prefixCls.value}-${mergeShape.value}`,
+        {
+          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+        },
+        attrs.class,
+        hashId.value,
+      )
+
+      const buttonNode = (
+        <Tooltip
+          placement="left"
+          v-slots={{
+            title:
+              slots.tooltip || tooltip
+                ? () => (slots.tooltip && slots.tooltip()) || tooltip
+                : undefined,
+            default: () => (
+              <Badge {...badge}>
+                <div class={`${prefixCls.value}-body`}>
+                  <Content
+                    prefixCls={prefixCls.value}
+                    v-slots={{
+                      icon: slots.icon,
+                      description: () => description,
+                    }}
+                  ></Content>
+                </div>
+              </Badge>
+            ),
+          }}
+        ></Tooltip>
+      )
+
+      if (process.env.NODE_ENV !== 'production') {
+        warning(
+          !(shape === 'circle' && description),
+          'FloatButton',
+          'supported only when `shape` is `square`. Due to narrow space for text, short sentence is recommended.',
+        )
+      }
+
+      return wrapSSR(
+        props.href ? (
+          <a ref={floatButtonRef} {...attrs} {...(restProps as any)} class={classString}>
+            {buttonNode}
+          </a>
+        ) : (
+          <button ref={floatButtonRef} {...attrs} {...restProps} class={classString} type="button">
+            {buttonNode}
+          </button>
+        ),
+      )
+    }
+  },
+})
+
+export default FloatButton

package/src/float-button/FloatButtonContent.tsx

@@ -0,0 +1,38 @@
+import FileTextOutlined from '@ant-design/icons-vue/FileTextOutlined'
+
+import { defineComponent } from 'vue'
+
+import { filterEmpty } from '../_util/props-util'
+import { floatButtonContentProps } from './interface'
+
+const FloatButtonContent = defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'AFloatButtonContent',
+  inheritAttrs: false,
+  props: floatButtonContentProps(),
+  setup(props, { attrs, slots }) {
+    return () => {
+      const { prefixCls } = props
+      const description = filterEmpty(slots.description?.())
+
+      return (
+        <div {...attrs} class={[attrs.class, `${prefixCls}-content`]}>
+          {slots.icon || description.length ? (
+            <>
+              {slots.icon && <div class={`${prefixCls}-icon`}>{slots.icon()}</div>}
+              {description.length ? (
+                <div class={`${prefixCls}-description`}>{description}</div>
+              ) : null}
+            </>
+          ) : (
+            <div class={`${prefixCls}-icon`}>
+              <FileTextOutlined />
+            </div>
+          )}
+        </div>
+      )
+    }
+  },
+})
+
+export default FloatButtonContent

package/src/float-button/FloatButtonGroup.tsx

@@ -0,0 +1,142 @@
+import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'
+import FileTextOutlined from '@ant-design/icons-vue/FileTextOutlined'
+
+import { Transition, computed, defineComponent, onBeforeUnmount, ref, watch } from 'vue'
+
+import canUseDom from '../_util/canUseDom'
+import classNames from '../_util/classNames'
+import useMergedState from '../_util/hooks/useMergedState'
+import { findDOMNode, initDefaultProps } from '../_util/props-util'
+import { getTransitionProps } from '../_util/transition'
+import useConfigInject from '../config-provider/hooks/useConfigInject'
+import FloatButton, { floatButtonPrefixCls } from './FloatButton'
+import { useProvideFloatButtonGroupContext } from './context'
+import { floatButtonGroupProps } from './interface'
+import type { FloatButtonGroupProps } from './interface'
+// CSSINJS
+import useStyle from './style'
+
+const FloatButtonGroup = defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'AFloatButtonGroup',
+  inheritAttrs: false,
+  props: initDefaultProps(floatButtonGroupProps(), {
+    type: 'default',
+    shape: 'circle',
+  } as FloatButtonGroupProps),
+  setup(props, { attrs, slots, emit }) {
+    const { prefixCls, direction } = useConfigInject(floatButtonPrefixCls, props)
+
+    // style
+    const [wrapSSR, hashId] = useStyle(prefixCls)
+
+    const [open, setOpen] = useMergedState(false, { value: computed(() => props.open) })
+
+    const floatButtonGroupRef = ref<HTMLDivElement>(null)
+    const floatButtonRef = ref<HTMLButtonElement | HTMLAnchorElement>(null)
+
+    useProvideFloatButtonGroupContext({
+      shape: computed(() => props.shape),
+    })
+    const hoverTypeAction = {
+      onMouseenter() {
+        setOpen(true)
+        emit('update:open', true)
+        props.onOpenChange?.(true)
+      },
+      onMouseleave() {
+        setOpen(false)
+        emit('update:open', false)
+        props.onOpenChange?.(false)
+      },
+    }
+    const hoverAction = computed(() => {
+      return props.trigger === 'hover' ? hoverTypeAction : {}
+    })
+
+    const handleOpenChange = () => {
+      const nextOpen = !open.value
+      emit('update:open', nextOpen)
+      props.onOpenChange?.(nextOpen)
+      setOpen(nextOpen)
+    }
+
+    const onClick = (e: MouseEvent) => {
+      if (floatButtonGroupRef.value?.contains(e.target as Node)) {
+        if (findDOMNode(floatButtonRef.value)?.contains(e.target as Node)) {
+          handleOpenChange()
+        }
+        return
+      }
+      setOpen(false)
+      emit('update:open', false)
+      props.onOpenChange?.(false)
+    }
+
+    watch(
+      computed(() => props.trigger),
+      (value) => {
+        if (!canUseDom()) {
+          return
+        }
+        document.removeEventListener('click', onClick)
+        if (value === 'click') {
+          document.addEventListener('click', onClick)
+        }
+      },
+      { immediate: true },
+    )
+    onBeforeUnmount(() => {
+      document.removeEventListener('click', onClick)
+    })
+
+    return () => {
+      const { shape = 'circle', type = 'default', tooltip, description, trigger } = props
+
+      const groupPrefixCls = `${prefixCls.value}-group`
+
+      const groupCls = classNames(groupPrefixCls, hashId.value, attrs.class, {
+        [`${groupPrefixCls}-rtl`]: direction.value === 'rtl',
+        [`${groupPrefixCls}-${shape}`]: shape,
+        [`${groupPrefixCls}-${shape}-shadow`]: !trigger,
+      })
+
+      const wrapperCls = classNames(hashId.value, `${groupPrefixCls}-wrap`)
+
+      const transitionProps = getTransitionProps(`${groupPrefixCls}-wrap`)
+
+      return wrapSSR(
+        <div ref={floatButtonGroupRef} {...attrs} class={groupCls} {...hoverAction.value}>
+          {trigger && ['click', 'hover'].includes(trigger) ? (
+            <>
+              <Transition {...transitionProps}>
+                <div v-show={open.value} class={wrapperCls}>
+                  {slots.default && slots.default()}
+                </div>
+              </Transition>
+              <FloatButton
+                ref={floatButtonRef}
+                type={type}
+                shape={shape}
+                tooltip={tooltip}
+                description={description}
+                v-slots={{
+                  icon: () =>
+                    open.value
+                      ? slots.closeIcon?.() || <CloseOutlined />
+                      : slots.icon?.() || <FileTextOutlined />,
+                  tooltip: slots.tooltip,
+                  description: slots.description,
+                }}
+              ></FloatButton>
+            </>
+          ) : (
+            slots.default?.()
+          )}
+        </div>,
+      )
+    }
+  },
+})
+
+export default FloatButtonGroup

package/src/float-button/context.ts

@@ -0,0 +1,19 @@
+import type { InjectionKey, Ref } from 'vue'
+import { inject, provide, ref } from 'vue'
+
+import type { FloatButtonShape } from './interface'
+
+interface FloatButtonGroupContext {
+  shape: Ref<FloatButtonShape>
+}
+const contextKey: InjectionKey<FloatButtonGroupContext> = Symbol('floatButtonGroupContext')
+
+export const useProvideFloatButtonGroupContext = (props: FloatButtonGroupContext) => {
+  provide(contextKey, props)
+
+  return props
+}
+
+export const useInjectFloatButtonGroupContext = () => {
+  return inject(contextKey, { shape: ref() } as FloatButtonGroupContext)
+}

package/src/float-button/index.en-US.md

@@ -0,0 +1,60 @@
+---
+category: Components
+type: Other
+title: FloatButton
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HS-wTIIwu0kAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a0hwTY_rOSUAAAAAAAAAAAAADrJ8AQ/original
+tag: New
+---
+
+FloatButton. Available since `4.0.0`.
+
+## When To Use
+
+- For global functionality on the site.
+- Buttons that can be seen wherever you browse.
+
+## API
+
+> This component is available since `ant-design-vue@4.0.0`.
+
+### common API
+
+| Property    | Description                                                                      | Type                                | Default   | Version |
+| ----------- | -------------------------------------------------------------------------------- | ----------------------------------- | --------- | ------- |
+| icon        | Set the icon component of button                                                 | slot                                | -         |         |
+| description | Text and other                                                                   | string \| slot                      | -         |         |
+| tooltip     | The text shown in the tooltip                                                    | string \| slot                      |           |         |
+| type        | Setting button type                                                              | `default` \| `primary`              | `default` |         |
+| shape       | Setting button shape                                                             | `circle` \| `square`                | `circle`  |         |
+| href        | The target of hyperlink                                                          | string                              | -         |         |
+| target      | Specifies where to display the linked URL                                        | string                              | -         |         |
+| badge       | Attach Badge to FloatButton. `status` and other props related are not supported. | [BadgeProps](/components/badge#api) | -         |         |
+
+### common events
+
+| Events Name | Description                             | Arguments         | Version |
+| ----------- | --------------------------------------- | ----------------- | ------- |
+| click       | Set the handler to handle `click` event | `(event) => void` | -       |
+
+### FloatButton.Group
+
+| Property      | Description                              | Type                 | Default  | Version |
+| ------------- | ---------------------------------------- | -------------------- | -------- | ------- |
+| shape         | Setting button shape of children         | `circle` \| `square` | `circle` |         |
+| trigger       | Which action can trigger menu open/close | `click` \| `hover`   | -        |         |
+| open(v-model) | Whether the menu is visible or not       | boolean              | -        |         |
+
+### FloatButton.Group Events
+
+| Events Name | Description                                   | Arguments               | Version |
+| ----------- | --------------------------------------------- | ----------------------- | ------- |
+| openChange  | Callback executed when active menu is changed | (open: boolean) => void | -       |
+
+### FloatButton.BackTop
+
+| Property         | Description                                                                 | Type              | Default      | Version |
+| ---------------- | --------------------------------------------------------------------------- | ----------------- | ------------ | ------- |
+| duration         | Time to return to top（ms）                                                 | number            | 450          |         |
+| target           | Specifies the scrollable area dom node                                      | () => HTMLElement | () => window |         |
+| visibilityHeight | The BackTop button will not show until the scroll height reaches this value | number            | 400          |         |

package/src/float-button/index.ts

@@ -0,0 +1,41 @@
+import type { App, Plugin } from 'vue'
+
+import type { SizeType as FloatButtonSize } from '../config-provider'
+import BackTop from './BackTop'
+import FloatButton from './FloatButton'
+import FloatButtonGroup from './FloatButtonGroup'
+import type {
+  BackTopProps,
+  FloatButtonGroupProps,
+  FloatButtonProps,
+  FloatButtonShape,
+  FloatButtonType,
+} from './interface'
+
+export type {
+  BackTopProps,
+  FloatButtonGroupProps,
+  FloatButtonProps,
+  FloatButtonShape,
+  FloatButtonSize,
+  FloatButtonType,
+}
+
+FloatButton.Group = FloatButtonGroup
+FloatButton.BackTop = BackTop
+
+/* istanbul ignore next */
+FloatButton.install = function (app: App) {
+  app.component(FloatButton.name, FloatButton)
+  app.component(FloatButtonGroup.name, FloatButtonGroup)
+  app.component(BackTop.name, BackTop)
+  return app
+}
+
+export { BackTop, FloatButtonGroup }
+
+export default FloatButton as typeof FloatButton &
+  Plugin & {
+    readonly Group: typeof FloatButtonGroup
+    readonly BackTop: typeof BackTop
+  }

package/src/float-button/index.zh-CN.md

@@ -0,0 +1,63 @@
+---
+category: Components
+subtitle: 悬浮按钮
+type: 其他
+title: FloatButton
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HS-wTIIwu0kAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a0hwTY_rOSUAAAAAAAAAAAAADrJ8AQ/original
+tag: New
+---
+
+悬浮按钮。自 `4.0.0` 版本开始提供该组件。
+
+## 何时使用
+
+- 用于网站上的全局功能；
+- 无论浏览到何处都可以看见的按钮。
+
+## API
+
+> 自 `ant-design-vue@4.0.0` 版本开始提供该组件。
+
+### 共同的 API
+
+| 参数        | 说明                                                  | 类型                                   | 默认值    | 版本 |
+| ----------- | ----------------------------------------------------- | -------------------------------------- | --------- | ---- |
+| icon        | 自定义图标                                            | slot                                   | -         |      |
+| description | 文字及其它内容                                        | string \| slot                         | -         |      |
+| tooltip     | 气泡卡片的内容                                        | string \| slot                         | -         |      |
+| type        | 设置按钮类型                                          | `default` \| `primary`                 | `default` |      |
+| shape       | 设置按钮形状                                          | `circle` \| `square`                   | `circle`  |      |
+| onClick     | 点击按钮时的回调                                      | (event) => void                        | -         |      |
+| href        | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string                                 | -         |      |
+| target      | 相当于 a 标签的 target 属性，href 存在时生效          | string                                 | -         |      |
+| badge       | 带徽标数字的悬浮按钮（不支持 status 以及相关属性）    | [BadgeProps](/components/badge-cn#api) | -         |      |
+
+### 共同的事件
+
+| 事件名称 | 说明                          | 回调参数          | 版本 |
+| -------- | ----------------------------- | ----------------- | ---- |
+| click    | 设置处理 `click` 事件的处理器 | `(event) => void` | -    |
+
+### FloatButton.Group
+
+| 参数          | 说明                             | 类型                 | 默认值   | 版本 |
+| ------------- | -------------------------------- | -------------------- | -------- | ---- |
+| shape         | 设置包含的 FloatButton 按钮形状  | `circle` \| `square` | `circle` |      |
+| trigger       | 触发方式（有触发方式为菜单模式） | `click` \| `hover`   | -        |      |
+| open(v-model) | 受控展开                         | boolean              | -        |      |
+
+### FloatButton.Group 事件
+
+| 事件名称   | 说明             | 回调参数                | 版本 |
+| ---------- | ---------------- | ----------------------- | ---- |
+| openChange | 展开收起时的回调 | (open: boolean) => void | -    |
+
+### FloatButton.BackTop
+
+| 参数             | 说明                               | 类型              | 默认值       | 版本 |
+| ---------------- | ---------------------------------- | ----------------- | ------------ | ---- |
+| duration         | 回到顶部所需时间（ms）             | number            | 450          |      |
+| target           | 设置需要监听其滚动事件的元素       | () => HTMLElement | () => window |      |
+| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number            | 400          |      |
+| onClick          | 点击按钮的回调函数                 | () => void        | -            |      |

package/src/float-button/interface.ts

@@ -0,0 +1,71 @@
+import type { ExtractPropTypes } from 'vue'
+
+import type { MouseEventHandler } from '../_util/EventInterface'
+import { booleanType, functionType, objectType, stringType } from '../_util/type'
+import PropTypes from '../_util/vue-types'
+import type { BadgeProps } from '../badge'
+
+export type FloatButtonType = 'default' | 'primary'
+
+export type FloatButtonShape = 'circle' | 'square'
+
+export type FloatButtonGroupTrigger = 'click' | 'hover'
+
+export type FloatButtonBadgeProps = Omit<BadgeProps, 'status' | 'text' | 'title' | 'children'>
+
+export const floatButtonProps = () => {
+  return {
+    prefixCls: String,
+    description: PropTypes.any,
+    type: stringType<FloatButtonType>('default'),
+    shape: stringType<FloatButtonShape>('circle'),
+    tooltip: PropTypes.any,
+    href: String,
+    target: String,
+    badge: objectType<FloatButtonBadgeProps>(),
+    onClick: functionType<MouseEventHandler>(),
+  }
+}
+
+export type FloatButtonProps = Partial<ExtractPropTypes<ReturnType<typeof floatButtonProps>>>
+
+export const floatButtonContentProps = () => {
+  return {
+    prefixCls: stringType<FloatButtonProps['prefixCls']>(),
+  }
+}
+
+export type FloatButtonContentProps = Partial<
+  ExtractPropTypes<ReturnType<typeof floatButtonContentProps>>
+>
+
+export const floatButtonGroupProps = () => {
+  return {
+    ...floatButtonProps(),
+    // 包含的 Float Button
+    // 触发方式 (有触发方式为菜单模式）
+    trigger: stringType<FloatButtonGroupTrigger>(),
+    // 受控展开
+    open: booleanType(),
+    // 展开收起的回调
+    onOpenChange: functionType<(open: boolean) => void>(),
+    'onUpdate:open': functionType<(open: boolean) => void>(),
+  }
+}
+
+export type FloatButtonGroupProps = Partial<
+  ExtractPropTypes<ReturnType<typeof floatButtonGroupProps>>
+>
+
+export const backTopProps = () => {
+  return {
+    ...floatButtonProps(),
+    prefixCls: String,
+    duration: Number,
+    target: functionType<() => HTMLElement | Window | Document>(),
+    visibilityHeight: Number,
+    onClick: functionType<MouseEventHandler>(),
+  }
+}
+
+export type BackTopProps = Partial<ExtractPropTypes<ReturnType<typeof backTopProps>>>