edvoyui-component-library-test-flight 0.0.147 → 0.0.149

package/dist/modal/EUIModal.vue.d.ts

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=script&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=style&index=0&scoped=0a1278e7&lang.scss";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=style&index=0&scoped=6e392f5b&lang.scss";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUIModal.vue.d.ts.map

package/dist/modal/EUIModal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EUIModal.vue.d.ts","sourceRoot":"","sources":["../../src/components/modal/EUIModal.vue"],"names":[],"mappings":"AACA,cAAc,2FAA2F,CAAC;AA6F1G,OAAO,oHAAoH,CAAC;;AAE5H,wBAAmH"}
+{"version":3,"file":"EUIModal.vue.d.ts","sourceRoot":"","sources":["../../src/components/modal/EUIModal.vue"],"names":[],"mappings":"AACA,cAAc,2FAA2F,CAAC;AA+F1G,OAAO,oHAAoH,CAAC;;AAE5H,wBAAmH"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "edvoyui-component-library-test-flight",
   "private": false,
-  "version": "0.0.147",
+  "version": "0.0.149",
   "type": "module",
   "files": [
     "dist/",

package/src/components/HelloWorld.vue

@@ -17,10 +17,18 @@
   <div class="h-[clac(100svh-64px)] w-full px-10 py-8 max-w-screen-xl mx-auto">
     <h1 class="mb-2 font-semibold text-gray-900 tetx-lg">Edvoy UI Componnet</h1>
 
-     <pre class="p-2 text-red-500 text-xxs">
-      {{ popoverSelect }}
-      {{ businessAreaSel }}
-    </pre>
+    <div class="relative">
+      <EUIStepperHorizontal
+  :steps="allSteps"
+  :step-status="currentStage"
+  :history="lifeCycleHistory"
+/>
+    </div>
+
+
+
+
+
     <div class="grid max-w-2xl grid-cols-2 gap-6 mx-auto">
               <EUISelect
                 v-model="businessAreaSel"
@@ -1457,6 +1465,7 @@ import EUIButtonGroup from "./button/EUIButtonGroup.vue";
 import EUISearchExpand from "./searchexpand/EUISearchExpand.vue";
 import EUITabOutline from "./tabs/EUITabOutline.vue";
 import EUIPopover from "./popover/EUIPopover.vue";
+import EUIStepperHorizontal from "./stepperTimeline/EUIStepperHorizontal.vue";
 
 const checkboxData = ref([])
 const businessAreaSel = ref()
@@ -1604,6 +1613,33 @@ const handleActiveItem = (activeItems: number) => {
   console.log("Currently active accordion(s):", activeItems);
 };
 
+// Stepper dynamic Data
+const allSteps = ['MQL','SAL','Prospect','Customer']
+const currentStage = 'Prospect'
+const lifeCycleHistory = [
+  {
+    "lifecycleStage": "MQL",
+    "updatedAt": "2025-08-25T15:35:55.965Z",
+    "updatedBy": {
+      "email": "testuser3@edvoy.com"
+    }
+  },
+  {
+    "lifecycleStage": "SAL",
+    "updatedAt": "2025-08-25T15:36:16.616Z",
+    "updatedBy": {
+      "email": "testuser3@edvoy.com"
+    }
+  },
+  {
+    "lifecycleStage": "PROSPECT",
+    "updatedAt": "2025-08-25T15:42:30.195Z",
+    "updatedBy": {
+      "email": "testuser2@edvoy.com"
+    }
+  }
+]
+
 //TODO: Select Data
 const datas = ref([
   {

package/src/components/input/EUIInput.vue

@@ -15,7 +15,7 @@
         'relative',
         { 'pointer-events-none cursor-not-allowed': disabled },
         {
-          'h-14 rounded-2xl focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600 border border-gray-100':
+          'h-14 rounded-2xl focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600 border border-gray-200':
             inputFilled,
         },
         'group cursor-pointer relative w-full mb-2 overflow-hidden',
@@ -77,7 +77,7 @@
           'z-10 block placeholder:text-gray-400 focus:outline-none text-sm font-medium appearance-none disabled:opacity-75 autofill:bg-white leading-6 transition-all duration-100 border-none outline-none',
           inputFilled
             ? 'pt-6 pb-3 rounded-2xl size-full'
-            : 'py-3 h-10 w-full ring-1 ring-gray-100 focus-within:ring-purple-600 focus-within:ring-2 ring-inset',
+            : 'py-3 h-10 w-full ring-1 ring-gray-200 focus-within:ring-purple-600 focus-within:ring-2 ring-inset',
           !inputFilled && rounded ? 'rounded-2xl' : 'rounded-md',
           disabled ? 'cursor-not-allowed' : 'cursor-text',
           getIconClass(),

package/src/components/modal/EUIModal.stories.ts

@@ -55,6 +55,20 @@ const meta: Meta<typeof EUIModal> = {
           defaultValue: { summary: "sm" },
         },
       },
+      placement: {
+        control: { type: "select" },
+        options: [
+          "top",
+          "bottom",
+          "center",
+        ],
+        description:
+          "Defines the position of the modal show in 'placement' element. Default is 'center'.",
+        defaultValue: "center",
+        table: {
+          defaultValue: { summary: "center" },
+        },
+      },
     },
   },
   parameters: {

package/src/components/modal/EUIModal.vue

@@ -3,7 +3,14 @@
     <Transition name="modal" appear>
       <div
         v-if="isVisible"
-        class="fixed z-50 flex flex-col items-center justify-end inset-2 sm:justify-center"
+        class="fixed z-50 flex flex-col items-center justify-end inset-2 modal-wrapper"
+        :class="[
+          placement === 'top'
+            ? 'sm:justify-start'
+            : placement === 'bottom'
+            ? 'sm:justify-end'
+            : 'sm:justify-center',
+        ]"
         @click.self="closeModal"
       >
         <div
@@ -11,10 +18,12 @@
         ></div>
         <div
           :class="[
-            'bg-white shadow-lg w-full overflow-hidden relative flex flex-col justify-between',
+            'bg-white shadow-lg w-full overflow-hidden relative flex flex-col justify-between modal-container',
             slideClass,
             roundedClass !== '' ? roundedClass : 'rounded-t-3xl md:rounded-2xl',
-            size === 'full' ? 'h-full max-h-svh' : 'max-h-[calc(100svh-3rem)] md:h-auto'
+            size === 'full'
+              ? 'h-full max-h-svh'
+              : 'max-h-[calc(100svh-3rem)] md:h-auto',
           ]"
         >
           <template v-if="$slots.header">
@@ -57,14 +66,20 @@
           <template v-if="$slots.content">
             <slot name="content"></slot>
           </template>
-          <div v-else class="p-4 border-t border-b border-gray-200 max-h-[calc(100svh-3rem)] flex-1">
+          <div
+            v-else
+            class="p-4 border-t border-b border-gray-200 max-h-[calc(100svh-3rem)] flex-1"
+          >
             <slot></slot>
           </div>
 
           <template v-if="$slots.footer">
             <slot name="footer"></slot>
           </template>
-          <div v-else class="sticky bottom-0 flex items-center justify-end float-none p-4 space-x-2">
+          <div
+            v-else
+            class="sticky bottom-0 flex items-center justify-end float-none p-4 space-x-2"
+          >
             <button
               @click="closeModal"
               class="px-4 py-2 text-base font-semibold tracking-wide text-gray-600 transition-colors duration-75 bg-white rounded-md hover:bg-gray-100"
@@ -125,6 +140,10 @@ export default defineComponent({
       type: String as PropType<"xs" | "sm" | "md" | "lg" | "xl" | "full">,
       default: "sm",
     },
+    placement: {
+      type: String as PropType<"center" | "bottom" | "top">,
+      default: "center",
+    },
   },
   emits: ["update:isVisible", "confirm"],
   setup(props, { emit }) {

package/src/components/stepperTimeline/EUIStepperHorizontal.vue

@@ -1,112 +1,278 @@
 <template>
-  <nav aria-label="Progress" class="relative z-10">
-    <ol role="list" class="flex flex-row items-start justify-center w-full py-4 ps-4 pe-2">
-      <li
-        v-for="(step, stepIdx) in lifeCycleEntries"
-        :key="step.value"
-        :class="[
-          stepIdx !== lifeCycleEntries.length - 1 ? 'pe-8' : '',
-          'relative flex items-center w-full pt-6 group',
-          getStatus(step.key, stepIdx) === 'upcoming'
-            ? 'pointer-events-none'
-            : '',
-        ]"
+  <div>
+    <nav aria-label="Progress" class="relative z-50 h-16 max-w-full mx-auto">
+      <ol
+        role="list"
+        class="flex flex-row items-start justify-center w-full py-2 ps-2 pe-2"
       >
-        <template v-if="getStatus(step.key, stepIdx) === 'complete'">
-          <div
-            v-if="stepIdx !== lifeCycleEntries.length - 1"
-            class="absolute bg-green-500 w-full start-0 top-2.5 h-[0.0875rem] z-0"
-          />
-          <div class="absolute top-0 start-0 flex items-center size-5 bg-green-500 rounded-full border-[1.5px] border-green-500" >
-            <svg fill="currentColor" width="16" height="16" viewBox="0 0 24 24" class="text-white size-4"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"><title>Check icon</title></path></svg>
-          </div>
-          <div class="flex flex-col items-start justify-between max-w-full w-full py-0.5">
-            <span class="text-xs font-semibold text-gray-900">{{ startCase(step.value) }}</span>
-            <span class="text-xs font-medium text-gray-500">{{'26-05-2024 18:47'}}</span>
-          </div>
-        </template>
-        <template v-else-if="getStatus(step.key, stepIdx) === 'current'">
-          <div
-            class="absolute bg-orange-500 w-full start-0 top-2.5 h-[0.0875rem] z-0"
-          />
-          <div class="absolute start-0 top-0 flex items-center justify-center size-5 rounded-full bg-white border-[1.5px] border-orange-500">
-            <div class="size-2.5 bg-orange-400 rounded-full" />
-          </div>
-         <div class="flex flex-col items-start justify-between max-w-full w-full py-0.5">
-            <span class="text-xs font-semibold text-gray-900">{{ startCase(step.value) }}</span>
-            <span class="text-xs font-medium text-gray-500">{{'26-05-2024 18:47'}}</span>
-          </div>
-        </template>
-        <template v-else-if="getStatus(step.key, stepIdx) === 'upcoming'">
-          <div
-            v-if="stepIdx !== lifeCycleEntries.length - 1"
-            class="absolute bg-gray-300 w-full start-0 top-2.5 h-[0.0875rem] z-0"
-          />
-          <div class="absolute top-0 start-0 flex items-center justify-center size-5 rounded-full bg-gray-100 border-gray-300 border-[1.5px]">
-            <div class="bg-gray-200 rounded-full size-3" />
-          </div>
-          <div class="flex flex-col items-start justify-between max-w-full w-full py-0.5">
-            <span class="text-xs font-semibold text-gray-900">{{ startCase(step.value) }}</span>
-            <span class="text-xs font-medium text-gray-500">{{'26-05-2024 18:47'}}</span>
-          </div>
-        </template>
-      </li>
-    </ol>
-  </nav>
+        <li
+          v-for="(step, stepIdx) in lifeCycleEntries"
+          :key="step.value"
+          :class="[
+            stepIdx !== lifeCycleEntries.length - 1 ? 'pe-6' : '',
+            'relative flex items-center w-full max-w-36 pt-6 group',
+            getStatus(step.key, stepIdx) === 'upcoming'
+              ? 'pointer-events-none'
+              : 'cursor-pointer',
+          ]"
+        >
+          <template v-if="getStatus(step.key, stepIdx) === 'complete'">
+            <div
+              v-if="stepIdx !== lifeCycleEntries.length - 1"
+              class="absolute bg-green-500 w-full start-0 top-2.5 h-[0.0875rem] z-0"
+            />
+            <div
+              class="absolute top-0 flex items-center text-green-500 bg-white rounded-full start-0 size-5"
+            >
+              <svg
+                width="22"
+                height="22"
+                viewBox="0 0 22 22"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                class="transform scale-110"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M0.849609 10.9996C0.849609 5.39392 5.39392 0.849609 10.9996 0.849609C16.6053 0.849609 21.1496 5.39392 21.1496 10.9996C21.1496 16.6053 16.6053 21.1496 10.9996 21.1496C5.39392 21.1496 0.849609 16.6053 0.849609 10.9996ZM15.0634 9.67153C15.5195 9.36008 15.6368 8.73787 15.3253 8.28178C15.0139 7.82569 14.3917 7.70843 13.9356 8.01988L13.8343 8.08904C12.1934 9.20953 10.779 10.6239 9.66046 12.257L8.20624 10.8044C7.81551 10.4141 7.18234 10.4144 6.79203 10.8051C6.40171 11.1959 6.40205 11.829 6.79278 12.2193L9.13398 14.558C9.35437 14.7782 9.66477 14.8831 9.97353 14.8417C10.2823 14.8003 10.5541 14.6174 10.7088 14.347C11.7597 12.5094 13.214 10.9344 14.9621 9.7407L15.0634 9.67153Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+            <div
+              class="flex flex-col items-start justify-between w-full max-w-full p-1 transition-opacity duration-200 ease-in group-hover:invisible group-hover:opacity-0"
+            >
+              <slot name="default">
+                <span class="text-xs font-semibold text-gray-900">{{
+                  startCase(step.value)
+                }}</span>
+              </slot>
+            </div>
+
+            <div
+              class="absolute left-0 flex flex-col items-start justify-between invisible max-w-full p-2 break-all transition-all duration-300 ease-in-out origin-top-left translate-y-1 bg-white rounded-md shadow-md opacity-0 group-hover:visible group-hover:opacity-100 w-44 top-6 group-hover:pointer-events-auto group-hover:translate-y-0"
+            >
+              <span class="text-xs font-semibold text-gray-900">
+                <slot name="title">
+                  {{ startCase(step.value) }}
+                </slot>
+              </span>
+              <span class="font-medium text-gray-700 text-xss">
+                <slot name="date">
+                  {{ getFormattedDate(step.value) }}
+                </slot>
+              </span>
+              <span class="font-medium text-gray-500 text-xss">
+                <slot name="updatedBy">
+                  {{ getUpdatedByEmail(step.value) }}
+                </slot>
+              </span>
+            </div>
+          </template>
+          <template v-else-if="getStatus(step.key, stepIdx) === 'current'">
+            <div
+              class="absolute bg-orange-500 w-full start-0 top-2.5 h-[0.0875rem] z-0"
+            />
+            <div
+              class="absolute start-0 top-0 flex items-center justify-center size-5 rounded-full bg-white border-[1.5px] border-orange-500"
+            >
+              <div class="size-2.5 bg-orange-400 rounded-full" />
+            </div>
+            <div
+              class="flex flex-col items-start justify-between w-full max-w-full p-1 transition-opacity duration-200 ease-in-out group-hover:invisible group-hover:opacity-0"
+            >
+              <slot name="default">
+                <span class="text-xs font-semibold text-gray-900"
+                  >{{ startCase(step.value) }}
+                </span>
+              </slot>
+            </div>
+            <div
+              class="absolute left-0 flex flex-col items-start justify-between invisible max-w-full p-2 break-all transition-all duration-300 ease-in-out origin-top-left translate-y-1 bg-white rounded-md shadow-md opacity-0 group-hover:visible group-hover:opacity-100 w-44 top-6 group-hover:pointer-events-auto group-hover:translate-y-0"
+            >
+              <span class="text-xs font-semibold text-gray-900">
+                <slot name="title">
+                  {{ startCase(step.value) }}
+                </slot>
+              </span>
+              <span class="font-medium text-gray-700 text-xss">
+                <slot name="date">
+                  {{ getFormattedDate(step.value) }}
+                </slot>
+              </span>
+              <span class="font-medium text-gray-500 text-xss">
+                <slot name="updatedBy">
+                  {{ getUpdatedByEmail(step.value) }}
+                </slot>
+              </span>
+            </div>
+          </template>
+          <template v-else-if="getStatus(step.key, stepIdx) === 'upcoming'">
+            <div
+              v-if="stepIdx !== lifeCycleEntries.length - 1"
+              class="absolute bg-gray-300 w-full start-0 top-2.5 h-[0.0875rem] z-0"
+            />
+            <div
+              class="absolute top-0 start-0 flex items-center justify-center size-5 rounded-full bg-gray-100 border-gray-300 border-[1.5px]"
+            >
+              <div class="bg-gray-200 rounded-full size-3" />
+            </div>
+            <div
+              class="flex flex-col items-start justify-between w-full max-w-full p-1"
+            >
+              <slot name="default">
+                <span
+                  class="text-xs font-semibold text-gray-900 whitespace-nowrap"
+                  >{{ startCase(step.value) }}
+                </span>
+              </slot>
+            </div>
+          </template>
+        </li>
+      </ol>
+    </nav>
+  </div>
 </template>
 <script setup lang="ts">
