From aae1c26d36e0d91ea52f2da390eba916acd9fbbf Mon Sep 17 00:00:00 2001 From: stefandesu Date: Fri, 28 Jun 2024 11:12:20 +0000 Subject: [PATCH] deploy: cdbd318b8266ac541d378fb5ff38ff31f710bf26 --- 404.html | 2 +- assets/chunks/ItemDetails.BYjcRHT7.js | 1 + assets/components_ItemDetails.md.BaXDtLHd.js | 274 ++++++++++++++++++ ...components_ItemDetails.md.BaXDtLHd.lean.js | 1 + assets/utilities_dragAndDrop.md.B5wMP8IQ.js | 116 ++++++++ .../utilities_dragAndDrop.md.B5wMP8IQ.lean.js | 1 + components/Arrow.html | 2 +- components/AutoLink.html | 2 +- components/ConceptTree.html | 2 +- components/ItemDetails.html | 10 +- components/ItemList.html | 2 +- components/ItemName.html | 2 +- components/ItemSuggest.html | 2 +- components/LicenseInfo.html | 2 +- components/LoadingIndicator.html | 2 +- components/Modal.html | 2 +- hashmap.json | 2 +- index.html | 2 +- utilities/addClickHandlers.html | 2 +- utilities/cdkRegistryToSuggestFunction.html | 2 +- utilities/dateToString.html | 2 +- utilities/debounce.html | 2 +- utilities/dragAndDrop.html | 8 +- 23 files changed, 418 insertions(+), 25 deletions(-) create mode 100644 assets/chunks/ItemDetails.BYjcRHT7.js create mode 100644 assets/components_ItemDetails.md.BaXDtLHd.js create mode 100644 assets/components_ItemDetails.md.BaXDtLHd.lean.js create mode 100644 assets/utilities_dragAndDrop.md.B5wMP8IQ.js create mode 100644 assets/utilities_dragAndDrop.md.B5wMP8IQ.lean.js diff --git a/404.html b/404.html index 9fbda40..83a5729 100644 --- a/404.html +++ b/404.html @@ -14,7 +14,7 @@
- + \ No newline at end of file diff --git a/assets/chunks/ItemDetails.BYjcRHT7.js b/assets/chunks/ItemDetails.BYjcRHT7.js new file mode 100644 index 0000000..81f217d --- /dev/null +++ b/assets/chunks/ItemDetails.BYjcRHT7.js @@ -0,0 +1 @@ +import{j as B,l as $,c as A}from"./jskos-tools.CpjLtWvA.js";import{I as q}from"./ItemName.C-g5_niL.js";import{I as F}from"./ItemList.DyFPsbEk.js";import{b as K,u as P}from"./style.-xXEQWSy.js";import{A as G}from"./AutoLink.DdFLTQbv.js";import{u as T,b as J}from"./utils.CCe5VO4G.js";import"./shared.l0sNRNKZ.js";import{_ as S,h as j,d as N,D,o as t,b,w as v,J as L,j as l,c as n,t as o,e as r,F as k,E as c,I,a as w,r as y,a3 as R,a5 as U,M as C}from"./framework.CXbGQEsj.js";import{L as Z}from"./LicenseInfo.BaQ7ewHf.js";const M={en:{created:"Created",modified:"Modified",issued:"Issued",altLabels:"Alternative Labels",definition:"Definition",info:"Info",identifier:"Identifier",labels:"Labels",editorial:"Editorial",scope:"Scope",languages:"Languages",type:"Type"},de:{created:"Erstellung",modified:"Änderung",issued:"Veröffentlicht",altLabels:"Alternative Bezeichnungen",definition:"Definition",info:"Info",identifier:"Identifier",labels:"Bezeichnungen",editorial:"Editorial",scope:"Scope",languages:"Sprachen",type:"Art"}},O=j(()=>$.getLanguages().find(e=>M[e])||"en"),H=e=>M[O.value][e],Q=N({name:"ItemDetailsTabs",components:{Tabs:K,Tab:P,AutoLink:G},props:{item:{type:Object,required:!0},flat:{type:Boolean,default:!1}},setup(e){const a=(m,f)=>Object.keys(m&&m[f]||{}).map(i=>{const g=m[f][i];return(Array.isArray(g)?g:[g]).map(s=>({language:i,label:s}))}).reduce((i,g)=>i.concat(g),[]).filter(i=>i.language!="-").sort((i,g)=>i.language===$.selectLanguage(m[f])&&g.language!==$.selectLanguage(m[f])?-1:g.language===$.selectLanguage(m[f])&&i.language!==$.selectLanguage(m[f])?1:0),h=j(()=>{if(!e.item)return[];let m=[],f=e.item&&e.item.inScheme&&e.item.inScheme[0]&&e.item.inScheme[0].types||[];for(let i of e.item.type||[])typeof i!="object"&&(i={uri:i}),!(!i||["http://www.w3.org/2004/02/skos/core#Concept","http://www.w3.org/2004/02/skos/core#ConceptScheme"].includes(i.uri))&&(i=f.find(g=>A(g,i))||i,m.push(i));return m});return{utils:T,jskos:B,currentLanguage:O,t:H,iterateLanguageMapContent:a,types:h}}}),W={class:"jskos-vue-itemDetails-list"},X={key:0},Y={key:0,class:"jskos-vue-text-lightGrey"},_={class:"jskos-vue-itemDetails-list"},x={key:0},ee={key:1},te={key:0,class:"jskos-vue-itemDetails-list"},se=["lang"],ne={class:"jskos-vue-itemDetails-list"},ie={key:0},ae=["lang"],oe={key:0,class:"jskos-vue-itemDetails-list"},le=["lang"],re={class:"jskos-vue-itemDetails-list"},ue={key:0},de=["lang"],me={class:"jskos-vue-itemDetails-list"},ge={key:0},fe=["lang"];function pe(e,a,h,m,f,i){const g=D("auto-link");return t(),b(L(e.flat?"div":"tabs"),{borders:"bottom",size:"sm",class:"jskos-vue-itemDetails-tabs"},{default:v(()=>[(t(),b(L(e.flat?"div":"tab"),{title:e.t("info")},{default:v(()=>[l("ul",W,[e.flat?(t(),n("li",X,[l("b",null,o(e.t("identifier"))+":",1)])):r("",!0),(t(!0),n(k,null,c([e.item.uri].concat(e.item.identifier).filter(s=>s!=null),(s,u)=>(t(),n("li",{key:u},[I(g,{href:s},null,8,["href"]),s===e.item.uri?(t(),n("span",Y," (URI)")):r("",!0)]))),128))]),l("ul",_,[e.types.length?(t(),n("li",x,[l("b",null,o(e.t("type"))+":",1),w(" "+o(e.types.map(s=>e.jskos.prefLabel(s)).join(", ")),1)])):r("",!0),(t(),n(k,null,c(["created","issued","modified"],s=>(t(),n(k,null,[e.item[s]?(t(),n("li",{key:s},[l("b",null,o(e.t(s))+":",1),w(" "+o(e.utils.dateToString(e.item[s])),1)])):r("",!0)],64))),64)),e.item.languages?(t(),n("li",ee,[l("b",null,o(e.t("languages"))+":",1),w(" "+o(e.item.languages.join(", ")),1)])):r("",!0)]),e.jskos.languageMapContent(e.item,"definition")?(t(),n("ul",te,[l("li",null,[l("b",null,o(e.t("definition"))+":",1)]),(t(!0),n(k,null,c(e.iterateLanguageMapContent(e.item,"definition"),({language:s,label:u},p)=>(t(),n("li",{key:`${s}-${p}`,lang:`${s}`},o(u),9,se))),128))])):r("",!0)]),_:1},8,["title"])),(t(),b(L(e.flat?"div":"tab"),{title:e.t("labels")},{default:v(()=>[l("ul",ne,[e.flat?(t(),n("li",ie,[l("b",null,o(e.t("labels"))+":",1)])):r("",!0),(t(!0),n(k,null,c(e.iterateLanguageMapContent(e.item,"prefLabel"),({language:s,label:u},p)=>(t(),n("li",{key:`${s}-${p}`,lang:`${s}`},o(u),9,ae))),128))]),e.jskos.languageMapContent(e.item,"altLabel")?(t(),n("ul",oe,[l("li",null,[l("b",null,o(e.t("altLabels"))+":",1)]),(t(!0),n(k,null,c(e.iterateLanguageMapContent(e.item,"altLabel"),({language:s,label:u},p)=>(t(),n("li",{key:`${s}-${p}`,lang:`${s}`},o(u),9,le))),128))])):r("",!0)]),_:1},8,["title"])),e.jskos.languageMapContent(e.item,"scopeNote")?(t(),b(L(e.flat?"div":"tab"),{key:0,title:e.t("scope")},{default:v(()=>[l("ul",re,[e.flat?(t(),n("li",ue,[l("b",null,o(e.t("scope"))+":",1)])):r("",!0),(t(!0),n(k,null,c(e.iterateLanguageMapContent(e.item,"scopeNote"),({language:s,label:u},p)=>(t(),n("li",{key:`${s}-${p}`,lang:`${s}`},o(u),9,de))),128))])]),_:1},8,["title"])):r("",!0),e.jskos.languageMapContent(e.item,"editorialNote")?(t(),b(L(e.flat?"div":"tab"),{key:1,title:e.t("editorial")},{default:v(()=>[l("ul",me,[e.flat?(t(),n("li",ge,[l("b",null,o(e.t("editorial"))+":",1)])):r("",!0),(t(!0),n(k,null,c(e.iterateLanguageMapContent(e.item,"editorialNote"),({language:s,label:u},p)=>(t(),n("li",{key:`${s}-${p}`,lang:`${s}`},o(u),9,fe))),128))])]),_:1},8,["title"])):r("",!0),y(e.$slots,"additionalTabs")]),_:3})}const be=S(Q,[["render",pe]]),{draggedItem:z,addDropzone:ke}=J,E={en:{showAllAncestors:"show all ancestors",showLessAncestors:"show less ancesters",license:"License",dropzone:"Drop an item here to select it."},de:{showAllAncestors:"zeige alle übergeordneten Konzepte",showLessAncestors:"zeige weniger übergeordnete Konzepte",license:"Lizenz",dropzone:"Ziehe ein Item hierrein, um es auszuwählen."}},V=j(()=>$.getLanguages().find(e=>E[e])||"en"),ye=e=>E[V.value][e],ce=N({name:"ItemDetails",components:{ItemName:q,ItemList:F,LicenseInfo:Z,ItemDetailsTabs:be},props:{item:{type:Object,required:!0},itemListOptions:{type:Object,default:()=>({})},showTabs:{type:Boolean,default:!0},showAncestors:{type:Boolean,default:!0},showBroader:{type:Boolean,default:!0},showNarrower:{type:Boolean,default:!0},dropzone:{type:Boolean,default:!0},draggable:{type:Boolean,default:!0},flat:{type:Boolean,default:!1}},emits:["select"],setup(e,{emit:a}){const h=j(()=>!A(e.item,z.value)),m=ke(null,i=>{e.dropzone&&h.value&&a("select",{item:i})}),f=j(()=>Object.assign({draggable:e.draggable},e.itemListOptions));return{utils:T,jskos:B,currentLanguage:V,t:ye,draggedItem:z,...m,isDraggedConceptDifferent:h,itemListOptions_:f}}}),he={class:"jskos-vue-itemDetails-name"},ve={key:0};function $e(e,a,h,m,f,i){const g=D("item-name"),s=D("license-info"),u=D("item-list"),p=D("item-details-tabs");return t(),n("div",{class:"jskos-vue-itemDetails",onDragover:a[3]||(a[3]=(...d)=>e.dragover&&e.dragover(...d)),onDragenter:a[4]||(a[4]=(...d)=>e.dragenter&&e.dragenter(...d)),onDragleave:a[5]||(a[5]=(...d)=>e.dragleave&&e.dragleave(...d)),onDrop:a[6]||(a[6]=(...d)=>e.drop&&e.drop(...d))},[R(l("div",{class:"jskos-vue-itemDetails-dropzone jskos-vue-text-small"},o(e.t("dropzone")),513),[[U,e.dropzone&&e.isDraggingOver&&e.isDraggedConceptDifferent]]),l("div",he,[y(e.$slots,"before"),y(e.$slots,"beforeName"),I(g,{item:e.item,draggable:e.draggable},null,8,["item","draggable"]),y(e.$slots,"afterName")]),e.item.license&&e.item.license.length?(t(),n("div",ve,[w(o(e.t("license"))+": ",1),I(s,{item:e.item},null,8,["item"])])):r("",!0),e.showAncestors?(t(),b(u,C({key:1},e.itemListOptions_,{items:(e.item.ancestors||[]).filter(Boolean).reverse(),indent:!0,class:"jskos-vue-itemDetails-ancestors",onSelect:a[0]||(a[0]=d=>e.$emit("select",{item:d.item}))}),null,16,["items"])):r("",!0),e.showBroader?(t(),b(u,C({key:2},e.itemListOptions_,{items:(e.item.broader||[]).filter(d=>!e.jskos.isContainedIn(d,e.item.ancestors||[])),class:"jskos-vue-itemDetails-broader",onSelect:a[1]||(a[1]=d=>e.$emit("select",{item:d.item}))}),null,16,["items"])):r("",!0),y(e.$slots,"beforeTabs"),e.showTabs?(t(),b(p,{key:3,item:e.item,flat:e.flat},{additionalTabs:v(()=>[y(e.$slots,"additionalTabs")]),_:3},8,["item","flat"])):r("",!0),y(e.$slots,"afterTabs"),e.showNarrower?(t(),b(u,C({key:4},e.itemListOptions_,{items:e.item.narrower||[],class:"jskos-vue-itemDetails-narrower",onSelect:a[2]||(a[2]=d=>e.$emit("select",{item:d.item}))}),null,16,["items"])):r("",!0),y(e.$slots,"after")],32)}const Te=S(ce,[["render",$e]]);export{Te as I,be as a}; diff --git a/assets/components_ItemDetails.md.BaXDtLHd.js b/assets/components_ItemDetails.md.BaXDtLHd.js new file mode 100644 index 0000000..2790e3d --- /dev/null +++ b/assets/components_ItemDetails.md.BaXDtLHd.js @@ -0,0 +1,274 @@ +import{I as d,a as g}from"./chunks/ItemDetails.BYjcRHT7.js";import{u as y}from"./chunks/style.-xXEQWSy.js";import"./chunks/jskos-tools.CpjLtWvA.js";import{a2 as F,c,j as a,a as t,t as l,I as h,w as p,M as o,k,a1 as e,o as u}from"./chunks/framework.CXbGQEsj.js";import"./chunks/ItemName.C-g5_niL.js";import"./chunks/utils.CCe5VO4G.js";import"./chunks/shared.l0sNRNKZ.js";import"./chunks/ItemList.DyFPsbEk.js";import"./chunks/LoadingIndicator.CWAPJBMj.js";import"./chunks/vue-scrollto.FOkUA__D.js";import"./chunks/AutoLink.DdFLTQbv.js";import"./chunks/LicenseInfo.BaQ7ewHf.js";const C=e('

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 ​

Slots ​

Events ​

CSS Variables ​

Examples ​

Default ​

',13),m=a("div",{style:{position:"absolute",top:"0",right:"0"}}," 🚀 ",-1),q=a("div",{style:{position:"absolute",top:"0",right:"0"}}," ➕ ",-1),B=e(`
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">
+        This tab was added via the "additionalTabs" slot.
+      </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).

