edvoyui-component-library-test-flight 0.0.91 → 0.0.93

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

@@ -1,5 +1,5 @@
 export * from "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=script&lang.ts";
-import "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=style&index=0&scoped=739e0044&lang.scss";
+import "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=style&index=0&scoped=03103d67&lang.scss";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUIModal.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EUIModal.vue.d.ts","sourceRoot":"","sources":["../../src/components/modal/EUIModal.vue"],"names":[],"mappings":"AACA,cAAc,2GAA2G,CAAC;AAuF1H,OAAO,oIAAoI,CAAC;;AAE5I,wBAAmH"}
+{"version":3,"file":"EUIModal.vue.d.ts","sourceRoot":"","sources":["../../src/components/modal/EUIModal.vue"],"names":[],"mappings":"AACA,cAAc,2GAA2G,CAAC;AA0F1H,OAAO,oIAAoI,CAAC;;AAE5I,wBAAmH"}

package/dist/tabs/EUITabs.vue.d.ts

@@ -1,5 +1,5 @@
 export * from "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=script&setup=true&lang.ts";
-import "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=style&index=0&scoped=4fdb3faa&lang.css";
+import "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=style&index=0&scoped=d49443f9&lang.css";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUITabs.vue.d.ts.map

package/package.json

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

package/src/components/modal/EUIModal.vue

@@ -1,6 +1,6 @@
 <template>
   <Teleport defer to="body">
-    <Transition name="modal">
+    <Transition name="modal" appear>
       <div
         v-if="isVisible"
         class="fixed inset-0 z-50 flex flex-col items-center justify-end sm:justify-center"
@@ -83,7 +83,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, watchEffect } from "vue";
+import { defineComponent, onMounted, onUnmounted, watch } from "vue";
 
 export default defineComponent({
   name: "Modal",
@@ -108,27 +108,44 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
-  },
-  emits: ["update:isVisible", "confirm"],
-  methods: {
-    closeModal() {
-      this.$emit("update:isVisible", false);
+    persistent: {
+      type: Boolean,
+      default: false,
     },
   },
-  setup(props) {
-    watchEffect(() => {
-      if (props.isVisible) {
-        document.body.style.overflow = "hidden"; // Disable body scroll
-      } else {
-        document.body.style.overflow = ""; // Re-enable body scroll
+  emits: ["update:isVisible", "confirm"],
+  setup(props, { emit }) {
+    // Methods
+    const closeModal = () => {
+      if (!props.persistent) {
+        emit("update:isVisible", false);
       }
+    };
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && props.isVisible && !props.persistent) {
+        closeModal();
+      }
+    };
+    // Watcher for body scroll lock
+    watch(
+      () => props.isVisible,
+      (newVal) => {
+        document.body.style.overflow = newVal ? "hidden" : "";
+      }
+    );
+    // Lifecycle hooks
+    onMounted(() => {
+      window.addEventListener("keydown", handleKeydown);
     });
 
-    return {};
-  },
-  beforeUnmount() {
-    document.body.style.overflow = ""; // Re-enable scroll when component unmounts
-  },
+    onUnmounted(() => {
+      document.body.style.overflow = ""; // Reset scroll when modal unmounts
+      window.removeEventListener("keydown", handleKeydown);
+    });
+    return {
+      closeModal
+    };
+  }
 });
 </script>
 

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

@@ -38,6 +38,12 @@ const meta: Meta<typeof EUIModal> = {
         action: "confirm",
         description: "Emits when the confirm button is clicked.",
       },
+      persistent: {
+        control: "boolean",
+        description:
+          "Prevents the modal from being closed by clicking on the backdrop or pressing the Escape key.",
+        defaultValue: false,
+      },
     },
   },
   parameters: {

package/src/components/table/UTable.vue

@@ -177,9 +177,15 @@
                     "
                   >
                     <div
-                      class="flex items-center justify-center text-xl font-medium text-gray-500 h-[calc(100svh-18rem)] max-w-screen-xl border"
+                      class="flex items-center justify-center w-[calc(100vw-14rem)]"
+                      :class="[tableHeight ? tableHeight : 'h-[calc(100svh-12rem)] max-h-[calc(100svh-12rem)]']"
                     >
-                      No matching records found
+                      <div class="text-center">
+                        <div class="mx-auto overflow-hidden rounded-md size-56">
+                        <img src="@/assets/images/search-nodata.png" alt="" class="block object-contain object-center h-auto max-w-full opacity-90" />
+                      </div>
+                      <div class="my-2 text-xl font-medium text-gray-500">No matching records found</div>
+                      </div>
                     </div>
                   </td>
                 </tr>

package/src/components/tabs/EUITabs.vue

@@ -1,28 +1,27 @@
 <template>
   <div>
-    <div
-      v-if="tabStyle === 'design'"
+    <div class="overflow-x-scroll">
+      <div
+        v-if="tabStyle === 'design'"
         class="flex flex-row items-center justify-between w-full p-2 bg-gray-100 rounded-xl"
       >
         <button
-         v-for="(tab, tabindex) in tabs"
+          v-for="(tab, tabindex) in tabs"
           :key="tabindex"
           :id="`id-${tab.name}`"
           type="button"
           class="[&:not(:focus-visible)]:focus:outline-none relative w-full inline-flex items-center transition-colors duration-100"
           role="tab"
           tabindex="-1"
-         @click="selectTab(tabindex)"
+          @click="selectTab(tabindex)"
         >
           <div
             class="pointer-events-none absolute inset-0 transition-transform duration-200 transform z-[1] ease-in-out"
             :class="{
-              'translate-x-full':
-                tabindex < activeTabIndex,
-              '-translate-x-full':
-                tabindex > activeTabIndex,
+              'translate-x-full': tabindex < activeTabIndex,
+              '-translate-x-full': tabindex > activeTabIndex,
               'translate-x-0 rounded-lg bg-gray-600':
-                activeTabIndex === tabindex
+                activeTabIndex === tabindex,
             }"
           />
           <span
