edvoyui-component-library-test-flight 0.0.159 → 0.0.161

package/src/components/HelloWorld.vue

@@ -5,330 +5,353 @@
     >
       Edvoy User Interface
     </h1>
-
-</div>
+  </div>
 </template>
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 <style lang="scss"></style>
 
 <!-- Development code here  -->
 
-<!--
-<template>
+<!--<template>
   <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>
-
-  <div class="max-w-xs py-4 mx-auto border border-red-500 rounded-xl">
-    <EUISearchTagSelect
-      v-model="selectedCity"
-      :items="datas"
-      :searchIcon="true"
-      :required="false"
-      itemText="name"
-      placeholder="Search Cities"
-      select-type="multiple"
-      :clearable="true"
-      @search="onSearch"
-      @on-change="onCitySelect"
-      @on-deselect="clear"
+    <div
+      class="flex flex-col max-w-screen-sm gap-4 p-6 mx-auto mb-10 border rounded-xl"
     >
-      <template #labelhint>
-        <div class="my-1 text-xs font-medium text-gray-400">
-          Changing the city will affect your university selection
-        </div>
-      </template>
-    </EUISearchTagSelect>
-    <pre class="p-2 text-red-500 text-xxs">{{ selectedCity }}--</pre>
-  </div>
+      <pre>{{ inputNumber }}</pre>
+      <EUINumberInput
+        v-model.trim="inputNumber"
+        name="addnote"
+        id="addnote"
+        label="Add Note"
+        placeholder="Note here..."
+        :min="1"
+        :max="10"
+        :step="1"
+      />
+    </div>
+
+    <div class="max-w-xs py-4 mx-auto border border-red-500 rounded-xl">
+      <EUISearchTagSelect
+        v-model="selectedCity"
+        :items="datas"
+        :searchIcon="true"
+        :required="false"
+        itemText="name"
+        placeholder="Search Cities"
+        select-type="multiple"
+        :clearable="true"
+        @search="onSearch"
+        @on-change="onCitySelect"
+        @on-deselect="clear"
+      >
+        <template #labelhint>
+          <div class="my-1 text-xs font-medium text-gray-400">
+            Changing the city will affect your university selection
+          </div>
+        </template>
+      </EUISearchTagSelect>
+      <pre class="p-2 text-red-500 text-xxs">{{ selectedCity }}--</pre>
+    </div>
 
     <div class="relative">
       <EUIStepperHorizontal
-  :steps="allSteps"
-  :step-status="currentStage"
-  :history="lifeCycleHistory"
-/>
+        :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"
-                :value="businessAreaSel"
-                :items="businessArea"
-                search-label="name"
-                label="Select Label"
-                placeholder="Placeholder"
-                :multiple="true"
-                :isCheckbox="true"
-                :selectedCount="true"
-                selectedCountLabel="Business Area"
-                :inputFilled="true"
-                :searchable="true"
-              />
-
-              <EUISelect
-                v-model="popoverSelect"
-                :value="popoverSelect"
-                :items="datas"
-                search-label="name"
-                label="Select Label"
-                placeholder="Placeholder"
-                :searchable="true"
-                :multiple="true"
-                :isCheckbox="true"
-                :selectedCount="true"
-                :inputFilled="true"
-              />
+    <div class="grid max-w-5xl grid-cols-3 gap-6 mx-auto mb-6">
+      <EUISelect
+        v-model="businessAreaSel"
+        :value="businessAreaSel"
+        :items="businessArea"
+        search-label="name"
+        label="Select Label"
+        selectedCountLabel="Business Area"
+        placeholder="Placeholder"
+        :multiple="true"
+        :inputFilled="true"
+        :searchable="true"
+      />
+
+      <EUISelect
+        v-model="popoverSelect"
+        :value="popoverSelect"
+        :items="datas"
+        search-label="name"
+        label="Select Label"
+        placeholder="Placeholder"
+        :searchable="true"
+        :multiple="true"
+        :isCheckbox="true"
+        :selectedCount="true"
+        :inputFilled="true"
+      />
+
+      <EUISelect
+        v-model="popoverSelect"
+        :value="popoverSelect"
+        :items="countryAll"
+        search-label="name"
+        label="Country"
+        placeholder="select country"
+        :searchable="true"
+        :multiple="true"
+        :isCheckbox="true"
+        :selectedCount="true"
+        :inputFilled="true"
+        :group-select="true"
+      />
     </div>
 
