@alphacifer/slidev-addon-theme 0.0.5 → 0.0.7

package/utils/arcCompare/resolveArcCompareItems.ts

@@ -0,0 +1,123 @@
+export interface IArcCompareItem {
+  readonly id?: string | number;
+  readonly title?: string;
+  readonly description?: string;
+  readonly color?: string;
+  readonly textColor?: string;
+}
+
+export interface IResolvedArcCompareItem {
+  readonly id: string | number;
+  readonly title: string;
+  readonly description: string;
+  readonly color: string;
+  readonly textColor?: string;
+}
+
+export const DEFAULT_LEFT_COLOR = '#e87a36';
+
+export const DEFAULT_RIGHT_COLOR = '#208b9e';
+
+export const DEFAULT_LOREM_TEXT =
+  'Lorem ipsum dolor sit amet, constitutor adipiscing elit. Nam vulputate augue vel ligula.';
+
+export const DEFAULT_LEFT_ITEMS: readonly [
+  IResolvedArcCompareItem,
+  IResolvedArcCompareItem,
+  IResolvedArcCompareItem,
+  IResolvedArcCompareItem,
+] = [
+  {
+    id: '01',
+    title: 'Add Text Here',
+    description: DEFAULT_LOREM_TEXT,
+    color: DEFAULT_LEFT_COLOR,
+  },
+  {
+    id: '02',
+    title: 'Add Text Here',
+    description: DEFAULT_LOREM_TEXT,
+    color: DEFAULT_LEFT_COLOR,
+  },
+  {
+    id: '03',
+    title: 'Add Text Here',
+    description: DEFAULT_LOREM_TEXT,
+    color: DEFAULT_LEFT_COLOR,
+  },
+  {
+    id: '04',
+    title: 'Add Text Here',
+    description: DEFAULT_LOREM_TEXT,
+    color: DEFAULT_LEFT_COLOR,
+  },
+];
+
+export const DEFAULT_RIGHT_ITEMS: readonly [
+  IResolvedArcCompareItem,
+  IResolvedArcCompareItem,
+  IResolvedArcCompareItem,
+  IResolvedArcCompareItem,
+] = [
+  {
+    id: '01',
+    title: 'Add Text Here',
+    description: DEFAULT_LOREM_TEXT,
+    color: DEFAULT_RIGHT_COLOR,
+  },
+  {
+    id: '02',
+    title: 'Add Text Here',
+    description: DEFAULT_LOREM_TEXT,
+    color: DEFAULT_RIGHT_COLOR,
+  },
+  {
+    id: '03',
+    title: 'Add Text Here',
+    description: DEFAULT_LOREM_TEXT,
+    color: DEFAULT_RIGHT_COLOR,
+  },
+  {
+    id: '04',
+    title: 'Add Text Here',
+    description: DEFAULT_LOREM_TEXT,
+    color: DEFAULT_RIGHT_COLOR,
+  },
+];
+
+export function resolveArcCompareSideItems(
+  items?: readonly IArcCompareItem[],
+  defaultColor = DEFAULT_LEFT_COLOR,
+  count = 3,
+): readonly IResolvedArcCompareItem[] {
+  const result: IResolvedArcCompareItem[] = [];
+
+  for (let i = 0; i < count; i++) {
+    const custom = items?.[i];
+    const defaultItem =
+      defaultColor === DEFAULT_RIGHT_COLOR
+        ? DEFAULT_RIGHT_ITEMS[i]
+        : DEFAULT_LEFT_ITEMS[i];
+
+    const id =
+      custom?.id !== undefined
+        ? custom.id
+        : (defaultItem?.id ?? String(i + 1).padStart(2, '0'));
+
+    const title = custom?.title ?? defaultItem?.title ?? 'Add Text Here';
+    const description =
+      custom?.description ?? defaultItem?.description ?? DEFAULT_LOREM_TEXT;
+    const color = custom?.color ?? defaultColor;
+    const textColor = custom?.textColor ?? defaultItem?.textColor;
+
+    result.push({
+      id,
+      title,
+      description,
+      color,
+      textColor,
+    });
+  }
+
+  return result;
+}

package/utils/arrowTriad/context.ts

