diff --git a/addon/dist/components/grid-item.js b/addon/dist/components/grid-item.js
index acc93d9..552728c 100644
--- a/addon/dist/components/grid-item.js
+++ b/addon/dist/components/grid-item.js
@@ -2,13 +2,13 @@ import { _ as _applyDecoratedDescriptor, a as _initializerDefineProperty } from
import { _ as _defineProperty } from '../defineProperty-f419f636.js';
import { setComponentTemplate } from '@ember/component';
import { hbs } from 'ember-cli-htmlbars';
-import { computed, action } from '@ember/object';
+import { action } from '@ember/object';
import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
+import { tracked, cached } from '@glimmer/tracking';
var TEMPLATE = hbs("{{!-- template-lint-disable --}}\n
\n {{yield}}\n
\n\n\n");
-var _dec, _class, _descriptor;
+var _class, _descriptor;
function getScrollParent(el) {
let returnEl;
@@ -39,7 +39,7 @@ function getScrollParent(el) {
*/
-let GridItem = (_dec = computed('args.pos.{x,y,w,h}', 'args.grid.containerWidth'), (_class = class GridItem extends Component {
+let GridItem = (_class = class GridItem extends Component {
constructor(...args) {
super(...args);
@@ -172,7 +172,7 @@ let GridItem = (_dec = computed('args.pos.{x,y,w,h}', 'args.grid.containerWidth'
initializer: function () {
return !this.args.handle;
}
-}), _applyDecoratedDescriptor(_class.prototype, "itemPosition", [_dec], Object.getOwnPropertyDescriptor(_class.prototype, "itemPosition"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "insertAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "insertAction"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "dragStartAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "dragStartAction"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "dragMoveAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "dragMoveAction"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "dragEndAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "dragEndAction"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "mouseOverAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "mouseOverAction"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "mouseLeaveAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "mouseLeaveAction"), _class.prototype)), _class));
+}), _applyDecoratedDescriptor(_class.prototype, "itemPosition", [cached], Object.getOwnPropertyDescriptor(_class.prototype, "itemPosition"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "insertAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "insertAction"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "dragStartAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "dragStartAction"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "dragMoveAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "dragMoveAction"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "dragEndAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "dragEndAction"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "mouseOverAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "mouseOverAction"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "mouseLeaveAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "mouseLeaveAction"), _class.prototype)), _class);
setComponentTemplate(TEMPLATE, GridItem);
export { GridItem as default };
diff --git a/addon/src/components/grid-item.js b/addon/src/components/grid-item.js
index 9e9cbc1..767e072 100644
--- a/addon/src/components/grid-item.js
+++ b/addon/src/components/grid-item.js
@@ -1,6 +1,6 @@
-import { action, computed } from '@ember/object';
+import { action } from '@ember/object';
import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
+import { tracked, cached } from '@glimmer/tracking';
function getScrollParent(el) {
let returnEl;
@@ -35,7 +35,7 @@ export default class GridItem extends Component {
handle = this.args.handle;
@tracked canDrag = !this.args.handle;
- @computed('args.pos.{x,y,w,h}', 'args.grid.containerWidth')
+ @cached
get itemPosition() {
if (!this.args.pos) {
return '';
diff --git a/docs/.prettierrc.js b/docs/.prettierrc.js
index 534e6d3..a01cad0 100644
--- a/docs/.prettierrc.js
+++ b/docs/.prettierrc.js
@@ -1,5 +1,13 @@
'use strict';
module.exports = {
- singleQuote: true,
+ singleQuote: true,
+ arrowParens: 'always',
+ bracketSpacing: true,
+ printWidth: 100,
+ proseWrap: 'preserve',
+ semi: true,
+ tabWidth: 4,
+ trailingComma: 'all',
+ useTabs: false,
};
diff --git a/docs/app/controllers/index.js b/docs/app/controllers/index.js
index 540fb81..73111d2 100644
--- a/docs/app/controllers/index.js
+++ b/docs/app/controllers/index.js
@@ -1,6 +1,8 @@
import Controller from '@ember/controller';
-import { compact, moveElement } from 'ember-grid-layout/utils';
-import { setProperties, action } from '@ember/object';
+import { compact } from 'ember-grid-layout/utils';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { next } from '@ember/runloop';
import 'ember-grid-layout/styles/grid-layout.css';
let i = 10;
@@ -13,26 +15,30 @@ let layout = [
layout = compact(layout, 'vertical', 12);
-const wrappedLayout = layout.map((d, i) => ({
- data: i,
- position: d,
-}));
+class Layout {
+ @tracked position;
+ data = null;
+ constructor(position, data) {
+ this.data = data;
+ this.position = position;
+ }
+}
+
+const wrappedLayout = layout.map((d, i) => new Layout(d, i));
export default class IndexController extends Controller {
compactType = 'vertical';
preventCollision = true;
cols = 2;
- width = 555;
+ @tracked width = 555;
wrappedLayout = wrappedLayout;
- init() {
- super.init(...arguments);
- }
-
@action
updatePosition(newLayout, moving) {
- this.wrappedLayout.forEach((d, i) => {
- setProperties(d.position, newLayout[i]);
+ next(this, function () {
+ this.wrappedLayout.forEach((d, i) => {
+ d.position = newLayout[i];
+ });
});
}
@@ -57,6 +63,6 @@ export default class IndexController extends Controller {
@action
changeWidth() {
- this.set('width', this.width * 0.8);
+ this.width = this.width * 0.8;
}
}