@alphacifer/slidev-addon-theme 0.0.7 → 0.0.8

package/components/{comparison-table/ComparisonTable.vue → comparisons/table-comparison/TableComparison.vue}

@@ -10,7 +10,6 @@ import {
 } from 'vue';
 
 import {
-  COMPARISON_TABLE_KEY,
   DEFAULT_BORDER_RADIUS,
   DEFAULT_CELL_BG,
   DEFAULT_CELL_COLOR,
@@ -21,22 +20,23 @@ import {
   DEFAULT_ROW_HEADER_TEXT_COLOR,
   DEFAULT_ROW_HEADER_WIDTH,
   DEFAULT_SPACING,
-  type IComparisonTableContext,
+  type ITableComparisonContext,
   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';
+  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: 'ComparisonTable',
+  name: 'TableComparison',
 });
 
-export interface IComparisonTableProps {
+export interface ITableComparisonProps {
   readonly cellBg?: string;
   readonly cellColor?: string;
   readonly rowHeaderColor?: string;
@@ -53,7 +53,7 @@ export interface IComparisonTableProps {
   readonly height?: number | string;
 }
 
-const props = withDefaults(defineProps<IComparisonTableProps>(), {
+const props = withDefaults(defineProps<ITableComparisonProps>(), {
   cellBg: DEFAULT_CELL_BG,
   cellColor: DEFAULT_CELL_COLOR,
   rowHeaderColor: DEFAULT_ROW_HEADER_COLOR,
@@ -116,7 +116,7 @@ const resolvedHeight = computed(() => {
   return resolveDimension(props.height);
 });
 
-provide<IComparisonTableContext>(COMPARISON_TABLE_KEY, {
+provide<ITableComparisonContext>(TABLE_COMPARISON_KEY, {
   cellBg: computed(() => props.cellBg),
   cellColor: computed(() => props.cellColor),
   rowHeaderColor: computed(() => props.rowHeaderColor),
@@ -180,17 +180,17 @@ const tableStyle = computed(() => {
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-comparison-table w-full select-text font-sans relative my-auto',
+  'alpha-table-comparison 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">
+  <div class="alpha-table-comparison-wrapper w-full flex items-center justify-center overflow-x-auto">
     <table
       v-bind="forwardedAttrs()"
       :class="[
         className(),
-        { 'alpha-comparison-table--animated': isAnimated },
+        { 'alpha-table-comparison--animated': isAnimated },
       ]"
       :style="tableStyle"
     >
@@ -198,36 +198,36 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
         <slot />
       </template>
       <template v-else>
-        <ComparisonTableCols>
-          <ComparisonTableCol
+        <TableComparisonCols>
+          <TableComparisonCol
             v-for="col in DEFAULT_MOCKUP_COLS"
             :key="col.title"
             :color="col.color"
           >
             {{ col.title }}
-          </ComparisonTableCol>
-        </ComparisonTableCols>
-        <ComparisonTableRows>
-          <ComparisonTableRow
+          </TableComparisonCol>
+        </TableComparisonCols>
+        <TableComparisonRows>
+          <TableComparisonRow
             v-for="row in DEFAULT_MOCKUP_ROWS"
             :key="row.title"
             :title="row.title"
           >
-            <ComparisonTableCell
+            <TableComparisonCell
               v-for="(cellText, idx) in row.cells"
               :key="idx"
             >
               {{ cellText }}
-            </ComparisonTableCell>
-          </ComparisonTableRow>
-        </ComparisonTableRows>
+            </TableComparisonCell>
+          </TableComparisonRow>
+        </TableComparisonRows>
       </template>
     </table>
   </div>
 </template>
 
 <style scoped>
-.alpha-comparison-table--animated {
+.alpha-table-comparison--animated {
   animation: alpha-table-appear 0.35s ease-out;
 }
 
@@ -241,4 +241,14 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
     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/{comparison-table/ComparisonTableCell.vue → comparisons/table-comparison/TableComparisonCell.vue}

@@ -2,19 +2,19 @@
 import { computed, inject } from 'vue';
 
 import {
-  COMPARISON_TABLE_KEY,
   DEFAULT_CELL_BG,
   DEFAULT_CELL_COLOR,
   resolveDimension,
-} from '../../utils/comparisonTable';
-import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+  TABLE_COMPARISON_KEY,
+} from '../../../utils/tableComparison';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   inheritAttrs: false,
-  name: 'ComparisonTableCell',
+  name: 'TableComparisonCell',
 });
 
-export interface IComparisonTableCellProps {
+export interface ITableComparisonCellProps {
   readonly text?: string | number;
   readonly color?: string;
   readonly bg?: string;
@@ -23,7 +23,7 @@ export interface IComparisonTableCellProps {
   readonly align?: 'left' | 'center' | 'right';
 }
 
-const props = withDefaults(defineProps<IComparisonTableCellProps>(), {
+const props = withDefaults(defineProps<ITableComparisonCellProps>(), {
   text: undefined,
   color: undefined,
   bg: undefined,
@@ -32,7 +32,7 @@ const props = withDefaults(defineProps<IComparisonTableCellProps>(), {
   align: 'center',
 });
 
-const tableContext = inject(COMPARISON_TABLE_KEY, undefined);
+const tableContext = inject(TABLE_COMPARISON_KEY, undefined);
 
 const resolvedBg = computed(() => {
   return (
@@ -68,7 +68,7 @@ const cellStyle = computed(() => {
 });
 
 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}`;
+  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>
 

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

@@ -2,20 +2,20 @@
 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';
+  TABLE_COMPARISON_COLS_KEY,
+  TABLE_COMPARISON_KEY,
+} from '../../../utils/tableComparison';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   inheritAttrs: false,
-  name: 'ComparisonTableCol',
+  name: 'TableComparisonCol',
 });
 
-export interface IComparisonTableColProps {
+export interface ITableComparisonColProps {
   readonly title?: string;
   readonly color?: string;
   readonly textColor?: string;
@@ -23,7 +23,7 @@ export interface IComparisonTableColProps {
   readonly borderRadius?: number | string;
 }
 
-const props = withDefaults(defineProps<IComparisonTableColProps>(), {
+const props = withDefaults(defineProps<ITableComparisonColProps>(), {
   title: undefined,
   color: undefined,
   textColor: undefined,
@@ -31,8 +31,8 @@ const props = withDefaults(defineProps<IComparisonTableColProps>(), {
   borderRadius: undefined,
 });
 
-const tableContext = inject(COMPARISON_TABLE_KEY, undefined);
-const colsContext = inject(COMPARISON_TABLE_COLS_KEY, undefined);
+const tableContext = inject(TABLE_COMPARISON_KEY, undefined);
+const colsContext = inject(TABLE_COMPARISON_COLS_KEY, undefined);
 
 const autoIndex = colsContext?.registerCol() ?? 0;
 
@@ -81,7 +81,7 @@ const colStyle = computed(() => {
 });
 
 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}`;
+  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>
 

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

@@ -2,34 +2,34 @@
 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';
+  TABLE_COMPARISON_COLS_KEY,
+  TABLE_COMPARISON_KEY,
+} from '../../../utils/tableComparison';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   inheritAttrs: false,
-  name: 'ComparisonTableCols',
+  name: 'TableComparisonCols',
 });
 
-export interface IComparisonTableColsProps {
+export interface ITableComparisonColsProps {
   readonly cornerWidth?: number | string;
 }
 
-const props = withDefaults(defineProps<IComparisonTableColsProps>(), {
+const props = withDefaults(defineProps<ITableComparisonColsProps>(), {
   cornerWidth: undefined,
 });
 
-const tableContext = inject(COMPARISON_TABLE_KEY, undefined);
+const tableContext = inject(TABLE_COMPARISON_KEY, undefined);
 
 let colCounter = 0;
 onBeforeUpdate(() => {
   colCounter = 0;
 });
 
-provide(COMPARISON_TABLE_COLS_KEY, {
+provide(TABLE_COMPARISON_COLS_KEY, {
   registerCol: () => {
     return colCounter++;
   },
@@ -52,7 +52,7 @@ const cornerStyle = computed(() => {
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-comparison-table-cols',
+  'alpha-table-comparison-cols',
 );
 </script>
 
@@ -64,7 +64,7 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
     <tr>
       <th
         scope="col"
-        class="alpha-comparison-table-corner p-0 bg-transparent border-none pointer-events-none select-none"
+        class="alpha-table-comparison-corner p-0 bg-transparent border-none pointer-events-none select-none"
         :style="cornerStyle"
         aria-hidden="true"
       />

package/components/{comparison-table/ComparisonTableRow.vue → comparisons/table-comparison/TableComparisonRow.vue}

@@ -2,33 +2,33 @@
 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';
+  TABLE_COMPARISON_KEY,
+} from '../../../utils/tableComparison';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   inheritAttrs: false,
-  name: 'ComparisonTableRow',
+  name: 'TableComparisonRow',
 });
 
-export interface IComparisonTableRowProps {
+export interface ITableComparisonRowProps {
   readonly title?: string;
   readonly color?: string;
   readonly textColor?: string;
   readonly borderRadius?: number | string;
 }
 
-const props = withDefaults(defineProps<IComparisonTableRowProps>(), {
+const props = withDefaults(defineProps<ITableComparisonRowProps>(), {
   title: undefined,
   color: undefined,
   textColor: undefined,
   borderRadius: undefined,
 });
 
-const tableContext = inject(COMPARISON_TABLE_KEY, undefined);
+const tableContext = inject(TABLE_COMPARISON_KEY, undefined);
 
 const resolvedBg = computed(() => {
   return (
@@ -70,7 +70,7 @@ const headerStyle = computed(() => {
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-comparison-table-row',
+  'alpha-table-comparison-row',
 );
 </script>
 
@@ -81,7 +81,7 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
   >
     <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="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"
     >

package/components/{comparison-table/ComparisonTableRows.vue → comparisons/table-comparison/TableComparisonRows.vue}

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   inheritAttrs: false,
-  name: 'ComparisonTableRows',
+  name: 'TableComparisonRows',
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-comparison-table-rows',
+  'alpha-table-comparison-rows',
 );
 </script>
 

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