style: lint code

This commit is contained in:
meteorlxy
2019-12-03 19:27:05 +08:00
parent ba1f7c799e
commit b4853c3e60
38 changed files with 599 additions and 230 deletions
+3 -1
View File
@@ -38,6 +38,7 @@ Vue.use(VuePress)
Vue.mixin(dataMixin(ClientComputedMixin, siteData))
// component for rendering markdown content and setting title etc.
/* eslint-disable vue/match-component-file-name */
Vue.component('Content', Content)
Vue.component('ContentSlotsDistributor', ContentSlotsDistributor)
Vue.component('OutboundLink', OutboundLink)
@@ -46,6 +47,7 @@ Vue.component('ClientOnly', ClientOnly)
// core components
Vue.component('Layout', getLayoutAsyncComponent('Layout'))
Vue.component('NotFound', getLayoutAsyncComponent('NotFound'))
/* eslint-disable-next-line vue/match-component-file-name */
// global helper for adding base path to absolute urls
Vue.prototype.$withBase = function (path) {
@@ -102,7 +104,7 @@ export function createApp (isServer) {
router,
render (h) {
return h('div', { attrs: { id: 'app' }}, [
h('router-view', { ref: 'layout' }),
h('RouterView', { ref: 'layout' }),
h('div', { class: 'global-ui' }, globalUIComponents.map(component => h(component)))
])
}
@@ -1,5 +1,5 @@
<template>
<component :is="layout"/>
<component :is="layout" />
</template>
<script>
@@ -7,6 +7,16 @@ import Vue from 'vue'
import { setGlobalInfo } from '@app/util'
export default {
name: 'GlobalLayout',
computed: {
layout () {
const layout = this.getLayout()
setGlobalInfo('layout', layout)
return Vue.component(layout)
}
},
methods: {
getLayout () {
if (this.$page.path) {
@@ -19,14 +29,6 @@ export default {
}
return 'NotFound'
}
},
computed: {
layout () {
const layout = this.getLayout()
setGlobalInfo('layout', layout)
return Vue.component(layout)
}
}
}
</script>
@@ -2,8 +2,12 @@
<div class="theme-container">
<div class="content">
<h1>404</h1>
<blockquote>{{ getMsg() }}</blockquote>
<router-link to="/">Take me home.</router-link>
<RouterLink to="/">
Take me home.
</RouterLink>
</div>
</div>
</template>
@@ -1,7 +1,22 @@
<template functional>
<svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15">
<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
<svg
class="icon outbound"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
x="0px"
y="0px"
viewBox="0 0 100 100"
width="15"
height="15"
>
<path
fill="currentColor"
d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
/>
<polygon
fill="currentColor"
points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
/>
</svg>
</template>
@@ -1,3 +1,3 @@
<template>
<Content/>
<Content />
</template>
@@ -1,3 +1,3 @@
<template>
<Content/>
<Content />
</template>
+2 -2
View File
@@ -67,14 +67,14 @@ module.exports = (md, externalAttrs) => {
routerLinks.push(to)
return Object.create(token, {
tag: { value: 'router-link' }
tag: { value: 'RouterLink' }
})
}
md.renderer.rules.link_close = (tokens, idx, options, env, self) => {
const token = tokens[idx]
if (hasOpenRouterLink) {
token.tag = 'router-link'
token.tag = 'RouterLink'
hasOpenRouterLink = false
}
if (hasOpenExternalLink) {
@@ -3,12 +3,25 @@
<svg
v-if="show"
class="go-to-top"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 49.484 28.284"
@click="scrollToTop"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.484 28.284"
>
<g transform="translate(-229 -126.358)">
<rect fill="currentColor" width="35" height="5" rx="2" transform="translate(229 151.107) rotate(-45)"/>
<rect fill="currentColor" width="35" height="5" rx="2" transform="translate(274.949 154.642) rotate(-135)"/>
<rect
fill="currentColor"
width="35"
height="5"
rx="2"
transform="translate(229 151.107) rotate(-45)"
/>
<rect
fill="currentColor"
width="35"
height="5"
rx="2"
transform="translate(274.949 154.642) rotate(-135)"
/>
</g>
</svg>
</transition>
@@ -18,6 +31,8 @@
import debounce from 'lodash.debounce'
export default {
name: 'BackToTop',
props: {
threshold: {
type: Number,
@@ -31,6 +46,12 @@ export default {
}
},
computed: {
show () {
return this.scrollTop > this.threshold
}
},
mounted () {
this.scrollTop = this.getScrollTop()
window.addEventListener('scroll', debounce(() => {
@@ -49,12 +70,6 @@ export default {
window.scrollTo({ top: 0, behavior: 'smooth' })
this.scrollTop = 0
}
},
computed: {
show () {
return this.scrollTop > this.threshold
}
}
}
</script>
@@ -1,5 +1,6 @@
import BackToTop from './BackToTop.vue'
export default ({ Vue }) => {
// eslint-disable-next-line vue/match-component-file-name
Vue.component('BackToTop', BackToTop)
}
@@ -10,8 +10,13 @@
v-if="enabled"
class="sw-update-popup"
>
{{ message }}<br>
<button @click="reload">{{ buttonText }}</button>
{{ message }}
<br>
<button @click="reload">
{{ buttonText }}
</button>
</div>
</slot>
</transition>
@@ -24,6 +29,8 @@ import { normalizeConfig } from '@app/util'
import { popupConfig as defaultPopupConfig } from './i18n'
export default {
name: 'SWUpdatePopup',
data () {
return {
rawPopupConfig: SW_UPDATE_POPUP,
@@ -31,13 +38,6 @@ export default {
}
},
created () {
event.$on('sw-updated', this.onSWUpdated)
if (SW_UPDATE_POPUP === true) {
this.rawPopupConfig = defaultPopupConfig
}
},
computed: {
popupConfig () {
return normalizeConfig(this, this.rawPopupConfig)
@@ -58,6 +58,13 @@ export default {
}
},
created () {
event.$on('sw-updated', this.onSWUpdated)
if (SW_UPDATE_POPUP === true) {
this.rawPopupConfig = defaultPopupConfig
}
},
methods: {
onSWUpdated (e) {
this.updateEvent = e
@@ -6,6 +6,7 @@ import SWUpdateEvent from './SWUpdateEvent'
import event from './event'
if (SW_UPDATE_POPUP) {
// eslint-disable-next-line vue/match-component-file-name
Vue.component('SWUpdatePopup', () => import('./SWUpdatePopup.vue'))
}
+24 -15
View File
@@ -1,36 +1,43 @@
<template>
<div class="search-box">
<input
@input="query = $event.target.value"
ref="input"
aria-label="Search"
:value="query"
:class="{ 'focused': focused }"
:placeholder="placeholder"
autocomplete="off"
spellcheck="false"
@input="query = $event.target.value"
@focus="focused = true"
@blur="focused = false"
@keyup.enter="go(focusIndex)"
@keyup.up="onUp"
@keyup.down="onDown"
ref="input"
>
<ul
class="suggestions"
v-if="showSuggestions"
class="suggestions"
:class="{ 'align-right': alignRight }"
@mouseleave="unfocus"
>
<li
class="suggestion"
v-for="(s, i) in suggestions"
:key="i"
class="suggestion"
:class="{ focused: i === focusIndex }"
@mousedown="go(i)"
@mouseenter="focus(i)"
>
<a :href="s.path" @click.prevent>
<a
:href="s.path"
@click.prevent
>
<span class="page-title">{{ s.title || s.path }}</span>
<span v-if="s.header" class="header">&gt; {{ s.header.title }}</span>
<span
v-if="s.header"
class="header"
>&gt; {{ s.header.title }}</span>
</a>
</li>
</ul>
@@ -40,6 +47,8 @@
<script>
/* global SEARCH_MAX_SUGGESTIONS, SEARCH_PATHS, SEARCH_HOTKEYS */
export default {
name: 'SearchBox',
data () {
return {
query: '',
@@ -49,15 +58,6 @@ export default {
}
},
mounted () {
this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
document.addEventListener('keydown', this.onHotkey)
},
beforeDestroy () {
document.removeEventListener('keydown', this.onHotkey)
},
computed: {
showSuggestions () {
return (
@@ -121,6 +121,15 @@ export default {
}
},
mounted () {
this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
document.addEventListener('keydown', this.onHotkey)
},
beforeDestroy () {
document.removeEventListener('keydown', this.onHotkey)
},
methods: {
getPageLocalePath (page) {
for (const localePath in this.$site.locales || {}) {
@@ -21,7 +21,7 @@ describe('DropdownLink', () => {
const wrapper = mount(DropdownLink, {
localVue: createLocalVue(),
stubs: {
'router-link': RouterLinkStub
'RouterLink': RouterLinkStub
},
propsData: { item }
})
@@ -11,7 +11,7 @@ describe('NavLink', () => {
const wrapper = mount(NavLink, {
localVue: createLocalVue(),
stubs: {
'router-link': RouterLinkStub
'RouterLink': RouterLinkStub
},
propsData: { item }
})
@@ -14,6 +14,8 @@
<script>
export default {
name: 'AlgoliaSearchBox',
props: ['options'],
data () {
@@ -22,6 +24,16 @@ export default {
}
},
watch: {
$lang (newValue) {
this.update(this.options, newValue)
},
options (newValue) {
this.update(newValue, this.$lang)
}
},
mounted () {
this.initialize(this.options, this.$lang)
this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
@@ -58,16 +70,6 @@ export default {
this.$el.innerHTML = '<input id="algolia-search-input" class="search-query">'
this.initialize(options, lang)
}
},
watch: {
$lang (newValue) {
this.update(this.options, newValue)
},
options (newValue) {
this.update(newValue, this.$lang)
}
}
}
</script>
@@ -13,44 +13,47 @@
<span
class="arrow"
:class="open ? 'down' : 'right'"
></span>
/>
</button>
<DropdownTransition>
<ul
class="nav-dropdown"
v-show="open"
class="nav-dropdown"
>
<li
class="dropdown-item"
:key="subItem.link || index"
v-for="(subItem, index) in item.items"
:key="subItem.link || index"
class="dropdown-item"
>
<h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
<h4 v-if="subItem.type === 'links'">
{{ subItem.text }}
</h4>
<ul
class="dropdown-subitem-wrapper"
v-if="subItem.type === 'links'"
class="dropdown-subitem-wrapper"
>
<li
class="dropdown-subitem"
:key="childSubItem.link"
v-for="childSubItem in subItem.items"
:key="childSubItem.link"
class="dropdown-subitem"
>
<NavLink
:item="childSubItem"
@focusout="
isLastItemOfArray(childSubItem, subItem.items) &&
isLastItemOfArray(subItem, item.items) &&
setOpen(false)
isLastItemOfArray(subItem, item.items) &&
setOpen(false)
"
:item="childSubItem"/>
/>
</li>
</ul>
<NavLink
v-else
@focusout="isLastItemOfArray(subItem, item.items) && setOpen(false)"
:item="subItem"
@focusout="isLastItemOfArray(subItem, item.items) && setOpen(false)"
/>
</li>
</ul>
@@ -64,12 +67,11 @@ import DropdownTransition from '@theme/components/DropdownTransition.vue'
import last from 'lodash/last'
export default {
components: { NavLink, DropdownTransition },
name: 'DropdownLink',
data () {
return {
open: false
}
components: {
NavLink,
DropdownTransition
},
props: {
@@ -78,13 +80,24 @@ export default {
}
},
computed: {
data () {
return {
open: false
}
},
computed: {
dropdownAriaLabel () {
return this.item.ariaLabel || this.item.text
}
},
watch: {
$route () {
this.open = false
}
},
methods: {
setOpen (value) {
this.open = value
@@ -93,12 +106,6 @@ export default {
isLastItemOfArray (item, array) {
return last(array) === item
}
},
watch: {
$route () {
this.open = false
}
}
}
</script>
@@ -5,7 +5,7 @@
@after-enter="unsetHeight"
@before-leave="setHeight"
>
<slot/>
<slot />
</transition>
</template>
@@ -1,5 +1,8 @@
<template>
<main class="home" aria-labelledby="main-title">
<main
class="home"
aria-labelledby="main-title"
>
<header class="hero">
<img
v-if="data.heroImage"
@@ -7,15 +10,23 @@
:alt="data.heroAlt || 'hero'"
>
<h1 v-if="data.heroText !== null" id="main-title">{{ data.heroText || $title || 'Hello' }}</h1>
<h1
v-if="data.heroText !== null"
id="main-title"
>
{{ data.heroText || $title || 'Hello' }}
</h1>
<p v-if="data.tagline !== null" class="description">
<p
v-if="data.tagline !== null"
class="description"
>
{{ data.tagline || $description || 'Welcome to your VuePress site' }}
</p>
<p
class="action"
v-if="data.actionText && data.actionLink"
class="action"
>
<NavLink
class="action-button"
@@ -25,24 +36,24 @@
</header>
<div
class="features"
v-if="data.features && data.features.length"
class="features"
>
<div
class="feature"
v-for="(feature, index) in data.features"
:key="index"
class="feature"
>
<h2>{{ feature.title }}</h2>
<p>{{ feature.details }}</p>
</div>
</div>
<Content class="theme-default-content custom"/>
<Content class="theme-default-content custom" />
<div
class="footer"
v-if="data.footer"
class="footer"
>
{{ data.footer }}
</div>
@@ -53,6 +64,8 @@
import NavLink from '@theme/components/NavLink.vue'
export default {
name: 'Home',
components: { NavLink },
computed: {
@@ -1,21 +1,23 @@
<template>
<router-link
<RouterLink
v-if="isInternal"
class="nav-link"
:to="link"
@focusout.native="focusoutAction"
v-if="isInternal"
:exact="exact"
>{{ item.text }}</router-link>
@focusout.native="focusoutAction"
>
{{ item.text }}
</RouterLink>
<a
v-else
:href="link"
@focusout="focusoutAction"
class="nav-link external"
:target="target"
:rel="rel"
@focusout="focusoutAction"
>
{{ item.text }}
<OutboundLink v-if="isBlankTarget"/>
<OutboundLink v-if="isBlankTarget" />
</a>
</template>
@@ -23,6 +25,8 @@
import { isExternal, isMailto, isTel, ensureExt } from '../util'
export default {
name: 'NavLink',
props: {
item: {
required: true
@@ -1,13 +1,13 @@
<template>
<nav
class="nav-links"
v-if="userLinks.length || repoLink"
class="nav-links"
>
<!-- user links -->
<div
class="nav-item"
v-for="item in userLinks"
:key="item.link"
class="nav-item"
>
<DropdownLink
v-if="item.type === 'links'"
@@ -28,7 +28,7 @@
rel="noopener noreferrer"
>
{{ repoLabel }}
<OutboundLink/>
<OutboundLink />
</a>
</nav>
</template>
@@ -39,7 +39,12 @@ import { resolveNavLinkItem } from '../util'
import NavLink from '@theme/components/NavLink.vue'
export default {
components: { NavLink, DropdownLink },
name: 'NavLinks',
components: {
NavLink,
DropdownLink
},
computed: {
userNav () {
@@ -1,24 +1,24 @@
<template>
<header class="navbar">
<SidebarButton @toggle-sidebar="$emit('toggle-sidebar')"/>
<SidebarButton @toggle-sidebar="$emit('toggle-sidebar')" />
<router-link
<RouterLink
:to="$localePath"
class="home-link"
>
<img
class="logo"
v-if="$site.themeConfig.logo"
class="logo"
:src="$withBase($site.themeConfig.logo)"
:alt="$siteTitle"
>
<span
v-if="$siteTitle"
ref="siteName"
class="site-name"
v-if="$siteTitle"
:class="{ 'can-hide': $site.themeConfig.logo }"
>{{ $siteTitle }}</span>
</router-link>
</RouterLink>
<div
class="links"
@@ -30,8 +30,8 @@
v-if="isAlgoliaSearch"
:options="algolia"
/>
<SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"/>
<NavLinks class="can-hide"/>
<SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
<NavLinks class="can-hide" />
</div>
</header>
</template>
@@ -43,7 +43,14 @@ import SidebarButton from '@theme/components/SidebarButton.vue'
import NavLinks from '@theme/components/NavLinks.vue'
export default {
components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox },
name: 'Navbar',
components: {
SidebarButton,
NavLinks,
SearchBox,
AlgoliaSearchBox
},
data () {
return {
@@ -51,6 +58,16 @@ export default {
}
},
computed: {
algolia () {
return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
},
isAlgoliaSearch () {
return this.algolia && this.algolia.apiKey && this.algolia.indexName
}
},
mounted () {
const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, 'paddingLeft')) + parseInt(css(this.$el, 'paddingRight'))
@@ -64,16 +81,6 @@ export default {
}
handleLinksWrapWidth()
window.addEventListener('resize', handleLinksWrapWidth, false)
},
computed: {
algolia () {
return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
},
isAlgoliaSearch () {
return this.algolia && this.algolia.apiKey && this.algolia.indexName
}
}
}
@@ -1,22 +1,34 @@
<template>
<footer class="page-edit">
<div class="edit-link" v-if="editLink">
<a :href="editLink" target="_blank" rel="noopener noreferrer">{{ editLinkText }}</a>
<div
v-if="editLink"
class="edit-link"
>
<a
:href="editLink"
target="_blank"
rel="noopener noreferrer"
>{{ editLinkText }}</a>
<OutboundLink />
</div>
<div class="last-updated" v-if="lastUpdated">
<div
v-if="lastUpdated"
class="last-updated"
>
<span class="prefix">{{ lastUpdatedText }}:</span>
<span class="time">{{ lastUpdated }}</span>
</div>
</footer>
</template>
<script>
import isNil from 'lodash/isNil'
import { endingSlashRE, outboundRE } from '../util'
export default {
name: 'PageEdit',
computed: {
lastUpdated () {
return this.$page.lastUpdated
@@ -94,6 +106,7 @@ export default {
}
}
</script>
<style lang="stylus">
@require '../styles/wrapper.styl'
@@ -1,20 +1,62 @@
<template>
<div class="page-nav" v-if="prev || next">
<div
v-if="prev || next"
class="page-nav"
>
<p class="inner">
<span v-if="prev" class="prev">
<span
v-if="prev"
class="prev"
>
<a v-if="prev.type === 'external'" class="prev" :href="prev.path" target="_blank" rel='noopener noreferrer'>{{ prev.title || prev.path }}<OutboundLink /></a>
<router-link v-else class="prev" :to="prev.path">{{ prev.title || prev.path }}</router-link>
<a
v-if="prev.type === 'external'"
class="prev"
:href="prev.path"
target="_blank"
rel="noopener noreferrer"
>
{{ prev.title || prev.path }}
<OutboundLink />
</a>
<RouterLink
v-else
class="prev"
:to="prev.path"
>
{{ prev.title || prev.path }}
</RouterLink>
</span>
<span v-if="next" class="next">
<a v-if="next.type === 'external'" :href="next.path" target="_blank" rel='noopener noreferrer'>{{ next.title || next.path }}<OutboundLink /></a>
<router-link v-else :to="next.path">{{ next.title || next.path }}</router-link>
<span
v-if="next"
class="next"
>
<a
v-if="next.type === 'external'"
:href="next.path"
target="_blank"
rel="noopener noreferrer"
>
{{ next.title || next.path }}
<OutboundLink />
</a>
<RouterLink
v-else
:to="next.path"
>
{{ next.title || next.path }}
</RouterLink>
</span>
</p>
</div>
</template>
<script>
import { resolvePage } from '../util'
import isString from 'lodash/isString'
@@ -22,7 +64,9 @@ import isNil from 'lodash/isNil'
export default {
name: 'PageNav',
props: ['sidebarItems'],
computed: {
prev () {
return resolvePageLink(LINK_TYPES.PREV, this)
@@ -116,5 +160,4 @@ function flatten (items, res) {
overflow auto // clear float
.next
float right
</style>
@@ -1,9 +1,14 @@
<template>
<aside class="sidebar">
<NavLinks/>
<slot name="top"/>
<SidebarLinks :depth="0" :items="items"/>
<slot name="bottom"/>
<NavLinks />
<slot name="top" />
<SidebarLinks
:depth="0"
:items="items"
/>
<slot name="bottom" />
</aside>
</template>
@@ -1,7 +1,20 @@
<template>
<div class="sidebar-button" @click="$emit('toggle-sidebar')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512">
<path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class=""></path>
<div
class="sidebar-button"
@click="$emit('toggle-sidebar')"
>
<svg
class="icon"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
role="img"
viewBox="0 0 448 512"
>
<path
fill="currentColor"
d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"
class=""
/>
</svg>
</div>
</template>
@@ -9,7 +9,7 @@
`depth-${depth}`
]"
>
<router-link
<RouterLink
v-if="item.path"
class="sidebar-heading clickable"
:class="{
@@ -21,11 +21,11 @@
>
<span>{{ item.title }}</span>
<span
class="arrow"
v-if="collapsable"
:class="open ? 'down' : 'right'">
</span>
</router-link>
class="arrow"
:class="open ? 'down' : 'right'"
/>
</RouterLink>
<p
v-else
@@ -35,18 +35,18 @@
>
<span>{{ item.title }}</span>
<span
class="arrow"
v-if="collapsable"
:class="open ? 'down' : 'right'">
</span>
class="arrow"
:class="open ? 'down' : 'right'"
/>
</p>
<DropdownTransition>
<SidebarLinks
v-if="open || !collapsable"
class="sidebar-group-items"
:items="item.children"
v-if="open || !collapsable"
:sidebarDepth="item.sidebarDepth"
:sidebar-depth="item.sidebarDepth"
:depth="depth + 1"
/>
</DropdownTransition>
@@ -59,12 +59,23 @@ import DropdownTransition from '@theme/components/DropdownTransition.vue'
export default {
name: 'SidebarGroup',
props: ['item', 'open', 'collapsable', 'depth'],
components: { DropdownTransition },
components: {
DropdownTransition
},
props: [
'item',
'open',
'collapsable',
'depth'
],
// ref: https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
beforeCreate () {
this.$options.components.SidebarLinks = require('@theme/components/SidebarLinks.vue').default
},
methods: { isActive }
}
</script>
@@ -73,7 +73,7 @@ function renderLink (h, to, text, active, level) {
}
}
return h('router-link', component, text)
return h('RouterLink', component, text)
}
function renderChildren (h, children, path, route, maxDepth, depth = 1) {
@@ -1,9 +1,12 @@
<template>
<ul
class="sidebar-links"
v-if="items.length"
class="sidebar-links"
>
<li v-for="(item, i) in items" :key="i">
<li
v-for="(item, i) in items"
:key="i"
>
<SidebarGroup
v-if="item.type === 'group'"
:item="item"
@@ -14,7 +17,7 @@
/>
<SidebarLink
v-else
:sidebarDepth="sidebarDepth"
:sidebar-depth="sidebarDepth"
:item="item"
/>
</li>
@@ -43,16 +46,16 @@ export default {
}
},
created () {
this.refreshIndex()
},
watch: {
'$route' () {
this.refreshIndex()
}
},
created () {
this.refreshIndex()
},
methods: {
refreshIndex () {
const index = resolveOpenGroupIndex(
@@ -2,8 +2,12 @@
<div class="theme-container">
<div class="theme-default-content">
<h1>404</h1>
<blockquote>{{ getMsg() }}</blockquote>
<router-link to="/">Take me home.</router-link>
<RouterLink to="/">
Take me home.
</RouterLink>
</div>
</div>
</template>
@@ -13,7 +13,7 @@
<div
class="sidebar-mask"
@click="toggleSidebar(false)"
></div>
/>
<Sidebar
:items="sidebarItems"
@@ -23,21 +23,21 @@
<slot name="sidebar-top" />
</template>
<template #bottom>
<slot name="sidebar-bottom"/>
<slot name="sidebar-bottom" />
</template>
</Sidebar>
<Home v-if="$page.frontmatter.home"/>
<Home v-if="$page.frontmatter.home" />
<Page
v-else
:sidebar-items="sidebarItems"
>
<template #top>
<slot name="page-top"/>
<slot name="page-top" />
</template>
<template #bottom>
<slot name="page-bottom"/>
<slot name="page-bottom" />
</template>
</Page>
</div>
@@ -51,7 +51,14 @@ import Sidebar from '@theme/components/Sidebar.vue'
import { resolveSidebarItems } from '../util'
export default {
components: { Home, Page, Sidebar, Navbar },
name: 'Layout',
components: {
Home,
Page,
Sidebar,
Navbar
},
data () {
return {
@@ -3,11 +3,17 @@
const ID = 'bsa-cpc-script'
export default {
render (h) {
return h('div', { class: 'bsa-cpc-wrapper' }, [
h('div', { ref: 'ads', class: 'bsa-cpc' })
])
name: 'BuySellAds',
watch: {
'$route' (to, from) {
if (to.path !== from.path) {
this.$refs.ads.innerHTML = ''
this.load()
}
}
},
mounted () {
if (!document.getElementById(ID)) {
const s = document.createElement('script')
@@ -21,14 +27,7 @@ export default {
this.load()
}
},
watch: {
'$route' (to, from) {
if (to.path !== from.path) {
this.$refs.ads.innerHTML = ''
this.load()
}
}
},
methods: {
load () {
if (typeof _bsa !== 'undefined' && _bsa) {
@@ -39,6 +38,12 @@ export default {
})
}
}
},
render (h) {
return h('div', { class: 'bsa-cpc-wrapper' }, [
h('div', { ref: 'ads', class: 'bsa-cpc' })
])
}
}
</script>
@@ -1,11 +1,7 @@
<script>
export default {
render (h) {
return h('div', { class: 'carbon-ads' })
},
mounted () {
this.load()
},
name: 'CarbonAds',
watch: {
'$route' (to, from) {
if (
@@ -20,6 +16,11 @@ export default {
}
}
},
mounted () {
this.load()
},
methods: {
load () {
const s = document.createElement('script')
@@ -27,6 +28,10 @@ export default {
s.src = `//cdn.carbonads.com/carbon.js?serve=CKYIK2QU&placement=vuejsorg`
this.$el.appendChild(s)
}
},
render (h) {
return h('div', { class: 'carbon-ads' })
}
}
</script>
@@ -1,10 +1,10 @@
<template>
<ParentLayout>
<template #sidebar-top>
<CarbonAds/>
<CarbonAds />
</template>
<template #page-bottom>
<BuySellAds/>
<BuySellAds />
</template>
</ParentLayout>
</template>
@@ -15,6 +15,8 @@ import CarbonAds from '@theme/components/CarbonAds.vue'
import BuySellAds from '@theme/components/BuySellAds.vue'
export default {
name: 'Layout',
components: {
ParentLayout,
CarbonAds,
@@ -1,8 +1,14 @@
<template>
<p class="bit-sponsor">
<a href="https://www.bitsrc.io/?utm_source=vue&utm_medium=vue&utm_campaign=vue&utm_term=vue&utm_content=vue" target="_blank">
<a
href="https://www.bitsrc.io/?utm_source=vue&utm_medium=vue&utm_campaign=vue&utm_term=vue&utm_content=vue"
target="_blank"
>
<span>This project is sponsored by</span>
<img alt="bit" src="https://raw.githubusercontent.com/vuejs/vuejs.org/master/themes/vue/source/images/bit.png">
<img
alt="bit"
src="https://raw.githubusercontent.com/vuejs/vuejs.org/master/themes/vue/source/images/bit.png"
>
</a>
</p>
</template>
@@ -1,3 +1,5 @@
<template>
<p class="demo">This is another component</p>
<p class="demo">
This is another component
</p>
</template>
@@ -1,45 +1,202 @@
<template>
<svg-container>
<svg width="400px" viewBox="0 0 688 403" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg
width="400px"
viewBox="0 0 688 403"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<defs>
<rect id="path-1" x="140" y="0" width="549" height="176" rx="20"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="549" height="176" fill="white">
<use xlink:href="#path-1"></use>
<rect
id="path-1"
x="140"
y="0"
width="549"
height="176"
rx="20"
/>
<mask
id="mask-2"
maskContentUnits="userSpaceOnUse"
maskUnits="objectBoundingBox"
x="0"
y="0"
width="549"
height="176"
fill="white"
>
<use xlink:href="#path-1" />
</mask>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="diagram-markdown-slot-relationship" transform="translate(-1.000000, 0.000000)">
<circle id="Oval" fill="#00BC7D" fill-rule="nonzero" cx="235" cy="88" r="59"></circle>
<text id="Markdown-File-1" font-family="PingFangSC-Regular, PingFang SC" font-size="20" font-weight="normal" fill="#FFFFFF">
<tspan x="186.79" y="85">Markdown </tspan>
<tspan x="211.43" y="113">File 1</tspan>
<g
id="Page-1"
stroke="none"
stroke-width="1"
fill="none"
fill-rule="evenodd"
>
<g
id="diagram-markdown-slot-relationship"
transform="translate(-1.000000, 0.000000)"
>
<circle
id="Oval"
fill="#00BC7D"
fill-rule="nonzero"
cx="235"
cy="88"
r="59"
/>
<text
id="Markdown-File-1"
font-family="PingFangSC-Regular, PingFang SC"
font-size="20"
font-weight="normal"
fill="#FFFFFF"
>
<tspan
x="186.79"
y="85"
>Markdown </tspan>
<tspan
x="211.43"
y="113"
>File 1</tspan>
</text>
<circle id="Oval" fill="#00BC7D" fill-rule="nonzero" cx="415" cy="88" r="59"></circle>
<text id="Markdown-File-2" font-family="PingFangSC-Regular, PingFang SC" font-size="20" font-weight="normal" fill="#FFFFFF">
<tspan x="366.79" y="85">Markdown </tspan>
<tspan x="389.44" y="113">File 2</tspan>
<circle
id="Oval"
fill="#00BC7D"
fill-rule="nonzero"
cx="415"
cy="88"
r="59"
/>
<text
id="Markdown-File-2"
font-family="PingFangSC-Regular, PingFang SC"
font-size="20"
font-weight="normal"
fill="#FFFFFF"
>
<tspan
x="366.79"
y="85"
>Markdown </tspan>
<tspan
x="389.44"
y="113"
>File 2</tspan>
</text>
<circle id="Oval" fill="#EB4D5D" fill-rule="nonzero" transform="translate(419.000000, 320.000000) rotate(-360.000000) translate(-419.000000, -320.000000) " cx="419" cy="320" r="83"></circle>
<text id="Layout-Component" transform="translate(419.000000, 320.000000) rotate(-360.000000) translate(-419.000000, -320.000000) " font-family="PingFangSC-Regular, PingFang SC" font-size="24" font-weight="normal" fill="#FFFFFF">
<tspan x="381.272" y="312">Layout</tspan>
<tspan x="354.572" y="345">Component</tspan>
<circle
id="Oval"
fill="#EB4D5D"
fill-rule="nonzero"
transform="translate(419.000000, 320.000000) rotate(-360.000000) translate(-419.000000, -320.000000) "
cx="419"
cy="320"
r="83"
/>
<text
id="Layout-Component"
transform="translate(419.000000, 320.000000) rotate(-360.000000) translate(-419.000000, -320.000000) "
font-family="PingFangSC-Regular, PingFang SC"
font-size="24"
font-weight="normal"
fill="#FFFFFF"
>
<tspan
x="381.272"
y="312"
>Layout</tspan>
<tspan
x="354.572"
y="345"
>Component</tspan>
</text>
<circle id="Oval" fill="#00BC7D" fill-rule="nonzero" cx="595" cy="88" r="59"></circle>
<text id="Markdown-File-3" font-family="PingFangSC-Regular, PingFang SC" font-size="20" font-weight="normal" fill="#FFFFFF">
<tspan x="546.79" y="85">Markdown </tspan>
<tspan x="569.44" y="113">File 3</tspan>
<circle
id="Oval"
fill="#00BC7D"
fill-rule="nonzero"
cx="595"
cy="88"
r="59"
/>
<text
id="Markdown-File-3"
font-family="PingFangSC-Regular, PingFang SC"
font-size="20"
font-weight="normal"
fill="#FFFFFF"
>
<tspan
x="546.79"
y="85"
>Markdown </tspan>
<tspan
x="569.44"
y="113"
>File 3</tspan>
</text>
<use id="Rectangle" stroke="#DC585F" mask="url(#mask-2)" stroke-width="8" stroke-dasharray="5" fill-rule="nonzero" xlink:href="#path-1"></use>
<path id="Path" d="M317.737594,275.914863 C316.399837,275.439513 315.071319,274.934993 313.752054,274.40131 L314.877079,271.620246 C316.062011,272.099587 317.254567,272.554642 318.454758,272.985416 L320.320183,265.365584 L336.516196,279.111098 L315.802177,283.8206 L317.737594,275.914863 Z M237.053972,153.839171 L240.036678,154.160829 C239.860222,155.797097 239.727284,157.431576 239.637858,159.064293 L236.642347,158.900223 C236.734662,157.214791 236.871873,155.527765 237.053972,153.839171 Z M236.500062,163.984683 L239.50006,163.988115 C239.498183,165.6288 239.540423,167.267783 239.626781,168.905092 L236.630945,169.063103 C236.541751,167.372018 236.498123,165.679201 236.500062,163.984683 Z M237.034923,174.12831 L240.017951,173.809652 C240.191774,175.436839 240.409353,177.062453 240.670697,178.686519 L237.708802,179.163147 C237.439026,177.486687 237.214397,175.808399 237.034923,174.12831 Z M238.651506,184.177472 L241.584397,183.54648 C241.927872,185.142975 242.313817,186.738038 242.742248,188.33169 L239.845114,189.110544 C239.40355,187.46804 239.005676,185.823676 238.651506,184.177472 Z M241.277699,193.960604 L244.133333,193.041173 C244.633282,194.593949 245.173728,196.145426 245.754688,197.695614 L242.945486,198.748412 C242.348064,197.154297 241.792129,195.558357 241.277699,193.960604 Z M244.837653,203.467846 L247.596505,202.289399 C248.237243,203.789426 248.91606,205.288264 249.632972,206.785917 L246.927022,208.081229 C246.191725,206.545169 245.495264,205.007373 244.837653,203.467846 Z M249.214331,212.61803 L251.865379,211.213771 C252.629062,212.6555 253.428173,214.096132 254.262722,215.535667 L251.667331,217.040308 C250.813682,215.567829 249.996012,214.093736 249.214331,212.61803 Z M254.297283,221.391099 L256.836394,219.793315 C257.706019,221.175275 258.60841,222.556214 259.543577,223.936131 L257.060143,225.61915 C256.106032,224.21128 255.185076,222.801931 254.297283,221.391099 Z M259.974465,229.772936 L262.402649,228.01114 C263.362565,229.334138 264.3527,230.656183 265.373059,231.977271 L262.998786,233.811072 C261.960192,232.466375 260.952083,231.120331 259.974465,229.772936 Z M266.091044,237.698109 L268.411267,235.796382 C269.468483,237.08625 270.534696,238.346975 271.6099,239.578562 L269.349958,241.551545 C268.25419,240.296403 267.167887,239.011923 266.091044,237.698109 Z M272.734865,245.303177 L274.928459,243.25668 C276.064358,244.474225 277.209951,245.660334 278.365233,246.815016 L276.244465,248.936888 C275.064352,247.757389 273.894487,246.546149 272.734865,245.303177 Z M279.887015,252.446537 L281.927895,250.247718 C283.145938,251.378269 284.374389,252.475061 285.613248,253.538106 L283.65964,255.814817 C282.391056,254.726266 281.133515,253.603502 279.887015,252.446537 Z M287.576785,259.039625 L289.435074,256.684468 C290.736664,257.711462 292.049366,258.702468 293.373181,259.657502 L291.617984,262.09046 C290.259116,261.110138 288.912049,260.093188 287.576785,259.039625 Z M295.785278,264.957777 L297.4295,262.448487 C298.812943,263.354993 300.208145,264.223547 301.615114,265.054165 L300.089978,267.637566 C298.64262,266.783104 297.207718,265.889835 295.785278,264.957777 Z M304.529995,270.116457 L305.928241,267.462232 C307.386943,268.230677 308.857919,268.959729 310.341185,269.649406 L309.076317,272.36972 C307.547965,271.659079 306.032519,270.907986 304.529995,270.116457 Z" fill="#8599A4" fill-rule="nonzero"></path>
<path id="Path" d="M505.524249,279.462157 L520.680172,264.577668 L526.525394,282.656202 L505.524249,279.462157 Z M607.459883,153.645338 L610.450216,153.404698 C610.586546,155.098816 610.691833,156.77921 610.766069,158.445876 L607.76904,158.579368 C607.696405,156.948625 607.593356,155.303949 607.459883,153.645338 Z M607.896371,163.523725 L610.896305,163.503827 C610.907594,165.205698 610.885378,166.892755 610.829647,168.56499 L607.831312,168.465065 C607.885706,166.832931 607.907396,165.18582 607.896371,163.523725 Z M607.562992,173.41012 L610.554458,173.636245 C610.42622,175.332733 610.262196,177.013376 610.062375,178.678161 L607.083754,178.320643 C607.278311,176.69972 607.43806,175.062883 607.562992,173.41012 Z M606.384557,183.20243 L609.343631,183.696275 C609.063719,185.373481 608.746022,187.033908 608.390534,188.677536 L605.458331,188.043351 C605.803721,186.446416 606.112465,184.832782 606.384557,183.20243 Z M604.291922,192.859811 L607.189213,193.63808 C606.748727,195.277893 606.269015,196.900206 605.750076,198.504997 L602.895608,197.581952 C603.399033,196.025135 603.864471,194.451096 604.291922,192.859811 Z M601.271525,202.20035 L604.075335,203.267423 C603.472603,204.851146 602.829959,206.41696 602.147412,207.96484 L599.402435,206.754426 C600.064131,205.253832 600.687158,203.735815 601.271525,202.20035 Z M597.290807,211.224832 L599.969243,212.576121 C599.208118,214.084773 598.407288,215.575496 597.566769,217.048269 L594.961228,215.561273 C595.776314,214.133064 596.552836,212.687591 597.290807,211.224832 Z M592.397896,219.797817 L594.924421,221.41543 C594.015938,222.834374 593.068787,224.235757 592.082984,225.619564 L589.639589,223.878927 C590.596732,222.53535 591.516161,221.174984 592.397896,219.797817 Z M586.660862,227.851867 L589.017105,229.708777 C587.977352,231.028126 586.900649,232.33062 585.787016,233.616254 L583.51944,231.652049 C584.602788,230.401378 585.649923,229.134653 586.660862,227.851867 Z M580.265616,235.264939 L582.455796,237.315088 C581.30524,238.54423 580.129172,239.752667 578.927599,240.940392 L576.818608,238.806814 C577.992605,237.646347 579.141605,236.465724 580.265616,235.264939 Z M573.232259,242.218017 L575.257873,244.430909 C574.018262,245.565611 572.753689,246.680004 571.464163,247.774085 L569.523296,245.486502 C570.784152,244.416746 572.02047,243.327252 573.232259,242.218017 Z M565.69619,248.613677 L567.551459,250.971213 C566.232998,252.008779 564.890366,253.026639 563.523572,254.024792 L561.754283,251.602063 C563.092093,250.625076 564.406059,249.628948 565.69619,248.613677 Z M557.696251,254.45734 L559.379522,256.940603 C557.993427,257.880163 556.584154,258.800801 555.151714,259.702516 L553.553517,257.163665 C554.957366,256.279948 556.338275,255.377839 557.696251,254.45734 Z M549.296271,259.746128 L550.810006,262.336225 C549.366211,263.180025 547.900334,264.005779 546.412381,264.81349 L544.981154,262.176903 C546.441447,261.384207 547.879818,260.573948 549.296271,259.746128 Z M540.616615,264.460914 L541.967561,267.139522 C540.476204,267.891683 538.963914,268.626729 537.430695,269.344665 L536.158499,266.62777 C537.665372,265.922171 539.15141,265.199884 540.616615,264.460914 Z M531.631899,268.669952 L532.82743,271.421444 C531.297326,272.086278 529.747462,272.734956 528.17784,273.367482 L527.056524,270.58492 C528.601359,269.962383 530.126483,269.324059 531.631899,268.669952 Z" fill="#8599A4" fill-rule="nonzero"></path>
<path id="Line" d="M415,229 L405.5,210 L424.5,210 L415,229 Z M413.5,154 L416.5,154 L416.5,159 L413.5,159 L413.5,154 Z M413.5,164 L416.5,164 L416.5,169 L413.5,169 L413.5,164 Z M413.5,174 L416.5,174 L416.5,179 L413.5,179 L413.5,174 Z M413.5,184 L416.5,184 L416.5,189 L413.5,189 L413.5,184 Z M413.5,194 L416.5,194 L416.5,199 L413.5,199 L413.5,194 Z M413.5,204 L416.5,204 L416.5,209 L413.5,209 L413.5,204 Z" fill="#8599A4" fill-rule="nonzero"></path>
<text id="Provider" fill="#8599A4" font-family="Arial-Black, Arial Black" font-size="25" font-weight="700">
<tspan x="0.06640625" y="28">Provider</tspan>
<use
id="Rectangle"
stroke="#DC585F"
mask="url(#mask-2)"
stroke-width="8"
stroke-dasharray="5"
fill-rule="nonzero"
xlink:href="#path-1"
/>
<path
id="Path"
d="M317.737594,275.914863 C316.399837,275.439513 315.071319,274.934993 313.752054,274.40131 L314.877079,271.620246 C316.062011,272.099587 317.254567,272.554642 318.454758,272.985416 L320.320183,265.365584 L336.516196,279.111098 L315.802177,283.8206 L317.737594,275.914863 Z M237.053972,153.839171 L240.036678,154.160829 C239.860222,155.797097 239.727284,157.431576 239.637858,159.064293 L236.642347,158.900223 C236.734662,157.214791 236.871873,155.527765 237.053972,153.839171 Z M236.500062,163.984683 L239.50006,163.988115 C239.498183,165.6288 239.540423,167.267783 239.626781,168.905092 L236.630945,169.063103 C236.541751,167.372018 236.498123,165.679201 236.500062,163.984683 Z M237.034923,174.12831 L240.017951,173.809652 C240.191774,175.436839 240.409353,177.062453 240.670697,178.686519 L237.708802,179.163147 C237.439026,177.486687 237.214397,175.808399 237.034923,174.12831 Z M238.651506,184.177472 L241.584397,183.54648 C241.927872,185.142975 242.313817,186.738038 242.742248,188.33169 L239.845114,189.110544 C239.40355,187.46804 239.005676,185.823676 238.651506,184.177472 Z M241.277699,193.960604 L244.133333,193.041173 C244.633282,194.593949 245.173728,196.145426 245.754688,197.695614 L242.945486,198.748412 C242.348064,197.154297 241.792129,195.558357 241.277699,193.960604 Z M244.837653,203.467846 L247.596505,202.289399 C248.237243,203.789426 248.91606,205.288264 249.632972,206.785917 L246.927022,208.081229 C246.191725,206.545169 245.495264,205.007373 244.837653,203.467846 Z M249.214331,212.61803 L251.865379,211.213771 C252.629062,212.6555 253.428173,214.096132 254.262722,215.535667 L251.667331,217.040308 C250.813682,215.567829 249.996012,214.093736 249.214331,212.61803 Z M254.297283,221.391099 L256.836394,219.793315 C257.706019,221.175275 258.60841,222.556214 259.543577,223.936131 L257.060143,225.61915 C256.106032,224.21128 255.185076,222.801931 254.297283,221.391099 Z M259.974465,229.772936 L262.402649,228.01114 C263.362565,229.334138 264.3527,230.656183 265.373059,231.977271 L262.998786,233.811072 C261.960192,232.466375 260.952083,231.120331 259.974465,229.772936 Z M266.091044,237.698109 L268.411267,235.796382 C269.468483,237.08625 270.534696,238.346975 271.6099,239.578562 L269.349958,241.551545 C268.25419,240.296403 267.167887,239.011923 266.091044,237.698109 Z M272.734865,245.303177 L274.928459,243.25668 C276.064358,244.474225 277.209951,245.660334 278.365233,246.815016 L276.244465,248.936888 C275.064352,247.757389 273.894487,246.546149 272.734865,245.303177 Z M279.887015,252.446537 L281.927895,250.247718 C283.145938,251.378269 284.374389,252.475061 285.613248,253.538106 L283.65964,255.814817 C282.391056,254.726266 281.133515,253.603502 279.887015,252.446537 Z M287.576785,259.039625 L289.435074,256.684468 C290.736664,257.711462 292.049366,258.702468 293.373181,259.657502 L291.617984,262.09046 C290.259116,261.110138 288.912049,260.093188 287.576785,259.039625 Z M295.785278,264.957777 L297.4295,262.448487 C298.812943,263.354993 300.208145,264.223547 301.615114,265.054165 L300.089978,267.637566 C298.64262,266.783104 297.207718,265.889835 295.785278,264.957777 Z M304.529995,270.116457 L305.928241,267.462232 C307.386943,268.230677 308.857919,268.959729 310.341185,269.649406 L309.076317,272.36972 C307.547965,271.659079 306.032519,270.907986 304.529995,270.116457 Z"
fill="#8599A4"
fill-rule="nonzero"
/>
<path
id="Path"
d="M505.524249,279.462157 L520.680172,264.577668 L526.525394,282.656202 L505.524249,279.462157 Z M607.459883,153.645338 L610.450216,153.404698 C610.586546,155.098816 610.691833,156.77921 610.766069,158.445876 L607.76904,158.579368 C607.696405,156.948625 607.593356,155.303949 607.459883,153.645338 Z M607.896371,163.523725 L610.896305,163.503827 C610.907594,165.205698 610.885378,166.892755 610.829647,168.56499 L607.831312,168.465065 C607.885706,166.832931 607.907396,165.18582 607.896371,163.523725 Z M607.562992,173.41012 L610.554458,173.636245 C610.42622,175.332733 610.262196,177.013376 610.062375,178.678161 L607.083754,178.320643 C607.278311,176.69972 607.43806,175.062883 607.562992,173.41012 Z M606.384557,183.20243 L609.343631,183.696275 C609.063719,185.373481 608.746022,187.033908 608.390534,188.677536 L605.458331,188.043351 C605.803721,186.446416 606.112465,184.832782 606.384557,183.20243 Z M604.291922,192.859811 L607.189213,193.63808 C606.748727,195.277893 606.269015,196.900206 605.750076,198.504997 L602.895608,197.581952 C603.399033,196.025135 603.864471,194.451096 604.291922,192.859811 Z M601.271525,202.20035 L604.075335,203.267423 C603.472603,204.851146 602.829959,206.41696 602.147412,207.96484 L599.402435,206.754426 C600.064131,205.253832 600.687158,203.735815 601.271525,202.20035 Z M597.290807,211.224832 L599.969243,212.576121 C599.208118,214.084773 598.407288,215.575496 597.566769,217.048269 L594.961228,215.561273 C595.776314,214.133064 596.552836,212.687591 597.290807,211.224832 Z M592.397896,219.797817 L594.924421,221.41543 C594.015938,222.834374 593.068787,224.235757 592.082984,225.619564 L589.639589,223.878927 C590.596732,222.53535 591.516161,221.174984 592.397896,219.797817 Z M586.660862,227.851867 L589.017105,229.708777 C587.977352,231.028126 586.900649,232.33062 585.787016,233.616254 L583.51944,231.652049 C584.602788,230.401378 585.649923,229.134653 586.660862,227.851867 Z M580.265616,235.264939 L582.455796,237.315088 C581.30524,238.54423 580.129172,239.752667 578.927599,240.940392 L576.818608,238.806814 C577.992605,237.646347 579.141605,236.465724 580.265616,235.264939 Z M573.232259,242.218017 L575.257873,244.430909 C574.018262,245.565611 572.753689,246.680004 571.464163,247.774085 L569.523296,245.486502 C570.784152,244.416746 572.02047,243.327252 573.232259,242.218017 Z M565.69619,248.613677 L567.551459,250.971213 C566.232998,252.008779 564.890366,253.026639 563.523572,254.024792 L561.754283,251.602063 C563.092093,250.625076 564.406059,249.628948 565.69619,248.613677 Z M557.696251,254.45734 L559.379522,256.940603 C557.993427,257.880163 556.584154,258.800801 555.151714,259.702516 L553.553517,257.163665 C554.957366,256.279948 556.338275,255.377839 557.696251,254.45734 Z M549.296271,259.746128 L550.810006,262.336225 C549.366211,263.180025 547.900334,264.005779 546.412381,264.81349 L544.981154,262.176903 C546.441447,261.384207 547.879818,260.573948 549.296271,259.746128 Z M540.616615,264.460914 L541.967561,267.139522 C540.476204,267.891683 538.963914,268.626729 537.430695,269.344665 L536.158499,266.62777 C537.665372,265.922171 539.15141,265.199884 540.616615,264.460914 Z M531.631899,268.669952 L532.82743,271.421444 C531.297326,272.086278 529.747462,272.734956 528.17784,273.367482 L527.056524,270.58492 C528.601359,269.962383 530.126483,269.324059 531.631899,268.669952 Z"
fill="#8599A4"
fill-rule="nonzero"
/>
<path
id="Line"
d="M415,229 L405.5,210 L424.5,210 L415,229 Z M413.5,154 L416.5,154 L416.5,159 L413.5,159 L413.5,154 Z M413.5,164 L416.5,164 L416.5,169 L413.5,169 L413.5,164 Z M413.5,174 L416.5,174 L416.5,179 L413.5,179 L413.5,174 Z M413.5,184 L416.5,184 L416.5,189 L413.5,189 L413.5,184 Z M413.5,194 L416.5,194 L416.5,199 L413.5,199 L413.5,194 Z M413.5,204 L416.5,204 L416.5,209 L413.5,209 L413.5,204 Z"
fill="#8599A4"
fill-rule="nonzero"
/>
<text
id="Provider"
fill="#8599A4"
font-family="Arial-Black, Arial Black"
font-size="25"
font-weight="700"
>
<tspan
x="0.06640625"
y="28"
>Provider</tspan>
</text>
<text id="Consumer" fill="#8599A4" font-family="Arial-Black, Arial Black" font-size="25" font-weight="700">
<tspan x="0.243896484" y="327">Consumer</tspan>
<text
id="Consumer"
fill="#8599A4"
font-family="Arial-Black, Arial Black"
font-size="25"
font-weight="700"
>
<tspan
x="0.243896484"
y="327"
>Consumer</tspan>
</text>
<path d="M161,320 L320.5,320" id="Line-2" stroke="#DC585F" stroke-width="4" stroke-dasharray="5" fill-rule="nonzero"></path>
<path
id="Line-2"
d="M161,320 L320.5,320"
stroke="#DC585F"
stroke-width="4"
stroke-dasharray="5"
fill-rule="nonzero"
/>
</g>
</g>
</svg>
@@ -1,13 +1,13 @@
<template>
<div class="svg-container">
<slot></slot>
<slot />
</div>
</template>
<style lang="stylus">
.svg-container
margin 30px auto
text-align center
& > svg
max-width 100%
.svg-container
margin 30px auto
text-align center
& > svg
max-width 100%
</style>
-1
View File
@@ -29,4 +29,3 @@ createApp({
console.error(err)
process.exit(1)
})