mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-30 20:24:06 +02:00
Code Releases Activity

enhance(frontend): remove vuedraggable (#17073)

Browse Source 
* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update page-editor.blocks.vue

* Update MkDraggable.vue

* refactor

* refactor

* ✌️

* refactor

* Update MkDraggable.vue

* ios

* 🎨

* 🎨
This commit is contained in:
syuilo
2026-01-07 21:46:03 +09:00
committed by GitHub
parent e18b92823f
commit 8c5572dd3b
14 changed files with 457 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
packages/frontend/src/pages/page-editor/page-editor.blocks.vue
View File

@@ -4,36 +4,41 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<Sortable :modelValue="modelValue" tag="div" itemKey="id" handle=".drag-handle" :group="{ name: 'blocks' }" :animation="150" :swapThreshold="0.5" @update:modelValue="v => emit('update:modelValue', v)">
<template #item="{element}">
<div :class="$style.item">
<MkDraggable
:modelValue="modelValue"
direction="vertical"
withGaps
canNest
group="pageBlocks"
@update:modelValue="v => emit('update:modelValue', v)"
>
<template #default="{ item }">
<div>
<!-- divが無いとエラーになる https://github.com/SortableJS/vue.draggable.next/issues/189 -->
<component :is="getComponent(element.type)" :modelValue="element" @update:modelValue="updateItem" @remove="() => removeItem(element)"/>
<component :is="getComponent(item.type) as any" :modelValue="item" @update:modelValue="updateItem" @remove="() => removeItem(item)"/>
</div>
</template>
</Sortable>
</MkDraggable>
</template>
<script lang="ts" setup>
import { defineAsyncComponent } from 'vue';
import * as Misskey from 'misskey-js';
import XSection from './els/page-editor.el.section.vue';
import XText from './els/page-editor.el.text.vue';
import XImage from './els/page-editor.el.image.vue';
import XNote from './els/page-editor.el.note.vue';
import MkDraggable from '@/components/MkDraggable.vue';
function getComponent(type: string) {
function getComponent(type: Misskey.entities.Page['content'][number]['type']) {
switch (type) {
case 'section': return XSection;
case 'text': return XText;
case 'image': return XImage;
case 'note': return XNote;
default: return null;
default: return XText;
}
}
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
const props = defineProps<{
modelValue: Misskey.entities.Page['content'];
}>();
@@ -61,11 +66,3 @@ function removeItem(el) {
emit('update:modelValue', newValue);
}
</script>
<style lang="scss" module>
.item {
& + .item {
margin-top: 16px;
}
}
</style>