jamis
Version:
一种支持通过JSON配置方式生成页面的组件库
239 lines (238 loc) • 6.32 kB
TypeScript
import type { SchemaBoolean, SchemaExpression } from 'jamis-core';
import type { ActionSchema, FormBaseControlSchema, FormControlProps, FormHorizontal, IComboStore, SchemaApi, SchemaClassName, SchemaCollection, SchemaObject, SchemaTpl, SharedRefs } from '../types';
export type { IComboStore, IUniqueGroup } from './ComboStore';
export interface ComboCondition {
test: string;
items: Array<ComboSubControl>;
label?: string;
scaffold?: any;
mode?: string;
}
export type ComboSubControl = SchemaObject & {
/**
* 是否唯一, 只有在 combo 里面才有用
*/
unique?: boolean;
/**
* 列类名，可以用来修改这类宽度。
*/
columnClassName?: SchemaClassName;
};
/**
* Combo 组合输入框类型
*
*/
export interface ComboControlSchema extends FormBaseControlSchema {
/**
* 指定为组合输入框类型
*/
type: 'combo' | 'input-kv';
/**
* 单组表单项初始值。默认为 `{}`
*
* @default {}
*/
scaffold?: any;
/**
* 是否含有边框
*/
noBorder?: boolean;
/**
* 确认删除时的提示
*/
deleteConfirmText?: string;
/**
* 删除时调用的api
*/
deleteApi?: SchemaApi;
deleteBtn?: (Partial<ActionSchema> & {
onClick?: any;
}) | string;
/**
* 某项是否可以删除
*/
itemRemovableOn?: SchemaBoolean;
/**
* 是否可切换条件，配合`conditions`使用
*/
typeSwitchable?: boolean;
/**
* 符合某类条件后才渲染的schema
*/
conditions?: Array<ComboCondition>;
/**
* 内部单组表单项`.cxd-Combo-form`的类名
*/
formClassName?: SchemaClassName;
/**
* 新增按钮CSS类名
*/
addButtonClassName?: SchemaClassName;
addBtn?: ActionSchema;
/**
* 新增按钮文字
* @default 新增
*/
addButtonText?: string;
/**
* 是否可新增
*/
addable?: SchemaBoolean;
/**
* Add at top
*/
addattop?: boolean;
/**
* 数组输入框的子项
*/
items?: Array<ComboSubControl> | SharedRefs;
/**
* 是否可拖拽排序
*/
draggable?: boolean;
/**
* 可拖拽排序的提示信息。
*
* @default 可拖拽排序
*/
draggableTip?: string;
/**
* 是否将结果扁平化(去掉name),只有当controls的length为1且multiple为true的时候才有效
*/
flat?: boolean;
/**
* 当扁平化开启并且joinValues为true时，用什么分隔符
*
* @deprecated
*/
delimiter?: string;
/**
* 当扁平化开启的时候，是否用分隔符的形式发送给后端，否则采用array的方式
* @deprecated
*/
joinValues?: boolean;
/**
* 限制最大个数
*/
maxLength?: number;
maxLengthExpr?: SchemaExpression;
/**
* 限制最小个数
*/
minLength?: number;
minLengthExpr?: SchemaExpression;
/**
* 是否多行模式，默认一行展示完
*/
multiLine?: boolean;
multiLineExpr?: SchemaExpression;
/**
* 是否渲染对象数组
*/
multiple?: boolean;
/**
* 某项是否可删除
*/
removable?: SchemaBoolean;
/**
* 子表单的模式。
*/
subFormMode?: 'normal' | 'horizontal' | 'inline';
/**
* 如果是水平排版，这个属性可以细化水平排版的左右宽度占比。
*/
subFormHorizontal?: FormHorizontal;
/**
* 没有成员时显示。
* @default empty
*/
placeholder?: string;
/**
* 是否可以访问父级数据，正常 combo 已经关联到数组成员，是不能访问父级数据的。
*/
canAccessSuperData?: boolean;
/**
* 是否采用 Tabs 展示方式, 仅在`multiple=true`时有用
*/
tabsMode?: boolean;
/**
* Tabs 的展示模式
*/
tabsStyle?: '' | 'line' | 'card' | 'radio';
/**
* 选项卡标题的生成模板
*/
tabsLabelTpl?: SchemaTpl;
/**
* 数据比较多，比较卡时，可以试试开启
*/
lazyLoad?: boolean;
/**
* 严格模式，为了性能默认不开的。
*/
strictMode?: boolean;
/**
* 配置同步字段。只有 `strictMode` 为 `false` 时有效。
* 如果 Combo 层级比较深，底层的获取外层的数据可能不同步。
* 但是给 combo 配置这个属性就能同步下来。输入格式：`["os"]`
*/
syncFields?: string[];
/**
* 允许为空，如果子表单项里面配置验证器，且又是单条模式。可以允许用户选择清空（不填）。
*/
nullable?: boolean;
/**
* 提示信息
*/
messages?: {
/**
* 验证错误提示
*/
validateFailed?: string;
/**
* 最小值验证错误提示
*/
minLengthValidateFailed?: string;
/**
* 最大值验证错误提示
*/
maxLengthValidateFailed?: string;
};
keyPlaceholder?: string;
valuePlaceholder?: string;
/**
* 是否唯一, 用于对items的全部项进行联合的唯一性检查
*/
unique?: boolean;
/**
* `.cxd-Combo-item`元素的样式类
*/
itemClassName?: SchemaClassName;
/**
* 元素`.cxd-Combo-itemInner`的样式类
*/
itemInnerClassName?: SchemaClassName;
updatePristineAfterStoreDataReInit?: boolean;
}
export interface ComboProps extends FormControlProps, Omit<ComboControlSchema, 'type' | 'className' | 'descriptionClassName' | 'inputClassName'> {
store: IComboStore;
changeImmediately?: boolean;
}
export type ComboRendererEvent = 'add' | 'delete' | 'tabsChange';
/**
* InputArray 数组输入框。 combo 的别名。
*
*/
export interface ArrayControlSchema extends Omit<ComboControlSchema, 'type' | 'controls' | 'conditions' | 'items'> {
/**
* 指定为数组输入框类型
*/
type: 'input-array';
/**
* 成员组件配置
*/
items: SchemaCollection;
}
export interface InputArrayProps extends FormControlProps, Omit<ArrayControlSchema, 'type' | 'className' | 'descriptionClassName' | 'inputClassName'> {
store: IComboStore;
}