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

Adjust margin in PreviewColor

Browse Source
This commit is contained in:
David Haz
2025-07-13 17:57:08 +03:00
parent 3a8b543d73
commit 4e9411994d
2 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/common/PreviewColor.vue
View File

@@ -27,6 +27,7 @@ const handleColorChange = (event: Event) => {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
margin-bottom: 1.5rem;
} }
.color-label { .color-label {

26
src/demo/Animations/BlobCursorDemo.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<TabbedLayout> <TabbedLayout>
<template #preview> <template #preview>
<div class="relative h-[600px] overflow-hidden demo-container"> <div class="relative h-[400px] overflow-hidden demo-container">
<BlobCursor <BlobCursor
:blobType="blobType" :blobType="blobType"
:fillColor="fillColor" :fillColor="fillColor"
@@ -27,17 +27,15 @@
blobType = blobType === 'circle' ? 'square' : 'circle'; blobType = blobType === 'circle' ? 'square' : 'circle';
} }
" "
class="bg-[#170D27] hover:bg-[#271E37] mb-2 px-3 border border-[#271E37] rounded-[10px] h-8 text-white text-xs transition" class="bg-[#0b0b0b] hover:bg-[#222] px-3 border border-[#333] rounded-[10px] h-8 text-white text-xs transition mb-[1.5rem]"
> >
Blob Type: Blob Type:
<span class="ml-1 text-gray-400">{{ blobType }}</span> <span class="ml-1 text-gray-400">{{ blobType }}</span>
</button> </button>
<div class="flex flex-col gap-2 mt-2 text-xs"> <PreviewColor title="Fill Color" v-model="fillColor" @update:model-value="forceRerender" />
<PreviewColor title="Fill Color" v-model="fillColor" @update:model-value="forceRerender" /> <PreviewColor title="Inner Color" v-model="innerColor" @update:model-value="forceRerender" />
<PreviewColor title="Inner Color" v-model="innerColor" @update:model-value="forceRerender" /> <PreviewColor title="Shadow Color" v-model="shadowColor" @update:model-value="forceRerender" />
<PreviewColor title="Shadow Color" v-model="shadowColor" @update:model-value="forceRerender" />
</div>
<PreviewSlider <PreviewSlider
title="Trail Count" title="Trail Count"
@@ -63,6 +61,7 @@
} }
" "
/> />
<PreviewSlider <PreviewSlider
title="Lead Blob Size" title="Lead Blob Size"
:min="10" :min="10"
@@ -76,6 +75,7 @@
" "
:isDisabled="trailCount < 1" :isDisabled="trailCount < 1"
/> />
<PreviewSlider <PreviewSlider
title="Lead Inner Dot Size" title="Lead Inner Dot Size"
:min="1" :min="1"
@@ -89,6 +89,7 @@
" "
:isDisabled="trailCount < 1" :isDisabled="trailCount < 1"
/> />
<PreviewSlider <PreviewSlider
title="Lead Blob Opacity" title="Lead Blob Opacity"
:min="0.1" :min="0.1"
@@ -102,6 +103,7 @@
" "
:isDisabled="trailCount < 1" :isDisabled="trailCount < 1"
/> />
<PreviewSlider <PreviewSlider
title="Shadow Blur" title="Shadow Blur"
:min="0" :min="0"
@@ -114,6 +116,7 @@
} }
" "
/> />
<PreviewSlider <PreviewSlider
title="Shadow Offset X" title="Shadow Offset X"
:min="-50" :min="-50"
@@ -126,6 +129,7 @@
} }
" "
/> />
<PreviewSlider <PreviewSlider
title="Shadow Offset Y" title="Shadow Offset Y"
:min="-50" :min="-50"
@@ -138,6 +142,7 @@
} }
" "
/> />
<PreviewSlider <PreviewSlider
title="Fast Duration (Lead)" title="Fast Duration (Lead)"
:min="0.01" :min="0.01"
@@ -150,6 +155,7 @@
} }
" "
/> />
<PreviewSlider <PreviewSlider
title="Slow Duration (Trail)" title="Slow Duration (Trail)"
:min="0.01" :min="0.01"
@@ -162,6 +168,7 @@
} }
" "
/> />
<PreviewSlider <PreviewSlider
title="Z-Index" title="Z-Index"
:min="0" :min="0"
@@ -176,8 +183,9 @@
/> />
</Customize> </Customize>
<p class="flex items-center gap-[0.5em] mx-0 my-[1em] text-[#a1a1aa]" style="margin-top: 20px"> <p class="flex items-center gap-[0.5em] mx-0 my-[1em] text-[#a1a1aa]">
SVG filters are not fully supported on Safari. Performance may vary. <i class="pi pi-exclamation-triangle"></i>
SVG filters are not fully supported on Safari.
</p> </p>
<PropTable :data="propData" /> <PropTable :data="propData" />