edvoyui-component-library-test-flight 0.0.211 → 0.0.213

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);
 });