@troshab/slidev-theme-troshab 0.1.0

package/components/PricingTable.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+/**
+ * PricingTable widget — pricing comparison cards.
+ *
+ * <PricingTable :plans="[
+ *   { name: 'Starter', price: '$9/mo', features: ['5 members', '10GB'] },
+ *   { name: 'Pro', price: '$29/mo', features: ['25 members', '100GB'], highlighted: true },
+ *   { name: 'Enterprise', price: '$99/mo', features: ['Unlimited', 'Dedicated'] }
+ * ]" />
+ */
+
+type PricingFeature = string | { text: string; included?: boolean }
+
+withDefaults(defineProps<{
+  plans: Array<{
+    name: string
+    price: string
+    features: PricingFeature[]
+    highlighted?: boolean
+  }>
+  checkColor?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
+}>(), {
+  checkColor: 'success',
+})
+
+function featureText(f: PricingFeature): string {
+  return typeof f === 'string' ? f : f.text
+}
+
+function featureIncluded(f: PricingFeature): boolean {
+  return typeof f === 'string' ? true : f.included !== false
+}
+
+const colorVar: Record<string, string> = {
+  primary: 'var(--color-primary)',
+  success: 'var(--color-success)',
+  warning: 'var(--color-warning)',
+  danger: 'var(--color-danger)',
+  info: 'var(--color-info)',
+  secondary: 'var(--color-secondary)',
+  accent: 'var(--color-accent)',
+}
+</script>
+
+<template>
+  <div class="pricing-table">
+    <div
+      v-for="(plan, i) in plans"
+      :key="i"
+      class="pricing-plan"
+      :class="{ 'pricing-plan-highlighted': plan.highlighted }"
+    >
+      <div class="pricing-plan-header">
+        <div class="pricing-plan-name">{{ plan.name }}</div>
+        <div class="pricing-plan-price">{{ plan.price }}</div>
+      </div>
+      <ul class="pricing-plan-features">
+        <li
+          v-for="(feature, j) in plan.features"
+          :key="j"
+          :class="{ 'feature-excluded': !featureIncluded(feature) }"
+          :style="{ '--check-color': colorVar[checkColor] }"
+        >
+          {{ featureText(feature) }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pricing-table {
+  display: flex;
+  gap: var(--space-sm);
+  margin-top: var(--space-lg);
+}
+
+.pricing-plan {
+  flex: 1;
+  background: var(--color-bg-soft);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: var(--space-md);
+}
+
+.pricing-plan-highlighted {
+  border-color: var(--color-primary);
+  border-width: 2px;
+  transform: scale(1.03);
+  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-black) 10%, transparent);
+}
+
+.dark .pricing-plan-highlighted {
+  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-black) 30%, transparent);
+}
+
+.pricing-plan-header {
+  border-bottom: 2px solid var(--color-border);
+  padding-bottom: var(--space-xs);
+  margin-bottom: var(--space-sm);
+}
+
+.pricing-plan-name {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+}
+
+.pricing-plan-price {
+  font-size: var(--font-size-h2);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-primary);
+  margin-top: var(--space-xs);
+}
+
+.pricing-plan-features {
+  list-style: none !important;
+  margin: 0;
+  padding: 0;
+}
+
+.pricing-plan-features li {
+  list-style: none !important;
+  padding-left: 1.5em;
+  position: relative;
+  margin-block: 0.5em;
+}
+
+.pricing-plan-features li::before {
+  content: '\2713';
+  position: absolute;
+  left: 0;
+  color: var(--check-color);
+  font-weight: var(--font-weight-bold);
+}
+
+.pricing-plan-features li.feature-excluded {
+  color: var(--color-text-tertiary);
+}
+
+.pricing-plan-features li.feature-excluded::before {
+  content: '\2717';
+  color: var(--color-text-tertiary);
+}
+</style>

