Packages
noora
0.49.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/DigitInput.js
import * as menu from "@zag-js/pin-input";
import {
normalizeProps,
spreadProps,
renderPart,
getOption,
getBooleanOption,
getPartSelector,
} from "./util.js";
import { Component } from "./component.js";
import { VanillaMachine } from "./machine.js";
class PinInput extends Component {
initMachine(context) {
return new VanillaMachine(menu.machine, context);
}
initApi() {
return menu.connect(this.machine.service, normalizeProps);
}
render() {
const parts = ["root", "root:label"];
for (const part of parts) renderPart(this.el, part, this.api);
this.renderInputs();
}
renderInputs() {
for (const input of this.el.querySelectorAll(
getPartSelector("root:input"),
)) {
const index = input.dataset.index;
if (!index || Number.isNaN(Number.parseInt(index))) {
console.error(
"Missing or non-integer `data-index` attribute on input.",
);
return;
}
spreadProps(
input,
this.api.getInputProps({ index: Number.parseInt(index) }),
);
}
}
}
/**
* Phoenix LiveView Hook for Digit Input component
*/
export default {
mounted() {
this.context = {
id: this.el.id,
disabled: getBooleanOption(this.el, "disabled"),
placeholder: this.el.dataset.placeholder,
type: getOption(this.el, "type", [
"alphanumeric",
"numeric",
"alphabetic",
]),
otp: getBooleanOption(this.el, "otp"),
mask: getBooleanOption(this.el, "mask"),
blurOnComplete: getBooleanOption(this.el, "blurOnComplete"),
onValueChange: (details) => {
if (this.el.dataset.onChange) {
this.pushEvent(this.el.dataset.onChange, details);
}
},
onValueComplete: (details) => {
if (this.el.dataset.onComplete) {
this.pushEvent(this.el.dataset.onComplete, details);
}
},
onValueInvalid: (details) => {
if (this.el.dataset.onInvalid) {
this.pushEvent(this.el.dataset.onInvalid, details);
}
},
};
this.pinInput = new PinInput(this.el, this.context);
this.pinInput.init();
},
updated() {
this.menu.render();
},
beforeDestroy() {
this.menu.destroy();
},
};