ace-framework v0.0.11

Ace

Install with:

npm install ace-framework

App File Setup (define at app root, /)

import { Ace } from 'ace-framework';

import IndexPage from './pages/login.page';

new Ace({
    indexPage: {
        page: IndexPage,
        route: '/'
    }
});

Custom Page (define in dir named /pages)

import { AcePage } from 'ace-framework';

import LoginForm from '../components/loginForm/login-form.component';

class IndexPage extends AcePage {
    constructor() {
        super();
    }

    setup() {
        this.title = 'Test Index';
        this.form = new LoginForm();
        this.add(this.form);
    }
};

export default IndexPage;

Custom Component (define in dir named /components)

import {
    AceComponent,
    InputElementComponent
    ButtonElementComponent,
    DivElementComponent
} from 'ace-framework';

class LoginForm extends AceComponent {
    constructor() {
        super();

        this.alertDiv = new DivElementComponent();
        this.alertDiv.class = 'ace-alert';

        this.usernameInput = new InputElementComponent('Username');
        this.usernameInput.placeholder = 'Username';

        this.passwordInput = new InputElementComponent('Password');
        this.passwordInput.setPassword(true);

        this.loginButton = new ButtonElementComponent('Submit');
        this.loginButton.addEvent('onclick', buttonComponent => {
            this.login();
        });

        this.clearButton = new ButtonElementComponent('Clear');
        this.clearButton.addEvent('onclick', buttonComponent => {
            this.clearForm();
        });

        this.add(
            this.alertDiv,
            this.usernameInput,
            this.passwordInput,
            this.loginButton,
            this.clearButton
        );
    }

    clearForm() {
        this.alertDiv.text = 'Fields Cleared';
        this.usernameInput.clear();
        this.passwordInput.clear();
    }

    login() {
        this.redirect(`/dashboard?username=${this.usernameInput.value}`);
    }
};

export default LoginForm;

View the included VaadinTextField component to see how to create an ace component from existing web components.

import VaadinTextField from 'ace-framework';

this.vaadinField = new VaadinTextField('البادئة و اللاحقة');
this.vaadinField.required = true;
this.vaadinField.maxlength = 2;
this.vaadinField.setPreventValidInput(true);
this.vaadinField.setErrorMessage('Error message');
this.vaadinField.pattern = '[0-9]';
this.vaadinField.setPrefix('$');

Layout

Ace Components can be assigned custom style files, but its also possible to leverage CSS Grid.

import { AceComponet, ButtonElementComponent, Layout } from 'ace-framework';

const CSS_GRID = [
    'firstName lastName submitButton',
    'grid grid grid'
];

class TestComponent extends AceComponent {
    this.submitButton = new ButtonElementComponent('Add User');

    this.layout = new Layout(CSS_GRID);
    this.layout.addItem('submitButton', this.submitButton);

    this.add(this.layout);
}

export default TestComponent;

Run with: node --experimental-modules app.mjs