@alphacifer/slidev-addon-theme 0.0.4 → 0.0.6

package/components/quad-hub/QuadHubCallout.vue

@@ -0,0 +1,267 @@
+<script setup lang="ts">
+import { computed, Fragment, inject, provide, useSlots, type VNode } from 'vue';
+
+import {
+  DEFAULT_QUAD_HUB_ITEMS,
+  type IResolvedQuadHubItem,
+  QUAD_HUB_CALLOUT_KEY,
+  QUAD_HUB_ROOT_KEY,
+  resolveSingleItem,
+  type TQuadHubIcon,
+} from '../../utils/quadHub';
+import QuadHubContent from './QuadHubContent.vue';
+import QuadHubHeading from './QuadHubHeading.vue';
+
+defineOptions({
+  name: 'QuadHubCallout',
+});
+
+export interface IQuadHubCalloutProps {
+  readonly id?: string | number;
+  readonly icon?: TQuadHubIcon;
+  readonly color?: string;
+  readonly cardBg?: string;
+  readonly arcColor?: string;
+  readonly textColor?: string;
+  readonly titleColor?: string;
+  readonly arcBorderColor?: string;
+}
+
+const props = withDefaults(defineProps<IQuadHubCalloutProps>(), {
+  id: undefined,
+  icon: undefined,
+  color: undefined,
+  cardBg: undefined,
+  arcColor: undefined,
+  textColor: undefined,
+  titleColor: undefined,
+  arcBorderColor: 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(QUAD_HUB_ROOT_KEY, undefined);
+
+if (!rootContext) {
+  console.warn('[QuadHubCallout] Must be used inside <QuadHub>');
+}
+
+const registration = rootContext?.registerCallout(props);
+const index = registration?.index ?? 0;
+
+const [firstDefaultItem] = DEFAULT_QUAD_HUB_ITEMS;
+
+const fallbackItem = computed<IResolvedQuadHubItem>(() => {
+  const current = DEFAULT_QUAD_HUB_ITEMS[index];
+
+  return resolveSingleItem(current ?? firstDefaultItem, props);
+});
+
+const item = computed<IResolvedQuadHubItem>(() => {
+  return registration?.item.value ?? fallbackItem.value;
+});
+
+provide(QUAD_HUB_CALLOUT_KEY, {
+  item,
+  index,
+});
+
+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;
+}
+
+function isHeadingNode(node: VNode): boolean {
+  return (
+    hasComponentName(node.type, 'QuadHubHeading') ||
+    node.type === QuadHubHeading
+  );
+}
+
+function isContentNode(node: VNode): boolean {
+  return (
+    hasComponentName(node.type, 'QuadHubContent') ||
+    node.type === QuadHubContent
+  );
+}
+
+const defaultNodes = computed(() => {
+  if (!slots.default) {
+    return [];
+  }
+
+  return flattenVNodes(slots.default());
+});
+
+const headingNode = computed(() => {
+  return defaultNodes.value.find(isHeadingNode);
+});
+const contentNode = computed(() => {
+  return defaultNodes.value.find(isContentNode);
+});
+const otherNodes = computed(() => {
+  return defaultNodes.value.filter((node) => {
+    return !isHeadingNode(node) && !isContentNode(node);
+  });
+});
+
+const isLeftCard = computed(() => {
+  return index === 0 || index === 3;
+});
+
+// Placement corresponding to:
+// 0: Top-Left (top row, left side) - 1
+// 1: Top-Right (top row, right side) - 2
+// 2: Bottom-Right (bottom row, right side) - 3
+// 3: Bottom-Left (bottom row, left side) - 4
+const positionStyle = computed(() => {
+  switch (index) {
+    case 0: {
+      return 'left: 0; right: calc(50% + 95px); top: 10px; bottom: calc(50% + 14px);';
+    }
+    case 1: {
+      return 'left: calc(50% + 95px); right: 0; top: 10px; bottom: calc(50% + 14px);';
+    }
+    case 2: {
+      return 'left: calc(50% + 95px); right: 0; top: calc(50% + 14px); bottom: 10px;';
+    }
+    case 3: {
+      return 'left: 0; right: calc(50% + 95px); top: calc(50% + 14px); bottom: 10px;';
+    }
+    default: {
+      return '';
+    }
+  }
+});
+
+const animation = computed(() => {
+  return rootContext?.animation?.value ?? true;
+});
+</script>
+
+<template>
+  <div
+    v-if="index < 4"
+    :class="[
+      'alpha-quad-hub-callout absolute rounded-2xl flex flex-col justify-center z-0 transition-all duration-300 pointer-events-auto shadow-sm select-none box-border',
+      isLeftCard ? 'pl-5 pr-16 py-4 text-right' : 'pl-16 pr-5 py-4 text-left',
+      `alpha-quad-hub-callout--${index}`,
+      { 'alpha-quad-hub-callout--animated': animation },
+    ]"
+    :style="[
+      positionStyle,
+      {
+        backgroundColor: item.cardBg,
+        fontFamily:
+          'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
+      },
+    ]"
+  >
+    <!-- Left-side callouts (TL & BL): Heading on top (right-aligned), then [description | accentBar] -->
+    <template v-if="isLeftCard">
+      <div class="w-full flex justify-end mb-1">
+        <component :is="headingNode" v-if="headingNode" />
+      </div>
+      <div class="w-full flex items-stretch justify-end gap-2.5">
+        <div class="flex-1 flex flex-col items-end min-w-0">
+          <component :is="contentNode" v-if="contentNode" />
+          <component :is="node" v-for="(node, i) in otherNodes" :key="i" />
+        </div>
+        <div
+          class="w-[3px] self-stretch min-h-[30px] rounded-full flex-shrink-0 my-0.5"
+          :style="{ backgroundColor: item.titleColor }"
+        />
+      </div>
+    </template>
+    <!-- Right-side callouts (TR & BR): Heading on top (left-aligned), then [accentBar | description] -->
+    <template v-else>
+      <div class="w-full flex justify-start mb-1">
+        <component :is="headingNode" v-if="headingNode" />
+      </div>
+      <div class="w-full flex items-stretch justify-start gap-2.5">
+        <div
+          class="w-[3px] self-stretch min-h-[30px] rounded-full flex-shrink-0 my-0.5"
+          :style="{ backgroundColor: item.titleColor }"
+        />
+        <div class="flex-1 flex flex-col items-start min-w-0">
+          <component :is="contentNode" v-if="contentNode" />
+          <component :is="node" v-for="(node, i) in otherNodes" :key="i" />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.alpha-quad-hub-callout :deep(p),
+.alpha-quad-hub-callout :deep(h1),
+.alpha-quad-hub-callout :deep(h2),
+.alpha-quad-hub-callout :deep(h3),
+.alpha-quad-hub-callout :deep(h4),
+.alpha-quad-hub-callout :deep(h5),
+.alpha-quad-hub-callout :deep(h6) {
+  margin: 0;
+  padding: 0;
+}
+
+.alpha-quad-hub-callout--animated.alpha-quad-hub-callout--0 {
+  animation: quad-callout-left 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--quad-start-delay, 0ms) + 150ms) both;
+}
+
+.alpha-quad-hub-callout--animated.alpha-quad-hub-callout--1 {
+  animation: quad-callout-right 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--quad-start-delay, 0ms) + 300ms) both;
+}
+
+.alpha-quad-hub-callout--animated.alpha-quad-hub-callout--2 {
+  animation: quad-callout-right 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--quad-start-delay, 0ms) + 450ms) both;
+}
+
+.alpha-quad-hub-callout--animated.alpha-quad-hub-callout--3 {
+  animation: quad-callout-left 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--quad-start-delay, 0ms) + 600ms) both;
+}
+
+@keyframes quad-callout-right {
+  0% {
+    opacity: 0;
+    transform: translateX(-28px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes quad-callout-left {
+  0% {
+    opacity: 0;
+    transform: translateX(28px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+</style>

package/components/quad-hub/QuadHubCenter.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'QuadHubCenter',
+});
+
+export interface IQuadHubCenterProps {
+  readonly title?: string;
+  readonly radius?: number;
+  readonly subtitle?: string;
+}
+
+const props = withDefaults(defineProps<IQuadHubCenterProps>(), {
+  title: undefined,
+  subtitle: undefined,
+  radius: 58,
+});
+</script>
+
+<template>
+  <div
+    class="alpha-quad-hub-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-20 rounded-full bg-white flex flex-col items-center justify-center text-center shadow-lg pointer-events-auto select-none"
+    :style="{
+      width: `${props.radius * 2}px`,
+      height: `${props.radius * 2}px`,
+      boxShadow: '0 4px 18px rgba(0, 0, 0, 0.12)',
+      fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
+    }"
+  >
+    <slot>
+      <slot name="title">
+        <span
+          v-if="props.title"
+          :class="[
+            'text-[23px] font-extrabold text-slate-800 tracking-tight leading-none',
+            { 'mb-2': props.subtitle },
+          ]"
+          style="font-family: inherit;"
+        >
+          {{ props.title }}
+        </span>
+      </slot>
+      <slot name="subtitle">
+        <span
+          v-if="props.subtitle"
+          class="text-[13px] font-medium text-slate-400 tracking-normal leading-none"
+          style="font-family: inherit;"
+        >
+          {{ props.subtitle }}
+        </span>
+      </slot>
+    </slot>
+  </div>
+</template>

package/components/quad-hub/QuadHubContent.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { QUAD_HUB_CALLOUT_KEY } from '../../utils/quadHub';
+
+defineOptions({
+  name: 'QuadHubContent',
+});
+
+export interface IQuadHubContentProps {
+  readonly color?: string;
+}
+
+const props = withDefaults(defineProps<IQuadHubContentProps>(), {
+  color: undefined,
+});
+
+const calloutContext = inject(QUAD_HUB_CALLOUT_KEY, undefined);
+
+const contentColor = computed(() => {
+  return props.color ?? calloutContext?.item.value.textColor ?? '#555555';
+});
+</script>
+
+<template>
+  <div
+    class="alpha-quad-hub-content text-[1rem] leading-[1.38] font-normal tracking-tight m-0 p-0 select-none"
+    :style="{
+      color: contentColor,
+      margin: 0,
+      padding: 0,
+      fontSize: '1rem',
+      fontFamily:
+        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Helvetica, Arial, sans-serif',
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/components/quad-hub/QuadHubHeading.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { QUAD_HUB_CALLOUT_KEY } from '../../utils/quadHub';
+
+defineOptions({
+  name: 'QuadHubHeading',
+});
+
+export interface IQuadHubHeadingProps {
+  readonly color?: string;
+}
+
+const props = withDefaults(defineProps<IQuadHubHeadingProps>(), {
+  color: undefined,
+});
+
+const calloutContext = inject(QUAD_HUB_CALLOUT_KEY, undefined);
+
+const headingColor = computed(() => {
+  return (
+    props.color ??
+    calloutContext?.item.value.titleColor ??
+    calloutContext?.item.value.color ??
+    '#f29e4b'
+  );
+});
+</script>
+
+<template>
+  <div
+    class="alpha-quad-hub-heading font-bold text-[1.25rem] leading-tight tracking-tight m-0 p-0 select-none"
+    :style="{
+      color: headingColor,
+      margin: 0,
+      padding: 0,
+      fontSize: '1.25rem',
+      fontFamily:
+        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Helvetica, Arial, sans-serif',
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/components/quad-hub/QuadHubIcon.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import type { TQuadHubIcon } from '../../utils/quadHub';
+
+defineOptions({
+  name: 'QuadHubIcon',
+});
+
+export interface IQuadHubIconProps {
+  readonly size?: number;
+  readonly color?: string;
+  readonly icon?: TQuadHubIcon;
+}
+
+const props = withDefaults(defineProps<IQuadHubIconProps>(), {
+  size: 34,
+  icon: undefined,
+  color: '#ffffff',
+});
+
+const isStringIcon = computed((): boolean => {
+  return typeof props.icon === 'string';
+});
+
+const isComponentIcon = computed((): boolean => {
+  return typeof props.icon === 'object' && props.icon !== null;
+});
+</script>
+
+<template>
+  <div
+    v-if="props.icon !== false"
+    class="alpha-quad-hub-icon flex items-center justify-center pointer-events-none select-none"
+    :style="{
+      color: props.color,
+      width: `${props.size}px`,
+      height: `${props.size}px`,
+      opacity: 0.82,
+    }"
+  >
+    <slot>
+      <component
+        :is="props.icon"
+        v-if="isComponentIcon"
+        class="w-full h-full"
+        :style="{ color: props.color }"
+      />
+      <!-- UnoCSS / Iconify class name (e.g. i-lucide-user) -->
+      <span
+        v-else-if="isStringIcon && (props.icon as string).includes('-')"
+        :class="props.icon"
+        class="inline-block"
+        :style="{
+          color: props.color,
+          width: `${props.size}px`,
+          height: `${props.size}px`,
+          fontSize: `${props.size}px`,
+        }"
+      />
+      <!-- 01 User Silhouette (matching design) -->
+      <svg
+        v-else-if="props.icon === 'user'"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        class="w-full h-full"
+      >
+        <circle cx="12" cy="7" r="4.2" />
+        <path d="M4 19.8c0-4.4 3.6-7.8 8-7.8s8 3.4 8 7.8v0.2H4v-0.2z" />
+      </svg>
+      <!-- 02 Academic / Mortarboard (matching design) -->
+      <svg
+        v-else-if="props.icon === 'academic' || props.icon === 'grad'"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        class="w-full h-full"
+      >
+        <path d="M12 4L1.5 9.5 12 15l10-5.5L12 4z" />
+        <path d="M6 13v4c0 2.2 2.7 4 6 4s6-1.8 6-4v-4l-6 3.2-6-3.2z" />
+        <path d="M21.5 10.2v5.3h1v-5.8l-1 0.5z" />
+      </svg>
+      <!-- 03 Briefcase (matching design) -->
+      <svg
+        v-else-if="props.icon === 'briefcase' || props.icon === 'portfolio'"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        class="w-full h-full"
+      >
+        <path
+          d="M9 5h6a1.5 1.5 0 00-1.5-1.5h-3A1.5 1.5 0 009 5zM4 7a2 2 0 00-2 2v2.5c1.2.7 2.8 1.1 4.5 1.3V11.5h11V13c1.7-.2 3.3-.6 4.5-1.3V9a2 2 0 00-2-2H4zm18 7.3c-1.3.8-3.4 1.3-5.5 1.5V17h-9v-1.2c-2.1-.2-4.2-.7-5.5-1.5V18a2 2 0 002 2h16a2 2 0 002-2v-3.7z"
+        />
+      </svg>
+      <!-- 04 Target / Bullseye with Dart (matching design) -->
+      <svg
+        v-else-if="props.icon === 'target' || props.icon === 'bullseye'"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="w-full h-full"
+      >
+        <circle cx="10" cy="14" r="7.5" stroke-width="1.8" />
+        <circle cx="10" cy="14" r="4.2" stroke-width="1.8" />
+        <circle cx="10" cy="14" r="1.5" fill="currentColor" stroke="none" />
+        <path d="M15 9l6-6" stroke-width="2" />
+        <path d="M18 3h3v3" stroke-width="2" stroke-linejoin="miter" />
+        <path d="M15 6l3 3" stroke-width="1.6" />
+      </svg>
+    </slot>
+  </div>
+</template>

package/components/shifting-heading/TransitionHeading.vue

@@ -6,8 +6,8 @@ defineOptions({
 });
 
 interface ITransitionHeadingProps {
-  readonly center?: boolean;
   readonly idle?: boolean;
+  readonly center?: boolean;
 }
 
 const props = withDefaults(defineProps<ITransitionHeadingProps>(), {
@@ -16,10 +16,10 @@ const props = withDefaults(defineProps<ITransitionHeadingProps>(), {
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(() => [
-  'alpha-transition-heading transition-all duration-700 ease-in-out absolute whitespace-nowrap',
+  'alpha-transition-heading transition-all duration-700 ease-in-out absolute w-fit whitespace-nowrap',
   {
     'top-[50%] left-[50%] translate-[-50%,-50%]': props.center,
-    'top-[2.5rem] left-[3.5rem] translate-[0,0]': props.idle || !props.center,
+    'top-[2.5rem] left-[3rem] translate-[0,0]': props.idle || !props.center,
   },
 ]);
 </script>