@seemusic/ui-components
Version:
A Vue 3 UI Library. Uses Composable.
61 lines (60 loc) • 1.6 kB
JavaScript
import { defineComponent, ref, computed, onMounted, onBeforeUpdate, nextTick, createVNode } from "vue";
const SopDataTable = /* @__PURE__ */ defineComponent({
name: "SopDataTable",
props: {
title: {
type: String,
default: ""
},
cols: {
type: Number,
default: 2
},
gap: {
type: Number,
default: 16
}
},
setup(props, {
slots
}) {
const content = ref(null);
const itemWidth = computed(() => `calc((100% - ${props.gap * (props.cols - 1)}px) / ${props.cols})`);
onMounted(() => {
setSopDateTableItemWidth();
});
onBeforeUpdate(() => {
setSopDateTableItemWidth();
});
async function setSopDateTableItemWidth() {
var _a;
await nextTick();
const items = ((_a = content.value) == null ? void 0 : _a.querySelectorAll(".sop-data-table-item")) || [];
if (items.length) {
for (let i = 0; i <= items.length; i++) {
if (items[i]) {
items[i].style.width = itemWidth.value;
}
}
}
}
return () => {
var _a;
return createVNode("div", {
"class": "sop-data-table"
}, [props.title && createVNode("div", {
"class": "sop-data-table__title"
}, [props.title]), createVNode("div", {
"ref": content,
"class": "sop-data-table__content",
"style": {
gap: `0 ${props.gap + "px"}`
}
}, [(_a = slots.default) == null ? void 0 : _a.call(slots)])]);
};
}
});
export {
SopDataTable as default
};
//# sourceMappingURL=SopDataTable.mjs.map