@dataplain/timeoutmessage

    0.1.4 • Public • Published

    @dataplain/timeoutmessage

    Vue component to display ephemeral text and a countdown progress bar.

    Install

    Create a new vue project:

    vue create

    Install component:

    npm install --save @dataplain/timeoutmessage

    Environment setting

    Make a src/plugins folder at the root:

    mkdir src/plugins

    Configure the timeoutmessage.js

    Create the src/plugins/timeoutmessage.js:

    import Vue from "vue";
    import TimeoutMessage from "@dataplain/timeoutmessage";
    import "@dataplain/timeoutmessage/dist/TimeoutMessage.css";
    
    Vue.use(TimeoutMessage, { TimeoutMessageName: "MyTimeoutMessage" });

    Import timeoutmessage.js

    The "src/main.js" file should look like this:

    import Vue from "vue";
    import App from "./App.vue";
    
    import "./plugins/timeoutmessage";
    
    Vue.config.productionTip = false;
    
    new Vue({
        render: h => h(App),
    }).$mount("#app");

    How to use (example in App.vue)

    <template>
        <div>
            <my-timeout-message value="Too easy." timeout="3" @timesup="showNextProgressbar" />
    
            <!-- if you set the message using a variable via v-model, it will be set to empty when times out -->
            <my-timeout-message v-model="anotherMessage" barClass="my-progress-color" textClass="my-progress-text" />
    
            <!-- you can use predefined classes from your preferred framework, such as bootstrap -->
            <my-timeout-message value="It's also very simple." barClass="bg-primary" textClass="text-primary" />
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                anotherMessage: ""
            }
        },
        methods: {
            showNextProgressbar() {
                this.anotherMessage = 'Next progress bar!';
            }
        }
    }
    </script>
    
    <style>
    .my-progress-color {
        background-color: green;
    }
    .my-progress-text {
        color: blue;
    }
    </style>

    Properties

    Property Description Required Default
    v-model or value Text message to show no
    timeout Time in seconds no 5
    barHeight Bar height no 3px
    barClass CSS Class to apply on progressbar no
    textClass CSS Class to apply on message no

    Events

    Event Description
    input To clear the message when time runs out

    Using in the browser

    To use directly in the browser, import @dataplain/timeoutmessage:

    <script src="https://unpkg.com/@dataplain/timeoutmessage" />

    Install

    npm i @dataplain/timeoutmessage

    DownloadsWeekly Downloads

    4

    Version

    0.1.4

    License

    GPLv3

    Unpacked Size

    146 kB

    Total Files

    12

    Last publish

    Collaborators

    • mdauernheimer
    • pauloklaus