Component Library

Overview

The Component Library is included in the Elentra JS Design System, and contains a wide and diverse collection of prebuilt, ready-to-use Vue components. The library is intended to provide solutions for the majority of the common component needs that may arise when developing user interfaces for the Elentra platform.

Many EJS framework improvements have been implemented with version 2.0, and even more are planned for inclusion in the near future. These improvements will streamline the maintenance and update process for the Elentra JS Design System and Component Library, allowing us to more easily enhance existing components and incorporate new ones down the road.

Don't forget to check out the new Elentra JS 2.x Global Component Documentation.

Component Example

The code block below contains a definition for a dummy component titled ExampleComponent.vue. This component serves as an example of a view that contains a single EjsButton, that when clicked toggles the visibility of a text message.

This component, like all others in Elentra JS 2.0, is written in TypeScript and structured as a class, making use of the vue-property-decorator library as outlined in Why Elentra JS 2.0?.

ExampleComponent.vue

<template>

    <EjsButton type="info" @click="toggleMessageVisibility()">
        {{ buttonLabel }}
    </EjsButton>

    <div v-if="messageVisible" class="message">
        {{ message }}
    </div>

</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

/**
 * Import: Component Library Dependencies
 */
import {
    EjsButton,
} from '@/components';

/**
 * An example component used to illustrate how Elentra JS 2.0 makes 
 * use of class-based design and vue-property-decorator.
 *
 * @displayName ExampleComponent
 * @version 2.0.0
 */
@Component({
    components: {
        EjsButton,
    }
})
export default class ExampleComponent extends Vue {
    /* --------------- Props --------------- */

    /**
     * The string text to be rendered as a greeting to the user.
     *
     * @since 2.0.0
     */
    @Prop()
    private greeting: string = 'Hello';
    
    /* --------------- Data --------------- */
    
    /**
     * Determines whether the message is currently visible.
     *
     * @since 2.0.0
     */
    private messageVisible!: boolean = false;
    
    /**
     * The string text of the target for the greeting (e.g., 'Dolly').
     *
     * @since 2.0.0
     */
    private target!: string = 'World';

    /* --------------- Computed --------------- */

    /**
     * Returns the appropriate label for the toggle button based on its state.
     *
     * @since 2.0.0
     * @returns {string} A message indicating the action the button will perform.
     */
    get buttonLabel() {
        return this.messageVisible
        ? 'Hide Message' 
        : 'Show Message';
    }
    
    /**
     * Returns the concatenated greeting and target that make up the message.
     *
     * @since 2.0.0
     * @returns {string} The concatenated string message.
     */
    get message() {
        return `${this.greeting}, ${this.target}`;
    }
    
    /* --------------- Methods --------------- */    

    /**
     * Performs the action of toggling the visibility of the message.
     *
     * @param {boolean} visibileState The optional state to set.
     * @since 2.0.0
     * @returns {void}
     */
    private toggleMessageVisibility(visibleState?: boolean) {
       visibleState === undefined
           ? this.messageVisible = !this.messageVisible        // Toggle
           : this.messageVisible = visibleState;               // Set To State
    }
}
</script>