@codecavepro/brand 3.1.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/dist/src/common/forms/ContactUsForm.vue

@@ -54,25 +54,24 @@ const createFormField = <T,>(name: keyof ContactFormDefinition, value: T): FormF
 const formData = ref({
   email: createFormField('email', ''),
   firstName: createFormField('firstName', ''),
-  lastName: createFormField('lastName', ''),
   companyName: createFormField('companyName', ''),
   linkedinCompanyPage: createFormField('linkedinCompanyPage', ''),
   services: createFormField('services', ''),
   description: createFormField('description', ''),
-  
- consentToProcess: {
-  value: false,
-  error: '',
-  label: props.definition.consentToProcess.label,
-  required: props.definition.consentToProcess.required,
-},
-
-communicationConsent: {
-  value: false,
-  error: '',
-  label: props.definition.communicationConsent.label,
-  required: props.definition.communicationConsent.required,
-},
+
+  consentToProcess: {
+    value: false,
+    error: '',
+    label: props.definition.consentToProcess.label,
+    required: props.definition.consentToProcess.required,
+  },
+
+  communicationConsent: {
+    value: false,
+    error: '',
+    label: props.definition.communicationConsent.label,
+    required: props.definition.communicationConsent.required,
+  },
 })
 
 const services = computed(() => props.definition.services.options ?? [])
