@alphacifer/slidev-addon-theme 0.0.6 → 0.0.8

package/components/comparisons/table-comparison/TableComparison.vue

@@ -0,0 +1,254 @@
+<script setup lang="ts">
+import {
+  type ComputedRef,
+  computed,
+  Fragment,
+  inject,
+  provide,
+  useSlots,
+  type VNode,
+} from 'vue';
+
+import {
+  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 ITableComparisonContext,
+  resolveDimension,
+  TABLE_COMPARISON_KEY,
+} from '../../../utils/tableComparison';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
+import TableComparisonCell from './TableComparisonCell.vue';
+import TableComparisonCol from './TableComparisonCol.vue';
+import TableComparisonCols from './TableComparisonCols.vue';
+import TableComparisonRow from './TableComparisonRow.vue';
+import TableComparisonRows from './TableComparisonRows.vue';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'TableComparison',
+});
+
+export interface ITableComparisonProps {
+  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<ITableComparisonProps>(), {
+  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<ITableComparisonContext>(TABLE_COMPARISON_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-table-comparison w-full select-text font-sans relative my-auto',
+);
+</script>
+
+<template>
+  <div class="alpha-table-comparison-wrapper w-full flex items-center justify-center overflow-x-auto">
+    <table
+      v-bind="forwardedAttrs()"
+      :class="[
+        className(),
+        { 'alpha-table-comparison--animated': isAnimated },
+      ]"
+      :style="tableStyle"
+    >
+      <template v-if="hasCustomContent">
+        <slot />
+      </template>
+      <template v-else>
+        <TableComparisonCols>
+          <TableComparisonCol
+            v-for="col in DEFAULT_MOCKUP_COLS"
+            :key="col.title"
+            :color="col.color"
+          >
+            {{ col.title }}
+          </TableComparisonCol>
+        </TableComparisonCols>
+        <TableComparisonRows>
+          <TableComparisonRow
+            v-for="row in DEFAULT_MOCKUP_ROWS"
+            :key="row.title"
+            :title="row.title"
+          >
+            <TableComparisonCell
+              v-for="(cellText, idx) in row.cells"
+              :key="idx"
+            >
+              {{ cellText }}
+            </TableComparisonCell>
+          </TableComparisonRow>
+        </TableComparisonRows>
+      </template>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.alpha-table-comparison--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);
+  }
+}
+
+.alpha-table-comparison :deep(tr) {
+  background-color: transparent;
+  border: none;
+}
+
+.alpha-table-comparison :deep(th),
+.alpha-table-comparison :deep(td) {
+  border: none;
+}
+</style>

package/components/comparisons/table-comparison/TableComparisonCell.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import {
+  DEFAULT_CELL_BG,
+  DEFAULT_CELL_COLOR,
+  resolveDimension,
+  TABLE_COMPARISON_KEY,
+} from '../../../utils/tableComparison';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'TableComparisonCell',
+});
+
+export interface ITableComparisonCellProps {
+  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<ITableComparisonCellProps>(), {
+  text: undefined,
+  color: undefined,
+  bg: undefined,
+  textColor: undefined,
+  borderRadius: undefined,
+  align: 'center',
+});
+
+const tableContext = inject(TABLE_COMPARISON_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-table-comparison-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/comparisons/table-comparison/TableComparisonCol.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import {
+  DEFAULT_COL_COLORS,
+  DEFAULT_COL_HEADER_TEXT_COLOR,
+  resolveDimension,
+  TABLE_COMPARISON_COLS_KEY,
+  TABLE_COMPARISON_KEY,
+} from '../../../utils/tableComparison';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'TableComparisonCol',
+});
+
+export interface ITableComparisonColProps {
+  readonly title?: string;
+  readonly color?: string;
+  readonly textColor?: string;
+  readonly width?: number | string;
+  readonly borderRadius?: number | string;
+}
+
+const props = withDefaults(defineProps<ITableComparisonColProps>(), {
+  title: undefined,
+  color: undefined,
+  textColor: undefined,
+  width: undefined,
+  borderRadius: undefined,
+});
+
+const tableContext = inject(TABLE_COMPARISON_KEY, undefined);
+const colsContext = inject(TABLE_COMPARISON_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-table-comparison-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/comparisons/table-comparison/TableComparisonCols.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, inject, onBeforeUpdate, provide } from 'vue';
+
+import {
+  DEFAULT_ROW_HEADER_WIDTH,
+  resolveDimension,
+  TABLE_COMPARISON_COLS_KEY,
+  TABLE_COMPARISON_KEY,
+} from '../../../utils/tableComparison';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'TableComparisonCols',
+});
+
+export interface ITableComparisonColsProps {
+  readonly cornerWidth?: number | string;
+}
+
+const props = withDefaults(defineProps<ITableComparisonColsProps>(), {
+  cornerWidth: undefined,
+});
+
+const tableContext = inject(TABLE_COMPARISON_KEY, undefined);
+
+let colCounter = 0;
+onBeforeUpdate(() => {
+  colCounter = 0;
+});
+
+provide(TABLE_COMPARISON_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-table-comparison-cols',
+);
+</script>
+
+<template>
+  <thead
+    v-bind="forwardedAttrs()"
+    :class="className()"
+  >
+    <tr>
+      <th
+        scope="col"
+        class="alpha-table-comparison-corner p-0 bg-transparent border-none pointer-events-none select-none"
+        :style="cornerStyle"
+        aria-hidden="true"
+      />
+      <slot />
+    </tr>
+  </thead>
+</template>

package/components/comparisons/table-comparison/TableComparisonRow.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import {
+  DEFAULT_ROW_HEADER_COLOR,
+  DEFAULT_ROW_HEADER_TEXT_COLOR,
+  resolveDimension,
+  TABLE_COMPARISON_KEY,
+} from '../../../utils/tableComparison';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'TableComparisonRow',
+});
+
+export interface ITableComparisonRowProps {
+  readonly title?: string;
+  readonly color?: string;
+  readonly textColor?: string;
+  readonly borderRadius?: number | string;
+}
+
+const props = withDefaults(defineProps<ITableComparisonRowProps>(), {
+  title: undefined,
+  color: undefined,
+  textColor: undefined,
+  borderRadius: undefined,
+});
+
+const tableContext = inject(TABLE_COMPARISON_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-table-comparison-row',
+);
+</script>
+
+<template>
+  <tr
+    v-bind="forwardedAttrs()"
+    :class="className()"
+  >
+    <th
+      scope="row"
+      class="alpha-table-comparison-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/comparisons/table-comparison/TableComparisonRows.vue

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

package/components/core/ReflectedTitle.vue

@@ -15,9 +15,10 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(`
   alpha-reflected-title
   relative
   text-5xl
+  text-center
   font-bold
   tracking-tight
-  !text-[#a5f3fc]
+  text-[#a5f3fc]
   after:content-[attr(data-title)]
   after:block
   after:mt-2