@alphacifer/slidev-addon-theme 0.0.4 → 0.0.6

package/components/chevron-card/ChevronCardBadge.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { CHEVRON_CARD_KEY } from '../../utils/chevronCard';
+
+defineOptions({
+  name: 'ChevronCardBadge',
+});
+
+export interface IChevronCardBadgeProps {
+  readonly step?: string | number;
+  readonly icon?: string | object;
+  readonly color?: string;
+  readonly width?: number;
+  readonly height?: number | string;
+  readonly notchDepth?: number;
+}
+
+const props = withDefaults(defineProps<IChevronCardBadgeProps>(), {
+  step: undefined,
+  icon: undefined,
+  color: undefined,
+  width: 130,
+  height: undefined,
+  notchDepth: 26,
+});
+
+const cardContext = inject(CHEVRON_CARD_KEY, undefined);
+
+const resolvedColor = computed(() => {
+  return props.color ?? cardContext?.color.value ?? '#f59e0b';
+});
+
+const resolvedStep = computed(() => {
+  return props.step ?? cardContext?.step.value ?? '01';
+});
+</script>
+
+<template>
+  <div
+    class="alpha-chevron-card-badge relative select-none flex-shrink-0 flex items-center justify-center text-white"
+    :style="{
+      width: `${props.width}px`,
+      height: props.height
+        ? typeof props.height === 'number'
+          ? `${props.height}px`
+          : props.height
+        : '100%',
+      backgroundColor: resolvedColor,
+      clipPath: `polygon(0% 0%, calc(100% - ${props.notchDepth}px) 0%, 100% 50%, calc(100% - ${props.notchDepth}px) 100%, 0% 100%, ${props.notchDepth}px 50%)`,
+    }"
+  >
+    <slot name="icon">
+      <slot>
+        <component
+          :is="props.icon"
+          v-if="typeof props.icon === 'object'"
+          class="w-8 h-8 text-white"
+        />
+        <span
+          v-else-if="typeof props.icon === 'string'"
+          :class="[props.icon, 'text-3xl text-white inline-block']"
+        />
+        <span
+          v-else
+          class="font-extrabold text-[32px] tracking-tight font-sans select-none"
+          style="font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;"
+        >
+          {{ resolvedStep }}
+        </span>
+      </slot>
+    </slot>
+  </div>
+</template>

package/components/chevron-card/ChevronCardContent.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { CHEVRON_CARD_KEY } from '../../utils/chevronCard';
+
+defineOptions({
+  name: 'ChevronCardContent',
+});
+
+export interface IChevronCardContentProps {
+  readonly color?: string;
+}
+
+const props = withDefaults(defineProps<IChevronCardContentProps>(), {
+  color: undefined,
+});
+
+const cardContext = inject(CHEVRON_CARD_KEY, undefined);
+
+const contentColor = computed(() => {
+  return props.color ?? cardContext?.textColor.value ?? '#6b7280';
+});
+</script>
+
+<template>
+  <div
+    class="alpha-chevron-card-content text-[1rem] leading-[1.45] font-normal tracking-tight select-none font-sans"
+    :style="{
+      color: contentColor,
+      margin: 0,
+      padding: 0,
+      fontSize: '1rem',
+      fontFamily:
+        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/components/chevron-card/ChevronCardHeading.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { CHEVRON_CARD_KEY } from '../../utils/chevronCard';
+
+defineOptions({
+  name: 'ChevronCardHeading',
+});
+
+export interface IChevronCardHeadingProps {
+  readonly color?: string;
+}
+
+const props = withDefaults(defineProps<IChevronCardHeadingProps>(), {
+  color: undefined,
+});
+
+const cardContext = inject(CHEVRON_CARD_KEY, undefined);
+
+const headingColor = computed(() => {
+  return props.color ?? cardContext?.titleColor.value ?? '#4b5563';
+});
+</script>
+
+<template>
+  <div
+    class="alpha-chevron-card-heading font-bold text-[1.25rem] uppercase tracking-wider leading-tight select-none font-sans"
+    :style="{
+      color: headingColor,
+      padding: 0,
+      fontSize: '1.25rem',
+      fontFamily:
+        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
+      marginBottom: '0.25rem',
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/components/hex-triad/HexTriad.vue