@@ -30,59 +29,69 @@
               'w-full px-4 py-2 text-sm tracking-wide font-medium capitalize z-10',
               activeTabIndex == tabindex
                 ? ' text-white'
-                : ' text-gray-500 hover:text-gray-600 rounded-lg bg-transparent z-0 transition-colors duration-300 ease-in origin-center'
+                : ' text-gray-500 hover:text-gray-600 rounded-lg bg-transparent z-0 transition-colors duration-300 ease-in origin-center',
             ]"
           >
+            <slot name="title" :tab="tab">
+              {{ tab?.name }}
+            </slot>
+          </span>
+        </button>
+      </div>
+      <div
+        v-else-if="tabStyle === 'border'"
+        class="flex items-center gap-1 before:bottom-0 before:left-0 before:absolute before:content-[''] before:h-px before:w-full before:bg-gray-200 relative before:-z-[1] z-0 bg-white"
+        :class="[
+          tabAlign === 'justify'
+            ? 'justify-between'
+            : tabAlign === 'end'
+            ? 'justify-end'
+            : 'justify-start',
+        ]"
+      >
+        <button
+          v-for="(tab, tabindex) in tabs"
+          :key="tabindex"
+          role="tab"
+          :id="`id-${tab.name}`"
+          :class="[
+            'px-3 py-1 leading-5 transition-all duration-150 ease-in-out hover:text-gray-800',
+            tabSize === 'sm'
+              ? 'text-sm font-semibold border-b-2'
+              : 'text-base font-bold border-b-[3px]',
+            activeTabIndex === tabindex
+              ? 'border-gray-900 text-gray-900'
+              : 'border-transparent text-gray-500',
+          ]"
+          @click="selectTab(tabindex)"
+        >
           <slot name="title" :tab="tab">
             {{ tab?.name }}
           </slot>
-        </span>
         </button>
       </div>
-
-    <div
-      v-else-if="tabStyle === 'border'"
-      class="flex items-center gap-1 before:bottom-0 before:left-0 before:absolute before:content-[''] before:h-px before:w-full before:bg-gray-200 relative before:-z-[1] z-0 bg-white"
-      :class="[tabAlign === 'justify' ? 'justify-between' : tabAlign === 'end' ? 'justify-end' : 'justify-start']"
-    >
-      <button
-        v-for="(tab, tabindex) in tabs"
-        :key="tabindex"
-        role="tab"
-        :id="`id-${tab.name}`"
-        :class="['px-3 py-1 leading-5 transition-all duration-150 ease-in-out hover:text-gray-800',
-        tabSize === 'sm' ? 'text-sm font-semibold border-b-2' : 'text-base font-bold border-b-[3px]',
-        activeTabIndex === tabindex
-            ? 'border-gray-900 text-gray-900'
-            : 'border-transparent text-gray-500']"
-        @click="selectTab(tabindex)"
-      >
-        <slot name="title" :tab="tab">
-          {{ tab?.name }}
-        </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"
-        :key="tabindex"
-        role="tab"
-        :id="`id-${tab.name}`"
-        class="px-4 py-1 text-sm font-semibold transition-colors duration-150 ease-in-out border rounded-full"
-        :class="
-          activeTabIndex === tabindex
-            ? 'shadow-lg shadow-gray-100 bg-white border-gray-200 focus-within:border-purple-600 text-gray-900'
-            : 'border-white hover:bg-gray-50 text-gray-700'
-        "
-        @click="selectTab(tabindex)"
+      <div
+        v-else
+        class="flex items-center gap-1 p-2 transition-all duration-100"
       >
-        <slot name="title" :tab="tab">
-          {{ tab?.name }}
-        </slot>
-      </button>
+        <button
+          v-for="(tab, tabindex) in tabs"
+          :key="tabindex"
+          role="tab"
+          :id="`id-${tab.name}`"
+          class="px-4 py-1 text-sm font-semibold transition-colors duration-150 ease-in-out border rounded-full"
+          :class="
+            activeTabIndex === tabindex
+              ? 'shadow-lg shadow-gray-100 bg-white border-gray-200 focus-within:border-purple-600 text-gray-900'
+              : 'border-white hover:bg-gray-50 text-gray-700'
+          "
+          @click="selectTab(tabindex)"
+        >
+          <slot name="title" :tab="tab">
+            {{ tab?.name }}
+          </slot>
+        </button>
+      </div>
     </div>
     <div :class="['py-2 text-base font-normal text-gray-700', contentClass]">
       <slot name="content" :active-tab="tabs[activeTabIndex]">
@@ -103,10 +112,10 @@ interface Tab {
 const props = defineProps<{
   tabs: Tab[];
   defaultActiveIndex?: number;
-  tabStyle: "rounded" | "border" | 'design' ,
-  contentClass?: string[] | string,
-  tabSize?: "sm" | "md",
-  tabAlign?: 'start' | 'justify' | 'end'
+  tabStyle: "rounded" | "border" | "design";
+  contentClass?: string[] | string;
+  tabSize?: "sm" | "md";
+  tabAlign?: "start" | "justify" | "end";
 }>();
 
 const emit = defineEmits<{
@@ -124,7 +133,6 @@ watch(
   () => props.defaultActiveIndex,
   (newIndex) => {
     activeTabIndex.value = newIndex ?? 0;
-
   }
 );
 </script>