useGroupModel

Single select usage

useGroupModel allows you to create v-model like binding for a group of components.

Selected:  Bifrost

<script setup lang="ts">
import { useGroupModel } from 'bragi-vue'

const { options, select, value } = useGroupModel<string>({
  options: ['Bifrost', 'SRT', 'HLS', 'RTSP', 'RTP', 'RTMP', 'WebRTC'],
})

// preselect one value
value.value = 'Bifrost'
</script>

<template>
  <div>
    <div class="flex flex-wrap gap-2 mb-4">
      <BChip
        v-for="option in options"
        :key="option.value"
        :icon="option.isSelected && 'i-mdi:check'"
        :color="option.isSelected ? 'secondary' : 'secondary'"
        :variant="option.isSelected ? 'tonal' : 'outlined'"
        @click="select(option.value)"
      >
        {{ option.value }}
      </BChip>
    </div>
    <div class="flex">
      <strong>Selected:&nbsp;</strong> {{ value }}
    </div>
  </div>
</template>

Single select usage with persistance

useGroupModel also has an optional parameter to quickly enable persistent selection using either local or session storage. Pass a storage object with the desired storage type ( windows.loacalStorage or windows.sessionStorage), a unique key to hold the value and an optional initial value.

DANGER

Persistance currently does not work with multiple or object selection

<script setup lang="ts">
import { useGroupModel } from 'bragi-vue'

const { options, select, value } = useGroupModel<string>({
  options: ['Bifrost', 'SRT', 'HLS', 'RTSP', 'RTP', 'RTMP', 'WebRTC'],
  storage: { type: window.sessionStorage, key: 'my-uniqe-key', initialValue: 'RTSP' },
})

// preselect one value
</script>

<template>
  <div>
    <div class="flex flex-wrap gap-2 mb-4">
      <BChip
        v-for="option in options"
        :key="option.value"
        :icon="option.isSelected && 'i-mdi:check'"
        :color="option.isSelected ? 'tertiary' : 'tertiary'"
        :variant="option.isSelected ? 'tonal' : 'outlined'"
        @click="select(option.value)"
      >
        {{ option.value }}
      </BChip>
    </div>
    <div class="flex">
      <strong>Selected:&nbsp;</strong> {{ value }}
    </div>
  </div>
</template>

Multiple select usage

Set the multi property to enable selecting multiple values from options.

Selected:  Bifrost, HLS

<script setup lang="ts">
import { useGroupModel } from 'bragi-vue'

const { options, select, value } = useGroupModel({
  options: ['Bifrost', 'SRT', 'HLS', 'RTSP', 'RTP', 'RTMP', 'WebRTC'],
  multi: true,
})

// preselect one value
value.value = new Set(['Bifrost', 'HLS'])
</script>

<template>
  <div>
    <div class="flex flex-wrap gap-2 mb-4">
      <BChip
        v-for="option in options"
        :key="option.value"
        class="text-xs"
        :icon="option.isSelected && 'i-mdi:check'"
        :color="option.isSelected ? 'primary' : 'secondary'"
        :variant="option.isSelected ? 'filled' : 'outlined'"
        @click="select(option.value)"
      >
        {{ option.value }}
      </BChip>
    </div>
    <div class="flex flex-wrap gap-2 mb-4">
      <BChip
        v-for="option in options"
        :key="option.value"
        :icon="option.isSelected && 'i-mdi:check'"
        :color="option.isSelected ? 'primary' : 'secondary'"
        :variant="option.isSelected ? 'filled' : 'outlined'"
        @click="select(option.value)"
      >
        {{ option.value }}
      </BChip>
    </div>
    <div class="flex flex-wrap gap-2 mb-4">
      <BChip
        v-for="option in options"
        :key="option.value"
        class="text-base"
        :icon="option.isSelected && 'i-mdi:check'"
        :color="option.isSelected ? 'primary' : 'secondary'"
        :variant="option.isSelected ? 'filled' : 'outlined'"
        @click="select(option.value)"
      >
        {{ option.value }}
      </BChip>
    </div>
    <div class="flex">
      <strong>Selected:&nbsp;</strong> {{ [...value].join(', ') }}
    </div>
  </div>
</template>

Object selection

options can also be an object.

Monitor

Pipes

System

Profile

Selected:  {"label":"Monitor","icon":"i-mdi:chart-line"}

<script setup lang="ts">
import { useGroupModel } from 'bragi-vue'

const _options = [
  { label: 'Monitor', icon: 'i-mdi:chart-line' },
  { label: 'Pipes', icon: 'i-mdi:gamepad-circle' },
  { label: 'System', icon: 'i-mdi:cog' },
  { label: 'Profile', icon: 'i-mdi:account-outline' },
]

const { options, select, value } = useGroupModel({
  options: _options,
})

// preselect one value
value.value = _options[0]
</script>

<template>
  <div class="flex flex-wrap gap-6 mb-4 bg-container p-4">
    <div
      v-for="option in options"
      :key="option.value.label"
      class="flex flex-col gap-.5 items-center cursor-pointer"
      :class="option.isSelected ? 'text-primary font-semibold underline' : 'text-surface-onvariant'"
      @click="select(option.value)"
    >
      <i
        :class="option.value.icon"
        class="text-xl"
      />
      <span class="text-sm">{{ option.value.label }}</span>
    </div>
  </div>
  <div class="flex">
    <strong>Selected:&nbsp;</strong> {{ JSON.stringify(value) }}
  </div>
</template>