verstak
Version:
Verstak - Front-End Library
45 lines (44 loc) • 1.61 kB
JavaScript
import { ReactiveTreeNode, Mode, setBasis } from "reactronic";
import { Block, OnClick } from "verstak";
import { rxModel } from "./common/Utils.js";
import { Theme } from "./Theme.js";
import { Icon } from "./Icon.v.js";
export function Toggle(declaration) {
return (Block(setBasis(declaration, {
preparation() {
var _a;
(_a = this.model) !== null && _a !== void 0 ? _a : (this.model = rxModel({
label: ReactiveTreeNode.current.key,
checked: true,
color: "green"
}));
},
body() {
const m = this.model;
const theme = Theme.current;
const toggleTheme = theme.toggle;
this.useStylingPreset(toggleTheme.main);
Icon(`fa-solid fa-toggle-${m.checked ? "on" : "off"}`, {
body(el, base) {
var _a;
base();
this.useStylingPreset(toggleTheme.icon);
this.style.color = m.checked ? ((_a = theme.positiveColor) !== null && _a !== void 0 ? _a : "") : "";
},
});
if (m.label) {
Block({
mode: Mode.primitive,
body(el, base) {
base();
this.text = m.label;
this.useStylingPreset(toggleTheme.label);
},
});
}
OnClick(this.native, () => {
this.model.checked = !this.model.checked;
});
},
})));
}