oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

Use vuedraggable instead of vue-draggable-next

Browse source 
Fix #6852
This commit is contained in:
syuilo 2020-12-05 12:50:09 +09:00
parent b4e5fe7e71
commit af5b4749b0
13 changed files with 148 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/client/pages/page-editor/page-editor.blocks.vue
View file

@ -1,6 +1,8 @@
<template>
<XDraggable tag="div" :list="blocks" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5">
<component v-for="block in blocks" :is="'x-' + block.type" :value="block" @update:value="updateItem" @remove="() => removeItem(block)" :key="block.id" :hpml="hpml"/>
<XDraggable tag="div" v-model="blocks" item-key="id" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5">
<template #item="{element}">
<component :is="'x-' + element.type" :value="element" @update:value="updateItem" @remove="() => removeItem(element)" :hpml="hpml"/>
</template>
</XDraggable>
</template>
@ -25,7 +27,7 @@ import * as os from '@/os';
export default defineComponent({
components: {
XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas, XNote
},
@ -39,9 +41,16 @@ export default defineComponent({
},
},
emits: ['update:value'],
computed: {
blocks() {
return this.value;
blocks: {
get() {
return this.value;
},
set(value) {
this.$emit('update:value', value);
}
}
},
@ -57,6 +66,7 @@ export default defineComponent({
},
removeItem(el) {
console.log(el);
const i = this.blocks.findIndex(x => x.id === el.id);
const newValue = [
...this.blocks.slice(0, i),

1
src/client/pages/page-editor/page-editor.container.vue
View file

@ -52,6 +52,7 @@ export default defineComponent({
default: null
}
},
emits: ['toggle', 'remove'],
data() {
return {
showBody: this.expanded,

27
src/client/pages/page-editor/page-editor.vue
View file

@ -53,18 +53,19 @@
<MkContainer :body-togglable="true" class="_vMargin">
<template #header><Fa :icon="faMagic"/> {{ $t('_pages.variables') }}</template>
<div class="qmuvgica">
<XDraggable tag="div" class="variables" v-show="variables.length > 0" :list="variables" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
<XVariable v-for="variable in variables"
:value="variable"
:removable="true"
@update:value="v => updateVariable(v)"
@remove="() => removeVariable(variable)"
:key="variable.name"
:hpml="hpml"
:name="variable.name"
:title="variable.name"
:draggable="true"
/>
<XDraggable tag="div" class="variables" v-show="variables.length > 0" v-model="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
<template #item="{element}">
<XVariable
:value="element"
:removable="true"
@update:value="v => updateVariable(v)"
@remove="() => removeVariable(element)"
:hpml="hpml"
:name="element.name"
:title="element.name"
:draggable="true"
/>
</template>
</XDraggable>
<MkButton @click="addVariable()" class="add" v-if="!readonly"><Fa :icon="faPlus"/></MkButton>
@ -109,7 +110,7 @@ import { selectFile } from '@/scripts/select-file';
export default defineComponent({
components: {
XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
XVariable, XBlocks, MkTextarea, MkContainer, MkButton, MkSelect, MkSwitch, MkInput,
},

27
src/client/pages/settings/reaction.vue
View file

@ -3,16 +3,18 @@
<div class="_formItem">
<div class="_formLabel">{{ $t('reactionSettingDescription') }}</div>
<div class="_formPanel">
<XDraggable class="zoaiodol" :list="reactions" animation="150" delay="100" delay-on-touch-only="true">
<button class="_button item" v-for="reaction in reactions" :key="reaction" @click="remove(reaction, $event)">
<MkEmoji :emoji="reaction" :normal="true"/>
</button>
<XDraggable class="zoaiodol" v-model="reactions" :item-key="item => item" animation="150" delay="100" delay-on-touch-only="true">
<template #item="{element}">
<button class="_button item" @click="remove(element, $event)">
<MkEmoji :emoji="element" :normal="true"/>
</button>
</template>
<template #footer>
<button>a</button>
<button class="_button add" @click="chooseEmoji"><Fa :icon="faPlus"/></button>
</template>
</XDraggable>
</div>
<div class="_formCaption">{{ $t('reactionSettingDescription2') }} <button class="_textButton" @click="chooseEmoji">{{ $t('chooseEmoji') }}</button></div>
<div class="_formCaption">{{ $t('reactionSettingDescription2') }} <button class="_textButton" @click="preview">{{ $t('preview') }}</button></div>
</div>
<FormRadios v-model="reactionPickerWidth">
@ -35,8 +37,8 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faLaugh, faSave, faEye } from '@fortawesome/free-regular-svg-icons';
import { faUndo } from '@fortawesome/free-solid-svg-icons';
import { VueDraggableNext } from 'vue-draggable-next';
import { faUndo, faPlus } from '@fortawesome/free-solid-svg-icons';
import XDraggable from 'vuedraggable';
import FormInput from '@/components/form/input.vue';
import FormRadios from '@/components/form/radios.vue';
import FormBase from '@/components/form/base.vue';
@ -50,7 +52,7 @@ export default defineComponent({
FormButton,
FormBase,
FormRadios,
XDraggable: VueDraggableNext,
XDraggable,
},
emits: ['info'],
@ -66,7 +68,7 @@ export default defineComponent({
}
},
reactions: JSON.parse(JSON.stringify(this.$store.state.settings.reactions)),
faLaugh, faSave, faEye, faUndo
faLaugh, faSave, faEye, faUndo, faPlus
}
},
@ -152,5 +154,10 @@ export default defineComponent({
padding: 8px;
cursor: move;
}
> .add {
display: inline-block;
padding: 8px;
}
}
</style>