@alphacifer/slidev-addon-theme 0.0.1 → 0.0.3

package/README.md

@@ -18,7 +18,7 @@ addons:
 ## Core
 
 - Components: `Date`, `QnA`, `Quote`, `ReflectedTitle`, `Speaker`
-- Layouts: `bg-center`, `table-of-contents`
+- Layouts: `arc-toc`, `bg-center`, `table-of-contents`
 
 ## Shifting heading
 
@@ -40,6 +40,9 @@ pnpm --filter @alphacifer/slidev-addon-theme dev
 The preview deck is defined in `slides.md` and loads this package locally as a
 Slidev addon.
 
+The preview deck includes rendered arc TOC examples for every supported item
+count from one through seven.
+
 Build the preview without opening a browser:
 
 ```bash

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>