Sha256: 3275aa081d90575d5aad564cc73a6ac7ab3fc755e90bf06aab27f20a1e84d4ff
Contents?: true
Size: 1.9 KB
Versions: 38
Compression:
Stored size: 1.9 KB
Contents
import { CocoComponent } from "@js/coco.js";
import { getData } from "@helpers/alpine";
import { createSingleton } from "@libs/tippy";
export default CocoComponent("appButtonGroup", () => {
return {
options: ["collapsible"],
containerWidth: 0,
contentWidth: 0,
collapsed: false,
tooltip: null,
get collapsible() {
return this.$options.collapsible !== false;
},
get buttons() {
const buttonElements = this.$el.querySelectorAll(
"[data-component='app-button']"
);
return Array.from(buttonElements).map((el) => getData(el));
},
get parent() {
return this.$root.parentElement;
},
init() {
this.$nextTick(() => {
if (!this.collapsible) return;
this.createTooltipsSingleton();
this.onResize();
});
this.$watch("collapsed", (value) => {
this.buttons.forEach((button) => {
button.isCollapsed = value;
});
});
},
createTooltipsSingleton() {
const tippys = this.buttons
.map((button) => {
return button.showTooltip() && button.$root.__x_tippy;
})
.filter((t) => t);
this.tooltip = createSingleton(tippys, {
theme: "coco-tooltip",
onShow: () => this.collapsed,
});
},
onResize() {
if (!this.collapsible) return;
this.containerWidth = Math.ceil(this.parent.offsetWidth);
if (this.collapsed) {
if (this.containerWidth > this.contentWidth) {
this.collapsed = false;
}
} else {
if (this.containerWidth < this.contentWidth) {
this.collapsed = true;
} else {
const contentWidth = Math.ceil(this.$refs.buttons.scrollWidth);
this.contentWidth = contentWidth;
}
}
},
destroy() {
if (this.tooltip) {
this.tooltip.destroy();
this.tooltip = null;
}
},
};
});
Version data entries
38 entries across 38 versions & 1 rubygems