ItemDetails

Component to display details for a JSKOS item.

Uses ItemName, ItemList, LicenseInfo, AutoLink. Also uses dragAndDrop and defines a dropzone for items. Dropped items will trigger the select event.

Props

item object, required
JSKOS item (concept or concept scheme)
itemListOptions *object, default {}
options that are passed along to ItemList via v-bind
showTabs boolean, default true
option whether to show ItemDetailsTabs
showAncestors boolean, default true
option whether to show the item's ancestors
showBroader boolean, default true
option whether to show the item's broader concepts
showNarrower boolean, default true
option whether to show the item's narrower concepts
dropzone boolean, default true
option whether the component is a drop zone for concepts
draggable boolean, default true
whether item elements are draggable
- This will also set itemListOptions.draggable if it's not set separately.
flat boolean, default false
whether details are displayed in a flat layout (opposed to tabs; experimental)
fields object, default {}
configures which JSKOS fields are shown
- By default, all fields are shown, except for publisher for concepts.

Slots

before: Content shown above the component (same as beforeName).
beforeName: Content shown before the item's name.
afterName: Content shown after the item's name.
beforeTabs: Content shown right before detail tabs (below ancestors and broader)
afterTabs: Content shown right after detail tabs (above narrower)
after: Content shown below the component.
additionalTabs: Slot to add additional tabs (via jskos-vue-tabs) or absolutely positioned content for all tabs.

Events

select
- Emitted when a concept is selected.
- Parameter is an object with properties item (containing the clicked JSKOS concept) and row (containing a boolean which is true when the click was initiated via the row, not on the item directly).

Layout

--jskos-vue-itemDetails-dropzone-bgCover - background color for overlay which is shown when an item is being dragged over ItemDetails
- default: #eeeeee99

Examples

Default

Settings:

🆇 DT Detailed Item ⭐️

➕

license:

http://example.com/license/

D an Ancestor

D0 another Ancestor

D-alt a broader concept

🚀

DT1 a Child

DT2 another Child

DT3 yet another Child

vue

<script setup>
import { ItemDetails } from "jskos-vue"
import { Tab } from "jskos-vue-tabs"
import * as jskos from "jskos-tools"
import { reactive } from "vue"

const state = reactive({
  itemListOptions: {
    indicatorByUri: {
      "https://example.com/DT2": true,
      "https://example.com/DT3": true,
    },
  },
  dropzone: true,
  draggable: true,
  item: {
    uri: "https://example.com/DT",
    notation: ["DT"],
    prefLabel: {
      en: "Detailed Item",
      de: "Detalliertes Item",
    },
    altLabel: {
      fr: ["Désignation alternative"],
      de: ["Alternative Benennung", "noch eine"],
    },
    editorialNote: {
      en: ["Editorial English"],
      de: ["Editorial Deutsch"],
      fr: ["Editorial Français"],
    },
    identifier: ["uri:detailed", "test"],
    created: "2021-05-27",
    issued: "2021-05-27",
    modified: "2021-05-28",
    definition: {
      en: ["a defintion", "a second definition"],
      de: ["eine Definition"],
    },
    narrower: [
      {
        uri: "https://example.com/DT1",
        notation: ["DT1"],
        prefLabel: {
          en: "a Child",
          de: "ein Unterkonzept",
        },
      },
      {
        uri: "https://example.com/DT2",
        notation: ["DT2"],
        prefLabel: {
          en: "another Child",
          de: "ein weiteres Unterkonzept",
        },
      },
      {
        uri: "https://example.com/DT3",
        notation: ["DT3"],
        prefLabel: {
          en: "yet another Child",
          de: "noch ein weiteres Unterkonzept",
        },
      },
    ],
    ancestors: [
      {
        uri: "https://example.com/D0",
        notation: ["D0"],
        prefLabel: {
          en: "another Ancestor",
          de: "ein weiteres Elternkonzept",
        },
      },
      {
        uri: "https://example.com/D",
        notation: ["D"],
        prefLabel: {
          en: "an Ancestor",
          de: "ein Elternkonzept",
        },
      },
    ],
    broader: [
      {
        uri: "https://example.com/D",
        notation: ["D"],
        prefLabel: {
          en: "an Ancestor",
          de: "ein Elternkonzept",
        },
      },
      {
        uri: "https://example.com/D-alt",
        notation: ["D-alt"],
        prefLabel: {
          en: "a broader concept",
          de: "ein übergeordnetes Konzept",
        },
      },
    ],
  },
})

const alert = (...args) => window.alert(...args)
</script>

