{"_id":"@ahultgren/vue3-swipe-actions","_rev":"3-08a156b0baf0bd8bab5096d4dc785340","name":"@ahultgren/vue3-swipe-actions","dist-tags":{"latest":"0.0.6"},"versions":{"0.0.1":{"name":"@ahultgren/vue3-swipe-actions","version":"0.0.1","_id":"@ahultgren/vue3-swipe-actions@0.0.1","maintainers":[{"name":"ahultgren","email":"me@andreashultgren.se"}],"dist":{"shasum":"de4e7346ff0a0c823dc5bb035fd756305279c1d9","tarball":"https://registry.npmjs.org/@ahultgren/vue3-swipe-actions/-/vue3-swipe-actions-0.0.1.tgz","fileCount":5,"integrity":"sha512-uuyrkGcvitmJKRkpmpxTvs+OJWwZXYegmyW4uz2kOd+0mpPKfeBXhl+/+yIInbKCuY0e3GGy1hWSa9LMCJ5bQA==","signatures":[{"sig":"MEYCIQCtO582/j2hlUOQU53Ld7fObsDd8ZvoPt/IeXUIAISlzwIhAP+OGcYVXyXADYpVFpy7J3ncPYcNCSgKHT0mHers4Cv4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36728},"main":"dist/index.umd.ejs","type":"module","module":"dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.umd.cjs"},"./style.css":"./dist/index.css"},"gitHead":"d29c9f3f2d033be3336175eea402a974dbf57c06","private":false,"scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"ahultgren","email":"me@andreashultgren.se"},"_npmVersion":"10.8.2","description":"**Note: this is a port of [vue-swipe-actions](https://github.com/eCollect/vue-swipe-actions) to support vue 3.**","directories":{},"_nodeVersion":"22.5.1","dependencies":{"vue":"^3.5.13"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.5","vue-tsc":"^2.2.0","typescript":"~5.6.2","@types/node":"^22.10.6","@vue/tsconfig":"^0.7.0","@vitejs/plugin-vue":"^5.2.1"},"_npmOperationalInternal":{"tmp":"tmp/vue3-swipe-actions_0.0.1_1736947785371_0.009679188027200247","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@ahultgren/vue3-swipe-actions","version":"0.0.2","_id":"@ahultgren/vue3-swipe-actions@0.0.2","maintainers":[{"name":"ahultgren","email":"me@andreashultgren.se"}],"dist":{"shasum":"5d06bd2dd3514adf7428365be684a69b4d4fc2ad","tarball":"https://registry.npmjs.org/@ahultgren/vue3-swipe-actions/-/vue3-swipe-actions-0.0.2.tgz","fileCount":5,"integrity":"sha512-TDQB01Bvg3AD8NISx9XmsLV25UUQFxJr6f7wW0lxZ9q7zhBAy8svrPQPpkc2x9bQ9J7jdz2eNwGYFmQbFvZXFQ==","signatures":[{"sig":"MEUCIQCUZbZIpiUEiLwmxX1+tSvRkbSIw3kv8Qae8qUEa6o5hwIgf6VM2nb3OtvHYYxT2s6ExKXZdMwyjHGrcS1V1aPv5n8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36711},"main":"dist/index.umd.ejs","type":"module","module":"dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.umd.cjs"},"./style.css":"./dist/index.css"},"gitHead":"4adabd509001428d06b161342542c20fd645e495","private":false,"scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"ahultgren","email":"me@andreashultgren.se"},"_npmVersion":"10.8.2","description":"**Note: this is a port of [vue-swipe-actions](https://github.com/eCollect/vue-swipe-actions) to support vue 3.**","directories":{},"_nodeVersion":"22.5.1","dependencies":{"vue":"^3.5.13"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.5","vue-tsc":"^2.2.0","typescript":"~5.6.2","@types/node":"^22.10.6","@vue/tsconfig":"^0.7.0","@vitejs/plugin-vue":"^5.2.1"},"_npmOperationalInternal":{"tmp":"tmp/vue3-swipe-actions_0.0.2_1736950966703_0.9748282911190456","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@ahultgren/vue3-swipe-actions","version":"0.0.3","_id":"@ahultgren/vue3-swipe-actions@0.0.3","maintainers":[{"name":"ahultgren","email":"me@andreashultgren.se"}],"dist":{"shasum":"9d7f1a3ed814b4b88b1b20dd74b703e70c92a593","tarball":"https://registry.npmjs.org/@ahultgren/vue3-swipe-actions/-/vue3-swipe-actions-0.0.3.tgz","fileCount":6,"integrity":"sha512-ojaqWERJzFQMVRnxN3Brdyqgkzr/H5GJv28+uHs+8oM0eqqnUd70q5rEYR2rBvSJezEf2/PK0MUEhb3l2vBUkA==","signatures":[{"sig":"MEUCIGrI9D3Oq2ml2bzJHlOMvMyuXl2CDglJ8aSxzGFY2LNSAiEA2riLedlITgwEgX6UXYq67r77hBMOFUrCxGk9FCdvIs4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":54640},"main":"dist/index.umd.ejs","type":"module","module":"dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.umd.cjs"},"./style.css":"./dist/index.css"},"gitHead":"1337092d0de3b989a6d408e80f8eb6bb0afb56ac","private":false,"scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"ahultgren","email":"me@andreashultgren.se"},"_npmVersion":"10.8.2","description":"**Note: this is a port of [vue-swipe-actions](https://github.com/eCollect/vue-swipe-actions) to support vue 3.**","directories":{},"_nodeVersion":"22.5.1","dependencies":{"vue":"^3.5.13"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.5","vue-tsc":"^2.2.0","typescript":"~5.6.2","@types/node":"^22.10.6","@vue/tsconfig":"^0.7.0","vite-plugin-dts":"^4.5.0","@vitejs/plugin-vue":"^5.2.1"},"_npmOperationalInternal":{"tmp":"tmp/vue3-swipe-actions_0.0.3_1737114780843_0.6056312327696747","host":"s3://npm-registry-packages-npm-production"}},"0.0.6":{"name":"@ahultgren/vue3-swipe-actions","private":false,"version":"0.0.6","type":"module","main":"dist/index.umd.ejs","module":"dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.umd.cjs"},"./style.css":"./dist/index.css"},"scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview"},"dependencies":{"vue":"^3.5.13"},"devDependencies":{"@types/node":"^22.10.6","@vitejs/plugin-vue":"^5.2.1","@vue/eslint-config-prettier":"^10.2.0","@vue/tsconfig":"^0.7.0","prettier":"^3.4.2","typescript":"~5.6.2","vite":"^6.0.5","vite-plugin-dts":"^4.5.0","vue-tsc":"^2.2.0"},"_id":"@ahultgren/vue3-swipe-actions@0.0.6","gitHead":"0350f9ea3ff249738a6704ffcc085bd573fbeb7c","description":"**Note: this is a port of [vue-swipe-actions](https://github.com/eCollect/vue-swipe-actions) to support vue 3.**","_nodeVersion":"22.5.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-6+XISkSTu9syLKu9PJOJYEknEsMWT9BnIJ/OtZw+LBfgYKTEUe0K8e32YqUWfUvRMsCkTL2Wm9AnkAFOIVRzGQ==","shasum":"bdda6e073ff9427a57b9606c2a4beb4d69785a19","tarball":"https://registry.npmjs.org/@ahultgren/vue3-swipe-actions/-/vue3-swipe-actions-0.0.6.tgz","fileCount":6,"unpackedSize":57019,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDwjcyOSvjRG9TI4dmEJrOb7pu39Rtan6Y+PXEsw3yU3gIhANF3drFhresAqv+BN0+PaH1q50W4sMBi93v2jF/v/3yw"}]},"_npmUser":{"name":"ahultgren","email":"me@andreashultgren.se"},"directories":{},"maintainers":[{"name":"ahultgren","email":"me@andreashultgren.se"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue3-swipe-actions_0.0.6_1737552592119_0.41053959285388997"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-15T13:29:45.288Z","modified":"2025-01-22T13:29:52.467Z","0.0.1":"2025-01-15T13:29:45.644Z","0.0.2":"2025-01-15T14:22:46.944Z","0.0.3":"2025-01-17T11:53:01.006Z","0.0.6":"2025-01-22T13:29:52.309Z"},"description":"**Note: this is a port of [vue-swipe-actions](https://github.com/eCollect/vue-swipe-actions) to support vue 3.**","maintainers":[{"name":"ahultgren","email":"me@andreashultgren.se"}],"readme":"# vue3-swipe-actions\n\n**Note: this is a port of [vue-swipe-actions](https://github.com/eCollect/vue-swipe-actions) to support vue 3.**\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 @ahultgren/vue3-swipe-actions\n```\n\n```js\nimport { SwipeList, SwipeOut } from \"@ahultgren/vue3-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 \"@ahultgren/vue3-swipe-actions/style.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 () => 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    | 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### 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<swipe-list\n  ref=\"list\"\n  class=\"card\"\n  :disabled=\"!enabled\"\n  :items=\"mockSwipeList\"\n  item-key=\"id\"\n  @swipeout:click=\"itemClick\"\n>\n  <template v-slot=\"{ item, index, revealLeft, revealRight, close }\">\n    <!-- item is the corresponding object from the array -->\n    <!-- index is clearly the index -->\n    <!-- revealLeft is method which toggles the left side -->\n    <!-- revealRight is method which toggles the right side -->\n    <!-- close is method which closes an opened side -->\n    <div class=\"card-content\">\n      <!-- style content how ever you like -->\n      <h2>{{ item.title }}</h2>\n      <p>{{ item.description }}</p>\n      <span>{{ index }}</span>\n    </div>\n  </template>\n  <!-- left swipe side template and v-slot:left=\"{ item }\" is the item clearly -->\n  <!-- remove if you dont wanna have left swipe side  -->\n  <template v-slot:left=\"{ item, close }\">\n    <div class=\"swipeout-action red\" title=\"remove\" @click=\"remove(item)\">\n      <!-- place icon here or what ever you want -->\n      <i class=\"fa fa-trash\"></i>\n    </div>\n    <div class=\"swipeout-action purple\" @click=\"close\">\n      <!-- place icon here or what ever you want -->\n      <i class=\"fa fa-close\"></i>\n    </div>\n  </template>\n  <!-- right swipe side template and v-slot:right\"{ item }\" is the item clearly -->\n  <!-- remove if you dont wanna have right swipe side  -->\n  <template v-slot:right=\"{ item }\">\n    <div class=\"swipeout-action blue\">\n      <!-- place icon here or what ever you want -->\n      <i class=\"fa fa-heart\"></i>\n    </div>\n    <div class=\"swipeout-action green\">\n      <!-- place icon here or what ever you want -->\n      <i class=\"fa fa-heart\"></i>\n    </div>\n  </template>\n  <template v-slot:empty>\n    <div>\n      <!-- change mockSwipeList to an empty array to see this slot in action  -->\n      list is empty ( filtered or just empty )\n    </div>\n  </template>\n</swipe-list>\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) => i !== item);\n      // console.log(e, 'remove');\n    },\n    itemClick(e) {\n      console.log(e, \"item click\");\n    },\n    fbClick(e) {\n      console.log(e, \"First Button Click\");\n    },\n    sbClick(e) {\n      console.log(e, \"Second Button Click\");\n    },\n  },\n};\n```\n","readmeFilename":"README.md"}