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

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

8
src/client/ui/deck.vue
View file

@ -3,7 +3,7 @@
<XSidebar ref="nav"/>
<!-- TODO: deckMainColumnPlace を見て位置変える -->
<deck-column class="column" v-if="$store.state.device.deckAlwaysShowMainColumn || $route.name !== 'index'">
<DeckColumn class="column" v-if="$store.state.device.deckAlwaysShowMainColumn || $route.name !== 'index'">
<template #header>
<XHeader :info="pageInfo"/>
</template>
@ -15,13 +15,13 @@
</keep-alive>
</transition>
</router-view>
</deck-column>
</DeckColumn>
<template v-for="ids in layout">
<div v-if="ids.length > 1" class="folder column">
<deck-column-core v-for="id in ids" :ref="id" :key="id" :column="columns.find(c => c.id === id)" :is-stacked="true" @parent-focus="moveFocus(id, $event)"/>
<DeckColumnCore v-for="id in ids" :ref="id" :key="id" :column="columns.find(c => c.id === id)" :is-stacked="true" @parent-focus="moveFocus(id, $event)"/>
</div>
<deck-column-core v-else class="column" :ref="ids[0]" :key="ids[0]" :column="columns.find(c => c.id === ids[0])" @parent-focus="moveFocus(ids[0], $event)"/>
<DeckColumnCore v-else class="column" :ref="ids[0]" :key="ids[0]" :column="columns.find(c => c.id === ids[0])" @parent-focus="moveFocus(ids[0], $event)"/>
</template>
<button @click="addColumn" class="_button add"><Fa :icon="faPlus"/></button>

38
src/client/ui/deck/widgets-column.vue
View file

@ -13,14 +13,16 @@
<MkButton inline @click="edit = false">{{ $t('close') }}</MkButton>
</header>
<XDraggable
:list="column.widgets"
v-model="_widgets"
item-key="id"
animation="150"
@sort="onWidgetSort"
>
<div v-for="widget in column.widgets" class="customize-container" :key="widget.id" @click="widgetFunc(widget.id)">
<button class="remove _button" @click.prevent.stop="removeWidget(widget)"><Fa :icon="faTimes"/></button>
<component :is="`mkw-${widget.name}`" :widget="widget" :setting-callback="setting => settings[widget.id] = setting" :column="column"/>
</div>
<template #item="{element}">
<div class="customize-container" @click="widgetFunc(element.id)">
<button class="remove _button" @click.prevent.stop="removeWidget(element)"><Fa :icon="faTimes"/></button>
<component :is="`mkw-${element.name}`" :widget="element" :setting-callback="setting => settings[element.id] = setting" :column="column"/>
</div>
</template>
</XDraggable>
</template>
<component v-else class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" :column="column"/>
@ -40,7 +42,7 @@ import { widgets } from '../../widgets';
export default defineComponent({
components: {
XColumn,
XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
MkSelect,
MkButton,
},
@ -67,6 +69,20 @@ export default defineComponent({
};
},
computed: {
_widgets: {
get() {
return this.column.widgets;
},
set(value) {
this.$store.commit('deviceUser/setDeckWidgets', {
id: this.column.id,
widgets: value
});
}
}
},
created() {
this.menu = [{
icon: faCog,
@ -82,10 +98,6 @@ export default defineComponent({
this.settings[id]();
},
onWidgetSort() {
this.saveWidgets();
},
addWidget() {
if (this.widgetAdderSelected == null) return;
@ -107,10 +119,6 @@ export default defineComponent({
widget
});
},
saveWidgets() {
this.$store.commit('deviceUser/updateDeckColumn', this.column);
}
}
});
</script>

36
src/client/ui/default.widgets.vue
View file

@ -3,20 +3,22 @@
<template v-if="editMode">
<MkButton primary @click="addWidget" class="add"><Fa :icon="faPlus"/></MkButton>
<XDraggable
:list="widgets"
v-model="widgets"
item-key="id"
handle=".handle"
animation="150"
class="sortable"
@sort="onWidgetSort"
>
<div v-for="widget in widgets" class="customize-container _panel" :key="widget.id">
<header>
<span class="handle"><Fa :icon="faBars"/></span>{{ $t('_widgets.' + widget.name) }}<button class="remove _button" @click="removeWidget(widget)"><Fa :icon="faTimes"/></button>
</header>
<div @click="widgetFunc(widget.id)">
<component class="_close_ _forceContainerFull_" :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :setting-callback="setting => settings[widget.id] = setting"/>
<template #item="{element}">
<div class="customize-container _panel">
<header>
<span class="handle"><Fa :icon="faBars"/></span>{{ $t('_widgets.' + element.name) }}<button class="remove _button" @click="removeWidget(element)"><Fa :icon="faTimes"/></button>
</header>
<div @click="widgetFunc(element.id)">
<component class="_close_ _forceContainerFull_" :is="`mkw-${element.name}`" :widget="element" :ref="element.id" :setting-callback="setting => settings[element.id] = setting"/>
</div>
</div>
</div>
</template>
</XDraggable>
<button @click="editMode = false" class="_textButton" style="font-size: 0.9em;"><Fa :icon="faCheck"/> {{ $t('editWidgetsExit') }}</button>
</template>
@ -38,7 +40,7 @@ import MkButton from '@/components/ui/button.vue';
export default defineComponent({
components: {
MkButton,
XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
},
emits: ['mounted'],
@ -52,8 +54,13 @@ export default defineComponent({
},
computed: {
widgets(): any {
return this.$store.state.deviceUser.widgets;
widgets: {
get() {
return this.$store.state.deviceUser.widgets;
},
set(value) {
this.$store.commit('deviceUser/setWidgets', value);
}
},
},
@ -66,11 +73,6 @@ export default defineComponent({
this.settings[id]();
},
onWidgetSort() {
// TODO: vuexを直接書き換えているのでなんとかする
this.saveHome();
},
async addWidget() {
const { canceled, result: widget } = await os.dialog({
type: null,