@alphacifer/slidev-addon-theme 0.0.5 → 0.0.7

package/components/hex-triad/HexTriadCallout.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { computed, Fragment, inject, provide, useSlots, type VNode } from 'vue';
+
+import {
+  DEFAULT_HEX_TRIAD_ITEMS,
+  HEX_TRIAD_CALLOUT_KEY,
+  HEX_TRIAD_ROOT_KEY,
+  type IHexTriadItem,
+} from '../../utils/hexTriad';
+import HexTriadBadge from './HexTriadBadge.vue';
+import HexTriadContent from './HexTriadContent.vue';
+import HexTriadHeading from './HexTriadHeading.vue';
+
+defineOptions({
+  name: 'HexTriadCallout',
+});
+
+interface INamedComponent {
+  readonly name?: string;
+}
+
+function hasComponentName(type: unknown, name: string): boolean {
+  if (typeof type === 'object' && type !== null && 'name' in type) {
+    return (type as INamedComponent).name === name;
+  }
+
+  return false;
+}
+
+const rootContext = inject(HEX_TRIAD_ROOT_KEY, undefined);
+
+if (!rootContext) {
+  console.warn('[HexTriadCallout] Must be used inside <HexTriad>');
+}
+
+const registration = rootContext?.registerCallout();
+const index = registration?.index ?? 0;
+
+const fallbackItem = computed<IHexTriadItem>(() => {
+  return DEFAULT_HEX_TRIAD_ITEMS[0];
+});
+
+const item = registration?.item ?? fallbackItem;
+
+const setBadgeText = (text: string | number): void => {
+  registration?.setBadgeText(text);
+};
+
+provide(HEX_TRIAD_CALLOUT_KEY, {
+  item,
+  index,
+  setBadgeText,
+});
+
+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 isBadgeNode(node: VNode): boolean {
+  return (
+    hasComponentName(node.type, 'HexTriadBadge') || node.type === HexTriadBadge
+  );
+}
+
+function isHeadingNode(node: VNode): boolean {
+  return (
+    hasComponentName(node.type, 'HexTriadHeading') ||
+    node.type === HexTriadHeading
+  );
+}
+
+function isContentNode(node: VNode): boolean {
+  return (
+    hasComponentName(node.type, 'HexTriadContent') ||
+    node.type === HexTriadContent
+  );
+}
+
+const defaultNodes = computed(() => {
+  if (!slots.default) {
+    return [];
+  }
+
+  return flattenVNodes(slots.default());
+});
+
+const badgeNode = computed(() => {
+  return defaultNodes.value.find(isBadgeNode);
+});
+
+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 !isBadgeNode(node) && !isHeadingNode(node) && !isContentNode(node);
+  });
+});
+
+// Positions matching the design exactly:
+// Index 0: upper-right pocket above orange hex
+// Index 1: lower-right, right of orange hex
+// Index 2: lower-left, left of blue hex
+const positionStyle = computed(() => {
+  if (index === 0) {
+    return 'left: calc(50% + 90px); top: 20px;';
+  }
+
+  if (index === 1) {
+    return 'left: calc(50% + 185px); top: 210px;';
+  }
+
+  return 'right: calc(50% + 185px); top: 210px;';
+});
+
+const animation = computed(() => rootContext?.animation?.value ?? true);
+
+const containerClass = computed(() => {
+  if (index === 2) {
+    return `alpha-hex-triad-callout alpha-hex-triad-callout--${index} absolute flex items-start gap-3 justify-end text-right z-10 pointer-events-auto`;
+  }
+
+  return `alpha-hex-triad-callout alpha-hex-triad-callout--${index} absolute flex items-start gap-3 justify-start text-left z-10 pointer-events-auto`;
+});
+</script>
+
+<template>
+  <div
+    v-if="index < 3"
+    :class="[containerClass, { 'alpha-hex-triad-callout--animated': animation }]"
+    :style="positionStyle"
+  >
+    <!-- For Index 0 and 1: Badge on left, Text on right -->
+    <template v-if="index !== 2">
+      <component :is="badgeNode" v-if="badgeNode" />
+      <HexTriadBadge v-else />
+      <div class="flex flex-col items-start text-left">
+        <component :is="headingNode" v-if="headingNode" />
+        <HexTriadHeading v-else />
+        <component :is="contentNode" v-if="contentNode" />
+        <HexTriadContent v-else />
+        <component :is="node" v-for="(node, i) in otherNodes" :key="i" />
+      </div>
+    </template>
+    <!-- For Index 2 (Blue / Left): Text on left, Badge on right -->
+    <template v-else>
+      <div class="flex flex-col items-end text-right">
+        <component :is="headingNode" v-if="headingNode" />
+        <HexTriadHeading v-else />
+        <component :is="contentNode" v-if="contentNode" />
+        <HexTriadContent v-else />
+        <component :is="node" v-for="(node, i) in otherNodes" :key="i" />
+      </div>
+      <component :is="badgeNode" v-if="badgeNode" />
+      <HexTriadBadge v-else />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.alpha-hex-triad-callout--animated.alpha-hex-triad-callout--0 {
+  animation: hex-callout-display 400ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--hex-start-delay, 0ms) + 250ms) both;
+}
+
+.alpha-hex-triad-callout--animated.alpha-hex-triad-callout--1 {
+  animation: hex-callout-display 400ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--hex-start-delay, 0ms) + 450ms) both;
+}
+
+.alpha-hex-triad-callout--animated.alpha-hex-triad-callout--2 {
+  animation: hex-callout-display 400ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--hex-start-delay, 0ms) + 650ms) both;
+}
+
+@keyframes hex-callout-display {
+  0% {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

package/components/hex-triad/HexTriadCenterBadge.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+defineOptions({
+  name: 'HexTriadCenterBadge',
+});
+
+export interface IHexTriadCenterBadgeProps {
+  readonly x: number;
+  readonly y: number;
+  readonly text: string | number;
+  readonly color: string;
+  readonly filter?: string;
+  readonly radius: number;
+}
+
+const props = withDefaults(defineProps<IHexTriadCenterBadgeProps>(), {
+  filter: 'url(#hex-badge-shadow)',
+});
+
+const transform = computed(() => {
+  return `translate(${props.x}, ${props.y})`;
+});
+</script>
+
+<template>
+  <g class="alpha-hex-triad-center-badge" :transform="transform" :filter="filter">
+    <circle class="alpha-hex-triad-center-badge__outer" cx="0" cy="0" :r="radius + 4" fill="#ffffff" />
+    <circle class="alpha-hex-triad-center-badge__circle" cx="0" cy="0" :r="radius" :fill="color" />
+    <circle
+      class="alpha-hex-triad-center-badge__ring"
+      cx="0"
+      cy="0"
+      :r="radius - 4"
+      fill="none"
+      stroke="#ffffff"
+      stroke-width="1.2"
+      :style="{ opacity: 0.65 }"
+    />
+    <text
+      class="alpha-hex-triad-center-badge__text font-black text-lg select-none"
+      x="0"
+      y="6.5"
+      text-anchor="middle"
+      fill="#ffffff"
+      font-family="system-ui, -apple-system, sans-serif"
+    >
+      {{ text }}
+    </text>
+  </g>
+</template>

package/components/hex-triad/HexTriadContent.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'HexTriadContent',
+});
+</script>
+
+<template>
+  <p
+    class="alpha-hex-triad-content mt-0 mb-0 text-[1rem] leading-relaxed max-w-[240px]"
+    :style="{
+      margin: 0,
+      fontSize: '1rem',
+      fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, sans-serif',
+    }"
+  >
+    <slot>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod sed diam nonummy nibh
+    </slot>
+  </p>
+</template>

