lumina-slides 8.9.4 → 9.0.0

package/src/components/studio/SlideNavigator.vue

@@ -0,0 +1,373 @@
+<template>
+    <!-- Floating Slide Thumbnails Bar -->
+    <div
+        class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-3 bg-[#0a0a0a]/90 backdrop-blur-2xl px-4 py-3 rounded-2xl border border-white/10 shadow-[0_20px_50px_rgba(0,0,0,0.5)] transition-all duration-300">
+
+        <!-- Left: Add Slide Button Container -->
+        <div class="relative shrink-0">
+            <button @click.stop="toggleAddMenu"
+                class="w-10 h-10 rounded-xl bg-blue-600 hover:bg-blue-500 text-white flex items-center justify-center transition-all duration-200 active:scale-95 shadow-lg shadow-blue-600/20 group"
+                title="Add New Slide">
+                <i class="ph-thin ph-plus transition-transform duration-300" :class="{ 'rotate-45': showAddMenu }"></i>
+            </button>
+
+            <!-- Add Slide Menu (Premium Design) -->
+            <Transition name="menu">
+                <div v-if="showAddMenu"
+                    class="absolute bottom-full left-0 mb-4 bg-[#111] border border-white/10 rounded-2xl p-2 min-w-[180px] shadow-2xl backdrop-blur-xl z-[60]"
+                    @click.stop>
+                    <div
+                        class="px-3 py-2 text-[10px] font-bold text-white/30 uppercase tracking-widest border-b border-white/5 mb-1">
+                        Select Layout
+                    </div>
+                    <div class="flex flex-col gap-1">
+                        <button v-for="layout in layoutOptions" :key="layout.type" @click="addSlide(layout.type)"
+                            class="w-full px-3 py-2.5 text-left text-xs text-white/70 hover:text-white hover:bg-white/5 rounded-xl transition-all flex items-center gap-3 group">
+                            <div
+                                class="w-8 h-8 rounded-lg bg-white/5 flex items-center justify-center group-hover:bg-blue-500/20 group-hover:text-blue-400 transition-colors">
+                                <i :class="layout.icon"></i>
+                            </div>
+                            <span class="font-medium">{{ layout.label }}</span>
+                        </button>
+                    </div>
+                </div>
+            </Transition>
+        </div>
+
+        <!-- Slide Thumbnails with visible scrollbar -->
+        <draggable v-model="draggableSlides" item-key="id"
+            class="flex items-center gap-2 max-w-[650px] overflow-x-auto slide-scroll px-1 py-1 scroll-smooth"
+            :animation="200" ghost-class="opacity-50" drag-class="scale-105" @start="drag = true" @end="drag = false">
+            <template #item="{ element: slide, index: i }">
+                <button @click="goToSlide(i)"
+                    class="shrink-0 w-16 h-10 rounded-xl overflow-hidden border-2 transition-all duration-200 relative group active:scale-95 cursor-grab active:cursor-grabbing"
+                    :class="currentIndex === i
+                        ? 'border-blue-500 ring-4 ring-blue-500/20 scale-105 z-10'
+                        : 'border-white/5 shadow-inner hover:border-white/20'">
+
+                    <!-- Thumbnail Preview (simplified) -->
+                    <div class="w-full h-full flex items-center justify-center text-[8px] text-white/30"
+                        :style="{ backgroundColor: 'var(--lumina-color-background, #0a0a0a)' }">
+                        <span class="font-bold text-white/50">{{ i + 1 }}</span>
+                        <!-- Type indicator -->
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
+                    </div>
+
+                    <!-- Slide Type Badge -->
+                    <div
+                        class="absolute bottom-1 right-1 px-1.5 py-0.5 bg-white/10 backdrop-blur-md rounded-md text-[6px] text-white/80 font-bold uppercase tracking-tighter">
+                        {{ getSlideTypeLabel(slide.type) }}
+                    </div>
+
+                    <!-- Delete Button (on hover) -->
+                    <button v-if="slides.length > 1" @click.stop="confirmDeleteIndex = i"
+                        class="absolute top-1 right-1 w-5 h-5 bg-red-500/80 hover:bg-red-500 rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-200 transform hover:scale-110">
+                        <i class="ph-thin ph-x text-[10px] text-white"></i>
+                    </button>
+                </button>
+            </template>
+        </draggable>
+
+        <!-- Right: Slide Counter -->
+        <div
+            class="flex flex-col items-center justify-center px-4 py-1.5 rounded-xl bg-white/5 border border-white/5 shrink-0">
+            <div class="text-[10px] font-bold text-white uppercase tracking-tighter leading-tight">Slide</div>
+            <div class="text-[10px] font-mono text-white/50 leading-tight">
+                {{ currentIndex + 1 }} <span class="text-white/20">/</span> {{ slides.length }}
+            </div>
+        </div>
+    </div>
+
+    <!-- Confirmation Modal -->
+    <Transition name="modal">
+        <div v-if="confirmDeleteIndex !== null"
+            class="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-md"
+            @click="confirmDeleteIndex = null">
+            <div class="bg-[#111111] border border-white/10 rounded-3xl p-8 shadow-2xl max-w-sm w-full mx-4 transform transition-all"
+                @click.stop>
+                <div class="flex flex-col items-center text-center mb-8">
+                    <div
+                        class="w-16 h-16 rounded-2xl bg-red-500/10 flex items-center justify-center text-red-500 mb-6 border border-red-500/20">
+                        <i class="ph-thin ph-trash text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-white mb-2">Delete slide?</h3>
+                    <p class="text-sm text-white/40">This will permanently remove slide #{{ confirmDeleteIndex + 1 }}
+                        and all its content.</p>
+                </div>
+                <div class="flex gap-4">
+                    <button @click="confirmDeleteIndex = null"
+                        class="flex-1 px-6 py-3 rounded-2xl bg-white/5 hover:bg-white/10 text-white transition text-sm font-semibold border border-white/5">
+                        Cancel
+                    </button>
+                    <button @click="deleteSlide"
+                        class="flex-1 px-6 py-3 rounded-2xl bg-red-600 hover:bg-red-500 text-white transition text-sm font-semibold shadow-xl shadow-red-600/30">
+                        Delete
+                    </button>
+                </div>
+            </div>
+        </div>
+    </Transition>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, inject, onMounted, onUnmounted } from 'vue';
+import { StoreKey } from '../../core/store';
+import { useEditor } from '../../composables/useEditor';
+
+import draggable from 'vuedraggable';
+
+const store = inject(StoreKey)!;
+const editor = useEditor();
+
+const showAddMenu = ref(false);
+const confirmDeleteIndex = ref<number | null>(null);
+const drag = ref(false);
+
+const slides = computed(() => store.state.deck?.slides || []);
+const currentIndex = computed(() => store.state.currentIndex);
+
+const draggableSlides = computed({
+    get() {
+        return store.state.deck?.slides || [];
+    },
+    set(value: any[]) {
+        store.patchDeck({ slides: value });
+        editor.commit();
+    }
+});
+
+const layoutOptions = [
+    { type: 'flex', label: 'Flex Layout', icon: 'ph-thin ph-squares-four' },
+    { type: 'statement', label: 'Statement', icon: 'ph-thin ph-quotes' },
+    { type: 'half', label: 'Half Layout', icon: 'ph-thin ph-columns' },
+    { type: 'features', label: 'Features', icon: 'ph-thin ph-grid-four' },
+    { type: 'timeline', label: 'Timeline', icon: 'ph-thin ph-clock' },
+    { type: 'steps', label: 'Steps', icon: 'ph-thin ph-list-numbers' },
+    { type: 'diagram', label: 'Diagram', icon: 'ph-thin ph-tree-structure' },
+];
+
+const slideTemplates: Record<string, any> = {
+    'flex': {
+        type: 'flex',
+        direction: 'horizontal',
+        gap: 'md',
+        padding: 'lg',
+        elements: [
+            {
+                type: 'content',
+                size: 'half',
+                halign: 'left',
+                valign: 'center',
+                elements: [
+                    { type: 'title', text: 'New Slide', size: 'xl' },
+                    { type: 'text', text: 'Start editing your content here.' }
+                ]
+            },
+            {
+                type: 'image',
+                size: 'half',
+                src: 'https://images.unsplash.com/photo-1557683316-973673baf926?w=800',
+                alt: 'Placeholder image',
+                fill: true,
+                rounded: 'lg'
+            }
+        ]
+    },
+    'statement': {
+        type: 'statement',
+        tag: 'Tagline',
+        title: 'Big Statement Here',
+        subtitle: 'Supporting description text goes below the main statement.'
+    },
+    'half': {
+        type: 'half',
+        imageSide: 'right',
+        image: 'https://images.unsplash.com/photo-1557683316-973673baf926?w=800',
+        tag: 'Category',
+        title: 'Split Layout Title',
+        paragraphs: [
+            'First paragraph of content.',
+            'Second paragraph with more details.'
+        ],
+        cta: 'Learn More'
+    },
+    'features': {
+        type: 'features',
+        title: 'Key Features',
+        description: 'Discover what makes us different.',
+        features: [
+            { icon: 'star', title: 'Feature One', desc: 'Description of the first feature.' },
+            { icon: 'rocket', title: 'Feature Two', desc: 'Description of the second feature.' },
+            { icon: 'lightning', title: 'Feature Three', desc: 'Description of the third feature.' }
+        ]
+    },
+    'timeline': {
+        type: 'timeline',
+        title: 'Our Journey',
+        subtitle: 'Key milestones in our history.',
+        timeline: [
+            { date: '2020', title: 'Founded', description: 'Company was established.' },
+            { date: '2022', title: 'Growth', description: 'Expanded to new markets.' },
+            { date: '2024', title: 'Today', description: 'Serving customers worldwide.' }
+        ]
+    },
+    'steps': {
+        type: 'steps',
+        title: 'How It Works',
+        subtitle: 'Simple steps to get started.',
+        steps: [
+            { step: '1', title: 'Step One', description: 'First thing to do.' },
+            { step: '2', title: 'Step Two', description: 'Second thing to do.' },
+            { step: '3', title: 'Step Three', description: 'Final step.' }
+        ]
+    },
+    'diagram': {
+        type: 'diagram',
+        title: 'New Diagram',
+        nodes: [
+            { id: '1', type: 'input', label: 'Start', position: { x: 250, y: 5 } },
+            { id: '2', label: 'Process', position: { x: 100, y: 100 } },
+            { id: '3', label: 'End', position: { x: 400, y: 100 } }
+        ],
+        edges: [
+            { id: 'e1-2', source: '1', target: '2', animated: true },
+            { id: 'e1-3', source: '1', target: '3' }
+        ]
+    }
+};
+
+const getSlideTypeLabel = (type: string) => {
+    const labels: Record<string, string> = {
+        'flex': 'Flex',
+        'statement': 'Stmt',
+        'half': 'Half',
+        'features': 'Feat',
+        'timeline': 'Time',
+        'steps': 'Step',
+        'diagram': 'Diag',
+    };
+    return labels[type] || type.slice(0, 4);
+};
+
+const goToSlide = (index: number) => {
+    store.goto(index);
+    editor.select(null); // Clear selection when changing slides
+};
+
+const toggleAddMenu = () => {
+    showAddMenu.value = !showAddMenu.value;
+};
+
+const addSlide = (type: string) => {
+    const template = slideTemplates[type] || slideTemplates['flex'];
+    const newSlide = JSON.parse(JSON.stringify(template));
+
+    // Ensure elements have dragKeys for Flex layouts
+    if (newSlide.type === 'flex' && Array.isArray(newSlide.elements)) {
+        newSlide.elements.forEach((el: any) => {
+            el.dragKey = Date.now() + Math.random();
+            if (el.type === 'content' && Array.isArray(el.elements)) {
+                el.elements.forEach((child: any) => {
+                    child.dragKey = Date.now() + Math.random() + 1;
+                });
+            }
+        });
+    }
+
+    const currentSlides = [...slides.value];
+    const insertAt = currentIndex.value + 1;
+    currentSlides.splice(insertAt, 0, newSlide);
+
+    store.patchDeck({ slides: currentSlides });
+    editor.commit();
+
+    setTimeout(() => {
+        store.goto(insertAt);
+        showAddMenu.value = false;
+    }, 50);
+};
+
+const deleteSlide = () => {
+    const index = confirmDeleteIndex.value;
+    if (index === null || slides.value.length <= 1) {
+        confirmDeleteIndex.value = null;
+        return;
+    }
+
+    const currentSlides = [...slides.value];
+    currentSlides.splice(index, 1);
+
+    store.patchDeck({ slides: currentSlides });
+    editor.commit();
+
+    // Adjust current index if needed
+    if (currentIndex.value >= currentSlides.length) {
+        store.goto(currentSlides.length - 1);
+    }
+
+    confirmDeleteIndex.value = null;
+};
+
+
+// Close menu when clicking outside
+const handleClickOutside = () => {
+    showAddMenu.value = false;
+};
+
+onMounted(() => {
+    document.addEventListener('click', handleClickOutside);
+});
+
+onUnmounted(() => {
+    document.removeEventListener('click', handleClickOutside);
+});
+</script>
+
+<style scoped>
+/* Modal Transition */
+.modal-enter-active,
+.modal-leave-active {
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.modal-enter-from,
+.modal-leave-to {
+    opacity: 0;
+    transform: scale(0.9) translateY(10px);
+}
+
+/* Menu Transition */
+.menu-enter-active,
+.menu-leave-active {
+    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.menu-enter-from,
+.menu-leave-to {
+    opacity: 0;
+    transform: translateY(10px) scale(0.95);
+}
+
+/* Custom styled scrollbar for slide container */
+.slide-scroll::-webkit-scrollbar {
+    height: 4px;
+}
+
+.slide-scroll::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.slide-scroll::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 2px;
+}
+
+.slide-scroll::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.slide-scroll {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
+}
+</style>

package/src/components/studio/SliderField.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="space-y-1">
+        <div class="flex items-center justify-between">
+            <label class="text-white/50 uppercase tracking-wider text-[10px]">{{ label }}</label>
+            <span class="text-white/70 text-[10px] font-mono">{{ displayValue }}</span>
+        </div>
+        <input type="range" :min="min" :max="max" :step="step" :value="numericValue"
+            @input="updateValue(($event.target as HTMLInputElement).value)"
+            class="w-full h-1 bg-[#333] rounded-lg appearance-none cursor-pointer accent-blue-500 hover:accent-blue-400" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+    label: string;
+    value: number | string | undefined;
+    min?: number;
+    max?: number;
+    step?: number;
+    unit?: string;
+    multiplier?: number; // Logic for mapping 0-1 to 0-100 etc if needed
+}>();
+
+const emit = defineEmits<{
+    (e: 'update', value: number | string): void;
+}>();
+
+const numericValue = computed(() => {
+    if (typeof props.value === 'number') return props.value;
+    if (typeof props.value === 'string') return parseFloat(props.value) || 0;
+    return 0;
+});
+
+const displayValue = computed(() => {
+    return `${numericValue.value}${props.unit || ''}`;
+});
+
+const updateValue = (val: string) => {
+    const num = parseFloat(val);
+    emit('update', num);
+};
+</script>