@alphacifer/slidev-addon-theme 0.0.9 → 0.0.11

package/components/card/vert-card/VertCardHeading.vue

@@ -1,68 +0,0 @@
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-
-import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
-import { VERT_CARD_KEY } from '../../../utils/vertCard';
-
-defineOptions({
-  inheritAttrs: false,
-  name: 'VertCardHeading',
-});
-
-export interface IVertCardHeadingProps {
-  /**
-   * Title text color. Overrides context titleColor.
-   */
-  readonly color?: string;
-  /**
-   * Whether to render the decorative horizontal line with center dot below the title.
-   * @default true
-   */
-  readonly hasDivider?: boolean;
-}
-
-const props = withDefaults(defineProps<IVertCardHeadingProps>(), {
-  color: undefined,
-  hasDivider: true,
-});
-
-const context = inject(VERT_CARD_KEY, undefined);
-
-const headingColor = computed(() => {
-  return (
-    props.color ??
-    context?.titleColor.value ??
-    context?.color.value ??
-    '#ea583a'
-  );
-});
-
-const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-vert-card-heading font-sans font-bold text-xl tracking-tight leading-tight text-center',
-);
-</script>
-
-<template>
-  <div class="flex flex-col items-center w-full">
-    <h3
-      v-bind="forwardedAttrs()"
-      :class="className()"
-      :style="{ color: headingColor }"
-    >
-      <slot>Lorem Ipsum</slot>
-    </h3>
-    <div
-      v-if="props.hasDivider"
-      class="mt-2.5 flex items-center justify-center w-32 relative"
-    >
-      <div
-        class="w-full h-[1.5px]"
-        :style="{ backgroundColor: headingColor }"
-      />
-      <span
-        class="absolute w-2 h-2 rounded-full"
-        :style="{ backgroundColor: headingColor }"
-      />
-    </div>
-  </div>
-</template>

package/components/card/vert-card/VertCardTitle.vue

@@ -1,76 +0,0 @@
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-
-import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
-import { VERT_CARD_KEY } from '../../../utils/vertCard';
-
-defineOptions({
-  inheritAttrs: false,
-  name: 'VertCardTitle',
-});
-
-export interface IVertCardTitleProps {
-  /**
-   * Title text color. Overrides context titleColor.
-   */
-  readonly color?: string;
-  /**
-   * Whether to render the decorative horizontal line with center dot below the title.
-   * Defaults to context hasDivider, or true.
-   */
-  readonly hasDivider?: boolean;
-}
-
-const props = withDefaults(defineProps<IVertCardTitleProps>(), {
-  color: undefined,
-  hasDivider: undefined,
-});
-
-const context = inject(VERT_CARD_KEY, undefined);
-
-const headingColor = computed(() => {
-  return (
-    props.color ??
-    context?.titleColor.value ??
-    context?.color.value ??
-    '#ea583a'
-  );
-});
-
-const isDividerVisible = computed(() => {
-  if (props.hasDivider !== undefined) {
-    return props.hasDivider;
-  }
-
-  return context?.hasDivider?.value ?? true;
-});
-
-const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-vert-card-title font-sans font-bold text-xl tracking-tight leading-tight text-center',
-);
-</script>
-
-<template>
-  <div class="flex flex-col items-center w-full">
-    <h3
-      v-bind="forwardedAttrs()"
-      :class="className()"
-      :style="{ color: headingColor }"
-    >
-      <slot>Lorem Ipsum</slot>
-    </h3>
-    <div
-      v-if="isDividerVisible"
-      class="mt-2.5 flex items-center justify-center w-32 relative"
-    >
-      <div
-        class="w-full h-[1.5px]"
-        :style="{ backgroundColor: headingColor }"
-      />
-      <span
-        class="absolute w-2 h-2 rounded-full"
-        :style="{ backgroundColor: headingColor }"
-      />
-    </div>
-  </div>
-</template>

package/components/comparisons/arc-comparison/ArcComparisonContents.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import ArcOrbitContents from '../../core/arc-orbit/ArcOrbitContents.vue';
-
-defineOptions({
-  inheritAttrs: false,
-  name: 'ArcComparisonContents',
-});
-</script>
-
-<template>
-  <ArcOrbitContents
-    v-bind="$attrs"
-    class="alpha-arc-comparison-contents"
-  >
-    <slot />
-  </ArcOrbitContents>
-</template>

package/components/comparisons/arc-comparison/ArcComparisonTitle.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import ArcOrbitTitle, {
-  type IArcOrbitTitleProps,
-} from '../../core/arc-orbit/ArcOrbitTitle.vue';
-
-defineOptions({
-  inheritAttrs: false,
-  name: 'ArcComparisonTitle',
-});
-
-export interface IArcComparisonTitleProps extends IArcOrbitTitleProps {}
-
-const props = defineProps<IArcComparisonTitleProps>();
-</script>
-
-<template>
-  <ArcOrbitTitle
-    v-if="$slots.default"
-    v-bind="{ ...props, ...$attrs }"
-    class="alpha-arc-comparison-title"
-  >
-    <slot />
-  </ArcOrbitTitle>
-  <ArcOrbitTitle
-    v-else
-    v-bind="{ ...props, ...$attrs }"
-    class="alpha-arc-comparison-title"
-  />
-</template>

