@ulb-darmstadt/shacl-form 1.6.2 → 1.6.3

package/src/property.ts

@@ -0,0 +1,188 @@
+import { BlankNode, DataFactory, NamedNode, Store } from 'n3'
+import { Term } from '@rdfjs/types'
+import { ShaclNode } from './node'
+import { focusFirstInputElement } from './util'
+import { createShaclOrConstraint, resolveShaclOrConstraint } from './constraints'
+import { Config } from './config'
+import { ShaclPropertyTemplate } from './property-template'
+import { Editor, fieldFactory } from './theme'
+import { toRDF } from './serialize'
+import { findPlugin } from './plugin'
+
+export class ShaclProperty extends HTMLElement {
+    template: ShaclPropertyTemplate
+    addButton: HTMLElement | undefined
+
+    constructor(shaclSubject: BlankNode | NamedNode, parent: ShaclNode, config: Config, valueSubject?: NamedNode | BlankNode) {
+        super()
+        this.template = new ShaclPropertyTemplate(config.shapesGraph.getQuads(shaclSubject, null, null, null), parent, config)
+
+        if (this.template.order !== undefined) {
+            this.style.order = `${this.template.order}`
+        }
+        if (this.template.cssClass) {
+            this.classList.add(this.template.cssClass)
+        }
+
+        if (config.editMode) {
+            this.addButton = document.createElement('a')
+            this.addButton.innerText = this.template.label
+            this.addButton.title = 'Add ' + this.template.label
+            this.addButton.classList.add('control-button', 'add-button')
+            this.addButton.addEventListener('click', _ => {
+                const instance = this.addPropertyInstance()
+                instance.classList.add('fadeIn')
+                this.updateControls()
+                focusFirstInputElement(instance)
+                setTimeout(() => {
+                    instance.classList.remove('fadeIn')
+                }, 200)
+            })
+            this.appendChild(this.addButton)
+        }
+
+        // bind existing values
+        if (this.template.path) {
+            const values = valueSubject ? config.dataGraph.getQuads(valueSubject, this.template.path, null, null) : []
+            let valuesContainHasValue = false
+            for (const value of values) {
+                this.addPropertyInstance(value.object)
+                if (this.template.hasValue && value.object.equals(this.template.hasValue)) {
+                    valuesContainHasValue = true
+                }
+            }
+            if (config.editMode && this.template.hasValue && !valuesContainHasValue) {
+                // sh:hasValue is defined in shapes graph, but does not exist in data graph, so force it
+                this.addPropertyInstance(this.template.hasValue)
+            }
+        }
+
+        if (config.editMode) {
+            this.addEventListener('change', () => { this.updateControls() })
+            this.updateControls()
+        }
+
+        if (this.template.extendedShapes?.length && this.template.config.attributes.collapse !== null && (!this.template.maxCount || this.template.maxCount > 1)) {
+            // in view mode, show collapsible only when we have something to show
+            if (config.editMode || this.childElementCount > 0) {
+                const collapsible = this
+                collapsible.classList.add('collapsible')
+                if (this.template.config.attributes.collapse === 'open') {
+                    collapsible.classList.add('open')
+                }
+                const activator = document.createElement('h1')
+                activator.classList.add('activator')
+                activator.innerText = this.template.label
+                activator.addEventListener('click', () => {
+                    collapsible.classList.toggle('open')
+                })
+                this.prepend(activator)
+            }
+        }
+    }
+
+    addPropertyInstance(value?: Term): HTMLElement {
+        let instance: HTMLElement
+        if (this.template.shaclOr?.length) {
+            if (value) {
+                instance = createPropertyInstance(resolveShaclOrConstraint(this.template, value), value, true)
+            } else {
+                instance = createShaclOrConstraint(this.template.shaclOr, this, this.template.config)
+                appendRemoveButton(instance, '')
+            }
+        } else {
+            instance = createPropertyInstance(this.template, value)
+        }
+        if (this.template.config.editMode) {
+            this.insertBefore(instance, this.addButton!)
+        } else {
+            this.appendChild(instance)
+        }
+        return instance
+    }
+
+    updateControls() {
+        let instanceCount = this.querySelectorAll(":scope > .property-instance, :scope > .shacl-or-constraint, :scope > shacl-node").length
+        if (instanceCount === 0 && (!this.template.extendedShapes?.length || (this.template.minCount !== undefined && this.template.minCount > 0))) {
+            this.addPropertyInstance()
+            instanceCount = this.querySelectorAll(":scope > .property-instance, :scope > .shacl-or-constraint, :scope > shacl-node").length
+        }
+        let mayRemove: boolean
+        if (this.template.minCount !== undefined) {
+            mayRemove = instanceCount > this.template.minCount
+        } else {
+            mayRemove = (this.template.extendedShapes && this.template.extendedShapes.length > 0) || instanceCount > 1
+        }
+
+        const mayAdd = this.template.maxCount === undefined || instanceCount < this.template.maxCount
+        this.classList.toggle('may-remove', mayRemove)
+        this.classList.toggle('may-add', mayAdd)
+    }
+
+    toRDF(graph: Store, subject: NamedNode | BlankNode) {
+        for (const instance of this.querySelectorAll(':scope > .property-instance')) {
+            const pathNode = DataFactory.namedNode((instance as HTMLElement).dataset.path!)
+            if (instance.firstChild instanceof ShaclNode) {
+                const quadCount = graph.size
+                const shapeSubject = instance.firstChild.toRDF(graph)
+                graph.addQuad(subject, pathNode, shapeSubject)
+            } else {
+                const editor = instance.querySelector('.editor') as Editor
+                const value = toRDF(editor)
+                if (value) {
+                    graph.addQuad(subject, pathNode, value)
+                }
+            }
+        }
+    }
+}
+
+export function createPropertyInstance(template: ShaclPropertyTemplate, value?: Term, forceRemovable = false): HTMLElement {
+    let instance: HTMLElement
+    if (template.extendedShapes?.length) {
+        instance = document.createElement('div')
+        instance.classList.add('property-instance')
+        for (const node of template.extendedShapes) {
+            instance.appendChild(new ShaclNode(node, template.config, value as NamedNode | BlankNode | undefined, template.parent, template.nodeKind, template.label))
+        }
+    } else {
+        const plugin = findPlugin(template.path, template.datatype?.value)
+        if (plugin) {
+            if (template.config.editMode) {
+                instance = plugin.createEditor(template, value)
+            } else {
+                instance = plugin.createViewer(template, value!)
+            }
+        } else {
+            instance = fieldFactory(template, value || null)
+        }
+        instance.classList.add('property-instance')
+    }
+    if (template.config.editMode) {
+        appendRemoveButton(instance, template.label, forceRemovable)
+    }
+    instance.dataset.path = template.path
+    return instance
+}
+
+function appendRemoveButton(instance: HTMLElement, label: string, forceRemovable = false) {
+    const removeButton = document.createElement('a')
+    removeButton.innerText = '\u00d7'
+    removeButton.classList.add('control-button', 'btn', 'remove-button')
+    removeButton.title = 'Remove ' + label
+    removeButton.addEventListener('click', _ => {
+        instance.classList.remove('fadeIn')
+        instance.classList.add('fadeOut')
+        setTimeout(() => {
+            const parent = instance.parentElement
+            instance.remove()
+            parent?.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }))
+        }, 200)
+    })
+    if (forceRemovable) {
+        removeButton.classList.add('persistent')
+    }
+    instance.appendChild(removeButton)
+}
+
+window.customElements.define('shacl-property', ShaclProperty)

