lumina-slides 8.9.4 → 9.0.0

package/src/components/layouts/LayoutTimeline.vue

@@ -0,0 +1,104 @@
+<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 -->
+            <div :class="['text-center mb-16', data.class || '']">
+                <LuminaElement :id="titleId" tag="h2" class="font-bold mb-4" :style="{
+                    fontFamily: 'var(--lumina-font-heading)',
+                    fontSize: 'var(--lumina-text-5xl)',
+                    lineHeight: 'var(--lumina-leading-tight)',
+                    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.subtitle" :id="subtitleId" tag="p" :style="{
+                    color: 'var(--lumina-color-muted-safe, var(--lumina-color-muted))',
+                    fontSize: 'var(--lumina-text-xl)',
+                    opacity: 0.8
+                }">
+                    {{ data.subtitle }}
+                </LuminaElement>
+            </div>
+
+            <!-- Timeline Container -->
+            <div class="relative max-w-6xl mx-auto w-full">
+                <!-- Vertical Line -->
+                <div :class="['absolute left-4 md:left-1/2 top-0 bottom-0 -translate-x-1/2 origin-top', data.lineClass || '']"
+                    :style="{
+                        width: 'var(--lumina-timeline-line-width, 2px)',
+                        backgroundColor: 'var(--lumina-timeline-line-color, var(--lumina-color-border))'
+                    }">
+                </div>
+
+                <!-- Items -->
+                <div :style="{ display: 'flex', flexDirection: 'column', gap: 'var(--lumina-space-2xl)' }">
+                    <LuminaElement v-for="(item, i) in data.timeline" :key="i" :id="itemId(i)"
+                        :class="['relative flex flex-col md:flex-row gap-8 md:gap-0 items-start md:items-center', item.class || '', i % 2 === 0 ? '' : 'md:flex-row-reverse']">
+                        <!-- Date/Label Side -->
+                        <div
+                            :class="['w-full md:w-1/2 pl-12 md:pl-0 flex flex-col justify-center', i % 2 === 0 ? 'md:pr-12 md:text-right md:items-end' : 'md:pl-12 md:text-left md:items-start']">
+                            <span class="font-bold uppercase mb-1" :style="{
+                                color: 'var(--lumina-color-primary)',
+                                letterSpacing: 'var(--lumina-tracking-widest)',
+                                fontSize: 'var(--lumina-text-sm)'
+                            }">
+                                {{ item.date }}
+                            </span>
+                            <h3 class="font-bold" :style="{
+                                fontSize: 'var(--lumina-text-2xl)',
+                                color: 'var(--lumina-color-text-safe, var(--lumina-color-text))'
+                            }">
+                                {{ item.title || item.t }}
+                            </h3>
+                        </div>
+
+                        <!-- Center Node -->
+                        <div class="absolute left-4 md:left-1/2 -translate-x-1/2 rounded-full z-10 animate-pulse-glow"
+                            :style="{
+                                width: 'var(--lumina-timeline-node-size, 0.875rem)',
+                                height: 'var(--lumina-timeline-node-size, 0.875rem)',
+                                background: 'linear-gradient(135deg, var(--lumina-color-primary), var(--lumina-color-secondary))',
+                                border: '3px solid var(--lumina-color-background)'
+                            }">
+                        </div>
+
+                        <!-- Description Side -->
+                        <div
+                            :class="['w-full md:w-1/2 pl-12 md:pl-0', i % 2 === 0 ? 'md:pl-12' : 'md:pr-12 md:text-right']">
+                            <p class="leading-relaxed" :style="{
+                                color: 'var(--lumina-color-text-safe, var(--lumina-color-text))',
+                                opacity: 0.9,
+                                fontSize: 'var(--lumina-text-lg)',
+                                lineHeight: 'var(--lumina-leading-relaxed)'
+                            }">
+                                {{ item.description || item.desc }}
+                            </p>
+                        </div>
+                    </LuminaElement>
+                </div>
+            </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 { SlideTimeline } from '../../core/types';
+
+const props = defineProps<{
+    data: SlideTimeline;
+    slideIndex?: number;
+}>();
+
+const store = inject(StoreKey);
+const slideIndex = computed(() => props.slideIndex ?? store?.state.currentIndex ?? 0);
+const titleId = computed(() => resolveId(props.data, slideIndex.value, ['title']));
+const subtitleId = computed(() => resolveId(props.data, slideIndex.value, ['subtitle']));
+const itemId = (i: number) => resolveId(props.data, slideIndex.value, ['timeline', i]);
+</script>

