@docsector/docsector-reader 3.5.0 → 4.0.0

package/src/components/DBlockCards.vue

@@ -0,0 +1,223 @@
+<script setup>
+const BASE_URL = import.meta.env.BASE_URL || '/'
+
+defineOptions({
+  name: 'DBlockCards'
+})
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => []
+  },
+  title: {
+    type: String,
+    default: ''
+  }
+})
+
+const isExternal = (item) => {
+  const href = item?.href || ''
+  return /^https?:\/\//i.test(href)
+}
+
+const itemTag = (item) => {
+  if (item?.to) return 'router-link'
+  return 'a'
+}
+
+const itemProps = (item) => {
+  if (item?.to) {
+    return {
+      to: item.to
+    }
+  }
+
+  const href = item?.href || ''
+  return {
+    href,
+    target: isExternal(item) ? '_blank' : undefined,
+    rel: isExternal(item) ? 'noopener noreferrer' : undefined
+  }
+}
+
+const resolveAssetUrl = (raw = '') => {
+  const value = String(raw || '').trim()
+
+  if (!value) {
+    return ''
+  }
+
+  if (/^(?:[a-z]+:)?\/\//i.test(value) || /^(?:data:|blob:)/i.test(value)) {
+    return value
+  }
+
+  const trimmedBase = String(BASE_URL).replace(/\/$/, '')
+
+  if (value.startsWith('/')) {
+    return `${trimmedBase}${value}` || value
+  }
+
+  const normalized = value.replace(/^\.\//, '')
+  return `${trimmedBase}/${normalized}`.replace(/\/+/g, '/')
+}
+</script>
+
+<template>
+<div class="d-cards">
+  <h3 v-if="title" class="d-cards__title">{{ title }}</h3>
+
+  <div class="d-cards__grid">
+    <component
+      :is="itemTag(item)"
+      v-for="(item, index) in props.items"
+      :key="`${item.title}-${index}`"
+      class="d-cards__link"
+      v-bind="itemProps(item)"
+    >
+      <q-card flat bordered class="d-cards__card">
+        <q-img
+          v-if="item.image"
+          :src="resolveAssetUrl(item.image)"
+          :alt="item.title"
+          ratio="1.7778"
+          class="d-cards__image"
+        />
+
+        <q-card-section v-else-if="item.icon" class="d-cards__icon-section">
+          <div class="d-cards__icon-surface">
+            <q-icon :name="item.icon" size="56px" color="primary" />
+          </div>
+        </q-card-section>
+
+        <q-card-section class="d-cards__body">
+          <div class="d-cards__heading-row">
+            <div class="d-cards__heading-group">
+              <q-icon
+                v-if="item.image && item.icon"
+                :name="item.icon"
+                size="18px"
+                color="primary"
+              />
+              <div class="d-cards__label">{{ item.title }}</div>
+            </div>
+
+            <q-icon :name="isExternal(item) ? 'arrow_outward' : 'arrow_forward'" size="18px" />
+          </div>
+
+          <div class="d-cards__description">{{ item.description }}</div>
+        </q-card-section>
+      </q-card>
+    </component>
+  </div>
+</div>
+</template>
+
+<style lang="sass">
+body.body--light
+  --d-cards-card-bg: #fffdf8
+  --d-cards-card-border: rgba(123, 94, 45, 0.16)
+  --d-cards-card-shadow: rgba(94, 73, 37, 0.08)
+  --d-cards-card-shadow-hover: rgba(94, 73, 37, 0.16)
+  --d-cards-description: #4d5563
+  --d-cards-icon-surface: linear-gradient(180deg, rgba(210, 190, 145, 0.22), rgba(210, 190, 145, 0.08))
+
+body.body--dark
+  --d-cards-card-bg: rgba(255, 248, 235, 0.035)
+  --d-cards-card-border: rgba(255, 235, 194, 0.12)
+  --d-cards-card-shadow: rgba(0, 0, 0, 0.25)
+  --d-cards-card-shadow-hover: rgba(0, 0, 0, 0.38)
+  --d-cards-description: rgba(255, 255, 255, 0.82)
+  --d-cards-icon-surface: linear-gradient(180deg, rgba(193, 166, 103, 0.18), rgba(193, 166, 103, 0.05))
+
+.d-cards
+  margin: 0 auto
+
+.d-cards__title
+  text-align: center
+  margin: 0 0 16px
+
+.d-cards__grid
+  display: grid
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
+  gap: 16px
+
+.d-cards__link
+  display: block
+  color: inherit
+  text-decoration: none
+  border-bottom: 0 !important
+  background: transparent !important
+
+.d-cards__link:hover,
+.d-cards__link:focus-visible,
+.d-cards__link:active,
+.d-cards__link:visited
+  color: inherit !important
+  text-decoration: none
+  border-bottom: 0 !important
+  background: transparent !important
+
+.d-cards__card
+  height: 100%
+  overflow: hidden
+  border-radius: 18px
+  background: var(--d-cards-card-bg)
+  border-color: var(--d-cards-card-border)
+  box-shadow: 0 12px 28px var(--d-cards-card-shadow)
+  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease
+
+.d-cards__link:hover .d-cards__card,
+.d-cards__link:focus-visible .d-cards__card
+  transform: translateY(-2px)
+  box-shadow: 0 18px 36px var(--d-cards-card-shadow-hover)
+
+.d-cards__link:focus-visible
+  outline: none
+
+.d-cards__image
+  background: rgba(0, 0, 0, 0.05)
+
+.d-cards__icon-section
+  display: flex
+  padding-bottom: 0
+
+.d-cards__icon-surface
+  display: flex
+  align-items: center
+  justify-content: center
+  width: 100%
+  min-height: 156px
+  border-radius: 14px
+  background: var(--d-cards-icon-surface)
+
+.d-cards__body
+  display: grid
+  gap: 10px
+
+.d-cards__heading-row
+  display: flex
+  align-items: flex-start
+  justify-content: space-between
+  gap: 12px
+
+.d-cards__heading-group
+  display: flex
+  align-items: center
+  gap: 8px
+  min-width: 0
+
+.d-cards__label
+  font-size: 1rem
+  font-weight: 700
+  line-height: 1.35
+
+.d-cards__description
+  color: var(--d-cards-description)
+  font-size: 0.97rem
+  line-height: 1.55
+
+@media (max-width: 599px)
+  .d-cards__grid
+    grid-template-columns: 1fr
+</style>

package/src/components/{DPageEmbeddedUrl.vue → DBlockEmbeddedUrl.vue}

@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n'
 import { resolveEmbeddedUrl } from '../composables/useEmbeddedUrl'
 
 defineOptions({
-  name: 'DPageEmbeddedUrl'
+  name: 'DBlockEmbeddedUrl'
 })
 
 const props = defineProps({

package/src/components/{DPageExpandable.vue → DBlockExpandable.vue}

@@ -1,4 +1,8 @@
 <script setup>
+defineOptions({
+  name: 'DBlockExpandable'
+})
+
 defineProps({
   title: {
     type: String,

package/src/components/{DPageFile.vue → DBlockFile.vue}

@@ -8,7 +8,7 @@ import { resolveFileIconUrl } from '../composables/useFileIcon'
 const BASE_URL = import.meta.env.BASE_URL || '/'
 
 defineOptions({
-  name: 'DPageFile'
+  name: 'DBlockFile'
 })
 
 const props = defineProps({

package/src/components/{DPageImage.vue → DBlockImage.vue}

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 
 defineOptions({
-  name: 'DPageImage'
+  name: 'DBlockImage'
 })
 
 const props = defineProps({

package/src/components/{DMermaidDiagram.vue → DBlockMermaidDiagram.vue}

@@ -2,6 +2,10 @@
 import { ref, onMounted, watch } from 'vue'
 import { useQuasar } from 'quasar'
 
+defineOptions({
+  name: 'DBlockMermaidDiagram'
+})
+
 const props = defineProps({
   content: {
     type: String,

package/src/components/{DQuickLinks.vue → DBlockQuickLinks.vue}

@@ -1,4 +1,8 @@
 <script setup>
+defineOptions({
+  name: 'DBlockQuickLinks'
+})
+
 const props = defineProps({
   items: {
     type: Array,

package/src/components/{DPageSourceCode.vue → DBlockSourceCode.vue}

@@ -11,6 +11,10 @@ import 'prismjs/components/prism-php'
 import 'prismjs/components/prism-bash'
 import { looksLikeFileName, resolveFileIconUrl } from '../composables/useFileIcon'
 
+defineOptions({
+  name: 'DBlockSourceCode'
+})
+
 const props = defineProps({
   index: {
     type: Number,
@@ -504,11 +508,12 @@ function printToLetter(number) {
     padding: 0
 
     .lines
-      padding: 11px 5px 8px 5px
+      padding: 10px 5px 10px 5px
       text-align: right
       float: left
       -webkit-user-select: none
       user-select: none
+      line-height: 19px
 
       a
         display: block

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>