Add resizable columns and add support for all themes

This commit is contained in:
Andrew Kingston 2023-02-10 08:17:18 +00:00
parent 1cbd427d70
commit 23450d245c
2 changed files with 74 additions and 14 deletions

View File

@ -7,17 +7,6 @@
export let onChange
const options = schema?.constraints?.inclusion || []
const colors = [
"rgb(207, 223, 255)",
"rgb(208, 240, 253)",
"rgb(194, 245, 233)",
"rgb(209, 247, 196)",
"rgb(255, 234, 182)",
"rgb(254, 226, 213)",
"rgb(255, 220, 229)",
"rgb(255, 218, 246)",
"rgb(237, 226, 254)",
]
let open = false
@ -34,7 +23,7 @@
if (!value || index === -1) {
return null
}
return colors[index % colors.length]
return `hsla(${((index + 1) * 222) % 360}, 90%, 75%, 0.3)`
}
const toggle = () => {
@ -107,7 +96,6 @@
padding: 2px 8px;
background: var(--color);
border-radius: 8px;
color: #2c2c2c;
user-select: none;
}
.options {

View File

@ -16,6 +16,7 @@
const component = getContext("component")
const limit = 100
const defaultWidth = 200
const minWidth = 100
let widths
let hoveredRow
@ -35,6 +36,7 @@
})
$: fields = Object.keys($fetch.schema || {})
$: initWidths(fields)
$: sliderPositions = getSliderPositions(widths)
$: gridStyles = getGridStyles(widths)
$: schema = $fetch.schema
$: rowCount = $fetch.rows?.length || 0
@ -66,6 +68,13 @@
return `--grid: 50px ${widths.map(x => `${x}px`).join(" ")} 180px;`
}
const getSliderPositions = widths => {
let offset = 50
return widths.map(width => {
return (offset += width)
})
}
const handleScroll = e => {
const nextHorizontallyScrolled = e.target.scrollLeft > 0
if (nextHorizontallyScrolled !== horizontallyScrolled) {
@ -182,6 +191,28 @@
})
return sortedRows
}
let resizeInitialX
let resizeInitialWidth
let resizeFieldIndex
const startResizing = (fieldIdx, e) => {
resizeInitialX = e.clientX
resizeInitialWidth = widths[fieldIdx]
resizeFieldIndex = fieldIdx
document.addEventListener("mousemove", onResize)
document.addEventListener("mouseup", stopResizing)
}
const onResize = e => {
const dx = e.clientX - resizeInitialX
widths[resizeFieldIndex] = Math.max(minWidth, resizeInitialWidth + dx)
}
const stopResizing = () => {
document.removeEventListener("mousemove", onResize)
document.removeEventListener("mouseup", stopResizing)
}
</script>
<div use:styleable={$component.styles}>
@ -228,12 +259,23 @@
name={getIconForField(field)}
color="var(--spectrum-global-color-gray-600)"
/>
{field}
<span>
{field}
</span>
</div>
{/each}
<!-- Horizontal spacer -->
<div />
<!-- Sliders for resizing columns -->
{#each sliderPositions as left, idx}
<div
class="slider"
on:mousedown={e => startResizing(idx, e)}
style="--left: {left}px"
/>
{/each}
<!-- All real rows -->
{#each rows as row, rowIdx (row._id)}
{@const rowSelected = !!selectedRows[row._id]}
@ -423,10 +465,40 @@
z-index: 3;
border-color: var(--spectrum-global-color-gray-400);
}
.header span {
flex: 1 1 auto;
width: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.header.sticky {
z-index: 4;
}
/* Column resizing */
.slider {
position: absolute;
z-index: 5;
left: var(--left);
top: 0;
width: 16px;
height: 32px;
transform: translateX(-50%);
}
.slider:hover:after {
content: " ";
position: absolute;
width: 2px;
left: 50%;
height: 100%;
background: var(--spectrum-global-color-blue-400);
transform: translateX(-50%);
}
.slider:hover {
cursor: col-resize;
}
.sticky.shadow:after {
content: " ";
position: absolute;