@antsoo-lib/components 0.1.2 → 0.1.4

package/src/space/Compact.tsx

@@ -0,0 +1,136 @@
+import { isEmpty } from 'lodash-es'
+
+import { computed, defineComponent } from 'vue'
+import type { ExtractPropTypes, PropType, Ref } from 'vue'
+
+import classNames from '../_util/classNames'
+import createContext from '../_util/createContext'
+import { flattenChildren } from '../_util/props-util'
+import { booleanType, tuple } from '../_util/type'
+import PropTypes from '../_util/vue-types'
+import type { DirectionType, SizeType } from '../config-provider'
+import useConfigInject from '../config-provider/hooks/useConfigInject'
+import useStyle from './style'
+
+export const spaceCompactItemProps = () => ({
+  compactSize: String as PropType<SizeType>,
+  compactDirection: PropTypes.oneOf(tuple('horizontal', 'vertical')).def('horizontal'),
+  isFirstItem: booleanType(),
+  isLastItem: booleanType(),
+})
+
+export type SpaceCompactItemContextType = Partial<
+  ExtractPropTypes<ReturnType<typeof spaceCompactItemProps>>
+>
+
+export const SpaceCompactItemContext = createContext<SpaceCompactItemContextType | null>(null)
+
+export const useCompactItemContext = (prefixCls: Ref<string>, direction: Ref<DirectionType>) => {
+  const compactItemContext = SpaceCompactItemContext.useInject()
+
+  const compactItemClassnames = computed(() => {
+    if (!compactItemContext || isEmpty(compactItemContext)) return ''
+
+    const { compactDirection, isFirstItem, isLastItem } = compactItemContext
+    const separator = compactDirection === 'vertical' ? '-vertical-' : '-'
+
+    return classNames({
+      [`${prefixCls.value}-compact${separator}item`]: true,
+      [`${prefixCls.value}-compact${separator}first-item`]: isFirstItem,
+      [`${prefixCls.value}-compact${separator}last-item`]: isLastItem,
+      [`${prefixCls.value}-compact${separator}item-rtl`]: direction.value === 'rtl',
+    })
+  })
+
+  return {
+    compactSize: computed(() => compactItemContext?.compactSize),
+    compactDirection: computed(() => compactItemContext?.compactDirection),
+    compactItemClassnames,
+  }
+}
+
+export const NoCompactStyle = defineComponent({
+  name: 'NoCompactStyle',
+  setup(_, { slots }) {
+    SpaceCompactItemContext.useProvide(null)
+    return () => {
+      return slots.default?.()
+    }
+  },
+})
+
+export const spaceCompactProps = () => ({
+  prefixCls: String,
+  size: {
+    type: String as PropType<SizeType>,
+  },
+  direction: PropTypes.oneOf(tuple('horizontal', 'vertical')).def('horizontal'),
+  align: PropTypes.oneOf(tuple('start', 'end', 'center', 'baseline')),
+  block: { type: Boolean, default: undefined },
+})
+
+export type SpaceCompactProps = Partial<ExtractPropTypes<ReturnType<typeof spaceCompactProps>>>
+
+const CompactItem = defineComponent({
+  name: 'CompactItem',
+  props: spaceCompactItemProps(),
+  setup(props, { slots }) {
+    SpaceCompactItemContext.useProvide(props)
+
+    return () => slots.default?.()
+  },
+})
+
+const Compact = defineComponent({
+  name: 'ASpaceCompact',
+  inheritAttrs: false,
+  props: spaceCompactProps(),
+  setup(props, { attrs, slots }) {
+    const { prefixCls, direction: directionConfig } = useConfigInject('space-compact', props)
+    const compactItemContext = SpaceCompactItemContext.useInject()
+
+    const [wrapSSR, hashId] = useStyle(prefixCls)
+
+    const clx = computed(() => {
+      return classNames(prefixCls.value, hashId.value, {
+        [`${prefixCls.value}-rtl`]: directionConfig.value === 'rtl',
+        [`${prefixCls.value}-block`]: props.block,
+        [`${prefixCls.value}-vertical`]: props.direction === 'vertical',
+      })
+    })
+
+    return () => {
+      const childNodes = flattenChildren(slots.default?.() || [])
+      // =========================== Render ===========================
+      if (childNodes.length === 0) {
+        return null
+      }
+
+      return wrapSSR(
+        <div {...attrs} class={[clx.value, attrs.class]}>
+          {childNodes.map((child, i) => {
+            const key = (child && child.key) || `${prefixCls.value}-item-${i}`
+            const noCompactItemContext = !compactItemContext || isEmpty(compactItemContext)
+
+            return (
+              <CompactItem
+                key={key}
+                compactSize={props.size ?? 'middle'}
+                compactDirection={props.direction}
+                isFirstItem={i === 0 && (noCompactItemContext || compactItemContext?.isFirstItem)}
+                isLastItem={
+                  i === childNodes.length - 1 &&
+                  (noCompactItemContext || compactItemContext?.isLastItem)
+                }
+              >
+                {child}
+              </CompactItem>
+            )
+          })}
+        </div>,
+      )
+    }
+  },
+})
+
+export default Compact

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

