Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for multiple select-all checkboxes targeting different subsets of checkboxes #25

Open
asavageiv opened this issue Mar 29, 2024 · 2 comments

Comments

@asavageiv
Copy link

Consider a UI like the one below. The checkboxes at the top should be select-all boxes for their respective check the boxes in their respective columns.

I'm happy to contribute code for this.
OCR Line Items modal window

The API must remain backwards compatible so here is my thinking:

  1. Change checkboxAll to be an Array
  2. Add a data-checkbox-select-all-group= param to each checkbox. Boxes with matching groups go together.

For this example it would look something like this:

<form data-controller="checkbox-select-all">
  <input type="checkbox" data-checkbox-select-all-target="checkboxAll" data-checkbox-select-all-group="include-row">
  <input type="checkbox" data-checkbox-select-all-target="checkboxAll" data-checkbox-select-all-group="is-drink">
  <input type="checkbox" data-checkbox-select-all-target="checkboxAll" data-checkbox-select-all-group="eight-percent">

  <div class="row">
    <input type="checkbox" data-checkbox-select-all-target="checkbox" data-checkbox-select-all-group="include-row">
    <input type="checkbox" data-checkbox-select-all-target="checkbox" data-checkbox-select-all-group="is-drink">
    <input type="checkbox" data-checkbox-select-all-target="checkbox" data-checkbox-select-all-group="eight-percent">
  </div>
  <div class="row">
    <input type="checkbox" data-checkbox-select-all-target="checkbox" data-checkbox-select-all-group="include-row">
    <input type="checkbox" data-checkbox-select-all-target="checkbox" data-checkbox-select-all-group="is-drink">
    <input type="checkbox" data-checkbox-select-all-target="checkbox" data-checkbox-select-all-group="eight-percent">
  </div>
</div>

If group is not set then that checkbox is part of the "ungrouped group" by default. get checked() and get unchecked() have to continue to use the "ungrouped group" for backwards compatibility but we could add getCheckedGroup(group) and getUncheckedGroup(group) methods in parallel for users that need this feature.

What do you think?

@asavageiv
Copy link
Author

Another alternative is to make a new component checkbox-select-group that has the functionality.

@asavageiv
Copy link
Author

Here's a potential new component if someone wants to help me get it into stimulus-components:
https://github.com/asavageiv/stimulus-checkbox-select-group

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant