Create a Module Configuration Item

Parameter components are custom Vue components used by <ParameterWidget> to render editable fields.

How It Works

When <ParameterWidget> renders a field, it reads the component name from the prop schema, finds the matching registered component, and passes:

• modelValue: current field value
• node: prop schema node

When the user changes the value, the component emits update:modelValue. The widget then updates the current scene or module automatically.

Example: PropString

export default {
    name: 'PropString',
    props: {
        modelValue: String,
        node: Object,
    },
    emits: ['update:modelValue'],
    setup(props, { emit }) {
        return () => (
            <input
                value={props.modelValue ?? ''}
                placeholder={props.node?.tips ?? ''}
                onInput={(e) => emit('update:modelValue', e.target.value)}
            />
        );
    },
};

Example: PropNumber

export default {
    name: 'PropNumber',
    props: {
        modelValue: Number,
        node: Object,
    },
    emits: ['update:modelValue'],
    setup(props, { emit }) {
        return () => (
            <input
                type="number"
                value={props.modelValue ?? 0}
                onInput={(e) => emit('update:modelValue', Number(e.target.value))}
            />
        );
    },
};

Registering Parameter Components

import { createPtah, WebRenderer } from '@ptahjs/ui-vue';
import PropString from './PropString';
import PropNumber from './PropNumber';

app.use(createPtah({
    id: 've1',
    renderer: WebRenderer,
    modules: moduleTree,
    parameterComponents: {
        PropString,
        PropNumber,
    },
}));

Why Build Them Yourself

PtahJs does not force a UI library. You can implement parameter components with whatever matches your design system.