Sha256: e5cf8ba50aa46c67f826c167d5078a7318e5e67845d2401f15298b90b843db42
Contents?: true
Size: 1.46 KB
Versions: 16
Compression:
Stored size: 1.46 KB
Contents
import { tippy, hideOnEsc } from "@libs/tippy";
export default function withDropdown(props = {}) {
function withDropdownMixin(component) {
const tippyEl = component.$refs.dropdownTrigger || component.$root;
const dropdown = tippy(tippyEl, {
trigger: "click",
interactive: true,
animation: false,
content: component.$refs.dropdownPanel,
plugins: [hideOnEsc],
onMount() {
if (component.onDropdownMount) {
component.onDropdownMount();
}
},
onCreate() {
if (component.onDropdownCreate) {
component.onDropdownCreate();
}
},
onShow: () => {
component.dropdown.open = true;
if (component.onDropdownShow) {
return component.onDropdownShow();
}
if (component.setState) {
component.setState("active");
}
},
onHide: () => {
component.dropdown.open = false;
if (component.onDropdownHide) {
component.onDropdownHide();
}
if (component.resetState) {
component.resetState();
}
},
...props,
});
return Object.assign(component, {
dropdown: Alpine.reactive({
instance: dropdown,
open: false,
hide() {
this.instance.hide();
},
show() {
this.instance.show();
},
}),
});
}
withDropdownMixin.props = ["dropdown"];
return withDropdownMixin;
}
Version data entries
16 entries across 16 versions & 1 rubygems