Fix bug where button columns couldn't observe dimensions when no rows exist

This commit is contained in:
Andrew Kingston 2024-05-29 08:47:57 +01:00
parent 1a83b746b5
commit 35842525c5
2 changed files with 5 additions and 5 deletions

View File

@ -19,7 +19,7 @@
showVScrollbar, showVScrollbar,
} = getContext("grid") } = getContext("grid")
let measureContainer let container
$: buttons = $props.buttons?.slice(0, 3) || [] $: buttons = $props.buttons?.slice(0, 3) || []
$: columnsWidth = $visibleColumns.reduce( $: columnsWidth = $visibleColumns.reduce(
@ -40,7 +40,7 @@
const width = entries?.[0]?.contentRect?.width ?? 0 const width = entries?.[0]?.contentRect?.width ?? 0
buttonColumnWidth.set(width) buttonColumnWidth.set(width)
}) })
observer.observe(measureContainer) observer.observe(container)
}) })
</script> </script>
@ -51,7 +51,7 @@
class:hidden={$buttonColumnWidth === 0} class:hidden={$buttonColumnWidth === 0}
> >
<div class="content" on:mouseleave={() => ($hoveredRowId = null)}> <div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
<GridScrollWrapper scrollVertically attachHandlers> <GridScrollWrapper scrollVertically attachHandlers bind:ref={container}>
{#each $renderedRows as row} {#each $renderedRows as row}
{@const rowSelected = !!$selectedRows[row._id]} {@const rowSelected = !!$selectedRows[row._id]}
{@const rowHovered = $hoveredRowId === row._id} {@const rowHovered = $hoveredRowId === row._id}
@ -60,7 +60,6 @@
class="row" class="row"
on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)} on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)} on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
bind:this={measureContainer}
> >
<GridCell <GridCell
width="auto" width="auto"

View File

@ -18,6 +18,7 @@
export let scrollVertically = false export let scrollVertically = false
export let scrollHorizontally = false export let scrollHorizontally = false
export let attachHandlers = false export let attachHandlers = false
export let ref
// Used for tracking touch events // Used for tracking touch events
let initialTouchX let initialTouchX
@ -109,7 +110,7 @@
on:touchmove={attachHandlers ? handleTouchMove : null} on:touchmove={attachHandlers ? handleTouchMove : null}
on:click|self={() => ($focusedCellId = null)} on:click|self={() => ($focusedCellId = null)}
> >
<div {style} class="inner"> <div {style} class="inner" bind:this={ref}>
<slot /> <slot />
</div> </div>
</div> </div>