@antsoo-lib/components 0.1.11 → 0.1.13

package/src/skeleton/Input.tsx

@@ -1,48 +0,0 @@
-import type { PropType } from 'vue'
-import { computed, defineComponent } from 'vue'
-
-import classNames from '../_util/classNames'
-import omit from '../_util/omit'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import type { SkeletonElementProps } from './Element'
-import Element, { skeletonElementProps } from './Element'
-import useStyle from './style'
-
-export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
-  size?: 'large' | 'small' | 'default'
-  block?: boolean
-}
-
-const SkeletonInput = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ASkeletonInput',
-  props: {
-    ...omit(skeletonElementProps(), ['shape']),
-    size: String as PropType<'large' | 'small' | 'default'>,
-    block: Boolean,
-  },
-  setup(props) {
-    const { prefixCls } = useConfigInject('skeleton', props)
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-    const cls = computed(() =>
-      classNames(
-        prefixCls.value,
-        `${prefixCls.value}-element`,
-        {
-          [`${prefixCls.value}-active`]: props.active,
-          [`${prefixCls.value}-block`]: props.block,
-        },
-        hashId.value,
-      ),
-    )
-    return () => {
-      return wrapSSR(
-        <div class={cls.value}>
-          <Element {...props} prefixCls={`${prefixCls.value}-input`} />
-        </div>,
-      )
-    }
-  },
-})
-
-export default SkeletonInput

package/src/skeleton/Paragraph.tsx

@@ -1,44 +0,0 @@
-import type { ExtractPropTypes, PropType } from 'vue'
-import { defineComponent } from 'vue'
-
-type widthUnit = number | string
-export const skeletonParagraphProps = () => ({
-  prefixCls: String,
-  width: { type: [Number, String, Array] as PropType<widthUnit[] | widthUnit> },
-  rows: Number,
-})
-
-export type SkeletonParagraphProps = Partial<
-  ExtractPropTypes<ReturnType<typeof skeletonParagraphProps>>
->
-
-const SkeletonParagraph = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'SkeletonParagraph',
-  props: skeletonParagraphProps(),
-  setup(props) {
-    const getWidth = (index: number) => {
-      const { width, rows = 2 } = props
-      if (Array.isArray(width)) {
-        return width[index]
-      }
-      // last paragraph
-      if (rows - 1 === index) {
-        return width
-      }
-      return undefined
-    }
-    return () => {
-      const { prefixCls, rows } = props
-      const rowList = [...new Array(rows)].map((_, index) => {
-        const width = getWidth(index)
-        return (
-          <li key={index} style={{ width: typeof width === 'number' ? `${width}px` : width }} />
-        )
-      })
-      return <ul class={prefixCls}>{rowList}</ul>
-    }
-  },
-})
-
-export default SkeletonParagraph

package/src/skeleton/Skeleton.tsx

