@alphacifer/slidev-addon-theme 0.0.10 → 0.0.11

package/components/defense-in-depth/arc-defense-in-depth/ArcDefenseInDepthLayer.vue

@@ -0,0 +1,240 @@
+<script setup lang="ts">
+import {
+  type ComputedRef,
+  computed,
+  inject,
+  onUnmounted,
+  provide,
+  ref,
+  watch,
+} from 'vue';
+
+import {
+  ARC_DID_LAYER_KEY,
+  ARC_DID_ROOT_KEY,
+  type IArcDefenseInDepthLayerContext,
+  type IArcDefenseInDepthRegisteredLayerData,
+  type IArcDefenseInDepthRegisteredSectorData,
+} from '../../../utils/defense-in-depth/arc-defense-in-depth/context';
+import type {
+  IArcDefenseInDepthPartItem,
+  IArcDefenseInDepthSectorItem,
+} from '../../../utils/defense-in-depth/arc-defense-in-depth/types';
+
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'ArcDefenseInDepthLayer',
+});
+
+export interface IArcDefenseInDepthLayerProps {
+  readonly color?: string;
+  readonly textColor?: string;
+  readonly index?: number;
+  readonly active?: boolean;
+}
+
+const props = withDefaults(defineProps<IArcDefenseInDepthLayerProps>(), {
+  color: undefined,
+  textColor: undefined,
+  index: undefined,
+  active: undefined,
+});
+
+const rootContext = inject(ARC_DID_ROOT_KEY, undefined);
+const currentTitle = ref<string | undefined>();
+
+// Manage sector and part registrations within this layer
+const registeredSectorTokens = ref<symbol[]>([]);
+const registeredSectorData = ref<
+  Map<symbol, IArcDefenseInDepthRegisteredSectorData>
+>(new Map());
+
+function registerSector(
+  token?: symbol,
+  sectorDataRef?: ComputedRef<
+    IArcDefenseInDepthRegisteredSectorData | undefined
+  >,
+) {
+  const sToken = token ?? Symbol();
+  if (!registeredSectorTokens.value.includes(sToken)) {
+    registeredSectorTokens.value = [...registeredSectorTokens.value, sToken];
+  }
+
+  let stopWatch: (() => void) | undefined;
+  if (sectorDataRef) {
+    stopWatch = watch(
+      sectorDataRef,
+      (val) => {
+        const nextMap = new Map(registeredSectorData.value);
+        if (val) {
+          nextMap.set(sToken, val);
+        } else {
+          nextMap.delete(sToken);
+        }
+
+        registeredSectorData.value = nextMap;
+      },
+      { immediate: true },
+    );
+  }
+
+  const index = computed(() => registeredSectorTokens.value.indexOf(sToken));
+
+  return {
+    index,
+    unregister: () => {
+      stopWatch?.();
+      registeredSectorTokens.value = registeredSectorTokens.value.filter(
+        (t) => t !== sToken,
+      );
+      const nextMap = new Map(registeredSectorData.value);
+      nextMap.delete(sToken);
+      registeredSectorData.value = nextMap;
+    },
+  };
+}
+
+function registerPart(
+  token?: symbol,
+  partDataRef?: ComputedRef<IArcDefenseInDepthPartItem | undefined>,
+) {
+  const pToken = token ?? Symbol();
+  const sectorDataRef = computed<
+    IArcDefenseInDepthRegisteredSectorData | undefined
+  >(() => {
+    const pData = partDataRef?.value;
+    if (!pData) {
+      return undefined;
+    }
+
+    return {
+      parts: [pData],
+      split: false,
+      angle: pData.angle,
+      span: pData.span,
+      color: pData.color,
+    };
+  });
+  return registerSector(pToken, sectorDataRef);
+}
+
+const registeredSectorsList = computed<IArcDefenseInDepthSectorItem[]>(() => {
+  return registeredSectorTokens.value
+    .map((token) => registeredSectorData.value.get(token))
+    .filter(
+      (item): item is IArcDefenseInDepthRegisteredSectorData =>
+        item !== undefined,
+    )
+    .map((data) => ({
+      parts: data.parts ?? [],
+      split: data.split,
+      angle: data.angle,
+      span: data.span,
+      color: data.color,
+    }));
+});
+
+const registeredPartsList = computed<IArcDefenseInDepthPartItem[]>(() => {
+  return registeredSectorsList.value.flatMap(
+    (s) => s.parts as IArcDefenseInDepthPartItem[],
+  );
+});
+
+const layerToken = Symbol();
+const layerRegistrationData = computed<IArcDefenseInDepthRegisteredLayerData>(
+  () => ({
+    title: currentTitle.value,
+    color: props.color,
+    sectors: registeredSectorsList.value,
+    parts: registeredPartsList.value,
+    index: props.index !== undefined ? Number(props.index) : undefined,
+  }),
+);
+
+const registration = rootContext?.registerLayer(
+  layerToken,
+  layerRegistrationData,
+);
+
+onUnmounted(() => {
+  registration?.unregister();
+});
+
+const resolvedIndex = computed<number>(() => {
+  if (props.index !== undefined) {
+    return Number(props.index);
+  }
+
+  return registration?.index.value ?? 0;
+});
+
+const layerGeo = computed(() => {
+  if (!rootContext) {
+    return undefined;
+  }
+
+  return rootContext.geo.value.layers[resolvedIndex.value];
+});
+
+const isActive = computed<boolean>(() => {
+  if (props.active !== undefined) {
+    return props.active;
+  }
+
+  if (!rootContext) {
+    return false;
+  }
+
+  return (
+    rootContext.activeIndex.value === -1 ||
+    rootContext.activeIndex.value === resolvedIndex.value
+  );
+});
+
+const effectiveColor = computed<string>(() => {
+  if (props.color) {
+    return props.color;
+  }
+
+  if (rootContext) {
+    return rootContext.getLayerColor(resolvedIndex.value);
+  }
+
+  return 'var(--alpha-arc-defense-in-depth-layer-accent)';
+});
+
+const layerContext: IArcDefenseInDepthLayerContext = {
+  layerIndex: resolvedIndex,
+  layerGeo,
+  isActive,
+  color: effectiveColor,
+  textColor: computed(() => props.textColor),
+  title: computed(() => currentTitle.value),
+  setTitle: (title: string) => {
+    currentTitle.value = title;
+  },
+  partsCount: computed(() => registeredPartsList.value.length),
+  registerPart,
+  registerSector,
+};
+
+provide(ARC_DID_LAYER_KEY, layerContext);
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-arc-defense-in-depth__layer contents',
+);
+</script>
+
+<template>
+  <div
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :data-index="resolvedIndex"
+    :data-active="isActive"
+  >
+    <!-- Default children slots -->
+    <slot />
+  </div>
+</template>

