@antsoo-lib/components 0.1.11 → 0.1.13

package/src/date-picker/util.ts

@@ -1,102 +0,0 @@
-import type { SelectCommonPlacement } from '../_util/transition'
-import type { DirectionType } from '../config-provider'
-import type { PickerMode } from '../vc-picker/interface'
-import type { PickerLocale } from './generatePicker'
-
-export function getPlaceholder(
-  locale: PickerLocale,
-  picker: PickerMode,
-  customizePlaceholder?: string,
-): string {
-  if (customizePlaceholder !== undefined) {
-    return customizePlaceholder
-  }
-
-  if (picker === 'year' && locale.lang.yearPlaceholder) {
-    return locale.lang.yearPlaceholder
-  }
-  if (picker === 'quarter' && locale.lang.quarterPlaceholder) {
-    return locale.lang.quarterPlaceholder
-  }
-  if (picker === 'month' && locale.lang.monthPlaceholder) {
-    return locale.lang.monthPlaceholder
-  }
-  if (picker === 'week' && locale.lang.weekPlaceholder) {
-    return locale.lang.weekPlaceholder
-  }
-  if (picker === 'time' && locale.timePickerLocale.placeholder) {
-    return locale!.timePickerLocale.placeholder
-  }
-  return locale.lang.placeholder
-}
-
-export function getRangePlaceholder(
-  locale: PickerLocale,
-  picker: PickerMode,
-  customizePlaceholder?: [string, string],
-) {
-  if (customizePlaceholder !== undefined) {
-    return customizePlaceholder
-  }
-
-  if (picker === 'year' && locale.lang.yearPlaceholder) {
-    return locale.lang.rangeYearPlaceholder
-  }
-  if (picker === 'month' && locale.lang.monthPlaceholder) {
-    return locale.lang.rangeMonthPlaceholder
-  }
-  if (picker === 'week' && locale.lang.weekPlaceholder) {
-    return locale.lang.rangeWeekPlaceholder
-  }
-  if (picker === 'time' && locale.timePickerLocale.placeholder) {
-    return locale!.timePickerLocale.rangePlaceholder
-  }
-  return locale.lang.rangePlaceholder
-}
-
-export function transPlacement2DropdownAlign(
-  direction: DirectionType,
-  placement?: SelectCommonPlacement,
-) {
-  const overflow = {
-    adjustX: 1,
-    adjustY: 1,
-  }
-  switch (placement) {
-    case 'bottomLeft': {
-      return {
-        points: ['tl', 'bl'],
-        offset: [0, 4],
-        overflow,
-      }
-    }
-    case 'bottomRight': {
-      return {
-        points: ['tr', 'br'],
-        offset: [0, 4],
-        overflow,
-      }
-    }
-    case 'topLeft': {
-      return {
-        points: ['bl', 'tl'],
-        offset: [0, -4],
-        overflow,
-      }
-    }
-    case 'topRight': {
-      return {
-        points: ['br', 'tr'],
-        offset: [0, -4],
-        overflow,
-      }
-    }
-    default: {
-      return {
-        points: direction === 'rtl' ? ['tr', 'br'] : ['tl', 'bl'],
-        offset: [0, 4],
-        overflow,
-      }
-    }
-  }
-}

package/src/descriptions/Cell.tsx

