diff options
Diffstat (limited to 'src/client/components/deck/widgets-column.vue')
| -rw-r--r-- | src/client/components/deck/widgets-column.vue | 38 |
1 files changed, 19 insertions, 19 deletions
diff --git a/src/client/components/deck/widgets-column.vue b/src/client/components/deck/widgets-column.vue index 31d1e3d53c..e19fb01e5e 100644 --- a/src/client/components/deck/widgets-column.vue +++ b/src/client/components/deck/widgets-column.vue @@ -1,47 +1,46 @@ <template> -<x-column :menu="menu" :naked="true" :column="column" :is-stacked="isStacked"> - <template #header><fa :icon="faWindowMaximize" style="margin-right: 8px;"/>{{ column.name }}</template> +<XColumn :menu="menu" :naked="true" :column="column" :is-stacked="isStacked"> + <template #header><Fa :icon="faWindowMaximize" style="margin-right: 8px;"/>{{ column.name }}</template> <div class="wtdtxvec"> <template v-if="edit"> <header> - <mk-select v-model="widgetAdderSelected" style="margin-bottom: var(--margin)"> + <MkSelect v-model:value="widgetAdderSelected" style="margin-bottom: var(--margin)"> <template #label>{{ $t('selectWidget') }}</template> <option v-for="widget in widgets" :value="widget" :key="widget">{{ $t(`_widgets.${widget}`) }}</option> - </mk-select> - <mk-button inline @click="addWidget" primary><fa :icon="faPlus"/> {{ $t('add') }}</mk-button> - <mk-button inline @click="edit = false">{{ $t('close') }}</mk-button> + </MkSelect> + <MkButton inline @click="addWidget" primary><Fa :icon="faPlus"/> {{ $t('add') }}</MkButton> + <MkButton inline @click="edit = false">{{ $t('close') }}</MkButton> </header> - <x-draggable + <XDraggable :list="column.widgets" 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" :ref="widget.id" :is-customize-mode="true" :column="column"/> + <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> - </x-draggable> + </XDraggable> </template> - <component v-else class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" :column="column"/> + <component v-else class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" :column="column"/> </div> -</x-column> +</XColumn> </template> <script lang="ts"> -import Vue from 'vue'; -import * as XDraggable from 'vuedraggable'; +import { defineComponent, defineAsyncComponent } from 'vue'; import { v4 as uuid } from 'uuid'; import { faWindowMaximize, faTimes, faCog, faPlus } from '@fortawesome/free-solid-svg-icons'; -import MkSelect from '../../components/ui/select.vue'; -import MkButton from '../../components/ui/button.vue'; +import MkSelect from '@/components/ui/select.vue'; +import MkButton from '@/components/ui/button.vue'; import XColumn from './column.vue'; import { widgets } from '../../widgets'; -export default Vue.extend({ +export default defineComponent({ components: { XColumn, - XDraggable, + XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)), MkSelect, MkButton, }, @@ -63,6 +62,7 @@ export default Vue.extend({ menu: null, widgetAdderSelected: null, widgets, + settings: {}, faWindowMaximize, faTimes, faPlus }; }, @@ -79,7 +79,7 @@ export default Vue.extend({ methods: { widgetFunc(id) { - this.$refs[id][0].setting(); + this.settings[id](); }, onWidgetSort() { |