@alphacifer/slidev-addon-theme 0.0.9 → 0.0.11

package/components/core/thanks/{ThanksContent.vue → SquareThanks.vue}

@@ -1,11 +1,35 @@
 <script setup lang="ts">
 import type { MotionVariants, Variant } from '@vueuse/motion';
+import { computed, useSlots } from 'vue';
 
-const { animation } = defineProps({
+import SquareThanksContent from './SquareThanksContent.vue';
+
+const { animation, color } = defineProps({
   animation: {
     type: Boolean,
     default: true,
   },
+  color: {
+    type: String,
+    default: undefined,
+  },
+});
+
+const slots = useSlots();
+
+const hasExplicitContent = computed(() => {
+  if (!slots.default) {
+    return false;
+  }
+
+  const nodes = slots.default();
+  return nodes.some(
+    (node) =>
+      typeof node.type === 'object' &&
+      node.type !== null &&
+      'name' in node.type &&
+      node.type.name === 'SquareThanksContent',
+  );
 });
 
 const begin = {
@@ -71,7 +95,7 @@ const getMotionProps = ({
         y: -100,
       },
     })"
-    class="alpha-thanks-content absolute w-[150px] h-[150px] rotate-45 top-[50%] left-[40%] z-10"
+    class="alpha-square-thanks-decoration absolute w-37.5 h-37.5 rotate-45 top-[50%] left-[40%] z-10"
   />
   <ThanksSquare
     v-motion
@@ -91,7 +115,7 @@ const getMotionProps = ({
         }
       },
     })"
-    class="alpha-thanks-content w-[100px] h-[100px] top-[20%] rotate-45 left-[48%] translate-x-[-50%] translate-y-[-50%] opacity-[0.4]"
+    class="alpha-square-thanks-decoration w-25 h-25 top-[20%] rotate-45 left-[48%] translate-x-[-50%] translate-y-[-50%] opacity-[0.4]"
   />
   <ThanksSquare
     v-motion
@@ -111,7 +135,7 @@ const getMotionProps = ({
         }
       },
     })"
-    class="alpha-thanks-content w-[100px] h-[100px] top-[45%] rotate-45 left-[22%] translate-x-[-50%] translate-y-[-50%] opacity-[0.4]"
+    class="alpha-square-thanks-decoration w-25 h-25 top-[45%] rotate-45 left-[22%] translate-x-[-50%] translate-y-[-50%] opacity-[0.4]"
   />
   <ThanksSquare
     v-motion
@@ -131,7 +155,7 @@ const getMotionProps = ({
         }
       },
     })"
-    class="alpha-thanks-content w-[100px] h-[100px] bottom-0 rotate-45 left-[48%] translate-x-[-50%] translate-y-[-50%] opacity-[0.4]"
+    class="alpha-square-thanks-decoration w-25 h-25 bottom-0 rotate-45 left-[48%] translate-x-[-50%] translate-y-[-50%] opacity-[0.4]"
   />
   <ThanksOutlineSquare
     v-motion
@@ -151,7 +175,7 @@ const getMotionProps = ({
         },
       },
     })"
-    class="alpha-thanks-content w-[120px] h-[120px] rotate-45 top-[25%] left-[31%]"
+    class="alpha-square-thanks-decoration w-30 h-30 rotate-45 top-[25%] left-[31%]"
   />
   <ThanksOutlineSquare
     v-motion
@@ -171,7 +195,7 @@ const getMotionProps = ({
         },
       },
     })"
-    class="alpha-thanks-content w-[70px] h-[70px] rotate-45 top-[52%] left-[30%]"
+    class="alpha-square-thanks-decoration w-17.5 h-17.5 rotate-45 top-[52%] left-[30%]"
   />
   <ThanksOutlineSquare
     v-motion
@@ -191,30 +215,11 @@ const getMotionProps = ({
         },
       },
     })"
-    class="alpha-thanks-content w-[100px] h-[100px] rotate-45 top-[42%] left-[43%]"
+    class="alpha-square-thanks-decoration w-25 h-25 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="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>
+  <slot v-if="hasExplicitContent" />
+  <SquareThanksContent v-else :animation="animation" :color="color">
+    <slot> Thank You<br>for your attention! </slot>
+  </SquareThanksContent>
 </template>

