@alphacifer/slidev-addon-theme 0.0.5 → 0.0.7

package/utils/useDiagramAutoScale.ts

@@ -0,0 +1,300 @@
+import {
+  type ComputedRef,
+  computed,
+  onMounted,
+  onUnmounted,
+  type Ref,
+  ref,
+} from 'vue';
+
+export interface IUseDiagramAutoScaleOptions {
+  readonly rootRef: Ref<HTMLElement | null>;
+  readonly baseWidth: number;
+  readonly baseHeight: number;
+  readonly scale?: Ref<number | undefined> | (() => number | undefined);
+  readonly autoScale?: Ref<boolean | undefined> | (() => boolean | undefined);
+  readonly maxScale?: Ref<number | undefined> | (() => number | undefined);
+  readonly height?:
+    | Ref<number | string | undefined>
+    | (() => number | string | undefined);
+  readonly pagyClearance?: number;
+}
+
+export interface IUseDiagramAutoScaleResult {
+  readonly resolvedScale: ComputedRef<number>;
+  readonly autoScaleValue: Ref<number>;
+  readonly containerHeight: Ref<number>;
+  readonly updateScale: () => void;
+}
+
+function resolveValue<T>(val: Ref<T> | (() => T) | undefined, fallback: T): T {
+  if (typeof val === 'function') {
+    const res = (val as () => T)();
+
+    return res !== undefined ? res : fallback;
+  }
+
+  if (val !== undefined && val.value !== undefined) {
+    return val.value;
+  }
+
+  return fallback;
+}
+
+/**
+ * Automatically computes a scale factor (via CSS transform: scale)
+ * so that diagram components (ArrowTriad, QuadHub, ArcArrowProcess, etc.)
+ * fit comfortably inside the available slide canvas without clipping or overlaying pagination.
+ */
+export function useDiagramAutoScale(
+  options: IUseDiagramAutoScaleOptions,
+): IUseDiagramAutoScaleResult {
+  const { rootRef, baseWidth, baseHeight, pagyClearance = 32 } = options;
+
+  const autoScaleValue = ref<number>(1);
+  const containerHeight = ref<number>(0);
+
+  const updateScale = () => {
+    if (typeof window === 'undefined' || !rootRef.value) {
+      return;
+    }
+
+    const el = rootRef.value;
+    const parent = el.parentElement;
+
+    if (!parent) {
+      return;
+    }
+
+    // 1. Locate slide container if inside Slidev
+    const pageEl = el.closest<HTMLElement>(
+      '.slidev-page, [data-slidev-page], .slidev-slide-content',
+    );
+    const layoutEl = el.closest<HTMLElement>('.slidev-layout');
+    const slideEl = pageEl || layoutEl;
+
+    // Immediate parent padding
+    const parentStyle = window.getComputedStyle(parent);
+    const padLeft = Number.parseFloat(parentStyle.paddingLeft) || 0;
+    const padRight = Number.parseFloat(parentStyle.paddingRight) || 0;
+    const padTop = Number.parseFloat(parentStyle.paddingTop) || 0;
+    const padBottom = Number.parseFloat(parentStyle.paddingBottom) || 0;
+
+    // Available width inside parent or slide layout
+    let availW = 0;
+
+    if (parent.clientWidth > 0) {
+      availW = parent.clientWidth - padLeft - padRight;
+    } else if (slideEl && slideEl.clientWidth > 0) {
+      const slideStyle = window.getComputedStyle(slideEl);
+      const sPadLeft = Number.parseFloat(slideStyle.paddingLeft) || 0;
+      const sPadRight = Number.parseFloat(slideStyle.paddingRight) || 0;
+      availW = slideEl.clientWidth - sPadLeft - sPadRight;
+    } else if (el.clientWidth > 0) {
+      availW = el.clientWidth;
+    }
+
+    // Available height inside parent or slide layout
+    let availH = 0;
+    const explicitHeight = resolveValue(options.height, undefined);
+
+    if (typeof explicitHeight === 'number') {
+      availH = explicitHeight;
+    } else if (
+      typeof explicitHeight === 'string' &&
+      explicitHeight.endsWith('px')
+    ) {
+      availH = Number.parseFloat(explicitHeight);
+    }
+
+    if (!availH) {
+      // Calculate sibling heights inside parent (e.g. title, headers)
+      let siblingsH = 0;
+
+      for (let i = 0; i < parent.children.length; i++) {
+        const child = parent.children[i];
+
+        if (child && child !== el && child instanceof HTMLElement) {
+          siblingsH += child.offsetHeight;
+          const cs = window.getComputedStyle(child);
+          siblingsH +=
+            (Number.parseFloat(cs.marginTop) || 0) +
+            (Number.parseFloat(cs.marginBottom) || 0);
+        }
+      }
+
+      // Check if pagination element is present and visible
+      const pagyEl =
+        pageEl?.querySelector<HTMLElement>(
+          '.alpha-academic-pagy, .slidev-page-nav, [aria-label="Slide pagination"]',
+        ) ||
+        slideEl?.querySelector<HTMLElement>(
+          '.alpha-academic-pagy, .slidev-page-nav, [aria-label="Slide pagination"]',
+        ) ||
+        (typeof document !== 'undefined'
+          ? document.querySelector<HTMLElement>(
+              '.alpha-academic-pagy, .slidev-page-nav',
+            )
+          : null);
+      const isPagyVisible =
+        pagyEl && window.getComputedStyle(pagyEl).display !== 'none';
+      const clearance = isPagyVisible ? pagyClearance : 16;
+
+      if (parent.clientHeight > 0 && parent !== slideEl) {
+        availH = Math.max(
+          0,
+          parent.clientHeight - padTop - padBottom - siblingsH - clearance,
+        );
+      }
+
+      if (availH <= 0 && slideEl && slideEl.clientHeight > 0) {
+        const slideStyle = window.getComputedStyle(slideEl);
+        const sPadTop = Number.parseFloat(slideStyle.paddingTop) || 0;
+        const sPadBottom = Number.parseFloat(slideStyle.paddingBottom) || 0;
+
+        let slideSiblingsH = siblingsH;
+
+        if (parent !== slideEl) {
+          for (let i = 0; i < slideEl.children.length; i++) {
+            const child = slideEl.children[i];
+
+            if (
+              child &&
+              child !== parent &&
+              !child.contains(parent) &&
+              child instanceof HTMLElement
+            ) {
+              slideSiblingsH += child.offsetHeight;
+              const cs = window.getComputedStyle(child);
+              slideSiblingsH +=
+                (Number.parseFloat(cs.marginTop) || 0) +
+                (Number.parseFloat(cs.marginBottom) || 0);
+            }
+          }
+        }
+
+        availH = Math.max(
+          0,
+          slideEl.clientHeight -
+            sPadTop -
+            sPadBottom -
+            slideSiblingsH -
+            clearance,
+        );
+      }
+    }
+
+    if (availH > 0 && Math.abs(availH - containerHeight.value) > 1) {
+      containerHeight.value = Math.round(availH);
+    }
+
+    if (availW <= 0) {
+      availW = baseWidth;
+    }
+
+    let targetScale = 1;
+
+    if (availW > 0 && availH > 0) {
+      const scaleX = availW / baseWidth;
+      const scaleY = availH / baseHeight;
+      targetScale = Math.min(scaleX, scaleY);
+    } else if (availW > 0) {
+      targetScale = availW / baseWidth;
+    }
+
+    const maxScaleProp = resolveValue(options.maxScale, undefined);
+
+    if (maxScaleProp !== undefined) {
+      targetScale = Math.min(targetScale, maxScaleProp);
+    }
+
+    targetScale = Math.round(targetScale * 1000) / 1000;
+
+    if (Math.abs(targetScale - autoScaleValue.value) > 0.005) {
+      autoScaleValue.value = targetScale;
+    }
+  };
+
+  let observer: ResizeObserver | null = null;
+
+  onMounted(() => {
+    if (typeof window === 'undefined' || !rootRef.value) {
+      return;
+    }
+
+    updateScale();
+    requestAnimationFrame(() => {
+      updateScale();
+    });
+
+    if (typeof ResizeObserver !== 'undefined') {
+      observer = new ResizeObserver(() => {
+        updateScale();
+      });
+
+      observer.observe(rootRef.value);
+
+      if (rootRef.value.parentElement) {
+        observer.observe(rootRef.value.parentElement);
+      }
+
+      const pageEl = rootRef.value.closest<HTMLElement>(
+        '.slidev-page, [data-slidev-page], .slidev-slide-content',
+      );
+      const layoutEl = rootRef.value.closest<HTMLElement>('.slidev-layout');
+      const slideEl = pageEl || layoutEl;
+
+      if (slideEl && slideEl !== rootRef.value.parentElement) {
+        observer.observe(slideEl);
+      }
+
+      if (
+        pageEl &&
+        pageEl !== slideEl &&
+        pageEl !== rootRef.value.parentElement
+      ) {
+        observer.observe(pageEl);
+      }
+    } else {
+      window.addEventListener('resize', updateScale);
+    }
+  });
+
+  onUnmounted(() => {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    } else if (typeof window !== 'undefined') {
+      window.removeEventListener('resize', updateScale);
+    }
+  });
+
+  const resolvedScale = computed((): number => {
+    const scaleProp = resolveValue(options.scale, undefined);
+
+    if (scaleProp !== undefined) {
+      return scaleProp;
+    }
+
+    const autoScaleProp = resolveValue(options.autoScale, true);
+
+    if (autoScaleProp === false) {
+      return 1;
+    }
+
+    const maxScaleProp = resolveValue(options.maxScale, undefined);
+
+    if (maxScaleProp !== undefined) {
+      return Math.min(autoScaleValue.value, maxScaleProp);
+    }
+
+    return autoScaleValue.value;
+  });
+
+  return {
+    resolvedScale,
+    autoScaleValue,
+    containerHeight,
+    updateScale,
+  };
+}

