bvandeusenandClaude Opus 4.8
0f604f9a26
- notes Pinia store (load/create/pin/archive/color/trash/restore/delete) with view-aware reconcile; api client patch/del methods. - colors.ts palette (10 keys → light/dark card + swatch tints). - QuickAdd (collapsed → expand, title/body/color, click-outside/Esc to save), NoteCard (color tint, click-to-edit, hover action bar), NoteEditor modal, ColorPicker, inline Icon set (no icon dep). - BoardView rewrite: Notes/Archive/Trash routes, CSS-columns masonry, Pinned + Others sections, per-view empty states, sign-out. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FRgehjoz7Yv8LkUfADxACm
25 lines
983 B
Vue
25 lines
983 B
Vue
<script setup lang="ts">
|
|
import { NOTE_COLOR_KEYS, NOTE_COLOR_LABELS, NOTE_SWATCH_CLASSES, type NoteColor } from "../notes/colors";
|
|
|
|
defineProps<{ modelValue: NoteColor }>();
|
|
defineEmits<{ (e: "update:modelValue", value: NoteColor): void }>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-wrap items-center gap-1.5">
|
|
<button
|
|
v-for="key in NOTE_COLOR_KEYS"
|
|
:key="key"
|
|
type="button"
|
|
:title="NOTE_COLOR_LABELS[key]"
|
|
:aria-label="NOTE_COLOR_LABELS[key]"
|
|
:aria-pressed="modelValue === key"
|
|
class="h-6 w-6 rounded-full border border-black/10 transition hover:scale-110
|
|
focus:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1
|
|
focus-visible:ring-offset-white dark:focus-visible:ring-offset-neutral-900"
|
|
:class="[NOTE_SWATCH_CLASSES[key], modelValue === key ? 'ring-2 ring-brand ring-offset-1' : '']"
|
|
@click="$emit('update:modelValue', key)"
|
|
/>
|
|
</div>
|
|
</template>
|