edvoyui-component-library-test-flight 0.0.210 → 0.0.212

package/dist/components/input/EUIInput.vue

@@ -14,15 +14,18 @@
       :class="[
         'relative',
         {
-          'pointer-events-none cursor-not-allowed':
-            disabled || isInlineEditReadonly,
+          'pointer-events-none': isNonEditable,
         },
         {
-          'h-14 rounded-2xl focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600 border border-gray-200':
-          inputFilled,
+          'h-14 rounded-2xl border border-gray-200': inputFilled,
+        },
+        {
+          'focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600':
+            inputFilled && !isNonEditable,
         },
         {'border-transparent focus-within:border-transparent focus-within:ring-0': inlineEditButton && isInlineEditReadonly},
-        'group cursor-pointer relative w-full mb-2 overflow-hidden',
+        'group relative w-full mb-2 overflow-hidden',
+        isNonEditable ? 'cursor-not-allowed' : 'cursor-pointer',
       ]"
     >
       <button
@@ -55,7 +58,8 @@
             : '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',
+          !isNonEditable && 'group-focus-within:top-3.5 group-focus-within:text-xs group-focus-within:text-gray-400 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',
+          'absolute font-medium left-0 px-4 -translate-y-1/2 duration-300 rounded-2xl first-letter:capitalize transition-all ease-in-out',
         ]"
       >
         {{ label || "Label" }}
@@ -82,12 +86,14 @@
           '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-200 focus-within:ring-purple-600 focus-within:ring-2 ring-inset',
+            : isNonEditable
+              ? 'py-3 h-10 w-full ring-1 ring-gray-200 ring-inset'
+              : 'py-3 h-10 w-full ring-1 ring-gray-200 focus-within:ring-purple-600 focus-within:ring-2 ring-inset',
           !inputFilled && rounded ? 'rounded-2xl' : 'rounded-md',
-          disabled ? 'cursor-not-allowed' : 'cursor-text',
+          isNonEditable ? 'cursor-not-allowed' : 'cursor-text',
           getIconClass(),
           !inputFilled && className,
-          'pr-8',
+          {'pr-8': type === 'search'}
         ]"
         :required="required"
         :disabled="disabled"
@@ -231,6 +237,13 @@ const isInlineEditReadonly = computed(() => {
   return props.inlineEdit && props.readonly && !props.edit;
 });
 
+// Disabled and (non-edit) readonly inputs are static display values, not editable
+// fields. A readonly <input> stays focusable (unlike disabled), so without this
+// guard it still triggers the purple focus-within ring and the floating-label
+// animation on click/tab — making it look editable. Treat both states the same
+// everywhere below. Inline-edit fields stay editable once `edit` is on.
+const isNonEditable = computed(() => props.disabled || (props.readonly && !props.edit));
+
 const inlineEditButton = computed(() => {
   return props.inlineEdit && props.editIcon && (props.readonly || props.edit);
 });

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

@@ -34,6 +34,7 @@ declare const _default: import('../../../node_modules/vue').DefineComponent<impo
     };
 }>, {
     closeModal: () => void;
+    dismissModal: () => void;
     slideClass: import('../../../node_modules/vue').ComputedRef<string>;
 }, {}, {}, {}, import('../../../node_modules/vue').ComponentOptionsMixin, import('../../../node_modules/vue').ComponentOptionsMixin, ("update:isVisible" | "confirm")[], "update:isVisible" | "confirm", import('../../../node_modules/vue').PublicProps, Readonly<import('../../../node_modules/vue').ExtractPropTypes<{
     isVisible: {

package/dist/components/modal/EUIModal.vue

@@ -44,7 +44,7 @@
                 <button
                   type="button"
                   class="flex items-center justify-center text-gray-400 bg-white hover:bg-gray-50 rounded-3xl hover:text-gray-600 size-8"
-                  @click="closeModal"
+                  @click="dismissModal"
                 >
                   <span class="sr-only">Close</span>
                   <svg
@@ -84,7 +84,7 @@
               class="sticky bottom-0 flex items-center justify-end float-none p-4 space-x-2"
             >
               <button
-                @click="closeModal"
+                @click="dismissModal"
                 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"
               >
                 Cancel
@@ -166,11 +166,18 @@ export default defineComponent({
     });
 
     // Methods
+    // Accidental dismissal (backdrop click / Esc) — suppressed when persistent.
     const closeModal = () => {
       if (!props.persistent) {
         emit("update:isVisible", false);
       }
     };
+    // Explicit close affordances (the X button and default Cancel) always
+    // dismiss, even when persistent. `persistent` only guards against the
+    // accidental backdrop/Esc dismissal handled by closeModal.
+    const dismissModal = () => {
+      emit("update:isVisible", false);
+    };
     const handleKeydown = (event: KeyboardEvent) => {
       if (event.key === "Escape" && props.isVisible && !props.persistent) {
         closeModal();
@@ -194,6 +201,7 @@ export default defineComponent({
     });
     return {
       closeModal,
+      dismissModal,
       slideClass,
     };
   },