@codecavepro/brand 3.2.0 → 3.2.2

package/dist/src/common/Button.vue

@@ -1,19 +1,29 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   isDisabled?: boolean
   title?: string
   as?: 'link'
   href?: string
   variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'text' | 'link' | 'icon'
-  type?: 'submit'
+  type?: 'button' | 'submit'
   class?: string
-}>()
+}>(), {
+  type: 'button',
+})
+
 const buttonBaseClass = `flex items-center justify-center
-${props.isDisabled ? 'cursor-not-allowed opacity-20' : 'cursor-pointer'}
+${props.isDisabled
+    ? 'cursor-not-allowed opacity-60'
+    : 'cursor-pointer'}
 w-fit max-w-full min-w-12 min-h-12 rounded-full text-body-primary font-bold transition-colors`
-const linkBaseClass = 'flex transition-colors'
+
+const linkBaseClass = `flex transition-colors
+${props.isDisabled
+    ? 'cursor-not-allowed opacity-60'
+    : 'cursor-pointer'}`
+
 const variantClass = computed(() => {
   switch (props.variant) {
     case 'secondary':
@@ -32,14 +42,29 @@ const variantClass = computed(() => {
       return `${buttonBaseClass} px-6 py-1 bg-primary-500 hover:bg-primary-700 active:bg-primary-900`
   }
 })
+
+const preventDisabledLinkActivation = (event: Event) => {
+  if (props.isDisabled) {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+}
 </script>
 
 <template>
-  <a v-if="props.as === 'link'" :href="props.href" :class="[variantClass, props.class ?? '']">
+  <a v-if="props.as === 'link'" 
+    :href="props.isDisabled ? '' : props.href" 
+    :class="[variantClass, props.class ?? '']" 
+    :aria-disabled="props.isDisabled ? 'true' : undefined" 
+    :tabindex="props.isDisabled ? -1 : undefined" 
+    @click="preventDisabledLinkActivation" 
+    @keydown.enter="preventDisabledLinkActivation" 
+    @keydown.space.prevent="preventDisabledLinkActivation">
     <span>{{ title }}</span>
     <slot />
   </a>
-  <button v-else :class="[variantClass, props.class ?? '']">
+
+  <button v-else :type="props.type" :disabled="props.isDisabled" :class="[variantClass, props.class ?? '']">
     {{ title }}
     <slot />
   </button>

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/dist/src/common/TextField.vue

@@ -2,39 +2,53 @@
 import { ref } from "vue";
 
 defineProps<{
-  id: string
-  label: string
-  placeholder: string
-  isRequired?: boolean
-  isError?: boolean
-  errorMessage?: string,
-  modelValue?: string
-}>()
-
-const textareaRef = ref(null)
-const autoResize = () => {
-  if (textareaRef.value) {
-    textareaRef.value.style.height = 'auto'
-    textareaRef.value.style.height = textareaRef.value.scrollHeight + 'px'
-  }
-}
+  id: string;
+  label: string;
+  placeholder: string;
+  isRequired?: boolean;
+  isError?: boolean;
+  errorMessage?: string;
+  modelValue?: string;
+}>();
+
+const emit = defineEmits(["update:modelValue"]);
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null);
+
+const MAX_HEIGHT = 300;
 
-defineEmits(['update:modelValue'])
+const autoResize = (event: Event) => {
+  const textarea = event.target as HTMLTextAreaElement;
+
+  textarea.style.height = "auto";
+
+  const height = Math.min(textarea.scrollHeight, MAX_HEIGHT);
+  textarea.style.height = `${height}px`;
+  textarea.style.overflowY =
+    textarea.scrollHeight > MAX_HEIGHT ? "auto" : "hidden";
+
+  emit("update:modelValue", textarea.value);
+};
 </script>
 
 <template>
   <div class="w-full relative">
-    <div :class="`focus-area flex flex-col min-h-[7.5rem] p-3 rounded-lg bg-surface-secondary border border-surface-tertiary hover:bg-surface-tertiary transition-colors text-heading 
-      ${isError ? 'input-error' : ''}`">
+    <div :class="`focus-area flex flex-col min-h-[7.5rem] p-3 rounded-lg bg-surface-secondary border border-surface-tertiary hover:bg-surface-tertiary transition-colors text-heading
+      ${isError ? 'input-error' : ''}`"
+    >
       <label :for="id" class="font-bold text-sm select-none">
         {{ label }}
       </label>
-      <textarea 
-        @input="autoResize" 
-        ref="textareaRef" 
-        :id="id" :placeholder="placeholder" :value="modelValue" @change="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)" 
-        :class="`w-full flex-grow resize-none overflow-hidden placeholder:pt-1.5 placeholder:text-xs placeholder:text-body-secondary outline-none 
-        ${isError ? 'text-error focus:text-error' : 'text-hovered focus:text-hovered'}`" />
+
+      <textarea
+        ref="textareaRef"
+        :id="id"
+        :placeholder="placeholder"
+        :value="modelValue"
+        @input="autoResize"
+        :class="`w-full flex-grow resize-none placeholder:pt-1.5 placeholder:text-xs placeholder:text-body-secondary outline-none
+        ${isError ? 'text-error focus:text-error' : 'text-hovered focus:text-hovered'}`"
+      />
     </div>
     <span v-if="isError" class="text-error text-xs">
       {{ errorMessage }}
@@ -44,12 +58,14 @@ defineEmits(['update:modelValue'])
 
 <style scoped>
 .focus-area:focus-within {
-  box-shadow: 0 0 16px 0 hsl(from var(--color-brand-500) h s l / 0.5),
+  box-shadow:
+    0 0 16px 0 hsl(from var(--color-brand-500) h s l / 0.5),
     0 0 4px 0 hsl(from var(--color-brand-500) h s l / 0.8);
 }
 
 .input-error {
-  box-shadow: 0 0 16px 0 hsl(from var(--color-error-200) h s l / 0.5),
+  box-shadow:
+    0 0 16px 0 hsl(from var(--color-error-200) h s l / 0.5),
     0 0 4px 0 hsl(from var(--color-error-100) h s l / 0.6);
 }
 </style>

package/dist/src/header/mobile-menu.vue

@@ -76,7 +76,7 @@ const handleCloseMenu = () => {
 <template>
   <div>
     <div class="fixed z-50 top-0 w-full bg-surface-primary-transparent backdrop-blur-3xl border-b border-surface-quaternary">
-      <div :class="`px-5 ${isMenuOpen ? 'pb-5' : 'pb-0'} flex flex-col gap-2 transition-all max-h-screen`">
+      <div :class="['px-5 flex flex-col gap-2 transition-all', isMenuOpen ? 'pb-5 h-dvh' : 'pb-0']">
         <div class="flex justify-between items-center py-1.5 shrink-0">
           <a :href="homeHref" class="px-1.5 hover:opacity-80 transition-opacity">
             <img :src="logo" alt="CODECAVE" />
@@ -85,12 +85,12 @@ const handleCloseMenu = () => {
             <span></span>
           </button>
         </div>
-        <nav v-if="isMenuOpen" class="flex-1 min-h-0 overflow-y-auto text-sm">
+        <nav v-if="isMenuOpen" class="flex-1 min-h-0 overflow-hidden text-sm">
           <div v-if="isServicesOpen" class="h-full flex flex-col min-h-0">
             <h2 class="text-center font-bold text-body-primary py-2.5 shrink-0">
               {{ servicesItem?.submenuTitle }}
             </h2>
-            <div class="flex-1 min-h-0 overflow-y-auto">
+            <div class="services-scroll flex-1 min-h-0 overflow-y-auto overscroll-contain">
               <slot name="services" />
             </div>
 
@@ -136,4 +136,13 @@ const handleCloseMenu = () => {
   background-color: currentColor;
   border-radius: 3rem;
 }
+
+.services-scroll {
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-y: contain;
+  touch-action: pan-y;
+}
 </style>

package/package.json

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