Dynamic structure properties

Below is a list of all supported properties for dynamic structure configuration of table columns and form/detail inputs:

// Example:
[
	'full_name',
	{ prop: 'id', type: 'number', primaryKey: true, color: 'danger' },
	{ prop: 'full_name' },
	{ prop: 'avatar', type: 'image' },
	{ prop: 'email', type: 'link' },
	{
		prop: 'email',
		type: 'button',
		text: '{\{value\}}',
		triggers: {
			buttonClick: [ "console.log('Button click', {\{value\}})" ],
		},
		labelConfig: {
			align: 'center',
			position: 'horizontal',
		},
	},
];

// Default type if not specified - string
// Required keys - prop, primaryKey (at least one column must be a primary key for table)

// Common fields for all components
export class BaseComponent {
	prop: string, //  Field name
	editable: boolean, // Always display as editable
	forceView: boolean, // Do not allow editing this field
	title: string, //  Title
	primaryKey: boolean, // Primary key
	sortable: boolean, // Enable sorting
	filter: boolean, // Enable filtering
	enableAdding: boolean, // Enable adding
	visible: boolean,
	pinColumn: string, //  Pin column
	passEventOutside: boolean, // Select row on click
	disabled: boolean, //  Disabled
	__UIBAKERY__SHOW__CONDITION__PRESERVE__: boolean, // Preserve space when hidden
	
	// for Table structure only
	width: number, //  Width
	widthMode: 'auto' | 'fixed', // 'auto' is for Min mode
	viewTooltipMode: 'overflow' | 'custom',
}

