edvoyui-component-library-test-flight 0.0.138 → 0.0.140

package/package.json

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

package/src/components/HelloWorld.vue

@@ -1741,4 +1741,4 @@ const accordionData = ref([
 ]);
 </script>
 
-<style lang="scss" scoped></style> -->
+<style lang="scss" scoped></style>-->

package/src/components/dragModal/EUIDrag.vue

@@ -0,0 +1,179 @@
+<template>
+  <div
+    v-if="isVisible"
+    ref="containerRef"
+    class="draggable-card"
+    :style="containerStyle"
+  >
+    <!-- HEADER / DRAG HANDLE -->
+    <div
+      class="flex items-center justify-between flex-shrink-0 px-2 bg-white cursor-grab"
+      @mousedown.prevent="startDrag"
+      @touchstart.prevent="startDrag"
+    >
+      <div class="flex items-center gap-4">
+        <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>
+      <EUIButton
+        color="white"
+        size="xs"
+        rounded
+        icon-type="icon"
+        :icon="ChevronBigDown"
+        :class="minimized ? 'rotate-0' : '-rotate-90'"
+        @click="onToggle"
+      />
+    </div>
+
+    <!-- BODY -->
+    <transition name="slide-fade">
+      <div
+        v-if="minimized"
+        class="px-4 py-3 mt-4 overflow-y-auto border border-gray-100 border-solid rounded-lg bg-gray-50"
+      >
+        <h3 class="mb-2 text-lg font-semibold text-gray-900">
+          Card Title Here....
+        </h3>
+        <p class="mb-4 text-sm text-gray-500">
+          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis non
+          velit doloremque sint repellat beatae accusamus? Recusandae possimus
+          voluptas beatae, labore dolor dolorem necessitatibus architecto
+          laudantium deserunt ipsam autem. Dignissimos?
+        </p>
+
+        <p class="text-sm text-gray-500">
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta minima
+          ullam porro voluptate ea, amet accusamus et debitis.
+        </p>
+
+        <div class="mt-4 text-right">
+          <EUIButton
+            color="primary"
+            size="sm"
+            icon-type="endIcon"
+            :icon="XMarkIcon"
+            rounded
+            @click="isVisible = false"
+          >
+            Close
+          </EUIButton>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onBeforeUnmount } from "vue";
+import { XMarkIcon } from "@heroicons/vue/24/outline";
+import EUIAvatar from "../avatar/EUIAvatar.vue";
+import EUIButton from "../button/EUIButton.vue";
+import ChevronBigDown from "../../assets/svg/ChevronBigDown.vue";
+
+const isVisible = ref(true);
+const minimized = ref(true);
+const containerRef = ref<HTMLElement | null>(null);
+
+const x = ref(20);
+const y = ref(80);
+const dragging = ref(false);
+const startX = ref(0);
+const startY = ref(0);
+const origX = ref(0);
+const origY = ref(0);
+
+const onToggle = () => {
+  minimized.value = !minimized.value;
+  if (minimized.value) {
+    y.value = y.value <= 284 ? y.value : 284;
+  }
+};
+
+const startDrag = (e: MouseEvent | TouchEvent) => {
+  const tag = (e.target as Element).tagName.toLowerCase();
+  if (["input", "textarea", "select", "button", "svg", "path"].includes(tag))
+    return;
+
+  const { pageX, pageY } = "touches" in e ? e.touches[0] : e;
+  dragging.value = true;
+  startX.value = pageX;
+  startY.value = pageY;
+  origX.value = x.value;
+  origY.value = y.value;
+
+  window.addEventListener("mousemove", onDrag);
+  window.addEventListener("mouseup", stopDrag);
+  window.addEventListener("touchmove", onDrag);
+  window.addEventListener("touchend", stopDrag);
+};
+
+const onDrag = (e: MouseEvent | TouchEvent) => {
+  if (!dragging.value) return;
+  const { pageX, pageY } = "touches" in e ? e.touches[0] : e;
+  const dx = pageX - startX.value;
+  const dy = pageY - startY.value;
+
+  let newX = origX.value - dx;
+  let newY = origY.value + dy;
+
+  const el = containerRef.value;
+  if (el) {
+    const { offsetWidth: w, offsetHeight: h } = el;
+    newX = Math.min(Math.max(0, newX), window.innerWidth - w);
+    newY = Math.min(Math.max(0, newY), window.innerHeight - h);
+  }
+
+  x.value = newX;
+  y.value = newY;
+};
+
+const stopDrag = () => {
+  dragging.value = false;
+  window.removeEventListener("mousemove", onDrag);
+  window.removeEventListener("mouseup", stopDrag);
+  window.removeEventListener("touchmove", onDrag);
+  window.removeEventListener("touchend", stopDrag);
+};
+
+onBeforeUnmount(stopDrag);
+
+// clamp Y when toggling
+watch(minimized, (val) => {
+  if (!val && y.value > 300) {
+    y.value = 300;
+  }
+});
+
+const containerStyle = computed(() => ({
+  position: "fixed" as const,
+  right: `${x.value}px`,
+  top: `${y.value}px`,
+  cursor: dragging.value ? "grabbing" : "grab",
+  zIndex: 999,
+}));
+</script>
+
+<style lang="scss" scoped>
+.draggable-card {
+  @apply p-2 w-96 border border-solid border-purple-100 overflow-hidden flex-col flex bg-white rounded-2xl shadow-xl shadow-violet-100;
+}
+
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/index.ts