package/src/serialize.ts

@@ -0,0 +1,76 @@
+import { DataFactory, NamedNode, Writer, Quad, Literal, Prefixes } from 'n3'
+import { PREFIX_XSD, RDF_PREDICATE_TYPE, PREFIX_SHACL } from './constants'
+import { Editor } from './theme'
+import { NodeObject } from 'jsonld'
+
+export function serialize(quads: Quad[], format: string, prefixes?: Prefixes): string {
+    if (format === 'application/ld+json') {
+        return serializeJsonld(quads)
+    } else {
+        const writer = new Writer({ format: format, prefixes: prefixes })
+        writer.addQuads(quads)
+        let serialized = ''
+        writer.end((error, result) => {
+            if (error) {
+                console.error(error)
+            }
+            serialized = result
+        })
+        return serialized
+    }
+}
+
+function serializeJsonld(quads: Quad[]): string {
+    const triples: NodeObject[] = []
+    for (const quad of quads) {
+        const triple: NodeObject = { '@id': quad.subject.id }
+  
+        if (quad.predicate === RDF_PREDICATE_TYPE) {
+          triple['@type'] = quad.object.id
+        } else {
+            let object: string | {} = quad.object.value
+            if (quad.object instanceof Literal) {
+                if (quad.object.language) {
+                    object = { '@language': quad.object.language, '@value': quad.object.value }
+                } else if (quad.object.datatype && quad.object.datatype.value !== `${PREFIX_XSD}#string`) {
+                    object = { '@type': quad.object.datatype.value, '@value': quad.object.value }
+                }
+            } else {
+                object = { '@id': quad.object.id }
+            }
+            triple[quad.predicate.value] = object
+        }
+        triples.push(triple)
+    }
+    return JSON.stringify(triples)
+}
+
+export function toRDF(editor: Editor): Literal | NamedNode | undefined {
+    let languageOrDatatype: NamedNode<string> | string | undefined = editor['shaclDatatype']
+    let value: number | string = editor.value
+    if (value) {
+        if (editor.dataset.class || editor.dataset.nodeKind === PREFIX_SHACL + 'IRI') {
+            return DataFactory.namedNode(value)
+        } else {
+            if (editor.dataset.lang) {
+                languageOrDatatype = editor.dataset.lang
+            }
+            else if (editor['type'] === 'number') {
+                value = parseFloat(value)
+            }
+            else if (editor['type'] === 'file' && editor['binaryData']) {
+                value = editor['binaryData']
+            }
+            else if (editor['type'] === 'datetime-local') {
+                // if seconds in value are 0, the input field omits them which is then not a valid xsd:dateTime
+                value = new Date(value).toISOString().slice(0, 19)
+            }
+            return DataFactory.literal(value, languageOrDatatype)
+        }
+    } else if (editor['type'] === 'checkbox' || editor.getAttribute('type') === 'checkbox') {
+        // emit boolean 'false' only when required
+        if (editor['checked'] || parseInt(editor.dataset.minCount || '0') > 0) {
+            return DataFactory.literal(editor['checked'] ? 'true' : 'false', languageOrDatatype)
+        }
+    }
+}

