@teaui/preact
Version:
Preact renderer for TeaUI
197 lines • 7.87 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tabs = exports.Drawer = exports.Accordion = exports.Stack = exports.Slider = exports.Separator = void 0;
exports.Br = Br;
exports.Checkbox = Checkbox;
exports.CollapsibleText = CollapsibleText;
exports.ConsoleLog = ConsoleLog;
exports.Digits = Digits;
exports.H1 = H1;
exports.H2 = H2;
exports.H3 = H3;
exports.H4 = H4;
exports.H5 = H5;
exports.H6 = H6;
exports.Input = Input;
exports.Space = Space;
exports.ToggleGroup = ToggleGroup;
exports.Tree = Tree;
exports.Box = Box;
exports.Button = Button;
exports.Collapsible = Collapsible;
exports.Scrollable = Scrollable;
exports.Style = Style;
exports.Text = Text;
const jsx_runtime_1 = require("preact/jsx-runtime");
const hooks_1 = require("preact/hooks");
////
/// Views
//
function Br() {
return (0, jsx_runtime_1.jsx)("tui-br", {});
}
function Checkbox(reactProps) {
return (0, jsx_runtime_1.jsx)("tui-checkbox", { ...reactProps });
}
function CollapsibleText(reactProps) {
return (0, jsx_runtime_1.jsx)("tui-collapsible-text", { ...reactProps });
}
function ConsoleLog(reactProps) {
return (0, jsx_runtime_1.jsx)("tui-console", { ...reactProps });
}
function Digits(reactProps) {
return (0, jsx_runtime_1.jsx)("tui-digits", { ...reactProps });
}
function H1(reactProps) {
return (0, jsx_runtime_1.jsx)("tui-h1", { ...reactProps });
}
function H2(reactProps) {
return (0, jsx_runtime_1.jsx)("tui-h2", { ...reactProps });
}
function H3(reactProps) {
return (0, jsx_runtime_1.jsx)("tui-h3", { ...reactProps });
}
function H4(reactProps) {
return (0, jsx_runtime_1.jsx)("tui-h4", { ...reactProps });
}
function H5(reactProps) {
return (0, jsx_runtime_1.jsx)("tui-h5", { ...reactProps });
}
function H6(reactProps) {
return (0, jsx_runtime_1.jsx)("tui-h6", { ...reactProps });
}
function Input(reactProps) {
return (0, jsx_runtime_1.jsx)("tui-input", { ...reactProps });
}
const Separator = function Separator(reactProps) {
return (0, jsx_runtime_1.jsx)("tui-separator", { ...reactProps });
};
exports.Separator = Separator;
exports.Separator.horizontal = function SeparatorHorizontal(reactProps) {
return (0, jsx_runtime_1.jsx)("tui-separator", { direction: "horizontal", ...reactProps });
};
exports.Separator.vertical = function SeparatorHorizontal(reactProps) {
return (0, jsx_runtime_1.jsx)("tui-separator", { direction: "vertical", ...reactProps });
};
const Slider = function Slider(reactProps) {
return (0, jsx_runtime_1.jsx)("tui-slider", { ...reactProps });
};
exports.Slider = Slider;
exports.Slider.horizontal = function SliderHorizontal(reactProps) {
return (0, jsx_runtime_1.jsx)("tui-slider", { direction: "horizontal", ...reactProps });
};
exports.Slider.vertical = function SliderHorizontal(reactProps) {
return (0, jsx_runtime_1.jsx)("tui-slider", { direction: "vertical", ...reactProps });
};
function Space(reactProps) {
return (0, jsx_runtime_1.jsx)("tui-space", { ...reactProps });
}
function ToggleGroup(reactProps) {
return (0, jsx_runtime_1.jsx)("tui-toggle-group", { ...reactProps });
}
function Tree(reactProps) {
const { title, ...props } = reactProps;
const titleView = (0, hooks_1.useMemo)(() => {
if (typeof title === 'string') {
return (0, jsx_runtime_1.jsx)("tui-text", { children: title });
}
return title;
}, [title]);
return (0, jsx_runtime_1.jsx)("tui-tree", { ...props, children: titleView });
}
////
/// "Simple" containers
//
function Box(reactProps) {
const { children, ...props } = reactProps;
return (0, jsx_runtime_1.jsx)("tui-box", { ...props, children: children });
}
function Button(reactProps) {
const { children, ...props } = reactProps;
return (0, jsx_runtime_1.jsx)("tui-button", { ...props, children: children });
}
function Collapsible(reactProps) {
const { collapsed, expanded, ...props } = reactProps;
return ((0, jsx_runtime_1.jsxs)("tui-collapsible", { ...props, children: [collapsed, expanded] }));
}
const Stack = function Stack(reactProps) {
const { children, ...props } = reactProps;
return (0, jsx_runtime_1.jsx)("tui-stack", { ...props, children: children });
};
exports.Stack = Stack;
exports.Stack.down = function StackLeft(reactProps) {
const { children, ...props } = reactProps;
return ((0, jsx_runtime_1.jsx)("tui-stack", { direction: "down", ...props, children: children }));
};
exports.Stack.up = function StackLeft(reactProps) {
const { children, ...props } = reactProps;
return ((0, jsx_runtime_1.jsx)("tui-stack", { direction: "up", ...props, children: children }));
};
exports.Stack.right = function StackLeft(reactProps) {
const { children, ...props } = reactProps;
return ((0, jsx_runtime_1.jsx)("tui-stack", { direction: "right", ...props, children: children }));
};
exports.Stack.left = function StackLeft(reactProps) {
const { children, ...props } = reactProps;
return ((0, jsx_runtime_1.jsx)("tui-stack", { direction: "left", ...props, children: children }));
};
function Scrollable(reactProps) {
const { children, ...props } = reactProps;
return (0, jsx_runtime_1.jsx)("tui-scrollable", { ...props, children: children });
}
/**
* <Style /> is similar to <Text/> but only allows inline styles (bold, etc).
* Does not support align or wrap (block styles). Does not support 'font', because
* font is not encodable via SGR codes (and that's how I'm styling and
* concatenating the text nodes).
*/
function Style(reactProps) {
return (0, jsx_runtime_1.jsx)("tui-style", { ...reactProps });
}
/**
* <Text /> is a container that sets the text properties of child TextLiterals
* (font, style) and TextContainers (wrap, alignment)
*/
function Text(reactProps) {
return (0, jsx_runtime_1.jsx)("tui-text", { ...reactProps });
}
const Accordion = function Accordion(reactProps) {
const { children, ...props } = reactProps;
return (0, jsx_runtime_1.jsx)("tui-accordion", { ...props, children: children });
};
exports.Accordion = Accordion;
exports.Accordion.Section = function SliderHorizontal(reactProps) {
const { children, ...props } = reactProps;
return (0, jsx_runtime_1.jsx)("tui-accordion-section", { ...props, children: children });
};
const Drawer = function Drawer(reactProps) {
const { children, content, drawer, ...props } = reactProps;
return ((0, jsx_runtime_1.jsxs)("tui-drawer", { ...props, children: [content, drawer, children] }));
};
exports.Drawer = Drawer;
exports.Drawer.top = function DrawerLeft(reactProps) {
const { children, content, drawer, ...props } = reactProps;
return ((0, jsx_runtime_1.jsxs)("tui-drawer", { location: "top", ...props, children: [content, drawer, children] }));
};
exports.Drawer.right = function DrawerLeft(reactProps) {
const { children, content, drawer, ...props } = reactProps;
return ((0, jsx_runtime_1.jsxs)("tui-drawer", { location: "right", ...props, children: [content, drawer, children] }));
};
exports.Drawer.bottom = function DrawerLeft(reactProps) {
const { children, ...props } = reactProps;
return ((0, jsx_runtime_1.jsx)("tui-drawer", { location: "bottom", ...props, children: children }));
};
exports.Drawer.left = function DrawerLeft(reactProps) {
const { children, ...props } = reactProps;
return ((0, jsx_runtime_1.jsx)("tui-drawer", { location: "left", ...props, children: children }));
};
const Tabs = function Tabs(reactProps) {
const { children, ...props } = reactProps;
return (0, jsx_runtime_1.jsx)("tui-tabs", { ...props, children: children });
};
exports.Tabs = Tabs;
exports.Tabs.Section = function SliderHorizontal(reactProps) {
const { children, ...props } = reactProps;
return (0, jsx_runtime_1.jsx)("tui-tabs-section", { ...props, children: children });
};
//# sourceMappingURL=components.js.map