How to use the aurelia-framework.customElement function in aurelia-framework
To help you get started, we’ve selected a few aurelia-framework examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
sigmaframeworks / sigma-ui-framework / src / inputs / ui-input.ts View on Github 
// UI Textual Input
// @description :
// @author : Adarsh Pastakia
// @copyright : 2016 Sigma Frameworks
// @license : MIT
import {customElement, bindable, bindingMode, autoinject} from "aurelia-framework";
import {UIInputGroup} from "./ui-input-group";
@autoinject()
@customElement('ui-input')
export class UIInput extends UIInputGroup {
/**
* @property value
* @type string
*/
@bindable({ defaultBindingMode: bindingMode.twoWay })
value: string = '';
/**
* @property checked
* @type boolean
*/
@bindable({ defaultBindingMode: bindingMode.twoWay })
checked: boolean = false;
/**
* @property disabled
* @type boolean//
// @description :
// @author : Adarsh Pastakia
// @copyright : 2017
// @license : MIT
import { autoinject, customElement, bindable, inlineView } from 'aurelia-framework';
import { UIEvent } from "../../utils/ui-event";
@autoinject()
@inlineView(`<template class="ui-sidebar ui-row ui-row-v ui-row-nowrap ui-align-stretch \${compact || collapsed || forceCollapse ?'ui-sidebar-collapse':''} ui-sidebar-\${position}">
<div class="ui-sidebar-head ui-row ui-row-h ui-row-nowrap ui-align-stretch">
<div class="ui-sidebar-title ui-column-fill">\${label}</div>
<a class="ui-sidebar-close"></a></div>
<div class="ui-sidebar-content ui-column-fill \${bodyClass}"></div>
</template>`)
@customElement('ui-sidebar')
export class UISidebar {
constructor(public element: Element) {
if (this.miniDisplay = element.hasAttribute('mini-display')) element.classList.add('ui-sidebar-mini');
if (this.compact = element.hasAttribute('compact')) {
element.classList.add('ui-sidebar-compact');
element.classList.add('ui-sidebar-mini');
}
this.collapsible = element.hasAttribute('collapsible');
this.obResize = UIEvent.subscribe('windowresize', () => {
this.forceCollapse = window.innerWidth <= 768;
});
this.obClick = UIEvent.subscribe('mouseclick', () => {
this.element.classList.remove('ui-sidebar-show');
});
this.forceCollapse = window.innerWidth <= 768;], UICol.prototype, "maxWidth", void 0);
__decorate([
bindable(),
__metadata("design:type", String)
], UICol.prototype, "minWidth", void 0);
__decorate([
bindable(),
__metadata("design:type", String)
], UICol.prototype, "align", void 0);
__decorate([
computedFrom("align", "size"),
__metadata("design:type", String),
__metadata("design:paramtypes", [])
], UICol.prototype, "classes", null);
UICol = __decorate([
customElement("ui-col"),
inlineView(`<template></template>`),
__metadata("design:paramtypes", [Element])
], UICol);
let UIContainer = class UIContainer {
constructor(element) {
this.element = element;
if (element.hasAttribute("fluid")) {
element.classList.add("ui-container--fluid");
}
}
};
UIContainer = __decorate([
customElement("ui-container"),
inlineView(`<template class="ui-container"></template>`),
__metadata("design:paramtypes", [Element])@bindable() disabled = false;
checkedChanged($event) {
return UIEvent.fireEvent('checked', this.element, this.checked);
}
changed($event) {
$event.cancelBubble = true;
$event.stopPropagation();
return UIEvent.fireEvent('change', this.element, this.value);
}
}
@autoinject()
@containerless()
@customElement('ui-switch')
@inlineView(`<template><label class="ui-switch-control">
<div class="ui-switch \${disabled?'ui-disabled':''} ui-switch-\${theme} \${class}">
<input type="checkbox" class="ui-switch-input">
<div data-off="\${offLabel}" data-on="\${onLabel}" class="ui-switch-label"></div>
<div class="ui-switch-handle"></div>
</div><span class="ui-switch-label"></span>
</label></template>`)
export class UISwitch {
constructor(public element: Element) {
if (this.element.hasAttribute('primary')) this.theme = 'primary';
else if (this.element.hasAttribute('secondary')) this.theme = 'secondary';
else if (this.element.hasAttribute('dark')) this.theme = 'dark';
else if (this.element.hasAttribute('info')) this.theme = 'info';
else if (this.element.hasAttribute('danger')) this.theme = 'danger';
else if (this.element.hasAttribute('success')) this.theme = 'success';
else if (this.element.hasAttribute('warning')) this.theme = 'warning';], UIMarkdown.prototype, "readonly", void 0);
__decorate([
aurelia_framework_1.bindable(),
__metadata("design:type", Object)
], UIMarkdown.prototype, "placeholder", void 0);
__decorate([
aurelia_framework_1.bindable(),
__metadata("design:type", Object)
], UIMarkdown.prototype, "autoComplete", void 0);
__decorate([
aurelia_framework_1.bindable(),
__metadata("design:type", Object)
], UIMarkdown.prototype, "info", void 0);
UIMarkdown = __decorate([
aurelia_framework_1.autoinject(),
aurelia_framework_1.customElement('ui-markdown'),
aurelia_framework_1.inlineView("<template class="\"ui-md-editor">\n <div class="\"ui-button-group">\n H1\n H2\n H3\n H4\n H5\n H6\n </div>\n <div class="\"ui-button-group">\n \n \n \n </div>\n <div class="\"ui-button-group">\n \n \n </div>\n <div class="\"ui-button-group">\n \n \n </div>\n <div class="\"ui-button-group">\n \n \n </div>\n <div class="\"ui-watermark">\n <div class="\"ui-input-control" role="\"input\""><span class="\"ui-error\""><ul class="\"ui-error-list\""><li></li></ul></span>\n <textarea></textarea>\n <span class="\"ui-clear\"">×</span>\n <span class="\"ui-counter\""></span>\n </div>\n\n <div dir="\"ltr\"" class="ui-md-preview ui-pad-all ui-markdown">\n <h2 class="\"ui-small-caps">Markdown Syntax</h2>\n <hr>\n <p>Add a blank line to create a separate paragraph</p>\n <hr>\n <p class="\"ui-text-primary\"">Headers</p>\n\n <div>\n <span>H1 <code class="\"ui-selectable\""># Header</code> <h1 class="\"ui-inline\"">Header</h1></span>\n <br>\n <span>H2 <code class="\"ui-selectable\"">## Header</code> <h2 class="\"ui-inline\"">Header</h2></span>\n <br>\n <span>H3 <code class="\"ui-selectable\"">### Header</code> <h3 class="\"ui-inline\"">Header</h3></span>\n <br>\n <span>H4 <code class="\"ui-selectable\"">#### Header</code> <h4 class="\"ui-inline\"">Header</h4></span>\n <br>\n <span>H5 <code class="\"ui-selectable\"">##### Header</code> <h5 class="\"ui-inline\"">Header</h5></span>\n <br>\n <span>H6 <code class="\"ui-selectable\"">###### Header</code> <h6 class="\"ui-inline\"">Header</h6></span>\n <br>\n </div>\n\n <p class="\"ui-text-primary\"">Styles</p>\n\n <p>\n <span>Italic <code class="\"ui-selectable\"">_Italic Text_</code>: <i>Italic</i></span>\n <br>\n <span>Bold <code class="\"ui-selectable\"">__Bold Text__</code>: <b>Bold</b></span>\n <br>\n <span>Strikethrough <code class="\"ui-selectable\"">~~Strikethrough~~</code>: <del>Strikethrough</del></span>\n <br>\n </p>\n\n <p class="\"ui-text-primary\"">Links</p>\n\n <p>\n <code class="\"ui-selectable\"">[link text](link URL)</code>\n <br>\n <em>any url will be converted to a link, use the above to display custom text instead of url in the link.</em>\n <br>\n <span>eg. <code><a href=\"url\">Link Text</a></code></span>\n <br>\n </p>\n\n <p class="\"ui-text-primary\"">Images</p>\n\n <p>\n <code class="\"ui-selectable\""></code>\n <br>\n </p>\n\n <p class="\"ui-text-primary\"">Lists</p>\n\n <p>\n <span><code class="\"ui-selectable\"">* list item</code>: • list item</span>\n <br>\n <span><code class="\"ui-selectable\"">* list item</code>: • list item</span>\n <br>\n <span><code class="\"ui-selectable\"">* list item</code>: • list item</span>\n <br>\n <br>\n <span><code class="\"ui-selectable\"">1. list item</code>: 1. list item</span>\n <br>\n <span><code class="\"ui-selectable\"">* list item</code>: 2. list item</span>\n <br>\n <span><code class="\"ui-selectable\"">* list item</code>: 3. list item</span>\n <br>\n </p>\n\n <p class="\"ui-text-primary\"">Tables</p>\n\n <p>\n <span><code class="\"ui-selectable\"">|Head|Head |Head|</code></span>\n <br>\n <span><code class="\"ui-selectable\"">|:---|:---:|---:|</code></span>\n <br>\n <span><code class="\"ui-selectable\"">|Left Align|Center Align|Right Aligned|</code></span>\n <br>\n <span><code class="\"ui-selectable\"">|Left Align|Center Align|Right Aligned|</code></span>\n <br>\n <br>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n <table><thead><tr><th class="\"ui-text-start\"">Head</th><th class="\"ui-text-center\"">Head</th><th class="\"ui-text-end\"">Head</th></tr></thead><tbody><tr><td class="\"ui-text-start\"">Left</td><td class="\"ui-text-center\"">Center</td><td class="\"ui-text-end\"">Right</td></tr><tr><td class="\"ui-text-start\"">Left</td><td class="\"ui-text-center\"">Center</td><td class="\"ui-text-end\"">Right</td></tr></tbody></table>\n </p>\n <br>\n <br></div>\n\n <div class="\"ui-md-preview"></div>\n\n </div>\n <div class="\"ui-input-info\""></div>\n</template>"),
__metadata("design:paramtypes", [Element])
], UIMarkdown);
return UIMarkdown;
}(ui_input_1.UIBaseInput));
exports.UIMarkdown = UIMarkdown;import { inject, customElement, bindable, bindingMode, containerless } from 'aurelia-framework';
@inject(Element)
@containerless()
@customElement('at-button-group')
export class AtButtonGroup {
@bindable({ defaultBindingMode: bindingMode.oneTime }) public id: string = '';
@bindable({ defaultBindingMode: bindingMode.oneTime }) public label: string = '';
@bindable({ defaultBindingMode: bindingMode.oneTime }) public size: string = 'md';
@bindable({ defaultBindingMode: bindingMode.oneWay }) public style: string = '';
@bindable({ defaultBindingMode: bindingMode.oneWay }) public class: string = '';
@bindable({ defaultBindingMode: bindingMode.oneTime }) public toggle: boolean | string = false;
@bindable({ defaultBindingMode: bindingMode.oneTime }) public vertical: boolean | string = false;
constructor(private element: Element) { }
private attached() {
const onlyVerticalAttribute = (this.vertical === '' && this.element.hasAttribute('vertical'));__decorate([
bindable(),
__metadata("design:type", Object)
], UIFieldset.prototype, "legend", void 0);
__decorate([
bindable(),
__metadata("design:type", Boolean)
], UIFieldset.prototype, "disabled", void 0);
__decorate([
bindable({ defaultBindingMode: bindingMode.twoWay }),
__metadata("design:type", Object)
], UIFieldset.prototype, "checked", void 0);
UIFieldset = __decorate([
autoinject(),
inlineView('<template class="ui-fieldset"><fieldset><legend><span>\${legend}</span>\${legend}</legend><div></div></fieldset></template>'),
customElement('ui-fieldset'),
__metadata("design:paramtypes", [Element])
], UIFieldset);
export { UIFieldset };
let UIInputGroup = class UIInputGroup {
constructor(element) {
this.element = element;
this.width = '15em';
if (element.hasAttribute('plain'))
element.classList.add('ui-plain');
}
};
__decorate([
bindable(),
__metadata("design:type", Object)
], UIInputGroup.prototype, "width", void 0);
UIInputGroup = __decorate([import { inject } from 'aurelia-dependency-injection';
import { customElement, containerless, bindable, bindingMode } from 'aurelia-framework';
@inject(Element)
@containerless()
@customElement('at-button')
export class AtButton {
@bindable({ defaultBindingMode: bindingMode.oneTime }) public size: string = 'md';
@bindable({ defaultBindingMode: bindingMode.oneTime }) public type: string = 'button';
@bindable({ defaultBindingMode: bindingMode.oneTime }) public bsType: string = 'primary';
@bindable({ defaultBindingMode: bindingMode.oneTime }) public id: string;
@bindable({ defaultBindingMode: bindingMode.oneTime }) public outline: boolean | string = false;
@bindable({ defaultBindingMode: bindingMode.oneTime }) public block: boolean | string = false;
@bindable({ defaultBindingMode: bindingMode.oneWay }) public style: string = '';
@bindable({ defaultBindingMode: bindingMode.oneWay }) public class: string = '';
@bindable({ defaultBindingMode: bindingMode.twoWay }) public click: Function;
@bindable({ defaultBindingMode: bindingMode.twoWay }) public disabled: boolean | string = false;var DuListPeoplePicker = /** @class */ (function (_super) {
__extends(DuListPeoplePicker, _super);
function DuListPeoplePicker(element) {
var _this_1 = _super.call(this, element) || this;
_this_1.hidden = false;
_this_1.hiddenIsHidden = true;
_this_1.hiddenName = 'hidden';
return _this_1;
}
DuListPeoplePicker.prototype.attached = function () {
this.renderReact(Pickers_1.ListPeoplePicker, this.createState(reactprops));
};
DuListPeoplePicker = __decorate([
aurelia_framework_1.inject(Element),
aurelia_framework_1.customElement('du-list-people-picker')
], DuListPeoplePicker);
return DuListPeoplePicker;
}(au_react_wrapper_1.AuReactStateWrapper));
exports.DuListPeoplePicker = DuListPeoplePicker;@autoinject()
@inlineView(`<template class="ui-panel-body"></template>`)
@customElement('ui-panel-body')
export class UIPanelBody {
constructor(public element: Element) {
if (element.hasAttribute('flex')) element.classList.add('ui-flexed');
if (element.hasAttribute('scroll')) element.classList.add('ui-scroll');
if (element.hasAttribute('padded')) element.classList.add('ui-pad-all');
if (element.hasAttribute('compact')) element.classList.add('ui-compact');
}
}
@autoinject()
@inlineView(`<template class="ui-panel-group"></template>`)
@customElement('ui-panel-group')
export class UIPanelGroup {
constructor(public element: Element) {
this.allowtoggle = element.hasAttribute('toggle');
}
attached() {
if (_.find(this.panels, ['collapsed', false]) == null) this.panels[0].collapsed = false;
}
@children('ui-panel') panels;
private allowtoggle = false;
private uncollapse() {
let panel: any = _.find(this.panels, ['collapsed', false])
if (this.allowtoggle && panel) panel.collapsed = true;
}
}aurelia-framework
The aurelia framework brings together all the required core aurelia libraries into a ready-to-go application-building platform.
Package Health Score
58 / 100Popular aurelia-framework functions
- aurelia-framework.autoinject
- aurelia-framework.bindable
- aurelia-framework.bindingMode
- aurelia-framework.bindingMode.oneTime
- aurelia-framework.bindingMode.oneWay
- aurelia-framework.bindingMode.twoWay
- aurelia-framework.children
- aurelia-framework.computedFrom
- aurelia-framework.containerless
- aurelia-framework.customAttribute
- aurelia-framework.customElement
- aurelia-framework.DOM.removeNode
- aurelia-framework.inject
- aurelia-framework.inlineView
- aurelia-framework.LogManager.getLogger
- aurelia-framework.PLATFORM.moduleName
- aurelia-framework.processContent
- aurelia-framework.singleton
- aurelia-framework.valueConverter
- aurelia-framework.ViewSlot