atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-09 00:19:31 -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

4
src/content/Animations/AnimatedContent/AnimatedContent.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
@@ -37,7 +37,7 @@ const emit = defineEmits<{
complete: [];
}>();
const containerRef = ref<HTMLDivElement>();
const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
onMounted(() => {
const el = containerRef.value;

4
src/content/Animations/BlobCursor/BlobCursor.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import gsap from 'gsap';
import { onMounted, onUnmounted, ref } from 'vue';
import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
interface BlobCursorProps {
blobType?: 'circle' | 'square';
@@ -48,7 +48,7 @@ const props = withDefaults(defineProps<BlobCursorProps>(), {
zIndex: 100
});
const containerRef = ref<HTMLDivElement | null>(null);
const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
const blobsRef = ref<(HTMLElement | null)[]>([]);
const updateOffset = () => {

6
src/content/Animations/ClickSpark/ClickSpark.vue
View File

@@ -7,7 +7,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
import { ref, onMounted, onUnmounted, computed, watch, useTemplateRef } from 'vue';
interface Spark {
x: number;
@@ -36,8 +36,8 @@ const props = withDefaults(defineProps<Props>(), {
extraScale: 1.0
});
const containerRef = ref<HTMLDivElement | null>(null);
const canvasRef = ref<HTMLCanvasElement | null>(null);
const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
const sparks = ref<Spark[]>([]);
const startTimeRef = ref<number | null>(null);
const animationId = ref<number | null>(null);

4
src/content/Animations/CountUp/CountUp.vue
View File

@@ -3,7 +3,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
import { ref, onMounted, onUnmounted, watch, computed, useTemplateRef } from 'vue';
interface Props {
to: number;
@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<Props>(), {
separator: ''
});
const elementRef = ref<HTMLSpanElement | null>(null);
const elementRef = useTemplateRef<HTMLSpanElement>('elementRef');
const currentValue = ref(props.direction === 'down' ? props.to : props.from);
const isInView = ref(false);
const animationId = ref<number | null>(null);

4
src/content/Animations/Cubes/Cubes.vue
View File

@@ -77,7 +77,7 @@
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, withDefaults } from 'vue';
import { ref, computed, onMounted, onUnmounted, withDefaults, useTemplateRef } from 'vue';
import gsap from 'gsap';
interface Gap {
@@ -122,7 +122,7 @@ const props = withDefaults(defineProps<Props>(), {
rippleSpeed: 2
});
const sceneRef = ref<HTMLDivElement | null>(null);
const sceneRef = useTemplateRef<HTMLDivElement>('sceneRef');
const rafRef = ref<number | null>(null);
const idleTimerRef = ref<number | null>(null);
const userActiveRef = ref(false);

4
src/content/Animations/FadeContent/FadeContent.vue
View File

@@ -13,7 +13,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { ref, onMounted, onUnmounted, useTemplateRef } from 'vue';
interface Props {
blur?: boolean;
@@ -36,7 +36,7 @@ const props = withDefaults(defineProps<Props>(), {
});
const inView = ref(false);
const elementRef = ref<HTMLDivElement | null>(null);
const elementRef = useTemplateRef<HTMLDivElement>('elementRef');
let observer: IntersectionObserver | null = null;
onMounted(() => {

4
src/content/Animations/GlareHover/GlareHover.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed } from 'vue';
import { computed, useTemplateRef } from 'vue';
interface GlareHoverProps {
width?: string;
@@ -33,7 +33,7 @@ const props = withDefaults(defineProps<GlareHoverProps>(), {
style: () => ({})
});
const overlayRef = ref<HTMLDivElement | null>(null);
const overlayRef = useTemplateRef<HTMLDivElement>('overlayRef');
const rgba = computed(() => {
const hex = props.glareColor.replace('#', '');

4
src/content/Animations/ImageTrail/ImageTrail.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue';
import { nextTick, onMounted, useTemplateRef } from 'vue';
import { gsap } from 'gsap';
function lerp(a: number, b: number, n: number): number {
@@ -1194,7 +1194,7 @@ const props = withDefaults(defineProps<ImageTrailProps>(), {
variant: 1
});
const containerRef = ref<HTMLDivElement>();
const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
onMounted(async () => {
await nextTick();

4
src/content/Animations/Magnet/Magnet.vue
View File

@@ -19,7 +19,7 @@
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
import { ref, computed, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
interface Props {
padding?: number;
@@ -45,7 +45,7 @@ defineOptions({
inheritAttrs: false
});
const magnetRef = ref<HTMLDivElement | null>(null);
const magnetRef = useTemplateRef<HTMLDivElement>('magnetRef');
const isActive = ref(false);
const position = ref({ x: 0, y: 0 });

4
src/content/Animations/MagnetLines/MagnetLines.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { onMounted, onUnmounted, computed, useTemplateRef } from 'vue';
interface MagnetLinesProps {
rows?: number;
@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<MagnetLinesProps>(), {
style: () => ({})
});
const containerRef = ref<HTMLDivElement | null>(null);
const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
const total = computed(() => props.rows * props.columns);

4
src/content/Animations/MetaBalls/MetaBalls.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { Camera, Mesh, Program, Renderer, Transform, Triangle, Vec3 } from 'ogl';
import { onMounted, onUnmounted, shallowRef, watch } from 'vue';
import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue';
interface MetaBallsProps {
color?: string;
@@ -118,7 +118,7 @@ void main() {
}
`;
const containerRef = shallowRef<HTMLDivElement>();
const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
let cleanUpAnimation: () => void = () => {};
const setupAnimation = () => {

4
src/content/Animations/MetallicPaint/MetallicPaint.vue
View File

@@ -3,7 +3,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
import { ref, onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';
interface ShaderParams {
patternScale: number;
@@ -30,7 +30,7 @@ const props = withDefaults(defineProps<Props>(), {
})
});
const canvasRef = ref<HTMLCanvasElement | null>(null);
const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
const gl = ref<WebGL2RenderingContext | null>(null);
const uniforms = ref<Record<string, WebGLUniformLocation>>({});
const totalAnimationTime = ref(0);

4
src/content/Animations/Noise/Noise.vue
View File

@@ -7,7 +7,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { onMounted, onBeforeUnmount, useTemplateRef } from 'vue';
interface NoiseProps {
patternRefreshInterval?: number;
@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<NoiseProps>(), {
mixBlendMode: 'normal'
});
const grainRef = ref<HTMLCanvasElement | null>(null);
const grainRef = useTemplateRef<HTMLCanvasElement>('grainRef');
let animationId = 0;
let frame = 0;

8
src/content/Animations/PixelTransition/PixelTransition.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, watch, onUnmounted, nextTick } from 'vue';
import { ref, onMounted, watch, onUnmounted, nextTick, useTemplateRef } from 'vue';
import { gsap } from 'gsap';
interface PixelTransitionProps {
@@ -20,9 +20,9 @@ const props = withDefaults(defineProps<PixelTransitionProps>(), {
aspectRatio: '100%'
});
const containerRef = ref<HTMLDivElement | null>(null);
const pixelGridRef = ref<HTMLDivElement | null>(null);
const activeRef = ref<HTMLDivElement | null>(null);
const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
const pixelGridRef = useTemplateRef<HTMLDivElement>('pixelGridRef');
const activeRef = useTemplateRef<HTMLDivElement>('activeRef');
const isActive = ref(false);
let delayedCall: gsap.core.Tween | null = null;

4
src/content/Animations/Ribbons/Ribbons.vue
View File

@@ -3,7 +3,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
import { Renderer, Transform, Vec3, Color, Polyline } from 'ogl';
interface RibbonsProps {
@@ -36,7 +36,7 @@ const props = withDefaults(defineProps<RibbonsProps>(), {
backgroundColor: () => [0, 0, 0, 0]
});
const ribbonsContainer = ref<HTMLDivElement>();
const ribbonsContainer = useTemplateRef<HTMLDivElement>('ribbonsContainer');
let renderer: Renderer;
let scene: Transform;

4
src/content/Animations/ShapeBlur/ShapeBlur.vue
View File

@@ -3,7 +3,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
import * as THREE from 'three';
interface ShapeBlurProps {
@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<ShapeBlurProps>(), {
circleEdge: 0.5
});
const shapeBlurContainer = ref<HTMLDivElement>();
const shapeBlurContainer = useTemplateRef<HTMLDivElement>('shapeBlurContainer');
let animationFrameId: number;
let time = 0;

4
src/content/Animations/SplashCursor/SplashCursor.vue
View File

@@ -5,7 +5,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, withDefaults } from 'vue';
import { onMounted, withDefaults, useTemplateRef } from 'vue';
/* ---------- types ---------- */
interface ColorRGB {
@@ -50,7 +50,7 @@ const props = withDefaults(defineProps<SplashCursorProps>(), {
});
/* ---------- refs ---------- */
const canvasRef = ref<HTMLCanvasElement | null>(null);
const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
/* ---------- helper types ---------- */
interface Pointer {