@@ -0,0 +1,46 @@
+---
+category: Components
+type: Layout
+title: Space
+cols: 1
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZiJ3SbOH9SUAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAAAAAAAAAAAADrJ8AQ/original
+---
+
+Set components spacing.
+
+## When To Use
+
+- Avoid components clinging together and set a unified space.
+- Use Space.Compact when child form components are compactly connected and the border is collapsed (After version `ant-design-vue@4.0.0` Supported).
+
+## API
+
+### Space
+
+| Property  | Description                                 | Type                                       | Default      | Version |
+| --------- | ------------------------------------------- | ------------------------------------------ | ------------ | ------- |
+| align     | Align items                                 | `start` \| `end` \|`center` \|`baseline`   | -            | 1.6.5   |
+| direction | The space direction                         | `vertical` \| `horizontal`                 | `horizontal` | 1.6.5   |
+| size      | The space size                              | `small` \| `middle` \| `large` \| `number` | `small`      | 1.6.5   |
+| split     | Set split                                   | VueNode \| v-slot                          | -            | 2.2.0   |
+| wrap      | Auto wrap line, when `horizontal` effective | boolean                                    | false        | 2.2.0   |
+
+### Space.Compact
+
+Use Space.Compact when child form components are compactly connected and the border is collapsed. The supported components are：
+
+- Button
+- AutoComplete
+- Cascader
+- DatePicker
+- Input/Input.Search
+- Select
+- TimePicker
+- TreeSelect
+
+| Property  | Description                                | Type                           | Default      | Version |
+| --------- | ------------------------------------------ | ------------------------------ | ------------ | ------- |
+| block     | Option to fit width to its parent\'s width | boolean                        | false        | 4.0.0   |
+| direction | Set direction of layout                    | `vertical` \| `horizontal`     | `horizontal` | 4.0.0   |
+| size      | Set child component size                   | `large` \| `middle` \| `small` | `middle`     | 4.0.0   |

package/src/space/index.tsx

