decided in favor of dedicated COMPONENT() macro, updates to documentation

This commit is contained in:
udo
2026-04-19 11:34:03 +00:00
parent be514d63d6
commit 2b5586d7df
56 changed files with 926 additions and 401 deletions
@@ -1,6 +1,6 @@
#load "../../lib/app.uce"
RENDER(Request& context)
COMPONENT(Request& context)
{
String title = first(context.call["title"].to_string(), "Sign in with OAuth");
String subtitle = first(context.call["subtitle"].to_string(), "Choose your preferred authentication method");
@@ -42,7 +42,7 @@ RENDER(Request& context)
</div>
<? services.each([&](DTree service, String service_key) {
String client_id = context.call[service_key + "_client_id"].to_string();
String handler_name = starter_safe_name(service_key);
String handler_name = ascii_safe_name(service_key);
String service_name = service["name"].to_string();
String scope = service["scope"].to_string();
String auth_url = service["auth_url"].to_string();
@@ -63,7 +63,7 @@ RENDER(Request& context)
if (button) button.style.display = 'none';
if (loading) loading.style.display = 'block';
const clientId = <?: starter_json_string(client_id) ?>;
const clientId = <?: json_encode(client_id) ?>;
if (!clientId || clientId.indexOf('YOUR_') === 0) {
alert('<?= service_name ?> OAuth is not configured yet.');
if (button) button.style.display = '';
@@ -74,21 +74,21 @@ RENDER(Request& context)
const state = btoa(Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2)).replace(/[^a-zA-Z0-9]/g, '');
const params = new URLSearchParams({
client_id: clientId,
redirect_uri: <?: starter_json_string(callback_url) ?>,
scope: <?: starter_json_string(scope) ?>,
redirect_uri: <?: json_encode(callback_url) ?>,
scope: <?: json_encode(scope) ?>,
response_type: 'code',
state: state
});
sessionStorage.setItem('oauth_state', state);
sessionStorage.setItem('oauth_service', <?: starter_json_string(service_key) ?>);
sessionStorage.setItem('oauth_service', <?: json_encode(service_key) ?>);
fetch(<?: starter_json_string(store_url) ?>, {
fetch(<?: json_encode(store_url) ?>, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({oauth_service: <?: starter_json_string(service_key) ?>, oauth_state: state})
body: JSON.stringify({oauth_service: <?: json_encode(service_key) ?>, oauth_state: state})
}).catch(console.error).finally(() => {
window.location.href = <?: starter_json_string(auth_url) ?> + '?' + params.toString();
window.location.href = <?: json_encode(auth_url) ?> + '?' + params.toString();
});
};
</script>
@@ -1,6 +1,6 @@
#load "../../lib/app.uce"
RENDER(Request& context)
COMPONENT(Request& context)
{
starter_boot(context);
@@ -74,7 +74,7 @@ DTree data_format_value(DTree value, DTree row, DTree column)
return(result);
}
RENDER:SUMMARY_METRICS(Request& context)
COMPONENT:SUMMARY_METRICS(Request& context)
{
String title = context.call["title"].to_string();
String subtitle = context.call["subtitle"].to_string();
@@ -103,7 +103,7 @@ RENDER:SUMMARY_METRICS(Request& context)
</>
}
RENDER:TIMESERIES_CHART(Request& context)
COMPONENT:TIMESERIES_CHART(Request& context)
{
starter_register_js("js/u-format.js", context);
starter_register_js("js/u-timeseries-chart.js", context);
@@ -132,21 +132,21 @@ RENDER:TIMESERIES_CHART(Request& context)
<script>
(function () {
if (typeof UTimeSeriesChart === 'undefined') return;
var chart = new UTimeSeriesChart(<?: starter_json_string(canvas_id) ?>, {
xAxisLabel: <?: starter_json_string(x_axis_label) ?>,
yAxisLeftLabel: <?: starter_json_string(y_axis_left_label) ?>,
yAxisRightLabel: <?: starter_json_string(y_axis_right_label) ?>,
yAxisLeftFormat: <?: starter_json_string(y_axis_left_format) ?>,
yAxisRightFormat: <?: starter_json_string(y_axis_right_format) ?>
var chart = new UTimeSeriesChart(<?: json_encode(canvas_id) ?>, {
xAxisLabel: <?: json_encode(x_axis_label) ?>,
yAxisLeftLabel: <?: json_encode(y_axis_left_label) ?>,
yAxisRightLabel: <?: json_encode(y_axis_right_label) ?>,
yAxisLeftFormat: <?: json_encode(y_axis_left_format) ?>,
yAxisRightFormat: <?: json_encode(y_axis_right_format) ?>
});
chart.setData(<?= json_encode(context.call["series"]) ?>, <?= json_encode(context.call["x_labels"]) ?>);
window[<?: starter_json_string("chart_" + chart_id) ?>] = chart;
window[<?: json_encode("chart_" + chart_id) ?>] = chart;
}());
</script>
</>
}
RENDER:SORTABLE_TABLE(Request& context)
COMPONENT:SORTABLE_TABLE(Request& context)
{
starter_register_js("js/u-format.js", context);
starter_register_js("js/u-sortable-table.js", context);
@@ -205,13 +205,13 @@ RENDER:SORTABLE_TABLE(Request& context)
<script>
(function () {
if (typeof USortableTable === 'undefined') return;
USortableTable.init(<?: starter_json_string(table_id) ?>, <?= json_encode(init_options) ?>);
USortableTable.init(<?: json_encode(table_id) ?>, <?= json_encode(init_options) ?>);
}());
</script>
</>
}
RENDER:DATA_TABLE(Request& context)
COMPONENT:DATA_TABLE(Request& context)
{
String table_id = first(context.call["id"].to_string(), "data-grid-" + std::to_string((u64)time()));
starter_register_js("js/ag-grid/ag-grid-community.min.js", context);
@@ -259,15 +259,15 @@ RENDER:DATA_TABLE(Request& context)
(function () {
if (typeof agGrid === 'undefined') return;
const gridOptions = <?= json_encode(grid_options) ?>;
new agGrid.Grid(document.getElementById(<?: starter_json_string(table_id) ?>), gridOptions);
document.getElementById(<?: starter_json_string(table_id + "-search") ?>)?.addEventListener('input', function () {
new agGrid.Grid(document.getElementById(<?: json_encode(table_id) ?>), gridOptions);
document.getElementById(<?: json_encode(table_id + "-search") ?>)?.addEventListener('input', function () {
gridOptions.api.setQuickFilter(this.value);
});
document.getElementById(<?: starter_json_string(table_id + "-clear-filters") ?>)?.addEventListener('click', function () {
document.getElementById(<?: json_encode(table_id + "-clear-filters") ?>)?.addEventListener('click', function () {
gridOptions.api.setFilterModel(null);
gridOptions.api.setQuickFilter('');
});
document.getElementById(<?: starter_json_string(table_id + "-export-csv") ?>)?.addEventListener('click', function () {
document.getElementById(<?: json_encode(table_id + "-export-csv") ?>)?.addEventListener('click', function () {
gridOptions.api.exportDataAsCsv();
});
}());
@@ -42,7 +42,7 @@ void marketing_default_features(DTree& features)
features.push(item);
}
RENDER:HERO_SECTION(Request& context)
COMPONENT:HERO_SECTION(Request& context)
{
String title = first(context.call["title"].to_string(), "Welcome to the Present");
String subtitle = first(context.call["subtitle"].to_string(), "Experience no-quite-modern web development with our cutting-edge framework");
@@ -192,7 +192,7 @@ RENDER:HERO_SECTION(Request& context)
</>
}
RENDER:FEATURES_GRID(Request& context)
COMPONENT:FEATURES_GRID(Request& context)
{
DTree features = context.call["features"];
marketing_default_features(features);
@@ -286,7 +286,7 @@ RENDER:FEATURES_GRID(Request& context)
</>
}
RENDER:STATS_SECTION(Request& context)
COMPONENT:STATS_SECTION(Request& context)
{
DTree stats = context.call["stats"];
if(stats.get_type_name() != "array" || stats["0"]["label"].to_string() == "")
@@ -362,7 +362,7 @@ RENDER:STATS_SECTION(Request& context)
</>
}
RENDER:BRANDS_SHOWCASE(Request& context)
COMPONENT:BRANDS_SHOWCASE(Request& context)
{
DTree logos = context.call["logos"];
if(logos.get_type_name() != "array" || logos["0"]["name"].to_string() == "")
@@ -408,7 +408,7 @@ RENDER:BRANDS_SHOWCASE(Request& context)
</>
}
RENDER:TESTIMONIALS(Request& context)
COMPONENT:TESTIMONIALS(Request& context)
{
DTree testimonials = context.call["testimonials"];
if(testimonials.get_type_name() != "array" || testimonials["0"]["name"].to_string() == "")
@@ -471,7 +471,7 @@ RENDER:TESTIMONIALS(Request& context)
</>
}
RENDER:PRICING_TABLE(Request& context)
COMPONENT:PRICING_TABLE(Request& context)
{
DTree plans = context.call["plans"];
if(plans.get_type_name() != "array" || plans["0"]["name"].to_string() == "")
@@ -544,7 +544,7 @@ RENDER:PRICING_TABLE(Request& context)
</>
}
RENDER:CTA_SECTION(Request& context)
COMPONENT:CTA_SECTION(Request& context)
{
String title = first(context.call["title"].to_string(), "Ready to Get Started?");
String subtitle = first(context.call["subtitle"].to_string(), "Join thousands of developers building amazing applications with our framework.");
@@ -1,10 +1,10 @@
#load "../../lib/app.uce"
RENDER(Request& context)
COMPONENT(Request& context)
{
starter_boot(context);
String current_theme = starter_theme_value("key", context);
String current_label = first(starter_theme_value("label", context), current_theme);
String current_theme = context.cfg.get_by_path("theme/key").to_string();
String current_label = first(context.cfg.get_by_path("theme/label").to_string(), current_theme);
String route_path = context.var["starter"]["route"]["l_path"].to_string();
<>
@@ -108,7 +108,7 @@ RENDER(Request& context)
<div id="theme-menu" class="theme-menu" hidden>
<div class="theme-menu-title">Available Themes</div>
<div class="theme-menu-list">
<? starter_cfg("theme/options", context).each([&](DTree theme_info, String theme_key) {
<? context.cfg.get_by_path("theme/options").each([&](DTree theme_info, String theme_key) {
StringMap params;
params["theme"] = theme_key;
String href = starter_link(route_path == "index" ? "" : route_path, params, context);
+95
View File
@@ -0,0 +1,95 @@
.horizontal .progressbar-item {
display: flex;
min-width: 100%;
padding: 5px;
}
.progressbar-container.vertical {
display: flex;
}
.vertical .progressbar-item {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 5px;
text-align: center;
}
.progressbar-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: bold;
}
.horizontal .progressbar-label, .horizontal .progressbar-value {
flex: 0 0 auto;
margin-right: 10px;
}
.horizontal .progressbar-label {
min-width: 50px;
}
.vertical .progressbar-label {
text-align: center;
}
.horizontal .progressbar-value {
min-width: 50px;
text-align: right;
}
.progressbar-background {
flex: 1;
background: var(--bg-color);
padding: 4px;
display: flex;
}
.vertical .progressbar-background {
flex-direction: column;
justify-content: flex-end;
}
.progressbar-bar {
transition: all 0.3s ease;
}
.progressbar-marker {
position: absolute;
z-index: 10;
opacity: 0.5;
background: var(--text-color, #333);
}
.progressbar-marker:hover {
opacity: 1;
}
.horizontal .progressbar-marker {
border-width: 0 2px 0 2px;
height: 100%;
top: 0;
min-width: 4px;
}
.vertical .progressbar-marker {
border-width: 2px 0 2px 0;
width: 100%;
left: 0;
min-height: 4px;
}
.progressbar-background {
position: relative;
}
.needlegauge-svg .needle {
transition: all 0.3s ease;
}
.needlegauge-item {
display: inline-block;
}
+121
View File
@@ -0,0 +1,121 @@
// common code for gauges components
window.GaugeComponents = window.GaugeComponents || {};
Object.assign(window.GaugeComponents, { // as a namespace
// utility functions
clampValue: function(value, min, max) {
return Math.min(max, Math.max(min, value));
},
pickEntryFromRange: function(ranges, value) {
if (!Array.isArray(ranges)) return null;
for (const entry of ranges) {
if (value >= entry.from && value <= entry.to) return entry;
}
return null;
},
/**
* Creates an SVG element with namespace
*/
createSVGElement: function(tagName, attributes = {}) {
const element = document.createElementNS('http://www.w3.org/2000/svg', tagName);
Object.entries(attributes).forEach(([key, value]) => {
element.setAttribute(key, value);
});
return element;
},
/**
* Gets CSS custom property value from computed styles
*/
getCSSVar: function(varName) {
return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
},
resolveColor: function(colorSpec, value, pct) {
if (Array.isArray(colorSpec)) {
const match = this.pickEntryFromRange(colorSpec, value);
if (match && match.color) return match.color;
}
if (typeof colorSpec === 'string' && colorSpec !== '') return colorSpec;
if (pct < 60) return this.getCSSVar('--success') || '#10b981';
if (pct < 85) return this.getCSSVar('--warning') || '#f59e0b';
return this.getCSSVar('--error') || '#ef4444';
},
formatValue: function(value, precision, suffix) {
const numericValue = Number(value);
const normalizedPrecision = Number.isFinite(precision) ? precision : 1;
if (!Number.isFinite(numericValue)) return '--';
return numericValue.toFixed(normalizedPrecision) + (suffix || '');
},
gaugeArcPoint: function(pct, radius = 50) {
const angle = Math.PI - (pct / 100) * Math.PI;
return {
x: 60 + radius * Math.cos(angle),
y: 60 - radius * Math.sin(angle),
};
},
updateWatermark: function(prefix, pct) {
const now = Date.now();
this._watermarks = this._watermarks || {};
let watermark = this._watermarks[prefix];
const resetWindow = 10 * 60 * 1000;
if (!watermark || (now - watermark.resetTs) > resetWindow) {
watermark = { lo: pct, hi: pct, resetTs: now };
this._watermarks[prefix] = watermark;
} else {
if (pct < watermark.lo) watermark.lo = pct;
if (pct > watermark.hi) watermark.hi = pct;
}
return watermark;
},
renderWatermarkTick: function(lineId, pct) {
const line = document.getElementById(lineId);
if (!line) return;
if (pct == null) {
line.setAttribute('opacity', '0');
return;
}
const outer = this.gaugeArcPoint(pct, 53);
const inner = this.gaugeArcPoint(pct, 43);
line.setAttribute('x1', outer.x.toFixed(1));
line.setAttribute('y1', outer.y.toFixed(1));
line.setAttribute('x2', inner.x.toFixed(1));
line.setAttribute('y2', inner.y.toFixed(1));
line.setAttribute('opacity', '0.7');
},
updateArcGauge: function(options) {
const value = Number(options.value);
const max = Number(options.max || 100);
const normalizedValue = Number.isFinite(value) ? value : 0;
const pct = this.clampValue(max === 0 ? 0 : (normalizedValue / max) * 100, 0, 100);
const arcLength = (pct / 100) * 157.08;
const arc = document.getElementById(options.arcId);
const text = document.getElementById(options.textId);
const meta = options.metaId ? document.getElementById(options.metaId) : null;
if (arc) {
arc.setAttribute('stroke-dasharray', arcLength.toFixed(1) + ' 157.08');
arc.setAttribute('stroke', this.resolveColor(options.color, normalizedValue, pct));
}
if (text) {
text.textContent = this.formatValue(normalizedValue, options.precision, options.suffix);
}
if (meta && options.meta != null) {
meta.textContent = options.meta;
}
if (options.watermarkPrefix) {
const watermark = this.updateWatermark(options.watermarkPrefix, pct);
this.renderWatermarkTick(options.watermarkPrefix + 'WmLo', watermark.lo);
this.renderWatermarkTick(options.watermarkPrefix + 'WmHi', watermark.hi);
}
}
});
@@ -1,6 +1,6 @@
#load "../../lib/app.uce"
RENDER:PROGRESSBAR(Request& context)
COMPONENT:PROGRESSBAR(Request& context)
{
starter_register_js("components/gauges/common.js", context);
starter_register_css("themes/common/css/gauges.css", context);
@@ -96,13 +96,13 @@ RENDER:PROGRESSBAR(Request& context)
});
}
};
ProgressbarComponents.start_listen(<?= json_encode(context.call) ?>);
ProgressbarComponents.start_listen(<?: json_encode(context.call) ?>);
</script>
<? } ?>
</>
}
RENDER:NEEDLEGAUGE(Request& context)
COMPONENT:NEEDLEGAUGE(Request& context)
{
starter_register_css("themes/common/css/gauges.css", context);
String gauge_id = first(context.call["id"].to_string(), "needlegauge-" + std::to_string((u64)time()));
@@ -167,7 +167,7 @@ RENDER:NEEDLEGAUGE(Request& context)
</>
}
RENDER:ARCGAUGE(Request& context)
COMPONENT:ARCGAUGE(Request& context)
{
starter_register_js("components/gauges/common.js", context);
starter_register_css("themes/common/css/gauges.css", context);
@@ -1,13 +1,15 @@
#load "../../lib/app.uce"
RENDER(Request& context)
COMPONENT(Request& context)
{
starter_boot(context);
DTree user = starter_current_user(context);
StarterUser users(context);
DTree user = users.current();
bool signed_in = user["email"].to_string() != "";
String wrapper_class = starter_theme_value("key", context) == "localfirst" ? "admin-account-card" : "nav-account nav-menu";
String links_class = starter_theme_value("key", context) == "localfirst" ? "admin-account-links" : "";
String name_class = starter_theme_value("key", context) == "localfirst" ? "admin-account-name" : "account-name";
String theme_key = context.cfg.get_by_path("theme/key").to_string();
String wrapper_class = theme_key == "localfirst" ? "admin-account-card" : "nav-account nav-menu";
String links_class = theme_key == "localfirst" ? "admin-account-links" : "";
String name_class = theme_key == "localfirst" ? "admin-account-name" : "account-name";
<>
<div class="<?= wrapper_class ?>">
@@ -20,7 +22,7 @@ RENDER(Request& context)
<? } else { ?>
<? if(links_class != "") { ?><div class="<?= links_class ?>"><? } ?>
<a href="<?= starter_link("account/login", context) ?>">Login</a>
<? if(starter_cfg("users/enable_signup", context).to_string() != "") { ?>
<? if(context.cfg.get_by_path("users/enable_signup").to_string() != "") { ?>
<a href="<?= starter_link("account/register", context) ?>">Register</a>
<? } ?>
<? if(links_class != "") { ?></div><? } ?>
@@ -1,13 +1,13 @@
#load "../../lib/app.uce"
RENDER(Request& context)
COMPONENT(Request& context)
{
starter_boot(context);
if(context.var["starter"]["embed_mode"].to_string() != "")
return;
String text = first(starter_theme_value("footer_text", context), starter_cfg_string("site/name", context));
String inner_class = starter_theme_value("key", context) == "portal-light" ? "footer-inner" : "";
String text = first(context.cfg.get_by_path("theme/footer_text").to_string(), context.cfg.get_by_path("site/name").to_string());
String inner_class = context.cfg.get_by_path("theme/key").to_string() == "portal-light" ? "footer-inner" : "";
<>
<footer>
@@ -1,6 +1,6 @@
#load "../../lib/app.uce"
RENDER(Request& context)
COMPONENT(Request& context)
{
starter_boot(context);
@@ -29,7 +29,7 @@ RENDER(Request& context)
return;
}
String theme_key = starter_theme_value("key", context);
String theme_key = context.cfg.get_by_path("theme/key").to_string();
bool embed_mode = context.var["starter"]["embed_mode"].to_string() == "1";
String body_class = embed_mode ? "embed-mode" : "";
if(theme_key == "portal-dark")
@@ -43,9 +43,9 @@ RENDER(Request& context)
<>
<!doctype html>
<html class="<?= starter_html_class(context) ?>" lang="en" data-theme-key="<?= starter_theme_value("key", context) ?>">
<html class="<?= starter_html_class(context) ?>" lang="en" data-theme-key="<?= context.cfg.get_by_path("theme/key").to_string() ?>">
<head>
<? render_component("page_shell:HEAD", context.call, context); ?>
<? render_component(":HEAD", context.call, context); ?>
</head>
<body<?: body_class != "" ? " class=\"" + html_escape(body_class) + "\"" : "" ?>>
<? if(theme_key == "retro-gaming") { ?><div class="retro-stars"></div><? } ?>
@@ -61,10 +61,10 @@ RENDER(Request& context)
<nav class="admin-nav">
<div class="admin-nav-header">
<a class="admin-nav-title" href="<?= starter_link("", context) ?>">
<img class="admin-nav-logo-img" src="<?= starter_asset_url("themes/localfirst/img/local_first_logo.png", context) ?>" alt="<?= starter_cfg_string("site/name", context) ?>" />
<img class="admin-nav-logo-img" src="<?= starter_asset_url("themes/localfirst/img/local_first_logo.png", context) ?>" alt="<?= context.cfg.get_by_path("site/name").to_string() ?>" />
</a>
</div>
<? starter_cfg("menu", context).each([&](DTree menu_item, String menu_key) {
<? context.cfg.get_by_path("menu").each([&](DTree menu_item, String menu_key) {
if(menu_item["hidden"].to_string() == "1")
return;
String current_path = context.var["starter"]["route"]["l_path"].to_string();
@@ -95,17 +95,17 @@ RENDER(Request& context)
</>
}
RENDER:HEAD(Request& context)
COMPONENT:HEAD(Request& context)
{
starter_boot(context);
String title = first(context.var["starter"]["page_title"].to_string(), starter_cfg_string("site/default_page_title", context));
String description = first(starter_theme_value("meta_description", context), "UCE starter example");
String theme_color = first(starter_theme_value("theme_color", context), "#0f172a");
String icon = starter_asset_url(starter_theme_value("path", context) + "icon.png", context);
String title = first(context.var["starter"]["page_title"].to_string(), context.cfg.get_by_path("site/default_page_title").to_string());
String description = first(context.cfg.get_by_path("theme/meta_description").to_string(), "UCE starter example");
String theme_color = first(context.cfg.get_by_path("theme/theme_color").to_string(), "#0f172a");
String icon = starter_asset_url(context.cfg.get_by_path("theme/path").to_string() + "icon.png", context);
<>
<meta charset="utf-8">
<title><?= title + " | " + starter_cfg_string("site/name", context) ?></title>
<title><?= title + " | " + context.cfg.get_by_path("site/name").to_string() ?></title>
<meta name="description" content="<?= description ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="<?= theme_color ?>">
@@ -1,14 +1,14 @@
#load "../../lib/app.uce"
RENDER(Request& context)
COMPONENT(Request& context)
{
starter_boot(context);
<>
<nav<?: starter_theme_value("key", context) == "portal-dark" || starter_theme_value("key", context) == "dark" || starter_theme_value("key", context) == "retro-gaming" ? " class=\"nav-shell\"" : "" ?>>
<nav<?: context.cfg.get_by_path("theme/key").to_string() == "portal-dark" || context.cfg.get_by_path("theme/key").to_string() == "dark" || context.cfg.get_by_path("theme/key").to_string() == "retro-gaming" ? " class=\"nav-shell\"" : "" ?>>
<div class="nav-menu">
<a href="<?= starter_link("", context) ?>"><?= starter_cfg_string("site/name", context) ?></a>
<? starter_cfg("menu", context).each([&](DTree menu_item, String menu_key) {
<a href="<?= starter_link("", context) ?>"><?= context.cfg.get_by_path("site/name").to_string() ?></a>
<? context.cfg.get_by_path("menu").each([&](DTree menu_item, String menu_key) {
if(menu_item["hidden"].to_string() == "1")
return;
?><a href="<?= starter_menu_href(menu_key, menu_item, context) ?>"><?= menu_item["title"].to_string() ?></a><?
@@ -1,6 +1,6 @@
#load "../../lib/app.uce"
RENDER:APP_FRAME(Request& context)
COMPONENT:APP_FRAME(Request& context)
{
starter_register_css("themes/common/css/workspace.css", context);
starter_register_js("js/u-workspace-shell.js", context);
@@ -16,7 +16,7 @@ RENDER:APP_FRAME(Request& context)
</>
}
RENDER:EMPTY_STATE(Request& context)
COMPONENT:EMPTY_STATE(Request& context)
{
<>
<div class="ws-empty-state<?= context.call["class"].to_string() != "" ? " " + html_escape(context.call["class"].to_string()) : "" ?>">
@@ -28,14 +28,14 @@ RENDER:EMPTY_STATE(Request& context)
</>
}
RENDER:LIST_STATE(Request& context)
COMPONENT:LIST_STATE(Request& context)
{
<>
<div class="ws-list-state<?= context.call["class"].to_string() != "" ? " " + html_escape(context.call["class"].to_string()) : "" ?>"><? if(context.call["icon_class"].to_string() != "") { ?><i class="<?= context.call["icon_class"].to_string() ?>"></i><? } ?><span><?= context.call["text"].to_string() ?></span></div>
</>
}
RENDER:MOBILE_BAR(Request& context)
COMPONENT:MOBILE_BAR(Request& context)
{
<>
<div class="ws-mobile-bar<?= context.call["class"].to_string() != "" ? " " + html_escape(context.call["class"].to_string()) : "" ?>">
@@ -47,7 +47,7 @@ RENDER:MOBILE_BAR(Request& context)
</>
}
RENDER:PANEL_HEADER(Request& context)
COMPONENT:PANEL_HEADER(Request& context)
{
<>
<div class="ws-panel-header<?= context.call["class"].to_string() != "" ? " " + html_escape(context.call["class"].to_string()) : "" ?>">
@@ -60,7 +60,7 @@ RENDER:PANEL_HEADER(Request& context)
</>
}
RENDER:PANEL(Request& context)
COMPONENT:PANEL(Request& context)
{
<>
<section<?: context.call["id"].to_string() != "" ? " id=\"" + html_escape(context.call["id"].to_string()) + "\"" : "" ?> class="ws-panel<?= context.call["class"].to_string() != "" ? " " + html_escape(context.call["class"].to_string()) : "" ?>">
@@ -70,7 +70,7 @@ RENDER:PANEL(Request& context)
</>
}
RENDER:SECTION_HEAD(Request& context)
COMPONENT:SECTION_HEAD(Request& context)
{
<>
<div class="ws-section-head<?= context.call["class"].to_string() != "" ? " " + html_escape(context.call["class"].to_string()) : "" ?>">
@@ -80,7 +80,7 @@ RENDER:SECTION_HEAD(Request& context)
</>
}
RENDER:SECTION(Request& context)
COMPONENT:SECTION(Request& context)
{
<>
<section<?: context.call["id"].to_string() != "" ? " id=\"" + html_escape(context.call["id"].to_string()) + "\"" : "" ?> class="ws-section<?= context.call["class"].to_string() != "" ? " " + html_escape(context.call["class"].to_string()) : "" ?>">
@@ -90,7 +90,7 @@ RENDER:SECTION(Request& context)
</>
}
RENDER:SIDEBAR_SHELL(Request& context)
COMPONENT:SIDEBAR_SHELL(Request& context)
{
<>
<aside<?: context.call["id"].to_string() != "" ? " id=\"" + html_escape(context.call["id"].to_string()) + "\"" : "" ?> class="ws-sidebar<?= context.call["class"].to_string() != "" ? " " + html_escape(context.call["class"].to_string()) : "" ?>">
@@ -100,7 +100,7 @@ RENDER:SIDEBAR_SHELL(Request& context)
</>
}
RENDER:SIDEBAR_TOOLBAR(Request& context)
COMPONENT:SIDEBAR_TOOLBAR(Request& context)
{
<>
<div class="ws-sidebar-top<?= context.call["class"].to_string() != "" ? " " + html_escape(context.call["class"].to_string()) : "" ?>">
@@ -113,7 +113,7 @@ RENDER:SIDEBAR_TOOLBAR(Request& context)
</>
}
RENDER:STATUS_PILL(Request& context)
COMPONENT:STATUS_PILL(Request& context)
{
String variant = to_lower(first(context.call["variant"].to_string(), "neutral"));
<>