ItemSelected

A list of JSKOS items where items can be reordered and removed from.

It supports three views:

• list: list rendering via ItemList
• tags: inline list of compact tags
• table: rows with ordering controls (up/down)

Uses ItemName to display items.

Props

• modelValue array, default []\ selected items. Use watch option { deep: true } to get change events.
• view string, default "tags"\ display mode: "tags" | "table" | "list"
• orderable boolean, default false\ show move up/down buttons in table view
• itemNameOptions object, default { draggable: false }\ props forwarded to ItemName
  • Field draggable is set to false, unless explicitly enabled
• removable boolean, default false\ if true, show a remove icon in view="list" (like Cocoda)
• removeable boolean, default false\ legacy spelling, treated like removable

Events

• select
  Emitted with payload { item } when the user clicks on an item

Layout

• --jskos-vue-itemSelected-tags-bgColor - background color of tags. Set to --jskos-vue-highlight-bgColor by default.
• --jskos-vue-itemSelected-tags-color - text color of tags. Set to inherit by default.

Example

PreviewSource Code

View: orderable (table only) removable

English German Italian