package/components/core/thanks/SquareThanksContent.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { MotionVariants, Variant } from '@vueuse/motion';
+
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'SquareThanksContent',
+});
+
+const props = withDefaults(
+  defineProps<{
+    readonly animation?: boolean;
+    readonly color?: string;
+  }>(),
+  {
+    animation: true,
+    color: undefined,
+  },
+);
+
+interface IGetMotionPropsParams {
+  enter: Variant;
+  initial: Variant;
+}
+
+const getMotionProps = ({
+  enter,
+  initial,
+}: IGetMotionPropsParams): MotionVariants<string> => {
+  if (props.animation) {
+    return { enter, initial };
+  }
+
+  const state = { ...enter, transition: { duration: 0 } };
+  return { enter: state, initial: state };
+};
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-square-thanks-content absolute top-[50%] left-[69%] translate-x-[-50%] translate-y-[-50%] text-3xl text-(--alpha-square-thanks-content)',
+);
+</script>
+
+<template>
+  <div
+    v-motion
+    v-bind="{
+      ...forwardedAttrs(),
+      ...getMotionProps({
+        initial: { x: -80, opacity: 0 },
+        enter: {
+          x: -130,
+          y: -46,
+          opacity: 1,
+          transition: { delay: 2_800, duration: 1_000 },
+        },
+      }),
+    }"
+    :class="className()"
+    :style="
+      props.color && !props.color.includes('--alpha-square-thanks-content')
+        ? { '--alpha-square-thanks-content': props.color }
+        : undefined
+    "
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+@layer alpha-theme-tokens {
+  .alpha-square-thanks-content :deep(h1),
+  .alpha-square-thanks-content :deep(h2),
+  .alpha-square-thanks-content :deep(h3),
+  .alpha-square-thanks-content :deep(h4),
+  .alpha-square-thanks-content :deep(h5),
+  .alpha-square-thanks-content :deep(h6),
+  .alpha-square-thanks-content :deep(p),
+  .alpha-square-thanks-content :deep(div) {
+    margin: 0;
+    padding: 0;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    color: inherit;
+  }
+}
+</style>

package/components/core/thanks/ThanksOutlineSquare.vue

@@ -6,13 +6,10 @@ defineOptions({
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-thanks-outline-square absolute rounded-2xl border-2 border-color-cyan-500',
+  'alpha-thanks-outline-square absolute rounded-2xl border-2 border-(--alpha-thanks-outline-stroke)',
 );
 </script>
 
 <template>
-  <div
-    v-bind="forwardedAttrs()"
-    :class="className()"
-  />
+  <div v-bind="forwardedAttrs()" :class="className()" />
 </template>

package/components/core/thanks/ThanksSquare.vue

@@ -6,13 +6,10 @@ defineOptions({
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-thanks-square absolute bg-gradient-to-br from-cyan-500 to-blue-500 rounded-3xl',
+  'alpha-thanks-square absolute rounded-3xl',
 );
 </script>
 
 <template>
-  <div
-    v-bind="forwardedAttrs()"
-    :class="className()"
-  />
+  <div v-bind="forwardedAttrs()" :class="className()" />
 </template>

package/components/core/thanks/style.css

@@ -0,0 +1,30 @@
+/* Color defaults shared by this component family. */
+@layer alpha-theme-tokens {
+  :root {
+    --alpha-square-thanks-content: #2b90b6;
+    --alpha-thanks-square-start: #06b6d4;
+    --alpha-thanks-square-end: #2563eb;
+    --alpha-thanks-outline-stroke: #06b6d4;
+  }
+}
+
+.alpha-square-thanks-content h1,
+.alpha-square-thanks-content h2,
+.alpha-square-thanks-content h3,
+.alpha-square-thanks-content h4,
+.alpha-square-thanks-content h5,
+.alpha-square-thanks-content h6,
+.alpha-square-thanks-content p,
+.alpha-square-thanks-content div {
+  padding: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+
+.alpha-thanks-square:not([class*='bg-']) {
+  background-image: linear-gradient(to bottom right, var(--alpha-thanks-square-start), var(--alpha-thanks-square-end));
+}