`,3),D={style:{display:"flex","flex-wrap":"wrap"}},b=e(`
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>
`,1),P=JSON.parse('{"title":"ItemDetails","description":"","frontmatter":{},"headers":[],"relativePath":"components/ItemDetails.md","filePath":"components/ItemDetails.md"}'),f={name:"components/ItemDetails.md"},j=Object.assign(f,{setup(A){const s=F({itemListOptions:{indicatorByUri:{"https://example.com/DT2":!0,"https://example.com/DT3":!0}},dropzone:!0,draggable:!0,item:{uri:"https://example.com/DT",notation:["DT"],license:[{uri:"http://creativecommons.org/publicdomain/zero/1.0/"},{uri:"http://example.com/license/"}],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"}}],publisher:[{url:"https://www.gbv.de",prefLabel:{en:"VZG"}}]}}),E=(...r)=>window.alert(...r);return(r,i)=>(u(),c("div",null,[C,a("p",null,[t(" Settings: "),a("button",{onClick:i[0]||(i[0]=()=>{s.itemListOptions.indicatorByUri?(s.itemListOptions._indicatorByUri=s.itemListOptions.indicatorByUri,delete s.itemListOptions.indicatorByUri):(s.itemListOptions.indicatorByUri=s.itemListOptions._indicatorByUri,delete s.itemListOptions._indicatorByUri)})}," indicators: "+l(!!s.itemListOptions.indicatorByUri),1),a("button",{onClick:i[1]||(i[1]=n=>s.dropzone=!s.dropzone)}," dropzone: "+l(!!s.dropzone),1),a("button",{onClick:i[2]||(i[2]=n=>s.draggable=!s.draggable)}," draggable: "+l(!!s.draggable),1),a("button",{onClick:i[3]||(i[3]=()=>{s.item.scopeNote?delete s.item.scopeNote:s.item.scopeNote={de:["Scope Deutsch"],en:["Scope English"]}})},l(s.item.scopeNote?"Remove":"Add")+" scopeNote ",1)]),h(k(d),o(s,{onSelect:i[4]||(i[4]=n=>E(`Clicked on item ${n.item.uri}`))}),{additionalTabs:p(()=>[h(k(y),{title:"Test"},{default:p(()=>[t(' This tab was added via the "additionalTabs" slot. ')]),_:1}),m]),beforeName:p(()=>[t(" 🆇 ")]),afterName:p(()=>[t(" ⭐️ "),q]),_:1},16),B,a("div",D,[h(k(d),o(s,{showTabs:!1,style:{flex:"1"},onSelect:i[5]||(i[5]=n=>E(`Clicked on item ${n.item.uri}`))}),null,16),h(k(g),{item:s.item,style:{flex:"0 0 280px","padding-left":"10px"}},null,8,["item"])]),b]))}});export{P as __pageData,j as default}; diff --git a/assets/components_ItemDetails.md.BaXDtLHd.lean.js b/assets/components_ItemDetails.md.BaXDtLHd.lean.js new file mode 100644 index 0000000..81b26c5 --- /dev/null +++ b/assets/components_ItemDetails.md.BaXDtLHd.lean.js @@ -0,0 +1 @@ +import{I as d,a as g}from"./chunks/ItemDetails.BYjcRHT7.js";import{u as y}from"./chunks/style.-xXEQWSy.js";import"./chunks/jskos-tools.CpjLtWvA.js";import{a2 as F,c,j as a,a as t,t as l,I as h,w as p,M as o,k,a1 as e,o as u}from"./chunks/framework.CXbGQEsj.js";import"./chunks/ItemName.C-g5_niL.js";import"./chunks/utils.CCe5VO4G.js";import"./chunks/shared.l0sNRNKZ.js";import"./chunks/ItemList.DyFPsbEk.js";import"./chunks/LoadingIndicator.CWAPJBMj.js";import"./chunks/vue-scrollto.FOkUA__D.js";import"./chunks/AutoLink.DdFLTQbv.js";import"./chunks/LicenseInfo.BaQ7ewHf.js";const C=e("",13),m=a("div",{style:{position:"absolute",top:"0",right:"0"}}," 🚀 ",-1),q=a("div",{style:{position:"absolute",top:"0",right:"0"}}," ➕ ",-1),B=e("",3),D={style:{display:"flex","flex-wrap":"wrap"}},b=e("",1),P=JSON.parse('{"title":"ItemDetails","description":"","frontmatter":{},"headers":[],"relativePath":"components/ItemDetails.md","filePath":"components/ItemDetails.md"}'),f={name:"components/ItemDetails.md"},j=Object.assign(f,{setup(A){const s=F({itemListOptions:{indicatorByUri:{"https://example.com/DT2":!0,"https://example.com/DT3":!0}},dropzone:!0,draggable:!0,item:{uri:"https://example.com/DT",notation:["DT"],license:[{uri:"http://creativecommons.org/publicdomain/zero/1.0/"},{uri:"http://example.com/license/"}],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"}}],publisher:[{url:"https://www.gbv.de",prefLabel:{en:"VZG"}}]}}),E=(...r)=>window.alert(...r);return(r,i)=>(u(),c("div",null,[C,a("p",null,[t(" Settings: "),a("button",{onClick:i[0]||(i[0]=()=>{s.itemListOptions.indicatorByUri?(s.itemListOptions._indicatorByUri=s.itemListOptions.indicatorByUri,delete s.itemListOptions.indicatorByUri):(s.itemListOptions.indicatorByUri=s.itemListOptions._indicatorByUri,delete s.itemListOptions._indicatorByUri)})}," indicators: "+l(!!s.itemListOptions.indicatorByUri),1),a("button",{onClick:i[1]||(i[1]=n=>s.dropzone=!s.dropzone)}," dropzone: "+l(!!s.dropzone),1),a("button",{onClick:i[2]||(i[2]=n=>s.draggable=!s.draggable)}," draggable: "+l(!!s.draggable),1),a("button",{onClick:i[3]||(i[3]=()=>{s.item.scopeNote?delete s.item.scopeNote:s.item.scopeNote={de:["Scope Deutsch"],en:["Scope English"]}})},l(s.item.scopeNote?"Remove":"Add")+" scopeNote ",1)]),h(k(d),o(s,{onSelect:i[4]||(i[4]=n=>E(`Clicked on item ${n.item.uri}`))}),{additionalTabs:p(()=>[h(k(y),{title:"Test"},{default:p(()=>[t(' This tab was added via the "additionalTabs" slot. ')]),_:1}),m]),beforeName:p(()=>[t(" 🆇 ")]),afterName:p(()=>[t(" ⭐️ "),q]),_:1},16),B,a("div",D,[h(k(d),o(s,{showTabs:!1,style:{flex:"1"},onSelect:i[5]||(i[5]=n=>E(`Clicked on item ${n.item.uri}`))}),null,16),h(k(g),{item:s.item,style:{flex:"0 0 280px","padding-left":"10px"}},null,8,["item"])]),b]))}});export{P as __pageData,j as default}; diff --git a/assets/utilities_dragAndDrop.md.B5wMP8IQ.js b/assets/utilities_dragAndDrop.md.B5wMP8IQ.js new file mode 100644 index 0000000..1304f46 --- /dev/null +++ b/assets/utilities_dragAndDrop.md.B5wMP8IQ.js @@ -0,0 +1,116 @@ +import{I as D}from"./chunks/ItemName.C-g5_niL.js";import{I as b}from"./chunks/ItemList.DyFPsbEk.js";import{I as A}from"./chunks/ItemDetails.BYjcRHT7.js";import{y as v,s as q,c as k,j as h,t as p,k as s,F as f,E as I,n as z,a as x,I as E,a1 as r,o as d}from"./chunks/framework.CXbGQEsj.js";import{b as _}from"./chunks/utils.CCe5VO4G.js";import"./chunks/jskos-tools.CpjLtWvA.js";import"./chunks/shared.l0sNRNKZ.js";import"./chunks/LoadingIndicator.CWAPJBMj.js";import"./chunks/vue-scrollto.FOkUA__D.js";import"./chunks/style.-xXEQWSy.js";import"./chunks/AutoLink.DdFLTQbv.js";import"./chunks/LicenseInfo.BaQ7ewHf.js";const w=r('

dragAndDrop ​

Helper to add drag and drop functionality to JSKOS items.

Usage ​

js
import { utils } from "jskos-vue"\nconst { draggedItem, dragstart, dragend, addDropzone } = utils.dragAndDrop

draggedItem ​

A reactive reference to the currently dragged item. (null if no item is being dragged.)

dragstart(item), dragend() ​

Can be used to define a draggable item. (See below on how to use this.)

addDropzone(element, callback) ​

Defines a new dropzone. (See below on how to use this.)

Defining a Draggable Item ​

Any element can be defined as a draggable item. ItemName and rows in ItemList are draggable by default. To define an element as draggable, you need to set its draggable property to true and define event handlers for dragstart and dragend which are exported by utils.dragAndDrop.

vue
<div\n  draggable="true"\n  @dragstart="dragstart({ uri: 'some:item' })"\n  @dragend="dragend">\n  Some item\n</div>

Defining a Dropzone ​

Any element can be defined as a dropzone and can therefore receive item drops. ItemDetails is a dropzone by default. To define a dropzone, you need to use the addDropzone function that is exported by utils.dragAndDrop. It needs to be called separately for every dropzone. It receives two parameters and returns an object with several properties.

addDropzone Parameters ​

addDropzone Returned Object Properties ​

See the following examples for how this is used in practice.

Examples ​

Basic Example ​

',22),S=["onDragstart"],T=r(`
This zone does not change, but you can drop an item here.
vue
<script setup>
+import { onMounted } from "vue"
+import { utils } from "jskos-vue"
+const { draggedItem, dragstart, dragend, addDropzone } = utils.dragAndDrop
+const {
+  dragover,
+  dragenter,
+  dragleave,
+  drop,
+  isDraggingOver,
+} = addDropzone(null, (item) => {
+  alert(\`Dropped item with URI \${item.uri}\`)
+})
+// We need to use onMounted so that dropzone is mounted in DOM
+onMounted(() => {
+  addDropzone(document.getElementById("dropzone"), (item) => {
+    alert(\`Dropped item with URI \${item.uri}\`)
+  })
+})
+const items = [
+  { notation: ["1"] },
+  { notation: ["2"] },
+  { notation: ["3"] },
+].map(i => ({ ...i, uri: \`item:\${i.notation[0]}\`, prefLabel: { en: \`Item \${i.notation[0]}\` } }))
+</script>
+
+<template>
+  Currently dragging: {{ draggedItem && draggedItem.uri }}
+
+  <!-- Defining draggable items -->
+  <div
+    v-for="item in items"
+    :key="item.uri"
+    draggable="true"
+    @dragstart="dragstart(item)"
+    @dragend="dragend">
+    {{ item.uri }}
+  </div>
+
+  <!-- Dropzone with manually set events and conditional CSS classes -->
+  <div
+    :class="{
+      drag: draggedItem,
+      noDrag: !draggedItem,
+      draggingOver: isDraggingOver,
+    }"
+    @dragover="dragover"
+    @dragenter="dragenter"
+    @dragleave="dragleave"
+    @drop="drop">
+    {{ draggedItem ? "Try to drop the item here" : "Start dragging an item" }}
+  </div>
+
+  <!-- Dropzone that we can get by ID; no conditional CSS classes -->
+  <div
+    id="dropzone"
+    class="noDrag"
+    style="height: 100px;">
+    This zone does not change, but you can drop an item here.
+  </div>
+</template>
+
+<style>
+.drag, .noDrag {
+  height: 50px;
+  width: 250px;
+  margin: 20px;
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  border: 1px solid black;
+}
+.drag {
+  border-style: dashed;
+}
+.draggingOver {
+  background-color: red;
+}
+</style>

Example with ItemName/ItemList/ItemDetails ​

You can drop an item here.
`,4),P=h("p",null,"ItemList:",-1),O=h("p",null,"ItemDetails (is a dropzone by default):",-1),j=r(`
vue
<script setup>
+import { onMounted } from "vue"
+import { utils, ItemName, ItemList, ItemDetails } from "jskos-vue"
+const { draggedItem, dragstart, dragend, addDropzone } = utils.dragAndDrop
+// We need to use onMounted so that dropzone2 is mounted in DOM
+onMounted(() => {
+  addDropzone(document.getElementById("dropzone2"), (item) => {
+    alert(\`Dropped item with URI \${item.uri}\`)
+  })
+})
+const items = [
+  { notation: ["1"] },
+  { notation: ["2"] },
+  { notation: ["3"] },
+].map(i => ({ ...i, uri: \`item:\${i.notation[0]}\`, prefLabel: { en: \`Item \${i.notation[0]}\` } }))
+// Selected item for ItemDetails
+const selected = ref(items[2])
+</script>
+
+<template>
+  <div
+    id="dropzone2"
+    style="height: 100px; width: 250px; display: flex; justify-content: center; align-items: center; border: 1px solid black;">
+    You can drop an item here.
+  </div>
+  <p>
+  Single item: <item-name :item="items[0]" />
+  </p>
+  ItemList:
+  <item-list :items="items" />
+  ItemDetails (is a dropzone by default):
+
+  <item-details
+    :item="selected"
+    @select="selected = $event.item" />
+</template>
`,1),X=JSON.parse('{"title":"dragAndDrop","description":"","frontmatter":{},"headers":[],"relativePath":"utilities/dragAndDrop.md","filePath":"utilities/dragAndDrop.md"}'),N={name:"utilities/dragAndDrop.md"},Z=Object.assign(N,{setup($){const{draggedItem:t,dragstart:m,dragend:g,addDropzone:e}=_,{dragover:o,dragenter:y,dragleave:F,drop:c,isDraggingOver:B}=e(null,n=>{alert(`Dropped item with URI ${n.uri}`)});v(()=>{e(document.getElementById("dropzone"),n=>{alert(`Dropped item with URI ${n.uri}`)}),e(document.getElementById("dropzone2"),n=>{alert(`Dropped item with URI ${n.uri}`)})});const l=[{notation:["1"]},{notation:["2"]},{notation:["3"]}].map(n=>({...n,uri:`item:${n.notation[0]}`,prefLabel:{en:`Item ${n.notation[0]}`}})),C=q(l[2]);return(n,a)=>(d(),k("div",null,[w,h("p",null,"Currently dragging: "+p(s(t)&&s(t).uri),1),(d(!0),k(f,null,I(s(l),i=>(d(),k("div",{key:i.uri,draggable:"true",onDragstart:u=>s(m)(i),onDragend:a[0]||(a[0]=(...u)=>s(g)&&s(g)(...u))},p(i.uri),41,S))),128)),h("div",{class:z({drag:s(t),noDrag:!s(t),draggingOver:s(B)}),onDragover:a[1]||(a[1]=(...i)=>s(o)&&s(o)(...i)),onDragenter:a[2]||(a[2]=(...i)=>s(y)&&s(y)(...i)),onDragleave:a[3]||(a[3]=(...i)=>s(F)&&s(F)(...i)),onDrop:a[4]||(a[4]=(...i)=>s(c)&&s(c)(...i))},p(s(t)?"Try to drop the item here":"Start dragging an item"),35),T,h("p",null,[x(" Single item: "),E(D,{item:s(l)[0]},null,8,["item"])]),P,E(b,{items:s(l)},null,8,["items"]),O,E(A,{item:C.value,onSelect:a[5]||(a[5]=i=>C.value=i.item)},null,8,["item"]),j]))}});export{X as __pageData,Z as default}; diff --git a/assets/utilities_dragAndDrop.md.B5wMP8IQ.lean.js b/assets/utilities_dragAndDrop.md.B5wMP8IQ.lean.js new file mode 100644 index 0000000..5388602 --- /dev/null +++ b/assets/utilities_dragAndDrop.md.B5wMP8IQ.lean.js @@ -0,0 +1 @@ +import{I as D}from"./chunks/ItemName.C-g5_niL.js";import{I as b}from"./chunks/ItemList.DyFPsbEk.js";import{I as A}from"./chunks/ItemDetails.BYjcRHT7.js";import{y as v,s as q,c as k,j as h,t as p,k as s,F as f,E as I,n as z,a as x,I as E,a1 as r,o as d}from"./chunks/framework.CXbGQEsj.js";import{b as _}from"./chunks/utils.CCe5VO4G.js";import"./chunks/jskos-tools.CpjLtWvA.js";import"./chunks/shared.l0sNRNKZ.js";import"./chunks/LoadingIndicator.CWAPJBMj.js";import"./chunks/vue-scrollto.FOkUA__D.js";import"./chunks/style.-xXEQWSy.js";import"./chunks/AutoLink.DdFLTQbv.js";import"./chunks/LicenseInfo.BaQ7ewHf.js";const w=r("",22),S=["onDragstart"],T=r("",4),P=h("p",null,"ItemList:",-1),O=h("p",null,"ItemDetails (is a dropzone by default):",-1),j=r("",1),X=JSON.parse('{"title":"dragAndDrop","description":"","frontmatter":{},"headers":[],"relativePath":"utilities/dragAndDrop.md","filePath":"utilities/dragAndDrop.md"}'),N={name:"utilities/dragAndDrop.md"},Z=Object.assign(N,{setup($){const{draggedItem:t,dragstart:m,dragend:g,addDropzone:e}=_,{dragover:o,dragenter:y,dragleave:F,drop:c,isDraggingOver:B}=e(null,n=>{alert(`Dropped item with URI ${n.uri}`)});v(()=>{e(document.getElementById("dropzone"),n=>{alert(`Dropped item with URI ${n.uri}`)}),e(document.getElementById("dropzone2"),n=>{alert(`Dropped item with URI ${n.uri}`)})});const l=[{notation:["1"]},{notation:["2"]},{notation:["3"]}].map(n=>({...n,uri:`item:${n.notation[0]}`,prefLabel:{en:`Item ${n.notation[0]}`}})),C=q(l[2]);return(n,a)=>(d(),k("div",null,[w,h("p",null,"Currently dragging: "+p(s(t)&&s(t).uri),1),(d(!0),k(f,null,I(s(l),i=>(d(),k("div",{key:i.uri,draggable:"true",onDragstart:u=>s(m)(i),onDragend:a[0]||(a[0]=(...u)=>s(g)&&s(g)(...u))},p(i.uri),41,S))),128)),h("div",{class:z({drag:s(t),noDrag:!s(t),draggingOver:s(B)}),onDragover:a[1]||(a[1]=(...i)=>s(o)&&s(o)(...i)),onDragenter:a[2]||(a[2]=(...i)=>s(y)&&s(y)(...i)),onDragleave:a[3]||(a[3]=(...i)=>s(F)&&s(F)(...i)),onDrop:a[4]||(a[4]=(...i)=>s(c)&&s(c)(...i))},p(s(t)?"Try to drop the item here":"Start dragging an item"),35),T,h("p",null,[x(" Single item: "),E(D,{item:s(l)[0]},null,8,["item"])]),P,E(b,{items:s(l)},null,8,["items"]),O,E(A,{item:C.value,onSelect:a[5]||(a[5]=i=>C.value=i.item)},null,8,["item"]),j]))}});export{X as __pageData,Z as default}; diff --git a/components/Arrow.html b/components/Arrow.html index ec60c50..af8bd6f 100644 --- a/components/Arrow.html +++ b/components/Arrow.html @@ -34,7 +34,7 @@ <script setup> import { Arrow } from "jskos-vue" </script> - + \ No newline at end of file diff --git a/components/AutoLink.html b/components/AutoLink.html index 3646e8b..e19e158 100644 --- a/components/AutoLink.html +++ b/components/AutoLink.html @@ -29,7 +29,7 @@ <script setup> import { AutoLink } from "jskos-vue" </script> - + \ No newline at end of file diff --git a/components/ConceptTree.html b/components/ConceptTree.html index c92e946..1b34f37 100644 --- a/components/ConceptTree.html +++ b/components/ConceptTree.html @@ -103,7 +103,7 @@ opacity: 50%; } </style> - + \ No newline at end of file diff --git a/components/ItemDetails.html b/components/ItemDetails.html index 6dad568..6957bfa 100644 --- a/components/ItemDetails.html +++ b/components/ItemDetails.html @@ -12,7 +12,7 @@ - + @@ -23,11 +23,11 @@ - + -
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.

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
  • 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.
🚀
DT1 a Child
DT2 another Child
DT3 yet another Child
vue
<script setup>
+    
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.
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
  • 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. 
 🚀 
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"
@@ -192,7 +192,7 @@
       </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
  • 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>
+</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
  • 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"
 
@@ -301,7 +301,7 @@
       style="flex: 0 0 280px; padding-left: 10px;" />
   </div>
 </template>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/components/ItemList.html b/components/ItemList.html
index 32f1adc..c90b31f 100644
--- a/components/ItemList.html
+++ b/components/ItemList.html
@@ -72,7 +72,7 @@
   alert(`Item with URI ${item.uri} selected (row: ${row}).`)
 }
 </script>
