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:
@@ -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 => {
|
||||
|
||||
Reference in New Issue
Block a user