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">记住登录状态</Checkbox>
    <Text size="sm" tone="muted">当前值：{{ 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="每周一发送本周的更新汇总，可以随时退订。">
    订阅周报
  </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="每周一发送本周的更新汇总，可以随时退订。"
  >
    订阅周报
  </Checkbox>
</template>

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

  const types = ['Galgame', '轻小说', '漫画']
  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">全部类型</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>小号</Checkbox>
    <Checkbox size="md" model-value>中号</Checkbox>
    <Checkbox size="lg" model-value>大号</Checkbox>
  </Stack>
</template>

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

<template>
  <Stack gap="sm">
    <Checkbox invalid>我已阅读并同意用户协议</Checkbox>
    <Checkbox disabled>已禁用</Checkbox>
    <Checkbox disabled model-value>已禁用且选中</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="`选择第 ${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, '请先阅读并同意服务条款'),
  })

  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">我已阅读并同意服务条款</Checkbox>
    </FormField>
    <Button type="submit" :loading="submitting" class="self-start">注册</Button>
    <Text v-if="saved" tone="muted" size="sm">已注册。</Text>
  </Form>
</template>