1
0
mirror of https://github.com/misskey-dev/misskey.git synced 2026-06-01 06:14:18 +02:00

enhance(frontend): remove vuedraggable (#17073)

* 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

View File

@@ -41,20 +41,19 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="_gaps">
<MkButton primary rounded @click="addPinnedNote()"><i class="ti ti-plus"></i></MkButton>
<Sortable
v-model="pinnedNotes"
itemKey="id"
:handle="'.' + $style.pinnedNoteHandle"
:animation="150"
<MkDraggable
:modelValue="pinnedNoteIds.map(id => ({ id }))"
direction="vertical"
@update:modelValue="v => pinnedNoteIds = v.map(x => x.id)"
>
<template #item="{element,index}">
<template #default="{ item }">
<div :class="$style.pinnedNote">
<button class="_button" :class="$style.pinnedNoteHandle"><i class="ti ti-menu"></i></button>
{{ element.id }}
<button class="_button" :class="$style.pinnedNoteRemove" @click="removePinnedNote(index)"><i class="ti ti-x"></i></button>
{{ item.id }}
<button class="_button" :class="$style.pinnedNoteRemove" @click="removePinnedNote(item.id)"><i class="ti ti-x"></i></button>
</div>
</template>
</Sortable>
</MkDraggable>
</div>
</MkFolder>
@@ -68,7 +67,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed, ref, watch, defineAsyncComponent } from 'vue';
import { computed, ref, watch } from 'vue';
import * as Misskey from 'misskey-js';
import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/MkInput.vue';
@@ -81,10 +80,9 @@ import { i18n } from '@/i18n.js';
import MkFolder from '@/components/MkFolder.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import MkDraggable from '@/components/MkDraggable.vue';
import { useRouter } from '@/router.js';
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
const router = useRouter();
const props = defineProps<{
@@ -99,7 +97,7 @@ const bannerId = ref<string | null>(null);
const color = ref('#000');
const isSensitive = ref(false);
const allowRenoteToExternal = ref(true);
const pinnedNotes = ref<{ id: Misskey.entities.Note['id'] }[]>([]);
const pinnedNoteIds = ref<Misskey.entities.Note['id'][]>([]);
watch(() => bannerId.value, async () => {
if (bannerId.value == null) {
@@ -123,9 +121,7 @@ async function fetchChannel() {
bannerId.value = result.bannerId;
bannerUrl.value = result.bannerUrl;
isSensitive.value = result.isSensitive;
pinnedNotes.value = result.pinnedNoteIds.map(id => ({
id,
}));
pinnedNoteIds.value = result.pinnedNoteIds;
color.value = result.color;
allowRenoteToExternal.value = result.allowRenoteToExternal;
@@ -143,13 +139,11 @@ async function addPinnedNote() {
const note = await os.apiWithDialog('notes/show', {
noteId: fromUrl ?? value,
});
pinnedNotes.value = [{
id: note.id,
}, ...pinnedNotes.value];
pinnedNoteIds.value.unshift(note.id);
}
function removePinnedNote(index: number) {
pinnedNotes.value.splice(index, 1);
function removePinnedNote(id: string) {
pinnedNoteIds.value = pinnedNoteIds.value.filter(x => x !== id);
}
function save() {
@@ -166,7 +160,7 @@ function save() {
os.apiWithDialog('channels/update', {
...params,
channelId: props.channelId,
pinnedNoteIds: pinnedNotes.value.map(x => x.id),
pinnedNoteIds: pinnedNoteIds.value,
});
} else {
os.apiWithDialog('channels/create', params).then(created => {