@docsector/docsector-reader 3.6.0 → 4.0.1

package/src/components/DBlockStepper.vue

@@ -0,0 +1,210 @@
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+defineOptions({
+  name: 'DBlockStepper'
+})
+
+const props = defineProps({
+  steps: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const { t } = useI18n()
+const currentStep = ref(1)
+const isFinished = ref(false)
+const stepCount = computed(() => props.steps.length)
+
+watch(stepCount, (count) => {
+  if (count < 1) {
+    currentStep.value = 1
+    isFinished.value = false
+    return
+  }
+
+  if (currentStep.value > count) {
+    currentStep.value = count
+  }
+}, { immediate: true })
+
+const isLastStep = (index) => index === props.steps.length - 1
+const hasDefaultIcon = (step) => typeof step?.icon === 'string' && step.icon !== '' && step.icon !== 'none'
+const stepPrefix = (step, index) => hasDefaultIcon(step) ? void 0 : String(index + 1)
+const isStepDone = (index) => isFinished.value || currentStep.value > index + 1
+
+const goToStep = (stepNumber) => {
+  if (stepNumber < 1 || stepNumber > props.steps.length) {
+    return
+  }
+
+  isFinished.value = false
+  currentStep.value = stepNumber
+}
+
+const finishStepper = () => {
+  isFinished.value = true
+  currentStep.value = null
+}
+</script>
+
+<template>
+<div v-if="steps.length" class="d-stepper">
+  <q-stepper
+    v-model="currentStep"
+    vertical
+    animated
+    flat
+    bordered
+    header-nav
+    color="primary"
+    active-color="primary"
+    done-color="positive"
+    inactive-color="grey-6"
+    class="d-stepper__shell"
+  >
+    <q-step
+      v-for="(step, index) in steps"
+      :key="`${step.title}-${index}`"
+      :name="index + 1"
+      :title="step.title"
+      :prefix="stepPrefix(step, index)"
+      :icon="step.icon || void 0"
+      :active-icon="step.activeIcon || step.icon || void 0"
+      :done-icon="step.doneIcon || step.icon || void 0"
+      :error-icon="step.errorIcon || step.icon || void 0"
+      :done="isStepDone(index)"
+      header-class="d-stepper__step-header"
+      class="d-stepper__step"
+    >
+      <div class="d-stepper__body">
+        <slot :step="step" :index="index" />
+      </div>
+
+      <q-stepper-navigation class="d-stepper__navigation">
+        <q-btn
+          v-if="!isLastStep(index)"
+          color="primary"
+          no-caps
+          unelevated
+          :label="t('page.stepper.continue')"
+          @click="goToStep(index + 2)"
+        />
+
+        <q-btn
+          v-else
+          color="positive"
+          no-caps
+          unelevated
+          :label="t('page.stepper.finish')"
+          @click="finishStepper"
+        />
+
+        <q-btn
+          v-if="index > 0"
+          unelevated
+          no-caps
+          class="d-stepper__back d-stepper__secondary-action"
+          :label="t('page.stepper.back')"
+          @click="goToStep(index)"
+        />
+      </q-stepper-navigation>
+    </q-step>
+  </q-stepper>
+</div>
+</template>
+
+<style lang="sass">
+body.body--light
+  --d-stepper-shell-bg: #fffdfa
+  --d-stepper-shell-border: rgba(123, 94, 45, 0.16)
+  --d-stepper-shell-shadow: rgba(94, 73, 37, 0.08)
+  --d-stepper-header-bg: rgba(255, 242, 212, 0.32)
+  --d-stepper-divider: rgba(123, 94, 45, 0.14)
+  --d-stepper-text-muted: #5f6772
+  --d-stepper-secondary-bg: rgba(123, 94, 45, 0.12)
+  --d-stepper-secondary-bg-hover: rgba(123, 94, 45, 0.18)
+  --d-stepper-secondary-text: #705420
+
+body.body--dark
+  --d-stepper-shell-bg: rgba(255, 248, 235, 0.04)
+  --d-stepper-shell-border: rgba(255, 235, 194, 0.12)
+  --d-stepper-shell-shadow: rgba(0, 0, 0, 0.28)
+  --d-stepper-header-bg: rgba(255, 240, 210, 0.04)
+  --d-stepper-divider: rgba(255, 235, 194, 0.08)
+  --d-stepper-text-muted: rgba(255, 255, 255, 0.72)
+  --d-stepper-secondary-bg: rgba(255, 235, 194, 0.1)
+  --d-stepper-secondary-bg-hover: rgba(255, 235, 194, 0.16)
+  --d-stepper-secondary-text: #f4ddb0
+
+.d-stepper
+  margin: 1.5rem 0
+
+.d-stepper__shell
+  border-radius: 20px
+  overflow: hidden
+  background: var(--d-stepper-shell-bg)
+  border-color: var(--d-stepper-shell-border)
+  box-shadow: 0 16px 36px var(--d-stepper-shell-shadow)
+
+.d-stepper__shell.q-stepper--vertical
+  .q-stepper__header
+    background: var(--d-stepper-header-bg)
+
+  .q-stepper__tab
+    min-height: 72px
+
+  .q-stepper__step-inner
+    border-top: 1px solid var(--d-stepper-divider)
+
+  .q-stepper__title
+    font-size: 1rem
+    font-weight: 700
+    line-height: 1.45
+
+  .q-stepper__caption
+    color: var(--d-stepper-text-muted)
+
+.d-stepper__step-header
+  font-weight: 700
+
+.d-stepper__body
+  min-width: 0
+  padding-top: 0.85rem
+
+  > :first-child
+    margin-top: 0
+
+  > :last-child
+    margin-bottom: 0
+
+.d-stepper__navigation
+  display: flex
+  flex-wrap: wrap
+  gap: 0.75rem
+  margin-top: 1rem
+
+.d-stepper__back
+  margin-left: 0 !important
+
+.d-stepper__secondary-action
+  background: var(--d-stepper-secondary-bg) !important
+  color: var(--d-stepper-secondary-text) !important
+
+  &:hover,
+  &:focus-visible
+    background: var(--d-stepper-secondary-bg-hover) !important
+
+@media (max-width: 599px)
+  .d-stepper__shell.q-stepper--vertical
+    .q-stepper__tab
+      min-height: 64px
+
+    .q-stepper__title
+      font-size: 0.97rem
+
+  .d-stepper__navigation
+    gap: 0.55rem
+</style>

package/src/components/DBlockTimeline.vue

@@ -0,0 +1,319 @@
+<script setup>
+import { computed } from 'vue'
+import { useQuasar } from 'quasar'
+import { useI18n } from 'vue-i18n'
+
+defineOptions({
+  name: 'DBlockTimeline'
+})
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const $q = useQuasar()
+const { locale } = useI18n()
+
+const timelineLayout = computed(() => {
+  return $q.screen.lt.sm ? 'dense' : 'comfortable'
+})
+
+const formatDate = (rawDate = '') => {
+  const normalized = String(rawDate).trim()
+  const isoMatch = normalized.match(/^(\d{4})-(\d{2})-(\d{2})$/)
+
+  if (isoMatch) {
+    const [, year, month, day] = isoMatch
+    const parsed = new Date(Number(year), Number(month) - 1, Number(day), 12)
+
+    return new Intl.DateTimeFormat(locale.value, {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    }).format(parsed)
+  }
+
+  const parsed = new Date(normalized)
+  if (Number.isNaN(parsed.getTime())) {
+    return normalized
+  }
+
+  return new Intl.DateTimeFormat(locale.value, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  }).format(parsed)
+}
+
+const stripHtmlTags = (value = '') => {
+  return String(value)
+    .replace(/<[^>]+>/g, ' ')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;|&apos;/g, "'")
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&amp;/g, '&')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+const getTitleTokenIndex = (tokens = []) => {
+  return tokens.findIndex((token) => {
+    return typeof token?.content === 'string' && stripHtmlTags(token.content) !== ''
+  })
+}
+
+const entries = computed(() => {
+  return props.items.map((item, index) => {
+    const titleTokenIndex = getTitleTokenIndex(item.tokens)
+    const titleText = titleTokenIndex === -1
+      ? `Update ${index + 1}`
+      : stripHtmlTags(item.tokens[titleTokenIndex].content)
+
+    return {
+      ...item,
+      formattedDate: formatDate(item.date),
+      titleText,
+      tags: item.tags.map((tag) => ({
+        label: tag?.label || '',
+        color: tag?.color || '',
+        textColor: tag?.textColor || '',
+        icon: tag?.icon || ''
+      })),
+      tokens: titleTokenIndex !== -1 && item.tokens[titleTokenIndex]?.tag === 'p'
+        ? item.tokens.filter((_, tokenIndex) => tokenIndex !== titleTokenIndex)
+        : item.tokens
+    }
+  })
+})
+</script>
+
+<template>
+<div v-if="entries.length" class="d-timeline">
+  <q-timeline
+    color="secondary"
+    :layout="timelineLayout"
+    side="right"
+    :dark="$q.dark.isActive"
+    class="d-timeline__shell"
+  >
+    <q-timeline-entry
+      v-for="(item, index) in entries"
+      :id="item.anchorId"
+      :key="`${item.anchorId}-${index}`"
+      class="d-timeline__entry"
+    >
+      <template #title>
+        <span class="d-timeline__title-row">
+          <span class="d-timeline__title-text">{{ item.titleText }}</span>
+
+          <a
+            class="d-timeline__anchor"
+            :href="`#${item.anchorId}`"
+            aria-label="Direct link to timeline item"
+          >
+            <q-icon name="link" size="16px" aria-hidden="true" />
+          </a>
+        </span>
+      </template>
+
+      <template #subtitle>
+        <span class="d-timeline__subtitle-text">{{ item.formattedDate }}</span>
+      </template>
+
+      <div class="d-timeline__body">
+        <div v-if="item.tags.length" class="d-timeline__tags">
+          <q-chip
+            v-for="(tag, tagIndex) in item.tags"
+            :key="`${item.anchorId}-${tag.label}-${tagIndex}`"
+            dense
+            square
+            :icon="tag.icon || void 0"
+            :color="tag.color || void 0"
+            :text-color="tag.textColor || void 0"
+            :class="[
+              'd-timeline__tag',
+              { 'd-timeline__tag--default': tag.color === '' }
+            ]"
+          >
+            {{ tag.label }}
+          </q-chip>
+        </div>
+
+        <slot :item="item" :index="index" />
+      </div>
+    </q-timeline-entry>
+  </q-timeline>
+</div>
+</template>
+
+<style lang="sass">
+body.body--light
+  --d-timeline-title: #1d2733
+  --d-timeline-subtitle: #7d5516
+  --d-timeline-anchor-bg: rgba(150, 105, 39, 0.08)
+  --d-timeline-anchor-bg-hover: rgba(150, 105, 39, 0.16)
+  --d-timeline-anchor-text: #7d5516
+  --d-timeline-tag-bg: rgba(150, 105, 39, 0.1)
+  --d-timeline-tag-text: #6b4a18
+
+body.body--dark
+  --d-timeline-title: #f5f7fa
+  --d-timeline-subtitle: #f4d394
+  --d-timeline-anchor-bg: rgba(255, 232, 190, 0.08)
+  --d-timeline-anchor-bg-hover: rgba(255, 232, 190, 0.16)
+  --d-timeline-anchor-text: #f4d394
+  --d-timeline-tag-bg: rgba(255, 232, 190, 0.1)
+  --d-timeline-tag-text: #f7e0b3
+
+.d-timeline
+  margin: 1.5rem 0
+  --d-timeline-sticky-top: 0.75rem
+
+.d-timeline__shell
+  &.q-timeline--comfortable
+    .q-timeline__subtitle
+      width: 1%
+      white-space: nowrap
+
+      > span
+        position: sticky
+        position: -webkit-sticky
+        top: var(--d-timeline-sticky-top)
+        display: inline-block
+        z-index: 1
+
+    .q-timeline__dot
+      position: sticky !important
+      position: -webkit-sticky !important
+      top: var(--d-timeline-sticky-top)
+      bottom: auto !important
+      z-index: 2
+
+      &:after
+        top: 25px
+
+      &:before
+        top: 6px
+        content: ''
+      &:after
+        bottom: -3px
+        content: ''
+
+    .q-timeline__content
+      padding-left: 0 !important
+
+    .q-timeline__title
+      padding-top: 0 !important
+      padding-left: 0 !important
+
+    .d-timeline__entry:last-child
+      .q-timeline__dot:after
+        content: '' !important
+
+  .q-timeline__title
+    margin: 0
+    padding: 0
+    font-size: 1.3rem
+    font-weight: 700
+    line-height: 1.35
+    color: var(--d-timeline-title)
+    cursor: default
+    user-select: text
+
+    &:before,
+    &:after,
+    &:hover:after
+      content: none
+
+    &:hover
+      color: var(--d-timeline-title)
+
+  .q-timeline__subtitle
+    color: var(--d-timeline-subtitle)
+    font-size: 0.84rem
+    font-weight: 700
+    line-height: 1.35
+    letter-spacing: 0.06em
+    text-transform: uppercase
+
+  .q-timeline__content
+    min-width: 0
+
+.d-timeline__entry
+  .q-timeline__content > :last-child
+    margin-bottom: 0
+
+.d-timeline__title-row
+  display: flex
+  align-items: flex-start
+  justify-content: space-between
+  gap: 0.75rem
+  width: 100%
+
+.d-timeline__title-text
+  min-width: 0
+
+.d-timeline__subtitle-text
+  display: inline-block
+  min-width: 0
+  margin-top: 4px
+
+.d-timeline__body
+  min-width: 0
+
+  > :first-child
+    margin-top: 0
+
+.d-timeline__tags
+  display: flex
+  flex-wrap: wrap
+  gap: 0.45rem
+  margin: 0 0 0.8rem
+
+.d-timeline__tag
+  margin: 0
+
+.d-timeline__tag--default
+  background: var(--d-timeline-tag-bg)
+  color: var(--d-timeline-tag-text)
+  font-weight: 600
+
+.d-timeline__anchor
+  flex: none
+  display: inline-flex
+  align-items: center
+  justify-content: center
+  width: 2rem
+  height: 2rem
+  border-radius: 999px
+  background: var(--d-timeline-anchor-bg)
+  color: var(--d-timeline-anchor-text)
+  text-decoration: none
+  font-size: 1rem
+  font-weight: 700
+  transition: background-color 0.2s ease, transform 0.2s ease
+
+  &:hover,
+  &:focus-visible
+    background: var(--d-timeline-anchor-bg-hover)
+    transform: translateY(-1px)
+
+@media (max-width: 599px)
+  .d-timeline__shell
+    .q-timeline__title
+      font-size: 1.16rem
+
+    .q-timeline__subtitle
+      font-size: 0.78rem
+
+  .d-timeline__title-row
+    gap: 0.55rem
+
+  .d-timeline__anchor
+    width: 1.8rem
+    height: 1.8rem
+</style>

