@alphacifer/slidev-addon-theme 0.0.10 → 0.0.11

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

@@ -1,21 +1,11 @@
 <script setup lang="ts">
-import {
-  type ComputedRef,
-  computed,
-  Fragment,
-  inject,
-  provide,
-  useSlots,
-  type VNode,
-} from 'vue';
+import { type ComputedRef, computed, inject, provide } 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,
@@ -23,13 +13,8 @@ import {
   type ITableComparisonContext,
   resolveDimension,
   TABLE_COMPARISON_KEY,
-} from '../../../utils/tableComparison';
+} from '../../../utils/comparisons/table-comparison';
 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,
@@ -54,9 +39,9 @@ export interface ITableComparisonProps {
 }
 
 const props = withDefaults(defineProps<ITableComparisonProps>(), {
-  cellBg: DEFAULT_CELL_BG,
+  cellBg: `var(--alpha-table-comparison-cell-bg, ${DEFAULT_CELL_BG})`,
   cellColor: DEFAULT_CELL_COLOR,
-  rowHeaderColor: DEFAULT_ROW_HEADER_COLOR,
+  rowHeaderColor: `var(--alpha-table-comparison-row-bg, ${DEFAULT_ROW_HEADER_COLOR})`,
   rowHeaderTextColor: DEFAULT_ROW_HEADER_TEXT_COLOR,
   colHeaderTextColor: DEFAULT_COL_HEADER_TEXT_COLOR,
   borderRadius: DEFAULT_BORDER_RADIUS,
@@ -70,8 +55,6 @@ const props = withDefaults(defineProps<ITableComparisonProps>(), {
   height: undefined,
 });
 
-const slots = useSlots();
-
 const shiftingIntro = inject<
   | {
       active: ComputedRef<boolean>;
@@ -129,46 +112,6 @@ provide<ITableComparisonContext>(TABLE_COMPARISON_KEY, {
   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,
@@ -185,7 +128,9 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
 </script>
 
 <template>
-  <div class="alpha-table-comparison-wrapper w-full flex items-center justify-center overflow-x-auto">
+  <div
+    class="alpha-table-comparison-wrapper w-full flex items-center justify-center overflow-x-auto"
+  >
     <table
       v-bind="forwardedAttrs()"
       :class="[
@@ -194,34 +139,7 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
       ]"
       :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>
+      <slot />
     </table>
   </div>
 </template>
@@ -242,13 +160,15 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
   }
 }
 
-.alpha-table-comparison :deep(tr) {
-  background-color: transparent;
-  border: none;
-}
+@layer alpha-theme-tokens {
+  .alpha-table-comparison :deep(tr) {
+    background-color: transparent;
+    border: none;
+  }
 
-.alpha-table-comparison :deep(th),
-.alpha-table-comparison :deep(td) {
-  border: none;
+  .alpha-table-comparison :deep(th),
+  .alpha-table-comparison :deep(td) {
+    border: none;
+  }
 }
 </style>

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

@@ -6,7 +6,7 @@ import {
   DEFAULT_CELL_COLOR,
   resolveDimension,
   TABLE_COMPARISON_KEY,
-} from '../../../utils/tableComparison';
+} from '../../../utils/comparisons/table-comparison';
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
@@ -15,7 +15,6 @@ defineOptions({
 });
 
 export interface ITableComparisonCellProps {
-  readonly text?: string | number;
   readonly color?: string;
   readonly bg?: string;
   readonly textColor?: string;
@@ -24,7 +23,6 @@ export interface ITableComparisonCellProps {
 }
 
 const props = withDefaults(defineProps<ITableComparisonCellProps>(), {
-  text: undefined,
   color: undefined,
   bg: undefined,
   textColor: undefined,
@@ -56,33 +54,37 @@ const resolvedPadding = computed(() => {
   return tableContext?.dense.value ? 'py-2 px-3' : 'py-3 px-4';
 });
 
+const resolvedAlignClasses = computed(() => {
+  if (props.align === 'left') {
+    return 'text-left [&_p]:text-left';
+  }
+
+  if (props.align === 'right') {
+    return 'text-right [&_p]:text-right';
+  }
+
+  return 'text-center [&_p]:text-center';
+});
+
 const cellStyle = computed(() => {
   return {
-    backgroundColor: resolvedBg.value,
-    color: resolvedTextColor.value,
+    ...(!resolvedBg.value.includes('--alpha-table-comparison-cell-bg')
+      ? { '--alpha-table-comparison-cell-bg': resolvedBg.value }
+      : {}),
+    ...(!resolvedTextColor.value.includes('--alpha-table-comparison-cell')
+      ? { '--alpha-table-comparison-cell': 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}`;
+  return `alpha-table-comparison-cell bg-(--alpha-table-comparison-cell-bg) text-(--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} ${resolvedAlignClasses.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 v-bind="forwardedAttrs()" :class="className()" :style="cellStyle">
+    <slot />
   </td>
 </template>

package/components/comparisons/table-comparison/{TableComparisonCol.vue → TableComparisonColumn.vue}

@@ -7,24 +7,22 @@ import {
   resolveDimension,
   TABLE_COMPARISON_COLS_KEY,
   TABLE_COMPARISON_KEY,
-} from '../../../utils/tableComparison';
+} from '../../../utils/comparisons/table-comparison';
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   inheritAttrs: false,
-  name: 'TableComparisonCol',
+  name: 'TableComparisonColumn',
 });
 
-export interface ITableComparisonColProps {
-  readonly title?: string;
+export interface ITableComparisonColumnProps {
   readonly color?: string;
   readonly textColor?: string;
   readonly width?: number | string;
   readonly borderRadius?: number | string;
 }
 
-const props = withDefaults(defineProps<ITableComparisonColProps>(), {
-  title: undefined,
+const props = withDefaults(defineProps<ITableComparisonColumnProps>(), {
   color: undefined,
   textColor: undefined,
   width: undefined,
@@ -41,7 +39,8 @@ const resolvedColor = computed(() => {
     return props.color;
   }
 
-  return DEFAULT_COL_COLORS[autoIndex % DEFAULT_COL_COLORS.length];
+  const index = autoIndex % DEFAULT_COL_COLORS.length;
+  return `var(--alpha-table-comparison-col-${index + 1}-background, ${DEFAULT_COL_COLORS[index]})`;
 });
 
 const resolvedTextColor = computed(() => {
@@ -70,18 +69,21 @@ const resolvedPadding = computed(() => {
 
 const colStyle = computed(() => {
   return {
-    backgroundColor: resolvedColor.value,
-    color: resolvedTextColor.value,
+    ...(!resolvedColor.value.includes(
+      '--alpha-table-comparison-col-1-background',
+    )
+      ? { '--alpha-table-comparison-col-1-background': resolvedColor.value }
+      : {}),
+    ...(!resolvedTextColor.value.includes('--alpha-table-comparison-col')
+      ? { '--alpha-table-comparison-col': 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}`;
+  return `alpha-table-comparison-col bg-(--alpha-table-comparison-col-1-background) text-(--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>
 
@@ -92,6 +94,6 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(() => {
     :class="className()"
     :style="colStyle"
   >
-    <slot>{{ title }}</slot>
+    <slot />
   </th>
 </template>

package/components/comparisons/table-comparison/{TableComparisonCols.vue → TableComparisonColumns.vue}

@@ -6,19 +6,19 @@ import {
   resolveDimension,
   TABLE_COMPARISON_COLS_KEY,
   TABLE_COMPARISON_KEY,
-} from '../../../utils/tableComparison';
+} from '../../../utils/comparisons/table-comparison';
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   inheritAttrs: false,
-  name: 'TableComparisonCols',
+  name: 'TableComparisonColumns',
 });
 
-export interface ITableComparisonColsProps {
+export interface ITableComparisonColumnsProps {
   readonly cornerWidth?: number | string;
 }
 
-const props = withDefaults(defineProps<ITableComparisonColsProps>(), {
+const props = withDefaults(defineProps<ITableComparisonColumnsProps>(), {
   cornerWidth: undefined,
 });
 
@@ -57,10 +57,7 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
 </script>
 
 <template>
-  <thead
-    v-bind="forwardedAttrs()"
-    :class="className()"
-  >
+  <thead v-bind="forwardedAttrs()" :class="className()">
     <tr>
       <th
         scope="col"

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

@@ -6,7 +6,7 @@ import {
   DEFAULT_ROW_HEADER_TEXT_COLOR,
   resolveDimension,
   TABLE_COMPARISON_KEY,
-} from '../../../utils/tableComparison';
+} from '../../../utils/comparisons/table-comparison';
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
@@ -15,14 +15,12 @@ defineOptions({
 });
 
 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,
@@ -60,12 +58,13 @@ const resolvedPadding = computed(() => {
 
 const headerStyle = computed(() => {
   return {
-    backgroundColor: resolvedBg.value,
-    color: resolvedTextColor.value,
+    ...(!resolvedBg.value.includes('--alpha-table-comparison-row-bg')
+      ? { '--alpha-table-comparison-row-bg': resolvedBg.value }
+      : {}),
+    ...(!resolvedTextColor.value.includes('--alpha-table-comparison-row')
+      ? { '--alpha-table-comparison-row': resolvedTextColor.value }
+      : {}),
     borderRadius: resolvedBorderRadius.value,
-    fontSize: '1rem',
-    textAlign: 'center' as const,
-    verticalAlign: 'middle' as const,
   };
 });
 
@@ -75,17 +74,14 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
 </script>
 
 <template>
-  <tr
-    v-bind="forwardedAttrs()"
-    :class="className()"
-  >
+  <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="alpha-table-comparison-row-title bg-(--alpha-table-comparison-row-bg) text-(--alpha-table-comparison-row) 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>
+      <slot name="heading" />
     </th>
     <slot />
   </tr>

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

@@ -12,10 +12,7 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
 </script>
 
 <template>
-  <tbody
-    v-bind="forwardedAttrs()"
-    :class="className()"
-  >
+  <tbody v-bind="forwardedAttrs()" :class="className()">
     <slot />
   </tbody>
 </template>

package/components/comparisons/table-comparison/style.css

@@ -0,0 +1,15 @@
+/* Color defaults shared by this component family. */
+@layer alpha-theme-tokens {
+  :root {
+    --alpha-table-comparison-cell: var(--alpha-foreground-primary, #475569);
+    --alpha-table-comparison-cell-bg: #d6e5ef;
+    --alpha-table-comparison-col: #ffffff;
+    --alpha-table-comparison-col-1-background: #354f82;
+    --alpha-table-comparison-col-2-background: #5b8bb3;
+    --alpha-table-comparison-col-3-background: #00a8a8;
+    --alpha-table-comparison-col-4-background: #00b884;
+    --alpha-table-comparison-col-5-background: #00875a;
+    --alpha-table-comparison-row: #ffffff;
+    --alpha-table-comparison-row-bg: #2e8b9a;
+  }
+}

package/components/core/Date.vue

@@ -25,10 +25,7 @@ const { className, forwardedAttrs } = useMergedUnoAttrs('alpha-date');
 </script>
 
 <template>
-  <div
-    v-bind="forwardedAttrs()"
-    :class="className()"
-  >
+  <p v-bind="forwardedAttrs()" :class="className()">
     Date: {{ formattedDate }}
-  </div>
+  </p>
 </template>

package/components/core/QnA.vue

@@ -14,7 +14,7 @@ withDefaults(defineProps<IQnAProps>(), {
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-qna flex items-center gap-8 text-8xl font-bold color-[#2b90b6]',
+  'alpha-qna flex items-center gap-8 text-8xl font-bold color-[var(--alpha-qna-color)]',
 );
 </script>
 

package/components/core/Quote.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { mergeUno } from '../../utils/mergeUno';
+import { mergeUno } from '../../utils/merge-uno';
 import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
 
 defineOptions({
@@ -30,11 +30,8 @@ const titleClasses = computed(() => mergeUno('text-center', props.titleClass));
 </script>
 
 <template>
-  <div
-    v-bind="forwardedAttrs()"
-    :class="className()"
-  >
-    <h1 :class="titleClasses">"{{ text }}"</h1>
+  <div v-bind="forwardedAttrs()" :class="className()">
+    <h3 :class="titleClasses">"{{ text }}"</h3>
     <p v-if="author" class="self-end">— {{ author }}</p>
   </div>
 </template>

package/components/core/ReflectedTitle.vue

@@ -18,7 +18,7 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(`
   text-center
   font-bold
   tracking-tight
-  text-[#a5f3fc]
+  text-(--alpha-reflected-title-color)
   after:content-[attr(data-title)]
   after:block
   after:mt-2
@@ -38,11 +38,7 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(`
 </script>
 
 <template>
-  <h1
-    v-bind="forwardedAttrs()"
-    :class="className()"
-    :data-title="title"
-  >
+  <h1 v-bind="forwardedAttrs()" :class="className()" :data-title="title">
     {{ title }}
   </h1>
 </template>

package/components/core/Speaker.vue

@@ -25,24 +25,19 @@ const props = defineProps({
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(() => [
-  'alpha-speaker flex absolute bottom-[15px] right-[30px] flex-col',
+  'alpha-speaker flex absolute bottom-3.75 right-7.5 flex-col',
   props.team.length ? 'text-left gap-2' : undefined,
 ]);
 </script>
 
 <template>
-  <div
-    v-bind="forwardedAttrs()"
-    :class="className()"
-  >
+  <div v-bind="forwardedAttrs()" :class="className()">
     <div v-if="team.length">
-      <div v-for="member in team" :key="member as string">
+      <p v-for="member in team" :key="member as string">
         {{ member }}
-      </div>
-    </div>
-    <div v-else>
-      Author: {{ author }}
+      </p>
     </div>
+    <p v-else>Author: {{ author }}</p>
     <Date :date="date" />
   </div>
 </template>

package/components/core/TransitionHeading.vue

@@ -19,16 +19,13 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(() => [
   'alpha-transition-heading transition-all duration-700 ease-in-out absolute w-fit whitespace-nowrap',
   {
     'top-[50%] left-[50%] translate-[-50%,-50%]': props.center,
-    'top-[2.5rem] left-[3rem] translate-[0,0]': props.idle || !props.center,
+    'top-10 left-12 translate-[0,0]': props.idle || !props.center,
   },
 ]);
 </script>
 
 <template>
-  <div
-    v-bind="forwardedAttrs()"
-    :class="className()"
-  >
+  <div v-bind="forwardedAttrs()" :class="className()">
     <slot />
   </div>
 </template>