How to use aurelia-view-manager - 10 common examples

import {bindable, inject, computedFrom, customElement, bindingMode} from 'aurelia-framework';
import {resolvedView} from 'aurelia-view-manager';
import {EntityManager} from 'aurelia-orm';
import {Router} from 'aurelia-router';
import {Statham} from 'json-statham';

@customElement('datatable')
@resolvedView('spoonx/datatable', 'datatable')
@inject(Router, Element, EntityManager)
export class DataTable {
  @bindable({defaultBindingMode: bindingMode.twoWay})
  criteria = {};

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

  @bindable limit        = 30;
  @bindable columns      = '';
  @bindable searchColumn = 'name';
  @bindable actions      = [];
  @bindable searchable   = null;  // Show the search field? (Optional attribute).
  @bindable sortable     = null;  // Columns can be sorted? (Optional attribute).
  @bindable edit         = null;  // Rows are editable? (Optional attribute).
  @bindable destroy      = null;  // Rows are removable? (Optional attribute).

import {inject} from 'aurelia-dependency-injection';
import {bindingMode, computedFrom} from 'aurelia-binding';
import {bindable, customElement} from 'aurelia-templating';
import {resolvedView} from 'aurelia-view-manager';
import {EntityManager} from 'aurelia-orm';
import {Router} from 'aurelia-router';
import {Homefront} from 'homefront';

@customElement('datatable')
@resolvedView('spoonx/datatable', 'datatable')
@inject(Router, Element, EntityManager)
export class DataTable {
  @bindable({defaultBindingMode: bindingMode.twoWay})
  criteria = {};

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

  @bindable limit            = 30;
  @bindable columns          = '';
  @bindable searchColumn     = 'name';
  @bindable actions          = [];
  @bindable searchable       = null;  // Show the search field? (Optional attribute).
  @bindable sortable         = null;  // Columns can be sorted? (Optional attribute).
  @bindable edit             = null;  // Rows are editable? (Optional attribute).
  @bindable destroy          = null;  // Rows are removable? (Optional attribute).

import {PLATFORM} from 'aurelia-pal';
import {inject} from 'aurelia-dependency-injection';
import {bindingMode, computedFrom} from 'aurelia-binding';
import {bindable, customElement} from 'aurelia-templating';
import {resolvedView} from 'aurelia-view-manager';
import {EntityManager} from 'aurelia-orm';
import {Router} from 'aurelia-router';
import {Homefront} from 'homefront';

@customElement('datatable')
@resolvedView('spoonx/datatable', 'datatable')
@inject(Router, Element, EntityManager)
export class DataTable {
  @bindable({defaultBindingMode: bindingMode.twoWay})
  criteria = {};

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

  @bindable limit            = 30;
  @bindable columns          = '';
  @bindable searchColumn     = 'name';
  @bindable actions          = [];
  @bindable searchable       = null;  // Show the search field? (Optional attribute).
  @bindable sortable         = null;  // Columns can be sorted? (Optional attribute).
  @bindable edit             = null;  // Rows are editable? (Optional attribute).
  @bindable destroy          = null;  // Rows are removable? (Optional attribute).

import {computedFrom, inject, bindable, bindingMode} from "aurelia-framework";
import {Config} from "aurelia-api";
import {logger} from "../aurelia-autocomplete";
import {DOM} from "aurelia-pal";
import {resolvedView} from "aurelia-view-manager";

@resolvedView('spoonx/auto-complete', 'autocomplete')
@inject(Config, DOM.Element)
export class AutoCompleteCustomElement {

  lastFindPromise;

  // the query string is set after selecting an option. To avoid this
  // triggering a new query we set the justSelected to true. When true it will
  // avoid performing a query until it is toggled of.
  justSelected = false;

  // Holds the value last used to perform a search
  previousValue = null;

  // Simple property that maintains if this is the initial (first) request.
  initial = true;

import {computedFrom, inject, bindable, bindingMode} from "aurelia-framework";
import {Config} from "aurelia-api";
import {logger} from "../aurelia-autocomplete";
import {DOM} from "aurelia-pal";
import {resolvedView} from "aurelia-view-manager";

@resolvedView('spoonx/auto-complete', 'autocomplete')
@inject(Config, DOM.Element)
export class AutoCompleteCustomElement {

