@aplus-frontend/ui
Version:
108 lines (107 loc) • 2.64 kB
TypeScript
import { ComputedRef, Ref, StyleValue } from 'vue';
export interface ApValueSelectCardOption<ValueRecord extends Record<string, any> = Record<string, any>> {
key: string | number;
label: string;
value: string | number;
customClass?: string;
record?: ValueRecord;
}
export interface ApValueSelectCardProps<T extends Record<string, any> = Record<string, any>> {
/**
* 所有可用选项
*/
options: ApValueSelectCardOption<T>[];
/**
* 当前选中的选项key
*/
selectedKeys?: (string | number)[];
/**
* 当前高亮的选项key
*/
highlightedKeys?: (string | number)[];
/**
* 最多可选数量
*/
maxSelected?: number;
/**
* 一行最多可显示数量
*/
maxRowDisplay?: number;
/**
* Popover标题
*/
popoverTitle?: string;
/**
* 是否显示Popover标题图标
*/
showTitleIcon?: boolean;
/**
* 是否显示关闭图标
*/
showCloseIcon?: boolean;
/**
* 是否显示添加按钮
*/
showAddButton?: boolean;
/**
* 添加按钮文本
*/
addButtonText?: string;
/**
* 获取容器函数
*/
getContainer?: (triggerNode: HTMLElement) => HTMLElement;
/**
* 自定义卡片样式函数
*/
getCardStyle?: (key: string | number) => StyleValue;
/**
* 自定义卡片外层样式函数
*/
wrapperStyle?: StyleValue;
}
export interface ApValueSelectCardExpose<T extends Record<string, any> = Record<string, any>> {
/**
* popover是否显示
*/
popoverVisible: Ref<boolean, boolean>;
/**
* 所有选项
*/
allOptions: ComputedRef<ApValueSelectCardOption<T>[]>;
/**
* 当前选中的选项
*/
selectedOptions: ComputedRef<ApValueSelectCardOption<T>[]>;
isSelected: (key: string | number) => boolean;
/**
* 检查是否高亮
* @param { string | number } key
* @returns void
*/
isHighlighted: (key: string | number) => boolean;
/**
* 切换选项选择状态
* @param {string | number} key
* @returns void
*/
toggleOption: (key: string | number) => void;
/**
* 添加选项
* @param {string | number} key
* @returns void
*/
addOption: (key: string | number) => void;
/**
* 移除选项
* @param {string | number} key
* @returns void
*/
removeOption: (key: string | number) => void;
/**
* 高亮选项
* @param {string | number} key
* @returns void
*/
highlightOption: (key: string | number) => void;
}