@alphacifer/slidev-addon-theme 0.0.9 → 0.0.10

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

@@ -53,6 +53,14 @@ 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 contentWidth = computed(() => rootContext?.contentWidthPx.value ?? 240);
 
 const deltaY = computed(() => {
@@ -107,7 +115,12 @@ const stackColor = computed(() => {
 </script>
 
 <template>
-  <div class="alpha-square-pyramid-stack-content-wrapper relative w-full flex items-center select-none overflow-visible">
+  <div
+    class="alpha-square-pyramid-stack-content-wrapper relative w-full flex items-center select-none overflow-visible"
+    :style="{
+      '--content-delay': `calc(var(--square-pyramid-start-delay, 0ms) + ${470 + stepIndex * 320}ms)`,
+    }"
+  >
     <!-- Scalable Line between Dot and Content Card (always at least 20px) -->
     <div
       ref="connectorRef"
@@ -115,6 +128,9 @@ const stackColor = computed(() => {
     >
       <div
         class="alpha-square-pyramid-stack-content__dot absolute left-0 top-0 -translate-x-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full flex-shrink-0 transition-all duration-300 pointer-events-auto"
+        :class="{
+          'alpha-square-pyramid-stack-content__dot--animated': isAnimated,
+        }"
         :style="{
           backgroundColor: stackColor,
           boxShadow: isActive
@@ -126,6 +142,9 @@ const stackColor = computed(() => {
       <div
         v-if="!effectiveDeltaY"
         class="alpha-square-pyramid-stack-content__line absolute left-0 top-0 w-full h-[1px] -translate-y-1/2 pointer-events-none transition-colors duration-300"
+        :class="{
+          'alpha-square-pyramid-stack-content__line--animated': isAnimated,
+        }"
         :style="{
           backgroundColor: stackColor,
           opacity: isActive ? 1 : 0.65,
@@ -146,12 +165,16 @@ const stackColor = computed(() => {
       >
         <path
           class="alpha-square-pyramid-stack-content__line transition-all duration-300"
+          :class="{
+            'alpha-square-pyramid-stack-content__line--svg-animated': isAnimated,
+          }"
           :d="connectorPath"
           fill="none"
           :stroke="stackColor"
           stroke-width="1.25"
           stroke-linecap="round"
           stroke-linejoin="round"
+          pathLength="1"
           :style="{
             opacity: isActive ? 1 : 0.65,
           }"
@@ -165,6 +188,9 @@ const stackColor = computed(() => {
         isActive
           ? 'alpha-square-pyramid-stack-content--active'
           : 'alpha-square-pyramid-stack-content--default',
+        {
+          'alpha-square-pyramid-stack-content--animated': isAnimated,
+        },
       ]"
       :style="{
         width: `${contentWidth}px`,
@@ -178,6 +204,7 @@ const stackColor = computed(() => {
         boxShadow: isActive
           ? `0 4px 14px ${stackColor}26`
           : 'none',
+        '--card-transform': deltaY ? `translateY(${deltaY}px)` : 'none',
         transform: deltaY ? `translateY(${deltaY}px)` : undefined,
       }"
     >
@@ -201,4 +228,74 @@ const stackColor = computed(() => {
 .alpha-square-pyramid-stack-content--active {
   backdrop-filter: blur(8px);
 }
+
+.alpha-square-pyramid-stack-content__dot--animated {
+  animation: alpha-pyramid-dot-pop 120ms cubic-bezier(0.16, 1, 0.3, 1) var(--content-delay) both;
+}
+
+@keyframes alpha-pyramid-dot-pop {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+.alpha-square-pyramid-stack-content__line--animated {
+  transform-origin: left center;
+  animation: alpha-pyramid-line-draw 500ms cubic-bezier(0.4, 0, 0.2, 1) calc(var(--content-delay) + 120ms) both;
+}
+
+@keyframes alpha-pyramid-line-draw {
+  0% {
+    opacity: 0;
+    transform: translateY(-50%) scaleX(0);
+  }
+  2% {
+    opacity: 1;
+    transform: translateY(-50%) scaleX(0);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(-50%) scaleX(1);
+  }
+}
+
+.alpha-square-pyramid-stack-content__line--svg-animated {
+  stroke-dasharray: 1;
+  animation: alpha-pyramid-svg-line-draw 500ms cubic-bezier(0.4, 0, 0.2, 1) calc(var(--content-delay) + 120ms) both;
+}
+
+@keyframes alpha-pyramid-svg-line-draw {
+  0% {
+    opacity: 0;
+    stroke-dashoffset: 1;
+  }
+  2% {
+    opacity: 1;
+    stroke-dashoffset: 1;
+  }
+  100% {
+    opacity: 1;
+    stroke-dashoffset: 0;
+  }
+}
+
+.alpha-square-pyramid-stack-content--animated {
+  animation: alpha-pyramid-card-in 240ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--content-delay) + 380ms) both;
+}
+
+@keyframes alpha-pyramid-card-in {
+  0% {
+    opacity: 0;
+    transform: var(--card-transform, none) translateX(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: var(--card-transform, none) translateX(0);
+  }
+}
 </style>

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

@@ -31,6 +31,14 @@ 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;
@@ -61,10 +69,16 @@ const stackColor = computed(() => {
         ? '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)',
@@ -105,6 +119,9 @@ const stackColor = computed(() => {
     >
       <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,
@@ -112,6 +129,9 @@ const stackColor = computed(() => {
       />
       <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
@@ -131,4 +151,54 @@ const stackColor = computed(() => {
 .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.9",
+  "version": "0.0.10",
   "description": "All Slidev addons for Alpha presentations",
   "type": "module",
   "keywords": [

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');