From ba41665a6b21a55fc3144aa14193bf86b8a7f7f4 Mon Sep 17 00:00:00 2001 From: stefandesu Date: Wed, 3 Jul 2024 08:02:43 +0000 Subject: [PATCH] deploy: 5e199edc1656ab7ddf3b1947ccd740c0c90a6c03 --- dev/404.html | 2 +- dev/assets/chunks/ItemDetails.CU_pZE7t.js | 1 + dev/assets/chunks/LicenseInfo.DPKbVdVS.js | 1 + .../components_ConceptTree.md.DXHV4NpZ.js | 78 +++++ ...components_ConceptTree.md.DXHV4NpZ.lean.js | 1 + .../components_ItemDetails.md.DiNwATlP.js | 274 ++++++++++++++++++ ...components_ItemDetails.md.DiNwATlP.lean.js | 1 + .../components_LicenseInfo.md.BtXC7hMx.js | 30 ++ ...components_LicenseInfo.md.BtXC7hMx.lean.js | 1 + .../utilities_dragAndDrop.md.CekCEFBb.js | 116 ++++++++ .../utilities_dragAndDrop.md.CekCEFBb.lean.js | 1 + dev/components/Arrow.html | 2 +- dev/components/AutoLink.html | 2 +- dev/components/ConceptTree.html | 4 +- dev/components/ItemDetails.html | 8 +- dev/components/ItemList.html | 2 +- dev/components/ItemName.html | 2 +- dev/components/ItemSuggest.html | 2 +- dev/components/LicenseInfo.html | 12 +- dev/components/LoadingIndicator.html | 2 +- dev/components/Modal.html | 2 +- dev/hashmap.json | 2 +- dev/index.html | 2 +- dev/utilities/addClickHandlers.html | 2 +- .../cdkRegistryToSuggestFunction.html | 2 +- dev/utilities/dateToString.html | 2 +- dev/utilities/debounce.html | 2 +- dev/utilities/dragAndDrop.html | 8 +- 28 files changed, 536 insertions(+), 28 deletions(-) create mode 100644 dev/assets/chunks/ItemDetails.CU_pZE7t.js create mode 100644 dev/assets/chunks/LicenseInfo.DPKbVdVS.js create mode 100644 dev/assets/components_ConceptTree.md.DXHV4NpZ.js create mode 100644 dev/assets/components_ConceptTree.md.DXHV4NpZ.lean.js create mode 100644 dev/assets/components_ItemDetails.md.DiNwATlP.js create mode 100644 dev/assets/components_ItemDetails.md.DiNwATlP.lean.js create mode 100644 dev/assets/components_LicenseInfo.md.BtXC7hMx.js create mode 100644 dev/assets/components_LicenseInfo.md.BtXC7hMx.lean.js create mode 100644 dev/assets/utilities_dragAndDrop.md.CekCEFBb.js create mode 100644 dev/assets/utilities_dragAndDrop.md.CekCEFBb.lean.js diff --git a/dev/404.html b/dev/404.html index aedff3c..81c6065 100644 --- a/dev/404.html +++ b/dev/404.html @@ -14,7 +14,7 @@
- + \ No newline at end of file diff --git a/dev/assets/chunks/ItemDetails.CU_pZE7t.js b/dev/assets/chunks/ItemDetails.CU_pZE7t.js new file mode 100644 index 0000000..f04c173 --- /dev/null +++ b/dev/assets/chunks/ItemDetails.CU_pZE7t.js @@ -0,0 +1 @@ +import{j as B,l as $,c as A}from"./jskos-tools.CpjLtWvA.js";import{I as q}from"./ItemName.BXFfuZjO.js";import{I as F}from"./ItemList.DU0iaMN_.js";import{b as K,u as P}from"./style.DttjXGKa.js";import{A as G}from"./AutoLink.DNBaALqq.js";import{u as T,b as J}from"./utils.Cs71LNG2.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.DOrQYd6A.js";import{L as Z}from"./LicenseInfo.DPKbVdVS.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/dev/assets/chunks/LicenseInfo.DPKbVdVS.js b/dev/assets/chunks/LicenseInfo.DPKbVdVS.js new file mode 100644 index 0000000..4896938 --- /dev/null +++ b/dev/assets/chunks/LicenseInfo.DPKbVdVS.js @@ -0,0 +1 @@ +import{j as p,p as g}from"./jskos-tools.CpjLtWvA.js";import{A as u}from"./AutoLink.DNBaALqq.js";import{_ as b,d as v,h,D as d,o as t,c as r,F as k,E as f,b as y,w as _,t as L}from"./framework.DOrQYd6A.js";const j=v({name:"LicenseInfo",components:{AutoLink:u},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"},m=h(()=>{var n;const e=(s.item.publisher||[]).find(i=>i.url)??((n=s.item.publisher)==null?void 0:n[0]);return{url:(e==null?void 0:e.url)??s.item.url,label:g(e)||"?"}});return{licenseBadges:c,licenseAttribution:m,jskos:p}}}),w={class:"jskos-vue-itemDetails-licenseInfo"},x=["src"],B={key:1};function D(s,c,m,e,a,n){const i=d("auto-link");return t(),r("div",w,[(t(!0),r(k,null,f(s.item.license||[],(o,l)=>(t(),y(i,{key:l,href:o.uri,title:`by ${s.licenseAttribution.label}`,class:"jskos-vue-itemDetails-licenseInfo-badge"},{default:_(()=>[s.licenseBadges[o.uri]?(t(),r("img",{key:0,src:s.licenseBadges[o.uri]},null,8,x)):(t(),r("span",B,L(s.jskos.prefLabel(o)),1))]),_:2},1032,["href","title"]))),128))])}const z=b(j,[["render",D]]);export{z as L}; diff --git a/dev/assets/components_ConceptTree.md.DXHV4NpZ.js b/dev/assets/components_ConceptTree.md.DXHV4NpZ.js new file mode 100644 index 0000000..3eebce6 --- /dev/null +++ b/dev/assets/components_ConceptTree.md.DXHV4NpZ.js @@ -0,0 +1,78 @@ +import{_ as T,d as I,o as p,b as B,w as d,c as g,E as V,F as L,e as D,$ as f,r as u,M as $,a2 as q,h as j,D as v,y as P,j as m,t as x,a1 as _}from"./chunks/framework.DOrQYd6A.js";import{j as O,c as C,s as b}from"./chunks/jskos-tools.CpjLtWvA.js";import{I as N}from"./chunks/ItemList.DU0iaMN_.js";import{A as U}from"./chunks/Arrow.BM61LVN8.js";import"./chunks/shared.l0sNRNKZ.js";import{c as M}from"./chunks/index.C1QD6wya.js";import"./chunks/ItemName.BXFfuZjO.js";import"./chunks/utils.Cs71LNG2.js";import"./chunks/LoadingIndicator.BIFdSjTT.js";import"./chunks/vue-scrollto.FOkUA__D.js";const R=I({name:"ConceptTree",components:{ItemList:N,Arrow:U},props:{modelValue:{type:Object,default:null},concepts:{type:Array,required:!0},hierarchy:{type:Boolean,default:!0},itemListOptions:{type:Object,default:()=>({})}},emits:["select","open","close","update:modelValue"],setup(i,{emit:h}){const t=q({}),r=a=>{let s=[],e=a.concept,F=a.depth+1;if(e&&t[e.uri])for(let o of e.narrower||[]){let c={concept:o,depth:F,isSelected:C(i.modelValue,o)};s.push(c),s=s.concat(r(c))}return s},l=j(()=>{let a=[];for(let s of i.concepts){let e={concept:s,depth:0,isSelected:C(i.modelValue,s)};a.push(e),i.hierarchy&&(a=a.concat(r(e)))}return a}),k=a=>{t[a.uri]=!0,h("open",a)},n=a=>{var F,o,c,A,w;let s=(F=i.modelValue)==null?void 0:F.uri,e=s;for(;s;){const E=(o=l.value.find(S=>C(S.concept,{uri:s})))==null?void 0:o.concept;if(s!==e&&C(E,a))return;s=(w=((c=E==null?void 0:E.ancestors)==null?void 0:c[0])||((A=E==null?void 0:E.broader)==null?void 0:A[0]))==null?void 0:w.uri}delete t[a.uri],h("close",a)};return{items:l,isOpen:t,open:k,close:n,toggle:a=>{t[a.uri]?n(a):k(a)},jskos:O}},methods:{isUriInView(...i){return this.$refs.itemList.isUriInView(...i)},scrollToUri(...i){this.$refs.itemList.scrollToUri(...i)}}}),J=["onClick"];function K(i,h,t,r,l,k){var a;const n=v("arrow"),y=v("item-list");return p(),B(y,$({ref:"itemList"},i.itemListOptions,{class:{"jskos-vue-conceptTree":!0,"jskos-vue-conceptTree-noHierarchy":!i.hierarchy},items:i.items,"item-property":"concept","highlight-by-uri":(a=i.modelValue)!=null&&a.uri?{[i.modelValue.uri]:!0}:{},onSelect:h[0]||(h[0]=s=>{i.$emit("select",s),i.$emit("update:modelValue",s.item)})}),{beforeItem:d(({item:s})=>[(p(!0),g(L,null,V(s.depth,e=>(p(),g("div",{key:e,class:"jskos-vue-conceptTree-depthSpacer"}))),128)),i.hierarchy?(p(),g("div",{key:0,class:"jskos-vue-conceptTree-arrow",onClick:f(e=>i.toggle(s.concept),["stop"])},[s.concept&&s.concept.narrower&&s.concept.narrower.length!==0?(p(),B(n,{key:0,direction:i.isOpen[s.concept.uri]?"down":"right",clickable:!0},null,8,["direction"])):D("",!0)],8,J)):D("",!0),u(i.$slots,"beforeItem",{item:s.concept})]),afterItem:d(({item:s})=>[u(i.$slots,"afterItem",{item:s.concept})]),beforeList:d(()=>[u(i.$slots,"beforeList")]),afterList:d(()=>[u(i.$slots,"afterList")]),_:3},16,["class","items","highlight-by-uri"])}const z=T(R,[["render",K]]),Y=_('

ConceptTree ​

Component to display a concept tree.

Props ​

Slots ​

Methods ​

Events ​

CSS Variables ​

Examples ​

',13),H=["onClick"],W=["onClick"],G={key:1},Q=_(`
vue
<script setup>
+import { ConceptTree } from "jskos-vue"
+import * as jskos from "jskos-tools"
+import * as cdk from "cocoda-sdk"
+import { reactive, onMounted } from "vue"
+
+let registry
+const state = reactive({
+  scheme: null,
+  async loadScheme() {
+    this.scheme = (await registry.getSchemes({
+      params: {
+        uri: "https://www.ixtheo.de/classification/",
+      },
+    }))[0]
+  },
+  concepts: null,
+  async loadConcepts() {
+    this.concepts = jskos.sortConcepts(await this.scheme._getTop())
+  },
+  async loadNarrower(concept) {
+    if (concept.narrower && !concept.narrower.includes(null)) {
+      return
+    }
+    concept.narrower = jskos.sortConcepts(await concept._getNarrower())
+  },
+  selected: null,
+})
+
+onMounted(async () => {
+  registry = cdk.initializeRegistry({
+    provider: "ConceptApi",
+    api: "https://coli-conc.gbv.de/api/",
+  })
+  await state.loadScheme()
+  await state.loadConcepts()
+})
+
+const alert = (...args) => window.alert(...args)
+</script>
+
+<template>
+  <p>
+    Selected: {{ state.selected && state.selected.uri || "none" }}
+  </p>
+  <concept-tree
+    v-if="state.concepts"
+    v-model="state.selected"
+    style="height: 400px; overflow: auto; border: 2px solid #0001;"
+    :concepts="state.concepts"
+    @open="state.loadNarrower($event)">
+    <template v-slot:beforeItem="{ item }">
+      <span
+        class="opacity-hover"
+        style="margin-right: 5px;"
+        @click.stop="alert(\`Clicked on Star for item \${item.uri}\`)">
+        ⭐️
+      </span>
+    </template>
+    <template v-slot:afterItem="{ item }">
+      <div
+        class="opacity-hover"
+        style="position: absolute; width: 20px; right: 2px; top: 50%; transform: translateY(-50%);"
+        @click.stop="alert(\`Clicked on Rocket for item \${item.uri}\`)">
+        🚀
+      </div>
+    </template>
+  </concept-tree>
+  <div v-else>
+    Loading concepts...
+  </div>
+</template>
+
+<style>
+.opacity-hover:hover {
+  opacity: 50%;
+}
+</style>
`,1),ps=JSON.parse('{"title":"ConceptTree","description":"","frontmatter":{},"headers":[],"relativePath":"components/ConceptTree.md","filePath":"components/ConceptTree.md"}'),X={name:"components/ConceptTree.md"},Es=Object.assign(X,{setup(i){let h;const t=q({scheme:null,async loadScheme(){this.scheme=(await h.getSchemes({params:{uri:"https://www.ixtheo.de/classification/"}}))[0]},concepts:null,async loadConcepts(){this.concepts=b(await this.scheme._getTop())},async loadNarrower(l){l.narrower&&!l.narrower.includes(null)||(l.narrower=b(await l._getNarrower()))},selected:null});P(async()=>{h=M.initializeRegistry({provider:"ConceptApi",api:"https://coli-conc.gbv.de/api/"}),await t.loadScheme(),await t.loadConcepts()});const r=(...l)=>window.alert(...l);return(l,k)=>(p(),g("div",null,[Y,m("p",null," Selected: "+x(t.selected&&t.selected.uri||"none"),1),t.concepts?(p(),B(z,{key:0,modelValue:t.selected,"onUpdate:modelValue":k[0]||(k[0]=n=>t.selected=n),style:{height:"400px",overflow:"auto",border:"2px solid #0001"},concepts:t.concepts,onOpen:k[1]||(k[1]=n=>t.loadNarrower(n))},{beforeItem:d(({item:n})=>[m("span",{class:"opacity-hover",style:{"margin-right":"5px"},onClick:f(y=>r(`Clicked on Star for item ${n.uri}`),["stop"])}," ⭐️ ",8,H)]),afterItem:d(({item:n})=>[m("div",{class:"opacity-hover",style:{position:"absolute",width:"20px",right:"2px",top:"50%",transform:"translateY(-50%)"},onClick:f(y=>r(`Clicked on Rocket for item ${n.uri}`),["stop"])}," 🚀 ",8,W)]),_:1},8,["modelValue","concepts"])):(p(),g("div",G," Loading concepts... ")),Q]))}});export{ps as __pageData,Es as default}; diff --git a/dev/assets/components_ConceptTree.md.DXHV4NpZ.lean.js b/dev/assets/components_ConceptTree.md.DXHV4NpZ.lean.js new file mode 100644 index 0000000..55ddc11 --- /dev/null +++ b/dev/assets/components_ConceptTree.md.DXHV4NpZ.lean.js @@ -0,0 +1 @@ +import{_ as T,d as I,o as p,b as B,w as d,c as g,E as V,F as L,e as D,$ as f,r as u,M as $,a2 as q,h as j,D as v,y as P,j as m,t as x,a1 as _}from"./chunks/framework.DOrQYd6A.js";import{j as O,c as C,s as b}from"./chunks/jskos-tools.CpjLtWvA.js";import{I as N}from"./chunks/ItemList.DU0iaMN_.js";import{A as U}from"./chunks/Arrow.BM61LVN8.js";import"./chunks/shared.l0sNRNKZ.js";import{c as M}from"./chunks/index.C1QD6wya.js";import"./chunks/ItemName.BXFfuZjO.js";import"./chunks/utils.Cs71LNG2.js";import"./chunks/LoadingIndicator.BIFdSjTT.js";import"./chunks/vue-scrollto.FOkUA__D.js";const R=I({name:"ConceptTree",components:{ItemList:N,Arrow:U},props:{modelValue:{type:Object,default:null},concepts:{type:Array,required:!0},hierarchy:{type:Boolean,default:!0},itemListOptions:{type:Object,default:()=>({})}},emits:["select","open","close","update:modelValue"],setup(i,{emit:h}){const t=q({}),r=a=>{let s=[],e=a.concept,F=a.depth+1;if(e&&t[e.uri])for(let o of e.narrower||[]){let c={concept:o,depth:F,isSelected:C(i.modelValue,o)};s.push(c),s=s.concat(r(c))}return s},l=j(()=>{let a=[];for(let s of i.concepts){let e={concept:s,depth:0,isSelected:C(i.modelValue,s)};a.push(e),i.hierarchy&&(a=a.concat(r(e)))}return a}),k=a=>{t[a.uri]=!0,h("open",a)},n=a=>{var F,o,c,A,w;let s=(F=i.modelValue)==null?void 0:F.uri,e=s;for(;s;){const E=(o=l.value.find(S=>C(S.concept,{uri:s})))==null?void 0:o.concept;if(s!==e&&C(E,a))return;s=(w=((c=E==null?void 0:E.ancestors)==null?void 0:c[0])||((A=E==null?void 0:E.broader)==null?void 0:A[0]))==null?void 0:w.uri}delete t[a.uri],h("close",a)};return{items:l,isOpen:t,open:k,close:n,toggle:a=>{t[a.uri]?n(a):k(a)},jskos:O}},methods:{isUriInView(...i){return this.$refs.itemList.isUriInView(...i)},scrollToUri(...i){this.$refs.itemList.scrollToUri(...i)}}}),J=["onClick"];function K(i,h,t,r,l,k){var a;const n=v("arrow"),y=v("item-list");return p(),B(y,$({ref:"itemList"},i.itemListOptions,{class:{"jskos-vue-conceptTree":!0,"jskos-vue-conceptTree-noHierarchy":!i.hierarchy},items:i.items,"item-property":"concept","highlight-by-uri":(a=i.modelValue)!=null&&a.uri?{[i.modelValue.uri]:!0}:{},onSelect:h[0]||(h[0]=s=>{i.$emit("select",s),i.$emit("update:modelValue",s.item)})}),{beforeItem:d(({item:s})=>[(p(!0),g(L,null,V(s.depth,e=>(p(),g("div",{key:e,class:"jskos-vue-conceptTree-depthSpacer"}))),128)),i.hierarchy?(p(),g("div",{key:0,class:"jskos-vue-conceptTree-arrow",onClick:f(e=>i.toggle(s.concept),["stop"])},[s.concept&&s.concept.narrower&&s.concept.narrower.length!==0?(p(),B(n,{key:0,direction:i.isOpen[s.concept.uri]?"down":"right",clickable:!0},null,8,["direction"])):D("",!0)],8,J)):D("",!0),u(i.$slots,"beforeItem",{item:s.concept})]),afterItem:d(({item:s})=>[u(i.$slots,"afterItem",{item:s.concept})]),beforeList:d(()=>[u(i.$slots,"beforeList")]),afterList:d(()=>[u(i.$slots,"afterList")]),_:3},16,["class","items","highlight-by-uri"])}const z=T(R,[["render",K]]),Y=_("",13),H=["onClick"],W=["onClick"],G={key:1},Q=_("",1),ps=JSON.parse('{"title":"ConceptTree","description":"","frontmatter":{},"headers":[],"relativePath":"components/ConceptTree.md","filePath":"components/ConceptTree.md"}'),X={name:"components/ConceptTree.md"},Es=Object.assign(X,{setup(i){let h;const t=q({scheme:null,async loadScheme(){this.scheme=(await h.getSchemes({params:{uri:"https://www.ixtheo.de/classification/"}}))[0]},concepts:null,async loadConcepts(){this.concepts=b(await this.scheme._getTop())},async loadNarrower(l){l.narrower&&!l.narrower.includes(null)||(l.narrower=b(await l._getNarrower()))},selected:null});P(async()=>{h=M.initializeRegistry({provider:"ConceptApi",api:"https://coli-conc.gbv.de/api/"}),await t.loadScheme(),await t.loadConcepts()});const r=(...l)=>window.alert(...l);return(l,k)=>(p(),g("div",null,[Y,m("p",null," Selected: "+x(t.selected&&t.selected.uri||"none"),1),t.concepts?(p(),B(z,{key:0,modelValue:t.selected,"onUpdate:modelValue":k[0]||(k[0]=n=>t.selected=n),style:{height:"400px",overflow:"auto",border:"2px solid #0001"},concepts:t.concepts,onOpen:k[1]||(k[1]=n=>t.loadNarrower(n))},{beforeItem:d(({item:n})=>[m("span",{class:"opacity-hover",style:{"margin-right":"5px"},onClick:f(y=>r(`Clicked on Star for item ${n.uri}`),["stop"])}," ⭐️ ",8,H)]),afterItem:d(({item:n})=>[m("div",{class:"opacity-hover",style:{position:"absolute",width:"20px",right:"2px",top:"50%",transform:"translateY(-50%)"},onClick:f(y=>r(`Clicked on Rocket for item ${n.uri}`),["stop"])}," 🚀 ",8,W)]),_:1},8,["modelValue","concepts"])):(p(),g("div",G," Loading concepts... ")),Q]))}});export{ps as __pageData,Es as default}; diff --git a/dev/assets/components_ItemDetails.md.DiNwATlP.js b/dev/assets/components_ItemDetails.md.DiNwATlP.js new file mode 100644 index 0000000..8dd7960 --- /dev/null +++ b/dev/assets/components_ItemDetails.md.DiNwATlP.js @@ -0,0 +1,274 @@ +import{I as d,a as g}from"./chunks/ItemDetails.CU_pZE7t.js";import{u as y}from"./chunks/style.DttjXGKa.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.DOrQYd6A.js";import"./chunks/ItemName.BXFfuZjO.js";import"./chunks/utils.Cs71LNG2.js";import"./chunks/shared.l0sNRNKZ.js";import"./chunks/ItemList.DU0iaMN_.js";import"./chunks/LoadingIndicator.BIFdSjTT.js";import"./chunks/vue-scrollto.FOkUA__D.js";import"./chunks/AutoLink.DNBaALqq.js";import"./chunks/LicenseInfo.DPKbVdVS.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/dev/assets/components_ItemDetails.md.DiNwATlP.lean.js b/dev/assets/components_ItemDetails.md.DiNwATlP.lean.js new file mode 100644 index 0000000..88d7c16 --- /dev/null +++ b/dev/assets/components_ItemDetails.md.DiNwATlP.lean.js @@ -0,0 +1 @@ +import{I as d,a as g}from"./chunks/ItemDetails.CU_pZE7t.js";import{u as y}from"./chunks/style.DttjXGKa.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.DOrQYd6A.js";import"./chunks/ItemName.BXFfuZjO.js";import"./chunks/utils.Cs71LNG2.js";import"./chunks/shared.l0sNRNKZ.js";import"./chunks/ItemList.DU0iaMN_.js";import"./chunks/LoadingIndicator.BIFdSjTT.js";import"./chunks/vue-scrollto.FOkUA__D.js";import"./chunks/AutoLink.DNBaALqq.js";import"./chunks/LicenseInfo.DPKbVdVS.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/dev/assets/components_LicenseInfo.md.BtXC7hMx.js b/dev/assets/components_LicenseInfo.md.BtXC7hMx.js new file mode 100644 index 0000000..ff2e98f --- /dev/null +++ b/dev/assets/components_LicenseInfo.md.BtXC7hMx.js @@ -0,0 +1,30 @@ +import{L as a}from"./chunks/LicenseInfo.DPKbVdVS.js";import{c as n,I as e,k as l,a1 as s,o as t}from"./chunks/framework.DOrQYd6A.js";import"./chunks/jskos-tools.CpjLtWvA.js";import"./chunks/AutoLink.DNBaALqq.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/"},{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"}}]};return(r,o)=>(t(),n("div",null,[p,e(l(a),{item:i}),h]))}});export{m as __pageData,u as default}; diff --git a/dev/assets/components_LicenseInfo.md.BtXC7hMx.lean.js b/dev/assets/components_LicenseInfo.md.BtXC7hMx.lean.js new file mode 100644 index 0000000..4699473 --- /dev/null +++ b/dev/assets/components_LicenseInfo.md.BtXC7hMx.lean.js @@ -0,0 +1 @@ +import{L as a}from"./chunks/LicenseInfo.DPKbVdVS.js";import{c as n,I as e,k as l,a1 as s,o as t}from"./chunks/framework.DOrQYd6A.js";import"./chunks/jskos-tools.CpjLtWvA.js";import"./chunks/AutoLink.DNBaALqq.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/"},{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"}}]};return(r,o)=>(t(),n("div",null,[p,e(l(a),{item:i}),h]))}});export{m as __pageData,u as default}; diff --git a/dev/assets/utilities_dragAndDrop.md.CekCEFBb.js b/dev/assets/utilities_dragAndDrop.md.CekCEFBb.js new file mode 100644 index 0000000..bb254bf --- /dev/null +++ b/dev/assets/utilities_dragAndDrop.md.CekCEFBb.js @@ -0,0 +1,116 @@ +import{I as D}from"./chunks/ItemName.BXFfuZjO.js";import{I as b}from"./chunks/ItemList.DU0iaMN_.js";import{I as A}from"./chunks/ItemDetails.CU_pZE7t.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.DOrQYd6A.js";import{b as _}from"./chunks/utils.Cs71LNG2.js";import"./chunks/jskos-tools.CpjLtWvA.js";import"./chunks/shared.l0sNRNKZ.js";import"./chunks/LoadingIndicator.BIFdSjTT.js";import"./chunks/vue-scrollto.FOkUA__D.js";import"./chunks/style.DttjXGKa.js";import"./chunks/AutoLink.DNBaALqq.js";import"./chunks/LicenseInfo.DPKbVdVS.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/dev/assets/utilities_dragAndDrop.md.CekCEFBb.lean.js b/dev/assets/utilities_dragAndDrop.md.CekCEFBb.lean.js new file mode 100644 index 0000000..586d3bd --- /dev/null +++ b/dev/assets/utilities_dragAndDrop.md.CekCEFBb.lean.js @@ -0,0 +1 @@ +import{I as D}from"./chunks/ItemName.BXFfuZjO.js";import{I as b}from"./chunks/ItemList.DU0iaMN_.js";import{I as A}from"./chunks/ItemDetails.CU_pZE7t.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.DOrQYd6A.js";import{b as _}from"./chunks/utils.Cs71LNG2.js";import"./chunks/jskos-tools.CpjLtWvA.js";import"./chunks/shared.l0sNRNKZ.js";import"./chunks/LoadingIndicator.BIFdSjTT.js";import"./chunks/vue-scrollto.FOkUA__D.js";import"./chunks/style.DttjXGKa.js";import"./chunks/AutoLink.DNBaALqq.js";import"./chunks/LicenseInfo.DPKbVdVS.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/dev/components/Arrow.html b/dev/components/Arrow.html index 62958ca..6c80cd8 100644 --- a/dev/components/Arrow.html +++ b/dev/components/Arrow.html @@ -34,7 +34,7 @@ <script setup> import { Arrow } from "jskos-vue" </script> - + \ No newline at end of file diff --git a/dev/components/AutoLink.html b/dev/components/AutoLink.html index 11a920d..6a48ad5 100644 --- a/dev/components/AutoLink.html +++ b/dev/components/AutoLink.html @@ -29,7 +29,7 @@ <script setup> import { AutoLink } from "jskos-vue" </script> - + \ No newline at end of file diff --git a/dev/components/ConceptTree.html b/dev/components/ConceptTree.html index f245715..a90adf1 100644 --- a/dev/components/ConceptTree.html +++ b/dev/components/ConceptTree.html @@ -21,7 +21,7 @@ - + @@ -103,7 +103,7 @@ opacity: 50%; } </style> - + \ No newline at end of file diff --git a/dev/components/ItemDetails.html b/dev/components/ItemDetails.html index fdc96e7..8dd5deb 100644 --- a/dev/components/ItemDetails.html +++ b/dev/components/ItemDetails.html @@ -12,7 +12,7 @@ - + @@ -22,8 +22,8 @@ - - + + @@ -301,7 +301,7 @@ style="flex: 0 0 280px; padding-left: 10px;" /> </div> </template> - + \ No newline at end of file diff --git a/dev/components/ItemList.html b/dev/components/ItemList.html index de7460f..dc2a979 100644 --- a/dev/components/ItemList.html +++ b/dev/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/dev/components/ItemName.html b/dev/components/ItemName.html index f1f33ff..ac028c8 100644 --- a/dev/components/ItemName.html +++ b/dev/components/ItemName.html @@ -101,7 +101,7 @@ concept3, ] </script> - + \ No newline at end of file diff --git a/dev/components/ItemSuggest.html b/dev/components/ItemSuggest.html index c5d8182..03e18f2 100644 --- a/dev/components/ItemSuggest.html +++ b/dev/components/ItemSuggest.html @@ -106,7 +106,7 @@ }) }) </script> - + \ No newline at end of file diff --git a/dev/components/LicenseInfo.html b/dev/components/LicenseInfo.html index 8b343f8..a885b3f 100644 --- a/dev/components/LicenseInfo.html +++ b/dev/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 ​

http://example.com/license/
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 Licensehttp://example.com/license-no-label/
vue
<script setup>
 import { LicenseInfo } from "jskos-vue"
 
 const item = {
@@ -29,6 +29,10 @@
     },
     {
       uri: "http://example.com/license/",
+      prefLabel: { en: "Example License" },
+    },
+    {
+      uri: "http://example.com/license-no-label/",
     },
   ],
   publisher: [
@@ -45,7 +49,7 @@
 <template>
   <license-info :item="item" />
 </template>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/dev/components/LoadingIndicator.html b/dev/components/LoadingIndicator.html
index 44792bb..163b1d8 100644
--- a/dev/components/LoadingIndicator.html
+++ b/dev/components/LoadingIndicator.html
@@ -32,7 +32,7 @@
 <script setup>
 import { LoadingIndicator } from "jskos-vue"
 </script>
- + \ No newline at end of file diff --git a/dev/components/Modal.html b/dev/components/Modal.html index f57bb6d..b0e1b54 100644 --- a/dev/components/Modal.html +++ b/dev/components/Modal.html @@ -77,7 +77,7 @@ const tabsModalShown = ref(false) </script> - + \ No newline at end of file diff --git a/dev/hashmap.json b/dev/hashmap.json index 8891f24..c9f7055 100644 --- a/dev/hashmap.json +++ b/dev/hashmap.json @@ -1 +1 @@ -{"components_itemname.md":"D-mEgfkg","components_loadingindicator.md":"-ILHUMZV","components_arrow.md":"q2TbEGBX","components_itemlist.md":"Dwa-NUNP","components_itemdetails.md":"BBvgW6lC","components_autolink.md":"Bs0OnNoN","utilities_addclickhandlers.md":"X88oUA2p","utilities_datetostring.md":"CMzX3h7W","utilities_draganddrop.md":"CW5p9yPY","utilities_debounce.md":"CP9fT378","components_itemsuggest.md":"C8O92N-K","components_licenseinfo.md":"BZvUeYAT","components_concepttree.md":"CLfJsrpc","index.md":"BZJXff3s","utilities_cdkregistrytosuggestfunction.md":"DHIyKyiy","components_modal.md":"CIBVDbqF"} +{"components_arrow.md":"q2TbEGBX","components_licenseinfo.md":"BtXC7hMx","components_itemdetails.md":"DiNwATlP","components_modal.md":"CIBVDbqF","components_itemname.md":"D-mEgfkg","components_autolink.md":"Bs0OnNoN","utilities_cdkregistrytosuggestfunction.md":"DHIyKyiy","utilities_datetostring.md":"CMzX3h7W","components_loadingindicator.md":"-ILHUMZV","components_itemlist.md":"Dwa-NUNP","utilities_debounce.md":"CP9fT378","index.md":"BZJXff3s","utilities_addclickhandlers.md":"X88oUA2p","components_itemsuggest.md":"C8O92N-K","utilities_draganddrop.md":"CekCEFBb","components_concepttree.md":"DXHV4NpZ"} diff --git a/dev/index.html b/dev/index.html index 04e3ce1..0389a19 100644 --- a/dev/index.html +++ b/dev/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/dev/utilities/addClickHandlers.html b/dev/utilities/addClickHandlers.html index 1cc99e8..c57f484 100644 --- a/dev/utilities/addClickHandlers.html +++ b/dev/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/dev/utilities/cdkRegistryToSuggestFunction.html b/dev/utilities/cdkRegistryToSuggestFunction.html index e6bef2b..148ed44 100644 --- a/dev/utilities/cdkRegistryToSuggestFunction.html +++ b/dev/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/dev/utilities/dateToString.html b/dev/utilities/dateToString.html index 430cd95..3c7c8a5 100644 --- a/dev/utilities/dateToString.html +++ b/dev/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/dev/utilities/debounce.html b/dev/utilities/debounce.html index de7f41f..614040c 100644 --- a/dev/utilities/debounce.html +++ b/dev/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/dev/utilities/dragAndDrop.html b/dev/utilities/dragAndDrop.html index 4c7d2f3..9e0146e 100644 --- a/dev/utilities/dragAndDrop.html +++ b/dev/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