lumina-slides 9.0.4 → 9.0.6

package/src/components/layouts/LayoutSteps.vue

@@ -1,108 +1,108 @@
-<template>
-    <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: 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)' }">
-                <LuminaElement :id="titleId" tag="h2" class="font-bold" :style="{
-                    fontFamily: 'var(--lumina-font-heading)',
-                    fontSize: 'var(--lumina-text-5xl)',
-                    marginBottom: 'var(--lumina-space-md)',
-                    letterSpacing: 'var(--lumina-tracking-tighter)',
-                    color: 'var(--lumina-color-text-safe, var(--lumina-color-text))'
-                }">
-                    {{ data.title }}
-                </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 }}
-                </LuminaElement>
-            </LuminaElement>
-
-            <!-- Steps Grid -->
-            <div :style="{
-                display: 'grid',
-                gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
-                gap: 'var(--lumina-space-xl)',
-                maxWidth: '72rem',
-                margin: '0 auto',
-                width: '100%'
-            }">
-                <LuminaElement v-for="(step, i) in data.steps" :key="i" :id="stepId(i)"
-                    :class="['glass-panel group relative overflow-hidden', step.class || '']" :style="{
-                        borderRadius: 'var(--lumina-card-radius)',
-                        padding: 'var(--lumina-card-padding)'
-                    }">
-                    <!-- Step Number -->
-                    <div :style="{
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 'var(--lumina-space-md)',
-                        marginBottom: 'var(--lumina-space-md)'
-                    }">
-                        <div class="flex items-center justify-center font-bold" :style="{
-                            width: 'var(--lumina-step-badge-size, 2.5rem)',
-                            height: 'var(--lumina-step-badge-size, 2.5rem)',
-                            fontSize: 'var(--lumina-step-font-size, 1rem)',
-                            background: 'linear-gradient(135deg, var(--lumina-color-primary), var(--lumina-color-secondary))',
-                            color: 'white',
-                            borderRadius: 'var(--lumina-radius-xl)',
-                            boxShadow: '0 4px 12px rgba(var(--lumina-color-primary-rgb), 0.4)'
-                        }">
-                            {{ step.step }}
-                        </div>
-                        <h3 class="font-bold" :style="{
-                            fontSize: 'var(--lumina-text-xl)',
-                            color: 'var(--lumina-surface-text, var(--lumina-color-text))'
-                        }">
-                            {{ step.title }}
-                        </h3>
-                    </div>
-
-                    <!-- Description -->
-                    <p v-if="step.description" :style="{
-                        color: 'var(--lumina-color-text-secondary)',
-                        lineHeight: 'var(--lumina-leading-relaxed)',
-                        fontSize: 'var(--lumina-text-base)',
-                        opacity: 0.8
-                    }">
-                        {{ step.description }}
-                    </p>
-
-                    <!-- Icon (optional) -->
-                    <div v-if="step.icon" class="absolute top-4 right-4" :style="{
-                        color: 'var(--lumina-color-primary)',
-                        opacity: 0.1,
-                        fontSize: 'var(--lumina-text-4xl)'
-                    }">
-                        <i :class="['ph-thin', step.icon.startsWith('ph-') ? step.icon : `ph-${step.icon}`]"></i>
-                    </div>
-                </LuminaElement>
-            </div>
-        </div>
-    </BaseSlide>
-</template>
-
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-import BaseSlide from '../base/BaseSlide.vue';
-import { resolveId } from '../../core/elementResolver';
-import { StoreKey } from '../../core/store';
-import type { SlideSteps } from '../../core/types';
-
-const props = defineProps<{
-    data: SlideSteps;
-    slideIndex?: number;
-}>();
-
-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>
+<template>
+    <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: 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)' }">
+                <LuminaElement :id="titleId" tag="h2" class="font-bold" :style="{
+                    fontFamily: 'var(--lumina-font-heading)',
+                    fontSize: 'var(--lumina-text-5xl)',
+                    marginBottom: 'var(--lumina-space-md)',
+                    letterSpacing: 'var(--lumina-tracking-tighter)',
+                    color: 'var(--lumina-color-text-safe, var(--lumina-color-text))'
+                }">
+                    {{ data.title }}
+                </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 }}
+                </LuminaElement>
+            </LuminaElement>
+
+            <!-- Steps Grid -->
+            <div :style="{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+                gap: 'var(--lumina-space-xl)',
+                maxWidth: '72rem',
+                margin: '0 auto',
+                width: '100%'
+            }">
+                <LuminaElement v-for="(step, i) in data.steps" :key="i" :id="stepId(i)"
+                    :class="['glass-panel group relative overflow-hidden', step.class || '']" :style="{
+                        borderRadius: 'var(--lumina-card-radius)',
+                        padding: 'var(--lumina-card-padding)'
+                    }">
+                    <!-- Step Number -->
+                    <div :style="{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 'var(--lumina-space-md)',
+                        marginBottom: 'var(--lumina-space-md)'
+                    }">
+                        <div class="flex items-center justify-center font-bold" :style="{
+                            width: 'var(--lumina-step-badge-size, 2.5rem)',
+                            height: 'var(--lumina-step-badge-size, 2.5rem)',
+                            fontSize: 'var(--lumina-step-font-size, 1rem)',
+                            background: 'linear-gradient(135deg, var(--lumina-color-primary), var(--lumina-color-secondary))',
+                            color: 'white',
+                            borderRadius: 'var(--lumina-radius-xl)',
+                            boxShadow: '0 4px 12px rgba(var(--lumina-color-primary-rgb), 0.4)'
+                        }">
+                            {{ step.step }}
+                        </div>
+                        <h3 class="font-bold" :style="{
+                            fontSize: 'var(--lumina-text-xl)',
+                            color: 'var(--lumina-surface-text, var(--lumina-color-text))'
+                        }">
+                            {{ step.title }}
+                        </h3>
+                    </div>
+
+                    <!-- Description -->
+                    <p v-if="step.description" :style="{
+                        color: 'var(--lumina-color-text-secondary)',
+                        lineHeight: 'var(--lumina-leading-relaxed)',
+                        fontSize: 'var(--lumina-text-base)',
+                        opacity: 0.8
+                    }">
+                        {{ step.description }}
+                    </p>
+
+                    <!-- Icon (optional) -->
+                    <div v-if="step.icon" class="absolute top-4 right-4" :style="{
+                        color: 'var(--lumina-color-primary)',
+                        opacity: 0.1,
+                        fontSize: 'var(--lumina-text-4xl)'
+                    }">
+                        <i :class="['ph-thin', step.icon.startsWith('ph-') ? step.icon : `ph-${step.icon}`]"></i>
+                    </div>
+                </LuminaElement>
+            </div>
+        </div>
+    </BaseSlide>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import BaseSlide from '../base/BaseSlide.vue';
+import { resolveId } from '../../core/elementResolver';
+import { StoreKey } from '../../core/store';
+import type { SlideSteps } from '../../core/types';
+
+const props = defineProps<{
+    data: SlideSteps;
+    slideIndex?: number;
+}>();
+
+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

