@alphacifer/slidev-addon-theme 0.0.7 → 0.0.8

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

@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import { computed, Fragment, inject, provide, useSlots, type VNode } from 'vue';
+
+import {
+  GEAR_TRIAD_CALLOUT_KEY,
+  GEAR_TRIAD_ROOT_KEY,
+  getDefaultGearTriadItem,
+  type IGearTriadItem,
+  type IResolvedGearTriadItem,
+  resolveSingleGearTriadItem,
+  type TGearTriadIcon,
+} from '../../../../utils/gearTriad';
+import GearTriadDescription from './GearTriadDescription.vue';
+import GearTriadHeading from './GearTriadHeading.vue';
+
+defineOptions({
+  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 {
+  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;
+  }
+
+  return false;
+}
+
+const rootContext = inject(GEAR_TRIAD_ROOT_KEY, undefined);
+
+if (!rootContext) {
+  console.warn('[GearTriadCallout] Must be used inside <GearTriad>');
+}
+
+const overrideProps = computed<IGearTriadItem>(() => {
+  const raw: 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(
+    Object.entries(raw).filter(([_, v]) => v !== undefined),
+  );
+});
+
+const registration =
+  props.index === undefined
+    ? rootContext?.registerCallout(overrideProps)
+    : undefined;
+
+const resolvedIndex = computed(() => {
+  if (props.index !== undefined) {
+    return props.index;
+  }
+
+  return registration?.index ?? 0;
+});
+
+const activeItem = computed<IResolvedGearTriadItem>(() => {
+  const baseItem =
+    rootContext?.items.value[resolvedIndex.value] ??
+    getDefaultGearTriadItem(resolvedIndex.value);
+
+  return resolveSingleGearTriadItem(
+    {
+      ...baseItem,
+      ...overrideProps.value,
+    },
+    resolvedIndex.value,
+  );
+});
+
+provide(GEAR_TRIAD_CALLOUT_KEY, {
+  item: activeItem,
+  index: resolvedIndex.value,
+});
+
+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(() => {
+  if (!slots.default) {
+    return [];
+  }
+
+  return flattenVNodes(slots.default());
+});
+
+const headingNode = computed(() => {
+  return defaultNodes.value.find((node) => {
+    return hasComponentName(node.type, 'GearTriadHeading');
+  });
+});
+
+const descriptionNode = computed(() => {
+  return defaultNodes.value.find((node) => {
+    return hasComponentName(node.type, 'GearTriadDescription');
+  });
+});
+
+function isValidSlottedNode(node: VNode): boolean {
+  if (typeof node.type === 'symbol') {
+    return typeof node.children === 'string' && node.children.trim().length > 0;
+  }
+
+  return true;
+}
+
+const otherSlottedNodes = computed(() => {
+  return defaultNodes.value.filter((node) => {
+    return (
+      isValidSlottedNode(node) &&
+      !hasComponentName(node.type, 'GearTriadHeading') &&
+      !hasComponentName(node.type, 'GearTriadDescription')
+    );
+  });
+});
+
+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;';
+    }
+    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;';
+    }
+    case 2: {
+      // Option 3: Bottom centered, below Pink teeth
+      return 'left: 50%; transform: translateX(-50%); top: calc(50% + 155px); text-align: center; width: 280px;';
+    }
+    default: {
+      return '';
+    }
+  }
+});
+
+const animation = computed(() => {
+  return rootContext?.animation?.value ?? true;
+});
+</script>
+
+<template>
+  <div
+    v-if="resolvedIndex < 3"
+    :class="[
+      'alpha-gear-triad-callout absolute flex flex-col z-10 select-none box-border pointer-events-auto transition-all duration-500 ease-out',
+      `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',
+      },
+    ]"
+  >
+    <!-- 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>
+    <!-- Other Slotted Nodes -->
+    <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--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.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;
+}
+
+.alpha-gear-triad-callout--shifted.alpha-gear-triad-callout--1 {
+  transform: rotate(25deg) scale(0.85) !important;
+}
+
+.alpha-gear-triad-callout--shifted.alpha-gear-triad-callout--2 {
+  transform: translateX(-50%) rotate(-15deg) scale(0.85) !important;
+}
+
+@keyframes gear-triad-callout-fade {
+  0% {
+    opacity: 0;
+    transform: translateY(10px) scale(0.97);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes gear-triad-callout-fade-center {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, 10px) scale(0.97);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, 0) scale(1);
+  }
+}
+</style>

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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import GearTriadIcon from './GearTriadIcon.vue';
+
+defineOptions({
+  name: 'GearTriadCenter',
+});
+
+export interface IGearTriadCenterProps {
+  readonly radius?: number;
+  readonly icon?: string | object | false;
+  readonly iconSize?: number;
+}
+
+const props = withDefaults(defineProps<IGearTriadCenterProps>(), {
+  radius: 54,
+  icon: 'gear',
+  iconSize: 42,
+});
+</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"
+    :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>
+      <GearTriadIcon
+        v-if="props.icon"
+        :icon="props.icon"
+        :size="props.iconSize"
+        color="#0f172a"
+        :stroke-width="1.75"
+      />
+    </slot>
+  </div>
+</template>

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

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { GEAR_TRIAD_CONTENTS_KEY } from '../../../../utils/gearTriad';
+
+defineOptions({
+  name: 'GearTriadContent',
+});
+
+export interface IGearTriadContentProps {
+  readonly step?: string | number;
+  readonly option?: number;
+}
+
+const props = withDefaults(defineProps<IGearTriadContentProps>(), {
+  step: undefined,
+  option: undefined,
+});
+
+const contentsContext = inject(GEAR_TRIAD_CONTENTS_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 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');
+});
+</script>
+
+<template>
+  <div
+    v-if="isVisible"
+    class="alpha-gear-triad-content flex items-start gap-4 select-none"
+  >
+    <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>
+</template>

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

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed, inject, onBeforeUpdate, provide, useSlots } from 'vue';
+
+import {
+  GEAR_TRIAD_CONTENTS_KEY,
+  GEAR_TRIAD_ROOT_KEY,
+  getDefaultGearTriadItem,
+  type IResolvedGearTriadItem,
+} from '../../../../utils/gearTriad';
+
+defineOptions({
+  name: 'GearTriadContents',
+});
+
+export interface IGearTriadContentsProps {
+  readonly title?: string;
+  readonly description?: string;
+  readonly option?: number;
+}
+
+const props = withDefaults(defineProps<IGearTriadContentsProps>(), {
+  title: undefined,
+  description: undefined,
+  option: undefined,
+});
+
+const slots = useSlots();
+const rootContext = inject(GEAR_TRIAD_ROOT_KEY, undefined);
+rootContext?.registerContents();
+
+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_CONTENTS_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;
+});
+</script>
+
+<template>
+  <div
+    class="alpha-gear-triad-contents absolute right-2.5 top-1/2 -translate-y-1/2 w-[490px] flex flex-col select-none box-border pointer-events-auto transition-all duration-500 ease-out"
+    :class="[
+      isVisible
+        ? 'opacity-100 translate-x-0 delay-200'
+        : 'opacity-0 pointer-events-none translate-x-8',
+    ]"
+  >
+    <!-- Header: Option Title -->
+    <slot name="title">
+      <h3 class="alpha-gear-triad-contents__title text-2xl font-bold font-sans tracking-tight text-slate-900 mb-2">
+        {{ props.title ?? activeItem.title }}
+      </h3>
+    </slot>
+    <!-- Header: Option Description -->
+    <slot name="description">
+      <p class="alpha-gear-triad-contents__desc text-sm font-sans text-slate-500 leading-relaxed mb-6">
+        {{ props.description ?? activeItem.description }}
+      </p>
+    </slot>
+    <!-- Body: List of GearTriadContent items -->
+    <div class="alpha-gear-triad-contents__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}`" />
+      <slot v-else />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { GEAR_TRIAD_CALLOUT_KEY } from '../../../../utils/gearTriad';
+
+defineOptions({
+  name: 'GearTriadDescription',
+});
+
+export interface IGearTriadDescriptionProps {
+  readonly color?: string;
+}
+
+const props = withDefaults(defineProps<IGearTriadDescriptionProps>(), {
+  color: undefined,
+});
+
+const calloutContext = inject(GEAR_TRIAD_CALLOUT_KEY, undefined);
+
+const descriptionColor = computed(() => {
+  return props.color ?? calloutContext?.item.value.textColor ?? '#64748b';
+});
+</script>
+
+<template>
+  <div
+    class="alpha-gear-triad-description text-[0.92rem] leading-[1.45] font-normal select-none"
+    :style="{
+      color: descriptionColor,
+      fontFamily:
+        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
+    }"
+  >
+    <slot>
+      {{ calloutContext?.item.value.description }}
+    </slot>
+  </div>
+</template>

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { GEAR_TRIAD_CALLOUT_KEY } from '../../../../utils/gearTriad';
+
+defineOptions({
+  name: 'GearTriadHeading',
+});
+
+export interface IGearTriadHeadingProps {
+  readonly color?: string;
+}
+
+const props = withDefaults(defineProps<IGearTriadHeadingProps>(), {
+  color: undefined,
+});
+
+const calloutContext = inject(GEAR_TRIAD_CALLOUT_KEY, undefined);
+
+const headingColor = computed(() => {
+  return props.color ?? calloutContext?.item.value.titleColor ?? '#0f172a';
+});
+</script>
+
+<template>
+  <div
+    class="alpha-gear-triad-heading font-bold text-[1.15rem] tracking-tight leading-snug mb-1.5 select-none"
+    :style="{
+      color: headingColor,
+      fontFamily:
+        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
+    }"
+  >
+    <slot>
+      {{ calloutContext?.item.value.title }}
+    </slot>
+  </div>
+</template>