{"id":17269033,"url":"https://github.com/a1rpun/vue-quick-edit","last_synced_at":"2025-04-12T17:25:53.110Z","repository":{"id":52163817,"uuid":"196963028","full_name":"A1rPun/vue-quick-edit","owner":"A1rPun","description":"In-place editing with native HTML inputs in Vue","archived":false,"fork":false,"pushed_at":"2021-05-06T19:16:58.000Z","size":557,"stargazers_count":39,"open_issues_count":1,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-10T08:44:08.971Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Vue","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/A1rPun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-15T09:01:09.000Z","updated_at":"2023-03-12T15:40:32.000Z","dependencies_parsed_at":"2022-09-02T04:03:34.396Z","dependency_job_id":null,"html_url":"https://github.com/A1rPun/vue-quick-edit","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/A1rPun%2Fvue-quick-edit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/A1rPun%2Fvue-quick-edit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/A1rPun%2Fvue-quick-edit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/A1rPun%2Fvue-quick-edit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/A1rPun","download_url":"https://codeload.github.com/A1rPun/vue-quick-edit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248603515,"owners_count":21131807,"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":[],"created_at":"2024-10-15T08:15:09.770Z","updated_at":"2025-04-12T17:25:53.072Z","avatar_url":"https://github.com/A1rPun.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-quick-edit\n\n\u003e In-place editing with native HTML inputs. Inspired by x-editable\n\n[![npm version](https://img.shields.io/npm/v/vue-quick-edit.svg)](https://www.npmjs.com/package/vue-quick-edit) [![npm size](https://img.shields.io/bundlephobia/min/vue-quick-edit.svg)](https://www.npmjs.com/package/vue-quick-edit) [![npm downloads](https://img.shields.io/npm/dt/vue-quick-edit.svg)](https://www.npmjs.com/package/vue-quick-edit) [![Coverage Status](https://img.shields.io/travis/A1rPun/vue-quick-edit.svg)](https://travis-ci.org/A1rPun/vue-quick-edit)\n\n## [Example](https://a1rpun.github.io/vue-quick-edit/)\n\n## Features\n- [x] In-place editing\n- [x] Multiple input types\n- [x] Native element property bindings\n- [x] Theming with CSS overrides or even apply your own classes\n- [x] Customize with slots\n- [x] Keyboard support: tab for navigation, enter for Ok (+ ctrl for textarea) and escape for cancel\n- [ ] Visual feedback when value gets changed or value is invalid\n\n## Install\n\n```shell\n$ npm install --save vue-quick-edit\n```\n\n**Global include**\n```\nimport QuickEdit from 'vue-quick-edit';\n\nVue.component('quick-edit', QuickEdit);\n```\n\n**Local include**\n```\nimport QuickEdit from 'vue-quick-edit';\n\nexport default {\n  components: { QuickEdit },\n};\n```\n\n## Usage\n\n```html\n\u003cquick-edit v-model=\"myValue\"\u003e\u003c/quick-edit\u003e\n```\n\n## Properties\n\nName | Type | Default | Description\n--- | --- | --- | ---\nbuttonCancelText | String | Cancel | The text on the Cancel button.\nbuttonOkText | String | Ok | The text on the Ok button.\nbooleanYesText | String | Yes | The text for `true` when you configure `type=\"boolean\"`.\nbooleanNoText | String | No | The text for `false` when you configure `type=\"boolean\"`\nclasses | Object | See Description | buttonCancel: 'vue-quick-edit__button--cancel'\u003cbr\u003ebuttonOk: 'vue-quick-edit__button--ok'\u003cbr\u003ebuttons: 'vue-quick-edit__buttons'\u003cbr\u003einput: 'vue-quick-edit__input'\u003cbr\u003elink: 'vue-quick-edit__link'\u003cbr\u003eisClickable: 'vue-quick-edit__link--is-clickable'\u003cbr\u003eisEmpty: 'vue-quick-edit__link--is-empty'\u003cbr\u003eisRequired: 'vue-quick-edit__link--is-required'\u003cbr\u003ewrapper: 'vue-quick-edit'\nemptyText | String | Empty | The text to display when there is a falsy value in the `v-model` directive.\nformatMultiple | Function | `values.join(', ')` | Specify a callback to format the array for a `select`, `checkbox` or `radio` type.\noptions | Array | [] | The options to display for a `select`, `checkbox` or `radio` type. This can be an array of strings or an array of objects with `text` \u0026 `value` (\u0026 `disabled`) as properties.\nplaceholderValue | String | `''` | When you pass a `placeholder` to a select it will display the placeholder as the first default option, you can set the value of this option with `placeholderValue`.\nshowButtons | Boolean | true | Hide the buttons by setting this to `false`.\nstartOpen | Boolean | false | Set to `true` if you want to start in edit mode.\ntype | String | input | This can be `input`, `textarea`, `select`, `checkbox`, `radio`, `boolean` or any other type you can pass to `input`.\nvalidator | Function | null | Specify a callback to describe why the input is invalid.\nv-model | String, Array, Boolean, Number | `''` | Usually a string, for `checkbox` or `select[multiple]` use an array.\n\n## Events\nName | Parameters | Description\n--- | --- | ---\nclose | Current value | Fires when the user has interacted with the \"ok\" or \"close\" button.\ninput | Current value | Fires when the user has interacted with the \"ok\" button.\nshow | Current value | Fires when the user has interacted with the display label.\nraw-input | Current input value | Fires the current input value when the user has interacted with the \"ok\" button.\ninvalid | Current value, Validator return value | Fires when the validator function returns a truthy value, usually a message why the input is invalid.\n\n## Slots\nName | Default | Description\n--- | --- | ---\ndefault | `{{ value || emptyText }}` | The display value. Available slot props `value` and `raw-value`.\nbutton-ok | `{{ buttonOkText }}` | A slot to use HTML as a the Ok button text, useful for FontAwesome.\nbutton-cancel | `{{ buttonCancelText }}` | A slot to use HTML as the Cancel button text, useful for FontAwesome.\nprepend | `` | Prepend HTML before the display text\nappend | `` | Append HTML after the display text\n\n## Theming\n\n### Custom theme\n\nFor example just override this class in your style\n```css\n.vue-quick-edit__link--is-clickable {\n  color: #BADA55;\n}\n```\n\n### Bootstrap theme\n\nSet up the classes for the corresponding elements in `data`\n```js\nvueQuickEditClasses: {\n  wrapper: 'form-group form-inline',\n  input: 'form-control input-sm',\n  buttons: 'btn-group btn-group-sm',\n  buttonOk: 'btn btn-primary',\n  buttonCancel: 'btn btn-link',\n},\n```\n\nMaybe add specific overrides for bootstrap\n```html\n\u003cstyle scoped\u003e\n.form-group {\n  margin-bottom: 0;\n}\n.btn-group {\n  display: inline-block;\n}\n\u003c/style\u003e\n```\n\nUse it like this\n\n```html\n\u003cquick-edit :classes=\"vueQuickEditClasses\"\u003e\u003c/quick-edit\u003e\n```\n\n### Thanks to\n\n- Github for hosting\n- NPM for hosting\n- Travis CI for the service\n- [Shields.io](https://shields.io) for the badges\n\n## Licence\nMIT, see LICENSE.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa1rpun%2Fvue-quick-edit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fa1rpun%2Fvue-quick-edit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa1rpun%2Fvue-quick-edit/lists"}