edvoyui-component-library-test-flight 0.0.22 → 0.0.24

package/src/components/HelloWorld.vue

@@ -0,0 +1,999 @@
+<template>
+  <h1 class="my-10 text-2xl font-bold text-center text-gray-900 underline underline-offset-2 decoration-green-400 decoration-wavy">
+    Edvoy User Interface
+  </h1>
+
+</template>
+<script setup lang="ts">
+</script>
+<style lang="scss"></style>
+
+<!-- Development code here -->
+<!-- <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="grid gap-4 sm:grid- cols-2 place-items-start">
+      <div
+        class="w-full max-w-screen-xl col-span-2 p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Select Multiple
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUISelect label="Firstname" placeholder="Enter your name" :items="datas" /&gt;</code>
+    </pre>
+
+        <div class="grid grid-cols-3 gap-4">
+          <EUISelect
+            search-label="name"
+            label="Multiple Select width Limiting"
+            placeholder="Enter your name"
+            :items="datas"
+            :multiple="true"
+            :multiple-limit="3"
+          />
+          <EUISelect placeholder="Enter your name" :items="datas" />
+          <EUISelect
+            :is-use-custom-select="true"
+            :items="datas"
+            name="customselect"
+            placeholder="Select multiple"
+            :multiple="true"
+            customWidth="500px"
+            :custom-offset="[-200, 100]"
+          />
+
+          <EUISelectSearch />
+        </div>
+      </div>
+
+       <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Multi Dropdown
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        ><code>&lt;EUIMultiDropdown title="dropdown" :menu-items="menubar" /&gt;</code>
+    </pre>
+         <div class="inline-flex items-center gap-4">
+      <EUIMultiDropdown title="dropdown" :menu-items="menubar" />
+      <EUIMultiDropdown title="dropdown" class-name="px-3 py-2 text-gray-700 hover:text-gray-900 bg-white rounded-md focus:bg-violet-100 group focus:outline-none focus:ring-2 focus:ring-violet-400 focus:ring-opacity-100 hover:bg-gray-100 active:bg-violet-200" @subMenuItem="handleSubMenuItem" @menuItem="handleMenuItem">
+        <template #dropdownName="{ open }">
+            <span>My Students</span>
+            <ChevronDownStroke :class="open ? 'text-gray-900 rotate-180' : 'text-gray-500'"
+              class="transition duration-100 ease-in-out transform rotate-0 size-6 group-hover:text-opacity-80"
+              aria-hidden="true"
+            />
+          </template>
+      </EUIMultiDropdown>
+    </div>
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Telephone
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUITelephone name="contactNumber" label="Contact Number" placeholder="Your mobile number" tag="Mobile
+        input required" tag-color="Error" /&gt;</code>
+    </pre>
+        <EUITelephone
+          v-model="mobileNumber"
+          name="contactNumber"
+          label="Contact Number"
+          placeholder="Your mobile number"
+          tag="Mobile input required"
+          tag-color="Error"
+          :errors="{ name: 'Enter a valid phone number' }"
+          icon-type="startIcon"
+        />
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Input Normal
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUIInputNormal label="Firstname" placeholder="Enter your name" rounded :class-name="['bg-gray-100/50']
+        /&gt;</code>
+    </pre>
+        <EUIInputNormal
+          v-model.trim="form.input"
+          name="addnote"
+          id="addnote"
+          label="Add Note"
+          placeholder="Note here..."
+          rounded
+          :class-name="['bg-gray-100/50']"
+        />
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Input
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUIInput label="Firstname" placeholder="Enter your name" /&gt;</code>
+    </pre>
+        <EUIInput
+          v-model.trim="form.input"
+          label="Firstname"
+          placeholder="Enter your name"
+        />
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Checkbox
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUICheckbox label="Use checkbox" /&gt;</code>
+    </pre>
+        <EUICheckbox label="Use checkbox" />
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Tabs
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUITabs :tabs="tabData" :defaultActiveIndex="0" /&gt;</code>
+    </pre>
+        <EUITabs tab-style="border" :tabs="tabData" :defaultActiveIndex="0">
+          <template #title="{ tab }">{{ tab.name }}</template>
+          <template #content="{ activeTab }">
+            {{ activeTab }}
+          </template>
+        </EUITabs>
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Textarea
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUITextarea label="Office Address" placeholder="Enter offices and location details" /&gt;</code>
+    </pre>
+        <EUITextarea
+          placeholder="Enter offices and location details"
+          label="Office Address"
+        />
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Tag
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUITag closeIcon :model-value="tagModal" @remove="handleClose" /&gt;</code>
+    </pre>
+        <EUITag closeIcon :model-value="tagModal" @remove="handleClose"
+          >Tag Name</EUITag
+        >
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Switch Toggle
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUIToggle label="toggle switch" /&gt;</code>
+    </pre>
+        <EUIToggle label="toggle switch" />
+      </div>
+
+      <div
+        class="w-full max-w-screen-xl col-span-2 p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Loader
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUILoader /&gt;</code>
+    </pre>
+        <EUILoader />
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Avatar
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUIAvatar image-url="https://tinyurl.com/43e5fxh9" :profile="true" full-name="JohnCena"
+        :show-status="true" status="Online" size="sm"&gt;&lt;template #name&gt;John Cena&lt;/template&gt; &lt;template
+        #designation&gt;Actor&lt;/template&gt; &lt;EUIAvatar/&gt;</code>
+    </pre>
+        <EUIAvatar
+          image-url="https://tinyurl.com/43e5fxh9"
+          :profile="true"
+          full-name="JohnCena"
+          :show-status="true"
+          status="Online"
+          size="sm"
+        >
+          <template #name>John Cena</template>
+          <template #designation>Actor</template>
+        </EUIAvatar>
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Datepicker
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUIDatepicker v-model="datepicker" label="Datepicker" placeholder="Select Date here..." /&gt;</code>
+    </pre>
+        <EUIDatepicker
+          v-model="datepicker"
+          label="Datepicker"
+          placeholder="Select Date here..."
+        />
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Button
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUIButton type="button" size="md" color="purple" @click="onClickMethod"&gt;Open
+        Modal&lt;/EUIButton&gt;</code>
+    </pre>
+
+        <div class="space-y-4">
+          <div class="inline-flex flex-row flex-wrap items-center gap-4">
+            <EUIButton type="button" size="xs" color="purple" rounded>
+              XS Button
+            </EUIButton>
+            <EUIButton type="button" size="sm" color="purple" rounded
+              >SM Button</EUIButton
+            >
+            <EUIButton type="button" size="md" color="purple"
+              >MD Button</EUIButton
+            >
+            <EUIButton type="button" size="lg" color="purple"
+              >LG Button</EUIButton
+            >
+            <EUIButton
+              color="primary"
+              rounded
+              size="md"
+              iconType="startIcon"
+              :icon="HomeIcon"
+              >Home</EUIButton
+            >
+          </div>
+
+          <details>
+            <summary class="text-gray-600 cursor-pointer">
+              Primary Gradient
+            </summary>
+            <div class="inline-flex flex-row items-center gap-4">
+              <EUIButton type="button" size="xs" color="primary" rounded>
+                XS Button
+              </EUIButton>
+              <EUIButton type="button" size="sm" color="primary" rounded
+                >SM Button</EUIButton
+              >
+              <EUIButton type="button" size="md" color="primary" rounded
+                >MD Button</EUIButton
+              >
+              <EUIButton type="button" size="lg" color="primary" rounded
+                >LG Button</EUIButton
+              >
+            </div>
+          </details>
+
+          <details>
+            <summary class="text-gray-600 cursor-pointer">white</summary>
+            <div class="inline-flex flex-row items-center gap-4">
+              <EUIButton type="button" size="xs" color="white" rounded>
+                XS Button
+              </EUIButton>
+              <EUIButton type="button" size="sm" color="white" rounded
+                >SM Button</EUIButton
+              >
+              <EUIButton type="button" size="md" color="white"
+                >MD Button</EUIButton
+              >
+              <EUIButton type="button" size="lg" color="white"
+                >LG Button</EUIButton
+              >
+            </div>
+          </details>
+
+          <details>
+            <summary class="text-gray-600 cursor-pointer">Danger</summary>
+            <div class="inline-flex flex-row items-center gap-4">
+              <EUIButton type="button" size="xs" color="danger">
+                XS Button
+              </EUIButton>
+              <EUIButton type="button" size="sm" color="danger"
+                >SM Button</EUIButton
+              >
+              <EUIButton type="button" size="md" color="danger"
+                >MD Button</EUIButton
+              >
+              <EUIButton type="button" size="lg" color="danger"
+                >LG Button</EUIButton
+              >
+            </div>
+          </details>
+
+          <details>
+            <summary class="text-gray-600 cursor-pointer">Success</summary>
+            <div class="inline-flex flex-row items-center gap-4">
+              <EUIButton type="button" size="xs" color="success">
+                XS Button
+              </EUIButton>
+              <EUIButton type="button" size="sm" color="success"
+                >SM Button</EUIButton
+              >
+              <EUIButton type="button" size="md" color="success" rounded
+                >MD Button</EUIButton
+              >
+              <EUIButton type="button" size="lg" color="success" rounded
+                >LG Button</EUIButton
+              >
+            </div>
+          </details>
+
+          <details>
+            <summary class="text-gray-600 cursor-pointer">Black</summary>
+            <div class="inline-flex flex-row items-center gap-4">
+              <EUIButton type="button" size="xs" color="black">
+                XS Button
+              </EUIButton>
+              <EUIButton type="button" size="sm" color="black"
+                >SM Button</EUIButton
+              >
+              <EUIButton type="button" size="md" color="black" rounded
+                >MD Button</EUIButton
+              >
+              <EUIButton type="button" size="lg" color="black" rounded
+                >LG Button</EUIButton
+              >
+            </div>
+          </details>
+        </div>
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Modal
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>
+        &lt;EUIModal :isVisible="showModal" slim-header @update:isVisible="showModal=$event"
+        @confirm="handleConfirm"&gt; &lt;template #title&gt; Custom Title here&lt;/template&gt; &lt;div
+        class=""&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus quas possimus ea culpa id voluptatum
+        cumque, animi earum sequi, aliquid eius omnis repellendus nihil soluta vitae a temporibus! Perspiciatis,
+        nihil?&lt;/div&gt; &lt;/EUIModal&gt;
+      </code>
+    </pre>
+        <div class="space-x-4">
+          <EUIButton
+            type="button"
+            size="md"
+            color="primary"
+            rounded
+            @click="showModal = true"
+            >Default Modal</EUIButton
+          >
+          <EUIButton
+            type="button"
+            size="md"
+            color="primary"
+            rounded
+            @click="customModal = true"
+            >Custom Modal
+          </EUIButton>
+        </div>
+
+        <EUIModal
+          :isVisible="showModal"
+          slim-header
+          @update:isVisible="showModal = $event"
+          @confirm="handleConfirm"
+        >
+          <template #title> Custom Title here</template>
+          <div class="">
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus quas
+            possimus ea culpa id voluptatum cumque, animi earum sequi, aliquid
+            eius omnis repellendus nihil soluta vitae a temporibus!
+            Perspiciatis, nihil?
+          </div>
+        </EUIModal>
+
+        <EUIModal
+          :isVisible="customModal"
+          @update:isVisible="customModal = $event"
+          @confirm="openModal"
+          rounded-class="rounded-3xl"
+        >
+          <template #header>
+            <div
+              class="sticky inset-x-0 top-0 px-6 py-4 text-base font-semibold bg-white border-b"
+            >
+              Custom Header here
+            </div>
+          </template>
+          <template #content>
+            <div
+              class="p-4 max-h-[calc(100svh-10rem)] overflow-y-auto space-y-4"
+            >
+              <div v-for="item in 10" :key="`row-${item}`">
+                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus
+                quas possimus ea culpa id voluptatum cumque, animi earum sequi,
+                aliquid eius omnis repellendus nihil soluta vitae a temporibus!
+                Perspiciatis, nihil?
+              </div>
+            </div>
+          </template>
+          <template #footer>
+            <div
+              class="sticky inset-x-0 bottom-0 flex items-center justify-end p-4 bg-white border-t border-gray-200"
+            >
+              <div class="text-base font-semibold">Custom Footer here</div>
+              <button
+                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"
+                @click="customModal = false"
+              >
+                Cancel
+              </button>
+              <button
+                class="px-4 py-2 text-base font-semibold tracking-wide text-white transition-colors duration-75 bg-purple-600 rounded-md hover:bg-purple-700"
+              >
+                Confirm
+              </button>
+            </div>
+          </template>
+        </EUIModal>
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Accordion
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUIAccordion :datas="accordionData" :defaultOpen="[1]" :collapse="true" /&gt;</code>
+    </pre>
+        <EUIAccordion
+          :datas="accordionData"
+          :defaultOpen="[1]"
+          :collapse="true"
+        />
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 overflow-y-auto bg-white border border-gray-200 border-solid rounded-lg max-h-96 hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Timeline
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUITimeLine :items="timelineData" type="view" /&gt;</code>
+    </pre>
+        <EUITimeLine :items="timelineData" type="view" />
+        <EUITimeLine
+          :items="timelineData"
+          type="icon"
+          :icon="ArrowDownCircleIcon"
+        />
+        <EUITimeLine :items="timelineImage" type="image" :show-more="true" />
+      </div>
+
+      <div
+        class="w-full max-w-screen-xl col-span-2 p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Stepper Timeline
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUIStepperVertical stepStatus="opportunity" /&gt;</code>
+    </pre>
+        <EUIStepperTimeline />
+      </div>
+
+      <div
+        class="w-full max-w-screen-xl col-span-2 p-4 overflow-auto bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1 max-h-svh"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Dashboard Table
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUIDashboardTable :checkable="true"
+        paginated
+        :checked-rows.sync="checkedRows"
+        backend-pagination
+        :per-page="limit"
+        :headers="tableHeaders"
+        :items="tableData"
+        :total="totalCount"
+        :default-sort-direction="defaultSortOrder"
+        default-sort="introducer_details"
+        :current-page="offset"
+        @sort="onSort"
+        @mouseenter="select"
+        @mouseleave=";(selectedIndex = null), (selected = null)" &gt; &lt;template #[`item.introducer_details`]="{ row,
+        rowIndex }"&gt;
+        &lt;div class="flex flex-row items-center gap-2"&gt;
+        &lt;div
+        class="flex items-center justify-center text-sm font-bold text-gray-900 bg-gray-100 rounded-full size-8"
+        &gt;
+        &lt;img
+        :src="row?.introducer_details?.url"
+        class="size-8 rounded-3xl"
+        alt=""
+        /&gt;
+        &lt;/div&gt;
+        &lt;div class="text-sm"&gt;{{ row?.introducer_details?.name }}&lt;/div&gt;
+        &lt;/div&gt;
+        &lt;/template&gt;
+        &lt;/EUIDashboardTable&gt;
+      </code>
+    </pre>
+      <EUIDashboardTable
+          :checkable="true"
+          paginated
+          :checked-rows.sync="checkedRows"
+          backend-pagination
+          :per-page="limit"
+          :headers="tableHeaders"
+          :items="tableData"
+          :total="totalCount"
+          :default-sort-direction="defaultSortOrder"
+          default-sort="introducer_details"
+          :current-page="offset"
+          @sort="onSort"
+          @mouseenter="select"
+          @mouseleave="(selectedIndex = null), (selected = null)"
+        >
+          <template #[`item.introducer_details`]="{ row, rowIndex }">
+            <div class="flex flex-row items-center gap-2">
+              <div
+                class="flex items-center justify-center text-sm font-bold text-gray-900 bg-gray-100 rounded-full size-8"
+              >
+                <img
+                  :src="row?.introducer_details?.url"
+                  class="size-8 rounded-3xl"
+                  alt=""
+                />
+              </div>
+              <div class="text-sm">{{ row?.introducer_details?.name }}</div>
+            </div>
+          </template>
+        </EUIDashboardTable>
+
+            <div class="py-4">
+      <EUITable
+        :checkable="true"
+        paginated
+        :checked-rows.sync="checkedRows"
+        backend-pagination
+        :per-page="10"
+        :headers="studentHeader"
+        :items="studentData"
+        :total="studentData.length"
+        :default-sort-direction="defaultSortOrder"
+        default-sort=""
+        :current-page="offset"
+        @sort="onSort"
+        @mouseenter="select"
+        @mouseleave="(selectedIndex = null), (selected = null)"
+      >
+        <template #[`item.firstName`]="{ row, rowIndex }">
+          <div class="space-y-0.5">
+            <div class="block text-sm font-medium leading-snug">
+              {{ capitalizeText(row?.firstName) + " " + capitalizeText(row?.lastName) }}
+            </div>
+            <div class="text-xs font-medium text-gray-900 leading-[normal]">
+              {{ row?.referenceId }}
+            </div>
+          </div>
+        </template>
+        <template #[`item.activeUser`]="{ row, rowIndex }">
+          {{ row?.activeUser?.user?.firstName }}
+          {{ row?.activeUser?.user?.lastName }}
+        </template>
+      </EUITable>
+    </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref } from "vue";
+import EUIButton from "./button/EUIButton.vue";
+import EUICheckbox from "./checkbox/EUICheckbox.vue";
+import EUIInput from "./input/EUIInput.vue";
+import EUIInputNormal from "./inputNormal/EUIInputNormal.vue";
+import EUIModal from "./modal/EUIModal.vue";
+import EUISelect from "./select/EUISelect.vue";
+import EUITabs from "./tabs/EUITabs.vue";
+import EUITextarea from "./textArea/EUITextArea.vue";
+import EUISelectSearch from "./selectSearch/EUISelectSearch.vue";
+import EUITimeLine from "./timeLine/EUITimeLine.vue";
+import { ArrowDownCircleIcon } from "@heroicons/vue/24/solid";
+import EUITag from "./tag/EUITag.vue";
+import EUIToggle from "./toggle/EUIToggle.vue";
+import EUILoader from "./loader/EUILoader.vue";
+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 { HomeIcon } from "@heroicons/vue/24/outline";
+import EUIDatepicker from "./datepicker/EUIDatepicker.vue";
+import EUIDashboardTable from "./table/EUIDashboardTable.vue";
+import tabData from "../data/tab";
+import {
+  studentData,
+  studentHeader,
+  tableData,
+  tableHeaders,
+} from "../data/table";
+import EUITable from "./table/EUITable.vue";
+import { capitalizeText } from "../utils/lodash";
+import ChevronDownStroke from '../assets/svg/ChevronDownStroke.vue';
+import EUIMultiDropdown from './dropdown/EUIMultiDropdown.vue';
+
+const mobileNumber = ref("+91 8667444951");
+const datepicker = ref(new Date());
+
+const form = reactive({
+  input: "",
+  mobile: "+918667444951",
+});
+
+//TODO: Dashboard Table
+const checkedRows = ref([]);
+const defaultSortOrder = ref("asc");
+const limit = ref(5);
+const offset = ref(1);
+const selectedIndex = ref(null);
+const selected: { index: string } = { index: "" };
+
+const totalCount = computed(() => {
+  return tableData.length;
+});
+
+const select = (_item: any, index: any) => {
+  selectedIndex.value = index;
+};
+
+const onSort = (field: string, order: string) => {
+  const modifier = order === "desc" ? -1 : 1;
+  tableData.sort((a, b) => {
+    if (a[field] < b[field]) return -1 * modifier;
+    if (a[field] > b[field]) return 1 * modifier;
+    return 0;
+  });
+};
+
+// TODO: Multi dropdown menu clicked access
+const menubar = ref([
+  { text: "Students" },
+  { text: "Application" },
+])
+
+const handleMenuItem = (item:any) => {
+  console.log('Menu clicked:', item)
+}
+
+const handleSubMenuItem = (subItem:any) => {
+  console.log("Submenu item clicked:", subItem);
+}
+
+//TODO: TagModal
+const tagModal = ref(false);
+const handleClose = () => {
+  tagModal.value = true;
+};
+
+//TODO: Modal
+const showModal = ref(false);
+const handleConfirm = () => {
+  showModal.value = true;
+};
+
+const customModal = ref(false);
+const openModal = () => {
+  customModal.value = false;
+};
+
+//TODO: Select Data
+const datas = ref([
+  {
+    name: "Shawn Burke",
+    age: 6,
+  },
+  {
+    name: "Emery Nolan",
+    age: 4,
+  },
+  {
+    name: "Embry Grant",
+    age: 3,
+  },
+  {
+    name: "Jesse Austin",
+    age: 9,
+  },
+  {
+    name: "Tandy Christensen",
+    age: 7,
+  },
+]);
+//TODO: Timeline
+
+const timelineData = ref([
+  {
+    id: 1,
+    person: { name: "Alex Curren" },
+    date: "2d ago",
+    dateTime: "2023-01-24T09:12",
+  },
+  {
+    id: 2,
+    person: { name: "Alex Curren" },
+    date: "1d ago",
+    dateTime: "2023-01-24T09:20",
+  },
+  {
+    id: 3,
+    person: { name: "Alex Curren" },
+    date: "2d ago",
+    dateTime: "2023-01-24T09:12",
+  },
+  {
+    id: 4,
+    person: { name: "Alex Curren" },
+    date: "1d ago",
+    dateTime: "2023-01-24T09:20",
+  },
+  {
+    id: 5,
+    person: { name: "Alex Curren" },
+    date: "2d ago",
+    dateTime: "2023-01-24T09:12",
+  },
+  {
+    id: 6,
+    person: { name: "Alex Curren" },
+    date: "1d ago",
+    dateTime: "2023-01-24T09:20",
+  },
+]);
+
+const timelineImage = ref([
+  {
+    id: 1,
+    person: {
+      name: "Chelsea Hagon",
+      imageUrl:
+        "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    },
+    comment:
+      "Called client, they reassured me the invoice would be paid by the 25th.",
+    date: "3d ago",
+    dateTime: "2023-01-23T15:56",
+    showmore: {
+      title: "More Details",
+      content:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+    },
+  },
+  {
+    id: 2,
+    person: {
+      name: "Chelsea Hagon",
+      imageUrl:
+        "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    },
+    comment:
+      "Called client, they reassured me the invoice would be paid by the 25th.",
+    date: "3d ago",
+    dateTime: "2023-01-23T15:56",
+    showmore: {
+      title: "More Details",
+      content:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+    },
+  },
+  {
+    id: 3,
+    person: {
+      name: "Chelsea Hagon",
+      imageUrl:
+        "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    },
+    comment:
+      "Called client, they reassured me the invoice would be paid by the 25th.",
+    date: "3d ago",
+    dateTime: "2023-01-23T15:56",
+    showmore: {
+      title: "More Details",
+      content:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+    },
+  },
+  {
+    id: 4,
+    person: {
+      name: "Chelsea Hagon",
+      imageUrl:
+        "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    },
+    comment:
+      "Called client, they reassured me the invoice would be paid by the 25th.",
+    date: "3d ago",
+    dateTime: "2023-01-23T15:56",
+    showmore: {
+      title: "More Details",
+      content:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+    },
+  },
+  {
+    id: 5,
+    person: {
+      name: "Chelsea Hagon",
+      imageUrl:
+        "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    },
+    comment:
+      "Called client, they reassured me the invoice would be paid by the 25th.",
+    date: "3d ago",
+    dateTime: "2023-01-23T15:56",
+    showmore: {
+      title: "More Details",
+      content:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+    },
+  },
+  {
+    id: 6,
+    person: {
+      name: "Chelsea Hagon",
+      imageUrl:
+        "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    },
+    comment:
+      "Called client, they reassured me the invoice would be paid by the 25th.",
+    date: "3d ago",
+    dateTime: "2023-01-23T15:56",
+    showmore: {
+      title: "More Details",
+      content:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+    },
+  },
+]);
+
+const accordionData = ref([
+  {
+    title: "1.How long does the course take?",
+    content:
+      "The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
+  },
+  {
+    title: "2.How long does the course take?",
+    content:
+      "The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
+  },
+  {
+    title: "3.How long does the course take?",
+    content:
+      "The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
+  },
+  {
+    title: "4.How long does the course take?",
+    content:
+      "The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
+  },
+]);
+</script>
+
+<style lang="scss" scoped></style> -->