@@ -0,0 +1,38 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+import type { IResolvedArrowTriadItem } from './resolveArrowTriadItems';
+
+export type TArrowTriadLayout =
+  | '2-left-1-right'
+  | '1-left-2-right'
+  | '2-left'
+  | '1-left';
+
+export interface IArrowTriadRegistration {
+  readonly index: number;
+  readonly item: ComputedRef<IResolvedArrowTriadItem>;
+}
+
+export interface IArrowTriadRootContext {
+  readonly animation: ComputedRef<boolean>;
+  readonly layout: ComputedRef<TArrowTriadLayout>;
+  readonly registerCallout: () => IArrowTriadRegistration;
+  readonly items: ComputedRef<
+    readonly [
+      IResolvedArrowTriadItem,
+      IResolvedArrowTriadItem,
+      IResolvedArrowTriadItem,
+    ]
+  >;
+}
+
+export interface IArrowTriadCalloutContext {
+  readonly item: ComputedRef<IResolvedArrowTriadItem>;
+  readonly index: number;
+}
+
+export const ARROW_TRIAD_ROOT_KEY: InjectionKey<IArrowTriadRootContext> =
+  Symbol('ARROW_TRIAD_ROOT_KEY');
+
+export const ARROW_TRIAD_CALLOUT_KEY: InjectionKey<IArrowTriadCalloutContext> =
+  Symbol('ARROW_TRIAD_CALLOUT_KEY');

package/utils/arrowTriad/createArrowTriadGeometry.ts

@@ -0,0 +1,63 @@
+export interface IArrowTriadPathData {
+  readonly path: string;
+  readonly stemPath: string;
+  readonly outerHeadPoints: string;
+  readonly innerHeadPoints: string;
+  readonly neckLine: string;
+}
+
+export interface IArrowTriadGeometry {
+  readonly viewBoxWidth: number;
+  readonly viewBoxHeight: number;
+  readonly blueArrow: IArrowTriadPathData;
+  readonly yellowArrow: IArrowTriadPathData;
+  readonly greenArrow: IArrowTriadPathData;
+  readonly dashedArcs: readonly string[];
+}
+
+/**
+ * Precision coordinates and SVG paths for the 3-way curved arrow triad diagram.
+ * Directly extracted from the design template (560 x 662):
+ * - Equilateral/isosceles triangle arrowheads with symmetrical barb overhangs.
+ * - Inset framed inner triangle facets with darker depth stroke.
+ * - Clean curved stems meeting at 120-degree central pie junction.
+ * - Concentric dashed guide lines centered in each gap.
+ */
+export function createArrowTriadGeometry(): IArrowTriadGeometry {
+  return {
+    viewBoxWidth: 560,
+    viewBoxHeight: 662,
+    yellowArrow: {
+      path: 'M 526 31 L 429 89 L 437 92 C 431 188, 383 244, 324 281 L 352 329 L 408 329 C 410 260, 435 190, 515 137 L 528 144 Z',
+      stemPath:
+        'M 352 329 L 408 329 C 410 260, 435 190, 515 137 L 437 92 C 431 188, 383 244, 324 281 Z',
+      outerHeadPoints: '429,89 526,31 528,144',
+      innerHeadPoints: '447,89 517,47 518,128',
+      neckLine: 'M 429 89 L 528 144',
+    },
+    greenArrow: {
+      path: 'M 523 629 L 424 574 L 437 566 C 431 470, 383 414, 324 377 L 352 329 L 408 329 C 410 398, 435 468, 515 521 L 521 516 Z',
+      stemPath:
+        'M 352 329 L 324 377 C 383 414, 431 470, 437 566 L 515 521 C 435 468, 410 398, 408 329 Z',
+      outerHeadPoints: '424,574 523,629 521,516',
+      innerHeadPoints: '512,531 514,613 443,573',
+      neckLine: 'M 424 574 L 521 516',
+    },
+    blueArrow: {
+      path: 'M 7 327 L 104 269 L 104 284 C 190 327, 263 313, 324 281 L 352 329 L 324 377 C 263 345, 190 331, 104 374 L 106 382 Z',
+      stemPath:
+        'M 352 329 L 324 281 C 263 313, 190 327, 104 284 L 104 374 C 190 331, 263 345, 324 377 Z',
+      outerHeadPoints: '104,269 7,327 106,382',
+      innerHeadPoints: '97,367 25,327 95,286',
+      neckLine: 'M 104 269 L 106 382',
+    },
+    dashedArcs: [
+      // Blue to Yellow (top-left)
+      'M 145 251 C 245 301, 383 221, 389 110',
+      // Yellow to Green (right crescent)
+      'M 523 189 C 430 250, 430 410, 523 471',
+      // Blue to Green (bottom-left)
+      'M 144 406 C 243 356, 381 436, 388 547',
+    ],
+  };
+}

