@ulb-darmstadt/shacl-form 1.8.0 → 1.8.1

package/dist/theme.d.ts

@@ -12,7 +12,7 @@ export type Editor = HTMLElement & {
 export type InputListEntry = {
     value: Term | string;
     label?: string;
-    indent?: number;
+    children?: InputListEntry[];
 };
 export declare abstract class Theme {
     stylesheet: CSSStyleSheet;

package/dist/util.d.ts

@@ -6,8 +6,8 @@ export declare function findObjectValueByPredicate(quads: Quad[], predicate: str
 export declare function findObjectByPredicate(quads: Quad[], predicate: string, prefix?: string, languages?: string[]): Term | undefined;
 export declare function focusFirstInputElement(context: HTMLElement): void;
 export declare function findLabel(quads: Quad[], languages: string[]): string;
-export declare function createInputListEntries(subjects: Term[], shapesGraph: Store, languages: string[], indent?: number): InputListEntry[];
+export declare function createInputListEntries(subjects: Term[], shapesGraph: Store, languages: string[]): InputListEntry[];
 export declare function removePrefixes(id: string, prefixes: Prefixes): string;
-export declare function findInstancesOf(clazz: NamedNode, template: ShaclPropertyTemplate, indent?: number): InputListEntry[];
+export declare function findInstancesOf(clazz: NamedNode, template: ShaclPropertyTemplate): InputListEntry[];
 export declare function isURL(input: string): boolean;
 export declare function prioritizeByLanguage(languages: string[], text1?: Literal, text2?: Literal): Literal | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ulb-darmstadt/shacl-form",
-    "version": "1.8.0",
+    "version": "1.8.1",
     "description": "SHACL form generator",
     "main": "dist/form-default.js",
     "module": "dist/form-default.js",
@@ -10,7 +10,9 @@
         ".": {
             "import": "./dist/form-default.js",
             "types": "./dist/form-default.d.ts"
-        }
+        },
+        "./*.ts": "./src/*.ts",
+        "./plugins/*.ts": "./src/plugins/*.ts"
     },
     "files": [
         "dist",
@@ -45,7 +47,7 @@
     },
     "devDependencies": {
         "@types/jsonld": "^1.5.15",
-        "@types/leaflet": "^1.9.19",
+        "@types/leaflet": "^1.9.20",
         "@types/leaflet-editable": "^1.2.6",
         "@types/leaflet.fullscreen": "^3.0.2",
         "@types/mapbox__mapbox-gl-draw": "^1.4.9",
@@ -53,8 +55,8 @@
         "@types/uuid": "^10.0.0",
         "rollup-plugin-peer-deps-external": "^2.2.4",
         "typescript": "^5.8.3",
-        "vite": "^6.2.5",
-        "vite-plugin-dts": "^4.5.3"
+        "vite": "^7.0.4",
+        "vite-plugin-dts": "^4.5.4"
     },
     "dependencies": {
         "@mapbox/mapbox-gl-draw": "^1.5.0",
@@ -69,7 +71,7 @@
         "uuid": "^11.1.0"
     },
     "peerDependencies": {
-        "@ro-kit/ui-widgets": "^0.0.27",
+        "@ro-kit/ui-widgets": "^0.0.28",
         "mdui": "^2.1.4"
     }
 }

package/src/constants.ts

@@ -17,9 +17,7 @@ export const DATA_GRAPH = DataFactory.namedNode('loaded-data')
 export const RDF_PREDICATE_TYPE = DataFactory.namedNode(PREFIX_RDF + 'type')
 export const DCTERMS_PREDICATE_CONFORMS_TO = DataFactory.namedNode(PREFIX_DCTERMS + 'conformsTo')
 export const RDFS_PREDICATE_SUBCLASS_OF = DataFactory.namedNode(PREFIX_RDFS + 'subClassOf')
-export const SKOS_PREDICATE_BROADER = DataFactory.namedNode(PREFIX_SKOS + 'broader')
 export const OWL_PREDICATE_IMPORTS = DataFactory.namedNode(PREFIX_OWL + 'imports')