package/components/hex-triad/HexTriadHeading.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { HEX_TRIAD_CALLOUT_KEY } from '../../utils/hexTriad';
+
+defineOptions({
+  name: 'HexTriadHeading',
+});
+
+const calloutContext = inject(HEX_TRIAD_CALLOUT_KEY, undefined);
+const headingColor = computed(() => {
+  return calloutContext?.item.value.color ?? '#e11d48';
+});
+</script>
+
+<template>
+  <h3
+    class="alpha-hex-triad-heading font-bold text-[1.25rem] tracking-tight mb-[0.5rem]"
+    :style="{
+      color: headingColor,
+      fontSize: '1.25rem',
+      fontFamily:
+        'system-ui, -apple-system, BlinkMacSystemFont, sans-serif',
+    }"
+  >
+    <slot>Text Here</slot>
+  </h3>
+</template>

package/components/hex-triad/HexTriadLayer.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'HexTriadLayer',
+});
+
+export interface IHexTriadLayerProps {
+  readonly d: string;
+  readonly fill?: string;
+  readonly filter?: string;
+  readonly opacity?: number | string;
+}
+
+withDefaults(defineProps<IHexTriadLayerProps>(), {
+  opacity: 1,
+  fill: undefined,
+  filter: undefined,
+});
+</script>
+
+<template>
+  <path
+    class="alpha-hex-triad-layer"
+    :d="d"
+    :fill="fill"
+    :filter="filter"
+    :style="opacity !== undefined ? { opacity } : undefined"
+  />
+</template>