@@ -1,75 +0,0 @@
-import type { CSSProperties, FunctionalComponent, HTMLAttributes, VNodeTypes } from 'vue'
-
-function notEmpty(val: any) {
-  return val !== undefined && val !== null
-}
-
-interface CellProps extends HTMLAttributes {
-  itemPrefixCls: string
-  span: number
-  component: string
-  labelStyle?: CSSProperties
-  contentStyle?: CSSProperties
-  bordered?: boolean
-  label?: number | VNodeTypes
-  content?: number | VNodeTypes
-  colon?: boolean
-}
-
-const Cell: FunctionalComponent<CellProps> = (props) => {
-  const {
-    itemPrefixCls,
-    component,
-    span,
-    labelStyle,
-    contentStyle,
-    bordered,
-    label,
-    content,
-    colon,
-  } = props
-  const Component = component as any
-  if (bordered) {
-    return (
-      <Component
-        class={[
-          {
-            [`${itemPrefixCls}-item-label`]: notEmpty(label),
-            [`${itemPrefixCls}-item-content`]: notEmpty(content),
-          },
-        ]}
-        colSpan={span}
-      >
-        {notEmpty(label) && <span style={labelStyle}>{label}</span>}
-        {notEmpty(content) && <span style={contentStyle}>{content}</span>}
-      </Component>
-    )
-  }
-
-  return (
-    <Component class={[`${itemPrefixCls}-item`]} colSpan={span}>
-      <div class={`${itemPrefixCls}-item-container`}>
-        {(label || label === 0) && (
-          <span
-            class={[
-              `${itemPrefixCls}-item-label`,
-              {
-                [`${itemPrefixCls}-item-no-colon`]: !colon,
-              },
-            ]}
-            style={labelStyle}
-          >
-            {label}
-          </span>
-        )}
-        {(content || content === 0) && (
-          <span class={`${itemPrefixCls}-item-content`} style={contentStyle}>
-            {content}
-          </span>
-        )}
-      </div>
-    </Component>
-  )
-}
-
-export default Cell

package/src/descriptions/Row.tsx

@@ -1,139 +0,0 @@
-import type { CSSProperties, FunctionalComponent, VNode } from 'vue'
-import { inject, ref } from 'vue'
-
-import { getClass, getSlot, getStyle } from '../_util/props-util'
-import Cell from './Cell'
-import { descriptionsContext } from './index'
-
-interface CellConfig {
-  component: string | [string, string]
-  type: string
-  showLabel?: boolean
-  showContent?: boolean
-}
-
-export interface RowProps {
-  prefixCls: string
-  vertical: boolean
-  row: any[]
-  bordered: boolean
-  colon: boolean
-  index: number
-}
-
-const Row: FunctionalComponent<RowProps> = (props) => {
-  const renderCells = (
-    items: VNode[],
-    { colon, prefixCls, bordered },
-    {
-      component,
-      type,
-      showLabel,
-      showContent,
-      labelStyle: rootLabelStyle,
-      contentStyle: rootContentStyle,
-    }: CellConfig & { labelStyle?: CSSProperties; contentStyle?: CSSProperties },
-  ) => {
-    return items.map((item, index) => {
-      const itemProps = item.props || {}
-      const {
-        prefixCls: itemPrefixCls = prefixCls,
-        span = 1,
-        labelStyle = itemProps['label-style'],
-        contentStyle = itemProps['content-style'],
-        label = (item.children as any)?.label?.(),
-      } = itemProps
-      const children = getSlot(item)
-      const className = getClass(item)
-      const style = getStyle(item)
-      const { key } = item
-      if (typeof component === 'string') {
-        return (
-          <Cell
-            key={`${type}-${String(key) || index}`}
-            class={className}
-            style={style}
-            labelStyle={{ ...rootLabelStyle, ...labelStyle }}
-            contentStyle={{ ...rootContentStyle, ...contentStyle }}
-            span={span}
-            colon={colon}
-            component={component}
-            itemPrefixCls={itemPrefixCls}
-            bordered={bordered}
-            label={showLabel ? label : null}
-            content={showContent ? children : null}
-          />
-        )
-      }
-
-      return [
-        <Cell
-          key={`label-${String(key) || index}`}
-          class={className}
-          style={{ ...rootLabelStyle, ...style, ...labelStyle }}
-          span={1}
-          colon={colon}
-          component={component[0]}
-          itemPrefixCls={itemPrefixCls}
-          bordered={bordered}
-          label={label}
-        />,
-        <Cell
-          key={`content-${String(key) || index}`}
-          class={className}
-          style={{ ...rootContentStyle, ...style, ...contentStyle }}
-          span={span * 2 - 1}
-          component={component[1]}
-          itemPrefixCls={itemPrefixCls}
-          bordered={bordered}
-          content={children}
-        />,
-      ]
-    })
-  }
-
-  const { prefixCls, vertical, row, index, bordered } = props
-  const { labelStyle, contentStyle } = inject(descriptionsContext, {
-    labelStyle: ref({}),
-    contentStyle: ref({}),
-  })
-  if (vertical) {
-    return (
-      <>
-        <tr key={`label-${index}`} class={`${prefixCls}-row`}>
-          {renderCells(row, props, {
-            component: 'th',
-            type: 'label',
-            showLabel: true,
-            labelStyle: labelStyle.value,
-            contentStyle: contentStyle.value,
-          })}
-        </tr>
-        <tr key={`content-${index}`} class={`${prefixCls}-row`}>
-          {renderCells(row, props, {
-            component: 'td',
-            type: 'content',
-            showContent: true,
-            labelStyle: labelStyle.value,
-            contentStyle: contentStyle.value,
-          })}
-        </tr>
-      </>
-    )
-  }
-
-  return (
-    <tr key={index} class={`${prefixCls}-row`}>
-      {renderCells(row, props, {
-        component: bordered ? ['th', 'td'] : 'td',
-        type: 'item',
-        showLabel: true,
-        showContent: true,
-        labelStyle: labelStyle.value,
-        contentStyle: contentStyle.value,
-      })}
-    </tr>
-  )
-}
-
-export default Row

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

