@antsoo-lib/components 0.1.2 → 0.1.4

package/src/descriptions/style/index.ts

@@ -0,0 +1,208 @@
+import type { CSSObject } from '../../_util/cssinjs'
+import { resetComponent, textEllipsis } from '../../style'
+import type { FullToken, GenerateStyle } from '../../theme/internal'
+import { genComponentStyleHook, mergeToken } from '../../theme/internal'
+
+interface DescriptionsToken extends FullToken<'Descriptions'> {
+  descriptionsTitleMarginBottom: number
+  descriptionsExtraColor: string
+  descriptionItemPaddingBottom: number
+  descriptionsDefaultPadding: string
+  descriptionsBg: string
+  descriptionsMiddlePadding: string
+  descriptionsSmallPadding: string
+  descriptionsItemLabelColonMarginRight: number
+  descriptionsItemLabelColonMarginLeft: number
+}
+
+const genBorderedStyle = (token: DescriptionsToken): CSSObject => {
+  const {
+    componentCls,
+    descriptionsSmallPadding,
+    descriptionsDefaultPadding,
+    descriptionsMiddlePadding,
+    descriptionsBg,
+  } = token
+  return {
+    [`&${componentCls}-bordered`]: {
+      [`${componentCls}-view`]: {
+        border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+        '> table': {
+          tableLayout: 'auto',
+          borderCollapse: 'collapse',
+        },
+      },
+      [`${componentCls}-item-label, ${componentCls}-item-content`]: {
+        padding: descriptionsDefaultPadding,
+        borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+        '&:last-child': {
+          borderInlineEnd: 'none',
+        },
+      },
+      [`${componentCls}-item-label`]: {
+        backgroundColor: descriptionsBg,
+        '&::after': {
+          display: 'none',
+        },
+      },
+      [`${componentCls}-row`]: {
+        borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+        '&:last-child': {
+          borderBottom: 'none',
+        },
+      },
+      [`&${componentCls}-middle`]: {
+        [`${componentCls}-item-label, ${componentCls}-item-content`]: {
+          padding: descriptionsMiddlePadding,
+        },
+      },
+      [`&${componentCls}-small`]: {
+        [`${componentCls}-item-label, ${componentCls}-item-content`]: {
+          padding: descriptionsSmallPadding,
+        },
+      },
+    },
+  }
+}
+
+const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token: DescriptionsToken) => {
+  const {
+    componentCls,
+    descriptionsExtraColor,
+    descriptionItemPaddingBottom,
+    descriptionsItemLabelColonMarginRight,
+    descriptionsItemLabelColonMarginLeft,
+    descriptionsTitleMarginBottom,
+  } = token
+  return {
+    [componentCls]: {
+      ...resetComponent(token),
+      ...genBorderedStyle(token),
+      [`&-rtl`]: {
+        direction: 'rtl',
+      },
+      [`${componentCls}-header`]: {
+        display: 'flex',
+        alignItems: 'center',
+        marginBottom: descriptionsTitleMarginBottom,
+      },
+      [`${componentCls}-title`]: {
+        ...textEllipsis,
+        flex: 'auto',
+        color: token.colorText,
+        fontWeight: token.fontWeightStrong,
+        fontSize: token.fontSizeLG,
+        lineHeight: token.lineHeightLG,
+      },
+      [`${componentCls}-extra`]: {
+        marginInlineStart: 'auto',
+        color: descriptionsExtraColor,
+        fontSize: token.fontSize,
+      },
+      [`${componentCls}-view`]: {
+        width: '100%',
+        borderRadius: token.borderRadiusLG,
+        table: {
+          width: '100%',
+          tableLayout: 'fixed',
+        },
+      },
+      [`${componentCls}-row`]: {
+        '> th, > td': {
+          paddingBottom: descriptionItemPaddingBottom,
+        },
+        '&:last-child': {
+          borderBottom: 'none',
+        },
+      },
+      [`${componentCls}-item-label`]: {
+        color: token.colorText,
+        fontWeight: 'normal',
+        fontSize: token.fontSize,
+        lineHeight: token.lineHeight,
+        textAlign: `start`,
+
+        '&::after': {
+          content: '":"',
+          position: 'relative',
+          top: -0.5, // magic for position
+          marginInline: `${descriptionsItemLabelColonMarginLeft}px ${descriptionsItemLabelColonMarginRight}px`,
+        },
+
+        [`&${componentCls}-item-no-colon::after`]: {
+          content: '""',
+        },
+      },
+      [`${componentCls}-item-no-label`]: {
+        '&::after': {
+          margin: 0,
+          content: '""',
+        },
+      },
+      [`${componentCls}-item-content`]: {
+        display: 'table-cell',
+        flex: 1,
+        color: token.colorText,
+        fontSize: token.fontSize,
+        lineHeight: token.lineHeight,
+        wordBreak: 'break-word',
+        overflowWrap: 'break-word',
+      },
+      [`${componentCls}-item`]: {
+        paddingBottom: 0,
+        verticalAlign: 'top',
+        '&-container': {
+          display: 'flex',
+          [`${componentCls}-item-label`]: {
+            display: 'inline-flex',
+            alignItems: 'baseline',
+          },
+          [`${componentCls}-item-content`]: {
+            display: 'inline-flex',
+            alignItems: 'baseline',
+          },
+        },
+      },
+      '&-middle': {
+        [`${componentCls}-row`]: {
+          '> th, > td': {
+            paddingBottom: token.paddingSM,
+          },
+        },
+      },
+      '&-small': {
+        [`${componentCls}-row`]: {
+          '> th, > td': {
+            paddingBottom: token.paddingXS,
+          },
+        },
+      },
+    },
+  }
+}
+// ============================== Export ==============================
+export default genComponentStyleHook('Descriptions', (token) => {
+  const descriptionsBg = token.colorFillAlter
+  const descriptionsTitleMarginBottom = token.fontSizeSM * token.lineHeightSM
+  const descriptionsExtraColor = token.colorText
+  const descriptionsSmallPadding = `${token.paddingXS}px ${token.padding}px`
+  const descriptionsDefaultPadding = `${token.padding}px ${token.paddingLG}px`
+  const descriptionsMiddlePadding = `${token.paddingSM}px ${token.paddingLG}px`
+  const descriptionItemPaddingBottom = token.padding
+  const descriptionsItemLabelColonMarginRight = token.marginXS
+  const descriptionsItemLabelColonMarginLeft = token.marginXXS / 2
+
+  const descriptionToken = mergeToken<DescriptionsToken>(token, {
+    descriptionsBg,
+    descriptionsTitleMarginBottom,
+    descriptionsExtraColor,
+    descriptionItemPaddingBottom,
+    descriptionsSmallPadding,
+    descriptionsDefaultPadding,
+    descriptionsMiddlePadding,
+    descriptionsItemLabelColonMarginRight,
+    descriptionsItemLabelColonMarginLeft,
+  })
+
+  return [genDescriptionStyles(descriptionToken)]
+})

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

