atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-04-22 01:54:38 -06:00
Code Issues Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
David Haz
2025-08-01 23:23:01 +03:00
parent f0db19d5e2
commit 92dce03146
5 changed files with 43 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/demo/Backgrounds/LightRaysDemo.vue
+10 -65
View File
@@ -22,80 +22,25 @@
</div>
<Customize>
<PreviewColor
title="Rays Color"
v-model="raysColor"
/>
<PreviewColor title="Rays Color" v-model="raysColor" />
<PreviewSelect
title="Rays Origin"
v-model="raysOrigin"
:options="raysOriginOptions"
/>
<PreviewSelect title="Rays Origin" v-model="raysOrigin" :options="raysOriginOptions" />
<PreviewSlider
title="Rays Speed"
v-model="raysSpeed"
:min="0.1"
:max="3"
:step="0.1"
/>
<PreviewSlider title="Rays Speed" v-model="raysSpeed" :min="0.1" :max="3" :step="0.1" />
<PreviewSlider
title="Light Spread"
v-model="lightSpread"
:min="0.1"
:max="2"
:step="0.1"
/>
<PreviewSlider title="Light Spread" v-model="lightSpread" :min="0.1" :max="2" :step="0.1" />
<PreviewSlider
title="Ray Length"
v-model="rayLength"
:min="0.5"
:max="3"
:step="0.1"
/>
<PreviewSlider title="Ray Length" v-model="rayLength" :min="0.5" :max="3" :step="0.1" />
<PreviewSlider
title="Fade Distance"
v-model="fadeDistance"
:min="0.5"
:max="2"
:step="0.1"
/>
<PreviewSlider title="Fade Distance" v-model="fadeDistance" :min="0.5" :max="2" :step="0.1" />
<PreviewSlider
title="Saturation"
v-model="saturation"
:min="0"
:max="2"
:step="0.1"
/>
<PreviewSlider title="Saturation" v-model="saturation" :min="0" :max="2" :step="0.1" />
<PreviewSlider
title="Mouse Influence"
v-model="mouseInfluence"
:min="0"
:max="1"
:step="0.1"
/>
<PreviewSlider title="Mouse Influence" v-model="mouseInfluence" :min="0" :max="1" :step="0.1" />
<PreviewSlider
title="Noise Amount"
v-model="noiseAmount"
:min="0"
:max="0.5"
:step="0.01"
/>
<PreviewSlider title="Noise Amount" v-model="noiseAmount" :min="0" :max="0.5" :step="0.01" />
<PreviewSlider
title="Distortion"
v-model="distortion"
:min="0"
:max="1"
:step="0.1"
/>
<PreviewSlider title="Distortion" v-model="distortion" :min="0" :max="1" :step="0.1" />
<PreviewSwitch title="Pulsating" v-model="pulsating" />
</Customize>
src/demo/Components/StepperDemo.vue
+8 -8
View File
@@ -73,7 +73,7 @@
<script setup lang="ts">
import { ref } from 'vue';
import { toast, Toaster } from 'vue-sonner';
import 'vue-sonner/style.css'
import 'vue-sonner/style.css';
import TabbedLayout from '@/components/common/TabbedLayout.vue';
import PropTable from '@/components/common/PropTable.vue';
@@ -115,25 +115,25 @@ const propData = [
{
name: 'stepCircleContainerClassName',
type: 'string',
default: "-",
default: '-',
description: 'Custom class name for the container holding the step indicators.'
},
{
name: 'stepContainerClassName',
type: 'string',
default: "-",
default: '-',
description: 'Custom class name for the row holding the step circles/connectors.'
},
{
name: 'contentClassName',
type: 'string',
default: "-",
default: '-',
description: "Custom class name for the step's main content container."
},
{
name: 'footerClassName',
type: 'string',
default: "-",
default: '-',
description: 'Custom class name for the footer area containing navigation buttons.'
},
{
@@ -188,12 +188,12 @@ const handleStepChange = (newStep: number) => {
step.value = newStep;
if (newStep === 4) {
if (name.value) {
toast(`👋🏻 Hello ${name.value}!`)
toast(`👋🏻 Hello ${name.value}!`);
} else {
toast(`You didn't provide your name :(`)
toast(`You didn't provide your name :(`);
}
} else {
toast(`✅ Step ${newStep}!`)
toast(`✅ Step ${newStep}!`);
}
};
</script>