Tooloop/Caramel-CRM
2
0
Fork 0
Code Issues 61 Pull Requests Projects 3 Releases Wiki Activity

Improve input fields in tables slightly

Browse Source
This commit is contained in:
vollstock
2026-07-23 14:23:08 +02:00
parent 90739b5a82
commit 0e31b04060
1 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/ui/crm-input/Input.vue
+14 -1
View File
@@ -21,9 +21,22 @@ const modelValue = useVModel(props, 'modelValue', emits, {
<template> <template>
<input v-model="modelValue" data-slot="input" :class="cn( <input v-model="modelValue" data-slot="input" :class="cn(
'file:text-foreground placeholder:text-muted-foreground border-input flex h-9 w-full min-w-0 rounded-md border bg-input px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', 'file:text-foreground placeholder:text-muted-foreground border-input hover:border-input flex h-9 w-full min-w-0 rounded-md border bg-background px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive', 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
props.class, props.class,
)"> )">
</template> </template>
<style scoped>
tr input:not(:focus) {
background-color: transparent;
border-color: transparent;
box-shadow: none;
text-overflow: ellipsis;
}
tr input:not(:focus):hover {
border-color: var(--border);
}
</style>