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

Simplify demo components

Browse Source
This commit is contained in:
David Haz
2025-07-14 21:09:53 +03:00
parent a65db3c807
commit 07ce88d997
53 changed files with 2254 additions and 2453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src/demo/Animations/MetallicPaintDemo.vue
View File

@@ -1,91 +1,82 @@
<template>
<div class="metallic-paint-demo">
<TabbedLayout>
<template #preview>
<div class="demo-container relative h-[500px] overflow-hidden">
<MetallicPaint
v-if="imageData"
:key="rerenderKey"
:image-data="imageData"
:params="{
edge,
patternBlur,
patternScale,
refraction,
speed,
liquid
}"
/>
</div>
<TabbedLayout>
<template #preview>
<div class="demo-container relative h-[500px] overflow-hidden">
<MetallicPaint
v-if="imageData"
:key="rerenderKey"
:image-data="imageData"
:params="{
edge,
patternBlur,
patternScale,
refraction,
speed,
liquid
}"
/>
</div>
<Customize>
<PreviewSlider
title="Edge"
v-model="edge"
:min="0"
:max="1"
:step="0.1"
@update:model-value="forceRerender"
/>
<Customize>
<PreviewSlider title="Edge" v-model="edge" :min="0" :max="1" :step="0.1" @update:model-value="forceRerender" />
<PreviewSlider
title="Pattern Scale"
v-model="patternScale"
:min="1"
:max="5"
:step="0.1"
@update:model-value="forceRerender"
/>
<PreviewSlider
title="Pattern Scale"
v-model="patternScale"
:min="1"
:max="5"
:step="0.1"
@update:model-value="forceRerender"
/>
<PreviewSlider
title="Pattern Blur"
v-model="patternBlur"
:min="0"
:max="0.1"
:step="0.001"
@update:model-value="forceRerender"
/>
<PreviewSlider
title="Pattern Blur"
v-model="patternBlur"
:min="0"
:max="0.1"
:step="0.001"
@update:model-value="forceRerender"
/>
<PreviewSlider
title="Refraction"
v-model="refraction"
:min="0"
:max="0.1"
:step="0.01"
@update:model-value="forceRerender"
/>
<PreviewSlider
title="Refraction"
v-model="refraction"
:min="0"
:max="0.1"
:step="0.01"
@update:model-value="forceRerender"
/>
<PreviewSlider
title="Liquid"
v-model="liquid"
:min="0"
:max="1"
:step="0.01"
@update:model-value="forceRerender"
/>
<PreviewSlider
title="Liquid"
v-model="liquid"
:min="0"
:max="1"
:step="0.01"
@update:model-value="forceRerender"
/>
<PreviewSlider
title="Speed"
v-model="speed"
:min="0"
:max="1"
:step="0.01"
@update:model-value="forceRerender"
/>
</Customize>
<PreviewSlider
title="Speed"
v-model="speed"
:min="0"
:max="1"
:step="0.01"
@update:model-value="forceRerender"
/>
</Customize>
<PropTable :data="propData" />
</template>
<PropTable :data="propData" />
</template>
<template #code>
<CodeExample :code-object="metallicPaint" />
</template>
<template #code>
<CodeExample :code-object="metallicPaint" />
</template>
<template #cli>
<CliInstallation :command="metallicPaint.cli" />
</template>
</TabbedLayout>
</div>
<template #cli>
<CliInstallation :command="metallicPaint.cli" />
</template>
</TabbedLayout>
</template>
<script setup lang="ts">