lumina-slides 9.0.4 → 9.0.6

package/src/components/layouts/LayoutFlex.vue

@@ -1,172 +1,212 @@
-<template>
-    <BaseSlide :data="data" :slide-index="slideIndex">
-        <div class="flex-layout w-full h-screen flex flex-col overflow-y-auto lg:overflow-hidden"
-            :style="containerStyle">
-            <div :class="['flex-1 flex w-full min-h-full lg:h-full', directionClass]"
-                :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)">
-                        <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" />
-                    </LuminaElement>
-
-                    <!-- Video Element -->
-                    <LuminaElement v-else-if="element.type === 'video'" :id="elemId(i)"
-                        :class="['flex-item', getSizeClass(element.size), element.class]"
-                        :style="getElementStyle(element)">
-                        <VideoPlayer :class="getRoundedClass(element.rounded, element.fill)" :src="element.src"
-                            :poster="element.poster" :autoplay="element.autoplay ?? false" :loop="element.loop ?? false"
-                            :muted="element.muted ?? false" :controls="element.controls ?? true"
-                            :object-fit="element.fill !== false ? 'cover' : 'contain'" />
-                    </LuminaElement>
-
-                    <!-- Content Container -->
-                    <LuminaElement v-else-if="element.type === 'content'" :id="elemId(i)"
-                        :class="['flex-item flex flex-col h-full', getSizeClass(element.size)]"
-                        :style="getContentStyle(element)">
-                        <template v-for="(child, j) in element.elements" :key="j">
-                            <LuminaElement :id="childId(i, j)">
-                                <component :is="getChildComponent(child.type)" v-bind="child" @action="handleAction" />
-                            </LuminaElement>
-                        </template>
-                    </LuminaElement>
-
-                    <!-- Top-level elements (title, text, bullets, etc.) -->
-                    <LuminaElement v-else :id="elemId(i)" :class="['flex-item', getSizeClass(element.size)]"
-                        :style="{ ...getTopLevelStyle(), width: data.direction === 'vertical' ? '100%' : 'auto' }">
-                        <component :is="getChildComponent(element.type)" v-bind="element" @action="handleAction" />
-                    </LuminaElement>
-                </template>
-            </div>
-        </div>
-    </BaseSlide>
-</template>
-
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-import BaseSlide from '../base/BaseSlide.vue';
-import VideoPlayer from '../base/VideoPlayer.vue';
-import { resolveId } from '../../core/elementResolver';
-import { StoreKey } from '../../core/store';
-import type { SlideFlex, FlexElement, FlexSize, FlexElementContent } from '../../core/types';
-import FlexImage from '../parts/FlexImage.vue';
-import FlexTitle from '../parts/FlexTitle.vue';
-import FlexText from '../parts/FlexText.vue';
-import FlexButton from '../parts/FlexButton.vue';
-import FlexBullets from '../parts/FlexBullets.vue';
-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 { bus } from '../../core/events';
-import {
-    spacingVarMap,
-    getSizeClass,
-    getFlexItemStyle,
-    getFlexContainerStyle,
-    getTopLevelStyle,
-    getFlexSlideMainStyle,
-    getRoundedClass
-} from '../../composables/useFlexLayout';
-
-const props = defineProps<{
-    data: SlideFlex;
-    slideIndex?: number;
-}>();
-
-const emit = defineEmits(['action']);
-const store = inject(StoreKey);
-const slideIndex = computed(() => props.slideIndex ?? store?.state.currentIndex ?? 0);
-const elemId = (i: number) => resolveId(props.data, slideIndex.value, ['elements', i]);
-const childId = (i: number, j: number) => resolveId(props.data, slideIndex.value, ['elements', i, 'elements', j]);
-
-const containerStyle = computed(() => ({
-    padding: spacingVarMap[props.data.padding || 'none'],
-}));
-
-const directionClass = computed(() =>
-    props.data.direction === 'vertical' ? 'flex-col' : 'flex-col lg:flex-row'
-);
-
-const mainFlexStyle = computed(() => ({
-    gap: spacingVarMap[props.data.gap || 'none'],
-    ...getFlexSlideMainStyle(props.data.direction, props.data.halign, props.data.valign),
-}));
-
-// Wrapper for shared logic requiring vertical flag
-const getElementStyle = (element: FlexElement & { size?: FlexSize }) => {
-    return getFlexItemStyle(element, props.data.direction === 'vertical');
-};
-
-const getContentStyle = (element: FlexElementContent & { size?: FlexSize }) => {
-    const isVertical = props.data.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%'
-    };
-};
-
-const handleAction = (payload: any) => {
-    emit('action', payload);
-    bus.emit('action', payload);
-};
-
-// ============================================================================
-// CHILD ELEMENT COMPONENTS - All using CSS variables
-// ============================================================================
-
-
-// Child components extracted to ../parts/
-
-const getChildComponent = (type: string) => {
-    const components: Record<string, any> = {
-        'title': FlexTitle,
-        'text': FlexText,
-        'image': FlexImage,
-        'video': VideoPlayer,
-        'bullets': FlexBullets,
-        'ordered': FlexOrdered,
-        'button': FlexButton,
-        'timeline': FlexTimeline,
-        'stepper': FlexStepper,
-        'spacer': FlexSpacer,
-    };
-    return components[type] || 'div';
-};
-</script>
-
-<style scoped>
-.flex-layout {
-    min-height: 100vh;
-}
-
-@media (max-width: 1023px) {
-    .flex-item {
-        flex: 0 0 auto !important;
-        width: 100% !important;
-        max-width: 100% !important;
-        max-height: none !important;
-        min-height: auto !important;
-        height: auto !important;
-    }
-
-    /* Images in stacked flex should have a reasonable height */
-    .flex-item:has(img),
-    .flex-item img {
-        height: 40vh !important;
-        min-height: 300px !important;
-    }
-
-    .flex-layout {
-        overflow-y: auto !important;
-        height: auto !important;
-        min-height: 100vh;
-    }
-}
-</style>
+<template>
+    <BaseSlide :data="data" :slide-index="slideIndex">
+        <div class="flex-layout w-full h-screen flex flex-col overflow-y-auto lg:overflow-hidden"
+            :style="containerStyle">
+            <div :class="['flex-1 flex w-full min-h-full lg:h-full', directionClass]"
+                :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), element.class]" :style="{ ...getElementStyle(element), ...(element.style || {}) }">
+                        <FlexImage :src="element.src" :alt="element.alt"
+                            :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 -->
+                    <LuminaElement v-else-if="element.type === 'video'" :id="elemId(i)"
+                        :class="['flex-item', getSizeClass(element.size), element.class]"
+                        :style="getElementStyle(element)">
+                        <VideoPlayer :class="getRoundedClass(element.rounded, element.fill)" :src="element.src"
+                            :poster="element.poster" :autoplay="element.autoplay ?? false" :loop="element.loop ?? false"
+                            :muted="element.muted ?? false" :controls="element.controls ?? true"
+                            :object-fit="element.fill !== false ? 'cover' : 'contain'" />
+                    </LuminaElement>
+
+                    <!-- 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 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">
+                            <!-- 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>
+                    </LuminaElement>
+
+                    <!-- Top-level elements (title, text, bullets, etc.) -->
+                    <LuminaElement v-else :id="elemId(i)" :class="['flex-item', getSizeClass(element.size)]"
+                        :style="{ ...getTopLevelStyle(), width: data.direction === 'vertical' ? '100%' : 'auto' }">
+                        <component :is="getChildComponent(element.type)" v-bind="element" @action="handleAction" />
+                    </LuminaElement>
+                </template>
+            </div>
+        </div>
+    </BaseSlide>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import BaseSlide from '../base/BaseSlide.vue';
+import VideoPlayer from '../base/VideoPlayer.vue';
+import { resolveId } from '../../core/elementResolver';
+import { StoreKey } from '../../core/store';
+import type { SlideFlex, FlexElement, FlexSize, FlexElementContent } from '../../core/types';
+import FlexImage from '../parts/FlexImage.vue';
+import FlexTitle from '../parts/FlexTitle.vue';
+import FlexText from '../parts/FlexText.vue';
+import FlexButton from '../parts/FlexButton.vue';
+import FlexBullets from '../parts/FlexBullets.vue';
+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,
+    getSizeClass,
+    getFlexItemStyle,
+    getFlexContainerStyle,
+    getTopLevelStyle,
+    getFlexSlideMainStyle,
+    getRoundedClass
+} from '../../composables/useFlexLayout';
+
+const props = defineProps<{
+    data: SlideFlex;
+    slideIndex?: number;
+}>();
+
+const emit = defineEmits(['action']);
+const store = inject(StoreKey);
+const slideIndex = computed(() => props.slideIndex ?? store?.state.currentIndex ?? 0);
+const elemId = (i: number) => resolveId(props.data, slideIndex.value, ['elements', i]);
+const childId = (i: number, j: number) => resolveId(props.data, slideIndex.value, ['elements', i, 'elements', j]);
+
+const containerStyle = computed(() => ({
+    padding: spacingVarMap[props.data.padding || 'none'],
+}));
+
+const directionClass = computed(() =>
+    props.data.direction === 'vertical' ? 'flex-col' : 'flex-col lg:flex-row'
+);
+
+const mainFlexStyle = computed(() => ({
+    gap: spacingVarMap[props.data.gap || 'none'],
+    ...getFlexSlideMainStyle(props.data.direction, props.data.halign, props.data.valign),
+}));
+
+// Wrapper for shared logic requiring vertical flag
+const getElementStyle = (element: FlexElement & { size?: FlexSize }) => {
+    return getFlexItemStyle(element, props.data.direction === 'vertical');
+};
+
+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' : (contentDirection === 'vertical' ? '100%' : 'auto'),
+        ...(element.style || {})
+    };
+};
+
+const getNestedContentStyle = (element: FlexElementContent) => {
+    return {
+        ...getFlexContainerStyle(element),
+        width: '100%',
+        ...(element.style || {})
+    };
+};
+
+const handleAction = (payload: any) => {
+    emit('action', payload);
+    bus.emit('action', payload);
+};
+
+// ============================================================================
+// CHILD ELEMENT COMPONENTS - All using CSS variables
+// ============================================================================
+
+
+// Child components extracted to ../parts/
+
+const getChildComponent = (type: string) => {
+    const components: Record<string, any> = {
+        'title': FlexTitle,
+        'text': FlexText,
+        'image': FlexImage,
+        'video': VideoPlayer,
+        'bullets': FlexBullets,
+        'ordered': FlexOrdered,
+        'button': FlexButton,
+        'timeline': FlexTimeline,
+        'stepper': FlexStepper,
+        'spacer': FlexSpacer,
+        'html': FlexHtml,
+    };
+    return components[type] || 'div';
+};
+</script>
+
+<style scoped>
+.flex-layout {
+    min-height: 100vh;
+}
+
+@media (max-width: 1023px) {
+    .flex-item {
+        flex: 0 0 auto !important;
+        width: 100% !important;
+        max-width: 100% !important;
+        max-height: none !important;
+        min-height: auto !important;
+        height: auto !important;
+    }
+
+    /* Images in stacked flex should have a reasonable height */
+    .flex-item:has(img),
+    .flex-item img {
+        height: 40vh !important;
+        min-height: 300px !important;
+    }
+
+    .flex-layout {
+        overflow-y: auto !important;
+        height: auto !important;
+        min-height: 100vh;
+    }
+}
+</style>

