lumina-slides 9.0.4 → 9.0.6

package/src/components/layouts/LayoutFeatures.vue

@@ -1,123 +1,123 @@
-<template>
-    <BaseSlide :data="data" :slide-index="slideIndex">
-        <div :class="[
-            'features-root w-full max-w-full flex flex-col justify-center overflow-x-hidden',
-            data.sizing === 'container' ? 'min-h-full' : 'min-h-screen'
-        ]">
-            <!-- Header: wrapper (header) + title and description as separate controllable elements -->
-            <LuminaElement :id="headerId" :class="[data.class || '', 'text-center lg:text-left max-w-6xl min-w-0']"
-                :style="{ marginBottom: 'var(--lumina-space-2xl)' }">
-                <LuminaElement :id="titleId" tag="h2" class="font-bold break-words" :style="{
-                    fontFamily: 'var(--lumina-font-heading)',
-                    fontSize: data.sizing === 'container' ? 'var(--lumina-text-3xl)' : 'var(--lumina-text-5xl)',
-                    marginBottom: 'var(--lumina-space-md)',
-                    letterSpacing: 'var(--lumina-tracking-tighter)',
-                    color: 'var(--lumina-color-text-safe, var(--lumina-color-text))',
-                    textShadow: '0 2px 10px rgba(0,0,0,0.1)'
-                }">
-                    {{ data.title }}
-                </LuminaElement>
-                <LuminaElement v-if="data.description" :id="descriptionId" tag="p" class="break-words" :style="{
-                    color: 'var(--lumina-color-text-safe, var(--lumina-color-text))',
-                    opacity: 0.9,
-                    fontSize: data.sizing === 'container' ? 'var(--lumina-text-sm)' : 'var(--lumina-text-xl)'
-                }">
-                    {{ data.description }}
-                </LuminaElement>
-            </LuminaElement>
-
-            <!-- Grid -->
-            <div :class="['features-grid', data.sizing !== 'container' ? 'features-grid--multi' : '']">
-                <LuminaElement v-for="(feature, i) in data.features" :key="i" :id="featureId(i)"
-                    :class="['glass-panel group min-w-0', feature.class || '']" :style="{
-                        borderRadius: 'var(--lumina-card-radius)',
-                        padding: data.sizing === 'container' ? 'var(--lumina-space-lg)' : 'var(--lumina-card-padding)',
-                        borderTop: '1px solid var(--lumina-color-border-subtle)',
-                        transition: 'all var(--lumina-transition-duration) var(--lumina-transition-easing)'
-                    }">
-                    <!-- Icon -->
-                    <div class="flex items-center justify-center group-hover:scale-110 shrink-0" :style="{
-                        color: 'white',
-                        background: 'linear-gradient(135deg, var(--lumina-color-primary) 0%, var(--lumina-color-secondary) 100%)',
-                        width: data.sizing === 'container' ? 'var(--lumina-space-xl)' : 'var(--lumina-space-2xl)',
-                        height: data.sizing === 'container' ? 'var(--lumina-space-xl)' : 'var(--lumina-space-2xl)',
-                        borderRadius: 'var(--lumina-radius-xl)',
-                        marginBottom: data.sizing === 'container' ? 'var(--lumina-space-md)' : 'var(--lumina-space-lg)',
-                        fontSize: 'var(--lumina-text-xl)',
-                        boxShadow: '0 4px 12px rgba(var(--lumina-color-primary-rgb), 0.3)',
-                        transition: 'all var(--lumina-transition-duration) var(--lumina-transition-easing)'
-                    }">
-                        <i
-                            :class="['ph-thin', (feature.icon || 'star').startsWith('ph-') ? feature.icon : `ph-${feature.icon || 'star'}`]"></i>
-                    </div>
-                    <!-- Title -->
-                    <h3 class="font-bold break-words" :style="{
-                        color: 'var(--lumina-surface-text, var(--lumina-color-text))',
-                        fontSize: data.sizing === 'container' ? 'var(--lumina-text-lg)' : 'var(--lumina-text-2xl)',
-                        marginBottom: 'var(--lumina-space-sm)'
-                    }">
-                        {{ feature.title }}
-                    </h3>
-                    <!-- Description (support both desc and description) -->
-                    <p class="break-words" :style="{
-                        color: 'var(--lumina-color-text-secondary)',
-                        fontSize: data.sizing === 'container' ? 'var(--lumina-text-sm)' : 'var(--lumina-text-base)',
-                        lineHeight: 'var(--lumina-leading-relaxed)',
-                        opacity: 0.8
-                    }">
-                        {{ feature.desc || feature.description || '' }}
-                    </p>
-                </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 { SlideFeatures } from '../../core/types';
-
-const props = defineProps<{
-    data: SlideFeatures;
-    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 descriptionId = computed(() => resolveId(props.data, slideIndex.value, ['description']));
-const featureId = (i: number) => resolveId(props.data, slideIndex.value, ['features', i]);
-</script>
-
-<style scoped>
-.features-root {
-    padding: var(--lumina-space-xl) var(--lumina-space-3xl);
-}
-@media (max-width: 1023px) {
-    .features-root { padding-left: var(--lumina-space-xl); padding-right: var(--lumina-space-xl); }
-}
-@media (max-width: 639px) {
-    .features-root { padding: var(--lumina-space-lg) var(--lumina-space-md); }
-}
-
-.features-grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--lumina-space-md);
-}
-.features-grid--multi {
-    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
-    gap: var(--lumina-space-lg);
-}
-@media (max-width: 639px) {
-    .features-grid--multi {
-        grid-template-columns: 1fr;
-        gap: var(--lumina-space-md);
-    }
-}
-</style>
+<template>
+    <BaseSlide :data="data" :slide-index="slideIndex">
+        <div :class="[
+            'features-root w-full max-w-full flex flex-col justify-center overflow-x-hidden',
+            data.sizing === 'container' ? 'min-h-full' : 'min-h-screen'
+        ]">
+            <!-- Header: wrapper (header) + title and description as separate controllable elements -->
+            <LuminaElement :id="headerId" :class="[data.class || '', 'text-center lg:text-left max-w-6xl min-w-0']"
+                :style="{ marginBottom: 'var(--lumina-space-2xl)' }">
+                <LuminaElement :id="titleId" tag="h2" class="font-bold break-words" :style="{
+                    fontFamily: 'var(--lumina-font-heading)',
+                    fontSize: data.sizing === 'container' ? 'var(--lumina-text-3xl)' : 'var(--lumina-text-5xl)',
+                    marginBottom: 'var(--lumina-space-md)',
+                    letterSpacing: 'var(--lumina-tracking-tighter)',
+                    color: 'var(--lumina-color-text-safe, var(--lumina-color-text))',
+                    textShadow: '0 2px 10px rgba(0,0,0,0.1)'
+                }">
+                    {{ data.title }}
+                </LuminaElement>
+                <LuminaElement v-if="data.description" :id="descriptionId" tag="p" class="break-words" :style="{
+                    color: 'var(--lumina-color-text-safe, var(--lumina-color-text))',
+                    opacity: 0.9,
+                    fontSize: data.sizing === 'container' ? 'var(--lumina-text-sm)' : 'var(--lumina-text-xl)'
+                }">
+                    {{ data.description }}
+                </LuminaElement>
+            </LuminaElement>
+
+            <!-- Grid -->
+            <div :class="['features-grid', data.sizing !== 'container' ? 'features-grid--multi' : '']">
+                <LuminaElement v-for="(feature, i) in data.features" :key="i" :id="featureId(i)"
+                    :class="['glass-panel group min-w-0', feature.class || '']" :style="{
+                        borderRadius: 'var(--lumina-card-radius)',
+                        padding: data.sizing === 'container' ? 'var(--lumina-space-lg)' : 'var(--lumina-card-padding)',
+                        borderTop: '1px solid var(--lumina-color-border-subtle)',
+                        transition: 'all var(--lumina-transition-duration) var(--lumina-transition-easing)'
+                    }">
+                    <!-- Icon -->
+                    <div class="flex items-center justify-center group-hover:scale-110 shrink-0" :style="{
+                        color: 'white',
+                        background: 'linear-gradient(135deg, var(--lumina-color-primary) 0%, var(--lumina-color-secondary) 100%)',
+                        width: data.sizing === 'container' ? 'var(--lumina-space-xl)' : 'var(--lumina-space-2xl)',
+                        height: data.sizing === 'container' ? 'var(--lumina-space-xl)' : 'var(--lumina-space-2xl)',
+                        borderRadius: 'var(--lumina-radius-xl)',
+                        marginBottom: data.sizing === 'container' ? 'var(--lumina-space-md)' : 'var(--lumina-space-lg)',
+                        fontSize: 'var(--lumina-text-xl)',
+                        boxShadow: '0 4px 12px rgba(var(--lumina-color-primary-rgb), 0.3)',
+                        transition: 'all var(--lumina-transition-duration) var(--lumina-transition-easing)'
+                    }">
+                        <i
+                            :class="['ph-thin', (feature.icon || 'star').startsWith('ph-') ? feature.icon : `ph-${feature.icon || 'star'}`]"></i>
+                    </div>
+                    <!-- Title -->
+                    <h3 class="font-bold break-words" :style="{
+                        color: 'var(--lumina-surface-text, var(--lumina-color-text))',
+                        fontSize: data.sizing === 'container' ? 'var(--lumina-text-lg)' : 'var(--lumina-text-2xl)',
+                        marginBottom: 'var(--lumina-space-sm)'
+                    }">
+                        {{ feature.title }}
+                    </h3>
+                    <!-- Description (support both desc and description) -->
+                    <p class="break-words" :style="{
+                        color: 'var(--lumina-color-text-secondary)',
+                        fontSize: data.sizing === 'container' ? 'var(--lumina-text-sm)' : 'var(--lumina-text-base)',
+                        lineHeight: 'var(--lumina-leading-relaxed)',
+                        opacity: 0.8
+                    }">
+                        {{ feature.desc || feature.description || '' }}
+                    </p>
+                </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 { SlideFeatures } from '../../core/types';
+
+const props = defineProps<{
+    data: SlideFeatures;
+    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 descriptionId = computed(() => resolveId(props.data, slideIndex.value, ['description']));
+const featureId = (i: number) => resolveId(props.data, slideIndex.value, ['features', i]);
+</script>
+
+<style scoped>
+.features-root {
+    padding: var(--lumina-space-xl) var(--lumina-space-3xl);
+}
+@media (max-width: 1023px) {
+    .features-root { padding-left: var(--lumina-space-xl); padding-right: var(--lumina-space-xl); }
+}
+@media (max-width: 639px) {
+    .features-root { padding: var(--lumina-space-lg) var(--lumina-space-md); }
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--lumina-space-md);
+}
+.features-grid--multi {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
+    gap: var(--lumina-space-lg);
+}
+@media (max-width: 639px) {
+    .features-grid--multi {
+        grid-template-columns: 1fr;
+        gap: var(--lumina-space-md);
+    }
+}
+</style>