@antsoo-lib/components 0.1.11 → 0.1.13

package/src/float-button/FloatButton.tsx

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

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

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

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

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

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

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

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