@alphacifer/slidev-addon-theme 0.0.6 → 0.0.7

package/README.md

@@ -148,6 +148,42 @@ addons:
 </ArcCompare>
 ```
 
+## Comparison table
+
+- Components: `ComparisonTable`, `ComparisonTableCols`, `ComparisonTableCol`, `ComparisonTableRows`, `ComparisonTableRow`, `ComparisonTableCell`
+
+```vue
+<!-- Self-contained mockup default (5 columns x 6 rows) -->
+<ComparisonTable />
+
+<!-- Custom compound comparison structure -->
+<ComparisonTable>
+  <ComparisonTableCols>
+    <ComparisonTableCol color="#ff0000">
+      Column 1
+    </ComparisonTableCol>
+    <ComparisonTableCol color="#00ff00">
+      Column 2
+    </ComparisonTableCol>
+    <ComparisonTableCol color="#0000ff">
+      Column 3
+    </ComparisonTableCol>
+  </ComparisonTableCols>
+  <ComparisonTableRows>
+    <ComparisonTableRow title="Row 1">
+      <ComparisonTableCell>Row 1, Cell 1</ComparisonTableCell>
+      <ComparisonTableCell>Row 1, Cell 2</ComparisonTableCell>
+      <ComparisonTableCell>Row 1, Cell 3</ComparisonTableCell>
+    </ComparisonTableRow>
+    <ComparisonTableRow title="Row 2">
+      <ComparisonTableCell>Row 2, Cell 1</ComparisonTableCell>
+      <ComparisonTableCell>Row 2, Cell 2</ComparisonTableCell>
+      <ComparisonTableCell>Row 2, Cell 3</ComparisonTableCell>
+    </ComparisonTableRow>
+  </ComparisonTableRows>
+</ComparisonTable>
+```
+
 ## Preview
 
 ```bash

package/components/comparison-table/ComparisonTable.vue

