Packages
noora
0.2.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
js/Tabs.js
import * as tabs from "@zag-js/tabs";
import {
normalizeProps,
spreadProps,
renderPart,
getOption,
getPartSelector,
} from "./util.js";
import { Component } from "./component.js";
import { VanillaMachine } from "./machine.js";
class Tabs extends Component {
initMachine(context) {
return new VanillaMachine(tabs.machine, context);
}
initApi() {
return tabs.connect(this.machine.service, normalizeProps);
}
render() {
const parts = ["root", "root:list"];
for (const part of parts) renderPart(this.el, part, this.api);
this.renderTriggers();
this.renderContents();
}
renderTriggers() {
for (const trigger of this.el.querySelectorAll(
getPartSelector("root:list:trigger"),
)) {
const value = trigger.dataset.value;
if (!value) {
console.error("Missing `data-value` attribute on trigger.");
return;
}
spreadProps(trigger, this.api.getTriggerProps({ value: value }));
}
}
renderContents() {
for (const content of this.el.querySelectorAll(
getPartSelector("root:content"),
)) {
const value = content.dataset.value;
if (!value) {
console.error("Missing `data-value` attribute on content.");
return;
}
spreadProps(content, this.api.getContentProps({ value }));
}
}
}
/**
* Phoenix LiveView Hook for Tabs component
*/
export default {
mounted() {
this.tabs = new Tabs(this.el, this.context());
this.tabs.init();
},
updated() {
this.tabs.render();
},
beforeDestroy() {
this.tabs.destroy();
},
context() {
return {
id: this.el.id,
defaultValue: getOption(this.el, "defaultValue"),
};
},
};