@alphacifer/slidev-addon-theme 0.0.1 → 0.0.2

package/components/core/Date.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { formatDate } from '@alphacifer/core-utils/dateUtils';
+import { computed } from 'vue';
 
 import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
 
@@ -14,11 +15,13 @@ const props = defineProps({
   },
 });
 
-const formattedDate = formatDate(props.date, {
-  format: 'dd/MM/yyyy',
+const formattedDate = computed(() => {
+  return formatDate(props.date ?? new Date(), {
+    format: 'dd/MM/yyyy',
+  });
 });
 
-const { className, forwardedAttrs } = useMergedUnoAttrs('slidev-addon-date');
+const { className, forwardedAttrs } = useMergedUnoAttrs('alpha-date');
 </script>
 
 <template>

package/components/core/QnA.vue

@@ -5,15 +5,16 @@ defineOptions({
   inheritAttrs: false,
 });
 
-defineProps({
-  startDelay: {
-    type: Number,
-    default: 11_500,
-  },
+interface IQnAProps {
+  readonly startDelay?: number;
+}
+
+withDefaults(defineProps<IQnAProps>(), {
+  startDelay: 11_500,
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'slidev-addon-qna flex items-center gap-8 text-8xl font-bold color-[#2b90b6]',
+  'alpha-qna flex items-center gap-8 text-8xl font-bold color-[#2b90b6]',
 );
 </script>
 
@@ -21,9 +22,12 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
   <div
     v-bind="forwardedAttrs()"
     :class="className()"
+    aria-label="Questions and answers"
+    role="img"
   >
     <span
       v-motion
+      aria-hidden="true"
       :initial="{
         opacity: 0,
         x: -500,
@@ -44,6 +48,7 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
     </span>
     <span
       v-motion
+      aria-hidden="true"
       :initial="{
         opacity: 1,
         y: -1_000
@@ -65,6 +70,7 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
     </span>
     <span
       v-motion
+      aria-hidden="true"
       :initial="{ opacity: 0, x: 500, rotate: 360 }"
       :enter="{
         opacity: 1,

package/components/core/Quote.vue

@@ -24,11 +24,9 @@ const props = defineProps({
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'slidev-addon-quote flex flex-col',
+  'alpha-quote flex flex-col',
 );
-const titleClasses = computed(() => {
-  return mergeUno('text-center', props.titleClass);
-});
+const titleClasses = computed(() => mergeUno('text-center', props.titleClass));
 </script>
 
 <template>

package/components/core/ReflectedTitle.vue

@@ -5,21 +5,20 @@ defineOptions({
   inheritAttrs: false,
 });
 
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-});
+interface IReflectedTitleProps {
+  readonly title: string;
+}
+
+defineProps<IReflectedTitleProps>();
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(`
-  slidev-addon-reflected-title
+  alpha-reflected-title
   relative
   text-5xl
   font-bold
   tracking-tight
   !text-[#a5f3fc]
-  after:content-[var(--title)]
+  after:content-[attr(data-title)]
   after:block
   after:mt-2
   after:absolute
@@ -40,10 +39,8 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(`
 <template>
   <h1
     v-bind="forwardedAttrs()"
-    :style="{
-      '--title': `'${title}'`,
-    }"
     :class="className()"
+    :data-title="title"
   >
     {{ title }}
   </h1>

package/components/core/Speaker.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { PropType } from 'vue';
+
 import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
 
 defineOptions({
@@ -12,7 +14,7 @@ const props = defineProps({
     default: 'Alpha',
   },
   team: {
-    type: Array,
+    type: Array as PropType<string[]>,
     required: false,
     default: () => [],
   },
@@ -23,7 +25,7 @@ const props = defineProps({
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(() => [
-  'slidev-addon-speaker flex absolute bottom-[15px] right-[30px] flex-col',
+  'alpha-speaker flex absolute bottom-[15px] right-[30px] flex-col',
   props.team.length ? 'text-left gap-2' : undefined,
 ]);
 </script>

package/components/shifting-heading/TransitionHeading.vue

@@ -5,76 +5,30 @@ defineOptions({
   inheritAttrs: false,
 });
 
-defineProps({
-  center: {
-    type: Boolean,
-    default: false,
-  },
-  idle: {
-    type: Boolean,
-    default: false,
-  },
+interface ITransitionHeadingProps {
+  readonly center?: boolean;
+  readonly idle?: boolean;
+}
+
+const props = withDefaults(defineProps<ITransitionHeadingProps>(), {
+  center: false,
+  idle: false,
 });
 
-const { className, forwardedAttrs } = useMergedUnoAttrs(`
-  shifting-heading
-  absolute
-  z-1
-  start-[var(--shifting-heading-inline,3.5rem)]
-  top-[var(--shifting-heading-top,2.5rem)]
-  w-max
-  translate-x-0
-  translate-y-0
-  origin-left
-`);
+const { className, forwardedAttrs } = useMergedUnoAttrs(() => [
+  'alpha-transition-heading transition-all duration-700 ease-in-out absolute whitespace-nowrap',
+  {
+    'top-[50%] left-[50%] translate-[-50%,-50%]': props.center,
+    'top-[2.5rem] left-[3.5rem] translate-[0,0]': props.idle || !props.center,
+  },
+]);
 </script>
 
 <template>
   <div
     v-bind="forwardedAttrs()"
     :class="className()"
-    :data-shifting-heading-state="center && !idle ? 'centered' : 'shifted'"
   >
     <slot />
   </div>
 </template>
-
-<style>
-.shifting-heading {
-  max-width: calc(
-    100% - var(--shifting-heading-inline, 3.5rem) -
-      var(--shifting-heading-inline, 3.5rem)
-  );
-  transition:
-    inset-inline-start var(--shifting-heading-duration, 700ms) ease-in-out,
-    top var(--shifting-heading-duration, 700ms) ease-in-out,
-    transform var(--shifting-heading-duration, 700ms) ease-in-out;
-  will-change: inset-inline-start, top, transform;
-}
-
-.shifting-heading > :is(h1, h2, h3, h4, h5, h6) {
-  max-width: 100%;
-  margin: 0;
-  overflow-wrap: anywhere;
-  text-wrap: balance;
-}
-
-.shifting-heading[data-shifting-heading-state='centered'] {
-  inset-inline-start: 50%;
-  top: 50%;
-  text-align: center;
-  transform: translate(-50%, -50%);
-  transform-origin: center;
-}
-
-:where([dir='rtl'])
-  .shifting-heading[data-shifting-heading-state='centered'] {
-  transform: translate(50%, -50%);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .shifting-heading {
-    transition-duration: 1ms;
-  }
-}
-</style>

package/components/thanks/ThanksContent.vue

@@ -1,12 +1,6 @@
 <script setup lang="ts">
 import type { MotionVariants, Variant } from '@vueuse/motion';
 
-import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
-
-defineOptions({
-  inheritAttrs: false,
-});
-
 const { animation } = defineProps({
   animation: {
     type: Boolean,
@@ -60,18 +54,10 @@ const getMotionProps = ({
     initial,
   };
 };
-
-const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'slidev-addon-thanks-content relative h-full w-full',
-);
 </script>
 
 <template>
-  <div
-    v-bind="forwardedAttrs()"
-    :class="className()"
-  >
-    <ThanksSquare
+  <ThanksSquare
     v-motion
     v-bind="getMotionProps({
       enter: {
@@ -85,9 +71,9 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
         y: -100,
       },
     })"
-    class="absolute w-[150px] h-[150px] rotate-45 top-[50%] left-[40%] z-10"
-    />
-    <ThanksSquare
+    class="alpha-thanks-content absolute w-[150px] h-[150px] rotate-45 top-[50%] left-[40%] z-10"
+  />
+  <ThanksSquare
     v-motion
     v-bind="getMotionProps({
       initial: {
@@ -105,9 +91,9 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
         }
       },
     })"
-    class="w-[100px] h-[100px] top-[20%] rotate-45 left-[48%] translate-x-[-50%] translate-y-[-50%] opacity-[0.4]"
-    />
-    <ThanksSquare
+    class="alpha-thanks-content w-[100px] h-[100px] top-[20%] rotate-45 left-[48%] translate-x-[-50%] translate-y-[-50%] opacity-[0.4]"
+  />
+  <ThanksSquare
     v-motion
     v-bind="getMotionProps({
       initial: {
@@ -125,9 +111,9 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
         }
       },
     })"
-    class="w-[100px] h-[100px] top-[45%] rotate-45 left-[22%] translate-x-[-50%] translate-y-[-50%] opacity-[0.4]"
-    />
-    <ThanksSquare
+    class="alpha-thanks-content w-[100px] h-[100px] top-[45%] rotate-45 left-[22%] translate-x-[-50%] translate-y-[-50%] opacity-[0.4]"
+  />
+  <ThanksSquare
     v-motion
     v-bind="getMotionProps({
       initial: {
@@ -145,9 +131,9 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
         }
       },
     })"
-    class="w-[100px] h-[100px] bottom-0 rotate-45 left-[48%] translate-x-[-50%] translate-y-[-50%] opacity-[0.4]"
-    />
-    <ThanksOutlineSquare
+    class="alpha-thanks-content w-[100px] h-[100px] bottom-0 rotate-45 left-[48%] translate-x-[-50%] translate-y-[-50%] opacity-[0.4]"
+  />
+  <ThanksOutlineSquare
     v-motion
     v-bind="getMotionProps({
       initial: {
@@ -165,9 +151,9 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
         },
       },
     })"
