@codecavepro/brand 3.2.0 → 3.2.1

package/dist/src/common/GlowButton.vue

@@ -5,49 +5,68 @@ import { gsap } from "gsap";
 const props = defineProps<{
   title: string
   class?: string
-  href?: string
+  href?: string | null
 }>()
+
 const isTouchDevice = ref(false)
-const link = ref(null)
-const glow = ref(null)
-const edgeLeft = ref(null)
-const edgeRight = ref(null)
-let leaveTween = null
+const link = ref<HTMLElement | null>(null)
+const glow = ref<HTMLElement | null>(null)
+const edgeLeft = ref<HTMLElement | null>(null)
+const edgeRight = ref<HTMLElement | null>(null)
+
+let leaveTween: gsap.core.Tween | null = null
+
 const handleMouseMove = (e: MouseEvent) => {
-  if (isTouchDevice.value) return
+  if (isTouchDevice.value || !link.value || !glow.value) return
 
   const rect = link.value.getBoundingClientRect()
   const x = e.clientX - rect.left
   const y = e.clientY - rect.top
   const percentX = x / rect.width
+
   gsap.to(glow.value, {
     left: x,
     top: y,
     duration: 0.5,
     ease: 'power2.out',
   })
+
   const edgeZone = 0.1
   let leftOpacity = 0
   let rightOpacity = 0
+
   if (percentX < edgeZone) {
     leftOpacity = 1 - percentX / edgeZone
   } else if (percentX > 1 - edgeZone) {
     rightOpacity = (percentX - (1 - edgeZone)) / edgeZone
   }
-  edgeLeft.value.style.opacity = leftOpacity
-  edgeRight.value.style.opacity = rightOpacity
+
+  if (edgeLeft.value) {
+    edgeLeft.value.style.opacity = String(leftOpacity)
+  }
+
+  if (edgeRight.value) {
+    edgeRight.value.style.opacity = String(rightOpacity)
+  }
 }
+
 const handleMouseEnter = () => {
   if (isTouchDevice.value) return
+
   if (leaveTween) {
     leaveTween.kill()
     leaveTween = null
   }
 }
+
 const handleMouseLeave = () => {
-  edgeLeft.value.style.opacity = 1
-  edgeRight.value.style.opacity = 0
+  if (edgeLeft.value) edgeLeft.value.style.opacity = '1'
+  if (edgeRight.value) edgeRight.value.style.opacity = '0'
+
   if (leaveTween) leaveTween.kill()
+
+  if (!glow.value) return
+
   leaveTween = gsap.to(glow.value, {
     left: '20%',
     top: '50%',
@@ -56,35 +75,49 @@ const handleMouseLeave = () => {
     ease: 'power2.out',
   })
 }
+
 onMounted(() => {
-  isTouchDevice.value = window.matchMedia("(pointer: coarse)").matches
-    || "ontouchstart" in window
-    || navigator.maxTouchPoints > 0
+  isTouchDevice.value =
+    window.matchMedia('(pointer: coarse)').matches ||
+    'ontouchstart' in window ||
+    navigator.maxTouchPoints > 0
 })
 </script>
 
 <template>
   <div :class="`relative inline-block ${props.class ?? ''}`">
     <div ref="edgeLeft" class="edge-glow -left-2"></div>
-    <a ref="link" :href="href" @mousemove="handleMouseMove" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" :class="`cursor-pointer flex items-center justify-center relative z-[1] overflow-hidden w-full h-12 px-6 py-1 rounded-full bg-glow-25 ${props.class ?? ''}`">
-      <span class="relative z-[2] text-primary-800 font-bold select-none">
+
+    <component
+      :is="href ? 'a' : 'span'"
+      ref="link"
+      :href="href || undefined"
+      @mousemove="handleMouseMove"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="handleMouseLeave"
+      class="cursor-pointer flex items-center justify-center relative z-[1] overflow-hidden w-full h-12 px-6 py-1 rounded-full bg-glow-25"
+    >
+      <p class="relative z-[2] text-primary-800 font-bold select-none">
         {{ title }}
-      </span>
+      </p>
+
       <div ref="glow" class="glow"></div>
-    </a>
+    </component>
+
     <div ref="edgeRight" class="edge-glow -right-2 opacity-0"></div>
   </div>
 </template>
 
 <style scoped>
-a {
+span, a {
   box-shadow: 0 0 64px 0 #7A58FFA8,
     0 0 16px 0 #4F22FFA6,
     0 0 4px 2px #5B34FA;
   transition: transform 0.5s ease;
 }
 
-a:active {
+
+span, a:active {
   transform: scale(0.98);
 }
 

package/dist/src/common/Review.vue

@@ -2,6 +2,7 @@
 import LinkedinIcon from "../assets/icons/linkedin-icon.vue";
 import VerifiedIcon from "../assets/icons/verified-icon.vue";
 import LazyImage from "./images/LazyImage.vue"
+import { isCorrectLinkedInFormat } from "../helpers/form-validator.ts";
 
 /* See ArticlePreview.vue: the fields read here, not the generated Strapi
  * `Testimonial`, which a caller may still pass unchanged. */
@@ -27,14 +28,14 @@ const imageUrl = (url: string) => props.resolveImage?.(url) ?? url
 <template>
   <div :class="`mx-1 lg:mx-2 testimonial space-y-2 lg:space-y-3 py-10 px-6 lg:px-11 ${className}`">
     <div class="flex flex-col lg:flex-row gap-5 lg:items-center">
-      <LazyImage v-if="item.photo.name !== 'no-image.svg'" 
+      <img v-if="item.photo.name !== ''" 
             class="w-12 lg:w-16 h-12 lg:h-16" :src="imageUrl(item.photo.url)"
            :alt=item.photo.name />
       <div>
         <div class="flex items-center gap-2">
           <p class="text-heading text-lg lg:text-xl">{{ item.name }}</p>
           <a
-              v-if="item.linkedinurl.length > 1"
+              v-if="isCorrectLinkedInFormat(item.linkedinurl)"
               target="_blank"
               rel='noopener noreferrer'
               class="text-default-transparent hover:text-action transition-colors"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecavepro/brand",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "CODECAVE design system — colour, typography and layout tokens as CSS custom properties and as a typed module.",
   "license": "Unlicense",
   "type": "module",