fix: cleaning up layouts

Author: gureckis

layouts/side-title.vue

@@ -1,9 +1,7 @@
-<script setup lang="ts">
-import { computed, useSlots } from 'vue'
+<script setup lang="js">
+import { computed } from 'vue'
 import { compute_alignment, compute_column_size } from '../layoutHelper'
 
-const slots = useSlots()
-
 const props = defineProps({
   side: {
     default: 'l',
@@ -55,15 +53,15 @@ const colorscheme = computed(() => {
     <p>
       There are three parameters: <code>color</code>, <code>columns</code> and <code>align</code>. Currently:
       <code>color: {{ props.color }}</code
-      >, <code>columns: {{ props.columns }}</code> and <code>align: {{ props.align }}</code
+      >, <code>columns: {{ props.titlewidth }}</code> and <code>align: {{ props.align }}</code
       >.
     </p>
     <p>The "slots" of the page are default and <code>:: content ::</code></p>
     <p>
-      Options for <code>columns</code> are divided into 12 column units. So with <code>columns: is-1-11</code> the left
-      column is 1/12 wide and the the right columns is 11/12 wide. The component admits a short had of only specifying
-      the left column (<code>columns: is-1</code> does the same thing). In addition there are short hands like
-      <code>columns: is-one-quarter</code> which resolves to <code>is-3-9</code>, etc...
+      Options for <code>titlewidth</code> are divided into 12 column units. So with <code>titlewidth: is-1-11</code> the
+      left column is 1/12 wide and the the right columns is 11/12 wide. The component admits a short had of only
+      specifying the left column (<code>titlewidth: is-1</code> does the same thing). In addition there are short hands
+      like <code>titlewidth: is-one-quarter</code> which resolves to <code>is-3-9</code>, etc...
     </p>
     <p>
       Here are a bunch of examples:

layouts/top-title-two-cols.vue

@@ -1,9 +1,7 @@
-<script setup lang="ts">
-import { computed, useSlots } from 'vue'
+<script setup lang="js">
+import { computed } from 'vue'
 import { compute_alignment, compute_column_size } from '../layoutHelper'
 
-const slots = useSlots()
-
 const props = defineProps({
   columns: {
     default: 'is-one-half',
@@ -59,7 +57,7 @@ const colorscheme = computed(() => {
 
     <p>The <code>color</code> parameter determines color of the title.</p>
   </div>
-  <template v-else>
+  <div v-else>
     <div class="flex flex-col h-full w-full">
       <div class="w-full h-fit min-h-13 pt-2 pb-2 slidecolor" :class="colorscheme">
         <div class="slidev-layout toptitle title p-0 ml-6 mr-6 mt-auto mb-auto" :class="alignment.t">
@@ -80,7 +78,7 @@ const colorscheme = computed(() => {
         <slot name="default" />
       </div>
     </div>
-  </template>
+  </div>
 </template>
 
 <style>

layouts/top-title.vue

@@ -1,8 +1,6 @@
-<script setup lang="ts">
-import { computed, useSlots } from 'vue'
-import { compute_alignment, compute_column_size } from '../layoutHelper'
-
-const slots = useSlots()
+<script setup lang="js">
+import { computed } from 'vue'
+import { compute_alignment } from '../layoutHelper'
 
 const props = defineProps({
   color: {
@@ -41,7 +39,7 @@ const colorscheme = computed(() => {
 
     <p>The <code>color</code> parameter determines color of the title.</p>
   </div>
-  <template v-else>
+  <div v-else>
     <div class="flex flex-col h-full w-full">
       <div class="w-full h-fit min-h-13 pt-2 pb-2 slidecolor" :class="colorscheme">
         <div class="slidev-layout toptitle title p-0 pt-0 ml-6 mr-6 mt-auto mb-auto" :class="alignment">
@@ -55,7 +53,7 @@ const colorscheme = computed(() => {
         <slot name="default" />
       </div>
     </div>
-  </template>
+  </div>
 </template>
 
 <style>

layouts/two-cols-title.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="js">
 import { computed, useSlots } from 'vue'
 import { compute_alignment, compute_column_size } from '../layoutHelper'
 

layouts/two-cols.vue

@@ -1,9 +1,7 @@
-<script setup lang="ts">
-import { computed, useSlots } from 'vue'
+<script setup lang="js">
+import { computed } from 'vue'
 import { compute_alignment, compute_column_size } from '../layoutHelper'
 
-const slots = useSlots()
-
 const props = defineProps({
   columns: {
     default: 'is-one-half',