+    <div class="grid w-full h-48 grid-cols-4 gap-4 mb-20 isolate">
+      <div
+        class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
+      >
+        <div class="text-base font-semibold leading-loose text-gray-900">
+          Popover Click Method
+        </div>
 
-  <div class="grid w-full h-48 grid-cols-4 gap-4 mb-20 isolate">
-    <div
-      class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
-    >
-      <div class="text-base font-semibold leading-loose text-gray-900">
-        Popover Click Method
-      </div>
-
-      <div class="inline-flex items-center justify-end flex-none gap-4">
-        <EUIPopover
-          trigger="click"
-          placement="bottom-end"
-          className="max-w-80 min-w-80"
-          customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
-        >
-          <template #referenceButton="{ open }">
-            <div class="relative">
-              <FunnelIcon class="text-current size-6" />
-              <div
-                v-if="!open"
-                class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
-              />
-            </div>
-          </template>
-
-          <div
-            class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
+        <div class="inline-flex items-center justify-end flex-none gap-4">
+          <EUIPopover
+            trigger="click"
+            placement="bottom-end"
+            className="max-w-80 min-w-80"
+            customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
           >
-            <div>lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
-            <div @click.stop>
-              <EUISelect
-                search-label="name"
-                label="Select Label"
-                placeholder="Placeholder"
-                :items="datas"
-                :multiple="true"
-                :multiple-limit="3"
-              />
-            </div>
+            <template #referenceButton="{ open }">
+              <div class="relative">
+                <FunnelIcon class="text-current size-6" />
+                <div
+                  v-if="!open"
+                  class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
+                />
+              </div>
+            </template>
 
-            <div>lorem ipsum dolor sit amet consectetur adipisicing elit</div>
-            <div class="flex items-center justify-end gap-4 pt-4">
-              <EUIButton
-                type="button"
-                size="md"
-                color="white"
-                :loading="isLoading"
-                @click="resetFilters()"
-                >Reset</EUIButton
-              >
-              <EUIButton
-                type="button"
-                size="md"
-                color="purple"
-                :loading="isLoading"
-                @click="applyFilter()"
-                >Apply</EUIButton
-              >
+            <div
+              class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
+            >
+              <div>
+                lorem ipsum dolor sit amet consectetur adipisicing elit.
+              </div>
+              <div @click.stop>
+                <EUISelect
+                  search-label="name"
+                  label="Select Label"
+                  placeholder="Placeholder"
+                  :items="datas"
+                  :multiple="true"
+                  :multiple-limit="3"
+                />
+              </div>
+
+              <div>lorem ipsum dolor sit amet consectetur adipisicing elit</div>
+              <div class="flex items-center justify-end gap-4 pt-4">
+                <EUIButton
+                  type="button"
+                  size="md"
+                  color="white"
+                  :loading="isLoading"
+                  @click="resetFilters()"
+                  >Reset</EUIButton
+                >
+                <EUIButton
+                  type="button"
+                  size="md"
+                  color="purple"
+                  :loading="isLoading"
+                  @click="applyFilter()"
+                  >Apply</EUIButton
+                >
+              </div>
             </div>
-          </div>
-        </EUIPopover>
+          </EUIPopover>
+        </div>
       </div>
-    </div>
 
-     <div
-      class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
-    >
-      <div class="text-base font-semibold leading-loose text-gray-900">
-        Popover Hover Method
-      </div>
+      <div
+        class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
+      >
+        <div class="text-base font-semibold leading-loose text-gray-900">
+          Popover Hover Method
+        </div>
 
