Checkbox

<script setup lang="ts">
const checked = ref(false)
const indeterminate = ref<boolean | 'indeterminate'>('indeterminate')
</script>

<template>
  <div class="flex flex-wrap gap-4">
    <NCheckbox v-model="checked" label="Checkbox" />

    <NCheckbox
      :model-value="indeterminate"
      label="Indeterminate"
      @update:model-value="indeterminate === true ? indeterminate = 'indeterminate' : indeterminate = true"
    />
  </div>
</template>

<script setup lang="ts">
const colors = ref([
  {
    checkbox: 'red sm:primary',
    value: true,
  },
  {
    checkbox: 'info',
    value: true,
  },
  {
    checkbox: 'error',
    value: true,
  },
  {
    checkbox: 'warning',
    value: true,
  },
  {
    checkbox: 'success',
    value: true,
  },
  {
    checkbox: 'purple',
    value: true,
  },
  {
    checkbox: 'pink',
    value: true,
  },
  {
    checkbox: 'violet',
    value: true,
  },
  {
    checkbox: 'fuchsia',
    value: true,
  },
  {
    checkbox: 'indigo',
    value: true,
  },
])
</script>

<template>
  <div class="flex flex-wrap gap-4">
    <NCheckbox
      v-for="color in colors"
      :key="color.checkbox"
      v-model="color.value"
      :label="color.checkbox"
      :checkbox="color.checkbox"
    />
  </div>
</template>

<script setup lang="ts">
const notifications = ref([
  {
    label: 'On github',
    value: false,
    checkbox: 'gray',
  },
  {
    label: 'Email',
    value: false,
    checkbox: 'yellow',
  },
  {
    label: 'Discord',
    value: false,
    checkbox: 'indigo',
  },
])
</script>

<template>
  <div class="flex flex-col space-y-6">
    <!-- Vertical -->
    <NFormGroup
      label="Participating, @mentions and custom"
      description="Notifications for the conversations you are participating in, or if someone cites you with an @mention. Also for all activity when subscribed to specific events."
    >
      <NCheckbox
        v-for="option in notifications"
        :key="option.label"
        v-model="option.value"
        :label="option.label"
        :checkbox="option.checkbox"
      />
    </NFormGroup>

    <NSeparator />

    <!-- Horizontal -->
    <NFormGroup
      required
      message="You must choose at least one event"
      label="Participating, @mentions and custom"
      description="Notifications for the conversations you are participating in, or if someone cites you with an @mention. Also for all activity when subscribed to specific events."
    >
      <div class="flex flex-wrap gap-8">
        <NCheckbox
          v-for="option in notifications"
          :key="option.label"
          v-model="option.value"
          :label="option.label"
          :checkbox="option.checkbox"
        />
      </div>
    </NFormGroup>
  </div>
</template>

<script setup lang="ts">
const items = ref([
  {
    label: '0.8cm',
    size: '0.8cm',
    checkbox: 'primary',
    value: true,
  },
  {
    label: 'xs md:2xl',
    size: 'xs md:2xl data-[state=checked]:3xl',
    checkbox: 'blue',
    value: 'indeterminate',
  },
  {
    label: 'sm',
    size: 'sm data-[state=checked]:2xl',
    checkbox: 'green',
    value: false,
  },
  {
    label: 'md',
    size: 'md data-[state=checked]:2xl',
    checkbox: 'purple',
    value: false,
  },
  {
    label: 'lg',
    size: 'lg data-[state=checked]:2xl',
    checkbox: 'red',
    value: true,
  },
])
</script>

<template>
  <div class="flex flex-wrap gap-4">
    <NCheckbox
      v-for="item in items"
      :key="item.size"
      v-model="item.value as boolean | 'indeterminate'"
      v-bind="{
        size: item.size,
        label: item.label,
        checkbox: item.checkbox,
      }"
    />
  </div>
</template>

<script setup lang="ts">
const items = ref([
  {
    label: '0.8cm',
    size: '0.8cm',
    checkbox: 'primary',
    value: true,
  },
  {
    label: 'xs md:2xl',
    size: 'xs md:2xl data-[state=checked]:3xl',
    checkbox: 'blue',
    value: 'indeterminate',
  },
  {
    label: 'sm',
    size: 'sm data-[state=checked]:2xl',
    checkbox: 'green',
    value: false,
  },
  {
    label: 'md',
    size: 'md data-[state=checked]:2xl',
    checkbox: 'purple',
    value: false,
  },
  {
    label: 'lg',
    size: 'lg data-[state=checked]:2xl',
    checkbox: 'red',
    value: true,
  },
])
</script>

<template>
  <div class="flex flex-wrap gap-4">
    <NCheckbox
      v-for="item in items"
      :key="item.size"
      v-model="item.value as boolean | 'indeterminate'"
      v-bind="{
        size: item.size,
        label: item.label,
        checkbox: item.checkbox,
      }"
    />
  </div>
</template>

<script setup lang="ts">
const options = ref([
  { label: 'Checkbox A', value: false },
  { label: 'Checkbox B', value: false },
  { label: 'Checkbox C', value: false },
])
</script>

<template>
  <div class="flex flex-wrap gap-x-8 gap-y-6">
    <NCheckbox
      v-for="option in options"
      :key="option.label"
      v-model="option.value"
      :label="option.label"
      reverse
    />
  </div>
</template>

<script setup lang="ts">
const options = ref([
  {
    value: true,
    label: '1',
  },
  {
    value: true,
    label: '2',
  },
  {
    value: false,
    label: '3',
  },
])
</script>