- + \ No newline at end of file diff --git a/components/ItemName.html b/components/ItemName.html index df1fbb4..892b969 100644 --- a/components/ItemName.html +++ b/components/ItemName.html @@ -101,7 +101,7 @@ concept3, ] </script> - + \ No newline at end of file diff --git a/components/ItemSuggest.html b/components/ItemSuggest.html index 54c4212..3f85d3d 100644 --- a/components/ItemSuggest.html +++ b/components/ItemSuggest.html @@ -106,7 +106,7 @@ }) }) </script> - + \ No newline at end of file diff --git a/components/LicenseInfo.html b/components/LicenseInfo.html index da8579c..33cf3f8 100644 --- a/components/LicenseInfo.html +++ b/components/LicenseInfo.html @@ -45,7 +45,7 @@ <template> <license-info :item="item" /> </template> - + \ No newline at end of file diff --git a/components/LoadingIndicator.html b/components/LoadingIndicator.html index a3ce188..995e62a 100644 --- a/components/LoadingIndicator.html +++ b/components/LoadingIndicator.html @@ -32,7 +32,7 @@ <script setup> import { LoadingIndicator } from "jskos-vue" </script> - + \ No newline at end of file diff --git a/components/Modal.html b/components/Modal.html index 9e06e1d..cf641af 100644 --- a/components/Modal.html +++ b/components/Modal.html @@ -77,7 +77,7 @@ const tabsModalShown = ref(false) </script> - + \ No newline at end of file diff --git a/hashmap.json b/hashmap.json index a8a50ba..2b52694 100644 --- a/hashmap.json +++ b/hashmap.json @@ -1 +1 @@ -{"components_itemlist.md":"l6iQv5mH","utilities_debounce.md":"BtK3vvI5","components_modal.md":"CO4v07qx","components_licenseinfo.md":"Be5x5rf2","components_itemname.md":"Daa3sc9Q","components_concepttree.md":"B_A-tkiN","components_arrow.md":"hIQx528x","components_itemdetails.md":"r8uR-tHz","utilities_addclickhandlers.md":"BjL4sqpS","utilities_cdkregistrytosuggestfunction.md":"DT8vPuU9","index.md":"KBlh4TBW","utilities_datetostring.md":"BZpMOV-b","components_itemsuggest.md":"DxvNXoN-","components_loadingindicator.md":"B5ra5SL_","utilities_draganddrop.md":"Ct2ZRjo8","components_autolink.md":"rb3ixW3_"} +{"components_autolink.md":"rb3ixW3_","components_arrow.md":"hIQx528x","components_itemlist.md":"l6iQv5mH","components_itemsuggest.md":"DxvNXoN-","utilities_addclickhandlers.md":"BjL4sqpS","components_concepttree.md":"B_A-tkiN","components_licenseinfo.md":"Be5x5rf2","components_itemname.md":"Daa3sc9Q","components_itemdetails.md":"BaXDtLHd","components_loadingindicator.md":"B5ra5SL_","index.md":"KBlh4TBW","components_modal.md":"CO4v07qx","utilities_datetostring.md":"BZpMOV-b","utilities_debounce.md":"BtK3vvI5","utilities_cdkregistrytosuggestfunction.md":"DT8vPuU9","utilities_draganddrop.md":"B5wMP8IQ"} diff --git a/index.html b/index.html index 4fe1ba9..bca335a 100644 --- a/index.html +++ b/index.html @@ -100,7 +100,7 @@ }
  1. Via style property
