immich/web/src/lib/components/shared-components/single-grid-row.svelte

<script lang="ts">
  let className = '';
  export { className as class };
  export let itemCount = 1;

  let container: HTMLElement | undefined;
  let contentRect: DOMRectReadOnly | undefined;

  const getGridGap = (element: Element) => {
    const style = getComputedStyle(element);

    return {
      columnGap: parsePixels(style.columnGap),
    };
  };

  const parsePixels = (style: string) => Number.parseInt(style, 10) || 0;

  const getItemCount = (container: HTMLElement, containerWidth: number) => {
    if (!container.firstElementChild) {
      return 1;
    }

    const childContentRect = container.firstElementChild.getBoundingClientRect();
    const childWidth = Math.floor(childContentRect.width || Infinity);
    const { columnGap } = getGridGap(container);

    return Math.floor((containerWidth + columnGap) / (childWidth + columnGap)) || 1;
  };

  $: if (container && contentRect) {
    itemCount = getItemCount(container, contentRect.width);
  }
</script>

<div class={className} bind:this={container} bind:contentRect>
  <slot {itemCount} />
</div>