package/src/components/layouts/LayoutStatement.vue

@@ -3,9 +3,10 @@
     <div
       :class="['flex flex-col justify-center items-center text-center relative', data.sizing === 'container' ? 'h-full' : 'min-h-screen']"
       :style="{ paddingTop: 'var(--lumina-space-xl)', paddingLeft: 'var(--lumina-space-xl)', paddingRight: 'var(--lumina-space-xl)', paddingBottom: 'calc(var(--lumina-space-xl) + var(--lumina-safe-area-bottom))' }">
-      <div :class="[data.class || '', 'max-w-5xl z-10']">
+      <div :class="[data.class || '', 'flex flex-col items-center max-w-5xl z-10']">
         <!-- Tag -->
-        <LuminaElement v-if="data.tag" :id="tagId" tag="span" class="inline-block rounded-full font-medium uppercase" :style="{
+        <LuminaElement v-if="data.tag" :id="tagId" tag="span" class="rounded-full font-medium uppercase" :style="{
+          display: 'inline-block',
           color: 'var(--lumina-color-primary)',
           border: '1px solid var(--lumina-color-border)',
           backgroundColor: 'rgba(var(--lumina-color-text-rgb), 0.05)',
@@ -24,6 +25,7 @@
 
         <!-- Subtitle -->
         <LuminaElement v-if="data.subtitle" :id="subtitleId" tag="p" class="max-w-3xl mx-auto" :style="{
+          display: 'block',
           color: 'var(--lumina-color-text-safe, var(--lumina-color-text))',
           opacity: 0.8,
           fontWeight: 'normal',
@@ -57,6 +59,7 @@ const titleId = computed(() => resolveId(props.data, slideIndex.value, ['title']
 const subtitleId = computed(() => resolveId(props.data, slideIndex.value, ['subtitle']));
 
 const titleStyle = computed(() => ({
+  display: 'block',
   fontSize: props.data.sizing === 'container'
     ? 'var(--lumina-text-5xl)'
     : 'clamp(var(--lumina-text-4xl), 10vw, var(--lumina-text-7xl))',