jskos-vue

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) - JSKOS item (concept or concept scheme)
    • required
  • itemListOptions (object) - options that are passed along to ItemList via v-bind
    • default: {}
  • showTabs (boolean) - option whether to show ItemDetailsTabs
    • default: true
  • showAncestors (boolean) - option whether to show the item's ancestors
    • default: true
  • showBroader (boolean) - option whether to show the item's broader concepts
    • default: true
  • showNarrower (boolean) - option whether to show the item's narrower concepts
    • default: true
  • dropzone (boolean) - option whether the component is a drop zone for concepts
    • default: true
  • draggable (boolean) - whether item elements are draggable
    • default: true
    • This will also set itemListOptions.draggable if it's not set separately.
  • flat (boolean) - whether details are displayed in a flat layout (opposed to tabs; experimental)
    • default: false
  • fields (object) - 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).

CSS Variables ​

  • --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 ⭐️
➕
D an Ancestor
D0 another Ancestor
D-alt a broader concept
  • Publisher: VZG
  • Created: May 27, 2021
  • Issued: May 27, 2021
  • Modified: May 28, 2021
  • Definition:
  • a defintion
  • a second definition
  • eine Definition
  • Detailed Item
  • Detalliertes Item
  • Alternative Labels:
  • Alternative Benennung
  • noch eine
  • Désignation alternative
  • Editorial English
  • Editorial Deutsch
  • Editorial Français
  • This tab was added via the "additionalTabs" slot.
  • This is a list with class "jskos-vue-itemDetails-list" to test if it works inside slots.
🚀
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
  • Publisher: VZG
  • Created: May 27, 2021
  • Issued: May 27, 2021
  • Modified: May 28, 2021
  • Definition:
  • a defintion
  • a second definition
  • eine Definition
  • Detailed Item
  • Detalliertes Item
  • Alternative Labels:
  • Alternative Benennung
  • noch eine
  • Désignation alternative
  • Editorial English
  • Editorial Deutsch
  • Editorial Français
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"
      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>