forked from tsai/budibase
Andrew Kingston
6 years ago
13 changed files with 649 additions and 213 deletions
@ -0,0 +1,39 @@ |
|||||
|
<script> |
||||
|
export let value |
||||
|
|
||||
|
const displayLimit = 5 |
||||
|
$: attachments = value?.slice(0, displayLimit) ?? [] |
||||
|
$: leftover = (value?.length ?? 0) - attachments.length |
||||
|
</script> |
||||
|
|
||||
|
{#each attachments as attachment} |
||||
|
{#if attachment.type.startsWith('image')} |
||||
|
<img src={attachment.url} alt={attachment.extension} /> |
||||
|
{:else} |
||||
|
<div class="file">{attachment.extension}</div> |
||||
|
{/if} |
||||
|
{/each} |
||||
|
{#if leftover} |
||||
|
<div>+{leftover} more</div> |
||||
|
{/if} |
||||
|
|
||||
|
<style> |
||||
|
img { |
||||
|
height: 32px; |
||||
|
max-width: 64px; |
||||
|
} |
||||
|
.file { |
||||
|
height: 32px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
padding: 0 8px; |
||||
|
color: var(--spectrum-global-color-gray-800); |
||||
|
border: 1px solid var(--spectrum-global-color-gray-300); |
||||
|
border-radius: 2px; |
||||
|
text-transform: uppercase; |
||||
|
font-weight: 500; |
||||
|
font-size: 11px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,38 @@ |
|||||
|
<script> |
||||
|
import "@spectrum-css/checkbox/dist/index-vars.css" |
||||
|
|
||||
|
export let value |
||||
|
</script> |
||||
|
|
||||
|
<label |
||||
|
class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized"> |
||||
|
<input |
||||
|
type="checkbox" |
||||
|
class="spectrum-Checkbox-input" |
||||
|
id="checkbox-1" |
||||
|
disabled |
||||
|
checked={!!value} /> |
||||
|
<span class="spectrum-Checkbox-box"> |
||||
|
<svg |
||||
|
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" |
||||
|
focusable="false" |
||||
|
aria-hidden="true"> |
||||
|
<use xlink:href="#spectrum-css-icon-Checkmark100" /> |
||||
|
</svg> |
||||
|
<svg |
||||
|
class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" |
||||
|
focusable="false" |
||||
|
aria-hidden="true"> |
||||
|
<use xlink:href="#spectrum-css-icon-Dash100" /> |
||||
|
</svg> |
||||
|
</span> |
||||
|
</label> |
||||
|
|
||||
|
<style> |
||||
|
.spectrum-Checkbox { |
||||
|
min-height: 0; |
||||
|
} |
||||
|
.spectrum-Checkbox-box { |
||||
|
margin: 0; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,27 @@ |
|||||
|
<script> |
||||
|
import StringRenderer from "./StringRenderer.svelte" |
||||
|
import BooleanRenderer from "./BooleanRenderer.svelte" |
||||
|
import DateTimeRenderer from "./DateTimeRenderer.svelte" |
||||
|
import RelationshipRenderer from "./RelationshipRenderer.svelte" |
||||
|
import AttachmentRenderer from "./AttachmentRenderer.svelte" |
||||
|
|
||||
|
export let schema |
||||
|
export let value |
||||
|
|
||||
|
const plainTypes = ["string", "options", "number", "longform"] |
||||
|
$: type = schema?.type ?? "string" |
||||
|
</script> |
||||
|
|
||||
|
{#if value != null && value !== ''} |
||||
|
{#if plainTypes.includes(type)} |
||||
|
<StringRenderer {value} /> |
||||
|
{:else if type === 'boolean'} |
||||
|
<BooleanRenderer {value} /> |
||||
|
{:else if type === 'datetime'} |
||||
|
<DateTimeRenderer {value} /> |
||||
|
{:else if type === 'link'} |
||||
|
<RelationshipRenderer {value} /> |
||||
|
{:else if type === 'attachment'} |
||||
|
<AttachmentRenderer {value} /> |
||||
|
{/if} |
||||
|
{/if} |
||||
@ -0,0 +1,13 @@ |
|||||
|
<script> |
||||
|
import dayjs from "dayjs" |
||||
|
|
||||
|
export let value |
||||
|
</script> |
||||
|
|
||||
|
<div>{dayjs(value).format('MMMM D YYYY, HH:mm')}</div> |
||||
|
|
||||
|
<style> |
||||
|
div { |
||||
|
width: 200px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,20 @@ |
|||||
|
<script> |
||||
|
import "@spectrum-css/label/dist/index-vars.css" |
||||
|
|
||||
|
export let value |
||||
|
|
||||
|
const displayLimit = 5 |
||||
|
$: relationships = value?.slice(0, displayLimit) ?? [] |
||||
|
$: leftover = (value?.length ?? 0) - relationships.length |
||||
|
</script> |
||||
|
|
||||
|
{#each relationships as relationship} |
||||
|
{#if relationship?.primaryDisplay} |
||||
|
<span class="spectrum-Label spectrum-Label--grey"> |
||||
|
{relationship.primaryDisplay} |
||||
|
</span> |
||||
|
{/if} |
||||
|
{/each} |
||||
|
{#if leftover} |
||||
|
<div>+{leftover} more</div> |
||||
|
{/if} |
||||
@ -0,0 +1,48 @@ |
|||||
|
<script> |
||||
|
import "@spectrum-css/checkbox/dist/index-vars.css" |
||||
|
import "@spectrum-css/actionbutton/dist/index-vars.css" |
||||
|
|
||||
|
export let selected |
||||
|
export let onToggleSelection |
||||
|
export let onEdit |
||||
|
export let allowSelectRows = false |
||||
|
export let allowEditRows = false |
||||
|
</script> |
||||
|
|
||||
|
{#if allowSelectRows} |
||||
|
<label |
||||
|
class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized"> |
||||
|
<input |
||||
|
type="checkbox" |
||||
|
class="spectrum-Checkbox-input" |
||||
|
id="checkbox-1" |
||||
|
bind:checked={selected} /> |
||||
|
<span class="spectrum-Checkbox-box"> |
||||
|
<svg |
||||
|
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" |
||||
|
focusable="false" |
||||
|
aria-hidden="true"> |
||||
|
<use xlink:href="#spectrum-css-icon-Checkmark100" /> |
||||
|
</svg> |
||||
|
<svg |
||||
|
class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" |
||||
|
focusable="false" |
||||
|
aria-hidden="true"> |
||||
|
<use xlink:href="#spectrum-css-icon-Dash100" /> |
||||
|
</svg> |
||||
|
</span> |
||||
|
</label> |
||||
|
{/if} |
||||
|
{#if allowEditRows} |
||||
|
<button |
||||
|
class="spectrum-ActionButton spectrum-ActionButton--sizeS" |
||||
|
on:click={onEdit}> |
||||
|
<span class="spectrum-ActionButton-label">Edit</span> |
||||
|
</button> |
||||
|
{/if} |
||||
|
|
||||
|
<style> |
||||
|
label { |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,13 @@ |
|||||
|
<script> |
||||
|
export let value |
||||
|
</script> |
||||
|
|
||||
|
<div>{value}</div> |
||||
|
|
||||
|
<style> |
||||
|
div { |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
width: 150px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,356 @@ |
|||||
|
<script> |
||||
|
import { createEventDispatcher } from "svelte" |
||||
|
import "@spectrum-css/table/dist/index-vars.css" |
||||
|
import CellRenderer from "./CellRenderer.svelte" |
||||
|
import SelectEditRenderer from "./SelectEditRenderer.svelte" |
||||
|
|
||||
|
export let data = [] |
||||
|
export let schema = {} |
||||
|
export let showAutoColumns = false |
||||
|
export let rowCount = 14 |
||||
|
export let quiet = true |
||||
|
export let loading = false |
||||
|
export let allowSelectRows = true |
||||
|
export let allowEditRows = true |
||||
|
export let allowEditColumns = true |
||||
|
export let selectedRows = [] |
||||
|
export let customColumnRenderer = SelectEditRenderer |
||||
|
export let customColumnTitle |
||||
|
|
||||
|
const dispatch = createEventDispatcher() |
||||
|
|
||||
|
// Config |
||||
|
const rowHeight = 55 |
||||
|
const headerHeight = 36 |
||||
|
const rowPreload = 5 |
||||
|
const maxRows = 100 |
||||
|
|
||||
|
// Sorting state |
||||
|
let sortColumn |
||||
|
let sortOrder |
||||
|
|
||||
|
// Table state |
||||
|
let loaded = false |
||||
|
$: if (!loading) loaded = true |
||||
|
$: rows = data ?? [] |
||||
|
$: visibleRowCount = loaded |
||||
|
? Math.min(rows.length, rowCount || maxRows, maxRows) |
||||
|
: rowCount || 8 |
||||
|
$: scroll = rows.length > visibleRowCount |
||||
|
$: contentStyle = getContentStyle(visibleRowCount, scroll || !loaded) |
||||
|
$: sortedRows = sortRows(rows, sortColumn, sortOrder) |
||||
|
$: fields = getFields(schema, showAutoColumns) |
||||
|
|
||||
|
// Scrolling state |
||||
|
let timeout |
||||
|
let nextScrollTop = 0 |
||||
|
let scrollTop = 0 |
||||
|
$: firstVisibleRow = calculateFirstVisibleRow(scrollTop) |
||||
|
$: lastVisibleRow = calculateLastVisibleRow( |
||||
|
firstVisibleRow, |
||||
|
visibleRowCount, |
||||
|
rows.length |
||||
|
) |
||||
|
|
||||
|
const getContentStyle = (visibleRows, useFixedHeight) => { |
||||
|
if (!useFixedHeight) { |
||||
|
return "" |
||||
|
} |
||||
|
return `height: ${headerHeight - 1 + visibleRows * (rowHeight + 1)}px;` |
||||
|
} |
||||
|
|
||||
|
const sortRows = (rows, sortColumn, sortOrder) => { |
||||
|
if (!sortColumn || !sortOrder) { |
||||
|
return rows |
||||
|
} |
||||
|
return rows.slice().sort((a, b) => { |
||||
|
const colA = a[sortColumn] |
||||
|
const colB = b[sortColumn] |
||||
|
if (sortOrder === "Descending") { |
||||
|
return colA > colB ? -1 : 1 |
||||
|
} else { |
||||
|
return colA > colB ? 1 : -1 |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
const sortBy = field => { |
||||
|
if (field === sortColumn) { |
||||
|
sortOrder = sortOrder === "Descending" ? "Ascending" : "Descending" |
||||
|
} else { |
||||
|
sortColumn = field |
||||
|
sortOrder = "Descending" |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const getFields = (schema, showAutoColumns) => { |
||||
|
let columns = [] |
||||
|
let autoColumns = [] |
||||
|
Object.entries(schema).forEach(([field, fieldSchema]) => { |
||||
|
if (!fieldSchema?.autocolumn) { |
||||
|
columns.push(field) |
||||
|
} else if (showAutoColumns) { |
||||
|
autoColumns.push(field) |
||||
|
} |
||||
|
}) |
||||
|
return columns.sort().concat(autoColumns) |
||||
|
} |
||||
|
|
||||
|
const onScroll = event => { |
||||
|
nextScrollTop = event.target.scrollTop |
||||
|
if (timeout) { |
||||
|
return |
||||
|
} |
||||
|
timeout = setTimeout(() => { |
||||
|
scrollTop = nextScrollTop |
||||
|
timeout = null |
||||
|
}, 50) |
||||
|
} |
||||
|
|
||||
|
const calculateFirstVisibleRow = scrollTop => { |
||||
|
return Math.max(Math.floor(scrollTop / (rowHeight + 1)) - rowPreload, 0) |
||||
|
} |
||||
|
|
||||
|
const calculateLastVisibleRow = (firstRow, visibleRowCount, allRowCount) => { |
||||
|
return Math.min(firstRow + visibleRowCount + 2 * rowPreload, allRowCount) |
||||
|
} |
||||
|
|
||||
|
const editColumn = (e, field) => { |
||||
|
e.stopPropagation() |
||||
|
dispatch("editcolumn", field) |
||||
|
} |
||||
|
|
||||
|
const editRow = (e, row) => { |
||||
|
e.stopPropagation() |
||||
|
dispatch("editrow", row) |
||||
|
} |
||||
|
|
||||
|
const toggleSelectRow = row => { |
||||
|
if (!allowSelectRows) { |
||||
|
return |
||||
|
} |
||||
|
if (selectedRows.includes(row)) { |
||||
|
selectedRows = selectedRows.filter(selectedRow => selectedRow !== row) |
||||
|
} else { |
||||
|
selectedRows = [...selectedRows, row] |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
{#if !loaded} |
||||
|
<div class="loading" style={contentStyle} /> |
||||
|
{:else} |
||||
|
<div |
||||
|
on:scroll={onScroll} |
||||
|
class:quiet |
||||
|
style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`} |
||||
|
class="container"> |
||||
|
<div style={contentStyle}> |
||||
|
<table class="spectrum-Table" class:spectrum-Table--quiet={quiet}> |
||||
|
<thead class="spectrum-Table-head"> |
||||
|
<tr> |
||||
|
{#if customColumnRenderer} |
||||
|
<th class="spectrum-Table-headCell"> |
||||
|
<div class="spectrum-Table-headCell-content"> |
||||
|
{customColumnTitle || ''} |
||||
|
</div> |
||||
|
</th> |
||||
|
{/if} |
||||
|
{#each fields as field} |
||||
|
<th |
||||
|
class="spectrum-Table-headCell is-sortable" |
||||
|
class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'} |
||||
|
class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'} |
||||
|
on:click={() => sortBy(field)}> |
||||
|
<div class="spectrum-Table-headCell-content"> |
||||
|
<div class="title"> |
||||
|
{schema[field]?.displayName || schema[field]?.name} |
||||
|
</div> |
||||
|
{#if schema[field]?.autocolumn} |
||||
|
<svg |
||||
|
class="spectrum-Icon spectrum-Table-autoIcon" |
||||
|
focusable="false"> |
||||
|
<use xlink:href="#spectrum-icon-18-MagicWand" /> |
||||
|
</svg> |
||||
|
{/if} |
||||
|
{#if sortColumn === field} |
||||
|
<svg |
||||
|
class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" |
||||
|
focusable="false" |
||||
|
aria-hidden="true"> |
||||
|
<use xlink:href="#spectrum-css-icon-Arrow100" /> |
||||
|
</svg> |
||||
|
{/if} |
||||
|
{#if allowEditColumns} |
||||
|
<svg |
||||
|
class="spectrum-Icon spectrum-Table-editIcon" |
||||
|
focusable="false" |
||||
|
on:click={e => editColumn(e, field)}> |
||||
|
<use xlink:href="#spectrum-icon-18-Edit" /> |
||||
|
</svg> |
||||
|
{/if} |
||||
|
</div> |
||||
|
</th> |
||||
|
{/each} |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody class="spectrum-Table-body"> |
||||
|
{#each sortedRows as row, idx} |
||||
|
<tr |
||||
|
on:click={() => toggleSelectRow(row)} |
||||
|
class="spectrum-Table-row" |
||||
|
class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}> |
||||
|
{#if idx >= firstVisibleRow && idx <= lastVisibleRow} |
||||
|
{#if customColumnRenderer} |
||||
|
<td class="spectrum-Table-cell spectrum-Table-cell--divider"> |
||||
|
<div class="spectrum-Table-cell-content"> |
||||
|
<svelte:component |
||||
|
this={customColumnRenderer} |
||||
|
data={row} |
||||
|
selected={selectedRows.includes(row)} |
||||
|
onToggleSelection={() => toggleSelectRow(row)} |
||||
|
onEdit={e => editRow(e, row)} |
||||
|
{allowSelectRows} |
||||
|
{allowEditRows} /> |
||||
|
</div> |
||||
|
</td> |
||||
|
{/if} |
||||
|
{#each fields as field} |
||||
|
<td class="spectrum-Table-cell"> |
||||
|
<div class="spectrum-Table-cell-content"> |
||||
|
<CellRenderer schema={schema[field]} value={row[field]} /> |
||||
|
</div> |
||||
|
</td> |
||||
|
{/each} |
||||
|
{/if} |
||||
|
</tr> |
||||
|
{/each} |
||||
|
</tbody> |
||||
|
</table> |
||||
|
</div> |
||||
|
</div> |
||||
|
{/if} |
||||
|
|
||||
|
<style> |
||||
|
.loading, |
||||
|
.container, |
||||
|
th { |
||||
|
background-color: var(--spectrum-global-color-gray-100); |
||||
|
} |
||||
|
|
||||
|
.container { |
||||
|
position: relative; |
||||
|
overflow: auto; |
||||
|
border: 1px solid |
||||
|
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important; |
||||
|
scrollbar-width: thin; |
||||
|
scrollbar-color: var(--spectrum-global-color-gray-300) |
||||
|
var(--spectrum-global-color-gray-100); |
||||
|
} |
||||
|
.container::-webkit-scrollbar { |
||||
|
width: 18px; |
||||
|
height: 18px; |
||||
|
} |
||||
|
.container::-webkit-scrollbar-track { |
||||
|
background: var(--spectrum-global-color-gray-100); |
||||
|
} |
||||
|
.container::-webkit-scrollbar-thumb { |
||||
|
background-color: var(--spectrum-global-color-gray-300); |
||||
|
border-radius: 20px; |
||||
|
border: 4px solid var(--spectrum-global-color-gray-100); |
||||
|
} |
||||
|
.container::-webkit-scrollbar-corner { |
||||
|
background: var(--spectrum-global-color-gray-100); |
||||
|
} |
||||
|
.container.quiet { |
||||
|
border: none !important; |
||||
|
} |
||||
|
table { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.spectrum-Table-headCell .spectrum-Icon { |
||||
|
pointer-events: all; |
||||
|
margin-left: var( |
||||
|
--spectrum-table-header-sort-icon-gap, |
||||
|
var(--spectrum-global-dimension-size-125) |
||||
|
); |
||||
|
} |
||||
|
.spectrum-Table-editIcon, |
||||
|
.spectrum-Table-autoIcon { |
||||
|
width: var(--spectrum-global-dimension-size-150); |
||||
|
height: var(--spectrum-global-dimension-size-150); |
||||
|
} |
||||
|
.spectrum-Table-editIcon { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
.spectrum-Table-headCell:hover .spectrum-Table-editIcon { |
||||
|
opacity: 1; |
||||
|
transition: opacity 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.spectrum, |
||||
|
th { |
||||
|
border-bottom: 1px solid |
||||
|
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important; |
||||
|
} |
||||
|
th { |
||||
|
vertical-align: middle; |
||||
|
height: var(--header-height); |
||||
|
position: sticky; |
||||
|
top: 0; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
.spectrum-Table-headCell-content { |
||||
|
white-space: nowrap; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
user-select: none; |
||||
|
} |
||||
|
.spectrum-Table-headCell-content .title { |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
|
||||
|
tbody { |
||||
|
z-index: 1; |
||||
|
} |
||||
|
tbody tr { |
||||
|
height: var(--row-height); |
||||
|
} |
||||
|
tbody tr.hidden { |
||||
|
height: calc(var(--row-height) + 1px); |
||||
|
} |
||||
|
tbody tr.offset { |
||||
|
background-color: red; |
||||
|
display: block; |
||||
|
} |
||||
|
td { |
||||
|
padding-top: 0; |
||||
|
padding-bottom: 0; |
||||
|
border-bottom: none !important; |
||||
|
border-left: none !important; |
||||
|
border-right: none !important; |
||||
|
border-top: 1px solid |
||||
|
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important; |
||||
|
} |
||||
|
tr:first-child td { |
||||
|
border-top: none !important; |
||||
|
} |
||||
|
.spectrum:not(.quiet) td.spectrum-Table-cell--divider { |
||||
|
width: 1px; |
||||
|
border-right: 1px solid |
||||
|
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important; |
||||
|
} |
||||
|
.spectrum-Table-cell-content { |
||||
|
height: var(--row-height); |
||||
|
white-space: nowrap; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
gap: 4px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1 @@ |
|||||
|
export { default as Table } from "./Table.svelte" |
||||
Loading…
Reference in new issue