slidev-theme-practicum 0.1.0

package/components/Slot.vue

@@ -0,0 +1,419 @@
+<script setup lang="ts">
+import { useSlideContext } from '@slidev/client'
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  isVNode,
+  onBeforeUnmount,
+  shallowRef,
+  watchEffect,
+  type CSSProperties,
+  type PropType,
+  type VNode,
+} from 'vue'
+import ImageRenderer from './ImageRenderer.vue'
+import { createThemeMedia } from '../composables/theme-media.mjs'
+import type { ThemeLayoutSlotSpec } from '../composables/layout-registry'
+import { useSlotPlacementSession, type ResolvedSlotPlacement } from '../composables/slot-placement'
+import { createTextFitRuntime } from '../composables/text-fit-runtime'
+import { useThemeConfig } from '../composables/use-theme-config'
+import { resolveSlotTheme, themeVars, type ThemeSlotSurface } from '../composables/theme-foundation'
+import { camelToKebab } from '../composables/layout-vnode'
+
+type SlotMarginLevel = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
+type SlotMarginInput = SlotMarginLevel | `${SlotMarginLevel}`
+type SlotGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7
+type SlotGapInput = SlotGap | `${SlotGap}`
+type SlotRole = 'primary' | 'secondary' | 'support' | 'media'
+type SlotSurfaceInput = ThemeSlotSurface
+type ImageDataInput = {
+  src: string
+  fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'
+  position?: string
+  anchor?: string
+  x?: number | string
+  y?: number | string
+  zoom?: number | string
+  rotate?: number | string
+  color?: string
+  opacity?: number | string
+  backgroundColor?: string
+} & {
+  'background-color'?: string
+}
+type SlotBackgroundInput = ImageDataInput | ImageDataInput[]
+type SlotDecorInput = Omit<Partial<ImageDataInput>, 'src'> & {
+  src?: string
+  id?: string
+  meaning?: string
+  tone?: string
+}
+
+const SLOT_MARGIN_LEVELS = new Set<`${SlotMarginLevel}`>(['1', '2', '3', '4', '5', '6', '7', '8'])
+const SLOT_GAP_LEVELS = new Set<`${SlotGap}`>(['0', '1', '2', '3', '4', '5', '6', '7'])
+const layoutOverrideKeys = [
+  'surface',
+  'tone',
+  'margin',
+  'marginTop',
+  'marginRight',
+  'marginBottom',
+  'marginLeft',
+  'centered',
+] as const satisfies readonly (keyof ThemeLayoutSlotSpec)[]
+
+const SlotContent = defineComponent({
+  name: 'SlotContent',
+  props: {
+    contentStyle: {
+      type: Object as PropType<CSSProperties>,
+      required: true,
+    },
+  },
+  setup(contentProps, { slots }) {
+    const contentElement = shallowRef<HTMLElement | null>(null)
+    let currentChildren: VNode[] = []
+    const textFit = createTextFitRuntime()
+    const { apply } = textFit.useGroup({
+      target: contentElement,
+      nodes: () => currentChildren,
+    })
+
+    return () => {
+      const children = (slots.default?.() ?? []).filter(isVNode)
+      currentChildren = children
+
+      return h('div', {
+        ref: contentElement,
+        class: 'Slot-Content',
+        style: contentProps.contentStyle,
+      }, apply(children))
+    }
+  },
+})
+
+const props = withDefaults(defineProps<{
+  as?: string
+  role?: SlotRole
+  area?: string
+  col?: string
+  row?: string
+  label?: string
+  surface?: SlotSurfaceInput
+  tone?: string
+  background?: SlotBackgroundInput
+  decor?: SlotDecorInput
+  margin?: SlotMarginInput
+  marginTop?: SlotMarginInput
+  marginRight?: SlotMarginInput
+  marginBottom?: SlotMarginInput
+  marginLeft?: SlotMarginInput
+  gap?: SlotGapInput
+  centered?: boolean
+}>(), {
+  as: 'section',
+  role: undefined,
+  area: '',
+  col: '',
+  row: '',
+  label: '',
+  surface: 'none',
+  tone: '',
+  background: undefined,
+  decor: undefined,
+  gap: '0',
+  centered: false,
+})
+
+const slotId = `theme-slot-${Math.random().toString(36).slice(2, 10)}`
+const instance = getCurrentInstance()
+const placementSession = useSlotPlacementSession()
+const { defaultTone, deckTitle, decors } = useThemeConfig()
+const { $slidev } = useSlideContext()
+const resolvedRect = shallowRef<ResolvedSlotPlacement['rect'] | null>(null)
+const resolvedFootprint = shallowRef<ResolvedSlotPlacement['footprint'] | null>(null)
+const resolvedLayoutSlot = shallowRef<ResolvedSlotPlacement['layoutSlot']>(null)
+const placementStyle = shallowRef<ResolvedSlotPlacement['style']>({
+  gridColumn: 'auto',
+  gridRow: 'auto',
+})
+
+function hasAuthoredProp(key: string) {
+  const vnodeProps = instance?.vnode.props ?? {}
+  const kebabKey = camelToKebab(key)
+  return key in vnodeProps || kebabKey in vnodeProps
+}
+
+function readLayoutOverrides() {
+  const overrides: Partial<ThemeLayoutSlotSpec> = {}
+
+  for (const key of layoutOverrideKeys) {
+    if (!hasAuthoredProp(key))
+      continue
+
+    const value = props[key]
+    if (key === 'tone' && !value)
+      continue
+
+    overrides[key] = value as never
+  }
+
+  return overrides
+}
+
+function readPlacementInput() {
+  return {
+    id: slotId,
+    label: props.label || slotId,
+    role: props.role,
+    area: props.area,
+    col: props.col,
+    row: props.row,
+    overrides: readLayoutOverrides(),
+  }
+}
+
+function applyPlacement(placement: ResolvedSlotPlacement) {
+  resolvedRect.value = placement.rect
+  resolvedFootprint.value = placement.footprint
+  resolvedLayoutSlot.value = placement.layoutSlot
+  placementStyle.value = placement.style
+}
+
+const placementHandle = placementSession.register(readPlacementInput(), applyPlacement)
+
+watchEffect(() => {
+  placementHandle.update(readPlacementInput())
+})
+
+onBeforeUnmount(() => {
+  placementHandle.dispose()
+})
+
+const resolvedSurface = computed(() => resolveSlotTheme({
+  surface: resolvedLayoutSlot.value?.surface ?? props.surface ?? 'none',
+  tone: resolvedLayoutSlot.value?.tone ?? props.tone ?? '',
+  defaultTone: defaultTone.value,
+  label: props.label || slotId,
+}))
+
+const slotStyle = computed(() => ({
+  ...placementStyle.value,
+  ...themeVars('slot', resolvedSurface.value),
+}))
+
+function readDecorToken(value: unknown) {
+  return typeof value === 'string' && value.trim() ? value.trim() : ''
+}
+
+const slideIndex = computed(() => {
+  const nav = $slidev?.nav as { currentPage?: unknown } | undefined
+  const currentPage = Number(nav?.currentPage)
+
+  return Number.isFinite(currentPage) ? String(currentPage) : ''
+})
+
+const decorSlotIdentity = computed(() => {
+  if (props.label)
+    return props.label
+
+  if (props.area)
+    return props.area
+
+  if (props.col || props.row)
+    return `${props.col}|${props.row}`
+
+  if (resolvedRect.value) {
+    return `${props.role || 'slot'}|${resolvedRect.value.colStart}-${resolvedRect.value.rowStart}-${resolvedRect.value.colEnd}-${resolvedRect.value.rowEnd}`
+  }
+
+  return 'slot'
+})
+
+const decorSeed = computed(() => [
+  deckTitle.value,
+  slideIndex.value,
+  decorSlotIdentity.value,
+  readDecorToken(props.decor?.id),
+  readDecorToken(props.decor?.meaning),
+  readDecorToken(props.decor?.tone),
+].filter(Boolean).join('|'))
+
+const media = computed(() => createThemeMedia({
+  themeCatalog: decors.value,
+  warn: (message: string) => console.warn(message),
+}))
+
+const backgroundLayers = computed(() =>
+  media.value.resolveSlotLayers({
+    background: props.background,
+    decor: props.decor,
+  }, {
+    label: props.label || slotId,
+    footprint: resolvedFootprint.value,
+    seed: decorSeed.value,
+    tone: resolvedSurface.value.tone,
+    contrast: resolvedSurface.value.surface === 'dark' || resolvedSurface.value.surface === 'color',
+  }),
+)
+
+function resolveMarginCssValue(value: SlotMarginInput | undefined) {
+  if (value == null)
+    return undefined
+
+  const normalizedValue = String(value) as `${SlotMarginLevel}`
+  if (!SLOT_MARGIN_LEVELS.has(normalizedValue)) {
+    throw new Error(`[${props.label || slotId}] margin должен быть уровнем 1..8. Получено: "${String(value)}".`)
+  }
+
+  return `var(--theme-slot-margin-${normalizedValue})`
+}
+
+function resolveGapCssValue(value: SlotGapInput | undefined) {
+  if (value == null)
+    return '0'
+
+  const normalizedValue = String(value) as `${SlotGap}`
+  if (normalizedValue === '0')
+    return '0'
+
+  if (!SLOT_GAP_LEVELS.has(normalizedValue)) {
+    throw new Error(`[${props.label || slotId}] gap должен быть уровнем 0..7. Получено: "${String(value)}".`)
+  }
+
+  return `var(--theme-slot-margin-${normalizedValue})`
+}
+
+const marginStyle = computed(() => {
+  const layoutSlot = resolvedLayoutSlot.value
+  const margin = layoutSlot?.margin ?? props.margin
+  const style = {
+    paddingTop: resolveMarginCssValue(layoutSlot?.marginTop ?? props.marginTop ?? margin),
+    paddingRight: resolveMarginCssValue(layoutSlot?.marginRight ?? props.marginRight ?? margin),
+    paddingBottom: resolveMarginCssValue(layoutSlot?.marginBottom ?? props.marginBottom ?? margin),
+    paddingLeft: resolveMarginCssValue(layoutSlot?.marginLeft ?? props.marginLeft ?? margin),
+  }
+
+  if (Object.values(style).every(value => value == null))
+    return null
+
+  return style
+})
+
+const contentStyle = computed(() => ({
+  ...(marginStyle.value ?? {}),
+  '--theme-slot-gap': resolveGapCssValue(props.gap),
+}))
+
+const alignmentClass = computed(() => ({
+  Slot_centered: resolvedLayoutSlot.value?.centered ?? props.centered,
+}))
+
+const surfaceClass = computed(() => {
+  if (resolvedSurface.value.surface === 'none')
+    return null
+
+  return `Slot_surface_${resolvedSurface.value.surface}`
+})
+</script>
+
+<template>
+  <component :is="as"
+             class="Slot"
+             :class="[
+               alignmentClass,
+               surfaceClass,
+             ]"
+             :style="slotStyle">
+    <div v-if="backgroundLayers.length" class="Slot-Background" aria-hidden="true">
+      <ImageRenderer v-for="backgroundLayer in backgroundLayers"
+                     :key="backgroundLayer.key"
+                     class="Slot-BackgroundLayer"
+                     :layer="backgroundLayer" />
+    </div>
+    <SlotContent :content-style="contentStyle">
+      <slot />
+    </SlotContent>
+  </component>
+</template>
+
+<style scoped>
+.Slot {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--theme-panel-radius);
+}
+
+.Slot-Background {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+.Slot-BackgroundLayer {
+  position: absolute;
+  inset: 0;
+}
+
+.Slot-Content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  border-radius: inherit;
+  gap: var(--theme-slot-gap, 0);
+  align-items: stretch;
+}
+
+.Slot_surface_none {
+  background: transparent;
+}
+
+.Slot_surface_light {
+  background: var(--theme-surface-light);
+  --theme-text: var(--theme-color-dark-0);
+  --theme-text-muted: var(--theme-color-dark-2);
+  --theme-inline-code-text: var(--theme-text);
+  color: var(--theme-text);
+}
+
+.Slot_surface_dark {
+  background: var(--theme-surface-dark);
+  --theme-text: var(--theme-text-on-dark);
+  --theme-text-muted: var(--theme-text-muted-on-contrast);
+  --theme-inline-code-text: var(--theme-text);
+  color: var(--theme-text);
+}
+
+.Slot_surface_color {
+  background: var(--theme-slot-color, var(--theme-current-color));
+  --theme-text: var(--theme-text-on-dark);
+  --theme-text-muted: var(--theme-text-muted-on-contrast);
+  --theme-inline-code-text: var(--theme-text);
+  color: var(--theme-text);
+}
+
+.Slot_surface_tint {
+  background: var(--theme-slot-tint, var(--theme-surface-light));
+  --theme-text: var(--theme-color-dark-0);
+  --theme-text-muted: var(--theme-color-dark-2);
+  --theme-inline-code-text: var(--theme-text);
+  color: var(--theme-text);
+}
+
+.Slot_centered .Slot-Content {
+  align-items: center;
+  text-align: center;
+}
+</style>

