Destructure all remaining defineProps

This makes it nicer to define default values.
This commit is contained in:
Joscha 2025-02-11 21:19:36 +01:00
parent 994c3bb654
commit 4710f19b1e
2 changed files with 19 additions and 14 deletions

View file

@ -20,19 +20,24 @@ import CNoteEditor from "./CNoteEditor.vue";
const notes = useNotesStore(); const notes = useNotesStore();
const ui = useUiStore(); const ui = useUiStore();
const props = defineProps<{ const {
path,
segment,
parentId,
forceOpen = false,
} = defineProps<{
path: Path; // From root to here path: Path; // From root to here
segment: Segment; segment: Segment;
parentId?: string; parentId?: string;
forceOpen?: boolean; forceOpen?: boolean;
}>(); }>();
const id = computed(() => props.segment.id); const id = computed(() => segment.id);
const note = computed(() => notes.getNote(id.value)); const note = computed(() => notes.getNote(id.value));
const parents = computed(() => { const parents = computed(() => {
let parents = notes.getParents(id.value); let parents = notes.getParents(id.value);
if (props.parentId) parents = parents.difference(new Set([props.parentId])); if (parentId) parents = parents.difference(new Set([parentId]));
return [...parents].sort().map((id) => ({ id, text: notes.getNote(id)?.text })); return [...parents].sort().map((id) => ({ id, text: notes.getNote(id)?.text }));
}); });
@ -53,10 +58,10 @@ const hovering = ref(false);
const mode = ref<"editing" | "creating">(); const mode = ref<"editing" | "creating">();
const mayOpen = computed(() => children.value.length > 0); const mayOpen = computed(() => children.value.length > 0);
const open = computed(() => mayOpen.value && ui.isOpen(props.path)); const open = computed(() => mayOpen.value && ui.isOpen(path));
const focused = computed(() => ui.focusPath.eq(props.path)); const focused = computed(() => ui.focusPath.eq(path));
const pinned = computed(() => ui.isPinned(props.segment, props.parentId)); const pinned = computed(() => ui.isPinned(segment, parentId));
const hover = computed(() => hovering.value && mode.value !== "editing"); const hover = computed(() => hovering.value && mode.value !== "editing");
const creating = computed(() => mode.value === "creating"); const creating = computed(() => mode.value === "creating");
@ -64,7 +69,7 @@ const editing = computed(() => mode.value === "editing");
// Ensure we're open if we need to be. // Ensure we're open if we need to be.
watchEffect(() => { watchEffect(() => {
if (props.forceOpen || creating.value) ui.setOpen(props.path, true); if (forceOpen || creating.value) ui.setOpen(path, true);
}); });
// Ensure only one editor is ever open. // Ensure only one editor is ever open.
@ -78,7 +83,7 @@ watchEffect(() => {
}); });
function focusOnThis(): void { function focusOnThis(): void {
ui.focusPath = props.path; ui.focusPath = path;
} }
function onClick(): void { function onClick(): void {
@ -87,12 +92,12 @@ function onClick(): void {
return; return;
} }
ui.toggleOpen(props.path); ui.toggleOpen(path);
} }
function onPinButtonClick(): void { function onPinButtonClick(): void {
if (pinned.value) ui.unsetPinned(); if (pinned.value) ui.unsetPinned();
else ui.setPinned(props.segment, props.parentId); else ui.setPinned(segment, parentId);
} }
function onEditButtonClick(): void { function onEditButtonClick(): void {
@ -126,13 +131,13 @@ function onCreateEditorFinish(text: string): void {
note.value.children.push(newNote.id); note.value.children.push(newNote.id);
const lastChild = children.value.at(-1); const lastChild = children.value.at(-1);
if (lastChild) ui.focusPath = props.path.concat(lastChild); if (lastChild) ui.focusPath = path.concat(lastChild);
onCreateEditorClose(); onCreateEditorClose();
} }
function onMoveButtonClick(): void { function onMoveButtonClick(): void {
ui.pushAnchorId(props.segment.id); ui.pushAnchorId(segment.id);
} }
</script> </script>

View file

@ -3,7 +3,7 @@ import { RiCheckLine, RiCloseLine } from "@remixicon/vue";
import { onMounted, ref, useTemplateRef } from "vue"; import { onMounted, ref, useTemplateRef } from "vue";
import CNoteButton from "./CNoteButton.vue"; import CNoteButton from "./CNoteButton.vue";
const props = defineProps<{ const { initialText = "" } = defineProps<{
initialText?: string; initialText?: string;
}>(); }>();
@ -13,7 +13,7 @@ const emit = defineEmits<{
}>(); }>();
const textarea = useTemplateRef<HTMLTextAreaElement>("textarea"); const textarea = useTemplateRef<HTMLTextAreaElement>("textarea");
const text = ref(props.initialText ?? ""); const text = ref(initialText);
onMounted(() => { onMounted(() => {
textarea.value?.focus(); textarea.value?.focus();