Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(frontend): vuedraggableをformkit/drag-and-dropに変更

Browse source
This commit is contained in:
kakkokari-gtyih 2024-09-01 21:16:52 +09:00
parent 8be624aa44
commit d7036b0854
12 changed files with 319 additions and 541 deletions
Download patch file Download diff file Expand all files Collapse all files

32
packages/frontend/src/components/MkPostFormAttaches.vue
View file

@ -5,32 +5,30 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div v-show="props.modelValue.length != 0" :class="$style.root">
<Sortable :modelValue="props.modelValue" :class="$style.files" itemKey="id" :animation="150" :delay="100" :delayOnTouchOnly="true" @update:modelValue="v => emit('update:modelValue', v)">
<template #item="{element}">
<div :class="$style.file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
<MkDriveFileThumbnail :data-id="element.id" :class="$style.thumbnail" :file="element" fit="cover"/>
<div v-if="element.isSensitive" :class="$style.sensitive">
<i class="ti ti-eye-exclamation" style="margin: auto;"></i>
</div>
<div ref="dndParentEl" :class="$style.files">
<div v-for="item in items" :key="item.id" :class="$style.file" @click="showFileMenu(item, $event)" @contextmenu.prevent="showFileMenu(item, $event)">
<MkDriveFileThumbnail :data-id="item.id" :class="$style.thumbnail" :file="item" fit="cover"/>
<div v-if="item.isSensitive" :class="$style.sensitive">
<i class="ti ti-eye-exclamation" style="margin: auto;"></i>
</div>
</template>
</Sortable>
</div>
</div>
<p :class="$style.remain">{{ 16 - props.modelValue.length }}/16</p>
</div>
</template>
<script lang="ts" setup>
import { defineAsyncComponent, inject } from 'vue';
import { defineAsyncComponent, inject, watch } from 'vue';
import * as Misskey from 'misskey-js';
import { animations } from '@formkit/drag-and-drop';
import { useDragAndDrop } from '@formkit/drag-and-drop/vue';
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { i18n } from '@/i18n.js';
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
const props = defineProps<{
modelValue: any[];
modelValue: Misskey.entities.DriveFile[];
detachMediaFn?: (id: string) => void;
}>();
@ -44,6 +42,14 @@ const emit = defineEmits<{
(ev: 'replaceFile', file: Misskey.entities.DriveFile, newFile: Misskey.entities.DriveFile): void;
}>();
const [dndParentEl, items] = useDragAndDrop(props.modelValue, {
plugins: [animations()],
});
watch(items, () => {
emit('update:modelValue', items.value);
});
let menuShowing = false;
function detachMedia(id: string) {

42
packages/frontend/src/components/MkWidgets.vue
View file

@ -14,25 +14,15 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton inline primary data-cy-widget-add @click="addWidget"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
</header>
<Sortable
:modelValue="props.widgets"
itemKey="id"
handle=".handle"
:animation="150"
:group="{ name: 'SortableMkWidgets' }"
:class="$style.editEditing"
@update:modelValue="v => emit('updateWidgets', v)"
>
<template #item="{element}">
<div :class="[$style.widget, $style.customizeContainer]" data-cy-customize-container>
<button :class="$style.customizeContainerConfig" class="_button" @click.prevent.stop="configWidget(element.id)"><i class="ti ti-settings"></i></button>
<button :class="$style.customizeContainerRemove" data-cy-customize-container-remove class="_button" @click.prevent.stop="removeWidget(element)"><i class="ti ti-x"></i></button>
<div class="handle">
<component :is="`widget-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :class="$style.customizeContainerHandleWidget" :widget="element" @updateProps="updateWidget(element.id, $event)"/>
</div>
<div ref="dndParentEl" :class="$style.editEditing">
<div v-for="widget in widgets" :key="widget.id" :class="[$style.widget, $style.customizeContainer]" data-cy-customize-container>
<button :class="$style.customizeContainerConfig" class="_button" @click.prevent.stop="configWidget(widget.id)"><i class="ti ti-settings"></i></button>
<button :class="$style.customizeContainerRemove" data-cy-customize-container-remove class="_button" @click.prevent.stop="removeWidget(widget)"><i class="ti ti-x"></i></button>
<div class="handle">
<component :is="`widget-${widget.name}`" :ref="el => widgetRefs[widget.id] = el" class="widget" :class="$style.customizeContainerHandleWidget" :widget="widget" @updateProps="updateWidget(widget.id, $event)"/>
</div>
</template>
</Sortable>
</div>
</div>
</template>
<component :is="`widget-${widget.name}`" v-for="widget in widgets" v-else :key="widget.id" :ref="el => widgetRefs[widget.id] = el" :class="$style.widget" :widget="widget" @updateProps="updateWidget(widget.id, $event)" @contextmenu.stop="onContextmenu(widget, $event)"/>
</div>
@ -50,21 +40,31 @@ export type DefaultStoredWidget = {
</script>
<script lang="ts" setup>
import { defineAsyncComponent, ref } from 'vue';
import { ref, watch } from 'vue';
import { v4 as uuid } from 'uuid';
import { animations } from '@formkit/drag-and-drop';
import { useDragAndDrop } from '@formkit/drag-and-drop/vue';
import MkSelect from '@/components/MkSelect.vue';
import MkButton from '@/components/MkButton.vue';
import { widgets as widgetDefs } from '@/widgets/index.js';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
const props = defineProps<{
widgets: Widget[];
edit: boolean;
}>();
const [dndParentEl, widgets] = useDragAndDrop(props.widgets, {
group: 'SortableMkWidgets',
dragHandle: '.handle',
plugins: [animations()],
});
watch(widgets, () => {
emit('updateWidgets', widgets.value);
});
const emit = defineEmits<{
(ev: 'updateWidgets', widgets: Widget[]): void;
(ev: 'addWidget', widget: Widget): void;