// image component
export class ImageComponent extends BaseComponent {
	alt: string, // Alt text
	linkInfo: object, // Image URL
	queryParams: object, //  Query params
	openInNewTab: boolean, // Open in new tab
	helpTooltip: string, // Help tooltip
	fieldTooltip: string, // Field tooltip
	viewTooltip: string, // Tooltip
	mappedValue: string, // Mapper
	imageShape: string, //  Display
	fullWidth: boolean, // Full width
	fileInputType: object, //  Type
	fileUploadType: object, //  File type
	maxFileSize: number, // Max file size (Mb)
	multipleFileUpload: boolean, // Multiple
	required: boolean, // Required field
	regexpPattern: string, // Regexp pattern
	regexpPatternErrorMessage: string, // Regexp pattern error message
	radius: string, //  Radius
	fit: string, //  Fit
	labelConfig: LabelConfig, // Label configuration
}
// number component
export class NumberComponent extends BaseComponent {
	helpTooltip: string, // Help tooltip
	showCopyButton: boolean, // Show copy button
	filterVariation: string, //  Filter type
	fieldTooltip: string, // Field tooltip
	mappedValue: string, // Mapper
	viewTooltip: string, // Tooltip
	range: object, //  Min & max range
	required: boolean, // Required field
	display: string, // Format
	fraction: string, //  fraction
	textStyle: TextStyle,
	color: string,
	regexpPattern: string, // Regexp pattern
	regexpPatternErrorMessage: string, // Regexp pattern error message
	locale: string, //  Locale
	disableFormatting: boolean, // Disable number formatting
	decoration: string, //  Decoration
	fontSize: string, //  Font size
	editModeValue: number, // Value
	labelConfig: LabelConfig, // Label configuration
}
// string component
export class StringComponent extends BaseComponent {
	helpTooltip: string, // Help tooltip
	maskConfig: string, //  Input mask
	maskErrorMessage: string, // Mask error message
	filterVariation: string, //  Filter type
	fieldTooltip: string, // Field tooltip
	mappedValue: string, // Mapper
	viewTooltip: string, // Tooltip
	textStyle: object,
	color: string, //  Color
	inputType: string, // Type
	length: object, //  Min & max length
	required: boolean, // Required field
	markdownSupport: boolean, // Support Markdown
	showCopyButton: boolean, // Show copy button
	regexpPattern: string, // Regexp pattern
	regexpPatternErrorMessage: string, // Regexp pattern error message
	decoration: string, //  Decoration
	fontSize: string, //  Font size
	editModeValue: string, // Value
	labelConfig: LabelConfig, // Label configuration
}
// text component
export class TextComponent extends BaseComponent {
	helpTooltip: string, // Help tooltip
	filterVariation: string, //  Filter type
	fieldTooltip: string, // Field tooltip
	mappedValue: string, // Mapper
	viewTooltip: string, // Tooltip
	fontSize: string, //  Font size
	textStyle: TextStyle,
	color: string, //  Color
	lines: number, //  Lines number
	length: object, //  Min & max length
	required: boolean, // Required field
	markdownSupport: boolean, // Support Markdown
	showCopyButton: boolean, // Show copy button
	expandOnClick: boolean, // Expand on click
	regexpPattern: string, // Regexp pattern
	regexpPatternErrorMessage: string, // Regexp pattern error message
	editModeValue: string, // Value
	labelConfig: LabelConfig, // Label configuration
}
// link component
export class LinkComponent extends BaseComponent {
	helpTooltip: string, // Help tooltip
	filterVariation: string, //  Filter type
	fieldTooltip: string, // Field tooltip
	viewTooltip: string, // Tooltip
	fontSize: string, //  Font size
	mappedValue: string, // Mapper
	text: string, // Text
	lines: number, //  Lines number
	textStyle: TextStyle,
	color: string, //  Color
	openInNewTab: boolean, // Open in new tab
	required: boolean, // Required field
	regexpPattern: string, // Regexp pattern
	regexpPatternErrorMessage: string, // Regexp pattern error message
	editModeValue: string, // Value
	triggers?: {
		linkClick: CodeString[], // On Click
	},
	labelConfig: LabelConfig, // Label configuration
}
// boolean component
export class BooleanComponent extends BaseComponent {
	trueText: string, // True text
	falseText: string, // False text
	helpTooltip: string, // Help tooltip
	mappedValue: string, // Mapper
	required: boolean, // Required field
	filterVariation: string, //  Filter type
	display: string, //  Display
	decoration: string, //  Decoration
	textStyle: TextStyle,
	color: string,
	viewTooltip: string, // Tooltip
	fontSize: string, //  Font size
	editModeValue: boolean, // Value
}
// dateTime component
export class DateTimeComponent extends BaseComponent {
	helpTooltip: string, // Help tooltip
	showCopyButton: boolean, // Show copy button
	filterVariation: string, //  Filter type
	fieldTooltip: string, // Field tooltip
	viewTooltip: string, // Tooltip
	mappedValue: string, // Mapper
	dateFormat: object, //  Date format
	timeFormat: object, //  Time format
	required: boolean, // Required field
	decoration: string, //  Decoration
	textStyle: object,
	color: string,
	fontSize: string, //  Font size
	withSeconds: boolean, // With seconds
	twelveHoursFormat: boolean, // Use Twelve Hours format
	timeStep: object,
	minDate: object, // Min
	maxDate: object, // Max
	timezone: string, // Timezone
	startView: string, //  Start view
	firstDayOfWeek: string, // First day of week
	editModeValue: object, // Value
	labelConfig: LabelConfig, // Label configuration
}
// currency component
export class CurrencyComponent extends BaseComponent {
	helpTooltip: string, // Help tooltip
	filterVariation: string, //  Filter type
	fieldTooltip: string, // Field tooltip
	viewTooltip: string, // Tooltip
	mappedValue: string, // Mapper
	range: object, //  Min & max range
	required: boolean, // Required field
	currencyCode: string, //  Currency
	fraction: string, //  Fraction
	display: string, //  Display
	textStyle: TextStyle,
	color: string,
	regexpPattern: string, // Regexp pattern
	regexpPatternErrorMessage: string, // Regexp pattern error message
	locale: string, //  Locale
	disableFormatting: boolean, // Disable number formatting
	showCopyButton: boolean, // Show copy button
	fontSize: string, //  Font size
	decoration: string, //  Decoration
	editModeValue: number, // Value
	labelConfig: LabelConfig, // Label configuration
}
// button component
export class ButtonComponent extends BaseComponent {
	text: string,
	showLoading: boolean, //  Show loading
	status: string,
	appearance: string,
	iconPlacement: string, //  Icon placement
	icon: string,
	linkInfo: object, // URL
	queryParams: boolean, //  Query params
	openInNewTab: boolean, // Open in new tab
	fieldTooltip: string, // Tooltip
	triggers?: {
		buttonClick: CodeString[], // On Click
	},
	alignment: string, //  Alignment
}
// contextMenuButton component
export class ContextMenuButtonComponent extends BaseComponent {
	text: string,
	showLoading: boolean, //  Show loading
	status: string,
	appearance: string,
	iconPlacement: string, //  Icon placement
	icon: string,
	contextMenuTrigger: string, //  Menu trigger
	contextMenuPosition: string, //  Menu position
	contextMenuAdjustment: string, //  Menu adjustment
	contextMenuItems: object, //  Menu items
	fieldTooltip: string, // Tooltip
	triggers?: {
		buttonClick: CodeString[], // On Click
		menuItemClick: CodeString[], // On Menu Item Click
	},
	alignment: string, //  Alignment
}
// select component
export class SelectComponent extends BaseComponent {
	helpTooltip: string, // Help tooltip
	filterVariation: string, //  Filter type
	fieldTooltip: string, // Field tooltip
	required: boolean, // Required field
	viewTooltip: string, // Tooltip
	options: array,
	appearance: string,
	withOptionsAutocomplete: boolean, // Enable options autocomplete
	mappedValue: string, // Tag mapper
	mappedColor: string, // Tag color mapper
	allowResetValue: boolean, // Allow reset value
	editModeValue: string, // Value
	triggers?: {
		autocompleteChange: CodeString[], // On Autocomplete Search
		tagClick: CodeString[], // On Tag Click
	},
	labelConfig: LabelConfig, // Label configuration
}
// multiselect component
export class MultiselectComponent extends BaseComponent {
	helpTooltip: string, // Help tooltip
	filterVariation: string, //  Filter type
	fieldTooltip: string, // Field tooltip
	required: boolean, // Required field
	viewTooltip: string, // Tooltip
	options: array,
	appearance: string,
	mappedValue: string, // Tag mapper
	mappedColor: string, // Tag color mapper
	withOptionsAutocomplete: boolean, // Enable options autocomplete
	allowResetValue: boolean, // Show reset button
	allowSelectAll: boolean, // Show select all option
	editModeValue: string, // Value
	triggers?: {
		autocompleteChange: CodeString[], // On Autocomplete Search
		tagClick: CodeString[], // On Tag Click
	},
	labelConfig: LabelConfig, // Label configuration
}
// file component
export class FileComponent extends BaseComponent {
	helpTooltip: string, // Help tooltip
	fieldTooltip: string, // Field tooltip
	viewTooltip: string, // Tooltip
	mappedValue: string, // Mapper
	fileInputType: string, //  Type
	fileUploadType: object, //  File type
	maxFileSize: number, // Max file size (Mb)
	multipleFileUpload: boolean, // Multiple
	required: boolean, // Required field
	regexpPattern: string, // Regexp pattern
	regexpPatternErrorMessage: string, // Regexp pattern error message
	labelConfig: LabelConfig, // Label configuration
}
// percent component
export class PercentComponent extends BaseComponent {
	helpTooltip: string, // Help tooltip
	showCopyButton: boolean, // Show copy button
	filterVariation: string, //  Filter type
	fieldTooltip: string, // Field tooltip
	mappedValue: string, // Mapper
	viewTooltip: string, // Tooltip
	range: object, //  Min & max range
	required: boolean, // Required field
	display: string, // Format
	fraction: string, //  fraction
	textStyle: TextStyle,
	color: string,
	status: string, //  color
	regexpPattern: string, // Regexp pattern
	regexpPatternErrorMessage: string, // Regexp pattern error message
	view: string, //  Type
	displayValue: boolean, // Display value
	locale: string, //  Locale
	disableFormatting: boolean, // Disable number formatting
	decoration: string, //  Decoration
	fontSize: string, //  Font size
	editModeValue: number, // Value
	labelConfig: LabelConfig, // Label configuration
}
// jsonEditor component
export class JsonEditorComponent extends BaseComponent {
	helpTooltip: string, // Help tooltip
	showCopyButton: boolean, // Show copy button
	filterVariation: string, //  Filter type
	viewTooltip: string, // Tooltip
	editDisplayMode: string, //  Display mode
	viewDisplayMode: string, //  Display mode
	lines: number, //  Lines number
	required: boolean, // Required field
	editModeValue: object, // Value
	labelConfig: LabelConfig, // Label configuration
}
// date component
export class DateComponent extends BaseComponent {
	helpTooltip: string, // Help tooltip
	showCopyButton: boolean, // Show copy button
	filterVariation: string, //  Filter type
	fieldTooltip: string, // Field tooltip
	viewTooltip: string, // Tooltip
	mappedValue: string, // Mapper
	dateFormat: object, //  Date format
	required: boolean, // Required field
	decoration: string, //  Decoration
	textStyle: TextStyle,
	color: string,
	fontSize: string, //  Font size
	minDate: object, // Min
	maxDate: object, // Max
	timezone: string, // Timezone
	startView: string, //  Start view
	firstDayOfWeek: string, // First day of week
	editModeValue: object, // Value
	labelConfig: LabelConfig, // Label configuration
}
// time component
export class TimeComponent extends BaseComponent {
	helpTooltip: string, // Help tooltip
	showCopyButton: boolean, // Show copy button
	filterVariation: string, //  Filter type
	fieldTooltip: string, // Field tooltip
	viewTooltip: string, // Tooltip
	mappedValue: string, // Mapper
	timeFormat: object, //  Time format
	required: boolean, // Required field
	decoration: string, //  Decoration
	textStyle: TextStyle,
	color: string,
	fontSize: string, //  Font size
	withSeconds: boolean, // With seconds
	twelveHoursFormat: boolean, // Use Twelve Hours format
	timeStep: object,
	timezone: string, // Timezone
	editModeValue: object, // Value
	labelConfig: LabelConfig, // Label configuration
}

type TextStyle = {
    style?: ('bold', 'italic')[],
    transform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none',
}

type LabelConfig = {
    align: 'left' | 'center' | 'right'; // label alignment
    position: 'vertical' | 'horizontal'; // label position
}