@alphacifer/slidev-addon-theme 0.0.9 → 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-defense-in-depth/ArcDefenseInDepthLayerHeading.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, inject, useSlots, type VNode, watch } from 'vue';
+
+import { ARC_DID_LAYER_KEY } from '../../../utils/defense-in-depth/arc-defense-in-depth/context';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'ArcDefenseInDepthLayerHeading',
+});
+
+export interface IArcDefenseInDepthLayerHeadingProps {
+  readonly color?: string;
+}
+
+const props = defineProps<IArcDefenseInDepthLayerHeadingProps>();
+
+const slots = useSlots();
+const layerContext = inject(ARC_DID_LAYER_KEY, undefined);
+
+function extractTextFromVNodes(nodes: VNode[]): string {
+  let text = '';
+  for (const node of nodes) {
+    if (typeof node.type === 'string' && node.type === 'br') {
+      text += '\n';
+    } else if (typeof node.children === 'string') {
+      text += node.children;
+    } else if (Array.isArray(node.children)) {
+      text += extractTextFromVNodes(node.children as VNode[]);
+    }
+  }
+
+  return text.trim();
+}
+
+const rawTitle = computed(() => {
+  if (slots.default) {
+    return extractTextFromVNodes(slots.default());
+  }
+
+  return '';
+});
+
+watch(
+  rawTitle,
+  (val) => {
+    if (val && layerContext?.setTitle) {
+      layerContext.setTitle(val);
+    }
+  },
+  { immediate: true },
+);
+
+const maxTitleWidth = computed(() => {
+  const geo = layerContext?.layerGeo.value;
+  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 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 v-bind="forwardedAttrs()" :class="className()" :style="positionStyle">
+    <slot />
+  </div>
+</template>