package/components/Text.vue

@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { computed, shallowRef } from 'vue'
+import {
+  createTextFitRuntime,
+  parseThemeTextSizeRange,
+  type ThemeTextSize,
+  type ThemeTextSizeInput,
+} from '../composables/text-fit-runtime'
+
+type ThemeTextPriority = 1 | 2 | 3
+type ThemeTextPriorityInput = ThemeTextPriority | `${ThemeTextPriority}`
+type TextFlowAlign = 'start' | 'middle' | 'end'
+type TextColorToken =
+  | 'current'
+  | 'text'
+  | 'text-muted'
+  | 'text-on-dark'
+  | 'text-muted-on-contrast'
+  | 'link'
+  | 'light-0'
+  | 'light-1'
+  | 'dark-0'
+  | 'dark-1'
+  | 'dark-2'
+  | 'blue-0'
+  | 'blue-1'
+  | 'orange-0'
+  | 'orange-1'
+  | 'green-0'
+  | 'green-1'
+  | 'red-0'
+  | 'yellow-0'
+
+const TEXT_COLOR_MAP: Record<TextColorToken, string> = {
+  'current': 'currentColor',
+  'text': 'var(--theme-text)',
+  'text-muted': 'var(--theme-text-muted)',
+  'text-on-dark': 'var(--theme-text-on-dark)',
+  'text-muted-on-contrast': 'var(--theme-text-muted-on-contrast)',
+  'link': 'var(--theme-link)',
+  'light-0': 'var(--theme-color-light-0)',
+  'light-1': 'var(--theme-color-light-1)',
+  'dark-0': 'var(--theme-color-dark-0)',
+  'dark-1': 'var(--theme-color-dark-1)',
+  'dark-2': 'var(--theme-color-dark-2)',
+  'blue-0': 'var(--theme-color-blue-0)',
+  'blue-1': 'var(--theme-color-blue-1)',
+  'orange-0': 'var(--theme-color-orange-0)',
+  'orange-1': 'var(--theme-color-orange-1)',
+  'green-0': 'var(--theme-color-green-0)',
+  'green-1': 'var(--theme-color-green-1)',
+  'red-0': 'var(--theme-color-red-0)',
+  'yellow-0': 'var(--theme-color-yellow-0)',
+}
+
+const props = withDefaults(defineProps<{
+  as?: string
+  size?: ThemeTextSizeInput
+  priority?: ThemeTextPriorityInput
+  align?: TextFlowAlign
+  maxSize?: boolean
+  muted?: boolean
+  color?: TextColorToken
+}>(), {
+  as: 'div',
+  size: '2',
+  priority: '1',
+  align: 'start',
+  maxSize: false,
+  muted: false,
+  color: 'current',
+})
+
+const textElement = shallowRef<HTMLElement | null>(null)
+const normalizedSizeRange = computed(() => parseThemeTextSizeRange(props.size, 2))
+const fitMax = computed(() => props.maxSize || normalizedSizeRange.value.isRange)
+const fitMinSize = computed<ThemeTextSize>(() => props.maxSize ? 0 : normalizedSizeRange.value.minSize)
+const fitMaxSize = computed<ThemeTextSize>(() => props.maxSize ? 12 : normalizedSizeRange.value.maxSize)
+const fitFallbackSize = computed<ThemeTextSize>(() => normalizedSizeRange.value.minSize)
+const textFit = createTextFitRuntime()
+const { size: fittedSize } = textFit.useElement({
+  target: textElement,
+  enabled: fitMax,
+  fallbackSize: fitFallbackSize,
+  minSize: fitMinSize,
+  maxSize: fitMaxSize,
+  watchSources: [
+    () => props.size,
+    () => props.maxSize,
+    () => props.priority,
+  ],
+})
+
+const normalizedSize = computed(() => {
+  if (fitMax.value)
+    return fittedSize.value
+
+  return normalizedSizeRange.value.minSize
+})
+
+const resolvedColor = computed<TextColorToken>(() => props.muted ? 'text-muted' : props.color)
+
+const textStyle = computed(() => ({
+  color: TEXT_COLOR_MAP[resolvedColor.value],
+}))
+</script>
+
+<template>
+  <component :is="as"
+             ref="textElement"
+             class="Text"
+             :class="[
+               `Text_size_${normalizedSize}`,
+               {
+                 Text_align_start: props.align === 'start',
+                 Text_align_middle: props.align === 'middle',
+                 Text_align_end: props.align === 'end',
+                 Text_fit_max: fitMax,
+                 Text_muted: props.muted,
+               },
+             ]"
+             :style="textStyle">
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.Text {
+  min-width: 0;
+  margin: 0;
+  font-weight: 400;
+}
+
+.Text_fit_max {
+  width: 100%;
+}
+
+.Text_align_start {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.Text_align_middle {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.Text_align_end {
+  margin-top: auto;
+}
+
+.Text_size_0 {
+  font-size: var(--theme-text-size-0);
+  line-height: var(--theme-text-line-0);
+}
+
+.Text_size_1 {
+  font-size: var(--theme-text-size-1);
+  line-height: var(--theme-text-line-1);
+}
+
+.Text_size_2 {
+  font-size: var(--theme-text-size-2);
+  line-height: var(--theme-text-line-2);
+}
+
+.Text_size_3 {
+  font-size: var(--theme-text-size-3);
+  line-height: var(--theme-text-line-3);
+}
+
+.Text_size_4 {
+  font-size: var(--theme-text-size-4);
+  line-height: var(--theme-text-line-4);
+}
+
+.Text_size_5 {
+  font-size: var(--theme-text-size-5);
+  line-height: var(--theme-text-line-5);
+}
+
+.Text_size_6 {
+  font-size: var(--theme-text-size-6);
+  line-height: var(--theme-text-line-6);
+}
+
+.Text_size_7 {
+  font-size: var(--theme-text-size-7);
+  line-height: var(--theme-text-line-7);
+}
+
+.Text_size_8 {
+  font-size: var(--theme-text-size-8);
+  line-height: var(--theme-text-line-8);
+}
+
+.Text_size_9 {
+  font-size: var(--theme-text-size-9);
+  line-height: var(--theme-text-line-9);
+}
+
+.Text_size_10 {
+  font-size: var(--theme-text-size-10);
+  line-height: var(--theme-text-line-10);
+}
+
+.Text_size_11 {
+  font-size: var(--theme-text-size-11);
+  line-height: var(--theme-text-line-11);
+}
+
+.Text_size_12 {
+  font-size: var(--theme-text-size-12);
+  line-height: var(--theme-text-line-12);
+}
+</style>