From 7268e29b5993cc344adbbc1844c852ecd35e2bc0 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 12 Sep 2020 12:48:47 +0900
Subject: [PATCH] wip

---
 package.json                                  |  6 +--
 src/client/components/deck/widgets-column.vue |  5 +-
 src/client/components/image-viewer.vue        | 52 +++++++++----------
 src/client/components/media-image.vue         |  5 +-
 src/client/components/modal.vue               |  6 ++-
 src/client/components/post-form-attaches.vue  |  5 +-
 src/client/default.vue                        |  2 +-
 .../pages/page-editor/page-editor.blocks.vue  |  6 +--
 src/client/pages/page-editor/page-editor.vue  |  6 +--
 yarn.lock                                     | 32 ++++++------
 10 files changed, 61 insertions(+), 64 deletions(-)

diff --git a/package.json b/package.json
index 44b5479632..6a3c70adb5 100644
--- a/package.json
+++ b/package.json
@@ -247,9 +247,10 @@
 		"vue-color": "2.7.1",
 		"vue-content-loading": "1.6.0",
 		"vue-cropperjs": "4.1.0",
-		"vue-i18n": "9.0.0-alpha.13",
+		"vue-draggable-next": "1.0.5",
+		"vue-i18n": "9.0.0-alpha.17",
 		"vue-json-pretty": "1.6.7",
-		"vue-loader": "16.0.0-beta.5",
+		"vue-loader": "16.0.0-beta.7",
 		"vue-marquee-text-component": "1.1.1",
 		"vue-meta": "2.4.0",
 		"vue-prism-component": "1.2.0",
@@ -258,7 +259,6 @@
 		"vue-style-loader": "4.1.2",
 		"vue-svg-inline-loader-corejs3": "1.5.0",
 		"vue-template-compiler": "2.6.12",
-		"vuedraggable": "2.24.1",
 		"vuex": "4.0.0-beta.4",
 		"vuex-persistedstate": "3.1.0",
 		"web-push": "3.4.4",
