liz/wikijs-fork
liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: content tabs

Browse Source
This commit is contained in:
NGPixel 2020-04-26 21:04:08 -04:00
parent 9fd55f8a97
commit 5d43f6ada1
10 changed files with 224 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/client-app.js
View File

@ -169,7 +169,6 @@ Vue.component('v-card-chin', () => import(/* webpackPrefetch: true, webpackChunk
Vue.component('welcome', () => import(/* webpackChunkName: "welcome" */ './components/welcome.vue'))
Vue.component('nav-footer', () => import(/* webpackChunkName: "theme" */ './themes/' + siteConfig.theme + '/components/nav-footer.vue'))
Vue.component('nav-sidebar', () => import(/* webpackChunkName: "theme" */ './themes/' + siteConfig.theme + '/components/nav-sidebar.vue'))
Vue.component('page', () => import(/* webpackChunkName: "theme" */ './themes/' + siteConfig.theme + '/components/page.vue'))
let bootstrap = () => {

6
client/themes/default/components/page.vue
View File

@ -249,11 +249,16 @@
<script>
import { StatusIndicator } from 'vue-status-indicator'
import Tabset from './tabset.vue'
import NavSidebar from './nav-sidebar.vue'
import Prism from 'prismjs'
import mermaid from 'mermaid'
import { get } from 'vuex-pathify'
import _ from 'lodash'
import ClipboardJS from 'clipboard'
import Vue from 'vue'
Vue.component('tabset', Tabset)
Prism.plugins.autoloader.languages_path = '/js/prism/'
Prism.plugins.NormalizeWhitespace.setDefaults({
@ -292,6 +297,7 @@ Prism.plugins.toolbar.registerButton('copy-to-clipboard', (env) => {
export default {
components: {
NavSidebar,
StatusIndicator
},
props: {

151
client/themes/default/components/tabset.vue Normal file
View File

@ -0,0 +1,151 @@
<template lang="pug">
.tabset.elevation-2
ul.tabset-tabs(ref='tabs')
slot(name='tabs')
.tabset-content(ref='content')
slot(name='content')
</template>
<script>
export default {
data() {
return {
currentTab: 0
}
},
watch: {
currentTab (newValue, oldValue) {
this.setActiveTab()
}
},
methods: {
setActiveTab () {
this.$refs.tabs.childNodes.forEach((node, idx) => {
if (idx === this.currentTab) {
node.className = 'is-active'
} else {
node.className = ''
}
})
this.$refs.content.childNodes.forEach((node, idx) => {
if (idx === this.currentTab) {
node.className = 'tabset-panel is-active'
} else {
node.className = 'tabset-panel'
}
})
}
},
mounted () {
this.setActiveTab()
this.$refs.tabs.childNodes.forEach((node, idx) => {
node.addEventListener('click', ev => {
this.currentTab = [].indexOf.call(ev.target.parentNode.children, ev.target)
})
})
}
}
</script>
<style lang="scss">
.tabset {
border-radius: 5px;
margin-top: 10px;
@at-root .theme--dark & {
background-color: #292929;
}
> .tabset-tabs {
padding-left: 0;
margin: 0;
display: flex;
align-items: center;
background: linear-gradient(to bottom, #FFF, #FAFAFA);
box-shadow: inset 0 -1px 0 0 #DDD;
border-radius: 5px 5px 0 0;
overflow: hidden;
@at-root .theme--dark & {
background: linear-gradient(to bottom, #424242, #333);
box-shadow: inset 0 -1px 0 0 #555;
}
> li {
display: block;
padding: 16px;
margin-top: 0;
cursor: pointer;
transition: color 1s ease;
border-right: 1px solid #FFF;
font-size: 14px;
font-weight: 500;
margin-bottom: 1px;
user-select: none;
@at-root .theme--dark & {
border-right-color: #555;
}
&.is-active {
background-color: #FFF;
margin-bottom: 0;
padding-bottom: 17px;
color: mc('blue', '700');
@at-root .theme--dark & {
background-color: #292929;
color: mc('blue', '300');
}
}
&:last-child {
border-right: none;
&.is-active {
border-right: 1px solid #EEE;
@at-root .theme--dark & {
border-right-color: #555;
}
}
}
&:hover {
background-color: rgba(#CCC, .1);
@at-root .theme--dark & {
background-color: rgba(#222, .25);
}
&.is-active {
background-color: #FFF;
@at-root .theme--dark & {
background-color: #292929;
}
}
}
& + li {
border-left: 1px solid #EEE;
@at-root .theme--dark & {
border-left-color: #222;
}
}
}
}
> .tabset-content {
.tabset-panel {
padding: 2px 16px 16px;
display: none;
&.is-active {
display: block;
}
}
}
}
</style>

6
client/themes/default/scss/app.scss
View File

@ -310,7 +310,7 @@
// LISTS
// ---------------------------------
ol, ul {
ol, ul:not(.tabset-tabs) {
padding-top: 1rem;
width: 100%;
@ -471,7 +471,7 @@
}
}
ul {
ul:not(.tabset-tabs) {
list-style: none;
> li::before {
position: absolute;
@ -485,7 +485,7 @@
}
}
}
ul, ol {
ol, ul:not(.tabset-tabs) {
> li {
position: relative;
> p {

6
package.json
View File

@ -55,7 +55,7 @@
"body-parser": "1.19.0",
"chalk": "4.0.0",
"cheerio": "1.0.0-rc.3",
"chokidar": "3.3.1",
"chokidar": "3.4.0",
"clean-css": "4.2.3",
"compression": "1.7.4",
"connect-session-knex": "1.6.0",
@ -292,9 +292,9 @@
"vue2-animate": "2.1.3",
"vuedraggable": "2.23.2",
"vuescroll": "4.15.0",
"vuetify": "2.2.24",
"vuetify": "2.2.25",
"vuetify-loader": "1.4.3",
"vuex": "3.2.0",
"vuex": "3.3.0",
"vuex-pathify": "1.4.1",
"vuex-persistedstate": "3.0.1",
"webpack": "4.43.0",

2
server/modules/rendering/html-security/renderer.js
View File

@ -37,8 +37,10 @@ module.exports = {
summary: ['class', 'style'],
svg: ['width', 'height', 'viewbox', 'preserveaspectratio', 'style'],
table: ['border', 'class', 'id', 'style', 'width'],
tabset: [],
tbody: ['class', 'style'],
td: ['align', 'class', 'colspan', 'rowspan', 'style', 'valign'],
template: ['v-slot:tabs', 'v-slot:content'],
th: ['align', 'class', 'colspan', 'rowspan', 'style', 'valign'],
thead: ['class', 'style'],
tr: ['class', 'rowspan', 'style', 'align', 'valign'],

8
server/modules/rendering/html-tabset/definition.yml Normal file
View File

@ -0,0 +1,8 @@
key: htmlTabset
title: Tabsets
description: Transform headers into tabs
author: requarks.io
icon: mdi-tab
enabledDefault: true
dependsOn: htmlCore
props: {}

28
server/modules/rendering/html-tabset/renderer.js Normal file
View File

@ -0,0 +1,28 @@
const _ = require('lodash')
module.exports = {
async init($, config) {
for (let i = 1; i < 6; i++) {
$(`h${i}.tabset`).each((idx, elm) => {
let content = `<tabset>`
let tabs = []
let tabContents = []
$(elm).nextUntil(_.times(i, t => `h${t + 1}`).join(', '), `h${i + 1}`).each((hidx, hd) => {
tabs.push(`<li @click="switchTab(${hidx})">${$(hd).html()}</li>`)
let tabContent = ''
$(hd).nextUntil(_.times(i + 1, t => `h${t + 1}`).join(', ')).each((cidx, celm) => {
tabContent += $.html(celm)
$(celm).remove()
})
console.info(tabContent)
tabContents.push(`<div class="tabset-panel">${tabContent}</div>`)
$(hd).remove()
})
content += `<template v-slot:tabs>${tabs.join('')}</template>`
content += `<template v-slot:content>${tabContents.join('')}</template>`
content += `</tabset>`
$(elm).replaceWith($(content))
})
}
}
}

2
server/views/page.pug
View File

@ -25,6 +25,6 @@ block body
nav-mode=config.nav.mode
)
template(slot='contents')
div(v-pre)!= page.render
div!= page.render
if injectCode.body
!= injectCode.body

44
yarn.lock
View File

@ -4602,10 +4602,10 @@ cheerio@1.0.0-rc.3:
lodash "^4.15.0"
parse5 "^3.0.1"
chokidar@3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.3.1.tgz#c84e5b3d18d9a4d77558fef466b1bf16bbeb3450"
integrity sha512-4QYCEWOcK3OJrxwvyyAOxFuhpvOVCYkr33LPfFNBjAD/w3sEzWsp2BUOkI4l9bHvWioAd0rc6NlHUOEaWkTeqg==
chokidar@3.4.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.0.tgz#b30611423ce376357c765b9b8f904b9fba3c0be8"
integrity sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==
dependencies:
anymatch "~3.1.1"
braces "~3.0.2"
@ -4613,7 +4613,7 @@ chokidar@3.3.1:
is-binary-path "~2.1.0"
is-glob "~4.0.1"
normalize-path "~3.0.0"
readdirp "~3.3.0"
readdirp "~3.4.0"
optionalDependencies:
fsevents "~2.1.2"
@ -11834,10 +11834,10 @@ picomatch@^2.0.5:
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a"
integrity sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==
picomatch@^2.0.7:
version "2.1.1"
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.1.1.tgz#ecdfbea7704adb5fe6fb47f9866c4c0e15e905c5"
integrity sha512-OYMyqkKzK7blWO/+XZYP6w8hH0LDvkBvdvKukti+7kqYFCiEAk+gI3DWnryapc0Dau05ugGTy0foQ6mqn4AHYA==
picomatch@^2.2.1:
version "2.2.2"
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
pify@^2.0.0, pify@^2.3.0:
version "2.3.0"
@ -13486,12 +13486,12 @@ readdirp@^3.1.1:
dependencies:
picomatch "^2.0.4"
readdirp@~3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.3.0.tgz#984458d13a1e42e2e9f5841b129e162f369aff17"
integrity sha512-zz0pAkSPOXXm1viEwygWIPSPkcBYjW1xU5j/JBh5t9bGCJwa6f9+BJa6VaB2g+b55yVrmXzqkyLf4xaWYM0IkQ==
readdirp@~3.4.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.4.0.tgz#9fdccdf9e9155805449221ac645e8303ab5b9ada"
integrity sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==
dependencies:
picomatch "^2.0.7"
picomatch "^2.2.1"
realpath-native@^2.0.0:
version "2.0.0"
@ -16036,10 +16036,10 @@ vuetify-loader@1.4.3:
dependencies:
loader-utils "^1.2.0"
vuetify@2.2.24:
version "2.2.24"
resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.2.24.tgz#2bd560a9a04f418b3fc4d5d5faccb707daadb612"
integrity sha512-CHgKR+DqrH6dPlJnqO7JEHgs2a/dMEheS1bYPN9pC4NXJLfFZdt1LTO9nRa86kgcVowxR0LIZnL5bfLfPH8kMQ==
vuetify@2.2.25:
version "2.2.25"
resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.2.25.tgz#d2d57a52c3694a9982a49ec1a39e397b1a317294"
integrity sha512-sW//1OM2mH/tPmVm00fUKVZYOTooBh1/LSpOzIYCrHOZOL2JA3/3zM7zn7gyiJJzRTBklk5C+6YPI8lqz07d4g==
vuex-pathify@1.4.1:
version "1.4.1"
@ -16056,10 +16056,10 @@ vuex-persistedstate@3.0.1:
deepmerge "^4.2.2"
shvl "^2.0.0"
vuex@3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.2.0.tgz#86da7f26c3e131ff374870580109145a640ee5a8"
integrity sha512-qBZGJJ1gUNWZbfZlH7ylIPwENg3R0Ckpq+qPexF065kOMOt1Ixt8WDJmtssVv7OhepWD0+Qie7pOS8f0oQy1JA==
vuex@3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.3.0.tgz#665b4630ea1347317139fcc5cb495aab3ec5e513"
integrity sha512-1MfcBt+YFd20DPwKe0ThhYm1UEXZya4gVKUvCy7AtS11YAOUR+9a6u4fsv1Rr6ePZCDNxW/M1zuIaswp6nNv8Q==
w3c-hr-time@^1.0.1:
version "1.0.1"