summaryrefslogtreecommitdiff
path: root/src/client/components/deck
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/components/deck')
-rw-r--r--src/client/components/deck/antenna-column.vue19
-rw-r--r--src/client/components/deck/column-core.vue20
-rw-r--r--src/client/components/deck/column.vue68
-rw-r--r--src/client/components/deck/direct-column.vue15
-rw-r--r--src/client/components/deck/list-column.vue19
-rw-r--r--src/client/components/deck/mentions-column.vue15
-rw-r--r--src/client/components/deck/notifications-column.vue28
-rw-r--r--src/client/components/deck/tl-column.vue25
-rw-r--r--src/client/components/deck/widgets-column.vue38
9 files changed, 125 insertions, 122 deletions
diff --git a/src/client/components/deck/antenna-column.vue b/src/client/components/deck/antenna-column.vue
index dd38a087e9..e7cb9d8482 100644
--- a/src/client/components/deck/antenna-column.vue
+++ b/src/client/components/deck/antenna-column.vue
@@ -1,20 +1,21 @@
<template>
-<x-column :menu="menu" :column="column" :is-stacked="isStacked">
+<XColumn :menu="menu" :column="column" :is-stacked="isStacked">
<template #header>
- <fa :icon="faSatellite"/><span style="margin-left: 8px;">{{ column.name }}</span>
+ <Fa :icon="faSatellite"/><span style="margin-left: 8px;">{{ column.name }}</span>
</template>
- <x-timeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => $emit('loaded')"/>
-</x-column>
+ <XTimeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => $emit('loaded')"/>
+</XColumn>
</template>
<script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
import { faSatellite, faCog } from '@fortawesome/free-solid-svg-icons';
import XColumn from './column.vue';
import XTimeline from '../timeline.vue';
+import * as os from '@/os';
-export default Vue.extend({
+export default defineComponent({
components: {
XColumn,
XTimeline,
@@ -59,8 +60,8 @@ export default Vue.extend({
methods: {
async setAntenna() {
- const antennas = await this.$root.api('antennas/list');
- const { canceled, result: antenna } = await this.$root.dialog({
+ const antennas = await os.api('antennas/list');
+ const { canceled, result: antenna } = await os.dialog({
title: this.$t('selectAntenna'),
type: null,
select: {
@@ -72,7 +73,7 @@ export default Vue.extend({
showCancelButton: true
});
if (canceled) return;
- Vue.set(this.column, 'antennaId', antenna.id);
+ this.column.antennaId = antenna.id;
this.$store.commit('deviceUser/updateDeckColumn', this.column);
},
diff --git a/src/client/components/deck/column-core.vue b/src/client/components/deck/column-core.vue
index 44f19e7eda..36872d987c 100644
--- a/src/client/components/deck/column-core.vue
+++ b/src/client/components/deck/column-core.vue
@@ -1,17 +1,17 @@
<template>
<!-- TODO: リファクタの余地がありそう -->
-<x-widgets-column v-if="column.type === 'widgets'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-notifications-column v-else-if="column.type === 'notifications'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-tl-column v-else-if="column.type === 'tl'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-list-column v-else-if="column.type === 'list'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-antenna-column v-else-if="column.type === 'antenna'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<!-- TODO: <x-tl-column v-else-if="column.type === 'hashtag'" :column="column" :is-stacked="isStacked" v-on="$listeners"/> -->
-<x-mentions-column v-else-if="column.type === 'mentions'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-direct-column v-else-if="column.type === 'direct'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XWidgetsColumn v-if="column.type === 'widgets'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XNotificationsColumn v-else-if="column.type === 'notifications'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XTlColumn v-else-if="column.type === 'tl'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XListColumn v-else-if="column.type === 'list'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XAntennaColumn v-else-if="column.type === 'antenna'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<!-- TODO: <XTlColumn v-else-if="column.type === 'hashtag'" :column="column" :is-stacked="isStacked" v-on="$listeners"/> -->
+<XMentionsColumn v-else-if="column.type === 'mentions'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XDirectColumn v-else-if="column.type === 'direct'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
</template>
<script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
import XTlColumn from './tl-column.vue';
import XAntennaColumn from './antenna-column.vue';
import XListColumn from './list-column.vue';
@@ -20,7 +20,7 @@ import XWidgetsColumn from './widgets-column.vue';
import XMentionsColumn from './mentions-column.vue';
import XDirectColumn from './direct-column.vue';
-export default Vue.extend({
+export default defineComponent({
components: {
XTlColumn,
XAntennaColumn,
diff --git a/src/client/components/deck/column.vue b/src/client/components/deck/column.vue
index 61b7ac9c69..a8ae7e4cc2 100644
--- a/src/client/components/deck/column.vue
+++ b/src/client/components/deck/column.vue
@@ -1,6 +1,6 @@
<template>
<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
-<section class="dnpfarvg _panel _narrow_" :class="{ naked, paged: isMainColumn, _close_: !isMainColumn, active, isStacked, draghover, dragging, dropready }"
+<section class="dnpfarvg _panel _narrow_" :class="{ paged: isMainColumn, naked, _close_: !isMainColumn, active, isStacked, draghover, dragging, dropready }"
@dragover.prevent.stop="onDragover"
@dragleave="onDragleave"
@drop.prevent.stop="onDrop"
@@ -15,15 +15,14 @@
@contextmenu.prevent.stop="onContextmenu"
>
<button class="toggleActive _button" @click="toggleActive" v-if="isStacked">
- <template v-if="active"><fa :icon="faAngleUp"/></template>
- <template v-else><fa :icon="faAngleDown"/></template>
+ <template v-if="active"><Fa :icon="faAngleUp"/></template>
+ <template v-else><Fa :icon="faAngleDown"/></template>
</button>
<div class="action">
<slot name="action"></slot>
</div>
<span class="header"><slot name="header"></slot></span>
- <button v-if="!isMainColumn" class="menu _button" ref="menu" @click.stop="showMenu"><fa :icon="faCaretDown"/></button>
- <button v-else-if="$route.name !== 'index'" class="close _button" @click.stop="close"><fa :icon="faTimes"/></button>
+ <button v-if="!isMainColumn" class="menu _button" ref="menu" @click.stop="showMenu"><Fa :icon="faCaretDown"/></button>
</header>
<div ref="body" v-show="active">
<slot></slot>
@@ -32,11 +31,12 @@
</template>
<script lang="ts">
-import Vue from 'vue';
-import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faTimes, faArrowRight, faArrowLeft, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+import { defineComponent } from 'vue';
+import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faArrowRight, faArrowLeft, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
import { faWindowMaximize, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
+import * as os from '@/os';
-export default Vue.extend({
+export default defineComponent({
props: {
column: {
type: Object,
@@ -71,7 +71,7 @@ export default Vue.extend({
dragging: false,
draghover: false,
dropready: false,
- faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faTimes,
+ faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown,
};
},
@@ -86,10 +86,10 @@ export default Vue.extend({
keymap(): any {
return {
- 'shift+up': () => this.$parent.$emit('parentFocus', 'up'),
- 'shift+down': () => this.$parent.$emit('parentFocus', 'down'),
- 'shift+left': () => this.$parent.$emit('parentFocus', 'left'),
- 'shift+right': () => this.$parent.$emit('parentFocus', 'right'),
+ 'shift+up': () => this.$parent.$emit('parent-focus', 'up'),
+ 'shift+down': () => this.$parent.$emit('parent-focus', 'down'),
+ 'shift+left': () => this.$parent.$emit('parent-focus', 'left'),
+ 'shift+right': () => this.$parent.$emit('parent-focus', 'right'),
};
}
},
@@ -100,21 +100,21 @@ export default Vue.extend({
},
dragging(v) {
- this.$root.$emit(v ? 'deck.column.dragStart' : 'deck.column.dragEnd');
+ os.deckGlobalEvents.emit(v ? 'column.dragStart' : 'column.dragEnd');
}
},
mounted() {
if (!this.isMainColumn) {
- this.$root.$on('deck.column.dragStart', this.onOtherDragStart);
- this.$root.$on('deck.column.dragEnd', this.onOtherDragEnd);
+ os.deckGlobalEvents.on('column.dragStart', this.onOtherDragStart);
+ os.deckGlobalEvents.on('column.dragEnd', this.onOtherDragEnd);
}
},
- beforeDestroy() {
+ beforeUnmount() {
if (!this.isMainColumn) {
- this.$root.$off('deck.column.dragStart', this.onOtherDragStart);
- this.$root.$off('deck.column.dragEnd', this.onOtherDragEnd);
+ os.deckGlobalEvents.off('column.dragStart', this.onOtherDragStart);
+ os.deckGlobalEvents.off('column.dragEnd', this.onOtherDragEnd);
}
},
@@ -137,7 +137,7 @@ export default Vue.extend({
icon: faPencilAlt,
text: this.$t('rename'),
action: () => {
- this.$root.dialog({
+ os.dialog({
title: this.$t('rename'),
input: {
default: this.column.name,
@@ -207,14 +207,7 @@ export default Vue.extend({
},
showMenu() {
- this.$root.menu({
- items: this.getMenu(),
- source: this.$refs.menu,
- });
- },
-
- close() {
- this.$router.push('/');
+ os.modalMenu(this.getMenu(), this.$refs.menu);
},
goTop() {
@@ -232,7 +225,7 @@ export default Vue.extend({
}
e.dataTransfer.effectAllowed = 'move';
- e.dataTransfer.setData('mk-deck-column', this.column.id);
+ e.dataTransfer.setData(_DATA_TRANSFER_DECK_COLUMN_, this.column.id);
this.dragging = true;
},
@@ -254,7 +247,7 @@ export default Vue.extend({
return;
}
- const isDeckColumn = e.dataTransfer.types[0] == 'mk-deck-column';
+ const isDeckColumn = e.dataTransfer.types[0] == _DATA_TRANSFER_DECK_COLUMN_;
e.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
@@ -267,9 +260,9 @@ export default Vue.extend({
onDrop(e) {
this.draghover = false;
- this.$root.$emit('deck.column.dragEnd');
+ os.deckGlobalEvents.emit('column.dragEnd');
- const id = e.dataTransfer.getData('mk-deck-column');
+ const id = e.dataTransfer.getData(_DATA_TRANSFER_DECK_COLUMN_);
if (id != null && id != '') {
this.$store.commit('deviceUser/swapDeckColumn', {
a: this.column.id,
@@ -285,9 +278,11 @@ export default Vue.extend({
.dnpfarvg {
$header-height: 42px;
+ --section-padding: 10px;
+
height: 100%;
overflow: hidden;
- box-shadow: 0 0 0 1px var(--deckColumnBorder);
+ contain: content;
&.draghover {
box-shadow: 0 0 0 2px var(--focus);
@@ -341,7 +336,6 @@ export default Vue.extend({
&.paged {
> div {
background: var(--bg);
- padding: var(--margin);
}
}
@@ -379,8 +373,7 @@ export default Vue.extend({
> .toggleActive,
> .action > *,
- > .menu,
- > .close {
+ > .menu {
z-index: 1;
width: $header-height;
line-height: $header-height;
@@ -408,8 +401,7 @@ export default Vue.extend({
display: none;
}
- > .menu,
- > .close {
+ > .menu {
margin-left: auto;
margin-right: -16px;
}
diff --git a/src/client/components/deck/direct-column.vue b/src/client/components/deck/direct-column.vue
index daf83cabff..ec598cebcb 100644
--- a/src/client/components/deck/direct-column.vue
+++ b/src/client/components/deck/direct-column.vue
@@ -1,19 +1,20 @@
<template>
-<x-column :name="name" :column="column" :is-stacked="isStacked" :menu="menu">
- <template #header><fa :icon="faEnvelope" style="margin-right: 8px;"/>{{ column.name }}</template>
+<XColumn :name="name" :column="column" :is-stacked="isStacked" :menu="menu">
+ <template #header><Fa :icon="faEnvelope" style="margin-right: 8px;"/>{{ column.name }}</template>
- <x-notes :pagination="pagination" @before="before()" @after="after()"/>
-</x-column>
+ <XNotes :pagination="pagination" @before="before()" @after="after()"/>
+</XColumn>
</template>
<script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
-import Progress from '../../scripts/loading';
+import Progress from '@/scripts/loading';
import XColumn from './column.vue';
import XNotes from '../notes.vue';
+import * as os from '@/os';
-export default Vue.extend({
+export default defineComponent({
components: {
XColumn,
XNotes
diff --git a/src/client/components/deck/list-column.vue b/src/client/components/deck/list-column.vue
index a6e50802e0..4b8fc4a895 100644
--- a/src/client/components/deck/list-column.vue
+++ b/src/client/components/deck/list-column.vue
@@ -1,20 +1,21 @@
<template>
-<x-column :menu="menu" :column="column" :is-stacked="isStacked">
+<XColumn :menu="menu" :column="column" :is-stacked="isStacked">
<template #header>
- <fa :icon="faListUl"/><span style="margin-left: 8px;">{{ column.name }}</span>
+ <Fa :icon="faListUl"/><span style="margin-left: 8px;">{{ column.name }}</span>
</template>
- <x-timeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" @after="() => $emit('loaded')"/>
-</x-column>
+ <XTimeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" @after="() => $emit('loaded')"/>
+</XColumn>
</template>
<script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
import { faListUl, faCog } from '@fortawesome/free-solid-svg-icons';
import XColumn from './column.vue';
import XTimeline from '../timeline.vue';
+import * as os from '@/os';
-export default Vue.extend({
+export default defineComponent({
components: {
XColumn,
XTimeline,
@@ -59,8 +60,8 @@ export default Vue.extend({
methods: {
async setList() {
- const lists = await this.$root.api('users/lists/list');
- const { canceled, result: list } = await this.$root.dialog({
+ const lists = await os.api('users/lists/list');
+ const { canceled, result: list } = await os.dialog({
title: this.$t('selectList'),
type: null,
select: {
@@ -72,7 +73,7 @@ export default Vue.extend({
showCancelButton: true
});
if (canceled) return;
- Vue.set(this.column, 'listId', list.id);
+ this.column.listId = list.id;
this.$store.commit('deviceUser/updateDeckColumn', this.column);
},
diff --git a/src/client/components/deck/mentions-column.vue b/src/client/components/deck/mentions-column.vue
index 7f5382a155..dfa82af9b9 100644
--- a/src/client/components/deck/mentions-column.vue
+++ b/src/client/components/deck/mentions-column.vue
@@ -1,19 +1,20 @@
<template>
-<x-column :column="column" :is-stacked="isStacked" :menu="menu">
- <template #header><fa :icon="faAt" style="margin-right: 8px;"/>{{ column.name }}</template>
+<XColumn :column="column" :is-stacked="isStacked" :menu="menu">
+ <template #header><Fa :icon="faAt" style="margin-right: 8px;"/>{{ column.name }}</template>
- <x-notes :pagination="pagination" @before="before()" @after="after()"/>
-</x-column>
+ <XNotes :pagination="pagination" @before="before()" @after="after()"/>
+</XColumn>
</template>
<script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
import { faAt } from '@fortawesome/free-solid-svg-icons';
-import Progress from '../../scripts/loading';
+import Progress from '@/scripts/loading';
import XColumn from './column.vue';
import XNotes from '../notes.vue';
+import * as os from '@/os';
-export default Vue.extend({
+export default defineComponent({
components: {
XColumn,
XNotes
diff --git a/src/client/components/deck/notifications-column.vue b/src/client/components/deck/notifications-column.vue
index ac49aec06d..23fcb15681 100644
--- a/src/client/components/deck/notifications-column.vue
+++ b/src/client/components/deck/notifications-column.vue
@@ -1,19 +1,20 @@
<template>
-<x-column :column="column" :is-stacked="isStacked" :menu="menu">
- <template #header><fa :icon="faBell" style="margin-right: 8px;"/>{{ column.name }}</template>
+<XColumn :column="column" :is-stacked="isStacked" :menu="menu">
+ <template #header><Fa :icon="faBell" style="margin-right: 8px;"/>{{ column.name }}</template>
- <x-notifications :include-types="column.includingTypes"/>
-</x-column>
+ <XNotifications :include-types="column.includingTypes"/>
+</XColumn>
</template>
<script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
import { faCog } from '@fortawesome/free-solid-svg-icons';
import { faBell } from '@fortawesome/free-regular-svg-icons';
import XColumn from './column.vue';
import XNotifications from '../notifications.vue';
+import * as os from '@/os';
-export default Vue.extend({
+export default defineComponent({
components: {
XColumn,
XNotifications
@@ -42,12 +43,17 @@ export default Vue.extend({
icon: faCog,
text: this.$t('notificationSetting'),
action: async () => {
- this.$root.new(await import('../notification-setting-window.vue').then(m => m.default), {
+ os.popup(await import('@/components/notification-setting-window.vue'), {
includingTypes: this.column.includingTypes,
- }).$on('ok', async ({ includingTypes }) => {
- this.$set(this.column, 'includingTypes', includingTypes);
- this.$store.commit('deviceUser/updateDeckColumn', this.column);
- });
+ }, {
+ done: async (res) => {
+ const { includingTypes } = res;
+ this.$store.commit('deviceUser/updateDeckColumn', {
+ ...this.column,
+ includingTypes: includingTypes
+ });
+ },
+ }, 'closed');
}
}];
},
diff --git a/src/client/components/deck/tl-column.vue b/src/client/components/deck/tl-column.vue
index d2d1749c7c..f757618881 100644
--- a/src/client/components/deck/tl-column.vue
+++ b/src/client/components/deck/tl-column.vue
@@ -1,31 +1,32 @@
<template>
-<x-column :menu="menu" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState">
+<XColumn :menu="menu" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState">
<template #header>
- <fa v-if="column.tl === 'home'" :icon="faHome"/>
- <fa v-else-if="column.tl === 'local'" :icon="faComments"/>
- <fa v-else-if="column.tl === 'social'" :icon="faShareAlt"/>
- <fa v-else-if="column.tl === 'global'" :icon="faGlobe"/>
+ <Fa v-if="column.tl === 'home'" :icon="faHome"/>
+ <Fa v-else-if="column.tl === 'local'" :icon="faComments"/>
+ <Fa v-else-if="column.tl === 'social'" :icon="faShareAlt"/>
+ <Fa v-else-if="column.tl === 'global'" :icon="faGlobe"/>
<span style="margin-left: 8px;">{{ column.name }}</span>
</template>
<div class="iwaalbte" v-if="disabled">
<p>
- <fa :icon="faMinusCircle"/>
+ <Fa :icon="faMinusCircle"/>
{{ $t('disabled-timeline.title') }}
</p>
<p class="desc">{{ $t('disabled-timeline.description') }}</p>
</div>
- <x-timeline v-else-if="column.tl" ref="timeline" :src="column.tl" @after="() => $emit('loaded')" @queue="queueUpdated" @note="onNote" :key="column.tl"/>
-</x-column>
+ <XTimeline v-else-if="column.tl" ref="timeline" :src="column.tl" @after="() => $emit('loaded')" @queue="queueUpdated" @note="onNote" :key="column.tl"/>
+</XColumn>
</template>
<script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
import { faMinusCircle, faHome, faComments, faShareAlt, faGlobe, faCog } from '@fortawesome/free-solid-svg-icons';
import XColumn from './column.vue';
import XTimeline from '../timeline.vue';
+import * as os from '@/os';
-export default Vue.extend({
+export default defineComponent({
components: {
XColumn,
XTimeline,
@@ -78,7 +79,7 @@ export default Vue.extend({
methods: {
async setType() {
- const { canceled, result: src } = await this.$root.dialog({
+ const { canceled, result: src } = await os.dialog({
title: this.$t('timeline'),
type: null,
select: {
@@ -99,7 +100,7 @@ export default Vue.extend({
}
return;
}
- Vue.set(this.column, 'tl', src);
+ this.column.tl = src;
this.$store.commit('deviceUser/updateDeckColumn', this.column);
},
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() {
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-03-04 01:42:11 +0000