@troshab/slidev-theme-troshab 0.1.0

package/components/Countdown.vue

@@ -0,0 +1,476 @@
+<script setup lang="ts">
+/**
+ * Countdown component - animated timer for breaks, exercises, demos
+ *
+ * Usage:
+ * <Countdown :duration="300" />                    <!-- 5 minutes -->
+ * <Countdown :duration="60" autostart />           <!-- 1 minute, starts immediately -->
+ * <Countdown :duration="120" format="mm:ss" size="lg" />
+ * <Countdown :duration="30" showProgress color="danger" />
+ */
+
+import { ref, unref, computed, watch, watchEffect, inject, onMounted, onUnmounted } from 'vue'
+import type { Ref } from 'vue'
+
+const defaultClicksContext = { current: 0 }
+const defaultNav = { currentSlideNo: -1 }
+
+import type { SemanticColor } from '../composables/useColors'
+
+const props = withDefaults(defineProps<{
+  duration: number                                     // seconds
+  autostart?: boolean
+  format?: 'mm:ss' | 'hh:mm:ss' | 'seconds'
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  color?: Extract<SemanticColor, 'primary' | 'danger' | 'warning' | 'success'>
+  showProgress?: boolean
+  at?: number                                          // undefined = auto-register click, 0 = on slide enter, -1 = manual
+}>(), {
+  autostart: false,
+  format: 'mm:ss',
+  size: 'lg',
+  color: 'primary',
+  showProgress: false,
+})
+
+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 emit = defineEmits<{
+  (e: 'complete'): void
+  (e: 'tick', remaining: number): void
+}>()
+
+const rootEl = ref<HTMLElement | null>(null)
+const remaining = ref(props.duration)
+const isRunning = ref(false)
+const isPaused = ref(false)
+const isAutoRegistered = ref(false)
+let intervalId: ReturnType<typeof setInterval> | null = null
+
+const formattedTime = computed(() => {
+  const secs = remaining.value
+  if (props.format === 'seconds') {
+    return String(secs)
+  }
+
+  const hours = Math.floor(secs / 3600)
+  const minutes = Math.floor((secs % 3600) / 60)
+  const seconds = secs % 60
+
+  const pad = (n: number) => String(n).padStart(2, '0')
+
+  if (props.format === 'hh:mm:ss') {
+    return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`
+  }
+  // mm:ss - if hours > 0, show them anyway
+  if (hours > 0) {
+    return `${hours}:${pad(minutes)}:${pad(seconds)}`
+  }
+  return `${pad(minutes)}:${pad(seconds)}`
+})
+
+const progressPercent = computed(() => {
+  return ((props.duration - remaining.value) / props.duration) * 100
+})
+
+const progressDashoffset = computed(() => {
+  const circumference = 2 * Math.PI * 45 // radius = 45
+  return circumference - (progressPercent.value / 100) * circumference
+})
+
+const isWarning = computed(() => {
+  return remaining.value <= 10 && remaining.value > 0
+})
+
+function start() {
+  if (isRunning.value && !isPaused.value) return
+
+  isRunning.value = true
+  isPaused.value = false
+
+  intervalId = setInterval(() => {
+    if (remaining.value > 0) {
+      remaining.value--
+      emit('tick', remaining.value)
+    }
+    if (remaining.value === 0) {
+      stop()
+      emit('complete')
+    }
+  }, 1000)
+}
+
+function pause() {
+  if (!isRunning.value || isPaused.value) return
+
+  isPaused.value = true
+  if (intervalId) {
+    clearInterval(intervalId)
+    intervalId = null
+  }
+}
+
+function resume() {
+  if (!isPaused.value) return
+  start()
+}
+
+function stop() {
+  isRunning.value = false
+  isPaused.value = false
+  if (intervalId) {
+    clearInterval(intervalId)
+    intervalId = null
+  }
+}
+
+function reset() {
+  stop()
+  remaining.value = props.duration
+}
+
+function toggle() {
+  if (!isRunning.value) {
+    start()
+  } else if (isPaused.value) {
+    resume()
+  } else {
+    pause()
+  }
+}
+
+let hasTriggered = false
+
+// Autostart
+if (props.autostart) {
+  start()
+}
+
+// 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 && rootEl.value) {
+      const info = ctx.calculate('+1')
+      if (info) {
+        ctx.register(rootEl.value, info)
+        isAutoRegistered.value = true
+
+        const isActiveRef = info.isActive
+
+        watchEffect(() => {
+          const active = isActiveRef.value
+          if (active && !hasTriggered) {
+            hasTriggered = true
+            start()
+          } else if (!active && hasTriggered) {
+            hasTriggered = false
+            reset()
+          }
+        })
+      }
+    }
+  }
+
+  if (unref(slidePage) < 0) {
+    // Non-Slidev context fallback
+    if (props.at === undefined || props.at === 0) {
+      hasTriggered = true
+      start()
+    }
+  }
+})
+
+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) {
+    hasTriggered = false
+    reset()
+    if (props.autostart || props.at === 0) {
+      hasTriggered = true
+      start()
+    }
+  } else if (!isActive && wasActive) {
+    stop()
+  }
+}, { immediate: true })
+
+// Watch clicks: passive fallback for explicit at > 0 (rare)
+watch(() => clicksContext.value?.current, (current) => {
+  if (isAutoRegistered.value || props.at === undefined || props.at <= 0) return
+  const cur = current ?? 0
+
+  if (cur >= props.at && !hasTriggered) {
+    hasTriggered = true
+    start()
+  } else if (cur < props.at && hasTriggered) {
+    hasTriggered = false
+    reset()
+  }
+})
+
+// Watch for duration changes
+watch(() => props.duration, (newDuration) => {
+  remaining.value = newDuration
+})
+
+onUnmounted(() => {
+  if (intervalId) {
+    clearInterval(intervalId)
+  }
+  if (isAutoRegistered.value && clicksContext.value?.unregister && rootEl.value) {
+    clicksContext.value.unregister(rootEl.value)
+  }
+})
+
+// Expose methods for external control
+defineExpose({ start, pause, resume, stop, reset, toggle })
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    class="countdown"
+    :class="[
+      `countdown-size-${size}`,
+      `countdown-color-${color}`,
+      { 'countdown-warning': isWarning }
+    ]"
+  >
+    <!-- Circular progress ring -->
+    <div v-if="showProgress" class="countdown-ring">
+      <svg viewBox="0 0 100 100" class="countdown-ring-svg">
+        <!-- Background circle -->
+        <circle
+          cx="50"
+          cy="50"
+          r="45"
+          class="countdown-ring-bg"
+        />
+        <!-- Progress circle -->
+        <circle
+          cx="50"
+          cy="50"
+          r="45"
+          class="countdown-ring-progress"
+          :style="{ strokeDashoffset: progressDashoffset }"
+        />
+      </svg>
+      <div class="countdown-ring-content">
+        <span class="countdown-time">{{ formattedTime }}</span>
+      </div>
+    </div>
+
+    <!-- Simple display -->
+    <div v-else class="countdown-simple">
+      <span class="countdown-time">{{ formattedTime }}</span>
+    </div>
+
+    <!-- Controls -->
+    <div class="countdown-controls">
+      <button
+        class="countdown-btn"
+        @click="toggle"
+        :aria-label="isRunning && !isPaused ? 'Pause' : 'Start'"
+      >
+        <span v-if="!isRunning || isPaused">Start</span>
+        <span v-else>Pause</span>
+      </button>
+      <button
+        class="countdown-btn countdown-btn-secondary"
+        @click="reset"
+        aria-label="Reset"
+      >
+        Reset
+      </button>
+    </div>
+  </div>
+</template>
+
+<style>
+.countdown {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+/* Size variants */
+.countdown-size-sm .countdown-time {
+  font-size: var(--font-size-h2);
+}
+
+.countdown-size-md .countdown-time {
+  font-size: var(--font-size-h2);
+}
+
+.countdown-size-lg .countdown-time {
+  font-size: var(--font-size-h1);
+}
+
+.countdown-size-xl .countdown-time {
+  font-size: calc(var(--font-size-h1) * 1.5);
+}
+
+/* Time display */
+.countdown-time {
+  font-family: var(--font-mono);
+  font-weight: var(--font-weight-bold);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.05em;
+}
+
+/* Color variants */
+.countdown-color-primary .countdown-time {
+  color: var(--color-primary);
+}
+
+.countdown-color-danger .countdown-time {
+  color: var(--color-danger);
+}
+
+.countdown-color-warning .countdown-time {
+  color: var(--color-warning);
+}
+
+.countdown-color-success .countdown-time {
+  color: var(--color-success);
+}
+
+/* Warning animation (< 10 seconds) */
+.countdown-warning .countdown-time {
+  animation: countdown-pulse 1s ease-in-out infinite;
+}
+
+@keyframes countdown-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.05);
+  }
+}
+
+/* Simple display */
+.countdown-simple {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Ring display */
+.countdown-ring {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.countdown-size-sm .countdown-ring {
+  width: 120px;
+  height: 120px;
+}
+
+.countdown-size-md .countdown-ring {
+  width: 160px;
+  height: 160px;
+}
+
+.countdown-size-lg .countdown-ring {
+  width: 200px;
+  height: 200px;
+}
+
+.countdown-size-xl .countdown-ring {
+  width: 260px;
+  height: 260px;
+}
+
+.countdown-ring-svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+
+.countdown-ring-bg {
+  fill: none;
+  stroke: var(--color-border);
+  stroke-width: 6;
+}
+
+.countdown-ring-progress {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 6;
+  stroke-linecap: round;
+  stroke-dasharray: 282.74; /* 2 * PI * 45 */
+  transition: stroke-dashoffset 0.3s ease;
+}
+
+.countdown-color-primary .countdown-ring-progress {
+  stroke: var(--color-primary);
+}
+
+.countdown-color-danger .countdown-ring-progress {
+  stroke: var(--color-danger);
+}
+
+.countdown-color-warning .countdown-ring-progress {
+  stroke: var(--color-warning);
+}
+
+.countdown-color-success .countdown-ring-progress {
+  stroke: var(--color-success);
+}
+
+.countdown-ring-content {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Ring text needs smaller font to fit inside circle */
+.countdown-size-sm .countdown-ring .countdown-time { font-size: var(--font-size-base); }
+.countdown-size-md .countdown-ring .countdown-time { font-size: 28px; }
+.countdown-size-lg .countdown-ring .countdown-time { font-size: 40px; }
+.countdown-size-xl .countdown-ring .countdown-time { font-size: var(--font-size-h1); }
+
+/* Controls */
+.countdown-controls {
+  display: flex;
+  gap: var(--space-sm);
+}
+
+.countdown-btn {
+  padding: var(--space-xs) var(--space-md);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-medium);
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  background-color: var(--color-primary);
+  color: var(--color-primary-foreground);
+  transition: opacity 0.2s ease;
+}
+
+.countdown-btn:hover {
+  opacity: 0.9;
+}
+
+.countdown-btn-secondary {
+  background-color: var(--color-bg-muted);
+  color: var(--color-text);
+}
+</style>

package/components/Definition.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+/**
+ * Definition widget — term definition card.
+ *
+ * <Definition term="API" pronunciation="/ˈeɪ.piː.aɪ/" partOfSpeech="noun">
+ * A set of protocols for software communication.
+ * </Definition>
+ */
+
+defineProps<{
+  term: string
+  pronunciation?: string
+  partOfSpeech?: string
+}>()
+</script>
+
+<template>
+  <div class="definition">
+    <h1 class="definition-term">{{ term }}</h1>
+    <div v-if="pronunciation || partOfSpeech" class="definition-meta">
+      <span v-if="pronunciation" class="definition-pronunciation">{{ pronunciation }}</span>
+      <span v-if="partOfSpeech" class="definition-pos">{{ partOfSpeech }}</span>
+    </div>
+    <div class="definition-body">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.definition-term {
+  color: var(--color-primary);
+  margin-bottom: var(--space-xs);
+}
+
+.definition-meta {
+  font-size: var(--font-size-small);
+  margin-bottom: var(--space-sm);
+}
+
+.definition-pronunciation {
+  font-family: var(--font-mono);
+  color: var(--color-text-secondary);
+}
+
+.definition-pos {
+  font-family: var(--font-sans);
+  color: var(--color-text-tertiary);
+  margin-left: 0.5em;
+}
+
+.definition-body :deep(h3) {
+  color: var(--color-primary);
+  font-size: var(--font-size-base);
+  border-top: 2px solid var(--color-border);
+  padding-top: var(--space-sm);
+  margin-top: var(--space-md);
+}
+</style>