{"id":13635361,"url":"https://github.com/smwbtech/vue-number-input","last_synced_at":"2025-04-19T04:30:56.734Z","repository":{"id":57161106,"uuid":"203991326","full_name":"smwbtech/vue-number-input","owner":"smwbtech","description":"Vue component for numbers input","archived":false,"fork":false,"pushed_at":"2020-02-22T14:13:38.000Z","size":1807,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T06:13:41.630Z","etag":null,"topics":["vue","vue-component","vue-input","vue-number","vue-number-input","vuejs"],"latest_commit_sha":null,"homepage":"https://smwbtech.github.io/vue-number-input/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/smwbtech.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-23T12:08:59.000Z","updated_at":"2023-03-15T01:19:52.000Z","dependencies_parsed_at":"2022-09-09T07:10:38.756Z","dependency_job_id":null,"html_url":"https://github.com/smwbtech/vue-number-input","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smwbtech%2Fvue-number-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smwbtech%2Fvue-number-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smwbtech%2Fvue-number-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smwbtech%2Fvue-number-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smwbtech","download_url":"https://codeload.github.com/smwbtech/vue-number-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249606267,"owners_count":21298851,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vue","vue-component","vue-input","vue-number","vue-number-input","vuejs"],"created_at":"2024-08-02T00:00:44.480Z","updated_at":"2025-04-19T04:30:56.473Z","avatar_url":"https://github.com/smwbtech.png","language":"JavaScript","funding_links":[],"categories":["Components and plugins"],"sub_categories":["Courses"],"readme":"# @smartweb/vue-number-input\n\n[![vue](https://img.shields.io/badge/Vue-2.x-green.svg)](https://vuejs.org/index.html)\n[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/smwbtech/vue-flash-message/blob/master/LICENSE.md)\n[![Build Status](https://travis-ci.org/smwbtech/vue-number-input.svg?branch=master)](https://travis-ci.org/smwbtech/vue-number-input)\n[![Coverage Status](https://coveralls.io/repos/github/smwbtech/vue-number-input/badge.svg?branch=master)](https://coveralls.io/github/smwbtech/vue-number-input?branch=master)\n[![Size](https://badgen.net/bundlephobia/minzip/@smartweb/vue-number-input@latest)](https://bundlephobia.com/result?p=@smartweb/vue-number-input@latest)\n\nVue component for numbers input.\n\n-   Accessible: uses ARIA agreements (100% accessibility in lighthouse)\n-   Use your keyboard to navigate and control\n-   Use your mousewheel or touchpad to increase or descrease value\n-   Flexible styling\n-   Support custom controls through slots\n\n#### [Live Demo](https://smwbtech.github.io/vue-number-input/)\n\n## Download\n\nUse npm\n\n```\nnpm i @smartweb/vue-number-input\n```\n\nOr via cdn\n\n```html\n\u003cscript src=\"https://unpkg.com/@smartweb/vue-number-input/build/vue-number-input.umd.min.js\"\u003e\u003c/script\u003e\n```\n\n## Configuration\n\nImport and register in your component.vue file\n\n```javascript\nimport VueNumberInput from '@smartweb/vue-number-input';\n\nexport default {\n\tcomponents: {\n\t\tVueNumberInput\n\t}\n};\n```\n\nUse it in your template with v-model directive\n\n```html\n\u003ctemplate\u003e\n\t\u003cdiv id=\"app\"\u003e\n\t\t\u003cVueNumberInput\n\t\t\tv-model=\"you_model\"\n\t\t\t:min=\"0\"\n\t\t\t:max=\"100\"\n\t\t\u003e\u003c/VueNumberInput\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n```\n\nOr register it globally in your application entry point (main.js or as you called it)\n\n```javascript\nimport Vue from 'vue';\nimport VueNumberInput from '@smartweb/vue-number-input';\n// Global registration of the component\nVue.component('vue-number-input', VueNumberInput);\n\nnew Vue({\n\trender: h =\u003e h(App)\n}).$mount('#app');\n```\n\n## Usage\n\nYou can bind following props for vue-input-number element\n\n| Prop                 |    Type     |      Default value      |                                                   Description                                                    |\n| -------------------- | :---------: | :---------------------: | :--------------------------------------------------------------------------------------------------------------: |\n| **value**            | **Number**  |            0            |                 Defines a value for 'value' and 'aria-valuenow' attributes of \u003cinput/\u003e element.                  |\n| **min**              | **Number**  | Number.MIN_SAFE_INTEGER |     Minimum value of the number range. Provides a value for 'aria-valuemin' attributes of \u003cinput/\u003e element.      |\n| **max**              | **Number**  | Number.MAX_SAFE_INTEGER |     Maximum value of the number range. Provides a value for 'aria-valuemax' attributes of \u003cinput/\u003e element.      |\n| **step**             | **Number**  |            1            |                                                 Incremental step                                                 |\n| **disabled**         | **Boolean** |          false          | Defines a value for 'aria-disabled' and 'disabled' attributes of \u003cinput/\u003e element. Also disable controls buttons |\n| **readonly**         | **Boolean** |          false          |                          Defines a value for 'readonly' attribute of \u003cinput/\u003e element.                           |\n| **autofocus**        | **Boolean** |          false          |                          Defines a value for 'autofocus' attribute of \u003cinput/\u003e element.                          |\n| **controlsPosition** | **String**  |        'on edge'        |               Acceptable values: 'on edges', 'left', right'. Defines position of control buttons.                |\n| **inputClass**       | **String**  |            -            |                                      Defines user's class for input element                                      |\n| **buttonIncClass**   | **String**  |            -            |                                     Defines user's class for increase button                                     |\n| **buttonDecClass**   | **String**  |            -            |                                     Defines user's class for decrease button                                     |\n\n#### Example\n\n```html\n\u003cvue-number-input\n\tv-model=\"you_model\"\n\t:value=\"50\"\n\t:min=\"0\"\n\t:max=\"100\"\n\t:controlsPosition=\"'left'\"\n/\u003e\n```\n\nFor more examples visit **[demo page](https://smwbtech.github.io/vue-number-input/)**\n\n#### Your own controls through slot\n\nYou can create your own controls and pass them to slots  \nRead more about slots in [official docs](https://vuejs.org/v2/guide/components-slots.html)\n\n```html\n\u003cvue-number-input\n\tclass=\"custom-container\"\n\tv-model=\"you_model\"\n\t:inputClass=\"custom-input\"\n\t:buttonIncClass=\"custom-btn-inc\"\n\t:buttonDecClass=\"custom-btn-dec\"\n\u003e\n\t\u003c!-- slot for decrease button --\u003e\n\t\u003ctemplate #button-decrease\u003e\n\t\t\u003ccustom-decrease-button\u003e\u003c/custom-decrease-button\u003e\n\t\u003c/template\u003e\n\n\t\u003c!-- slot for increase button --\u003e\n\t\u003ctemplate #button-increase\u003e\n\t\t\u003ccustom-increase-button\u003e\u003c/custom-increase-button\u003e\n\t\u003c/template\u003e\n\u003c/vue-number-input\u003e\n```\n\n### Events\n\n|   Event    |                       Description                        |   Params   |\n| :--------: | :------------------------------------------------------: | :--------: |\n| **input**  |        Triggered on user input or buttons clicks         |   Number   |\n| **change** | Triggered on value changed and focus leave input element |   Number   |\n| **focus**  |        Triggered when user focused on input field        | FocusEvent |\n|  **blur**  |          Triggered when focus leave input field          | FocusEvent |\n\n## LICENSE\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmwbtech%2Fvue-number-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmwbtech%2Fvue-number-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmwbtech%2Fvue-number-input/lists"}