package/src/components/layouts/LayoutVideo.vue

@@ -0,0 +1,41 @@
+<template>
+    <BaseSlide :data="data" :slide-index="slideIndex">
+        <div
+            class="h-full w-full flex items-center justify-center bg-black relative overflow-hidden group">
+            <!-- Video Player -->
+            <LuminaElement :id="videoId" class="absolute inset-0 w-full h-full">
+                <VideoPlayer class="w-full h-full" :src="data.video.src" :poster="data.video.poster"
+                    :autoplay="data.video.autoplay" :loop="data.video.loop" :muted="data.video.muted"
+                    :controls="data.video.controls" object-fit="cover" />
+            </LuminaElement>
+
+            <!-- Optional Overlay Title -->
+            <LuminaElement v-if="data.title" :id="titleId"
+                :class="['absolute bottom-12 left-12 z-10 px-6 py-4 bg-black/50 backdrop-blur-md rounded-2xl border border-white/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500', data.class || '']">
+                <h2 class="text-white font-bold text-xl tracking-tighter">{{ data.title }}</h2>
+            </LuminaElement>
+        </div>
+    </BaseSlide>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, PropType } from 'vue';
+import { SlideVideo } from '../../core/types';
+import VideoPlayer from '../base/VideoPlayer.vue';
+import BaseSlide from '../base/BaseSlide.vue';
+import { resolveId } from '../../core/elementResolver';
+import { StoreKey } from '../../core/store';
+
+const props = defineProps({
+    data: {
+        type: Object as PropType<SlideVideo>,
+        required: true
+    },
+    slideIndex: { type: Number, default: undefined }
+});
+
+const store = inject(StoreKey);
+const slideIndex = computed(() => props.slideIndex ?? store?.state.currentIndex ?? 0);
+const videoId = computed(() => resolveId(props.data, slideIndex.value, ['video']));
+const titleId = computed(() => resolveId(props.data, slideIndex.value, ['title']));
+</script>

package/src/components/parts/FlexBullets.vue

@@ -0,0 +1,45 @@
+<template>
+    <ul :style="listStyle" :class="customClass">
+        <li v-for="(item, i) in items" :key="i" :style="itemStyle">
+            <span :style="bulletStyle"></span>
+            <span>{{ item }}</span>
+        </li>
+    </ul>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+    items: string[];
+    class?: string;
+}>();
+
+const customClass = computed(() => props.class || '');
+
+const listStyle = {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: 'var(--lumina-space-sm)',
+    width: '100%'
+};
+
+const itemStyle = {
+    display: 'flex',
+    alignItems: 'flex-start' as const,
+    gap: 'var(--lumina-space-sm)',
+    fontSize: 'var(--lumina-text-lg)',
+    color: 'var(--lumina-color-text-safe, var(--lumina-color-text))',
+    opacity: 0.9,
+};
+
+const bulletStyle = {
+    width: 'var(--lumina-space-sm)',
+    height: 'var(--lumina-space-sm)',
+    borderRadius: 'var(--lumina-radius-full)',
+    backgroundColor: 'var(--lumina-color-primary)',
+    marginTop: 'var(--lumina-space-sm)',
+    flexShrink: 0,
+    boxShadow: '0 0 var(--lumina-space-sm) rgba(var(--lumina-color-primary-rgb), 0.5)',
+};
+</script>

package/src/components/parts/FlexButton.vue

