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>
<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">