Destructure all remaining defineProps
This makes it nicer to define default values.
This commit is contained in:
parent
994c3bb654
commit
4710f19b1e
2 changed files with 19 additions and 14 deletions
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue