Something went wrong. Try again.
experimental web port of the Union style engine + adapters
styling theming css solidjs react union kde
Something went wrong. Try again.
1.5 kB · 42 lines
TSX
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243import type { JSX } from 'solid-js';import { createMemo } from 'solid-js';import { useUnion } from './useUnion.js';import { toPx } from './utils.js';import { styleGroupToUnionStyleProps } from '@union-web/core';
type Props = { children?: JSX.Element; style?: JSX.CSSProperties;};
export function ApplicationWindow(props: Props) { const { current, UnionProvider } = useUnion({ role: 'applicationwindow' }); const style = createMemo(() => { const u = styleGroupToUnionStyleProps(current()); const s: JSX.CSSProperties = { display: 'flex', 'flex-direction': 'column', 'box-sizing': 'border-box', 'min-height': '100dvh', overflow: 'hidden', }; if (u.backgroundColor) s['background-color'] = u.backgroundColor; if (u.color) s.color = u.color; if (u.spacing !== undefined) s.gap = toPx(u.spacing); if (u.padding !== undefined) s.padding = toPx(u.padding); if (u.paddingTop !== undefined) s['padding-top'] = toPx(u.paddingTop); if (u.paddingRight !== undefined) s['padding-right'] = toPx(u.paddingRight); if (u.paddingBottom !== undefined) s['padding-bottom'] = toPx(u.paddingBottom); if (u.paddingLeft !== undefined) s['padding-left'] = toPx(u.paddingLeft); if (u.width !== undefined) s['min-width'] = toPx(u.width); if (u.height !== undefined) s['min-height'] = toPx(u.height); return { ...s, ...props.style }; }); return ( <UnionProvider> <div style={style()}> {props.children} </div> </UnionProvider> );}