vuestic-ui/dist/esm-node/src/components/va-virtual-scroller/useVirtualScrollerSizes.mjs.map

Vue 3 UI Framework

{"version":3,"file":"useVirtualScrollerSizes.mjs","sources":["../../../../../src/components/va-virtual-scroller/useVirtualScrollerSizes.ts"],"sourcesContent":["import {\n  PropType,\n  ExtractPropTypes,\n  ref,\n  Ref,\n  shallowRef,\n  computed,\n  watch,\n  onMounted,\n  getCurrentInstance,\n} from 'vue'\n\nimport { useEvent, useParsableMeasure } from '../../composables'\n\nimport { warn } from '../../utils/console'\n\nconst { isParsablePositiveMeasure, parseSizeValue } = useParsableMeasure()\n\nconst validateSizeProp = (v: number | string, propName: string) => {\n  const isProperValue = isParsablePositiveMeasure(v)\n\n  !isProperValue &&\n  warn(`[va-virtual-scroller] ${propName} should be number or parsable int greater or equal to 0. Provided: ${v}.`)\n\n  return isProperValue\n}\n\nexport const useVirtualScrollerSizesProps = {\n  horizontal: { type: Boolean, default: false },\n  itemSize: {\n    type: [Number, String] as PropType<string | number>,\n    default: 0,\n    validator: (v: number | string) => { return validateSizeProp(v, 'itemSize') },\n  },\n  wrapperSize: {\n    type: [Number, String] as PropType<number | string | 'auto'>,\n    default: 100,\n    validator: (v: number | string | 'auto') => {\n      return v === 'auto' || validateSizeProp(v, 'wrapperSize')\n    },\n  },\n}\n\nexport const useVirtualScrollerSizes = (\n  props: ExtractPropTypes<typeof useVirtualScrollerSizesProps>,\n  scrollPosition: Ref<number>,\n) => {\n  const list = shallowRef<HTMLElement>()\n  const wrapper = shallowRef<HTMLElement>()\n\n  const clientSizeMeasure = computed(() => props.horizontal ? 'clientWidth' : 'clientHeight')\n\n  const wrapperSize = computed(() => {\n    if (props.wrapperSize === 'auto') {\n      return wrapper.value?.[clientSizeMeasure.value] || 0\n    }\n\n    return parseSizeValue(props.wrapperSize, pageFontSize)\n  })\n\n  const pageFontSize = ref(16)\n  const handleWindowResize = () => {\n    pageFontSize.value = parseFloat(getComputedStyle(document.documentElement).fontSize)\n\n    calcAverageItemsSize()\n  }\n  useEvent('resize', handleWindowResize, true)\n\n  const itemSizeCalculated = ref(0)\n  const calcAverageItemsSize = () => {\n    if (!list.value) { return }\n\n    const sizes: number[] = []\n    const itemsList = list.value.children\n    const itemsAmount = itemsList.length\n\n    for (let i = 0; i < itemsAmount; i++) {\n      const currentChild = list.value.children.item(i)\n      currentChild && sizes.push(currentChild[clientSizeMeasure.value])\n    }\n\n    itemSizeCalculated.value = itemsAmount\n      ? Math.trunc(sizes.reduce((acc, el) => acc + el, 0) / (itemsAmount - 1))\n      : 0\n  }\n\n  const instance = getCurrentInstance()\n  onMounted(() => {\n    if (!list.value) { list.value = instance?.parent?.refs?.list as HTMLElement | undefined }\n    calcAverageItemsSize()\n  })\n  watch(scrollPosition, calcAverageItemsSize)\n  watch(wrapperSize, calcAverageItemsSize)\n\n  let oldItemSize = 0\n  const itemSize = computed(() => {\n    const sizeParsed = parseSizeValue(props.itemSize, pageFontSize)\n\n    const result = Math.max(sizeParsed, itemSizeCalculated.value, 1)\n    const diff = Math.abs(((oldItemSize / result) * 100) - 100)\n\n    /**\n     * 5 - empirically derived number, some kind of debounce but without freezes.\n     * While recalculating rendered items average size, if difference is too small, this can cause list 'shaking' because of algorithm:\n     * `rendering items -> calculating their size -> rebuilding list total size -> items offset -> rendering items`\n     * This smoothing is intended to prevent such cases.\n     */\n    if (diff > 5 || oldItemSize === 0) {\n      oldItemSize = result\n      return result\n    }\n\n    return oldItemSize\n  })\n\n  return { list, wrapper, itemSize, wrapperSize }\n}\n"],"names":[],"mappings":";;;;AAgBA,MAAM,EAAE,2BAA2B,mBAAmB;AAEtD,MAAM,mBAAmB,CAAC,GAAoB,aAAqB;AAC3D,QAAA,gBAAgB,0BAA0B,CAAC;AAEjD,GAAC,iBACD,KAAK,yBAAyB,QAAQ,sEAAsE,CAAC,GAAG;AAEzG,SAAA;AACT;AAEO,MAAM,+BAA+B;AAAA,EAC1C,YAAY,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,EAC5C,UAAU;AAAA,IACR,MAAM,CAAC,QAAQ,MAAM;AAAA,IACrB,SAAS;AAAA,IACT,WAAW,CAAC,MAAuB;AAAS,aAAA,iBAAiB,GAAG,UAAU;AAAA,IAAE;AAAA,EAC9E;AAAA,EACA,aAAa;AAAA,IACX,MAAM,CAAC,QAAQ,MAAM;AAAA,IACrB,SAAS;AAAA,IACT,WAAW,CAAC,MAAgC;AAC1C,aAAO,MAAM,UAAU,iBAAiB,GAAG,aAAa;AAAA,IAC1D;AAAA,EACF;AACF;AAEa,MAAA,0BAA0B,CACrC,OACA,mBACG;AACH,QAAM,OAAO;AACb,QAAM,UAAU;AAEhB,QAAM,oBAAoB,SAAS,MAAM,MAAM,aAAa,gBAAgB,cAAc;AAEpF,QAAA,cAAc,SAAS,MAAM;;AAC7B,QAAA,MAAM,gBAAgB,QAAQ;AAChC,eAAO,aAAQ,UAAR,mBAAgB,kBAAkB,WAAU;AAAA,IACrD;AAEO,WAAA,eAAe,MAAM,aAAa,YAAY;AAAA,EAAA,CACtD;AAEK,QAAA,eAAe,IAAI,EAAE;AAC3B,QAAM,qBAAqB,MAAM;AAC/B,iBAAa,QAAQ,WAAW,iBAAiB,SAAS,eAAe,EAAE,QAAQ;AAE9D;EAAA;AAEd,WAAA,UAAU,oBAAoB,IAAI;AAErC,QAAA,qBAAqB,IAAI,CAAC;AAChC,QAAM,uBAAuB,MAAM;AAC7B,QAAA,CAAC,KAAK,OAAO;AAAE;AAAA,IAAO;AAE1B,UAAM,QAAkB,CAAA;AAClB,UAAA,YAAY,KAAK,MAAM;AAC7B,UAAM,cAAc,UAAU;AAE9B,aAAS,IAAI,GAAG,IAAI,aAAa,KAAK;AACpC,YAAM,eAAe,KAAK,MAAM,SAAS,KAAK,CAAC;AAC/C,sBAAgB,MAAM,KAAK,aAAa,kBAAkB,KAAK,CAAC;AAAA,IAClE;AAEA,uBAAmB,QAAQ,cACvB,KAAK,MAAM,MAAM,OAAO,CAAC,KAAK,OAAO,MAAM,IAAI,CAAC,KAAK,cAAc,EAAE,IACrE;AAAA,EAAA;AAGN,QAAM,WAAW;AACjB,YAAU,MAAM;;AACV,QAAA,CAAC,KAAK,OAAO;AAAO,WAAA,SAAQ,gDAAU,WAAV,mBAAkB,SAAlB,mBAAwB;AAAA,IAAgC;AACnE;EAAA,CACtB;AACD,QAAM,gBAAgB,oBAAoB;AAC1C,QAAM,aAAa,oBAAoB;AAEvC,MAAI,cAAc;AACZ,QAAA,WAAW,SAAS,MAAM;AAC9B,UAAM,aAAa,eAAe,MAAM,UAAU,YAAY;AAE9D,UAAM,SAAS,KAAK,IAAI,YAAY,mBAAmB,OAAO,CAAC;AAC/D,UAAM,OAAO,KAAK,IAAM,cAAc,SAAU,MAAO,GAAG;AAQtD,QAAA,OAAO,KAAK,gBAAgB,GAAG;AACnB,oBAAA;AACP,aAAA;AAAA,IACT;AAEO,WAAA;AAAA,EAAA,CACR;AAED,SAAO,EAAE,MAAM,SAAS,UAAU,YAAY;AAChD;"}