@@ -0,0 +1,162 @@
+import type { App, CSSProperties, ExtractPropTypes, Plugin, PropType } from 'vue'
+import { Fragment, computed, defineComponent, ref, watch } from 'vue'
+
+import classNames from '../_util/classNames'
+import useFlexGapSupport from '../_util/hooks/useFlexGapSupport'
+import { filterEmpty } from '../_util/props-util'
+import type { CustomSlotsType } from '../_util/type'
+import { booleanType, tuple } from '../_util/type'
+import PropTypes from '../_util/vue-types'
+import type { SizeType } from '../config-provider'
+import useConfigInject from '../config-provider/hooks/useConfigInject'
+import Compact from './Compact'
+import useStyle from './style'
+
+export type SpaceSize = SizeType | number
+const spaceSize = {
+  small: 8,
+  middle: 16,
+  large: 24,
+}
+export const spaceProps = () => ({
+  prefixCls: String,
+  size: {
+    type: [String, Number, Array] as PropType<SpaceSize | [SpaceSize, SpaceSize]>,
+  },
+  direction: PropTypes.oneOf(tuple('horizontal', 'vertical')).def('horizontal'),
+  align: PropTypes.oneOf(tuple('start', 'end', 'center', 'baseline')),
+  wrap: booleanType(),
+})
+
+export type SpaceProps = Partial<ExtractPropTypes<ReturnType<typeof spaceProps>>>
+
+function getNumberSize(size: SpaceSize) {
+  return typeof size === 'string' ? spaceSize[size] : size || 0
+}
+
+const Space = defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'ASpace',
+  inheritAttrs: false,
+  props: spaceProps(),
+  slots: Object as CustomSlotsType<{
+    split?: any
+    default?: any
+  }>,
+  setup(props, { slots, attrs }) {
+    const { prefixCls, space, direction: directionConfig } = useConfigInject('space', props)
+    const [wrapSSR, hashId] = useStyle(prefixCls)
+    const supportFlexGap = useFlexGapSupport()
+    const size = computed(() => props.size ?? space?.value?.size ?? 'small')
+    const horizontalSize = ref<number>()
+    const verticalSize = ref<number>()
+    watch(
+      size,
+      () => {
+        ;[horizontalSize.value, verticalSize.value] = (
+          (Array.isArray(size.value) ? size.value : [size.value, size.value]) as [
+            SpaceSize,
+            SpaceSize,
+          ]
+        ).map((item) => getNumberSize(item))
+      },
+      { immediate: true },
+    )
+
+    const mergedAlign = computed(() =>
+      props.align === undefined && props.direction === 'horizontal' ? 'center' : props.align,
+    )
+    const cn = computed(() => {
+      return classNames(prefixCls.value, hashId.value, `${prefixCls.value}-${props.direction}`, {
+        [`${prefixCls.value}-rtl`]: directionConfig.value === 'rtl',
+        [`${prefixCls.value}-align-${mergedAlign.value}`]: mergedAlign.value,
+      })
+    })
+
+    const marginDirection = computed(() =>
+      directionConfig.value === 'rtl' ? 'marginLeft' : 'marginRight',
+    )
+    const style = computed(() => {
+      const gapStyle: CSSProperties = {}
+      if (supportFlexGap.value) {
+        gapStyle.columnGap = `${horizontalSize.value}px`
+        gapStyle.rowGap = `${verticalSize.value}px`
+      }
+      return {
+        ...gapStyle,
+        ...(props.wrap && { flexWrap: 'wrap', marginBottom: `${-verticalSize.value}px` }),
+      } as CSSProperties
+    })
+    return () => {
+      const { wrap, direction = 'horizontal' } = props
+      const children = slots.default?.()
+      const items = filterEmpty(children)
+      const len = items.length
+
+      if (len === 0) {
+        return null
+      }
+      const split = slots.split?.()
+      const itemClassName = `${prefixCls.value}-item`
+      const horizontalSizeVal = horizontalSize.value
+      const latestIndex = len - 1
+      return (
+        <div
+          {...attrs}
+          class={[cn.value, attrs.class]}
+          style={[style.value, attrs.style as CSSProperties]}
+        >
+          {items.map((child, index) => {
+            let originIndex = children.indexOf(child)
+            if (originIndex === -1) {
+              originIndex = `$$space-${index}`
+            }
+            let itemStyle: CSSProperties = {}
+            if (!supportFlexGap.value) {
+              if (direction === 'vertical') {
+                if (index < latestIndex) {
+                  itemStyle = { marginBottom: `${horizontalSizeVal / (split ? 2 : 1)}px` }
+                }
+              } else {
+                itemStyle = {
+                  ...(index < latestIndex && {
+                    [marginDirection.value]: `${horizontalSizeVal / (split ? 2 : 1)}px`,
+                  }),
+                  ...(wrap && { paddingBottom: `${verticalSize.value}px` }),
+                }
+              }
+            }
+
+            return wrapSSR(
+              <Fragment key={originIndex}>
+                <div class={itemClassName} style={itemStyle}>
+                  {child}
+                </div>
+                {index < latestIndex && split && (
+                  <span class={`${itemClassName}-split`} style={itemStyle}>
+                    {split}
+                  </span>
+                )}
+              </Fragment>,
+            )
+          })}
+        </div>
+      )
+    }
+  },
+})
+
+Space.Compact = Compact
+
+Space.install = function (app: App) {
+  app.component(Space.name, Space)
+  app.component(Compact.name, Compact)
+  return app
+}
+
+export { Compact }
+
+export default Space as typeof Space &
+  Plugin & {
+    readonly Compact: typeof Compact
+  }

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

