@docsector/docsector-reader 2.2.0 → 3.0.0

package/src/components/DPageSourceCode.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useQuasar } from 'quasar'
 import { useStore } from 'vuex'
 import Prism from 'prismjs'
@@ -9,6 +9,7 @@ import 'prismjs/components/prism-markup-templating' // dependency for prism-php
 import 'prismjs/components/prism-php'
 // Bash
 import 'prismjs/components/prism-bash'
+import { looksLikeFileName, resolveFileIconUrl } from '../composables/useFileIcon'
 
 const props = defineProps({
   index: {
@@ -21,11 +22,19 @@ const props = defineProps({
   },
   text: {
     type: String,
-    required: true
+    default: ''
   },
   filename: {
     type: String,
     default: ''
+  },
+  breadcrumbs: {
+    type: Array,
+    default: () => []
+  },
+  tabs: {
+    type: Array,
+    default: () => []
   }
 })
 
@@ -36,22 +45,72 @@ const copyBtnDisabled = ref(false)
 const copyBtnColor = ref(null)
 const copyBtnIcon = ref('content_copy')
 const codeRef = ref(null)
+const activeTab = ref(0)
 
 const href = computed(() => `${store.state.page.absolute}#${anchor.value}`)
 const coloring = computed(() => $q.dark.isActive ? 'dark' : 'white')
 const anchor = computed(() => printToLetter(props.index + 1))
+
+const fileIconUrl = (label) => {
+  if (!looksLikeFileName(label)) {
+    return ''
+  }
+
+  return resolveFileIconUrl(label, {
+    preferLight: !$q.dark.isActive
+  })
+}
+
+const fallbackCode = computed(() => ({
+  label: props.filename || props.language || 'Code',
+  language: props.language || 'html',
+  text: props.text || '',
+  filename: props.filename || '',
+  breadcrumbs: props.breadcrumbs || [],
+  iconUrl: fileIconUrl(props.filename || props.language || 'Code')
+}))
+const codeTabs = computed(() => {
+  if (!props.tabs.length) {
+    return [fallbackCode.value]
+  }
+
+  return props.tabs.map((tab, index) => ({
+    label: tab.label || tab.filename || tab.language || `Code ${index + 1}`,
+    language: tab.language || props.language || 'html',
+    text: tab.text || '',
+    filename: tab.filename || '',
+    breadcrumbs: Array.isArray(tab.breadcrumbs) ? tab.breadcrumbs : [],
+    iconUrl: fileIconUrl(tab.label || tab.filename || tab.language || `Code ${index + 1}`)
+  }))
+})
+const hasTabs = computed(() => codeTabs.value.length > 1)
+const activeCode = computed(() => codeTabs.value[activeTab.value] || codeTabs.value[0] || fallbackCode.value)
+const activeText = computed(() => activeCode.value.text || '')
+const activeLanguage = computed(() => activeCode.value.language || 'html')
+const activeFilename = computed(() => hasTabs.value ? '' : activeCode.value.filename || '')
+const activeBreadcrumbs = computed(() => activeCode.value.breadcrumbs || [])
+const activeBreadcrumbItems = computed(() => {
+  return activeBreadcrumbs.value.map((segment, index) => ({
+    label: segment,
+    icon: index === activeBreadcrumbs.value.length - 1 ? fileIconUrl(segment) : ''
+  }))
+})
+const activeBreadcrumbTitle = computed(() => activeBreadcrumbs.value.join(' > '))
+const hasBreadcrumbs = computed(() => activeBreadcrumbs.value.length > 0)
 const lines = computed(() => {
-  const splited = props.text.split(/\r\n|\n/)
+  const splited = activeText.value.split(/\r\n|\n/)
   return splited.length - 1
 })
+const showHeader = computed(() => hasTabs.value || hasBreadcrumbs.value || (lines.value && lines.value > 1))
+const codeLanguageClass = computed(() => `language-${activeLanguage.value}`)
 const highlighted = computed(() => {
-  if (!props.text) {
+  if (!activeText.value) {
     return ''
   }
 
-  const text = props.text.replace(/&#123;/g, '{').replace(/&#125;/g, '}').replace(/&amp;/g, '&')
+  const text = activeText.value.replace(/&#123;/g, '{').replace(/&#125;/g, '}').replace(/&amp;/g, '&')
 
-  const lang = props.language || 'markup'
+  const lang = activeLanguage.value || 'markup'
   const grammar = Prism.languages[lang]
 
   if (!grammar) {
@@ -65,6 +124,10 @@ const highlighted = computed(() => {
   return Prism.highlight(text, grammar, lang)
 })
 
+watch(() => props.tabs, () => {
+  activeTab.value = 0
+}, { deep: true })
+
 function copyCode() {
   const code = codeRef.value
 
@@ -83,7 +146,7 @@ function copyCode() {
       copyBtnColor.value = 'positive'
       copyBtnIcon.value = 'done'
 
-      setInterval(() => {
+      setTimeout(() => {
         copyBtnDisabled.value = false
         copyBtnColor.value = null
         copyBtnIcon.value = 'content_copy'
@@ -112,33 +175,90 @@ function printToLetter(number) {
 
 <template>
 <div class="source-code">
-  <div class="info" v-if="lines && lines > 1">
-    <div class="filename">{{ filename }}</div>
-    <div class="language">{{ language }}</div>
-    <div class="copy">
-      <q-btn
-        flat square dense size="xs"
-        :disable="copyBtnDisabled"
-        :color="copyBtnColor"
-        :icon="copyBtnIcon"
-        @click="copyCode"
-        aria-label="Copy code"
-      />
+  <div class="source-code-frame" :class="[coloring, { 'with-tabs': hasTabs, 'with-breadcrumbs': hasBreadcrumbs }]">
+    <div class="source-code-tabs-row" v-if="hasTabs">
+      <q-tabs
+        v-model="activeTab"
+        dense
+        align="left"
+        class="source-code-tabs"
+      >
+        <q-tab
+          v-for="(tab, index) in codeTabs"
+          :key="`${tab.label}-${index}`"
+          :name="index"
+          no-caps
+        >
+          <span class="source-code-tab-label">
+            <img
+              v-if="tab.iconUrl"
+              class="source-code-file-icon"
+              :src="tab.iconUrl"
+              alt=""
+              aria-hidden="true"
+              loading="lazy"
+            />
+            <span>{{ tab.label }}</span>
+          </span>
+        </q-tab>
+      </q-tabs>
     </div>
-  </div>
 
-  <div class="code" :class="coloring">
-    <div class="lines" v-if="lines && lines > 1">
-      <template v-for="(line, index) in lines" :key="index">
-        <a class="line" :href="href+line">
-          <i class="fa fa-link" aria-hidden="true" data-hidden="true"></i>
-          <span :id="`${anchor}${line}`">{{ line }}</span>
-        </a>
-      </template>
+    <div class="source-code-meta-row" v-if="showHeader">
+      <q-breadcrumbs
+        v-if="hasBreadcrumbs"
+        class="source-code-breadcrumbs"
+        separator=">"
+        :title="activeBreadcrumbTitle"
+      >
+        <q-breadcrumbs-el
+          v-for="(item, index) in activeBreadcrumbItems"
+          :key="`${item.label}-${index}`"
+          :class="{ 'is-file': item.icon }"
+        >
+          <span class="source-code-breadcrumb-label">
+            <img
+              v-if="item.icon"
+              class="source-code-file-icon"
+              :src="item.icon"
+              alt=""
+              aria-hidden="true"
+              loading="lazy"
+            />
+            <span>{{ item.label }}</span>
+          </span>
+        </q-breadcrumbs-el>
+      </q-breadcrumbs>
+
+      <div class="info">
+        <div class="filename" v-if="activeFilename">{{ activeFilename }}</div>
+        <div class="language">{{ activeLanguage }}</div>
+        <div class="copy">
+          <q-btn
+            flat square dense size="xs"
+            :disable="copyBtnDisabled"
+            :color="copyBtnColor"
+            :icon="copyBtnIcon"
+            @click="copyCode"
+            aria-label="Copy code"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="code" :class="coloring">
+      <div class="lines" v-if="lines && lines > 1">
+        <template v-for="(line, index) in lines" :key="index">
+          <a class="line" :href="href+line">
+            <i class="fa fa-link" aria-hidden="true" data-hidden="true"></i>
+            <span :id="`${anchor}${line}`">{{ line }}</span>
+          </a>
+        </template>
+      </div>
+      <pre>
+        <code :class="codeLanguageClass" v-html="highlighted" ref="codeRef"></code>
+      </pre>
     </div>
-    <pre>
-      <code :class="`language-${language}`" v-html="highlighted" ref="code"></code>
-    </pre>
   </div>
 </div>
 </template>
@@ -149,38 +269,237 @@ function printToLetter(number) {
   max-width: calc(100vw - 40px)
   margin: 14px 0 16px
 
+  .source-code-frame
+    border: 1px solid #ddd
+    border-bottom-color: #ccc
+    border-radius: 3px
+
+    &.white
+      background-color: white
+
+      .source-code-meta-row,
+      .info .filename,
+      .info .language,
+      .info .copy
+        background-color: #fff
+
+      .source-code-meta-row
+        box-shadow: 0 2px 4px rgb(0 0 0 / 8%)
+
+      .source-code-tabs-row
+        background-color: #f6f6f6
+
+      .source-code-tabs
+        background-color: transparent
+
+        .q-tab
+          background-color: #e9e9e9
+          color: #555
+
+        .q-tab.q-tab--active
+          background-color: white
+          color: #222
+
+    &.dark
+      background-color: #000
+
+      .source-code-meta-row,
+      .info .filename,
+      .info .language,
+      .info .copy
+        background-color: #000
+
+      .source-code-meta-row
+        box-shadow: 0 3px 10px rgb(255 255 255 / 24%)
+
+      .source-code-tabs-row
+        background-color: #242424
+
+      .source-code-tabs
+        background-color: transparent
+
+        .q-tab
+          background-color: #333
+          border-right-color: #444
+          color: #d6d6d6
+
+        .q-tab.q-tab--active
+          background-color: #000
+          color: white
+
+  .source-code-tabs-row
+    min-width: 0
+    overflow-x: auto
+    width: 100%
+
+  .source-code-meta-row
+    align-items: center
+    display: flex
+    min-height: 26px
+    min-width: 0
+    position: sticky
+    top: 0
+    width: 100%
+    z-index: 2
+
+  .source-code-tabs
+    color: gray
+    flex: 0 1 auto
+    min-width: 0
+    overflow-x: auto
+    width: fit-content
+
+    .q-tab
+      border-right: 1px solid #ddd
+      min-height: 22px
+      padding: 0 10px
+
+      &:last-child
+        border-right: 0
+
+    .q-tab__content
+      min-width: 0
+
+    .source-code-tab-label
+      align-items: center
+      display: inline-flex
+      gap: 6px
+      min-width: 0
+
+      span
+        overflow: hidden
+        text-overflow: ellipsis
+        white-space: nowrap
+
+    .q-tab__label
+      font-size: 13px
+      overflow: hidden
+      text-overflow: ellipsis
+      white-space: nowrap
+
+    .q-tab__indicator
+      display: none
+
+  .source-code-breadcrumbs
+    align-items: center
+    color: gray
+    flex: 1 1 auto
+    flex-wrap: nowrap
+    font-size: 13px
+    height: 26px
+    line-height: 16px
+    margin: 0
+    min-width: 0
+    overflow: hidden
+    padding: 0 6px
+
+    > .flex
+      align-items: center
+      display: flex
+      flex-wrap: nowrap
+      height: 100%
+      margin: 0
+      min-width: 0
+      overflow: hidden
+      width: 100%
+
+      > *
+        margin-left: 0 !important
+        margin-top: 0 !important
+
+    .q-breadcrumbs__el,
+    .q-breadcrumbs__separator
+      color: gray
+      overflow: hidden
+      text-overflow: ellipsis
+      white-space: nowrap
+
+    .q-breadcrumbs__el
+      align-items: center
+      display: inline-flex
+      flex: 0 1 auto
+      max-width: 150px
+      min-width: 0
+
+      &.is-file
+        flex: 1 1 auto
+        max-width: 220px
+
+    .q-breadcrumbs__separator
+      align-items: center
+      align-self: center
+      display: inline-flex
+      flex: 0 0 auto
+      font-size: 17px
+      height: 16px
+      justify-content: center
+      line-height: 16px
+      margin: 0 4px 0 4px
+      margin-left: 4px !important
+      overflow: visible
+      padding: 0
+
+    .source-code-breadcrumb-label
+      align-items: center
+      display: inline-flex
+      gap: 6px
+      line-height: 16px
+      max-width: 100%
+      min-width: 0
+
+      span
+        display: inline-block
+        overflow: hidden
+        text-overflow: ellipsis
+        white-space: nowrap
+
+  .source-code-file-icon
+    flex: 0 0 auto
+    height: 16px
+    object-fit: contain
+    width: 16px
+
   .info
     display: flex
-    flex-direction: row-reverse
-    height: 22px
+    height: 26px
+    margin-left: auto
+    flex-shrink: 0
 
     .copy
-      border-color: #ddd
-      border-style: solid
-      border-width: 1px 0 0 1px
       color: gray
       padding: 0
       user-select: none
 
       button
-        padding: 4px 4px 3px
+        padding: 7px 8px 6px
         position: relative
-        top: -1px
+
+    .filename
+      font-size: 13px
+      color: gray
+      max-width: 220px
+      overflow: hidden
+      padding: 3px 6px 0
+      text-overflow: ellipsis
+      user-select: none
+      white-space: nowrap
+
     .language
       font-size: 13px
-      border-color: #ddd
-      border-style: solid
-      border-width: 1px 1px 0 1px
       color: gray
-      padding: 0 5px 0
+      padding: 3px 5px 0
       user-select: none
 
+  @media (max-width: 600px)
+    .source-code-tabs,
+    .source-code-breadcrumbs
+      max-width: 100%
+
   .code
     font-family: "Fira Code Nerd Font", "Consolas" !important
     position: relative
-    border: 1px solid #ddd
-    border-bottom: 1px solid #ccc
-    border-radius: 3px
+    border: 0
+    border-radius: 0
     margin: 0
     padding: 0
 

package/src/components/DPageTokens.vue

@@ -0,0 +1,122 @@
+<script setup>
+defineOptions({
+  name: 'DPageTokens'
+})
+
+defineProps({
+  id: {
+    type: Number,
+    default: 0
+  },
+  tokens: {
+    type: Array,
+    default: () => []
+  }
+})
+
+import DH2 from './DH2.vue'
+import DH3 from './DH3.vue'
+import DH4 from './DH4.vue'
+import DH5 from './DH5.vue'
+import DH6 from './DH6.vue'
+import DPageSourceCode from './DPageSourceCode.vue'
+import DMermaidDiagram from './DMermaidDiagram.vue'
+import DPageBlockquote from './DPageBlockquote.vue'
+import DQuickLinks from './DQuickLinks.vue'
+import DPageExpandable from './DPageExpandable.vue'
+</script>
+
+<template>
+<template v-for="(token, index) in tokens" :key="`${token.tag}-${index}`">
+  <d-h2
+    v-if="token.tag === 'h2'"
+    :id="id + token.map[0]"
+    :value="token.content"
+  />
+  <d-h3
+    v-else-if="token.tag === 'h3'"
+    :id="id + token.map[0]"
+    :value="token.content"
+  />
+  <d-h4
+    v-else-if="token.tag === 'h4'"
+    :id="id + token.map[0]"
+    :value="token.content"
+  />
+  <d-h5
+    v-else-if="token.tag === 'h5'"
+    :id="id + token.map[0]"
+    :value="token.content"
+  />
+  <d-h6
+    v-else-if="token.tag === 'h6'"
+    :id="id + token.map[0]"
+    :value="token.content"
+  />
+
+  <ul
+    v-else-if="token.tag === 'ul'"
+    v-html="token.content"
+  ></ul>
+  <ol
+    v-else-if="token.tag === 'ol'"
+    v-html="token.content"
+  ></ol>
+
+  <div
+    v-else-if="token.tag === 'table'"
+    class="d-table-wrapper"
+  >
+    <table v-html="token.content"></table>
+  </div>
+
+  <div
+    v-else-if="token.tag === 'html'"
+    v-html="token.content"
+  ></div>
+
+  <p
+    v-else-if="token.tag === 'p'"
+    v-html="token.content"
+  ></p>
+
+  <d-page-blockquote
+    v-else-if="token.tag === 'blockquote'"
+    :message="token.alertType"
+  >
+    <div v-html="token.content"></div>
+  </d-page-blockquote>
+
+  <d-page-source-code
+    v-else-if="token.tag === 'code'"
+    :index="id + token.codeIndex"
+    :text="token.content"
+    :language="token.info"
+    :filename="token.filename"
+    :breadcrumbs="token.breadcrumbs"
+    :tabs="token.tabs"
+  />
+
+  <d-mermaid-diagram
+    v-else-if="token.tag === 'mermaid'"
+    :content="token.content"
+  />
+
+  <d-quick-links
+    v-else-if="token.tag === 'quick-links'"
+    :title="token.title"
+    :items="token.items"
+  />
+
+  <d-page-expandable
+    v-else-if="token.tag === 'expandable'"
+    :title="token.title"
+    :open="token.open"
+  >
+    <d-page-tokens
+      :id="id"
+      :tokens="token.tokens"
+    />
+  </d-page-expandable>
+</template>
+</template>