@alphacifer/slidev-addon-theme 0.0.9 → 0.0.11

package/components/comparisons/arc-comparison/ArcComparisonBadge.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 import ArcOrbitBadge, {
   type IArcOrbitBadgeProps,
 } from '../../core/arc-orbit/ArcOrbitBadge.vue';
@@ -11,19 +12,23 @@ defineOptions({
 export interface IArcComparisonBadgeProps extends IArcOrbitBadgeProps {}
 
 const props = defineProps<IArcComparisonBadgeProps>();
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-arc-comparison-badge text-(--alpha-arc-comparison-badge)',
+);
 </script>
 
 <template>
   <ArcOrbitBadge
     v-if="$slots.default"
-    v-bind="{ ...props, ...$attrs }"
-    class="alpha-arc-comparison-badge"
+    v-bind="{ ...props, ...forwardedAttrs() }"
+    :class="className()"
   >
     <slot />
   </ArcOrbitBadge>
   <ArcOrbitBadge
     v-else
-    v-bind="{ ...props, ...$attrs }"
-    class="alpha-arc-comparison-badge"
+    v-bind="{ ...props, ...forwardedAttrs() }"
+    :class="className()"
   />
 </template>

package/components/comparisons/arc-comparison/ArcComparisonContent.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 import ArcOrbitContent, {
   type IArcOrbitContentProps,
 } from '../../core/arc-orbit/ArcOrbitContent.vue';
@@ -11,19 +12,23 @@ defineOptions({
 export interface IArcComparisonContentProps extends IArcOrbitContentProps {}
 
 const props = defineProps<IArcComparisonContentProps>();
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-arc-comparison-content text-(--alpha-arc-comparison-content)',
+);
 </script>
 
 <template>
   <ArcOrbitContent
     v-if="$slots.default"
-    v-bind="{ ...props, ...$attrs }"
-    class="alpha-arc-comparison-content"
+    v-bind="{ ...props, ...forwardedAttrs() }"
+    :class="className()"
   >
     <slot />
   </ArcOrbitContent>
   <ArcOrbitContent
     v-else
-    v-bind="{ ...props, ...$attrs }"
-    class="alpha-arc-comparison-content"
+    v-bind="{ ...props, ...forwardedAttrs() }"
+    :class="className()"
   />
 </template>

package/components/comparisons/arc-comparison/ArcComparisonHeading.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 import ArcOrbitHeading, {
   type IArcOrbitHeadingProps,
 } from '../../core/arc-orbit/ArcOrbitHeading.vue';
@@ -11,19 +12,23 @@ defineOptions({
 export interface IArcComparisonHeadingProps extends IArcOrbitHeadingProps {}
 
 const props = defineProps<IArcComparisonHeadingProps>();
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-arc-comparison-heading text-(--alpha-arc-comparison-heading)',
+);
 </script>
 
 <template>
   <ArcOrbitHeading
     v-if="$slots.default"
-    v-bind="{ ...props, ...$attrs }"
-    class="alpha-arc-comparison-heading"
+    v-bind="{ ...props, ...forwardedAttrs() }"
+    :class="className()"
   >
     <slot />
   </ArcOrbitHeading>
   <ArcOrbitHeading
     v-else
-    v-bind="{ ...props, ...$attrs }"
-    class="alpha-arc-comparison-heading"
+    v-bind="{ ...props, ...forwardedAttrs() }"
+    :class="className()"
   />
 </template>

package/components/comparisons/arc-comparison/ArcComparisonLeft.vue

@@ -7,24 +7,22 @@ import {
   provide,
   ref,
   useSlots,
+  isVNode,
   type VNode,
+  watch,
 } from 'vue';
 
 import {
   ARC_COMPARISON_ROOT_KEY,
   ARC_COMPARISON_SIDE_KEY,
   DEFAULT_LEFT_COLOR,
-  DEFAULT_LEFT_ITEMS,
-} from '../../../utils/arcComparison';
+} from '../../../utils/comparisons/arc-comparison';
 import {
   ARC_ORBIT_ROOT_KEY,
   type IArcOrbitGeometry,
   type TArcOrbitPosition,
-} from '../../../utils/arcOrbit';
+} from '../../../utils/core/arc-orbit';
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
-import ArcComparisonContents from './ArcComparisonContents.vue';
-import ArcComparisonOrbit from './ArcComparisonOrbit.vue';
-import ArcComparisonTitle from './ArcComparisonTitle.vue';
 
 defineOptions({
   inheritAttrs: false,
@@ -33,7 +31,7 @@ defineOptions({
 
 export interface IArcComparisonLeftProps {
   readonly color?: string;
-  readonly title?: string;
+  readonly title?: string | VNode;
   readonly count?: number;
 }
 
@@ -47,25 +45,6 @@ const rootContext = inject(ARC_COMPARISON_ROOT_KEY, undefined);
 
 const slots = useSlots();
 
-interface INamedComponent {
-  readonly name?: string;
-  readonly __name?: string;
-}
-
-function hasComponentName(type: unknown, name: string): boolean {
-  if (typeof type === 'object' && type !== null) {
-    const comp = type as INamedComponent;
-
-    return comp.name === name || comp.__name === name;
-  }
-
-  if (typeof type === 'function') {
-    return (type as { name?: string }).name === name;
-  }
-
-  return false;
-}
-
 const registeredCalloutIds = ref<symbol[]>([]);
 
 const registerCallout = (id?: symbol): number | ComputedRef<number> => {
@@ -73,6 +52,7 @@ const registerCallout = (id?: symbol): number | ComputedRef<number> => {
     if (!registeredCalloutIds.value.includes(id)) {
       registeredCalloutIds.value.push(id);
     }
+
     return computed(() => registeredCalloutIds.value.indexOf(id));
   }
 
@@ -95,7 +75,15 @@ const resolvedCount = computed(() => {
   return props.count ?? rootContext?.pointsCount.value ?? 3;
 });
 
-const currentTitle = ref<string>(props.title ?? 'Add Project\nName');
+const currentTitle = ref<string>(
+  typeof props.title === 'string' ? props.title : '',
+);
+watch(
+  () => props.title,
+  (title) => {
+    currentTitle.value = typeof title === 'string' ? title : '';
+  },
+);
 
 provide(ARC_COMPARISON_SIDE_KEY, {
   side: 'left',
@@ -143,7 +131,7 @@ provide(ARC_ORBIT_ROOT_KEY, {
   registerCallout,
   unregisterCallout,
   edgeOffset: computed(() => rootContext?.edgeOffset?.value ?? 30),
-  items: computed(() => DEFAULT_LEFT_ITEMS),
+  items: computed(() => []),
 });
 
 function isSignificantNode(node: VNode): boolean {
@@ -174,14 +162,6 @@ function flattenVNodes(nodes: VNode[]): VNode[] {
   return result;
 }
 
-function isTitleNode(node: VNode): boolean {
-  return (
-    hasComponentName(node.type, 'ArcComparisonTitle') ||
-    hasComponentName(node.type, 'ArcOrbitTitle') ||
-    node.type === ArcComparisonTitle
-  );
-}
-
 const defaultNodes = computed(() => {
   if (!slots.default) {
     return [];
@@ -190,14 +170,6 @@ const defaultNodes = computed(() => {
   return flattenVNodes(slots.default());
 });
 
-const titleNode = computed(() => {
-  return defaultNodes.value.find(isTitleNode);
-});
-
-const bodyNodes = computed(() => {
-  return defaultNodes.value.filter((node) => !isTitleNode(node));
-});
-
 const hubStyle = computed(() => {
   const hubR = rootContext?.geo.value.left.hubRadius ?? 170;
   const centerY = rootContext?.geo.value.centerY ?? 240;
@@ -220,24 +192,33 @@ const hubStyle = computed(() => {
   };
 });
 
+const rootStyle = computed(() => {
+  if (!props.color || props.color === DEFAULT_LEFT_COLOR) {
+    return undefined;
+  }
+
+  return {
+    '--alpha-arc-comparison-left-title': props.color,
+    '--alpha-arc-comparison-left-accent': props.color,
+  };
+});
+
 const { className, forwardedAttrs } = useMergedUnoAttrs(
   'alpha-arc-comparison-left absolute inset-0 w-full h-full pointer-events-none',
 );
 </script>
 
 <template>
-  <div v-bind="forwardedAttrs()" :class="className()">
+  <div v-bind="forwardedAttrs()" :class="className()" :style="rootStyle">
     <!-- Left Hub Title Display -->
-    <div
-      class="alpha-arc-comparison__hub-title alpha-arc-comparison__hub-title--left absolute flex items-center justify-center z-10 pointer-events-auto"
+    <h3
+      class="alpha-arc-comparison__hub-title alpha-arc-comparison__hub-title--left absolute flex items-center justify-center z-10 pointer-events-auto font-sans font-bold text-center px-2 leading-tight select-none tracking-tight whitespace-pre-line text-[18px] text-(--alpha-arc-comparison-left-title)"
       :style="hubStyle"
     >
-      <component :is="titleNode" v-if="titleNode" />
-      <ArcComparisonTitle v-else-if="props.title">
-        {{ props.title }}
-      </ArcComparisonTitle>
-      <ArcComparisonTitle v-else />
-    </div>
+      <slot v-if="$slots.title" name="title" />
+      <component :is="props.title" v-else-if="isVNode(props.title)" />
+      <span v-else-if="typeof props.title === 'string'">{{ props.title }}</span>
+    </h3>
     <!-- Contents & Callouts -->
     <div
       v-if="rootContext?.as?.value !== 'layout' || rootContext?.isMoved?.value"
@@ -253,16 +234,11 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
             : '0ms',
       }"
     >
-      <template v-if="bodyNodes.length > 0">
-        <component :is="node" v-for="(node, i) in bodyNodes" :key="i" />
-      </template>
-      <ArcComparisonContents v-else>
-        <ArcComparisonOrbit
-          v-for="idx in resolvedCount"
-          :key="idx"
-          :index="idx - 1"
-        />
-      </ArcComparisonContents>
+      <div
+        class="alpha-arc-comparison-contents absolute inset-0 w-full h-full pointer-events-none"
+      >
+        <component :is="node" v-for="(node, i) in defaultNodes" :key="i" />
+      </div>
     </div>
   </div>
 </template>

package/components/comparisons/arc-comparison/ArcComparisonOrbit.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 import ArcOrbitCallout from '../../core/arc-orbit/ArcOrbitCallout.vue';
 
 defineOptions({
@@ -10,8 +11,6 @@ export interface IArcComparisonOrbitProps {
   readonly side?: 'left' | 'right';
   readonly index?: number;
   readonly id?: string | number;
-  readonly title?: string;
-  readonly description?: string;
   readonly color?: string;
   readonly textColor?: string;
   readonly textGap?: number;
@@ -21,27 +20,29 @@ const props = withDefaults(defineProps<IArcComparisonOrbitProps>(), {
   side: undefined,
   index: undefined,
   id: undefined,
-  title: undefined,
-  description: undefined,
   color: undefined,
   textColor: undefined,
   textGap: undefined,
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-arc-comparison-orbit',
+);
 </script>
 
 <template>
   <ArcOrbitCallout
     v-if="$slots.default"
-    v-bind="{ ...props, ...$attrs }"
+    v-bind="{ ...props, ...forwardedAttrs() }"
     :position="props.side"
-    class="alpha-arc-comparison-orbit"
+    :class="className()"
   >
     <slot />
   </ArcOrbitCallout>
   <ArcOrbitCallout
     v-else
-    v-bind="{ ...props, ...$attrs }"
+    v-bind="{ ...props, ...forwardedAttrs() }"
     :position="props.side"
-    class="alpha-arc-comparison-orbit"
+    :class="className()"
   />
 </template>

package/components/comparisons/arc-comparison/ArcComparisonRight.vue

@@ -7,24 +7,22 @@ import {
   provide,
   ref,
   useSlots,
+  isVNode,
   type VNode,
+  watch,
 } from 'vue';
 
 import {
   ARC_COMPARISON_ROOT_KEY,
   ARC_COMPARISON_SIDE_KEY,
   DEFAULT_RIGHT_COLOR,
-  DEFAULT_RIGHT_ITEMS,
-} from '../../../utils/arcComparison';
+} from '../../../utils/comparisons/arc-comparison';
 import {
   ARC_ORBIT_ROOT_KEY,
   type IArcOrbitGeometry,
   type TArcOrbitPosition,
-} from '../../../utils/arcOrbit';
+} from '../../../utils/core/arc-orbit';
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
-import ArcComparisonContents from './ArcComparisonContents.vue';
-import ArcComparisonOrbit from './ArcComparisonOrbit.vue';
-import ArcComparisonTitle from './ArcComparisonTitle.vue';
 
 defineOptions({
   inheritAttrs: false,
@@ -33,7 +31,7 @@ defineOptions({
 
 export interface IArcComparisonRightProps {
   readonly color?: string;
-  readonly title?: string;
+  readonly title?: string | VNode;
   readonly count?: number;
 }
 
@@ -47,25 +45,6 @@ const rootContext = inject(ARC_COMPARISON_ROOT_KEY, undefined);
 
 const slots = useSlots();
 
-interface INamedComponent {
-  readonly name?: string;
-  readonly __name?: string;
-}
-
-function hasComponentName(type: unknown, name: string): boolean {
-  if (typeof type === 'object' && type !== null) {
-    const comp = type as INamedComponent;
-
-    return comp.name === name || comp.__name === name;
-  }
-
-  if (typeof type === 'function') {
-    return (type as { name?: string }).name === name;
-  }
-
-  return false;
-}
-
 const registeredCalloutIds = ref<symbol[]>([]);
 
 const registerCallout = (id?: symbol): number | ComputedRef<number> => {
@@ -73,6 +52,7 @@ const registerCallout = (id?: symbol): number | ComputedRef<number> => {
     if (!registeredCalloutIds.value.includes(id)) {
       registeredCalloutIds.value.push(id);
     }
+
     return computed(() => registeredCalloutIds.value.indexOf(id));
   }
 
@@ -95,7 +75,15 @@ const resolvedCount = computed(() => {
   return props.count ?? rootContext?.pointsCount.value ?? 3;
 });
 
-const currentTitle = ref<string>(props.title ?? 'Add Project\nName');
+const currentTitle = ref<string>(
+  typeof props.title === 'string' ? props.title : '',
+);
+watch(
+  () => props.title,
+  (title) => {
+    currentTitle.value = typeof title === 'string' ? title : '';
+  },
+);
 
 provide(ARC_COMPARISON_SIDE_KEY, {
   side: 'right',
@@ -143,7 +131,7 @@ provide(ARC_ORBIT_ROOT_KEY, {
   registerCallout,
   unregisterCallout,
   edgeOffset: computed(() => rootContext?.edgeOffset?.value ?? 30),
-  items: computed(() => DEFAULT_RIGHT_ITEMS),
+  items: computed(() => []),
 });
 
 function isSignificantNode(node: VNode): boolean {
@@ -174,14 +162,6 @@ function flattenVNodes(nodes: VNode[]): VNode[] {
   return result;
 }
 
-function isTitleNode(node: VNode): boolean {
-  return (
-    hasComponentName(node.type, 'ArcComparisonTitle') ||
-    hasComponentName(node.type, 'ArcOrbitTitle') ||
-    node.type === ArcComparisonTitle
-  );
-}
-
 const defaultNodes = computed(() => {
   if (!slots.default) {
     return [];
@@ -190,14 +170,6 @@ const defaultNodes = computed(() => {
   return flattenVNodes(slots.default());
 });
 
-const titleNode = computed(() => {
-  return defaultNodes.value.find(isTitleNode);
-});
-
-const bodyNodes = computed(() => {
-  return defaultNodes.value.filter((node) => !isTitleNode(node));
-});
-
 const hubStyle = computed(() => {
   const hubR = rootContext?.geo.value.right.hubRadius ?? 170;
   const centerY = rootContext?.geo.value.centerY ?? 240;
@@ -223,24 +195,33 @@ const hubStyle = computed(() => {
   };
 });
 
+const rootStyle = computed(() => {
+  if (!props.color || props.color === DEFAULT_RIGHT_COLOR) {
+    return undefined;
+  }
+
+  return {
+    '--alpha-arc-comparison-right-title': props.color,
+    '--alpha-arc-comparison-right-accent': props.color,
+  };
+});
+
 const { className, forwardedAttrs } = useMergedUnoAttrs(
   'alpha-arc-comparison-right absolute inset-0 w-full h-full pointer-events-none',
 );
 </script>
 
 <template>
-  <div v-bind="forwardedAttrs()" :class="className()">
+  <div v-bind="forwardedAttrs()" :class="className()" :style="rootStyle">
     <!-- Right Hub Title Display -->
-    <div
-      class="alpha-arc-comparison__hub-title alpha-arc-comparison__hub-title--right absolute flex items-center justify-center z-10 pointer-events-auto"
+    <h3
+      class="alpha-arc-comparison__hub-title alpha-arc-comparison__hub-title--right absolute flex items-center justify-center z-10 pointer-events-auto font-sans font-bold text-center px-2 leading-tight select-none tracking-tight whitespace-pre-line text-[18px] text-(--alpha-arc-comparison-right-title)"
       :style="hubStyle"
     >
-      <component :is="titleNode" v-if="titleNode" />
-      <ArcComparisonTitle v-else-if="props.title">
-        {{ props.title }}
-      </ArcComparisonTitle>
-      <ArcComparisonTitle v-else />
-    </div>
+      <slot v-if="$slots.title" name="title" />
+      <component :is="props.title" v-else-if="isVNode(props.title)" />
+      <span v-else-if="typeof props.title === 'string'">{{ props.title }}</span>
+    </h3>
     <!-- Contents & Callouts -->
     <div
       v-if="rootContext?.as?.value !== 'layout' || rootContext?.isMoved?.value"
@@ -256,16 +237,11 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
             : '0ms',
       }"
     >
-      <template v-if="bodyNodes.length > 0">
-        <component :is="node" v-for="(node, i) in bodyNodes" :key="i" />
-      </template>
-      <ArcComparisonContents v-else>
-        <ArcComparisonOrbit
-          v-for="idx in resolvedCount"
-          :key="idx"
-          :index="idx - 1"
-        />
-      </ArcComparisonContents>
+      <div
+        class="alpha-arc-comparison-contents absolute inset-0 w-full h-full pointer-events-none"
+      >
+        <component :is="node" v-for="(node, i) in defaultNodes" :key="i" />
+      </div>
     </div>
   </div>
 </template>

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

@@ -0,0 +1,27 @@
+/* Color defaults shared by this component family. */
+@layer alpha-theme-tokens {
+  :root {
+    --alpha-arc-comparison-badge: #ffffff;
+    --alpha-arc-comparison-content: var(--alpha-foreground-primary, #475569);
+    --alpha-arc-comparison-left-accent: #e87a36;
+    --alpha-arc-comparison-right-accent: #208b9e;
+    --alpha-arc-comparison-left-title: var(--alpha-arc-comparison-left-accent);
+    --alpha-arc-comparison-right-title: var(--alpha-arc-comparison-right-accent);
+    --alpha-arc-comparison-heading: var(--alpha-foreground-primary, #1e293b);
+    --alpha-arc-comparison-guide-dot: #94a3b8;
+    --alpha-arc-comparison-guide-stroke: var(--alpha-stroke-primary);
+    --alpha-arc-comparison-hub-fill: #f1f3f6;
+    --alpha-arc-comparison-vs: var(--alpha-foreground-primary);
+    --alpha-arc-comparison-vs-bg: #ffffff;
+    --alpha-arc-comparison-vs-shadow: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));
+  }
+
+  .dark,
+  html.dark {
+    --alpha-arc-comparison-guide-dot: #475569;
+    --alpha-arc-comparison-guide-stroke: #334155;
+    --alpha-arc-comparison-hub-fill: #1e293bcc;
+    --alpha-arc-comparison-vs: #0f172a;
+    --alpha-arc-comparison-vs-bg: #f1f5f9;
+  }
+}