motion-v
Version:
<p align="center"> <img width="100" height="100" alt="Motion logo" src="https://user-images.githubusercontent.com/7850794/164965523-3eced4c4-6020-467e-acde-f11b7900ad62.png" /> </p> <h1 align="center">Motion for Vue</h1>
37 lines (36 loc) • 972 B
JavaScript
import { addDomEvent } from "../../../events/add-dom-event.mjs";
import { Feature } from "../../feature.mjs";
import { pipe } from "../../../external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/utils/pipe.mjs";
class FocusGesture extends Feature {
constructor() {
super(...arguments);
this.isActive = false;
}
onFocus() {
let isFocusVisible = false;
try {
isFocusVisible = this.state.element.matches(":focus-visible");
} catch (e) {
isFocusVisible = true;
}
if (!isFocusVisible)
return;
this.state.setActive("whileFocus", true);
this.isActive = true;
}
onBlur() {
if (!this.isActive)
return;
this.state.setActive("whileFocus", false);
this.isActive = false;
}
mount() {
this.unmount = pipe(
addDomEvent(this.state.element, "focus", () => this.onFocus()),
addDomEvent(this.state.element, "blur", () => this.onBlur())
);
}
}
export {
FocusGesture
};