feat: update to ember 3.22

.eslintrc.js

@@ -20,6 +20,7 @@ module.exports = {
     "ember/no-jquery": "error",
     // https://github.com/adfinis-sygroup/ember-uikit/issues/238
     "ember/no-new-mixins": "warn",
+    "ember/no-mixins": "warn",
   },
   overrides: [
     // node files
@@ -48,13 +49,7 @@ module.exports = {
         node: true,
       },
       plugins: ["node"],
-      rules: Object.assign(
-        {},
-        require("eslint-plugin-node").configs.recommended.rules,
-        {
-          // add your custom rules and overrides for node files here
-        }
-      ),
+      extends: ["plugin:node/recommended"],
     },
   ],
 };

.github/workflows/test.yml

@@ -77,8 +77,8 @@ jobs:
     strategy:
       matrix:
         scenario:
-          - ember-lts-3.12
           - ember-lts-3.16
+          - ember-lts-3.20
           - ember-release
           - ember-beta
           - ember-canary

addon/-private/validated-computed-property.js

@@ -1,4 +1,4 @@
-import { computed } from "@ember/object";
+import { computed, get } from "@ember/object";
 import { warn } from "@ember/debug";
 
 export const validateValue = (value, name, options, mediaOptions) => {
@@ -41,8 +41,8 @@ export const validatedComputedProperty = (
         validateValue(
           value,
           name,
-          this.getWithDefault(optionsKey, []),
-          this.getWithDefault(mediaOptionsKey, [])
+          get(this, optionsKey) ?? [],
+          get(this, mediaOptionsKey) ?? []
         )
       );
 
@@ -75,8 +75,8 @@ export const validatedArrayComputedProperty = (
               validateValue(
                 v,
                 name,
-                this.getWithDefault(optionsKey, []),
-                this.getWithDefault(mediaOptionsKey, [])
+                get(this, optionsKey) ?? [],
+                get(this, mediaOptionsKey) ?? []
               )
             )
           )

addon/components/uk-modal.js

@@ -32,7 +32,7 @@ export default Component.extend({
     return `modal-${this.elementId}`;
   }),
 
