From a65db3c8075ed874000bfa73cd908f23df902599 Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Mon, 14 Jul 2025 20:28:54 +0300
Subject: [PATCH] refactor: simplify template structure in StackDemo.vue

---
 src/demo/Components/StackDemo.vue | 98 +++++++++++++++----------------
 1 file changed, 48 insertions(+), 50 deletions(-)

diff --git a/src/demo/Components/StackDemo.vue b/src/demo/Components/StackDemo.vue
index 17d634b..f3b763a 100644
--- a/src/demo/Components/StackDemo.vue
+++ b/src/demo/Components/StackDemo.vue
@@ -1,57 +1,55 @@
 <template>
-  <div>
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container">
-          <Stack
-            :key="rerenderKey"
-            :randomRotation="randomRotation"
-            :sensitivity="sensitivity"
-            :sendToBackOnClick="false"
-            :cardDimensions="cardDimensions"
-            :cardsData="images"
-          ></Stack>
-        </div>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container">
+        <Stack
+          :key="rerenderKey"
+          :randomRotation="randomRotation"
+          :sensitivity="sensitivity"
+          :sendToBackOnClick="false"
+          :cardDimensions="cardDimensions"
+          :cardsData="images"
+        ></Stack>
+      </div>
 
-        <Customize>
-          <PreviewSwitch title="Random Rotation" v-model="randomRotation" @update:model-value="forceRerender" />
-          <PreviewSlider
-            title="Sensitivity"
-            v-model="sensitivity"
-            :min="10"
-            :max="300"
-            :step="10"
-            @update:model-value="forceRerender"
-          />
-          <PreviewSlider
-            title="Card Width"
-            v-model="cardDimensions.width"
-            :min="10"
-            :max="300"
-            :step="10"
-            @update:model-value="forceRerender"
-          />
-          <PreviewSlider
-            title="Card Height"
-            v-model="cardDimensions.height"
-            :min="10"
-            :max="300"
-            :step="10"
-            @update:model-value="forceRerender"
-          />
-        </Customize>
-        <PropTable :data="propData" />
-      </template>
+      <Customize>
+        <PreviewSwitch title="Random Rotation" v-model="randomRotation" @update:model-value="forceRerender" />
+        <PreviewSlider
+          title="Sensitivity"
+          v-model="sensitivity"
+          :min="10"
+          :max="300"
+          :step="10"
+          @update:model-value="forceRerender"
+        />
+        <PreviewSlider
+          title="Card Width"
+          v-model="cardDimensions.width"
+          :min="10"
+          :max="300"
+          :step="10"
+          @update:model-value="forceRerender"
+        />
+        <PreviewSlider
+          title="Card Height"
+          v-model="cardDimensions.height"
+          :min="10"
+          :max="300"
+          :step="10"
+          @update:model-value="forceRerender"
+        />
+      </Customize>
+      <PropTable :data="propData" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="stack" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="stack" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="stack.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="stack.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">