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

6
src/constants/code/Backgrounds/balatroCode.ts
View File

@@ -6,9 +6,9 @@ export const balatro: CodeObject = {
installation: `npm install ogl`, installation: `npm install ogl`,
usage: `<template> usage: `<template>
<Balatro <Balatro
isRotate={false} :is-rotate="false"
mouseInteraction={true} :mouse-interaction="true"
pixelFilter={700} :pixel-filter="700"
/> />
</template> </template>

9
src/content/Backgrounds/Balatro/Balatro.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div ref="containerRef" :class="className" :style="style" class="balatro-container" /> <div ref="containerRef" :class="className" :style="style" class="w-full h-full" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -271,10 +271,3 @@ watch(
} }
); );
</script> </script>
<style scoped>
.balatro-container {
width: 100%;
height: 100%;
}
</style>

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

@@ -1,50 +1,48 @@
<template> <template>
<div class="balatro-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="demo-container">
<div class="demo-container" style="height: 500px"> <Balatro
<Balatro :is-rotate="rotate"
:is-rotate="rotate" :mouse-interaction="mouseInteractionEnabled"
:mouse-interaction="mouseInteractionEnabled" :pixel-filter="pixelation"
:pixel-filter="pixelation" :color1="colorStops[0]"
:color1="colorStops[0]" :color2="colorStops[1]"
:color2="colorStops[1]" :color3="colorStops[2]"
:color3="colorStops[2]" class="h-full w-full"
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> </div>
<Customize> <PreviewSlider title="Pixelation" v-model="pixelation" :min="0" :max="2000" :step="10" />
<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" /> <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" /> <PropTable :data="propData" />
</Customize> <Dependencies :dependency-list="['ogl']" />
</template>
<PropTable :data="propData" /> <template #code>
<Dependencies :dependency-list="['ogl']" /> <CodeExample :code-object="balatro" />
</template> </template>
<template #code> <template #cli>
<CodeExample :code-object="balatro" /> <CliInstallation :command="balatro.cli" />
</template> </template>
</TabbedLayout>
<template #cli>
<CliInstallation :command="balatro.cli" />
</template>
</TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -157,5 +155,6 @@ const propData = [
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
z-index: 1; z-index: 1;
height: 500px;
} }
</style> </style>