@@ -1,174 +0,0 @@
-import type { ExtractPropTypes, PropType } from 'vue'
-import { defineComponent } from 'vue'
-
-import classNames from '../_util/classNames'
-import { initDefaultProps } from '../_util/props-util'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import type { SkeletonAvatarProps as AvatarProps } from './Avatar'
-import Element from './Element'
-import type { SkeletonParagraphProps } from './Paragraph'
-import Paragraph from './Paragraph'
-import type { SkeletonTitleProps } from './Title'
-import Title from './Title'
-import useStyle from './style'
-
-/* This only for skeleton internal. */
-type SkeletonAvatarProps = Omit<AvatarProps, 'active'>
-
-export const skeletonProps = () => ({
-  active: { type: Boolean, default: undefined },
-  loading: { type: Boolean, default: undefined },
-  prefixCls: String,
-  avatar: {
-    type: [Boolean, Object] as PropType<SkeletonAvatarProps | boolean>,
-    default: undefined as SkeletonAvatarProps | boolean,
-  },
-  title: {
-    type: [Boolean, Object] as PropType<SkeletonTitleProps | boolean>,
-    default: undefined as SkeletonTitleProps | boolean,
-  },
-  paragraph: {
-    type: [Boolean, Object] as PropType<SkeletonParagraphProps | boolean>,
-    default: undefined as SkeletonParagraphProps | boolean,
-  },
-  round: { type: Boolean, default: undefined },
-})
-
-export type SkeletonProps = Partial<ExtractPropTypes<ReturnType<typeof skeletonProps>>>
-
-function getComponentProps<T>(prop: T | boolean | undefined): T | {} {
-  if (prop && typeof prop === 'object') {
-    return prop
-  }
-  return {}
-}
-function getAvatarBasicProps(hasTitle: boolean, hasParagraph: boolean): SkeletonAvatarProps {
-  if (hasTitle && !hasParagraph) {
-    // Square avatar
-    return { size: 'large', shape: 'square' }
-  }
-
-  return { size: 'large', shape: 'circle' }
-}
-
-function getTitleBasicProps(hasAvatar: boolean, hasParagraph: boolean): SkeletonTitleProps {
-  if (!hasAvatar && hasParagraph) {
-    return { width: '38%' }
-  }
-
-  if (hasAvatar && hasParagraph) {
-    return { width: '50%' }
-  }
-
-  return {}
-}
-
-function getParagraphBasicProps(hasAvatar: boolean, hasTitle: boolean): SkeletonParagraphProps {
-  const basicProps: SkeletonParagraphProps = {}
-
-  // Width
-  if (!hasAvatar || !hasTitle) {
-    basicProps.width = '61%'
-  }
-
-  // Rows
-  if (!hasAvatar && hasTitle) {
-    basicProps.rows = 3
-  } else {
-    basicProps.rows = 2
-  }
-
-  return basicProps
-}
-
-const Skeleton = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ASkeleton',
-  props: initDefaultProps(skeletonProps(), {
-    avatar: false,
-    title: true,
-    paragraph: true,
-  }),
-  setup(props, { slots }) {
-    const { prefixCls, direction } = useConfigInject('skeleton', props)
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-
-    return () => {
-      const { loading, avatar, title, paragraph, active, round } = props
-      const pre = prefixCls.value
-      if (loading || props.loading === undefined) {
-        const hasAvatar = !!avatar || (avatar as string) === ''
-        const hasTitle = !!title || (title as string) === ''
-        const hasParagraph = !!paragraph || (paragraph as string) === ''
-
-        // Avatar
-        let avatarNode
-        if (hasAvatar) {
-          const avatarProps = {
-            prefixCls: `${pre}-avatar`,
-            ...getAvatarBasicProps(hasTitle, hasParagraph),
-            ...getComponentProps(avatar),
-          }
-
-          avatarNode = (
-            <div class={`${pre}-header`}>
-              <Element {...avatarProps} />
-            </div>
-          )
-        }
-
-        let contentNode
-        if (hasTitle || hasParagraph) {
-          // Title
-          let $title
-          if (hasTitle) {
-            const titleProps = {
-              prefixCls: `${pre}-title`,
-              ...getTitleBasicProps(hasAvatar, hasParagraph),
-              ...getComponentProps(title),
-            }
-
-            $title = <Title {...titleProps} />
-          }
-
-          // Paragraph
-          let paragraphNode
-          if (hasParagraph) {
-            const paragraphProps = {
-              prefixCls: `${pre}-paragraph`,
-              ...getParagraphBasicProps(hasAvatar, hasTitle),
-              ...getComponentProps(paragraph),
-            }
-
-            paragraphNode = <Paragraph {...paragraphProps} />
-          }
-
-          contentNode = (
-            <div class={`${pre}-content`}>
-              {$title}
-              {paragraphNode}
-            </div>
-          )
-        }
-
-        const cls = classNames(pre, {
-          [`${pre}-with-avatar`]: hasAvatar,
-          [`${pre}-active`]: active,
-          [`${pre}-rtl`]: direction.value === 'rtl',
-          [`${pre}-round`]: round,
-          [hashId.value]: true,
-        })
-
-        return wrapSSR(
-          <div class={cls}>
-            {avatarNode}
-            {contentNode}
-          </div>,
-        )
-      }
-      return slots.default?.()
-    }
-  },
-})
-
-export default Skeleton

package/src/skeleton/Title.tsx

