File size: 3,160 Bytes
2409829 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 |
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { type RadioEntries, type RadioEntryData } from "@graphite/messages";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
const dispatch = createEventDispatcher<{ selectedIndex: number }>();
export let entries: RadioEntries;
export let selectedIndex: number | undefined = undefined;
export let disabled = false;
export let minWidth = 0;
$: mixed = selectedIndex === undefined && !disabled;
function handleEntryClick(radioEntryData: RadioEntryData) {
const index = entries.indexOf(radioEntryData);
dispatch("selectedIndex", index);
radioEntryData.action?.();
}
</script>
<LayoutRow class="radio-input" classes={{ disabled, mixed }} styles={{ ...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}) }}>
{#each entries as entry, index}
<button class:active={!mixed ? index === selectedIndex : undefined} on:click={() => handleEntryClick(entry)} title={entry.tooltip} tabindex={index === selectedIndex ? -1 : 0} {disabled}>
{#if entry.icon}
<IconLabel icon={entry.icon} />
{/if}
{#if entry.label}
<TextLabel>{entry.label}</TextLabel>
{/if}
</button>
{/each}
</LayoutRow>
<style lang="scss" global>
.radio-input {
background: var(--color-5-dullgray);
border-radius: 2px;
height: 24px;
button {
background: var(--color-5-dullgray);
fill: var(--color-e-nearwhite);
border-radius: 2px;
height: 20px;
padding: 0;
margin: 2px 1px;
border: none;
display: flex;
align-items: center;
justify-content: center;
// `min-width: fit-content` and `flex: 1 1 0` together allow us to occupy space such that we're always at least the content width,
// but if the container is set wider, we distribute the space evenly (so buttons with short and long labels would have equal widths).
min-width: fit-content;
flex: 1 1 0;
&:first-of-type {
margin-left: 2px;
}
&:last-of-type {
margin-right: 2px;
}
&:hover {
background: var(--color-6-lowergray);
color: var(--color-f-white);
svg {
fill: var(--color-f-white);
}
}
&.active {
background: var(--color-e-nearwhite);
color: var(--color-2-mildblack);
svg {
fill: var(--color-2-mildblack);
}
}
.icon-label {
margin: 2px;
+ .text-label {
margin-left: 0;
}
}
.text-label {
margin: 0 8px;
overflow: hidden;
flex: 0 0 auto;
}
}
&.mixed {
background: var(--color-4-dimgray);
button:not(:hover),
&.disabled button:hover {
background: var(--color-5-dullgray);
}
}
&.disabled {
background: var(--color-4-dimgray);
button {
background: var(--color-4-dimgray);
color: var(--color-8-uppergray);
svg {
fill: var(--color-8-uppergray);
}
&.active {
background: var(--color-8-uppergray);
color: var(--color-2-mildblack);
svg {
fill: var(--color-2-mildblack);
}
}
}
}
}
</style>
|