package/utils/vertCard/context.ts

@@ -0,0 +1,18 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+export type TVertCardBadgeVariant = 'outside' | 'inside' | 'none' | 'hidden';
+
+export interface IVertCardContext {
+  readonly color: ComputedRef<string>;
+  readonly cardBg: ComputedRef<string>;
+  readonly lightColor: ComputedRef<string>;
+  readonly titleColor: ComputedRef<string>;
+  readonly stripeColor: ComputedRef<string>;
+  readonly hasDivider?: ComputedRef<boolean>;
+  readonly step: ComputedRef<string | number>;
+  readonly textColor: ComputedRef<string | undefined>;
+  readonly badgeVariant: ComputedRef<TVertCardBadgeVariant>;
+}
+
+export const VERT_CARD_KEY: InjectionKey<IVertCardContext> =
+  Symbol('VERT_CARD');

package/utils/vertCard/createVertCardGeometry.ts

@@ -0,0 +1,242 @@
+export interface ICreateVertCardPathParams {
+  readonly width: number;
+  readonly height: number;
+  readonly borderRadius?: number;
+}
+
+/**
+ * Generates an SVG path for the main VertCard body.
+ * Features rounded corners on all four sides.
+ */
+export function createVertCardPath({
+  width,
+  height,
+  borderRadius = 24,
+}: ICreateVertCardPathParams): string {
+  const safeR = Math.max(0, Math.min(borderRadius, width / 2, height / 2));
+
+  return [
+    `M ${safeR} 0`,
+    `H ${width - safeR}`,
+    `A ${safeR} ${safeR} 0 0 1 ${width} ${safeR}`,
+    `V ${height - safeR}`,
+    `A ${safeR} ${safeR} 0 0 1 ${width - safeR} ${height}`,
+    `H ${safeR}`,
+    `A ${safeR} ${safeR} 0 0 1 0 ${height - safeR}`,
+    `V ${safeR}`,
+    `A ${safeR} ${safeR} 0 0 1 ${safeR} 0`,
+    'Z',
+  ].join(' ');
+}
+
+export interface ICreateVertCardBottomBlobPathParams {
+  readonly width: number;
+  readonly height: number;
+  readonly blobWidth?: number;
+  readonly blobHeight?: number;
+  readonly borderRadius?: number;
+}
+
+/**
+ * Generates an SVG path for the organic accent blob/wave at the bottom-left corner.
+ * Curves down smoothly from the left edge into the bottom horizontal edge,
+ * adhering to the bottom-left rounded corner of the card.
+ */
+export function createVertCardBottomBlobPath({
+  width,
+  height,
+  borderRadius = 24,
+  blobWidth = Math.round(width * 0.45),
+  blobHeight = Math.round(height * 0.24),
+}: ICreateVertCardBottomBlobPathParams): string {
+  const safeR = Math.max(0, Math.min(borderRadius, width / 2, height / 2));
+  const startY = height - blobHeight;
+  const endX = blobWidth;
+
+  const cp1X = Math.round(blobWidth * 0.08);
+  const cp1Y = Math.round(startY + blobHeight * 0.38);
+  const cp2X = Math.round(blobWidth * 0.46);
+  const cp2Y = Math.round(height - blobHeight * 0.06);
+
+  return [
+    `M 0 ${startY}`,
+    `C ${cp1X} ${cp1Y}, ${cp2X} ${cp2Y}, ${endX} ${height}`,
+    `H ${safeR}`,
+    `A ${safeR} ${safeR} 0 0 1 0 ${height - safeR}`,
+    `V ${startY}`,
+    'Z',
+  ].join(' ');
+}
+
+export interface ICreateVertCardTopRightBlobPathParams {
+  readonly width: number;
+  readonly height: number;
+  readonly blobWidth?: number;
+  readonly blobHeight?: number;
+  readonly borderRadius?: number;
+}
+
+/**
+ * Generates an SVG path for the organic accent blob/wave at the top-right corner.
+ * Symmetrical counterpart (180° rotation) to the bottom-left organic blob.
+ */
+export function createVertCardTopRightBlobPath({
+  width,
+  height,
+  borderRadius = 24,
+  blobWidth = Math.round(width * 0.45),
+  blobHeight = Math.round(height * 0.24),
+}: ICreateVertCardTopRightBlobPathParams): string {
+  const safeR = Math.max(0, Math.min(borderRadius, width / 2, height / 2));
+  const startX = width - blobWidth;
+  const endY = blobHeight;
+
+  const cp1X = Math.round(width - blobWidth * 0.46);
+  const cp1Y = Math.round(blobHeight * 0.06);
+  const cp2X = Math.round(width - blobWidth * 0.08);
+  const cp2Y = Math.round(blobHeight * 0.62);
+
+  return [
+    `M ${startX} 0`,
+    `C ${cp1X} ${cp1Y}, ${cp2X} ${cp2Y}, ${width} ${endY}`,
+    `V ${safeR}`,
+    `A ${safeR} ${safeR} 0 0 0 ${width - safeR} 0`,
+    `H ${startX}`,
+    'Z',
+  ].join(' ');
+}
+
+export interface ICreateVertCardTopRightOuterStripePathParams {
+  readonly width: number;
+  readonly outerOffset?: number;
+}
+
+/**
+ * Generates an SVG path for the top-right diagonal outer accent band.
+ */
+export function createVertCardTopRightOuterStripePath({
+  width,
+  outerOffset = 72,
+}: ICreateVertCardTopRightOuterStripePathParams): string {
+  return [
+    `M ${width - outerOffset} 0`,
+    `L ${width} ${outerOffset}`,
+    `L ${width} 0`,
+    'Z',
+  ].join(' ');
+}
+
+export interface ICreateVertCardTopRightInnerStripePathParams {
+  readonly width: number;
+  readonly outerOffset?: number;
+  readonly stripeWidth?: number;
+}
+
+/**
+ * Generates an SVG path for the top-right diagonal inner accent band.
+ */
+export function createVertCardTopRightInnerStripePath({
+  width,
+  outerOffset = 72,
+  stripeWidth = 24,
+}: ICreateVertCardTopRightInnerStripePathParams): string {
+  const innerOffset = outerOffset + stripeWidth;
+
+  return [
+    `M ${width - innerOffset} 0`,
+    `L ${width} ${innerOffset}`,
+    `L ${width} ${outerOffset}`,
+    `L ${width - outerOffset} 0`,
+    'Z',
+  ].join(' ');
+}
+
+export interface ICreateVertCardBadgePathParams {
+  readonly width?: number;
+  readonly height?: number;
+  readonly tipRadius?: number;
+  readonly sideWidth?: number;
+  readonly leftRadius?: number;
+  readonly cornerRadius?: number;
+}
+
+/**
+ * Generates an SVG path for the left ribbon step badge pointing to the RIGHT.
+ * Features rounded corners on the left edge, smooth transition fillets,
+ * and a rounded arrow tip pointing into the card.
+ */
+export function createVertCardBadgePath({
+  width = 62,
+  height = 48,
+  leftRadius = 8,
+  tipRadius = 6,
+  sideWidth = 42,
+  cornerRadius = 6,
+}: ICreateVertCardBadgePathParams = {}): string {
+  const halfH = height / 2;
+  const dx = width - sideWidth;
+  const dy = halfH;
+  const len = Math.hypot(dx, dy);
+  const ux = len > 0 ? dx / len : 0;
+  const uy = len > 0 ? dy / len : 0;
+
+  return [
+    `M ${leftRadius} 0`,
+    `H ${(sideWidth - cornerRadius).toFixed(2)}`,
+    `Q ${sideWidth} 0 ${(sideWidth + cornerRadius * ux).toFixed(2)} ${(cornerRadius * uy).toFixed(2)}`,
+    `L ${(width - tipRadius * ux).toFixed(2)} ${(halfH - tipRadius * uy).toFixed(2)}`,
+    `Q ${width} ${halfH} ${(width - tipRadius * ux).toFixed(2)} ${(halfH + tipRadius * uy).toFixed(2)}`,
+    `L ${(sideWidth + cornerRadius * ux).toFixed(2)} ${(height - cornerRadius * uy).toFixed(2)}`,
+    `Q ${sideWidth} ${height} ${(sideWidth - cornerRadius).toFixed(2)} ${height}`,
+    `H ${leftRadius}`,
+    `A ${leftRadius} ${leftRadius} 0 0 1 0 ${height - leftRadius}`,
+    `V ${leftRadius}`,
+    `A ${leftRadius} ${leftRadius} 0 0 1 ${leftRadius} 0`,
+    'Z',
+  ].join(' ');
+}
+
+export interface IHexToRgbaParams {
+  readonly hex: string;
+  readonly alpha?: number;
+}
+
+/**
+ * Converts a hex color string to an RGBA string with the given alpha transparency.
+ */
+export function hexToRgba({ hex, alpha = 0.16 }: IHexToRgbaParams): string {
+  const trimmed = hex.trim();
+
+  if (
+    trimmed.startsWith('var(') ||
+    trimmed.startsWith('rgb') ||
+    trimmed.startsWith('hsl')
+  ) {
+    return `color-mix(in srgb, ${trimmed} ${Math.round(alpha * 100)}%, transparent)`;
+  }
+
+  let sanitized = trimmed.replace(/^#/, '');
+
+  if (sanitized.length === 3) {
+    sanitized = sanitized
+      .split('')
+      .map((char) => {
+        return char + char;
+      })
+      .join('');
+  }
+
+  if (sanitized.length !== 6) {
+    return hex;
+  }
+
+  const r = Number.parseInt(sanitized.slice(0, 2), 16);
+  const g = Number.parseInt(sanitized.slice(2, 4), 16);
+  const b = Number.parseInt(sanitized.slice(4, 6), 16);
+
+  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
+    return hex;
+  }
+
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}

package/utils/vertCard/index.ts

@@ -0,0 +1,2 @@
+export * from './context';
+export * from './createVertCardGeometry';