@alphacifer/slidev-addon-theme 0.0.5 → 0.0.7

package/components/arrow-triad/ArrowTriadCallout.vue

@@ -0,0 +1,300 @@
+<script setup lang="ts">
+import { computed, Fragment, inject, provide, useSlots, type VNode } from 'vue';
+
+import {
+  ARROW_TRIAD_CALLOUT_KEY,
+  ARROW_TRIAD_ROOT_KEY,
+  getDefaultArrowTriadItem,
+  type IArrowTriadItem,
+  type IResolvedArrowTriadItem,
+  resolveSingleArrowTriadItem,
+} from '../../utils/arrowTriad';
+import ArrowTriadContent from './ArrowTriadContent.vue';
+import ArrowTriadHeading from './ArrowTriadHeading.vue';
+import ArrowTriadIcon from './ArrowTriadIcon.vue';
+
+defineOptions({
+  name: 'ArrowTriadCallout',
+});
+
+export interface IArrowTriadCalloutProps {
+  readonly id?: string | number;
+  readonly index?: number;
+  readonly icon?: string | object | false;
+  readonly color?: string;
+  readonly cardBg?: string;
+  readonly textColor?: string;
+  readonly titleColor?: string;
+  readonly title?: string;
+  readonly description?: string;
+}
+
+const props = withDefaults(defineProps<IArrowTriadCalloutProps>(), {
+  id: undefined,
+  index: undefined,
+  icon: undefined,
+  color: 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(ARROW_TRIAD_ROOT_KEY, undefined);
+
+if (!rootContext) {
+  console.warn('[ArrowTriadCallout] Must be used inside <ArrowTriad>');
+}
+
+const registration =
+  props.index === undefined ? rootContext?.registerCallout() : undefined;
+const resolvedIndex = computed(() => {
+  if (props.index !== undefined) {
+    return props.index;
+  }
+
+  return registration?.index ?? 0;
+});
+
+const activeItem = computed<IResolvedArrowTriadItem>(() => {
+  const baseItem =
+    rootContext?.items.value[resolvedIndex.value] ??
+    getDefaultArrowTriadItem(resolvedIndex.value);
+
+  const override: IArrowTriadItem = {
+    id: props.id,
+    color: props.color,
+    icon: props.icon,
+    cardBg: props.cardBg,
+    textColor: props.textColor,
+    titleColor: props.titleColor,
+    title: props.title,
+    description: props.description,
+  };
+
+  return resolveSingleArrowTriadItem(
+    {
+      ...baseItem,
+      ...Object.fromEntries(
+        Object.entries(override).filter(([_, v]) => {
+          return v !== undefined;
+        }),
+      ),
+    },
+    resolvedIndex.value,
+  );
+});
+
+provide(ARROW_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, 'ArrowTriadHeading');
+  });
+});
+
+const contentNode = computed(() => {
+  return defaultNodes.value.find((node) => {
+    return hasComponentName(node.type, 'ArrowTriadContent');
+  });
+});
+
+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, 'ArrowTriadHeading') &&
+      !hasComponentName(node.type, 'ArrowTriadContent')
+    );
+  });
+});
+
+const positionStyle = computed(() => {
+  const is2Left =
+    rootContext?.layout?.value === '2-left-1-right' ||
+    rootContext?.layout?.value === '2-left';
+
+  if (is2Left) {
+    switch (resolvedIndex.value) {
+      case 0: {
+        // Top-Left (aligned with Yellow arrow tip pointing North-West)
+        return 'right: calc(50% + 150px); top: calc(50% - 170px);';
+      }
+      case 1: {
+        // Bottom-Left (aligned with Green arrow tip pointing South-West)
+        return 'right: calc(50% + 150px); top: calc(50% + 15px);';
+      }
+      case 2: {
+        // Middle-Right (aligned with Blue arrow tip pointing East)
+        return 'left: calc(50% + 166px); top: calc(50% - 78px);';
+      }
+      default: {
+        return '';
+      }
+    }
+  }
+
+  // 1-left-2-right
+  switch (resolvedIndex.value) {
+    case 0: {
+      // Top-Right (aligned with Yellow arrow tip pointing North-East)
+      return 'left: calc(50% + 150px); top: calc(50% - 170px);';
+    }
+    case 1: {
+      // Bottom-Right (aligned with Green arrow tip pointing South-East)
+      return 'left: calc(50% + 150px); top: calc(50% + 15px);';
+    }
+    case 2: {
+      // Middle-Left (aligned with Blue arrow tip pointing West)
+      return 'right: calc(50% + 166px); top: calc(50% - 78px);';
+    }
+    default: {
+      return '';
+    }
+  }
+});
+
+const animation = computed(() => {
+  return rootContext?.animation?.value ?? true;
+});
+
+const hasIcon = computed(() => {
+  if (slots.icon) {
+    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;
+});
+</script>
+
+<template>
+  <div
+    v-if="resolvedIndex < 3"
+    :class="[
+      'alpha-arrow-triad-callout absolute w-[280px] h-[155px] rounded-[20px] px-4 py-3 flex flex-col items-center justify-center text-center z-10 transition-all duration-300 pointer-events-auto select-none box-border shadow-[0_10px_30px_-5px_rgba(0,0,0,0.06),0_4px_6px_-4px_rgba(0,0,0,0.03)]',
+      `alpha-arrow-triad-callout--${resolvedIndex}`,
+      { 'alpha-arrow-triad-callout--animated': animation },
+    ]"
+    :style="[
+      positionStyle,
+      {
+        backgroundColor: activeItem.cardBg,
+        fontFamily:
+          'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
+      },
+    ]"
+  >
+    <!-- Card Icon Header -->
+    <div v-if="hasIcon" class="mb-2 flex items-center justify-center">
+      <slot name="icon">
+        <ArrowTriadIcon :icon="activeItem.icon" :size="32" />
+      </slot>
+    </div>
+    <!-- Title -->
+    <slot name="title">
+      <component :is="headingNode" v-if="headingNode" />
+      <ArrowTriadHeading v-else :color="activeItem.titleColor">
+        {{ activeItem.title }}
+      </ArrowTriadHeading>
+    </slot>
+    <!-- Description -->
+    <slot name="description">
+      <component :is="contentNode" v-if="contentNode" />
+      <ArrowTriadContent v-else :color="activeItem.textColor">
+        {{ activeItem.description }}
+      </ArrowTriadContent>
+    </slot>
+    <!-- Other slotted nodes -->
+    <component
+      :is="node"
+      v-for="(node, idx) in otherSlottedNodes"
+      :key="idx"
+    />
+  </div>
+</template>
+
+<style scoped>
+.alpha-arrow-triad-callout--animated.alpha-arrow-triad-callout--0 {
+  animation: arrow-triad-callout-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arrow-triad-start-delay, 0ms) + 150ms) both;
+}
+
+.alpha-arrow-triad-callout--animated.alpha-arrow-triad-callout--1 {
+  animation: arrow-triad-callout-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arrow-triad-start-delay, 0ms) + 250ms) both;
+}
+
+.alpha-arrow-triad-callout--animated.alpha-arrow-triad-callout--2 {
+  animation: arrow-triad-callout-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arrow-triad-start-delay, 0ms) + 350ms) both;
+}
+
+@keyframes arrow-triad-callout-fade {
+  0% {
+    opacity: 0;
+    transform: translateY(12px) scale(0.96);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+</style>

package/components/arrow-triad/ArrowTriadContent.vue

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

package/components/arrow-triad/ArrowTriadHeading.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { ARROW_TRIAD_CALLOUT_KEY } from '../../utils/arrowTriad';
+
+defineOptions({
+  name: 'ArrowTriadHeading',
+});
+
+export interface IArrowTriadHeadingProps {
+  readonly color?: string;
+}
+
+const props = withDefaults(defineProps<IArrowTriadHeadingProps>(), {
+  color: undefined,
+});
+
+const calloutContext = inject(ARROW_TRIAD_CALLOUT_KEY, undefined);
+
+const headingColor = computed(() => {
+  return props.color ?? calloutContext?.item.value.titleColor ?? '#1e293b';
+});
+</script>
+
+<template>
+  <div
+    class="alpha-arrow-triad-heading font-bold text-[1.25rem] uppercase tracking-wider text-center leading-tight mb-2 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>

package/components/arrow-triad/ArrowTriadIcon.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+defineOptions({
+  name: 'ArrowTriadIcon',
+});
+
+export interface IArrowTriadIconProps {
+  readonly size?: number;
+  readonly color?: string;
+  readonly icon?: string | object | false;
+}
+
+const props = withDefaults(defineProps<IArrowTriadIconProps>(), {
+  size: 32,
+  icon: undefined,
+  color: '#334155',
+});
+
+const isStringIcon = computed((): boolean => {
+  return typeof props.icon === 'string';
+});
+
+const isComponentIcon = computed((): boolean => {
+  return typeof props.icon === 'object' && props.icon !== null;
+});
+
+const hasIcon = computed((): boolean => {
+  return Boolean(props.icon) && props.icon !== 'false' && props.icon !== '';
+});
+
+const resolvedIconClass = computed((): string => {
+  if (typeof props.icon !== 'string') {
+    return '';
+  }
+
+  const str = props.icon.trim();
+
+  if (str.startsWith('i-')) {
+    return str;
+  }
+
+  if (str.includes(':')) {
+    return `i-${str.replace(':', '-')}`;
+  }
+
+  if (str.includes('-')) {
+    return `i-${str}`;
+  }
+
+  return str;
+});
+</script>
+
+<template>
+  <div
+    v-if="hasIcon"
+    class="alpha-arrow-triad-icon flex items-center justify-center pointer-events-none select-none"
+    :style="{
+      color: props.color,
+      width: `${props.size}px`,
+      height: `${props.size}px`,
+    }"
+  >
+    <slot>
+      <component
+        :is="props.icon"
+        v-if="isComponentIcon"
+        class="w-full h-full"
+        :style="{ color: props.color }"
+      />
+      <!-- UnoCSS / Iconify class name (e.g. i-carbon-shield-check or carbon:shield-check) -->
+      <span
+        v-else-if="isStringIcon && resolvedIconClass"
+        :class="resolvedIconClass"
+        class="inline-block"
+        :style="{
+          color: props.color,
+          width: `${props.size}px`,
+          height: `${props.size}px`,
+          fontSize: `${props.size}px`,
+        }"
+      />
+      <span
+        v-else-if="isStringIcon"
+        class="inline-block font-semibold"
+        :style="{
+          color: props.color,
+          fontSize: `${props.size * 0.75}px`,
+        }"
+      >
+        {{ props.icon }}
+      </span>
+    </slot>
+  </div>
+</template>

