@alphacifer/slidev-addon-theme 0.0.10 → 0.0.11

package/components/facets/triad/gear-triad/GearTriadCallout.vue

@@ -8,39 +8,32 @@ import {
   type IGearTriadItem,
   type IResolvedGearTriadItem,
   resolveSingleGearTriadItem,
-  type TGearTriadIcon,
-} from '../../../../utils/gearTriad';
-import GearTriadDescription from './GearTriadDescription.vue';
-import GearTriadHeading from './GearTriadHeading.vue';
+} from '../../../../utils/facets/triad/gear-triad';
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
 
 defineOptions({
+  inheritAttrs: false,
   name: 'GearTriadCallout',
 });
 
 export interface IGearTriadCalloutProps {
   readonly id?: string | number;
   readonly index?: number;
-  readonly icon?: TGearTriadIcon;
   readonly color?: string;
   readonly depthColor?: string;
   readonly cardBg?: string;
   readonly textColor?: string;
   readonly titleColor?: string;
-  readonly title?: string;
-  readonly description?: string;
 }
 
 const props = withDefaults(defineProps<IGearTriadCalloutProps>(), {
   id: undefined,
   index: undefined,
-  icon: undefined,
   color: undefined,
   depthColor: undefined,
   cardBg: undefined,
   textColor: undefined,
   titleColor: undefined,
-  title: undefined,
-  description: undefined,
 });
 
 interface INamedComponent {
@@ -69,12 +62,9 @@ const overrideProps = computed<IGearTriadItem>(() => {
     id: props.id,
     color: props.color,
     depthColor: props.depthColor,
-    icon: props.icon,
     cardBg: props.cardBg,
     textColor: props.textColor,
     titleColor: props.titleColor,
-    title: props.title,
-    description: props.description,
   };
 
   return Object.fromEntries(
@@ -146,7 +136,7 @@ const headingNode = computed(() => {
 
 const descriptionNode = computed(() => {
   return defaultNodes.value.find((node) => {
-    return hasComponentName(node.type, 'GearTriadDescription');
+    return hasComponentName(node.type, 'GearTriadContent');
   });
 });
 
@@ -163,7 +153,7 @@ const otherSlottedNodes = computed(() => {
     return (
       isValidSlottedNode(node) &&
       !hasComponentName(node.type, 'GearTriadHeading') &&
-      !hasComponentName(node.type, 'GearTriadDescription')
+      !hasComponentName(node.type, 'GearTriadContent')
     );
   });
 });
@@ -172,15 +162,16 @@ const positionStyle = computed(() => {
   switch (resolvedIndex.value) {
     case 0: {
       // Option 1: Left side, vertically level with Cyan petal
-      return 'right: calc(50% + 185px); top: calc(50% - 115px); text-align: right; width: 250px;';
+      return 'right: calc(50% + 185px); top: calc(50% - 115px);';
     }
+
     case 1: {
       // Option 2: Right side, vertically level with Orange petal
-      return 'left: calc(50% + 185px); top: calc(50% - 115px); text-align: left; width: 250px;';
+      return 'left: calc(50% + 185px); top: calc(50% - 115px);';
     }
     case 2: {
       // Option 3: Bottom centered, below Pink teeth
-      return 'left: 50%; transform: translateX(-50%); top: calc(50% + 155px); text-align: center; width: 280px;';
+      return 'left: 50%; top: calc(50% + 155px);';
     }
     default: {
       return '';
@@ -191,74 +182,88 @@ const positionStyle = computed(() => {
 const animation = computed(() => {
   return rootContext?.animation?.value ?? true;
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(() => {
+  const layoutClasses =
+    resolvedIndex.value === 0
+      ? 'text-right w-[250px]'
+      : resolvedIndex.value === 1
+        ? 'text-left w-[250px]'
+        : 'text-center w-[280px]';
+  const bgClass = activeItem.value.cardBg
+    ? 'bg-(--alpha-gear-triad-valley)'
+    : 'bg-transparent';
+  const pointerClass = rootContext?.isShifted.value
+    ? 'pointer-events-none'
+    : 'pointer-events-auto';
+
+  return `alpha-gear-triad-callout absolute flex flex-col z-10 font-sans select-none box-border transition-all duration-500 ease-out ${layoutClasses} ${bgClass} ${pointerClass}`;
+});
 </script>
 
 <template>
   <div
     v-if="resolvedIndex < 3"
+    v-bind="forwardedAttrs()"
     :class="[
-      'alpha-gear-triad-callout absolute flex flex-col z-10 select-none box-border pointer-events-auto transition-all duration-500 ease-out',
+      className(),
       `alpha-gear-triad-callout--${resolvedIndex}`,
       { 'alpha-gear-triad-callout--animated': animation },
       { 'alpha-gear-triad-callout--shifted': rootContext?.isShifted.value },
     ]"
     :style="[
       positionStyle,
-      {
-        backgroundColor: activeItem.cardBg ?? 'transparent',
-        fontFamily:
-          'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
-      },
+      activeItem.cardBg
+        ? { '--alpha-gear-triad-valley': activeItem.cardBg }
+        : undefined,
     ]"
   >
     <!-- Title Slot / Heading -->
-    <slot name="title">
-      <component :is="headingNode" v-if="headingNode" />
-      <GearTriadHeading v-else :color="activeItem.titleColor">
-        {{ activeItem.title }}
-      </GearTriadHeading>
-    </slot>
-    <!-- Description Slot -->
-    <slot name="description">
-      <component :is="descriptionNode" v-if="descriptionNode" />
-      <GearTriadDescription v-else :color="activeItem.textColor">
-        {{ activeItem.description }}
-      </GearTriadDescription>
-    </slot>
+    <component :is="headingNode" v-if="headingNode" />
+    <component :is="descriptionNode" v-if="descriptionNode" />
     <!-- Other Slotted Nodes -->
-    <component
-      :is="node"
-      v-for="(node, idx) in otherSlottedNodes"
-      :key="idx"
-    />
+    <component :is="node" v-for="(node, idx) in otherSlottedNodes" :key="idx" />
   </div>
 </template>
 
 <style scoped>
-.alpha-gear-triad-callout--animated.alpha-gear-triad-callout--0 {
-  animation: gear-triad-callout-fade 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--gear-start-delay, 0ms) + 150ms) both;
+.alpha-gear-triad-callout--2 {
+  transform: translateX(-50%);
+}
+
+.alpha-gear-triad-callout--animated:not(
+  .alpha-gear-triad-callout--shifted
+).alpha-gear-triad-callout--0 {
+  animation: gear-triad-callout-fade 450ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--gear-start-delay, 0ms) + 150ms) both;
 }
 
-.alpha-gear-triad-callout--animated.alpha-gear-triad-callout--1 {
-  animation: gear-triad-callout-fade 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--gear-start-delay, 0ms) + 300ms) both;
+.alpha-gear-triad-callout--animated:not(
+  .alpha-gear-triad-callout--shifted
+).alpha-gear-triad-callout--1 {
+  animation: gear-triad-callout-fade 450ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--gear-start-delay, 0ms) + 300ms) both;
 }
 
-.alpha-gear-triad-callout--animated.alpha-gear-triad-callout--2 {
-  animation: gear-triad-callout-fade-center 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--gear-start-delay, 0ms) + 450ms) both;
+.alpha-gear-triad-callout--animated:not(
+  .alpha-gear-triad-callout--shifted
+).alpha-gear-triad-callout--2 {
+  animation: gear-triad-callout-fade-center 450ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--gear-start-delay, 0ms) + 450ms) both;
 }
 
 .alpha-gear-triad-callout--shifted {
-  opacity: 0 !important;
-  pointer-events: none !important;
-  transform: rotate(-25deg) scale(0.85) !important;
+  opacity: 0;
+  pointer-events: none;
+  transform: rotate(-25deg) scale(0.85);
 }
 
 .alpha-gear-triad-callout--shifted.alpha-gear-triad-callout--1 {
-  transform: rotate(25deg) scale(0.85) !important;
+  transform: rotate(25deg) scale(0.85);
 }
 
 .alpha-gear-triad-callout--shifted.alpha-gear-triad-callout--2 {
-  transform: translateX(-50%) rotate(-15deg) scale(0.85) !important;
+  transform: translateX(-50%) rotate(-15deg) scale(0.85);
 }
 
 @keyframes gear-triad-callout-fade {

package/components/facets/triad/gear-triad/GearTriadCenter.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
 import GearTriadIcon from './GearTriadIcon.vue';
 
 defineOptions({
+  inheritAttrs: false,
   name: 'GearTriadCenter',
 });
 
@@ -16,16 +18,19 @@ const props = withDefaults(defineProps<IGearTriadCenterProps>(), {
   icon: 'gear',
   iconSize: 42,
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-gear-triad-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-20 rounded-full flex items-center justify-center bg-linear-145 from-(--alpha-gear-triad-center-bg-start) to-(--alpha-gear-triad-center-bg-end) shadow-(--alpha-gear-triad-center-shadow) pointer-events-auto select-none',
+);
 </script>
 
 <template>
   <div
-    class="alpha-gear-triad-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-20 rounded-full flex items-center justify-center pointer-events-auto select-none"
+    v-bind="forwardedAttrs()"
+    :class="className()"
     :style="{
       width: `${props.radius * 2}px`,
       height: `${props.radius * 2}px`,
-      background: 'linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%)',
-      boxShadow: '0 6px 20px -2px rgba(0, 0, 0, 0.22), 0 2px 6px -1px rgba(0, 0, 0, 0.12)',
     }"
   >
     <slot>
@@ -33,7 +38,7 @@ const props = withDefaults(defineProps<IGearTriadCenterProps>(), {
         v-if="props.icon"
         :icon="props.icon"
         :size="props.iconSize"
-        color="#0f172a"
+        color="var(--alpha-gear-triad-center-icon)"
         :stroke-width="1.75"
       />
     </slot>

package/components/facets/triad/gear-triad/GearTriadContent.vue

@@ -1,58 +1,43 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { GEAR_TRIAD_CONTENTS_KEY } from '../../../../utils/gearTriad';
+import { GEAR_TRIAD_CALLOUT_KEY } from '../../../../utils/facets/triad/gear-triad';
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
 
 defineOptions({
+  inheritAttrs: false,
   name: 'GearTriadContent',
 });
 
 export interface IGearTriadContentProps {
-  readonly step?: string | number;
-  readonly option?: number;
+  readonly color?: string;
 }
 
 const props = withDefaults(defineProps<IGearTriadContentProps>(), {
-  step: undefined,
-  option: undefined,
+  color: undefined,
 });
 
-const contentsContext = inject(GEAR_TRIAD_CONTENTS_KEY, undefined);
+const calloutContext = inject(GEAR_TRIAD_CALLOUT_KEY, undefined);
 
-const registration = contentsContext
-  ? contentsContext.registerContent(props.option)
-  : undefined;
-
-const isVisible = computed(() => {
-  if (props.option !== undefined && contentsContext) {
-    return props.option === contentsContext.activeOptionIndex.value + 1;
-  }
-  return true;
+const contentColor = computed(() => {
+  return props.color ?? calloutContext?.item.value.textColor ?? undefined;
 });
 
-const resolvedStep = computed(() => {
-  if (props.step !== undefined) {
-    if (typeof props.step === 'number') {
-      return String(props.step).padStart(2, '0');
-    }
-    return String(props.step);
-  }
-
-  const idx = (registration?.index ?? 0) + 1;
-  return String(idx).padStart(2, '0');
-});
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-gear-triad-content font-sans leading-[1.45] font-normal text-(--alpha-gear-triad-content) select-none',
+);
 </script>
 
 <template>
-  <div
-    v-if="isVisible"
-    class="alpha-gear-triad-content flex items-start gap-4 select-none"
+  <p
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :style="
+      contentColor && !contentColor.includes('--alpha-gear-triad-content')
+        ? { '--alpha-gear-triad-content': contentColor }
+        : undefined
+    "
   >
-    <span class="alpha-gear-triad-content__step font-bold text-2xl text-slate-700 w-10 flex-shrink-0 leading-tight font-sans tracking-tight">
-      {{ resolvedStep }}
-    </span>
-    <div class="alpha-gear-triad-content__body flex-1 text-[0.92rem] text-slate-600 font-normal font-sans leading-[1.45]">
-      <slot />
-    </div>
-  </div>
+    <slot />
+  </p>
 </template>

package/components/facets/triad/gear-triad/GearTriadDetail.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import {
+  GEAR_TRIAD_DETAILS_KEY,
+  GEAR_TRIAD_ROOT_KEY,
+} from '../../../../utils/facets/triad/gear-triad';
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'GearTriadDetail',
+});
+
+export interface IGearTriadDetailProps {
+  readonly step?: string | number;
+  readonly option?: number;
+  readonly color?: string;
+}
+
+const props = withDefaults(defineProps<IGearTriadDetailProps>(), {
+  step: undefined,
+  option: undefined,
+  color: undefined,
+});
+
+const rootContext = inject(GEAR_TRIAD_ROOT_KEY, undefined);
+const detailsContext = inject(GEAR_TRIAD_DETAILS_KEY, undefined);
+
+const registration = detailsContext
+  ? detailsContext.registerContent(props.option)
+  : undefined;
+
+const isVisible = computed(() => {
+  if (props.option !== undefined && detailsContext) {
+    return props.option === detailsContext.activeOptionIndex.value + 1;
+  }
+
+  return true;
+});
+
+const resolvedStep = computed(() => {
+  if (props.step !== undefined) {
+    if (typeof props.step === 'number') {
+      return String(props.step).padStart(2, '0');
+    }
+
+    return String(props.step);
+  }
+
+  const idx = (registration?.index ?? 0) + 1;
+  return String(idx).padStart(2, '0');
+});
+
+const stepColor = computed(() => {
+  if (props.color) {
+    return props.color;
+  }
+
+  if (props.option !== undefined && rootContext?.items.value) {
+    const item = rootContext.items.value[props.option - 1];
+    if (item?.color) {
+      return item.color;
+    }
+  }
+
+  return (
+    detailsContext?.activeItem.value.color ??
+    'var(--alpha-gear-triad-detail-number)'
+  );
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-gear-triad-detail flex items-center gap-4 select-none',
+);
+</script>
+
+<template>
+  <div v-if="isVisible" v-bind="forwardedAttrs()" :class="className()">
+    <span
+      class="alpha-gear-triad-detail__step font-bold text-2xl w-10 shrink-0 leading-tight font-sans tracking-tight"
+      :style="{ color: stepColor }"
+    >
+      {{ resolvedStep }}
+    </span>
+    <p
+      class="alpha-gear-triad-detail__body flex-1 text-(--alpha-gear-triad-detail) font-normal font-sans leading-[1.45]"
+    >
+      <slot />
+    </p>
+  </div>
+</template>

package/components/facets/triad/gear-triad/GearTriadDetails.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import {
+  computed,
+  Fragment,
+  inject,
+  onBeforeUpdate,
+  provide,
+  useSlots,
+  type VNode,
+} from 'vue';
+
+import {
+  GEAR_TRIAD_DETAILS_KEY,
+  GEAR_TRIAD_ROOT_KEY,
+  getDefaultGearTriadItem,
+  type IResolvedGearTriadItem,
+} from '../../../../utils/facets/triad/gear-triad';
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'GearTriadDetails',
+});
+
+export interface IGearTriadDetailsProps {
+  readonly option?: number;
+}
+
+const props = withDefaults(defineProps<IGearTriadDetailsProps>(), {
+  option: undefined,
+});
+
+const slots = useSlots();
+
+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 {
+      result.push(node);
+    }
+  }
+
+  return result;
+}
+
+const defaultNodes = computed(() =>
+  slots.default ? flattenVNodes(slots.default()) : [],
+);
+const headingNode = computed(() =>
+  defaultNodes.value.find((node) => {
+    const type = node.type as { name?: string; __name?: string };
+
+    return (
+      type?.name === 'GearTriadDetailsHeading' ||
+      type?.__name === 'GearTriadDetailsHeading'
+    );
+  }),
+);
+const descriptionNode = computed(() =>
+  defaultNodes.value.find((node) => {
+    const type = node.type as { name?: string; __name?: string };
+
+    return (
+      type?.name === 'GearTriadDetailsContent' ||
+      type?.__name === 'GearTriadDetailsContent'
+    );
+  }),
+);
+const detailNodes = computed(() =>
+  defaultNodes.value.filter((node) => {
+    const type = node.type as { name?: string; __name?: string };
+
+    return !['GearTriadDetailsHeading', 'GearTriadDetailsContent'].includes(
+      type?.name ?? type?.__name ?? '',
+    );
+  }),
+);
+const rootContext = inject(GEAR_TRIAD_ROOT_KEY, undefined);
+rootContext?.registerDetails();
+
+let contentCounter = 0;
+const optionCounters: Record<number, number> = {};
+onBeforeUpdate(() => {
+  contentCounter = 0;
+  for (const k in optionCounters) {
+    optionCounters[k] = 0;
+  }
+});
+
+const registerContent = (option?: number) => {
+  if (option !== undefined) {
+    optionCounters[option] = (optionCounters[option] ?? 0) + 1;
+    return { index: optionCounters[option] - 1 };
+  }
+
+  const idx = contentCounter++;
+  return { index: idx };
+};
+
+const resolvedOptionIndex = computed(() => {
+  if (props.option !== undefined) {
+    return Math.max(0, props.option - 1);
+  }
+
+  return rootContext?.activeOptionIndex.value ?? 0;
+});
+
+const activeItem = computed<IResolvedGearTriadItem>(() => {
+  if (rootContext?.items.value) {
+    const item = rootContext.items.value[resolvedOptionIndex.value];
+    if (item) {
+      return item;
+    }
+  }
+
+  return getDefaultGearTriadItem(resolvedOptionIndex.value);
+});
+
+provide(GEAR_TRIAD_DETAILS_KEY, {
+  activeItem,
+  activeOptionIndex: resolvedOptionIndex,
+  registerContent,
+});
+
+const isVisible = computed(() => {
+  if (!rootContext?.isShifted.value) {
+    return false;
+  }
+
+  if (props.option !== undefined) {
+    return props.option - 1 === rootContext.activeOptionIndex.value;
+  }
+
+  return true;
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(() => {
+  const visibilityClasses = isVisible.value
+    ? 'opacity-100 pointer-events-auto translate-x-0 delay-200'
+    : 'opacity-0 pointer-events-none translate-x-8';
+
+  return `alpha-gear-triad-details absolute right-2.5 top-1/2 -translate-y-1/2 w-122.5 flex flex-col select-none box-border transition-all duration-500 ease-out ${visibilityClasses}`;
+});
+</script>
+
+<template>
+  <div v-bind="forwardedAttrs()" :class="className()">
+    <component :is="headingNode" v-if="headingNode" />
+    <component :is="descriptionNode" v-if="descriptionNode" />
+    <div class="alpha-gear-triad-details__items flex flex-col gap-3.5">
+      <slot
+        v-if="$slots[String(resolvedOptionIndex + 1)]"
+        :name="String(resolvedOptionIndex + 1)"
+      />
+      <slot
+        v-else-if="$slots[`option-${resolvedOptionIndex + 1}`]"
+        :name="`option-${resolvedOptionIndex + 1}`"
+      />
+      <component
+        :is="node"
+        v-for="(node, index) in detailNodes"
+        v-else
+        :key="index"
+      />
+    </div>
+  </div>
+</template>

package/components/facets/triad/gear-triad/GearTriadDetailsContent.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'GearTriadDetailsContent',
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-gear-triad-details-content mb-6 text-sm font-sans leading-relaxed text-(--alpha-gear-triad-details-content)',
+);
+</script>
+
+<template>
+  <p v-bind="forwardedAttrs()" :class="className()">
+    <slot />
+  </p>
+</template>

package/components/facets/triad/gear-triad/GearTriadDetailsHeading.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import {
+  GEAR_TRIAD_DETAILS_KEY,
+  GEAR_TRIAD_ROOT_KEY,
+} from '../../../../utils/facets/triad/gear-triad';
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'GearTriadDetailsHeading',
+});
+
+export interface IGearTriadDetailsHeadingProps {
+  readonly color?: string;
+  readonly option?: number;
+}
+
+const props = withDefaults(defineProps<IGearTriadDetailsHeadingProps>(), {
+  color: undefined,
+  option: undefined,
+});
+
+const rootContext = inject(GEAR_TRIAD_ROOT_KEY, undefined);
+const detailsContext = inject(GEAR_TRIAD_DETAILS_KEY, undefined);
+
+const headingColor = computed(() => {
+  if (props.color) {
+    return props.color;
+  }
+
+  if (props.option !== undefined && rootContext?.items.value) {
+    const item = rootContext.items.value[props.option - 1];
+    if (item?.color) {
+      return item.color;
+    }
+  }
+
+  return (
+    detailsContext?.activeItem.value.color ??
+    'var(--alpha-gear-triad-details-heading)'
+  );
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-gear-triad-details-heading mb-2 font-bold font-sans tracking-tight',
+);
+</script>
+
+<template>
+  <h3
+    v-if="$slots.default"
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :style="{ color: headingColor }"
+  >
+    <slot>{{ '' }}</slot>
+  </h3>
+</template>