-    class="w-[120px] h-[120px] rotate-45 top-[25%] left-[31%]"
-    />
-    <ThanksOutlineSquare
+    class="alpha-thanks-content w-[120px] h-[120px] rotate-45 top-[25%] left-[31%]"
+  />
+  <ThanksOutlineSquare
     v-motion
     v-bind="getMotionProps({
       initial: {
@@ -185,9 +171,9 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
         },
       },
     })"
-    class="w-[70px] h-[70px] rotate-45 top-[52%] left-[30%]"
-    />
-    <ThanksOutlineSquare
+    class="alpha-thanks-content w-[70px] h-[70px] rotate-45 top-[52%] left-[30%]"
+  />
+  <ThanksOutlineSquare
     v-motion
     v-bind="getMotionProps({
       initial: {
@@ -205,31 +191,30 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
         },
       },
     })"
-    class="w-[100px] h-[100px] rotate-45 top-[42%] left-[43%]"
-    />
+    class="alpha-thanks-content w-[100px] h-[100px] rotate-45 top-[42%] left-[43%]"
+  />
 
-    <div
-      v-motion
-      v-bind="getMotionProps({
-        initial: {
-          x: -80,
-          opacity: 0,
-        },
-        enter: {
-          x: -130,
-          y: -46,
-          opacity: 1,
-          transition: {
-            delay: 2_800,
-            duration: 1_000,
-          }
-        },
-      })"
-      class="color-[#2b90b6] text-3xl absolute top-[50%] left-[69%] translate-x-[-50%] translate-y-[-50%]"
-    >
-      Thank You
-      <br />
-      for your attention!
-    </div>
+  <div
+    v-motion
+    v-bind="getMotionProps({
+      initial: {
+        x: -80,
+        opacity: 0,
+      },
+      enter: {
+        x: -130,
+        y: -46,
+        opacity: 1,
+        transition: {
+          delay: 2_800,
+          duration: 1_000,
+        }
+      },
+    })"
+    class="alpha-thanks-content color-[#2b90b6] text-3xl absolute top-[50%] left-[69%] translate-x-[-50%] translate-y-[-50%]"
+  >
+    Thank You
+    <br />
+    for your attention!
   </div>
 </template>

