lumina-slides 9.0.3 → 9.0.5

package/src/components/layouts/LayoutFlex.vue

@@ -6,10 +6,11 @@
                 :style="mainFlexStyle">
                 <template v-for="(element, i) in data.elements" :key="i">
                     <!-- Image Element -->
-                    <LuminaElement v-if="element.type === 'image'" :id="elemId(i)" :class="['flex-item', getSizeClass(element.size)]" :style="getElementStyle(element)">
+                    <LuminaElement v-if="element.type === 'image'" :id="elemId(i)" :class="['flex-item', getSizeClass(element.size), element.class]" :style="{ ...getElementStyle(element), ...(element.style || {}) }">
                         <FlexImage :src="element.src" :alt="element.alt"
-                            :fill="element.fill" :rounded="element.rounded"
-                            container-class="w-full h-full min-h-0" :container-style="{}" :class="element.class" />
+                            :fill="element.fill" :fit="element.fit" :position="element.position"
+                            :rounded="element.rounded" :href="element.href" :target="element.target"
+                            container-class="w-full h-full min-h-0" :container-style="{}" :style="element.style" />
                     </LuminaElement>
 
                     <!-- Video Element -->
@@ -22,12 +23,39 @@
                             :object-fit="element.fill !== false ? 'cover' : 'contain'" />
                     </LuminaElement>
 
-                    <!-- Content Container -->
+                    <!-- HTML Element -->
+                    <LuminaElement v-else-if="element.type === 'html'" :id="elemId(i)" :class="['flex-item', getSizeClass(element.size), element.class]" :style="{ ...getElementStyle(element), ...(element.style || {}) }">
+                        <FlexHtml :html="element.html" :class="element.class" :style="element.style" />
+                    </LuminaElement>
+
+                    <!-- Content Container (supports nested content) -->
                     <LuminaElement v-else-if="element.type === 'content'" :id="elemId(i)"
-                        :class="['flex-item flex flex-col h-full', getSizeClass(element.size)]"
+                        :class="['flex-item flex h-full', element.direction === 'horizontal' ? 'flex-row' : 'flex-col', getSizeClass(element.size), element.class]"
                         :style="getContentStyle(element)">
                         <template v-for="(child, j) in element.elements" :key="j">
-                            <LuminaElement :id="childId(i, j)">
+                            <!-- Nested content containers (recursive) -->
+                            <LuminaElement v-if="child.type === 'content'" :id="childId(i, j)"
+                                :class="['flex', (child as FlexElementContent).direction === 'horizontal' ? 'flex-row' : 'flex-col']"
+                                :style="getNestedContentStyle(child as FlexElementContent)">
+                                <template v-for="(grandchild, k) in (child as FlexElementContent).elements" :key="k">
+                                    <LuminaElement :id="resolveId(props.data, slideIndex.value, ['elements', i, 'elements', j, 'elements', k])">
+                                        <!-- Recursively handle nested content -->
+                                        <LuminaElement v-if="grandchild.type === 'content'" 
+                                            :class="['flex', (grandchild as FlexElementContent).direction === 'horizontal' ? 'flex-row' : 'flex-col']"
+                                            :style="getNestedContentStyle(grandchild as FlexElementContent)">
+                                            <template v-for="(greatGrandchild, l) in (grandchild as FlexElementContent).elements" :key="l">
+                                                <LuminaElement :id="resolveId(props.data, slideIndex.value, ['elements', i, 'elements', j, 'elements', k, 'elements', l])">
+                                                    <component :is="getChildComponent(greatGrandchild.type)" v-bind="greatGrandchild" @action="handleAction" />
+                                                </LuminaElement>
+                                            </template>
+                                        </LuminaElement>
+                                        <!-- Regular grandchild elements -->
+                                        <component v-else :is="getChildComponent(grandchild.type)" v-bind="grandchild" @action="handleAction" />
+                                    </LuminaElement>
+                                </template>
+                            </LuminaElement>
+                            <!-- Regular child elements -->
+                            <LuminaElement v-else :id="childId(i, j)">
                                 <component :is="getChildComponent(child.type)" v-bind="child" @action="handleAction" />
                             </LuminaElement>
                         </template>
@@ -60,6 +88,7 @@ import FlexOrdered from '../parts/FlexOrdered.vue';
 import FlexTimeline from '../parts/FlexTimeline.vue';
 import FlexStepper from '../parts/FlexStepper.vue';
 import FlexSpacer from '../parts/FlexSpacer.vue';
+import FlexHtml from '../parts/FlexHtml.vue';
 import { bus } from '../../core/events';
 import {
     spacingVarMap,
@@ -102,13 +131,23 @@ const getElementStyle = (element: FlexElement & { size?: FlexSize }) => {
 
 const getContentStyle = (element: FlexElementContent & { size?: FlexSize }) => {
     const isVertical = props.data.direction === 'vertical';
+    const contentDirection = element.direction || 'vertical';
     return {
         ...getFlexItemStyle(element, isVertical),
         ...getFlexContainerStyle(element),
         // Force full height/width for alignment space
         height: isVertical ? 'auto' : '100%',
         width: isVertical ? '100%' : 'auto',
-        minHeight: isVertical ? 'auto' : '100%'
+        minHeight: isVertical ? 'auto' : (contentDirection === 'vertical' ? '100%' : 'auto'),
+        ...(element.style || {})
+    };
+};
+
+const getNestedContentStyle = (element: FlexElementContent) => {
+    return {
+        ...getFlexContainerStyle(element),
+        width: '100%',
+        ...(element.style || {})
     };
 };
 
@@ -136,6 +175,7 @@ const getChildComponent = (type: string) => {
         'timeline': FlexTimeline,
         'stepper': FlexStepper,
         'spacer': FlexSpacer,
+        'html': FlexHtml,
     };
     return components[type] || 'div';
 };

package/src/components/layouts/LayoutSteps.vue

@@ -2,10 +2,10 @@
     <BaseSlide :data="data" :slide-index="slideIndex">
         <div :class="['w-full flex flex-col justify-center', data.sizing === 'container' ? 'min-h-full py-12 lg:py-16' : 'min-h-screen']"
             :style="{ padding: 'var(--lumina-space-xl) var(--lumina-space-3xl)' }">
-            <!-- Header -->
+            <!-- Header: wrapper (header) + title and subtitle as separate controllable elements -->
             <LuminaElement :id="headerId" :class="['text-center max-w-4xl mx-auto', data.class || '']"
                 :style="{ marginBottom: 'var(--lumina-space-2xl)' }">
-                <h2 class="font-bold" :style="{
+                <LuminaElement :id="titleId" tag="h2" class="font-bold" :style="{
                     fontFamily: 'var(--lumina-font-heading)',
                     fontSize: 'var(--lumina-text-5xl)',
                     marginBottom: 'var(--lumina-space-md)',
@@ -13,14 +13,14 @@
                     color: 'var(--lumina-color-text-safe, var(--lumina-color-text))'
                 }">
                     {{ data.title }}
