Function render

ui/tests/storybook/components/MultiPanelTabs.stories.tsx:23–48

({modelValue})

type Story = StoryObj<typeof MultiPanelTabs>;

const render: Story["render"] = ({modelValue}) => ({
    setup() {
        const modelValueRef = ref();
        modelValueRef.value = modelValue;

        const labelStyle: StyleValue = {
            position: "absolute",
            top: 0,
            left: "0",
            color: "white",
            fontSize: "12px",
            textAlign: "right",
            padding: "0 1rem"
        };

        return () => <div style="padding: 1rem;border: 1px solid var(--ks-border-primary); border-radius: 4px; margin: 1rem; background: var(--ks-background-body)">
            <div style={{...labelStyle, background: "red", width: "250px"}}>This is an example of 250px wide element.</div>
            <div style={{...labelStyle, background: "blue", width: "800px", top: "20px"}}>This is an example of 800px wide element.</div>
            <MultiPanelTabs modelValue={modelValueRef.value} />
            <pre>{JSON.stringify(modelValueRef.value.map((p:any) => ({
                tabs:p.tabs.map((t:any) => t.value),
                size: p.size ? Math.round(p.size) : "<undefined>",
            })))}</pre>
        </div>
    }
})


const BG_COLORS = [