<template>
  <p>
    Settings:
    <button
      @click="() => {
        if (state.itemListOptions.indicatorByUri) {
          state.itemListOptions._indicatorByUri = state.itemListOptions.indicatorByUri
          delete state.itemListOptions.indicatorByUri
        } else {
          state.itemListOptions.indicatorByUri = state.itemListOptions._indicatorByUri
          delete state.itemListOptions._indicatorByUri
        }
      }">
      indicators: {{ !!state.itemListOptions.indicatorByUri }}
    </button>
    <button
      @click="state.dropzone = !state.dropzone">
      dropzone: {{ !!state.dropzone }}
    </button>
    <button
      @click="state.draggable = !state.draggable">
      draggable: {{ !!state.draggable }}
    </button>
    <button
      @click="() => {
        if (state.item.scopeNote) {
          delete state.item.scopeNote
        } else {
          state.item.scopeNote = {
            de: ['Scope Deutsch'],
            en: ['Scope English'],
          }
        }
      }">
      {{ state.item.scopeNote ? "Remove" : "Add" }} scopeNote
    </button>
  </p>
  <item-details
    v-bind="state"
    @select="alert(`Clicked on item ${$event.item.uri}`)">
    <template v-slot:additionalTabs>
      <tab title="Test">
        <ul class="jskos-vue-itemDetails-list">
          <li><b>This tab was added via the "additionalTabs" slot.</b></li>
          <li>This is a list with class "jskos-vue-itemDetails-list" to test if it works inside slots.</li>
        </ul>
      </tab>
      <div style="position: absolute; top: 0; right: 0;">
        🚀
      </div>
    </template>
    <template v-slot:beforeName>
      🆇
    </template>
    <template v-slot:afterName>
      ⭐️
      <div style="position: absolute; top: 0; right: 0;">
        ➕
      </div>
    </template>
  </item-details>
</template>

Hide tabs and show them next to component

Note: This works best when using a fixed width for ItemDetailsTabs (otherwise wrapping might change depending on the selected tab).

DT Detailed Item

D an Ancestor

D0 another Ancestor

D-alt a broader concept

DT1 a Child

DT2 another Child

DT3 yet another Child

vue

<script setup>
import { ItemDetails, ItemDetailsTabs } from "jskos-vue"
import { reactive } from "vue"

const state = reactive({
  item: {
    uri: "https://example.com/DT",
    notation: ["DT"],
    prefLabel: {
      en: "Detailed Item",
      de: "Detalliertes Item",
    },
    altLabel: {
      fr: ["Désignation alternative"],
      de: ["Alternative Benennung", "noch eine"],
    },
    editorialNote: {
      en: ["Editorial English"],
      de: ["Editorial Deutsch"],
      fr: ["Editorial Français"],
    },
    identifier: ["uri:detailed", "test"],
    created: "2021-05-27",
    issued: "2021-05-27",
    modified: "2021-05-28",
    definition: {
      en: ["a defintion", "a second definition"],
      de: ["eine Definition"],
    },
    narrower: [
      {
        uri: "https://example.com/DT1",
        notation: ["DT1"],
        prefLabel: {
          en: "a Child",
          de: "ein Unterkonzept",
        },
      },
      {
        uri: "https://example.com/DT2",
        notation: ["DT2"],
        prefLabel: {
          en: "another Child",
          de: "ein weiteres Unterkonzept",
        },
      },
      {
        uri: "https://example.com/DT3",
        notation: ["DT3"],
        prefLabel: {
          en: "yet another Child",
          de: "noch ein weiteres Unterkonzept",
        },
      },
    ],
    ancestors: [
      {
        uri: "https://example.com/D0",
        notation: ["D0"],
        prefLabel: {
          en: "another Ancestor",
          de: "ein weiteres Elternkonzept",
        },
      },
      {
        uri: "https://example.com/D",
        notation: ["D"],
        prefLabel: {
          en: "an Ancestor",
          de: "ein Elternkonzept",
        },
      },
    ],
    broader: [
      {
        uri: "https://example.com/D",
        notation: ["D"],
        prefLabel: {
          en: "an Ancestor",
          de: "ein Elternkonzept",
        },
      },
      {
        uri: "https://example.com/D-alt",
        notation: ["D-alt"],
        prefLabel: {
          en: "a broader concept",
          de: "ein übergeordnetes Konzept",
        },
      },
    ],
  },
})

const alert = (...args) => window.alert(...args)
</script>

<template>
  <div style="display: flex; flex-wrap: wrap;">
    <item-details
      v-bind="state"
      :showTabs="false"
      :fields="{ license: false }"
      style="flex: 1;"
      @select="alert(`Clicked on item ${$event.item.uri}`)" />
    <item-details-tabs
      :item="state.item"
      style="flex: 0 0 280px; padding-left: 10px;" />
  </div>
</template>

ItemDetails ​

Props ​

Slots ​

Events ​

Layout ​

Examples ​

Default ​

Hide tabs and show them next to component ​