atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 14:39:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

refactor: simplify template structure in StackDemo.vue

Browse Source
This commit is contained in:
David Haz
2025-07-14 20:28:54 +03:00
parent 0d547bd3f9
commit a65db3c807
1 changed files with 48 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/demo/Components/StackDemo.vue
View File

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