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 and models

• modelValue (array) selected items. Use watch option { deep: true } to get change events.

• view (string) - display mode: "tags" | "table" | "list"

  • default: "tags"

• orderable (boolean) - show move up/down buttons in table view

  • default: false

• itemNameOptions (object) - props forwarded to ItemName

  • default: { draggable: false }
  • Field draggable is set to false, unless explicitly enabled

• removable (boolean) — if true, show a remove icon in view="list" (like Cocoda)
  default: false

• removeable (boolean) — legacy spelling, treated like removable
  default: false

Events

• select
  Emitted when the user clicks on an item Payload: { item }

CSS Variables

• --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

View: orderable (table only) removable

English German Italian

<template>
  <ItemSelected
    v-model="selected"
    :view="view"
    :orderable="orderable"
    :removable="removable"
    @select="onSelect"
    @change="onChange" />
</template>

<script setup>
import { ref } from "vue"
import { ItemSelected } from "jskos-vue"

const view = ref("tags")
const orderable = ref(true)
const removable = ref(true)

const selected = ref([
  { uri: "urn:lang:en", prefLabel: { en: "English" }, notation: ["EN"] },
  { uri: "urn:lang:de", prefLabel: { en: "German" }, notation: ["DE"] },
  { uri: "urn:lang:it", prefLabel: { en: "Italian" }, notation: ["IT"] },
])

function onSelect({ item }) {
  window.alert(`Clicked on ${item.uri}`)
}

function onChange(ev) {
  console.log("change", ev)
}
</script>