feat: api docs editor (wip) + deps update
This commit is contained in:
NGPixel
@@ -29,6 +29,9 @@
|
||||
v-list-item-action(style='min-width:auto;')
|
||||
v-chip(x-small, :color='darkMode ? `grey darken-3-d4` : `grey lighten-5`')
|
||||
.caption.grey--text {{ info.pagesTotal }}
|
||||
v-list-item(to='/tags', v-if='hasPermission([`manage:system`])', disabled)
|
||||
v-list-item-avatar(size='24'): v-icon(color='grey lighten-2') mdi-tag-multiple
|
||||
v-list-item-title {{ $t('admin:tags.title') }}
|
||||
v-list-item(to='/theme', v-if='hasPermission([`manage:system`, `manage:theme`])')
|
||||
v-list-item-avatar(size='24'): v-icon mdi-palette-outline
|
||||
v-list-item-title {{ $t('admin:theme.title') }}
|
||||
|
||||
@@ -52,21 +52,49 @@
|
||||
:hint='$t(`admin:theme.darkModeHint`)'
|
||||
)
|
||||
|
||||
//- v-card.mt-3.animated.fadeInUp.wait-p1s
|
||||
//- v-toolbar(color='primary', dark, dense, flat)
|
||||
//- v-toolbar-title.subtitle-1 {{$t(`admin:theme.options`)}}
|
||||
//- v-spacer
|
||||
//- v-chip(label, color='white', small).primary--text coming soon
|
||||
//- v-card-text
|
||||
//- v-select(
|
||||
//- :items='iconsets'
|
||||
//- outlined
|
||||
//- prepend-icon='mdi-border-vertical'
|
||||
//- v-model='config.iconset'
|
||||
//- label='Table of Contents Position'
|
||||
//- persistent-hint
|
||||
//- hint='Select whether the table of contents is shown on the left, right or not at all.'
|
||||
//- )
|
||||
v-card.mt-3.animated.fadeInUp.wait-p1s
|
||||
v-toolbar(color='primary', dark, dense, flat)
|
||||
v-toolbar-title.subtitle-1 {{$t(`admin:theme.options`)}}
|
||||
v-spacer
|
||||
v-chip(label, color='white', small).primary--text coming soon
|
||||
v-card-text
|
||||
v-select(
|
||||
:items='[]'
|
||||
outlined
|
||||
prepend-icon='mdi-border-vertical'
|
||||
v-model='config.iconset'
|
||||
label='Table of Contents Position'
|
||||
persistent-hint
|
||||
hint='Select whether the table of contents is shown on the left, right or not at all.'
|
||||
disabled
|
||||
)
|
||||
|
||||
v-flex(lg6 xs12)
|
||||
v-card.animated.fadeInUp.wait-p2s
|
||||
v-toolbar(color='teal', dark, dense, flat)
|
||||
v-toolbar-title.subtitle-1 {{$t('admin:theme.downloadThemes')}}
|
||||
v-spacer
|
||||
v-chip(label, color='white', small).teal--text coming soon
|
||||
v-data-table(
|
||||
:headers='headers',
|
||||
:items='themes',
|
||||
hide-default-footer,
|
||||
item-key='value',
|
||||
:items-per-page='1000'
|
||||
)
|
||||
template(v-slot:item='thm')
|
||||
td
|
||||
strong {{thm.item.text}}
|
||||
td
|
||||
span {{ thm.item.author }}
|
||||
td.text-xs-center
|
||||
v-progress-circular(v-if='thm.item.isDownloading', indeterminate, color='blue', size='20', :width='2')
|
||||
v-btn(v-else-if='thm.item.isInstalled && thm.item.installDate < thm.item.updatedAt', icon)
|
||||
v-icon.blue--text mdi-cached
|
||||
v-btn(v-else-if='thm.item.isInstalled', icon)
|
||||
v-icon.green--text mdi-check-bold
|
||||
v-btn(v-else, icon)
|
||||
v-icon.grey--text mdi-cloud-download
|
||||
|
||||
v-card.mt-3.animated.fadeInUp.wait-p2s
|
||||
v-toolbar(color='primary', dark, dense, flat)
|
||||
@@ -102,32 +130,6 @@
|
||||
:hint='$t(`admin:theme.bodyHtmlInjectionHint`)'
|
||||
auto-grow
|
||||
)
|
||||
v-flex(lg6 xs12)
|
||||
v-card.animated.fadeInUp.wait-p2s
|
||||
v-toolbar(color='teal', dark, dense, flat)
|
||||
v-toolbar-title.subtitle-1 {{$t('admin:theme.downloadThemes')}}
|
||||
v-spacer
|
||||
v-chip(label, color='white', small).teal--text coming soon
|
||||
v-data-table(
|
||||
:headers='headers',
|
||||
:items='themes',
|
||||
hide-default-footer,
|
||||
item-key='value',
|
||||
:items-per-page='1000'
|
||||
)
|
||||
template(v-slot:item='thm')
|
||||
td
|
||||
strong {{thm.item.text}}
|
||||
td
|
||||
span {{ thm.item.author }}
|
||||
td.text-xs-center
|
||||
v-progress-circular(v-if='thm.item.isDownloading', indeterminate, color='blue', size='20', :width='2')
|
||||
v-btn(v-else-if='thm.item.isInstalled && thm.item.installDate < thm.item.updatedAt', icon)
|
||||
v-icon.blue--text mdi-cached
|
||||
v-btn(v-else-if='thm.item.isInstalled', icon)
|
||||
v-icon.green--text mdi-check-bold
|
||||
v-btn(v-else, icon)
|
||||
v-icon.grey--text mdi-cloud-download
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -304,6 +304,7 @@ export default {
|
||||
gitUserName: '',
|
||||
gitRepoPath: './data/repo',
|
||||
progress: 0,
|
||||
successGroups: 0,
|
||||
successUsers: 0,
|
||||
successPages: 0,
|
||||
showFailedUsers: false,
|
||||
|
||||
@@ -62,6 +62,7 @@ export default {
|
||||
i18nOptions: { namespaces: 'editor' },
|
||||
components: {
|
||||
AtomSpinner,
|
||||
editorApi: () => import(/* webpackChunkName: "editor-api", webpackMode: "lazy" */ './editor/editor-api.vue'),
|
||||
editorCode: () => import(/* webpackChunkName: "editor-code", webpackMode: "lazy" */ './editor/editor-code.vue'),
|
||||
editorCkeditor: () => import(/* webpackChunkName: "editor-ckeditor", webpackMode: "lazy" */ './editor/editor-ckeditor.vue'),
|
||||
editorMarkdown: () => import(/* webpackChunkName: "editor-markdown", webpackMode: "lazy" */ './editor/editor-markdown.vue'),
|
||||
@@ -171,6 +172,9 @@ export default {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
// this.$store.set('editor/mode', 'edit')
|
||||
// this.currentEditor = `editorApi`
|
||||
},
|
||||
methods: {
|
||||
openPropsModal(name) {
|
||||
|
||||
9
client/components/editor/api/server-selector.vue
Normal file
9
client/components/editor/api/server-selector.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template lang="pug">
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
433
client/components/editor/editor-api.vue
Normal file
433
client/components/editor/editor-api.vue
Normal file
@@ -0,0 +1,433 @@
|
||||
<template lang='pug'>
|
||||
.editor-api
|
||||
.editor-api-main
|
||||
v-list.editor-api-sidebar.radius-0(nav, :class='$vuetify.theme.dark ? `grey darken-4` : `primary`', dark)
|
||||
v-list-item-group(v-model='tab')
|
||||
v-list-item.animated.fadeInLeft(value='info')
|
||||
v-list-item-icon: v-icon mdi-book-information-variant
|
||||
v-list-item-title Info
|
||||
v-list-item.mt-3.animated.fadeInLeft.wait-p2s(value='servers')
|
||||
v-list-item-icon: v-icon mdi-server
|
||||
v-list-item-title Servers
|
||||
v-list-item.mt-3.animated.fadeInLeft.wait-p3s(value='endpoints')
|
||||
v-list-item-icon: v-icon mdi-code-braces
|
||||
v-list-item-title Endpoints
|
||||
v-list-item.mt-3.animated.fadeInLeft.wait-p4s(value='models')
|
||||
v-list-item-icon: v-icon mdi-buffer
|
||||
v-list-item-title Models
|
||||
v-list-item.mt-3.animated.fadeInLeft.wait-p5s(value='auth')
|
||||
v-list-item-icon: v-icon mdi-lock
|
||||
v-list-item-title Authentication
|
||||
.editor-api-editor
|
||||
template(v-if='tab === `info`')
|
||||
v-container.px-2.pt-1(fluid)
|
||||
v-row(dense)
|
||||
v-col(cols='12')
|
||||
.pa-3
|
||||
.subtitle-2 API General Information
|
||||
.caption.grey--text.text--darken-1 Global metadata about the API
|
||||
v-col(cols='12', lg='6')
|
||||
v-card.pt-2
|
||||
v-card-text
|
||||
v-text-field(
|
||||
label='Title'
|
||||
outlined
|
||||
hint='Required - Title of the API'
|
||||
persistent-hint
|
||||
v-model='info.title'
|
||||
)
|
||||
v-divider.mt-2.mb-4
|
||||
v-text-field(
|
||||
label='Version'
|
||||
outlined
|
||||
hint='Required - Semantic versioning like 1.0.0 or an arbitrary string like 0.99-beta.'
|
||||
persistent-hint
|
||||
v-model='info.version'
|
||||
)
|
||||
v-divider.mt-2.mb-4
|
||||
v-textarea(
|
||||
label='Description'
|
||||
outlined
|
||||
hint='Optional - Markdown formatting is supported.'
|
||||
persistent-hint
|
||||
v-model='info.description'
|
||||
)
|
||||
v-col(cols='12', lg='6')
|
||||
v-card.pt-2
|
||||
v-card-text
|
||||
v-list(nav, two-line)
|
||||
v-list-item-group(v-model='kind', mandatory, color='primary')
|
||||
v-list-item(value='rest')
|
||||
v-list-item-avatar
|
||||
img(src='/svg/icon-transaction-list.svg', alt='REST')
|
||||
v-list-item-content
|
||||
v-list-item-title REST API
|
||||
v-list-item-subtitle Classic REST Endpoints
|
||||
v-list-item-avatar
|
||||
v-icon(:color='kind === `rest` ? `primary` : `grey lighten-3`') mdi-check-circle
|
||||
v-list-item(value='graphql', disabled)
|
||||
v-list-item-avatar
|
||||
img(src='/svg/icon-graphql.svg', alt='GraphQL')
|
||||
v-list-item-content
|
||||
v-list-item-title GraphQL
|
||||
v-list-item-subtitle.grey--text.text--lighten-1 Schema-based API
|
||||
v-list-item-action
|
||||
//- v-icon(:color='kind === `graphql` ? `primary` : `grey lighten-3`') mdi-check-circle
|
||||
v-chip(label, small) Coming soon
|
||||
template(v-else-if='tab === `servers`')
|
||||
v-container.px-2.pt-1(fluid)
|
||||
v-row(dense)
|
||||
v-col(cols='12')
|
||||
.pa-3
|
||||
.d-flex.align-center.justify-space-between
|
||||
div
|
||||
.subtitle-2 List of servers / load balancers where this API reside
|
||||
.caption.grey--text.text--darken-1 Enter all environments, e.g. Integration, QA, Pre-production, Production, etc.
|
||||
v-btn(color='primary', large, @click='addServer')
|
||||
v-icon(left) mdi-plus
|
||||
span Add Server
|
||||
v-col(cols='12', lg='6', v-for='srv of servers', :key='srv.id')
|
||||
v-card.pt-1
|
||||
v-card-text
|
||||
.d-flex
|
||||
.d-flex.flex-column.justify-space-between
|
||||
v-menu(offset-y, min-width='200')
|
||||
template(v-slot:activator='{ on }')
|
||||
v-btn(text, x-large, style='min-width: 0;', v-on='on')
|
||||
v-icon(large, :color='iconColor(srv.icon)') {{iconKey(srv.icon)}}
|
||||
v-list(nav, dense)
|
||||
v-list-item-group(v-model='srv.icon', mandatory)
|
||||
v-list-item(:value='srvKey', v-for='(srv, srvKey) in serverTypes', :key='srvKey')
|
||||
v-list-item-icon: v-icon(large, :color='srv.color', v-text='srv.icon')
|
||||
v-list-item-content: v-list-item-title(v-text='srv.title')
|
||||
v-btn.mb-2(depressed, small, @click='removeServer(srv.id)')
|
||||
v-icon(left) mdi-close
|
||||
span Delete
|
||||
v-divider.ml-5(vertical)
|
||||
.pl-5(style='flex: 1 1 100%;')
|
||||
v-text-field(
|
||||
label='Environment / Server Name'
|
||||
outlined
|
||||
hint='Required - Name of the environment (e.g. QA, Production)'
|
||||
persistent-hint
|
||||
v-model='srv.name'
|
||||
)
|
||||
v-text-field.mt-4(
|
||||
label='URL'
|
||||
outlined
|
||||
hint='Required - URL of the environment (e.g. https://api.example.com/v1)'
|
||||
persistent-hint
|
||||
v-model='srv.url'
|
||||
)
|
||||
|
||||
template(v-else-if='tab === `endpoints`')
|
||||
v-container.px-2.pt-1(fluid)
|
||||
v-row(dense)
|
||||
v-col(cols='12')
|
||||
.pa-3
|
||||
.d-flex.align-center.justify-space-between
|
||||
div
|
||||
.subtitle-2 List of endpoints
|
||||
.caption.grey--text.text--darken-1 Groups of REST endpoints (GET, POST, PUT, DELETE).
|
||||
v-btn(color='primary', large, @click='addGroup')
|
||||
v-icon(left) mdi-plus
|
||||
span Add Group
|
||||
v-col(cols='12', v-for='grp of endpointGroups', :key='grp.id')
|
||||
v-card(color='grey darken-2')
|
||||
v-card-text
|
||||
v-toolbar(color='grey darken-2', flat, height='86')
|
||||
v-text-field.mr-1(
|
||||
flat
|
||||
dark
|
||||
label='Group Name'
|
||||
solo
|
||||
hint='Group Name'
|
||||
persistent-hint
|
||||
v-model='grp.name'
|
||||
)
|
||||
v-text-field.mx-1(
|
||||
flat
|
||||
dark
|
||||
label='Group Description'
|
||||
solo
|
||||
hint='Group Description'
|
||||
persistent-hint
|
||||
v-model='grp.description'
|
||||
)
|
||||
v-divider.mx-3(vertical, dark)
|
||||
v-btn.mx-1.align-self-start(color='grey lighten-2', @click='addEndpoint(grp)', dark, text, height='48')
|
||||
v-icon(left) mdi-trash-can
|
||||
span Delete
|
||||
v-divider.mx-3(vertical, dark)
|
||||
v-btn.ml-1.align-self-start(color='pink', @click='addEndpoint(grp)', dark, depressed, height='48')
|
||||
v-icon(left) mdi-plus
|
||||
span Add Endpoint
|
||||
v-container.pa-0.mt-2(fluid)
|
||||
v-row(dense)
|
||||
v-col(cols='12', v-for='ept of grp.endpoints', :key='ept.id')
|
||||
v-card.pt-1
|
||||
v-card-text
|
||||
.d-flex
|
||||
.d-flex.flex-column
|
||||
v-menu(offset-y, min-width='140')
|
||||
template(v-slot:activator='{ on }')
|
||||
v-btn.subtitle-1(depressed, large, dark, style='min-width: 140px;', height='48', v-on='on', :color='methodColor(ept.method)')
|
||||
strong {{ept.method}}
|
||||
v-list(nav, dense)
|
||||
v-list-item-group(v-model='ept.method', mandatory)
|
||||
v-list-item(:value='mtd.key', v-for='mtd of endpointMethods', :key='mtd.key')
|
||||
v-list-item-content
|
||||
v-chip.text-center(label, :color='mtd.color', dark) {{mtd.key}}
|
||||
v-btn.mt-2(v-if='!ept.expanded', small, @click='ept.expanded = true', color='pink', outlined)
|
||||
v-icon(left) mdi-arrow-down-box
|
||||
span Expand
|
||||
v-btn.mt-2(v-else, small, @click='ept.expanded = false', color='pink', outlined)
|
||||
v-icon(left) mdi-arrow-up-box
|
||||
span Collapse
|
||||
template(v-if='ept.expanded')
|
||||
v-spacer
|
||||
v-btn.my-2(depressed, small, @click='removeEndpoint(grp, ept.id)')
|
||||
v-icon(left) mdi-close
|
||||
span Delete
|
||||
v-divider.ml-5(vertical)
|
||||
.pl-5(style='flex: 1 1 100%;')
|
||||
.d-flex
|
||||
v-text-field.mr-2(
|
||||
label='Path'
|
||||
outlined
|
||||
hint='Required - Path to the endpoint (e.g. /planets/{planetId})'
|
||||
persistent-hint
|
||||
v-model='ept.path'
|
||||
)
|
||||
v-text-field.ml-2(
|
||||
label='Summary'
|
||||
outlined
|
||||
hint='Required - A short summary of the endpoint (a few words).'
|
||||
persistent-hint
|
||||
v-model='ept.summary'
|
||||
)
|
||||
template(v-if='ept.expanded')
|
||||
v-text-field.mt-3(
|
||||
label='Description'
|
||||
outlined
|
||||
v-model='ept.description'
|
||||
)
|
||||
|
||||
v-system-bar.editor-api-sysbar(dark, status, color='grey darken-3')
|
||||
.caption.editor-api-sysbar-locale {{locale.toUpperCase()}}
|
||||
.caption.px-3 /{{path}}
|
||||
template(v-if='$vuetify.breakpoint.mdAndUp')
|
||||
v-spacer
|
||||
.caption API Docs
|
||||
v-spacer
|
||||
.caption OpenAPI 3.0
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import uuid from 'uuid/v4'
|
||||
import { get, sync } from 'vuex-pathify'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tab: `endpoints`,
|
||||
kind: 'rest',
|
||||
kinds: [
|
||||
{ text: 'REST', value: 'rest' },
|
||||
{ text: 'GraphQL', value: 'graphql' }
|
||||
],
|
||||
info: {
|
||||
title: '',
|
||||
version: '1.0.0',
|
||||
description: ''
|
||||
},
|
||||
servers: [
|
||||
{ name: 'Production', url: 'https://api.example.com/v1', icon: 'server', id: '123456' }
|
||||
],
|
||||
serverTypes: {
|
||||
aws: {
|
||||
color: 'orange',
|
||||
icon: 'mdi-aws',
|
||||
title: 'AWS'
|
||||
},
|
||||
azure: {
|
||||
color: 'blue darken-2',
|
||||
icon: 'mdi-azure',
|
||||
title: 'Azure'
|
||||
},
|
||||
digitalocean: {
|
||||
color: 'blue',
|
||||
icon: 'mdi-digital-ocean',
|
||||
title: 'DigitalOcean'
|
||||
},
|
||||
docker: {
|
||||
color: 'blue',
|
||||
icon: 'mdi-docker',
|
||||
title: 'Docker'
|
||||
},
|
||||
google: {
|
||||
color: 'red',
|
||||
icon: 'mdi-google',
|
||||
title: 'Google'
|
||||
},
|
||||
kubernetes: {
|
||||
color: 'blue darken-2',
|
||||
icon: 'mdi-kubernetes',
|
||||
title: 'Kubernetes'
|
||||
},
|
||||
linux: {
|
||||
color: 'grey darken-3',
|
||||
icon: 'mdi-linux',
|
||||
title: 'Linux'
|
||||
},
|
||||
mac: {
|
||||
color: 'grey darken-2',
|
||||
icon: 'mdi-apple',
|
||||
title: 'Mac'
|
||||
},
|
||||
server: {
|
||||
color: 'grey',
|
||||
icon: 'mdi-server',
|
||||
title: 'Server'
|
||||
},
|
||||
windows: {
|
||||
color: 'blue darken-2',
|
||||
icon: 'mdi-windows',
|
||||
title: 'Windows'
|
||||
}
|
||||
},
|
||||
endpointGroups: [
|
||||
{
|
||||
id: '345678',
|
||||
name: '',
|
||||
description: '',
|
||||
endpoints: [
|
||||
{ method: 'GET', path: '/pet', expanded: false, id: '234567' }
|
||||
]
|
||||
}
|
||||
],
|
||||
endpointMethods: [
|
||||
{ key: 'GET', color: 'blue' },
|
||||
{ key: 'POST', color: 'green' },
|
||||
{ key: 'PUT', color: 'orange' },
|
||||
{ key: 'PATCH', color: 'cyan' },
|
||||
{ key: 'DELETE', color: 'red' },
|
||||
{ key: 'HEAD', color: 'deep-purple' },
|
||||
{ key: 'OPTIONS', color: 'blue-grey' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isMobile() {
|
||||
return this.$vuetify.breakpoint.smAndDown
|
||||
},
|
||||
locale: get('page/locale'),
|
||||
path: get('page/path'),
|
||||
mode: get('editor/mode'),
|
||||
activeModal: sync('editor/activeModal')
|
||||
},
|
||||
methods: {
|
||||
iconColor (val) {
|
||||
return _.get(this.serverTypes, `${val}.color`, 'white')
|
||||
},
|
||||
iconKey (val) {
|
||||
return _.get(this.serverTypes, `${val}.icon`, 'mdi-server')
|
||||
},
|
||||
methodColor (val) {
|
||||
return _.get(_.find(this.endpointMethods, ['key', val]), 'color', 'grey')
|
||||
},
|
||||
addServer () {
|
||||
this.servers.push({
|
||||
id: uuid(),
|
||||
name: 'Production',
|
||||
url: 'https://api.example.com/v1',
|
||||
icon: 'server'
|
||||
})
|
||||
},
|
||||
removeServer (id) {
|
||||
this.servers = _.reject(this.servers, ['id', id])
|
||||
},
|
||||
addGroup () {
|
||||
this.endpointGroups.push({
|
||||
id: uuid(),
|
||||
name: '',
|
||||
description: '',
|
||||
endpoints: []
|
||||
})
|
||||
},
|
||||
addEndpoint (grp) {
|
||||
grp.endpoints.push({
|
||||
id: uuid(),
|
||||
method: 'GET',
|
||||
path: '/pet',
|
||||
expanded: false
|
||||
})
|
||||
},
|
||||
removeEndpoint (grp, eptId) {
|
||||
grp.endpoints = _.reject(grp.endpoints, ['id', eptId])
|
||||
},
|
||||
toggleModal(key) {
|
||||
this.activeModal = (this.activeModal === key) ? '' : key
|
||||
this.helpShown = false
|
||||
},
|
||||
closeAllModal() {
|
||||
this.activeModal = ''
|
||||
this.helpShown = false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.set('editor/editorKey', 'api')
|
||||
|
||||
if (this.mode === 'create') {
|
||||
this.$store.set('editor/content', '<h1>Title</h1>\n\n<p>Some text here</p>')
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$root.$off('editorInsert')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
$editor-height: calc(100vh - 64px - 24px);
|
||||
$editor-height-mobile: calc(100vh - 56px - 16px);
|
||||
|
||||
.editor-api {
|
||||
&-main {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-editor {
|
||||
background-color: darken(mc('grey', '100'), 4.5%);
|
||||
flex: 1 1 50%;
|
||||
display: block;
|
||||
height: $editor-height;
|
||||
position: relative;
|
||||
|
||||
@at-root .theme--dark & {
|
||||
background-color: darken(mc('grey', '900'), 4.5%);
|
||||
}
|
||||
}
|
||||
|
||||
&-sidebar {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
&-sysbar {
|
||||
padding-left: 0 !important;
|
||||
|
||||
&-locale {
|
||||
background-color: rgba(255,255,255,.25);
|
||||
display:inline-flex;
|
||||
padding: 0 12px;
|
||||
height: 24px;
|
||||
width: 63px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template lang='pug'>
|
||||
v-dialog(v-model='isShown', persistent, max-width='700', no-click-animation)
|
||||
v-btn(fab, fixed, bottom, right, color='grey darken-3', dark, @click='goBack'): v-icon mdi-undo-variant
|
||||
v-btn(fab, fixed, bottom, right, color='grey darken-3', dark, @click='goBack', style='width: 50px;'): v-icon mdi-undo-variant
|
||||
v-card.radius-7(color='blue darken-3', dark)
|
||||
v-card-text.text-center.py-4
|
||||
.subtitle-1.white--text {{$t('editor:select.title')}}
|
||||
@@ -9,23 +9,15 @@
|
||||
v-flex(xs4)
|
||||
v-hover
|
||||
template(v-slot:default='{ hover }')
|
||||
v-card.radius-7.primary.animated.fadeInUp(
|
||||
v-card.radius-7.animated.fadeInUp(
|
||||
hover
|
||||
light
|
||||
ripple
|
||||
)
|
||||
v-card-text.text-center(@click='')
|
||||
img(src='/svg/editor-icon-api.svg', alt='API', style='width: 36px; opacity: .5;')
|
||||
.body-2.mt-2.blue--text.text--lighten-2 API Docs
|
||||
.caption.blue--text.text--lighten-1 REST / GraphQL
|
||||
v-fade-transition
|
||||
v-overlay(
|
||||
v-if='hover'
|
||||
absolute
|
||||
color='primary'
|
||||
opacity='.8'
|
||||
)
|
||||
.body-2.mt-7 Coming Soon
|
||||
v-card-text.text-center(@click='selectEditor(`api`)')
|
||||
img(src='/svg/editor-icon-api.svg', alt='API', style='width: 36px;')
|
||||
.body-2.primary--text.mt-2 API Docs
|
||||
.caption.grey--text REST / GraphQL
|
||||
v-flex(xs4)
|
||||
v-hover
|
||||
template(v-slot:default='{ hover }')
|
||||
|
||||
1
client/static/svg/icon-graphql.svg
Normal file
1
client/static/svg/icon-graphql.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="96px" height="96px"><path fill="#ff4081" d="M24.5,45.161L7,34.82V14.18L24.5,3.839L42,14.18V34.82L24.5,45.161z M9,33.68l15.5,9.159L40,33.68 V15.32L24.5,6.161L9,15.32V33.68z"/><circle cx="24.5" cy="5.5" r="3.5" fill="#ff4081"/><circle cx="24.5" cy="43.5" r="3.5" fill="#ff4081"/><circle cx="8.5" cy="33.5" r="3.5" fill="#ff4081"/><circle cx="40.5" cy="33.5" r="3.5" fill="#ff4081"/><circle cx="8.5" cy="15.5" r="3.5" fill="#ff4081"/><circle cx="40.5" cy="15.5" r="3.5" fill="#ff4081"/><path fill="#ff4081" d="M42.72,35H6.28L24.5,2.978L42.72,35z M9.72,33H39.28L24.5,7.022L9.72,33z"/></svg>
|
||||
|
After Width: | Height: | Size: 653 B |
1
client/static/svg/icon-transaction-list.svg
Normal file
1
client/static/svg/icon-transaction-list.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128px" height="128px"><path fill="#fff" d="M14,108V25c0-2.761,2.239-5,5-5h90c2.761,0,5,2.239,5,5v83"/><path fill="none" stroke="#9eb9d3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6" d="M28 61L35 61M47 61L76 61"/><path fill="#9eb9d3" d="M88 58A3 3 0 1 0 88 64 3 3 0 1 0 88 58zM100 58A3 3 0 1 0 100 64 3 3 0 1 0 100 58z"/><path fill="none" stroke="#9eb9d3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6" d="M28 77L35 77M47 77L76 77"/><path fill="#9eb9d3" d="M100 74A3 3 0 1 0 100 80A3 3 0 1 0 100 74Z"/><path fill="none" stroke="#9eb9d3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6" d="M28 93L35 93M47 93L76 93"/><path fill="#9eb9d3" d="M88 90A3 3 0 1 0 88 96 3 3 0 1 0 88 90zM100 90A3 3 0 1 0 100 96 3 3 0 1 0 100 90zM114 43H14V25c0-2.761 2.239-5 5-5h90c2.761 0 5 2.239 5 5V43z"/><path fill="#fff" d="M104,30H69c-1.657,0-3,1.343-3,3c0,1.657,1.343,3,3,3h35c1.657,0,3-1.343,3-3S105.657,30,104,30z"/><path fill="none" stroke="#444b54" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6" d="M14,108V25 c0-2.761,2.239-5,5-5h90c2.761,0,5,2.239,5,5v83"/><path fill="#fff" d="M24 30A3 3 0 1 0 24 36 3 3 0 1 0 24 30zM34 30A3 3 0 1 0 34 36 3 3 0 1 0 34 30zM44 30A3 3 0 1 0 44 36 3 3 0 1 0 44 30z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -1,15 +1,23 @@
|
||||
<template lang="pug">
|
||||
v-list.py-2(dense, :class='color', :dark='dark')
|
||||
template(v-for='item of items')
|
||||
v-list-item(
|
||||
v-if='item.kind === `link`'
|
||||
:href='item.target'
|
||||
)
|
||||
v-list-item-avatar(size='24')
|
||||
v-icon {{ item.icon }}
|
||||
v-list-item-title {{ item.label }}
|
||||
v-divider.my-2(v-else-if='item.kind === `divider`')
|
||||
v-subheader.pl-4(v-else-if='item.kind === `header`') {{ item.label }}
|
||||
div
|
||||
.blue.darken-3.pa-3.d-flex
|
||||
v-btn(depressed, color='blue darken-2', style='min-width:0;', href='/')
|
||||
v-icon(size='20') mdi-home
|
||||
v-btn.ml-3(depressed, color='blue darken-2', style='flex: 1 1 100%;')
|
||||
v-icon(left) mdi-file-tree
|
||||
.body-2.text-none Browse
|
||||
v-divider
|
||||
v-list.py-2(dense, :class='color', :dark='dark')
|
||||
template(v-for='item of items')
|
||||
v-list-item(
|
||||
v-if='item.kind === `link`'
|
||||
:href='item.target'
|
||||
)
|
||||
v-list-item-avatar(size='24')
|
||||
v-icon {{ item.icon }}
|
||||
v-list-item-title {{ item.label }}
|
||||
v-divider.my-2(v-else-if='item.kind === `divider`')
|
||||
v-subheader.pl-4(v-else-if='item.kind === `header`') {{ item.label }}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -5,3 +5,47 @@ version: 1.0.0
|
||||
requirements:
|
||||
minimum: '>= 2.0.0'
|
||||
maximum: '< 3.0.0'
|
||||
props:
|
||||
sdPosition:
|
||||
type: String
|
||||
default: 'left'
|
||||
title: Table of Contents Position
|
||||
hint: Should the content sidebar be shown on the left or right.
|
||||
enum:
|
||||
- 'hidden'
|
||||
- 'left'
|
||||
- 'right'
|
||||
order: 1
|
||||
icon: mdi-border-vertical
|
||||
showTOC:
|
||||
type: Boolean
|
||||
default: true
|
||||
title: Display the Table of Contents
|
||||
order: 2
|
||||
showTags:
|
||||
type: Boolean
|
||||
default: true
|
||||
title: Display the Page Tags
|
||||
order: 3
|
||||
showTags:
|
||||
type: Boolean
|
||||
default: true
|
||||
title: Display the Page Author and Date
|
||||
order: 4
|
||||
showTags:
|
||||
type: Boolean
|
||||
default: true
|
||||
title: Display the Page Rating
|
||||
order: 5
|
||||
showSocialBar:
|
||||
type: Boolean
|
||||
default: true
|
||||
title: Display the Social Links Bar
|
||||
order: 6
|
||||
showEditSpeedDial:
|
||||
type: Boolean
|
||||
default: true
|
||||
title: Display the Edit Speed Dial
|
||||
hint: Shown in the lower right corner of the page.
|
||||
order: 7
|
||||
|
||||
|
||||
Reference in New Issue
Block a user