@@ -0,0 +1,24 @@
+---
+category: Components
+type: Layout
+title: Divider
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7sMiTbzvaDoAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*KPSEQ74PLg4AAAAAAAAAAAAADrJ8AQ/original
+---
+
+A divider line separates different content.
+
+## When To Use
+
+- Divide sections of article.
+- Divide inline text and links such as the operation column of table.
+
+## API
+
+| Property          | Description                                                                                                       | Type                          | Default      | Version |
+| ----------------- | ----------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------------ | ------- |
+| dashed            | whether line is dashed                                                                                            | boolean                       | false        |         |
+| orientation       | position of title inside divider                                                                                  | `left` \| `right` \| `center` | `center`     |         |
+| orientationMargin | The margin-left/right between the title and its closest border, while the `orientation` must be `left` or `right` | string \| number              | -            | 3.0     |
+| plain             | Divider text show as plain style                                                                                  | boolean                       | true         | 2.2.0   |
+| type              | direction type of divider                                                                                         | `horizontal` \| `vertical`    | `horizontal` |         |

package/src/divider/index.tsx

@@ -0,0 +1,98 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { computed, defineComponent } from 'vue'
+
+import { flattenChildren } from '../_util/props-util'
+import { withInstall } from '../_util/type'
+import useConfigInject from '../config-provider/hooks/useConfigInject'
+import useStyle from './style'
+
+export const dividerProps = () => ({
+  prefixCls: String,
+  type: {
+    type: String as PropType<'horizontal' | 'vertical' | ''>,
+    default: 'horizontal',
+  },
+  dashed: {
+    type: Boolean,
+    default: false,
+  },
+  orientation: {
+    type: String as PropType<'left' | 'right' | 'center'>,
+    default: 'center',
+  },
+  plain: {
+    type: Boolean,
+    default: false,
+  },
+  orientationMargin: [String, Number],
+})
+export type DividerProps = Partial<ExtractPropTypes<ReturnType<typeof dividerProps>>>
+
+const Divider = defineComponent({
+  name: 'ADivider',
+  inheritAttrs: false,
+  compatConfig: { MODE: 3 },
+  props: dividerProps(),
+  setup(props, { slots, attrs }) {
+    const { prefixCls: prefixClsRef, direction } = useConfigInject('divider', props)
+    const [wrapSSR, hashId] = useStyle(prefixClsRef)
+    const hasCustomMarginLeft = computed(
+      () => props.orientation === 'left' && props.orientationMargin != null,
+    )
+    const hasCustomMarginRight = computed(
+      () => props.orientation === 'right' && props.orientationMargin != null,
+    )
+    const classString = computed(() => {
+      const { type, dashed, plain } = props
+      const prefixCls = prefixClsRef.value
+      return {
+        [prefixCls]: true,
+        [hashId.value]: !!hashId.value,
+        [`${prefixCls}-${type}`]: true,
+        [`${prefixCls}-dashed`]: !!dashed,
+        [`${prefixCls}-plain`]: !!plain,
+        [`${prefixCls}-rtl`]: direction.value === 'rtl',
+        [`${prefixCls}-no-default-orientation-margin-left`]: hasCustomMarginLeft.value,
+        [`${prefixCls}-no-default-orientation-margin-right`]: hasCustomMarginRight.value,
+      }
+    })
+    const innerStyle = computed(() => {
+      const marginValue =
+        typeof props.orientationMargin === 'number'
+          ? `${props.orientationMargin}px`
+          : props.orientationMargin
+      return {
+        ...(hasCustomMarginLeft.value && { marginLeft: marginValue }),
+        ...(hasCustomMarginRight.value && { marginRight: marginValue }),
+      }
+    })
+    const orientationPrefix = computed(() =>
+      props.orientation.length > 0 ? `-${props.orientation}` : props.orientation,
+    )
+
+    return () => {
+      const children = flattenChildren(slots.default?.())
+      return wrapSSR(
+        <div
+          {...attrs}
+          class={[
+            classString.value,
+            children.length
+              ? `${prefixClsRef.value}-with-text ${prefixClsRef.value}-with-text${orientationPrefix.value}`
+              : '',
+            attrs.class,
+          ]}
+          role="separator"
+        >
+          {children.length ? (
+            <span class={`${prefixClsRef.value}-inner-text`} style={innerStyle.value}>
+              {children}
+            </span>
+          ) : null}
+        </div>,
+      )
+    }
+  },
+})
+
+export default withInstall(Divider)

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

