From 249fdc1b5d0c3f6eb2f643e2debf310b2b2bf4df Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 12 Feb 2018 00:29:10 +0900
Subject: [PATCH] wip

---
 src/web/app/common/views/components/url.vue | 101 ++++++++++----------
 1 file changed, 51 insertions(+), 50 deletions(-)

diff --git a/src/web/app/common/views/components/url.vue b/src/web/app/common/views/components/url.vue
index 4cc76f7e24..14d4fc82f3 100644
--- a/src/web/app/common/views/components/url.vue
+++ b/src/web/app/common/views/components/url.vue
@@ -1,65 +1,66 @@
 <template>
-	<a :href="url" :target="target">
-		<span class="schema">{{ schema }}//</span>
-		<span class="hostname">{{ hostname }}</span>
-		<span class="port" v-if="port != ''">:{{ port }}</span>
-		<span class="pathname" v-if="pathname != ''">{{ pathname }}</span>
-		<span class="query">{{ query }}</span>
-		<span class="hash">{{ hash }}</span>
-		%fa:external-link-square-alt%
-	</a>
+<a class="mk-url" :href="url" :target="target">
+	<span class="schema">{{ schema }}//</span>
+	<span class="hostname">{{ hostname }}</span>
+	<span class="port" v-if="port != ''">:{{ port }}</span>
+	<span class="pathname" v-if="pathname != ''">{{ pathname }}</span>
+	<span class="query">{{ query }}</span>
+	<span class="hash">{{ hash }}</span>
+	%fa:external-link-square-alt%
+</a>
 </template>
 
-<script lang="typescript">
-	export default {
-		props: ['url', 'target'],
-		data() {
-			return {
-				schema: null,
-				hostname: null,
-				port: null,
-				pathname: null,
-				query: null,
-				hash: null
-			};
-		},
-		created() {
-			const url = new URL(this.url);
+<script lang="ts">
+import Vue from 'vue';
 
-			this.schema = url.protocol;
-			this.hostname = url.hostname;
-			this.port = url.port;
-			this.pathname = url.pathname;
-			this.query = url.search;
-			this.hash = url.hash;
-		}
-	};
+export default Vue.extend({
+	props: ['url', 'target'],
+	data() {
+		return {
+			schema: null,
+			hostname: null,
+			port: null,
+			pathname: null,
+			query: null,
+			hash: null
+		};
+	},
+	created() {
+		const url = new URL(this.url);
+
+		this.schema = url.protocol;
+		this.hostname = url.hostname;
+		this.port = url.port;
+		this.pathname = url.pathname;
+		this.query = url.search;
+		this.hash = url.hash;
+	}
+});
 </script>
 
 <style lang="stylus" scoped>
-	:scope
-		word-break break-all
+.mk-url
+	word-break break-all
 
-	> a
-		> [data-fa]
-			padding-left 2px
-			font-size .9em
-			font-weight 400
-			font-style normal
+	> [data-fa]
+		padding-left 2px
+		font-size .9em
+		font-weight 400
+		font-style normal
 
-		> .schema
-			opacity 0.5
+	> .schema
+		opacity 0.5
 
-		> .hostname
-			font-weight bold
+	> .hostname
+		font-weight bold
 
-		> .pathname
-			opacity 0.8
+	> .pathname
+		opacity 0.8
 
-		> .query
-			opacity 0.5
+	> .query
+		opacity 0.5
 
-		> .hash
-			font-style italic
+	> .hash
+		font-style italic
 
 </style>