@@ -0,0 +1,244 @@
+<script setup lang="ts">
+import {
+  type ComputedRef,
+  computed,
+  Fragment,
+  inject,
+  provide,
+  useSlots,
+  type VNode,
+} from 'vue';
+
+import {
+  COMPARISON_TABLE_KEY,
+  DEFAULT_BORDER_RADIUS,
+  DEFAULT_CELL_BG,
+  DEFAULT_CELL_COLOR,
+  DEFAULT_COL_HEADER_TEXT_COLOR,
+  DEFAULT_MOCKUP_COLS,
+  DEFAULT_MOCKUP_ROWS,
+  DEFAULT_ROW_HEADER_COLOR,
+  DEFAULT_ROW_HEADER_TEXT_COLOR,
+  DEFAULT_ROW_HEADER_WIDTH,
+  DEFAULT_SPACING,
+  type IComparisonTableContext,
+  resolveDimension,
+} from '../../utils/comparisonTable';
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+import ComparisonTableCell from './ComparisonTableCell.vue';
+import ComparisonTableCol from './ComparisonTableCol.vue';
+import ComparisonTableCols from './ComparisonTableCols.vue';
+import ComparisonTableRow from './ComparisonTableRow.vue';
+import ComparisonTableRows from './ComparisonTableRows.vue';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'ComparisonTable',
+});
+
+export interface IComparisonTableProps {
+  readonly cellBg?: string;
+  readonly cellColor?: string;
+  readonly rowHeaderColor?: string;
+  readonly rowHeaderTextColor?: string;
+  readonly colHeaderTextColor?: string;
+  readonly borderRadius?: number | string;
+  readonly rowHeaderWidth?: number | string;
+  readonly spacing?: number | string;
+  readonly tableLayout?: 'fixed' | 'auto';
+  readonly dense?: boolean;
+  readonly animation?: boolean;
+  readonly active?: boolean;
+  readonly width?: number | string;
+  readonly height?: number | string;
+}
+
+const props = withDefaults(defineProps<IComparisonTableProps>(), {
+  cellBg: DEFAULT_CELL_BG,
+  cellColor: DEFAULT_CELL_COLOR,
+  rowHeaderColor: DEFAULT_ROW_HEADER_COLOR,
+  rowHeaderTextColor: DEFAULT_ROW_HEADER_TEXT_COLOR,
+  colHeaderTextColor: DEFAULT_COL_HEADER_TEXT_COLOR,
+  borderRadius: DEFAULT_BORDER_RADIUS,
+  rowHeaderWidth: DEFAULT_ROW_HEADER_WIDTH,
+  spacing: DEFAULT_SPACING,
+  tableLayout: 'fixed',
+  dense: false,
+  animation: true,
+  active: undefined,
+  width: '100%',
+  height: undefined,
+});
+
+const slots = useSlots();
+
+const shiftingIntro = inject<
+  | {
+      active: ComputedRef<boolean>;
+      isShifting?: ComputedRef<boolean>;
+    }
+  | undefined
+>('SLIDEV_LAYOUT_SHIFTING_INTRO', undefined);
+
+const isAnimated = computed(() => {
+  if (!props.animation) {
+    return false;
+  }
+
+  if (props.active !== undefined) {
+    return props.active;
+  }
+
+  if (shiftingIntro) {
+    return shiftingIntro.active.value;
+  }
+
+  return true;
+});
+
+const resolvedBorderRadius = computed(() => {
+  return resolveDimension(props.borderRadius) ?? DEFAULT_BORDER_RADIUS;
+});
+
+const resolvedRowHeaderWidth = computed(() => {
+  return resolveDimension(props.rowHeaderWidth) ?? DEFAULT_ROW_HEADER_WIDTH;
+});
+
+const resolvedSpacing = computed(() => {
+  return resolveDimension(props.spacing) ?? DEFAULT_SPACING;
+});
+
+const resolvedWidth = computed(() => {
+  return resolveDimension(props.width) ?? '100%';
+});
+
+const resolvedHeight = computed(() => {
+  return resolveDimension(props.height);
+});
+
+provide<IComparisonTableContext>(COMPARISON_TABLE_KEY, {
+  cellBg: computed(() => props.cellBg),
+  cellColor: computed(() => props.cellColor),
+  rowHeaderColor: computed(() => props.rowHeaderColor),
+  rowHeaderTextColor: computed(() => props.rowHeaderTextColor),
+  colHeaderTextColor: computed(() => props.colHeaderTextColor),
+  borderRadius: resolvedBorderRadius,
+  rowHeaderWidth: resolvedRowHeaderWidth,
+  spacing: resolvedSpacing,
+  dense: computed(() => props.dense),
+  animation: isAnimated,
+});
+
+function isSignificantNode(node: VNode): boolean {
+  if (typeof node.type === 'symbol') {
+    if (typeof node.children === 'string' && !node.children.trim()) {
+      return false;
+    }
+  }
+
+  if (typeof node.children === 'string' && !node.children.trim()) {
+    return false;
+  }
+
+  return true;
+}
+
+function flattenVNodes(nodes: VNode[]): VNode[] {
+  const result: VNode[] = [];
+
+  for (const node of nodes) {
+    if (node.type === Fragment && Array.isArray(node.children)) {
+      result.push(...flattenVNodes(node.children as VNode[]));
+    } else if (isSignificantNode(node)) {
+      result.push(node);
+    }
+  }
+
+  return result;
+}
+
+const defaultNodes = computed(() => {
+  if (!slots.default) {
+    return [];
+  }
+
+  return flattenVNodes(slots.default());
+});
+
+const hasCustomContent = computed(() => {
+  return defaultNodes.value.length > 0;
+});
+
+const tableStyle = computed(() => {
+  return {
+    width: resolvedWidth.value,
+    height: resolvedHeight.value,
+    borderCollapse: 'separate' as const,
+    borderSpacing: resolvedSpacing.value,
+    tableLayout: props.tableLayout,
+  };
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-comparison-table w-full select-text font-sans relative my-auto',
+);
+</script>
+
+<template>
+  <div class="alpha-comparison-table-wrapper w-full flex items-center justify-center overflow-x-auto">
+    <table
+      v-bind="forwardedAttrs()"
+      :class="[
+        className(),
+        { 'alpha-comparison-table--animated': isAnimated },
+      ]"
+      :style="tableStyle"
+    >
+      <template v-if="hasCustomContent">
+        <slot />
+      </template>
+      <template v-else>
+        <ComparisonTableCols>
+          <ComparisonTableCol
+            v-for="col in DEFAULT_MOCKUP_COLS"
+            :key="col.title"
+            :color="col.color"
+          >
+            {{ col.title }}
+          </ComparisonTableCol>
+        </ComparisonTableCols>
+        <ComparisonTableRows>
+          <ComparisonTableRow
+            v-for="row in DEFAULT_MOCKUP_ROWS"
+            :key="row.title"
+            :title="row.title"
+          >
+            <ComparisonTableCell
+              v-for="(cellText, idx) in row.cells"
+              :key="idx"
+            >
+              {{ cellText }}
+            </ComparisonTableCell>
+          </ComparisonTableRow>
+        </ComparisonTableRows>
+      </template>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.alpha-comparison-table--animated {
+  animation: alpha-table-appear 0.35s ease-out;
+}
+
+@keyframes alpha-table-appear {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

package/components/comparison-table/ComparisonTableCell.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import {
+  COMPARISON_TABLE_KEY,
+  DEFAULT_CELL_BG,
+  DEFAULT_CELL_COLOR,
+  resolveDimension,
+} from '../../utils/comparisonTable';
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'ComparisonTableCell',
+});
+
+export interface IComparisonTableCellProps {
+  readonly text?: string | number;
+  readonly color?: string;
+  readonly bg?: string;
+  readonly textColor?: string;
+  readonly borderRadius?: number | string;
+  readonly align?: 'left' | 'center' | 'right';
+}
+
+const props = withDefaults(defineProps<IComparisonTableCellProps>(), {
+  text: undefined,
+  color: undefined,
+  bg: undefined,
+  textColor: undefined,
+  borderRadius: undefined,
+  align: 'center',
+});
+
+const tableContext = inject(COMPARISON_TABLE_KEY, undefined);
+
+const resolvedBg = computed(() => {
+  return (
+    props.bg ?? props.color ?? tableContext?.cellBg.value ?? DEFAULT_CELL_BG
+  );
+});
+
+const resolvedTextColor = computed(() => {
+  return props.textColor ?? tableContext?.cellColor.value ?? DEFAULT_CELL_COLOR;
+});
+
+const resolvedBorderRadius = computed(() => {
+  return (
+    resolveDimension(props.borderRadius) ??
+    tableContext?.borderRadius.value ??
+    '8px'
+  );
+});
+
+const resolvedPadding = computed(() => {
+  return tableContext?.dense.value ? 'py-2 px-3' : 'py-3 px-4';
+});
+
+const cellStyle = computed(() => {
+  return {
+    backgroundColor: resolvedBg.value,
+    color: resolvedTextColor.value,
+    borderRadius: resolvedBorderRadius.value,
+    fontSize: '1rem',
+    textAlign: props.align,
+    verticalAlign: 'middle' as const,
+  };
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(() => {
+  return `alpha-comparison-table-cell font-medium text-[1rem] leading-relaxed align-middle transition-all duration-200 select-text [&_p]:text-[1rem] [&_p]:m-0 ${resolvedPadding.value}`;
+});
+</script>
+
+<template>
+  <td
+    v-bind="forwardedAttrs()"
+    :class="[
+      className(),
+      align === 'center' ? 'text-center [&_p]:text-center' : '',
+      align === 'left' ? 'text-left [&_p]:text-left' : '',
+      align === 'right' ? 'text-right [&_p]:text-right' : '',
+    ]"
+    :style="cellStyle"
+  >
+    <slot>{{ text }}</slot>
+  </td>
+</template>

package/components/comparison-table/ComparisonTableCol.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import {
+  COMPARISON_TABLE_COLS_KEY,
+  COMPARISON_TABLE_KEY,
+  DEFAULT_COL_COLORS,
+  DEFAULT_COL_HEADER_TEXT_COLOR,
+  resolveDimension,
+} from '../../utils/comparisonTable';
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'ComparisonTableCol',
+});
+
+export interface IComparisonTableColProps {
+  readonly title?: string;
+  readonly color?: string;
+  readonly textColor?: string;
+  readonly width?: number | string;
+  readonly borderRadius?: number | string;
+}
+
+const props = withDefaults(defineProps<IComparisonTableColProps>(), {
+  title: undefined,
+  color: undefined,
+  textColor: undefined,
+  width: undefined,
+  borderRadius: undefined,
+});
+
+const tableContext = inject(COMPARISON_TABLE_KEY, undefined);
+const colsContext = inject(COMPARISON_TABLE_COLS_KEY, undefined);
+
+const autoIndex = colsContext?.registerCol() ?? 0;
+
+const resolvedColor = computed(() => {
+  if (props.color) {
+    return props.color;
+  }
+
+  return DEFAULT_COL_COLORS[autoIndex % DEFAULT_COL_COLORS.length];
+});
+
+const resolvedTextColor = computed(() => {
+  return (
+    props.textColor ??
+    tableContext?.colHeaderTextColor.value ??
+    DEFAULT_COL_HEADER_TEXT_COLOR
+  );
+});
+
+const resolvedBorderRadius = computed(() => {
+  return (
+    resolveDimension(props.borderRadius) ??
+    tableContext?.borderRadius.value ??
+    '8px'
+  );
+});
+
+const resolvedWidth = computed(() => {
+  return resolveDimension(props.width);
+});
+
+const resolvedPadding = computed(() => {
+  return tableContext?.dense.value ? 'py-2 px-3' : 'py-3 px-4';
+});
+
+const colStyle = computed(() => {
+  return {
+    backgroundColor: resolvedColor.value,
+    color: resolvedTextColor.value,
+    borderRadius: resolvedBorderRadius.value,
+    width: resolvedWidth.value,
+    fontSize: '1rem',
+    textAlign: 'center' as const,
+    verticalAlign: 'middle' as const,
+  };
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(() => {
+  return `alpha-comparison-table-col font-bold uppercase tracking-wider text-[1rem] leading-snug text-center align-middle select-text transition-all duration-200 [&_p]:text-[1rem] [&_p]:text-center [&_p]:m-0 ${resolvedPadding.value}`;
+});
+</script>
+
+<template>
+  <th
+    scope="col"
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :style="colStyle"
+  >
+    <slot>{{ title }}</slot>
+  </th>
+</template>

package/components/comparison-table/ComparisonTableCols.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, inject, onBeforeUpdate, provide } from 'vue';
+
+import {
+  COMPARISON_TABLE_COLS_KEY,
+  COMPARISON_TABLE_KEY,
+  DEFAULT_ROW_HEADER_WIDTH,
+  resolveDimension,
+} from '../../utils/comparisonTable';
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'ComparisonTableCols',
+});
+
+export interface IComparisonTableColsProps {
+  readonly cornerWidth?: number | string;
+}
+
+const props = withDefaults(defineProps<IComparisonTableColsProps>(), {
+  cornerWidth: undefined,
+});
+
+const tableContext = inject(COMPARISON_TABLE_KEY, undefined);
+
+let colCounter = 0;
+onBeforeUpdate(() => {
+  colCounter = 0;
+});
+
+provide(COMPARISON_TABLE_COLS_KEY, {
+  registerCol: () => {
+    return colCounter++;
+  },
+});
+
+const resolvedCornerWidth = computed(() => {
+  return (
+    resolveDimension(props.cornerWidth) ??
+    tableContext?.rowHeaderWidth.value ??
+    DEFAULT_ROW_HEADER_WIDTH
+  );
+});
+
+const cornerStyle = computed(() => {
+  return {
+    width: resolvedCornerWidth.value,
+    backgroundColor: 'transparent',
+    border: 'none',
+  };
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-comparison-table-cols',
+);
+</script>
+
+<template>
+  <thead
+    v-bind="forwardedAttrs()"
+    :class="className()"
+  >
+    <tr>
+      <th
+        scope="col"
+        class="alpha-comparison-table-corner p-0 bg-transparent border-none pointer-events-none select-none"
+        :style="cornerStyle"
+        aria-hidden="true"
+      />
+      <slot />
+    </tr>
+  </thead>
+</template>

package/components/comparison-table/ComparisonTableRow.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import {
+  COMPARISON_TABLE_KEY,
+  DEFAULT_ROW_HEADER_COLOR,
+  DEFAULT_ROW_HEADER_TEXT_COLOR,
+  resolveDimension,
+} from '../../utils/comparisonTable';
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'ComparisonTableRow',
+});
+
+export interface IComparisonTableRowProps {
+  readonly title?: string;
+  readonly color?: string;
+  readonly textColor?: string;
+  readonly borderRadius?: number | string;
+}
+
+const props = withDefaults(defineProps<IComparisonTableRowProps>(), {
+  title: undefined,
+  color: undefined,
+  textColor: undefined,
+  borderRadius: undefined,
+});
+
+const tableContext = inject(COMPARISON_TABLE_KEY, undefined);
+
+const resolvedBg = computed(() => {
+  return (
+    props.color ??
+    tableContext?.rowHeaderColor.value ??
+    DEFAULT_ROW_HEADER_COLOR
+  );
+});
+
+const resolvedTextColor = computed(() => {
+  return (
+    props.textColor ??
+    tableContext?.rowHeaderTextColor.value ??
+    DEFAULT_ROW_HEADER_TEXT_COLOR
+  );
+});
+
+const resolvedBorderRadius = computed(() => {
+  return (
+    resolveDimension(props.borderRadius) ??
+    tableContext?.borderRadius.value ??
+    '8px'
+  );
+});
+
+const resolvedPadding = computed(() => {
+  return tableContext?.dense.value ? 'py-2 px-3' : 'py-3 px-4';
+});
+
+const headerStyle = computed(() => {
+  return {
+    backgroundColor: resolvedBg.value,
+    color: resolvedTextColor.value,
+    borderRadius: resolvedBorderRadius.value,
+    fontSize: '1rem',
+    textAlign: 'center' as const,
+    verticalAlign: 'middle' as const,
+  };
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-comparison-table-row',
+);
+</script>
+
+<template>
+  <tr
+    v-bind="forwardedAttrs()"
+    :class="className()"
+  >
+    <th
+      scope="row"
+      class="alpha-comparison-table-row-title font-bold uppercase tracking-wider text-[1rem] leading-snug text-center align-middle select-text transition-all duration-200 [&_p]:text-[1rem] [&_p]:text-center [&_p]:m-0"
+      :class="resolvedPadding"
+      :style="headerStyle"
+    >
+      <slot name="title">{{ title }}</slot>
+    </th>
+    <slot />
+  </tr>
+</template>

package/components/comparison-table/ComparisonTableRows.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'ComparisonTableRows',
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-comparison-table-rows',
+);
+</script>
+
+<template>
+  <tbody
+    v-bind="forwardedAttrs()"
+    :class="className()"
+  >
+    <slot />
+  </tbody>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alphacifer/slidev-addon-theme",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "All Slidev addons for Alpha presentations",
   "type": "module",
   "keywords": [

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