robonen
aa2938cb34
Genuinely type composable any usages (useStepper/useStorage/useForm/ createEventHook/useSorted/etc.) as proper generics/unknown; keep idiomatic any-function and overload-impl signatures with comments; skipped test -> .todo.
97 lines
3.0 KiB
Vue
97 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue';
|
|
import { useCssVar } from './index';
|
|
|
|
const target = ref<HTMLElement>();
|
|
|
|
// Read/write live CSS custom properties on the preview box.
|
|
const hue = useCssVar('--demo-hue', target, { initialValue: '210' });
|
|
const radius = useCssVar('--demo-radius', target, { initialValue: '16' });
|
|
const size = useCssVar('--demo-size', target, { initialValue: '96' });
|
|
|
|
const swatches = ['12', '90', '150', '210', '270', '330'];
|
|
|
|
const accent = computed(() => `hsl(${hue.value} 80% 55%)`);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-stack max-w-sm">
|
|
<div
|
|
ref="target"
|
|
class="flex items-center justify-center rounded-xl border border-border bg-bg-inset p-6"
|
|
>
|
|
<div
|
|
class="shadow-lg transition-all duration-300 ease-out"
|
|
:style="{
|
|
width: 'calc(var(--demo-size) * 1px)',
|
|
height: 'calc(var(--demo-size) * 1px)',
|
|
borderRadius: 'calc(var(--demo-radius) * 1px)',
|
|
background: 'hsl(var(--demo-hue) 80% 55%)',
|
|
}"
|
|
/>
|
|
</div>
|
|
|
|
<div class="demo-card flex flex-col gap-4 p-4">
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex items-center justify-between">
|
|
<label class="demo-label" for="hue">Hue</label>
|
|
<span class="font-mono text-sm tabular-nums text-fg">--demo-hue: {{ hue }}</span>
|
|
</div>
|
|
<input
|
|
id="hue"
|
|
v-model="hue"
|
|
type="range"
|
|
min="0"
|
|
max="360"
|
|
class="w-full accent-accent cursor-pointer"
|
|
>
|
|
<div class="flex gap-1.5">
|
|
<button
|
|
v-for="s in swatches"
|
|
:key="s"
|
|
type="button"
|
|
class="h-6 w-6 rounded-md border border-border transition hover:scale-110 active:scale-95 cursor-pointer"
|
|
:style="{ background: `hsl(${s} 80% 55%)` }"
|
|
:aria-label="`Set hue ${s}`"
|
|
@click="hue = s"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex items-center justify-between">
|
|
<label class="demo-label" for="radius">Radius</label>
|
|
<span class="font-mono text-sm tabular-nums text-fg">--demo-radius: {{ radius }}</span>
|
|
</div>
|
|
<input
|
|
id="radius"
|
|
v-model="radius"
|
|
type="range"
|
|
min="0"
|
|
max="48"
|
|
class="w-full accent-accent cursor-pointer"
|
|
>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex items-center justify-between">
|
|
<label class="demo-label" for="size">Size</label>
|
|
<span class="font-mono text-sm tabular-nums text-fg">--demo-size: {{ size }}</span>
|
|
</div>
|
|
<input
|
|
id="size"
|
|
v-model="size"
|
|
type="range"
|
|
min="48"
|
|
max="140"
|
|
class="w-full accent-accent cursor-pointer"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-border bg-bg-inset p-3 font-mono text-sm text-fg tabular-nums">
|
|
background: {{ accent }};
|
|
</div>
|
|
</div>
|
|
</template>
|