@troshab/slidev-theme-troshab 0.1.0

package/components/Confetti.vue

@@ -0,0 +1,292 @@
+<script setup lang="ts">
+/**
+ * Confetti — celebration effect for background slots.
+ *
+ * Smart v-click integration:
+ *   - No `at` prop (default): auto-registers one click slot, fires on click
+ *   - `at="0"`: fires on slide enter (no click registration)
+ *   - `at="-1"`: manual only (call fire() via ref)
+ *
+ *   ::bg::
+ *   <Confetti />                          <!-- auto v-click -->
+ *   <Confetti :at="0" />                  <!-- fires on slide enter -->
+ *   <Confetti :at="0" :particleCount="100" :spread="90" />
+ */
+
+import { ref, unref, computed, inject, watch, watchEffect, onMounted, onUnmounted } from 'vue'
+import type { Ref } from 'vue'
+
+const defaultClicksContext = { current: 0 }
+const defaultNav = { currentSlideNo: -1 }
+
+const props = withDefaults(defineProps<{
+  at?: number               // undefined = auto-register click, 0 = on slide enter, -1 = manual
+  colors?: string[]
+  particleCount?: number
+  spread?: number
+  duration?: number
+  origin?: { x: number; y: number }
+}>(), {
+  particleCount: 50,
+  spread: 70,
+  duration: 3000,
+  origin: () => ({ x: 0.5, y: 0.5 })
+})
+
+function getThemeColors(): string[] {
+  const style = getComputedStyle(document.documentElement)
+  const get = (v: string) => style.getPropertyValue(v).trim()
+  return [
+    get('--color-primary'),
+    get('--color-success'),
+    get('--color-warning'),
+    get('--color-danger'),
+    get('--color-accent'),
+    get('--chart-6'),
+  ]
+}
+
+const resolvedColors = computed(() => props.colors ?? getThemeColors())
+
+const emit = defineEmits<{
+  (e: 'complete'): void
+}>()
+
+const clicksContext = inject<Ref<{ current: number }>>('$$slidev-clicks-context', ref(defaultClicksContext))
+const slidevContext = inject<{ nav: { currentSlideNo: number } }>('$$slidev-context', { nav: defaultNav })
+const slidePage = inject<Ref<number>>('$$slidev-page', ref(-1))
+
+const containerRef = ref<HTMLElement | null>(null)
+const particles = ref<Array<{
+  id: number
+  x: number
+  y: number
+  color: string
+  rotation: number
+  scale: number
+  vx: number
+  vy: number
+  vr: number
+  shape: 'square' | 'circle' | 'strip'
+}>>([])
+
+const isAutoRegistered = ref(false)
+let animationId: number | null = null
+let particleId = 0
+let hasFired = false
+
+function randomBetween(min: number, max: number) {
+  return Math.random() * (max - min) + min
+}
+
+function fire() {
+  if (!containerRef.value) return
+
+  const rect = containerRef.value.getBoundingClientRect()
+  const originX = rect.width * props.origin.x
+  const originY = rect.height * props.origin.y
+
+  const newParticles = []
+
+  for (let i = 0; i < props.particleCount; i++) {
+    const angle = randomBetween(-props.spread / 2, props.spread / 2) * (Math.PI / 180)
+    const velocity = randomBetween(5, 15)
+    const shapes: Array<'square' | 'circle' | 'strip'> = ['square', 'circle', 'strip']
+
+    newParticles.push({
+      id: particleId++,
+      x: originX,
+      y: originY,
+      color: resolvedColors.value[Math.floor(Math.random() * resolvedColors.value.length)],
+      rotation: randomBetween(0, 360),
+      scale: randomBetween(0.5, 1),
+      vx: Math.sin(angle) * velocity,
+      vy: -Math.cos(angle) * velocity - randomBetween(2, 8),
+      vr: randomBetween(-10, 10),
+      shape: shapes[Math.floor(Math.random() * shapes.length)]
+    })
+  }
+
+  particles.value = [...particles.value, ...newParticles]
+
+  if (!animationId) {
+    animateParticles()
+  }
+
+  setTimeout(() => {
+    particles.value = particles.value.filter(p => !newParticles.find(np => np.id === p.id))
+    if (particles.value.length === 0) {
+      stopAnimation()
+      emit('complete')
+    }
+  }, props.duration)
+}
+
+function animateParticles() {
+  const gravity = 0.3
+  const friction = 0.99
+
+  particles.value = particles.value.map(p => ({
+    ...p,
+    x: p.x + p.vx,
+    y: p.y + p.vy,
+    rotation: p.rotation + p.vr,
+    vx: p.vx * friction,
+    vy: p.vy + gravity,
+    scale: Math.max(0, p.scale - 0.005)
+  })).filter(p => p.scale > 0)
+
+  if (particles.value.length > 0) {
+    animationId = requestAnimationFrame(animateParticles)
+  } else {
+    animationId = null
+  }
+}
+
+function stopAnimation() {
+  if (animationId) {
+    cancelAnimationFrame(animationId)
+    animationId = null
+  }
+}
+
+// Slidev keeps all slides in DOM. Detect slide activation via nav watcher.
+onMounted(() => {
+  // Auto v-click registration: when at is undefined (default), register with click system
+  if (props.at === undefined) {
+    const ctx = clicksContext.value
+    if (ctx?.calculate && containerRef.value) {
+      const info = ctx.calculate('+1')
+      if (info) {
+        ctx.register(containerRef.value, info)
+        isAutoRegistered.value = true
+
+        watchEffect(() => {
+          const active = info.isActive.value
+          if (active && !hasFired) {
+            hasFired = true
+            fire()
+          } else if (!active && hasFired) {
+            hasFired = false
+            particles.value = []
+            stopAnimation()
+          }
+        })
+      }
+    }
+  }
+
+  if (unref(slidePage) < 0) {
+    // Non-Slidev context fallback
+    if (props.at === undefined || props.at === 0) {
+      setTimeout(fire, 100)
+      hasFired = true
+    }
+  }
+})
+
+watch(() => slidevContext.nav?.currentSlideNo, (currentNo, prevNo) => {
+  const myPage = unref(slidePage)
+  if (myPage < 0) return
+
+  const isActive = currentNo + 1 === myPage
+  const wasActive = prevNo !== undefined && prevNo + 1 === myPage
+
+  if (isActive && !wasActive) {
+    // Reset state on slide re-entry so confetti can fire again
+    hasFired = false
+    particles.value = []
+    stopAnimation()
+    if (props.at === 0) {
+      setTimeout(fire, 100)
+      hasFired = true
+    }
+  } else if (!isActive && wasActive) {
+    hasFired = false
+    particles.value = []
+    stopAnimation()
+  }
+}, { immediate: true })
+
+// Watch clicks: fire when reaching explicit `at` value (non-auto-registered)
+watch(() => clicksContext.value?.current, (current) => {
+  if (isAutoRegistered.value || props.at === undefined || props.at <= 0) return
+  const cur = current ?? 0
+
+  if (cur >= props.at && !hasFired) {
+    hasFired = true
+    fire()
+  } else if (cur < props.at && hasFired) {
+    hasFired = false
+    particles.value = []
+    stopAnimation()
+  }
+})
+
+onUnmounted(() => {
+  stopAnimation()
+  if (isAutoRegistered.value && clicksContext.value?.unregister && containerRef.value) {
+    clicksContext.value.unregister(containerRef.value)
+  }
+})
+
+defineExpose({ fire })
+</script>
+
+<template>
+  <div ref="containerRef" class="confetti-bg">
+    <div class="confetti-particles">
+      <div
+        v-for="particle in particles"
+        :key="particle.id"
+        class="confetti-particle"
+        :class="`confetti-${particle.shape}`"
+        :style="{
+          left: `${particle.x}px`,
+          top: `${particle.y}px`,
+          backgroundColor: particle.color,
+          transform: `rotate(${particle.rotation}deg) scale(${particle.scale})`,
+          opacity: particle.scale
+        }"
+      />
+    </div>
+  </div>
+</template>
+
+<style>
+.confetti-bg {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.confetti-particles {
+  position: absolute;
+  inset: 0;
+  overflow: visible;
+  z-index: 10;
+}
+
+.confetti-particle {
+  position: absolute;
+  will-change: transform, opacity;
+}
+
+.confetti-square {
+  width: 10px;
+  height: 10px;
+}
+
+.confetti-circle {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.confetti-strip {
+  width: 3px;
+  height: 12px;
+  border-radius: 1px;
+}
+</style>

package/components/Conversation.vue

@@ -0,0 +1,405 @@
+<script setup lang="ts">
+/**
+ * Conversation widget — iMessage-style chat dialog.
+ *
+ * <Conversation :messages="[
+ *   { from: 'Alice', text: 'Hey!' },
+ *   { from: 'Bob', text: 'Hello!' },
+ * ]" />
+ *
+ * In clicks mode (default), messages reveal one per click.
+ * Auto-detects left/right side from sender names.
+ */
+
+import { ref, unref, inject, watch, computed, onMounted, onUnmounted, watchEffect } from 'vue'
+import type { Ref } from 'vue'
+
+interface Message {
+  from: string
+  text: string
+  side?: 'left' | 'right'
+  avatar?: string
+  color?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger'
+}
+
+const props = withDefaults(defineProps<{
+  messages: Message[]
+  mode?: 'static' | 'clicks'
+  showNames?: boolean
+  groupConsecutive?: boolean
+}>(), {
+  mode: 'clicks',
+  showNames: true,
+  groupConsecutive: true,
+})
+
+const defaultClicksContext = { current: 0 }
+const defaultNav = { currentSlideNo: -1 }
+
+const clicksContext = inject<Ref<{ current: number }>>('$$slidev-clicks-context', ref(defaultClicksContext))
+const slidevContext = inject<{ nav: { currentSlideNo: number } }>('$$slidev-context', { nav: defaultNav })
+const slidePage = inject<Ref<number>>('$$slidev-page', ref(-1))
+
+const slideActive = ref(false)
+
+// Detect slide activation
+watch(() => slidevContext.nav?.currentSlideNo, (currentNo, prevNo) => {
+  const myPage = unref(slidePage)
+  if (myPage < 0) {
+    slideActive.value = true
+    return
+  }
+  slideActive.value = currentNo + 1 === myPage
+}, { immediate: true })
+
+// Auto-side detection: first unique sender = left, second = right
+const senderSides = computed(() => {
+  const map = new Map<string, 'left' | 'right'>()
+  for (const msg of props.messages) {
+    if (msg.side) {
+      map.set(msg.from, msg.side)
+    } else if (!map.has(msg.from)) {
+      map.set(msg.from, map.size === 0 ? 'left' : 'right')
+    }
+  }
+  return map
+})
+
+// Resolved messages with computed side and grouping info
+const resolvedMessages = computed(() => {
+  return props.messages.map((msg, i) => {
+    const side = msg.side || senderSides.value.get(msg.from) || 'left'
+    const prev = i > 0 ? props.messages[i - 1] : null
+    const next = i < props.messages.length - 1 ? props.messages[i + 1] : null
+    const prevSame = props.groupConsecutive && prev?.from === msg.from
+    const nextSame = props.groupConsecutive && next?.from === msg.from
+    return {
+      ...msg,
+      side,
+      isFirstInGroup: !prevSame,
+      isLastInGroup: !nextSame,
+    }
+  })
+})
+
+// --- Auto v-click registration (clicks mode) ---
+const rootEl = ref<HTMLElement | null>(null)
+const autoVisibleCount = ref(1)
+const isAutoRegistered = ref(false)
+
+onMounted(() => {
+  if (props.mode !== 'clicks') return
+  const ctx = clicksContext.value
+  if (!ctx?.calculateSince || !rootEl.value) return
+
+  const size = props.messages.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
+    autoVisibleCount.value = active ? Math.min(offset + 2, props.messages.length) : 1
+  })
+})
+
+onUnmounted(() => {
+  if (isAutoRegistered.value && clicksContext.value?.unregister && rootEl.value) {
+    clicksContext.value.unregister(rootEl.value)
+  }
+})
+
+// Visible count based on mode
+const visibleCount = computed(() => {
+  if (props.mode === 'static') return props.messages.length
+  if (isAutoRegistered.value) return autoVisibleCount.value
+  // Fallback: direct click count (non-Slidev contexts)
+  const clicks = clicksContext.value?.current ?? 0
+  return clicks + 1
+})
+
+// Generate initials from name
+function getInitials(name: string): string {
+  return name
+    .split(/\s+/)
+    .map(w => w[0])
+    .slice(0, 2)
+    .join('')
+    .toUpperCase()
+}
+</script>
+
+<template>
+  <div ref="rootEl" class="conversation">
+    <TransitionGroup name="conv-msg">
+      <div
+        v-for="(msg, i) in resolvedMessages"
+        v-show="i < visibleCount"
+        :key="i"
+        class="conv-row"
+        :class="[
+          `conv-${msg.side}`,
+          msg.isFirstInGroup ? 'conv-group-first' : '',
+          msg.isLastInGroup ? 'conv-group-last' : '',
+          !msg.isFirstInGroup ? 'conv-group-continuation' : '',
+        ]"
+      >
+        <!-- Avatar (left side only, first in group) -->
+        <div class="conv-avatar-col">
+          <div
+            v-if="msg.side === 'left' && msg.isFirstInGroup"
+            class="conv-avatar"
+          >
+            <img v-if="msg.avatar" :src="msg.avatar" :alt="msg.from" class="conv-avatar-img" />
+            <span v-else class="conv-avatar-initials">{{ getInitials(msg.from) }}</span>
+          </div>
+        </div>
+
+        <!-- Bubble -->
+        <div class="conv-bubble-col">
+          <div
+            v-if="showNames && msg.isFirstInGroup"
+            class="conv-sender"
+          >
+            {{ msg.from }}
+          </div>
+          <div
+            class="conv-bubble"
+            :class="[
+              `conv-bubble-${msg.side}`,
+              msg.color ? `conv-color-${msg.color}` : '',
+              msg.isFirstInGroup && msg.isLastInGroup ? 'conv-bubble-single' : '',
+              msg.isFirstInGroup && !msg.isLastInGroup ? 'conv-bubble-first' : '',
+              !msg.isFirstInGroup && !msg.isLastInGroup ? 'conv-bubble-middle' : '',
+              !msg.isFirstInGroup && msg.isLastInGroup ? 'conv-bubble-last' : '',
+            ]"
+          >
+            {{ msg.text }}
+          </div>
+        </div>
+
+        <!-- Avatar (right side only, first in group) -->
+        <div class="conv-avatar-col conv-avatar-right">
+          <div
+            v-if="msg.side === 'right' && msg.isFirstInGroup"
+            class="conv-avatar"
+          >
+            <img v-if="msg.avatar" :src="msg.avatar" :alt="msg.from" class="conv-avatar-img" />
+            <span v-else class="conv-avatar-initials">{{ getInitials(msg.from) }}</span>
+          </div>
+        </div>
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<style>
+.conversation {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs, 8px);
+  max-width: 100%;
+  padding: var(--space-sm, 16px) 0;
+}
+
+/* Row layout */
+.conv-row {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--space-xs, 8px);
+}
+
+.conv-group-continuation {
+  margin-top: calc(-1 * var(--space-xs, 8px) + 2px);
+}
+
+.conv-left {
+  flex-direction: row;
+}
+
+.conv-right {
+  flex-direction: row-reverse;
+}
+
+.conv-right .conv-bubble-col {
+  align-items: flex-end;
+}
+
+/* Avatar */
+.conv-avatar-col {
+  width: 2rem;
+  flex-shrink: 0;
+}
+
+.conv-avatar {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--gradient-primary);
+}
+
+.conv-avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.conv-avatar-initials {
+  color: var(--color-primary-foreground);
+  font-size: 0.75rem;
+  font-weight: var(--font-weight-semibold, 600);
+}
+
+/* Bubble column */
+.conv-bubble-col {
+  display: flex;
+  flex-direction: column;
+  max-width: 75%;
+}
+
+/* Sender name */
+.conv-sender {
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+  margin-bottom: 2px;
+  padding: 0 0.75rem;
+}
+
+.conv-right .conv-sender {
+  text-align: right;
+}
+
+/* Bubble */
+.conv-bubble {
+  padding: 0.5rem 0.75rem;
+  font-size: var(--font-size-small, 18px);
+  line-height: var(--line-height-body, 1.35);
+  word-wrap: break-word;
+}
+
+/* Left bubbles */
+.conv-bubble-left {
+  background-color: var(--color-bg-soft);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+}
+
+.conv-bubble-left.conv-bubble-single {
+  border-radius: 1rem 1rem 1rem 0.25rem;
+}
+
+.conv-bubble-left.conv-bubble-first {
+  border-radius: 1rem 1rem 1rem 0.25rem;
+}
+
+.conv-bubble-left.conv-bubble-middle {
+  border-radius: 0.25rem 1rem 1rem 0.25rem;
+}
+
+.conv-bubble-left.conv-bubble-last {
+  border-radius: 0.25rem 1rem 1rem 1rem;
+}
+
+/* Right bubbles */
+.conv-bubble-right {
+  background-color: var(--color-primary);
+  color: var(--color-primary-foreground);
+  border: 1px solid transparent;
+}
+
+.conv-bubble-right.conv-bubble-single {
+  border-radius: 1rem 1rem 0.25rem 1rem;
+}
+
+.conv-bubble-right.conv-bubble-first {
+  border-radius: 1rem 1rem 0.25rem 1rem;
+}
+
+.conv-bubble-right.conv-bubble-middle {
+  border-radius: 1rem 0.25rem 0.25rem 1rem;
+}
+
+.conv-bubble-right.conv-bubble-last {
+  border-radius: 1rem 0.25rem 1rem 1rem;
+}
+
+/* Color variants (override right-side default) */
+.conv-color-primary.conv-bubble-right {
+  background-color: var(--color-primary);
+}
+
+.conv-color-info.conv-bubble-right {
+  background-color: var(--color-info);
+}
+
+.conv-color-success.conv-bubble-right {
+  background-color: var(--color-success);
+}
+
+.conv-color-warning.conv-bubble-right {
+  background-color: var(--color-warning);
+}
+
+.conv-color-danger.conv-bubble-right {
+  background-color: var(--color-danger);
+}
+
+/* Color variants for left bubbles — color-mix auto-adapts to light/dark */
+.conv-color-primary.conv-bubble-left {
+  background-color: var(--color-primary-soft);
+  border-color: var(--color-primary);
+}
+
+.conv-color-info.conv-bubble-left {
+  background-color: var(--color-info-tint);
+  border-color: var(--color-info);
+}
+
+.conv-color-success.conv-bubble-left {
+  background-color: var(--color-success-tint);
+  border-color: var(--color-success);
+}
+
+.conv-color-warning.conv-bubble-left {
+  background-color: var(--color-warning-tint);
+  border-color: var(--color-warning);
+}
+
+.conv-color-danger.conv-bubble-left {
+  background-color: var(--color-danger-tint);
+  border-color: var(--color-danger);
+}
+
+/* Transition */
+.conv-msg-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);
+}
+
+.conv-msg-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);
+}
+
+.conv-msg-enter-from {
+  opacity: 0;
+  transform: translateY(var(--shift-sm, 12px));
+}
+
+.conv-msg-leave-to {
+  opacity: 0;
+  transform: translateY(calc(-1 * var(--shift-xs, 6px)));
+}
+</style>