slidev-theme-tud 0.0.7 → 0.0.8

package/example.mdc

@@ -58,8 +58,7 @@ layout: "section"
 ## Using `section` or `section-blue`
 
 ---
-layout: "section-n"
-variant: 1
+layout: "section-1"
 ---
 
 
@@ -72,11 +71,10 @@ You can customize the colors within the TUD color set.
 
 ::detail::
 
-This slide uses `section-n` with `variant: 1`.
+This slide uses the `section-1` layout.
 
 ---
-layout: "section-n"
-variant: 2
+layout: "section-2"
 ---
 
 
@@ -88,12 +86,11 @@ contextual information.
 
 You can customize the colors within the TUD color set.
 
-This slide uses `section-n` with `variant: 2`.
+This slide uses the `section-2` layout.
 
 
 ---
-layout: "section-n"
-variant: 3
+layout: "section-3"
 ---
 
 
@@ -107,37 +104,34 @@ You can customize the colors within the TUD color set.
 
 ::detail::
 
-This slide uses `section-n` with `variant: 3`.
+This slide uses the `section-3` layout.
 
 ---
-layout: "section-n"
-variant: 4
+layout: "section-4"
 ---
 
 
 # Another section
 
-## Using `section-n` with `variant: 4`
+## Using `section-4`
 
 ---
-layout: "section-n"
-variant: 5
+layout: "section-5"
 ---
 
 
 # Another section
 
-## Using `section-n` with `variant: 5`
+## Using `section-5`
 
 ---
-layout: "section-n"
-variant: 6
+layout: "section-6"
 ---
 
 
 # Another section
 
-## Using `section-n` with `variant: 6`
+## Using `section-6`
 
 ---
 

package/global-top.vue

@@ -59,7 +59,9 @@ const progressProps = {
   emptyFirst: true,
   scale: 'clicks',
   disable: (layout: string) =>
-    new Set(['cover', 'cover-blue', 'cover-white', 'section', 'section-blue', 'section-white', 'section-n']).has(layout),
+    new Set(['cover', 'cover-blue', 'cover-white', 'section', 'section-blue', 'section-white', 'section-n',
+      'section-1', 'section-2', 'section-3', 'section-4', 'section-5', 'section-6',
+    ]).has(layout),
 }
 </script>
 

package/layouts/README.md

@@ -1,2 +1,6 @@
 Note that `cover.vue` and `section.vue` are only symbolic links
 to the `cover-blue.vue` and `section-blue.vue` layouts, respectively.
+
+`section-n.vue` is internal: it implements all six section compositions,
+parameterized by its `variant` prop. Decks use the public `section-1.vue` …
+`section-6.vue` layouts, which are thin aliases that preset that prop.

package/layouts/section-1.vue

@@ -0,0 +1,13 @@
+<!-- Alias: for the `section-n` layout with `variant: 1`. -->
+<!-- Any other property (e.g. `colors`) falls through to `section-n`. -->
+<template>
+  <SectionN :variant="1">
+    <template v-for="(_, name) in $slots" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}" />
+    </template>
+  </SectionN>
+</template>
+
+<script setup lang="ts">
+import SectionN from './section-n.vue'
+</script>

package/layouts/section-2.vue

@@ -0,0 +1,13 @@
+<!-- Alias: for the `section-n` layout with `variant: 2`. -->
+<!-- Any other property (e.g. `colors`) falls through to `section-n`. -->
+<template>
+  <SectionN :variant="2">
+    <template v-for="(_, name) in $slots" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}" />
+    </template>
+  </SectionN>
+</template>
+
+<script setup lang="ts">
+import SectionN from './section-n.vue'
+</script>

package/layouts/section-3.vue

@@ -0,0 +1,13 @@
+<!-- Alias: for the `section-n` layout with `variant: 3`. -->
+<!-- Any other property (e.g. `colors`) falls through to `section-n`. -->
+<template>
+  <SectionN :variant="3">
+    <template v-for="(_, name) in $slots" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}" />
+    </template>
+  </SectionN>
+</template>
+
+<script setup lang="ts">
+import SectionN from './section-n.vue'
+</script>

package/layouts/section-4.vue

@@ -0,0 +1,13 @@
+<!-- Alias: for the `section-n` layout with `variant: 4`. -->
+<!-- Any other property (e.g. `colors`) falls through to `section-n`. -->
+<template>
+  <SectionN :variant="4">
+    <template v-for="(_, name) in $slots" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}" />
+    </template>
+  </SectionN>
+</template>
+
+<script setup lang="ts">
+import SectionN from './section-n.vue'
+</script>

package/layouts/section-5.vue

@@ -0,0 +1,13 @@
+<!-- Alias: for the `section-n` layout with `variant: 5`. -->
+<!-- Any other property (e.g. `colors`) falls through to `section-n`. -->
+<template>
+  <SectionN :variant="5">
+    <template v-for="(_, name) in $slots" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}" />
+    </template>
+  </SectionN>
+</template>
+
+<script setup lang="ts">
+import SectionN from './section-n.vue'
+</script>

package/layouts/section-6.vue

@@ -0,0 +1,13 @@
+<!-- Alias: for the `section-n` layout with `variant: 6`. -->
+<!-- Any other property (e.g. `colors`) falls through to `section-n`. -->
+<template>
+  <SectionN :variant="6">
+    <template v-for="(_, name) in $slots" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}" />
+    </template>
+  </SectionN>
+</template>
+
+<script setup lang="ts">
+import SectionN from './section-n.vue'
+</script>

package/layouts/section-n.vue

@@ -1,3 +1,5 @@
+<!-- Internal: use the `section-1` … `section-6` layouts instead,
+     which alias this one with the matching `variant`. -->
 <template>
   <div class="h-full">
     <div class="slidev-layout section-n" :class="`section-${variant}`" :style="{ '--section-text': textCss }">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-tud",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "description": "Corporate TUD theme for SliDev",
   "keywords": [