@troshab/slidev-theme-troshab 0.1.0

package/components/SpeechBubble.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+/**
+ * SpeechBubble component - speech/thought bubbles for quotes and dialogs
+ *
+ * Usage:
+ * <SpeechBubble>Hello!</SpeechBubble>
+ * <SpeechBubble position="left" shape="thought">Hmm...</SpeechBubble>
+ * <SpeechBubble color="info" position="right">Note</SpeechBubble>
+ */
+
+import { computed } from 'vue'
+import type { SemanticColor } from '../composables/useColors'
+
+const props = defineProps<{
+  position?: 'left' | 'right' | 'top' | 'bottom'
+  shape?: 'speech' | 'thought'
+  color?: 'default' | SemanticColor
+  maxWidth?: string
+}>()
+
+const bubbleClass = computed(() => [
+  'speech-bubble',
+  `bubble-${props.position || 'bottom'}`,
+  `bubble-${props.shape || 'speech'}`,
+])
+
+const bubbleStyle = computed(() => {
+  const styles: Record<string, string> = {}
+  if (props.maxWidth) styles.maxWidth = props.maxWidth
+  const c = props.color || 'default'
+  if (c !== 'default') {
+    styles['--bubble-bg'] = `var(--color-${c}-tint)`
+    styles['--bubble-border'] = `var(--color-${c})`
+  }
+  return styles
+})
+</script>
+
+<template>
+  <div :class="bubbleClass" :style="bubbleStyle">
+    <div class="bubble-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style>
+.speech-bubble {
+  --bubble-bg: var(--color-bg-soft);
+  --bubble-border: var(--color-border);
+
+  position: relative;
+  display: inline-block;
+  padding: 1rem 1.25rem;
+  background-color: var(--bubble-bg);
+  border: 1px solid var(--bubble-border);
+  border-radius: 1rem;
+  max-width: 100%;
+  margin-bottom: var(--space-sm);
+}
+
+.bubble-content {
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-body);
+}
+
+.bubble-content p:first-child { margin-top: 0; }
+.bubble-content p:last-child { margin-bottom: 0; }
+
+/* Speech tail: ::before = border, ::after = fill (same size, 1px offset) */
+.bubble-speech.bubble-bottom::after {
+  content: '';
+  position: absolute;
+  bottom: -12px;
+  left: 23px;
+  border-width: 13px 9px 0 9px;
+  border-style: solid;
+  border-color: var(--bubble-bg) transparent transparent transparent;
+}
+
+.bubble-speech.bubble-bottom::before {
+  content: '';
+  position: absolute;
+  bottom: -13px;
+  left: 23px;
+  border-width: 13px 9px 0 9px;
+  border-style: solid;
+  border-color: var(--bubble-border) transparent transparent transparent;
+}
+
+.bubble-speech.bubble-top::after {
+  content: '';
+  position: absolute;
+  top: -12px;
+  left: 23px;
+  border-width: 0 9px 13px 9px;
+  border-style: solid;
+  border-color: transparent transparent var(--bubble-bg) transparent;
+}
+
+.bubble-speech.bubble-top::before {
+  content: '';
+  position: absolute;
+  top: -13px;
+  left: 23px;
+  border-width: 0 9px 13px 9px;
+  border-style: solid;
+  border-color: transparent transparent var(--bubble-border) transparent;
+}
+
+.bubble-speech.bubble-left::after {
+  content: '';
+  position: absolute;
+  left: -12px;
+  top: 15px;
+  border-width: 9px 13px 9px 0;
+  border-style: solid;
+  border-color: transparent var(--bubble-bg) transparent transparent;
+}
+
+.bubble-speech.bubble-left::before {
+  content: '';
+  position: absolute;
+  left: -13px;
+  top: 15px;
+  border-width: 9px 13px 9px 0;
+  border-style: solid;
+  border-color: transparent var(--bubble-border) transparent transparent;
+}
+
+.bubble-speech.bubble-right::after {
+  content: '';
+  position: absolute;
+  right: -12px;
+  top: 15px;
+  border-width: 9px 0 9px 13px;
+  border-style: solid;
+  border-color: transparent transparent transparent var(--bubble-bg);
+}
+
+.bubble-speech.bubble-right::before {
+  content: '';
+  position: absolute;
+  right: -13px;
+  top: 15px;
+  border-width: 9px 0 9px 13px;
+  border-style: solid;
+  border-color: transparent transparent transparent var(--bubble-border);
+}
+
+/* Thought bubble (circles) */
+.bubble-thought::after,
+.bubble-thought::before {
+  content: '';
+  position: absolute;
+  background-color: var(--bubble-bg);
+  border: 1px solid var(--bubble-border);
+  border-radius: 50%;
+}
+
+.bubble-thought.bubble-bottom::after  { width: 16px; height: 16px; bottom: -10px; left: 32px; }
+.bubble-thought.bubble-bottom::before { width: 10px; height: 10px; bottom: -20px; left: 24px; }
+.bubble-thought.bubble-top::after     { width: 16px; height: 16px; top: -10px; left: 32px; }
+.bubble-thought.bubble-top::before    { width: 10px; height: 10px; top: -20px; left: 24px; }
+.bubble-thought.bubble-left::after    { width: 16px; height: 16px; left: -10px; top: 20px; }
+.bubble-thought.bubble-left::before   { width: 10px; height: 10px; left: -22px; top: 16px; }
+.bubble-thought.bubble-right::after   { width: 16px; height: 16px; right: -10px; top: 20px; }
+.bubble-thought.bubble-right::before  { width: 10px; height: 10px; right: -22px; top: 16px; }
+</style>

