@antsoo-lib/components 0.1.2 → 0.1.4

package/src/collapse/commonProps.ts

@@ -0,0 +1,56 @@
+import type { Key } from '../_util/type'
+import { booleanType, functionType, someType, stringType } from '../_util/type'
+import PropTypes from '../_util/vue-types'
+
+export type CollapsibleType = 'header' | 'icon' | 'disabled'
+
+export type ActiveKeyType = Array<string | number> | string | number
+
+export interface PanelProps {
+  isActive?: boolean
+  header?: any
+  showArrow?: boolean
+  forceRender?: boolean
+  /** @deprecated Use `collapsible="disabled"` instead */
+  disabled?: boolean
+  extra?: any
+  collapsible?: CollapsibleType
+}
+
+const collapseProps = () => ({
+  prefixCls: String,
+  activeKey: someType<ActiveKeyType>([Array, Number, String]),
+  defaultActiveKey: someType<ActiveKeyType>([Array, Number, String]),
+  accordion: booleanType(),
+  destroyInactivePanel: booleanType(),
+  bordered: booleanType(),
+  expandIcon: functionType<(panelProps: PanelProps) => any>(),
+  openAnimation: PropTypes.object,
+  expandIconPosition: stringType<'start' | 'end'>(),
+  collapsible: stringType<CollapsibleType>(),
+  ghost: booleanType(),
+  onChange: functionType<(key: Key | Key[]) => void>(),
+  'onUpdate:activeKey': functionType<(key: Key | Key[]) => void>(),
+})
+
+const collapsePanelProps = () => ({
+  openAnimation: PropTypes.object,
+  prefixCls: String,
+  header: PropTypes.any,
+  headerClass: String,
+  showArrow: booleanType(),
+  isActive: booleanType(),
+  destroyInactivePanel: booleanType(),
+  /** @deprecated Use `collapsible="disabled"` instead */
+  disabled: booleanType(),
+  accordion: booleanType(),
+  forceRender: booleanType(),
+  expandIcon: functionType<(panelProps: PanelProps) => any>(),
+  extra: PropTypes.any,
+  panelKey: someType<number | string>(),
+  collapsible: stringType<CollapsibleType>(),
+  role: String,
+  onItemClick: functionType<(panelKey: Key) => void>(),
+})
+
+export { collapsePanelProps, collapseProps }

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

