useSelection ​

<script setup lang="ts">
import { useSelection } from 'anu-vue'
import { ref } from 'vue'

const isMultiEnabled = ref(false)
const { options, select, value } = useSelection({
  items: ['apple', 'banana', 'orange', 'watermelon'],
  multi: isMultiEnabled,
})
</script>

<template>
  <div>
    <div class="flex flex-wrap gap-6 mb-4">
      <ABtn
        v-for="option in options"
        :key="option.value"
        :variant="option.isSelected ? 'fill' : 'light'"
        @click="select(option.value)"
      >
        {{ option.value }}
      </ABtn>
    </div>
    <ACheckbox
      v-model="isMultiEnabled"
      label="Multiple Selection"
      class="mb-3"
    />
    <small class="block">Selected: {{
      isMultiEnabled
        ? value ? [...value].join(', ') : String(value)
        : String(value)
    }}</small>
  </div>
</template>

<script lang="ts" setup>
import { numRange, useSelection } from 'anu-vue'

const { options, select, value } = useSelection({
  items: numRange(3),
})
</script>

<template>
  <div class="flex flex-wrap gap-8 mb-4">
    <ABtn
      v-for="option in options"
      :key="option.value"
      :variant="option.isSelected ? 'fill' : 'light'"
      @click="select(option.value)"
    >
      Index: {{ option.value }}
    </ABtn>
  </div>
  <small>Selected: {{ String(value) }}</small>
</template>

<script lang="ts" setup>
import { useSelection } from 'anu-vue'

const { options, select, value } = useSelection({
  items: [
    { title: 'Home', icon: 'i-bx-home' },
    { title: 'Categories', icon: 'i-bx-category' },
    { title: 'Cart', icon: 'i-bx-basket' },
    { title: 'Profile', icon: 'i-bx-user-circle' },
  ],
})
</script>

<template>
  <div class="flex flex-wrap gap-6 mb-4">
    <div
      v-for="option in options"
      :key="option.value.title"
      class="flex flex-col gap-1 items-center cursor-pointer"
      :class="option.isSelected && 'text-primary'"
      @click="select(option.value)"
    >
      <i
        :class="option.value.icon"
        class="text-lg"
      />
      <span>{{ option.value.title }}</span>
    </div>
  </div>
  <small>Selected: {{ JSON.stringify(value) }}</small>
</template>

<script setup lang="ts">
import { useSelection } from 'anu-vue'

const { options, select, value } = useSelection({
  items: ['apple', 'banana', 'orange', 'watermelon'],
  initialValue: 'banana', 
})
</script>

<template>
  <div>
    <div class="flex flex-wrap gap-6 mb-4">
      <ABtn
        v-for="option in options"
        :key="option.value"
        :variant="option.isSelected ? 'fill' : 'light'"
        @click="select(option.value)"
      >
        {{ option.value }}
      </ABtn>
    </div>
    <small class="block">Selected: {{ value }}</small>
  </div>
</template>