lumina-slides 9.0.1 → 9.0.3

package/src/views/DeckView.vue

@@ -54,6 +54,29 @@
                 class="px-3 py-1.5 rounded bg-blue-600 text-white text-sm font-medium hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
                 @click="onTimelinePlay">Play</button>
         </div>
+
+        <!-- Template Tags: edit engine.data and see slides update (layout-template-tags example) -->
+        <div v-if="showTemplateTagsUI" class="fixed bottom-0 left-0 right-0 z-[90] flex items-center gap-4 px-4 py-3 bg-black/90 border-t border-white/10 backdrop-blur flex-wrap">
+            <span class="text-white/50 text-xs uppercase tracking-wider">engine.data</span>
+            <label class="flex items-center gap-2 text-sm text-white/80">
+                Product
+                <input v-model="templateProduct" type="text" placeholder="product"
+                    class="w-28 px-2 py-1 rounded bg-white/10 border border-white/20 text-white text-sm focus:border-blue-500 focus:outline-none"
+                    @input="onTemplateDataInput('product', ($event.target as HTMLInputElement).value)" />
+            </label>
+            <label class="flex items-center gap-2 text-sm text-white/80">
+                Version
+                <input v-model="templateVersion" type="text" placeholder="version"
+                    class="w-24 px-2 py-1 rounded bg-white/10 border border-white/20 text-white text-sm focus:border-blue-500 focus:outline-none"
+                    @input="onTemplateDataInput('version', ($event.target as HTMLInputElement).value)" />
+            </label>
+            <label class="flex items-center gap-2 text-sm text-white/80">
+                User
+                <input v-model="templateUser" type="text" placeholder="user"
+                    class="w-28 px-2 py-1 rounded bg-white/10 border border-white/20 text-white text-sm focus:border-blue-500 focus:outline-none"
+                    @input="onTemplateDataInput('user', ($event.target as HTMLInputElement).value)" />
+            </label>
+        </div>
     </div>
 </template>
 
@@ -85,16 +108,33 @@ const timelineCancelRef = ref<(() => void) | null>(null);
 const timelineIntervalRef = ref<ReturnType<typeof setInterval> | null>(null);
 
 const showTimelineUI = computed(() => {
-    const id = route.params.id as string;
+    const p = route.params.id;
+    const id = typeof p === 'string' ? p : (Array.isArray(p) && p[0] ? p[0] : '');
     if (id !== 'animation-timeline') return false;
-    const slide = loadedDeck.value?.slides[currentSlideIndex.value] as { timelineTracks?: unknown } | undefined;
+    const slide = loadedDeck.value?.slides[currentSlideIndex.value];
     return !!slide?.timelineTracks;
 });
 
+// Template Tags example: edit engine.data and see slides update
+const templateProduct = ref('Lumina');
+const templateVersion = ref('2.0');
+const templateUser = ref('World');
+const showTemplateTagsUI = computed(() => {
+    const p = route.params.id;
+    const id = typeof p === 'string' ? p : (Array.isArray(p) && p[0] ? p[0] : '');
+    return id === 'layout-template-tags';
+});
+function onTemplateDataInput(key: string, value: string) {
+    engineRef.value?.data.set(key, value);
+}
+
 function onTimelineInput(e: Event) {
-    const v = parseFloat((e.target as HTMLInputElement).value);
-    timelineProgress.value = v;
-    engineRef.value?.seekTo(v / 100);
+    const t = e.target;
+    if (t instanceof HTMLInputElement) {
+        const v = parseFloat(t.value);
+        timelineProgress.value = v;
+        engineRef.value?.seekTo(v / 100);
+    }
 }
 
 function onTimelinePlay() {
@@ -163,7 +203,7 @@ async function onLoginAndDuplicate() {
         await loginWithGoogle();
         showLoginModal.value = false;
         await duplicateAndEdit();
-    } catch (e: unknown) {
+    } catch (e) {
         const msg = e instanceof Error ? e.message : 'Sign-in failed. Please try again.';
         loginError.value = msg;
     } finally {
@@ -176,7 +216,8 @@ onMounted(async () => {
         initFirebase();
     } catch (e) { }
 
-        const deckId = route.params.id as string;
+        const p = route.params.id;
+        const deckId = typeof p === 'string' ? p : (Array.isArray(p) && p[0] ? p[0] : '');
         if (!deckId) return;
 
         try {
@@ -208,7 +249,7 @@ onMounted(async () => {
                 showControls: true,
                 showProgressBar: true
             },
-            theme: (deckData as Deck & { theme?: string }).theme || 'default'
+            theme: deckData.theme || 'default'
         });
         engineRef.value = engine;
 
@@ -227,29 +268,6 @@ onMounted(async () => {
             });
         }
 
-        if (deckId === 'animation-presets') {
-            const presets = ['fadeUp', 'scaleIn', 'spring'] as const;
-            engine.on('ready', () => engine?.revealInSequence(0, { preset: presets[0], delayMs: 450 }));
-            engine.on('slideChange', ({ index }) => {
-                engine?.revealInSequence(index, { preset: presets[index] ?? 'fadeUp', delayMs: 450 });
-            });
-        }
-
-        if (deckId === 'animation-stagger') {
-            const modes = ['center-out', 'wave', 'random'] as const;
-            engine.on('ready', () =>
-                engine?.revealInSequence(0, { preset: 'scaleIn', staggerMode: modes[0], delayMs: 380 })
-            );
-            engine.on('slideChange', ({ index }) => {
-                engine?.revealInSequence(index, {
-                    preset: 'scaleIn',
-                    staggerMode: modes[index] ?? 'sequential',
-                    randomSeed: index,
-                    delayMs: 380
-                });
-            });
-        }
-
         if (deckId === 'animation-timeline') {
             engine.on('ready', () => {
                 engine?.seekTo(0);
@@ -270,6 +288,12 @@ onMounted(async () => {
             });
         }
 
+        if (deckId === 'layout-template-tags') {
+            engine.data.set('product', templateProduct.value);
+            engine.data.set('version', templateVersion.value);
+            engine.data.set('user', templateUser.value);
+        }
+
         engine.load(deckData);
     } catch (error) {
         console.error("Failed to load deck:", error);