Utility Functions

createNumberProp()

createNumberProp is used to create a property of type integer or floating-point number. You can specify the initial value, label, field name, and other parameters for the property.

Parameters

• component: The component name, usually PropNumber.
• field: The field name, which is the unique identifier of the property.
• label: The label, which is the name of the property displayed to the user.
• defaultValue: The default value, which is the initial value of the property.
• tips: The tips, which are auxiliary descriptions typically displayed to the user.
• visible: A boolean value that controls whether the property is visible.

Example

createNumberProp({
    component: 'PropNumber',
    field: 'field1',
    label: 'Width',
    defaultValue: 0,
    tips: 'Please enter the width value',
    visible: true
});

createObjectProp()

createObjectProp is used to create a property of type object. This function allows you to define an object property that contains multiple key-value pairs.

Parameters

• component: The component name, usually PropObject.
• field: The field name, which is the unique identifier of the property.
• label: The label, which is the name of the property displayed to the user.
• defaultValue: The default value, which is the initial value of the property (usually {}).
• tips: The tips, which are auxiliary descriptions typically displayed to the user.
• visible: A boolean value that controls whether the property is visible.

Example

createObjectProp({
    component: 'PropObject',
    field: 'field2',
    label: 'Dimensions',
    defaultValue: {},
    tips: 'Please enter the object property values',
    visible: true
});

createStringProp()

createStringProp is used to create a property of type string. This function is typically used to create text fields, titles, and similar properties.

Parameters

• component: The component name, usually PropString.
• field: The field name, which is the unique identifier of the property.
• label: The label, which is the name of the property displayed to the user.
• defaultValue: The default value, which is the initial value of the property (usually an empty string '').
• tips: The tips, which are auxiliary descriptions typically displayed to the user.
• visible: A boolean value that controls whether the property is visible.

Example

createStringProp({
    component: 'PropString',
    field: 'field3',
    label: 'Height',
    defaultValue: '',
    tips: 'Please enter the height value',
    visible: true
});

createGroupProp()

createGroupProp is used to create a property group that wraps multiple basic properties. It is commonly used to group related properties together for easier management and display.

Parameters

• label: The label for the property group.
• props: An array of properties, containing multiple basic properties.

Example

createGroupProp({
    label: 'Group Title',
    props: [
        createNumberProp({
            field: 'field1',
            label: 'Width',
            defaultValue: 0
        }),
        createStringProp({
            field: 'field2',
            label: 'Height',
            defaultValue: ''
        })
    ]
});

createBooleanProp()

createBooleanProp is used to create a boolean property, commonly used for switches, checkboxes, etc.

Parameters

• component: The component name, usually PropBoolean.
• field: The field name, which is the unique identifier of the property.
• label: The label, which is the name of the property displayed to the user.
• defaultValue: The default value, which is the initial value of the property (boolean type).
• tips: The tips, which are auxiliary descriptions typically displayed to the user.
• visible: A boolean value that controls whether the property is visible.

Example

createBooleanProp({
    component: 'PropBoolean',
    field: 'field4',
    label: 'Enable',
    defaultValue: true,
    tips: 'Enable this feature',
    visible: true
});

createArrayProp()

createArrayProp is used to create an array-type property, commonly used for selecting multiple options or providing multiple values as input.

Parameters

• component: The component name, usually PropArray.
• field: The field name, which is the unique identifier of the property.
• label: The label, which is the name of the property displayed to the user.
• defaultValue: The default value, which is the initial value of the property (usually an empty array []).
• options: An array of available options, typically used for dropdown lists or multi-select boxes.
• tips: The tips, which are auxiliary descriptions typically displayed to the user.
• visible: A boolean value that controls whether the property is visible.

Example

createArrayProp({
    component: 'PropArray',
    field: 'field5',
    label: 'Options',
    defaultValue: [],
    options: ['Option1', 'Option2', 'Option3'],
    tips: 'Select available options',
    visible: true
});

createSlot()

createSlot is used to create a slot method, which provides flexible slot configuration for components. It supports whitelist and blacklist filtering, controlling which content can be inserted into the slot.

Parameters

• title: The title or identifier of the slot.
• allow: The whitelist, specifying the allowed slot content.
• deny: The blacklist, specifying the prohibited slot content.
• props: The additional properties for the slot, allowing for custom slot parameters.

Example

createSlot({
    title: 'CustomSlot',
    allow: ['ComponentA', 'ComponentB'], // Whitelist: allowed components
    deny: ['ComponentC'], // Blacklist: prohibited components
    props: [] // Slot extension parameters
});