diff --git a/docs/content/2.components/input.md b/docs/content/2.components/input.md index 2d17c5fabc..5efb79e506 100644 --- a/docs/content/2.components/input.md +++ b/docs/content/2.components/input.md @@ -71,12 +71,20 @@ props: Use the `type` prop to change the input type, the default `type` is set to `text`, you can check all the available types at [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types). -We have improved the implementation of certain types such as [Checkbox](/components/checkbox), [Radio](/components/radio-group), etc. +Some types have been implemented in their own components, such as [Checkbox](/components/checkbox), [Radio](/components/radio-group), etc. and others have been styled like `file` for example. ::component-card --- props: - type: 'password' + type: 'file' + size: sm +options: + - name: type + restriction: included + values: + - file + - password + - number --- :: diff --git a/src/runtime/components/forms/Input.vue b/src/runtime/components/forms/Input.vue index 333b2ad476..50c0c3299b 100644 --- a/src/runtime/components/forms/Input.vue +++ b/src/runtime/components/forms/Input.vue @@ -236,6 +236,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]], 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 64b0aaf093..1a9bf29066 100644 --- a/src/runtime/ui.config/forms/input.ts +++ b/src/runtime/ui.config/forms/input.ts @@ -4,6 +4,17 @@ export default { form: 'form-input', 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]' + } + }, size: { '2xs': 'text-xs', xs: 'text-xs',