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`,
usage: `<template>
<Balatro
isRotate={false}
mouseInteraction={true}
pixelFilter={700}
:is-rotate="false"
:mouse-interaction="true"
:pixel-filter="700"
/>
</template>

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

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

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>