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

Added defineModel support for PreviewSwitch component and fixed small bug in ScrollRevealDemo component.

Browse Source
This commit is contained in:
snepsnepy
2025-07-16 16:12:54 +03:00
parent 53b8e674b5
commit f09a3cea0e
22 changed files with 133 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/demo/TextAnimations/TextPressureDemo.vue
View File

@@ -39,71 +39,17 @@
<p class="mt-6 text-[#999] text-sm">Animation Settings</p>
<div class="flex gap-4 flex-wrap">
<PreviewSwitch
title="Flex"
:model-value="flex"
@update:model-value="
(val: boolean) => {
flex = val;
forceRerender();
}
"
/>
<PreviewSwitch title="Flex" v-model="flex" />
<PreviewSwitch
title="Alpha"
:model-value="alpha"
@update:model-value="
(val: boolean) => {
alpha = val;
forceRerender();
}
"
/>
<PreviewSwitch title="Alpha" v-model="alpha" />
<PreviewSwitch
title="Stroke"
:model-value="stroke"
@update:model-value="
(val: boolean) => {
stroke = val;
forceRerender();
}
"
/>
<PreviewSwitch title="Stroke" v-model="stroke" />
<PreviewSwitch
title="Width"
:model-value="width"
@update:model-value="
(val: boolean) => {
width = val;
forceRerender();
}
"
/>
<PreviewSwitch title="Width" v-model="width" />
<PreviewSwitch
title="Weight"
:model-value="weight"
@update:model-value="
(val: boolean) => {
weight = val;
forceRerender();
}
"
/>
<PreviewSwitch title="Weight" v-model="weight" />
<PreviewSwitch
title="Italic"
:model-value="italic"
@update:model-value="
(val: boolean) => {
italic = val;
forceRerender();
}
"
/>
<PreviewSwitch title="Italic" v-model="italic" />
</div>
</Customize>
@@ -121,7 +67,7 @@
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ref, watch } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import PropTable from '../../components/common/PropTable.vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
@@ -231,6 +177,13 @@ const propData = [
description: 'Sets a minimum font-size to avoid overly tiny text on smaller screens.'
}
];
watch(
() => [flex.value, alpha.value, stroke.value, width.value, weight.value, italic.value],
() => {
forceRerender();
}
);
</script>
<style scoped>