@@ -0,0 +1,47 @@
+---
+category: Components
+type: Data Display
+title: Collapse
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*B7HKR5OBe8gAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sir-TK0HkWcAAAAAAAAAAAAADrJ8AQ/original
+---
+
+A content area which can be collapsed and expanded.
+
+## When To Use
+
+- Can be used to group or hide complex regions to keep the page clean.
+- 'Accordion' is a special kind of 'Collapse', which allows only one panel to be expanded at a time.
+
+## API
+
+### Collapse
+
+| Property             | Description                                                                              | Type                                               | Default                                                                                                      | Version |
+| -------------------- | ---------------------------------------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------- |
+| accordion            | If `true`, `Collapse` renders as `Accordion`                                             | boolean                                            | `false`                                                                                                      |         |
+| activeKey(v-model)   | Key of the active panel                                                                  | string\[] \| string <br> number\[] \| number       | No default value. In [accordion mode](#components-collapse-demo-accordion), it's the key of the first panel. |         |
+| bordered             | Toggles rendering of the border around the collapse block                                | boolean                                            | `true`                                                                                                       |         |
+| collapsible          | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled`                   | -                                                                                                            | 4.0     |
+| destroyInactivePanel | Destroy Inactive Panel                                                                   | boolean                                            | `false`                                                                                                      |         |
+| expandIcon           | allow to customize collapse icon                                                         | Function(props):VNode \| v-slot:expandIcon="props" |                                                                                                              |         |
+| expandIconPosition   | Set expand icon position                                                                 | `start` \| `end`                                   | -                                                                                                            | 4.0     |
+| ghost                | Make the collapse borderless and its background transparent                              | boolean                                            | false                                                                                                        | 3.0     |
+
+### events
+
+| Events Name | Description                                             | Arguments     | Version |
+| ----------- | ------------------------------------------------------- | ------------- | ------- |
+| change      | Callback function executed when active panel is changed | function(key) |         |
+
+### Collapse.Panel
+
+| Property    | Description                                                                         | Type                   | Default | Version |
+| ----------- | ----------------------------------------------------------------------------------- | ---------------------- | ------- | ------- |
+| collapsible | Specify whether the panel be collapsible or the trigger area of collapsible         | `header` \| `disabled` | -       | 3.0     |
+| disabled    | If `true`, panel cannot be opened or closed                                         | boolean                | `false` |         |
+| extra       | extra element in the corner                                                         | VNode \| slot          | -       | 1.5.0   |
+| forceRender | Forced render of content on panel, instead of lazy rending after clicking on header | boolean                | `false` |         |
+| header      | Title of the panel                                                                  | string \| slot         | -       |         |
+| key         | Unique key identifying the panel from among its siblings                            | string \| number       | -       |         |
+| showArrow   | If `false`, panel will not show arrow icon                                          | boolean                | `true`  |         |

package/src/collapse/index.ts

@@ -0,0 +1,22 @@
+import type { App, Plugin } from 'vue'
+
+import Collapse, { collapseProps } from './Collapse'
+import CollapsePanel, { collapsePanelProps } from './CollapsePanel'
+
+export type { CollapseProps } from './Collapse'
+export type { CollapsePanelProps } from './CollapsePanel'
+
+Collapse.Panel = CollapsePanel
+
+/* istanbul ignore next */
+Collapse.install = function (app: App) {
+  app.component(Collapse.name, Collapse)
+  app.component(CollapsePanel.name, CollapsePanel)
+  return app
+}
+
+export { CollapsePanel, collapsePanelProps, collapseProps }
+export default Collapse as typeof Collapse &
+  Plugin & {
+    readonly Panel: typeof CollapsePanel
+  }

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

@@ -0,0 +1,47 @@
+---
+category: Components
+type: 数据展示
+title: Collapse
+subtitle: 折叠面板
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*B7HKR5OBe8gAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sir-TK0HkWcAAAAAAAAAAAAADrJ8AQ/original
+---
+
+可以折叠/展开的内容区域。
+
+## 何时使用
+
+- 对复杂区域进行分组和隐藏，保持页面的整洁。
+- '手风琴' 是一种特殊的折叠面板，只允许单个内容区域展开。
+
+## API
+
+### Collapse
+
+| 参数                 | 说明                                     | 类型                                                                               | 默认值                                                                    | 版本 |
+| -------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ---- |
+| accordion            | 手风琴模式，始终只有一个面板处在激活状态 | boolean                                                                            | `false`                                                                   |      |
+| activeKey(v-model)   | 当前激活 tab 面板的 key                  | string\[] \| string <br> number\[] \| number                                       | 默认无，[手风琴模式](#components-collapse-demo-accordion)下默认第一个元素 |      |
+| bordered             | 带边框风格的折叠面板                     | boolean                                                                            | `true`                                                                    |      |
+| collapsible          | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled`                                                   | -                                                                         | 4.0  |
+| destroyInactivePanel | 销毁折叠隐藏的面板                       | boolean                                                                            | `false`                                                                   |      |
+| expandIcon           | 自定义切换图标                           | Function(props):VNode \| slot="expandIcon" slot-scope="props"\|#expandIcon="props" |                                                                           |      |
+| expandIconPosition   | 设置图标位置                             | `start` \| `end`                                                                   | -                                                                         | 4.0  |
+| ghost                | 使折叠面板透明且无边框                   | boolean                                                                            | false                                                                     | 3.0  |
+
+### 事件
+
+| 事件名称 | 说明           | 回调参数      | 版本 |
+| -------- | -------------- | ------------- | ---- |
+| change   | 切换面板的回调 | function(key) |      |
+
+### Collapse.Panel
+
+| 参数        | 说明                           | 类型                   | 默认值 | 版本  |
+| ----------- | ------------------------------ | ---------------------- | ------ | ----- |
+| collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `disabled` | -      | 3.0   |
+| extra       | 自定义渲染每个面板右上角的内容 | VNode \| slot          | -      | 1.5.0 |
+| forceRender | 被隐藏时是否渲染 DOM 结构      | boolean                | false  |       |
+| header      | 面板头内容                     | string\|slot           | -      |       |
+| key         | 对应 activeKey                 | string \| number       | -      |       |
+| showArrow   | 是否展示当前面板上的箭头       | boolean                | `true` |       |

package/src/collapse/style/index.tsx

@@ -0,0 +1,271 @@
+import { resetComponent, resetIcon } from '../../style'
+import { genCollapseMotion } from '../../style/motion'
+import type { FullToken, GenerateStyle } from '../../theme/internal'
+import { genComponentStyleHook, mergeToken } from '../../theme/internal'
+
+export interface ComponentToken {}
+
+type CollapseToken = FullToken<'Collapse'> & {
+  collapseContentBg: string
+  collapseHeaderBg: string
+  collapseHeaderPadding: string
+  collapsePanelBorderRadius: number
+  collapseContentPaddingHorizontal: number
+}
+
+export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
+  const {
+    componentCls,
+    collapseContentBg,
+    padding,
+    collapseContentPaddingHorizontal,
+    collapseHeaderBg,
+    collapseHeaderPadding,
+    collapsePanelBorderRadius,
+
+    lineWidth,
+    lineType,
+    colorBorder,
+    colorText,
+    colorTextHeading,
+    colorTextDisabled,
+    fontSize,
+    lineHeight,
+    marginSM,
+    paddingSM,
+    motionDurationSlow,
+    fontSizeIcon,
+  } = token
+
+  const borderBase = `${lineWidth}px ${lineType} ${colorBorder}`
+
+  return {
+    [componentCls]: {
+      ...resetComponent(token),
+      backgroundColor: collapseHeaderBg,
+      border: borderBase,
+      borderBottom: 0,
+      borderRadius: `${collapsePanelBorderRadius}px`,
+
+      [`&-rtl`]: {
+        direction: 'rtl',
+      },
+
+      [`& > ${componentCls}-item`]: {
+        borderBottom: borderBase,
+        [`&:last-child`]: {
+          [`
+            &,
+            & > ${componentCls}-header`]: {
+            borderRadius: `0 0 ${collapsePanelBorderRadius}px ${collapsePanelBorderRadius}px`,
+          },
+        },
+
+        [`> ${componentCls}-header`]: {
+          position: 'relative', // Compatible with old version of antd, should remove in next version
+          display: 'flex',
+          flexWrap: 'nowrap',
+          alignItems: 'flex-start',
+          padding: collapseHeaderPadding,
+          color: colorTextHeading,
+          lineHeight,
+          cursor: 'pointer',
+          transition: `all ${motionDurationSlow}, visibility 0s`,
+
+          [`> ${componentCls}-header-text`]: {
+            flex: 'auto',
+          },
+
+          '&:focus': {
+            outline: 'none',
+          },
+
+          // >>>>> Arrow
+          [`${componentCls}-expand-icon`]: {
+            height: fontSize * lineHeight,
+            display: 'flex',
+            alignItems: 'center',
+            paddingInlineEnd: marginSM,
+          },
+
+          [`${componentCls}-arrow`]: {
+            ...resetIcon(),
+            fontSize: fontSizeIcon,
+
+            svg: {
+              transition: `transform ${motionDurationSlow}`,
+            },
+          },
+
+          // >>>>> Text
+          [`${componentCls}-header-text`]: {
+            marginInlineEnd: 'auto',
+          },
+        },
+
+        [`${componentCls}-header-collapsible-only`]: {
+          cursor: 'default',
+
+          [`${componentCls}-header-text`]: {
+            flex: 'none',
+            cursor: 'pointer',
+          },
+          [`${componentCls}-expand-icon`]: {
+            cursor: 'pointer',
+          },
+        },
+
+        [`${componentCls}-icon-collapsible-only`]: {
+          cursor: 'default',
+
+          [`${componentCls}-expand-icon`]: {
+            cursor: 'pointer',
+          },
+        },
+
+        [`&${componentCls}-no-arrow`]: {
+          [`> ${componentCls}-header`]: {
+            paddingInlineStart: paddingSM,
+          },
+        },
+      },
+
+      [`${componentCls}-content`]: {
+        color: colorText,
+        backgroundColor: collapseContentBg,
+        borderTop: borderBase,
+
+        [`& > ${componentCls}-content-box`]: {
+          padding: `${padding}px ${collapseContentPaddingHorizontal}px`,
+        },
+
+        [`&-hidden`]: {
+          display: 'none',
+        },
+      },
+
+      [`${componentCls}-item:last-child`]: {
+        [`> ${componentCls}-content`]: {
+          borderRadius: `0 0 ${collapsePanelBorderRadius}px ${collapsePanelBorderRadius}px`,
+        },
+      },
+
+      [`& ${componentCls}-item-disabled > ${componentCls}-header`]: {
+        [`
+          &,
+          & > .arrow
+        `]: {
+          color: colorTextDisabled,
+          cursor: 'not-allowed',
+        },
+      },
+
+      // ========================== Icon Position ==========================
+      [`&${componentCls}-icon-position-end`]: {
+        [`& > ${componentCls}-item`]: {
+          [`> ${componentCls}-header`]: {
+            [`${componentCls}-expand-icon`]: {
+              order: 1,
+              paddingInlineEnd: 0,
+              paddingInlineStart: marginSM,
+            },
+          },
+        },
+      },
+    },
+  }
+}
+
+const genArrowStyle: GenerateStyle<CollapseToken> = (token) => {
+  const { componentCls } = token
+
+  const fixedSelector = `> ${componentCls}-item > ${componentCls}-header ${componentCls}-arrow svg`
+
+  return {
+    [`${componentCls}-rtl`]: {
+      [fixedSelector]: {
+        transform: `rotate(180deg)`,
+      },
+    },
+  }
+}
+
+const genBorderlessStyle: GenerateStyle<CollapseToken> = (token) => {
+  const {
+    componentCls,
+    collapseHeaderBg,
+    paddingXXS,
+
+    colorBorder,
+  } = token
+
+  return {
+    [`${componentCls}-borderless`]: {
+      backgroundColor: collapseHeaderBg,
+      border: 0,
+
+      [`> ${componentCls}-item`]: {
+        borderBottom: `1px solid ${colorBorder}`,
+      },
+
+      [`
+        > ${componentCls}-item:last-child,
+        > ${componentCls}-item:last-child ${componentCls}-header
+      `]: {
+        borderRadius: 0,
+      },
+
+      [`> ${componentCls}-item:last-child`]: {
+        borderBottom: 0,
+      },
+
+      [`> ${componentCls}-item > ${componentCls}-content`]: {
+        backgroundColor: 'transparent',
+        borderTop: 0,
+      },
+
+      [`> ${componentCls}-item > ${componentCls}-content > ${componentCls}-content-box`]: {
+        paddingTop: paddingXXS,
+      },
+    },
+  }
+}
+
+const genGhostStyle: GenerateStyle<CollapseToken> = (token) => {
+  const { componentCls, paddingSM } = token
+
+  return {
+    [`${componentCls}-ghost`]: {
+      backgroundColor: 'transparent',
+      border: 0,
+      [`> ${componentCls}-item`]: {
+        borderBottom: 0,
+        [`> ${componentCls}-content`]: {
+          backgroundColor: 'transparent',
+          border: 0,
+          [`> ${componentCls}-content-box`]: {
+            paddingBlock: paddingSM,
+          },
+        },
+      },
+    },
+  }
+}
+
+export default genComponentStyleHook('Collapse', (token) => {
+  const collapseToken = mergeToken<CollapseToken>(token, {
+    collapseContentBg: token.colorBgContainer,
+    collapseHeaderBg: token.colorFillAlter,
+    collapseHeaderPadding: `${token.paddingSM}px ${token.padding}px`,
+    collapsePanelBorderRadius: token.borderRadiusLG,
+    collapseContentPaddingHorizontal: 16, // Fixed value
+  })
+
+  return [
+    genBaseStyle(collapseToken),
+    genBorderlessStyle(collapseToken),
+    genGhostStyle(collapseToken),
+    genArrowStyle(collapseToken),
+    genCollapseMotion(collapseToken),
+  ]
+})

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