package/components/Progress.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+/**
+ * Progress component - presentation progress bar
+ *
+ * Usage:
+ * <Progress />
+ * <Progress position="bottom" thickness="4px" />
+ * <Progress showPercentage />
+ */
+
+import { computed } from 'vue'
+import { useNav } from '@slidev/client'
+
+const props = defineProps<{
+  position?: 'top' | 'bottom'
+  color?: string
+  thickness?: string
+  opacity?: number
+  showPercentage?: boolean
+}>()
+
+const { currentSlideNo, total } = useNav()
+
+const progress = computed(() => {
+  return Math.round((currentSlideNo.value / total.value) * 100)
+})
+
+const positionClass = computed(() => {
+  return props.position === 'bottom' ? 'progress-bottom' : 'progress-top'
+})
+
+const barStyle = computed(() => {
+  const styles: Record<string, string> = {
+    width: `${progress.value}%`
+  }
+  if (props.color) {
+    styles.backgroundColor = props.color
+  }
+  if (props.thickness) {
+    styles.height = props.thickness
+  }
+  if (props.opacity !== undefined) {
+    styles.opacity = String(props.opacity)
+  }
+  return styles
+})
+</script>
+
+<template>
+  <div class="progress-container" :class="positionClass">
+    <div class="progress-bar" :style="barStyle"></div>
+    <span v-if="showPercentage" class="progress-percentage">{{ progress }}%</span>
+  </div>
+</template>
+
+<style>
+.progress-container {
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+}
+
+.progress-top {
+  top: 0;
+}
+
+.progress-bottom {
+  bottom: 0;
+}
+
+.progress-bar {
+  height: 3px;
+  background-color: var(--color-primary);
+  opacity: 0.8;
+  transition: width var(--dur-moderate-01) var(--ease-standard);
+}
+
+.progress-percentage {
+  position: absolute;
+  right: 1rem;
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+  background-color: var(--color-bg);
+  padding: 0.125rem 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.progress-top .progress-percentage {
+  top: 0.5rem;
+}
+
+.progress-bottom .progress-percentage {
+  bottom: 0.5rem;
+}
+</style>

package/components/Pyramid.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+/**
+ * Pyramid widget — hierarchical level visualization.
+ *
+ * <Pyramid :levels="[
+ *   { label: 'Strategy', description: 'Vision' },
+ *   { label: 'Tactics', description: 'Plans' },
+ *   { label: 'Operations', description: 'Execution' }
+ * ]" />
+ */
+
+const props = withDefaults(defineProps<{
+  levels: Array<{ label: string; description?: string }>
+  colors?: string[]
+}>(), {
+  colors: () => ['primary', 'info', 'success', 'warning'],
+})
+
+const colorVarMap: Record<string, string> = {
+  primary: 'var(--color-primary)',
+  success: 'var(--color-success)',
+  warning: 'var(--color-warning)',
+  danger: 'var(--color-danger)',
+  info: 'var(--color-info)',
+  secondary: 'var(--color-secondary)',
+  accent: 'var(--color-accent)',
+}
+
+function levelColor(index: number): string {
+  const c = props.colors[index % props.colors.length]
+  return colorVarMap[c] || colorVarMap.primary
+}
+
+function levelFontSize(index: number, total: number): string {
+  const base = 1.5 // rem base
+  const scale = 1 + (index / Math.max(total - 1, 1)) * 0.3
+  return `${base * scale}rem`
+}
+</script>
+
+<template>
+  <div class="pyramid">
+    <div
+      v-for="(level, i) in levels"
+      :key="i"
+      class="pyramid-level"
+      :style="{ borderTopColor: levelColor(i) }"
+    >
+      <div class="pyramid-level-label">{{ level.label }}</div>
+      <div
+        v-if="level.description"
+        class="pyramid-level-desc"
+        :style="{ fontSize: levelFontSize(i, levels.length) }"
+      >{{ level.description }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pyramid {
+  display: flex;
+  gap: var(--space-sm);
+  margin-top: var(--space-lg);
+}
+
+.pyramid-level {
+  flex: 1;
+  text-align: center;
+  border-top: 3px solid;
+  padding-top: var(--space-xs);
+}
+
+.pyramid-level-label {
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: var(--space-xs);
+}
+
+.pyramid-level-desc {
+  color: var(--color-text-secondary);
+}
+</style>

package/components/QRCode.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+/**
+ * QRCode component - generates QR codes as SVG
+ *
+ * Theme-aware by default: uses text color from current theme.
+ * Automatically updates when theme changes (T key).
+ *
+ * Usage:
+ * <QRCode data="https://example.com" />
+ * <QRCode data="https://example.com" :size="200" />
+ * <QRCode data="https://example.com" color="accent" />
+ *
+ * Requires: npm install qrcode (peer dependency)
+ */
+
+import { ref, watch, onMounted, computed } from 'vue'
+import { useIsDark } from '../composables/useColors'
+import QRCodeLib from 'qrcode'
+
+const props = withDefaults(defineProps<{
+  data: string
+  size?: number
+  color?: string      // Semantic color name (primary, success, accent, etc.) or 'text' (default)
+  bgColor?: string    // Semantic bg name (bg, bg-soft, bg-muted) or omit for 'bg' (default)
+}>(), {
+  size: 200
+})
+
+const isDark = useIsDark()
+const svgString = ref('')
+const error = ref<string | null>(null)
+
+// Read resolved color value from CSS variable at runtime
+function getCssColor(varName: string): string {
+  const value = getComputedStyle(document.documentElement).getPropertyValue(varName).trim()
+  if (!value) throw new Error(`CSS variable ${varName} is empty - check styles/colors.css`)
+  return value
+}
+
+// Map semantic color name to CSS variable name
+function colorToVar(name: string | undefined, fallbackVar: string): string {
+  if (!name) return fallbackVar
+  // Already a var name
+  if (name.startsWith('--')) return name
+  // Map semantic names to CSS vars
+  return `--color-${name}`
+}
+
+// Resolve QR code color based on theme and props
+const resolvedColor = computed(() => {
+  return getCssColor(colorToVar(props.color, '--color-text'))
+})
+
+// Resolve background color based on theme and props
+const resolvedBgColor = computed(() => {
+  return getCssColor(colorToVar(props.bgColor, '--color-bg'))
+})
+
+async function generateQR() {
+  try {
+    error.value = null
+
+    svgString.value = await QRCodeLib.toString(props.data, {
+      type: 'svg',
+      width: props.size,
+      margin: 0,
+      color: {
+        dark: resolvedColor.value,
+        light: resolvedBgColor.value
+      },
+      errorCorrectionLevel: 'M'
+    })
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Failed to generate QR code'
+    console.error('QRCode generation error:', e)
+  }
+}
+
+onMounted(generateQR)
+
+// Regenerate QR code when any relevant prop or theme changes
+watch(
+  () => [
+    props.data,
+    props.size,
+    props.color,
+    props.bgColor,
+    isDark.value
+  ],
+  generateQR
+)
+</script>
+
+<template>
+  <div
+    class="qrcode"
+    :class="{ 'qrcode-error': error }"
+    :style="{ width: `${size}px`, height: `${size}px` }"
+  >
+    <div v-if="error" class="qrcode-error-msg">{{ error }}</div>
+    <div v-else v-html="svgString" class="qrcode-svg"></div>
+  </div>
+</template>
+
+<style>
+.qrcode {
+  display: inline-block;
+  line-height: 0;
+}
+
+.qrcode-svg {
+  width: 100%;
+  height: 100%;
+}
+
+.qrcode-svg svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.qrcode-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-bg-muted);
+  border-radius: 0.25rem;
+}
+
+.qrcode-error-msg {
+  font-size: var(--font-size-small);
+  color: var(--color-danger);
+  text-align: center;
+  padding: 0.5rem;
+  line-height: var(--line-height-body);
+}
+</style>

