92 lines
2.5 KiB
Vue
92 lines
2.5 KiB
Vue
<template>
|
|
<XContainer :draggable="true" @remove="() => $emit('remove')">
|
|
<template #header
|
|
><i class="ph-sticker ph-bold ph-lg"></i>
|
|
{{ i18n.ts._pages.blocks.note }}</template
|
|
>
|
|
|
|
<section style="padding: 0 16px 0 16px">
|
|
<MkInput v-model="id">
|
|
<template #label>{{ i18n.ts._pages.blocks._note.id }}</template>
|
|
<template #caption>{{
|
|
i18n.ts._pages.blocks._note.idDescription
|
|
}}</template>
|
|
</MkInput>
|
|
<MkSwitch v-model="value.detailed"
|
|
><span>{{
|
|
i18n.ts._pages.blocks._note.detailed
|
|
}}</span></MkSwitch
|
|
>
|
|
|
|
<XNote
|
|
v-if="note && !value.detailed"
|
|
:key="note.id + ':normal'"
|
|
v-model:note="note"
|
|
style="margin-bottom: 16px"
|
|
/>
|
|
<XNoteDetailed
|
|
v-if="note && value.detailed"
|
|
:key="note.id + ':detail'"
|
|
v-model:note="note"
|
|
style="margin-bottom: 16px"
|
|
/>
|
|
</section>
|
|
</XContainer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, watch } from "vue";
|
|
import XContainer from "../page-editor.container.vue";
|
|
import MkInput from "@/components/form/input.vue";
|
|
import MkSwitch from "@/components/form/switch.vue";
|
|
import XNote from "@/components/MkNote.vue";
|
|
import XNoteDetailed from "@/components/MagNoteDetailed.vue";
|
|
import * as os from "@/os";
|
|
import { i18n } from "@/i18n";
|
|
import { endpoints, packed } from "magnetar-common";
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
value: any;
|
|
}>(),
|
|
{
|
|
value: {
|
|
note: null,
|
|
detailed: false,
|
|
},
|
|
}
|
|
);
|
|
|
|
let id = ref<string | null>(props.value.note);
|
|
let note = ref<packed.PackNoteMaybeFull | null>(null);
|
|
|
|
watch(
|
|
id,
|
|
async () => {
|
|
if (
|
|
id.value &&
|
|
(id.value.startsWith("http://") || id.value.startsWith("https://"))
|
|
) {
|
|
props.value.note = (
|
|
id.value.endsWith("/") ? id.value.slice(0, -1) : id.value
|
|
)
|
|
.split("/")
|
|
.pop();
|
|
} else {
|
|
props.value.note = id.value;
|
|
}
|
|
|
|
if (props.value.note) return;
|
|
|
|
note.value = await os.magApi(
|
|
endpoints.GetNoteById,
|
|
{ context: true, attachments: true },
|
|
{ id: props.value.note }
|
|
);
|
|
},
|
|
{
|
|
immediate: true,
|
|
}
|
|
);
|
|
</script>
|