From ed5c74dc17df784485eabc39c83e62ada9210a49 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 25 Apr 2024 17:12:06 +0200
Subject: [PATCH] fix(Input)!: redesign `file` type without absolute
 positioning (#1712)

---
 docs/content/2.components/input.md     |  2 ++
 src/runtime/components/forms/Input.vue |  2 +-
 src/runtime/ui.config/forms/input.ts   | 10 +---------
 3 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/docs/content/2.components/input.md b/docs/content/2.components/input.md
index 4400ab53..0765b6d5 100644
--- a/docs/content/2.components/input.md
+++ b/docs/content/2.components/input.md
@@ -75,6 +75,8 @@ Some types have been implemented in their own components, such as [Checkbox](/co
 
 ::component-card
 ---
+baseProps:
+  icon: 'i-heroicons-folder'
 props:
   type: 'file'
   size: sm
diff --git a/src/runtime/components/forms/Input.vue b/src/runtime/components/forms/Input.vue
index 55f4f3d6..2040b6b7 100644
--- a/src/runtime/components/forms/Input.vue
+++ b/src/runtime/components/forms/Input.vue
@@ -240,7 +240,7 @@ export default defineComponent({
         ui.value.form,
         rounded.value,
         ui.value.placeholder,
-        props.type === 'file' && [ui.value.file.base, ui.value.file.padding[size.value]],
+        props.type === 'file' && ui.value.file.base,
         ui.value.size[size.value],
         props.padded ? ui.value.padding[size.value] : 'p-0',
         variant?.replaceAll('{color}', color.value),
diff --git a/src/runtime/ui.config/forms/input.ts b/src/runtime/ui.config/forms/input.ts
index 1a9bf290..8414857c 100644
--- a/src/runtime/ui.config/forms/input.ts
+++ b/src/runtime/ui.config/forms/input.ts
@@ -5,15 +5,7 @@ export default {
   rounded: 'rounded-md',
   placeholder: 'placeholder-gray-400 dark:placeholder-gray-500',
   file: {
-    base: 'file:cursor-pointer file:rounded-l-md file:absolute file:left-0 file:inset-y-0 file:font-medium file:m-0 file:border-0 file:ring-1 file:ring-gray-300 dark:file:ring-gray-700 file:text-gray-900 dark:file:text-white file:bg-gray-50 hover:file:bg-gray-100 dark:file:bg-gray-800 dark:hover:file:bg-gray-700/50',
-    padding: {
-      '2xs': 'ps-[85px]',
-      xs: 'ps-[87px]',
-      sm: 'ps-[96px]',
-      md: 'ps-[98px]',
-      lg: 'ps-[100px]',
-      xl: 'ps-[109px]'
-    }
+    base: 'file:mr-1.5 file:font-medium file:text-gray-500 dark:file:text-gray-400 file:bg-transparent file:border-0 file:p-0 file:outline-none'
   },
   size: {
     '2xs': 'text-xs',