-      <div class="inline-flex items-center justify-end flex-none gap-4">
-        <EUIPopover
-          trigger="hover"
-          placement="bottom-end"
-          :hover-hide-delay="150"
-          className="max-w-80 min-w-80"
-          customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
-        >
-          <template #referenceButton>
-            <div class="relative">
-              <FunnelIcon class="text-current size-6" />
-              <div
-                class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
-              />
-            </div>
-          </template>
-          <div
-            class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
+        <div class="inline-flex items-center justify-end flex-none gap-4">
+          <EUIPopover
+            trigger="hover"
+            placement="bottom-end"
+            :hover-hide-delay="150"
+            className="max-w-80 min-w-80"
+            customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
           >
-            <div>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex atque
-              sed illo ipsa tenetur dolores minus quis, impedit aliquam magni.
-              Animi laborum tenetur culpa aperiam porro nihil eius soluta
-              asperiores.
-            </div>
+            <template #referenceButton>
+              <div class="relative">
+                <FunnelIcon class="text-current size-6" />
+                <div
+                  class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
+                />
+              </div>
+            </template>
+            <div
+              class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
+            >
+              <div>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex
+                atque sed illo ipsa tenetur dolores minus quis, impedit aliquam
+                magni. Animi laborum tenetur culpa aperiam porro nihil eius
+                soluta asperiores.
+              </div>
 
-            <div class="flex items-center justify-end gap-4 pt-4">
-              <EUIButton
-                type="button"
-                size="md"
-                color="white"
-                :loading="isLoading"
-                @click="resetFilters()"
-                >Reset</EUIButton
-              >
-              <EUIButton
-                type="button"
-                size="md"
-                color="purple"
-                :loading="isLoading"
-                @click="applyFilter()"
-                >Apply</EUIButton
-              >
+              <div class="flex items-center justify-end gap-4 pt-4">
+                <EUIButton
+                  type="button"
+                  size="md"
+                  color="white"
+                  :loading="isLoading"
+                  @click="resetFilters()"
+                  >Reset</EUIButton
+                >
+                <EUIButton
+                  type="button"
+                  size="md"
+                  color="purple"
+                  :loading="isLoading"
+                  @click="applyFilter()"
+                  >Apply</EUIButton
+                >
+              </div>
             </div>
-          </div>
-        </EUIPopover>
+          </EUIPopover>
+        </div>
       </div>
-    </div>
 
-   <div
-      class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
-    >
-      <div class="text-base font-semibold leading-loose text-gray-900">
-        Popover Default Open
-      </div>
+      <div
+        class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
+      >
+        <div class="text-base font-semibold leading-loose text-gray-900">
+          Popover Default Open
+        </div>
 
-      <div class="inline-flex items-center justify-end flex-none gap-4">
-        <EUIPopover
-          v-model:visible="isInitiallyOpen"
-          placement="bottom-end"
-          :hover-hide-delay="150"
-          className="max-w-80 min-w-80"
-          customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
-        >
-          <template #referenceButton>
-            <div class="relative">
-              <FunnelIcon class="text-current size-6" />
-              <div
-                class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
-              />
-            </div>
-          </template>
-          <div
-            class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
+        <div class="inline-flex items-center justify-end flex-none gap-4">
+          <EUIPopover
+            v-model:visible="isInitiallyOpen"
+            placement="bottom-end"
+            :hover-hide-delay="150"
+            className="max-w-80 min-w-80"
+            customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
           >
-            <div>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex atque
-              sed illo ipsa tenetur dolores minus quis, impedit aliquam magni.
-              Animi laborum tenetur culpa aperiam porro nihil eius soluta
-              asperiores.
-            </div>
+            <template #referenceButton>
+              <div class="relative">
+                <FunnelIcon class="text-current size-6" />
+                <div
+                  class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
+                />
+              </div>
+            </template>
+            <div
+              class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
+            >
+              <div>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex
+                atque sed illo ipsa tenetur dolores minus quis, impedit aliquam
+                magni. Animi laborum tenetur culpa aperiam porro nihil eius
+                soluta asperiores.
+              </div>
 