package/components/horiz-card/HorizCard.vue

@@ -0,0 +1,318 @@
+<script setup lang="ts">
+import {
+  type ComputedRef,
+  computed,
+  Fragment,
+  provide,
+  useSlots,
+  type VNode,
+} from 'vue';
+
+import {
+  createHorizCardAccentPath,
+  createHorizCardPath,
+  HORIZ_CARD_KEY,
+  hexToRgba,
+} from '../../utils/horizCard';
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  name: 'HorizCard',
+  inheritAttrs: false,
+});
+
+export interface IHorizCardProps {
+  readonly color?: string;
+  readonly dots?: boolean;
+  readonly title?: string;
+  readonly cardBg?: string;
+  readonly textColor?: string;
+  readonly titleColor?: string;
+  readonly lightColor?: string;
+  readonly description?: string;
+  readonly step?: string | number;
+  readonly icon?: string | object;
+  readonly hasIconCircle?: boolean;
+}
+
+const props = withDefaults(defineProps<IHorizCardProps>(), {
+  dots: true,
+  step: '01',
+  icon: undefined,
+  color: '#ea583a',
+  cardBg: '#ffffff',
+  title: 'Lorem Ipsum',
+  textColor: undefined,
+  lightColor: undefined,
+  titleColor: undefined,
+  description: undefined,
+  hasIconCircle: undefined,
+});
+
+const slots = useSlots();
+
+interface INamedComponent {
+  readonly name?: string;
+}
+
+function hasComponentName(type: unknown, name: string): boolean {
+  if (typeof type === 'object' && type !== null && 'name' in type) {
+    return (type as INamedComponent).name === name;
+  }
+
+  return false;
+}
+
+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 isBadgeNode(node: VNode): boolean {
+  return hasComponentName(node.type, 'HorizCardBadge');
+}
+
+function isIconNode(node: VNode): boolean {
+  return hasComponentName(node.type, 'HorizCardIcon');
+}
+
+function isHeadingNode(node: VNode): boolean {
+  return hasComponentName(node.type, 'HorizCardHeading');
+}
+
+function isContentNode(node: VNode): boolean {
+  return hasComponentName(node.type, 'HorizCardContent');
+}
+
+const defaultNodes = computed(() => {
+  if (!slots.default) {
+    return [];
+  }
+
+  return flattenVNodes(slots.default());
+});
+
+const slottedBadge = computed(() => {
+  return defaultNodes.value.find(isBadgeNode);
+});
+
+const slottedIcon = computed(() => {
+  return defaultNodes.value.find(isIconNode);
+});
+
+const slottedHeading = computed(() => {
+  return defaultNodes.value.find(isHeadingNode);
+});
+
+const slottedContent = computed(() => {
+  return defaultNodes.value.find(isContentNode);
+});
+
+const otherSlottedNodes = computed(() => {
+  return defaultNodes.value.filter((node) => {
+    return (
+      !isBadgeNode(node) &&
+      !isIconNode(node) &&
+      !isHeadingNode(node) &&
+      !isContentNode(node)
+    );
+  });
+});
+
+const resolvedColor = computed(() => {
+  return props.color;
+});
+
+const resolvedLightColor = computed(() => {
+  return (
+    props.lightColor ??
+    hexToRgba({
+      alpha: 0.16,
+      hex: props.color,
+    })
+  );
+});
+
+const resolvedCardBg = computed(() => {
+  return props.cardBg;
+});
+
+const resolvedTitleColor = computed(() => {
+  return props.titleColor ?? props.color;
+});
+
+const resolvedTextColor = computed(() => {
+  return props.textColor;
+});
+
+const resolvedStep = computed(() => {
+  return props.step;
+});
+
+provide(HORIZ_CARD_KEY, {
+  step: resolvedStep,
+  color: resolvedColor,
+  cardBg: resolvedCardBg,
+  lightColor: resolvedLightColor,
+  titleColor: resolvedTitleColor,
+  textColor: resolvedTextColor as ComputedRef<string | undefined>,
+});
+
+// Fixed coordinate grid for crisp SVG vector drawing
+const CARD_WIDTH = 360;
+const CARD_HEIGHT = 260;
+
+const cardPath = computed(() => {
+  return createHorizCardPath({
+    chamferX: 60,
+    chamferY: 76,
+    borderRadius: 24,
+    chamferFillet: 22,
+    width: CARD_WIDTH,
+    height: CARD_HEIGHT,
+  });
+});
+
+const accentPath = computed(() => {
+  return createHorizCardAccentPath({
+    chamferX: 60,
+    chamferY: 76,
+    chamferFillet: 22,
+    width: CARD_WIDTH,
+    height: CARD_HEIGHT,
+    accentThickness: 16,
+    accentTopFillet: 22,
+    accentBottomFillet: 22,
+  });
+});
+
+// Determine whether icon circle is active
+const isIconActive = computed(() => {
+  if (props.hasIconCircle !== undefined) {
+    return props.hasIconCircle;
+  }
+
+  return Boolean(props.icon || slots.icon || slottedIcon.value !== undefined);
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-horiz-card relative inline-block select-none w-[360px] h-[260px] font-sans',
+);
+</script>
+
+<template>
+  <div v-bind="forwardedAttrs()" :class="className()">
+    <!-- SVG Vector Layer: Bottom-left accent blob + filleted chamfered card outline -->
+    <svg
+      class="absolute -left-[28px] -top-[16px] w-[416px] h-[292px] pointer-events-none overflow-visible"
+      viewBox="-28 -16 416 292"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <!-- Layer 1: Solid accent shape behind the card & chamfer -->
+      <path
+        class="alpha-horiz-card__accent"
+        :d="accentPath"
+        :fill="resolvedColor"
+      />
+      <!-- Layer 2: Main card body with stroke border and filleted chamfered cut -->
+      <path
+        class="alpha-horiz-card__body"
+        :d="cardPath"
+        :fill="resolvedCardBg"
+        :stroke="resolvedColor"
+        stroke-width="2.75"
+        stroke-linejoin="round"
+      />
+    </svg>
+    <!-- Ribbon Step Badge at top left (hangs over the top border) -->
+    <div class="absolute left-[20px] -top-[20px] z-10">
+      <slot name="badge">
+        <component :is="slottedBadge" v-if="slottedBadge" />
+        <HorizCardBadge v-else :step="resolvedStep" :color="resolvedColor" />
+      </slot>
+    </div>
+    <!-- Card Content Layer -->
+    <div
+      class="relative z-10 w-full h-full pt-10 pb-6 px-6 flex flex-col justify-between"
+    >
+      <!-- Middle Row: Optional Icon Circle + Text Content -->
+      <div
+        class="flex items-center gap-4 flex-1"
+        :class="{ 'pl-1': isIconActive }"
+      >
+        <!-- Icon Circle (rendered when icon/slot is provided) -->
+        <template v-if="isIconActive">
+          <slot name="icon">
+            <component :is="slottedIcon" v-if="slottedIcon" />
+            <HorizCardIcon
+              v-else
+              :icon="props.icon"
+              :color="resolvedColor"
+              :light-color="resolvedLightColor"
+              :size="100"
+            />
+          </slot>
+        </template>
+        <!-- Heading + Body Description -->
+        <div class="flex-1 flex flex-col justify-center min-w-0 pr-1">
+          <slot name="title">
+            <component :is="slottedHeading" v-if="slottedHeading" />
+            <HorizCardHeading
+              v-else
+              :color="resolvedTitleColor"
+              class="mb-2 text-lg"
+            >
+              {{ props.title }}
+            </HorizCardHeading>
+          </slot>
+          <slot name="description">
+            <component :is="slottedContent" v-if="slottedContent" />
+            <HorizCardContent
+              v-else
+              :color="resolvedTextColor"
+              class="text-[11px] leading-[1.45]"
+            >
+              <template v-if="props.description">
+                {{ props.description }}
+              </template>
+            </HorizCardContent>
+          </slot>
+          <!-- Any other custom slotted components -->
+          <component
+            :is="node"
+            v-for="(node, index) in otherSlottedNodes"
+            :key="index"
+          />
+        </div>
+      </div>
+      <!-- Bottom Row: Decorative Indicator Dots -->
+      <div v-if="props.dots" class="flex justify-end items-center pr-2 pb-1">
+        <slot name="dots">
+          <div class="inline-flex items-center gap-1.5 opacity-90">
+            <span
+              class="w-2 h-2 rounded-full inline-block"
+              :style="{ backgroundColor: resolvedColor }"
+            />
+            <span
+              class="w-2 h-2 rounded-full inline-block"
+              :style="{ backgroundColor: resolvedColor }"
+            />
+            <span
+              class="w-2 h-2 rounded-full inline-block"
+              :style="{ backgroundColor: resolvedColor }"
+            />
+          </div>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>