html
<arrow
   direction="right"
   style="--jskos-vue-arrow-color: blue;" />

There are also some global CSS variables that are used by multiple components:

Note that this list is likely going to grow and that defaults can change any time during 0.x.x releases.

- + \ No newline at end of file diff --git a/utilities/addClickHandlers.html b/utilities/addClickHandlers.html index 37d1e18..ba46212 100644 --- a/utilities/addClickHandlers.html +++ b/utilities/addClickHandlers.html @@ -60,7 +60,7 @@ This can contain any kind of interactive content. A click in here will not hide it. But a click anywhere else will call the click handler (which hides this popover). </div> </template> - + \ No newline at end of file diff --git a/utilities/cdkRegistryToSuggestFunction.html b/utilities/cdkRegistryToSuggestFunction.html index 01a5fd1..7da5761 100644 --- a/utilities/cdkRegistryToSuggestFunction.html +++ b/utilities/cdkRegistryToSuggestFunction.html @@ -18,7 +18,7 @@
jskos-vue

cdkRegistryToSuggestFunction ​

Helper function that converts a cocoda-sdk registry into a suggest function for concepts that can be used with ItemSuggest.

By default, it will use suggest (i.e. for concepts). With the parameter options.voc, it is possible to use vocSuggest for concept schemes instead.

