Use new spectrum components to build up Table SelectEditRenderer cell

This commit is contained in:
Andrew Kingston 2021-04-16 11:05:31 +01:00
parent 698bf90007
commit 7af7ff85ad
1 changed files with 4 additions and 35 deletions

View File

@ -1,6 +1,6 @@
<script>
import "@spectrum-css/checkbox/dist/index-vars.css"
import "@spectrum-css/actionbutton/dist/index-vars.css"
import Checkbox from "../Form/Checkbox.svelte"
import ActionButton from "../ActionButton/ActionButton.svelte"
export let selected
export let onToggleSelection
@ -10,39 +10,8 @@
</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>
<Checkbox value={selected} />
{/if}
{#if allowEditRows}
<button
class="spectrum-ActionButton spectrum-ActionButton--sizeS"
on:click={onEdit}>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<ActionButton size="s" on:click={onEdit}>Edit</ActionButton>
{/if}
<style>
label {
margin-right: 5px;
}
</style>