@@ -0,0 +1,25 @@
+---
+category: Components
+type: 布局
+title: Divider
+subtitle: 分割线
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7sMiTbzvaDoAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*KPSEQ74PLg4AAAAAAAAAAAAADrJ8AQ/original
+---
+
+区隔内容的分割线。
+
+## 何时使用
+
+- 对不同章节的文本段落进行分割。
+- 对行内文字/链接进行分割，例如表格的操作列。
+
+## API
+
+| 参数              | 说明                                                                                            | 类型                          | 默认值       | 版本  |
+| ----------------- | ----------------------------------------------------------------------------------------------- | ----------------------------- | ------------ | ----- |
+| dashed            | 是否虚线                                                                                        | boolean                       | false        |       |
+| orientation       | 分割线标题的位置                                                                                | `left` \| `right` \| `center` | `center`     |
+| orientationMargin | 标题和最近 left/right 边框之间的距离，去除了分割线，同时 `orientation` 必须为 `left` 或 `right` | string \| number              | -            | 3.0   |
+| plain             | 文字是否显示为普通正文样式                                                                      | boolean                       | false        | 2.2.0 |
+| type              | 水平还是垂直类型                                                                                | `horizontal` \| `vertical`    | `horizontal` |       |

package/src/divider/style/index.ts

