Needling Perl Mongers

    buefy-loading-tracker
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.1 • Public • Published

    Buefy-Loading-Tracker

    A simple Vue mixin for tracking the loading states of multiple Bulma or Buefy components or elements.

    Installation

    npm install --save buefy-loading-tracker

    Usage

    Add the loading tracker to the component you want to control:

    <template>
        <div>
            <!-- Default loading state -->
            <button class="is-button" :class="loadingClass()"></button>
            
            <!-- Named loading state -->
           <button class="is-button" :class="loadingClass('named-loader')"></button>
        </div>
    </template>

    Import the loading tracker:

    <script>
        import LoadingTracker from 'buefy-loading-tracker';
        
        export default {
            mixins: [LoadingTracker],
        }
    </script>

    Starting and stopping the default loader:

    // Start loading
    this.startLoading();
     
    // Stop loading
    this.stopLoading();
     
    // Check loading
    this.isLoading();

    Starting and stopping named loaders:

    // Start loading
    this.startLoading('named-loader');
     
    // Stop loading
    this.stopLoading('named-loader');
     
    // Check loading
    this.isLoading('named-loader');

    (Optional) If you need to use some Vuex controlled loading state, define it using a loadingState computed property.

    <template>
        <!-- Loading state from Vuex store -->
       <button class="is-button" :class="loadingClass('someLoadingState')"></button>
    </template>
    <script>
    import LoadingTracker from 'buefy-loading-tracker';
    import { mapState } from 'vuex';
     
    export default {
        mixins: [LoadingTracker],
        computed: {
            loadingState() {
                return {
                    ...mapState(['someLoadingState'])
                }
            }
        }
    }
    </script>

    License

    MIT - View License

    Install

    npm i buefy-loading-tracker

    DownloadsWeekly Downloads

    0

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    10.1 kB

    Total Files

    7

    Last publish

    Collaborators

    • jorgenvatle