Rich component description system for defining how components appear and behave in the editor, including property panels and design-time behavior.
Core interface for describing components in the editor.
/**
* Component metadata configuration for editor integration
*/
interface IPublicTypeComponentMetadata {
/** Component name (required) */
componentName: string;
/** Display title in editor */
title?: IPublicTypeTitleContent;
/** Component icon */
icon?: IPublicTypeIconType;
/** Component category tags */
tags?: string[];
/** NPM package information */
npm?: IPublicTypeNpmInfo;
/** Property configurations */
props?: IPublicTypePropConfig[];
/** Editor enhancements and property panels */
configure?: IPublicTypeFieldConfig[] | IPublicTypeConfigure;
/** Available code snippets */
snippets?: IPublicTypeSnippet[];
}Package information for component libraries.
/**
* NPM package information for component import
*/
interface IPublicTypeNpmInfo {
/** Package name (required) */
package: string;
/** Component name in package */
componentName?: string;
/** Package version */
version?: string;
/** Whether to use destructuring import */
destructuring?: boolean;
/** Export name for import */
exportName?: string;
/** Sub-component name */
subName?: string;
/** Component entry point */
main?: string;
}Usage Examples:
import { IPublicTypeNpmInfo } from "@alilc/lowcode-types";
// Antd Button component
const antdButton: IPublicTypeNpmInfo = {
package: "antd",
version: "4.0.0",
componentName: "Button",
destructuring: true
};
// React component with specific export
const customComponent: IPublicTypeNpmInfo = {
package: "@company/ui-components",
version: "1.2.0",
exportName: "CustomButton",
destructuring: true
};
// Sub-component reference
const iconComponent: IPublicTypeNpmInfo = {
package: "antd",
componentName: "Icon",
subName: "SmileOutlined",
destructuring: true
};Configuration for component properties in the editor.
/**
* Component property configuration
*/
interface IPublicTypePropConfig {
/** Property name */
name: string;
/** Property title */
title?: IPublicTypeTitleContent;
/** Property type definition */
propType?: IPublicTypePropType;
/** Default value */
defaultValue?: any;
/** Property description */
description?: string;
/** Whether property is required */
isRequired?: boolean;
/** Property setter configuration */
setter?: IPublicTypeSetterConfig;
}
/**
* Property type definitions
*/
type IPublicTypePropType =
| 'array'
| 'bool'
| 'func'
| 'number'
| 'object'
| 'string'
| 'node'
| 'element'
| 'any'
| IPublicTypeOneOf
| IPublicTypeOneOfType
| IPublicTypeArrayOf
| IPublicTypeObjectOf
| IPublicTypeShape;Configuration for property editor fields.
/**
* Property editor field configuration
*/
interface IPublicTypeFieldConfig {
/** Field name */
name: string;
/** Field title */
title?: IPublicTypeTitleContent;
/** Field type */
type?: string;
/** Field setter */
setter?: IPublicTypeSetterConfig;
/** Field description */
description?: string;
/** Field visibility condition */
condition?: (target: any) => boolean;
/** Field validation */
validation?: (value: any) => boolean | string;
/** Field default value */
defaultValue?: any;
}
/**
* Setter configuration for property editors
*/
interface IPublicTypeSetterConfig {
/** Setter component name */
componentName: string | IPublicTypeCustomView;
/** Setter properties */
props?: Record<string, unknown> | IPublicTypeDynamicProps;
/** Whether setter is required */
isRequired?: boolean;
/** Setter condition */
condition?: (target: any) => boolean;
}Pre-defined component code snippets for drag-and-drop.
/**
* Component code snippet definition
*/
interface IPublicTypeSnippet {
/** Snippet title */
title?: IPublicTypeTitleContent;
/** Snippet screenshot */
screenshot?: string;
/** Snippet schema */
schema?: IPublicTypeNodeSchema;
/** Snippet category */
category?: string;
/** Snippet sort order */
sort?: number;
}Usage Examples:
import {
IPublicTypeComponentMetadata,
IPublicTypeSnippet,
IPublicTypePropConfig
} from "@alilc/lowcode-types";
// Button component metadata
const buttonMetadata: IPublicTypeComponentMetadata = {
componentName: "Button",
title: "Button",
icon: "button",
tags: ["form", "interaction"],
npm: {
package: "antd",
componentName: "Button",
destructuring: true
},
props: [
{
name: "type",
title: "Button Type",
propType: {
type: "oneOf",
value: ["default", "primary", "ghost", "dashed", "text", "link"]
},
defaultValue: "default",
setter: {
componentName: "SelectSetter",
props: {
options: [
{ label: "Default", value: "default" },
{ label: "Primary", value: "primary" },
{ label: "Ghost", value: "ghost" }
]
}
}
},
{
name: "size",
title: "Size",
propType: {
type: "oneOf",
value: ["large", "middle", "small"]
},
defaultValue: "middle"
},
{
name: "disabled",
title: "Disabled",
propType: "bool",
defaultValue: false,
setter: "BoolSetter"
},
{
name: "children",
title: "Button Text",
propType: "string",
defaultValue: "Button",
setter: "StringSetter"
}
],
snippets: [
{
title: "Primary Button",
schema: {
componentName: "Button",
props: {
type: "primary",
children: "Primary Button"
}
}
},
{
title: "Ghost Button",
schema: {
componentName: "Button",
props: {
type: "ghost",
children: "Ghost Button"
}
}
}
]
};Advanced configuration options for complex components.
/**
* Advanced component configuration
*/
interface IPublicTypeConfigure {
/** Property groups */
groups?: IPublicTypeFieldGroup[];
/** Custom property panels */
panels?: IPublicTypePanel[];
/** Component actions */
actions?: IPublicTypeComponentAction[];
/** Advanced settings */
advanced?: IPublicTypeAdvanced;
}
/**
* Property field group
*/
interface IPublicTypeFieldGroup {
/** Group title */
title: string;
/** Group fields */
items: IPublicTypeFieldConfig[];
/** Group collapse state */
collapsed?: boolean;
}
/**
* Custom property panel
*/
interface IPublicTypePanel {
/** Panel title */
title: string;
/** Panel component */
component: any;
/** Panel properties */
props?: Record<string, any>;
}This metadata system provides comprehensive component integration with the low-code editor environment.