<template>
  <div class="flex flex-wrap gap-4">
    <NCheckbox
      v-for="(option, i) in options"
      :key="i"
      v-model="option.value"
      :label="option.label"
      size="xl"
      :una="{
        checkboxCheckedIcon: 'i-tabler-checks',
      }"
    />
  </div>
</template>

<script setup lang="ts">
const options = ref([
  {
    value: true,
    label: '1',
    checkbox: 'green',
    una: {
      checkboxCheckedIcon: 'i-tabler-circle-1-filled',
    },
  },
  {
    value: true,
    label: '2',
    checkbox: 'blue',
    una: {
      checkboxCheckedIcon: 'i-tabler-circle-2-filled',
    },
  },
  {
    value: true,
    label: '3',
    checkbox: 'red',
    una: {
      checkboxCheckedIcon: 'i-tabler-circle-3-filled',
    },
  },
])
</script>

<template>
  <div class="flex flex-wrap gap-4">
    <NCheckbox
      v-for="(option, i) in options"
      :key="i"
      v-model="option.value"
      :checkbox="option.checkbox"
      :label="option.label"
      size="3xl"
      class="rounded-full"
      :una="option.una"
    />
  </div>
</template>

<script setup lang="ts">
const options = ref([
  {
    value: true,
    label: 'Vue',
    class: 'data-[state=checked]:bg-green-500/30 data-[state=checked]:border-green-500',
    checkbox: 'green',
    una: {
      checkboxCheckedIcon: 'i-logos-vue',
      checkboxIndicator: 'data-[state=checked]:scale-150 transition-transform duration-1000',
    },
  },
  {
    value: true,
    label: 'React',
    class: 'data-[state=checked]:bg-blue-500/30 data-[state=checked]:border-blue-500',
    checkbox: 'blue',
    una: {
      checkboxCheckedIcon: 'i-logos-react',
      checkboxIndicator: 'data-[state=checked]:rotate-360 transition-transform duration-1000',
    },
  },
  {
    value: true,
    label: 'Angular',
    class: 'data-[state=checked]:bg-red-500/30 data-[state=checked]:border-red-500',
    checkbox: 'red',
    una: {
      checkboxCheckedIcon: 'i-logos-angular-icon',
      checkboxIndicator: 'data-[state=checked]:scale-120 transition-transform duration-1000',
    },
  },
  {
    value: true,
    label: 'Svelte',
    class: 'data-[state=checked]:bg-orange-500/30 data-[state=checked]:border-orange-500',
    checkbox: 'orange',
    una: {
      checkboxCheckedIcon: 'i-logos-svelte-icon',
      checkboxIndicator: 'data-[state=checked]:scale-120 transition-transform duration-1000',
    },
  },
])

const optionsValue = computed(() => options.value.map(option => option.value))
</script>

<template>
  <div class="flex flex-col space-y-6">
    <span>
      Value: {{ optionsValue }}
    </span>

    <div class="flex flex-wrap gap-4">
      <NCheckbox
        v-for="(option, i) in options"
        :key="i"
        v-model="option.value"
        :checkbox="option.checkbox"
        size="15"
        :label="option.label"
        :class="option.class"
        class="rounded-md"
        :una="option.una"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { CheckboxRootEmits } from 'reka-ui'
import type { NCheckboxProps } from '../../types'
import { reactivePick } from '@vueuse/core'
import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
import { computed } from 'vue'
import { cn, randomId } from '../../utils'
import Icon from '../elements/Icon.vue'
import Label from '../elements/Label.vue'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<NCheckboxProps>(), {
  forceMount: true,
})

const emits = defineEmits<CheckboxRootEmits>()

const rootProps = reactivePick(props, [
  'required',
  'disabled',
  'value',
  'modelValue',
  'defaultValue',
])

const forwarded = useForwardPropsEmits(rootProps, emits)

const id = computed(() => props.id ?? randomId('checkbox'))
</script>

<template>
  <div
    :class="cn(
      'checkbox-wrapper flex',
      una?.checkboxWrapper,
      reverse && 'checkbox-reverse',
    )"
  >
    <CheckboxRoot
      v-bind="{ ...forwarded, ...$attrs }"
      :id="id"
      v-slot="{ ...slotProps }"
      :class="
        cn(
          'peer checkbox',
          props.class,
        )"
      :size
      :checkbox
    >
      <CheckboxIndicator
        :force-mount
        :size
        :class="cn('checkbox-indicator', una?.checkboxIndicator)"
        v-bind="props._checkboxIndicator"
      >
        <slot name="icon">
          <Icon
            :name="slotProps.modelValue === 'indeterminate'
              ? props.una?.checkboxIndeterminateIcon ?? 'checkbox-indeterminate-icon'
              : slotProps.modelValue
                ? props.una?.checkboxCheckedIcon ?? 'checkbox-checked-icon'
                : props.una?.checkboxUncheckedIcon ?? 'checkbox-unchecked-icon'"
            :class="cn('checkbox-icon-base', una?.checkboxIconBase)"
          />
        </slot>
      </CheckboxIndicator>
    </CheckboxRoot>

    <Label
      v-if="$slots.default || label"
      :for="props.for || id"
      :class="cn('checkbox-label', una?.checkboxLabel)"
      v-bind="props._label"
    >
      <slot>
        {{ label }}
      </slot>
    </Label>
  </div>
</template>