@alphacifer/slidev-addon-theme 0.0.5 → 0.0.7

package/components/chevron-card/ChevronCardBadge.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { CHEVRON_CARD_KEY } from '../../utils/chevronCard';
+
+defineOptions({
+  name: 'ChevronCardBadge',
+});
+
+export interface IChevronCardBadgeProps {
+  readonly step?: string | number;
+  readonly icon?: string | object;
+  readonly color?: string;
+  readonly width?: number;
+  readonly height?: number | string;
+  readonly notchDepth?: number;
+}
+
+const props = withDefaults(defineProps<IChevronCardBadgeProps>(), {
+  step: undefined,
+  icon: undefined,
+  color: undefined,
+  width: 130,
+  height: undefined,
+  notchDepth: 26,
+});
+
+const cardContext = inject(CHEVRON_CARD_KEY, undefined);
+
+const resolvedColor = computed(() => {
+  return props.color ?? cardContext?.color.value ?? '#f59e0b';
+});
+
+const resolvedStep = computed(() => {
+  return props.step ?? cardContext?.step.value ?? '01';
+});
+</script>
+
+<template>
+  <div
+    class="alpha-chevron-card-badge relative select-none flex-shrink-0 flex items-center justify-center text-white"
+    :style="{
+      width: `${props.width}px`,
+      height: props.height
+        ? typeof props.height === 'number'
+          ? `${props.height}px`
+          : props.height
+        : '100%',
+      backgroundColor: resolvedColor,
+      clipPath: `polygon(0% 0%, calc(100% - ${props.notchDepth}px) 0%, 100% 50%, calc(100% - ${props.notchDepth}px) 100%, 0% 100%, ${props.notchDepth}px 50%)`,
+    }"
+  >
+    <slot name="icon">
+      <slot>
+        <component
+          :is="props.icon"
+          v-if="typeof props.icon === 'object'"
+          class="w-8 h-8 text-white"
+        />
+        <span
+          v-else-if="typeof props.icon === 'string'"
+          :class="[props.icon, 'text-3xl text-white inline-block']"
+        />
+        <span
+          v-else
+          class="font-extrabold text-[32px] tracking-tight font-sans select-none"
+          style="font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;"
+        >
+          {{ resolvedStep }}
+        </span>
+      </slot>
+    </slot>
+  </div>
+</template>

package/components/chevron-card/ChevronCardContent.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { CHEVRON_CARD_KEY } from '../../utils/chevronCard';
+
+defineOptions({
+  name: 'ChevronCardContent',
+});
+
+export interface IChevronCardContentProps {
+  readonly color?: string;
+}
+
+const props = withDefaults(defineProps<IChevronCardContentProps>(), {
+  color: undefined,
+});
+
+const cardContext = inject(CHEVRON_CARD_KEY, undefined);
+
+const contentColor = computed(() => {
+  return props.color ?? cardContext?.textColor.value ?? '#6b7280';
+});
+</script>
+
+<template>
+  <div
+    class="alpha-chevron-card-content text-[1rem] leading-[1.45] font-normal tracking-tight select-none font-sans"
+    :style="{
+      color: contentColor,
+      margin: 0,
+      padding: 0,
+      fontSize: '1rem',
+      fontFamily:
+        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/components/chevron-card/ChevronCardHeading.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { CHEVRON_CARD_KEY } from '../../utils/chevronCard';
+
+defineOptions({
+  name: 'ChevronCardHeading',
+});
+
+export interface IChevronCardHeadingProps {
+  readonly color?: string;
+}
+
+const props = withDefaults(defineProps<IChevronCardHeadingProps>(), {
+  color: undefined,
+});
+
+const cardContext = inject(CHEVRON_CARD_KEY, undefined);
+
+const headingColor = computed(() => {
+  return props.color ?? cardContext?.titleColor.value ?? '#4b5563';
+});
+</script>
+
+<template>
+  <div
+    class="alpha-chevron-card-heading font-bold text-[1.25rem] uppercase tracking-wider leading-tight select-none font-sans"
+    :style="{
+      color: headingColor,
+      padding: 0,
+      fontSize: '1.25rem',
+      fontFamily:
+        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
+      marginBottom: '0.25rem',
+    }"
+  >
+    <slot />
+  </div>
+</template>

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>