@antsoo-lib/components 0.1.2 → 0.1.4

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

@@ -0,0 +1,39 @@
+---
+category: Components
+type: 数据展示
+title: Empty
+subtitle: 空状态
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZdiZSLzEV0wAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*obM7S5lIxeMAAAAAAAAAAAAADrJ8AQ/original
+---
+
+空状态时的展示占位图。
+
+## 何时使用
+
+- 当目前没有数据时，用于显式的用户提示。
+- 初始化场景时的引导创建流程。
+
+## API
+
+```jsx
+<Empty>
+  <Button>创建</Button>
+</Empty>
+```
+
+| 参数        | 说明                                         | 类型             | 默认值 | 版本 |
+| ----------- | -------------------------------------------- | ---------------- | ------ | ---- |
+| description | 自定义描述内容                               | string \| v-slot | -      |      |
+| image       | 设置显示图片，为 string 时表示自定义图片地址 | string \| v-slot | false  |      |
+| imageStyle  | 图片样式                                     | CSSProperties    | -      |      |
+
+## 内置图片
+
+- Empty.PRESENTED_IMAGE_SIMPLE
+
+  <img src="https://user-images.githubusercontent.com/507615/54591679-b0ceb580-4a65-11e9-925c-ad15b4eae93d.png" height="35px" />
+
+- Empty.PRESENTED_IMAGE_DEFAULT
+
+  <img src="https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png" height="100px" />

package/src/empty/simple.tsx

@@ -0,0 +1,42 @@
+import { TinyColor } from '@ctrl/tinycolor'
+
+import { computed, defineComponent } from 'vue'
+
+import { useToken } from '../theme/internal'
+
+const Simple = defineComponent({
+  compatConfig: { MODE: 3 },
+  setup() {
+    const [, token] = useToken()
+
+    const color = computed(() => {
+      const { colorFill, colorFillTertiary, colorFillQuaternary, colorBgContainer } = token.value
+
+      return {
+        borderColor: new TinyColor(colorFill).onBackground(colorBgContainer).toHexString(),
+        shadowColor: new TinyColor(colorFillTertiary).onBackground(colorBgContainer).toHexString(),
+        contentColor: new TinyColor(colorFillQuaternary)
+          .onBackground(colorBgContainer)
+          .toHexString(),
+      }
+    })
+
+    return () => (
+      <svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
+        <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
+          <ellipse fill={color.value.shadowColor} cx="32" cy="33" rx="32" ry="7" />
+          <g fill-rule="nonzero" stroke={color.value.borderColor}>
+            <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" />
+            <path
+              d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+              fill={color.value.contentColor}
+            />
+          </g>
+        </g>
+      </svg>
+    )
+  },
+})
+
+Simple.PRESENTED_IMAGE_SIMPLE = true
+export default Simple

package/src/empty/style/index.ts

@@ -0,0 +1,80 @@
+import type { CSSObject } from '../../_util/cssinjs'
+import type { FullToken, GenerateStyle } from '../../theme/internal'
+import { genComponentStyleHook, mergeToken } from '../../theme/internal'
+
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {}
+
+interface EmptyToken extends FullToken<'Empty'> {
+  emptyImgCls: string
+  emptyImgHeight: number
+  emptyImgHeightSM: number
+  emptyImgHeightMD: number
+}
+
+// ============================== Shared ==============================
+const genSharedEmptyStyle: GenerateStyle<EmptyToken> = (token): CSSObject => {
+  const { componentCls, margin, marginXS, marginXL, fontSize, lineHeight } = token
+
+  return {
+    [componentCls]: {
+      marginInline: marginXS,
+      fontSize,
+      lineHeight,
+      textAlign: 'center',
+
+      // 原来 &-image 没有父子结构，现在为了外层承担我们的hashId，改成父子结果
+      [`${componentCls}-image`]: {
+        height: token.emptyImgHeight,
+        marginBottom: marginXS,
+        opacity: token.opacityImage,
+
+        img: {
+          height: '100%',
+        },
+
+        svg: {
+          height: '100%',
+          margin: 'auto',
+        },
+      },
+
+      // 原来 &-footer 没有父子结构，现在为了外层承担我们的hashId，改成父子结果
+      [`${componentCls}-footer`]: {
+        marginTop: margin,
+      },
+
+      '&-normal': {
+        marginBlock: marginXL,
+        color: token.colorTextDisabled,
+
+        [`${componentCls}-image`]: {
+          height: token.emptyImgHeightMD,
+        },
+      },
+
+      '&-small': {
+        marginBlock: marginXS,
+        color: token.colorTextDisabled,
+
+        [`${componentCls}-image`]: {
+          height: token.emptyImgHeightSM,
+        },
+      },
+    },
+  }
+}
+
+// ============================== Export ==============================
+export default genComponentStyleHook('Empty', (token) => {
+  const { componentCls, controlHeightLG } = token
+
+  const emptyToken: EmptyToken = mergeToken<EmptyToken>(token, {
+    emptyImgCls: `${componentCls}-img`,
+    emptyImgHeight: controlHeightLG * 2.5,
+    emptyImgHeightMD: controlHeightLG,
+    emptyImgHeightSM: controlHeightLG * 0.875,
+  })
+
+  return [genSharedEmptyStyle(emptyToken)]
+})

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