package/components/thanks/ThanksOutlineSquare.vue

@@ -6,7 +6,7 @@ defineOptions({
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'slidev-addon-thanks-outline-square absolute rounded-2xl border-2 border-color-cyan-500',
+  'alpha-thanks-outline-square absolute rounded-2xl border-2 border-color-cyan-500',
 );
 </script>
 

package/components/thanks/ThanksSquare.vue

@@ -6,7 +6,7 @@ defineOptions({
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'slidev-addon-thanks-square absolute bg-gradient-to-br from-cyan-500 to-blue-500 rounded-3xl',
+  'alpha-thanks-square absolute bg-gradient-to-br from-cyan-500 to-blue-500 rounded-3xl',
 );
 </script>
 

package/layouts/core/bg-center.vue

@@ -19,7 +19,7 @@ const style = computed(() => {
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'slidev-layout bg-center h-full grid place-content-center',
+  'alpha-bg-center slidev-layout bg-center h-full grid place-content-center',
 );
 </script>
 

package/layouts/core/table-of-contents.vue

@@ -13,7 +13,7 @@ defineProps({
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'slidev-layout default toc-layout',
+  'alpha-table-of-contents slidev-layout default toc-layout',
 );
 </script>
 

package/layouts/shifting-heading/shifting-intro.vue

@@ -1,41 +1,37 @@
 <script setup lang="ts">
 import { useSlideContext } from '@slidev/client';
-import { computed, Fragment, isVNode, useSlots, type VNode } from 'vue';
+import { ref, shallowRef, useSlots, watch, watchEffect } from 'vue';
 
+import { collectShiftingIntroNodes } from '../../utils/shiftingHeading/collectShiftingIntroNodes';
 import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
 
 defineOptions({
   inheritAttrs: false,
 });
 
+const context = useSlideContext();
 const slots = useSlots();
-const { $clicks } = useSlideContext();
+const { $clicks } = context;
 
-function flattenTopLevel(nodes: VNode[]): VNode[] {
-  return nodes.flatMap((node) => {
-    if (node.type === Fragment && Array.isArray(node.children))
-      return flattenTopLevel(node.children.filter(isVNode));
+const delayClass = ref('delay-600');
 
-    return node;
-  });
-}
+watch($clicks, (newVal, oldVal) => {
+  if (newVal > oldVal) {
+    delayClass.value = 'delay-600';
+  } else {
+    delayClass.value = 'delay-0';
+  }
+});
 
-const nodes = computed(() => {
-  const children = flattenTopLevel(slots.default?.() ?? []);
-  const titleIndex = children.findIndex((node) => node.type === 'h1');
+const nodes = shallowRef(collectShiftingIntroNodes([]));
 
-  return {
-    title: titleIndex >= 0 ? children[titleIndex] : null,
-    contents:
-      titleIndex >= 0
-        ? children.filter((_, index) => index !== titleIndex)
-        : children,
-  };
+watchEffect(() => {
+  const children = slots.default?.() || [];
+  nodes.value = collectShiftingIntroNodes(children);
 });
 
-const isRevealed = computed(() => !nodes.value.title || $clicks.value > 0);
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'slidev-layout shifting-intro-layout relative',
+  'alpha-shifting-intro slidev-layout shifting-intro-layout',
 );
 </script>
 
@@ -44,68 +40,41 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
     v-bind="forwardedAttrs()"
     :class="className()"
   >
+    <component
+      :is="nodes.title"
+      v-if="nodes.title"
+      aria-hidden="true"
+      class="op-0"
+    />
     <TransitionHeading
       v-if="nodes.title"
-      :center="!isRevealed"
-      :idle="isRevealed"
+      :idle="$clicks !== 0"
+      :center="$clicks === 0"
     >
       <component :is="nodes.title" />
     </TransitionHeading>
-
-    <VClickGap
-      v-if="nodes.title"
-      :size="1"
+    <div
+      v-click
+      class="hidden"
     />
-
     <div
-      class="shifting-intro-content"
-      :class="{ 'is-revealed': isRevealed }"
-      :aria-hidden="!isRevealed"
-      :inert="!isRevealed || undefined"
+      class="transition-all duration-1000"
+      :class="[
+        $clicks > 0 ? 'opacity-100' : 'opacity-0',
+        delayClass,
+      ]"
     >
-      <component
-        :is="content"
-        v-for="(content, index) in nodes.contents"
-        :key="content.key ?? index"
-      />
+      <template v-for="(content) in nodes.contents" :key="content.key">
+        <component
+          v-if="nodes.clickRef.has(content.key)"
+          :is="content.node"
+          v-click="nodes.clickRef.get(content.key)"
+        />
+        <component
+          v-else
+          :is="content.node"
+        />
+      </template>
     </div>
   </div>
 </template>
-
-<style>
-.shifting-intro-content {
-  box-sizing: border-box;
-  min-height: 100%;
-  padding-top: var(--shifting-heading-content-offset, 4.25rem);
-  visibility: hidden;
-  opacity: 0;
-  transition:
-    opacity var(--shifting-content-exit-duration, 250ms) ease-out,
-    visibility 0s linear var(--shifting-content-exit-duration, 250ms);
-}
-
-.shifting-intro-content.is-revealed {
-  visibility: visible;
-  opacity: 1;
-  transition:
-    opacity var(--shifting-content-duration, 700ms) ease-out
-      var(--shifting-content-delay, 450ms),
-    visibility 0s linear;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .shifting-intro-content,
-  .shifting-intro-content.is-revealed {
-    transition-duration: 1ms;
-    transition-delay: 0ms;
-  }
-}
-
-@media print {
-  .shifting-heading,
-  .shifting-intro-content,
-  .shifting-intro-content.is-revealed {
-    transition: none;
-  }
-}
-</style>

package/layouts/thanks/thanks.vue

@@ -6,7 +6,7 @@ defineOptions({
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'slidev-layout thanks relative',
+  'alpha-thanks slidev-layout thanks',
 );
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alphacifer/slidev-addon-theme",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "All Slidev addons for Alpha presentations",
   "type": "module",
   "keywords": [

package/utils/shiftingHeading/collectShiftingIntroNodes.ts

@@ -0,0 +1,74 @@
+import type { Directive, VNode } from 'vue';
+
+interface IShiftingIntroContent {
+  readonly key: number;
+  readonly node: VNode;
+}
+
+export interface IShiftingIntroNodes {
+  readonly title: VNode | null;
+  readonly clickRef: ReadonlyMap<number, number>;
+  readonly contents: readonly IShiftingIntroContent[];
+}
+
+const CLICK_DIRECTIVE_NAMES = new Set(['click', 'v-click', 'vClick']);
+
+const getDirectiveName = (directive: Directive): string | undefined => {
+  if (typeof directive === 'function') {
+    return directive.name;
+  }
+
+  if ('name' in directive && typeof directive.name === 'string') {
+    return directive.name;
+  }
+
+  return undefined;
+};
+
+const hasImplicitClickDirective = (node: VNode): boolean => {
+  return Boolean(
+    node.dirs?.some(({ dir, value }) => {
+      const name = getDirectiveName(dir);
+      return (
+        name !== undefined &&
+        CLICK_DIRECTIVE_NAMES.has(name) &&
+        value === undefined
+      );
+    }),
+  );
+};
+
+/**
+ * Separates the first heading from a shifting-intro slot and remaps implicit
+ * v-click directives after the layout's internal reveal click.
+ */
+export const collectShiftingIntroNodes = (
+  children: readonly VNode[],
+): IShiftingIntroNodes => {
+  let title: VNode | null = null;
+  let clickIndex = 1;
+  const clickRef = new Map<number, number>();
+  const contents: IShiftingIntroContent[] = [];
+
+  children.forEach((node, key) => {
+    if (title === null && node.type === 'h1') {
+      title = node;
+    } else {
+      contents.push({
+        key,
+        node,
+      });
+    }
+
+    if (hasImplicitClickDirective(node)) {
+      clickIndex += 1;
+      clickRef.set(key, clickIndex);
+    }
+  });
+
+  return {
+    title,
+    clickRef,
+    contents,
+  };
+};