@razen-core/zenweb/dist/runtime/helpers.js

A minimalist TypeScript framework for building reactive web applications with no virtual DOM

/**
 * ZenWeb Helper Functions
 * UI component helpers for building layouts
 */
import { h } from './vdom.js';
/**
 * Vertical box layout (flex column)
 */
export function vbox(props, children) {
    const style = {
        display: 'flex',
        flexDirection: 'column',
        ...(typeof props.style === 'object' ? props.style : {})
    };
    return h('div', { ...props, style }, ...children);
}
/**
 * Horizontal box layout (flex row)
 */
export function hbox(props, children) {
    const style = {
        display: 'flex',
        flexDirection: 'row',
        ...(typeof props.style === 'object' ? props.style : {})
    };
    return h('div', { ...props, style }, ...children);
}
/**
 * Text element
 */
export function text(props, content) {
    if (typeof props === 'string') {
        return h('span', {}, props);
    }
    return h('span', props, content || '');
}
/**
 * Button element
 */
export function button(props, content) {
    return h('button', props, content);
}
/**
 * Input element
 */
export function input(props) {
    return h('input', props);
}
/**
 * Image element
 */
export function image(props) {
    const imgProps = { ...props };
    if (props.lazy) {
        imgProps.loading = 'lazy';
        delete imgProps.lazy;
    }
    return h('img', imgProps);
}
/**
 * Link/anchor element
 */
export function link(props, children) {
    return h('a', props, ...children);
}
/**
 * Grid layout container
 */
export function grid(props, children) {
    const { columns = 1, gap = '1rem', ...restProps } = props;
    const style = {
        display: 'grid',
        gridTemplateColumns: `repeat(${columns}, 1fr)`,
        gap,
        ...(typeof restProps.style === 'object' ? restProps.style : {})
    };
    return h('div', { ...restProps, style }, ...children);
}
/**
 * List element with optimized rendering
 */
export function list(props) {
    const { items, renderItem, keyExtractor, ...restProps } = props;
    const children = items.map((item, index) => {
        const child = renderItem(item, index);
        if (keyExtractor) {
            child.key = keyExtractor(item, index);
        }
        return child;
    });
    return h('div', restProps, ...children);
}
/**
 * Div element (generic container)
 */
export function div(props, children) {
    return h('div', props, ...children);
}
/**
 * Span element (inline container)
 */
export function span(props, children) {
    return h('span', props, ...children);
}
/**
 * Heading elements
 */
export function h1(props, content) {
    return h('h1', props, content);
}
export function h2(props, content) {
    return h('h2', props, content);
}
export function h3(props, content) {
    return h('h3', props, content);
}
export function h4(props, content) {
    return h('h4', props, content);
}
export function h5(props, content) {
    return h('h5', props, content);
}
export function h6(props, content) {
    return h('h6', props, content);
}
/**
 * Paragraph element
 */
export function p(props, content) {
    return h('p', props, content);
}
/**
 * Form element
 */
export function form(props, children) {
    return h('form', props, ...children);
}
/**
 * Textarea element
 */
export function textarea(props, content) {
    return h('textarea', props, content || '');
}
/**
 * Select element
 */
export function select(props, children) {
    return h('select', props, ...children);
}
/**
 * Option element
 */
export function option(props, content) {
    return h('option', props, content);
}
//# sourceMappingURL=helpers.js.map