@@ -0,0 +1,32 @@
+---
+category: Components
+type: Layout
+title: Flex
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original
+tag: New
+---
+
+## When To Use
+
+- Good for setting spacing between elements.
+- Suitable for setting various horizontal and vertical alignments.
+
+### Difference with Space component
+
+- Space is used to set the spacing between inline elements. It will add a wrapper element for each child element for inline alignment. Suitable for equidistant arrangement of multiple child elements in rows and columns.
+- Flex is used to set the layout of block-level elements. It does not add a wrapper element. Suitable for layout of child elements in vertical or horizontal direction, and provides more flexibility and control.
+
+## API
+
+> This component is available since `ant-design-vue@4.0.7`. The default behavior of Flex in horizontal mode is to align upward, In vertical mode, aligns the stretch, You can adjust this via properties.
+
+| Property  | Description                                                                | type                                                                                          | Default | Version |
+| --------- | -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ------- | ------- |
+| vertical  | Is direction of the flex vertical, use `flex-direction: column`            | boolean                                                                                       | `false` |         |
+| wrap      | Set whether the element is displayed in a single line or in multiple lines | reference [flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap)             | nowrap  |         |
+| justify   | Sets the alignment of elements in the direction of the main axis           | reference [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) | normal  |         |
+| align     | Sets the alignment of elements in the direction of the cross axis          | reference [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)         | normal  |         |
+| flex      | flex CSS shorthand properties                                              | reference [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex)                       | normal  |         |
+| gap       | Sets the gap between grids                                                 | `small` \| `middle` \| `large` \| string \| number                                            | -       |         |
+| component | custom element type                                                        | Component                                                                                     | `div`   |         |

package/src/flex/index.tsx

@@ -0,0 +1,59 @@
+import { computed, defineComponent } from 'vue'
+import type { CSSProperties } from 'vue'
+
+import { isPresetSize } from '../_util/gapSize'
+import omit from '../_util/omit'
+import { withInstall } from '../_util/type'
+import { useConfigContextInject } from '../config-provider/context'
+import useConfigInject from '../config-provider/hooks/useConfigInject'
+import type { FlexProps } from './interface'
+import { flexProps } from './interface'
+import useStyle from './style'
+import createFlexClassNames from './utils'
+
+const AFlex = defineComponent({
+  name: 'AFlex',
+  inheritAttrs: false,
+  props: flexProps(),
+  setup(props, { slots, attrs }) {
+    const { flex: ctxFlex, direction: ctxDirection } = useConfigContextInject()
+    const { prefixCls } = useConfigInject('flex', props)
+    const [wrapSSR, hashId] = useStyle(prefixCls)
+    const mergedCls = computed(() => [
+      prefixCls.value,
+      hashId.value,
+      createFlexClassNames(prefixCls.value, props),
+      {
+        [`${prefixCls.value}-rtl`]: ctxDirection.value === 'rtl',
+        [`${prefixCls.value}-gap-${props.gap}`]: isPresetSize(props.gap),
+        [`${prefixCls.value}-vertical`]: props.vertical ?? ctxFlex?.value.vertical,
+      },
+    ])
+    return () => {
+      const { flex, gap, component: Component = 'div', ...othersProps } = props
+
+      const mergedStyle: CSSProperties = {}
+
+      if (flex) {
+        mergedStyle.flex = flex
+      }
+
+      if (gap && !isPresetSize(gap)) {
+        mergedStyle.gap = `${gap}px`
+      }
+
+      return wrapSSR(
+        <Component
+          class={[attrs.class, mergedCls.value]}
+          style={[attrs.style as CSSProperties, mergedStyle]}
+          {...omit(othersProps, ['justify', 'wrap', 'align', 'vertical'])}
+        >
+          {slots.default?.()}
+        </Component>,
+      )
+    }
+  },
+})
+
+export default withInstall(AFlex)
+export type { FlexProps }

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