package/src/components/DPageSection.vue

@@ -11,6 +11,10 @@ defineProps({
   id: {
     type: Number,
     required: true
+  },
+  renderPrimaryHeading: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -32,6 +36,7 @@ const tokenized = computed(() => {
 <section>
   <d-page-tokens
     :id="id"
+    :render-primary-heading="renderPrimaryHeading"
     :tokens="tokenized"
   />
 </section>

package/src/components/DPageTokens.vue

@@ -8,6 +8,10 @@ defineProps({
     type: Number,
     default: 0
   },
+  renderPrimaryHeading: {
+    type: Boolean,
+    default: false
+  },
   tokens: {
     type: Array,
     default: () => []
@@ -19,21 +23,28 @@ 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 DPageImage from './DPageImage.vue'
-import DPageFile from './DPageFile.vue'
-import DPageEmbeddedUrl from './DPageEmbeddedUrl.vue'
-import DBlockCard from './DBlockCard.vue'
-import DQuickLinks from './DQuickLinks.vue'
-import DPageExpandable from './DPageExpandable.vue'
+import DBlockSourceCode from './DBlockSourceCode.vue'
+import DBlockMermaidDiagram from './DBlockMermaidDiagram.vue'
+import DBlockBlockquote from './DBlockBlockquote.vue'
+import DBlockImage from './DBlockImage.vue'
+import DBlockFile from './DBlockFile.vue'
+import DBlockEmbeddedUrl from './DBlockEmbeddedUrl.vue'
+import DBlockCards from './DBlockCards.vue'
+import DBlockQuickLinks from './DBlockQuickLinks.vue'
+import DBlockTimeline from './DBlockTimeline.vue'
+import DBlockExpandable from './DBlockExpandable.vue'
+import DBlockStepper from './DBlockStepper.vue'
 </script>
 
 <template>
 <template v-for="(token, index) in tokens" :key="`${token.tag}-${index}`">
+  <h1
+    v-if="token.tag === 'h1' && renderPrimaryHeading"
+    :id="token.anchorId"
+    v-html="token.content"
+  ></h1>
   <d-h2
-    v-if="token.tag === 'h2'"
+    v-else-if="token.tag === 'h2'"
     :id="token.anchorId"
     :value="token.content"
   />
@@ -81,7 +92,7 @@ import DPageExpandable from './DPageExpandable.vue'
     v-html="token.content"
   ></div>
 
-  <d-page-image
+  <d-block-image
     v-else-if="token.tag === 'image'"
     :content="token.content"
     :caption-html="token.captionHtml"
@@ -92,14 +103,14 @@ import DPageExpandable from './DPageExpandable.vue'
     v-html="token.content"
   ></p>
 
-  <d-page-blockquote
+  <d-block-blockquote
     v-else-if="token.tag === 'blockquote'"
     :message="token.alertType"
   >
     <div v-html="token.content"></div>
-  </d-page-blockquote>
+  </d-block-blockquote>
 
-  <d-page-file
+  <d-block-file
     v-else-if="token.tag === 'file'"
     :src="token.src"
     :title="token.title"
@@ -107,14 +118,14 @@ import DPageExpandable from './DPageExpandable.vue'
     :caption="token.caption"
   />
 
-  <d-page-embedded-url
+  <d-block-embedded-url
     v-else-if="token.tag === 'embedded-url'"
     :url="token.url"
     :title="token.title"
     :caption="token.caption"
   />
 
-  <d-page-source-code
+  <d-block-source-code
     v-else-if="token.tag === 'code'"
     :index="id + token.codeIndex"
     :text="token.content"
@@ -124,24 +135,48 @@ import DPageExpandable from './DPageExpandable.vue'
     :tabs="token.tabs"
   />
 
-  <d-mermaid-diagram
+  <d-block-mermaid-diagram
     v-else-if="token.tag === 'mermaid'"
     :content="token.content"
   />
 
-  <d-block-card
+  <d-block-cards
     v-else-if="token.tag === 'cards'"
     :title="token.title"
     :items="token.items"
   />
 
-  <d-quick-links
+  <d-block-quick-links
     v-else-if="token.tag === 'quick-links'"
     :title="token.title"
     :items="token.items"
   />
 
-  <d-page-expandable
+  <d-block-timeline
+    v-else-if="token.tag === 'timeline'"
+    :items="token.items"
+  >
+    <template #default="{ item }">
+      <d-page-tokens
+        :id="id"
+        :tokens="item.tokens"
+      />
+    </template>
+  </d-block-timeline>
+
+  <d-block-stepper
+    v-else-if="token.tag === 'stepper'"
+    :steps="token.steps"
+  >
+    <template #default="{ step }">
+      <d-page-tokens
+        :id="id"
+        :tokens="step.tokens"
+      />
+    </template>
+  </d-block-stepper>
+
+  <d-block-expandable
     v-else-if="token.tag === 'expandable'"
     :title="token.title"
     :open="token.open"
@@ -150,6 +185,6 @@ import DPageExpandable from './DPageExpandable.vue'
       :id="id"
       :tokens="token.tokens"
     />
-  </d-page-expandable>
+  </d-block-expandable>
 </template>
 </template>