@tomino/dynamic-form-semantic-ui/dist/mjs/layouts/tests/flex_view.test.js

Semantic UI form renderer based on dynamic form generation

import { prepareComponent, testStandard, testEditor } from '../../semantic/tests/common';
import { create } from '../../semantic/tests/form_query_data';
function elements() {
    return [
        {
            control: 'Text',
            props: { value: '1', css: { value: `width: 100px; height: 30px; background-color: red;` } }
        },
        {
            control: 'Text',
            props: { value: '1', css: { value: `width: 100px; height: 50px; background-color: blue;` } }
        },
        {
            control: 'Text',
            props: { value: '1', css: { value: `width: 100px; height: 20px; background-color: green;` } }
        },
        {
            control: 'Text',
            props: { value: '1', css: { value: `width: 100px; height: 20px; background-color: green;` } }
        },
        {
            control: 'Text',
            props: { value: '1', css: { value: `width: 100px; height: 20px; background-color: green;` } }
        },
        {
            control: 'Text',
            props: { value: '1', css: { value: `width: 100px; height: 20px; background-color: green;` } }
        }
    ];
}
const formDefinition = create.stack({
    elements: [
        {
            control: 'Text',
            props: { value: 'Row Layout', control: 'Text' }
        },
        {
            control: 'Flex',
            props: {
                layout: 'row',
                gap: '0px',
                alignItems: 'center'
            },
            elements: elements()
        },
        {
            control: 'Flex',
            props: {
                layout: 'row',
                gap: '6px',
                justifyContent: 'space-around'
            },
            elements: elements()
        },
        {
            control: 'Text',
            props: { value: 'Column Layout', control: 'Text', css: { value: 'margin-top: 15px;' } }
        },
        {
            control: 'Flex',
            props: {
                layout: 'column',
                gap: '12px',
                control: 'Stack'
            },
            elements: elements()
        },
        {
            control: 'Flex',
            props: {
                layout: 'column',
                gap: '0px'
            },
            elements: elements()
        }
    ]
});
const formData = {};
const schema = { type: 'object', properties: {} };
describe('Flex', () => {
    it('renders standard', () => {
        testStandard(formDefinition, schema, formData);
    });
    it('renders editor', () => {
        testEditor(formDefinition, schema, formData);
    });
    return {
        component: prepareComponent(formDefinition, schema, formData, {
            addEditor: true,
            showToolBox: true
        })
    };
});
//# sourceMappingURL=flex_view.test.js.map