@@ -1,40 +0,0 @@
----
-category: Components
-type: Data Display
-title: Descriptions
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fHdlTpif6XQAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*d27AQJrowGAAAAAAAAAAAAAADrJ8AQ/original
----
-
-Display multiple read-only fields in groups.
-
-## When To Use
-
-Commonly displayed on the details page.
-
-## API
-
-### Descriptions props
-
-| Property     | Description                                                                                                                                         | Type                             | Default      | Version |     |     |
-| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | ------- | --- | --- |
-| bordered     | whether to display the border                                                                                                                       | boolean                          | false        |         |     |     |
-| colon        | change default props `colon` value of `Descriptions.Item`                                                                                           | boolean                          | true         |         |     |     |
-| column       | the number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect) | number                           | 3            |         |     |     |
-| contentStyle | Customize content style                                                                                                                             | CSSProperties                    | -            | 2.2.0   |     |     |
-| extra        | The action area of the description list, placed at the top-right                                                                                    | string \| VNode \| slot          | -            | 2.0.0   |     |     |
-| labelStyle   | Customize label style                                                                                                                               | CSSProperties                    | -            | 2.2.0   |     |     |
-| layout       | Define description layout                                                                                                                           | `horizontal` \| `vertical`       | `horizontal` |         |     |
-| size         | set the size of the list. Can be set to `middle`,`small`, or not filled                                                                             | `default` \| `middle` \| `small` | `default`    |         |
-| title        | The title of the description list, placed at the top                                                                                                | string \| VNode \| slot          | -            |         |     |     |
-
-### Item props
-
-| Property     | Description                    | Type                    | Default | Version |
-| ------------ | ------------------------------ | ----------------------- | ------- | ------- |
-| contentStyle | Customize content style        | CSSProperties           | -       | 2.2.0   |
-| label        | description of the content     | string \| VNode \| slot | -       |         |
-| labelStyle   | Customize label style          | CSSProperties           | -       | 2.2.0   |
-| span         | The number of columns included | number                  | 1       |         |
-
-> The number of span Descriptions.Item. span={2} takes up the width of two DescriptionsItems.

package/src/descriptions/index.tsx

