80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
import type { ExtractPropTypes, RendererElement, RendererNode, VNode } from 'vue'
|
||
import { CHANGE_EVENT, CLICK_EVENT, UPDATE_MODEL_EVENT } from '../_constants'
|
||
import { commonProps, isString, makeNumericProp, makeStringProp, truthProp } from '../_utils'
|
||
|
||
export const TAB_KEY = Symbol('tabs')
|
||
|
||
export const tabsProps = {
|
||
...commonProps,
|
||
/**
|
||
* @description 绑定当前选中标签的标识符
|
||
*/
|
||
modelValue: makeNumericProp(0),
|
||
/**
|
||
* @description 标签选中色
|
||
*/
|
||
customColor: String,
|
||
/**
|
||
* @description 使用横纵方向,可选值`horizontal`、`vertical`
|
||
*/
|
||
direction: makeStringProp<'horizontal' | 'vertical'>('horizontal'),
|
||
/**
|
||
* @description 标签栏字体尺寸大小,可选值`large` `normal` `small`
|
||
*/
|
||
size: makeStringProp<'large' | 'normal' | 'small'>('normal'),
|
||
/**
|
||
* @description 选中底部展示样式,可选值 `line`、`smile`
|
||
*/
|
||
type: makeStringProp<'line' | 'card' | 'smile'>('line'),
|
||
/**
|
||
* @description 标签栏是否可以滚动
|
||
*/
|
||
titleScroll: Boolean,
|
||
/**
|
||
* @description 是否省略过长的标题文字
|
||
*/
|
||
ellipsis: truthProp,
|
||
/**
|
||
* @description 是否开启手势左右滑动切换
|
||
*/
|
||
swipeable: Boolean,
|
||
/**
|
||
* @description 自动高度。设置为 true 时，nut-tabs 和 nut-tabs__content 会随着当前 nut-tab-pane 的高度而发生变化,使用此属性时必须设置nut-tabs的`pane-key`
|
||
*/
|
||
autoHeight: Boolean,
|
||
/**
|
||
* @description 标签栏背景颜色
|
||
*/
|
||
background: String,
|
||
/**
|
||
* @description 切换动画时长，单位 ms。0 代表无动画，此时必须设置 pane-key
|
||
*/
|
||
animatedTime: makeNumericProp(300),
|
||
/**
|
||
* @description 标签间隙
|
||
*/
|
||
titleGutter: makeNumericProp(0),
|
||
/**
|
||
* @description 横轴方向的标题对齐方式，可选值 left、center
|
||
*/
|
||
align: makeStringProp<'left' | 'center'>('center'),
|
||
}
|
||
|
||
export type TabsProps = ExtractPropTypes<typeof tabsProps>
|
||
|
||
export const tabsEmits = {
|
||
[CLICK_EVENT]: (val: Title) => val instanceof Object,
|
||
[CHANGE_EVENT]: (val: Title) => val instanceof Object,
|
||
[UPDATE_MODEL_EVENT]: (val: string) => isString(val),
|
||
}
|
||
|
||
export type TabsEmits = typeof tabsEmits
|
||
|
||
export class Title {
|
||
title = ''
|
||
titleSlot?: VNode<RendererNode, RendererElement, { [key: string]: any }>
|
||
paneKey = ''
|
||
disabled = false
|
||
constructor() { }
|
||
}
|