package/utils/arrowTriad/index.ts

@@ -0,0 +1,3 @@
+export * from './context';
+export * from './createArrowTriadGeometry';
+export * from './resolveArrowTriadItems';

package/utils/arrowTriad/resolveArrowTriadItems.ts

@@ -0,0 +1,121 @@
+export interface IArrowTriadItem {
+  readonly id?: string | number;
+  readonly color?: string;
+  readonly depthColor?: string;
+  readonly title?: string;
+  readonly description?: string;
+  readonly icon?: string | object | false;
+  readonly cardBg?: string;
+  readonly textColor?: string;
+  readonly titleColor?: string;
+}
+
+export interface IResolvedArrowTriadItem {
+  readonly id: string | number;
+  readonly color: string;
+  readonly depthColor: string;
+  readonly title: string;
+  readonly description: string;
+  readonly icon?: string | object | false;
+  readonly cardBg: string;
+  readonly textColor: string;
+  readonly titleColor: string;
+}
+
+const defaultItem0: IResolvedArrowTriadItem = {
+  id: '01',
+  color: '#fec201',
+  depthColor: '#d59b01',
+  title: 'TITLE TEXT HERE',
+  description:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore',
+  icon: undefined,
+  cardBg: '#ffffff',
+  textColor: '#64748b',
+  titleColor: '#1e293b',
+};
+
+const defaultItem1: IResolvedArrowTriadItem = {
+  id: '02',
+  color: '#71ad49',
+  depthColor: '#548235',
+  title: 'TITLE TEXT HERE',
+  description:
+    'Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo cupidatat non proident, sunt',
+  icon: undefined,
+  cardBg: '#ffffff',
+  textColor: '#64748b',
+  titleColor: '#1e293b',
+};
+
+const defaultItem2: IResolvedArrowTriadItem = {
+  id: '03',
+  color: '#5b9bd5',
+  depthColor: '#41719c',
+  title: 'TITLE TEXT HERE',
+  description:
+    'Magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo',
+  icon: undefined,
+  cardBg: '#ffffff',
+  textColor: '#64748b',
+  titleColor: '#1e293b',
+};
+
+export const DEFAULT_ARROW_TRIAD_ITEMS: readonly [
+  IResolvedArrowTriadItem,
+  IResolvedArrowTriadItem,
+  IResolvedArrowTriadItem,
+] = [defaultItem0, defaultItem1, defaultItem2];
+
+export function getDefaultArrowTriadItem(
+  index: number,
+): IResolvedArrowTriadItem {
+  const safe = Math.abs(index) % 3;
+
+  if (safe === 1) {
+    return defaultItem1;
+  }
+
+  if (safe === 2) {
+    return defaultItem2;
+  }
+
+  return defaultItem0;
+}
+
+export function resolveSingleArrowTriadItem(
+  item: IArrowTriadItem | undefined,
+  fallbackIndex = 0,
+): IResolvedArrowTriadItem {
+  const fallback = getDefaultArrowTriadItem(fallbackIndex);
+
+  if (!item) {
+    return fallback;
+  }
+
+  return {
+    id: item.id ?? fallback.id,
+    color: item.color ?? fallback.color,
+    depthColor: item.depthColor ?? fallback.depthColor,
+    title: item.title ?? fallback.title,
+    description: item.description ?? fallback.description,
+    icon: item.icon !== undefined ? item.icon : fallback.icon,
+    cardBg: item.cardBg ?? fallback.cardBg,
+    textColor: item.textColor ?? fallback.textColor,
+    titleColor: item.titleColor ?? fallback.titleColor,
+  };
+}
+
+export function resolveArrowTriadItems(
+  items?: readonly IArrowTriadItem[],
+): readonly [
+  IResolvedArrowTriadItem,
+  IResolvedArrowTriadItem,
+  IResolvedArrowTriadItem,
+] {
+  return [
+    resolveSingleArrowTriadItem(items?.[0], 0),
+    resolveSingleArrowTriadItem(items?.[1], 1),
+    resolveSingleArrowTriadItem(items?.[2], 2),
+  ];
+}