-            <div class="flex items-center justify-end gap-4 pt-4">
-              <EUIButton
-                type="button"
-                size="md"
-                color="white"
-                :loading="isLoading"
-                @click="resetFilters()"
-                >Reset</EUIButton
-              >
-              <EUIButton
-                type="button"
-                size="md"
-                color="purple"
-                :loading="isLoading"
-                @click="onDefaultClose()"
-                >Apply</EUIButton
-              >
+              <div class="flex items-center justify-end gap-4 pt-4">
+                <EUIButton
+                  type="button"
+                  size="md"
+                  color="white"
+                  :loading="isLoading"
+                  @click="resetFilters()"
+                  >Reset</EUIButton
+                >
+                <EUIButton
+                  type="button"
+                  size="md"
+                  color="purple"
+                  :loading="isLoading"
+                  @click="onDefaultClose()"
+                  >Apply</EUIButton
+                >
+              </div>
             </div>
-          </div>
-        </EUIPopover>
+          </EUIPopover>
+        </div>
       </div>
-    </div>
 
- <div
-      class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
-    >
-      <div class="text-base font-semibold leading-loose text-gray-900">
-        Popover Manual
-      </div>
+      <div
+        class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
+      >
+        <div class="text-base font-semibold leading-loose text-gray-900">
+          Popover Manual
+        </div>
 
-      <div class="inline-flex items-center justify-end flex-none gap-4">
-        <EUIPopover
-          trigger="manual"
-          v-model:visible="popoverVisible"
-          placement="top"
-          className="max-w-80 min-w-80"
-          customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
-          @click="onPopoverToggle"
-        >
-          <template #referenceButton>
-            <div class="relative">
-              <FunnelIcon class="text-current size-6" />
-              <div
-                class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
-              />
-            </div>
-          </template>
-          <div
-            class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
+        <div class="inline-flex items-center justify-end flex-none gap-4">
+          <EUIPopover
+            trigger="manual"
+            v-model:visible="popoverVisible"
+            placement="top"
+            className="max-w-80 min-w-80"
+            customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
+            @click="onPopoverToggle"
           >
-            <div>lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
-            <div @click.stop>
-              <EUISelect
-                search-label="name"
-                label="Select Label"
-                placeholder="Placeholder"
-                :items="datas"
-                :multiple="true"
-                :multiple-limit="3"
-              />
-            </div>
+            <template #referenceButton>
+              <div class="relative">
+                <FunnelIcon class="text-current size-6" />
+                <div
+                  class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
+                />
+              </div>
+            </template>
+            <div
+              class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
+            >
+              <div>
+                lorem ipsum dolor sit amet consectetur adipisicing elit.
+              </div>
+              <div @click.stop>
+                <EUISelect
+                  search-label="name"
+                  label="Select Label"
+                  placeholder="Placeholder"
+                  :items="datas"
+                  :multiple="true"
+                  :multiple-limit="3"
+                />
+              </div>
 
-            <div>lorem ipsum dolor sit amet consectetur adipisicing elit</div>
+              <div>lorem ipsum dolor sit amet consectetur adipisicing elit</div>
 
-            <div class="flex items-center justify-end gap-4 pt-4">
-              <EUIButton
-                type="button"
-                size="md"
-                color="white"
-                :loading="isLoading"
-                @click="resetFilters()"
-                >Reset</EUIButton
-              >
-              <EUIButton
-                type="button"
-                size="md"
-                color="purple"
-                :loading="isLoading"
-                @click="applyFilter()"
-                >Apply</EUIButton
-              >
+              <div class="flex items-center justify-end gap-4 pt-4">
+                <EUIButton
+                  type="button"
+                  size="md"
+                  color="white"
+                  :loading="isLoading"
+                  @click="resetFilters()"
+                  >Reset</EUIButton
+                >
+                <EUIButton
+                  type="button"
+                  size="md"
+                  color="purple"
+                  :loading="isLoading"
+                  @click="applyFilter()"
+                  >Apply</EUIButton
+                >
+              </div>
             </div>
