vuestic-ui
Version:
Vue 3 UI Framework
89 lines (88 loc) • 2.15 kB
JavaScript
import { ref, computed, provide, inject, watchEffect, onBeforeUnmount } from "vue";
const useLayoutProps = {
top: {
type: Object,
default: () => ({ order: 2 })
},
right: {
type: Object,
default: () => ({ order: 1 })
},
left: {
type: Object,
default: () => ({ order: 1 })
},
bottom: {
type: Object,
default: () => ({ order: 2 })
}
};
const VaLayoutKey = "VaLayout";
const useLayout = (props) => {
const items = ref({
top: null,
right: null,
bottom: null,
left: null
});
const paddings = computed(() => {
const { top, right, bottom, left } = items.value;
const { top: topConfig, right: rightConfig, bottom: bottomConfig, left: leftConfig } = props;
return {
top: top && !topConfig.absolute ? top.sizes.height : 0,
right: right && !rightConfig.absolute ? right.sizes.width : 0,
bottom: bottom && !bottomConfig.absolute ? bottom.sizes.height : 0,
left: left && !leftConfig.absolute ? left.sizes.width : 0
};
});
const orders = computed(() => ({
top: props.top.order || 0,
right: props.right.order || 0,
bottom: props.bottom.order || 0,
left: props.left.order || 0
}));
provide(VaLayoutKey, {
items,
paddings,
orders
});
return {
paddings,
orders,
items
};
};
const useFixedLayoutChild = (area, sizes) => {
const layout = inject(VaLayoutKey, null);
if (!layout) {
throw new Error("VaLayoutChild must be used inside VaLayout");
}
watchEffect(() => {
if (sizes.value) {
layout.items.value[area] = {
sizes: sizes.value
};
} else {
layout.items.value[area] = null;
}
});
onBeforeUnmount(() => {
layout.items.value[area] = null;
});
return {
paddings: computed(() => {
return Object.keys(layout.paddings.value).reduce((acc, key) => {
if (layout.orders.value[key] > layout.orders.value[area]) {
acc[key] = layout.paddings.value[key];
}
return acc;
}, {});
})
};
};
export {
useLayout as a,
useFixedLayoutChild as b,
useLayoutProps as u
};
//# sourceMappingURL=useLayout.mjs.map