package/utils/chevronCard/context.ts

@@ -0,0 +1,12 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+export interface IChevronCardContext {
+  readonly step: ComputedRef<string | number>;
+  readonly color: ComputedRef<string>;
+  readonly cardBg: ComputedRef<string>;
+  readonly textColor: ComputedRef<string | undefined>;
+  readonly titleColor: ComputedRef<string | undefined>;
+}
+
+export const CHEVRON_CARD_KEY: InjectionKey<IChevronCardContext> =
+  Symbol('CHEVRON_CARD_KEY');

package/utils/chevronCard/createChevronCardGeometry.ts

@@ -0,0 +1,48 @@
+export interface ICreateChevronPathParams {
+  readonly width: number;
+  readonly height: number;
+  readonly notchDepth?: number;
+}
+
+/**
+ * Generates an SVG path for the chevron badge.
+ * Features an indented notched tail on the left and a protruding arrow tip on the right.
+ */
+export function createChevronPath({
+  width,
+  height,
+  notchDepth = 26,
+}: ICreateChevronPathParams): string {
+  const safeNotch = Math.max(0, Math.min(notchDepth, width / 2));
+  const halfH = height / 2;
+
+  return `M 0 0 L ${width - safeNotch} 0 L ${width} ${halfH} L ${width - safeNotch} ${height} L 0 ${height} L ${safeNotch} ${halfH} Z`;
+}
+
+export interface ICreateChevronCardBodyPathParams {
+  readonly width: number;
+  readonly height: number;
+  readonly notchDepth?: number;
+  readonly borderRadius?: number;
+}
+
+/**
+ * Generates an SVG path for the card body container.
+ * Left edge matches the chevron notch so slide background shows through;
+ * right edge features smooth rounded corners.
+ */
+export function createChevronCardBodyPath({
+  width,
+  height,
+  notchDepth = 26,
+  borderRadius = 18,
+}: ICreateChevronCardBodyPathParams): string {
+  const safeNotch = Math.max(0, Math.min(notchDepth, width / 2));
+  const safeR = Math.max(
+    0,
+    Math.min(borderRadius, (width - safeNotch) / 2, height / 2),
+  );
+  const halfH = height / 2;
+
+  return `M 0 0 L ${width - safeR} 0 A ${safeR} ${safeR} 0 0 1 ${width} ${safeR} L ${width} ${height - safeR} A ${safeR} ${safeR} 0 0 1 ${width - safeR} ${height} L 0 ${height} L ${safeNotch} ${halfH} Z`;
+}

package/utils/chevronCard/index.ts

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

package/utils/comparisonTable/constants.ts

