slidev-theme-practicum 0.1.0 → 0.1.3

package/components/TextFitGroup.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import {
+  computed,
+  defineComponent,
+  h,
+  isVNode,
+  shallowRef,
+  type PropType,
+  type VNode,
+} from 'vue'
+import { createTextFitRuntime } from '../composables/text-fit-runtime'
+import { useTextFitScope } from '../composables/text-fit-scope'
+
+const textFit = createTextFitRuntime()
+
+const props = defineProps<{
+  fitGroup: string
+}>()
+
+const TextFitGroupContent = defineComponent({
+  name: 'TextFitGroupContent',
+  props: {
+    fitGroup: {
+      type: String as PropType<string>,
+      required: true,
+    },
+  },
+  setup(props, { slots }) {
+    const groupElement = shallowRef<HTMLElement | null>(null)
+    const textFitScope = useTextFitScope()
+    const sharedKey = computed(() => {
+      if (!props.fitGroup)
+        return ''
+
+      return `${textFitScope}:${props.fitGroup}`
+    })
+    let currentChildren: VNode[] = []
+    const { apply } = textFit.useGroup({
+      target: groupElement,
+      nodes: () => currentChildren,
+      sharedKey,
+    })
+
+    return () => {
+      const children = (slots.default?.() ?? []).filter(isVNode)
+      currentChildren = children
+
+      return h('div', {
+        ref: groupElement,
+        class: 'TextFitGroup',
+      }, apply(children))
+    }
+  },
+})
+</script>
+
+<template>
+  <TextFitGroupContent :fit-group="props.fitGroup">
+    <slot />
+  </TextFitGroupContent>
+</template>
+
+<style scoped>
+.TextFitGroup {
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: inherit;
+}
+</style>

package/components/Timeline.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import { computed, shallowRef, type ComponentPublicInstance } from 'vue'
+import { computed, getCurrentInstance, shallowRef, type ComponentPublicInstance } from 'vue'
+import { resolveTimelineItemGridStyle, resolveTimelineLabelSpan } from '../composables/timeline-grid'
 import { createTextFitRuntime, type ThemeTextSize } from '../composables/text-fit-runtime'
+import Text from './Text.vue'
+import TextFitGroup from './TextFitGroup.vue'
 
 const TIMELINE_ACTIVE_YEAR_FALLBACK_SIZE: ThemeTextSize = 9