@@ -41,7 +41,6 @@ export { default as EUITable } from "./table/EUITable.vue";
 export { default as EUIStudentPagination } from "./table/EUIStudentPagination.vue";
 export { default as EUIMultiDropdown } from "./dropdown/EUIMultiDropdown.vue";
 export { default as GrowthTable } from "./table/GrowthTable.vue";
-export { default as ColumnResizeTable } from "./table/ColumnResizeTable.vue";
 
 export { default as EUILoader } from "./loader/EUILoader.vue";
 export { default as EUICircleLoader } from "./loader/EUICircleLoader.vue";
@@ -56,3 +55,5 @@ export { default as EUISearchToggle } from "./searchexpand/EUISearchToggle.vue";
 
 export { default as EUIBreadcrumb } from "./breadcrumb/EUIBreadcrumb.vue";
 export { default as EUIAlerts } from "./alerts/EUIAlerts.vue";
+export { default as ColumnResizeTable } from "./table/ColumnResizeTable.vue";
+export { default as EUIDrag } from "./dragModal/EUIDrag.vue";

package/src/components/table/UTable.vue

@@ -175,14 +175,27 @@
                       :rowIndex="rowIndex"
                       :headerIndex="headerIndex"
                     >
-                      <span class="block truncate">{{
-                        getValueByPath(row, header?.value)
-                      }}</span>
+                      <span class="block" :class="{'truncate':!header.showInfoText}">
+                        {{ getValueByPath(row, header?.value) }}
+                        <EUITooltip v-if="header?.showInfoText" placement="top" class="inline-block ms-0.5">
+                          <template v-slot:default>
+                            <InformationCircleIcon class="inline-block text-gray-500 size-4" />
+                          </template>
+                          <template v-slot:tooltip>
+                            <div class="z-50 max-w-xs break-words whitespace-normal min-w-max">{{ header.showInfoText }}</div>
+                          </template>
+                        </EUITooltip>
+                      </span>
                     </slot>
                   </td>
                 </tr>
                 <template v-if="tableExpanded">
-                  <slot name="expanded" :row="row" :rowIndex="rowIndex" :headerLength="headers.length"></slot>
+                  <slot
+                    name="expanded"
+                    :row="row"
+                    :rowIndex="rowIndex"
+                    :headerLength="headers.length"
+                  ></slot>
                 </template>
               </template>
               <template v-else-if="computedItems.length === 0">