package/components/QuoteBlock.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+/**
+ * QuoteBlock primitive — large centered quote with decorative quotation mark.
+ *
+ * <QuoteBlock author="Steve Jobs" source="Stanford, 2005">
+ * Stay hungry, stay foolish.
+ * </QuoteBlock>
+ */
+
+withDefaults(defineProps<{
+  author?: string
+  source?: string
+  size?: 'md' | 'lg'
+  mark?: boolean
+}>(), {
+  size: 'lg',
+  mark: true,
+})
+</script>
+
+<template>
+  <div class="quote-block" :class="`quote-block-${size}`">
+    <div class="quote-block-text">
+      <slot />
+    </div>
+    <div v-if="author || source" class="quote-block-attribution">
+      <span v-if="author" class="quote-block-author">{{ author }}</span>
+      <span v-if="source" class="quote-block-source">{{ source }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.quote-block {
+  text-align: center;
+  max-width: 35ch;
+  margin-inline: auto;
+  position: relative;
+}
+
+.quote-block-text {
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-body);
+  color: var(--color-text);
+  position: relative;
+}
+
+.quote-block-text::before {
+  content: '\201C';
+  font-size: 6rem;
+  line-height: 1;
+  color: var(--color-primary);
+  opacity: 0.3;
+  position: absolute;
+  top: -2.5rem;
+  left: -1rem;
+}
+
+.quote-block-lg .quote-block-text {
+  font-size: calc(var(--font-size-h2) * 0.85);
+}
+
+.quote-block-md .quote-block-text {
+  font-size: calc(var(--font-size-base) * 1.15);
+}
+
+.quote-block-text :deep(p) {
+  text-align: center;
+  max-width: none;
+}
+
+.quote-block-text :deep(blockquote) {
+  border: none;
+  padding: 0;
+  margin: 0;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+}
+
+.quote-block-text :deep(blockquote p) {
+  text-align: center;
+  max-width: none;
+}
+
+.quote-block-attribution {
+  font-size: var(--font-size-small);
+  color: var(--color-text-secondary);
+  margin-top: var(--space-md);
+}
+
+.quote-block-author {
+  display: block;
+}
+
+.quote-block-source {
+  display: block;
+  color: var(--color-text-tertiary);
+  font-size: calc(var(--font-size-small) * 0.9);
+}
+</style>