@@ -0,0 +1,22 @@
+---
+category: Components
+type: Data Display
+title: Comment
+cover: https://gw.alipayobjects.com/zos/alicdn/ILhxpGzBO/Comment.svg
+---
+
+A comment displays user feedback and discussion to website content.
+
+## When To Use
+
+Comments can be used to enable discussions on an entity such as a page, blog post, issue or other.
+
+## API
+
+| Property | Description                                                                      | Type          | Default |
+| -------- | -------------------------------------------------------------------------------- | ------------- | ------- |
+| actions  | List of action items rendered below the comment content                          | Array \| slot | -       |
+| author   | The element to display as the comment author                                     | string\|slot  | -       |
+| avatar   | The element to display as the comment avatar - generally an antd `Avatar` or src | string\|slot  | -       |
+| content  | The main content of the comment                                                  | string\|slot  | -       |
+| datetime | A datetime element containing the time to be displayed                           | string\|slot  | -       |

package/src/comment/index.tsx

@@ -0,0 +1,118 @@
+import type { ExtractPropTypes } from 'vue'
+import { defineComponent } from 'vue'
+
+import { flattenChildren } from '../_util/props-util'
+import type { CustomSlotsType, VueNode } from '../_util/type'
+import { withInstall } from '../_util/type'
+import PropTypes from '../_util/vue-types'
+import useConfigInject from '../config-provider/hooks/useConfigInject'
+// CSSINJS
+import useStyle from './style'
+
+export const commentProps = () => ({
+  actions: Array,
+  /** The element to display as the comment author. */
+  author: PropTypes.any,
+  /** The element to display as the comment avatar - generally an antd Avatar */
+  avatar: PropTypes.any,
+  /** The main content of the comment */
+  content: PropTypes.any,
+  /** Comment prefix defaults to '.ant-comment' */
+  prefixCls: String,
+  /** A datetime element containing the time to be displayed */
+  datetime: PropTypes.any,
+})
+
+export type CommentProps = Partial<ExtractPropTypes<ReturnType<typeof commentProps>>>
+
+const Comment = defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'AComment',
+  inheritAttrs: false,
+  props: commentProps(),
+  slots: Object as CustomSlotsType<{
+    actions: any
+    author: any
+    avatar: any
+    content: any
+    datetime: any
+    default: any
+  }>,
+  setup(props, { slots, attrs }) {
+    const { prefixCls, direction } = useConfigInject('comment', props)
+
+    // style
+    const [wrapSSR, hashId] = useStyle(prefixCls)
+
+    const renderNested = (prefixCls: string, children: VueNode) => {
+      return <div class={`${prefixCls}-nested`}>{children}</div>
+    }
+    const getAction = (actions: VueNode[]) => {
+      if (!actions || !actions.length) {
+        return null
+      }
+      const actionList = actions.map((action, index) => <li key={`action-${index}`}>{action}</li>)
+      return actionList
+    }
+    return () => {
+      const pre = prefixCls.value
+
+      const actions: any[] = props.actions ?? slots.actions?.()
+      const author = props.author ?? slots.author?.()
+      const avatar = props.avatar ?? slots.avatar?.()
+      const content = props.content ?? slots.content?.()
+      const datetime = props.datetime ?? slots.datetime?.()
+
+      const avatarDom = (
+        <div class={`${pre}-avatar`}>
+          {typeof avatar === 'string' ? <img src={avatar} alt="comment-avatar" /> : avatar}
+        </div>
+      )
+
+      const actionDom = actions ? (
+        <ul class={`${pre}-actions`}>{getAction(Array.isArray(actions) ? actions : [actions])}</ul>
+      ) : null
+
+      const authorContent = (
+        <div class={`${pre}-content-author`}>
+          {author && <span class={`${pre}-content-author-name`}>{author}</span>}
+          {datetime && <span class={`${pre}-content-author-time`}>{datetime}</span>}
+        </div>
+      )
+
+      const contentDom = (
+        <div class={`${pre}-content`}>
+          {authorContent}
+          <div class={`${pre}-content-detail`}>{content}</div>
+          {actionDom}
+        </div>
+      )
+
+      const comment = (
+        <div class={`${pre}-inner`}>
+          {avatarDom}
+          {contentDom}
+        </div>
+      )
+      const children = flattenChildren(slots.default?.())
+      return wrapSSR(
+        <div
+          {...attrs}
+          class={[
+            pre,
+            {
+              [`${pre}-rtl`]: direction.value === 'rtl',
+            },
+            attrs.class,
+            hashId.value,
+          ]}
+        >
+          {comment}
+          {children && children.length ? renderNested(pre, children) : null}
+        </div>,
+      )
+    }
+  },
+})
+
+export default withInstall(Comment)

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

@@ -0,0 +1,23 @@
+---
+category: Components
+type: 数据展示
+title: Comment
+subtitle: 评论
+cover: https://gw.alipayobjects.com/zos/alicdn/ILhxpGzBO/Comment.svg
+---
+
+对网站内容的反馈、评价和讨论。
+
+## 何时使用
+
+评论组件可用于对事物的讨论，例如页面、博客文章、问题等等。
+
+## API
+
+| Property | Description                                            | Type         | Default |
+| -------- | ------------------------------------------------------ | ------------ | ------- |
+| actions  | 在评论内容下面呈现的操作项列表                         | Array\|slot  | -       |
+| author   | 要显示为注释作者的元素                                 | string\|slot | -       |
+| avatar   | 要显示为评论头像的元素 - 通常是 antd `Avatar` 或者 src | string\|slot | -       |
+| content  | 评论的主要内容                                         | string\|slot | -       |
+| datetime | 展示时间描述                                           | string\|slot | -       |