@@ -0,0 +1,132 @@
+<template>
+    <button ref="btnRef" :class="['flex-button', variant, customClass]" :style="computedStyle" @click="handleClick"
+        @mousemove="onMouseMove" @mouseleave="onMouseLeave">
+        <span class="relative z-10">{{ label }}</span>
+    </button>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue';
+import { StoreKey } from '../../core/store';
+import gsap from 'gsap';
+
+const props = defineProps<{
+    label: string;
+    action?: string;
+    actionType?: 'url' | 'slide' | 'download' | 'event';
+    href?: string;
+    gotoSlide?: number;
+    target?: string;
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+    fullWidth?: boolean;
+    class?: string;
+}>();
+
+const emit = defineEmits(['action']);
+const store = inject(StoreKey, null);
+const btnRef = ref<HTMLElement | null>(null);
+
+const customClass = computed(() => props.class || '');
+
+// Styles
+const computedStyle = computed(() => {
+    const base = {
+        padding: 'var(--lumina-button-padding)',
+        borderRadius: 'var(--lumina-button-radius)',
+        fontWeight: 'var(--lumina-button-font-weight)',
+        fontSize: 'var(--lumina-text-lg)',
+        width: props.fullWidth ? '100%' : 'auto',
+        position: 'relative' as const,
+        cursor: 'pointer',
+        transition: 'background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease'
+    };
+
+    const variants: Record<string, any> = {
+        'primary': {
+            background: 'linear-gradient(to right, var(--lumina-color-primary), var(--lumina-color-secondary))',
+            color: 'var(--lumina-color-text)',
+            boxShadow: '0 var(--lumina-space-xs) var(--lumina-space-lg) var(--lumina-shadow-color)',
+            border: 'none'
+        },
+        'secondary': {
+            backgroundColor: 'rgba(var(--lumina-color-text-rgb), 0.1)',
+            color: 'var(--lumina-color-text)',
+            border: '1px solid var(--lumina-color-border)',
+        },
+        'outline': {
+            backgroundColor: 'transparent',
+            color: 'var(--lumina-color-text)',
+            border: '2px solid var(--lumina-color-border)',
+        },
+        'ghost': {
+            backgroundColor: 'transparent',
+            color: 'var(--lumina-color-muted)',
+            border: 'none',
+            boxShadow: 'none'
+        },
+    };
+
+    return { ...base, ...(variants[props.variant || 'primary']) };
+});
+
+// Actions
+const handleClick = () => {
+    // Click Ripple / Scale Bump
+    if (btnRef.value) {
+        gsap.fromTo(btnRef.value, { scale: 0.95 }, { scale: 1, duration: 0.2, ease: 'back.out(2)' });
+    }
+
+    const actionType = props.actionType || 'event';
+
+    switch (actionType) {
+        case 'url':
+            if (props.href) window.open(props.href, props.target || '_blank');
+            break;
+        case 'slide':
+            if (props.gotoSlide !== undefined && store) store.goto(props.gotoSlide);
+            emit('action', { type: 'goto', value: props.gotoSlide, origin: 'flex-button' });
+            break;
+        case 'download':
+            if (props.href) {
+                const link = document.createElement('a');
+                link.href = props.href;
+                link.download = '';
+                link.click();
+            }
+            break;
+        default:
+            emit('action', { type: 'click', label: props.label, value: props.action || props.label, origin: 'flex-button' });
+    }
+};
+
+// Magnetic Effect
+const onMouseMove = (e: MouseEvent) => {
+    const el = btnRef.value;
+    if (!el) return;
+
+    const rect = el.getBoundingClientRect();
+    const x = e.clientX - rect.left - rect.width / 2;
+    const y = e.clientY - rect.top - rect.height / 2;
+
+    // Move button 30% towards cursor
+    gsap.to(el, {
+        x: x * 0.3,
+        y: y * 0.3,
+        duration: 0.3,
+        ease: 'power2.out'
+    });
+};
+
+const onMouseLeave = () => {
+    if (!btnRef.value) return;
+    // Spring back
+    gsap.to(btnRef.value, {
+        x: 0,
+        y: 0,
+        duration: 0.8,
+        ease: 'elastic.out(1, 0.4)'
+    });
+};
+</script>
+
+<style scoped></style>

package/src/components/parts/FlexImage.vue

@@ -0,0 +1,54 @@
+<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>

package/src/components/parts/FlexOrdered.vue

