edvoyui-component-library-test-flight 0.0.107 → 0.0.109

package/src/components/HelloWorld.vue

@@ -4,83 +4,137 @@
   >
     Edvoy User Interface
   </h1>
+ <!-- <div class="ml-[200px]">
+ <EUISearchExpand
+                
+                  v-model:model-value="searchInput"
+                  :search-sync="showSearch"
+                  @input="seachStudent($event?.target?.value)"
+                  @update:modelValue="seachStudent($event?.target?.value)"
+                /></div> -->
 
 </template>
 <script setup lang="ts">
+// import { ref } from 'vue';
 
+// import EUISearchExpand from './searchexpand/EUISearchExpand.vue'
 
+// const searchInput =ref('')
+// const showSearch  =ref(false)
+
+// const seachStudent=(e)=>{
+//   console.log('seachStudent',e)
+// }
 </script>
 <style lang="scss"></style>
 
-<!-- Development code here -->
+<!-- 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>
 
-    <EUIAccordion
-          :datas="accordionData"
-          :defaultOpen="[1]"
-          :collapse="true"
-          accordionStyle="separated"
-          @update:activeItem="handleActiveItem"
+    <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"
         >
-          <template #title="{ item}">
-            <div>{{ item.title }}</div>
-          </template>
-          <template #right-icon="{item}">
-            <div :key="item" class="w-10 h-10 bg-red-100 border border-red-500 rounded-full" />
-          </template>
-          <template #content="{item}">
-            <div>{{ item.content }}</div>
+          Name: Alert
+        </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>
+
+        <div class="space-y-4">
+          <EUIAlerts
+            alert-type="Success"
+            heading="Deactivate account"
+            textMessage="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."
+          />
+
+          <EUIAlerts
+            alert-type="Warning"
+            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>
-        </EUIAccordion>
+        </EUIAlerts>
 
-    <Delete />
-    <UTableview />
-    <div class="">
-       <pre class="text-[0.5rem] p-2 rounded-lg max-h-72 overflow-y-auto text-red-600 border border-gray-100">
-        {{ `Total Row:${selectedRows.length}` }}
-        {{ selectedRows.map(x => x?._id)}}
-      </pre>
 
-      <div class="py-4">
-      <EUITable
-        :checkable="true"
-        :table-loading="loading"
-        paginated
-        v-model:selectedRows.sync="selectedRows"
-        :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"
-        @changePage="onPageChange"
-        @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 }}
+          <EUIAlerts
+            alert-type="Success"
+            heading="Title only show here"
+          />
+
+           <EUIAlerts
+            alert-type="Warning"
+            heading="Send Icon here"
+            :icon="ExclamationTriangleIcon"
+          />
+
+          <EUIAlerts
+            alert-type="Default"
+            heading="Close Icon Boolean enabled"
+            close-icon
+          />
+
+          <EUIAlerts
+            alert-type="Error"
+            heading="Deactivate account"
+            textMessage="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."
+            :showAlert="showAlert"
+            :close-icon="true"
+            @update:showAlert="showAlert = $event"
+          />
+
+          <EUIAlerts
+            alert-type="Warning"
+            heading="Deactivate account"
+            textMessage="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."
+            :showAlert="showAlert"
+            close-icon
+            action-items
+            @update:showAlert="showAlert = $event"
+            @alertAction="onClickAlert"
+            @alertDismiss="showAlert = false"
+          />
+
+          <EUIAlerts
+            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 #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
+                </button>
+                <button
+                  type="button"
+                  class="ml-3 rounded-md px-3 py-1.5 bg-white text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2"
+                >
+                  Dismiss
+                </button>
             </div>
-          </div>
-        </template>
-        <template #[`item.activeUser`]="{ row, rowIndex }">
-          {{ row?.activeUser?.user?.firstName }}
-          {{ row?.activeUser?.user?.lastName }}
-        </template>
-      </EUITable>
-    </div>
-    </div>
-    <div class="grid gap-4 sm:grid-cols-2 place-items-start">
+          </template>
+          </EUIAlerts>
+        </div>
+      </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"
       >
@@ -89,9 +143,11 @@
         >
           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>
