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

Added useTemplateRef API support

Browse Source
This commit is contained in:
msavulescu
2025-07-18 16:20:35 +03:00
parent 2aad0d4f4c
commit 6af299052a
69 changed files with 157 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/demo/Backgrounds/GridDistortionDemo.vue
+2 -2
View File
@@ -36,7 +36,7 @@
<script setup lang="ts">
import { useForceRerender } from '@/composables/useForceRerender';
import { ref, watch } from 'vue';
import { ref, watch, useTemplateRef } from 'vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue';
import Dependencies from '../../components/code/Dependencies.vue';
@@ -53,7 +53,7 @@ const { rerenderKey: key, forceRerender } = useForceRerender();
const grid = ref(10);
const mouse = ref(0.25);
const containerRef = ref<HTMLDivElement | null>(null);
const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
watch(
() => [grid, mouse],
src/demo/TextAnimations/ScrollFloatDemo.vue
+2 -2
View File
@@ -47,7 +47,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { ref, onMounted, onUnmounted, useTemplateRef } from 'vue';
import { gsap } from 'gsap';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import PropTable from '../../components/common/PropTable.vue';
@@ -58,7 +58,7 @@ import ScrollFloat from '../../content/TextAnimations/ScrollFloat/ScrollFloat.vu
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import { scrollFloatCode } from '@/constants/code/TextAnimations/scrollFloatCode';
const containerRef = ref<HTMLElement | null>(null);
const containerRef = useTemplateRef<HTMLElement>('containerRef');
const scrollText = ref('Vue Bits!');
const animationDuration = ref(1);
const ease = ref('back.inOut(2)');
src/demo/TextAnimations/ScrollRevealDemo.vue
+2 -2
View File
@@ -42,7 +42,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
import { gsap } from 'gsap';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import PropTable from '../../components/common/PropTable.vue';
@@ -55,7 +55,7 @@ import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
import { scrollRevealCode } from '@/constants/code/TextAnimations/scrollRevealCode';
import { useForceRerender } from '@/composables/useForceRerender';
const containerRef = ref<HTMLElement | null>(null);
const containerRef = useTemplateRef<HTMLElement>('containerRef');
const scrollText = ref(
'When does a man die? When he is hit by a bullet? No! When he suffers a disease? No! When he ate a soup made out of a poisonous mushroom? No! A man dies when he is forgotten!'
);