robonen
eefd7abf83
Reorganize components into category folders (forms/canvas/overlays/etc.); add the media-editor headless family (timeline, curve-editor, waveform, crop, color picker, etc.); apply perf fixes (O(1) collection lookups, plain-object drag state, gesture-leak teardown, shallowRef color state, rect caching) and replace source `any` with proper types.
41 lines
2.2 KiB
Vue
41 lines
2.2 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from 'vue';
|
||
import type { CheckedState } from '@primitives/forms/checkbox';
|
||
import { CheckboxIndicator, CheckboxRoot } from '@primitives/forms/checkbox';
|
||
|
||
const checked = ref<CheckedState>(false);
|
||
const disabled = ref(false);
|
||
</script>
|
||
|
||
<template>
|
||
<section class="grid max-w-md gap-4">
|
||
<div class="flex flex-wrap items-center gap-3 rounded-lg border border-neutral-200 bg-white px-3 py-2.5 dark:border-neutral-800 dark:bg-neutral-900">
|
||
<label class="inline-flex items-center gap-1.5">
|
||
<input v-model="disabled" type="checkbox"> disabled
|
||
</label>
|
||
<button
|
||
type="button"
|
||
class="rounded border border-neutral-200 bg-neutral-50 px-2 py-1 text-xs hover:border-blue-600 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:border-blue-400"
|
||
@click="checked = 'indeterminate'"
|
||
>
|
||
set indeterminate
|
||
</button>
|
||
<output class="ml-auto font-mono text-xs text-neutral-500 dark:text-neutral-400">checked = {{ JSON.stringify(checked) }}</output>
|
||
</div>
|
||
|
||
<label class="inline-flex cursor-pointer items-center gap-2.5">
|
||
<CheckboxRoot
|
||
v-model:checked="checked"
|
||
:disabled="disabled"
|
||
class="inline-grid h-5 w-5 place-items-center rounded border border-neutral-200 bg-white data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white data-[state=indeterminate]:border-blue-600 data-[state=indeterminate]:bg-blue-600 data-[state=indeterminate]:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:border-neutral-800 dark:bg-neutral-900 dark:data-[state=checked]:border-blue-500 dark:data-[state=checked]:bg-blue-500 dark:data-[state=indeterminate]:border-blue-500 dark:data-[state=indeterminate]:bg-blue-500 dark:focus-visible:outline-blue-400"
|
||
>
|
||
<CheckboxIndicator class="text-[0.8125rem] leading-none">
|
||
<span v-if="checked === 'indeterminate'">–</span>
|
||
<span v-else-if="checked">✓</span>
|
||
</CheckboxIndicator>
|
||
</CheckboxRoot>
|
||
Accept terms and conditions
|
||
</label>
|
||
</section>
|
||
</template>
|