[ui] table props refactor
parent
f967c17dda
commit
067eeeb543
|
@ -85,7 +85,7 @@
|
|||
/>
|
||||
{/each}
|
||||
{:else}
|
||||
<Table entity attribute value={false} {attributes} />
|
||||
<Table columns="entity, attribute" {attributes} />
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
|
|
|
@ -6,13 +6,17 @@
|
|||
import Marquee from "../Marquee.svelte";
|
||||
import Address from "../Address.svelte";
|
||||
|
||||
export let entity = false;
|
||||
export let attribute = true;
|
||||
export let value = true;
|
||||
export let columns = "attribute, value";
|
||||
export let header = true;
|
||||
|
||||
export let attributes: OrderedListing;
|
||||
export let editable = false;
|
||||
|
||||
// Display
|
||||
$: showEntity = columns.includes("entity");
|
||||
$: showAttribute = columns.includes("attribute");
|
||||
$: showValue = columns.includes("value");
|
||||
|
||||
// Pagination
|
||||
let currentDisplay = 999;
|
||||
const MAX_DISPLAY = 50;
|
||||
|
@ -105,31 +109,33 @@
|
|||
{#if editable}
|
||||
<col class="attr-action-col" />
|
||||
{/if}
|
||||
{#if entity}
|
||||
{#if showEntity}
|
||||
<col class="entity-col" />
|
||||
{/if}
|
||||
{#if attribute}
|
||||
{#if showAttribute}
|
||||
<col class="attr-col" />
|
||||
{/if}
|
||||
{#if value}
|
||||
{#if showValue}
|
||||
<col class="val-col" />
|
||||
{/if}
|
||||
</colgroup>
|
||||
|
||||
<tr>
|
||||
{#if editable}
|
||||
<th />
|
||||
{/if}
|
||||
{#if entity}
|
||||
<th>Entity</th>
|
||||
{/if}
|
||||
{#if attribute}
|
||||
<th>Attribute</th>
|
||||
{/if}
|
||||
{#if value}
|
||||
<th>Value</th>
|
||||
{/if}
|
||||
</tr>
|
||||
{#if header}
|
||||
<tr>
|
||||
{#if editable}
|
||||
<th />
|
||||
{/if}
|
||||
{#if showEntity}
|
||||
<th>Entity</th>
|
||||
{/if}
|
||||
{#if showAttribute}
|
||||
<th>Attribute</th>
|
||||
{/if}
|
||||
{#if showValue}
|
||||
<th>Value</th>
|
||||
{/if}
|
||||
</tr>
|
||||
{/if}
|
||||
|
||||
{#each sortedAttributes as [id, entry] (id)}
|
||||
<tr>
|
||||
|
@ -139,13 +145,13 @@
|
|||
</td>
|
||||
{/if}
|
||||
|
||||
{#if entity}
|
||||
{#if showEntity}
|
||||
<td>
|
||||
<Address link address={entry.entity} />
|
||||
</td>
|
||||
{/if}
|
||||
|
||||
{#if attribute}
|
||||
{#if showAttribute}
|
||||
<td class:formatted={Boolean(formatAttribute(entry.attribute))}>
|
||||
<Marquee>
|
||||
{formatAttribute(entry.attribute) || entry.attribute}
|
||||
|
@ -153,7 +159,7 @@
|
|||
</td>
|
||||
{/if}
|
||||
|
||||
{#if value}
|
||||
{#if showValue}
|
||||
<td class="value">
|
||||
<text-input
|
||||
{editable}
|
||||
|
@ -204,12 +210,12 @@
|
|||
<td class="attr-action">
|
||||
<sl-icon-button name="plus-circle" on:click={addEntry()} />
|
||||
</td>
|
||||
{#if attribute}
|
||||
{#if showAttribute}
|
||||
<td>
|
||||
<sl-input v-sl-model:newEntryAttribute size="small" />
|
||||
</td>
|
||||
{/if}
|
||||
{#if value}
|
||||
{#if showValue}
|
||||
<td>
|
||||
<sl-input v-sl-model:newEntryValue size="small" />
|
||||
</td>
|
||||
|
|
Loading…
Reference in New Issue