declared mdui as external for material theme

ULB-Darmstadt · Sep 30, 2024 · f0fc47d · f0fc47d
1 parent 6aca809
commit f0fc47d
Show file tree

Hide file tree

Showing 14 changed files with 45 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -108,7 +108,7 @@ Sets a callback function that is invoked when a SHACL property has an `sh:class`
 ```typescript
 setSharedShapesGraph(graph: Store)
 ```
-Set an externally managed shapes graph to use. This improves performance When using multiple instances of `shacl-form` on the same page.
+Set an externally managed shapes graph to use. This improves performance When using multiple instances of `shacl-form` on the same page. Note that the shape triples need to be stored in the graph with ID `shapes` to be recognized.
 
 ## Features
 

diff --git a/demo/style.css b/demo/style.css
@@ -1,12 +1,6 @@
 :root { 
     --brand-color: #008877;
 }
-
-shacl-form { 
-    --mdui-color-primary-light: 0, 136, 119;
-    --mdui-color-primary-dark: 208, 188, 255;
-    --mdui-color-background-light: 255, 255, 255;
-}
 
 body {
     font-family: sans-serif;

diff --git a/demo/theme-material.html b/demo/theme-material.html
@@ -1,11 +1,32 @@
 <!DOCTYPE html>
-<html>
+<html class="mdui-theme-light">
     <head>
+        <link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">
         <style>
-            body { font-family: sans-serif; }
+            body { font-family: roboto; }
+            :root, shacl-form { 
+                --filter-column-width: 300px;
+                --mdui-color-primary-light: 0, 136, 119;
+                --mdui-color-primary-dark: 208, 188, 255;
+                --mdui-color-background-light: 255, 255, 255;
+                --mdui-color-surface-light: 255, 255, 255;
+                --mdui-color-surface-container-high: 255, 255, 255;
+                --mdui-color-surface-container-highest-light: 245, 245, 245;
+            }
         </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>
+        <link href="https://cdn.jsdelivr.net/npm/@fontsource/roboto/400.css" rel="stylesheet">
+        <script type="importmap">
+            {
+              "imports": {
+                "@ulb-darmstadt/shacl-form/": "https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/",
+                "mdui": "https://unpkg.com/mdui@2/mdui.esm.js"
+              }
+            }
+        </script>
+        <script type="module">
+            import 'mdui'
+            import '@ulb-darmstadt/shacl-form/form-material.js'
+        </script>
         <script type="module" defer>
             const form = document.getElementById("shacl-form")
             form.setClassInstanceProvider((clazz) => { 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,12 +1,13 @@
 {
     "name": "@ulb-darmstadt/shacl-form",
-    "version": "1.6.2",
+    "version": "1.6.3",
     "description": "SHACL form generator",
     "main": "dist/form-default.js",
     "module": "dist/form-default.js",
     "types": "dist/form-default.d.ts",
     "files": [
-        "dist"
+        "dist",
+        "src"
     ],
     "repository": {
         "type": "git",

diff --git a/src/globals.d.ts b/src/globals.d.ts
@@ -1 +1,2 @@
-declare module "*.css";
+declare module "*.css";
+declare module "*.css?raw";
diff --git a/src/plugins/leaflet.ts b/src/plugins/leaflet.ts
@@ -1,7 +1,7 @@
 import * as L from 'leaflet'
 import 'leaflet-editable/src/Leaflet.Editable.js'
-import leafletCss from 'leaflet/dist/leaflet.css'
-import leafletFullscreenCss from 'leaflet.fullscreen/Control.FullScreen.css'
+import leafletCss from 'leaflet/dist/leaflet.css?raw'
+import leafletFullscreenCss from 'leaflet.fullscreen/Control.FullScreen.css?raw'
 import 'leaflet.fullscreen/Control.FullScreen.js'
 import { Term } from '@rdfjs/types'
 

diff --git a/src/styles.css b/src/styles.css
@@ -24,7 +24,7 @@ shacl-property:not(.may-remove) > .shacl-or-constraint > .remove-button:not(.per
 .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: 28px; border: 0; background-color: #e9e9ed; padding: 2px 4px; max-width: 40px; width: 40px; box-sizing: content-box; }
+.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' }

diff --git a/src/theme.ts b/src/theme.ts
@@ -3,7 +3,7 @@ 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'
+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 }

diff --git a/src/themes/bootstrap.css b/src/themes/bootstrap.css
@@ -1,5 +1,5 @@
 form.mode-edit { --label-width: 0em; }
-.lang-chooser { right: 28px; font-size: 0.8em; }
+.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; }

diff --git a/src/themes/bootstrap.ts b/src/themes/bootstrap.ts
@@ -3,7 +3,7 @@ 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'
+import css from './bootstrap.css?raw'
 
 export class BootstrapTheme extends DefaultTheme {
     constructor() {

diff --git a/src/themes/default.ts b/src/themes/default.ts
@@ -3,7 +3,7 @@ import { ShaclPropertyTemplate } from "../property-template"
 import { Editor, InputListEntry, Theme } from "../theme"
 import { PREFIX_XSD } from '../constants'
 import { Literal } from 'n3'
-import css from './default.css'
+import css from './default.css?raw'
 
 export class DefaultTheme extends Theme {
     idCtr = 0

diff --git a/src/themes/material.ts b/src/themes/material.ts
@@ -1,21 +1,15 @@
 import { ShaclPropertyTemplate } from '../property-template'
 import { Term } from '@rdfjs/types'
-import { TextField } from 'mdui/components/text-field.js'
-import { Button } from 'mdui/components/button.js'
-import { Select } from 'mdui/components/select.js'
-import { MenuItem } from 'mdui/components/menu-item.js'
-import { Checkbox } from 'mdui/components/checkbox.js'
+import { Button, TextField, Select, MenuItem, Checkbox } from 'mdui'
 import { Theme } from '../theme'
 import { InputListEntry, Editor } from '../theme'
 import { Literal } from 'n3'
-import css from './material.css'
-import material from 'mdui/mdui.css'
+import css from './material.css?raw'
 import { PREFIX_XSD } from '../constants'
 
 export class MaterialTheme extends Theme {
     constructor() {
-        // need to replace :root by :host, otherwise the rules won't apply in context of web components
-        super(material.replaceAll(':root', ':host') + '\n' + css)
+        super(css)
     }
 
     createDefaultTemplate(label: string, value: Term | null, required: boolean, editor: Editor, template?: ShaclPropertyTemplate): HTMLElement {

diff --git a/webpack.config.js b/webpack.config.js
@@ -16,10 +16,11 @@ module.exports = [
             filename: '[name].js',
             library: { type: 'module' },
         },
+        externals: /^mdui/i,
         module: {
             rules: [
                 { test: /\.tsx?$/, use: 'ts-loader' },
-                { test: /\.css$/i, use: ['raw-loader'] },
+                { test: /\.css(\?raw)?$/i, use: ['raw-loader'] },
             ],
         },
         resolve: { extensions: ['.tsx', '.ts', '.js'] },