Chip ​

<template>
  <div class="flex flex-wrap gap-2">
    <AChip>Primary</AChip>
    <AChip color="success">
      Success
    </AChip>
    <AChip color="info">
      Info
    </AChip>
    <AChip color="warning">
      Warning
    </AChip>
    <AChip color="danger">
      Danger
    </AChip>
  </div>
</template>

<template>
  <div class="flex gap-x-2">
    <AChip>Primary</AChip>
    <AChip variant="fill">
      Primary
    </AChip>
    <AChip variant="outline">
      Primary
    </AChip>
    <AChip variant="text">
      Primary
    </AChip>
  </div>
</template>

<template>
  <div class="flex flex-wrap gap-2">
    <AChip
      class="rounded-0"
    >
      rounded-0
    </AChip>

    <AChip
      color="success"
      class="rounded"
    >
      rounded
    </AChip>

    <AChip
      color="info"
      class="rounded-lg"
    >
      rounded-lg
    </AChip>

    <AChip
      color="warning"
      class="rounded-xl"
    >
      rounded-xl
    </AChip>

    <AChip
      color="danger"
    >
      default
    </AChip>
  </div>
</template>

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

const chips = ref(defaultThemeColors.map(c => ({
  color: c,
  isClosed: false,
})))

const allChipsClosed = computed(() => chips.value.every(chip => !chip.isClosed))
const reset = () => chips.value.forEach(chip => chip.isClosed = true)
</script>

<template>
  <div class="flex flex-wrap gap-2">
    <AChip
      v-for="chip in chips"
      :key="chip.color"
      v-model="chip.isClosed"
      :color="chip.color"
      closable
      class="capitalize"
    >
      {{ chip.color }}
    </AChip>

    <div class="w-full">
      <ABtn
        v-if="allChipsClosed"
        @click="reset"
      >
        Reset Chips
      </ABtn>
    </div>
  </div>
</template>

<template>
  <div class="flex flex-wrap gap-2">
    <AChip icon="i-bx-user">
      <span>User</span>
    </AChip>
    <AChip
      color="success"
      icon="i-bx-bxs-battery-charging"
    >
      <span>Charging</span>
    </AChip>
    <AChip
      color="info"
      icon="i-bx-wrench"
    >
      <span>Settings</span>
    </AChip>
    <AChip
      color="warning"
      icon="i-bx-car"
    >
      <span>Traffic</span>
    </AChip>
    <AChip
      color="danger"
      icon="i-bx-trash"
    >
      <span>Remove</span>
    </AChip>
  </div>
</template>

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

const { options, select, value } = useSelection({
  items: [
    'VueJS',
    'Pinia',
    'Vue Router',
    'Vitest',
    'VueUse',
  ],
  multi: true,
})
</script>

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

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

const isLightOn = ref(true)
</script>

<template>
  <div class="h-8">
    <AChip
      :icon="isLightOn ? 'i-bx-bxs-moon' : 'i-bx-bxs-sun'"
      :variant="isLightOn ? 'outline' : 'fill'"
      :color="isLightOn ? 'primary' : 'warning'"
      @click="isLightOn = !isLightOn"
    >
      {{ isLightOn ? 'Turn off light' : 'Turn on light' }}
    </AChip>
  </div>
</template>