@@ -123,7 +122,6 @@ const validateRequiredFields = () => {
 const resetForm = () => {
   formData.value.email.value = '';
   formData.value.firstName.value = '';
-  formData.value.lastName.value = '';
   formData.value.companyName.value = '';
   formData.value.linkedinCompanyPage.value = '';
   formData.value.description.value = '';
@@ -136,7 +134,6 @@ const resetForm = () => {
 const currentValues = (): ContactFormValues => ({
   email: formData.value.email.value,
   firstName: formData.value.firstName.value,
-  lastName: formData.value.lastName.value,
   companyName: formData.value.companyName.value,
   linkedinCompanyPage: formData.value.linkedinCompanyPage.value,
   services: formData.value.services.value,
@@ -233,6 +230,22 @@ fields.forEach((key) => {
   )
 })
 
+const companyNamePattern = /[^\p{L}\p{N} &]/u;
+const firstNamePattern = /[^\p{L} ]/u;
+
+const createSanitizer = (pattern) => {
+  return (value) => value.replace(pattern, '');
+};
+
+const sanitizeCompanyName = createSanitizer(companyNamePattern);
+const sanitizeFirstName = createSanitizer(firstNamePattern);
+
+const preventInvalidInput = (event, pattern) => {
+  if (event.data && pattern.test(event.data)) {
+    event.preventDefault();
+  }
+};
+
 </script>
 
 <template>
@@ -241,11 +254,10 @@ fields.forEach((key) => {
       <fieldset class="space-y-2">
         <InputText id="email" v-model="formData.email.value" :isRequired=formData.email.required :label=formData.email.label type="email" :isError="!!formData.email.error" :errorMessage="formData.email.error" :placeholder="formData.email.placeholder ?? ''" autocomplete="email" />
         <div class="flex flex-col xl:flex-row gap-2">
-          <InputText id="firstname" v-model="formData.firstName.value" :isRequired=formData.firstName.required :label=formData.firstName.label type="text" :isError="!!formData.firstName.error" :errorMessage="formData.firstName.error" :placeholder="formData.firstName.placeholder ?? ''" autocomplete="given-name" />
-          <InputText id="lastname" v-model="formData.lastName.value" :isRequired=formData.lastName.required :label=formData.lastName.label type="text" :isError="!!formData.lastName.error" :errorMessage="formData.lastName.error" :placeholder="formData.lastName.placeholder ?? ''" autocomplete="family-name" />
+          <InputText id="firstname" v-model="formData.firstName.value" @beforeinput="event => preventInvalidInput(event, firstNamePattern)" @update:model-value="value => { formData.firstName.value = sanitizeFirstName(value) }" :isRequired="formData.firstName.required" :label="formData.firstName.label" type="text" :isError="!!formData.firstName.error" :errorMessage="formData.firstName.error" :placeholder="formData.firstName.placeholder ?? ''" autocomplete="given-name" />
+          <InputText id="companyName" v-model="formData.companyName.value" @beforeinput="event => preventInvalidInput(event, companyNamePattern)" @update:model-value="value => { formData.companyName.value = sanitizeCompanyName(value) }" :isRequired="formData.companyName.required" :label="formData.companyName.label" type="text" :isError="!!formData.companyName.error" :errorMessage="formData.companyName.error" :placeholder="formData.companyName.placeholder ?? ''" />
         </div>
         <div class="flex flex-col xl:flex-row gap-2">
-          <InputText id="companyName" v-model="formData.companyName.value" :isRequired=formData.companyName.required :label=formData.companyName.label type="text" :isError="!!formData.companyName.error" :errorMessage="formData.companyName.error" :placeholder="formData.companyName.placeholder ?? ''" />
           <InputText id="linkedinCompanyPage" v-model="formData.linkedinCompanyPage.value" :isRequired=formData.linkedinCompanyPage.required :label=formData.linkedinCompanyPage.label type="text" :isError="!!formData.linkedinCompanyPage.error" :errorMessage="formData.linkedinCompanyPage.error" :placeholder="formData.linkedinCompanyPage.placeholder ?? ''" />
         </div>
       </fieldset>
@@ -260,22 +272,22 @@ fields.forEach((key) => {
       </fieldset>
       <div class="space-y-2">
         <Checkbox id="privacy" v-model="formData.consentToProcess.value" :label="formData.consentToProcess.label" :isRequired="formData.consentToProcess.required" :isError="!!formData.consentToProcess.error" />
-        <Checkbox id="promotions" v-model="formData.communicationConsent.value" :label="formData.communicationConsent.label" :isRequired="formData.communicationConsent.required" :isError="!!formData.communicationConsent.error"  />
+        <Checkbox id="promotions" v-model="formData.communicationConsent.value" :label="formData.communicationConsent.label" :isRequired="formData.communicationConsent.required" :isError="!!formData.communicationConsent.error" />
       </div>
     </div>
     <GlowButton @click="submitContactsForm" title="Leave consultation request" class="self-center lg:self-start" />
   </form>
   <div v-show="isAlertVisible" class="border border-action group absolute bottom-19.25 md:fixed z-350 left-1/2 -translate-x-1/2 md:top-40 form-alert flex gap-2 md:gap-8 items-center justify-between w-full h-fit max-w-139 bg-surface-secondary p-4 md:px-6 md:py-2.5 rounded-3xl">
-      <div v-if="alertKind === 'success'" class="w-8 h-8">
-        <component :is="SuccessIcon" class="w-8 h-8" />
-      </div>
-      <p class="text-sm md:text-lg font-bold text-heading md:max-w-sm ">
-        {{ alertKind ? ALERT_TEXT[alertKind] : '' }}
-      </p>
-      <button @click="alertKind = null" class="group-hover:text-action text-heading transition-colors cursor-pointer">
-        <component :is="CloseIcon" />
-      </button>
+    <div v-if="alertKind === 'success'" class="w-8 h-8">
+      <component :is="SuccessIcon" class="w-8 h-8" />
     </div>
+    <p class="text-sm md:text-lg font-bold text-heading md:max-w-sm ">
+      {{ alertKind ? ALERT_TEXT[alertKind] : '' }}
+    </p>
+    <button @click="alertKind = null" class="group-hover:text-action text-heading transition-colors cursor-pointer">
+      <component :is="CloseIcon" />
+    </button>
+  </div>
 </template>
 
 <style scoped>

package/dist/src/helpers/form-validator.ts

@@ -1,9 +1,10 @@
 const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-const linkedInRegex = /^https?:\/\/([a-z]{2,3}\.)?linkedin\.com\/.*$/gim
+const linkedInRegex = /^https?:\/\/([a-z]{2,3}\.)?linkedin\.com\/.*$/im
 
 export const isCorrectEmailFormat = (email: string | null): boolean => {
   return !!email && emailRegex.test(email)
 }
-export const isCorrectLinkedInFormat = (linkedIn: string | null) : boolean => {
-   return !!linkedIn && linkedInRegex.test(linkedIn);
+
+export const isCorrectLinkedInFormat = (linkedIn: string | null): boolean => {
+  return !!linkedIn && linkedInRegex.test(linkedIn)
 }

package/dist/src/lib/crm/types.ts

@@ -26,7 +26,6 @@ export interface CrmFormFieldSpec {
 export type ContactFormFieldName =
   | 'email'
   | 'firstName'
-  | 'lastName'
   | 'companyName'
   | 'linkedinCompanyPage'
   | 'services'
@@ -41,7 +40,6 @@ export type ContactFormDefinition = Record<ContactFormFieldName, CrmFormFieldSpe
 export interface ContactFormValues {
   email: string;
   firstName: string;
-  lastName: string;
   companyName: string;
   linkedinCompanyPage: string;
   services: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecavepro/brand",
-  "version": "3.1.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",