@@ -0,0 +1,44 @@
+<template>
+    <ol :style="listStyle" :class="customClass">
+        <li v-for="(item, i) in items" :key="i" :style="itemStyle">
+            <span :style="numberStyle">{{ i + 1 }}</span>
+            <span>{{ item }}</span>
+        </li>
+    </ol>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+    items: string[];
+    class?: string;
+}>();
+
+const customClass = computed(() => props.class || '');
+
+const listStyle = {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: 'var(--lumina-space-sm)',
+    width: '100%'
+};
+
+const itemStyle = {
+    display: 'flex',
+    alignItems: 'flex-start' as const,
+    gap: 'var(--lumina-space-sm)',
+    fontSize: 'var(--lumina-text-lg)',
+    color: 'var(--lumina-color-text-safe, var(--lumina-color-text))',
+    opacity: 0.9,
+};
+
+const numberStyle = {
+    fontSize: 'var(--lumina-text-sm)',
+    fontWeight: 'var(--lumina-font-weight-bold)',
+    color: 'var(--lumina-color-primary)',
+    marginTop: '2px', // Slight adjustment for alignment
+    minWidth: '1.2em',
+    textAlign: 'right' as const,
+};
+</script>

package/src/components/parts/FlexSpacer.vue

@@ -0,0 +1,13 @@
+<script lang="ts">
+import { h, defineComponent } from 'vue';
+import { spacingVarMap } from '../../composables/useFlexLayout';
+
+export default defineComponent({
+    name: 'FlexSpacer',
+    props: ['size'],
+    setup(props) {
+        const sizeVar = spacingVarMap[(props.size || 'md')] || spacingVarMap['md'];
+        return () => h('div', { style: { height: sizeVar, width: '100%' } });
+    }
+});
+</script>

package/src/components/parts/FlexStepper.vue

@@ -0,0 +1,59 @@
+<script lang="ts">
+import { h, defineComponent } from 'vue';
+
+export default defineComponent({
+    name: 'FlexStepper',
+    props: ['items', 'compact'],
+    setup(props) {
+        return () => h('div', {
+            style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 'var(--lumina-space-md)',
+                width: '100%'
+            }
+        },
+            (props.items || []).map((item: any) =>
+                h('div', {
+                    style: {
+                        display: 'flex',
+                        gap: 'var(--lumina-space-md)',
+                        alignItems: 'flex-start',
+                        padding: 'var(--lumina-space-md)',
+                        borderRadius: 'var(--lumina-radius-lg)',
+                        backgroundColor: 'rgba(var(--lumina-color-text-rgb), 0.05)',
+                        border: '1px solid var(--lumina-color-border)',
+                    }
+                }, [
+                    h('div', {
+                        style: {
+                            flexShrink: 0,
+                            width: 'var(--lumina-step-badge-size)',
+                            height: 'var(--lumina-step-badge-size)',
+                            borderRadius: 'var(--lumina-radius-lg)',
+                            background: 'linear-gradient(135deg, rgba(var(--lumina-color-primary-rgb), 0.2), rgba(var(--lumina-color-secondary-rgb), 0.2))',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            fontWeight: 'var(--lumina-font-weight-bold)',
+                            color: 'var(--lumina-color-primary)',
+                        }
+                    }, item.step),
+                    h('div', {}, [
+                        h('h4', {
+                            style: { fontWeight: 'var(--lumina-font-weight-bold)' }
+                        }, item.title || item.t),
+                        h('p', {
+                            style: {
+                                fontSize: 'var(--lumina-text-sm)',
+                                color: 'var(--lumina-color-muted)',
+                                opacity: 0.6,
+                            }
+                        }, item.description || item.desc)
+                    ])
+                ])
+            )
+        );
+    }
+});
+</script>

package/src/components/parts/FlexText.vue

@@ -0,0 +1,29 @@
+<template>
+    <p :style="computedStyle" :class="customClass">
+        {{ text }}
+    </p>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+    text: string;
+    align?: 'left' | 'center' | 'right';
+    muted?: boolean;
+    class?: string;
+}>();
+
+const customClass = computed(() => props.class || '');
+
+const computedStyle = computed(() => {
+    return {
+        fontSize: 'var(--lumina-text-lg)',
+        lineHeight: 'var(--lumina-leading-relaxed)',
+        color: props.muted ? 'var(--lumina-color-text-secondary)' : 'var(--lumina-color-text)',
+        opacity: props.muted ? 0.8 : 1,
+        textAlign: props.align || 'left',
+        width: '100%',
+    };
+});
+</script>