-export const OWL_OBJECT_NAMED_INDIVIDUAL = DataFactory.namedNode(PREFIX_OWL + 'NamedIndividual')
 export const SHACL_OBJECT_NODE_SHAPE = DataFactory.namedNode(PREFIX_SHACL + 'NodeShape')
 export const SHACL_OBJECT_IRI = DataFactory.namedNode(PREFIX_SHACL + 'IRI')
 export const SHACL_PREDICATE_PROPERTY = DataFactory.namedNode(PREFIX_SHACL + 'property')

package/src/property.ts

@@ -1,4 +1,4 @@
-import { BlankNode, DataFactory, NamedNode, Quad, Store } from 'n3'
+import { BlankNode, DataFactory, Literal, NamedNode, Quad, Store } from 'n3'
 import { Term } from '@rdfjs/types'
 import { ShaclNode } from './node'
 import { createShaclOrConstraint, resolveShaclOrConstraintOnProperty } from './constraints'
@@ -103,7 +103,7 @@ export class ShaclProperty extends HTMLElement {
         } else {
             // check if value is part of the data graph. if not, create a linked resource
             let linked = false
-            if (value) {
+            if (value && !(value instanceof Literal)) {
                 const clazz = this.getRdfClassToLinkOrCreate()
                 if (clazz && this.template.config.store.countQuads(value, RDF_PREDICATE_TYPE, clazz, DATA_GRAPH) === 0) {
                     // value is not in data graph, so must be a link in the shapes graph

package/src/theme.ts

@@ -6,7 +6,7 @@ import { ShaclPropertyTemplate } from './property-template'
 import css from './styles.css?raw'
 
 export type Editor = HTMLElement & { value: string, type?: string, shaclDatatype?: NamedNode<string>, binaryData?: string, checked?: boolean, disabled?: boolean }
-export type InputListEntry = { value: Term | string, label?: string, indent?: number }
+export type InputListEntry = { value: Term | string, label?: string, children?: InputListEntry[] }
 
 export abstract class Theme {
     stylesheet: CSSStyleSheet

package/src/themes/default.ts

@@ -1,10 +1,11 @@
 import { Term } from '@rdfjs/types'
 import { ShaclPropertyTemplate } from "../property-template"
 import { Editor, InputListEntry, Theme } from "../theme"
-import { PREFIX_XSD } from '../constants'
-import { Literal } from 'n3'
+import { PREFIX_SHACL, PREFIX_XSD } from '../constants'
+import { Literal, NamedNode } from 'n3'
 import { Term as N3Term }  from 'n3'
 import css from './default.css?raw'
+import { RokitSelect } from '@ro-kit/ui-widgets'
 
 export class DefaultTheme extends Theme {
     idCtr = 0
@@ -30,6 +31,8 @@ export class DefaultTheme extends Theme {
         }
         if (template?.nodeKind) {
             editor.dataset.nodeKind = template.nodeKind.value
+        } else if (value instanceof NamedNode) {
+            editor.dataset.nodeKind = PREFIX_SHACL + 'IRI'
         }
         if (template?.hasValue || template?.readonly) {
             editor.disabled = true
@@ -197,43 +200,39 @@ export class DefaultTheme extends Theme {
     }
 
     createListEditor(label: string, value: Term | null, required: boolean, listEntries: InputListEntry[], template?: ShaclPropertyTemplate): HTMLElement {
-        const editor = document.createElement('select')
+        const editor = new RokitSelect()
+        editor.dense = true
+        editor.clearable = true
+        editor.collapse = true
         const result = this.createDefaultTemplate(label, null, required, editor, template)
-        let addEmptyOption = true
+        const ul = document.createElement('ul')
     
-        for (const item of listEntries) {
-            const option = document.createElement('option')
-            let itemValue = ''
-            if (typeof item.value === 'string') {
-                itemValue = item.value
+        const appendListEntry = (entry: InputListEntry, parent: HTMLUListElement) => {
+            const li = document.createElement('li')
+            let entryValue = ''
+            if (typeof entry.value === 'string') {
+                entryValue = entry.value
             } else {
                 // this is needed for typed rdf literals
-                itemValue = (item.value as N3Term).id
+                entryValue = (entry.value as N3Term).id
             }
-            option.innerHTML = item.label ? item.label : itemValue
-            option.value = itemValue
-            if (item.indent) {
-                for (let i = 0; i < item.indent; i++) {
-                    option.innerHTML = '&#160;&#160;' + option.innerHTML
+            li.innerText = entry.label ? entry.label : entryValue
+            li.dataset.value = entryValue
+            parent.appendChild(li)
+            if (entry.children?.length) {
+                const ul = document.createElement('ul')
+                li.appendChild(ul)
+                for (const child of entry.children) {
+                    appendListEntry(child, ul)
                 }
             }
-            if (value && value.value === itemValue) {
-                option.selected = true
-            }
-            if (itemValue === '') {
-                addEmptyOption = false
-            }
-            editor.appendChild(option)
-        }
-        if (addEmptyOption) {
-            // add an empty element
-            const emptyOption = document.createElement('option')
-            emptyOption.value = ''
-            if (!value) {
-                emptyOption.selected = true
-            }
-            editor.prepend(emptyOption)
         }
+
+        for (const item of listEntries) {
+            appendListEntry(item, ul)
+        }
+
+        editor.appendChild(ul)
         if (value) {
             editor.value = value.value
         }

package/src/themes/material.ts

@@ -1,12 +1,13 @@
 import { ShaclPropertyTemplate } from '../property-template'
 import { Term } from '@rdfjs/types'
-import { Button, TextField, Select, MenuItem, Checkbox } from 'mdui'
+import { Button, TextField, Checkbox } from 'mdui'
 import { Theme } from '../theme'
 import { InputListEntry, Editor } from '../theme'
-import { Literal } from 'n3'
+import { Literal, NamedNode } from 'n3'
 import { Term as N3Term }  from 'n3'
 import css from './material.css?raw'
-import { PREFIX_XSD } from '../constants'
+import { PREFIX_SHACL, PREFIX_XSD } from '../constants'
+import { RokitSelect } from '@ro-kit/ui-widgets'
 
 export class MaterialTheme extends Theme {
     constructor() {
@@ -29,6 +30,8 @@ export class MaterialTheme extends Theme {
         }
         if (template?.nodeKind) {
             editor.dataset.nodeKind = template.nodeKind.value
+        } else if (value instanceof NamedNode) {
+            editor.dataset.nodeKind = PREFIX_SHACL + 'IRI'
         }
         if (template?.hasValue || template?.readonly) {
             editor.disabled = true
@@ -92,47 +95,38 @@ export class MaterialTheme extends Theme {
     }
 
     createListEditor(label: string, value: Term | null, required: boolean, listEntries: InputListEntry[], template?: ShaclPropertyTemplate): HTMLElement {
-        const editor = new Select()
-        editor.variant = 'outlined'
-        editor.label = label
-        editor.helper = template?.description?.value
+        const editor = new RokitSelect()
+        editor.dense = true
         editor.clearable = true
-        // @ts-ignore
-        const result = this.createDefaultTemplate('', null, required, editor, template)
-        let addEmptyOption = true
+        const result = this.createDefaultTemplate(label, null, required, editor, template)
+        const ul = document.createElement('ul')
     
-        for (const item of listEntries) {
-            const option = new MenuItem()
-            let itemValue = ''
-            if (typeof item.value === 'string') {
-                itemValue = item.value
+        const appendListEntry = (entry: InputListEntry, parent: HTMLUListElement) => {
+            const li = document.createElement('li')
+            let entryValue = ''
+            if (typeof entry.value === 'string') {
+                entryValue = entry.value
             } else {
                 // this is needed for typed rdf literals
-                itemValue = (item.value as N3Term).id
+                entryValue = (entry.value as N3Term).id
             }
-            const itemLabel = item.label ? item.label : itemValue
-            option.value = itemValue
-            option.textContent = itemLabel || itemValue
-            // if (value && value.value === itemValue) {
-            //     option.selected = true
-            // }
-            if (item.indent) {
-                for (let i = 0; i < item.indent; i++) {
-                    option.innerHTML = '&#160;&#160;' + option.innerHTML
+            li.innerText = entry.label ? entry.label : entryValue
+            li.dataset.value = entryValue
+            parent.appendChild(li)
+            if (entry.children?.length) {
+                const ul = document.createElement('ul')
+                li.appendChild(ul)
+                for (const child of entry.children) {
+                    appendListEntry(child, ul)
                 }
             }
-            if (itemValue === '') {
-                addEmptyOption = false
-                option.ariaLabel = 'blank'
-            }
-            editor.appendChild(option)
         }
-        if (addEmptyOption) {
-            // add an empty element
-            const empty = new MenuItem()
-            empty.ariaLabel = 'blank'
-            editor.prepend(empty)
+
+        for (const item of listEntries) {
+            appendListEntry(item, ul)
         }
+
+        editor.appendChild(ul)
         if (value) {
             editor.value = value.value
         }

package/src/util.ts

@@ -1,5 +1,5 @@
 import { Literal, NamedNode, Prefixes, Quad, Store } from 'n3'
-import { DATA_GRAPH, OWL_OBJECT_NAMED_INDIVIDUAL, PREFIX_FOAF, PREFIX_RDFS, PREFIX_SHACL, PREFIX_SKOS, RDFS_PREDICATE_SUBCLASS_OF, RDF_PREDICATE_TYPE, SHAPES_GRAPH, SKOS_PREDICATE_BROADER } from './constants'
+import { DATA_GRAPH, PREFIX_FOAF, PREFIX_RDFS, PREFIX_SHACL, PREFIX_SKOS, RDFS_PREDICATE_SUBCLASS_OF, RDF_PREDICATE_TYPE, SHAPES_GRAPH } from './constants'
 import { Term } from '@rdfjs/types'
 import { InputListEntry } from './theme'
 import { ShaclPropertyTemplate } from './property-template'
@@ -53,10 +53,10 @@ export function findLabel(quads: Quad[], languages: string[]): string {
     findObjectValueByPredicate(quads, 'name', PREFIX_FOAF, languages)
 }
 
-export function createInputListEntries(subjects: Term[], shapesGraph: Store, languages: string[], indent?: number): InputListEntry[] {
+export function createInputListEntries(subjects: Term[], shapesGraph: Store, languages: string[]): InputListEntry[] {
     const entries: InputListEntry[] = []
     for (const subject of subjects) {
-        entries.push({ value: subject, label: findLabel(shapesGraph.getQuads(subject, null, null, null), languages), indent: indent })
+        entries.push({ value: subject, label: findLabel(shapesGraph.getQuads(subject, null, null, null), languages), children: [] })
     }
     return entries
 }
@@ -82,7 +82,7 @@ function findClassInstancesFromOwlImports(clazz: NamedNode, context: ShaclNode |
     }
 }
 
-export function findInstancesOf(clazz: NamedNode, template: ShaclPropertyTemplate, indent = 0): InputListEntry[] {
+export function findInstancesOf(clazz: NamedNode, template: ShaclPropertyTemplate): InputListEntry[] {
     let instances: Term[]
     // if template has sh:in, then just use that as class instances
     if (template.shaclIn) {
@@ -97,16 +97,24 @@ export function findInstancesOf(clazz: NamedNode, template: ShaclPropertyTemplat
         findClassInstancesFromOwlImports(clazz, template, template.config.store, instances)
     }
 
-    const entries = createInputListEntries(instances, template.config.store, template.config.languages, indent)
+    const entries = createInputListEntries(instances, template.config.store, template.config.languages)
     // build inheritance tree only if sh:in is not defined
     if (template.shaclIn === undefined) {
+        // find sub classes via rdfs:subClassOf
         for (const subClass of template.config.store.getSubjects(RDFS_PREDICATE_SUBCLASS_OF, clazz, null)) {
-            entries.push(...findInstancesOf(subClass as NamedNode, template, indent + 1))
-        }
-        if (template.config.store.getQuads(clazz, RDF_PREDICATE_TYPE, OWL_OBJECT_NAMED_INDIVIDUAL, null).length > 0) {
-            entries.push(...createInputListEntries([ clazz ], template.config.store, template.config.languages, indent))
-            for (const subClass of template.config.store.getSubjects(SKOS_PREDICATE_BROADER, clazz, null)) {
-                entries.push(...findInstancesOf(subClass as NamedNode, template, indent + 1))
+            const subClassIntances = findInstancesOf(subClass as NamedNode, template)
+            for (const subClassIntance of subClassIntances) {
+                let isChild = false
+                // check if found sub class also is an instance of its super class. if yes, add it to the children of the InputListEntry.
+                for (const entry of entries) {
+                    if (template.config.store.countQuads(subClassIntance.value, RDF_PREDICATE_TYPE, entry.value, null) > 0) {
+                        entry.children!.push(subClassIntance)
+                        isChild = true
+                    }
+                }
+                if (!isChild) {
+                    entries.push(subClassIntance)                
+                }
             }
         }
     }

package/dist/node-template.d.ts

@@ -1,17 +0,0 @@
-import { BlankNode, NamedNode, Quad } from 'n3';
-import { Config } from './config';
-import { Term } from '@rdfjs/types';
-export declare class ShaclNodeTemplate {
-    properties: (NamedNode | BlankNode)[];
-    node: NamedNode | undefined;
-    shaclAnd: string | undefined;
-    shaclOr: Term[] | undefined;
-    shaclXone: Term[] | undefined;
-    targetClass: NamedNode | undefined;
-    owlImports: NamedNode[];
-    config: Config;
-    extendedShapes: NamedNode[];
-    constructor(quads: Quad[], config: Config);
-    merge(quads: Quad[]): ShaclNodeTemplate;
-    clone(): ShaclNodeTemplate;
-}

package/src/node-template.ts

@@ -1,82 +0,0 @@
-import { BlankNode, NamedNode, Quad } from "n3"
-import { Config } from "./config"
-import { OWL_PREDICATE_IMPORTS, PREFIX_SHACL } from "./constants";
-import { Term } from "@rdfjs/types";
-
-const mappers: Record<string, (template: ShaclNodeTemplate, term: Term) => void> = {
-    [`${PREFIX_SHACL}property`]:     (template, term) => { template.properties.push(term as (BlankNode | NamedNode)) },
-    [`${PREFIX_SHACL}and`]:          (template, term) => { template.shaclAnd = term.value },
-    [`${PREFIX_SHACL}node`]:         (template, term) => { template.node = term as NamedNode },
-    [`${PREFIX_SHACL}targetClass`]:  (template, term) => { template.targetClass = term as NamedNode },
-    [`${PREFIX_SHACL}or`]:           (template, term) => {
-        const list = template.config.lists[term.value]
-        if (list?.length) {
-            template.shaclOr = list
-        } else {
-            console.error('list for sh:or not found:', term.value, 'existing lists:', template.config.lists)
-        }
-    },
-    [`${PREFIX_SHACL}xone`]:         (template, term) => {
-        const list = template.config.lists[term.value]
-        if (list?.length) {
-            template.shaclXone = list
-        } else {
-            console.error('list for sh:xone not found:', term.value, 'existing lists:', template.config.lists)
-        }
-    },
-    [OWL_PREDICATE_IMPORTS.id]:      (template, term) => { template.owlImports.push(term as NamedNode) }
-}
-
-export class ShaclNodeTemplate {
-    properties: (NamedNode | BlankNode)[] = []
-    node: NamedNode | undefined
-    shaclAnd: string | undefined    
-    shaclOr: Term[] | undefined
-    shaclXone: Term[] | undefined
-    targetClass: NamedNode | undefined
-
-    owlImports: NamedNode[] = []
-    config: Config
-    extendedShapes: NamedNode[] = []
-
-    constructor(quads: Quad[], config: Config) {
-        this.config = config
-        this.merge(quads)
-    }
-
-    merge(quads: Quad[]): ShaclNodeTemplate {
-        for (const quad of quads) {
-            mappers[quad.predicate.id]?.call(this, this, quad.object)
-        }
-        // resolve extended shapes
-        if (this.node || this.shaclAnd) {
-            if (this.node) {
-                this.extendedShapes.push(this.node)
-            }
-            if (this.shaclAnd) {
-                const list = this.config.lists[this.shaclAnd]
-                if (list?.length) {
-                    for (const node of list) {
-                        this.extendedShapes.push(node as NamedNode)
-                    }
-                }
-            }
-        }
-        return this
-    }
-
-    clone(): ShaclNodeTemplate {
-        const copy = Object.assign({}, this)
-        // arrays are not cloned but referenced, so create them manually
-        copy.owlImports = [ ...this.owlImports ]
-        if (this.shaclOr) {
-            copy.shaclOr = [ ...this.shaclOr ]
-        }
-        if (this.shaclXone) {
-            copy.shaclXone = [ ...this.shaclXone ]
-        }
-        copy.merge = this.merge.bind(copy)
-        copy.clone = this.clone.bind(copy)
-        return copy
-    }
-}