-  modalHeaderId: computed(function () {
+  modalHeaderId: computed("modalId", function () {
     return `${this.modalId}-header`;
   }),
 
@@ -54,20 +54,24 @@ export default Component.extend({
     this.set("container", config.APP.rootElement || "body");
 
     this.set("eventHandlers", {
-      hidden: async (event) => {
+      hide: async (event) => {
         if (event.currentTarget === event.target) {
           if (this.visible) {
-            await this.getWithDefault("on-hide", noop)();
+            await (this["on-hide"] ?? noop)();
           }
+        }
+      },
 
+      hidden: (event) => {
+        if (event.currentTarget === event.target) {
           this.set("isAnimating", false);
         }
       },
 
       show: async (event) => {
         if (event.currentTarget === event.target) {
-          if (!this.visible) {
-            await this.getWithDefault("on-show", noop)();
+          if (this.visible) {
+            await (this["on-show"] ?? noop)();
           }
         }
       },
@@ -95,18 +99,15 @@ export default Component.extend({
   didInsertElement() {
     this.set(
       "modal",
-      UIkit.modal(
-        `#${this.modalId}`,
-        this.getProperties(
-          "escClose",
-          "bgClose",
-          "stack",
-          "container",
-          "clsPage",
-          "clsPanel",
-          "selClose"
-        )
-      )
+      UIkit.modal(`#${this.modalId}`, {
+        escClose: this.escClose,
+        bgClose: this.bgClose,
+        stack: this.stack,
+        container: this.container,
+        clsPage: this.clsPage,
+        clsPanel: this.clsPanel,
+        selClose: this.selClose,
+      })
     );
 
     scheduleOnce("afterRender", this, "_setupEvents");

addon/components/uk-sortable.js

@@ -40,11 +40,11 @@ export default Component.extend({
 
   setEvents() {
     let events = {
-      start: this.getWithDefault("on-start", noop),
-      stop: this.getWithDefault("on-stop", noop),
-      moved: this.getWithDefault("on-moved", noop),
-      added: this.getWithDefault("on-added", noop),
-      removed: this.getWithDefault("on-removed", noop),
+      start: this["on-start"] ?? noop,
+      stop: this["on-stop"] ?? noop,
+      moved: this["on-moved"] ?? noop,
+      added: this["on-added"] ?? noop,
+      removed: this["on-removed"] ?? noop,
     };
 
     for (let event in events) {

addon/components/uk-switcher.js

@@ -8,6 +8,6 @@ export default Component.extend({
   animation: "",
 
   contentId: computed("elementId", function () {
-    return `uk-switcher-content-${this.get("elementId")}`;
+    return `uk-switcher-content-${this.elementId}`;
   }),
 });

addon/components/uk-switcher/content/item.js

@@ -12,12 +12,12 @@ export default Component.extend({
 
   setEvents() {
     let events = {
-      beforeshow: this.getWithDefault("on-beforeshow", noop),
-      show: this.getWithDefault("on-show", noop),
-      shown: this.getWithDefault("on-shown", noop),
-      beforehide: this.getWithDefault("on-beforehide", noop),
-      hide: this.getWithDefault("on-hide", noop),
-      hidden: this.getWithDefault("on-hidden", noop),
+      beforeshow: this["on-beforeshow"] ?? noop,
+      show: this["on-show"] ?? noop,
+      shown: this["on-shown"] ?? noop,
+      beforehide: this["on-beforehide"] ?? noop,
+      hide: this["on-hide"] ?? noop,
+      hidden: this["on-hidden"] ?? noop,
     };
 
     for (let event in events) {

addon/components/uk-switcher/nav.js

@@ -16,7 +16,7 @@ export default Component.extend({
 
   componentName: computed("type", function () {
     return TYPES[
-      Object.keys(TYPES).find((k) => TYPES[k].name === this.get("type"))
+      Object.keys(TYPES).find((k) => TYPES[k].name === this.type)
     ].componentName;
   }),
 });

addon/components/uk-tab.js

@@ -11,9 +11,7 @@ export default Component.extend(SwitcherMixin, FlexMixin, {
 
     this.set(
       "attributeBindings",
-      this.get("attributeBindings").filter(
-        (i) => i !== "ukSwitcher:uk-switcher"
-      )
+      this.attributeBindings.filter((i) => i !== "ukSwitcher:uk-switcher")
     );
   },
 

addon/components/uk-toggle-switch.js

@@ -40,7 +40,7 @@ export default ToggleComponent.extend({
   color: validatedComputedProperty("_color", "color", "COLOR_OPTIONS"),
 
   colorClass: computed("color", function () {
-    return `uk-toggle-switch-${this.get("color")}`;
+    return `uk-toggle-switch-${this.color}`;
   }),
 
   onToggle: computed(function () {

addon/mixins/color.js

@@ -24,10 +24,7 @@ export default Mixin.create({
 
   color: validatedComputedProperty("_color", "color", "COLOR_OPTIONS"),
 
-  colorClass: computed("color", function () {
-    return (
-      this.get("color") &&
-      this.get("colorTemplate").replace(/\$color\$/, this.get("color"))
-    );
+  colorClass: computed("color", "colorTemplate", function () {
+    return this.color && this.colorTemplate.replace(/\$color\$/, this.color);
   }),
 });

addon/mixins/evented.js

@@ -1,3 +1,4 @@
+import { get } from "@ember/object";
 import Mixin from "@ember/object/mixin";
 import { camelize } from "@ember/string";
 
@@ -42,7 +43,7 @@ export default Mixin.create({
     let handlers = Object.values(EVENTS).reduce((obj, evt) => {
       return Object.assign(obj, {
         [camelize(evt.replace(/on-/, ""))]: (e) =>
-          this.getWithDefault(evt, () => {})(e),
+          (get(this, evt) ?? (() => {}))(e),
       });
     }, {});
 

addon/mixins/flex.js

@@ -88,23 +88,18 @@ export default Mixin.create({
   ),
 
   flexHorizontalClass: computed("flexHorizontal", function () {
-    return (
-      this.get("flexHorizontal") && `uk-flex-${this.get("flexHorizontal")}`
-    );
+    return this.flexHorizontal && `uk-flex-${this.flexHorizontal}`;
   }),
   flexVerticalClass: computed("flexVertical", function () {
-    return this.get("flexVertical") && `uk-flex-${this.get("flexVertical")}`;
+    return this.flexVertical && `uk-flex-${this.flexVertical}`;
   }),
   flexDirectionClass: computed("flexDirection", function () {
-    return this.get("flexDirection") && `uk-flex-${this.get("flexDirection")}`;
+    return this.flexDirection && `uk-flex-${this.flexDirection}`;
   }),
   flexWrapClass: computed("flexWrap", function () {
-    return this.get("flexWrap") && `uk-flex-${this.get("flexWrap")}`;
+    return this.flexWrap && `uk-flex-${this.flexWrap}`;
   }),
   flexWrapAlignmentClass: computed("flexWrapAlignment", function () {
-    return (
-      this.get("flexWrapAlignment") &&
-      `uk-flex-wrap-${this.get("flexWrapAlignment")}`
-    );
+    return this.flexWrapAlignment && `uk-flex-wrap-${this.flexWrapAlignment}`;
   }),
 });

addon/mixins/size.js

@@ -17,10 +17,7 @@ export default Mixin.create({
 
   size: validatedComputedProperty("_size", "size", "SIZE_OPTIONS"),
 
-  sizeClass: computed("_size", function () {
-    return (
-      this.get("size") &&
-      this.get("sizeTemplate").replace(/\$size\$/, this.get("size"))
-    );
+  sizeClass: computed("_size", "size", "sizeTemplate", function () {
+    return this.size && this.sizeTemplate.replace(/\$size\$/, this.size);
   }),
 });

addon/mixins/switcher.js

@@ -18,7 +18,7 @@ export default Mixin.create({
   ukSwitcher: "",
 
   connect: computed("contentId", function () {
-    let id = this.get("contentId");
+    let id = this.contentId;
 
     return isEmpty(id) ? "" : `#${id}`;
   }),

addon/mixins/width.js

@@ -61,12 +61,12 @@ export default Mixin.create({
     " "
   ),
 
-  widthClass: computed("width", function () {
+  widthClass: computed("_widthTemplate", "width", function () {
     return (
-      this.get("width") &&
-      this.get("width")
+      this.width &&
+      this.width
         .split(" ")
-        .map((w) => this.get("_widthTemplate").replace(/\$width\$/, w))
+        .map((w) => this._widthTemplate.replace(/\$width\$/, w))
         .join(" ")
     );
   }),

addon/templates/components/uk-modal.hbs

@@ -7,7 +7,7 @@
       aria-labelledby={{this.modalHeaderId}}
       tabindex="-1"
       {{focus-trap
-        isActive=this.visible
+        isActive=@visible
         shouldSelfFocus=true
         focusTrapOptions=(hash
           escapeDeactivates=true

config/ember-try.js

@@ -7,18 +7,18 @@ module.exports = async function () {
     useYarn: true,
     scenarios: [
       {
-        name: "ember-lts-3.12",
+        name: "ember-lts-3.16",
         npm: {
           devDependencies: {
-            "ember-source": "~3.12.0",
+            "ember-source": "~3.16.0",
           },
         },
       },
       {
-        name: "ember-lts-3.16",
+        name: "ember-lts-3.20",
         npm: {
           devDependencies: {
-            "ember-source": "~3.16.0",
+            "ember-source": "~3.20.5",
           },
         },
       },
@@ -46,16 +46,6 @@ module.exports = async function () {
           },
         },
       },
-      // The default `.travis.yml` runs this scenario via `npm test`,
-      // not via `ember try`. It's still included here so that running
-      // `ember try:each` manually or from a customized CI config will run it
-      // along with all the other scenarios.
-      {
-        name: "ember-default",
-        npm: {
-          devDependencies: {},
-        },
-      },
       {
         name: "ember-default-with-jquery",
         env: {
@@ -65,7 +55,7 @@ module.exports = async function () {
         },
         npm: {
           devDependencies: {
-            "@ember/jquery": "^0.5.1",
+            "@ember/jquery": "^1.1.0",
           },
         },
       },