ButtonGroup — JavaScript

The markup and CSS classes are on the HTML & CSS page. This page covers wiring it up.

Initialize

import { ButtonGroup } from '@popovandrii/ui-elements'
import '@popovandrii/ui-elements/style.css'

const group = new ButtonGroup()

Events

document.addEventListener('ui-button-group-change', (e) => {
  const { id, value } = (e as CustomEvent).detail // the selected input's value
})

The default checked option also emits once on init.

Programmatic API

const el = document.querySelector('.UIbg')!

group.setValue(el, 'grid')                    // select by value, emits + flashes
group.setValue(el, 'grid', { silent: true })  // no event
group.destroy()
group.scan()

Usage with Vue

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { ButtonGroup } from '@popovandrii/ui-elements'
import '@popovandrii/ui-elements/style.css'

const root = ref<HTMLElement>()
let group: ButtonGroup | null = null

function onChange(e: Event) {
  const { id, value } = (e as CustomEvent).detail // the selected input's value
  console.log(id, value)
}

onMounted(() => {
  group = new ButtonGroup({}, false, { root: root.value! })
  root.value!.addEventListener('ui-button-group-change', onChange)
})
onUnmounted(() => {
  root.value?.removeEventListener('ui-button-group-change', onChange)
  group?.destroy()
})
</script>

<template>
  <div ref="root">
    <div class="UIbg primary border" role="radiogroup" aria-label="View mode">
      <input type="radio" class="UIbg-input" value="list" name="view" id="v-list" checked />
      <label class="UIbg-btn" for="v-list">List</label>

      <input type="radio" class="UIbg-input" value="grid" name="view" id="v-grid" />
      <label class="UIbg-btn" for="v-grid">Grid</label>
    </div>
  </div>
</template>

The shared patterns (observe, a reusable composable, dynamic lists, reactive re-init) are in the full Usage with Vue guide — they apply to every component.