fix(comp:modal): the default header size should be 'md'

packages/components/_private/footer/index.ts

@@ -10,5 +10,4 @@ import Footer from './src/Footer'
 const ɵFooter = Footer
 
 export { ɵFooter }
-export { footerTypeDef as ɵFooterTypeDef } from './src/types'
 export type { FooterProps as ɵFooterProps, FooterButtonProps as ɵFooterButtonProps } from './src/types'

packages/components/_private/footer/src/types.ts

@@ -15,8 +15,6 @@ export interface FooterButtonProps extends ButtonProps {
   onClick?: (evt: Event) => void
 }
 
-export const footerTypeDef = [Boolean, Array, Object] as PropType<boolean | FooterButtonProps[] | VNode>
-
 export const footerProps = {
   cancel: Function as PropType<(evt?: Event | unknown) => Promise<void> | void>,
   cancelButton: Object as PropType<ButtonProps>,
@@ -26,7 +24,7 @@ export const footerProps = {
     type: Boolean,
     default: true,
   },
-  footer: footerTypeDef,
+  footer: [Boolean, Array, Object] as PropType<boolean | FooterButtonProps[] | VNode>,
   ok: Function as PropType<(evt?: Event | unknown) => Promise<void> | void>,
   okButton: Object as PropType<ButtonProps>,
   okLoading: Boolean,

packages/components/_private/header/__tests__/__snapshots__/header.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`Header > render work 1`] = `
-"<div class=\\"ix-header ix-header-sm\\">
+"<div class=\\"ix-header ix-header-md\\">
   <div class=\\"ix-header-content\\">
     <!---->
     <!----><span class=\\"ix-header-title\\">Header title</span>

packages/components/_private/header/src/Header.tsx

@@ -28,11 +28,9 @@ const Header: FunctionalComponent<HeaderProps> = (props, { slots }) => {
   return <IxHeader {...headerProps} v-slots={headerSlots}></IxHeader>
 }
 
-const defaultSize = 'sm'
-
 function convertProps(props: HeaderProps) {
-  const { closable, closeIcon, header, onClose } = props
-  const headerProps = isString(header) ? { size: defaultSize, title: header } : { size: defaultSize, ...header }
+  const { closable, closeIcon, header, size, onClose } = props
+  const headerProps = isString(header) ? { title: header, size } : { size, ...header }
   if (closable) {
     headerProps.suffix = headerProps.suffix ?? closeIcon
     if (onClose) {

packages/components/_private/header/src/types.ts

@@ -12,5 +12,6 @@ export interface HeaderProps {
   closable?: boolean
   closeIcon?: string | VNode
   header?: string | IxHeaderProps
+  size?: 'xl' | 'lg' | 'md' | 'sm'
   onClose?: (evt: Event) => void
 }

packages/components/card/src/Card.tsx

@@ -57,7 +57,7 @@ export default defineComponent({
       return (
         <div class={classes.value}>
           {renderCover(props, slots, prefixCls)}
-          <ɵHeader v-slots={slots} header={props.header} />
+          <ɵHeader v-slots={slots} size="sm" header={props.header} />
           {renderBody(props, children, hasGrid, prefixCls)}
           {renderFooter(props, slots, prefixCls)}
         </div>

packages/components/date-picker/src/types.ts

@@ -6,12 +6,12 @@
  */
 
 import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray } from '@idux/cdk/utils'
+import type { ɵFooterButtonProps } from '@idux/components/_private/footer'
 import type { FormSize } from '@idux/components/form'
 import type { DefineComponent, HTMLAttributes, PropType, VNode, VNodeChild } from 'vue'
 
 import { controlPropDef } from '@idux/cdk/forms'
 import { ɵPortalTargetDef } from '@idux/cdk/portal'
-import { ɵFooterTypeDef } from '@idux/components/_private/footer'
 
 export interface TimePanelOptions {
   disabledHours?: (selectedAmPm: string | undefined) => number[]
@@ -96,7 +96,7 @@ export const datePickerProps = {
 
   value: [String, Date, Number],
   defaultOpenValue: [String, Date, Number],
-  footer: { type: ɵFooterTypeDef, default: false },
+  footer: { type: [Boolean, Array, Object] as PropType<boolean | ɵFooterButtonProps[] | VNode>, default: false },
   placeholder: String,
   timePanelOptions: Object as PropType<TimePanelOptions>,
   'onUpdate:value': [Function, Array] as PropType<MaybeArray<(value: Date | undefined) => void>>,
@@ -117,7 +117,7 @@ export const dateRangePickerProps = {
 
   value: Array as PropType<(number | string | Date | undefined)[]>,
   defaultOpenValue: Array as PropType<(number | string | Date)[]>,
-  footer: { type: ɵFooterTypeDef, default: true },
+  footer: { type: [Boolean, Array, Object] as PropType<boolean | ɵFooterButtonProps[] | VNode>, default: true },
   placeholder: Array as PropType<string[]>,
   separator: [String, Object] as PropType<string | VNode>,
   timePanelOptions: [Object, Array] as PropType<TimePanelOptions | TimePanelOptions[]>,

packages/components/drawer/src/DrawerWrapper.tsx

@@ -21,11 +21,11 @@ import {
   watch,
 } from 'vue'
 
-import { isFunction, isString } from 'lodash-es'
+import { isFunction } from 'lodash-es'
 
 import { callEmit, convertCssPixel } from '@idux/cdk/utils'
 import { ɵFooter } from '@idux/components/_private/footer'
-import { ɵHeader, type ɵHeaderProps } from '@idux/components/_private/header'
+import { ɵHeader } from '@idux/components/_private/header'
 
 import { DRAWER_TOKEN, drawerToken } from './token'
 
@@ -124,8 +124,6 @@ export default defineComponent({
     return () => {
       const prefixCls = mergedPrefixCls.value
 
-      const headerProps = isString(props.header) ? ({ title: props.header, size: 'md' } as ɵHeaderProps) : props.header
-
       return (
         <Transition
           name={transitionName.value}
@@ -158,7 +156,7 @@ export default defineComponent({
                     v-slots={slots}
                     closable={closable.value}
                     closeIcon={closeIcon.value}
-                    header={headerProps}
+                    header={props.header}
                     onClose={close}
                   />
                   <div class={`${prefixCls}-body`}>{slots.default?.()}</div>

packages/components/header/src/types.ts

@@ -5,28 +5,26 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { ExtractInnerPropTypes, ExtractPublicPropTypes } from '@idux/cdk/utils'
+import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray } from '@idux/cdk/utils'
 import type { AvatarProps } from '@idux/components/avatar'
-import type { DefineComponent, HTMLAttributes } from 'vue'
-
-import { IxPropTypes } from '@idux/cdk/utils'
+import type { DefineComponent, HTMLAttributes, PropType, VNode } from 'vue'
 
 export type HeaderSize = 'xl' | 'lg' | 'md' | 'sm'
 
 export const headerProps = {
-  avatar: IxPropTypes.oneOfType([String, IxPropTypes.object<AvatarProps>()]),
-  description: IxPropTypes.string,
-  disabled: IxPropTypes.bool.def(false),
-  prefix: IxPropTypes.oneOfType([String, IxPropTypes.vNode]),
-  size: IxPropTypes.oneOf<HeaderSize>(['xl', 'lg', 'md', 'sm']).def('md'),
-  showBar: IxPropTypes.bool.def(false),
-  subTitle: IxPropTypes.string,
-  suffix: IxPropTypes.oneOfType([String, IxPropTypes.vNode]),
-  title: IxPropTypes.string,
+  avatar: { type: [String, Object] as PropType<string | AvatarProps>, default: undefined },
+  description: { type: String, default: undefined },
+  disabled: { type: Boolean, default: false },
+  prefix: { type: [String, Object] as PropType<string | VNode>, default: undefined },
+  size: { type: String as PropType<HeaderSize>, default: 'md' },
+  showBar: { type: Boolean, default: false },
+  subTitle: { type: String, default: undefined },
+  suffix: { type: [String, Object] as PropType<string | VNode>, default: undefined },
+  title: { type: String, default: undefined },
 
   // events
-  onPrefixClick: IxPropTypes.emit<(evt: MouseEvent) => void>(),
-  onSuffixClick: IxPropTypes.emit<(evt: MouseEvent) => void>(),
+  onPrefixClick: [Function, Array] as PropType<MaybeArray<(evt: MouseEvent) => void>>,
+  onSuffixClick: [Function, Array] as PropType<MaybeArray<(evt: MouseEvent) => void>>,
 }
 
 export type HeaderProps = ExtractInnerPropTypes<typeof headerProps>

packages/components/modal/src/ModalWrapper.tsx

@@ -18,11 +18,11 @@ import {
   watch,
 } from 'vue'
 
-import { isFunction, isString } from 'lodash-es'
+import { isFunction } from 'lodash-es'
 
 import { callEmit, convertCssPixel, getOffset } from '@idux/cdk/utils'
 import { ɵFooter } from '@idux/components/_private/footer'
-import { ɵHeader, type ɵHeaderProps } from '@idux/components/_private/header'
+import { ɵHeader } from '@idux/components/_private/header'
 import { type ModalConfig } from '@idux/components/config'
 
 import ModalBody from './ModalBody'
@@ -111,16 +111,6 @@ export default defineComponent({
     return () => {
       const prefixCls = mergedPrefixCls.value
 
-      const headerProps = isString(props.header) ? ({ title: props.header, size: 'md' } as ɵHeaderProps) : props.header
-
-      const okButtonProps: ModalProps['okButton'] = props.okButton?.size
-        ? props.okButton
-        : { size: 'md', ...props.okButton }
-
-      const cancelButtonProps: ModalProps['cancelButton'] = props.cancelButton?.size
-        ? props.cancelButton
-        : { size: 'md', ...props.cancelButton }
-
       return (
         <div
           v-show={mergedVisible.value}
@@ -154,21 +144,21 @@ export default defineComponent({
                   v-slots={slots}
                   closable={closable.value}
                   closeIcon={closeIcon.value}
-                  header={headerProps}
+                  header={props.header}
                   onClose={close}
                 />
                 <ModalBody></ModalBody>
                 <ɵFooter
                   v-slots={slots}
                   class={`${prefixCls}-footer`}
                   cancel={cancel}
-                  cancelButton={cancelButtonProps}
+                  cancelButton={props.cancelButton}
                   cancelLoading={cancelLoading.value}
                   cancelText={cancelText.value}
                   cancelVisible={cancelVisible.value}
                   footer={props.footer}
                   ok={ok}
-                  okButton={okButtonProps}
+                  okButton={props.okButton}
                   okLoading={okLoading.value}
                   okText={okText.value}
                 ></ɵFooter>

packages/components/popover/src/Popover.tsx

@@ -69,6 +69,7 @@ const renderContent = (
   if (slots.header || props.header) {
     children.push(
       <ɵHeader
+        size="sm"
         closable={props.closable}
         closeIcon={closeIcon.value}
         header={props.header ?? props.title}

packages/components/table/__tests__/table.spec.ts

@@ -253,7 +253,7 @@ describe('Table', () => {
       await wrapper.setProps({ header })
 
       expect(wrapper.find('.ix-header').text()).toBe(header)
-      expect(wrapper.find('.ix-header').classes()).toContain('ix-header-sm')
+      expect(wrapper.find('.ix-header').classes()).toContain('ix-header-md')
 
       header = { title: 'This is header2', size: 'lg' }
       await wrapper.setProps({ header })

packages/components/time-picker/src/types.ts

@@ -6,12 +6,12 @@
  */
 
 import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray } from '@idux/cdk/utils'
+import type { ɵFooterButtonProps } from '@idux/components/_private/footer'
 import type { FormSize } from '@idux/components/form'
 import type { DefineComponent, HTMLAttributes, PropType, VNode, VNodeChild } from 'vue'
 
 import { controlPropDef } from '@idux/cdk/forms'
 import { ɵPortalTargetDef } from '@idux/cdk/portal'
-import { ɵFooterTypeDef } from '@idux/components/_private/footer'
 import { ɵbaseTimePanelProps } from '@idux/components/_private/time-panel'
 
 const timePickerCommonProps = {
@@ -75,7 +75,7 @@ export const timePickerProps = {
   value: [String, Date, Number] as PropType<string | Date | number>,
 
   defaultOpenValue: [String, Date, Number] as PropType<string | Date | number>,
-  footer: { type: ɵFooterTypeDef, default: false },
+  footer: { type: [Boolean, Array, Object] as PropType<boolean | ɵFooterButtonProps[] | VNode>, default: false },
   placeholder: String,
 
   // events
@@ -98,7 +98,7 @@ export const timeRangePickerProps = {
   // v-model
   value: Array as PropType<(number | string | Date | undefined)[]>,
   defaultOpenValue: Array as PropType<(number | string | Date)[]>,
-  footer: { type: ɵFooterTypeDef, default: true },
+  footer: { type: [Boolean, Array, Object] as PropType<boolean | ɵFooterButtonProps[] | VNode>, default: true },
   placeholder: Array as PropType<string[]>,
   separator: [String, Object] as PropType<string | VNode>,