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 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

7
src/components/landing/DisplayHeader/DisplayHeader.vue
View File

@@ -6,7 +6,7 @@
</router-link>
<div class="nav-cta-group">
<nav class="landing-nav-items" ref="navRef">
<nav class="landing-nav-items">
<router-link class="nav-link" :class="{ 'active-link': activeItem === 'home' }" to="/">Home</router-link>
<router-link class="nav-link" to="/text-animations/split-text">Docs</router-link>
@@ -25,7 +25,7 @@
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { watch, useTemplateRef } from 'vue';
import { gsap } from 'gsap';
import VueBitsLogo from '@/components/common/Logo.vue';
import { useStars } from '@/composables/useStars';
@@ -38,8 +38,7 @@ interface Props {
defineProps<Props>();
const navRef = ref<HTMLElement | null>(null);
const starCountRef = ref<HTMLElement | null>(null);
const starCountRef = useTemplateRef<HTMLElement>('starCountRef');
const stars = useStars();
const openGitHub = () => {

4
src/components/landing/FeatureCards/FeatureCards.vue
View File

@@ -44,13 +44,13 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, defineComponent, h } from 'vue';
import { ref, onMounted, onUnmounted, defineComponent, h, useTemplateRef } from 'vue';
import { gsap } from 'gsap';
import CountUp from '../../../content/Animations/CountUp/CountUp.vue';
import './FeatureCards.css';
const isMobile = ref(false);
const gridRef = ref<HTMLDivElement | null>(null);
const gridRef = useTemplateRef<HTMLDivElement>('gridRef');
const checkIsMobile = () => {
isMobile.value = window.innerWidth <= 768;

4
src/components/landing/PlasmaWave/PlasmaWave.vue
View File

@@ -13,7 +13,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
import { Renderer, Camera, Transform, Program, Mesh, Geometry } from 'ogl';
interface Props {
@@ -150,7 +150,7 @@ void main() {
const isMobile = ref(false);
const isVisible = ref(true);
const containerRef = ref<HTMLDivElement | null>(null);
const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
const uniformOffset = ref(new Float32Array([props.xOffset, props.yOffset]));
const uniformResolution = ref(new Float32Array([1, 1]));
const rendererRef = ref<Renderer | null>(null);

6
src/components/navs/Sidebar.vue
View File

@@ -101,7 +101,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick, watch, defineComponent, h, computed } from 'vue';
import { ref, onMounted, onUnmounted, nextTick, watch, defineComponent, h, computed, useTemplateRef } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { CATEGORIES, NEW, UPDATED } from '../../constants/Categories';
import Logo from '../../assets/logos/vue-bits-logo.svg';
@@ -118,8 +118,8 @@ const pendingActivePath = ref<string | null>(null);
const isScrolledToBottom = ref(false);
const isTransitioning = ref(false);
const sidebarRef = ref<HTMLDivElement>();
const sidebarContainerRef = ref<HTMLDivElement>();
const sidebarRef = useTemplateRef<HTMLDivElement>('sidebarRef');
const sidebarContainerRef = useTemplateRef<HTMLDivElement>('sidebarContainerRef');
let hoverTimeoutRef: number | null = null;
let hoverDelayTimeoutRef: number | null = null;