Merge pull request #10 from chialab/support-dna4

Add support for DNA 4
chialab · May 24, 2024 · 5ebd475 · 5ebd475
2 parents 90e0958 + 5174bc9
commit 5ebd475
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "repository": "[email protected]:chialab/bedita-calendar.git",
     "author": "Chialab <[email protected]> (https://www.chialab.io)",
     "license": "MIT",
-    "dependencies": {
-        "@chialab/dna": "^3.18.2"
+    "peerDependencies": {
+        "@chialab/dna": "*"
     }
 }
diff --git a/webroot/js/CalendarFilters.js b/webroot/js/CalendarFilters.js
@@ -1,7 +1,10 @@
 export function defineCalendarFilters(DNA) {
-    const { window, dispatchEvent, extend, customElements } = DNA;
-
-    const CalendarFilters = class CalendarFilters extends extend(window.HTMLFormElement) {
+    const BaseElement = DNA.HTML ?
+        // DNA 4
+        DNA.HTML.Form :
+        // DNA 3
+        DNA.extend(HTMLFormElement);
+    const CalendarFilters = class CalendarFilters extends BaseElement {
         static get properties() {
             return {
                 rangeParam: {
@@ -219,22 +222,30 @@ export function defineCalendarFilters(DNA) {
         }
 
         requestSubmit() {
-            if (window.HTMLFormElement.prototype.requestSubmit) {
+            if (HTMLFormElement.prototype.requestSubmit) {
                 super.requestSubmit();
                 return;
             }
 
-            if (!dispatchEvent(this, 'submit')) {
+            if (!DNA.dispatchEvent(this, 'submit')) {
                 return;
             }
 
             this.submit();
         }
     };
 
-    customElements.define('calendar-filters', CalendarFilters, {
-        extends: 'form',
-    });
+    if (DNA.define) {
+        // DNA 4
+        DNA.define('calendar-filters', CalendarFilters, {
+            extends: 'form',
+        });
+    } else {
+        // DNA 3
+        customElements.define('calendar-filters', CalendarFilters, {
+            extends: 'form',
+        });
+    }
 
     return CalendarFilters;
 }