feat: Label added for FileInput dropzone

[ogzcode]

#292

Label was missing in FileInput's dropzone property, it was added

Summary by CodeRabbit

• New Features

  • Improved layout of the file input component for better organization and usability.
  • Added a conditional label display to enhance user feedback within the drop zone.

• Bug Fixes

  • Adjusted alignment to ensure a more intuitive experience for users interacting with file uploads.

• Refactor

  • Streamlined the structure of the component's template and script sections for enhanced readability.
  • Compact formatting of input elements and SVG attributes for cleaner markup.

[coderabbitai[bot]]

[!IMPORTANT]

Review skipped

More than 25% of the files skipped due to max files limit. The review is being skipped to prevent a low-quality review.

390 files out of 603 files are above the max files limit of 200.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The recent updates to the FwbFileInput component enhance its layout and user experience. By shifting to a vertical arrangement for the file input area, the design allows for better organization of elements. The addition of a conditional label further guides users, improving accessibility and usability. These changes reflect a commitment to creating a more intuitive interface for file uploads.

Changes

Files	Change Summary
src/components/FwbFileInput/FwbFileInput.vue	Modified layout to vertical alignment in the file input area, added a conditional label for improved user guidance, and streamlined the script for better readability.

Poem

In the file input, a change so bright,
Vertical stacks make everything right.
A label appears, a friendly embrace,
Guiding the users with style and grace.
Hoppy and happy, we cheer with delight,
For a smoother journey, both easy and bright! 🐇✨

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[netlify[bot]]

✅ Deploy Preview for sensational-seahorse-8635f8 ready!

Name	Link
🔨 Latest commit	3c8fd8bc00f4e2a2bfca5becf58c75287f656db7
🔍 Latest deploy log	https://app.netlify.com/sites/sensational-seahorse-8635f8/deploys/67cfce14a0f15b0008e62214
😎 Deploy Preview	https://deploy-preview-304--sensational-seahorse-8635f8.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[ogzcode]

@Sqrcz now you can control it.

[Sqrcz]

Ok, thank you.

[ps-20x]

Any updates on this one? It would be really great to have the label also being used for the dropzone. Or even better: use a slot for both. If needed and accepted I can create a PR for that. But I actually would need that quite soon if possible.

[Sqrcz]

Hey, @ps-20x

I'll take a look at it gain before the end of the week... 🤞

[ps-20x]

Hey, @ps-20x

I'll take a look at it gain before the end of the week... 🤞

Hi @Sqrcz. Sorry to be annoying here 🙈 ? Can I support you for this in any way?

[Sqrcz]

Yeah, sorry... Wrong "end of the week" ;)

I've drowned a bit in the move to tailwind V4.

I'll take a look again today in the second half of the day. And let you know what we can do to move this one faster.

[ps-20x]

I'll take a look again today in the second half of the day. And let you know what we can do to move this one faster.

@Sqrcz Sorry to bother again, but this would be great for something I would like to release ASAP. Any possibility to support you somewhere?

[Sqrcz]

Hey, to make it faster instead of asking for changes... I did all the formatting for you... (as well as sync with recent main)

@ogzcode please update this PR by merging this one: https://github.com/ogzcode/flowbite-vue/pull/1 ;)

And it will be good to go. 🙏

[ogzcode]

thank you too 🙏