Agency Root Component library

Here's a brief introduction.

Installation

$ npm install @rhodyagencyroot/componentlibrary

Usage

NavBar

<template>
    <MainNavigation applicationName="yourApplicationName">
        <template v-slot:default>
            YOUR NAVIGATION CODE HERE.
        </template>
    </MainNavigation>
</template>

NoAccess

<template>
    <NoAccess
        applicationName="yourApplicationName"
        adminType="yourAdminType">
        <template v-slot:default>
            ANY EXTRA MARKUP OR CODE. OPTIONAL.
        </template>
    </NoAccess>
</template>

FooterBar

<template>
    <FooterBar />
</template>

LoadingPanel

<template>
    <LoadingPanel ref="loading" />
</template>

// in App.vue
setup() {
    const loading = ref();

    function showLoading() {
        loading.value.toggleLoading(true);
    }

    function hideLoading() {
        loading.value.toggleLoading(false);
    }

    provide('showLoadingPanel', showLoading);
    provide('hideLoadingPanel', hideLoading);

    return {
      loading
    }
}

// in child component
setup() {
    const showLoading = inject('showLoadingPanel');
    const hideLoading = inject('hideLoadingPanel');

    // call in functions
}

ValidationMessage

<template>
    <label for="selectedName" :class="{'p-error':v.selectedName.invalid && submitted}">Name</label>
    <InputText id="selectedName"
    name="selectedName"
    v-model="selectedName.model"
    class="p-input"
    :class="{'p-invalid':selectedName.invalid && submitted}" />
    <ValidationMessage :model="selectedName" v-if="submitted" />
</template>