  lastFindPromise;

  // the query string is set after selecting an option. To avoid this
  // triggering a new query we set the justSelected to true. When true it will
  // avoid performing a query until it is toggled of.
  justSelected = false;

  // Holds the value last used to perform a search
  previousValue = null;

  // Simple property that maintains if this is the initial (first) request.
  initial = true;

}

  return desc;
}

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

import { Configuration } from 'aurelia-config';
import { inject, bindable, customElement, bindingMode, TemplatingEngine } from 'aurelia-framework';
import { resolvedView } from 'aurelia-view-manager';
import { logger } from '../aurelia-form';
import { DOM } from 'aurelia-pal';

export let FormElement = (_dec = resolvedView('spoonx/form', 'form-element'), _dec2 = customElement('form-element'), _dec3 = inject(Configuration.of('aurelia-form'), DOM.Element, TemplatingEngine), _dec4 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class FormElement {

  constructor(config, DOMElement, templatingEngine) {
    _initDefineProp(this, 'type', _descriptor, this);

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

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

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

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

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

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

Object['define' + 'Property'](target, property, desc);
    desc = null;
  }

  return desc;
}

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

import { bindable, customElement, bindingMode, inject } from 'aurelia-framework';
import { resolvedView } from 'aurelia-view-manager';
import { Configuration } from 'aurelia-config';

export let FormGroup = (_dec = resolvedView('spoonx/form', 'form-group'), _dec2 = customElement('form-group'), _dec3 = inject(Configuration.of('aurelia-form')), _dec4 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class FormGroup {

  constructor(config) {
    _initDefineProp(this, 'value', _descriptor, this);

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

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

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

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

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

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

if (desc.initializer === void 0) {
    Object['define' + 'Property'](target, property, desc);
    desc = null;
  }

  return desc;
}

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

import { bindable, customElement } from 'aurelia-framework';
import { resolvedView } from 'aurelia-view-manager';

export let FormError = (_dec = resolvedView('spoonx/form', 'form-error'), _dec2 = customElement('form-error'), _dec(_class = _dec2(_class = (_class2 = class FormError {
  constructor() {
    _initDefineProp(this, 'error', _descriptor, this);

    _initDefineProp(this, 'classes', _descriptor2, this);
  }

}, (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'error', [bindable], {
  enumerable: true,
  initializer: null
}), _descriptor2 = _applyDecoratedDescriptor(_class2.prototype, 'classes', [bindable], {
  enumerable: true,
  initializer: null
})), _class2)) || _class) || _class);

if (desc.initializer === void 0) {
    Object['define' + 'Property'](target, property, desc);
    desc = null;
  }

  return desc;
}

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

import { bindable, customElement, bindingMode, computedFrom } from 'aurelia-framework';
import { resolvedView } from 'aurelia-view-manager';

export let FormSelect = (_dec = resolvedView('spoonx/form', 'form-select'), _dec2 = customElement('form-select'), _dec3 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec4 = computedFrom('selectOptions', 'optionLabel'), _dec(_class = _dec2(_class = (_class2 = class FormSelect {
  constructor() {
    _initDefineProp(this, 'value', _descriptor, this);

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

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

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

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

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

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

    _initDefineProp(this, 'options', _descriptor8, this);

Object['define' + 'Property'](target, property, desc);
    desc = null;
  }

  return desc;
}

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

import { customElement, bindable, computedFrom } from 'aurelia-framework';
import { resolvedView } from 'aurelia-view-manager';
import { Metadata } from '../aurelia-form';

export let EntityForm = (_dec = resolvedView('spoonx/form', 'entity-form'), _dec2 = customElement('entity-form'), _dec3 = computedFrom('entity'), _dec(_class = _dec2(_class = (_class2 = class EntityForm {
  constructor() {
    _initDefineProp(this, 'form', _descriptor, this);

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

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

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

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

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

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

    _initDefineProp(this, 'validated', _descriptor8, this);