package/src/shacl-engine.d.ts

@@ -0,0 +1,2 @@
+declare module 'shacl-engine'
+declare module '@rdfjs/data-model'

package/src/styles.css

@@ -0,0 +1,59 @@
+form { box-sizing: border-box; display:block; --label-width: 8em; --caret-size: 10px; }
+form.mode-edit { padding-left: 1em;  }
+form *, form ::after, form ::before { box-sizing: inherit; }
+shacl-node, .shacl-group { display: flex; flex-direction: column; width: 100%; position: relative; }
+shacl-node .control-button { text-decoration: none; cursor: pointer; border: 1px solid transparent; border-radius: 4px; padding: 2px 4px; }
+shacl-node .control-button:hover { border-color: inherit; }
+shacl-node .remove-button { margin-left: 4px; }
+shacl-node .add-button { font-size: 0.8rem; color: #555; margin: 4px 24px 0 0; }
+shacl-node .add-button:before { content: '+'; margin-right: 0.2em; }
+shacl-node .add-button:hover { color: inherit; }
+shacl-node h1 { font-size: 1.1rem; border-bottom: 1px solid; margin-top: 4px; color: #555; }
+shacl-property { display: flex; flex-direction: column; align-items: end; position: relative; }
+shacl-property:not(.may-add) > .add-button { display: none; }
+shacl-property:not(.may-remove) > .property-instance > .remove-button:not(.persistent) { visibility: hidden; }
+shacl-property:not(.may-remove) > .shacl-or-constraint > .remove-button:not(.persistent) { visibility: hidden; }
+.shacl-group { margin-bottom: 1em; padding-bottom: 1em; }
+.mode-view .shacl-group:not(:has(shacl-property)) { display: none; }
+.property-instance, .shacl-or-constraint { display: flex; align-items: flex-start; padding: 4px 0; width: 100%; position: relative; }
+.shacl-or-constraint label { display: inline-block; word-break: break-word; width: var(--label-width); line-height: 1em; padding-top: 0.15em; padding-right: 1em; flex-shrink: 0; position: relative; }
+.property-instance label[title] { cursor: help; text-decoration: underline dashed #AAA; }
+.mode-edit .property-instance label.required::before { color: red; content: '\2736'; font-size: 0.6rem; position: absolute; left: -1.4em; top: 0.15rem; }
+.property-instance.valid::before { position: absolute; left: calc(var(--label-width) - 1em); top: 6px; color: green; content: '\2713'; }
+.editor:not([type='checkbox']), .shacl-or-constraint select { flex-grow: 1; }
+.shacl-or-constraint select { border: 1px solid #DDD; padding: 2px 4px; }
+select { overflow: hidden; text-overflow: ellipsis; }
+textarea.editor { resize: vertical; }
+.lang-chooser { position: absolute; top: 5px; right: 24px; border: 0; background-color: #e9e9ed; padding: 2px 4px; max-width: 40px; width: 40px; box-sizing: content-box; }
+.lang-chooser+.editor { padding-right: 55px; }
+.validation-error { position: absolute; left: calc(var(--label-width) - 1em); top: 6px; color: red; cursor: help; }
+.validation-error::before { content: '\26a0' }
+.validation-error.node { left: -1em; }
+.invalid > .editor { border-color: red !important; }
+.ml-0  { margin-left: 0 !important; }
+.pr-0  { padding-right: 0 !important; }
+.mode-view .property-instance:not(:first-child) > label { visibility: hidden; }
+.mode-view .property-instance label { width: var(--label-width); }
+
+.d-flex { display: flex; }
+.lang { opacity: 0.65; font-size: 0.6em; }
+a, a:visited { color: inherit; }
+
+.fadeIn, .fadeOut { animation: fadeIn 0.2s ease-out; }
+.fadeOut { animation-direction: reverse; animation-timing-function: ease-out;}
+@keyframes fadeIn {
+    0% { opacity: 0; transform: scaleY(0.8); }
+    100% { opacity: 1; transform: scaleY(1); }
+}
+  
+.collapsible > .activator { display: flex; justify-content: space-between; align-items: center; cursor: pointer; width: 100%; border: 0; padding: 8px 0; transition: 0.2s; }
+.collapsible > .activator:hover, .collapsible.open > .activator { background-color: #F5F5F5; }
+.collapsible > .activator::after { content:''; width: var(--caret-size); height: var(--caret-size); border-style: none solid solid none; border-width: calc(0.3 * var(--caret-size)); transform: rotate(45deg); transition: transform .15s ease-out; margin-right: calc(0.5 * var(--caret-size)); }
+.collapsible.open > .activator::after { transform: rotate(225deg); }
+.collapsible > *:not(.activator) { transition: all 0.2s ease-out; opacity: 1; }
+.collapsible:not(.open) > *:not(.activator) { max-height: 0; padding: 0; opacity: 0; overflow: hidden; }
+.collapsible > .property-instance > shacl-node > h1 { display: none; }
+.collapsible.open > .property-instance:nth-child(odd) { background-color: #F5F5F5; }
+.ref-link { cursor: pointer; }
+.ref-link:hover { text-decoration: underline; }
+.node-id-display { color: #999; font-size: 11px; }

package/src/theme.ts

@@ -0,0 +1,132 @@
+import { Literal, NamedNode } from 'n3'
+import { Term } from '@rdfjs/types'
+import { PREFIX_XSD, PREFIX_RDF } from './constants'
+import { createInputListEntries, findInstancesOf, findLabel, isURL } from './util'
+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 abstract class Theme {
+    stylesheet: CSSStyleSheet
+
+    constructor(styles?: string) {
+        let aggregatedStyles = css
+        if (styles) {
+            aggregatedStyles += '\n' + styles
+        }
+        this.stylesheet = new CSSStyleSheet()
+        this.stylesheet.replaceSync(aggregatedStyles)
+    }
+
+    apply(root: HTMLFormElement) {
+        // NOP
+    }
+
+    createViewer(label: string, value: Term, template: ShaclPropertyTemplate): HTMLElement {
+        const viewer = document.createElement('div')
+        const labelElem = document.createElement('label')
+        labelElem.innerHTML = label + ':'
+        if (template.description) {
+            labelElem.setAttribute('title', template.description.value)
+        }
+        viewer.appendChild(labelElem)
+        let name = value.value
+        let lang: HTMLElement | null = null
+        if (value instanceof NamedNode) {
+            const quads = template.config.shapesGraph.getQuads(name, null, null, null)
+            if (quads.length) {
+                const s = findLabel(quads, template.config.languages)
+                if (s) {
+                    name = s
+                }
+            }
+        } else if (value instanceof Literal) {
+            if (value.language) {
+                lang = document.createElement('span')
+                lang.classList.add('lang')
+                lang.innerText = `@${value.language}`
+            } else if (value.datatype.value === `${PREFIX_XSD}date`) {
+                name = new Date(Date.parse(value.value)).toDateString()
+            } else if (value.datatype.value === `${PREFIX_XSD}dateTime`) {
+                name = new Date(Date.parse(value.value)).toLocaleString()
+            }
+        }
+        let valueElem: HTMLElement
+        if (isURL(value.value)) {
+            valueElem = document.createElement('a')
+            valueElem.setAttribute('href', value.value)
+        } else {
+            valueElem = document.createElement('div')
+        }
+        valueElem.classList.add('d-flex')
+        valueElem.innerText = name
+        if (lang) {
+            valueElem.appendChild(lang)
+        }
+        viewer.appendChild(valueElem)
+        return viewer
+    }
+    
+    abstract createListEditor(label: string, value: Term | null, required: boolean, listEntries: InputListEntry[], template?: ShaclPropertyTemplate): HTMLElement
+    abstract createLangStringEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement
+    abstract createTextEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement
+    abstract createNumberEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement
+    abstract createDateEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement
+    abstract createBooleanEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement
+    abstract createFileEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement
+    abstract createButton(label: string, primary: boolean): HTMLElement
+}
+
+export function fieldFactory(template: ShaclPropertyTemplate, value: Term | null): HTMLElement {
+    if (template.config.editMode) {
+        const required = template.minCount !== undefined && template.minCount > 0
+        // if we have a class, find the instances and display them in a list
+        if (template.class) {
+            return template.config.theme.createListEditor(template.label, value, required, findInstancesOf(template.class, template), template)
+        }
+
+        // check if it is a list
+        if (template.shaclIn) {
+            const list = template.config.lists[template.shaclIn]
+            if (list?.length) {
+                const listEntries = createInputListEntries(list, template.config.shapesGraph, template.config.languages)
+                return template.config.theme.createListEditor(template.label, value, required, listEntries, template)
+            }
+            else {
+                console.error('list not found:', template.shaclIn, 'existing lists:', template.config.lists)
+            }
+        }
+
+        // check if it is a langstring
+        if  (template.datatype?.value === `${PREFIX_RDF}langString` || template.languageIn?.length) {
+            return template.config.theme.createLangStringEditor(template.label, value, required, template)
+        }
+
+        switch (template.datatype?.value.replace(PREFIX_XSD, '')) {
+            case 'integer':
+            case 'float':
+            case 'double':
+            case 'decimal':
+                return template.config.theme.createNumberEditor(template.label, value, required, template)
+            case 'date':
+            case 'dateTime':
+                return template.config.theme.createDateEditor(template.label, value, required, template)
+            case 'boolean':
+                return template.config.theme.createBooleanEditor(template.label, value, required, template)
+            case 'base64Binary':
+                return template.config.theme.createFileEditor(template.label, value, required, template)
+            }
+
+        // nothing found (or datatype is 'string'), fallback to 'text'
+        return template.config.theme.createTextEditor(template.label, value, required, template)
+    } else {
+        if (value) {
+            return template.config.theme.createViewer(template.label, value, template)
+        }
+        const fallback = document.createElement('div')
+        fallback.innerHTML = 'No value'
+        return fallback
+    }
+}

package/src/themes/bootstrap.css

@@ -0,0 +1,6 @@
+form.mode-edit { --label-width: 0em; }
+.lang-chooser { right: 24px; font-size: 0.8em; }
+.property-instance[data-description]::after { content: attr(data-description); position: absolute; bottom: -12px; left: 13px; font-size: 12px; opacity: 0.7;}
+.property-instance { margin-bottom:14px; }
+.form-floating[data-description] { margin-bottom: 28px; }
+.remove-button { padding: 6px; }

package/src/themes/bootstrap.ts

@@ -0,0 +1,44 @@
+import { DefaultTheme } from './default'
+import { Term } from '@rdfjs/types'
+import { ShaclPropertyTemplate } from '../property-template'
+import { Editor } from '../theme'
+import bootstrap from 'bootstrap/dist/css/bootstrap.min.css'
+import css from './bootstrap.css?raw'
+
+export class BootstrapTheme extends DefaultTheme {
+    constructor() {
+        super(bootstrap + '\n' + css)
+    }
+
+    apply(root: HTMLFormElement): void {
+        super.apply(root)
+        root.dataset.bsTheme = 'light'
+    }
+
+    createDefaultTemplate(label: string, value: Term | null, required: boolean, editor: Editor, template?: ShaclPropertyTemplate | undefined): HTMLElement {
+        const result = super.createDefaultTemplate(label, value, required, editor, template)
+        if (editor.type !== 'checkbox') {
+            result.classList.add('form-floating')
+            if (editor.tagName === 'SELECT') {
+                editor.classList.add('form-select')
+            } else {
+                editor.classList.add('form-control')
+            }
+        }
+        const labelElem = result.querySelector('label')
+        labelElem?.classList.add('form-label')
+        if (labelElem?.title) {
+            result.dataset.description = labelElem.title
+            labelElem.removeAttribute('title')
+        }
+        
+        result.prepend(editor)
+        return result
+    }
+
+    createButton(label: string, primary: boolean): HTMLElement {
+        const button = super.createButton(label, primary)
+        button.classList.add('btn', primary ? 'btn-primary' : 'btn-outline-secondary')
+        return button
+    }
+}

package/src/themes/default.css

@@ -0,0 +1,4 @@
+.editor:not([type='checkbox']) { border: 1px solid #DDD; padding: 2px 4px; }
+.property-instance label { display: inline-block; word-break: break-word; line-height: 1em; padding-top: 0.15em; padding-right: 1em; flex-shrink: 0; position: relative; }
+.property-instance:not(:first-child) > label { visibility: hidden; max-height: 0; }
+.mode-edit .property-instance label { width: var(--label-width); }