-          </div>
-        </EUIPopover>
+          </EUIPopover>
+        </div>
       </div>
     </div>
-  </div>
-
 
-     <div class="mb-10">
+    <div class="mb-10">
       <EUITabOutline
         activeColor="purple"
         size="sm"
@@ -339,24 +362,28 @@
         <template v-slot:content="{ data, activeName }">
           <div class="space-y-4">
             <span class="text-red-400">{{ data.name }} - {{ activeName }}</span>
-          <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit odio
-            quia, obcaecati suscipit, praesentium temporibus, non placeat
-            reprehenderit commodi ut adipisci consequatur laboriosam? Est
-            perspiciatis vero illo repudiandae quis explicabo.</p>
-
-            <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit odio
-            quia, obcaecati suscipit, praesentium temporibus, non placeat
-            reprehenderit commodi ut adipisci consequatur laboriosam? Est
-            perspiciatis vero illo repudiandae quis explicabo.</p>
-            </div>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit odio
+              quia, obcaecati suscipit, praesentium temporibus, non placeat
+              reprehenderit commodi ut adipisci consequatur laboriosam? Est
+              perspiciatis vero illo repudiandae quis explicabo.
+            </p>
+
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit odio
+              quia, obcaecati suscipit, praesentium temporibus, non placeat
+              reprehenderit commodi ut adipisci consequatur laboriosam? Est
+              perspiciatis vero illo repudiandae quis explicabo.
+            </p>
+          </div>
         </template>
       </EUITabOutline>
     </div>
 
-        <div class="p-8 space-x-6 space-y-4">
+    <div class="p-8 space-x-6 space-y-4">
       <pre class="text-right">{{ activeDays }}--</pre>
       <div class="inline-flex flex-col items-end w-full">
-          <EUIButtonGroup
+        <EUIButtonGroup
           activeColor="purple"
           size="sm"
           :rounded="false"
@@ -364,17 +391,21 @@
           :defaultActive="activeDays"
           @update:activeButton="onchangeDays"
         >
-        <template #before>
-          <div
-            class="px-2 text-sm font-normal leading-tight tracking-wide text-black me-4 font-inter"
-          >
-            Renewals due in
-          </div>
-        </template>
-         <template #default="{ data, activeName}">
-             {{ data.name }} <small :class="activeName === data.name ? 'opacity-100': 'opacity-75'">({{ data.count }})</small>
-        </template>
-      </EUIButtonGroup>
+          <template #before>
+            <div
+              class="px-2 text-sm font-normal leading-tight tracking-wide text-black me-4 font-inter"
+            >
+              Renewals due in
+            </div>
+          </template>
+          <template #default="{ data, activeName }">
+            {{ data.name }}
+            <small
+              :class="activeName === data.name ? 'opacity-100' : 'opacity-75'"
+              >({{ data.count }})</small
+            >
+          </template>
+        </EUIButtonGroup>
       </div>
 
       <div class="inline-flex items-center justify-end w-full">
@@ -412,21 +443,20 @@
             heading="Send Icon here"
             :alertIcon="ExclamationTriangleIcon"
           >
-          <template #xclose>
-           <a href="#" class="text-sm font-medium text-yellow-700 whitespace-nowrap hover:text-yellow-600">
-            Go to Page
-            <span aria-hidden="true"> &rarr;</span>
-          </a>
-          </template>
-        </EUIAlerts>
+            <template #xclose>
+              <a
+                href="#"
+                class="text-sm font-medium text-yellow-700 whitespace-nowrap hover:text-yellow-600"
+              >
+                Go to Page
+                <span aria-hidden="true"> &rarr;</span>
+              </a>
+            </template>
+          </EUIAlerts>
 
+          <EUIAlerts alert-type="Success" heading="Title only show here" />
 
           <EUIAlerts
-            alert-type="Success"
-            heading="Title only show here"
-          />
-
-           <EUIAlerts
             alert-type="Warning"
             heading="Send Icon here"
             :icon="ExclamationTriangleIcon"
