@troshab/slidev-theme-troshab 0.1.0

package/components/ImageCompare.vue

@@ -0,0 +1,436 @@
+<script setup lang="ts">
+/**
+ * ImageCompare component - before/after image slider comparison
+ *
+ * Usage:
+ * <ImageCompare before="/before.png" after="/after.png" />
+ * <ImageCompare before="/old.jpg" after="/new.jpg" :target="30" />
+ * <ImageCompare before="/a.png" after="/b.png" direction="vertical" />
+ * <ImageCompare before="/x.jpg" after="/y.jpg" :labels="{ before: 'Old', after: 'New' }" />
+ */
+
+import { ref, unref, computed, watch, watchEffect, inject, onMounted, onUnmounted } from 'vue'
+import type { Ref } from 'vue'
+
+const defaultClicksContext = { current: 0 }
+const defaultNav = { currentSlideNo: -1 }
+
+const props = withDefaults(defineProps<{
+  before: string
+  after: string
+  target?: number              // 0-100, target slider position (animation end point)
+  direction?: 'horizontal' | 'vertical'
+  labels?: { before?: string; after?: string }
+  height?: string             // CSS height (e.g., '20rem', '300px')
+  at?: number                 // undefined = auto-register click, 0 = on slide enter, -1 = manual
+  animDuration?: number       // animation duration in ms
+}>(), {
+  target: 50,
+  direction: 'horizontal',
+  labels: () => ({}),
+  animDuration: 1500
+})
+
+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 sliderPosition = ref(props.at === -1 ? props.target : 0) // start at 0 for auto/on-enter, at position for manual
+const isDragging = ref(false)
+const isAutoRegistered = ref(false)
+let animFrameId: number | null = null
+let hasAnimated = false
+
+const isHorizontal = computed(() => props.direction === 'horizontal')
+
+const clipPath = computed(() => {
+  if (isHorizontal.value) {
+    return `inset(0 ${100 - sliderPosition.value}% 0 0)`
+  }
+  return `inset(0 0 ${100 - sliderPosition.value}% 0)`
+})
+
+const sliderStyle = computed(() => {
+  if (isHorizontal.value) {
+    return { left: `${sliderPosition.value}%` }
+  }
+  return { top: `${sliderPosition.value}%` }
+})
+
+function getPositionFromEvent(e: MouseEvent | TouchEvent) {
+  if (!containerRef.value) return sliderPosition.value
+
+  const rect = containerRef.value.getBoundingClientRect()
+  const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX
+  const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY
+
+  if (isHorizontal.value) {
+    const x = clientX - rect.left
+    return Math.max(0, Math.min(100, (x / rect.width) * 100))
+  }
+
+  const y = clientY - rect.top
+  return Math.max(0, Math.min(100, (y / rect.height) * 100))
+}
+
+function handleStart(e: MouseEvent | TouchEvent) {
+  isDragging.value = true
+  sliderPosition.value = getPositionFromEvent(e)
+}
+
+function handleMove(e: MouseEvent | TouchEvent) {
+  if (!isDragging.value) return
+  sliderPosition.value = getPositionFromEvent(e)
+}
+
+function handleEnd() {
+  isDragging.value = false
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  const step = e.shiftKey ? 10 : 1
+
+  if (isHorizontal.value) {
+    if (e.key === 'ArrowLeft') {
+      sliderPosition.value = Math.max(0, sliderPosition.value - step)
+      e.preventDefault()
+    } else if (e.key === 'ArrowRight') {
+      sliderPosition.value = Math.min(100, sliderPosition.value + step)
+      e.preventDefault()
+    }
+  } else {
+    if (e.key === 'ArrowUp') {
+      sliderPosition.value = Math.max(0, sliderPosition.value - step)
+      e.preventDefault()
+    } else if (e.key === 'ArrowDown') {
+      sliderPosition.value = Math.min(100, sliderPosition.value + step)
+      e.preventDefault()
+    }
+  }
+}
+
+function animateSlider() {
+  if (animFrameId) cancelAnimationFrame(animFrameId)
+
+  const startPos = 0
+  const endPos = props.target
+  const startTime = performance.now()
+  const dur = props.animDuration
+  const ease = (t: number) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2 // easeInOutCubic
+
+  function step(now: number) {
+    const elapsed = now - startTime
+    const progress = Math.min(elapsed / dur, 1)
+    sliderPosition.value = startPos + (endPos - startPos) * ease(progress)
+
+    if (progress < 1) {
+      animFrameId = requestAnimationFrame(step)
+    } else {
+      sliderPosition.value = endPos
+      animFrameId = null
+    }
+  }
+
+  requestAnimationFrame(step)
+}
+
+function resetSlider() {
+  if (animFrameId) {
+    cancelAnimationFrame(animFrameId)
+    animFrameId = null
+  }
+  sliderPosition.value = 0
+}
+
+// Slidev keeps all slides in DOM. Detect slide activation via nav watcher.
+onMounted(() => {
+  window.addEventListener('mousemove', handleMove)
+  window.addEventListener('mouseup', handleEnd)
+  window.addEventListener('touchmove', handleMove)
+  window.addEventListener('touchend', handleEnd)
+
+  // 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
+
+        const isActiveRef = info.isActive
+
+        watchEffect(() => {
+          const active = isActiveRef.value
+          if (active && !hasAnimated) {
+            hasAnimated = true
+            animateSlider()
+          } else if (!active && hasAnimated) {
+            hasAnimated = false
+            resetSlider()
+          }
+        })
+      }
+    }
+  }
+
+  if (unref(slidePage) < 0) {
+    // Non-Slidev context fallback
+    if (props.at === undefined || props.at === 0) {
+      hasAnimated = true
+      animateSlider()
+    }
+  }
+})
+
+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) {
+    hasAnimated = false
+    resetSlider()
+    if (props.at === 0) {
+      hasAnimated = true
+      animateSlider()
+    }
+  } else if (!isActive && wasActive) {
+    if (animFrameId) cancelAnimationFrame(animFrameId)
+  }
+}, { 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 && !hasAnimated) {
+    hasAnimated = true
+    animateSlider()
+  } else if (cur < props.at && hasAnimated) {
+    hasAnimated = false
+    resetSlider()
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('mousemove', handleMove)
+  window.removeEventListener('mouseup', handleEnd)
+  window.removeEventListener('touchmove', handleMove)
+  window.removeEventListener('touchend', handleEnd)
+  if (animFrameId) cancelAnimationFrame(animFrameId)
+  if (isAutoRegistered.value && clicksContext.value?.unregister && containerRef.value) {
+    clicksContext.value.unregister(containerRef.value)
+  }
+})
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="image-compare"
+    :class="[
+      `image-compare-${direction}`,
+      { 'image-compare-dragging': isDragging }
+    ]"
+    :style="{ height: height || undefined }"
+    @mousedown="handleStart"
+    @touchstart="handleStart"
+  >
+    <!-- After image (bottom layer) -->
+    <div class="image-compare-after">
+      <img :src="after" :alt="labels.after || 'After'" />
+      <span v-if="labels.after" class="image-compare-label image-compare-label-after">
+        {{ labels.after }}
+      </span>
+    </div>
+
+    <!-- Before image (top layer with clip) -->
+    <div class="image-compare-before" :style="{ clipPath }">
+      <img :src="before" :alt="labels.before || 'Before'" />
+      <span v-if="labels.before" class="image-compare-label image-compare-label-before">
+        {{ labels.before }}
+      </span>
+    </div>
+
+    <!-- Slider handle -->
+    <div
+      class="image-compare-slider"
+      :style="sliderStyle"
+      role="slider"
+      :aria-valuenow="sliderPosition"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      tabindex="0"
+      @keydown="handleKeydown"
+    >
+      <div class="image-compare-handle">
+        <div class="image-compare-arrow image-compare-arrow-left">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+          </svg>
+        </div>
+        <div class="image-compare-arrow image-compare-arrow-right">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"/>
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.image-compare {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  cursor: ew-resize;
+  user-select: none;
+  border-radius: 0.5rem;
+}
+
+.image-compare-vertical {
+  cursor: ns-resize;
+}
+
+.image-compare-dragging {
+  cursor: grabbing;
+}
+
+.image-compare-before,
+.image-compare-after {
+  position: absolute;
+  inset: 0;
+}
+
+.image-compare-after {
+  z-index: 1;
+}
+
+.image-compare-before {
+  z-index: 2;
+}
+
+.image-compare-before img,
+.image-compare-after img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* Labels */
+.image-compare-label {
+  position: absolute;
+  padding: var(--space-xs) var(--space-sm);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-medium);
+  background-color: color-mix(in srgb, var(--color-black) 60%, transparent);
+  color: var(--color-drac-fg-50);
+  border-radius: 0.25rem;
+  z-index: 10;
+}
+
+.image-compare-horizontal .image-compare-label-before {
+  top: var(--space-sm);
+  left: var(--space-sm);
+}
+
+.image-compare-horizontal .image-compare-label-after {
+  top: var(--space-sm);
+  right: var(--space-sm);
+}
+
+.image-compare-vertical .image-compare-label-before {
+  top: var(--space-sm);
+  left: var(--space-sm);
+}
+
+.image-compare-vertical .image-compare-label-after {
+  bottom: var(--space-sm);
+  left: var(--space-sm);
+}
+
+/* Slider line */
+.image-compare-slider {
+  position: absolute;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-compare-horizontal .image-compare-slider {
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  margin-left: -2px;
+  background-color: var(--color-drac-fg-50);
+  box-shadow: 0 0 4px color-mix(in srgb, var(--color-black) 30%, transparent);
+}
+
+.image-compare-vertical .image-compare-slider {
+  left: 0;
+  right: 0;
+  height: 4px;
+  margin-top: -2px;
+  background-color: var(--color-drac-fg-50);
+  box-shadow: 0 0 4px color-mix(in srgb, var(--color-black) 30%, transparent);
+}
+
+/* Handle */
+.image-compare-handle {
+  position: absolute;
+  width: 44px;
+  height: 44px;
+  background-color: var(--color-drac-fg-50);
+  border-radius: 50%;
+  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-black) 30%, transparent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-compare-arrow {
+  width: 16px;
+  height: 16px;
+  color: var(--color-text);
+}
+
+.image-compare-horizontal .image-compare-arrow-left {
+  margin-right: -2px;
+}
+
+.image-compare-horizontal .image-compare-arrow-right {
+  margin-left: -2px;
+}
+
+.image-compare-vertical .image-compare-handle {
+  flex-direction: column;
+}
+
+.image-compare-vertical .image-compare-arrow-left {
+  transform: rotate(90deg);
+  margin-bottom: -2px;
+}
+
+.image-compare-vertical .image-compare-arrow-right {
+  transform: rotate(90deg);
+  margin-top: -2px;
+}
+
+/* Focus styles */
+.image-compare-slider:focus {
+  outline: 3px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.image-compare-slider:focus .image-compare-handle {
+  border: 2px solid var(--color-primary);
+}
+</style>

package/components/MatrixGrid.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+/**
+ * MatrixGrid widget — 2x2 grid for SWOT, priority matrices, etc.
+ *
+ * Generic usage:
+ * <MatrixGrid :cells="[
+ *   { title: 'Quick Wins', items: ['Fix bug', 'Update docs'] },
+ *   { title: 'Major Projects', items: ['New API'] },
+ *   { title: 'Fill-Ins', items: ['Cleanup'] },
+ *   { title: 'Thankless', items: ['Migration'] }
+ * ]" />
+ *
+ * SWOT usage:
+ * <MatrixGrid :cells="[
+ *   { title: 'Strengths', items: [...], color: 'success' },
+ *   { title: 'Opportunities', items: [...], color: 'primary' },
+ *   { title: 'Weaknesses', items: [...], color: 'danger' },
+ *   { title: 'Threats', items: [...], color: 'warning' }
+ * ]" />
+ */
+
+import type { SemanticColor } from '../composables/useColors'
+import { semanticColorVar } from '../composables/useColors'
+
+defineProps<{
+  cells: Array<{
+    title: string
+    items: string[]
+    color?: SemanticColor
+  }>
+}>()
+</script>
+
+<template>
+  <div class="matrix-grid">
+    <div
+      v-for="(cell, i) in cells"
+      :key="i"
+      class="matrix-cell"
+    >
+      <h3
+        class="matrix-cell-title"
+        :style="cell.color ? { color: semanticColorVar[cell.color] } : {}"
+      >{{ cell.title }}</h3>
+      <ul class="matrix-cell-list">
+        <li v-for="(item, j) in cell.items" :key="j">{{ item }}</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.matrix-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-sm);
+  margin-top: var(--space-lg);
+}
+
+.matrix-cell {
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: var(--space-xs);
+}
+
+.matrix-cell-title {
+  background: var(--color-bg-soft);
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: 0.25rem;
+  margin: 0 0 var(--space-xs);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+}
+
+.matrix-cell-list {
+  list-style: disc;
+  margin: 0;
+  padding-left: 1.5em;
+}
+
+.matrix-cell-list li {
+  margin-block: 0.25em;
+  font-size: var(--font-size-small);
+}
+</style>