-import { startCase } from 'lodash';
-import { computed, PropType } from 'vue';
+import { startCase } from "lodash";
+import { computed, PropType } from "vue";
 
 const props = defineProps({
-    stepStatus: {
-        type: String as PropType<"contact" | "MQL" | 'SQL' | 'opportunity' | 'Prospect' | 'Prospect Paid' | 'Prospect Enrolled' | 'Customer'>,
-        default: 'contact'
-    }
-})
+  stepStatus: {
+    type: String as PropType<
+      | "contact"
+      | "MQL"
+      | "SAL"
+      | "SQL"
+      | "opportunity"
+      | "Prospect"
+      | "Prospect Paid"
+      | "Prospect Enrolled"
+      | "Customer"
+    >,
+    default: "contact",
+  },
+  steps: {
+    type: Array as PropType<string[]>,
+    default: () => [
+      "contact",
+      "MQL",
+      "SAL",
+      "SQL",
+      "opportunity",
+      "Prospect",
+      "Prospect Paid",
+      "Prospect Enrolled",
+      "Customer",
+    ],
+  },
+  history: {
+    type: Array as PropType<
+      Array<{ lifecycleStage?: string; updatedAt?: string }>
+    >,
+    default: () => [],
+  },
+});
 
-  const stepStatusEnum = ["contact" , "MQL" , 'SQL' , 'opportunity' , 'Prospect' , 'Prospect Paid' , 'Prospect Enrolled' , 'Customer']
+const stepStatusEnum = computed(() => props.steps);
 
