jskos-vue

Appearance

ConceptTree ​

Component to display a concept tree with hierarchy from concept field narrower. The tree is based on ItemList and derives all of its slots and methods. The component supports:

  • selecting a concept (prop v-model)
  • expanding/collapsing nodes (events open / close)
  • programmatic scrolling (method scrollToUri)
  • programmatic navigation in the hierarchy (method navigateToUri)
  • dynamic loading additional concepts (props registry and scheme)

Props ​

  • modelValue object, v-model, default null
    currently selected concept (highlighted)
  • concepts array
    JSKOS concepts to be displayed (usually top concepts)
  • hierarchy boolean, default true
    whether to display concept hierarchy (via narrower)
  • itemListOptions object, default {}
    options passed through to ItemList
  • registry object, default null
    Registry to load concepts from
  • scheme object, default null
    Concept Scheme to load concepts from. Must have field uri or identifier at least.

Concept loading ​

Either concepts or both of registry and scheme are required to show the concept tree. If registry is not set, it is taken from internal field _registry or inScheme[0]._registry of the first concept. A registry object should have the following methods to load concepts from given scheme URI or concept URI:

  • getConcepts({ concepts: [{ uri }] }) — load concept details
  • getTop({ scheme: { uri } }) — load top concepts (only required when prop concepts is not set)
  • getNarrower({ concept: { uri } }) — load narrower concepts (only required when getConcepts does not include full field narrower for every concept)

See cocoda-sdk for a library that provides registry objects for various terminology APIs.

Slots ​

The slots are forwarded to the corresponding slots of ItemList:

  • beforeList — content shown above the list.
  • afterList — content shown below the list.
  • beforeItem — content shown before an item (slot prop: { item } where item is the concept).
  • afterItem — content shown after an item (slot prop: { item } where item is the concept).

Methods ​

The methods of ItemList are exposed to be used on a component reference.

Arguments

  • uriOrConcept string | { uri: string }
    the concept URI to scroll to
  • options boolean, default true
    whether to set modelValue to the target concept
  • onlyIfNotInView boolean, default true
    pass-through to scrollToUri

Returns a Promise with boolean true if navigation succeeded, false otherwise

  • If the concept is already rendered : scroll to it with scrollToUri (and optionally select it)
  • Otherwise: tries to open the path from the top concepts down to the target by loading narrower concepts

close ​

Close an opened concept. Requires concept object with field uri. Note that parents of selected concepts cannot be closed.

collapse ​

Close all opened concepts. Note that parents of selected concepts cannot be closed.

Events ​

  • select emitted when a concept is selected. Note that update:modelValue is also emitted each time selection changes. Parameter is the same payload as ItemList’s select event: an object with properties:
    • item (the clicked concept)
    • row (true when the click was initiated via the row, not on the item directly)
  • open emitted when a concept’s narrower concepts are opened. Parameter is the concept.
  • close emitted when a concept’s narrower concepts are closed. Parameter is the concept.

Layout ​

  • --jskos-vue-conceptTree-selected-bgColor — row background color for selected concept (v-model)
    default: #fdbd58aa

  • --jskos-vue-conceptTree-hover-bgColor — row hover background color
    default: #fdbd58aa

Example ​