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:

• elFinder and jQuery File Upload replacements
• Date and Time Picker

These are useful all over Tiki:

• Multiselect Tracker Field
• Relations Tracker Field
• Items List and Item Link Tracker Fields
• Category Tracker Field
• etc.

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
• https://github.com/vueform/multiselect
• https://github.com/sagalbot/vue-select
• https://antdv.com/components/select
• https://tw-elements.com/docs/standard/forms/select
• https://semantic-ui.com/modules/dropdown.html#selection

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:

• https://element-plus.org/en-US/component/transfer.html

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/

• License: MIT
• Pros
  • permits to order the list
  • works with touch interfaces
• draggable
• Cons
  • no frequent updates
• https://github.com/maykinmedia/dual-listbox
  • License: MIT
  • Pros
    • permits to order the list
  • Cons
    • no numbering
    • Doesn't work with touch interface
• https://www.avonnicomponents.com/components/dual-listbox/
  • License: MIT
  • Pros
    • permits to order the list
    • draggable
    • active community demonstrated via the github repo
    • Allow grouping of options
  • Cons
    • drag and drop doesn't work on touch interface
    • huge library with other multitude components
      • We could replace 10+ Tiki dependencies with this huge lib
        • I see a pitfall in doing this, what if the lib one day becomes unmaintained or suddenly changes the license?
• https://www.jqueryscript.net/demo/multi-dual-select/ doesn't allow drag and drop and ordering
• https://abhimediratta.github.io/vue-multiselect-listbox/ doesn't allow drag and drop and ordering as well
• https://www.jqueryscript.net/demo/Groupable-Searchable-Dual-Listbox-Transfer/ doesn't allow drag and drop and ordering and uses checkboxes

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:

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:

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

4. Nested and sorted lists

• For menus
• Maybe PluginListGUI?

Candidates:

• https://ilikenwf.github.io/example.html
• https://ant.design/components/list and https://ant.design/components/tree
• https://carbondesignsystem.com/components/list/usage#overview
• https://semantic-ui.com/elements/list.html

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

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

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

• https://www.avonnicomponents.com/components/color-picker/
  • Pros
    • Minimal representation of colors with distinction
    • Provide separate components, one can choose to use the color palette or color gradient individually
    • Ability to define preset colors
    • avonnicomponents has a set of other components that could be used for various other use cases listed on this page.
    • Highly active contributions
  • Cons
    • It's huge for the usage of one individual component
• https://github.com/nhn/tui.editor/tree/master/plugins/color-syntax which is part of the TOAST UI Editor Markdown WYSIWYG editor
  • https://nhn.github.io/tui.color-picker/latest/tutorial-example01-basic
• https://github.com/evilmartians/oklch-picker in the first place, it's not a color picking library, it's just a project demonstrating how the oklch format works by providing a color picker based on this latter
  • https://oklch.com
  • https://ericportis.com/posts/2024/okay-color-spaces/
• https://casesandberg.github.io/react-color/ unfortunately it's React which is not used in Tiki, could be better to find something plain JavaScript, jQuery, or Vue.js
• https://github.com/Simonwep/pickr
  • Pros
    • Minimal representation of colors with distinction
    • Compatible with Bootstrap
    • Touch devices support
  • Cons
    • Unmaintained anymore according to the author https://github.com/Simonwep/pickr?tab=readme-ov-file#status-of-this-project
• https://xiaokaike.github.io/vue-color/
  • Pros
    • Components with minimal representation of colors with distinction
    • Touch devices support
  • Cons
    • Shallow documentation
    • Incompatible with Vite as per https://github.com/xiaokaike/vue-color/issues/248
    • Last release made since 4 years ago
• https://github.com/color-js/color.js a color manipulation and conversion library
  • Pros
    • Support for all color spaces
    • Easy to use API
    • Highly active contributions
  • Cons
    • It would require creating our own color picker
• https://shoelace.style/components/color-picker

Color pickers are used in at least 4 places:

• CKeditor WYSIWYG editor
• TOAST UI Editor Markdown WYSIWYG editor
• Theme Customizer
• Tiki syntax text editor: Wiki Page Editor

9. Slider

Types of sliders

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

Candidates:

• https://www.avonnicomponents.com/components/slider/
• https://www.avonnicomponents.com/components/range/
• https://nightcatsama.github.io/vue-slider-component/#/basics/simple
• https://github.com/vueform/slider
• https://shoelace.style/components/range
• https://antdv.com/components/slider
• https://carbondesignsystem.com/components/slider/usage
• https://explore.fast.design/components/fast-slider
• https://www.lightningdesignsystem.com/components/slider/