@@ -273,6 +286,8 @@ import EUIStudentPagination from "./EUIStudentPagination.vue";
 import EUICircleLoader from "../loader/EUICircleLoader.vue";
 import EUIPageLimit from "./EUIPageLimit.vue";
 import "./UTable.scss";
+import EUITooltip from "../tooltip/EUITooltip.vue";
+import { InformationCircleIcon } from "@heroicons/vue/24/outline";
 
 interface Header {
   value: string;
@@ -281,6 +296,7 @@ interface Header {
   sortable?: boolean;
   width?: number;
   color?: string;
+  showInfoText?: string;
 }
 
 interface Item {

package/src/components/tabs/EUITabs.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
-    <div
+  
+    <div class=" overflow-hidden overflow-x-scroll">
+      <div
       v-if="tabStyle === 'design'"
       class="inline-flex flex-row items-center justify-start px-[0.25rem] min-h-[34px] mb-0.5 bg-gray-100 rounded-[0.625rem] ring-1 ring-gray-200/75 gap-2"
     >
@@ -14,6 +16,7 @@
       :class="[
           tab?.disabled ? ' cursor-not-allowed ' : '',
           isHighlighedActivetab ? ' rounded-t-lg !bg-[#EDE9FE] ' : '',
+          'flex-shrink-0'
         ]"
         role="tab"
         tabindex="-1"
@@ -80,6 +83,7 @@
             : 'border-transparent text-gray-500',
           tab?.disabled ? ' cursor-not-allowed ' : '',
           isHighlighedActivetab&&activeTabIndex === tabindex ? ' rounded-t-lg !bg-[#EDE9FE]' : '',
+          'flex-shrink-0'
         ]"
         @click="selectTab(tabindex)"
       >
@@ -115,6 +119,7 @@
             : 'border-transparent text-gray-500 z-0',
           tab?.disabled ? ' cursor-not-allowed ' : '',
           isHighlighedActivetab&&activeTabIndex === tabindex ? ' rounded-t-lg !bg-[#EDE9FE]' : '',
+          'flex-shrink-0'
         ]"
         @click="selectTab(tabindex)"
       >
@@ -128,7 +133,6 @@
         </slot>
       </button>
     </div>
-
     <div v-else class="flex items-center gap-1 p-2 transition-all duration-100">
       <button
         v-for="(tab, tabindex) in tabs"
@@ -145,6 +149,7 @@
             : 'border-white hover:bg-gray-50 text-gray-700',
           tab?.disabled ? ' cursor-not-allowed ' : '',
           isHighlighedActivetab&&activeTabIndex === tabindex ? ' rounded-t-lg !bg-[#EDE9FE]' : '',
+          'flex-shrink-0'
         ]"
         @click="selectTab(tabindex)"
       >
@@ -158,6 +163,9 @@
         </slot>
       </button>
     </div>
+    </div>
+
+  
     <slot name="content" :active-tab="tabs[activeTabIndex]">
       <div
         :class="[
@@ -197,12 +205,14 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (event: "update:activeTab", activeTab: Tab): void;
+  (event: "update:defaultActiveIndex", defaultActiveIndex: number): void;
 }>();
 
 const activeTabIndex = ref(props.defaultActiveIndex ?? 0);
 
 const selectTab = (index: number) => {
   activeTabIndex.value = index;
+  emit("update:defaultActiveIndex", activeTabIndex.value );
   emit("update:activeTab", props.tabs[activeTabIndex.value]);
 };
 
@@ -210,6 +220,8 @@ watch(
   () => props.defaultActiveIndex,
   (newIndex) => {
     activeTabIndex.value = newIndex ?? 0;
+  },{
+    immediate:true
   }
 );
 </script>

package/src/data/table.ts

@@ -573,6 +573,8 @@ export const studentHeader = [
     name: "Country of Residence",
     width: 250,
     sortable: true,
+        showInfoText: "This is helper text for First Name",
+
   },
   {
     value: "nationality.name",