2021-03-16 04:54:22 +00:00
|
|
|
import Omit from 'omit.js';
|
2021-06-26 01:35:40 +00:00
|
|
|
import type { FunctionalComponent } from 'vue';
|
2021-03-16 04:54:22 +00:00
|
|
|
import { tupleNum } from '../_util/type';
|
|
|
|
import PropTypes from '../_util/vue-types';
|
|
|
|
import warning from '../_util/warning';
|
2021-06-26 01:35:40 +00:00
|
|
|
import type { BlockProps } from './Base';
|
|
|
|
import Base, { baseProps } from './Base';
|
2021-03-16 04:54:22 +00:00
|
|
|
|
|
|
|
const TITLE_ELE_LIST = tupleNum(1, 2, 3, 4, 5);
|
|
|
|
|
|
|
|
export type TitleProps = Omit<BlockProps & { level?: typeof TITLE_ELE_LIST[number] }, 'strong'>;
|
|
|
|
|
|
|
|
const Title: FunctionalComponent<TitleProps> = (props, { slots, attrs }) => {
|
|
|
|
const { level = 1, ...restProps } = props;
|
|
|
|
let component: string;
|
|
|
|
if (TITLE_ELE_LIST.indexOf(level) !== -1) {
|
|
|
|
component = `h${level}`;
|
|
|
|
} else {
|
|
|
|
warning(false, 'Typography', 'Title only accept `1 | 2 | 3 | 4 | 5` as `level` value.');
|
|
|
|
component = 'h1';
|
|
|
|
}
|
|
|
|
|
|
|
|
const titleProps = {
|
|
|
|
...restProps,
|
|
|
|
component,
|
|
|
|
...attrs,
|
|
|
|
};
|
|
|
|
|
|
|
|
return <Base {...titleProps} v-slots={slots}></Base>;
|
|
|
|
};
|
|
|
|
|
|
|
|
Title.displayName = 'ATypographyTitle';
|
|
|
|
Title.inheritAttrs = false;
|
|
|
|
Title.props = Omit({ ...baseProps(), level: PropTypes.number }, ['component', 'strong']);
|
|
|
|
|
|
|
|
export default Title;
|