@alphacifer/slidev-addon-theme 0.0.8 → 0.0.10

package/components/pyramid/square-pyramid/SquarePyramidStackTitle.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import {
+  SQUARE_PYRAMID_ROOT_KEY,
+  SQUARE_PYRAMID_STACK_KEY,
+} from '../../../utils/pyramid/square-pyramid';
+
+defineOptions({
+  name: 'SquarePyramidStackTitle',
+});
+
+export interface ISquarePyramidStackTitleProps {
+  readonly step?: string | number;
+  readonly title?: string;
+  readonly color?: string;
+  readonly minWidth?: number;
+}
+
+const props = withDefaults(defineProps<ISquarePyramidStackTitleProps>(), {
+  step: undefined,
+  title: undefined,
+  color: undefined,
+  minWidth: 150,
+});
+
+const rootContext = inject(SQUARE_PYRAMID_ROOT_KEY, undefined);
+const stackContext = inject(SQUARE_PYRAMID_STACK_KEY, undefined);
+
+const isActive = computed(() => {
+  return stackContext?.isActive.value ?? false;
+});
+
+const isAnimated = computed(() => {
+  return rootContext?.animation.value ?? false;
+});
+
+const stepIndex = computed(() => {
+  return stackContext?.index.value ?? 0;
+});
+
+const resolvedStep = computed(() => {
+  if (props.step !== undefined) {
+    return props.step;
+  }
+  if (stackContext?.step.value !== undefined) {
+    return stackContext.step.value;
+  }
+  return '01';
+});
+
+const minPillWidth = computed(() => props.minWidth ?? 150);
+
+const stackColor = computed(() => {
+  return (
+    props.color ??
+    stackContext?.color?.value ??
+    rootContext?.color.value ??
+    '#3b82f6'
+  );
+});
+</script>
+
+<template>
+  <div
+    class="alpha-square-pyramid-stack-title relative w-full flex items-center select-none"
+    :class="[
+      isActive
+        ? 'alpha-square-pyramid-stack-title--active'
+        : 'alpha-square-pyramid-stack-title--default',
+    ]"
+    :style="{
+      '--title-delay': `calc(var(--square-pyramid-start-delay, 0ms) + ${460 + stepIndex * 320}ms)`,
+    }"
+  >
+    <!-- Pill Badge Container -->
+    <div
+      class="alpha-square-pyramid-stack-title__pill flex items-center gap-2 px-2.5 py-1 rounded-full transition-all duration-300 border flex-shrink-0"
+      :class="{
+        'alpha-square-pyramid-stack-title__pill--animated': isAnimated,
+      }"
+      :style="{
+        minWidth: `${minPillWidth}px`,
+        maxWidth: 'calc(100% - 30px)',
+        width: 'fit-content',
+        boxSizing: 'border-box',
+        borderColor: stackColor,
+        backgroundColor: isActive
+          ? 'rgba(255, 255, 255, 0.95)'
+          : 'rgba(255, 255, 255, 0.85)',
+        boxShadow: isActive
+          ? `0 4px 14px ${stackColor}26`
+          : 'none',
+      }"
+    >
+      <!-- Circular Step Indicator -->
+      <div
+        class="w-5.5 h-5.5 rounded-full flex items-center justify-center text-[10px] font-bold tracking-tight transition-all duration-300 flex-shrink-0"
+        :style="{
+          backgroundColor: stackColor,
+          color: '#ffffff',
+        }"
+      >
+        <slot name="step">{{ resolvedStep }}</slot>
+      </div>
+      <!-- Title Text -->
+      <span
+        class="text-xs font-semibold tracking-tight transition-colors duration-300 pr-1 truncate flex-1 leading-tight"
+        :style="{
+          color: isActive ? '#0f172a' : '#334155',
+        }"
+      >
+        <slot>{{ props.title }}</slot>
+      </span>
+    </div>
+    <!-- Scalable Line between Title and Dot -->
+    <div
+      class="alpha-square-pyramid-stack-title__connector flex-1 flex items-center min-w-[30px] pointer-events-none"
+    >
+      <div
+        class="alpha-square-pyramid-stack-title__line flex-1 h-[1px] transition-colors duration-300"
+        :class="{
+          'alpha-square-pyramid-stack-title__line--animated': isAnimated,
+        }"
+        :style="{
+          backgroundColor: stackColor,
+          opacity: isActive ? 1 : 0.65,
+        }"
+      />
+      <div
+        class="alpha-square-pyramid-stack-title__dot w-1.5 h-1.5 rounded-full flex-shrink-0 -ml-1 transition-all duration-300"
+        :class="{
+          'alpha-square-pyramid-stack-title__dot--animated': isAnimated,
+        }"
+        :style="{
+          backgroundColor: stackColor,
+          boxShadow: isActive
+            ? `0 0 6px ${stackColor}`
+            : `0 0 2px ${stackColor}80`,
+        }"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.alpha-square-pyramid-stack-title {
+  box-sizing: border-box;
+}
+
+.alpha-square-pyramid-stack-title--active .alpha-square-pyramid-stack-title__pill {
+  backdrop-filter: blur(8px);
+}
+
+.alpha-square-pyramid-stack-title__dot--animated {
+  animation: alpha-pyramid-title-dot-pop 120ms cubic-bezier(0.16, 1, 0.3, 1) var(--title-delay) both;
+}
+
+@keyframes alpha-pyramid-title-dot-pop {
+  0% {
+    opacity: 0;
+    transform: scale(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.alpha-square-pyramid-stack-title__line--animated {
+  transform-origin: right center;
+  animation: alpha-pyramid-title-line-draw 500ms cubic-bezier(0.4, 0, 0.2, 1) calc(var(--title-delay) + 120ms) both;
+}
+
+@keyframes alpha-pyramid-title-line-draw {
+  0% {
+    opacity: 0;
+    transform: scaleX(0);
+  }
+  2% {
+    opacity: 1;
+    transform: scaleX(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+}
+
+.alpha-square-pyramid-stack-title__pill--animated {
+  animation: alpha-pyramid-title-pill-in 240ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--title-delay) + 380ms) both;
+}
+
+@keyframes alpha-pyramid-title-pill-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alphacifer/slidev-addon-theme",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "All Slidev addons for Alpha presentations",
   "type": "module",
   "keywords": [
@@ -39,6 +39,7 @@
     "vue": "3.5.40"
   },
   "scripts": {
+    "test": "vitest run --coverage",
     "dev": "slidev slides.md --open",
     "dev:academic": "slidev academic-slides.md --open",
     "preview:build": "slidev build slides.md"

package/utils/defenseInDepth/arcDid/context.ts

@@ -0,0 +1,110 @@
+import type { ComputedRef, InjectionKey, Ref } from 'vue';
+
+import type {
+  IArcDiDGeometry,
+  IArcDiDLayerGeometry,
+  IArcDiDPartItem,
+  IArcDiDSectorGeometry,
+  IArcDiDSectorItem,
+  TArcDiDOrder,
+} from './types';
+
+export interface IArcDiDRegisteredSectorData {
+  readonly parts?: readonly IArcDiDPartItem[];
+  readonly split?: boolean;
+  readonly angle?: number;
+  readonly span?: number;
+  readonly color?: string;
+  readonly index?: number;
+  readonly rotate?: boolean | number | 'tangent' | 'auto';
+  readonly skew?: boolean | number | string;
+}
+
+export interface IArcDiDRegisteredLayerData {
+  readonly title?: string;
+  readonly color?: string;
+  readonly parts?: readonly IArcDiDPartItem[];
+  readonly sectors?: readonly IArcDiDSectorItem[];
+  readonly index?: number;
+}
+
+export interface IArcDiDRootContext {
+  readonly geo: ComputedRef<IArcDiDGeometry>;
+  readonly count: ComputedRef<number>;
+  readonly activeIndex: Ref<number> | ComputedRef<number>;
+  readonly setActiveIndex: (index: number) => void;
+  readonly activePart?:
+    | Ref<string | number | undefined>
+    | ComputedRef<string | number | undefined>;
+  readonly setActivePart?: (part: string | number | undefined) => void;
+  readonly hasAnyActivePart?: ComputedRef<boolean>;
+  readonly isPartActive?: (
+    label?: string,
+    index?: number,
+    activeProp?: boolean,
+  ) => boolean;
+  readonly color: ComputedRef<string>;
+  readonly colors: ComputedRef<readonly string[] | undefined>;
+  readonly order: ComputedRef<TArcDiDOrder>;
+  readonly animation: ComputedRef<boolean>;
+  readonly interactive: ComputedRef<boolean>;
+  readonly startDelay: ComputedRef<number>;
+  readonly getLayerColor: (index: number) => string;
+  readonly registerLayer: (
+    token?: symbol,
+    dataRef?: ComputedRef<IArcDiDRegisteredLayerData | undefined>,
+  ) => {
+    index: ComputedRef<number>;
+    unregister: () => void;
+  };
+}
+
+export interface IArcDiDSectorContext {
+  readonly sectorIndex: ComputedRef<number>;
+  readonly sectorGeo: ComputedRef<IArcDiDSectorGeometry | undefined>;
+  readonly rotate?: ComputedRef<
+    boolean | number | 'tangent' | 'auto' | undefined
+  >;
+  readonly skew?: ComputedRef<boolean | number | string | undefined>;
+  readonly registerPart: (
+    token?: symbol,
+    partDataRef?: ComputedRef<IArcDiDPartItem | undefined>,
+  ) => {
+    index: ComputedRef<number>;
+    unregister: () => void;
+  };
+}
+
+export interface IArcDiDLayerContext {
+  readonly layerIndex: ComputedRef<number>;
+  readonly layerGeo: ComputedRef<IArcDiDLayerGeometry | undefined>;
+  readonly isActive: ComputedRef<boolean>;
+  readonly color: ComputedRef<string>;
+  readonly textColor?: ComputedRef<string | undefined>;
+  readonly title: ComputedRef<string | undefined>;
+  readonly setTitle: (title: string) => void;
+  readonly partsCount: ComputedRef<number>;
+  readonly registerPart: (
+    token?: symbol,
+    partDataRef?: ComputedRef<IArcDiDPartItem | undefined>,
+  ) => {
+    index: ComputedRef<number>;
+    unregister: () => void;
+  };
+  readonly registerSector: (
+    token?: symbol,
+    sectorDataRef?: ComputedRef<IArcDiDRegisteredSectorData | undefined>,
+  ) => {
+    index: ComputedRef<number>;
+    unregister: () => void;
+  };
+}
+
+export const ARC_DID_ROOT_KEY: InjectionKey<IArcDiDRootContext> =
+  Symbol('ARC_DID_ROOT_KEY');
+
+export const ARC_DID_LAYER_KEY: InjectionKey<IArcDiDLayerContext> =
+  Symbol('ARC_DID_LAYER_KEY');
+
+export const ARC_DID_SECTOR_KEY: InjectionKey<IArcDiDSectorContext> =
+  Symbol('ARC_DID_SECTOR_KEY');