@@ -1,54 +1,81 @@
-<template>
-    <component :is="href ? 'a' : 'div'" :href="href || undefined" :target="href ? (target || '_blank') : undefined"
-        :rel="href ? 'noopener noreferrer' : undefined"
-        :class="[containerClass, customClass, href && 'cursor-pointer hover:opacity-90 transition-opacity']"
-        :style="containerStyle">
-        <img :src="src" :alt="alt || ''" :class="[
-            'w-full h-full transition-opacity duration-700',
-            fill !== false ? 'object-cover' : 'object-contain',
-            roundedClass,
-            isLoaded ? 'opacity-100' : 'opacity-0'
-        ]" @load="onLoad" @error="onError" />
-    </component>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-
-const props = defineProps<{
-    src: string;
-    alt?: string;
-    fill?: boolean;
-    rounded?: string;
-    containerClass?: any;
-    containerStyle?: any;
-    href?: string;
-    target?: '_blank' | '_self';
-    class?: any;
-}>();
-
-const isLoaded = ref(false);
-const customClass = computed(() => props.class || '');
-
-const onLoad = () => {
-    isLoaded.value = true;
-};
-
-const onError = (e: any) => {
-    isLoaded.value = true;
-    e.target.src = 'https://placehold.co/800x600/1a1a1a/666?text=Image+Not+Found';
-};
-
-const roundedClass = computed(() => {
-    if (props.fill !== false && !props.rounded) return '';
-    const map: Record<string, string> = {
-        'none': 'rounded-none',
-        'sm': 'rounded-sm',
-        'md': 'rounded-md',
-        'lg': 'rounded-lg',
-        'xl': 'rounded-xl',
-        'full': 'rounded-full',
-    };
-    return map[props.rounded || 'lg'] || 'rounded-lg';
-});
-</script>
+<template>
+    <component :is="href ? 'a' : 'div'" :href="href || undefined" :target="href ? (target || '_blank') : undefined"
+        :rel="href ? 'noopener noreferrer' : undefined"
+        :class="[containerClass, customClass, href && 'cursor-pointer hover:opacity-90 transition-opacity']"
+        :style="containerStyle">
+        <img :src="src" :alt="alt || ''" :class="[
+            'w-full h-full transition-opacity duration-700',
+            objectFitClass,
+            roundedClass,
+            isLoaded ? 'opacity-100' : 'opacity-0'
+        ]" :style="imageStyle" @load="onLoad" @error="onError" />
+    </component>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+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);
+const customClass = computed(() => props.class || '');
+
+const onLoad = () => {
+    isLoaded.value = true;
+};
+
+const onError = (e: any) => {
+    isLoaded.value = true;
+    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> = {
+        'none': 'rounded-none',
+        'sm': 'rounded-sm',
+        'md': 'rounded-md',
+        'lg': 'rounded-lg',
+        'xl': 'rounded-xl',
+        'full': 'rounded-full',
+    };
+    return map[props.rounded || 'lg'] || 'rounded-lg';
+});
+</script>