# @raffobaffo/vue-wait-button

> A simple button with state managment and animations

Latest version **1.3.11** (published 2020-02-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @raffobaffo/vue-wait-button
pnpm add @raffobaffo/vue-wait-button
yarn add @raffobaffo/vue-wait-button
bun add @raffobaffo/vue-wait-button
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.11 |
| Published | 2020-02-03 |
| First published | 2020-02-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Raffaele Provinciali |
| Maintainers | raffobaffo |
| Keywords | vue, crud, ajax, reactive, multipurpose, JavaScript |

## Links

- npm: https://www.npmjs.com/package/@raffobaffo/vue-wait-button
- npm.io page: https://npm.io/package/@raffobaffo/vue-wait-button

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.1.*
- [core-js](https://npm.io/package/core-js.md) ^3.6.4
- [velocity-animate](https://npm.io/package/velocity-animate.md) ^1.5.2

## Recent versions

- 1.3.11 (latest) — 2020-02-03
- 1.3.1 — 2020-02-03
- 1.3.0 — 2020-02-02
- 0.1.21 — 2020-02-02
- 0.1.2 — 2020-02-02
- 0.1.0-0.01-BS3 — 2020-02-02
- 0.1.0-0.01-BS21 — 2020-02-02
- 0.1.0-0.01-BS2 — 2020-02-02
- 0.1.0-0.01-BS1 — 2020-02-02
- 0.1.0-0.01-BS — 2020-02-02
- 0.1.0-0.01S — 2020-02-02
- 0.1.0-0.1 — 2020-02-02
- 0.1.3-c — 2020-02-02
- 0.1.3-b — 2020-02-02
- 0.1.2-b — 2020-02-02
- … 3 more at https://npm.io/package/@raffobaffo/vue-wait-button/versions

## README

# CRUD Button

## 📖 Usage


### 1. Install:
```bash
npm i @raffobaffo/vue-wait-button
```

### 2. Require:
```js

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

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

### 3. Use in Your Components

```vue
<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-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.
   ```vue

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

---
_Source: https://npm.io/package/@raffobaffo/vue-wait-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._