{"id":19312034,"url":"https://github.com/weblineindia/vue-swipe-action","last_synced_at":"2026-04-17T14:36:56.378Z","repository":{"id":129985130,"uuid":"273495227","full_name":"weblineindia/Vue-Swipe-Action","owner":"weblineindia","description":"A VueJS component to create iOS styled swipe actions.","archived":false,"fork":false,"pushed_at":"2023-12-27T08:07:58.000Z","size":156,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-19T13:35:42.993Z","etag":null,"topics":["swipe","swipe-gestures","vue","vue-component","vue-component-library","vue-components","vue-plugin","vue-plugins","vue-swipe","vue-swipe-action","vue-weblineindia-swipe","vuecomponent","vuecomponents","vuejs","vuejs-component","vuejs-components","vuejs-library","vuejs-plugin","vuejs-snippets","vuejs-swipe"],"latest_commit_sha":null,"homepage":"https://www.weblineindia.com/communities.html","language":"CSS","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/weblineindia.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-06-19T13:02:17.000Z","updated_at":"2023-12-27T08:07:42.000Z","dependencies_parsed_at":"2023-04-22T17:25:11.284Z","dependency_job_id":null,"html_url":"https://github.com/weblineindia/Vue-Swipe-Action","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/weblineindia/Vue-Swipe-Action","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FVue-Swipe-Action","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FVue-Swipe-Action/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FVue-Swipe-Action/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FVue-Swipe-Action/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weblineindia","download_url":"https://codeload.github.com/weblineindia/Vue-Swipe-Action/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FVue-Swipe-Action/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31933645,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-17T12:37:54.787Z","status":"ssl_error","status_checked_at":"2026-04-17T12:37:25.095Z","response_time":62,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["swipe","swipe-gestures","vue","vue-component","vue-component-library","vue-components","vue-plugin","vue-plugins","vue-swipe","vue-swipe-action","vue-weblineindia-swipe","vuecomponent","vuecomponents","vuejs","vuejs-component","vuejs-components","vuejs-library","vuejs-plugin","vuejs-snippets","vuejs-swipe"],"created_at":"2024-11-10T00:32:18.534Z","updated_at":"2026-04-17T14:36:56.362Z","avatar_url":"https://github.com/weblineindia.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-swipe-actions component\n\n\u003e A VueJS component to create iOS styled swipe actions.\n\n## Table of contents\n\n- [Browser Support](#browser-support)\n- [Demo](#demo)\n- [Getting started](#getting-started)\n- [Import styles](#import-styles)\n- [Usage](#usage)\n- [SwipeList](#swipeList)\n- [Available Props](#available-props)\n- [Events](#events)\n- [Methods](#methods)\n- [SwipeOut](#swipeout)\n- [Want to Contribute?](#want-to-contribute)\n- [Need Help / Support?](#need-help)\n- [Collection of Other Components](#collection-of-components)\n- [Changelog](#changelog)\n- [Credits](#credits)\n- [License](#license)\n- [Keywords](#Keywords)\n\n## Browser Support\n\n![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) |\n--- | --- | --- | --- | --- |\n83.0 ✔ | 77.0  ✔ | 13.1.1 ✔ | 83.0 ✔ | 11.9 ✔ |\n\n## Demo\n\n[![](swipe.gif)](https://github.com/weblineindia/Vue-Swipe-Action/swipe.gif)\n\n## Getting started\n\n```\nnpm install --save vue-weblineindia-swipe\n```\n\n```js\nimport { SwipeList, SwipeOut } from 'vue-weblineindia-swipe';\n\nexport default {\n  components: {\n    SwipeOut,\n    SwipeList\n  }\n};\n```\n\n### Import Styles\n\n```javascript\nimport 'vue-weblineindia-swipe/dist/vue-swipe-actions.css';\n```\n\n## Usage\n\n```html\n\u003cswipe-list\n\tref=\"list\"\n\tclass=\"card\"\n\t:disabled=\"!enabled\"\n\t:items=\"mockSwipeList\"\n\titem-key=\"id\"\n\t@swipeout:click=\"itemClick\"\n\u003e\n\t\u003ctemplate v-slot=\"{ item, index, revealLeft, revealRight, close }\"\u003e\n\t\t\u003c!-- item is the corresponding object from the array --\u003e\n\t\t\u003c!-- index is clearly the index --\u003e\n\t\t\u003c!-- revealLeft is method which toggles the left side --\u003e\n\t\t\u003c!-- revealRight is method which toggles the right side --\u003e\n\t\t\u003c!-- close is method which closes an opened side --\u003e\n\t\t\u003cdiv class=\"card-content\"\u003e\n\t\t\t\u003c!-- style content how ever you like --\u003e\n\t\t\t\u003ch2\u003e{{ item.title }}\u003c/h2\u003e\n\t\t\t\u003cp\u003e{{ item.description }}\u003c/p\u003e\n\t\t\t\u003cspan\u003e{{ index }}\u003c/span\u003e\n\t\t\u003c/div\u003e\n\t\u003c/template\u003e\n\t\u003c!-- left swipe side template and v-slot:left=\"{ item }\" is the item clearly --\u003e\n\t\u003c!-- remove if you dont wanna have left swipe side  --\u003e\n\t\u003ctemplate v-slot:left=\"{ item, close }\"\u003e\n\t\t\u003cdiv class=\"swipeout-action red\" title=\"remove\" @click=\"remove(item)\"\u003e\n\t\t\t\u003c!-- place icon here or what ever you want --\u003e\n\t\t\t\u003ci class=\"fa fa-trash\"\u003e\u003c/i\u003e\n\t\t\u003c/div\u003e\n\t\t\u003cdiv class=\"swipeout-action purple\" @click=\"close\"\u003e\n\t\t\t\u003c!-- place icon here or what ever you want --\u003e\n\t\t\t\u003ci class=\"fa fa-close\"\u003e\u003c/i\u003e\n\t\t\u003c/div\u003e\n\t\u003c/template\u003e\n\t\u003c!-- right swipe side template and v-slot:right\"{ item }\" is the item clearly --\u003e\n\t\u003c!-- remove if you dont wanna have right swipe side  --\u003e\n\t\u003ctemplate v-slot:right=\"{ item }\"\u003e\n\t\t\u003cdiv class=\"swipeout-action blue\"\u003e\n\t\t\t\u003c!-- place icon here or what ever you want --\u003e\n\t\t\t\u003ci class=\"fa fa-edit\"\u003e\u003c/i\u003e\n\t\t\u003c/div\u003e\n\t\n\t\u003c/template\u003e\n\t\u003ctemplate v-slot:empty\u003e\n\t\t\u003cdiv\u003e\n\t\t\t\u003c!-- change mockSwipeList to an empty array to see this slot in action  --\u003e\n\t\t\tlist is empty ( filtered or just empty )\n\t\t\u003c/div\u003e\n\t\u003c/template\u003e\n\u003c/swipe-list\u003e\n```\n\n```js\nexport default {\n  components: {\n    SwipeOut,\n    SwipeList\n  },\n  data() {\n    return {\n      enabled: true,\n      mockSwipeList: [\n          {\n            id: 0,\n            title: \"Title1\",\n            description: \"Description1\",\n            value: \"value1\"\n          },\n          {\n            id: 1,\n            title: \"Title2\",\n            description: \"Description2\",\n            value: \"value2\"\n          },\n          {\n            id: 3,\n            title: \"Title3\",\n            description: \"Description3\",\n            value: \"value3\"\n          }\n      ]\n    };\n  },\n  methods: {\n    revealFirstRight() {\n      this.$refs.list.revealRight(0);\n    },\n    revealFirstLeft() {\n      this.$refs.list.revealLeft(0);\n    },\n    closeFirst() {\n      this.$refs.list.closeActions(0);\n    },\n    closeAll() {\n      this.$refs.list.closeActions();\n    },\n    remove(item) {\n      this.mockSwipeList = this.mockSwipeList.filter(i =\u003e i !== item);\n      // console.log(e, 'remove');\n    },\n    itemClick(e) {\n      console.log(e, \"item click\");\n\t},\n    fbClick(e) {\n      console.log(e, \"First Button Click\");\n    },\n    sbClick(e) {\n      console.log(e, \"Second Button Click\");\n\t},\n  },\n}\n```\n\n### SwipeList\n\nSwipeList component is just a helper for listing multiple SwipeOuts.\n\n#### Available Props\n\n| Prop             | Data Type | Required|Default| Description        |\n| ---------------- | --------- |-------- |-------|------------------ |\n| `items`          | Array     | *       |       | An array with your data |\n| `item-key` | String    |         |id     | Your key for :key when list is v-for-ed, if not found array index will used|\n| `disabled`       | Boolean   |         |false  | if true items will be disabled, and text selection will be possible (on desktop). adds class ``swipeout--disabled``  |\n| `item-disabled`  | Function    |         |`js () =\u003e false`     | A function that receives the item as parameter and returns true case disabled or false if not   |\n| `threshold`      | Number    |         |45     | With that property you can fine tune when actions are considered open |\n| `revealed`       | Object | || An object representing the revealed status of the items, key is the index and the value is either ```left``` or ```right```, use it with the ```.sync``` modifier |\n\n#### Events\n\n| Event                    | Payload        | Description        |\n| ----------------------- | --------------- | -|\n| `swipeout:click`        | item \t\t\t| Emitted on single click/tap on the item |\n| `active`                | Boolean         | Emitted when the user is opening/closing the any of the actions |\n\n#### Methods\n\n| Method                  | Params          | Description        |\n| ----------------------- | --------------- | -|\n| `revealRight`           | index (number)  | Reveals right actions on given index |\n| `revealLeft`            | index (number)  | Reveals left actions on given index |\n| `closeActions`          | index (number)? | Closes actions on given index, or all if no index given |\n| `isRevealed`            | index (number)  | Returns the revealed status on a given index, either ```false``` for closed, or ```left``` or ```right``` |\n\n\n### SwipeOut\n\nSwipeOut is the main component, representing a single item with it's actions.\n\n#### Props\n\n| Prop             | Data Type | Required|Default| Description        |\n| ---------------- | --------- |-------- |-------|------------------ |\n| `disabled`       | Boolean   |         |false  | if true items will be disabled, and text selection will be possible (on desktop). adds class ``swipeout--disabled``  |\n| `threshold`      | Number    |         |45     | With that property you can fine tune when actions are considered open |\n\n#### Events\n\n| Event                    | Payload         | Description        |\n| ----------------------- | --------------- | -|\n| `active`                | Boolean         | Emitted when the user is opening/closing the any of the actions |\n\n\n## Want to Contribute?\n\n- Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).\n- [Fork it](http://help.github.com/forking/).\n- Create new branch to contribute your changes.\n- Commit all your changes to your branch.\n- Submit a [pull request](http://help.github.com/pull-requests/).\n\n-----\n\n## Need Help? \n\nWe also provide a free, basic support for all users who want to use this VueJS Swipe in their software project. In case you want to customize this swipe to suit your development needs, then feel free to contact our [VueJS developers](https://www.weblineindia.com/hire-vuejs-developer.html).\n\n-----\n\n## Collection of Components\n\nWe have built many other components and free resources for software development in various programming languages. Kindly click here to view our [Free Resources for Software Development](https://www.weblineindia.com/communities.html).\n\n------\n\n## Changelog\n\nDetailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).\n\n## Credits\n\nvue-weblineindia-swipe is inspired by [vue-swipe-actions](https://www.npmjs.com/package/vue-swipe-actions).\n\n## License\n\n[MIT](LICENSE)\n\n[mit]: https://github.com/weblineindia/Vue-Swipe-Action/blob/master/LICENSE\n\n## Keywords\n\nvuejs,vue-weblineindia-swipe,vue,swipe, list\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweblineindia%2Fvue-swipe-action","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweblineindia%2Fvue-swipe-action","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweblineindia%2Fvue-swipe-action/lists"}