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

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

/**
 * ZenWeb Layout Helpers
 * Layout and positioning components
 */
import { createElement } from '../dom.js';
/**
 * Vertical box layout (flex column)
 */
export function vbox(props, ...children) {
    const style = {
        display: 'flex',
        flexDirection: 'column',
        ...(typeof props.style === 'object' ? props.style : {})
    };
    return createElement('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 createElement('div', { ...props, style }, ...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 createElement('div', { ...restProps, style }, ...children);
}
/**
 * Plain container (div without flex)
 */
export function container(props, ...children) {
    return createElement('div', props, ...children);
}
/**
 * Stack layout with z-index management
 */
export function stack(props, ...children) {
    const style = {
        position: 'relative',
        ...(typeof props.style === 'object' ? props.style : {})
    };
    return createElement('div', { ...props, style }, ...children);
}
/**
 * Center content (both axes)
 */
export function center(props, ...children) {
    const style = {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        ...(typeof props.style === 'object' ? props.style : {})
    };
    return createElement('div', { ...props, style }, ...children);
}
/**
 * Flexible spacer
 */
export function spacer(props = {}) {
    const style = {
        flex: '1',
        ...(typeof props.style === 'object' ? props.style : {})
    };
    return createElement('div', { ...props, style });
}
/**
 * Flex wrap container
 */
export function wrap(props, ...children) {
    const style = {
        display: 'flex',
        flexWrap: 'wrap',
        ...(typeof props.style === 'object' ? props.style : {})
    };
    return createElement('div', { ...props, style }, ...children);
}
/**
 * Scrollable container
 */
export function scroll(props, ...children) {
    const style = {
        overflow: 'auto',
        ...(typeof props.style === 'object' ? props.style : {})
    };
    return createElement('div', { ...props, style }, ...children);
}
/**
 * Sticky positioned container
 */
export function sticky(props, ...children) {
    const { top = '0', ...restProps } = props;
    const style = {
        position: 'sticky',
        top,
        ...(typeof restProps.style === 'object' ? restProps.style : {})
    };
    return createElement('div', { ...restProps, style }, ...children);
}
/**
 * Fixed positioned container
 */
export function fixed(props, ...children) {
    const style = {
        position: 'fixed',
        ...(typeof props.style === 'object' ? props.style : {})
    };
    return createElement('div', { ...props, style }, ...children);
}
/**
 * Absolute positioned container
 */
export function absolute(props, ...children) {
    const style = {
        position: 'absolute',
        ...(typeof props.style === 'object' ? props.style : {})
    };
    return createElement('div', { ...props, style }, ...children);
}
/**
 * Relative positioned container
 */
export function relative(props, ...children) {
    const style = {
        position: 'relative',
        ...(typeof props.style === 'object' ? props.style : {})
    };
    return createElement('div', { ...props, style }, ...children);
}
//# sourceMappingURL=layout.js.map