@@ -0,0 +1,167 @@
+import type { CSSObject } from '../../_util/cssinjs'
+import { resetComponent } from '../../style'
+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 {
+  sizePaddingEdgeHorizontal: number
+}
+
+interface DividerToken extends FullToken<'Divider'> {
+  dividerVerticalGutterMargin: number
+  dividerHorizontalWithTextGutterMargin: number
+  dividerHorizontalGutterMargin: number
+}
+
+// ============================== Shared ==============================
+const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject => {
+  const { componentCls, sizePaddingEdgeHorizontal, colorSplit, lineWidth } = token
+
+  return {
+    [componentCls]: {
+      ...resetComponent(token),
+      borderBlockStart: `${lineWidth}px solid ${colorSplit}`,
+
+      // vertical
+      '&-vertical': {
+        position: 'relative',
+        top: '-0.06em',
+        display: 'inline-block',
+        height: '0.9em',
+        margin: `0 ${token.dividerVerticalGutterMargin}px`,
+        verticalAlign: 'middle',
+        borderTop: 0,
+        borderInlineStart: `${lineWidth}px solid ${colorSplit}`,
+      },
+
+      '&-horizontal': {
+        display: 'flex',
+        clear: 'both',
+        width: '100%',
+        minWidth: '100%', // Fix https://github.com/ant-design/ant-design/issues/10914
+        margin: `${token.dividerHorizontalGutterMargin}px 0`,
+      },
+
+      [`&-horizontal${componentCls}-with-text`]: {
+        display: 'flex',
+        alignItems: 'center',
+        margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`,
+        color: token.colorTextHeading,
+        fontWeight: 500,
+        fontSize: token.fontSizeLG,
+        whiteSpace: 'nowrap',
+        textAlign: 'center',
+        borderBlockStart: `0 ${colorSplit}`,
+
+        '&::before, &::after': {
+          position: 'relative',
+          width: '50%',
+          borderBlockStart: `${lineWidth}px solid transparent`,
+          // Chrome not accept `inherit` in `border-top`
+          borderBlockStartColor: 'inherit',
+          borderBlockEnd: 0,
+          transform: 'translateY(50%)',
+          content: "''",
+        },
+      },
+
+      [`&-horizontal${componentCls}-with-text-left`]: {
+        '&::before': {
+          width: '5%',
+        },
+
+        '&::after': {
+          width: '95%',
+        },
+      },
+
+      [`&-horizontal${componentCls}-with-text-right`]: {
+        '&::before': {
+          width: '95%',
+        },
+
+        '&::after': {
+          width: '5%',
+        },
+      },
+
+      [`${componentCls}-inner-text`]: {
+        display: 'inline-block',
+        padding: '0 1em',
+      },
+
+      '&-dashed': {
+        background: 'none',
+        borderColor: colorSplit,
+        borderStyle: 'dashed',
+        borderWidth: `${lineWidth}px 0 0`,
+      },
+
+      [`&-horizontal${componentCls}-with-text${componentCls}-dashed`]: {
+        '&::before, &::after': {
+          borderStyle: 'dashed none none',
+        },
+      },
+
+      [`&-vertical${componentCls}-dashed`]: {
+        borderInlineStartWidth: lineWidth,
+        borderInlineEnd: 0,
+        borderBlockStart: 0,
+        borderBlockEnd: 0,
+      },
+
+      [`&-plain${componentCls}-with-text`]: {
+        color: token.colorText,
+        fontWeight: 'normal',
+        fontSize: token.fontSize,
+      },
+
+      [`&-horizontal${componentCls}-with-text-left${componentCls}-no-default-orientation-margin-left`]:
+        {
+          '&::before': {
+            width: 0,
+          },
+
+          '&::after': {
+            width: '100%',
+          },
+
+          [`${componentCls}-inner-text`]: {
+            paddingInlineStart: sizePaddingEdgeHorizontal,
+          },
+        },
+
+      [`&-horizontal${componentCls}-with-text-right${componentCls}-no-default-orientation-margin-right`]:
+        {
+          '&::before': {
+            width: '100%',
+          },
+
+          '&::after': {
+            width: 0,
+          },
+
+          [`${componentCls}-inner-text`]: {
+            paddingInlineEnd: sizePaddingEdgeHorizontal,
+          },
+        },
+    },
+  }
+}
+
+// ============================== Export ==============================
+export default genComponentStyleHook(
+  'Divider',
+  (token) => {
+    const dividerToken = mergeToken<DividerToken>(token, {
+      dividerVerticalGutterMargin: token.marginXS,
+      dividerHorizontalWithTextGutterMargin: token.margin,
+      dividerHorizontalGutterMargin: token.marginLG,
+    })
+    return [genSharedDividerStyle(dividerToken)]
+  },
+  {
+    sizePaddingEdgeHorizontal: 0,
+  },
+)

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

@@ -0,0 +1,60 @@
+---
+category: Components
+type: Feedback
+title: Drawer
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*v3TvSq2E0HAAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4wzwRIBLuqEAAAAAAAAAAAAADrJ8AQ/original
+---
+
+A panel which slides in from the edge of the screen.
+
+## When To Use
+
+A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.
+
+- Use a Form to create or edit a set of information.
+- Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
+- When the same Form is needed in multiple places.
+
+## API
+
+**🚨 Note:** v4 use `rootClassName` & `rootStyle` to config wrapper style instead of `class` & `style` in v4 to align the API with Modal.
+
+| Props               | Description                                                                        | Type                                            | Default             | Version |
+| ------------------- | ---------------------------------------------------------------------------------- | ----------------------------------------------- | ------------------- | ------- |
+| autofocus           | Whether Drawer should get focused after open                                       | boolean                                         | true                | 3.0.0   |
+| bodyStyle           | Style of the drawer content part                                                   | CSSProperties                                   | -                   |         |
+| class               | Config Drawer Panel className. Use `rootClassName` if want to config top dom style | string                                          | -                   |         |
+| closable            | Whether a close (x) button is visible on top left of the Drawer dialog or not      | boolean                                         | true                |         |
+| closeIcon           | Custom close icon                                                                  | VNode \| slot                                   | `<CloseOutlined />` | 3.0.0   |
+| contentWrapperStyle | Style of the drawer wrapper of content part                                        | CSSProperties                                   | -                   | 3.0.0   |
+| destroyOnClose      | Whether to unmount child components on closing drawer or not                       | boolean                                         | false               |         |
+| extra               | Extra actions area at corner                                                       | VNode \| slot                                   | -                   | 3.0.0   |
+| footer              | The footer for Drawer                                                              | VNode \| slot                                   | -                   | 3.0.0   |
+| footerStyle         | Style of the drawer footer part                                                    | CSSProperties                                   | -                   | 3.0.0   |
+| forceRender         | Prerender Drawer component forcely                                                 | boolean                                         | false               | 3.0.0   |
+| getContainer        | mounted node and display window for Drawer                                         | HTMLElement \| `() => HTMLElement` \| Selectors | 'body'              |         |
+| headerStyle         | Style of the drawer header part                                                    | CSSProperties                                   | -                   | 3.0.0   |
+| height              | Placement is `top` or `bottom`, height of the Drawer dialog                        | string \| number                                | 378                 |         |
+| keyboard            | Whether support press esc to close                                                 | boolean                                         | true                |         |
+| mask                | Whether to show mask or not                                                        | Boolean                                         | true                |         |
+| maskClosable        | Clicking on the mask (area outside the Drawer) to close the Drawer or not          | boolean                                         | true                |         |
+| maskStyle           | Style for Drawer's mask element                                                    | CSSProperties                                   | {}                  |         |
+| placement           | The placement of the Drawer                                                        | 'top' \| 'right' \| 'bottom' \| 'left'          | 'right'             |         |
+| push                | Nested drawers push behavior                                                       | boolean \| {distance: string \| number}         | { distance: 180 }   | 3.0.0   |
+| rootClassName       | The class name of the container of the Drawer dialog                               | string                                          | -                   | 4.0     |
+| rootStyle           | Style of wrapper element which **contains mask** compare to `style`                | CSSProperties                                   | -                   | 4.0     |
+| style               | Style of Drawer panel. Use `bodyStyle` if want to config body only                 | CSSProperties                                   | -                   |         |
+| size                | presetted size of drawer, default `378px` and large `736px`                        | `default` \| `large`                            | `default`           | 3.0.0   |
+| style               | Style of wrapper element which contains mask compare to drawerStyle                | CSSProperties                                   | -                   |         |
+| title               | The title for Drawer                                                               | string \| slot                                  | -                   |         |
+| open(v-model)       | Whether the Drawer dialog is visible or not                                        | boolean                                         | -                   | 4.0     |
+| width               | Width of the Drawer dialog                                                         | string \| number                                | 378                 |         |
+| zIndex              | The `z-index` of the Drawer                                                        | Number                                          | 1000                |         |
+
+## Events
+
+| Events Name     | Description                                                                                    | Type           | Default | Version |
+| --------------- | ---------------------------------------------------------------------------------------------- | -------------- | ------- | ------- |
+| afterOpenChange | Callback after the animation ends when switching drawers.                                      | function(open) | -       | 4.0     |
+| close           | Specify a callback that will be called when a user clicks mask, close button or Cancel button. | function(e)    | -       |         |