@@ -463,16 +493,24 @@
             alert-type="Warning"
             :showAlert="showAlert"
             @update:showAlert="showAlert = $event"
+          >
+            <template #icon>
+              <ExclamationTriangleIcon
+                class="text-current size-4"
+                aria-hidden="true"
+              />
+            </template>
+            <template #title>Use Template here</template>
+            <template #content
+              >Are you sure you want to deactivate your account? All of your
+              data will be permanently removed from our servers forever. This
+              action cannot be undone.</template
             >
-          <template #icon>
-            <ExclamationTriangleIcon class="text-current size-4" aria-hidden="true" />
-          </template>
-          <template #title>Use Template here</template>
-          <template #content>Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone.</template>
 
-          <template #actionButtons>
-            <div class="pt-4">
-              <button type="button"
+            <template #actionButtons>
+              <div class="pt-4">
+                <button
+                  type="button"
                   class="rounded-md px-3 py-1.5 text-sm font-medium bg-black text-white focus:outline-none focus:ring-2 focus:ring-offset-2"
                 >
                   View status
@@ -483,8 +521,8 @@
                 >
                   Dismiss
                 </button>
-            </div>
-          </template>
+              </div>
+            </template>
           </EUIAlerts>
         </div>
       </div>
@@ -835,18 +873,26 @@
         </EUITabs>
 
         <div class="bg-white">
-    <EUITabs tab-style="design" :tabs="tabData" :defaultActiveIndex="0">
-          <template #title="{ tab,tabIndex, activeTab }">
-            {{ tab.name }}
-            <span class="rounded-3xl px-1.5 text-xss font-medium uppercase leading-none inline-flex items-center h-4 transition-colors duration-100 ease-in-out" :class="[tabIndex === activeTab ? 'text-gray-100 bg-gray-600' : 'bg-gray-300 text-gray-600']">{{ 28399 }}</span>
-          </template>
-          <template #content="{ activeTab }">
-           <div class="p-2 text-sm">
-             {{ activeTab }}
-           </div>
-          </template>
-        </EUITabs>
-  </div>
+          <EUITabs tab-style="design" :tabs="tabData" :defaultActiveIndex="0">
+            <template #title="{ tab, tabIndex, activeTab }">
+              {{ tab.name }}
+              <span
+                class="rounded-3xl px-1.5 text-xss font-medium uppercase leading-none inline-flex items-center h-4 transition-colors duration-100 ease-in-out"
+                :class="[
+                  tabIndex === activeTab
+                    ? 'text-gray-100 bg-gray-600'
+                    : 'bg-gray-300 text-gray-600',
+                ]"
+                >{{ 28399 }}</span
+              >
+            </template>
+            <template #content="{ activeTab }">
+              <div class="p-2 text-sm">
+                {{ activeTab }}
+              </div>
+            </template>
+          </EUITabs>
+        </div>
       </div>
 
       <div
@@ -1469,7 +1515,12 @@ import EUIAvatar from "./avatar/EUIAvatar.vue";
 import EUIStepperTimeline from "./stepperTimeline/EUIStepperTimeline.vue";
 import EUIAccordion from "./accordion/EUIAccordion.vue";
 import EUITelephone from "./telephone/EUITelephone.vue";
-import { DevicePhoneMobileIcon, ExclamationTriangleIcon, FunnelIcon, HomeIcon } from "@heroicons/vue/24/outline";
+import {
+  DevicePhoneMobileIcon,
+  ExclamationTriangleIcon,
+  FunnelIcon,
+  HomeIcon,
+} from "@heroicons/vue/24/outline";
 import EUIDatepicker from "./datepicker/EUIDatepicker.vue";
 import EUIDashboardTable from "./table/EUIDashboardTable.vue";
 import tabData from "../data/tab";
@@ -1493,20 +1544,17 @@ import EUIPopover from "./popover/EUIPopover.vue";
 import EUIStepperHorizontal from "./stepperTimeline/EUIStepperHorizontal.vue";
 import { debounce } from "lodash";
 import EUISearchTagSelect from "./searchTagSelect/EUISearchTagSelect.vue";
