@raffobaffo/vue-wait-button NPM

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

vue crud ajax reactive multipurpose JavaScript

core-js velocity-animate vue

@infinitebrahmanuniverse/nolb-_raf @everything-registry/sub-chunk-755 @zalastax/nolb-_raf

4 years ago

4 years ago

4 years ago

4 years ago