+        <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>
 
-           <div class="grid grid-cols-3 gap-4 pb-6 mb-4 border-b">
+        <div class="grid grid-cols-3 gap-4 pb-6 mb-4 border-b">
           <EUIInput
             v-model.trim="form.input"
             name="addnote"
@@ -240,7 +296,7 @@
         </div>
       </div>
 
-       <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
@@ -255,34 +311,33 @@
         input required" tag-color="Error" /&gt;</code>
     </pre>
 
-    <div class="grid grid-cols-2 gap-6">
-      <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"
-          :icon="DevicePhoneMobileIcon"
-          inputFilled
-        />
-
-        <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"
-          :icon="DevicePhoneMobileIcon"
-          required
-        />
-    </div>
+        <div class="grid grid-cols-2 gap-6">
+          <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"
+            :icon="DevicePhoneMobileIcon"
+            inputFilled
+          />
 
+          <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"
+            :icon="DevicePhoneMobileIcon"
+            required
+          />
+        </div>
       </div>
 
       <div
@@ -299,7 +354,7 @@
       <code>&lt;EUISelect label="Firstname" placeholder="Enter your name" :items="datas" /&gt;</code>
     </pre>
 
-    <div class="grid grid-cols-3 gap-4">
+        <div class="grid grid-cols-3 gap-4">
           <EUISelect
             search-label="name"
             label="Select Label"
@@ -345,7 +400,7 @@
         </div>
       </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 z-[calc(infinity)]"
       >
         <span
@@ -357,22 +412,26 @@
           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 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" @action-item="addAction">
-        <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>
-          <template #actionName>
-             + Add Custom Filter
-          </template>
-      </EUIMultiDropdown>
-    </div>
+        <div class="inline-flex items-center gap-4">
+          <EUIMultiDropdown title="dropdown" :menu-items="menubar" />
+
+          <EUIMultiDropdown
+            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"
+            @action-item="addAction"
+          >
+            <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>
+            <template #actionName> + Add Custom Filter </template>
+          </EUIMultiDropdown>
+        </div>
       </div>
 
       <div
@@ -861,7 +920,7 @@
         &lt;/EUIDashboardTable&gt;
       </code>
     </pre>
-      <EUIDashboardTable
+        <EUIDashboardTable
           :checkable="true"
           paginated
           :checked-rows.sync="checkedRows"
@@ -893,42 +952,120 @@
           </template>
         </EUIDashboardTable>
 
-            <div class="py-4">
-      <EUITable
-        :checkable="true"
-        :table-loading="loading"
-        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"
-        @changePage="onPageChange"
-        @sort="onSort"
-        @mouseenter="select"
-        @mouseleave="(selectedIndex = null), (selected = null)"
+        <div class="py-4">
+          <EUITable
+            :checkable="true"
+            :table-loading="loading"
+            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"
+            @changePage="onPageChange"
+            @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 class="">
+      <pre
+        class="text-[0.5rem] p-2 rounded-lg max-h-72 overflow-y-auto text-red-600 border border-gray-100"
       >
-        <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 }}
+        {{ `Total Row:${selectedRows.length}` }}
+        {{ selectedRows.map((x) => x?._id) }}
+      </pre>
+
+      <div class="py-4">
+        <EUITable
+          :checkable="true"
+          :table-loading="loading"
+          paginated
+          v-model:selectedRows.sync="selectedRows"
+          :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"
+          @changePage="onPageChange"
+          @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>
-          </div>
+          </template>
+          <template #[`item.activeUser`]="{ row, rowIndex }">
+            {{ row?.activeUser?.user?.firstName }}
+            {{ row?.activeUser?.user?.lastName }}
+          </template>
+        </EUITable>
+      </div>
+    </div>
+    <div>
+      <UTableview />
+      <Delete />
+      <EUIAccordion
+        :datas="accordionData"
+        :defaultOpen="[1]"
+        :collapse="true"
+        accordionStyle="separated"
+        @update:activeItem="handleActiveItem"
+      >
+        <template #title="{ item }">
+          <div>{{ item.title }}</div>
         </template>