package/src/components/parts/FlexTimeline.vue

@@ -0,0 +1,67 @@
+<script lang="ts">
+import { h, defineComponent } from 'vue';
+
+export default defineComponent({
+    name: 'FlexTimeline',
+    props: ['items', 'compact'],
+    setup(props) {
+        return () => h('div', {
+            style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 'var(--lumina-space-md)',
+                width: '100%'
+            }
+        },
+            (props.items || []).map((item: any) =>
+                h('div', {
+                    style: {
+                        display: 'flex',
+                        gap: 'var(--lumina-space-md)',
+                        alignItems: 'flex-start',
+                        borderLeft: 'var(--lumina-timeline-line-width) solid rgba(var(--lumina-color-primary-rgb), 0.3)',
+                        paddingLeft: 'var(--lumina-space-md)',
+                    }
+                }, [
+                    h('div', {
+                        style: {
+                            flexShrink: 0,
+                            width: 'calc(var(--lumina-timeline-node-size) * 0.75)',
+                            height: 'calc(var(--lumina-timeline-node-size) * 0.75)',
+                            borderRadius: 'var(--lumina-radius-full)',
+                            backgroundColor: 'var(--lumina-color-primary)',
+                            marginLeft: 'calc(-1 * var(--lumina-space-md) - var(--lumina-timeline-line-width) / 2 - var(--lumina-timeline-node-size) * 0.375)',
+                            marginTop: 'var(--lumina-space-xs)',
+                            boxShadow: '0 0 var(--lumina-space-sm) rgba(var(--lumina-color-primary-rgb), 0.5)',
+                        }
+                    }),
+                    h('div', {}, [
+                        h('span', {
+                            style: {
+                                fontSize: 'var(--lumina-text-xs)',
+                                color: 'var(--lumina-color-primary)',
+                                fontWeight: 'var(--lumina-font-weight-bold)',
+                                textTransform: 'uppercase',
+                                letterSpacing: 'var(--lumina-tracking-wider)',
+                            }
+                        }, item.date),
+                        h('h4', {
+                            style: {
+                                fontWeight: 'var(--lumina-font-weight-bold)',
+                                fontSize: 'var(--lumina-text-lg)',
+                            }
+                        }, item.title || item.t),
+                        h('p', {
+                            style: {
+                                fontSize: 'var(--lumina-text-sm)',
+                                color: 'var(--lumina-color-muted)',
+                                opacity: 0.6,
+                            }
+                        }, item.description || item.desc)
+                    ])
+                ])
+            )
+        );
+    }
+});
+</script>

package/src/components/parts/FlexTitle.vue

@@ -0,0 +1,39 @@
+<template>
+    <h2 :style="computedStyle" :class="['flex-title', customClass]"
+        :data-split-text="customClass.includes('char') || customClass.includes('word') ? '' : null">
+        {{ text }}
+    </h2>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+    text: string;
+    size?: 'lg' | 'xl' | '2xl' | '3xl';
+    align?: 'left' | 'center' | 'right';
+    class?: string;
+}>();
+
+const customClass = computed(() => props.class || '');
+
+const computedStyle = computed(() => {
+    const sizeMap: Record<string, string> = {
+        'lg': 'var(--lumina-text-3xl)',
+        'xl': 'var(--lumina-text-4xl)',
+        '2xl': 'var(--lumina-text-5xl)',
+        '3xl': 'var(--lumina-text-6xl)',
+    };
+
+    return {
+        fontFamily: 'var(--lumina-font-heading)',
+        fontWeight: 'var(--lumina-font-weight-bold)',
+        lineHeight: 'var(--lumina-leading-tight)',
+        fontSize: sizeMap[props.size || 'xl'] || 'var(--lumina-text-4xl)',
+        textAlign: props.align || 'left',
+        width: '100%',
+        letterSpacing: 'var(--lumina-tracking-tighter)',
+        color: 'var(--lumina-color-text-safe, var(--lumina-color-text))',
+    };
+});
+</script>