@@ -1,257 +0,0 @@
-import type {
-  App,
-  CSSProperties,
-  ExtractPropTypes,
-  HTMLAttributes,
-  InjectionKey,
-  Plugin,
-  PropType,
-  Ref,
-  VNode,
-} from 'vue'
-import { computed, defineComponent, onBeforeMount, onBeforeUnmount, provide, ref, toRef } from 'vue'
-
-import { flattenChildren } from '../_util/props-util'
-import type { Breakpoint, ScreenMap } from '../_util/responsiveObserve'
-import useResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve'
-import type { CustomSlotsType } from '../_util/type'
-import { cloneElement } from '../_util/vnode'
-import PropTypes from '../_util/vue-types'
-import warning from '../_util/warning'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import Row from './Row'
-import useStyle from './style'
-
-export const DescriptionsItemProps = {
-  prefixCls: String,
-  label: PropTypes.any,
-  span: Number,
-}
-
-const descriptionsItemProp = () => ({
-  prefixCls: String,
-  label: PropTypes.any,
-  labelStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
-  contentStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
-  span: { type: Number, default: 1 },
-})
-
-export type DescriptionsItemProp = Partial<
-  ExtractPropTypes<ReturnType<typeof descriptionsItemProp>>
->
-
-export const DescriptionsItem = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ADescriptionsItem',
-  props: descriptionsItemProp(),
-  setup(_, { slots }) {
-    return () => slots.default?.()
-  },
-})
-
-const DEFAULT_COLUMN_MAP: Partial<Record<Breakpoint, number>> = {
-  xxxl: 3,
-  xxl: 3,
-  xl: 3,
-  lg: 3,
-  md: 3,
-  sm: 2,
-  xs: 1,
-}
-
-function getColumn(column: DescriptionsProps['column'], screens: ScreenMap): number {
-  if (typeof column === 'number') {
-    return column
-  }
-
-  if (typeof column === 'object') {
-    for (let i = 0; i < responsiveArray.length; i++) {
-      const breakpoint: Breakpoint = responsiveArray[i]
-      if (screens[breakpoint] && column[breakpoint] !== undefined) {
-        return column[breakpoint] || DEFAULT_COLUMN_MAP[breakpoint]
-      }
-    }
-  }
-
-  return 3
-}
-
-function getFilledItem(node: VNode, rowRestCol: number, span?: number): VNode {
-  let clone = node
-
-  if (span === undefined || span > rowRestCol) {
-    clone = cloneElement(node, {
-      span: rowRestCol,
-    })
-    warning(
-      span === undefined,
-      'Descriptions',
-      'Sum of column `span` in a line not match `column` of Descriptions.',
-    )
-  }
-
-  return clone
-}
-
-function getRows(children: VNode[], column: number) {
-  const childNodes = flattenChildren(children)
-  const rows: VNode[][] = []
-
-  let tmpRow: VNode[] = []
-  let rowRestCol = column
-  childNodes.forEach((node, index) => {
-    const span: number = node.props?.span
-    const mergedSpan = span || 1
-
-    // Additional handle last one
-    if (index === childNodes.length - 1) {
-      tmpRow.push(getFilledItem(node, rowRestCol, span))
-      rows.push(tmpRow)
-      return
-    }
-
-    if (mergedSpan < rowRestCol) {
-      rowRestCol -= mergedSpan
-      tmpRow.push(node)
-    } else {
-      tmpRow.push(getFilledItem(node, rowRestCol, mergedSpan))
-      rows.push(tmpRow)
-      rowRestCol = column
-      tmpRow = []
-    }
-  })
-
-  return rows
-}
-
-export const descriptionsProps = () => ({
-  prefixCls: String,
-  bordered: { type: Boolean, default: undefined },
-  size: { type: String as PropType<'default' | 'middle' | 'small'>, default: 'default' },
-  title: PropTypes.any,
-  extra: PropTypes.any,
-  column: {
-    type: [Number, Object] as PropType<number | Partial<Record<Breakpoint, number>>>,
-    default: (): number | Partial<Record<Breakpoint, number>> => DEFAULT_COLUMN_MAP,
-  },
-  layout: String as PropType<'horizontal' | 'vertical'>,
-  colon: { type: Boolean, default: undefined },
-  labelStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
-  contentStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
-})
-
-export type DescriptionsProps = HTMLAttributes &
-  Partial<ExtractPropTypes<ReturnType<typeof descriptionsProps>>>
-
-export interface DescriptionsContextProp {
-  labelStyle?: Ref<CSSProperties>
-  contentStyle?: Ref<CSSProperties>
-}
-
-export const descriptionsContext: InjectionKey<DescriptionsContextProp> =
-  Symbol('descriptionsContext')
-
-const Descriptions = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ADescriptions',
-  inheritAttrs: false,
-  props: descriptionsProps(),
-  slots: Object as CustomSlotsType<{
-    title?: any
-    extra?: any
-    default?: any
-  }>,
-  Item: DescriptionsItem,
-  setup(props, { slots, attrs }) {
-    const { prefixCls, direction } = useConfigInject('descriptions', props)
-    let token: number
-    const screens = ref<ScreenMap>({})
-
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-    const responsiveObserve = useResponsiveObserve()
-
-    onBeforeMount(() => {
-      token = responsiveObserve.value.subscribe((screen) => {
-        if (typeof props.column !== 'object') {
-          return
-        }
-        screens.value = screen
-      })
-    })
-
-    onBeforeUnmount(() => {
-      responsiveObserve.value.unsubscribe(token)
-    })
-
-    provide(descriptionsContext, {
-      labelStyle: toRef(props, 'labelStyle'),
-      contentStyle: toRef(props, 'contentStyle'),
-    })
-
-    const mergeColumn = computed(() => getColumn(props.column, screens.value))
-
-    return () => {
-      const {
-        size,
-        bordered = false,
-        layout = 'horizontal',
-        colon = true,
-        title = slots.title?.(),
-        extra = slots.extra?.(),
-      } = props
-
-      const children = slots.default?.()
-      const rows = getRows(children, mergeColumn.value)
-
-      return wrapSSR(
-        <div
-          {...attrs}
-          class={[
-            prefixCls.value,
-            {
-              [`${prefixCls.value}-${size}`]: size !== 'default',
-              [`${prefixCls.value}-bordered`]: !!bordered,
-              [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
-            },
-            attrs.class,
-            hashId.value,
-          ]}
-        >
-          {(title || extra) && (
-            <div class={`${prefixCls.value}-header`}>
-              {title && <div class={`${prefixCls.value}-title`}>{title}</div>}
-              {extra && <div class={`${prefixCls.value}-extra`}>{extra}</div>}
-            </div>
-          )}
-          <div class={`${prefixCls.value}-view`}>
-            <table>
-              <tbody>
-                {rows.map((row, index) => (
-                  <Row
-                    key={index}
-                    index={index}
-                    colon={colon}
-                    prefixCls={prefixCls.value}
-                    vertical={layout === 'vertical'}
-                    bordered={bordered}
-                    row={row}
-                  />
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>,
-      )
-    }
-  },
-})
-
-Descriptions.install = function (app: App) {
-  app.component(Descriptions.name, Descriptions)
-  app.component(Descriptions.Item.name, Descriptions.Item)
-  return app
-}
-export default Descriptions as typeof Descriptions &
-  Plugin & {
-    readonly Item: typeof DescriptionsItem
-  }

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

@@ -1,41 +0,0 @@
----
-category: Components
-type: 数据展示
-title: Descriptions
-subtitle: 描述列表
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fHdlTpif6XQAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*d27AQJrowGAAAAAAAAAAAAAADrJ8AQ/original
----
-
-成组展示多个只读字段。
-
-## 何时使用
-
-常见于详情页的信息展示。
-
-## API
-
-### Descriptions props
-
-| 参数         | 说明                                                                                            | 类型                             | 默认值       | 版本  |     |     |
-| ------------ | ----------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | ----- | --- | --- |
-| bordered     | 是否展示边框                                                                                    | boolean                          | false        |       |     |     |
-| colon        | 配置 `Descriptions.Item` 的 `colon` 的默认值                                                    | boolean                          | true         |       |     |     |
-| column       | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number                           | 3            |       |     |     |
-| contentStyle | 自定义内容样式                                                                                  | CSSProperties                    | -            | 2.2.0 |     |     |
-| extra        | 描述列表的操作区域，显示在右上方                                                                | string \| VNode \| slot          | -            | 2.0.0 |     |     |
-| labelStyle   | 自定义标签样式                                                                                  | CSSProperties                    | -            | 2.2.0 |     |     |
-| layout       | 描述布局                                                                                        | `horizontal` \| `vertical`       | `horizontal` |       |     |
-| size         | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效）        | `default` \| `middle` \| `small` | `default`    |       |
-| title        | 描述列表的标题，显示在最顶部                                                                    | string \| VNode \| slot          | -            |       |     |     |
-
-### Item props
-
-| 参数         | 说明           | 类型                    | 默认值 | 版本  |
-| ------------ | -------------- | ----------------------- | ------ | ----- |
-| contentStyle | 自定义内容样式 | CSSProperties           | -      | 2.2.0 |
-| label        | 内容的描述     | string \| VNode \| slot | -      |       |
-| labelStyle   | 自定义标签样式 | CSSProperties           | -      | 2.2.0 |
-| span         | 包含列的数量   | number                  | 1      |       |
-
-> span 是 Descriptions.Item 的数量。 span={2} 会占用两个 DescriptionsItem 的宽度。