History: 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:
* ((elFinder and jQuery File Upload replacements))
* ((Date and Time Picker))

These are useful all over Tiki:
* ((doc:Multiselect Tracker Field))
* ((doc:Relations Tracker Field))
* ((doc:Items List and Item Link Tracker Fields))
* ((doc:Category Tracker Field))
* etc.

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

!# 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://github.com/vueform/multiselect
** Pros
*** [https://vueform.com/reference/multiselect-element#option-multiple-label|Customizable label]
*** [https://vueform.com/reference/multiselect-element#option-create|User can create new options]
*** [https://vueform.com/reference/multiselect-element#option-max|Can set a limit of options to be selected]
*** [https://vueform.com/reference/multiselect-element#option-group-select|Allow grouped selection]
*** [https://vueform.com/reference/multiselect-element#option-append-to|Can have the dropdown wherever it is needed in the DOM]
*** Ajax request support
** Cons
*** Default label doesn't show details of the selected options
*** No tagging offered for this component

* https://github.com/sagalbot/vue-select
** Pros
*** Lightweight (~20kb Total / ~5kb CSS / ~15kb JS)
*** Ajax request support
** Cons
*** Not so many features (because it's lightweight?)

* 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)

* https://tw-elements.com/docs/standard/forms/select
** Cons
*** Semi-opensource?
*** Contents aren't accessible such as code sample.

* https://semantic-ui.com/modules/dropdown.html#selection
** Cons
*** Not a select component-focused approach (More of a dropdown).
*** Requires the semantic-ui framework availability which is an overload

* https://element-plus.org/en-US/component/select.html
** Pros
*** Tooltip detailing collapsed tags
*** Customizable tags count
*** [https://element-plus.org/en-US/component/select.html#header-of-the-dropdown|Customizable header and footer of the dropdown]
*** Remote search or ajax request support
*** New options can be added by the user
*** Can tags and labels be customized
*** Element Plus is already part of Tiki (Ref. https://gitlab.com/tikiwiki/tiki/-/merge_requests/5108)
** Cons
*** ?

!! We choose

# ((Element Plus)) {sign user="mercijacob" datetime="2024-07-18T15:37:41+00:00"}

!# 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/
{img type="fileId" fileId="2161"}
** 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 [https://github.com/avonni/base-components|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 {sign user="marclaporte" datetime="2024-03-26T04:09:11+00:00"}
***** I see a pitfall in doing this, what if the lib one day becomes unmaintained or suddenly changes the license? {sign user="mercijacob" datetime="2024-03-27T07:09"}
* 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. {sign user="mercijacob" datetime="2024-03-24"}

@jonnybradley wrote:
{QUOTE()}
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 [https://abhimediratta.github.io/vue-multiselect-listbox/|vue.js] one isn't bad also)
{QUOTE}

!# 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:
{img type="fileId" fileId="2160"}

An example with https://github.com/Fabianlindfors/multi.js
{img type="fileId" fileId="2163"}

!# Nested and sorted lists
* For menus
* Maybe ((doc: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

!# 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]

{img type="fileId" fileId="1549"}

Candidates:
* https://d3js.org/d3-force/link
** https://observablehq.com/@d3/force-directed-graph/2
* https://js.cytoscape.org/
** Broken demo: https://ivis-at-bilkent.github.io/cytoscape.js-avsdf/demo.html
* https://www.npmjs.com/package/3d-force-graph
* https://www.chartjs.org/docs/latest/samples/other-charts/radar.html

!# 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
{img type="fileId" fileId="2162"}

!# Drawing links between 2 lists
Designed for matching files headers to database fields during the process importing

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


!# 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
*** [https://www.avonnicomponents.com|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 ((doc: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://element-plus.org/en-US/component/color-picker.html
** Pros
*** Huge community
*** We already use one of Element Plus components, ((doc:Transfer Field Type))
*** Nice presentation of the set of predefined colors
** Cons
*** ?
* https://shoelace.style/components/color-picker
** Pros
*** An active community, not as huge as the one for Element Plus
*** Nice presentation of the set of predefined colors
*** Can switch between color code types {sign user="chibaguy" datetime="2024-07-01T05:13:41+00:00"}
*** Has an eyedropper to select any color in the viewport {sign user="chibaguy" datetime="2024-07-01T05:13:41+00:00"}
** Cons
*** ?

Color pickers are used in at least 4 places:
* CKeditor ((doc:WYSIWYG)) editor
* ((doc:TOAST UI Editor)) Markdown WYSIWYG editor
* ((doc:Theme Customizer))
* Tiki syntax text editor: ((Wiki Page Editor))

{img type="fileId" fileId="2165"}

{QUOTE(replyto="Merci Jacob")}
I see two potential candidates here:  [https://shoelace.style/components/color-picker|Shoelace] and [https://element-plus.org/en-US/component/color-picker.html|Element Plus]. They seem to be more active than the others, but their presentations are much more attractive as well.
{QUOTE}

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

!# Slider
Types of sliders
* basic (pick a value from x to y)
* range (pick a minimum and maximum)

Candidates:
* https://element-plus.org/en-US/component/slider.html
Element Plus is already used in Tiki for many components, so it would be a wiser choice to implement it for this use case as well.{sign user="mercijacob" datetime="2025-04-14"}
* 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/

~tc~ (alias(Dual List Select And Ordered List Value Picker Component)) ~/tc~