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:
- 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:
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
- the HTML container is not a
- 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
- Pros
- 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?
- We could replace 10+ Tiki dependencies with this huge lib
- 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:
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:
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
- Pros
- https://github.com/nhn/tui.editor/tree/master/plugins/color-syntax which is part of the TOAST UI Editor Markdown WYSIWYG editor
- 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://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
- Pros
- 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
- Pros
- 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
- Pros
- 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/