Checkbox

<script setup lang="ts">
  import { ref } from 'vue'
  import { Checkbox, Stack, Text } from '@hina-ui/vue'

  const remember = ref(false)
</script>

<template>
  <Stack gap="sm">
    <Checkbox v-model="remember">Keep me signed in</Checkbox>
    <Text size="sm" tone="muted">Value: {{ remember }}</Text>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Checkbox } from '@hina-ui/vue'

  const weekly = ref(true)
</script>

<template>
  <Checkbox
    v-model="weekly"
    description="A digest of the week's updates every Monday. Unsubscribe any time."
  >
    Weekly newsletter
  </Checkbox>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Checkbox } from '@hina-ui/vue'

  const weekly = ref(true)
</script>

<template>
  <Checkbox
    v-model="weekly"
    control-placement="end"
    block
    description="A digest of the week's updates every Monday. Unsubscribe any time."
  >
    Weekly newsletter
  </Checkbox>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { Checkbox, Stack } from '@hina-ui/vue'

  const types = ['Galgame', 'Light novel', 'Manga']
  const picked = ref(['Galgame'])

  const all = computed<boolean | 'indeterminate'>({
    get: () =>
      picked.value.length === 0
        ? false
        : picked.value.length === types.length
          ? true
          : 'indeterminate',
    set: value => {
      picked.value = value === true ? [...types] : []
    },
  })

  function toggle(type: string, on: boolean | 'indeterminate') {
    picked.value = on === true ? [...picked.value, type] : picked.value.filter(t => t !== type)
  }
</script>

<template>
  <Stack gap="sm">
    <Checkbox v-model="all">All types</Checkbox>
    <Stack gap="sm" class="ps-6">
      <Checkbox
        v-for="type in types"
        :key="type"
        :model-value="picked.includes(type)"
        @update:model-value="toggle(type, $event)"
      >
        {{ type }}
      </Checkbox>
    </Stack>
  </Stack>
</template>

<script setup lang="ts">
  import { Checkbox, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack gap="sm">
    <Checkbox size="sm" model-value>Small</Checkbox>
    <Checkbox size="md" model-value>Medium</Checkbox>
    <Checkbox size="lg" model-value>Large</Checkbox>
  </Stack>
</template>

<script setup lang="ts">
  import { Checkbox, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack gap="sm">
    <Checkbox invalid>I have read and accept the terms</Checkbox>
    <Checkbox disabled>Disabled</Checkbox>
    <Checkbox disabled model-value>Disabled and checked</Checkbox>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Checkbox, Inline } from '@hina-ui/vue'

  const rows = ref([true, false, false])
</script>

<template>
  <Inline gap="sm">
    <Checkbox
      v-for="(_, index) in rows"
      :key="index"
      v-model="rows[index]"
      :aria-label="`Select row ${index + 1}`"
    />
  </Inline>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import * as v from 'valibot'
  import { Button, Checkbox, Form, FormField, Text } from '@hina-ui/vue'

  const schema = v.object({
    agreed: v.literal(true, 'Please read and accept the terms first'),
  })

  const values = reactive({ agreed: false as boolean | 'indeterminate' })
  const saved = ref(false)

  async function save() {
    await new Promise(resolve => setTimeout(resolve, 600))
    saved.value = true
  }
</script>

<template>
  <Form v-slot="{ submitting }" :values="values" :rules="schema" class="w-80" @submit="save">
    <FormField name="agreed">
      <Checkbox v-model="values.agreed">I have read and accept the terms of service</Checkbox>
    </FormField>
    <Button type="submit" :loading="submitting" class="self-start">Sign up</Button>
    <Text v-if="saved" tone="muted" size="sm">Signed up.</Text>
  </Form>
</template>