@@ -0,0 +1,33 @@
+---
+category: Components
+subtitle: 弹性布局
+type: 布局
+title: Flex
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original
+tag: New
+---
+
+## 何时使用
+
+- 适合设置元素之间的间距。
+- 适合设置各种水平、垂直对齐方式。
+
+### 与 Space 组件的区别
+
+- Space 为内联元素提供间距，其本身会为每一个子元素添加包裹元素用于内联对齐。适用于行、列中多个子元素的等距排列。
+- Flex 为块级元素提供间距，其本身不会添加包裹元素。适用于垂直或水平方向上的子元素布局，并提供了更多的灵活性和控制能力。
+
+## API
+
+> 自 `ant-design-vue@4.0.7` 版本开始提供该组件。Flex 组件默认行为在水平模式下，为向上对齐，在垂直模式下，为拉伸对齐，你可以通过属性进行调整。
+
+| 属性      | 说明                                                   | 类型                                                                                     | 默认值  | 版本 |
+| --------- | ------------------------------------------------------ | ---------------------------------------------------------------------------------------- | ------- | ---- |
+| vertical  | flex 主轴的方向是否垂直，使用 `flex-direction: column` | boolean                                                                                  | `false` |
+| wrap      | 设置元素单行显示还是多行显示                           | 参考 [flex-wrap](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap)             | nowrap  |      |
+| justify   | 设置元素在主轴方向上的对齐方式                         | 参考 [justify-content](https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content) | normal  |      |
+| align     | 设置元素在交叉轴方向上的对齐方式                       | 参考 [align-items](https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items)         | normal  |      |
+| flex      | flex CSS 简写属性                                      | 参考 [flex](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex)                       | normal  |      |
+| gap       | 设置网格之间的间隙                                     | `small` \| `middle` \| `large` \| string \| number                                       | -       |      |
+| component | 自定义元素类型                                         | Component                                                                                | `div`   |      |

package/src/flex/interface.ts

@@ -0,0 +1,17 @@
+import type { CSSProperties, ExtractPropTypes } from 'vue'
+
+import { anyType, booleanType, someType, stringType } from '../_util/type'
+import type { SizeType } from '../config-provider/SizeContext'
+
+export const flexProps = () => ({
+  prefixCls: stringType(),
+  vertical: booleanType(),
+  wrap: stringType<CSSProperties['flex-wrap']>(),
+  justify: stringType<CSSProperties['justify-content']>(),
+  align: stringType<CSSProperties['align-items']>(),
+  flex: someType<CSSProperties['flex']>([Number, String]),
+  gap: someType<CSSProperties['gap'] | SizeType>([Number, String]),
+  component: anyType(),
+})
+
+export type FlexProps = Partial<ExtractPropTypes<ReturnType<typeof flexProps>> & HTMLElement>

package/src/flex/style/index.ts

