edvoyui-component-library-test-flight 0.0.90 → 0.0.92

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

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=script&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=style&index=0&scoped=739e0044&lang.scss";
+import "/Volumes/work/repos/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,2FAA2F,CAAC;AAuF1G,OAAO,oHAAoH,CAAC;;AAE5H,wBAAmH"}
+{"version":3,"file":"EUIModal.vue.d.ts","sourceRoot":"","sources":["../../src/components/modal/EUIModal.vue"],"names":[],"mappings":"AACA,cAAc,2FAA2F,CAAC;AA0F1G,OAAO,oHAAoH,CAAC;;AAE5H,wBAAmH"}

package/package.json

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

package/src/components/input/EUIInput.vue

@@ -1,18 +1,47 @@
 <template>
   <div>
     <label
-        v-if="!inputFilled && label"
-        :for="`${name}-${id}`"
-        :class="[
-          'text-xs w-full text-gray-500 cursor-pointer font-medium',
-          required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
-        ]"
-      >
-        {{ label }}
-      </label>
+      v-if="!inputFilled && label"
+      :for="`${name}-${id}`"
+      :class="[
+        'text-xs w-full text-gray-500 cursor-pointer font-medium',
+        required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
+      ]"
+    >
+      {{ label }}
+    </label>
     <div
-      :class="[{'pointer-events-none cursor-not-allowed': disabled}, {'h-14 rounded-2xl focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600 border border-gray-100': inputFilled}, 'group cursor-pointer relative w-full mb-2 overflow-hidden']"
+      :class="[
+        'relative',
+        { 'pointer-events-none cursor-not-allowed': disabled },
+        {
+          'h-14 rounded-2xl focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600 border border-gray-100':
+            inputFilled,
+        },
+        'group cursor-pointer relative w-full mb-2 overflow-hidden',
+      ]"
     >
+      <button
+        :class="inputValue ? '  absolute inset-y-0 right-3  ' : ' hidden '"
+        @click="emit('update:modelValue', '')"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="size-5"
+        >
+        <!--         <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+ -->
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M6 18 18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
       <label
         v-if="inputFilled"
         :for="`${name}-${id}`"
@@ -23,30 +52,39 @@
             : 'top-1/2 text-sm w-full text-gray-700 cursor-pointer h-14 pt-5 pb-4',
           disabled ? 'cursor-not-allowed bg-gray-50 z-10' : 'z-0 bg-white',
           required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
-          'absolute font-medium left-0 px-4 -translate-y-1/2 duration-300 group-focus-within:top-3.5 group-focus-within:text-xs group-focus-within:text-gray-400 rounded-2xl group-focus-within:bg-transparent group-focus-within:-translate-y-1/2 group-focus-within:ring-transparent group-focus-within:h-auto group-focus-within:py-0 first-letter:capitalize transition-all ease-in-out'
+          'absolute font-medium left-0 px-4 -translate-y-1/2 duration-300 group-focus-within:top-3.5 group-focus-within:text-xs group-focus-within:text-gray-400 rounded-2xl group-focus-within:bg-transparent group-focus-within:-translate-y-1/2 group-focus-within:ring-transparent group-focus-within:h-auto group-focus-within:py-0 first-letter:capitalize transition-all ease-in-out',
         ]"
       >
-        {{ label || 'Label' }}
+        {{ label || "Label" }}
       </label>
       <div
         v-if="icon && iconType"
-        :class="['absolute inset-y-0 flex items-center pointer-events-none', iconType === 'startIcon' ? 'left-0 pl-3' : 'right-0 pr-3', disabled ? 'z-20': '']"
+        :class="[
+          'absolute inset-y-0 flex items-center pointer-events-none',
+          iconType === 'startIcon' ? 'left-0 pl-3' : 'right-0 pr-3',
+          disabled ? 'z-20' : '',
+        ]"
       >
-        <component
-          :is="icon"
-          class="text-gray-400 size-6"
-          aria-hidden="true"
-        />
+        <component :is="icon" class="text-gray-400 size-6" aria-hidden="true" />
       </div>
       <input
         :id="`${name}-${id}`"
         ref="input"
-        :type="type"
+        :type="type === 'search' ? 'text' : type"
         :value="modelValue"
         :placeholder="placeholder"
         :name="name"
-        :class="['z-10 block placeholder:text-gray-400 focus:outline-none text-sm font-medium appearance-none disabled:opacity-75 autofill:bg-white leading-6 transition-all duration-100 border-none outline-none', inputFilled ? 'pt-6 pb-3 rounded-2xl size-full' : 'py-3 h-10 w-full ring-1 ring-gray-100 focus-within:ring-purple-600 focus-within:ring-2 ring-inset', !inputFilled && rounded ? 'rounded-2xl' : 'rounded-md', disabled ? 'cursor-not-allowed' : 'cursor-text', getIconClass(), !inputFilled && className]"
-
+        :class="[
+          'z-10 block placeholder:text-gray-400 focus:outline-none text-sm font-medium appearance-none disabled:opacity-75 autofill:bg-white leading-6 transition-all duration-100 border-none outline-none',
+          inputFilled
+            ? 'pt-6 pb-3 rounded-2xl size-full'
+            : 'py-3 h-10 w-full ring-1 ring-gray-100 focus-within:ring-purple-600 focus-within:ring-2 ring-inset',
+          !inputFilled && rounded ? 'rounded-2xl' : 'rounded-md',
+          disabled ? 'cursor-not-allowed' : 'cursor-text',
+          getIconClass(),
+          !inputFilled && className,
+          'pr-8'
+        ]"
         :required="required"
         :disabled="disabled"
         :readonly="readonly"
@@ -124,10 +162,10 @@ const props = defineProps({
     default: false,
   },
   inputFilled: {
-    type:Boolean,
-    default: false
+    type: Boolean,
+    default: false,
   },
-  rounded:Boolean,
+  rounded: Boolean,
   className: {
     type: Array as PropType<string[]>,
     required: false,

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/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/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>