How to use the aurelia-framework.computedFrom function in aurelia-framework

const newLoc = {
      x: previewElementRect.x - targetElementRect.x,
      y: previewElementRect.y - targetElementRect.y
    };

    const item = _.find(this.items, {id});
    if (!item) return;

    this.intention = {id, x: newLoc.x, y: newLoc.y};
  }

  resetIntention() {
    this.intention = null;
  }

  @computedFrom('items', 'intention')
  get patchedItems() {
    const {items, intention} = this;
    if (!intention) return items;

    let patched = _.reject(items, {id: intention.id});
    const item = _.find(this.items, {id: intention.id});

    if (item) {
      // always show current moving item on top
      patched.push({...item, x: intention.x, y: intention.y});
    }

    return patched;
  }
}

return typeof result === 'object' && result !== null ? result[defaultAttribute] : result;
  };

  // Allow to overwrite the default apiEndpoint
  @bindable endpoint;

  // Input field's placeholder
  @bindable placeholder = 'Search';

  // Sort method that takes a list and returns a sorted list. No sorting by default.
  @bindable sort = items => items;

  // Used to make the criteria more specific
  @bindable criteria = {};

  @computedFrom('results', 'value')
  get showFooter() {
    let visibility = this.footerVisibility;

    return visibility === 'always'
      || (visibility === 'no-results' && this.value && this.value.length && (!this.results || !this.results.length));
  }

  showDropdown() {
    if (!this.dropdownMenu.hasClass('show')) {
      this.dropdownToggle.dropdown('toggle');
    }
  }

  /**
   * Autocomplete constructor.
   *

desc = null;
    }

    return desc;
}

function _initializerWarningHelper(descriptor, context) {
    throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.');
}

import { BindingEngine, inject, bindable, bindingMode, computedFrom } from 'aurelia-framework';
import { BindingSignaler } from 'aurelia-templating-resources';

import __ from 'iterate-js';

export let AureliaTable = (_dec = inject(BindingEngine, BindingSignaler), _dec2 = bindable(), _dec3 = bindable(), _dec4 = bindable(), _dec5 = bindable(), _dec6 = bindable(), _dec7 = bindable(), _dec8 = bindable(), _dec9 = bindable(), _dec10 = bindable(), _dec11 = bindable(), _dec12 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec13 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec14 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec15 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec16 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec17 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec18 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec19 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec20 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec21 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec22 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec23 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec24 = bindable(), _dec25 = bindable(), _dec26 = bindable(), _dec27 = bindable(), _dec28 = bindable(), _dec29 = bindable(), _dec30 = bindable(), _dec31 = bindable(), _dec32 = bindable(), _dec33 = bindable(), _dec34 = bindable(), _dec35 = computedFrom('rows', 'pageSize'), _dec36 = computedFrom('rows', 'columns', 'colfilters', 'filter', 'sort', 'map', 'pageMode'), _dec37 = computedFrom('filtered', 'startPage', 'pageSize', 'endpage', 'pageMode'), _dec38 = computedFrom('rows', 'body', 'body.scrollHeight', 'body.clientHeight'), _dec39 = computedFrom('height'), _dec(_class = (_class2 = class AureliaTable {

    constructor(bindings, signals) {
        _initDefineProp(this, 'header', _descriptor, this);

        _initDefineProp(this, 'height', _descriptor2, this);

        _initDefineProp(this, 'loading', _descriptor3, this);

        _initDefineProp(this, 'tableClasses', _descriptor4, this);

        _initDefineProp(this, 'showSummary', _descriptor5, this);

        _initDefineProp(this, 'showColHeaders', _descriptor6, this);

        _initDefineProp(this, 'showFixedHeaders', _descriptor7, this);

__decorate([
    bindable({ defaultBindingMode: bindingMode.fromView }),
    __metadata("design:type", String)
], UIDatePicker.prototype, "dateLabel", void 0);
__decorate([
    computedFrom("selectedDate", "currentPage", "minDate", "maxDate", "disabledDates"),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], UIDatePicker.prototype, "config", null);
__decorate([
    computedFrom("month", "currentPage"),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [])
], UIDatePicker.prototype, "title", null);
__decorate([
    computedFrom("month", "currentPage", "minDate", "maxDate"),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], UIDatePicker.prototype, "headerOptions", null);
UIDatePicker = __decorate([
    customElement("ui-date-picker"),
    inlineView(view$4),
    viewResources(CalendarHead, DaysPage, MonthsPage, YearsPage, TimePage)
], UIDatePicker);

var view$6 = "<template class="\&quot;ui-calendar\&quot;">\n  <div class="\&quot;ui-calendar__range\&quot;">\n    <div>\n      ${startTitle}\n      \n      \n      \n      \n    </div>\n    \n    <div>\n      ${endTitle}\n      \n      \n      \n      \n    </div>\n  </div>\n  <div class="\&quot;ui-calendar__footer\&quot;">\n    <div class="\&quot;ui-calendar__tags\&quot;">\n      <a data-active.bind="\&quot;preset.preset" class="\&quot;ui-calendar__tag\&quot;">${preset.label}</a>\n    </div>\n    <a class="\&quot;ui-calendar__tag">Cancel</a>\n  </div>\n</template>\n";

let UIRangePicker = class UIRangePicker {
    constructor() {
        this.format = "dd MMM yyyy";
        this.datePresets = [];
        this.startMonth = startOfMonth(new Date());

<a class="pg-prev \${page==0?'ui-disabled':''}"></a>
  <span class="pg-input">\${page+1} of \${pages}</span>
  <a class="pg-next \${page+1>=pages?'ui-disabled':''}"></a>
  <a class="pg-last \${page+1>=pages?'ui-disabled':''}"></a>
`)
@customElement('ui-pager')
export class UIPager {
  constructor(public element: Element) { }

  @bindable({ defaultBindingMode: bindingMode.twoWay }) page = 0;

  @bindable() dataSource;
  @bindable() style = "chevron";
  @bindable() totalPages = 0;

  @computedFrom('dataSource.metadata.totalPages', 'totalPages')
  get pages() {
    if (this.dataSource) return this.dataSource.totalPages;
    return this.totalPages;
  }

  fireChange() {
    if (this.dataSource) this.dataSource.loadPage(this.page);
    UIEvent.fireEvent('change', this.element, this.page);
  }
}

}
  }

  protected minDateChanged(): void {
    if (isBefore(this.date, this.minDate)) {
      this.date = toDate(this.minDate);
    }
  }

  protected maxDateChanged(): void {
    if (isAfter(this.date, this.maxDate)) {
      this.date = toDate(this.maxDate);
    }
  }

  @computedFrom("time")
  get hour() {
    return this.time ? format(this.time, "hh") : "00";
  }
  set hour(h) {
    this.time = setHours(this.time, parseInt(h, 10) + (getHours(this.time) < 12 ? 0 : 12));
    this.dateChanged(
      toDate(
        format(this.date || new Date(), "yyyy-MM-dd") + "T" + format(this.time, "HH:mm:ss.000")
      )
    );
    this.fireChange(true);
  }
  @computedFrom("time")
  get minute() {
    return this.time ? format(this.time, "mm") : "00";
  }

get: function () {
            var classes = [];
            if (this.plain === "" || this.plain === "plain" || isTrue(this.plain)) {
                classes.push("ui-field__wrapper--plain");
            }
            return classes.join(" ");
        },
        enumerable: true,
        configurable: true
    });
    __decorate([
        bindable(),
        __metadata("design:type", Object)
    ], UIFieldWrapper.prototype, "plain", void 0);
    __decorate([
        computedFrom("plain"),
        __metadata("design:type", String),
        __metadata("design:paramtypes", [])
    ], UIFieldWrapper.prototype, "classes", null);
    UIFieldWrapper = __decorate([
        customElement("ui-field-wrapper"),
        inlineView("<template class="\&quot;ui-field__wrapper">\n  \n  </template>")
    ], UIFieldWrapper);
    return UIFieldWrapper;
}());

c.updateChild(prop, v);
        });
    }
}
__decorate([
    computedFrom("leaf", "icon", "expanded", "iconOpen", "iconClosed"),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], UITreeNode.prototype, "nodeIcon", null);
__decorate([
    computedFrom("checked"),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], UITreeNode.prototype, "checkIcon", null);
__decorate([
    computedFrom("expanded"),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], UITreeNode.prototype, "expandIcon", null);

var view$2 = "<template class="\&quot;ui-tree__node">\n  <div class="\&quot;ui-tree__spacer\&quot;"></div>\n  <template>\n    <div class="\&quot;ui-tree__expander\&quot;">\n      \n    </div>\n    <div class="\&quot;ui-tree__checkbox\&quot;">= tree.checkable\"&gt;\n      \n    </div>\n    <div class="\&quot;ui-tree__icon\&quot;">\n      \n      \n    </div>\n    <div class="\&quot;ui-tree__label\&quot;">${node.label}</div>\n  </template>\n  <template>\n    <a class="\&quot;ui-tree__show-more\&quot;">\n      <span>${tree.labelLess}</span>\n      <span>${tree.labelMore}</span>\n    </a>\n  </template>\n  <template>\n    <div class="\&quot;ui-tree__no-children\&quot;">${tree.labelEmpty}</div>\n  </template>\n</template>\n";

let TreeNode = class TreeNode {
    get isSelected() {
        return this.tree.value === this.node.id;
    }
};
__decorate([
    bindable(),
    __metadata("design:type", UITreeNode)
], TreeNode.prototype, "node", void 0);
__decorate([

if (this.element.detached) {
      this.element.detached.call(this, this.elementDOM);
    }
  }

  @computedFrom('value', 'element')
  get visible() {
    return typeof this.element.hidden === 'function' ? this.element.hidden(this.value) : !this.element.hidden;
  }

  /**
   * Used to determine the what to display
   *
   * @returns {string} the label and otherwise the key string
   */
  @computedFrom('element')
  get label() {
    return this.element.label || this.element.key;
  }

  /**
   * Returns the string that points to the template file of that specific form
   * element type.
   * @returns {string}
   */
  @computedFrom('element')
  get view() {
    let type = this.type;

    this.element.type = type;

    return this.viewManager.resolve('spoonx/form', type);

**/
  sort(column, order) {
    this.metadata.sortBy = column;
    this.metadata.orderBy = order;
    this.buildDataList();
  }

  @computedFrom('metadata.totalPages')
  get totalPages() {
    return this.metadata.totalPages;
  }
  @computedFrom('metadata.totalRecords')
  get totalRecords() {
    return this.metadata.totalRecords;
  }
  @computedFrom('metadata.recordsPerPage')
  get recordsPerPage() {
    return this.metadata.recordsPerPage;
  }
  @computedFrom('metadata.page')
  get page() {
    return this.metadata.page;
  }
  @computedFrom('metadata.sortBy')
  get sortBy() {
    return this.metadata.sortBy;
  }
  @computedFrom('metadata.orderBy')
  get orderBy() {
    return this.metadata.orderBy;
  }