2023-07-27 07:31:52 +02:00
|
|
|
<!--
|
|
|
|
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
-->
|
|
|
|
|
2019-04-29 02:11:57 +02:00
|
|
|
<template>
|
2021-11-18 15:32:43 +01:00
|
|
|
<!-- eslint-disable vue/no-mutating-props -->
|
2021-11-19 11:36:12 +01:00
|
|
|
<XContainer :draggable="true" @remove="() => $emit('remove')">
|
2022-12-24 06:45:27 +01:00
|
|
|
<template #header><i class="ti ti-note"></i> {{ props.modelValue.title }}</template>
|
2019-04-29 02:11:57 +02:00
|
|
|
<template #func>
|
2021-11-19 11:36:12 +01:00
|
|
|
<button class="_button" @click="rename()">
|
2022-12-19 11:01:30 +01:00
|
|
|
<i class="ti ti-pencil"></i>
|
2019-04-29 02:11:57 +02:00
|
|
|
</button>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<section class="ilrvjyvi">
|
2022-12-24 03:57:06 +01:00
|
|
|
<XBlocks v-model="children" class="children"/>
|
|
|
|
<MkButton rounded class="add" @click="add()"><i class="ti ti-plus"></i></MkButton>
|
2019-04-29 02:11:57 +02:00
|
|
|
</section>
|
2020-10-17 13:12:00 +02:00
|
|
|
</XContainer>
|
2019-04-29 02:11:57 +02:00
|
|
|
</template>
|
|
|
|
|
2022-06-18 11:39:04 +02:00
|
|
|
<script lang="ts" setup>
|
2021-11-18 15:32:43 +01:00
|
|
|
/* eslint-disable vue/no-mutating-props */
|
2022-12-24 03:57:06 +01:00
|
|
|
import { defineAsyncComponent, inject, onMounted, watch } from 'vue';
|
2019-08-18 05:42:58 +02:00
|
|
|
import { v4 as uuid } from 'uuid';
|
2019-04-29 23:40:02 +02:00
|
|
|
import XContainer from '../page-editor.container.vue';
|
2021-11-11 18:02:25 +01:00
|
|
|
import * as os from '@/os';
|
2022-06-18 11:39:04 +02:00
|
|
|
import { i18n } from '@/i18n';
|
2022-12-24 03:57:06 +01:00
|
|
|
import { deepClone } from '@/scripts/clone';
|
|
|
|
import MkButton from '@/components/MkButton.vue';
|
2019-04-29 02:11:57 +02:00
|
|
|
|
2022-06-18 11:39:04 +02:00
|
|
|
const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
|
2019-04-29 02:11:57 +02:00
|
|
|
|
2022-06-18 11:39:04 +02:00
|
|
|
const props = withDefaults(defineProps<{
|
2022-12-24 03:57:06 +01:00
|
|
|
modelValue: any,
|
2022-06-18 11:39:04 +02:00
|
|
|
}>(), {
|
2022-12-24 03:57:06 +01:00
|
|
|
modelValue: {},
|
|
|
|
});
|
|
|
|
|
|
|
|
const emit = defineEmits<{
|
|
|
|
(ev: 'update:modelValue', value: any): void;
|
|
|
|
}>();
|
|
|
|
|
|
|
|
const children = $ref(deepClone(props.modelValue.children ?? []));
|
|
|
|
|
|
|
|
watch($$(children), () => {
|
|
|
|
emit('update:modelValue', {
|
|
|
|
...props.modelValue,
|
|
|
|
children,
|
|
|
|
});
|
|
|
|
}, {
|
|
|
|
deep: true,
|
2022-06-18 11:39:04 +02:00
|
|
|
});
|
2019-04-29 02:11:57 +02:00
|
|
|
|
2022-06-18 11:39:04 +02:00
|
|
|
const getPageBlockList = inject<(any) => any>('getPageBlockList');
|
2019-04-29 02:11:57 +02:00
|
|
|
|
2022-06-18 11:39:04 +02:00
|
|
|
async function rename() {
|
|
|
|
const { canceled, result: title } = await os.inputText({
|
|
|
|
title: 'Enter title',
|
2022-12-24 03:57:06 +01:00
|
|
|
default: props.modelValue.title,
|
2022-06-18 11:39:04 +02:00
|
|
|
});
|
|
|
|
if (canceled) return;
|
2022-12-24 03:57:06 +01:00
|
|
|
emit('update:modelValue', {
|
|
|
|
...props.modelValue,
|
|
|
|
title,
|
|
|
|
});
|
2022-06-18 11:39:04 +02:00
|
|
|
}
|
2019-04-29 02:11:57 +02:00
|
|
|
|
2022-06-18 11:39:04 +02:00
|
|
|
async function add() {
|
|
|
|
const { canceled, result: type } = await os.select({
|
|
|
|
title: i18n.ts._pages.chooseBlock,
|
2022-12-24 03:57:06 +01:00
|
|
|
items: getPageBlockList(),
|
2022-06-18 11:39:04 +02:00
|
|
|
});
|
|
|
|
if (canceled) return;
|
2019-04-29 02:11:57 +02:00
|
|
|
|
2022-06-18 11:39:04 +02:00
|
|
|
const id = uuid();
|
2022-12-24 03:57:06 +01:00
|
|
|
children.push({ id, type });
|
2022-06-18 11:39:04 +02:00
|
|
|
}
|
2019-04-29 02:11:57 +02:00
|
|
|
|
2022-06-18 11:39:04 +02:00
|
|
|
onMounted(() => {
|
2022-12-24 03:57:06 +01:00
|
|
|
if (props.modelValue.title == null) {
|
2022-06-18 11:39:04 +02:00
|
|
|
rename();
|
2019-04-29 02:11:57 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
2022-12-27 10:29:39 +01:00
|
|
|
<style lang="scss" scoped>
|
2020-01-29 20:37:25 +01:00
|
|
|
.ilrvjyvi {
|
|
|
|
> .children {
|
2022-12-24 03:57:06 +01:00
|
|
|
margin: 16px;
|
|
|
|
|
|
|
|
&:empty {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
> .add {
|
|
|
|
margin: 16px auto;
|
2020-01-29 20:37:25 +01:00
|
|
|
}
|
|
|
|
}
|
2019-04-29 02:11:57 +02:00
|
|
|
</style>
|