feat: content tabs

server/modules/rendering/html-security/renderer.js

@@ -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'],

server/modules/rendering/html-tabset/definition.yml

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

server/modules/rendering/html-tabset/renderer.js

@@ -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))
+      })
+    }
+  }
+}