package/components/Stepper.vue

@@ -0,0 +1,542 @@
+<script setup lang="ts">
+/**
+ * Stepper component - unified step/progress/timeline visualization
+ *
+ * Replaces Timeline, TimelineItem, Steps, ProcessFlow.
+ *
+ * <Stepper :items="['Plan', 'Build', 'Test']" variant="numbers" />
+ * <Stepper :items="items" direction="vertical" variant="dots" mode="clicks" />
+ * <Stepper :items="['A', 'B', 'C']" mode="clicks">
+ *   <template #step1>Panel A</template>
+ *   <template #step2>Panel B</template>
+ * </Stepper>
+ */
+
+import type { ClicksContext } from '@slidev/types'
+import { computed, inject, ref, useSlots, onMounted, onUnmounted, watchEffect, type Ref } from 'vue'
+import type { SemanticColor } from '../composables/useColors'
+import { semanticColorVar, semanticForegroundVar } from '../composables/useColors'
+
+interface StepperItem {
+  label: string
+  date?: string
+  description?: string
+}
+
+type VAlign = 'top' | 'center' | 'bottom'
+
+const props = withDefaults(defineProps<{
+  items: string[] | StepperItem[]
+  variant?: 'dots' | 'numbers' | 'arrows'
+  direction?: 'horizontal' | 'vertical'
+  mode?: 'static' | 'clicks'
+  current?: number
+  color?: SemanticColor
+  trackValign?: VAlign
+  contentValign?: VAlign
+}>(), {
+  variant: 'numbers',
+  direction: 'horizontal',
+  mode: 'static',
+  color: 'primary',
+  trackValign: 'center',
+  contentValign: 'center',
+})
+
+const slots = useSlots()
+
+// Normalize items to StepperItem[]
+const normalizedItems = computed<StepperItem[]>(() =>
+  props.items.map(item =>
+    typeof item === 'string' ? { label: item } : item,
+  ),
+)
+
+// Slidev clicks context
+const defaultClicksContext: ClicksContext = {
+  current: 0,
+  clicksStart: 0,
+  total: 0,
+  isMounted: false,
+  currentOffset: 0,
+  relativeSizeMap: new Map(),
+  maxMap: new Map(),
+  setup: () => {},
+  calculateSince: () => null,
+  calculateRange: () => null,
+  calculate: () => null,
+  register: () => {},
+  unregister: () => {},
+}
+const clicksContext = inject<Ref<ClicksContext>>('$$slidev-clicks-context', ref(defaultClicksContext))
+
+// --- Auto v-click registration (clicks mode) ---
+const rootEl = ref<HTMLElement | null>(null)
+const autoActiveStep = ref(1)
+const isAutoRegistered = ref(false)
+
+onMounted(() => {
+  if (props.mode !== 'clicks') return
+  const ctx = clicksContext.value
+  if (!ctx?.calculateSince || !rootEl.value) return
+
+  const size = normalizedItems.value.length - 1
+  if (size <= 0) return
+
+  const info = ctx.calculateSince('+1', size)
+  if (!info) return
+
+  ctx.register(rootEl.value, info)
+  isAutoRegistered.value = true
+
+  const isActiveRef = info.isActive
+  const offsetRef = info.currentOffset
+
+  watchEffect(() => {
+    const active = isActiveRef.value
+    const offset = offsetRef.value
+    autoActiveStep.value = active ? Math.min(offset + 2, normalizedItems.value.length) : 1
+  })
+})
+
+onUnmounted(() => {
+  if (isAutoRegistered.value && clicksContext.value?.unregister && rootEl.value) {
+    clicksContext.value.unregister(rootEl.value)
+  }
+})
+
+// Active step (1-indexed)
+const activeStep = computed(() => {
+  if (props.mode === 'clicks') {
+    if (isAutoRegistered.value) return autoActiveStep.value
+    // Fallback: direct click count (non-Slidev contexts)
+    const clicks = clicksContext.value?.current ?? 0
+    return Math.min(clicks + 1, normalizedItems.value.length)
+  }
+  return props.current
+})
+
+// Content slots
+const hasContent = computed(() =>
+  normalizedItems.value.some((_, i) => slots[`step${i + 1}`]),
+)
+
+// Marker size CSS var per variant
+const markerSize = computed(() => {
+  switch (props.variant) {
+    case 'dots': return '0.75rem'
+    case 'numbers': return '2rem'
+    case 'arrows': return '3rem'
+  }
+})
+
+// Vertical alignment mapping
+const valignMap: Record<VAlign, string> = {
+  top: 'flex-start',
+  center: 'center',
+  bottom: 'flex-end',
+}
+
+// CSS custom properties
+const cssVars = computed(() => ({
+  '--stepper-color': semanticColorVar[props.color],
+  '--stepper-foreground': semanticForegroundVar[props.color],
+  '--stepper-marker-size': markerSize.value,
+  '--stepper-track-valign': valignMap[props.trackValign],
+  '--stepper-content-valign': valignMap[props.contentValign],
+}))
+
+// Step status helpers
+function isCompleted(index: number) {
+  return activeStep.value !== undefined && index + 1 < activeStep.value
+}
+
+function isActive(index: number) {
+  return index + 1 === activeStep.value
+}
+
+function isUpcoming(index: number) {
+  if (props.mode !== 'clicks') return false
+  return activeStep.value !== undefined && index + 1 > activeStep.value
+}
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    class="stepper"
+    :class="[
+      `stepper-${variant}`,
+      `stepper-${direction}`,
+    ]"
+    :style="cssVars"
+  >
+    <!-- Track -->
+    <div class="stepper-track">
+      <template v-for="(item, index) in normalizedItems" :key="index">
+        <div
+          class="stepper-step"
+          :class="{
+            'is-active': isActive(index),
+            'is-completed': isCompleted(index),
+            'is-upcoming': isUpcoming(index),
+          }"
+        >
+          <!-- Marker -->
+          <div class="stepper-marker">
+            <!-- Completed check (numbers + arrows only) -->
+            <template v-if="isCompleted(index) && variant !== 'dots'">
+              <svg class="stepper-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            </template>
+            <!-- Number (numbers + arrows) -->
+            <template v-else-if="variant !== 'dots'">
+              {{ index + 1 }}
+            </template>
+            <!-- Dots: empty circle, no content -->
+          </div>
+
+          <!-- Label + description (inside step for layout) -->
+          <div class="stepper-label-group">
+            <span v-if="item.date" class="stepper-date">{{ item.date }}</span>
+            <span class="stepper-label">{{ item.label }}</span>
+            <span v-if="item.description" class="stepper-description">{{ item.description }}</span>
+          </div>
+        </div>
+
+        <!-- Connector (not on last) -->
+        <div
+          v-if="index < normalizedItems.length - 1"
+          class="stepper-connector"
+          :class="{ 'is-completed': isCompleted(index) }"
+        >
+          <span v-if="variant === 'arrows'" class="stepper-arrow-char">
+            {{ direction === 'horizontal' ? '\u2192' : '\u2193' }}
+          </span>
+        </div>
+      </template>
+    </div>
+
+    <!-- Content area (clicks mode with slots) -->
+    <div v-if="hasContent && mode === 'clicks'" class="stepper-content">
+      <Transition name="stepper-panel" mode="out-in">
+        <div
+          v-if="activeStep !== undefined"
+          :key="activeStep"
+          class="stepper-panel"
+        >
+          <slot :name="`step${activeStep}`" />
+        </div>
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.stepper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 4px;
+}
+
+/* ===== Track ===== */
+
+.stepper-track {
+  display: flex;
+  align-items: flex-start;
+}
+
+.stepper-horizontal .stepper-track {
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.stepper-vertical .stepper-track {
+  flex-direction: column;
+  gap: 0;
+}
+
+/* ===== Step ===== */
+
+.stepper-step {
+  display: flex;
+  align-items: center;
+}
+
+.stepper-horizontal .stepper-step {
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.stepper-horizontal.stepper-arrows .stepper-step {
+  flex: 1;
+}
+
+.stepper-vertical .stepper-step {
+  flex-direction: row;
+  gap: var(--space-sm);
+}
+
+.stepper-step.is-upcoming {
+  opacity: 0.4;
+}
+
+/* ===== Marker ===== */
+
+.stepper-marker {
+  width: var(--stepper-marker-size);
+  height: var(--stepper-marker-size);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition:
+    background-color var(--dur-moderate-02, 240ms) var(--ease-standard, ease),
+    color var(--dur-moderate-02, 240ms) var(--ease-standard, ease),
+    transform var(--dur-moderate-01, 150ms) var(--ease-expressive, ease);
+}
+
+/* -- Dots variant -- */
+
+.stepper-dots .stepper-marker {
+  background-color: var(--color-bg-muted);
+}
+
+.stepper-dots .stepper-step.is-active .stepper-marker {
+  background-color: var(--stepper-color);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stepper-color) 30%, transparent);
+}
+
+.stepper-dots .stepper-step.is-completed .stepper-marker {
+  background-color: var(--color-success);
+}
+
+/* -- Numbers variant -- */
+
+.stepper-numbers .stepper-marker {
+  background-color: var(--color-bg-muted);
+  color: var(--color-text);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-bold);
+}
+
+.stepper-numbers .stepper-step.is-active .stepper-marker {
+  background-color: var(--stepper-color);
+  color: var(--stepper-foreground);
+  transform: scale(1.15);
+}
+
+.stepper-numbers .stepper-step.is-completed .stepper-marker {
+  background-color: var(--color-success);
+  color: var(--color-success-foreground);
+}
+
+/* -- Arrows variant -- */
+
+.stepper-arrows .stepper-marker {
+  background-color: var(--color-bg-muted);
+  color: var(--color-text);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-bold);
+}
+
+.stepper-arrows .stepper-step.is-active .stepper-marker {
+  background-color: var(--stepper-color);
+  color: var(--stepper-foreground);
+  transform: scale(1.1);
+}
+
+.stepper-arrows .stepper-step.is-completed .stepper-marker {
+  background-color: var(--color-success);
+  color: var(--color-success-foreground);
+}
+
+/* ===== Check SVG ===== */
+
+.stepper-check {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* ===== Labels ===== */
+
+.stepper-label-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.stepper-horizontal .stepper-label-group {
+  align-items: center;
+  margin-top: 0.5rem;
+}
+
+.stepper-vertical .stepper-label-group {
+  padding-bottom: 0;
+}
+
+.stepper-date {
+  font-size: var(--font-size-small);
+  color: var(--stepper-color);
+  font-weight: var(--font-weight-medium);
+  margin-bottom: 0.125rem;
+}
+
+.stepper-label {
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-semibold);
+}
+
+.stepper-description {
+  font-size: var(--font-size-small);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-body);
+  margin-top: 0.125rem;
+}
+
+/* ===== Connectors ===== */
+
+.stepper-connector {
+  position: relative;
+}
+
+/* Horizontal connectors */
+
+.stepper-horizontal .stepper-connector {
+  height: 2px;
+  flex: 0 0 2rem;
+  background-color: var(--color-border);
+  overflow: hidden;
+  margin-top: calc(var(--stepper-marker-size) / 2 - 1px);
+}
+
+/* dots: same margin-top formula from parent rule applies */
+
+.stepper-horizontal .stepper-connector::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 0%;
+  background-color: var(--color-success);
+  transition: width var(--dur-moderate-02, 240ms) var(--ease-standard, ease);
+}
+
+.stepper-horizontal .stepper-connector.is-completed::after {
+  width: 100%;
+}
+
+/* Arrows variant: no line, show arrow character */
+
+.stepper-horizontal.stepper-arrows .stepper-connector {
+  height: auto;
+  background: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  margin-top: calc(var(--stepper-marker-size) / 2 - 1rem);
+}
+
+.stepper-horizontal.stepper-arrows .stepper-connector::after {
+  display: none;
+}
+
+.stepper-arrow-char {
+  color: var(--color-text-tertiary);
+  font-size: 2rem;
+  line-height: 1;
+}
+
+.stepper-connector.is-completed .stepper-arrow-char {
+  color: var(--color-success);
+}
+
+/* Vertical connectors */
+
+.stepper-vertical .stepper-connector {
+  width: 2px;
+  min-height: 1rem;
+  flex: 0 0 auto;
+  background-color: var(--color-border);
+  margin-left: calc(var(--stepper-marker-size) / 2 - 1px);
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.stepper-vertical.stepper-arrows .stepper-connector {
+  background: none;
+  display: flex;
+  align-items: center;
+  margin-left: calc(var(--stepper-marker-size) / 2 - 0.5rem);
+}
+
+.stepper-vertical .stepper-connector.is-completed {
+  background-color: var(--color-success);
+}
+
+.stepper-vertical.stepper-arrows .stepper-connector.is-completed {
+  background: none;
+}
+
+/* ===== Content area ===== */
+
+.stepper-content {
+  margin-top: var(--space-md);
+  min-height: 4rem;
+}
+
+/* Vertical + content: side-by-side layout (track left, content right) */
+.stepper-vertical:has(.stepper-content) {
+  flex-direction: row;
+  gap: var(--space-lg);
+  flex: 1;
+}
+
+.stepper-vertical:has(.stepper-content) .stepper-track {
+  flex-shrink: 0;
+  align-self: var(--stepper-track-valign, center);
+}
+
+.stepper-vertical:has(.stepper-content) .stepper-content {
+  flex: 1;
+  margin-top: 0;
+  min-height: 0;
+  align-self: var(--stepper-content-valign, center);
+}
+
+.stepper-panel :deep(:first-child) {
+  margin-block-start: 0;
+}
+</style>
+
+<!-- Transition classes must be unscoped (Vue requirement) -->
+<style>
+.stepper-panel-enter-active {
+  transition:
+    opacity var(--dur-moderate-02, 240ms) var(--ease-enter, ease-out),
+    transform var(--dur-moderate-02, 240ms) var(--ease-enter, ease-out);
+}
+
+.stepper-panel-leave-active {
+  transition:
+    opacity var(--dur-fast-02, 110ms) var(--ease-exit, ease-in),
+    transform var(--dur-fast-02, 110ms) var(--ease-exit, ease-in);
+}
+
+.stepper-panel-enter-from {
+  opacity: 0;
+  transform: translateY(var(--shift-sm, 12px));
+}
+
+.stepper-panel-leave-to {
+  opacity: 0;
+  transform: translateY(calc(var(--shift-xs, 8px) * -1));
+}
+</style>