improved field types in material design theme

ULB-Darmstadt · Nov 3, 2023 · 5c0958f · 5c0958f
1 parent 36ad33d
commit 5c0958f
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 0 deletions.
diff --git a/demo/theme-bootstrap.html b/demo/theme-bootstrap.html
@@ -9,6 +9,19 @@
             body { font-family: sans-serif; }
         </style>
         <script type="module" src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/form-bootstrap.js"></script>
+        <script type="module" defer>
+            const form = document.getElementById("shacl-form")
+            form.setClassInstanceProvider((clazz) => { 
+                if (clazz === 'http://example.org/Material') {
+                    return `
+                    <http://example.org/steel> a <http://example.org/Material>; <http://www.w3.org/2000/01/rdf-schema#label> "Steel".
+                    <http://example.org/wood> a <http://example.org/Material>; <http://www.w3.org/2000/01/rdf-schema#label> "Wood".
+                    <http://example.org/alloy> a <http://example.org/Material>; <http://www.w3.org/2000/01/rdf-schema#label> "Alloy".
+                    <http://example.org/plaster> a <http://example.org/Material>; <http://www.w3.org/2000/01/rdf-schema#label> "Plaster".
+                    `
+                }
+            })
+        </script>
     </head>
     <body>
         <shacl-form id="shacl-form" data-shapes-url="complex-example.ttl" data-submit-button></shacl-form>

diff --git a/demo/theme-default.html b/demo/theme-default.html
@@ -5,6 +5,19 @@
             body { font-family: sans-serif; }
         </style>
         <script type="module" src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/form-default.js"></script>
+        <script type="module" defer>
+            const form = document.getElementById("shacl-form")
+            form.setClassInstanceProvider((clazz) => { 
+                if (clazz === 'http://example.org/Material') {
+                    return `
+                    <http://example.org/steel> a <http://example.org/Material>; <http://www.w3.org/2000/01/rdf-schema#label> "Steel".
+                    <http://example.org/wood> a <http://example.org/Material>; <http://www.w3.org/2000/01/rdf-schema#label> "Wood".
+                    <http://example.org/alloy> a <http://example.org/Material>; <http://www.w3.org/2000/01/rdf-schema#label> "Alloy".
+                    <http://example.org/plaster> a <http://example.org/Material>; <http://www.w3.org/2000/01/rdf-schema#label> "Plaster".
+                    `
+                }
+            })
+        </script>
     </head>
     <body>
         <shacl-form id="shacl-form" data-shapes-url="complex-example.ttl" data-submit-button></shacl-form>

diff --git a/demo/theme-material.html b/demo/theme-material.html
@@ -6,6 +6,19 @@
         </style>
         <link href=" https://cdn.jsdelivr.net/npm/[email protected]/css/fonts.min.css " rel="stylesheet">
         <script type="module" src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/form-material.js"></script>
+        <script type="module" defer>
+            const form = document.getElementById("shacl-form")
+            form.setClassInstanceProvider((clazz) => { 
+                if (clazz === 'http://example.org/Material') {
+                    return `
+                    <http://example.org/steel> a <http://example.org/Material>; <http://www.w3.org/2000/01/rdf-schema#label> "Steel".
+                    <http://example.org/wood> a <http://example.org/Material>; <http://www.w3.org/2000/01/rdf-schema#label> "Wood".
+                    <http://example.org/alloy> a <http://example.org/Material>; <http://www.w3.org/2000/01/rdf-schema#label> "Alloy".
+                    <http://example.org/plaster> a <http://example.org/Material>; <http://www.w3.org/2000/01/rdf-schema#label> "Plaster".
+                    `
+                }
+            })
+        </script>
     </head>
     <body>
         <shacl-form id="shacl-form" data-shapes-url="complex-example.ttl" data-submit-button></shacl-form>

diff --git a/src/themes/material.ts b/src/themes/material.ts
@@ -10,6 +10,7 @@ import { Theme } from '../theme'
 import { InputListEntry, Editor } from '../theme'
 import { Literal } from 'n3'
 import css from './material.css'
+import { PREFIX_XSD } from '../constants'
 
 export class MaterialTheme extends Theme {
     constructor() {
@@ -50,6 +51,17 @@ export class MaterialTheme extends Theme {
         const editor = new MdOutlinedTextField()
         editor.label = label
         editor.supportingText = template.description ?.value || ''
+        if (template.singleLine === false) {
+            editor.type = 'textarea'
+            editor.rows = 5
+        }
+        else {
+            editor.type = 'text'
+            if (template.pattern) {
+                editor.pattern = template.pattern
+            }
+        }
+
         return this.createDefaultTemplate(label, value, required, editor, template)
     }
 
@@ -58,6 +70,17 @@ export class MaterialTheme extends Theme {
         editor.type = 'number'
         editor.label = label
         editor.supportingText = template.description ?.value || ''
+        const min = template.minInclusive ? template.minInclusive : template.minExclusive ? template.minExclusive + 1 : undefined
+        const max = template.maxInclusive ? template.maxInclusive : template.maxExclusive ? template.maxExclusive - 1 : undefined
+        if (min) {
+            editor.min = String(min)
+        }
+        if (max) {
+            editor.max = String(max)
+        }
+        if (template.datatype?.value !== PREFIX_XSD + 'integer') {
+            editor.step = '0.1'
+        }
         return this.createDefaultTemplate(label, value, required, editor, template)
     }