Use new spectrum components to build up Table SelectEditRenderer cell
This commit is contained in:
parent
698bf90007
commit
7af7ff85ad
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue