ItemList

A list of JSKOS items with their notation and label.

Uses ItemName. Also uses dragAndDrop and rows are draggable by default.

Props

• items array, required
• itemProperty string, default undefined
  defines which property on the objects contains the JSKOS item
  • by default, the objects themselves will be considered the JSKOS items
• rowMode boolean, default true\ - if enabled, the whole row will have a background color on hover (CSS var --jskos-vue-itemList-hover-bgColor) and be clickable
• draggable boolean, default true
  whether the item is draggable
  • This will also set itemNameOptions.draggable if it's not set separately.
• itemNameOptions object
  options passed along to ItemName via v-bind
• indicatorByUri object
  object that maps item URIs to either color strings or boolean values
  • If either a color or true is given for a particular item, an indicator will be shown to the right side of the item in the list.
  • Note that lists use the full width of the page, so it makes sense to define a maximum width to make sure indicators can be associated with the right item.
• highlightByUri object
  object that maps item URIs to either color strings or boolean values
  • If either a color or true is given for a particular item, a highlight background color will be used for that item (CSS var --jskos-vue-conceptTree-selected-bgColor by default).

Slots

• beforeList: Content shown above list.
• afterList: Content shown below list.
• beforeItem: Content shown before an item (includes parameter item).
• afterItem: Content shown after an item (includes parameter item).

Methods

• isUriInView(uri, partial = 60) - checks whether a certain item (via its URI) is currently in view
  • By default, it will return true when the item's element is at least 60% visible. To only return true when it is fully visible, set partial to false.
• scrollToUri(uri, onlyIfNotInView = false) - scrolls the item list to a certain item via its URI
  • When onlyIfNotInView is given, scrolling only occurs if the item is not already visible (using isUriInView's default).

Events

• select
  • Emitted when an item or a row (if rowMode prop is true) is clicked.
  • Parameter is an object with properties item (containing the clicked JSKOS item) and row (containing a boolean which is true when the click was initiated via the row, not on the item directly).

Layout

• --jskos-vue-itemList-hover-bgColor - row hover background color (for rowMode = true)
  • default: #fdbd58aa
• --jskos-vue-itemList-indicator-color - default indicator color (for true values)
  • default: green

Examples

PreviewSource Code