{"id":15019541,"url":"https://github.com/ecollect/vue-swipe-actions","last_synced_at":"2025-04-04T14:06:32.246Z","repository":{"id":33003233,"uuid":"137373474","full_name":"eCollect/vue-swipe-actions","owner":"eCollect","description":"iOS style swipe actions","archived":false,"fork":false,"pushed_at":"2022-12-10T16:47:53.000Z","size":2025,"stargazers_count":235,"open_issues_count":28,"forks_count":46,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-04T14:06:31.444Z","etag":null,"topics":["javascript","swipe","swipe-cards","vuejs"],"latest_commit_sha":null,"homepage":"https://ecollect.github.io/vue-swipe-actions/","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/eCollect.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-14T15:01:52.000Z","updated_at":"2025-03-09T14:45:15.000Z","dependencies_parsed_at":"2023-01-14T23:00:08.183Z","dependency_job_id":null,"html_url":"https://github.com/eCollect/vue-swipe-actions","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eCollect%2Fvue-swipe-actions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eCollect%2Fvue-swipe-actions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eCollect%2Fvue-swipe-actions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eCollect%2Fvue-swipe-actions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eCollect","download_url":"https://codeload.github.com/eCollect/vue-swipe-actions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247190250,"owners_count":20898702,"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":["javascript","swipe","swipe-cards","vuejs"],"created_at":"2024-09-24T19:53:40.156Z","updated_at":"2025-04-04T14:06:32.228Z","avatar_url":"https://github.com/eCollect.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-swipe-actions\n\n**iOS style swipe actions for Vue.js, [Live Demo](https://ecollect.github.io/vue-swipe-actions/)** ([Source](https://github.com/eCollect/vue-swipe-actions/blob/master/demo/src/App.vue))\n\n## Installation\n\n```\nnpm install --save vue-swipe-actions\n```\n\n```js\nimport { SwipeList, SwipeOut } from 'vue-swipe-actions';\n\nexport default {\n  components: {\n    SwipeOut,\n    SwipeList\n  }\n};\n```\n\n## Basic Usage\n\n### Import Styles\n\n```javascript\nimport 'vue-swipe-actions/dist/vue-swipe-actions.css';\n```\n\n### SwipeList\n\nSwipeList component is just a helper for listing multiple SwipeOuts.\n\n#### 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| `passive-listeners`      | Boolean    |         |false     | It defines if the touch events should be registered as passive or not |\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```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-heart\"\u003e\u003c/i\u003e\n\t\t\u003c/div\u003e\n\t\t\u003cdiv class=\"swipeout-action green\"\u003e\n\t\t\t\u003c!-- place icon here or what ever you want --\u003e\n\t\t\t\u003ci class=\"fa fa-heart\"\u003e\u003c/i\u003e\n\t\t\u003c/div\u003e\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: \"Some title\",\n          description: \"some description\"\n        },\n        {\n          id: 1,\n          title: \"Some title\",\n          description: \"some description\"\n        },\n        {\n          id: 2,\n          title: \"Some title\",\n          description: \"some description\"\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\n## Author\n\n\u0026#169; 2018-9 eCollect AG.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecollect%2Fvue-swipe-actions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fecollect%2Fvue-swipe-actions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecollect%2Fvue-swipe-actions/lists"}