package/components/chevron-card/ChevronCard.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { computed, Fragment, provide, useSlots, type VNode } from 'vue';
+
+import { CHEVRON_CARD_KEY } from '../../utils/chevronCard';
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+import ChevronCardBadge from './ChevronCardBadge.vue';
+import ChevronCardContent from './ChevronCardContent.vue';
+import ChevronCardHeading from './ChevronCardHeading.vue';
+
+defineOptions({
+  name: 'ChevronCard',
+  inheritAttrs: false,
+});
+
+export interface IChevronCardProps {
+  readonly step?: string | number;
+  readonly icon?: string | object;
+  readonly color?: string;
+  readonly width?: number | string;
+  readonly cardBg?: string;
+  readonly height?: number | string;
+  readonly textColor?: string;
+  readonly animation?: boolean;
+  readonly notchDepth?: number;
+  readonly titleColor?: string;
+  readonly chevronWidth?: number;
+  readonly borderRadius?: number;
+}
+
+const props = withDefaults(defineProps<IChevronCardProps>(), {
+  step: '01',
+  icon: undefined,
+  color: '#f59e0b',
+  width: undefined,
+  cardBg: '#f5f5f7',
+  height: undefined,
+  textColor: undefined,
+  animation: true,
+  notchDepth: 26,
+  titleColor: undefined,
+  chevronWidth: 130,
+  borderRadius: 18,
+});
+
+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, 'ChevronCardBadge') ||
+    node.type === ChevronCardBadge
+  );
+}
+
+function isHeadingNode(node: VNode): boolean {
+  return (
+    hasComponentName(node.type, 'ChevronCardHeading') ||
+    node.type === ChevronCardHeading
+  );
+}
+
+function isContentNode(node: VNode): boolean {
+  return (
+    hasComponentName(node.type, 'ChevronCardContent') ||
+    node.type === ChevronCardContent
+  );
+}
+
+const defaultNodes = computed(() => {
+  if (!slots.default) {
+    return [];
+  }
+
+  return flattenVNodes(slots.default());
+});
+
+const slottedBadge = computed(() => {
+  return defaultNodes.value.find(isBadgeNode);
+});
+
+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) && !isHeadingNode(node) && !isContentNode(node);
+  });
+});
+
+const resolvedStep = computed(() => {
+  return props.step;
+});
+
+const resolvedColor = computed(() => {
+  return props.color;
+});
+
+const resolvedCardBg = computed(() => {
+  return props.cardBg;
+});
+
+const resolvedTextColor = computed(() => {
+  return props.textColor;
+});
+
+const resolvedTitleColor = computed(() => {
+  return props.titleColor;
+});
+
+provide(CHEVRON_CARD_KEY, {
+  step: resolvedStep,
+  color: resolvedColor,
+  cardBg: resolvedCardBg,
+  textColor: resolvedTextColor,
+  titleColor: resolvedTitleColor,
+});
+
+const resolvedWidth = computed(() => {
+  if (props.width === undefined) {
+    return undefined;
+  }
+
+  return typeof props.width === 'number' ? `${props.width}px` : props.width;
+});
+
+const resolvedHeight = computed(() => {
+  if (props.height === undefined) {
+    return undefined;
+  }
+
+  return typeof props.height === 'number' ? `${props.height}px` : props.height;
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-chevron-card flex items-stretch w-full select-none font-sans',
+);
+</script>
+
+<template>
+  <div
+    v-bind="forwardedAttrs()"
+    :class="[
+      className(),
+      { 'alpha-chevron-card--animated': props.animation },
+    ]"
+    :style="{
+      width: resolvedWidth,
+      minHeight: resolvedHeight ?? '112px',
+      fontFamily:
+        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
+    }"
+  >
+    <!-- Chevron Step Badge Layer -->
+    <div class="flex-shrink-0 z-10 flex">
+      <slot name="badge">
+        <component :is="slottedBadge" v-if="slottedBadge" />
+        <ChevronCardBadge
+          v-else
+          :step="resolvedStep"
+          :icon="props.icon"
+          :color="resolvedColor"
+          :width="props.chevronWidth"
+          :notch-depth="props.notchDepth"
+        />
+      </slot>
+    </div>
+    <!-- Content Body Layer -->
+    <div
+      class="flex-1 min-w-0 flex flex-col justify-center py-4 pr-6"
+      :style="{
+        backgroundColor: resolvedCardBg,
+        borderRadius: `0 ${props.borderRadius}px ${props.borderRadius}px 0`,
+        marginLeft: `-${props.notchDepth}px`,
+        paddingLeft: `${props.notchDepth + 20}px`,
+      }"
+    >
+      <slot name="title">
+        <component :is="slottedHeading" v-if="slottedHeading" />
+      </slot>
+      <slot name="description">
+        <component :is="slottedContent" v-if="slottedContent" />
+      </slot>
+      <component
+        :is="node"
+        v-for="(node, index) in otherSlottedNodes"
+        :key="index"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.alpha-chevron-card--animated {
+  animation: chevron-card-fade-in 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@keyframes chevron-card-fade-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-16px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+</style>