diff --git a/src/client/components/deck/widgets-column.vue b/src/client/components/deck/widgets-column.vue
index 2d47edc916..4d0d3bc2b1 100644
--- a/src/client/components/deck/widgets-column.vue
+++ b/src/client/components/deck/widgets-column.vue
@@ -29,8 +29,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } 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';
@@ -42,7 +41,7 @@ import * as os from '@/os';
 export default defineComponent({
 	components: {
 		XColumn,
-		XDraggable,
+		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
 		MkSelect,
 		MkButton,
 	},
diff --git a/src/client/components/image-viewer.vue b/src/client/components/image-viewer.vue
index 5ab8fa0a83..be3997e919 100644
--- a/src/client/components/image-viewer.vue
+++ b/src/client/components/image-viewer.vue
@@ -1,19 +1,17 @@
 <template>
-<x-modal ref="modal" @closed="() => { $emit('closed'); destroyDom(); }">
-	<img class="xubzgfga" ref="img" :src="image.url" :alt="image.name" :title="image.name" @click="close" tabindex="-1"/>
-</x-modal>
+<div class="xubzgfga">
+	<header>{{ image.name }}</header>
+	<img :src="image.url" :alt="image.name" :title="image.name" @click="close"/>
+	<footer>{{ image.type }}, {{ bytes(image.size) }}</footer>
+</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import XModal from './modal.vue';
 import * as os from '@/os';
+import bytes from '@/filters/bytes';
 
 export default defineComponent({
-	components: {
-		XModal,
-	},
-
 	props: {
 		image: {
 			type: Object,
@@ -21,32 +19,34 @@ export default defineComponent({
 		},
 	},
 
-	mounted() {
-		this.$nextTick(() => {
-			this.$refs.img.focus();
-		});
-	},
-
 	methods: {
 		close() {
-			this.$refs.modal.close();
+			this.$emit('done');
 		},
+
+		bytes,
 	}
 });
 </script>
 
 <style lang="scss" scoped>
 .xubzgfga {
-	position: fixed;
-	z-index: 2;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	max-width: 100%;
-	max-height: 100%;
-	margin: auto;
-	cursor: zoom-out;
-	image-orientation: from-image;
+	max-width: 1024px;
+
+	> header {
+		margin-bottom: 8px;
+	}
+
+	> img {
+		display: block;
+		max-width: 100%;
+		cursor: zoom-out;
+		image-orientation: from-image;
+	}
+
+	> footer {
+		margin-top: 8px;
+		opacity: 0.7;
+	}
 }
 </style>
diff --git a/src/client/components/media-image.vue b/src/client/components/media-image.vue
index 25469fb831..e8cbd51e78 100644
--- a/src/client/components/media-image.vue
+++ b/src/client/components/media-image.vue
@@ -72,12 +72,9 @@ export default defineComponent({
 			if (this.$store.state.device.imageNewTab) {
 				window.open(this.image.url, '_blank');
 			} else {
-				const viewer = os.modal(ImageViewer, {
+				os.modal(ImageViewer, {
 					image: this.image
 				});
-				this.$once('hook:beforeDestroy', () => {
-					viewer.close();
-				});
 			}
 		}
 	}
diff --git a/src/client/components/modal.vue b/src/client/components/modal.vue
index 7c016edc9e..ad7567cdde 100644
--- a/src/client/components/modal.vue
+++ b/src/client/components/modal.vue
@@ -166,8 +166,10 @@ export default defineComponent({
 		max-height: calc(100% - 16px);
 		overflow: auto;
 		display: flex;
-		justify-content: center;
-		align-items: center;
+
+		> * {
+			margin: auto;
+		}
 	}
 
 	> .content.popup {
diff --git a/src/client/components/post-form-attaches.vue b/src/client/components/post-form-attaches.vue
index 16e29dfe9b..c57714545f 100644
--- a/src/client/components/post-form-attaches.vue
+++ b/src/client/components/post-form-attaches.vue
@@ -13,8 +13,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import * as XDraggable from 'vuedraggable';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import { faTimesCircle, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import { faExclamationTriangle, faICursor } from '@fortawesome/free-solid-svg-icons';
 import XFileThumbnail from './drive-file-thumbnail.vue'
@@ -22,7 +21,7 @@ import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		XDraggable,
+		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
 		XFileThumbnail
 	},
 
diff --git a/src/client/default.vue b/src/client/default.vue
index cf92d226db..b30b4a005c 100644
--- a/src/client/default.vue
+++ b/src/client/default.vue
@@ -104,7 +104,7 @@ export default defineComponent({
 		XSidebar,
 		XClock: defineAsyncComponent(() => import('@/components/header-clock.vue')),
 		MkButton: defineAsyncComponent(() => import('@/components/ui/button.vue')),
-		XDraggable: defineAsyncComponent(() => import('vuedraggable')),
+		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
 	},
 
 	data() {
diff --git a/src/client/pages/page-editor/page-editor.blocks.vue b/src/client/pages/page-editor/page-editor.blocks.vue
index bf281bf4b2..6b78f0846a 100644
--- a/src/client/pages/page-editor/page-editor.blocks.vue
+++ b/src/client/pages/page-editor/page-editor.blocks.vue
@@ -5,8 +5,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import * as XDraggable from 'vuedraggable';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import XSection from './els/page-editor.el.section.vue';
 import XText from './els/page-editor.el.text.vue';
 import XTextarea from './els/page-editor.el.textarea.vue';
@@ -25,7 +24,8 @@ import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		XDraggable, XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas
+		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
+		XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas
 	},
 
 	props: {
diff --git a/src/client/pages/page-editor/page-editor.vue b/src/client/pages/page-editor/page-editor.vue
index 258d9b447f..056e5ebfac 100644
--- a/src/client/pages/page-editor/page-editor.vue
+++ b/src/client/pages/page-editor/page-editor.vue
@@ -83,8 +83,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import * as XDraggable from 'vuedraggable';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import 'prismjs';
 import { highlight, languages } from 'prismjs/components/prism-core';
 import 'prismjs/components/prism-clike';
@@ -112,7 +111,8 @@ import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		XDraggable, XVariable, XBlocks, MkTextarea, MkContainer, MkButton, MkSelect, MkSwitch, MkInput, PrismEditor
+		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
+		XVariable, XBlocks, MkTextarea, MkContainer, MkButton, MkSelect, MkSwitch, MkInput, PrismEditor
 	},
 
 	props: {
diff --git a/yarn.lock b/yarn.lock
index 4d4be47288..0f9d5693be 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8749,7 +8749,7 @@ sort-keys@^2.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
-sortablejs@^1.10.1:
+sortablejs@^1.10.2:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.10.2.tgz#6e40364d913f98b85a14f6678f92b5c1221f5290"
   integrity sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==
@@ -10091,6 +10091,13 @@ vue-cropperjs@4.1.0:
   dependencies:
     cropperjs "^1.5.6"
 
+vue-draggable-next@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/vue-draggable-next/-/vue-draggable-next-1.0.5.tgz#ec872539c6d5ef383a5b17e5fe153eb5741be40f"
+  integrity sha512-YeR0INdg7Kgp13qCUrFsF+q7Cy+E6I7dyFhfAtRkCGb1gaSh6WdQwEa3k33HR/kjB0rAXWmoxcE7T1d+N3eGcg==
+  dependencies:
+    sortablejs "^1.10.2"
+
 vue-eslint-parser@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.1.0.tgz#9cdbcc823e656b087507a1911732b867ac101e83"
@@ -10103,20 +10110,20 @@ vue-eslint-parser@^7.1.0:
     esquery "^1.0.1"
     lodash "^4.17.15"
 
-vue-i18n@9.0.0-alpha.13:
-  version "9.0.0-alpha.13"
-  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.0.0-alpha.13.tgz#6354915cfaee66e9973b21669c8bcb6cf81eeab2"
-  integrity sha512-0kkZYImEcLwmcEqHuQIRUKxISOrm1iAWDOUPvtQ0yWW7MGkKAMHCTgn6toGQywPc4v48P+YDTgsGsBpHFpQJFA==
+vue-i18n@9.0.0-alpha.17:
+  version "9.0.0-alpha.17"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.0.0-alpha.17.tgz#a096c8ed0ccc51e16d835192aa8421e89157802b"
+  integrity sha512-5GIDvYKHPU8DuysdQM7tcALWmBlFbwtM9jKWGI4wBDbych4dK9OMjGCVrC2PvaGD/zo96VLJMYLNpgg0GCk6QA==
 
 vue-json-pretty@1.6.7:
   version "1.6.7"
   resolved "https://registry.yarnpkg.com/vue-json-pretty/-/vue-json-pretty-1.6.7.tgz#7dbc0d50d7b30f2ad99dade6541cd57479ff3725"
   integrity sha512-M7fGSj6yQxl9x3n4cViD5OUUXeXeIfjVfnOQOH+T95qo4wz2BzthBDZzRsKKsf9W5YIFbC1ZWkw50j9cPxxs9w==
 
-vue-loader@16.0.0-beta.5:
-  version "16.0.0-beta.5"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.0.0-beta.5.tgz#04edc889492b03a445e7ac66e9226a70175ca8a0"
-  integrity sha512-ciWfzNefqWlmzKznCWY9hl+fPP4KlQ0A9MtHbJ/8DpyY+dAM8gDrjufIdxwTgC4szE4EZC3A6ip/BbrqM84GqA==
+vue-loader@16.0.0-beta.7:
+  version "16.0.0-beta.7"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.0.0-beta.7.tgz#6f2726fa0e2b1fbae67895c47593bbf69f2b9ab8"
+  integrity sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==
   dependencies:
     "@types/mini-css-extract-plugin" "^0.9.1"
     chalk "^3.0.0"
@@ -10194,13 +10201,6 @@ vue@^2.5.13, vue@^2.5.17:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
   integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
 
-vuedraggable@2.24.1:
-  version "2.24.1"
-  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-2.24.1.tgz#304abd7644dde05c1f199a227bf9e9107f56197a"
-  integrity sha512-G1fxO1oshx+WLdieSGl6jSJdlHOQFga1FpjuUpgXldbpKNzxpjsGn4xYNnRHVrOAqm8aG5FfpdQlh5LHesxCeA==
-  dependencies:
-    sortablejs "^1.10.1"
-
 vuex-persistedstate@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/vuex-persistedstate/-/vuex-persistedstate-3.1.0.tgz#a710d01000bff8336bc3b03fa3ef42e376094b71"