@alphacifer/slidev-addon-theme 0.0.10 → 0.0.12

package/components/process/arc-arrow-process/ArcArrowProcessCallout.vue

@@ -17,33 +17,28 @@ import {
   type IArcArrowProcessItem,
   type IResolvedArcArrowProcessItem,
   resolveSingleArcArrowProcessItem,
-} from '../../../utils/arcArrowProcess';
-import ArcArrowProcessContent from './ArcArrowProcessContent.vue';
-import ArcArrowProcessHeading from './ArcArrowProcessHeading.vue';
-import ArcArrowProcessIcon from './ArcArrowProcessIcon.vue';
+} from '../../../utils/process/arc-arrow-process';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   name: 'ArcArrowProcessCallout',
+  inheritAttrs: false,
 });
 
 export interface IArcArrowProcessCalloutProps {
   readonly id?: string | number;
   readonly index?: number;
-  readonly icon?: string | object | false;
   readonly color?: string;
   readonly textColor?: string;
-  readonly title?: string;
-  readonly description?: string;
+  readonly titleColor?: string;
 }
 
 const props = withDefaults(defineProps<IArcArrowProcessCalloutProps>(), {
   id: undefined,
   index: undefined,
-  icon: undefined,
   color: undefined,
   textColor: undefined,
-  title: undefined,
-  description: undefined,
+  titleColor: undefined,
 });
 
 interface INamedComponent {
@@ -92,11 +87,8 @@ const activeItem = computed<IResolvedArcArrowProcessItem>(() => {
   const override: IArcArrowProcessItem = {
     id: props.id,
     color: props.color,
-    icon: props.icon,
     textColor: props.textColor,
-    titleColor: props.color,
-    title: props.title,
-    description: props.description,
+    titleColor: props.titleColor,
   };
 
   return resolveSingleArcArrowProcessItem(
@@ -256,59 +248,30 @@ const animation = computed(() => {
 });
 
 const hasIcon = computed(() => {
-  if (props.icon === false || props.icon === 'false') {
-    return false;
-  }
-
-  if (slots.icon || iconNode.value) {
-    return true;
-  }
-
-  const iconVal = props.icon !== undefined ? props.icon : activeItem.value.icon;
-
-  if (!iconVal || iconVal === 'false') {
-    return false;
-  }
-
-  if (typeof iconVal === 'string' && iconVal.trim() === '') {
-    return false;
-  }
-
-  return true;
+  return Boolean(iconNode.value);
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-arc-arrow-process-callout absolute flex items-start justify-between gap-3 text-left font-sans z-10 transition-all duration-300 pointer-events-auto select-none',
+);
 </script>
 
 <template>
   <div
     v-if="resolvedIndex < resolvedCount"
-    :class="[
-      'alpha-arc-arrow-process-callout absolute flex items-start justify-between gap-3 text-left z-10 transition-all duration-300 pointer-events-auto select-none',
-      `alpha-arc-arrow-process-callout--${resolvedIndex}`,
-      { 'alpha-arc-arrow-process-callout--animated': animation },
-    ]"
-    :style="[
-      positionStyle,
-      {
-        fontFamily:
-          'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
-      },
-    ]"
+    v-bind="forwardedAttrs()"
+    :class="
+      className([
+        `alpha-arc-arrow-process-callout--${resolvedIndex}`,
+        { 'alpha-arc-arrow-process-callout--animated': animation },
+      ])
+    "
+    :style="positionStyle"
   >
     <!-- Text Column (Heading + Description) -->
     <div class="flex-1 flex flex-col items-start min-w-0">
-      <!-- Title -->
-      <slot name="title">
-        <component :is="headingNode" v-if="headingNode" />
-        <ArcArrowProcessHeading v-else :color="activeItem.titleColor">
-          {{ activeItem.title }}
-        </ArcArrowProcessHeading>
-      </slot>
-      <!-- Description -->
-      <slot name="description">
-        <component :is="contentNode" v-if="contentNode" />
-        <ArcArrowProcessContent v-else :color="props.textColor">
-        </ArcArrowProcessContent>
-      </slot>
+      <component :is="headingNode" v-if="headingNode" />
+      <component :is="contentNode" v-if="contentNode" />
       <!-- Other slotted nodes -->
       <component
         :is="node"
@@ -318,34 +281,30 @@ const hasIcon = computed(() => {
     </div>
     <!-- Outline Icon beside text block -->
     <div v-if="hasIcon" class="shrink-0 mt-1">
-      <slot name="icon">
-        <component :is="iconNode" v-if="iconNode" />
-        <ArcArrowProcessIcon
-          v-else
-          :icon="activeItem.icon"
-          :color="activeItem.titleColor"
-          :size="36"
-        />
-      </slot>
+      <component :is="iconNode" v-if="iconNode" />
     </div>
   </div>
 </template>
 
 <style scoped>
 .alpha-arc-arrow-process-callout--animated.alpha-arc-arrow-process-callout--0 {
-  animation: arc-arrow-callout-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-arrow-start-delay, 0ms) + 120ms) both;
+  animation: arc-arrow-callout-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--arc-arrow-start-delay, 0ms) + 120ms) both;
 }
 
 .alpha-arc-arrow-process-callout--animated.alpha-arc-arrow-process-callout--1 {
-  animation: arc-arrow-callout-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-arrow-start-delay, 0ms) + 200ms) both;
+  animation: arc-arrow-callout-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--arc-arrow-start-delay, 0ms) + 200ms) both;
 }
 
 .alpha-arc-arrow-process-callout--animated.alpha-arc-arrow-process-callout--2 {
-  animation: arc-arrow-callout-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-arrow-start-delay, 0ms) + 280ms) both;
+  animation: arc-arrow-callout-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--arc-arrow-start-delay, 0ms) + 280ms) both;
 }
 
 .alpha-arc-arrow-process-callout--animated.alpha-arc-arrow-process-callout--3 {
-  animation: arc-arrow-callout-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-arrow-start-delay, 0ms) + 360ms) both;
+  animation: arc-arrow-callout-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--arc-arrow-start-delay, 0ms) + 360ms) both;
 }
 
 @keyframes arc-arrow-callout-fade {

package/components/process/arc-arrow-process/ArcArrowProcessContent.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { ARC_ARROW_PROCESS_CALLOUT_KEY } from '../../../utils/arcArrowProcess';
+import { ARC_ARROW_PROCESS_CALLOUT_KEY } from '../../../utils/process/arc-arrow-process';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   name: 'ArcArrowProcessContent',
+  inheritAttrs: false,
 });
 
 export interface IArcArrowProcessContentProps {
@@ -18,21 +20,24 @@ const props = withDefaults(defineProps<IArcArrowProcessContentProps>(), {
 const calloutContext = inject(ARC_ARROW_PROCESS_CALLOUT_KEY, undefined);
 
 const contentColor = computed(() => {
-  return props.color;
+  return props.color ?? calloutContext?.item.value.textColor;
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-arc-arrow-process-content font-sans leading-[1.45] font-normal text-(--alpha-arc-arrow-process-content) select-none',
+);
 </script>
 
 <template>
-  <div
-    class="alpha-arc-arrow-process-content text-[1rem] leading-[1.45] font-normal select-none"
-    :style="{
-      color: contentColor,
-      fontFamily:
-        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
-    }"
+  <p
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :style="
+      contentColor && !contentColor.includes('--alpha-arc-arrow-process-content')
+        ? { '--alpha-arc-arrow-process-content': contentColor }
+        : undefined
+    "
   >
-    <slot>
-      {{ calloutContext?.item.value.description }}
-    </slot>
-  </div>
+    <slot />
+  </p>
 </template>

package/components/process/arc-arrow-process/ArcArrowProcessHeading.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { ARC_ARROW_PROCESS_CALLOUT_KEY } from '../../../utils/arcArrowProcess';
+import { ARC_ARROW_PROCESS_CALLOUT_KEY } from '../../../utils/process/arc-arrow-process';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   name: 'ArcArrowProcessHeading',
+  inheritAttrs: false,
 });
 
 export interface IArcArrowProcessHeadingProps {
@@ -18,26 +20,24 @@ const props = withDefaults(defineProps<IArcArrowProcessHeadingProps>(), {
 const calloutContext = inject(ARC_ARROW_PROCESS_CALLOUT_KEY, undefined);
 
 const headingColor = computed(() => {
-  return (
-    props.color ??
-    calloutContext?.item.value.color ??
-    calloutContext?.item.value.titleColor ??
-    '#1e293b'
-  );
+  return props.color ?? calloutContext?.item.value.titleColor;
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-arc-arrow-process-heading mb-1.5 font-sans font-bold leading-tight text-(--alpha-arc-arrow-process-heading) select-none',
+);
 </script>
 
 <template>
-  <div
-    class="alpha-arc-arrow-process-heading font-bold text-[1.25rem] leading-tight mb-1.5 select-none"
-    :style="{
-      color: headingColor,
-      fontFamily:
-        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
-    }"
+  <h4
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :style="
+      headingColor && !headingColor.includes('--alpha-arc-arrow-process-heading')
+        ? { '--alpha-arc-arrow-process-heading': headingColor }
+        : undefined
+    "
   >
-    <slot>
-      {{ calloutContext?.item.value.title }}
-    </slot>
-  </div>
+    <slot>{{ '' }}</slot>
+  </h4>
 </template>

package/components/process/arc-arrow-process/ArcArrowProcessIcon.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue';
 
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
+
 defineOptions({
   name: 'ArcArrowProcessIcon',
+  inheritAttrs: false,
 });
 
 export interface IArcArrowProcessIconProps {
@@ -14,7 +17,7 @@ export interface IArcArrowProcessIconProps {
 const props = withDefaults(defineProps<IArcArrowProcessIconProps>(), {
   size: 36,
   icon: undefined,
-  color: '#888d94',
+  color: undefined,
 });
 
 const slots = useSlots();
@@ -64,14 +67,19 @@ const isInbox = computed((): boolean => {
 const isBriefcase = computed((): boolean => {
   return props.icon === 'briefcase';
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-arc-arrow-process-icon flex items-center justify-center shrink-0 text-(--alpha-arc-arrow-process-icon) pointer-events-none select-none opacity-85',
+);
 </script>
 
 <template>
   <div
     v-if="hasIcon"
-    class="alpha-arc-arrow-process-icon flex items-center justify-center shrink-0 pointer-events-none select-none opacity-85"
+    v-bind="forwardedAttrs()"
+    :class="className()"
     :style="{
-      color: props.color,
+      ...(props.color ? { '--alpha-arc-arrow-process-icon': props.color } : {}),
       width: `${props.size}px`,
       height: `${props.size}px`,
     }"
@@ -80,11 +88,11 @@ const isBriefcase = computed((): boolean => {
       <component
         :is="props.icon"
         v-if="isComponentIcon"
-        class="w-full h-full"
-        :style="{ color: props.color }"
+        class="w-full h-full text-current"
       />
       <!-- Built-in Folder Outline Icon matching design reference -->
       <svg
+        aria-hidden="true"
         v-else-if="isFolder"
         class="w-full h-full"
         viewBox="0 0 24 24"
@@ -94,10 +102,13 @@ const isBriefcase = computed((): boolean => {
         stroke-linecap="round"
         stroke-linejoin="round"
       >
-        <path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z" />
+        <path
+          d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"
+        />
       </svg>
       <!-- Built-in Inbox/Tray Outline Icon matching design reference -->
       <svg
+        aria-hidden="true"
         v-else-if="isInbox"
         class="w-full h-full"
         viewBox="0 0 24 24"
@@ -109,10 +120,13 @@ const isBriefcase = computed((): boolean => {
       >
         <path d="M12 3v10" />
         <path d="m8 9 4 4 4-4" />
-        <path d="M3 14h5.2a2 2 0 0 1 1.6.8l1.2 1.6c.4.6 1 .9 1.8.9h0c.8 0 1.4-.3 1.8-.9l1.2-1.6a2 2 0 0 1 1.6-.8H21v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Z" />
+        <path
+          d="M3 14h5.2a2 2 0 0 1 1.6.8l1.2 1.6c.4.6 1 .9 1.8.9h0c.8 0 1.4-.3 1.8-.9l1.2-1.6a2 2 0 0 1 1.6-.8H21v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Z"
+        />
       </svg>
       <!-- Built-in Briefcase Outline Icon matching design reference -->
       <svg
+        aria-hidden="true"
         v-else-if="isBriefcase"
         class="w-full h-full"
         viewBox="0 0 24 24"
@@ -130,9 +144,8 @@ const isBriefcase = computed((): boolean => {
       <span
         v-else-if="isStringIcon && resolvedIconClass"
         :class="resolvedIconClass"
-        class="inline-block"
+        class="inline-block text-current"
         :style="{
-          color: props.color,
           width: `${props.size}px`,
           height: `${props.size}px`,
           fontSize: `${props.size}px`,
@@ -141,9 +154,8 @@ const isBriefcase = computed((): boolean => {
       <!-- Text fallback -->
       <span
         v-else-if="isStringIcon"
-        class="inline-block font-semibold"
+        class="inline-block font-semibold text-current"
         :style="{
-          color: props.color,
           fontSize: `${props.size * 0.75}px`,
         }"
       >

package/components/process/arc-arrow-process/style.css

@@ -0,0 +1,20 @@
+/* Color defaults shared by this component family. */
+@layer alpha-theme-tokens {
+  :root {
+    --alpha-arc-arrow-process-content: var(--alpha-foreground-primary, #475569);
+    --alpha-arc-arrow-process-arrow: #6fa3b5;
+    --alpha-arc-arrow-process-arrow-gradient-end: #8cb8c8;
+    --alpha-arc-arrow-process-arrow-shadow: #000000;
+    --alpha-arc-arrow-process-arrow-stroke: #ffffff;
+    --alpha-arc-arrow-process-heading: var(--alpha-foreground-primary, #1e293b);
+    --alpha-arc-arrow-process-icon: #888d94;
+    --alpha-arc-arrow-process-item-1-color: #a0a5aa;
+    --alpha-arc-arrow-process-item-1-gradient-end: #8e959f;
+    --alpha-arc-arrow-process-item-2-color: #2c485d;
+    --alpha-arc-arrow-process-item-2-gradient-end: #334e68;
+    --alpha-arc-arrow-process-item-3-color: #6fa3b5;
+    --alpha-arc-arrow-process-item-3-gradient-end: #7fb0c0;
+    --alpha-arc-arrow-process-item-4-color: #d6284d;
+    --alpha-arc-arrow-process-item-4-gradient-end: #e63964;
+  }
+}