@aplus-frontend/ui
Version:
112 lines (111 loc) • 2.56 kB
TypeScript
import { CSSProperties, VNode } from 'vue';
export type CheckCardValueType = string | number | boolean;
/**
* 可选卡片的通用配置，在Group中使用将会是整组CheckCard生效
*/
type CheckCardCommonType = {
/**
* 是否显示边框
*/
bordered?: boolean;
/**
* 是否禁用
*/
disabled?: boolean;
/**
* 是否显示加载中样式
*/
loading?: boolean;
/**
* 卡片的尺寸，目前内置中等/小尺寸两种
*/
size?: 'middle' | 'small';
/**
* 是否阻止点击事件冒泡（对于自定义内容包含输入控件时需要设置）
*/
stopPropagation?: boolean | ((event: MouseEvent) => boolean);
/**
* 选中指示器的尺寸
*/
indicatorSize?: number;
/**
* 可选卡片容器样式
*/
style?: CSSProperties;
};
export type CheckCardProps = CheckCardCommonType & {
/**
* 当前选项卡是否选中(v-model)
*/
checked?: boolean;
'onUpdate:checked'?: (checked: boolean) => void;
/**
* 默认是否选中
*/
defaultChecked?: boolean;
/**
* 作为选项时的值
*/
value?: CheckCardValueType;
/**
* 容器自定义CSS样式
*/
style?: CSSProperties;
/**
* 标题
*/
title?: string | ((checked: boolean) => VNode);
/**
* 内容
*/
content?: string | ((checked: boolean) => VNode);
/**
* 指定选中指示器的尺寸
*/
indicatorSize?: number;
};
export type CheckCardGroupValueType = CheckCardValueType | CheckCardValueType[] | undefined;
export type CheckCardGroupProps = CheckCardCommonType & {
/**
* 是否多选
*/
multiple?: boolean;
/**
* 选中的默认值
*/
defaultValue?: CheckCardGroupValueType;
/**
* 选中的值（v-model）
*/
value?: CheckCardGroupValueType;
'onUpdate:value'?: (nextValue: CheckCardGroupValueType) => void;
};
export type CheckCardGroupContextType = CheckCardCommonType & {
/**
* 是否是多选
*/
multiple?: boolean;
/**
* 切换单个可选卡片时触发
* @param value
* @returns
*/
toggleOption?: (value: any) => void;
/**
* 当前被选中的值
*/
value?: any;
/**
* 注册一个CheckCard的value
* @param value
* @returns
*/
registerValue?: (value: any) => void;
/**
* 取消注册
* @param value
* @returns
*/
cancelValue?: (value: any) => void;
};
export {};