diff --git a/404.html b/404.html index 73db3d2..e1576e4 100644 --- a/404.html +++ b/404.html @@ -14,7 +14,7 @@
- + \ No newline at end of file diff --git a/assets/chunks/ItemDetails.B5OeYKoT.js b/assets/chunks/ItemDetails.B5OeYKoT.js new file mode 100644 index 0000000..42d4a0b --- /dev/null +++ b/assets/chunks/ItemDetails.B5OeYKoT.js @@ -0,0 +1 @@ +import{j as B,l as v,c as N,a as P}from"./jskos-tools.BngNuJFy.js";import{I as q}from"./ItemName.CuMQb6WA.js";import{I as F}from"./ItemList.CI6NDTcO.js";import{b as K,u as G}from"./style.-xXEQWSy.js";import{A as H}from"./AutoLink.DdFLTQbv.js";import{u as A,b as J}from"./utils.Du2BS91N.js";import"./shared.l0sNRNKZ.js";import{_ as O,h as $,d as T,D,o as t,b,w as L,J as j,c as i,j as d,t as o,e as a,F as p,E as y,I as C,a as w,r as k,a3 as R,a5 as U,M as I}from"./framework.CXbGQEsj.js";import{L as Z}from"./LicenseInfo.CO5g-42M.js";const S={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",publisher:"Publisher"},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",publisher:"Herausgeber"}},M=$(()=>v.getLanguages().find(e=>S[e])||"en"),Q=e=>S[M.value][e],W=T({name:"ItemDetailsTabs",components:{Tabs:K,Tab:G,AutoLink:H},props:{item:{type:Object,required:!0},flat:{type:Boolean,default:!1},fields:{type:Object,default:()=>({})}},setup(e){const r=(f,g)=>Object.keys(f&&f[g]||{}).map(l=>{const n=f[g][l];return(Array.isArray(n)?n:[n]).map(s=>({language:l,label:s}))}).reduce((l,n)=>l.concat(n),[]).filter(l=>l.language!="-").sort((l,n)=>l.language===v.selectLanguage(f[g])&&n.language!==v.selectLanguage(f[g])?-1:n.language===v.selectLanguage(f[g])&&l.language!==v.selectLanguage(f[g])?1:0),h=$(()=>{if(!e.item)return[];let f=[],g=e.item&&e.item.inScheme&&e.item.inScheme[0]&&e.item.inScheme[0].types||[];for(let l of e.item.type||[])typeof l!="object"&&(l={uri:l}),!(!l||["http://www.w3.org/2004/02/skos/core#Concept","http://www.w3.org/2004/02/skos/core#ConceptScheme"].includes(l.uri))&&(l=g.find(n=>N(n,l))||l,f.push(l));return f}),c=$(()=>Object.assign({identifier:!0,type:!0,publisher:!P(e.item),created:!0,issued:!0,modified:!0,languages:!0,definition:!0,prefLabel:!0,altLabel:!0,scopeNote:!0,editorialNote:!0},e.fields));return{utils:A,jskos:B,currentLanguage:M,t:Q,iterateLanguageMapContent:r,types:h,fields_:c}}}),X={key:0,class:"jskos-vue-itemDetails-list"},Y={key:0},_={key:0,class:"jskos-vue-text-lightGrey"},x={class:"jskos-vue-itemDetails-list"},ee={key:0},te={key:1},se={key:2},ie={key:1,class:"jskos-vue-itemDetails-list"},ne=["lang"],le={key:0,class:"jskos-vue-itemDetails-list"},ae={key:0},oe=["lang"],re={key:1,class:"jskos-vue-itemDetails-list"},ue=["lang"],de={class:"jskos-vue-itemDetails-list"},me={key:0},fe=["lang"],ge={class:"jskos-vue-itemDetails-list"},pe={key:0},be=["lang"];function ye(e,r,h,c,f,g){const l=D("auto-link");return t(),b(j(e.flat?"div":"tabs"),{borders:"bottom",size:"sm",class:"jskos-vue-itemDetails-tabs"},{default:L(()=>[["identifier","type","publisher","created","issued","modified","languages","definition"].filter(n=>e.fields_[n]).length?(t(),b(j(e.flat?"div":"tab"),{key:0,title:e.t("info")},{default:L(()=>{var n;return[e.fields_.identifier?(t(),i("ul",X,[e.flat?(t(),i("li",Y,[d("b",null,o(e.t("identifier"))+":",1)])):a("",!0),(t(!0),i(p,null,y([e.item.uri].concat(e.item.identifier).filter(s=>s!=null),(s,m)=>(t(),i("li",{key:m},[C(l,{href:s},null,8,["href"]),s===e.item.uri?(t(),i("span",_," (URI)")):a("",!0)]))),128))])):a("",!0),d("ul",x,[e.fields_.type&&e.types.length?(t(),i("li",ee,[d("b",null,o(e.t("type"))+":",1),w(" "+o(e.types.map(s=>e.jskos.prefLabel(s)).join(", ")),1)])):a("",!0),e.fields_.publisher&&((n=e.item.publisher)!=null&&n.length)?(t(),i("li",te,[d("b",null,o(e.t("publisher"))+": ",1),(t(!0),i(p,null,y(e.item.publisher,(s,m)=>(t(),i(p,{key:`publisher-${m}`},[m>0?(t(),i(p,{key:0},[w(" · ")],64)):a("",!0),C(l,{href:s.url||s.uri,text:e.jskos.prefLabel(s)},null,8,["href","text"])],64))),128))])):a("",!0),(t(!0),i(p,null,y(["created","issued","modified"].filter(s=>e.fields_[s]),s=>(t(),i(p,null,[e.item[s]?(t(),i("li",{key:s},[d("b",null,o(e.t(s))+":",1),w(" "+o(e.utils.dateToString(e.item[s])),1)])):a("",!0)],64))),256)),e.fields_.languages&&e.item.languages?(t(),i("li",se,[d("b",null,o(e.t("languages"))+":",1),w(" "+o(e.item.languages.join(", ")),1)])):a("",!0)]),e.fields_.definition&&e.jskos.languageMapContent(e.item,"definition")?(t(),i("ul",ie,[d("li",null,[d("b",null,o(e.t("definition"))+":",1)]),(t(!0),i(p,null,y(e.iterateLanguageMapContent(e.item,"definition"),({language:s,label:m},u)=>(t(),i("li",{key:`${s}-${u}`,lang:`${s}`},o(m),9,ne))),128))])):a("",!0)]}),_:1},8,["title"])):a("",!0),e.fields_.prefLabel||e.fields_.altLabel?(t(),b(j(e.flat?"div":"tab"),{key:1,title:e.t("labels")},{default:L(()=>[e.fields_.prefLabel?(t(),i("ul",le,[e.flat?(t(),i("li",ae,[d("b",null,o(e.t("labels"))+":",1)])):a("",!0),(t(!0),i(p,null,y(e.iterateLanguageMapContent(e.item,"prefLabel"),({language:n,label:s},m)=>(t(),i("li",{key:`${n}-${m}`,lang:`${n}`},o(s),9,oe))),128))])):a("",!0),e.fields_.altLabel&&e.jskos.languageMapContent(e.item,"altLabel")?(t(),i("ul",re,[d("li",null,[d("b",null,o(e.t("altLabels"))+":",1)]),(t(!0),i(p,null,y(e.iterateLanguageMapContent(e.item,"altLabel"),({language:n,label:s},m)=>(t(),i("li",{key:`${n}-${m}`,lang:`${n}`},o(s),9,ue))),128))])):a("",!0)]),_:1},8,["title"])):a("",!0),e.fields_.scopeNote&&e.jskos.languageMapContent(e.item,"scopeNote")?(t(),b(j(e.flat?"div":"tab"),{key:2,title:e.t("scope")},{default:L(()=>[d("ul",de,[e.flat?(t(),i("li",me,[d("b",null,o(e.t("scope"))+":",1)])):a("",!0),(t(!0),i(p,null,y(e.iterateLanguageMapContent(e.item,"scopeNote"),({language:n,label:s},m)=>(t(),i("li",{key:`${n}-${m}`,lang:`${n}`},o(s),9,fe))),128))])]),_:1},8,["title"])):a("",!0),e.fields_.editorialNote&&e.jskos.languageMapContent(e.item,"editorialNote")?(t(),b(j(e.flat?"div":"tab"),{key:3,title:e.t("editorial")},{default:L(()=>[d("ul",ge,[e.flat?(t(),i("li",pe,[d("b",null,o(e.t("editorial"))+":",1)])):a("",!0),(t(!0),i(p,null,y(e.iterateLanguageMapContent(e.item,"editorialNote"),({language:n,label:s},m)=>(t(),i("li",{key:`${n}-${m}`,lang:`${n}`},o(s),9,be))),128))])]),_:1},8,["title"])):a("",!0),k(e.$slots,"additionalTabs")]),_:3})}const ke=O(W,[["render",ye]]),{draggedItem:z,addDropzone:he}=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=$(()=>v.getLanguages().find(e=>E[e])||"en"),Le=e=>E[V.value][e],ve=T({name:"ItemDetails",components:{ItemName:q,ItemList:F,LicenseInfo:Z,ItemDetailsTabs:ke},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},fields:{type:Object,default:()=>({})}},emits:["select"],setup(e,{emit:r}){const h=$(()=>!N(e.item,z.value)),c=he(null,g=>{e.dropzone&&h.value&&r("select",{item:g})}),f=$(()=>Object.assign({draggable:e.draggable},e.itemListOptions));return{utils:A,jskos:B,currentLanguage:V,t:Le,draggedItem:z,...c,isDraggedConceptDifferent:h,itemListOptions_:f}}}),$e={class:"jskos-vue-itemDetails-name"},ce={key:0};function je(e,r,h,c,f,g){const l=D("item-name"),n=D("license-info"),s=D("item-list"),m=D("item-details-tabs");return t(),i("div",{class:"jskos-vue-itemDetails",onDragover:r[3]||(r[3]=(...u)=>e.dragover&&e.dragover(...u)),onDragenter:r[4]||(r[4]=(...u)=>e.dragenter&&e.dragenter(...u)),onDragleave:r[5]||(r[5]=(...u)=>e.dragleave&&e.dragleave(...u)),onDrop:r[6]||(r[6]=(...u)=>e.drop&&e.drop(...u))},[R(d("div",{class:"jskos-vue-itemDetails-dropzone jskos-vue-text-small"},o(e.t("dropzone")),513),[[U,e.dropzone&&e.isDraggingOver&&e.isDraggedConceptDifferent]]),d("div",$e,[k(e.$slots,"before"),k(e.$slots,"beforeName"),C(l,{item:e.item,draggable:e.draggable},null,8,["item","draggable"]),k(e.$slots,"afterName")]),e.item.license&&e.item.license.length?(t(),i("div",ce,[w(o(e.t("license"))+": ",1),C(n,{item:e.item},null,8,["item"])])):a("",!0),e.showAncestors?(t(),b(s,I({key:1},e.itemListOptions_,{items:(e.item.ancestors||[]).filter(Boolean).reverse(),indent:!0,class:"jskos-vue-itemDetails-ancestors",onSelect:r[0]||(r[0]=u=>e.$emit("select",{item:u.item}))}),null,16,["items"])):a("",!0),e.showBroader?(t(),b(s,I({key:2},e.itemListOptions_,{items:(e.item.broader||[]).filter(u=>!e.jskos.isContainedIn(u,e.item.ancestors||[])),class:"jskos-vue-itemDetails-broader",onSelect:r[1]||(r[1]=u=>e.$emit("select",{item:u.item}))}),null,16,["items"])):a("",!0),k(e.$slots,"beforeTabs"),e.showTabs?(t(),b(m,{key:3,item:e.item,flat:e.flat,fields:e.fields},{additionalTabs:L(()=>[k(e.$slots,"additionalTabs")]),_:3},8,["item","flat","fields"])):a("",!0),k(e.$slots,"afterTabs"),e.showNarrower?(t(),b(s,I({key:4},e.itemListOptions_,{items:e.item.narrower||[],class:"jskos-vue-itemDetails-narrower",onSelect:r[2]||(r[2]=u=>e.$emit("select",{item:u.item}))}),null,16,["items"])):a("",!0),k(e.$slots,"after")],32)}const Te=O(ve,[["render",je]]);export{Te as I,ke as a}; diff --git a/assets/chunks/LicenseInfo.CO5g-42M.js b/assets/chunks/LicenseInfo.CO5g-42M.js new file mode 100644 index 0000000..1b0a469 --- /dev/null +++ b/assets/chunks/LicenseInfo.CO5g-42M.js @@ -0,0 +1 @@ +import{j as g,p as l,n as u}from"./jskos-tools.BngNuJFy.js";import{A as b}from"./AutoLink.DdFLTQbv.js";import{_ as v,d as h,h as d,D as f,o as r,c as i,F as k,E as y,b as L,w as _,t as $}from"./framework.CXbGQEsj.js";const w=h({name:"LicenseInfo",components:{AutoLink:b},props:{item:{type:Object,required:!0}},setup(s){const c={"http://creativecommons.org/publicdomain/zero/1.0/":"https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/cc-zero.svg","https://creativecommons.org/publicdomain/mark/1.0/":"https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/cc-zero.svg","http://creativecommons.org/licenses/by/3.0/":"https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by.svg","http://creativecommons.org/licenses/by-nc-nd/3.0/":"https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by-nc-nd.svg","http://creativecommons.org/licenses/by-nc-nd/4.0/":"https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by-nc-nd.svg","http://creativecommons.org/licenses/by-nc-sa/4.0/":"https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by-nc-sa.svg","http://creativecommons.org/licenses/by-sa/4.0/":"https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by-sa.svg","http://opendatacommons.org/licenses/odbl/1.0/":"https://img.shields.io/badge/License-ODbL-lightgrey.svg","http://www.wtfpl.net/":"https://img.shields.io/badge/License-WTFPL-lightgrey.svg"},a=t=>{const n=l(t,{fallbackToUri:!1});let o=u(t);n&&o&&(o=` (${o})`);let e=n+o;return e||(e=t.uri),e},m=d(()=>{var o;const t=(s.item.publisher||[]).find(e=>e.url)??((o=s.item.publisher)==null?void 0:o[0]);return{url:(t==null?void 0:t.url)??s.item.url,label:l(t)||"?"}});return{licenseBadges:c,licenseAttribution:m,getLicenseName:a,jskos:g}}}),B={class:"jskos-vue-itemDetails-licenseInfo"},j=["src"],x={key:1};function D(s,c,a,m,t,n){const o=f("auto-link");return r(),i("div",B,[(r(!0),i(k,null,y(s.item.license||[],(e,p)=>(r(),L(o,{key:p,href:e.uri,title:`${s.getLicenseName(e)} by ${s.licenseAttribution.label}`,class:"jskos-vue-itemDetails-licenseInfo-badge"},{default:_(()=>[s.licenseBadges[e.uri]?(r(),i("img",{key:0,src:s.licenseBadges[e.uri]},null,8,j)):(r(),i("span",x,$(s.getLicenseName(e)),1))]),_:2},1032,["href","title"]))),128))])}const C=v(w,[["render",D]]);export{C as L}; diff --git a/assets/components_ItemDetails.md.BEBJI_3_.js b/assets/components_ItemDetails.md.BEBJI_3_.js new file mode 100644 index 0000000..0ddf8a6 --- /dev/null +++ b/assets/components_ItemDetails.md.BEBJI_3_.js @@ -0,0 +1,274 @@ +import{I as d,a as g}from"./chunks/ItemDetails.B5OeYKoT.js";import{u as y}from"./chunks/style.-xXEQWSy.js";import"./chunks/jskos-tools.BngNuJFy.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.CuMQb6WA.js";import"./chunks/utils.Du2BS91N.js";import"./chunks/shared.l0sNRNKZ.js";import"./chunks/ItemList.CI6NDTcO.js";import"./chunks/LoadingIndicator.CWAPJBMj.js";import"./chunks/vue-scrollto.FOkUA__D.js";import"./chunks/AutoLink.DdFLTQbv.js";import"./chunks/LicenseInfo.CO5g-42M.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.BEBJI_3_.lean.js b/assets/components_ItemDetails.md.BEBJI_3_.lean.js new file mode 100644 index 0000000..823c17f --- /dev/null +++ b/assets/components_ItemDetails.md.BEBJI_3_.lean.js @@ -0,0 +1 @@ +import{I as d,a as g}from"./chunks/ItemDetails.B5OeYKoT.js";import{u as y}from"./chunks/style.-xXEQWSy.js";import"./chunks/jskos-tools.BngNuJFy.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.CuMQb6WA.js";import"./chunks/utils.Du2BS91N.js";import"./chunks/shared.l0sNRNKZ.js";import"./chunks/ItemList.CI6NDTcO.js";import"./chunks/LoadingIndicator.CWAPJBMj.js";import"./chunks/vue-scrollto.FOkUA__D.js";import"./chunks/AutoLink.DdFLTQbv.js";import"./chunks/LicenseInfo.CO5g-42M.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/components_LicenseInfo.md.BjBl1UTX.js b/assets/components_LicenseInfo.md.BjBl1UTX.js new file mode 100644 index 0000000..fded570 --- /dev/null +++ b/assets/components_LicenseInfo.md.BjBl1UTX.js @@ -0,0 +1,30 @@ +import{L as a}from"./chunks/LicenseInfo.CO5g-42M.js";import{c as n,I as e,k as l,a1 as s,o as t}from"./chunks/framework.CXbGQEsj.js";import"./chunks/jskos-tools.BngNuJFy.js";import"./chunks/AutoLink.DdFLTQbv.js";const p=s('

LicenseInfo ​

Component to display license information for a JSKOS item.

Props ​

Examples ​

',5),h=s(`
vue
<script setup>
+import { LicenseInfo } from "jskos-vue"
+
+const item = {
+  license: [
+    {
+      uri: "http://creativecommons.org/publicdomain/zero/1.0/",
+    },
+    {
+      uri: "http://example.com/license/",
+      prefLabel: { en: "Example License" },
+    },
+    {
+      uri: "http://example.com/license-no-label/",
+    },
+  ],
+  publisher: [
+    {
+      url: "https://www.gbv.de",
+      prefLabel: {
+        en: "VZG",
+      },
+    }
+  ],
+}
+</script>
+
+<template>
+  <license-info :item="item" />
+</template>
`,1),m=JSON.parse('{"title":"LicenseInfo","description":"","frontmatter":{},"headers":[],"relativePath":"components/LicenseInfo.md","filePath":"components/LicenseInfo.md"}'),k={name:"components/LicenseInfo.md"},u=Object.assign(k,{setup(E){const i={license:[{uri:"http://creativecommons.org/publicdomain/zero/1.0/",notation:["CC0"]},{uri:"http://example.com/license/",prefLabel:{en:"Example License"},notation:["EX"]},{uri:"http://example.com/license-no-label/",notation:["NOL"]},{uri:"http://example.com/license-no-label-no-notation/"}],publisher:[{url:"https://www.gbv.de",prefLabel:{en:"VZG"}}]};return(r,o)=>(t(),n("div",null,[p,e(l(a),{item:i}),h]))}});export{m as __pageData,u as default}; diff --git a/assets/components_LicenseInfo.md.BjBl1UTX.lean.js b/assets/components_LicenseInfo.md.BjBl1UTX.lean.js new file mode 100644 index 0000000..e3f0b60 --- /dev/null +++ b/assets/components_LicenseInfo.md.BjBl1UTX.lean.js @@ -0,0 +1 @@ +import{L as a}from"./chunks/LicenseInfo.CO5g-42M.js";import{c as n,I as e,k as l,a1 as s,o as t}from"./chunks/framework.CXbGQEsj.js";import"./chunks/jskos-tools.BngNuJFy.js";import"./chunks/AutoLink.DdFLTQbv.js";const p=s("",5),h=s("",1),m=JSON.parse('{"title":"LicenseInfo","description":"","frontmatter":{},"headers":[],"relativePath":"components/LicenseInfo.md","filePath":"components/LicenseInfo.md"}'),k={name:"components/LicenseInfo.md"},u=Object.assign(k,{setup(E){const i={license:[{uri:"http://creativecommons.org/publicdomain/zero/1.0/",notation:["CC0"]},{uri:"http://example.com/license/",prefLabel:{en:"Example License"},notation:["EX"]},{uri:"http://example.com/license-no-label/",notation:["NOL"]},{uri:"http://example.com/license-no-label-no-notation/"}],publisher:[{url:"https://www.gbv.de",prefLabel:{en:"VZG"}}]};return(r,o)=>(t(),n("div",null,[p,e(l(a),{item:i}),h]))}});export{m as __pageData,u as default}; diff --git a/assets/utilities_dragAndDrop.md.DouwFqA_.js b/assets/utilities_dragAndDrop.md.DouwFqA_.js new file mode 100644 index 0000000..14a7bea --- /dev/null +++ b/assets/utilities_dragAndDrop.md.DouwFqA_.js @@ -0,0 +1,116 @@ +import{I as D}from"./chunks/ItemName.CuMQb6WA.js";import{I as b}from"./chunks/ItemList.CI6NDTcO.js";import{I as A}from"./chunks/ItemDetails.B5OeYKoT.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.Du2BS91N.js";import"./chunks/jskos-tools.BngNuJFy.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.CO5g-42M.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.DouwFqA_.lean.js b/assets/utilities_dragAndDrop.md.DouwFqA_.lean.js new file mode 100644 index 0000000..f4f87ae --- /dev/null +++ b/assets/utilities_dragAndDrop.md.DouwFqA_.lean.js @@ -0,0 +1 @@ +import{I as D}from"./chunks/ItemName.CuMQb6WA.js";import{I as b}from"./chunks/ItemList.CI6NDTcO.js";import{I as A}from"./chunks/ItemDetails.B5OeYKoT.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.Du2BS91N.js";import"./chunks/jskos-tools.BngNuJFy.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.CO5g-42M.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 33be077..cc62cb7 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 37e4bd4..41f00e0 100644 --- a/components/AutoLink.html +++ b/components/AutoLink.html @@ -17,7 +17,7 @@ -
jskos-vue

AutoLink ​

Replacement for the <a> element that automatically links the URL if it's valid, and only shows text if it's invalid.

Props ​

  • href (string) - a string that could be a URL
  • text (string) - text shown for the link
    • default: href property

Slots ​

  • default: Alternative to the text property.

Examples ​

vue
<template>
+    
jskos-vue
AutoLink ​
Replacement for the <a> element that automatically links the URL if it's valid, and only shows text if it's invalid.
Props ​
  • href (string) - a string that could be a URL
  • text (string) - text shown for the link 
    • default: href property
Slots ​
  • default: Alternative to the text property.
Examples ​
vue
<template>
   <ul>
     <li>URL without text: <auto-link href="https://coli-conc.gbv.de" /></li>
     <li>URL with text (via prop): <auto-link href="https://coli-conc.gbv.de" text="coli-conc" /></li>
@@ -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 83d3a54..8f9a376 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 3d9fa44..d8138e6 100644 --- a/components/ItemDetails.html +++ b/components/ItemDetails.html @@ -12,7 +12,7 @@ - + @@ -22,12 +22,12 @@ - - + + -
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.
🚀
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.
  • 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. 
 🚀 
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
  • 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>
+</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"
 
@@ -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 c2ebbee..4f7d382 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 014ab4d..a5147e2 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 a7a37fd..21bad76 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 df139ce..718c945 100644 --- a/components/LicenseInfo.html +++ b/components/LicenseInfo.html @@ -12,14 +12,14 @@ - + - + -
jskos-vue

LicenseInfo ​

Component to display license information for a JSKOS item.

Props ​

  • item (object) - JSKOS item (concept or concept scheme)
    • required

Examples ​

Example Licensehttp://example.com/license-no-label/
vue
<script setup>
+    
jskos-vue
LicenseInfo ​
Component to display license information for a JSKOS item.
Props ​
  • item (object) - JSKOS item (concept or concept scheme) 
    • required
Examples ​
Example License (EX)NOLhttp://example.com/license-no-label-no-notation/
vue
<script setup>
 import { LicenseInfo } from "jskos-vue"
 
 const item = {
@@ -49,7 +49,7 @@
 <template>
   <license-info :item="item" />
 </template>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/components/LoadingIndicator.html b/components/LoadingIndicator.html
index 30ab601..e0fbef0 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 c9c4a82..264dc34 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 0b77784..7899453 100644 --- a/hashmap.json +++ b/hashmap.json @@ -1 +1 @@ -{"components_arrow.md":"hIQx528x","components_itemlist.md":"zBAnG7KL","components_licenseinfo.md":"0GO_Q5wq","components_itemsuggest.md":"DP60z7a4","components_autolink.md":"rb3ixW3_","utilities_cdkregistrytosuggestfunction.md":"DT8vPuU9","components_modal.md":"CO4v07qx","index.md":"KBlh4TBW","utilities_draganddrop.md":"CFH7Fe79","components_itemdetails.md":"C14T_9nl","utilities_datetostring.md":"BZpMOV-b","utilities_debounce.md":"BtK3vvI5","components_concepttree.md":"Cqj0uYrl","components_loadingindicator.md":"B5ra5SL_","utilities_addclickhandlers.md":"CzrIU8PE","components_itemname.md":"DTsymsoF"} +{"components_arrow.md":"hIQx528x","components_loadingindicator.md":"B5ra5SL_","components_itemlist.md":"zBAnG7KL","components_concepttree.md":"Cqj0uYrl","utilities_datetostring.md":"BZpMOV-b","components_itemname.md":"DTsymsoF","utilities_cdkregistrytosuggestfunction.md":"DT8vPuU9","utilities_debounce.md":"BtK3vvI5","components_autolink.md":"rb3ixW3_","utilities_draganddrop.md":"DouwFqA_","components_licenseinfo.md":"BjBl1UTX","index.md":"KBlh4TBW","utilities_addclickhandlers.md":"CzrIU8PE","components_itemsuggest.md":"DP60z7a4","components_modal.md":"CO4v07qx","components_itemdetails.md":"BEBJI_3_"} diff --git a/index.html b/index.html index d1ee1c5..93f00c2 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 5fd9670..edfea7d 100644 --- a/utilities/addClickHandlers.html +++ b/utilities/addClickHandlers.html @@ -61,7 +61,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 470d291..d6e72cf 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 abb7fd5..23bb053 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 9813227..02e7b91 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 640f173..75756bd 100644 --- a/utilities/dragAndDrop.html +++ b/utilities/dragAndDrop.html @@ -14,7 +14,7 @@ - + @@ -22,8 +22,8 @@ - - + + @@ -149,7 +149,7 @@ :item="selected" @select="selected = $event.item" /> </template> - + \ No newline at end of file