@@ -0,0 +1,52 @@
+---
+category: Components
+type: 布局
+subtitle: 间距
+title: Space
+cols: 1
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZiJ3SbOH9SUAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAAAAAAAAAAAADrJ8AQ/original
+---
+
+设置组件之间的间距。
+
+## 何时使用
+
+避免组件紧贴在一起，拉开统一的空间。
+
+- 适合行内元素的水平间距。
+- 可以设置各种水平对齐方式。
+- 需要表单组件之间紧凑连接且合并边框时，使用 Space.Compact（自 `ant-design-vue@4.0.0` 版本开始提供该组件）。
+
+## API
+
+### Space
+
+| 参数      | 说明                                   | 类型                                       | 默认值       | 版本  |
+| --------- | -------------------------------------- | ------------------------------------------ | ------------ | ----- |
+| align     | 对齐方式                               | `start` \| `end` \|`center` \|`baseline`   | -            | 1.6.5 |
+| direction | 间距方向                               | `vertical` \| `horizontal`                 | `horizontal` | 1.6.5 |
+| size      | 间距大小                               | `small` \| `middle` \| `large` \| `number` | `small`      | 1.6.5 |
+| split     | 设置拆分                               | VueNode \| v-slot                          | -            | 2.2.0 |
+| wrap      | 是否自动换行，仅在 `horizontal` 时有效 | boolean                                    | false        | 2.2.0 |
+
+### Space.Compact
+
+> 自 ant-design-vue@4.0.0 版本开始提供该组件。
+
+需要表单组件之间紧凑连接且合并边框时，使用 Space.Compact。支持的组件有：
+
+- Button
+- AutoComplete
+- Cascader
+- DatePicker
+- Input/Input.Search
+- Select
+- TimePicker
+- TreeSelect
+
+| 参数      | 说明                         | 类型                           | 默认值       | 版本  |
+| --------- | ---------------------------- | ------------------------------ | ------------ | ----- |
+| block     | 将宽度调整为父元素宽度的选项 | boolean                        | false        | 4.0.0 |
+| direction | 指定排列方向                 | `vertical` \| `horizontal`     | `horizontal` | 4.0.0 |
+| size      | 子组件大小                   | `large` \| `middle` \| `small` | `middle`     | 4.0.0 |

package/src/space/style/compact.tsx

@@ -0,0 +1,30 @@
+import type { FullToken, GenerateStyle } from '../../theme/internal'
+
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+  // Component token here
+}
+
+interface SpaceToken extends FullToken<'Space'> {
+  // Custom token here
+}
+
+const genSpaceCompactStyle: GenerateStyle<SpaceToken> = (token) => {
+  const { componentCls } = token
+
+  return {
+    [componentCls]: {
+      display: 'inline-flex',
+      '&-block': {
+        display: 'flex',
+        width: '100%',
+      },
+      '&-vertical': {
+        flexDirection: 'column',
+      },
+    },
+  }
+}
+
+// ============================== Export ==============================
+export default genSpaceCompactStyle

package/src/space/style/index.tsx

