jskos-vue

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 — shown above list.
  • afterList — shown below list.
  • beforeItem — shown before an item (includes parameter item).
  • afterItem — 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).

CSS Classes and Variables ​

  • .jskos-vue-itemList — the component element
  • .jskos-vue-itemList-item —
  • .jskos-vue-itemList-row-selectable —
  • --jskos-vue-itemList-hover-bgColor — row hover background color (for rowMode = true)
  • --jskos-vue-itemList-indicator-color — default indicator color (for true values)

Examples ​