-                </h2>
-                <p v-if="data.subtitle" :style="{
+                </LuminaElement>
+                <LuminaElement v-if="data.subtitle" :id="subtitleId" tag="p" :style="{
                     color: 'var(--lumina-color-text-safe, var(--lumina-color-text))',
                     opacity: 0.9,
                     fontSize: 'var(--lumina-text-xl)'
                 }">
                     {{ data.subtitle }}
-                </p>
+                </LuminaElement>
             </LuminaElement>
 
             <!-- Steps Grid -->
@@ -102,5 +102,7 @@ const props = defineProps<{
 const store = inject(StoreKey);
 const slideIndex = computed(() => props.slideIndex ?? store?.state.currentIndex ?? 0);
 const headerId = computed(() => resolveId(props.data, slideIndex.value, ['header']));
+const titleId = computed(() => resolveId(props.data, slideIndex.value, ['title']));
+const subtitleId = computed(() => resolveId(props.data, slideIndex.value, ['subtitle']));
 const stepId = (i: number) => resolveId(props.data, slideIndex.value, ['steps', i]);
 </script>

package/src/components/parts/FlexHtml.vue

@@ -0,0 +1,65 @@
+<template>
+    <div 
+        v-html="html" 
+        :class="customClass"
+        :style="computedStyle"
+    ></div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+    html: string;
+    class?: string;
+    style?: Record<string, string>;
+}>();
+
+const customClass = computed(() => props.class || '');
+
+const computedStyle = computed(() => {
+    return {
+        width: '100%',
+        ...props.style,
+    };
+});
+</script>
+
+<style scoped>
+/* Ensure HTML content respects container boundaries */
+:deep(*) {
+    max-width: 100%;
+}
+
+/* Style common HTML elements to match Lumina theme */
+:deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
+    color: var(--lumina-color-text);
+    font-family: var(--lumina-font-heading);
+    margin-top: var(--lumina-space-md);
+    margin-bottom: var(--lumina-space-sm);
+}
+
+:deep(p) {
+    color: var(--lumina-color-text);
+    line-height: var(--lumina-leading-relaxed);
+    margin-bottom: var(--lumina-space-md);
+}
+
+:deep(a) {
+    color: var(--lumina-color-primary);
+    text-decoration: none;
+}
+
+:deep(a:hover) {
+    text-decoration: underline;
+}
+
+:deep(ul), :deep(ol) {
+    margin-left: var(--lumina-space-lg);
+    margin-bottom: var(--lumina-space-md);
+}
+
+:deep(li) {
+    margin-bottom: var(--lumina-space-xs);
+}
+</style>

package/src/components/parts/FlexImage.vue

@@ -5,10 +5,10 @@
         :style="containerStyle">
         <img :src="src" :alt="alt || ''" :class="[
             'w-full h-full transition-opacity duration-700',
-            fill !== false ? 'object-cover' : 'object-contain',
+            objectFitClass,
             roundedClass,
             isLoaded ? 'opacity-100' : 'opacity-0'
-        ]" @load="onLoad" @error="onError" />
+        ]" :style="imageStyle" @load="onLoad" @error="onError" />
     </component>
 </template>
 
@@ -19,12 +19,15 @@ const props = defineProps<{
     src: string;
     alt?: string;
     fill?: boolean;
+    fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+    position?: string;
     rounded?: string;
     containerClass?: any;
     containerStyle?: any;
     href?: string;
     target?: '_blank' | '_self';
     class?: any;
+    style?: Record<string, string>;
 }>();
 
 const isLoaded = ref(false);
@@ -39,6 +42,30 @@ const onError = (e: any) => {
     e.target.src = 'https://placehold.co/800x600/1a1a1a/666?text=Image+Not+Found';
 };
 
+const objectFitClass = computed(() => {
+    if (props.fit) {
+        const fitMap: Record<string, string> = {
+            'cover': 'object-cover',
+            'contain': 'object-contain',
+            'fill': 'object-fill',
+            'none': 'object-none',
+            'scale-down': 'object-scale-down',
+        };
+        return fitMap[props.fit] || 'object-cover';
+    }
+    return props.fill !== false ? 'object-cover' : 'object-contain';
+});
+
+const imageStyle = computed(() => {
+    const style: Record<string, string> = {
+        ...props.style,
+    };
+    if (props.position) {
+        style.objectPosition = props.position;
+    }
+    return style;
+});
+
 const roundedClass = computed(() => {
     if (props.fill !== false && !props.rounded) return '';
     const map: Record<string, string> = {