From a58e5398db72e86138fb136d0121a4f1c681bbb9 Mon Sep 17 00:00:00 2001 From: Stephan Tittel Date: Thu, 19 Sep 2024 14:23:53 +0200 Subject: [PATCH] enhanced material design theme --- demo/style.css | 11 +- package-lock.json | 247 ++++++++++++++++++++++++---------------- package.json | 4 +- src/plugins/mapbox.ts | 1 + src/themes/material.css | 7 +- src/themes/material.ts | 106 ++++++++++------- 6 files changed, 230 insertions(+), 146 deletions(-) diff --git a/demo/style.css b/demo/style.css index 5610754..2452c1f 100644 --- a/demo/style.css +++ b/demo/style.css @@ -1,4 +1,13 @@ -:root { --brand-color: #008877; } +: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; display: grid; diff --git a/package-lock.json b/package-lock.json index bbad392..283d0cc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,13 +10,13 @@ "license": "MIT", "dependencies": { "@mapbox/mapbox-gl-draw": "^1.4.3", - "@material/web": "^2.1.0", "bootstrap": "^5.3.3", "jsonld": "^8.3.2", "leaflet": "^1.9.4", "leaflet-editable": "^1.3.0", "leaflet.fullscreen": "^3.0.2", "mapbox-gl": "^3.3.0", + "mdui": "^2.1.2", "n3": "^1.21.1", "shacl-engine": "^1.0.1", "uuid": "^10.0.0" @@ -2215,6 +2215,11 @@ "node": ">=14" } }, + "node_modules/@floating-ui/utils": { + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", + "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==" + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -2358,11 +2363,27 @@ "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==", "dev": true }, + "node_modules/@lit-labs/motion": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@lit-labs/motion/-/motion-1.0.7.tgz", + "integrity": "sha512-odykI6Talw274lYRWQvrGNplHzRy5QAtYEMbqonX6oesEuDQq1nR9Mis38X587jinj68Gjria0mlzqowJ1FACw==", + "dependencies": { + "lit": "^3.1.2" + } + }, "node_modules/@lit-labs/ssr-dom-shim": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz", "integrity": "sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ==" }, + "node_modules/@lit/localize": { + "version": "0.12.2", + "resolved": "https://registry.npmjs.org/@lit/localize/-/localize-0.12.2.tgz", + "integrity": "sha512-Qv9kvgJKDq/JVSwXOxuWvQnnOBysHA99ti9im9a4fImCmx+fto+XXcUYQbjZHqiueEEc4V20PcRDPO+1g/6seQ==", + "dependencies": { + "lit": "^3.2.0" + } + }, "node_modules/@lit/reactive-element": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz", @@ -2473,13 +2494,30 @@ "node": ">=6.0.0" } }, - "node_modules/@material/web": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@material/web/-/web-2.1.0.tgz", - "integrity": "sha512-xzRB6GSspfhscWJvu7Ct8T+2Ybiasnk8OCe3PlWDE/LDEPZFyJJE7K0D6cANscJKQ/GIGIeLVkq5FEQRi+KUew==", + "node_modules/@material/material-color-utilities": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@material/material-color-utilities/-/material-color-utilities-0.3.0.tgz", + "integrity": "sha512-ztmtTd6xwnuh2/xu+Vb01btgV8SQWYCaK56CkRK8gEkWe5TuDyBcYJ0wgkMRn+2VcE9KUmhvkz+N9GHrqw/C0g==" + }, + "node_modules/@mdui/jq": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@mdui/jq/-/jq-3.0.2.tgz", + "integrity": "sha512-Er6cvAgW4RrjWrMBJDnajIiPD99EPYmAWyIgQURhUtO2V1NQQ80oLDo9ILllMoj1idsi1G4EQEqOEdinlH85DQ==", + "dependencies": { + "ssr-window": "^4.0.2", + "tslib": "^2.6.3" + } + }, + "node_modules/@mdui/shared": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@mdui/shared/-/shared-1.0.6.tgz", + "integrity": "sha512-KFWJb3kTzI0g74BH7z1NS904lCVNJ2SLntJID4NaXsm9apSOWn6oqRryN8lI9/uUyzSzdngMo8BZv15YML3hzw==", "dependencies": { - "lit": "^2.7.4 || ^3.0.0", - "tslib": "^2.4.0" + "@lit/reactive-element": "^2.0.4", + "@mdui/jq": "^3.0.2", + "lit": "^3.1.4", + "ssr-window": "^4.0.2", + "tslib": "^2.6.3" } }, "node_modules/@pkgjs/parseargs": { @@ -2540,9 +2578,9 @@ "integrity": "sha512-gjoPAvh4j7AbGMjcDn/8R4cW+d/FPtbfbMM0uQXkyfBFtNUW2iVgrqsgJ65roLc54Y9A2TTFaeeTGSvY9a0HCQ==" }, "node_modules/@rdfjs/types": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@rdfjs/types/-/types-1.1.0.tgz", - "integrity": "sha512-5zm8bN2/CC634dTcn/0AhTRLaQRjXDZs3QfcAsQKNturHT7XVWcKy/8p3P5gXl+YkZTAmy7T5M/LyiT/jbkENw==", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@rdfjs/types/-/types-1.1.2.tgz", + "integrity": "sha512-wqpOJK1QCbmsGNtyzYnojPU8gRDPid2JO0Q0kMtb4j65xhCK880cnKAfEOwC+dX85VJcCByQx5zOwyyfCjDJsg==", "dependencies": { "@types/node": "*" } @@ -2613,9 +2651,9 @@ } }, "node_modules/@types/estree": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", - "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", + "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==", "dev": true }, "node_modules/@types/express": { @@ -2710,9 +2748,9 @@ } }, "node_modules/@types/mapbox__mapbox-gl-draw": { - "version": "1.4.7", - "resolved": "https://registry.npmjs.org/@types/mapbox__mapbox-gl-draw/-/mapbox__mapbox-gl-draw-1.4.7.tgz", - "integrity": "sha512-SNiewXzHCgbJ4EIEG6B7ZMFTwYhHAoEWLdD179AujwmGBaYjn/LZBEQRJLjjq2utB4dEsy5ys2t4cXwEmShpPQ==", + "version": "1.4.8", + "resolved": "https://registry.npmjs.org/@types/mapbox__mapbox-gl-draw/-/mapbox__mapbox-gl-draw-1.4.8.tgz", + "integrity": "sha512-700zPikQXfFMB2vtkJdXSROiqS5F19guf6QdYqvlgCdaMxGmdlLITRq6/zFpzfVQDrgpWex5M8vLtbwjZfup8g==", "dev": true, "dependencies": { "@types/geojson": "*", @@ -2756,9 +2794,9 @@ } }, "node_modules/@types/node": { - "version": "22.5.4", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.4.tgz", - "integrity": "sha512-FDuKUJQm/ju9fT/SeX/6+gBzoPzlVCzfzmGkwKvRHQVxi4BntVbyIwf6a4Xn62mrvndLiml6z/UBXIdEVjQLXg==", + "version": "22.5.5", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.5.tgz", + "integrity": "sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA==", "dependencies": { "undici-types": "~6.19.2" } @@ -2778,9 +2816,9 @@ "integrity": "sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==" }, "node_modules/@types/qs": { - "version": "6.9.15", - "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.15.tgz", - "integrity": "sha512-uXHQKES6DQKKCLh441Xv/dwxOq1TVS3JPUMlEqoEglvlhR6Mxnlew/Xq/LRVHpLyk7iK3zODe1qYHIMltO7XGg==", + "version": "6.9.16", + "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.16.tgz", + "integrity": "sha512-7i+zxXdPD0T4cKDuxCUXJ4wHcsJLwENa6Z3dCu8cfCK743OGy5Nu1RmAGqDPsoTDINVEcdXKRvR/zre+P2Ku1A==", "dev": true }, "node_modules/@types/range-parser": { @@ -3428,21 +3466,6 @@ "node": ">= 0.8" } }, - "node_modules/body-parser/node_modules/qs": { - "version": "6.13.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz", - "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==", - "dev": true, - "dependencies": { - "side-channel": "^1.0.6" - }, - "engines": { - "node": ">=0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/bonjour-service": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.2.1.tgz", @@ -3596,9 +3619,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001660", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001660.tgz", - "integrity": "sha512-GacvNTTuATm26qC74pt+ad1fW15mlQ/zuTzzY1ZoIzECTP8HURDfF43kNxPgf7H1jmelCBQTTbBNxdSXOA7Bqg==", + "version": "1.0.30001662", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001662.tgz", + "integrity": "sha512-sgMUVwLmGseH8ZIrm1d51UbrhqMCH3jvS7gF/M6byuHOnKyLOBL7W8yz5V02OHwgLGA36o/AFhWzzh4uc5aqTA==", "dev": true, "funding": [ { @@ -3674,6 +3697,11 @@ "node": ">=6.0" } }, + "node_modules/classcat": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz", + "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==" + }, "node_modules/cliui": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", @@ -3823,9 +3851,9 @@ "dev": true }, "node_modules/componentsjs": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/componentsjs/-/componentsjs-6.0.1.tgz", - "integrity": "sha512-8ylkwrS0WJCTkkp2dOamE4yLkkdFd9xZQQ8dGzaY22TdntLR9V/SH+dZ+GQ+im9/2KgrKtcEu0UHMY+cpE0LYw==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/componentsjs/-/componentsjs-6.1.0.tgz", + "integrity": "sha512-u5UFuX6vXw6ZQcn8bYfpUlUzIP2iAUpGnL8+ggLgVtS4GgRNrAJVulsWH+PGKRurv4fYwIPQzgFS8irn1cwhVg==", "dependencies": { "@rdfjs/types": "*", "@types/minimist": "^1.2.0", @@ -4249,9 +4277,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.5.19", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.19.tgz", - "integrity": "sha512-kpLJJi3zxTR1U828P+LIUDZ5ohixyo68/IcYOHLqnbTPr/wdgn4i1ECvmALN9E16JPA6cvCG5UG79gVwVdEK5w==", + "version": "1.5.25", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.25.tgz", + "integrity": "sha512-kMb204zvK3PsSlgvvwzI3wBIcAw15tRkYk+NQdsjdDtcQWTp2RABbMQ9rUBy8KNEOM+/E6ep+XC3AykiWZld4g==", "dev": true }, "node_modules/emoji-regex": { @@ -4308,9 +4336,9 @@ } }, "node_modules/envinfo": { - "version": "7.13.0", - "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.13.0.tgz", - "integrity": "sha512-cvcaMr7KqXVh4nyzGTVqTum+gAiL265x5jUWQIDLq//zOGbW+gSW/C+OWLleY/rs9Qole6AZLMXPbtIFQbqu+Q==", + "version": "7.14.0", + "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.14.0.tgz", + "integrity": "sha512-CO40UI41xDQzhLB1hWyqUKgFhs250pNcGbyGKe1l/e4FSaI/+YE4IMG76GDt0In67WLPACIITC+sOi08x4wIvg==", "dev": true, "bin": { "envinfo": "dist/cli.js" @@ -4537,9 +4565,9 @@ } }, "node_modules/express": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/express/-/express-4.20.0.tgz", - "integrity": "sha512-pLdae7I6QqShF5PnNTCVn4hI91Dx0Grkn2+IAsMTgMIKuQVte2dN9PeGSSAME2FR8anOhVA62QDIUaWVfEXVLw==", + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz", + "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==", "dev": true, "dependencies": { "accepts": "~1.3.8", @@ -4554,7 +4582,7 @@ "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "etag": "~1.8.1", - "finalhandler": "1.2.0", + "finalhandler": "1.3.1", "fresh": "0.5.2", "http-errors": "2.0.0", "merge-descriptors": "1.0.3", @@ -4563,11 +4591,11 @@ "parseurl": "~1.3.3", "path-to-regexp": "0.1.10", "proxy-addr": "~2.0.7", - "qs": "6.11.0", + "qs": "6.13.0", "range-parser": "~1.2.1", "safe-buffer": "5.2.1", "send": "0.19.0", - "serve-static": "1.16.0", + "serve-static": "1.16.2", "setprototypeof": "1.2.0", "statuses": "2.0.1", "type-is": "~1.6.18", @@ -4681,13 +4709,13 @@ } }, "node_modules/finalhandler": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", - "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz", + "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==", "dev": true, "dependencies": { "debug": "2.6.9", - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "on-finished": "2.4.1", "parseurl": "~1.3.3", @@ -4698,15 +4726,6 @@ "node": ">= 0.8" } }, - "node_modules/finalhandler/node_modules/encodeurl": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", - "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==", - "dev": true, - "engines": { - "node": ">= 0.8" - } - }, "node_modules/find-up": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", @@ -4807,6 +4826,20 @@ "node": ">= 0.6" } }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/function-bind": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", @@ -5576,6 +5609,11 @@ "node": ">=0.10.0" } }, + "node_modules/is-promise": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz", + "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==" + }, "node_modules/is-regex": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", @@ -6057,6 +6095,25 @@ "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz", "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==" }, + "node_modules/mdui": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/mdui/-/mdui-2.1.2.tgz", + "integrity": "sha512-OI/q/bPGwoGtFtqACkwep6prrMzhyn56qKB13kYZl0Tcq9EI4LE3EMp/sk84yK3+S/JLJt08o2/h1iBHFC8x3A==", + "dependencies": { + "@floating-ui/utils": "^0.2.4", + "@lit-labs/motion": "^1.0.7", + "@lit/localize": "^0.12.1", + "@lit/reactive-element": "^2.0.4", + "@material/material-color-utilities": "^0.3.0", + "@mdui/jq": "^3.0.2", + "@mdui/shared": "^1.0.6", + "classcat": "^5.0.5", + "is-promise": "^4.0.0", + "lit": "^3.1.4", + "ssr-window": "^4.0.2", + "tslib": "^2.6.3" + } + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -6067,9 +6124,9 @@ } }, "node_modules/memfs": { - "version": "4.11.1", - "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.11.1.tgz", - "integrity": "sha512-LZcMTBAgqUUKNXZagcZxvXXfgF1bHX7Y7nQ0QyEiNbRJgE29GhgPd8Yna1VQcLlPiHt/5RFJMWYN9Uv/VPNvjQ==", + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.12.0.tgz", + "integrity": "sha512-74wDsex5tQDSClVkeK1vtxqYCAgCoXxx+K4NSHzgU/muYVYByFqa+0RnrPO9NM6naWm1+G9JmZ0p6QHhXmeYfA==", "dev": true, "dependencies": { "@jsonjoy.com/json-pack": "^1.0.3", @@ -6247,9 +6304,9 @@ "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==" }, "node_modules/n3": { - "version": "1.21.1", - "resolved": "https://registry.npmjs.org/n3/-/n3-1.21.1.tgz", - "integrity": "sha512-Mmv+kdO2wERsyBtkPpuLA+KaMlhdoIgUitj46lYz31fybj5dLgiubRMxJMwR35mPBdqxtMKMk3e1MFB4kpWsVA==", + "version": "1.22.0", + "resolved": "https://registry.npmjs.org/n3/-/n3-1.22.0.tgz", + "integrity": "sha512-0SmSJCUviTbQtbHGFuTYVumu06juM1iDnXBAD0TNdwlGt2w+w85wZeCanA0/tc2M3ucc0mS2jiIrpw0KfkG/dw==", "dependencies": { "buffer": "^6.0.3", "queue-microtask": "^1.1.2", @@ -6661,12 +6718,12 @@ } }, "node_modules/qs": { - "version": "6.11.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", - "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==", + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz", + "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==", "dev": true, "dependencies": { - "side-channel": "^1.0.4" + "side-channel": "^1.0.6" }, "engines": { "node": ">=0.6" @@ -7459,12 +7516,12 @@ } }, "node_modules/serve-static": { - "version": "1.16.0", - "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.0.tgz", - "integrity": "sha512-pDLK8zwl2eKaYrs8mrPZBJua4hMplRWJ1tIFksVC3FtBEBnl8dxgeHtsaMS8DhS9i4fLObaon6ABoc4/hQGdPA==", + "version": "1.16.2", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz", + "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==", "dev": true, "dependencies": { - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "parseurl": "~1.3.3", "send": "0.19.0" @@ -7473,15 +7530,6 @@ "node": ">= 0.8.0" } }, - "node_modules/serve-static/node_modules/encodeurl": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", - "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==", - "dev": true, - "engines": { - "node": ">= 0.8" - } - }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", @@ -7805,6 +7853,11 @@ "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", "dev": true }, + "node_modules/ssr-window": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz", + "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==" + }, "node_modules/stack-trace": { "version": "0.0.10", "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz", @@ -8046,9 +8099,9 @@ } }, "node_modules/terser": { - "version": "5.32.0", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.32.0.tgz", - "integrity": "sha512-v3Gtw3IzpBJ0ugkxEX8U0W6+TnPKRRCWGh1jC/iM/e3Ki5+qvO1L1EAZ56bZasc64aXHwRHNIQEzm6//i5cemQ==", + "version": "5.33.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.33.0.tgz", + "integrity": "sha512-JuPVaB7s1gdFKPKTelwUyRq5Sid2A3Gko2S0PncwdBq7kN9Ti9HPWDQ06MPsEDGsZeVESjKEnyGy68quBk1w6g==", "dev": true, "dependencies": { "@jridgewell/source-map": "^0.3.3", @@ -8152,9 +8205,9 @@ "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" }, "node_modules/traverse": { - "version": "0.6.9", - "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.9.tgz", - "integrity": "sha512-7bBrcF+/LQzSgFmT0X5YclVqQxtv7TDJ1f8Wj7ibBu/U6BMLeOpUxuZjV7rMc44UtKxlnMFigdhFAIszSX1DMg==", + "version": "0.6.10", + "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.10.tgz", + "integrity": "sha512-hN4uFRxbK+PX56DxYiGHsTn2dME3TVr9vbNqlQGcGcPhJAn+tdP126iA+TArMpI4YSgnTkMWyoLl5bf81Hi5TA==", "dependencies": { "gopd": "^1.0.1", "typedarray.prototype.slice": "^1.0.3", diff --git a/package.json b/package.json index eaad7eb..05b1635 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ulb-darmstadt/shacl-form", - "version": "1.6.1", + "version": "1.6.2", "description": "SHACL form generator", "main": "dist/form-default.js", "module": "dist/form-default.js", @@ -48,13 +48,13 @@ }, "dependencies": { "@mapbox/mapbox-gl-draw": "^1.4.3", - "@material/web": "^2.1.0", "bootstrap": "^5.3.3", "jsonld": "^8.3.2", "leaflet": "^1.9.4", "leaflet-editable": "^1.3.0", "leaflet.fullscreen": "^3.0.2", "mapbox-gl": "^3.3.0", + "mdui": "^2.1.2", "n3": "^1.21.1", "shacl-engine": "^1.0.1", "uuid": "^10.0.0" diff --git a/src/plugins/mapbox.ts b/src/plugins/mapbox.ts index 9480817..bdc1540 100644 --- a/src/plugins/mapbox.ts +++ b/src/plugins/mapbox.ts @@ -59,6 +59,7 @@ export class MapboxPlugin extends Plugin { // this fixes wrong size of canvas this.map!.resize() }) + // @ts-ignore this.map.on('draw.create', () => this.deleteAllButLastDrawing()) const dialog = form.querySelector('#shaclMapDialog') as HTMLDialogElement diff --git a/src/themes/material.css b/src/themes/material.css index bf37bd1..f00f2ba 100644 --- a/src/themes/material.css +++ b/src/themes/material.css @@ -1,6 +1,7 @@ -form { - --md-sys-color-primary: var(--brand-color); +:host { + --mdui-color-primary-light: var(--mdui-color-primary-light); + --mdui-color-primary-dark: var(--mdui-color-primary-dark); + --mdui-color-background-light: var(--mdui-color-background-light); } form.mode-edit { --label-width: 0em; } .property-instance { margin-bottom:14px; } -label > md-checkbox { margin-right: 8px; } \ No newline at end of file diff --git a/src/themes/material.ts b/src/themes/material.ts index 3cc422a..5a235fd 100644 --- a/src/themes/material.ts +++ b/src/themes/material.ts @@ -1,20 +1,21 @@ import { ShaclPropertyTemplate } from '../property-template' import { Term } from '@rdfjs/types' -import { MdOutlinedTextField } from '@material/web/textfield/outlined-text-field' -import { MdFilledButton } from '@material/web/button/filled-button' -import { MdOutlinedButton } from '@material/web/button/outlined-button' -import { MdOutlinedSelect } from '@material/web/select/outlined-select' -import { MdSelectOption } from '@material/web/select/select-option' -import { MdCheckbox } from '@material/web/checkbox/checkbox' +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 { Theme } from '../theme' import { InputListEntry, Editor } from '../theme' import { Literal } from 'n3' import css from './material.css' +import material from 'mdui/mdui.css' import { PREFIX_XSD } from '../constants' export class MaterialTheme extends Theme { constructor() { - super(css) + // need to replace :root by :host, otherwise the rules won't apply in context of web components + super(material.replaceAll(':root', ':host') + '\n' + css) } createDefaultTemplate(label: string, value: Term | null, required: boolean, editor: Editor, template?: ShaclPropertyTemplate): HTMLElement { @@ -57,57 +58,60 @@ export class MaterialTheme extends Theme { } createTextEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement { - const editor = new MdOutlinedTextField() + const editor = new TextField() + editor.variant = 'outlined' editor.label = label - editor.supportingText = template.description ?.value || '' + editor.type = 'text' + if (template.description) { + editor.helper = template.description.value + } if (template.singleLine === false) { - editor.type = 'textarea' editor.rows = 5 } - else { - editor.type = 'text' - if (template.pattern) { - editor.pattern = template.pattern - } + if (template.pattern) { + editor.pattern = template.pattern } - return this.createDefaultTemplate('', value, required, editor, template) } createNumberEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement { - const editor = new MdOutlinedTextField() + const editor = new TextField() + editor.variant = 'outlined' editor.type = 'number' editor.label = label - editor.supportingText = template.description ?.value || '' + editor.helper = template.description ?.value || '' const min = template.minInclusive !== undefined ? template.minInclusive : template.minExclusive !== undefined ? template.minExclusive + 1 : undefined const max = template.maxInclusive !== undefined ? template.maxInclusive : template.maxExclusive !== undefined ? template.maxExclusive - 1 : undefined if (min !== undefined) { - editor.min = String(min) + editor.setAttribute('min', String(min)) } if (max !== undefined) { - editor.max = String(max) + editor.setAttribute('max', String(max)) } if (template.datatype?.value !== PREFIX_XSD + 'integer') { - editor.step = '0.1' + editor.setAttribute('step', '0.1') } return this.createDefaultTemplate('', value, required, editor, template) } createListEditor(label: string, value: Term | null, required: boolean, listEntries: InputListEntry[], template?: ShaclPropertyTemplate): HTMLElement { - const editor = new MdOutlinedSelect() + const editor = new Select() + editor.variant = 'outlined' editor.label = label - editor.supportingText = template?.description?.value || template?.label || '' + editor.helper = template?.description?.value + // @ts-ignore const result = this.createDefaultTemplate('', null, required, editor, template) let addEmptyOption = true for (const item of listEntries) { - const option = new MdSelectOption() + const option = new MenuItem() const itemValue = (typeof item.value === 'string') ? item.value : item.value.value const itemLabel = item.label ? item.label : itemValue option.value = itemValue - if (value && value.value === itemValue) { - option.selected = true - } + 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 = '  ' + option.innerHTML @@ -117,17 +121,11 @@ export class MaterialTheme extends Theme { addEmptyOption = false option.ariaLabel = 'blank' } - if (itemLabel) { - const labelElem = document.createElement('div') - labelElem.innerText = itemLabel - labelElem.slot = 'headline' - option.appendChild(labelElem) - } editor.appendChild(option) } if (addEmptyOption) { // add an empty element - const empty = new MdSelectOption() + const empty = new MenuItem() empty.ariaLabel = 'blank' editor.prepend(empty) } @@ -138,23 +136,45 @@ export class MaterialTheme extends Theme { } createBooleanEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement { - const editor = new MdCheckbox() - editor.setAttribute('type', 'checkbox') + const editor = new Checkbox() const result = this.createDefaultTemplate('', value, required, editor, template) // 'required' on checkboxes forces the user to tick the checkbox, which is not what we want here editor.removeAttribute('required') if (value instanceof Literal) { editor.checked = value.value === 'true' } - const labelElem = document.createElement('label') - labelElem.appendChild(editor) - labelElem.appendChild(document.createTextNode(label)) - result.appendChild(labelElem) + editor.innerText = label return result } createDateEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement { - return this.createTextEditor(label, value, required, template) + const editor = new TextField() + editor.variant = 'outlined' + editor.helper = template?.description?.value || template?.label || '' + if (template.datatype?.value === PREFIX_XSD + 'dateTime') { + editor.type = 'datetime-local' + // this enables seconds in dateTime input + editor.setAttribute('step', '1') + } + else { + editor.type = 'date' + } + editor.classList.add('pr-0') + const result = this.createDefaultTemplate('', null, required, editor, template) + if (value) { + try { + let isoDate = new Date(value.value).toISOString() + if (template.datatype?.value === PREFIX_XSD + 'dateTime') { + isoDate = isoDate.slice(0, 19) + } else { + isoDate = isoDate.slice(0, 10) + } + editor.value = isoDate + } catch(ex) { + console.error(ex, value) + } + } + return result } createLangStringEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement { @@ -213,10 +233,10 @@ export class MaterialTheme extends Theme { createButton(label: string, primary: boolean): HTMLElement { let button if (primary) { - button = new MdFilledButton() + button = new Button() button.classList.add('primary') } else { - button = new MdOutlinedButton() + button = new Button() button.classList.add('secondary') } button.innerHTML = label