@@ -0,0 +1,110 @@
+import type { CSSInterpolation } from '../../_util/cssinjs'
+import type { FullToken, GenerateStyle } from '../../theme/internal'
+import { genComponentStyleHook, mergeToken } from '../../theme/internal'
+import { alignItemsValues, flexWrapValues, justifyContentValues } from '../utils'
+
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+  // Component token here
+}
+
+export interface FlexToken extends FullToken<'Flex'> {
+  /**
+   * @nameZH 小间隙
+   * @nameEN Small Gap
+   * @desc 控制元素的小间隙。
+   * @descEN Control the small gap of the element.
+   */
+  flexGapSM: number
+  /**
+   * @nameZH 间隙
+   * @nameEN Gap
+   * @desc 控制元素的间隙。
+   * @descEN Control the gap of the element.
+   */
+  flexGap: number
+  /**
+   * @nameZH 大间隙
+   * @nameEN Large Gap
+   * @desc 控制元素的大间隙。
+   * @descEN Control the large gap of the element.
+   */
+  flexGapLG: number
+}
+
+const genFlexStyle: GenerateStyle<FlexToken> = (token) => {
+  const { componentCls } = token
+  return {
+    [componentCls]: {
+      display: 'flex',
+      '&-vertical': {
+        flexDirection: 'column',
+      },
+      '&-rtl': {
+        direction: 'rtl',
+      },
+      '&:empty': {
+        display: 'none',
+      },
+    },
+  }
+}
+
+const genFlexGapStyle: GenerateStyle<FlexToken> = (token) => {
+  const { componentCls } = token
+  return {
+    [componentCls]: {
+      '&-gap-small': {
+        gap: token.flexGapSM,
+      },
+      '&-gap-middle': {
+        gap: token.flexGap,
+      },
+      '&-gap-large': {
+        gap: token.flexGapLG,
+      },
+    },
+  }
+}
+
+const genFlexWrapStyle: GenerateStyle<FlexToken> = (token) => {
+  const { componentCls } = token
+  const wrapStyle: CSSInterpolation = {}
+  flexWrapValues.forEach((value) => {
+    wrapStyle[`${componentCls}-wrap-${value}`] = { flexWrap: value }
+  })
+  return wrapStyle
+}
+
+const genAlignItemsStyle: GenerateStyle<FlexToken> = (token) => {
+  const { componentCls } = token
+  const alignStyle: CSSInterpolation = {}
+  alignItemsValues.forEach((value) => {
+    alignStyle[`${componentCls}-align-${value}`] = { alignItems: value }
+  })
+  return alignStyle
+}
+
+const genJustifyContentStyle: GenerateStyle<FlexToken> = (token) => {
+  const { componentCls } = token
+  const justifyStyle: CSSInterpolation = {}
+  justifyContentValues.forEach((value) => {
+    justifyStyle[`${componentCls}-justify-${value}`] = { justifyContent: value }
+  })
+  return justifyStyle
+}
+
+export default genComponentStyleHook<'Flex'>('Flex', (token) => {
+  const flexToken = mergeToken<FlexToken>(token, {
+    flexGapSM: token.paddingXS,
+    flexGap: token.padding,
+    flexGapLG: token.paddingLG,
+  })
+  return [
+    genFlexStyle(flexToken),
+    genFlexGapStyle(flexToken),
+    genFlexWrapStyle(flexToken),
+    genAlignItemsStyle(flexToken),
+    genJustifyContentStyle(flexToken),
+  ]
+})

package/src/flex/utils.ts

@@ -0,0 +1,67 @@
+import classNames from '../_util/classNames'
+import type { FlexProps } from './interface'
+
+export const flexWrapValues = ['wrap', 'nowrap', 'wrap-reverse'] as const
+
+export const justifyContentValues = [
+  'flex-start',
+  'flex-end',
+  'start',
+  'end',
+  'center',
+  'space-between',
+  'space-around',
+  'space-evenly',
+  'stretch',
+  'normal',
+  'left',
+  'right',
+] as const
+
+export const alignItemsValues = [
+  'center',
+  'start',
+  'end',
+  'flex-start',
+  'flex-end',
+  'self-start',
+  'self-end',
+  'baseline',
+  'normal',
+  'stretch',
+] as const
+
+const genClsWrap = (prefixCls: string, props: FlexProps) => {
+  const wrapCls: Record<PropertyKey, boolean> = {}
+  flexWrapValues.forEach((cssKey) => {
+    wrapCls[`${prefixCls}-wrap-${cssKey}`] = props.wrap === cssKey
+  })
+  return wrapCls
+}
+
+const genClsAlign = (prefixCls: string, props: FlexProps) => {
+  const alignCls: Record<PropertyKey, boolean> = {}
+  alignItemsValues.forEach((cssKey) => {
+    alignCls[`${prefixCls}-align-${cssKey}`] = props.align === cssKey
+  })
+  alignCls[`${prefixCls}-align-stretch`] = !props.align && !!props.vertical
+  return alignCls
+}
+
+const genClsJustify = (prefixCls: string, props: FlexProps) => {
+  const justifyCls: Record<PropertyKey, boolean> = {}
+  justifyContentValues.forEach((cssKey) => {
+    justifyCls[`${prefixCls}-justify-${cssKey}`] = props.justify === cssKey
+  })
+  return justifyCls
+}
+
+function createFlexClassNames(prefixCls: string, props: FlexProps) {
+  return classNames({
+    ...genClsWrap(prefixCls, props),
+    ...genClsAlign(prefixCls, props),
+    ...genClsJustify(prefixCls, props),
+  })
+}
+
+export default createFlexClassNames

