90 lines
2.5 KiB
Plaintext
90 lines
2.5 KiB
Plaintext
component ButtonGroup {
|
|
props {
|
|
@event click = function
|
|
@event select = function
|
|
@event change = function
|
|
items = []
|
|
value = ""
|
|
size = "md"
|
|
color = "primary"
|
|
variant = "default"
|
|
orientation = "horizontal"
|
|
responsive = false
|
|
attached = true
|
|
selectable = false
|
|
toolbar = false
|
|
disabled = false
|
|
ariaLabel = "Button group"
|
|
class = ""
|
|
}
|
|
|
|
state selectedValue = value
|
|
|
|
functions {
|
|
function itemValue(item, index) {
|
|
return item.value || item.label || String(index)
|
|
}
|
|
|
|
function selectItem(item, index) {
|
|
previousValue = selectedValue
|
|
nextValue = itemValue(item, index)
|
|
|
|
$emit("select", {
|
|
value: nextValue,
|
|
previousValue: previousValue,
|
|
item: item,
|
|
index: index
|
|
})
|
|
|
|
if (selectable && previousValue !== nextValue) {
|
|
selectedValue = nextValue
|
|
$emit("change", {
|
|
value: nextValue,
|
|
previousValue: previousValue,
|
|
item: item,
|
|
index: index
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
view {
|
|
<div
|
|
{...attrs}
|
|
class="wire-next wire-next--button-group {class}"
|
|
role="{toolbar ? 'toolbar' : 'group'}"
|
|
aria-label="{ariaLabel}"
|
|
aria-orientation="{orientation}"
|
|
data-size="{size}"
|
|
data-color="{color}"
|
|
data-variant="{variant}"
|
|
data-orientation="{orientation}"
|
|
data-responsive="{responsive}"
|
|
data-attached="{attached}"
|
|
data-selectable="{selectable}"
|
|
data-disabled="{disabled}"
|
|
>
|
|
{#if items}
|
|
{#each items as item, index}
|
|
<button
|
|
type="{item.type || 'button'}"
|
|
class="wire-btn wire-btn--variant-{item.variant || variant} wire-btn--color-{item.color || color} wire-btn--size-{item.size || size}"
|
|
disabled="{disabled || item.disabled}"
|
|
aria-label="{item.ariaLabel || item.label}"
|
|
aria-pressed="{selectable ? (selectedValue === (item.value || item.label || String(index)) ? 'true' : 'false') : ''}"
|
|
data-value="{item.value || item.label || String(index)}"
|
|
data-selected="{selectable && selectedValue === (item.value || item.label || String(index)) ? 'true' : 'false'}"
|
|
@click="selectItem(item, index)"
|
|
>
|
|
{#if item.icon}
|
|
<span class="wire-btn__icon {item.icon}" aria-hidden="true"></span>
|
|
{/if}
|
|
<span class="wire-btn__label">{item.label}</span>
|
|
</button>
|
|
{/each}
|
|
{/if}
|
|
<slot />
|
|
</div>
|
|
}
|
|
}
|