@sp-days-framework/slidev-theme-sykehuspartner 1.0.0

package/layouts/fact.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="slidev-layout fact">
+    <div v-if="showLogo" class="logo-container">
+      <div class="logo-image logo"></div>
+    </div>
+    <div class="my-auto">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  logo: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const showLogo = computed(() => {
+  if ($slidev?.configs?.frontmatter?.logo !== undefined) {
+    return $slidev.configs.frontmatter.logo
+  }
+  return props.logo
+})
+</script>
+
+<style scoped>
+.fact {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* Logo styling moved to global layout.css */
+</style>

package/layouts/full.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="slidev-layout full">
+    <div v-if="showLogo" class="logo-container">
+      <div class="logo-image logo"></div>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  logo: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const showLogo = computed(() => {
+  if ($slidev?.configs?.frontmatter?.logo !== undefined) {
+    return $slidev.configs.frontmatter.logo
+  }
+  return props.logo
+})
+</script>
+
+<style scoped>
+.full {
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+</style>

package/layouts/image-left.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="slidev-layout image-left">
+    <div v-if="showLogo" class="logo-container">
+      <div class="logo-image logo"></div>
+    </div>
+    <div class="split-layout">
+      <!-- Image container on the left -->
+      <div class="image-container" :style="{ width: imageRatioStyle }">
+        <div class="image-wrapper" :style="imageContainerStyle">
+          <img
+            v-if="props.imageSrc"
+            :src="getImageUrl(props.imageSrc)"
+            :style="combinedImageStyle"
+            class="side-image"
+          />
+        </div>
+      </div>
+
+      <!-- Content container on the right -->
+      <div class="content-container" :style="{ width: contentRatioStyle }">
+        <div class="content-layout">
+          <div ref="headerRef" class="header"></div>
+          <div ref="contentRef" class="content-wrapper">
+            <slot />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, onMounted, onBeforeUnmount } from "vue";
+import { getImageUrl, getImageContainerStyle } from "../utils/layoutHelper";
+import { useHeaderContentSplit } from "../utils/headerContentSplitter";
+
+const props = defineProps({
+  imageSrc: String,
+  imageScale: {
+    type: String,
+    default: "100%",
+  },
+  imageAlign: {
+    type: String,
+    default: "center",
+  },
+  imageRatio: {
+    type: String,
+    default: "50%",
+  },
+  logo: {
+    type: Boolean,
+    default: true,
+  },
+  textAlignment: {
+    type: String,
+    default: "center",
+    validator: (value) => ["top", "center", "bottom"].includes(value),
+  },
+});
+
+// Calculate the image ratio style
+const imageRatioStyle = computed(() => {
+  // Ensure it's a percentage string
+  const ratio = props.imageRatio.endsWith("%")
+    ? props.imageRatio
+    : `${parseFloat(props.imageRatio)}%`;
+  return ratio;
+});
+
+// Calculate the content ratio style (remaining space)
+const contentRatioStyle = computed(() => {
+  const imageRatio = parseFloat(imageRatioStyle.value);
+  return `${100 - imageRatio}%`;
+});
+
+// Get container alignment style based on imageAlign
+const imageContainerStyle = computed(() => {
+  return getImageContainerStyle(props.imageAlign);
+});
+
+// Calculate the combined image style including scale
+const combinedImageStyle = computed(() => {
+  const style = {
+    height: "100%", // Always fill height
+    width: "auto",
+    maxWidth: "none", // Override default max-width
+    objectFit: "contain", // Use 'contain' to prevent cropping by default
+    objectPosition: getObjectPosition(props.imageAlign),
+  };
+
+  // Apply scaling if specified
+  if (props.imageScale) {
+    if (props.imageScale.endsWith("%")) {
+      const scale = parseFloat(props.imageScale) / 100;
+      style.height = `${scale * 100}%`;
+    } else if (!isNaN(Number(props.imageScale))) {
+      const scale = Number(props.imageScale);
+      style.height = `${scale * 100}%`;
+    }
+  }
+
+  return style;
+});
+
+// Helper function to convert alignment to object-position value
+function getObjectPosition(align) {
+  switch (align /* Lines 93-102 omitted */) {
+  }
+}
+
+const showLogo = computed(() => {
+  if ($slidev?.configs?.frontmatter?.logo !== undefined) {
+    return $slidev.configs.frontmatter.logo;
+  }
+  return props.logo;
+});
+
+// Compute content alignment style based on textAlignment prop
+const contentAlignmentStyle = computed(() => {
+  switch (props.textAlignment) {
+    case "top":
+      return "flex-start";
+    case "bottom":
+      return "flex-end";
+    case "center":
+    default:
+      return "center";
+  }
+});
+
+// Setup for header content split
+const headerRef = ref(null);
+const contentRef = ref(null);
+
+// Use our utility to handle the header/content split
+const { setupHeaderSplit } = useHeaderContentSplit(headerRef, contentRef);
+let headerSplitter;
+
+onMounted(() => {
+  // Setup the header splitter when component is mounted
+  headerSplitter = setupHeaderSplit();
+});
+
+onBeforeUnmount(() => {
+  // Clean up when component is unmounted
+  if (headerSplitter) {
+    headerSplitter.destroy();
+  }
+});
+</script>
+
+<style scoped>
+.image-left {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+}
+
+.split-layout {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+.image-container {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.image-wrapper {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.side-image {
+  display: block;
+}
+
+.content-container {
+  height: 100%;
+  overflow: auto;
+}
+
+.content-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.content-wrapper {
+  padding: 1.5rem 2rem;
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: v-bind(contentAlignmentStyle);
+}
+
+.logo-container {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  z-index: 10;
+}
+
+.header {
+  padding: 0 2rem;
+  padding-top: 1.5rem;
+  margin-bottom: 0;
+  width: 100%;
+}
+
+.header:empty {
+  display: none;
+}
+
+/* Logo styling moved to global layout.css */
+</style>

package/layouts/image-right.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="slidev-layout image-right">
+    <div v-if="showLogo" class="logo-container custom-position">
+      <div class="logo-image logo"></div>
+    </div>
+    <div class="split-layout">
+      <!-- Content container on the left -->
+      <div class="content-container" :style="{ width: contentRatioStyle }">
+        <div class="content-layout">
+          <div ref="headerRef" class="header"></div>
+          <div ref="contentRef" class="content-wrapper">
+            <slot />
+          </div>
+        </div>
+      </div>
+
+      <!-- Image container on the right -->
+      <div class="image-container" :style="{ width: imageRatioStyle }">
+        <div class="image-wrapper" :style="imageContainerStyle">
+          <img
+            v-if="props.imageSrc"
+            :src="getImageUrl(props.imageSrc)"
+            :style="combinedImageStyle"
+            class="side-image"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, onMounted, onBeforeUnmount } from "vue";
+import { getImageUrl, getImageContainerStyle } from "../utils/layoutHelper";
+import { useHeaderContentSplit } from "../utils/headerContentSplitter";
+
+const props = defineProps({
+  imageSrc: String,
+  imageScale: {
+    type: String,
+    default: "100%",
+  },
+  imageAlign: {
+    type: String,
+    default: "center",
+  },
+  imageRatio: {
+    type: String,
+    default: "50%",
+  },
+  logo: {
+    type: Boolean,
+    default: false,
+  },
+  textAlignment: {
+    type: String,
+    default: "center",
+    validator: (value) => ["top", "center", "bottom"].includes(value),
+  },
+});
+
+// Calculate the image ratio style
+const imageRatioStyle = computed(() => {
+  // Ensure it's a percentage string
+  const ratio = props.imageRatio.endsWith("%")
+    ? props.imageRatio
+    : `${parseFloat(props.imageRatio)}%`;
+  return ratio;
+});
+
+// Calculate the content ratio style (remaining space)
+const contentRatioStyle = computed(() => {
+  const imageRatio = parseFloat(imageRatioStyle.value);
+  return `${100 - imageRatio}%`;
+});
+
+// Get container alignment style based on imageAlign
+const imageContainerStyle = computed(() => {
+  return getImageContainerStyle(props.imageAlign);
+});
+
+// Calculate the combined image style including scale
+const combinedImageStyle = computed(() => {
+  const style = {
+    height: "100%", // Always fill height
+    width: "auto",
+    maxWidth: "none", // Override default max-width
+    objectFit: "contain", // Use 'contain' to prevent cropping by default
+    objectPosition: getObjectPosition(props.imageAlign),
+  };
+
+  // Apply scaling if specified
+  if (props.imageScale) {
+    if (props.imageScale.endsWith("%")) {
+      const scale = parseFloat(props.imageScale) / 100;
+      style.height = `${scale * 100}%`;
+    } else if (!isNaN(Number(props.imageScale))) {
+      const scale = Number(props.imageScale);
+      style.height = `${scale * 100}%`;
+    }
+  }
+
+  return style;
+});
+
+// Helper function to convert alignment to object-position value
+function getObjectPosition(align) {
+  switch (align /* Lines 93-102 omitted */) {
+  }
+}
+
+const showLogo = computed(() => {
+  if ($slidev?.configs?.frontmatter?.logo !== undefined) {
+    return $slidev.configs.frontmatter.logo;
+  }
+  return props.logo;
+});
+
+// Compute content alignment style based on textAlignment prop
+const contentAlignmentStyle = computed(() => {
+  switch (props.textAlignment) {
+    case "top":
+      return "flex-start";
+    case "bottom":
+      return "flex-end";
+    case "center":
+    default:
+      return "center";
+  }
+});
+
+// Setup for header content split
+const headerRef = ref(null);
+const contentRef = ref(null);
+
+// Use our utility to handle the header/content split
+const { setupHeaderSplit } = useHeaderContentSplit(headerRef, contentRef);
+let headerSplitter;
+
+onMounted(() => {
+  // Setup the header splitter when component is mounted
+  headerSplitter = setupHeaderSplit();
+});
+
+onBeforeUnmount(() => {
+  // Clean up when component is unmounted
+  if (headerSplitter) {
+    headerSplitter.destroy();
+  }
+});
+</script>
+
+<style scoped>
+.image-right {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+}
+
+.split-layout {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+.image-container {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.image-wrapper {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.side-image {
+  display: block;
+}
+
+.content-container {
+  height: 100%;
+  overflow: auto;
+}
+
+.content-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.content-wrapper {
+  padding: 1.5rem 2rem;
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: v-bind(contentAlignmentStyle);
+}
+
+.logo-container.custom-position {
+  bottom: 1rem;
+  left: 1rem;
+}
+
+.header {
+  padding: 0 2rem;
+  padding-top: 1.5rem;
+  margin-bottom: 0;
+  width: 100%;
+}
+
+.header:empty {
+  display: none;
+}
+</style>

package/layouts/image.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="slidev-layout image-layout">
+    <div v-if="showLogo" class="logo-container">
+      <div class="logo-image logo"></div>
+    </div>
+    <!-- Background image mode - image covers entire slide -->
+    <div v-if="useBackground" class="image-background" :style="bgStyle">
+      <div class="content">
+        <slot />
+      </div>
+    </div>
+    
+    <!-- Foreground image mode - text at top, image below -->
+    <div v-else class="foreground-mode-container">
+      <!-- Content area at the top -->
+      <div class="content-area">
+        <slot />
+      </div>
+      
+      <!-- Image area below the content -->
+      <div class="image-container" :style="containerStyle">
+        <img 
+          v-if="props.imageSrc" 
+          :src="getImageUrl(props.imageSrc)" 
+          :style="imageStyle" 
+          class="foreground-image" 
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { getImageStyle, getForegroundImageStyle, getImageContainerStyle, getImageUrl } from '../utils/layoutHelper'
+
+const props = defineProps({
+  imageSrc: String,
+  imageScale: {
+    type: String,
+    default: '70%'  // Default to 70% scale for foreground mode
+  },
+  imageAlign: {
+    type: String,
+    default: 'center'
+  },
+  imageBackgroundMode: {
+    type: Boolean,
+    default: true
+  },
+  logo: {
+    type: Boolean,
+    default: false
+  },
+})
+
+// Determine whether to use background mode or foreground image
+const useBackground = computed(() => props.imageBackgroundMode)
+
+// Get background style if using background mode
+const bgStyle = computed(() => getImageStyle(props.imageSrc, props.imageScale, props.imageAlign))
+
+// Get foreground image style if using foreground image
+const imageStyle = computed(() => getForegroundImageStyle(props.imageScale))
+
+// Get container style for alignment of foreground image
+const containerStyle = computed(() => getImageContainerStyle(props.imageAlign))
+
+// Other utility computed props
+const flexRow = computed(() => props.position === 'left' ? 'flex-row-reverse' : 'flex-row')
+const textItems = computed(() => props.position === 'left' ? 'items-start' : 'items-end')
+const textAlign = computed(() => props.position === 'left' ? 'text-left' : 'text-right')
+
+const showLogo = computed(() => {
+  if ($slidev?.configs?.frontmatter?.logo !== undefined) {
+    return $slidev.configs.frontmatter.logo
+  }
+  return props.logo
+})
+</script>
+
+<style scoped>
+.image-layout {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Background image mode - full screen with content at bottom */
+.image-background {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  overflow: hidden;
+}
+
+/* Foreground image mode - text at top, image below */
+.foreground-mode-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.content-area {
+  padding: 1.5rem 2rem;
+  z-index: 20;
+}
+
+.image-container {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 1rem;
+}
+
+.foreground-image {
+  max-height: 100%;
+  max-width: 100%;
+  object-fit: contain;
+}
+
+.content {
+  padding: 1.5rem;
+  background-color: rgba(0, 0, 0, 0.164);
+  border-radius: 0.5rem;
+}
+
+.dark .content {
+  background-color: rgba(255, 255, 255, 0.116);
+}
+
+/* Using global logo container styling */
+
+/* Logo styling moved to global layout.css */
+</style>