graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-13 04:43:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

wip

Browse source
This commit is contained in:
syuilo 2018-02-12 00:29:10 +09:00
parent 5f8021dfff
commit 249fdc1b5d
1 changed files with 51 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
src/web/app/common/views/components/url.vue
View file

@ -1,65 +1,66 @@
<template> <template>
<a :href="url" :target="target"> <a class="mk-url" :href="url" :target="target">
<span class="schema">{{ schema }}//</span> <span class="schema">{{ schema }}//</span>
<span class="hostname">{{ hostname }}</span> <span class="hostname">{{ hostname }}</span>
<span class="port" v-if="port != ''">:{{ port }}</span> <span class="port" v-if="port != ''">:{{ port }}</span>
<span class="pathname" v-if="pathname != ''">{{ pathname }}</span> <span class="pathname" v-if="pathname != ''">{{ pathname }}</span>
<span class="query">{{ query }}</span> <span class="query">{{ query }}</span>
<span class="hash">{{ hash }}</span> <span class="hash">{{ hash }}</span>
%fa:external-link-square-alt% %fa:external-link-square-alt%
</a> </a>
</template> </template>
<script lang="typescript"> <script lang="ts">
export default { import Vue from 'vue';
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; export default Vue.extend({
this.hostname = url.hostname; props: ['url', 'target'],
this.port = url.port; data() {
this.pathname = url.pathname; return {
this.query = url.search; schema: null,
this.hash = url.hash; 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> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
:scope .mk-url
word-break break-all word-break break-all
> a > [data-fa]
> [data-fa] padding-left 2px
padding-left 2px font-size .9em
font-size .9em font-weight 400
font-weight 400 font-style normal
font-style normal
> .schema > .schema
opacity 0.5 opacity 0.5
> .hostname > .hostname
font-weight bold font-weight bold
> .pathname > .pathname
opacity 0.8 opacity 0.8
> .query > .query
opacity 0.5 opacity 0.5
> .hash > .hash
font-style italic font-style italic
</style> </style>