Add resizable columns and add support for all themes
This commit is contained in:
parent
1cbd427d70
commit
23450d245c
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue