geolba/tethys.backend
geolba/tethys.backend
2
0
Fork 1
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

hotfixfix: enhance FormControl styling for read-only state

Browse source 
- 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.
This commit is contained in:
Kaimbacher 2025-03-31 17:42:59 +02:00
parent 7bb4bd06cf
commit 8fbda9fc64
1 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
resources/js/Components/FormControl.vue
View file

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