@raffobaffo/vue-wait-button

A simple button with state managment and animations
1,058
vue javascript reactive ajax crud multipurpose
Install
npm install @raffobaffo/vue-wait-button
Latest Version:1.3.11
Vue:2
License:MIT
Last Updated:Feb 3, 2020
Links: npm
Maintainer: raffobaffo

CRUD Button

📖 Usage

1. Install:

npm i @raffobaffo/vue-wait-button

2. Require:


    import Button from '@raffobaffo/vue-wait-button'

    export default {
        name: 'app',
        components: {
            Button
        }

3. Use in Your Components

<template>
  <div style="display: flex;flex-direction: column;padding: 1em;">
 
         <Button @click="clickFakeSave()"
                 :animate = "true"
                 :active="shouldSave"
                 :acting="isSaving"
                 :inactiveMessage="'No changes to save'"
                 :activeMessage="'Save changes'"
                 :actingMessage="'Saving'" />
       </div>

✔ Vue-Crud-Button Props

Vue-Crud-Button props. name, type, extras:

Option Name Type Default Description
acting Boolean false Should be True when @click callback can't be called because a CRUD operation is in progress. Ex. Saving changes in description field
active Boolean true Should be True when @click callback can be called. Ex. Description text changed
positions Object x: 'center', y: 'middle' X and Y position of the component inside parent container
activeMessage String "Click me" Text to display inside the button when @click callback can be called
actingMessage String "Wait..." Text to display inside the button when a CRUD operation is in progress.
inactiveMessage String "Clicked" Text to display inside the button when @click callback can't be called
animate Boolean true Use transitions for state change. Use velocity.js
buttonStyle Object see: Styling the button Styling

✔ Styling the button:

This is the default object to style the button

 {
        active: {

            'backgroundColor': '#fff',
            'backgroundColorHover': '#4b4b4b',
            'borderColor': '#575757',
            'borderColorHover': '#2e2e2e',
            'color': '#4b4b4b',
            'colorHover': '#fcfcfc',
            'fontSize': 'larger',
            'fontWeight': 800
        },

        acting: {

            'backgroundColor': '#fff',
            'backgroundColorHover': '#ff8900',
            'borderColor': '#ff8900',
            'borderColorHover': '#ff6405',
            'color': '#ff6405',
            'colorHover': '#fff',
            'fontSize': 'larger',
            'fontWeight': 800
        },

        inactive: {

            'backgroundColor': '#fff',
            'backgroundColorHover': '#f2f2f2',
            'borderColor': '#e1e1e1',
            'borderColorHover': '#bfbfbf',
            'color': '#848484',
            'colorHover': '#484848',
            'fontSize': 'larger',
            'fontWeight': 800
        }
    }

Change them accordingly to your needs, ex.


 
         <Button @click="clickFakeSave()"
                 :animate = "true"
                 buttonStyle="{active:{ color:'red' }"
                 :active="shouldSave"
                 :acting="isSaving"
                 :inactiveMessage="'No changes to save'"
                 :activeMessage="'Save changes'"
                 :actingMessage="'Saving'" />

Related Packages

vue-dynamic-select

A VueJS plugin that provides a searchable and reactive select list component wit...

2,930 18
ajax javascript reactive vue component dynamic js list plugin search +3
v-ztree

A simple tree for Vue2, support single or multiple(check) select tree, and suppo...

1,642
ajax javascript vue front-end multiple tree vuejs web ztree
cruda

A CRUD viewmodal, provides unified APIs for different UIFrameworks

1,140 7
crud javascript vue element-plus element-ui js uiframework utils viewmodel
vue-full-screen-file-drop

Vue component for full screen file drop

16,061 19
javascript vue
vuetify-crud

Vuetify CRUD module

4,404 2
crud vuetify

Version History

Version Released Vue License
1.3.11 ^2.1.* MIT
1.3.1 ^2.1.* MIT
1.3.0 ^2.1.* MIT
0.1.21 ^2.6.11 MIT
0.1.2 ^2.6.11 MIT
Pre-releases (11)
Version Released Vue License
0.1.3-b ^2.6.10
0.1.3-c ^2.6.11 MIT
0.1.2-b ^2.6.10
0.1.1-b ^2.6.10
0.1.0-0.01-BS3 ^2.6.11 MIT