@@ -0,0 +1,438 @@
+<script setup lang="ts">
+import {
+  type ComputedRef,
+  computed,
+  inject,
+  onBeforeUpdate,
+  provide,
+  ref,
+} from 'vue';
+
+import {
+  calculateHexTriadCoordinates,
+  createRoundedHexagonPath,
+  HEX_TRIAD_ROOT_KEY,
+  type IHexTriadItem,
+  resolveHexTriadItems,
+} from '../../utils/hexTriad';
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+export interface IHexTriadProps {
+  readonly title?: string;
+  readonly subtitle?: string;
+  readonly animation?: boolean;
+  readonly items?: readonly IHexTriadItem[];
+  /**
+   * Additional delay (ms) before animation starts.
+   * Defaults to 600ms inside `shifting-intro` layout, 0ms otherwise.
+   */
+  readonly startDelay?: number;
+  /**
+   * Manually control whether animation runs.
+   * Defaults to true, or automatically tracks `$clicks > 0` inside `shifting-intro`.
+   */
+  readonly active?: boolean;
+}
+
+const props = withDefaults(defineProps<IHexTriadProps>(), {
+  animation: true,
+  title: undefined,
+  items: undefined,
+  active: undefined,
+  subtitle: undefined,
+  startDelay: undefined,
+});
+
+const shiftingIntro = inject<
+  | {
+      active: ComputedRef<boolean>;
+      isShifting?: ComputedRef<boolean>;
+    }
+  | undefined
+>('SLIDEV_LAYOUT_SHIFTING_INTRO', undefined);
+
+const isAnimated = computed(() => {
+  if (!props.animation) {
+    return false;
+  }
+
+  if (props.active !== undefined) {
+    return props.active;
+  }
+
+  if (shiftingIntro) {
+    return shiftingIntro.active.value;
+  }
+
+  return true;
+});
+
+const resolvedStartDelay = computed(() => {
+  if (props.startDelay !== undefined) {
+    return props.startDelay;
+  }
+
+  if (shiftingIntro) {
+    // Only delay 600ms when the heading is actively shifting up from click 0.
+    // On reload at click >= 1, heading is already at the top -> 0ms delay!
+    return shiftingIntro.isShifting?.value ? 600 : 0;
+  }
+
+  return 0;
+});
+
+const resolvedItems = computed(() => resolveHexTriadItems(props.items));
+
+let calloutCounter = 0;
+const customBadgeTexts = ref<(string | number)[]>([]);
+
+const registerCallout = () => {
+  const idx = calloutCounter++;
+  return {
+    index: idx,
+    item: computed(() => resolvedItems.value[idx] ?? resolvedItems.value[0]),
+    setBadgeText: (text: string | number) => {
+      customBadgeTexts.value[idx] = text;
+    },
+  };
+};
+
+onBeforeUpdate(() => {
+  calloutCounter = 0;
+});
+
+provide(HEX_TRIAD_ROOT_KEY, {
+  registerCallout,
+  items: resolvedItems,
+  animation: isAnimated,
+});
+
+const item1 = computed(() => {
+  return resolvedItems.value[0];
+});
+const item2 = computed(() => {
+  return resolvedItems.value[1];
+});
+const item3 = computed(() => {
+  return resolvedItems.value[2];
+});
+
+// Central diagram coordinates
+const coords = calculateHexTriadCoordinates();
+const {
+  hex1,
+  hex2,
+  hex3,
+  badge1,
+  badge2,
+  badge3,
+  centerX,
+  centerY,
+  hexRadius,
+  triadRadius,
+  badgeRadius,
+} = coords;
+
+const hex1X = hex1.x;
+const hex1Y = hex1.y;
+const hex2X = hex2.x;
+const hex2Y = hex2.y;
+const hex3X = hex3.x;
+const hex3Y = hex3.y;
+
+const badge1X = badge1.x;
+const badge1Y = badge1.y;
+const badge2X = badge2.x;
+const badge2Y = badge2.y;
+const badge3X = badge3.x;
+const badge3Y = badge3.y;
+
+const HEX_CORNER_RADIUS = 16;
+
+// Second layer (background pastel hexagons):
+// Aligned to first layer, then moved 1/4 block outward:
+// - Red: top (-32px)
+// - Orange: right-bottom (+27.71px, +16px)
+// - Blue: left-bottom (-27.71px, +16px)
+const QUARTER_SHIFT = 32;
+const shiftCos30 = Number(
+  (QUARTER_SHIFT * Math.cos((30 * Math.PI) / 180)).toFixed(2),
+);
+const shiftSin30 = Number(
+  (QUARTER_SHIFT * Math.sin((30 * Math.PI) / 180)).toFixed(2),
+);
+
+const hex1BgPath = createRoundedHexagonPath(
+  hex1X,
+  hex1Y - QUARTER_SHIFT,
+  hexRadius,
+  HEX_CORNER_RADIUS,
+);
+const hex2BgPath = createRoundedHexagonPath(
+  hex2X + shiftCos30,
+  hex2Y + shiftSin30,
+  hexRadius,
+  HEX_CORNER_RADIUS,
+);
+const hex3BgPath = createRoundedHexagonPath(
+  hex3X - shiftCos30,
+  hex3Y + shiftSin30,
+  hexRadius,
+  HEX_CORNER_RADIUS,
+);
+
+// Middle layer (solid base at the same position as front layer)
+const hex1BasePath = createRoundedHexagonPath(
+  hex1X,
+  hex1Y,
+  hexRadius,
+  HEX_CORNER_RADIUS,
+);
+const hex2BasePath = createRoundedHexagonPath(
+  hex2X,
+  hex2Y,
+  hexRadius,
+  HEX_CORNER_RADIUS,
+);
+const hex3BasePath = createRoundedHexagonPath(
+  hex3X,
+  hex3Y,
+  hexRadius,
+  HEX_CORNER_RADIUS,
+);
+
+// Foreground hexagons with rounded borders
+const hex1TopPath = createRoundedHexagonPath(
+  hex1X,
+  hex1Y,
+  hexRadius,
+  HEX_CORNER_RADIUS,
+);
+const hex2TopPath = createRoundedHexagonPath(
+  hex2X,
+  hex2Y,
+  hexRadius,
+  HEX_CORNER_RADIUS,
+);
+const hex3TopPath = createRoundedHexagonPath(
+  hex3X,
+  hex3Y,
+  hexRadius,
+  HEX_CORNER_RADIUS,
+);
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-hex-triad w-full flex flex-col items-center justify-center select-none font-sans',
+);
+</script>
+
+<template>
+  <div
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :style="{ '--hex-start-delay': `${resolvedStartDelay}ms` }"
+  >
+    <header v-if="title || $slots.title" class="alpha-hex-triad__header mb-4 text-center">
+      <slot name="title">
+        <h2 class="alpha-hex-triad__title text-2xl font-bold font-sans tracking-tight">
+          {{ title }}
+        </h2>
+      </slot>
+      <p v-if="subtitle || $slots.subtitle" class="alpha-hex-triad__subtitle text-sm font-sans">
+        <slot name="subtitle">{{ subtitle }}</slot>
+      </p>
+    </header>
+    <div class="alpha-hex-triad__stage relative w-full max-w-5xl h-[440px] flex items-center justify-center">
+      <!-- Center Column: Overlapping 3D Rounded Hexagon SVG -->
+      <div class="alpha-hex-triad__center relative flex items-center justify-center">
+        <svg
+          class="alpha-hex-triad__svg w-[450px] h-[420px] overflow-visible"
+          viewBox="0 0 540 440"
+        >
+          <defs>
+            <!-- Drop shadow for badges -->
+            <filter id="hex-badge-shadow" x="-30%" y="-30%" width="160%" height="160%">
+              <feDropShadow dx="0" dy="3" stdDeviation="4" flood-opacity="0.35" />
+            </filter>
+            <!-- 3D extrusion shadow for base layer -->
+            <filter id="hex-triad-depth" x="-20%" y="-20%" width="140%" height="140%">
+              <feDropShadow dx="0" dy="6" stdDeviation="6" flood-opacity="0.3" />
+            </filter>
+            <!-- Gradients for Hex 01 -->
+            <linearGradient id="grad-hex-1" x1="0%" y1="0%" x2="0%" y2="100%">
+              <stop offset="0%" :stop-color="item1.color" stop-opacity="0.95" />
+              <stop offset="100%" :stop-color="item1.depthColor" stop-opacity="0.9" />
+            </linearGradient>
+            <!-- Gradients for Hex 02 -->
+            <linearGradient id="grad-hex-2" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" :stop-color="item2.color" stop-opacity="0.95" />
+              <stop offset="100%" :stop-color="item2.depthColor" stop-opacity="0.9" />
+            </linearGradient>
+            <!-- Gradients for Hex 03 -->
+            <linearGradient id="grad-hex-3" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" :stop-color="item3.color" stop-opacity="0.95" />
+              <stop offset="100%" :stop-color="item3.depthColor" stop-opacity="0.9" />
+            </linearGradient>
+          </defs>
+          <!-- LAYER 1: Background Pastel Offset Hexagons (Animated: slides out from behind solid hexagon to offset position) -->
+          <g
+            class="alpha-hex-layer1 alpha-hex-layer1--3"
+            :class="{ 'alpha-hex-layer1--animated': isAnimated }"
+          >
+            <HexTriadLayer
+              :d="hex3BgPath"
+              :fill="item3.lightColor ?? item3.color"
+              :opacity="0.38"
+            />
+          </g>
+          <g
+            class="alpha-hex-layer1 alpha-hex-layer1--2"
+            :class="{ 'alpha-hex-layer1--animated': isAnimated }"
+          >
+            <HexTriadLayer
+              :d="hex2BgPath"
+              :fill="item2.lightColor ?? item2.color"
+              :opacity="0.38"
+            />
+          </g>
+          <g
+            class="alpha-hex-layer1 alpha-hex-layer1--1"
+            :class="{ 'alpha-hex-layer1--animated': isAnimated }"
+          >
+            <HexTriadLayer
+              :d="hex1BgPath"
+              :fill="item1.lightColor ?? item1.color"
+              :opacity="0.38"
+            />
+          </g>
+          <!-- LAYER 2: Middle 3D Depth Base Hexagons (3 hexa blocks) -->
+          <HexTriadLayer
+            :d="hex3BasePath"
+            :fill="item3.depthColor"
+            filter="url(#hex-triad-depth)"
+            :opacity="0.85"
+          />
+          <HexTriadLayer
+            :d="hex2BasePath"
+            :fill="item2.depthColor"
+            filter="url(#hex-triad-depth)"
+            :opacity="0.85"
+          />
+          <HexTriadLayer
+            :d="hex1BasePath"
+            :fill="item1.depthColor"
+            filter="url(#hex-triad-depth)"
+            :opacity="0.85"
+          />
+          <!-- LAYER 3: Foreground Hexagons with Gradients (3 hexa blocks) -->
+          <HexTriadLayer
+            :d="hex3TopPath"
+            fill="url(#grad-hex-3)"
+            :opacity="0.9"
+          />
+          <HexTriadLayer
+            :d="hex2TopPath"
+            fill="url(#grad-hex-2)"
+            :opacity="0.9"
+          />
+          <HexTriadLayer
+            :d="hex1TopPath"
+            fill="url(#grad-hex-1)"
+            :opacity="0.9"
+          />
+          <!-- LAYER 4: White Interconnecting Ring (Circumcircle) -->
+          <circle
+            class="alpha-hex-triad__circumcircle"
+            :cx="centerX"
+            :cy="centerY"
+            :r="triadRadius"
+            fill="none"
+            stroke="#ffffff"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            :style="{ opacity: 0.95 }"
+          />
+          <!-- LAYER 5: Center Circular Badges (Centered Directly on the White Circle) -->
+          <!-- Badge 03 (Bottom-Left) -->
+          <HexTriadCenterBadge
+            :x="badge3X"
+            :y="badge3Y"
+            :radius="badgeRadius"
+            :color="item3.color"
+            :text="customBadgeTexts[2] || item3.id"
+          />
+          <!-- Badge 02 (Bottom-Right) -->
+          <HexTriadCenterBadge
+            :x="badge2X"
+            :y="badge2Y"
+            :radius="badgeRadius"
+            :color="item2.color"
+            :text="customBadgeTexts[1] || item2.id"
+          />
+          <!-- Badge 01 (Top) -->
+          <HexTriadCenterBadge
+            :x="badge1X"
+            :y="badge1Y"
+            :radius="badgeRadius"
+            :color="item1.color"
+            :text="customBadgeTexts[0] || item1.id"
+          />
+        </svg>
+      </div>
+      <!-- If default slot provided, render user's <HexTriadCallout> components -->
+      <slot v-if="$slots.default" />
+      <!-- Fallback: render 3 default callouts if no slots provided -->
+      <template v-else>
+        <HexTriadCallout />
+        <HexTriadCallout />
+        <HexTriadCallout />
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Layer 1 (Pastel Hexagons) slides out with overlapping cascading stagger */
+.alpha-hex-layer1--1.alpha-hex-layer1--animated {
+  animation: hex-layer1-slide-1 500ms cubic-bezier(0.25, 1, 0.5, 1) calc(var(--hex-start-delay, 0ms) + 100ms) both;
+}
+
+.alpha-hex-layer1--2.alpha-hex-layer1--animated {
+  animation: hex-layer1-slide-2 500ms cubic-bezier(0.25, 1, 0.5, 1) calc(var(--hex-start-delay, 0ms) + 300ms) both;
+}
+
+.alpha-hex-layer1--3.alpha-hex-layer1--animated {
+  animation: hex-layer1-slide-3 500ms cubic-bezier(0.25, 1, 0.5, 1) calc(var(--hex-start-delay, 0ms) + 500ms) both;
+}
+
+@keyframes hex-layer1-slide-1 {
+  0% {
+    transform: translate(0px, 32px);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+@keyframes hex-layer1-slide-2 {
+  0% {
+    transform: translate(-27.71px, -16px);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+@keyframes hex-layer1-slide-3 {
+  0% {
+    transform: translate(27.71px, -16px);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+</style>

package/components/hex-triad/HexTriadBadge.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { computed, inject, useSlots, watchEffect } from 'vue';
+
+import {
+  createRoundedHexagonPath,
+  HEX_TRIAD_CALLOUT_KEY,
+} from '../../utils/hexTriad';
+
+defineOptions({
+  name: 'HexTriadBadge',
+});
+
+export interface IHexTriadBadgeProps {
+  readonly id?: string | number;
+  readonly color?: string;
+  readonly lightColor?: string;
+}
+
+const props = withDefaults(defineProps<IHexTriadBadgeProps>(), {
+  id: undefined,
+  color: undefined,
+  lightColor: undefined,
+});
+
+defineSlots<{
+  default?: () => unknown;
+}>();
+
+const calloutContext = inject(HEX_TRIAD_CALLOUT_KEY, undefined);
+const slots = useSlots();
+
+const miniHexPath = createRoundedHexagonPath(18, 18, 17, 4.5);
+
+const badgeColor = computed(() => {
+  return props.color ?? calloutContext?.item.value.color ?? '#e11d48';
+});
+
+const badgeLightColor = computed(() => {
+  return (
+    props.lightColor ??
+    calloutContext?.item.value.lightColor ??
+    calloutContext?.item.value.color ??
+    '#fb7185'
+  );
+});
+
+const fallbackId = computed(() => {
+  return props.id ?? calloutContext?.item.value.id ?? '01';
+});
+
+// Extract text from default slot or prop if available
+const badgeText = computed<string | number>(() => {
+  if (props.id !== undefined) {
+    return props.id;
+  }
+
+  if (!slots.default) {
+    return fallbackId.value;
+  }
+
+  const nodes = slots.default();
+  const text = nodes
+    .map((node) => {
+      if (typeof node.children === 'string') {
+        return node.children;
+      }
+
+      if (typeof node.children === 'number') {
+        return String(node.children);
+      }
+
+      return '';
+    })
+    .join('')
+    .trim();
+  return text || fallbackId.value;
+});
+
+watchEffect(() => {
+  if (calloutContext?.setBadgeText) {
+    calloutContext.setBadgeText(badgeText.value);
+  }
+});
+</script>
+
+<template>
+  <svg class="alpha-hex-triad-badge w-10 h-10 drop-shadow flex-shrink-0" viewBox="0 0 36 36">
+    <path class="alpha-hex-triad-badge__bg" :d="miniHexPath" :fill="badgeLightColor" :style="{ opacity: 0.45 }" />
+    <path
+      class="alpha-hex-triad-badge__border"
+      :d="miniHexPath"
+      fill="none"
+      :stroke="badgeLightColor"
+      stroke-width="1"
+      :style="{ opacity: 0.8 }"
+    />
+    <circle class="alpha-hex-triad-badge__circle" cx="18" cy="18" r="11" :fill="badgeColor" />
+    <text
+      class="alpha-hex-triad-badge__text font-black text-[10px] font-sans select-none"
+      x="18"
+      y="21.5"
+      text-anchor="middle"
+      fill="#ffffff"
+    >
+      <tspan>
+        <slot>{{ fallbackId }}</slot>
+      </tspan>
+    </text>
+  </svg>
+</template>