feat(FoMultipleSelect): First implementation

[michaelcozzolino]

Summary by CodeRabbit

• New Features

  • Introduced a new multiple-select component allowing users to select multiple options from a list with configurable visible items.

• Documentation

  • Added comprehensive documentation and interactive examples for the multiple-select functionality.

[coderabbitai]

Warning

Rate limit exceeded

@michaelcozzolino has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 21 minutes and 12 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 83f00867-c6cd-455a-979f-6ac828190023

📥 Commits

Reviewing files that changed from the base of the PR and between e88babd and 85d067e.

📒 Files selected for processing (1)

• packages/core/src/UI/Forms/Select/Types/Select.ts

Walkthrough

This change introduces a new FoMultipleSelect component for handling multiple selections in form inputs. It includes a new MultipleSelectProps interface with options and visibleOptions properties, the FoMultipleSelect Vue component implementation, updates to component exports and configuration, and documentation additions. The FoSelect component's ID generation mechanism was also updated to use useElementId instead of useId. Documentation examples and type definitions were added to support the new component.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely describes the main change: the first implementation of a new FoMultipleSelect component, which is the primary focus across all modified files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/multiple-select

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cloudflare-workers-and-pages]

Deploying flyonui-vue-v3 with    Cloudflare Pages

Latest commit:	85d067e
Status:	✅  Deploy successful!
Preview URL:	https://ecc5f558.flyonui-vue-v3.pages.dev
Branch Preview URL:	https://feat-multiple-select.flyonui-vue-v3.pages.dev

View logs

[cloudflare-workers-and-pages]

Deploying flyonui-vue with    Cloudflare Pages

Latest commit:	85d067e
Status:	✅  Deploy successful!
Preview URL:	https://c44ead32.flyonui-vue.pages.dev
Branch Preview URL:	https://feat-multiple-select.flyonui-vue.pages.dev

View logs

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/core/src/UI/Forms/Select/UI/FoMultipleSelect.vue (1)

9-14: Consider adding aria-label for accessibility consistency.

FoSelect includes aria-label="select" on its <select> element. For consistency and accessibility, consider adding a similar attribute here. When a visible label exists, aria-labelledby pointing to the label's ID might be preferable.

♿ Suggested minimal fix

         <select :id="id"
                 v-model="selectedOptions"
                 class="select h-auto"
                 :size="visibleOptions"
                 :disabled="isDisabled"
+                aria-label="multiple select"
                 multiple
         >

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/core/src/UI/Forms/Select/UI/FoMultipleSelect.vue` around lines 9 -
14, The <select> in FoMultipleSelect.vue is missing an accessibility label; add
aria-label="select" to the <select> element (or, if a visible label exists, add
aria-labelledby pointing to that label's id) to match FoSelect and ensure
accessibility consistency; update the template where the <select> uses
v-model="selectedOptions" and props like id, visibleOptions and isDisabled so
the ARIA attribute is included alongside those attributes.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/core/src/UI/Forms/Select/Types/Select.ts`:
- Line 32: Fix the typo in the JSDoc comment that reads "The selects' options."
to the correct possessive "The select's options." in the Select.ts file (look
for the comment above the options type/prop declaration in
packages/core/src/UI/Forms/Select/Types/Select.ts).

---

Nitpick comments:
In `@packages/core/src/UI/Forms/Select/UI/FoMultipleSelect.vue`:
- Around line 9-14: The <select> in FoMultipleSelect.vue is missing an
accessibility label; add aria-label="select" to the <select> element (or, if a
visible label exists, add aria-labelledby pointing to that label's id) to match
FoSelect and ensure accessibility consistency; update the template where the
<select> uses v-model="selectedOptions" and props like id, visibleOptions and
isDisabled so the ARIA attribute is included alongside those attributes.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 882cc6d5-51d5-40e0-bb47-169e7061270f

📥 Commits

Reviewing files that changed from the base of the PR and between 4a24e4a and e88babd.

⛔ Files ignored due to path filters (1)

• packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-select-multiple-chromium-linux.png is excluded by !**/*.png

📒 Files selected for processing (8)

• packages/core/src/Lib/UseFlyonUIVueAppConfig/Types/ComponentName.ts
• packages/core/src/UI/Forms/Select/Types/Select.ts
• packages/core/src/UI/Forms/Select/UI/FoMultipleSelect.vue
• packages/core/src/UI/Forms/Select/UI/FoSelect.vue
• packages/core/src/UI/Forms/Select/UI/index.ts
• packages/docs/Forms/Select.md
• packages/docs/Forms/Select/MultipleSelect.vue
• packages/docs/Forms/Select/SelectDocs.vue