-        <template #[`item.activeUser`]="{ row, rowIndex }">
-          {{ row?.activeUser?.user?.firstName }}
-          {{ row?.activeUser?.user?.lastName }}
+        <template #right-icon="{ item }">
+          <div
+            :key="item"
+            class="w-10 h-10 bg-red-100 border border-red-500 rounded-full"
+          />
         </template>
-      </EUITable>
-    </div>
-      </div>
+        <template #content="{ item }">
+          <div>{{ item.content }}</div>
+        </template>
+      </EUIAccordion>
     </div>
   </div>
 </template>
@@ -944,7 +1081,10 @@ 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, MagnifyingGlassIcon } from "@heroicons/vue/24/solid";
+import {
+  ArrowDownCircleIcon,
+  MagnifyingGlassIcon,
+} from "@heroicons/vue/24/solid";
 import EUITag from "./tag/EUITag.vue";
 import EUIToggle from "./toggle/EUIToggle.vue";
 import EUILoader from "./loader/EUILoader.vue";
@@ -952,7 +1092,7 @@ 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, HomeIcon } from "@heroicons/vue/24/outline";
+import { DevicePhoneMobileIcon, ExclamationTriangleIcon, HomeIcon } from "@heroicons/vue/24/outline";
 import EUIDatepicker from "./datepicker/EUIDatepicker.vue";
 import EUIDashboardTable from "./table/EUIDashboardTable.vue";
 import tabData from "../data/tab";
@@ -964,22 +1104,28 @@ import {
 } 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';
+import ChevronDownStroke from "../assets/svg/ChevronDownStroke.vue";
+import EUIMultiDropdown from "./dropdown/EUIMultiDropdown.vue";
 import Delete from "./delete.vue";
-import UTableview from './table/UTableview.vue';
+import UTableview from "./table/UTableview.vue";
+import EUIAlerts from "./alerts/EUIAlerts.vue";
 
 const mobileNumber = ref("+91 8667444951");
 const datepicker = ref(new Date());
-const loading = ref(false)
+const loading = ref(false);
 
 const form = reactive({
   input: "Lorem ipsum dolor sit",
   mobile: "+918667444951",
 });
 
+const showAlert = ref(true);
+const onClickAlert = () => {
+  alert("Alert action button clicked");
+};
+
 //TODO: Dashboard Table
-const selectedRows = ref([])
+const selectedRows = ref([]);
 const checkedRows = ref([]);
 const defaultSortOrder = ref("asc");
 const limit = ref(5);
@@ -1006,30 +1152,27 @@ const onSort = (field: string, order: string) => {
 
 const onPageChange = (offsetData: number) => {
   offset.value = offsetData;
-  loading.value = true
+  loading.value = true;
   console.log("@changePage:", offsetData);
-   setTimeout(() => {
-    loading.value = false
+  setTimeout(() => {
+    loading.value = false;
   }, 800);
 };
 
 // TODO: Multi dropdown menu clicked access
-const menubar = ref([
-  { text: "Students" },
-  { text: "Application" },
-])
+const menubar = ref([{ text: "Students" }, { text: "Application" }]);
 
-const handleMenuItem = (item:any) => {
-  console.log('Menu clicked:', item)
-}
+const handleMenuItem = (item: any) => {
+  console.log("Menu clicked:", item);
+};
 
-const addAction = (e:Event) => {
-  console.log("Action Item clicked:" + e)
-}
+const addAction = (e: Event) => {
+  console.log("Action Item clicked:" + e);
+};
 
-const handleSubMenuItem = (subItem:any) => {
+const handleSubMenuItem = (subItem: any) => {
   console.log("Submenu item clicked:", subItem);
-}
+};
 
 //TODO: TagModal
 const tagModal = ref(false);
@@ -1049,9 +1192,9 @@ const openModal = () => {
 };
 
 // accordion active Index
-const handleActiveItem = (activeItems:number) => {
-  console.log("Currently active accordion(s):", activeItems)
-}
+const handleActiveItem = (activeItems: number) => {
+  console.log("Currently active accordion(s):", activeItems);
+};
 
 //TODO: Select Data
 const datas = ref([