Loading...
 
Skip to main content
1
Page actions
PDF Print

Review all selectors and pickers

We have various pickers and selection tools in Tiki. Let's review what we have and what we are missing. Please list and explain below current and projected use cases. Ref: How to pick a software library. This is for Tiki28 although it's possible we'll backport a few things to Tiki27 if it's easy and low-risk.

This excludes work on file pickers and date pickers, which are covered by other pages:


These are useful all over Tiki:


Names differ for similar tools. Please see https://open-ui.org/research/component-matrix/

1. Multi-select boxes (pillbox)

Select2 is now activated by default in Tiki and the assumption is that we continue to use: https://gitlab.com/tikiwiki/tiki/-/merge_requests/4214

But it's been over 4 years since the last release: https://github.com/select2/select2/issues/6290

So maybe we should change?

  • https://shoelace.style/components/select
    • Pros
      • Looks good (A subjective opinion)
      • Customizable (size-wise and tags)
      • A large community around it
    • Cons
      • Shoelace elements are rendered in the shadow root which makes them not easy to communicate seamlessly with bootstrap theming

  • https://antdv.com/components/select
    • Pros
      • Customizable tags count (How many of the selected items can be shown in the select box)
      • New options can be added by the user
      • Statuses for different validation states (error or warning)
    • Cons
      • Possibility to end up with a big chunk since the component is shipped with the whole library (after the build process, but also, an overload during dependencies installation process)

We choose

  1. Element Plus

2. Ranked voting

https://en.wikipedia.org/wiki/Ranked_voting

For EvoluData, we ask team members which 3 to 5 departments they prefer to work on, in order of priority. In this case, we want to know so we assign relevant tasks and projects.

For a voting system, we'll want this data to determine the winner(s) of an election. Ex.: https://opensource.org/blog/results-of-2024-elections-of-osi-board-of-directors

Global use case: E-democracy

Candidates:

Element UI is a popular vue.js library that provides a wide range of components, including one particularly useful for this scenario: the Transfer component.

    • Pros
      • permits to filter items
      • a handy API for customization
      • the library is very popular, getting frequent updates
    • Cons
      • the HTML container is not a select element
      • doesn't permit the ordering of items
      • doesn't permit drag and drop of items
  • https://antdv.com/components/transfer
    • Pros
      • permits to filter items
      • provide pagination for when there are many items to be displayed
      • permits to group items
      • a handy API for customization
    • Cons
      • doesn't permit drag and drop of items
      • doesn't permit the ordering of items
      • the HTML container is not a select element
  • https://staging-v6.patternfly.org/components/dual-list-selector
    • Cons
    • Pros
      • permits to enable/disable the ordering of items
      • draggable
      • permits to group items
      • works with touch interfaces
    • Cons
      • requires to select items then perform the move via an arrow
      • seems like unfortunately patternfly build components only for React since its version 4
  • https://github.com/dhruborajroy/Dual-Select-List
    • No license available
    • Uses jquery (which version?)
    • Pros
      • permits to order the list via drag and drop
      • permits to filter items
    • Cons
      • Not officially published on any registry
      • Last update made 3 years ago
  • https://philippemarcmeyer.github.io/vanillaSelectChooser/

https://github.com/PhilippeMarcMeyer/vanillaSelectChooser


Favorite candidate: https://philippemarcmeyer.github.io/vanillaSelectChooser/ is quite promising despite its lack of activity, it's very small to be forked if necessary.

@Jonny Bradley wrote:

The shift and ctrl modifiers don't work for me, and i don't like the way i have to do 2 clicks to select something.

So i vote for https://fabianlindfors.se/multijs/ i reckon (although the vue.js one isn't bad also)

3. Dual list

Like "Ranked voting" but the order is not important. Ex.: Please select the list of all countries you ship to.


On the left is a long list (Ideally a list of continents, and country list is indented), and user picks and move to the right. Here is a similar example from Select2:
Segmenting long lists (examples)

An example with https://github.com/Fabianlindfors/multi.js
https://github.com/Fabianlindfors/multi.js

4. Nested and sorted lists


Candidates:

5. Resource allocation

A challenge with asking people if they agree with various topics is that you won't have enough ressources to do all the ones that get positive feedback. Another approach is that each participant has a fixed quantity (votes, money, time, etc.) and you allocate to a number of different priorities.

item7766-n-gon-value-picker-for-tracker-fields

Multipointpicker

Candidates:

6. Sort options

Here is a list of tasks. All must be done. The only question is the order.
https://h5p.org/content-types/sort-the-paragraphs
https://h5p.org/content-types/sort-the-paragraphs

7. Drawing links between 2 lists

Designed for matching files headers to database fields during the process importing

Already used in Tiki for Mail-in to Trackers
https://github.com/PhilippeMarcMeyer/FieldsLinker

8. Color picker

https://github.com/itsjavi/bootstrap-colorpicker needs to be replaced


Color pickers are used in at least 4 places:


2017 03 29 072020

Merci Jacob wrote:
I see two potential candidates here: Shoelace and Element Plus. They seem to be more active than the others, but their presentations are much more attractive as well.


https://github.com/itsjavi/bootstrap-colorpicker replaced by https://shoelace.style/components/color-picker via https://gitlab.com/tikiwiki/tiki/-/merge_requests/5400

9. Slider

Types of sliders

  • basic (pick a value from x to y)
  • range (pick a minimum and maximum)


Candidates:


History Source Comments Files 6