-  const lifeCycleEntries = computed(() => {
-    return Object.entries(stepStatusEnum).map((x) => {
-      return { key: x[0], value: x[1] }
-    })
-  })
+const lifeCycleEntries = computed(() => {
+  return Object.entries(stepStatusEnum.value).map((x) => {
+    return { key: x[0], value: x[1] };
+  });
+});
 
-  const lifeCycleState = computed(() => {
-    return  currentStatus.value
-  })
+const lifeCycleState = computed(() => {
+  return currentStatus.value;
+});
 
-  const currentStatus = computed(() => props.stepStatus)
+const currentStatus = computed(() => props.stepStatus);
 
-  const status = computed(() =>  lifeCycleState.value)
+const status = computed(() => lifeCycleState.value);
 
-  const lifeCycle = computed(() => {
-    return lifeCycleEntries.value.findIndex((e) => e.value === status.value)
-  })
+const lifeCycle = computed(() => {
+  return lifeCycleEntries.value.findIndex((e) => e.value === status.value);
+});
 
-  const getStatus = computed(() => {
-    return (status: string, index: number) => {
-      if (
-        index &&
-        lifeCycle.value === lifeCycleEntries.value.length - 1
-      ) {
-        return 'complete'
-      }
-      if (index === lifeCycle.value) {
-        return 'current'
-      }
-      if (index < lifeCycle.value) {
-        return 'complete'
-      }
-      if (index > lifeCycle.value) {
-        return 'upcoming'
-      }
-      return {
-        status,
-      }
+const getStatus = computed(() => {
+  return (status: string, index: number) => {
+    if (index && lifeCycle.value === lifeCycleEntries.value.length - 1) {
+      return "complete";
+    }
+    if (index === lifeCycle.value) {
+      return "current";
+    }
+    if (index < lifeCycle.value) {
+      return "complete";
     }
-  })
+    if (index > lifeCycle.value) {
+      return "upcoming";
+    }
+    return {
+      status,
+    };
+  };
+});
+
+function normalizeStage(value?: string) {
+  if (!value) return undefined;
+  const v = value.toUpperCase();
+  switch (v) {
+    case "CONTACT":
+      return "contact";
+    case "MQL":
+      return "MQL";
+    case "SAL":
+      return "SAL";
+    case "SQL":
+      return "SQL";
+    case "OPPORTUNITY":
+      return "opportunity";
+    case "PROSPECT":
+      return "Prospect";
+    case "PROSPECT PAID":
+      return "Prospect Paid";
+    case "PROSPECT ENROLLED":
+      return "Prospect Enrolled";
+    case "CUSTOMER":
+      return "Customer";
+    default:
+      return undefined;
+  }
+}
+
+function getFormattedDate(stepValue: string) {
+  const match = props.history.find(
+    (h) => normalizeStage(h.lifecycleStage) === stepValue
+  );
+  if (!match?.updatedAt) return "";
+  try {
+    const date = new Date(match.updatedAt);
+    return (
+      date.toLocaleDateString("en-GB", {
+        day: "numeric",
+        month: "short",
+        year: "numeric",
+      }) +
+      " at " +
+      date.toLocaleTimeString("en-US", {
+        hour: "numeric",
+        minute: "2-digit",
+        hour12: true,
+      })
+    );
+  } catch {
+    return "";
+  }
+}
+
+function getUpdatedByEmail(stepValue: string) {
+  const match = props.history.find(
+    (h) => normalizeStage(h.lifecycleStage) === stepValue
+  );
+  const email = (match as any)?.updatedBy?.email as string | undefined;
+  return email ? `Updatead by ${email}` : "";
+}
 </script>
-<style lang="scss">
-</style>
+<style lang="scss"></style>

package/src/components/telephone/EUITelephone.vue

@@ -9,7 +9,7 @@
 
     <button
       type="button"
-      :class="[disabled ? 'pointer-events-none cursor-not-allowed bg-gray-50' : 'bg-white', inputFilled ? 'h-14 rounded-2xl' : 'h-10 rounded-md', 'relative w-full mb-2 border border-gray-100 cursor-pointer z-1 group focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600']"
+      :class="[disabled ? 'pointer-events-none cursor-not-allowed bg-gray-50' : 'bg-white', inputFilled ? 'h-14 rounded-2xl' : 'h-10 rounded-md', 'relative w-full mb-2 border border-gray-200 cursor-pointer z-1 group focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600']"
       @click="focusInput"
     >
       <label

package/src/components/textArea/EUITextArea.vue

@@ -46,7 +46,7 @@
       </label>
       <textarea
         ref="inputRef"
-        :class="['min-h-[4.5rem] max-h-40 appearance-none block w-full px-4 py-2 placeholder:text-gray-400 text-sm font-medium relative z-0 bg-transparent border-gray-100 focus:outline-none focus:shadow-none focus-within:outline-none focus:border-purple-600 disabled:opacity-75 autofill:bg-white leading-6 placeholder:capitalize rounded-md border-solid border focus-within:ring-1 focus-within:ring-purple-600 transition-colors duration-300 ease-in-out',{'border-red-500': errors}]"
+        :class="['min-h-[4.5rem] max-h-40 appearance-none block w-full px-4 py-2 placeholder:text-gray-400 text-sm font-medium relative z-0 bg-transparent border-gray-200 focus:outline-none focus:shadow-none focus-within:outline-none focus:border-purple-600 disabled:opacity-75 autofill:bg-white leading-6 placeholder:capitalize rounded-md border-solid border focus-within:ring-1 focus-within:ring-purple-600 transition-colors duration-300 ease-in-out',{'border-red-500': errors}]"
         v-model="localValue"
         :placeholder="placeholder"
         :disabled="disabled"