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

Style code refactoring.

Browse Source
This commit is contained in:
msavulescu
2025-07-14 23:44:41 +03:00
parent 6705330900
commit 1727c6f734
3 changed files with 41 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/demo/Backgrounds/BalatroDemo.vue
View File

@@ -1,50 +1,48 @@
<template>
<div class="balatro-demo">
<TabbedLayout>
<template #preview>
<div class="demo-container" style="height: 500px">
<Balatro
:is-rotate="rotate"
:mouse-interaction="mouseInteractionEnabled"
:pixel-filter="pixelation"
:color1="colorStops[0]"
:color2="colorStops[1]"
:color3="colorStops[2]"
class="h-full w-full"
<TabbedLayout>
<template #preview>
<div class="demo-container">
<Balatro
:is-rotate="rotate"
:mouse-interaction="mouseInteractionEnabled"
:pixel-filter="pixelation"
:color1="colorStops[0]"
:color2="colorStops[1]"
:color3="colorStops[2]"
class="h-full w-full"
/>
</div>
<Customize>
<div class="flex gap-4">
<PreviewColor
v-for="(color, index) in colorStops"
:key="index"
:title="`Color ${index + 1}`"
:model-value="color"
@update:model-value="value => updateColorStop(index, value)"
/>
</div>
<Customize>
<div class="flex gap-4">
<PreviewColor
v-for="(color, index) in colorStops"
:key="index"
:title="`Color ${index + 1}`"
:model-value="color"
@update:model-value="value => updateColorStop(index, value)"
/>
</div>
<PreviewSlider title="Pixelation" v-model="pixelation" :min="0" :max="2000" :step="10" />
<PreviewSlider title="Pixelation" v-model="pixelation" :min="0" :max="2000" :step="10" />
<PreviewSwitch title="Enable Mouse Interaction" v-model="mouseInteractionEnabled" />
<PreviewSwitch title="Enable Mouse Interaction" v-model="mouseInteractionEnabled" />
<PreviewSwitch title="Rotate" v-model="rotate" />
</Customize>
<PreviewSwitch title="Rotate" v-model="rotate" />
</Customize>
<PropTable :data="propData" />
<Dependencies :dependency-list="['ogl']" />
</template>
<PropTable :data="propData" />
<Dependencies :dependency-list="['ogl']" />
</template>
<template #code>
<CodeExample :code-object="balatro" />
</template>
<template #code>
<CodeExample :code-object="balatro" />
</template>
<template #cli>
<CliInstallation :command="balatro.cli" />
</template>
</TabbedLayout>
</div>
<template #cli>
<CliInstallation :command="balatro.cli" />
</template>
</TabbedLayout>
</template>
<script setup lang="ts">
@@ -157,5 +155,6 @@ const propData = [
overflow: hidden;
padding: 0;
z-index: 1;
height: 500px;
}
</style>