vuestic-ui
Version:
Vue 3 UI Framework
87 lines (86 loc) • 3.19 kB
JavaScript
import { shallowRef, computed, ref, getCurrentInstance, onMounted, watch } from "vue";
import { w as warn } from "../../utils/console.js";
import { u as useEvent } from "../../composables/useEvent.js";
import { u as useParsableMeasure } from "../../composables/useParsableMeasure.js";
const { isParsablePositiveMeasure, parseSizeValue } = useParsableMeasure();
const validateSizeProp = (v, propName) => {
const isProperValue = isParsablePositiveMeasure(v);
!isProperValue && warn(`[va-virtual-scroller] ${propName} should be number or parsable int greater or equal to 0. Provided: ${v}.`);
return isProperValue;
};
const useVirtualScrollerSizesProps = {
horizontal: { type: Boolean, default: false },
itemSize: {
type: [Number, String],
default: 0,
validator: (v) => {
return validateSizeProp(v, "itemSize");
}
},
wrapperSize: {
type: [Number, String],
default: 100,
validator: (v) => {
return v === "auto" || validateSizeProp(v, "wrapperSize");
}
}
};
const useVirtualScrollerSizes = (props, scrollPosition) => {
const list = shallowRef();
const wrapper = shallowRef();
const clientSizeMeasure = computed(() => props.horizontal ? "clientWidth" : "clientHeight");
const wrapperSize = computed(() => {
var _a;
if (props.wrapperSize === "auto") {
return ((_a = wrapper.value) == null ? void 0 : _a[clientSizeMeasure.value]) || 0;
}
return parseSizeValue(props.wrapperSize, pageFontSize);
});
const pageFontSize = ref(16);
const handleWindowResize = () => {
pageFontSize.value = parseFloat(getComputedStyle(document.documentElement).fontSize);
calcAverageItemsSize();
};
useEvent("resize", handleWindowResize, true);
const itemSizeCalculated = ref(0);
const calcAverageItemsSize = () => {
if (!list.value) {
return;
}
const sizes = [];
const itemsList = list.value.children;
const itemsAmount = itemsList.length;
for (let i = 0; i < itemsAmount; i++) {
const currentChild = list.value.children.item(i);
currentChild && sizes.push(currentChild[clientSizeMeasure.value]);
}
itemSizeCalculated.value = itemsAmount ? Math.trunc(sizes.reduce((acc, el) => acc + el, 0) / (itemsAmount - 1)) : 0;
};
const instance = getCurrentInstance();
onMounted(() => {
var _a, _b;
if (!list.value) {
list.value = (_b = (_a = instance == null ? void 0 : instance.parent) == null ? void 0 : _a.refs) == null ? void 0 : _b.list;
}
calcAverageItemsSize();
});
watch(scrollPosition, calcAverageItemsSize);
watch(wrapperSize, calcAverageItemsSize);
let oldItemSize = 0;
const itemSize = computed(() => {
const sizeParsed = parseSizeValue(props.itemSize, pageFontSize);
const result = Math.max(sizeParsed, itemSizeCalculated.value, 1);
const diff = Math.abs(oldItemSize / result * 100 - 100);
if (diff > 5 || oldItemSize === 0) {
oldItemSize = result;
return result;
}
return oldItemSize;
});
return { list, wrapper, itemSize, wrapperSize };
};
export {
useVirtualScrollerSizes as a,
useVirtualScrollerSizesProps as u
};
//# sourceMappingURL=useVirtualScrollerSizes.js.map