+import { countryAll } from "../data/country";
+import EUINumberInput from "./input/EUINumberInput.vue";
 
-const checkboxData = ref([])
-const businessAreaSel = ref()
-const popoverSelect = ref([]);
+const checkboxData = ref([]);
+const businessAreaSel = ref();
+const popoverSelect = ref();
 
-const businessArea = ref([
-  "All",
-  "B2B",
-  "B2C",
-  "Accelerator"
-])
+const businessArea = ref(["All", "B2B", "B2C", "Accelerator"]);
 
 const emit = defineEmits(["update:modelValue", "on-select"]);
-const selectedCity = ref()
+const selectedCity = ref();
 
 const onSearch = debounce(async (query: string) => query, 350);
 const onCitySelect = (value: any) => {
@@ -1556,15 +1604,15 @@ const allDays = ref([
 ]);
 
 const activeDays = ref(allDays.value[0].name);
-const activeTab = ref(allDays.value[3].name)
+const activeTab = ref(allDays.value[3].name);
 
 const onchangeActiveTab = (val: any) => {
   activeTab.value = val.name;
 };
 
-const onchangeDays = (val:any) => {
-  activeDays.value = val.name
-}
+const onchangeDays = (val: any) => {
+  activeDays.value = val.name;
+};
 
 const searchInput = ref("");
 const showSearch = ref(false);
@@ -1577,6 +1625,8 @@ const mobileNumber = ref("+91 8667444951");
 const datepicker = ref(new Date());
 const loading = ref(false);
 
+const inputNumber = ref();
+
 const form = reactive({
   input: "Lorem ipsum dolor sit",
   mobile: "+918667444951",
@@ -1660,81 +1710,81 @@ const handleActiveItem = (activeItems: number) => {
 };
 
 // Stepper dynamic Data
-const allSteps = ['MQL','SAL','PROSPECT','CUSTOMER']
-const currentStage = 'PROSPECT'
+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: "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: "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"
-    }
-  }
-]
+    lifecycleStage: "PROSPECT",
+    updatedAt: "2025-08-25T15:42:30.195Z",
+    updatedBy: {
+      email: "testuser2@edvoy.com",
+    },
+  },
+];
 
 //TODO: Select Data
 const datas = ref([
   {
-    value:'ShawnBurke',
+    value: "ShawnBurke",
     name: "Shawn Burke",
     age: 6,
   },
   {
-    value: 'EmeryNolan',
+    value: "EmeryNolan",
     name: "Emery Nolan",
     age: 4,
   },
   {
-    value: 'EmbryGrant',
+    value: "EmbryGrant",
     name: "Embry Grant",
     age: 3,
   },
   {
-    value: 'JesseAustin',
+    value: "JesseAustin",
     name: "Jesse Austin",
     age: 9,
   },
   {
-    value: 'TandyChristensen',
+    value: "TandyChristensen",
     name: "Tandy Christensen",
     age: 7,
   },
   {
-    value:'ShawnBurkeNew',
+    value: "ShawnBurkeNew",
     name: "Shawn Burke New",
     age: 6,
   },
   {
-    value: 'EmeryNolanNew',
+    value: "EmeryNolanNew",
     name: "Emery Nolan New",
     age: 4,
   },
   {
-    value: 'EmbryGrantNew',
+    value: "EmbryGrantNew",
     name: "Embry Grant New",
     age: 3,
   },
   {
-    value: 'JesseAustinNew',
+    value: "JesseAustinNew",
     name: "Jesse Austin New",
     age: 9,
   },
   {
-    value: 'TandyChristensenNew',
+    value: "TandyChristensenNew",
     name: "Tandy Christensen New",
     age: 7,
   },
@@ -1909,4 +1959,5 @@ const accordionData = ref([
 ]);
 </script>
 
-<style lang="scss" scoped></style>  -->
+<style lang="scss" scoped></style>
+-->