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'" />