]> piware.de Git - webcomponents.git/commitdiff
projects / webcomponents.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 40bb73c)
patternfly: Update to V3 and importmaps
authorMartin Pitt <martin@piware.de>
Fri, 8 Nov 2024 06:41:43 +0000 (07:41 +0100)
committerMartin Pitt <martin@piware.de>
Fri, 8 Nov 2024 06:41:43 +0000 (07:41 +0100)
patternfly/index.html patch | blob | history
patternfly/package.json patch | blob | history

diff --git a/patternfly/index.html b/patternfly/index.html
index 6f5c051684eecd46b7e119a7ac1900a2d4241720..5f350d203b65bd6a90ed6666dac11377da07a8cf 100644 (file)
--- a/patternfly/index.html
+++ b/patternfly/index.html
@@ -1,21 +1,39 @@
+<!DOCTYPE html>
 <html>
 <head>
     <title>PatternFly webcomponents example</title>
     <meta charset="utf-8">
 
-    <link rel="stylesheet" href="node_modules/patternfly/dist/css/patternfly.min.css">
-    <link rel="stylesheet" href="node_modules/patternfly-webcomponents/dist/css/patternfly-webcomponents.css">
+    <!-- make `import` statement work without a bundler
+    https://patternflyelements.org/docs/develop/import-maps/ and
+    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap -->
+    <script type="importmap">
+    {
+        "imports": {
+            "@patternfly/": "./node_modules/@patternfly/",
+            "@lit/": "./node_modules/@lit/",
+            "@lit/reactive-element": "./node_modules/@lit/reactive-element/reactive-element.js",
+            "@lit/reactive-element/": "./node_modules/@lit/reactive-element/",
+            "lit": "./node_modules/lit/index.js",
+            "lit/": "./node_modules/lit/",
+            "lit/reactive-element/": "./node_modules/@lit/reactive-element/",
+            "lit-element/": "./node_modules/lit-element/",
+            "lit-html": "./node_modules/lit-html/lit-html.js",
+            "lit-html/": "./node_modules/lit-html/",
+            "tslib": "./node_modules/tslib/tslib.es6.js"
+        }
+    }
+    </script>
 
-    <script src="//rawgit.com/webcomponents/custom-elements/master/src/native-shim.js"></script>
-    <script src="node_modules/patternfly-webcomponents/dist/js/pf-alert.js"></script>
+    <script type="module">import "@patternfly/elements/pf-button/pf-button.js"</script>
 </head>
 
 <body>
+<pf-button id="do_something">Do something!</pf-button>
 
-<h1>Alert</h1>
-
-<pf-alert type="success">Success Alert message.</pf-alert>
-
+<script>
+document.getElementById("do_something").addEventListener("click", () => alert("Clicked!"));
+</script>
 
 </body>
 </html>
diff --git a/patternfly/package.json b/patternfly/package.json
index e15ca89aedde151bdbdb932e937db29b2d783055..79c89c8d78a7b78ad599f8dcd9e7bf3592cd6aab 100644 (file)
--- a/patternfly/package.json
+++ b/patternfly/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "patternfly-webcomponents-demo",
+  "name": "patternfly-elements-demo",
   "version": "0.0.1",
-  "description": "PatternFly webcomponents demo",
+  "description": "PatternFly elements demo",
   "main": "index.js",
   "scripts": {
     "run": "python3 -m http.server -b localhost"
@@ -9,6 +9,6 @@
   "author": "Martin Pitt",
   "license": "ISC",
   "dependencies": {
-    "patternfly-webcomponents": "^0.3.0"
+    "@patternfly/elements": "^4.0.2"
   }
 }
webcomponents/Polymer demo