js
import { utils } from "jskos-vue"
 const suggest = utils.cdkRegistryToSuggestFunction(registry, { voc = false, scheme })

Parameters ​

  • registry (object) - a registry object initialized by cocoda-sdk
  • options (object)
    • options.scheme (object) - JSKOS concept scheme to suggest concepts from
    • options.voc (boolean) - whether to use vocSuggest instead of suggest

Examples ​

Please refer to ItemSuggest for examples.

- + \ No newline at end of file diff --git a/utilities/dateToString.html b/utilities/dateToString.html index 4db4b8b..e95a781 100644 --- a/utilities/dateToString.html +++ b/utilities/dateToString.html @@ -18,7 +18,7 @@
jskos-vue

dateToString ​

Converts a date string to a localized date string. Incomplete dates (YYYY or YYYY-MM) will be returned non-localized. Dates with the exact length of 10 (e.g. YYYY-MM-DD) will be printed as date-only. If it was not possible to convert the string to a date, the input will be returned unchanged.

Usage ​

js
import { utils } from "jskos-vue"
 const localizedDateString = utils.dateToString(dateString)

Parameters ​

  • dateString - some kind of date or datetime string
    • required
- + \ No newline at end of file diff --git a/utilities/debounce.html b/utilities/debounce.html index ff77a02..9f91c31 100644 --- a/utilities/debounce.html +++ b/utilities/debounce.html @@ -18,7 +18,7 @@
jskos-vue