@@ -0,0 +1,72 @@
+export const DEFAULT_COL_COLORS: readonly string[] = [
+  '#354f82',
+  '#5b8bb3',
+  '#00a8a8',
+  '#00b884',
+  '#00875a',
+];
+
+export const DEFAULT_ROW_HEADER_COLOR = '#2e8b9a';
+export const DEFAULT_ROW_HEADER_TEXT_COLOR = '#ffffff';
+export const DEFAULT_COL_HEADER_TEXT_COLOR = '#ffffff';
+export const DEFAULT_CELL_BG = '#d6e5ef';
+export const DEFAULT_CELL_COLOR = '#475569';
+export const DEFAULT_BORDER_RADIUS = '8px';
+export const DEFAULT_SPACING = '6px';
+export const DEFAULT_ROW_HEADER_WIDTH = '160px';
+
+export interface IDefaultMockupCol {
+  readonly title: string;
+  readonly color: string;
+}
+
+export interface IDefaultMockupRow {
+  readonly title: string;
+  readonly cells: readonly string[];
+}
+
+export const DEFAULT_MOCKUP_COLS: readonly IDefaultMockupCol[] = [
+  { title: 'COLUMN 1', color: '#354f82' },
+  { title: 'COLUMN 2', color: '#5b8bb3' },
+  { title: 'COLUMN 3', color: '#00a8a8' },
+  { title: 'COLUMN 4', color: '#00b884' },
+  { title: 'COLUMN 5', color: '#00875a' },
+];
+
+export const DEFAULT_MOCKUP_ROWS: readonly IDefaultMockupRow[] = [
+  { title: 'ROW 1', cells: ['TEXT', 'TEXT', 'TEXT', 'TEXT', 'TEXT'] },
+  { title: 'ROW 2', cells: ['TEXT', 'TEXT', 'TEXT', 'TEXT', 'TEXT'] },
+  { title: 'ROW 3', cells: ['TEXT', 'TEXT', 'TEXT', 'TEXT', 'TEXT'] },
+  { title: 'ROW 4', cells: ['TEXT', 'TEXT', 'TEXT', 'TEXT', 'TEXT'] },
+  { title: 'ROW 5', cells: ['TEXT', 'TEXT', 'TEXT', 'TEXT', 'TEXT'] },
+  { title: 'ROW 6', cells: ['TEXT', 'TEXT', 'TEXT', 'TEXT', 'TEXT'] },
+];
+
+/**
+ * Resolves a dimension input (number or string) into a CSS-ready unit string.
+ */
+export function resolveDimension(
+  value: number | string | undefined,
+  defaultUnit = 'px',
+): string | undefined {
+  if (value === undefined || value === null) {
+    return undefined;
+  }
+
+  if (typeof value === 'number') {
+    return `${value}${defaultUnit}`;
+  }
+
+  const trimmed = value.trim();
+
+  if (!trimmed) {
+    return undefined;
+  }
+
+  // If already contains unit or percentage or calc/var, return as is
+  if (/^[+-]?\d+(\.\d+)?$/.test(trimmed)) {
+    return `${trimmed}${defaultUnit}`;
+  }
+
+  return trimmed;
+}

package/utils/comparisonTable/context.ts

@@ -0,0 +1,24 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+export interface IComparisonTableContext {
+  readonly cellBg: ComputedRef<string>;
+  readonly cellColor: ComputedRef<string>;
+  readonly rowHeaderColor: ComputedRef<string>;
+  readonly rowHeaderTextColor: ComputedRef<string>;
+  readonly colHeaderTextColor: ComputedRef<string>;
+  readonly borderRadius: ComputedRef<string>;
+  readonly rowHeaderWidth: ComputedRef<string | undefined>;
+  readonly spacing: ComputedRef<string>;
+  readonly dense: ComputedRef<boolean>;
+  readonly animation: ComputedRef<boolean>;
+}
+
+export interface IComparisonTableColsContext {
+  readonly registerCol: () => number;
+}
+
+export const COMPARISON_TABLE_KEY: InjectionKey<IComparisonTableContext> =
+  Symbol('COMPARISON_TABLE_KEY');
+
+export const COMPARISON_TABLE_COLS_KEY: InjectionKey<IComparisonTableColsContext> =
+  Symbol('COMPARISON_TABLE_COLS_KEY');

package/utils/comparisonTable/index.ts

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

package/utils/hexTriad/context.ts

@@ -0,0 +1,25 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+import type { IHexTriadItem } from './resolveHexTriadItems';
+
+export interface IHexTriadRootContext {
+  readonly animation?: ComputedRef<boolean>;
+  readonly items: ComputedRef<readonly IHexTriadItem[]>;
+  readonly registerCallout: () => {
+    readonly index: number;
+    readonly item: ComputedRef<IHexTriadItem>;
+    readonly setBadgeText: (text: string | number) => void;
+  };
+}
+
+export interface IHexTriadCalloutContext {
+  readonly index: number;
+  readonly item: ComputedRef<IHexTriadItem>;
+  readonly setBadgeText: (text: string | number) => void;
+}
+
+export const HEX_TRIAD_ROOT_KEY: InjectionKey<IHexTriadRootContext> =
+  Symbol('HEX_TRIAD_ROOT_KEY');
+
+export const HEX_TRIAD_CALLOUT_KEY: InjectionKey<IHexTriadCalloutContext> =
+  Symbol('HEX_TRIAD_CALLOUT_KEY');