@@ -0,0 +1,54 @@
+import type { FullToken, GenerateStyle } from '../../theme/internal'
+import { genComponentStyleHook } from '../../theme/internal'
+import genSpaceCompactStyle from './compact'
+
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+  // Component token here
+}
+
+interface SpaceToken extends FullToken<'Space'> {
+  // Custom token here
+}
+
+const genSpaceStyle: GenerateStyle<SpaceToken> = (token) => {
+  const { componentCls } = token
+
+  return {
+    [componentCls]: {
+      display: 'inline-flex',
+      '&-rtl': {
+        direction: 'rtl',
+      },
+      '&-vertical': {
+        flexDirection: 'column',
+      },
+      '&-align': {
+        flexDirection: 'column',
+        '&-center': {
+          alignItems: 'center',
+        },
+        '&-start': {
+          alignItems: 'flex-start',
+        },
+        '&-end': {
+          alignItems: 'flex-end',
+        },
+        '&-baseline': {
+          alignItems: 'baseline',
+        },
+      },
+      [`${componentCls}-item`]: {
+        '&:empty': {
+          display: 'none',
+        },
+      },
+    },
+  }
+}
+
+// ============================== Export ==============================
+export default genComponentStyleHook('Space', (token) => [
+  genSpaceStyle(token),
+  genSpaceCompactStyle(token),
+])

package/src/spin/Spin.tsx

@@ -0,0 +1,133 @@
+import { debounce } from 'throttle-debounce'
+
+import type { ExtractPropTypes, PropType, VNode } from 'vue'
+import { cloneVNode, defineComponent, isVNode, onBeforeUnmount, shallowRef, watch } from 'vue'
+
+import { filterEmpty, getPropsSlot } from '../_util/props-util'
+import initDefaultProps from '../_util/props-util/initDefaultProps'
+import PropTypes from '../_util/vue-types'
+import useConfigInject from '../config-provider/hooks/useConfigInject'
+import useStyle from './style'
+
+export type SpinSize = 'small' | 'default' | 'large'
+export const spinProps = () => ({
+  prefixCls: String,
+  spinning: { type: Boolean, default: undefined },
+  size: String as PropType<SpinSize>,
+  wrapperClassName: String,
+  tip: PropTypes.any,
+  delay: Number,
+  indicator: PropTypes.any,
+})
+
+export type SpinProps = Partial<ExtractPropTypes<ReturnType<typeof spinProps>>>
+
+// Render indicator
+let defaultIndicator: () => VNode = null
+
+function shouldDelay(spinning?: boolean, delay?: number): boolean {
+  return !!spinning && !!delay && !isNaN(Number(delay))
+}
+
+export function setDefaultIndicator(Content: any) {
+  const Indicator = Content.indicator
+  defaultIndicator = typeof Indicator === 'function' ? Indicator : () => <Indicator />
+}
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'ASpin',
+  inheritAttrs: false,
+  props: initDefaultProps(spinProps(), {
+    size: 'default',
+    spinning: true,
+    wrapperClassName: '',
+  }),
+  setup(props, { attrs, slots }) {
+    const { prefixCls, size, direction } = useConfigInject('spin', props)
+    const [wrapSSR, hashId] = useStyle(prefixCls)
+    const sSpinning = shallowRef(props.spinning && !shouldDelay(props.spinning, props.delay))
+    let updateSpinning: any
+    watch(
+      [() => props.spinning, () => props.delay],
+      () => {
+        updateSpinning?.cancel()
+        updateSpinning = debounce(props.delay, () => {
+          sSpinning.value = props.spinning
+        })
+        updateSpinning?.()
+      },
+      {
+        immediate: true,
+        flush: 'post',
+      },
+    )
+    onBeforeUnmount(() => {
+      updateSpinning?.cancel()
+    })
+    return () => {
+      const { class: cls, ...divProps } = attrs
+      const { tip = slots.tip?.() } = props
+      const children = slots.default?.()
+      const spinClassName = {
+        [hashId.value]: true,
+        [prefixCls.value]: true,
+        [`${prefixCls.value}-sm`]: size.value === 'small',
+        [`${prefixCls.value}-lg`]: size.value === 'large',
+        [`${prefixCls.value}-spinning`]: sSpinning.value,
+        [`${prefixCls.value}-show-text`]: !!tip,
+        [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+        [cls as string]: !!cls,
+      }
+
+      function renderIndicator(prefixCls: string) {
+        const dotClassName = `${prefixCls}-dot`
+        let indicator = getPropsSlot(slots, props, 'indicator')
+        // should not be render default indicator when indicator value is null
+        if (indicator === null) {
+          return null
+        }
+        if (Array.isArray(indicator)) {
+          indicator = indicator.length === 1 ? indicator[0] : indicator
+        }
+        if (isVNode(indicator)) {
+          return cloneVNode(indicator, { class: dotClassName })
+        }
+
+        if (defaultIndicator && isVNode(defaultIndicator())) {
+          return cloneVNode(defaultIndicator(), { class: dotClassName })
+        }
+
+        return (
+          <span class={`${dotClassName} ${prefixCls}-dot-spin`}>
+            <i class={`${prefixCls}-dot-item`} />
+            <i class={`${prefixCls}-dot-item`} />
+            <i class={`${prefixCls}-dot-item`} />
+            <i class={`${prefixCls}-dot-item`} />
+          </span>
+        )
+      }
+      const spinElement = (
+        <div {...divProps} class={spinClassName} aria-live="polite" aria-busy={sSpinning.value}>
+          {renderIndicator(prefixCls.value)}
+          {tip ? <div class={`${prefixCls.value}-text`}>{tip}</div> : null}
+        </div>
+      )
+      if (children && filterEmpty(children).length) {
+        const containerClassName = {
+          [`${prefixCls.value}-container`]: true,
+          [`${prefixCls.value}-blur`]: sSpinning.value,
+        }
+        return wrapSSR(
+          <div class={[`${prefixCls.value}-nested-loading`, props.wrapperClassName, hashId.value]}>
+            {sSpinning.value && <div key="loading">{spinElement}</div>}
+            <div class={containerClassName} key="container">
+              {children}
+            </div>
+          </div>,
+        )
+      }
+      return wrapSSR(spinElement)
+    }
+  },
+})

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