@@ -1,24 +0,0 @@
-import type { ExtractPropTypes, PropType } from 'vue'
-import { defineComponent } from 'vue'
-
-export const skeletonTitleProps = () => ({
-  prefixCls: String,
-  width: { type: [Number, String] as PropType<string | number> },
-})
-
-export type SkeletonTitleProps = Partial<ExtractPropTypes<ReturnType<typeof skeletonTitleProps>>>
-
-const SkeletonTitle = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'SkeletonTitle',
-  props: skeletonTitleProps(),
-  setup(props) {
-    return () => {
-      const { prefixCls, width } = props
-      const zWidth = typeof width === 'number' ? `${width}px` : width
-      return <h3 class={prefixCls} style={{ width: zWidth }} />
-    }
-  },
-})
-
-export default SkeletonTitle

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

@@ -1,64 +0,0 @@
----
-category: Components
-type: Feedback
-title: Skeleton
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*uae3QbkNCm8AAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VcjGQLSrYdcAAAAAAAAAAAAADrJ8AQ/original
----
-
-Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.
-
-## When To Use
-
-- When a resource needs long time to load.
-- When the component contains lots of information, such as List or Card.
-- Only works when loading data for the first time.
-- Could be replaced by Spin in any situation, but can provide a better user experience.
-
-## API
-
-### Skeleton
-
-| Property  | Description                      | Type                                                         | Default |
-| --------- | -------------------------------- | ------------------------------------------------------------ | ------- |
-| active    | Show animation effect            | boolean                                                      | false   |
-| avatar    | Show avatar placeholder          | boolean \| [SkeletonAvatarProps](#skeletonavatarprops)       | false   |
-| loading   | Display the skeleton when `true` | boolean                                                      | -       |
-| paragraph | Show paragraph placeholder       | boolean \| [SkeletonParagraphProps](#skeletonparagraphprops) | true    |
-| title     | Show title placeholder           | boolean \| [SkeletonTitleProps](#skeletontitleprops)         | true    |
-
-## SkeletonAvatarProps
-
-| Property | Description             | Type                                      | Default |
-| -------- | ----------------------- | ----------------------------------------- | ------- |
-| shape    | Set the shape of avatar | `circle` \| `square`                      | -       |
-| size     | Set the size of avatar  | number \| `large` \| `small` \| `default` | -       |
-
-### SkeletonTitleProps
-
-| Property | Description            | Type             | Default |
-| -------- | ---------------------- | ---------------- | ------- |
-| width    | Set the width of title | number \| string | -       |
-
-### SkeletonParagraphProps
-
-| Property | Description                                                                                                                 | Type                                           | Default |
-| -------- | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ------- |
-| rows     | Set the row count of paragraph                                                                                              | number                                         | -       |
-| width    | Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width | number \| string \| Array<number \| string> | -       |
-
-### SkeletonButtonProps (3.0+)
-
-| Property | Description                                    | Type                             | Default | Version |
-| -------- | ---------------------------------------------- | -------------------------------- | ------- | ------- |
-| active   | Show animation effect                          | boolean                          | false   |         |
-| block    | Option to fit button width to its parent width | boolean                          | false   |         |
-| shape    | Set the shape of button                        | `circle` \| `round` \| `default` | -       |         |
-| size     | Set the size of button                         | `large` \| `small` \| `default`  | -       |         |
-
-### SkeletonInputProps (3.0+)
-
-| Property | Description           | Type                            | Default |
-| -------- | --------------------- | ------------------------------- | ------- |
-| active   | Show animation effect | boolean                         | false   |
-| size     | Set the size of input | `large` \| `small` \| `default` | -       |

package/src/skeleton/index.tsx

@@ -1,42 +0,0 @@
-import type { App, Plugin } from 'vue'
-
-import SkeletonAvatar from './Avatar'
-import SkeletonButton from './Button'
-import SkeletonImage from './Image'
-import SkeletonInput from './Input'
-import Skeleton from './Skeleton'
-import SkeletonTitle from './Title'
-
-export type { SkeletonButtonProps } from './Button'
-export type { SkeletonInputProps } from './Input'
-export type { SkeletonImageProps } from './Image'
-export type { SkeletonAvatarProps } from './Avatar'
-export type { SkeletonTitleProps } from './Title'
-
-export type { SkeletonProps } from './Skeleton'
-export { skeletonProps } from './Skeleton'
-
-Skeleton.Button = SkeletonButton
-Skeleton.Avatar = SkeletonAvatar
-Skeleton.Input = SkeletonInput
-Skeleton.Image = SkeletonImage
-Skeleton.Title = SkeletonTitle
-
-/* istanbul ignore next */
-Skeleton.install = function (app: App) {
-  app.component(Skeleton.name, Skeleton)
-  app.component(Skeleton.Button.name, SkeletonButton)
-  app.component(Skeleton.Avatar.name, SkeletonAvatar)
-  app.component(Skeleton.Input.name, SkeletonInput)
-  app.component(Skeleton.Image.name, SkeletonImage)
-  app.component(Skeleton.Title.name, SkeletonTitle)
-  return app
-}
-export { SkeletonAvatar, SkeletonButton, SkeletonImage, SkeletonInput, SkeletonTitle }
-export default Skeleton as typeof Skeleton &
-  Plugin & {
-    readonly Button: typeof SkeletonButton
-    readonly Avatar: typeof SkeletonAvatar
-    readonly Input: typeof SkeletonInput
-    readonly Image: typeof SkeletonImage
-  }

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

@@ -1,65 +0,0 @@
----
-category: Components
-type: 反馈
-title: Skeleton
-subtitle: 骨架屏
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*uae3QbkNCm8AAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VcjGQLSrYdcAAAAAAAAAAAAADrJ8AQ/original
----
-
-在需要等待加载内容的位置提供一个占位图形组合。
-
-## 何时使用
-
-- 网络较慢，需要长时间等待加载处理的情况下。
-- 图文信息内容较多的列表/卡片中。
-- 只在第一次加载数据的时候使用。
-- 可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。
-
-## API
-
-### Skeleton
-
-| 属性      | 说明                                           | 类型                                                         | 默认值 |
-| --------- | ---------------------------------------------- | ------------------------------------------------------------ | ------ |
-| active    | 是否展示动画效果                               | boolean                                                      | false  |
-| avatar    | 是否显示头像占位图                             | boolean \| [SkeletonAvatarProps](#skeletonavatarprops)       | false  |
-| loading   | 为 `true` 时，显示占位图。反之则直接展示子组件 | boolean                                                      | -      |
-| paragraph | 是否显示段落占位图                             | boolean \| [SkeletonParagraphProps](#skeletonparagraphprops) | true   |
-| title     | 是否显示标题占位图                             | boolean \| [SkeletonTitleProps](#skeletontitleprops)         | true   |
-
-### SkeletonAvatarProps
-
-| 属性  | 说明                 | 类型                                      | 默认值 |
-| ----- | -------------------- | ----------------------------------------- | ------ |
-| shape | 指定头像的形状       | `circle` \| `square`                      | -      |
-| size  | 设置头像占位图的大小 | number \| `large` \| `small` \| `default` | -      |
-
-### SkeletonTitleProps
-
-| 属性  | 说明                 | 类型             | 默认值 |
-| ----- | -------------------- | ---------------- | ------ |
-| width | 设置标题占位图的宽度 | number \| string | -      |
-
-### SkeletonParagraphProps
-
-| 属性  | 说明                                                                       | 类型                                           | 默认值 |
-| ----- | -------------------------------------------------------------------------- | ---------------------------------------------- | ------ |
-| rows  | 设置段落占位图的行数                                                       | number                                         | -      |
-| width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array<number \| string> | -      |
-
-### SkeletonButtonProps (3.0+)
-
-| 属性   | 说明                           | 类型                             | 默认值 | 版本 |
-| ------ | ------------------------------ | -------------------------------- | ------ | ---- |
-| active | 是否展示动画效果               | boolean                          | false  |      |
-| block  | 将按钮宽度调整为其父宽度的选项 | boolean                          | false  |      |
-| shape  | 指定按钮的形状                 | `circle` \| `round` \| `default` | -      |      |
-| size   | 设置按钮的大小                 | `large` \| `small` \| `default`  | -      |      |
-
-### SkeletonInputProps (3.0+)
-
-| 属性   | 说明             | 类型                            | 默认值 |
-| ------ | ---------------- | ------------------------------- | ------ |
-| active | 是否展示动画效果 | boolean                         | false  |
-| size   | 设置输入框的大小 | `large` \| `small` \| `default` | -      |