byhl-zt/pro-components/card/types.ts

import type { TabsProps, TooltipProps } from 'ant-design-vue'
import type { TabPaneProps } from 'ant-design-vue'
import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'
import type { VueNode } from '../types'
import { VueNodePropType } from '../types'

export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
export type Gutter = number | Partial<Record<Breakpoint, number>>
// eslint-disable-next-line @typescript-eslint/ban-types
export type ProCardTabsProps = {} & TabsProps

export type ColSpanType = number | string

export const cardProps = () => ({
  /** 标题样式 */
  headStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
  /** 内容样式 */
  bodyStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
  /** 页头是否有分割线 */
  headerBordered: { type: Boolean, default: false },
  /** 卡片标题 */
  title: VueNodePropType as PropType<VueNode>,
  /** 副标题 */
  subTitle: VueNodePropType as PropType<VueNode>,

  /** 标题说明 */
  tooltip: [Object, String] as PropType<string | TooltipProps>,
  /** @deprecated 你可以使用 tooltip，这个更改是为了与 antd 统一 */
  tip: String,
  /** 右上角自定义区域 */
  extra: VueNodePropType as PropType<VueNode>,
  /** 布局，center 代表垂直居中 */
  layout: String as PropType<'default' | 'center'>,
  /** 卡片类型 */
  type: String as PropType<'default' | 'inner'>,
  /** 指定 Flex 方向，仅在嵌套子卡片时有效 */
  direction: String as PropType<'column' | 'row'>,
  /** 是否自动换行，仅在嵌套子卡片时有效 */
  wrap: { type: Boolean, default: false },
  /** 尺寸 */
  size: String as PropType<'default' | 'small'>,
  /** 加载中 */
  loading: [Boolean, Object, String] as PropType<boolean | VueNode>,
  /** 栅格布局宽度，24 栅格，支持指定宽度或百分，需要支持响应式 colSpan={{ xs: 12, sm: 6 }} */
  colSpan: [Number, String, Object] as PropType<
    ColSpanType | Partial<Record<Breakpoint, ColSpanType>>
  >,
  /** 栅格间距 */
  gutter: {
    type: [Number, Object] as PropType<Gutter | Gutter[]>,
    default: 0
  },
  /** 操作按钮 */
  actions: Array as PropType<VueNode[]>,
  /** 拆分卡片方式 */
  split: String as PropType<'vertical' | 'horizontal'>,
  /** 是否有边框 */
  bordered: { type: Boolean, default: false },
  /**
   * 鼠标移过时可浮起
   *
   * @default false
   */
  hoverable: { type: Boolean, default: false },
  /** 幽灵模式，即是否取消卡片内容区域的 padding 和 背景颜色。 */
  ghost: { type: Boolean, default: false },
  /** 是否可折叠 */
  collapsible: { type: Boolean, default: false },
  /** 受控 collapsed 属性 */
  collapsed: { type: Boolean, default: false },
  /** 折叠按钮自定义节点 */
  collapsibleIconRender: Function as PropType<({ collapsed }: { collapsed: boolean }) => VueNode>,
  /** 收起卡片的事件 */
  onCollapse: Function as PropType<(collapsed: boolean) => void>,
  /** 标签栏配置 */
  tabs: Object as PropType<ProCardTabsProps>,
  /** 前缀 */
  prefixCls: String,
  /** ProCard 的 ref */
  // ref: React.Ref<HTMLDivElement | undefined>
  /** 是否展示选中样式 */
  checked: { type: Boolean, default: false },
  /** 选中改变 */
  onChecked: Function as PropType<(e: MouseEvent) => void>,
  /** 点击事件 */
  onClick: Function as PropType<(e: MouseEvent) => void>
})

export type CardProps = Partial<ExtractPropTypes<ReturnType<typeof cardProps>>>

export type ProCardTabPaneProps = {
  /** Key */
  key?: string
  /** ProCard 相关属性透传 */
  cardProps?: CardProps
} & TabPaneProps

export type CardType = CardProps