package/components/defense-in-depth/{arc-did/ArcDiDLayerTitle.vue → arc-defense-in-depth/ArcDefenseInDepthLayerHeading.vue}

@@ -1,21 +1,19 @@
 <script setup lang="ts">
-import { computed, inject, ref, useSlots, type VNode, watch } from 'vue';
+import { computed, inject, useSlots, type VNode, watch } from 'vue';
 
-import { ARC_DID_LAYER_KEY } from '../../../utils/defenseInDepth/arcDid/context';
+import { ARC_DID_LAYER_KEY } from '../../../utils/defense-in-depth/arc-defense-in-depth/context';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
-  name: 'ArcDiDLayerTitle',
+  inheritAttrs: false,
+  name: 'ArcDefenseInDepthLayerHeading',
 });
 
-export interface IArcDiDLayerTitleProps {
-  readonly title?: string;
+export interface IArcDefenseInDepthLayerHeadingProps {
   readonly color?: string;
 }
 
-const props = withDefaults(defineProps<IArcDiDLayerTitleProps>(), {
-  title: undefined,
-  color: undefined,
-});
+const props = defineProps<IArcDefenseInDepthLayerHeadingProps>();
 
 const slots = useSlots();
 const layerContext = inject(ARC_DID_LAYER_KEY, undefined);
@@ -31,16 +29,15 @@ function extractTextFromVNodes(nodes: VNode[]): string {
       text += extractTextFromVNodes(node.children as VNode[]);
     }
   }
+
   return text.trim();
 }
 
 const rawTitle = computed(() => {
-  if (props.title) {
-    return props.title;
-  }
   if (slots.default) {
     return extractTextFromVNodes(slots.default());
   }
+
   return '';
 });
 
@@ -59,40 +56,41 @@ const maxTitleWidth = computed(() => {
   if (!geo) {
     return 130;
   }
+
   const arcLen = geo.midRadius * (40 * (Math.PI / 180));
   return Math.max(75, Math.min(130, Math.round(arcLen * 0.82)));
 });
 
+const headingColor = computed(() => {
+  return props.color ?? layerContext?.textColor?.value;
+});
+
 const positionStyle = computed(() => {
   const geo = layerContext?.layerGeo.value;
+  const colorVars = headingColor.value
+    ? { '--alpha-arc-defense-in-depth-layer-heading': headingColor.value }
+    : {};
+
   if (!geo) {
-    return {};
+    return colorVars;
   }
+
   return {
     left: `${geo.titlePosition.x}px`,
     top: `${geo.titlePosition.y}px`,
     transform: 'translate(-50%, -50%)',
     maxWidth: `${maxTitleWidth.value}px`,
+    ...colorVars,
   };
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-arc-defense-in-depth__layer-title absolute z-20 max-w-[140px] pointer-events-auto select-none text-center font-semibold text-(--alpha-arc-defense-in-depth-layer-heading) tracking-tight leading-snug whitespace-pre-line text-sm md:text-base transition-colors duration-200',
+);
 </script>
 
 <template>
-  <div
-    class="alpha-arc-did__layer-title absolute z-20 pointer-events-auto select-none text-center"
-    :style="positionStyle"
-  >
-    <div
-      class="font-semibold text-slate-800 dark:text-slate-100 tracking-tight leading-snug whitespace-pre-line text-sm md:text-base transition-colors duration-200"
-      :style="{ color: props.color ?? layerContext?.textColor?.value }"
-    >
-      <slot>{{ props.title }}</slot>
-    </div>
+  <div v-bind="forwardedAttrs()" :class="className()" :style="positionStyle">
+    <slot />
   </div>
 </template>
-
-<style scoped>
-.alpha-arc-did__layer-title {
-  max-width: 140px;
-}
-</style>