is-input-number

This is vue component input number with button handler. [Live Demo Here](https://vsnp7.csb.app/).

Usage no npm install needed!

<script type="module">
  import isInputNumber from 'https://cdn.skypack.dev/is-input-number';
</script>

README

Is Input Number

This is vue component input number with button handler. Live Demo Here.

Installation

$ npm install -d is-input-number

Setup

Global
import IsInputNumber from 'is-input-number';

Vue.use(IsInputNumber)

Usage

<template>

    <IsInputNumber
        mode="top-down"
        :max="300"
        :min="1"
        :disabled="false"
        :value.sync="value"
        @change="onChange"
    />

</template>

<script>
// this for implement on local file
import IsInputNumber from 'is-input-number';

export default {
    // this for implement on local file
    components: {
        IsInputNumber,
    },
    data() {
        value: 1,
    },
    methods: {
        onChange (value) {
            this.value = value;
        }
    }
}
</script>


Style SCSS

.input-number {
    display: flex;

    .input-number-input-wrap {
        width: 60px;
        // height: 30px;

        /* Chrome, Safari, Edge, Opera */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }
    }

    .input-number-input {
        box-sizing: border-box;
        list-style: none;
        width: 100%;
        color: rgba(0,0,0,.85);
        font-size: 14px;
        line-height: 1.5715;
        background-color: #fff;
        background-image: none;
        transition: all .3s;
        padding: .3rem .6rem;
        border: 1px solid #d9d9d9;

        height: 100%;
        text-align: center;

        &:disabled,
        &[readonly] {
            background-color: #f5f5f5;
            opacity: 1;
        }

        &.top-down {
            border-radius: 3px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-right: 0;
        }

        &.plus-minus {
            border-radius: 0px;
            border-left: 0;
            border-right: 0;
        }
    }

    .input-plus-minus {
        .input-number-handler {
                padding: .3rem .7rem;
                cursor: pointer;
                font-size: 18px;
                background: #fff;
                border: 1px solid #ddd;
                height: 44px;
                width: 34px;
        }

        .input-number-handler-minus {
            margin-right: -1px;
            border-right: 0px;
        }

        .input-number-handler-plus {
            margin-left: -1px;
            border-left: 0;
        }
    }

    .input-top-down {
        .input-number-handler-wrap {
            display: flex;
            flex-direction: column;
            // border: 1px solid #ddd;
            background: #fff;

            .input-number-handler {
                padding: .3rem .7rem;
                cursor: pointer;
                font-size: 8px;
                background: #fff;
                border: 1px solid #ddd;

                &:hover {
                    background: #40a9ff;
                    color: #fff;
                }

                &.disabled {
                    background: #f5f5f5;
                    user-select: none;

                    &:hover {
                        background: #f5f5f5;
                        color: rgb(143, 142, 142);
                    }
                }
            }

            .input-number-handler-up {
                border-bottom: 0px solid #ddd;
                border-top-right-radius: 3px;
            }

            .input-number-handler-down {
                border-bottom-right-radius: 3px;
            }
        }
    }
}

Attributes

  • mode: Set Default Mode (String) "top-down" or "plus-minus", default 'top-down'.
  • value: Add a default value to input (integer), default 0.
  • min: Minimum value for input number (integer), default 1.
  • max: Maximum value for input number (integer), default 10000000.
  • disabled: Set input number disabled (boolean), default false.

Events

@change

Event is fired when value is changed.

License

MIT license

© 2020 Ilham Sabir