@@ -0,0 +1,36 @@
+---
+category: Components
+type: Feedback
+title: Spin
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5mC5TomY4B0AAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*i43_ToFrL8YAAAAAAAAAAAAADrJ8AQ/original
+---
+
+A spinner for displaying loading state of a page or a section.
+
+## When To Use
+
+When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.
+
+## API
+
+| Property         | Description                                                         | Type                  | Default Value | Version  |
+| ---------------- | ------------------------------------------------------------------- | --------------------- | ------------- | -------- |
+| delay            | specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | -             |          |
+| indicator        | vue node of the spinning indicator                                  | vNode \|slot          | -             |          |
+| size             | size of Spin, options: `small`, `default` and `large`               | string                | `default`     |          |
+| spinning         | whether Spin is visible                                             | boolean               | true          |          |
+| tip              | customize description content when Spin has children                | string \| slot        | -             | slot 3.0 |
+| wrapperClassName | className of wrapper when Spin has children                         | string                | -             |          |
+
+### Static Method
+
+- `Spin.setDefaultIndicator({indicator})` As `indicator`, you can define the global default spin element
+
+```jsx
+import { h } from 'vue'
+
+Spin.setDefaultIndicator({
+  indicator: h('i', { class: 'anticon anticon-loading anticon-spin ant-spin-dot' }),
+})
+```

package/src/spin/index.ts

@@ -0,0 +1,19 @@
+import type { App, Plugin } from 'vue'
+
+import Spin, { setDefaultIndicator } from './Spin'
+
+export type { SpinProps } from './Spin'
+export { spinProps } from './Spin'
+
+Spin.setDefaultIndicator = setDefaultIndicator
+
+/* istanbul ignore next */
+Spin.install = function (app: App) {
+  app.component(Spin.name, Spin)
+  return app
+}
+
+export default Spin as typeof Spin &
+  Plugin & {
+    readonly setDefaultIndicator: typeof setDefaultIndicator
+  }