diff --git a/.gitignore b/.gitignore
index 92168dbd6..f94e75f5a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
node_modules
dist
src/versionInfo.ts
+src/types/custom-elements.d.ts
.idea
.vscode
coverage
diff --git a/src/components/combobox/Combobox.ts b/src/components/combobox/Combobox.ts
index 20dd23848..07d435070 100644
--- a/src/components/combobox/Combobox.ts
+++ b/src/components/combobox/Combobox.ts
@@ -34,6 +34,9 @@ export default class Combobox extends WebComponent {
@query('input')
private accessor inputElement: HTMLInputElement | null = null
+ @property({ type: Boolean, reflect: true })
+ accessor readonly = false
+
@state()
private accessor filter = ''
@@ -117,6 +120,7 @@ export default class Combobox extends WebComponent {
autocomplete="off"
spellcheck="false"
?required=${this.required}
+ ?readonly=${this.readonly}
.value=${this.value}
@keydown=${this.onInputKeyDown}
@focus=${this.onInputFocus}
diff --git a/src/components/input/Input.styles.css b/src/components/input/Input.styles.css
index cd29288a8..e593ce1b6 100644
--- a/src/components/input/Input.styles.css
+++ b/src/components/input/Input.styles.css
@@ -23,5 +23,12 @@
color: var(--solid-ui-color-gray-700);
font-size: inherit;
}
+
+ input:read-only {
+ border: none;
+ padding: 0;
+ cursor: not-allowed;
+ }
}
+
}
diff --git a/src/components/input/Input.ts b/src/components/input/Input.ts
index 44d333f37..0a5a264c5 100644
--- a/src/components/input/Input.ts
+++ b/src/components/input/Input.ts
@@ -28,6 +28,9 @@ export default class Input extends WebComponent {
@property({ type: Boolean, reflect: true })
accessor required = false;
+ @property({ type: Boolean, reflect: true })
+ accessor readonly = false;
+
@query('input')
private accessor inputElement: HTMLInputElement | null = null;
@@ -54,6 +57,7 @@ export default class Input extends WebComponent {
placeholder=${this.placeholder}
?required=${this.required}
.value=${this.value}
+ ?readonly=${this.readonly}
@input=${() => this.inputTrait.onInput()}
@keydown=${this.onKeyDown}
/>
diff --git a/src/components/rdf-form/RDFForm.ts b/src/components/rdf-form/RDFForm.ts
new file mode 100644
index 000000000..b9f184562
--- /dev/null
+++ b/src/components/rdf-form/RDFForm.ts
@@ -0,0 +1,174 @@
+import { property, state } from 'lit/decorators.js'
+import { html } from 'lit/html.js'
+import { consume } from '@lit/context'
+import { customElement, WebComponent } from '@/lib/components'
+import ns from '../../lib/ns'
+import { fetchData, findForm, sortBySequence } from '../../lib/forms/rdfFormsHelper'
+import { sym, LiveStore } from 'rdflib'
+import '@/components/rdf-input'
+import { DEFAULT_STORE, storeContext, StoreContext } from '@/lib/forms/store/StoreContext'
+
+const urlConverter = {
+ fromAttribute (value: string | null): URL | null {
+ if (!value) return null
+
+ try {
+ return new URL(value)
+ } catch {
+ return null
+ }
+ },
+ toAttribute (value: URL | null) {
+ if (!value) return null
+ return value
+ }
+}
+
+const hrefFromUrlValue = (value: URL | null): string =>
+ value?.href ?? ''
+
+@customElement('solid-ui-rdf-form')
+export default class RDFForm extends WebComponent {
+ @consume({ context: storeContext, subscribe: true })
+ private accessor storeContext: StoreContext = DEFAULT_STORE
+
+ @property({ attribute: false })
+ accessor passedInStore: LiveStore | null = null
+
+ private get currentStoreContext (): StoreContext {
+ if (this.passedInStore) {
+ this.storeContext.store = this.passedInStore
+ }
+
+ return this.storeContext
+ }
+
+ @state()
+ private accessor entireDataIsReadonly: boolean = true // to protect data, we default to not editable
+
+ @state()
+ private accessor _loadVersion = 0
+
+ @state()
+ private accessor _documentsLoaded = false
+
+ @property({ converter: urlConverter })
+ accessor formUrl: URL | null = null
+
+ @property({ converter: urlConverter })
+ accessor subjectUrl: URL | null = null
+
+ render () {
+ if (!this._documentsLoaded) {
+ return html``
+ }
+
+ const store = this.currentStoreContext.store
+
+ const subjectUrl = hrefFromUrlValue(this.subjectUrl)
+ if (subjectUrl && store.updater?.editable(subjectUrl) !== undefined && store.updater?.editable(subjectUrl) !== false) {
+ this.entireDataIsReadonly = false
+ }
+
+ const formRoot = findForm(this.currentStoreContext.store, hrefFromUrlValue(this.formUrl)) // If there are more 'a ui:Form' elements in a form file
+ if (!formRoot) throw new Error('No ui:Form found in ' + hrefFromUrlValue(this.formUrl))
+
+ const formDocument = sym(hrefFromUrlValue(this.formUrl)) // rdflib NamedNode for the document
+ const parts = store.each(formRoot, ns.ui('parts'), null, formDocument)
+ const partsBySequence = sortBySequence(store, parts)
+ const partItems = (partsBySequence || []).flatMap(item => {
+ if (item && typeof item === 'object' && 'elements' in item && Array.isArray((item as any).elements)) {
+ return (item as any).elements
+ }
+ return [item]
+ })
+ const uiFields = partItems.map(item => {
+ const types = store.each(item as any, ns.rdf('type'), null, formDocument)
+ const typeNode = types[0]
+ const value = typeNode ? ((typeNode as any).value || String(typeNode)) : ((item as any).value || String(item))
+ const hashIndex = value.lastIndexOf('#')
+ return {
+ value: item,
+ fieldValue: hashIndex >= 0 ? value.slice(hashIndex + 1) : value
+ }
+ })
+
+ return html`
+
+ `
+ }
+
+ protected updated (changedProperties: Map) {
+ super.updated(changedProperties)
+ if (changedProperties.has('formUrl') ||
+ changedProperties.has('subjectUrl') ||
+ changedProperties.has('passedInStore')
+ ) {
+ this.loadDocumentsIfNeeded()
+ }
+ }
+
+ private async loadDocumentsIfNeeded () {
+ const store = this.currentStoreContext.store
+ const formUrl = hrefFromUrlValue(this.formUrl)
+ const subjectUrl = hrefFromUrlValue(this.subjectUrl)
+
+ if (!formUrl || !subjectUrl) return
+
+ try {
+ await fetchData(store, formUrl)
+ await fetchData(store, subjectUrl)
+ this._loadVersion += 1
+ this._documentsLoaded = true
+ } catch (error) {
+ console.error('Failed to load RDF documents', error)
+ }
+ }
+}
diff --git a/src/components/rdf-form/RDForm.stories.ts b/src/components/rdf-form/RDForm.stories.ts
new file mode 100644
index 000000000..6ac6460b0
--- /dev/null
+++ b/src/components/rdf-form/RDForm.stories.ts
@@ -0,0 +1,29 @@
+import { html } from 'lit'
+import { defineStoryRender } from '../../storybook'
+import './RDFForm'
+
+const meta = {
+ title: 'Design System/RDF Form',
+ args: {
+ formUrl: 'https://solidos.solidcommunity.net/public/2021/solidUiFormTestData/dummyFormTestFile.ttl', // we need a working URL
+ subjectUrl: 'https://solidos.solidcommunity.net/public/2021/alice.ttl#me'
+ },
+
+ argTypes: {
+ formUrl: { control: 'text' },
+ subjectUrl: { control: 'text' }
+ },
+} as const
+
+const render = defineStoryRender(({ formUrl, subjectUrl }) => {
+ return html`
+
+
+ `
+})
+
+export default meta
+
+export const Primary = { render }
diff --git a/src/components/rdf-form/index.ts b/src/components/rdf-form/index.ts
new file mode 100644
index 000000000..487b3a932
--- /dev/null
+++ b/src/components/rdf-form/index.ts
@@ -0,0 +1,4 @@
+import RDFForm from './RDFForm'
+
+export { RDFForm }
+export default RDFForm
diff --git a/src/components/rdf-input/RDFInput.ts b/src/components/rdf-input/RDFInput.ts
new file mode 100644
index 000000000..8f7d53da6
--- /dev/null
+++ b/src/components/rdf-input/RDFInput.ts
@@ -0,0 +1,200 @@
+import { property } from 'lit/decorators.js'
+import { html } from 'lit/html.js'
+import ns from '../../lib/ns'
+import { customElement, generateId, WebComponent } from '@/lib/components'
+import { Literal, NamedNode, st } from 'rdflib'
+import { label } from '../../utils'
+import { mostSpecificClassURI } from '../../lib/forms/rdfFormsHelper'
+import { FieldParamsObject, fieldParams as fieldTypeParams, InputType } from '../../lib/forms/fieldParams'
+import { DEFAULT_STORE, storeContext, StoreContext } from '@/lib/forms/store/StoreContext'
+import { consume } from '@lit/context'
+import '@/components/input'
+
+@customElement('solid-ui-rdf-input')
+export default class RDFInput extends WebComponent {
+ // example RDF Turtle format source:
+ // :nameField a ui:SingleLineTextField ;
+ // ui:property vcard:fn;
+ // ui:label "name" .
+
+ // formSubject describes the field metadata
+ // dataSubject points to the data resource containing the value
+
+ @consume({ context: storeContext, subscribe: true })
+ private accessor storeContext: StoreContext = DEFAULT_STORE
+
+ @property({ attribute: false, type: Object })
+ accessor formSubject!: NamedNode
+
+ @property({ attribute: false, type: Object })
+ accessor dataSubject!: NamedNode
+
+ @property({ type: Number })
+ accessor storeVersion = 0
+
+ private _updateInFlight = false
+ private _pendingUpdateValue: string | null = null
+
+ @property({ type: Boolean, reflect: true })
+ accessor readonly: boolean = true // to protect data, we default to not editable
+
+ render () {
+ const formDocument = this.getDocument(this.formSubject)
+
+ // for building the HTML input element
+ const uiPropertyTerm = this.getFormProperty(this.formSubject, ns.ui('property'), formDocument)
+ const inputLabel = this.getInputLabel(this.formSubject, uiPropertyTerm, formDocument)
+ const readonly = this.getReadOnly(this.readonly, this.formSubject, formDocument)
+
+ const fieldType = this.formSubject ? mostSpecificClassURI(this.storeContext.store, this.formSubject) : undefined
+ const params = fieldType ? fieldTypeParams[fieldType] ?? {} : {}
+ const inputType: InputType = params.type ?? 'text'
+
+ // for populating the HTML input element
+ const selectedTerm = this.getSelectedTerm(this.dataSubject, uiPropertyTerm, this.formSubject, params)
+ const placeholder = readonly ? '' : this.defaultInputValue(params)
+ const inputValue = this.termToInputValue(selectedTerm)
+
+ return html`
+ `
+ }
+
+ private getDocument (subject: NamedNode) {
+ return subject.doc ? subject.doc() : undefined
+ }
+
+ private getFormProperty (subject: NamedNode | undefined, property: NamedNode, graph?: any): NamedNode | undefined {
+ if (!subject) return undefined
+ return this.storeContext.store.any(subject, property, null, graph) as NamedNode | undefined
+ }
+
+ private getInputLabel (formFieldSubject: NamedNode | undefined, uiPropertyTerm?: NamedNode, graph?: any): string {
+ if (!formFieldSubject) return ''
+ const uiLabel = this.storeContext.store.any(formFieldSubject, ns.ui('label'), null, graph)
+ const propertyLabel = uiPropertyTerm ? label(uiPropertyTerm, true) : ''
+ return uiLabel ? uiLabel.value : propertyLabel
+ }
+
+ private getReadOnly (readonly: boolean, formFieldSubject?: NamedNode, graph?: any): boolean {
+ if (formFieldSubject && readonly === false) { // if readonly is false, we can ovverride it if the field is marked as uneditable in the form
+ return !!this.storeContext.store.anyJS(formFieldSubject, ns.ui('suppressEmptyUneditable'), null, graph)
+ }
+ return readonly
+ }
+
+ private getSelectedTerm (
+ dataSubject?: NamedNode,
+ uiPropertyTerm?: NamedNode,
+ formFieldSubject?: NamedNode,
+ params?: { defaultInputValue?: string }
+ ) {
+ const defaultTerm = formFieldSubject
+ ? this.storeContext.store.any(formFieldSubject, ns.ui('default'))
+ : undefined
+
+ if (!uiPropertyTerm || !dataSubject) {
+ return defaultTerm
+ }
+
+ const inputTerm = this.storeContext.store.any(dataSubject, uiPropertyTerm)
+ return inputTerm || defaultTerm
+ }
+
+ private termToInputValue (term: any) {
+ if (!term || !('value' in term) || !term.value) return ''
+
+ try {
+ return decodeURIComponent(term.value)
+ } catch {
+ return String(term.value)
+ }
+ }
+
+ private defaultInputValue (params: { defaultInputValue?: string } = {}) {
+ const stripped = params.defaultInputValue ?? ''
+ return stripped.replace(/ /g, '')
+ }
+
+ private async updateData (e: CustomEvent) {
+ const newValue = (e.target as HTMLInputElement).value
+ this._pendingUpdateValue = newValue
+
+ if (this._updateInFlight) {
+ return
+ }
+
+ await this.runPendingUpdate()
+ }
+
+ private async runPendingUpdate () {
+ if (this._pendingUpdateValue === null) {
+ return
+ }
+
+ const newValue = this._pendingUpdateValue
+ this._pendingUpdateValue = null
+ this._updateInFlight = true
+
+ const uiPropertyTerm = this.getFormProperty(this.formSubject, ns.ui('property'), this.getDocument(this.formSubject))
+ if (!uiPropertyTerm || !this.dataSubject) {
+ this._updateInFlight = false
+ return
+ }
+
+ const dataDocument = this.getDocument(this.dataSubject)
+ if (dataDocument && this.storeContext.store.updater?.editable(dataDocument) === false) {
+ this._updateInFlight = false
+ return
+ }
+
+ const toDeleteSt = this.storeContext.store.statementsMatching(this.dataSubject, uiPropertyTerm)
+ let toInsertSt: Array> = []
+
+ if (newValue) {
+ let objectFromNewValue
+ const fieldType = this.formSubject ? mostSpecificClassURI(this.storeContext.store, this.formSubject) : undefined
+ const params: FieldParamsObject = fieldType ? fieldTypeParams[fieldType] ?? {} : {}
+ if (params.namedNode) {
+ objectFromNewValue = this.storeContext.store.sym(newValue)
+ } else if (params.defaultInputValue) {
+ objectFromNewValue = encodeURIComponent(newValue.replace(/ /g, ''))
+ objectFromNewValue = this.storeContext.store.sym(params.defaultInputValue + objectFromNewValue)
+ } else {
+ if (params.dt) {
+ objectFromNewValue = new Literal(
+ newValue.trim(),
+ undefined,
+ ns.xsd(params.dt)
+ )
+ } else {
+ objectFromNewValue = new Literal(newValue)
+ }
+ }
+ toInsertSt = toDeleteSt.map((statement) => st(statement.subject, statement.predicate, objectFromNewValue, statement.why))
+ if (toInsertSt.length === 0) {
+ toInsertSt = [st(this.dataSubject, uiPropertyTerm, objectFromNewValue, this.getDocument(this.dataSubject))]
+ }
+ }
+
+ try {
+ await this.storeContext.store.updater.updateMany(toDeleteSt, toInsertSt as any)
+ this.storeVersion += 1
+ } catch (err) {
+ console.error('RDFInput update failed', err)
+ } finally {
+ this._updateInFlight = false
+ }
+
+ if (this._pendingUpdateValue !== null) {
+ await this.runPendingUpdate()
+ }
+ }
+}
diff --git a/src/components/rdf-input/index.ts b/src/components/rdf-input/index.ts
new file mode 100644
index 000000000..bffe87ff2
--- /dev/null
+++ b/src/components/rdf-input/index.ts
@@ -0,0 +1,4 @@
+import RDFInput from './RDFInput'
+
+export { RDFInput }
+export default RDFInput
diff --git a/src/components/select/Select.ts b/src/components/select/Select.ts
index 4aacf4cb7..82cf28bd6 100644
--- a/src/components/select/Select.ts
+++ b/src/components/select/Select.ts
@@ -28,6 +28,9 @@ export default class Select extends WebComponent {
@query('select')
accessor inputElement: HTMLSelectElement | null = null;
+ @property({ type: Boolean, reflect: true })
+ accessor readonly = false;
+
private inputTrait: InputTrait
constructor () {
@@ -48,6 +51,7 @@ export default class Select extends WebComponent {
id="${this.inputTrait.inputId}"
name=${this.name}
?required=${this.required}
+ ?disabled=${this.readonly}
@change=${() => this.inputTrait.onInput()}
>
${this.getOptions().map(
diff --git a/src/lib/components/traits/InputTrait.ts b/src/lib/components/traits/InputTrait.ts
index c4d807af3..825bdba04 100644
--- a/src/lib/components/traits/InputTrait.ts
+++ b/src/lib/components/traits/InputTrait.ts
@@ -10,6 +10,7 @@ export type InputTraitTarget = WebComponent & {
label: string;
required: boolean;
value: string;
+ readonly: boolean;
}
export interface InputTraitConfig {
diff --git a/src/lib/forms/fieldParams.ts b/src/lib/forms/fieldParams.ts
new file mode 100644
index 000000000..6f8342f2b
--- /dev/null
+++ b/src/lib/forms/fieldParams.ts
@@ -0,0 +1,140 @@
+import ns from '../../lib/ns'
+import { style } from '../../lib/style'
+
+export type InputType =
+ | 'hidden'
+ | 'text'
+ | 'search'
+ | 'tel'
+ | 'url'
+ | 'email'
+ | 'password'
+ | 'datetime'
+ | 'date'
+ | 'month'
+ | 'week'
+ | 'time'
+ | 'datetime-local'
+ | 'number'
+ | 'range'
+ | 'color'
+ | 'checkbox'
+ | 'radio'
+ | 'file'
+ | 'submit'
+ | 'image'
+ | 'reset'
+ | 'button'
+
+export type FieldParamsObject = {
+ size?: number, // input element size attribute
+ type?: InputType, // input element type attribute. Default: 'text' (not for Comment and Heading)
+ element?: string, // element type to use (Comment and Heading only)
+ style?: string, // style to use
+ dt?: string, // xsd data type for the RDF Literal corresponding to the field value. Default: xsd:string
+ defaultInputValue?: string, // e.g. 'mailto:'. Default value in input field, will be removed when displaying actual value to user.
+ namedNode?: boolean, // if true, field value corresponds to the URI of an RDF NamedNode. Overrides dt and defaultInputValue.
+ pattern?: RegExp // for client-side input validation; field will go red if violated, green if ok
+}
+
+/**
+ * The fieldParams object defines various constants
+ * for use in various form fields. Depending on the
+ * field in questions, different values may be read
+ * from here.
+ */
+export const fieldParams: { [ fieldUri: string ]: FieldParamsObject } = {
+ /**
+ * Text field
+ *
+ * For possible date popups see e.g. http://www.dynamicdrive.com/dynamicindex7/jasoncalendar.htm
+ * or use HTML5: http://www.w3.org/TR/2011/WD-html-markup-20110113/input.date.html
+ */
+ [ns.ui('ColorField').uri]: {
+ size: 9,
+ type: 'color',
+ style: 'height: 3em;', // around 1.5em is padding
+ dt: 'color',
+ pattern: /^\s*#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]([0-9a-f][0-9a-f])?\s*$/
+ }, // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color
+
+ [ns.ui('DateField').uri]: {
+ size: 20,
+ type: 'date',
+ dt: 'date',
+ pattern: /^\s*[0-9][0-9][0-9][0-9](-[0-1]?[0-9]-[0-3]?[0-9])?Z?\s*$/
+ },
+
+ [ns.ui('DateTimeField').uri]: {
+ size: 20,
+ type: 'datetime-local', // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime
+ dt: 'dateTime',
+ pattern: /^\s*[0-9][0-9][0-9][0-9](-[0-1]?[0-9]-[0-3]?[0-9])?(T[0-2][0-9]:[0-5][0-9](:[0-5][0-9])?)?Z?\s*$/
+ },
+
+ [ns.ui('TimeField').uri]: {
+ size: 10,
+ type: 'time',
+ dt: 'time',
+ pattern: /^\s*([0-2]?[0-9]:[0-5][0-9](:[0-5][0-9])?)\s*$/
+ },
+
+ [ns.ui('IntegerField').uri]: {
+ size: 12,
+ style: 'text-align: right;',
+ dt: 'integer',
+ pattern: /^\s*-?[0-9]+\s*$/
+ },
+
+ [ns.ui('DecimalField').uri]: {
+ size: 12,
+ style: 'text-align: right;',
+ dt: 'decimal',
+ pattern: /^\s*-?[0-9]*(\.[0-9]*)?\s*$/
+ },
+
+ [ns.ui('FloatField').uri]: {
+ size: 12,
+ style: 'text-align: right;',
+ dt: 'float',
+ pattern: /^\s*-?[0-9]*(\.[0-9]*)?((e|E)-?[0-9]*)?\s*$/
+ },
+
+ [ns.ui('SingleLineTextField').uri]: {
+
+ },
+ [ns.ui('NamedNodeURIField').uri]: {
+ namedNode: true
+ },
+ [ns.ui('TextField').uri]: {
+
+ },
+
+ [ns.ui('PhoneField').uri]: {
+ size: 20,
+ defaultInputValue: 'tel:',
+ pattern: /^\+?[\d-]+[\d]*$/
+ },
+
+ [ns.ui('EmailField').uri]: {
+ size: 30,
+ defaultInputValue: 'mailto:',
+ pattern: /^\s*.*@.*\..*\s*$/ // @@ Get the right regexp here
+ },
+
+ [ns.ui('Group').uri]: {
+ style: style.formGroupStyle
+ },
+
+ /**
+ * Non-interactive fields
+ */
+ [ns.ui('Comment').uri]: {
+ element: 'p',
+ style: style.commentStyle
+ },
+ [ns.ui('Heading').uri]: {
+ element: 'h3',
+ style: style.formHeadingStyle
+ }
+}
diff --git a/src/lib/forms/rdfFormsHelper.ts b/src/lib/forms/rdfFormsHelper.ts
new file mode 100644
index 000000000..5d8aad7cc
--- /dev/null
+++ b/src/lib/forms/rdfFormsHelper.ts
@@ -0,0 +1,123 @@
+import { sym, LiveStore, parse } from 'rdflib'
+import type { Term } from 'rdflib/lib/tf-types'
+// eslint-disable-next-line camelcase
+import type { Quad_Subject, NamedNode } from 'rdflib/lib/tf-types'
+import ns from '../../lib/ns'
+
+const baseUri = 'https://solidos.github.io/solid-ui/src/ontology/'
+
+export function loadDocument (
+ store: LiveStore,
+ documentSource: string,
+ documentName: string,
+ documentURI?: string,
+ preferRemote = false
+) {
+ const finalDocumentUri = documentURI || baseUri + documentName // Full URI to the file
+ const document = sym(finalDocumentUri) // rdflib NamedNode for the document
+
+ if (store.holds(undefined, undefined, undefined, document)) {
+ store.removeStatements(store.statementsMatching(undefined, undefined, undefined, document))
+ }
+
+ const parseSource = () => {
+ return new Promise((resolve, reject) => {
+ parse(documentSource, store, finalDocumentUri, 'text/turtle', (err) => {
+ if (err) {
+ console.error('Parse document error for ', finalDocumentUri, err)
+ reject(err)
+ } else {
+ resolve()
+ }
+ })
+ })
+ }
+
+ if (preferRemote && documentURI) {
+ return store.fetcher.load(documentURI, {
+ force: true,
+ clearPreviousData: true,
+ }).then(() => {}).catch((err) => {
+ if (documentSource && documentSource.trim().length > 0) {
+ return parseSource()
+ }
+ throw err
+ })
+ }
+
+ if (documentSource && documentSource.trim().length > 0) {
+ return parseSource()
+ }
+
+ if (documentURI) {
+ return store.fetcher.load(documentURI, {
+ force: true,
+ clearPreviousData: true,
+ }).then(() => {})
+ }
+
+ return Promise.reject(new Error(`No document source or URI for ${documentName}`))
+}
+
+export async function fetchData (
+ store: LiveStore,
+ documentURI: string
+) {
+ const document = sym(documentURI) // rdflib NamedNode for the document
+
+ if (store.holds(undefined, undefined, undefined, document)) {
+ store.removeStatements(store.statementsMatching(undefined, undefined, undefined, document))
+ }
+
+ return await store.fetcher.load(documentURI, {
+ force: true,
+ clearPreviousData: true,
+ })
+}
+
+export function sortBySequence (
+ store: LiveStore,
+ list: Term[]
+) {
+ const subfields = list.map((p) => {
+ const k = store.any(p as any, ns.ui('sequence'))
+ const seq = k ? Number((k as { value: string }).value) : 9999
+ return [Number.isNaN(seq) ? 9999 : seq, p] as const
+ })
+
+ subfields.sort((a, b) => a[0] - b[0])
+
+ return subfields.map(pair => pair[1])
+}
+
+/**
+ * Which class of field is this? Relies on http://www.w3.org/2000/01/rdf-schema#subClassOf and
+ * https://linkeddata.github.io/rdflib.js/doc/classes/formula.html#bottomtypeuris
+ * to find the most specific RDF type if there are multiple.
+ *
+ * @param subject a form field, e.g. `namedNode('https://timbl.com/timbl/Public/Test/Forms/individualForm.ttl#fullNameField')`
+ * @returns the URI of the most specific known class, e.g. `http://www.w3.org/ns/ui#SingleLineTextField`
+ */
+// eslint-disable-next-line camelcase
+export function mostSpecificClassURI (store: LiveStore, subject: Quad_Subject): string {
+ const typeUri = store.findTypeURIs(subject)
+ const specificTypes = store.bottomTypeURIs(typeUri) // most specific
+ const finalTypes: any[] = []
+ for (const t in specificTypes) finalTypes.push(t)
+ // if (finalTypes.length > 1) throw "Didn't expect "+subject+" to have multiple bottom types: "+finalTypes
+ return finalTypes[0]
+}
+
+// Find the first ui:Form node in a store, optionally matching a fragment.
+// code based on Jeff Zucker's sol-components: https://github.com/jeff-zucker/sol-components (core/form-utils.js)
+export function findForm (store: LiveStore, sourceUri: string): NamedNode | null {
+ const docUrl = sourceUri.split('#')[0]
+ const fragment = sourceUri.includes('#') ? sourceUri.split('#')[1] : null
+ if (fragment) {
+ const candidate = sym(docUrl + '#' + fragment)
+ if (store.holds(candidate, ns.rdf('type'), ns.ui('Form'))) return candidate
+ }
+ const forms = store.each(null, ns.rdf('type'), ns.ui('Form'))
+ const found = forms.find((term) => term.termType === 'NamedNode')
+ return found ? (found as NamedNode) : null
+}
diff --git a/src/lib/forms/store/NoopStore.ts b/src/lib/forms/store/NoopStore.ts
new file mode 100644
index 000000000..fac3b041d
--- /dev/null
+++ b/src/lib/forms/store/NoopStore.ts
@@ -0,0 +1,8 @@
+import { LiveStore } from 'rdflib'
+import { StoreContext } from './StoreContext'
+
+export default class NoopStore implements StoreContext {
+ get store (): LiveStore {
+ throw new Error('Cannot use RDF forms without a store')
+ }
+}
diff --git a/src/lib/forms/store/StoreContext.ts b/src/lib/forms/store/StoreContext.ts
new file mode 100644
index 000000000..8cd36d6be
--- /dev/null
+++ b/src/lib/forms/store/StoreContext.ts
@@ -0,0 +1,10 @@
+import { createContext } from '@lit/context'
+import { LiveStore } from 'rdflib'
+import NoopStore from './NoopStore'
+
+export interface StoreContext {
+ store: LiveStore
+}
+
+export const DEFAULT_STORE = new NoopStore()
+export const storeContext = createContext(Symbol('storeContext'))
diff --git a/src/storybook/components/StorybookProvider.ts b/src/storybook/components/StorybookProvider.ts
index b34d4391c..b2e4c1dc0 100644
--- a/src/storybook/components/StorybookProvider.ts
+++ b/src/storybook/components/StorybookProvider.ts
@@ -6,6 +6,8 @@ import StorybookAuth from '../auth/StorybookAuth'
import { Account, authContext } from '@/lib/auth'
import '@/components/dialogs-root'
+import { storeContext, StoreContext } from '@/lib/forms/store/StoreContext'
+import StorybookStore from '../store/StorybookStore'
@customElement('storybook-provider')
export class StorybookProvider extends WebComponent {
@@ -18,6 +20,9 @@ export class StorybookProvider extends WebComponent {
@provide({ context: authContext })
private accessor auth = new StorybookAuth()
+ @provide({ context: storeContext })
+ private accessor store: StoreContext = new StorybookStore()
+
willUpdate (changedProperties: Map) {
super.willUpdate(changedProperties)
@@ -28,6 +33,10 @@ export class StorybookProvider extends WebComponent {
}
this.auth.account = new Account(this.webId, this.avatarUrl)
+
+ if (this.store) {
+ // read `store` so the property is considered used
+ }
}
protected render () {
diff --git a/src/storybook/store/StorybookStore.ts b/src/storybook/store/StorybookStore.ts
new file mode 100644
index 000000000..0a71df8af
--- /dev/null
+++ b/src/storybook/store/StorybookStore.ts
@@ -0,0 +1,15 @@
+import { StoreContext } from '@/lib/forms/store/StoreContext'
+import * as rdf from 'rdflib'
+import { LiveStore } from 'rdflib'
+
+export default class StorybookStore implements StoreContext {
+ public store: LiveStore = createStore()
+}
+
+function createStore (): rdf.LiveStore {
+ const store = rdf.graph() as LiveStore
+ store.updater = new rdf.UpdateManager(store) // Add real-time live updates store.updater
+ store.fetcher = new rdf.Fetcher(store) // Add fetcher for loading RDF data
+ store.features = [] // disable automatic node merging on store load
+ return store
+}
diff --git a/src/types/custom-elements.d.ts b/src/types/custom-elements.d.ts
index 00ae89ef0..127b505d9 100644
--- a/src/types/custom-elements.d.ts
+++ b/src/types/custom-elements.d.ts
@@ -16,7 +16,6 @@ import type DialogProvider from '../components/dialog-provider/DialogProvider'
import type DialogsRoot from '../components/dialogs-root/DialogsRoot'
import type Footer from '../components/footer/Footer'
import type Guard from '../components/guard/Guard'
-import type Header from '../components/header/Header'
import type Input from '../components/input/Input'
import type LoginButton from '../components/login-button/LoginButton'
import type LoginModal from '../components/login-modal/LoginModal'
@@ -25,9 +24,12 @@ import type Menu from '../components/menu/Menu'
import type MenuItem from '../components/menu-item/MenuItem'
import type PhotoCapture from '../components/photo-capture/PhotoCapture'
import type Provider from '../components/provider/Provider'
+import type RDFForm from '../components/rdf-form/RDFForm'
+import type RDFInput from '../components/rdf-input/RDFInput'
import type Select from '../components/select/Select'
import type SelectOption from '../components/select-option/SelectOption'
import type SignupButton from '../components/signup-button/SignupButton'
+import type SolidEmblem from '../components/solid-emblem/SolidEmblem'
declare global {
interface HTMLElementTagNameMap {
@@ -44,7 +46,6 @@ declare global {
'solid-ui-dialogs-root': DialogsRoot
'solid-ui-footer': Footer
'solid-ui-guard': Guard
- 'solid-ui-header': Header
'solid-ui-input': Input
'solid-ui-login-button': LoginButton
'solid-ui-login-modal': LoginModal
@@ -53,8 +54,11 @@ declare global {
'solid-ui-menu-item': MenuItem
'solid-ui-photo-capture': PhotoCapture
'solid-ui-provider': Provider
+ 'solid-ui-rdf-form': RDFForm
+ 'solid-ui-rdf-input': RDFInput
'solid-ui-select': Select
'solid-ui-select-option': SelectOption
'solid-ui-signup-button': SignupButton
+ 'solid-ui-solid-emblem': SolidEmblem
}
}
diff --git a/vite-config/components.ts b/vite-config/components.ts
index e843a7efb..dd44c7aeb 100644
--- a/vite-config/components.ts
+++ b/vite-config/components.ts
@@ -1,5 +1,6 @@
-import { existsSync, readdirSync } from 'node:fs'
+import { existsSync, readdirSync, writeFileSync } from 'node:fs'
import { join, resolve } from 'node:path'
+import type { Plugin } from 'vite'
const projectRoot = resolve(import.meta.dirname, '..')
@@ -9,6 +10,7 @@ export const litDecoratorPaths = [
]
export const componentsSrcDir = join(projectRoot, 'src/components')
+export const customElementsTypesPath = join(projectRoot, 'src/types/custom-elements.d.ts')
export function discoverComponents(): string[] {
return readdirSync(componentsSrcDir, { withFileTypes: true })
@@ -20,3 +22,56 @@ export function discoverComponents(): string[] {
.map((entry) => entry.name)
.sort()
}
+
+function getPascalCase(name: string): string {
+ return name
+ .split('-')
+ .map((segment) => {
+ if (segment === 'rdf') return 'RDF'
+ if (segment.length <= 2) return segment.toUpperCase()
+ return segment.charAt(0).toUpperCase() + segment.slice(1)
+ })
+ .join('')
+}
+
+export function generateCustomElementsTypes(): void {
+ const components = discoverComponents()
+
+ const lines = [
+ '/**',
+ ' * This file is auto-generated by vite-config/components.ts.',
+ ' * Do not edit this file directly.',
+ ' */',
+ '',
+ ]
+
+ for (const component of components) {
+ const className = getPascalCase(component)
+ lines.push(`import type ${className} from '../components/${component}/${className}'`)
+ }
+
+ lines.push('', 'declare global {', ' interface HTMLElementTagNameMap {')
+
+ for (const component of components) {
+ const className = getPascalCase(component)
+ lines.push(` 'solid-ui-${component}': ${className}`)
+ }
+
+ lines.push(' }', '}', '')
+
+ writeFileSync(customElementsTypesPath, lines.join('\n'), 'utf-8')
+}
+
+export function customElementsTypesPlugin(): Plugin {
+ return {
+ name: 'solid-ui-custom-elements-types',
+ buildStart() {
+ generateCustomElementsTypes()
+ },
+ handleHotUpdate(context) {
+ if (context.file.startsWith(componentsSrcDir)) {
+ generateCustomElementsTypes()
+ }
+ },
+ }
+}
diff --git a/vite.config.mts b/vite.config.mts
index 553392981..aad46c504 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -8,11 +8,12 @@ import css from './vite-config/css'
import resolveConfig from './vite-config/resolve'
import stylesConfig from './vite-config/styles'
import { cdnLegacyConfig, cdnConfig } from './vite-config/cdn'
-import { discoverComponents, litDecoratorPaths } from './vite-config/components'
+import { discoverComponents, litDecoratorPaths, customElementsTypesPlugin } from './vite-config/components'
const basePlugins = [
css(),
icons(),
+ customElementsTypesPlugin(),
]
function defaultConfig(): UserConfig {