package/src/float-button/BackTop.tsx

@@ -0,0 +1,146 @@
+import VerticalAlignTopOutlined from '@ant-design/icons-vue/VerticalAlignTopOutlined'
+
+import {
+  Transition,
+  defineComponent,
+  nextTick,
+  onActivated,
+  onBeforeUnmount,
+  onDeactivated,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+} from 'vue'
+
+import getScroll from '../_util/getScroll'
+import { initDefaultProps } from '../_util/props-util'
+import scrollTo from '../_util/scrollTo'
+import throttleByAnimationFrame from '../_util/throttleByAnimationFrame'
+import { getTransitionProps } from '../_util/transition'
+import useConfigInject from '../config-provider/hooks/useConfigInject'
+import FloatButton, { floatButtonPrefixCls } from './FloatButton'
+import { useInjectFloatButtonGroupContext } from './context'
+import { backTopProps } from './interface'
+import useStyle from './style'
+
+const BackTop = defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'ABackTop',
+  inheritAttrs: false,
+  props: initDefaultProps(backTopProps(), {
+    visibilityHeight: 400,
+    target: () => window,
+    duration: 450,
+    type: 'default',
+    shape: 'circle',
+  }),
+  // emits: ['click'],
+  setup(props, { slots, attrs, emit }) {
+    const { prefixCls, direction } = useConfigInject(floatButtonPrefixCls, props)
+
+    const [wrapSSR] = useStyle(prefixCls)
+
+    const domRef = ref()
+    const state = reactive({
+      visible: props.visibilityHeight === 0,
+      scrollEvent: null,
+    })
+
+    const getDefaultTarget = () =>
+      domRef.value && domRef.value.ownerDocument ? domRef.value.ownerDocument : window
+
+    const scrollToTop = (e: Event) => {
+      const { target = getDefaultTarget, duration } = props
+      scrollTo(0, {
+        getContainer: target,
+        duration,
+      })
+      emit('click', e)
+    }
+
+    const handleScroll = throttleByAnimationFrame((e: Event | { target: any }) => {
+      const { visibilityHeight } = props
+      const scrollTop = getScroll(e.target, true)
+      state.visible = scrollTop >= visibilityHeight
+    })
+
+    const bindScrollEvent = () => {
+      const { target } = props
+      const getTarget = target || getDefaultTarget
+      const container = getTarget()
+      handleScroll({ target: container })
+      container?.addEventListener('scroll', handleScroll)
+    }
+
+    const scrollRemove = () => {
+      const { target } = props
+      const getTarget = target || getDefaultTarget
+      const container = getTarget()
+      handleScroll.cancel()
+      container?.removeEventListener('scroll', handleScroll)
+    }
+
+    watch(
+      () => props.target,
+      () => {
+        scrollRemove()
+        nextTick(() => {
+          bindScrollEvent()
+        })
+      },
+    )
+
+    onMounted(() => {
+      nextTick(() => {
+        bindScrollEvent()
+      })
+    })
+
+    onActivated(() => {
+      nextTick(() => {
+        bindScrollEvent()
+      })
+    })
+
+    onDeactivated(() => {
+      scrollRemove()
+    })
+
+    onBeforeUnmount(() => {
+      scrollRemove()
+    })
+    const floatButtonGroupContext = useInjectFloatButtonGroupContext()
+    return () => {
+      const { description, type, shape, tooltip, badge } = props
+
+      const floatButtonProps = {
+        ...attrs,
+        shape: floatButtonGroupContext?.shape.value || shape,
+        onClick: scrollToTop,
+        class: {
+          [`${prefixCls.value}`]: true,
+          [`${attrs.class}`]: attrs.class,
+          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+        },
+        description,
+        type,
+        tooltip,
+        badge,
+      }
+
+      const transitionProps = getTransitionProps('fade')
+      return wrapSSR(
+        <Transition {...transitionProps}>
+          <FloatButton v-show={state.visible} {...floatButtonProps} ref={domRef}>
+            {{
+              icon: () => slots.icon?.() || <VerticalAlignTopOutlined />,
+            }}
+          </FloatButton>
+        </Transition>,
+      )
+    }
+  },
+})
+
+export default BackTop