package/components/core/arc-orbit/ArcOrbitContents.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
-
-defineOptions({
-  inheritAttrs: false,
-  name: 'ArcOrbitContents',
-});
-
-const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-arc-orbit-contents absolute inset-0 w-full h-full pointer-events-none',
-);
-</script>
-
-<template>
-  <div v-bind="forwardedAttrs()" :class="className()">
-    <slot />
-  </div>
-</template>

package/components/core/arc-orbit/ArcOrbitTitle.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-
-import {
-  ARC_ORBIT_ROOT_KEY,
-  DEFAULT_ARC_ORBIT_COLOR,
-} from '../../../utils/arcOrbit';
-import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
-
-defineOptions({
-  inheritAttrs: false,
-  name: 'ArcOrbitTitle',
-});
-
-export interface IArcOrbitTitleProps {
-  readonly color?: string;
-}
-
-const props = withDefaults(defineProps<IArcOrbitTitleProps>(), {
-  color: undefined,
-});
-
-const rootContext = inject(ARC_ORBIT_ROOT_KEY, undefined);
-
-const titleColor = computed(() => {
-  return props.color ?? rootContext?.color.value ?? DEFAULT_ARC_ORBIT_COLOR;
-});
-
-const titleStyle = computed(() => {
-  return {
-    color: titleColor.value,
-    fontFamily:
-      'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-  };
-});
-
-const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-arc-orbit-title font-bold text-center px-2 leading-tight flex items-center justify-center select-none text-[1.125rem] tracking-tight whitespace-pre-line',
-);
-</script>
-
-<template>
-  <div
-    v-bind="forwardedAttrs()"
-    :class="className()"
-    :style="titleStyle"
-  >
-    <slot>{{ rootContext?.title.value ?? 'Add Topic\nTitle' }}</slot>
-  </div>
-</template>

package/components/facets/tetrad/rect-orbit-tetrad/RectOrbitTetradCenter.vue

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  name: 'RectOrbitTetradCenter',
-});
-
-export interface IRectOrbitTetradCenterProps {
-  readonly title?: string;
-  readonly radius?: number;
-  readonly subtitle?: string;
-}
-
-const props = withDefaults(defineProps<IRectOrbitTetradCenterProps>(), {
-  title: undefined,
-  subtitle: undefined,
-  radius: 58,
-});
-</script>
-
-<template>
-  <div
-    class="alpha-rect-orbit-tetrad-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/facets/tetrad/rect-orbit-tetrad/RectOrbitTetradContent.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-
-import { RECT_ORBIT_TETRAD_CALLOUT_KEY } from '../../../../utils/rectOrbitTetrad';
-
-defineOptions({
-  name: 'RectOrbitTetradContent',
-});
-
-export interface IRectOrbitTetradContentProps {
-  readonly color?: string;
-}
-
-const props = withDefaults(defineProps<IRectOrbitTetradContentProps>(), {
-  color: undefined,
-});
-
-const calloutContext = inject(RECT_ORBIT_TETRAD_CALLOUT_KEY, undefined);
-
-const contentColor = computed(() => {
-  return props.color ?? calloutContext?.item.value.textColor ?? '#555555';
-});
-</script>
-
-<template>
-  <div
-    class="alpha-rect-orbit-tetrad-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/facets/tetrad/rect-orbit-tetrad/RectOrbitTetradHeading.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-
-import { RECT_ORBIT_TETRAD_CALLOUT_KEY } from '../../../../utils/rectOrbitTetrad';
-
-defineOptions({
-  name: 'RectOrbitTetradHeading',
-});
-
-export interface IRectOrbitTetradHeadingProps {
-  readonly color?: string;
-}
-
-const props = withDefaults(defineProps<IRectOrbitTetradHeadingProps>(), {
-  color: undefined,
-});
-
-const calloutContext = inject(RECT_ORBIT_TETRAD_CALLOUT_KEY, undefined);
-
-const headingColor = computed(() => {
-  return (
-    props.color ??
-    calloutContext?.item.value.titleColor ??
-    calloutContext?.item.value.color ??
-    '#f29e4b'
-  );
-});
-</script>
-
-<template>
-  <div
-    class="alpha-rect-orbit-tetrad-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/facets/triad/gear-triad/GearTriadContents.vue

@@ -1,111 +0,0 @@
-<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

@@ -1,38 +0,0 @@
-<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/hex-triad/HexTriadCenterBadge.vue

@@ -1,51 +0,0 @@
-<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/facets/triad/hex-triad/HexTriadContent.vue

@@ -1,20 +0,0 @@
-<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/facets/triad/hex-triad/HexTriadHeading.vue

@@ -1,28 +0,0 @@
-<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>