From 8fbda9fc6468af82d994ce46e4abe3f444ce31f1 Mon Sep 17 00:00:00 2001
From: Arno Kaimbacher <arno.kaimbacher@geosphere.at>
Date: Mon, 31 Mar 2025 17:42:59 +0200
Subject: [PATCH] hotfixfix: enhance FormControl styling for read-only state

- Improved the styling of the `FormControl` component when in a read-only state.
- Added specific styles for read-only fields, including a grayed-out background, a disabled cursor, and removal of the focus ring.
- Updated the border color to match the read-only state.
- Ensured the text color is grayed out in read-only mode.
---
 resources/js/Components/FormControl.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/resources/js/Components/FormControl.vue b/resources/js/Components/FormControl.vue
index c768b1d..f66a2b3 100644
--- a/resources/js/Components/FormControl.vue
+++ b/resources/js/Components/FormControl.vue
@@ -67,15 +67,28 @@ const computedValue = computed({
         emit('update:modelValue', value);
     },
 });
+
+//  focus:ring focus:outline-none border-gray-700
 const inputElClass = computed(() => {
     const base = [
-        'px-3 py-2 max-w-full focus:ring focus:outline-none border-gray-700 rounded w-full',
+        'px-3 py-2 max-w-full rounded w-full',
         'dark:placeholder-gray-400',
         props.extraHigh ? 'h-80' : (computedType.value === 'textarea' ? 'h-44' : 'h-12'),
         props.borderless ? 'border-0' : 'border',
-        // props.transparent && !props.isReadOnly ? 'bg-transparent' : 'bg-white dark:bg-slate-800',
-        props.isReadOnly ? 'bg-gray-50 dark:bg-slate-600' : 'bg-white dark:bg-slate-800',
+        // // props.transparent && !props.isReadOnly ? 'bg-transparent' : 'bg-white dark:bg-slate-800',
+        // props.isReadOnly ? 'bg-gray-50 dark:bg-slate-600' : 'bg-white dark:bg-slate-800',
     ];
+
+      // Apply styles based on read-only state.
+  if (props.isReadOnly) {
+    // Read-only: no focus ring, grayed-out text and border, and disabled cursor.
+    base.push('bg-gray-50', 'dark:bg-slate-600', 'border', 'border-gray-300', 'dark:border-slate-600', 'text-gray-500', 'cursor-not-allowed', 'focus:outline-none' ,'focus:ring-0', 'focus:border-gray-300');
+  } else {
+    // Actionable field: focus ring, white/dark background, and darker border.
+    base.push('bg-white dark:bg-slate-800', 'focus:ring focus:outline-none', 'border', 'border-gray-700');
+  }
+
+ 
     if (props.icon) {
         base.push('pl-10', 'pr-10');
     }