debounce ​

Returns a function, that, as long as it continues to be invoked, will not be triggered. The function will be called after it stops being called for N milliseconds. Can be used to reduce the number of API requests when the user is typing, for example in ItemSuggest.

See also: https://davidwalsh.name/javascript-debounce-function

Usage ​

js
import { utils } from "jskos-vue"
 const debouncedFunction = utils.debounce(func, wait, immediate)

Parameters ​

  • func - a function to be called
    • required
  • wait - a time in milliseconds for the debounce
    • required
  • immediate - will trigger the function on the leading edge, instead of the trailing
    • optional, default: false
- + \ No newline at end of file diff --git a/utilities/dragAndDrop.html b/utilities/dragAndDrop.html index 2df35f2..6c6b768 100644 --- a/utilities/dragAndDrop.html +++ b/utilities/dragAndDrop.html @@ -14,7 +14,7 @@ - + @@ -23,7 +23,7 @@ - + @@ -113,7 +113,7 @@ .draggingOver { background-color: red; } -</style>

Example with ItemName/ItemList/ItemDetails ​

You can drop an item here.

Single item: 1 Item 1

ItemList:

1 Item 1
2 Item 2
3 Item 3

ItemDetails (is a dropzone by default):

3 Item 3
  • item:3 (URI)
  • Item 3
vue
<script setup>
+</style>

Example with ItemName/ItemList/ItemDetails ​

You can drop an item here.

Single item: 1 Item 1

ItemList:

1 Item 1
2 Item 2
3 Item 3

ItemDetails (is a dropzone by default):

3 Item 3
  • item:3 (URI)
  • Item 3
vue
<script setup>
 import { onMounted } from "vue"
 import { utils, ItemName, ItemList, ItemDetails } from "jskos-vue"
 const { draggedItem, dragstart, dragend, addDropzone } = utils.dragAndDrop
@@ -149,7 +149,7 @@
     :item="selected"
     @select="selected = $event.item" />
 </template>
- + \ No newline at end of file