+const timelineFitGroup = `timeline-${getCurrentInstance()?.uid ?? 'default'}`
 
 const props = defineProps({
   items: {
@@ -15,6 +19,7 @@ const timelineElement = shallowRef<HTMLElement | null>(null)
 const activeYearElement = shallowRef<HTMLElement | null>(null)
 const hasActiveItem = computed(() => props.items.some(item => item.active))
 const activeIndices = computed(() => props.items.flatMap((item, itemIndex) => item.active ? [itemIndex] : []))
+const labelSpan = computed(() => resolveTimelineLabelSpan(props.items))
 const TIMELINE_ACTIVE_YEAR_MAX_SIZE = computed<ThemeTextSize>(() => 12)
 const textFit = createTextFitRuntime()
 
@@ -63,38 +68,19 @@ const { size: fittedActiveYearSize } = textFit.useElement({
   ],
 })
 
-const timelineStyle = computed(() => hasActiveItem.value
-  ? {
-      '--theme-timeline-active-year-size': `var(--theme-text-size-${fittedActiveYearSize.value})`,
-      '--theme-timeline-active-year-line': `var(--theme-text-line-${fittedActiveYearSize.value})`,
-    }
-  : {})
+const timelineStyle = computed(() => ({
+  '--theme-timeline-label-width': `var(--theme-grid-span-${labelSpan.value}-width)`,
+  ...(hasActiveItem.value
+    ? {
+        '--theme-timeline-active-year-size': `var(--theme-text-size-${fittedActiveYearSize.value})`,
+        '--theme-timeline-active-year-line': `var(--theme-text-line-${fittedActiveYearSize.value})`,
+      }
+    : {}),
+}))
 
 function getItemGridStyle(index: number) {
-  const count = props.items.length || 1
-  const activeItemIndices = activeIndices.value
-
   assertSingleActiveItem()
-
-  if (count === 3 && activeItemIndices.length === 1) {
-    const activeIndex = activeItemIndices[0]
-    const spans = props.items.map((_, itemIndex) => itemIndex === activeIndex ? 6 : 3)
-    const start = spans.slice(0, index).reduce((sum, span) => sum + span, 1)
-
-    return {
-      gridColumn: `${start} / ${start + spans[index]}`,
-    }
-  }
-
-  if (count > 12)
-    throw new Error('[Timeline] items поддерживает не больше 12 событий.')
-
-  const start = Math.floor((index * 12) / count) + 1
-  const end = Math.floor(((index + 1) * 12) / count) + 1
-
-  return {
-    gridColumn: `${start} / ${end}`,
-  }
+  return resolveTimelineItemGridStyle(props.items, index)
 }
 </script>
 
@@ -110,9 +96,21 @@ function getItemGridStyle(index: number) {
          class="Timeline-Item"
          :style="getItemGridStyle(index)"
          :class="{ 'Timeline-Item_active': item.active }">
-      <div :ref="element => setYearElement(element, item.active)" class="Timeline-Year">{{ item.year }}</div>
+      <div :ref="element => setYearElement(element, item.active)" class="Timeline-Year">
+        <span v-if="item.active">{{ item.year }}</span>
+        <TextFitGroup v-else
+                      class="Timeline-YearFitGroup"
+                      :fit-group="`${timelineFitGroup}-years`">
+          <Text size="4-7">{{ item.year }}</Text>
+        </TextFitGroup>
+      </div>
       <div class="Timeline-Dot" />
-      <div class="Timeline-Label">{{ item.label }}</div>
+      <div class="Timeline-Label">
+        <Text v-if="item.active" size="2-3">{{ item.label }}</Text>
+        <TextFitGroup v-else :fit-group="`${timelineFitGroup}-labels`">
+          <Text size="2-3">{{ item.label }}</Text>
+        </TextFitGroup>
+      </div>
     </div>
   </div>
 </template>
@@ -123,6 +121,7 @@ function getItemGridStyle(index: number) {
   --timeline-dot-size: calc(var(--theme-grid-module) * 4);
   --theme-timeline-active-year-size: var(--theme-text-size-9);
   --theme-timeline-active-year-line: var(--theme-text-line-9);
+  --theme-timeline-label-width: var(--theme-grid-span-3-width);
   position: relative;
   display: grid;
   grid-template-columns: repeat(var(--theme-grid-columns), minmax(0, 1fr));
@@ -143,6 +142,7 @@ function getItemGridStyle(index: number) {
 
 .Timeline-Item {
   position: relative;
+  min-width: 0;
   display: grid;
   grid-template-rows:
     var(--timeline-block-height)
@@ -152,14 +152,18 @@ function getItemGridStyle(index: number) {
 }
 
 .Timeline-Year {
+  min-width: 0;
   min-height: var(--timeline-block-height);
+  padding-right: var(--theme-grid-gap);
   display: flex;
   align-items: flex-end;
-  font-size: var(--theme-text-size-7);
-  line-height: var(--theme-text-line-7);
   color: var(--theme-text);
 }
 
+.Timeline-YearFitGroup {
+  padding-bottom: var(--theme-grid-module);
+}
+
 .Timeline-Dot {
   width: var(--timeline-dot-size);
   height: var(--timeline-dot-size);
@@ -171,11 +175,10 @@ function getItemGridStyle(index: number) {
 
 .Timeline-Label {
   min-height: var(--timeline-block-height);
-  max-width: var(--theme-grid-span-2-width);
+  width: min(100%, var(--theme-timeline-label-width));
+  padding-right: var(--theme-grid-gap);
   padding-top: var(--theme-slot-margin-3);
   color: var(--theme-text-muted);
-  font-size: var(--theme-text-size-2);
-  line-height: var(--theme-text-line-2);
 }
 
 .Timeline_has_active .Timeline-Year {

package/composables/deck-slot-markup.cjs

@@ -0,0 +1,249 @@
+const MarkdownIt = require('markdown-it')
+const { parse } = require('vue/compiler-sfc')
+
+/** @typedef {import('@vue/compiler-core').TemplateChildNode} TemplateChildNode */
+/** @typedef {{ role: string, hasCoordinates: boolean, label: string }} ExplicitSlotIntent */
+/**
+ * @typedef {(
+ *   | { kind: 'comment' }
+ *   | { kind: 'text', content: string }
+ *   | { kind: 'element', tag: string, props: Record<string, unknown>, children: DeckLiveNode[] }
+ * )} DeckLiveNode
+ */
+/** @typedef {{ children: DeckLiveNode[], intents: ExplicitSlotIntent[] }} DeckLiveStructure */
+
+const SLOT_CONTRACT_PROPS = new Set(['role', 'area', 'col', 'row'])
+const SLOT_CONTROL_FLOW_DIRECTIVES = new Set(['if', 'else-if', 'else', 'for'])
+const markdown = new MarkdownIt({ html: true })
+
+/** @param {unknown} error */
+function formatCompilerError(error) {
+  return error instanceof Error ? error.message : String(error)
+}
+
+/**
+ * @param {import('@vue/compiler-core').DirectiveNode} prop
+ * @returns {unknown}
+ */
+function readLiteralBinding(prop) {
+  const ast = prop.exp?.ast
+  if (!ast)
+    return undefined
+
+  if (ast.type === 'StringLiteral'
+    || ast.type === 'NumericLiteral'
+    || ast.type === 'BooleanLiteral') {
+    return ast.value
+  }
+
+  if (ast.type === 'NullLiteral')
+    return null
+
+  if (ast.type === 'TemplateLiteral' && ast.expressions.length === 0)
+    return ast.quasis[0]?.value?.cooked ?? ''
+
+  return undefined
+}
+
+/** @param {string} directive */
+function failSlotControlFlow(directive) {
+  const error = /** @type {Error & { hint: string }} */ (
+    new Error(
+      `[DeckValidator] Slot не поддерживает v-${directive} `
+      + 'на самом компоненте или его предке.',
+    )
+  )
+  error.hint = 'Разверните конечное количество Slot явно, чтобы validator мог проверить role и capacity.'
+  throw error
+}
+
+/** @param {import('@vue/compiler-core').ElementNode} node */
+function controlFlowDirective(node) {
+  return node.props.find(prop =>
+    prop.type === 7
+    && SLOT_CONTROL_FLOW_DIRECTIVES.has(prop.name),
+  )?.name ?? ''
+}
+
+/** @param {TemplateChildNode} node */
+function containsSlot(node) {
+  if (node.type !== 1)
+    return false
+
+  return node.tag === 'Slot' || node.children.some(containsSlot)
+}
+
+/**
+ * @param {import('@vue/compiler-core').ElementNode} node
+ * @returns {Record<string, unknown>}
+ */
+function elementProps(node) {
+  /** @type {Record<string, unknown>} */
+  const props = {}
+
+  for (const prop of node.props) {
+    if (prop.type === 6) {
+      props[prop.name] = prop.value?.content ?? ''
+      continue
+    }
+
+    if (prop.name !== 'bind')
+      continue
+
+    const key = prop.arg?.type === 4 && prop.arg.isStatic
+      ? prop.arg.content
+      : ''
+
+    if (node.tag !== 'Slot'
+      || (!SLOT_CONTRACT_PROPS.has(key) && key !== 'label' && key)) {
+      continue
+    }
+
+    if (!key) {
+      throw new Error(
+        '[DeckValidator] Slot не поддерживает динамический v-bind без статического имени prop.',
+      )
+    }
+
+    const value = readLiteralBinding(prop)
+    if (key === 'label' && value === undefined)
+      continue
+
+    if (value === undefined) {
+      throw new Error(
+        `[DeckValidator] Slot не поддерживает динамический v-bind:${key}; укажите литеральное значение.`,
+      )
+    }
+
+    props[key] = value
+  }
+
+  return props
+}
+
+/**
+ * @param {TemplateChildNode} node
+ * @returns {DeckLiveNode | null}
+ */
+function liveNode(node) {
+  if (node.type === 1) {
+    const directive = controlFlowDirective(node)
+    if (directive && containsSlot(node))
+      failSlotControlFlow(directive)
+
+    return {
+      kind: 'element',
+      tag: node.tag,
+      props: elementProps(node),
+      children: node.children
+        .map(liveNode)
+        .filter(isLiveNode),
+    }
+  }
+
+  if (node.type === 2)
+    return { kind: 'text', content: node.content }
+
+  if (node.type === 3)
+    return { kind: 'comment' }
+
+  if (node.type === 5)
+    return { kind: 'text', content: `{{ ${node.content.loc.source} }}` }
+
+  return null
+}
+
+/**
+ * @param {DeckLiveNode | null} node
+ * @returns {node is DeckLiveNode}
+ */
+function isLiveNode(node) {
+  return node !== null
+}
+
+/**
+ * @param {DeckLiveNode} node
+ * @returns {ExplicitSlotIntent[]}
+ */
+function collectSlotIntents(node) {
+  const nested = node.kind === 'element'
+    ? node.children.flatMap(collectSlotIntents)
+    : []
+
+  if (node.kind !== 'element' || node.tag !== 'Slot')
+    return nested
+
+  const role = String(node.props.role ?? '').trim()
+  const label = String(node.props.label ?? '').trim()
+  const hasCoordinates = ['area', 'col', 'row']
+    .some(key => Boolean(String(node.props[key] ?? '').trim()))
+
+  return [{ role, hasCoordinates, label }, ...nested]
+}
+
+/**
+ * MarkdownIt оборачивает одиночные inline HTML components в `<p>`. Slidev
+ * поднимает component-only параграф обратно в default slot, поэтому validator
+ * нормализует ту же границу.
+ *
+ * @param {DeckLiveNode} node
+ * @returns {DeckLiveNode[]}
+ */
+function normalizeTopLevelNode(node) {
+  if (node.kind !== 'element' || node.tag !== 'p')
+    return [node]
+
+  const meaningful = node.children.filter(child =>
+    child.kind !== 'comment'
+    && !(child.kind === 'text' && !child.content.trim()),
+  )
+
+  if (meaningful.length > 0
+    && meaningful.every(child => child.kind === 'element' && child.tag === 'Slot')) {
+    return meaningful
+  }
+
+  return [node]
+}
+
+/**
+ * Компилирует ровно ту top-level структуру, которую Slidev передаст layout-компоненту:
+ * Markdown уже превращён в HTML, а live Vue-компоненты сохранены как элементы.
+ *
+ * @param {string} content
+ * @returns {DeckLiveStructure}
+ */
+function extractDeckLiveStructure(content) {
+  const rendered = markdown.render(String(content))
+  const source = `<template>${rendered}</template>`
+  const { descriptor, errors } = parse(source, { filename: 'deck-slide.vue' })
+
+  if (errors.length) {
+    throw new Error(
+      `[DeckValidator] Не удалось разобрать live markup слайда: ${errors.map(formatCompilerError).join('; ')}`,
+    )
+  }
+
+  const children = (descriptor.template?.ast?.children ?? [])
+    .map(liveNode)
+    .filter(isLiveNode)
+    .flatMap(normalizeTopLevelNode)
+
+  return {
+    children,
+    intents: children.flatMap(collectSlotIntents),
+  }
+}
+
+/**
+ * @param {string} content
+ * @returns {ExplicitSlotIntent[]}
+ */
+function extractExplicitSlotIntents(content) {
+  return extractDeckLiveStructure(content).intents
+}
+
+module.exports = {
+  extractDeckLiveStructure,
+  extractExplicitSlotIntents,
+}