├── LICENSE
├── NavigatorShare.vue
├── README.md
└── package.json


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Gabriel Bibiano
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/NavigatorShare.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div @click="share()">
 3 |     <slot v-if="hasSlot()" name="clickable">
 4 | 
 5 |     </slot>
 6 |     <p v-else>Share</p>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 |   export default {
12 |     props: {
13 |       title: String,
14 |       text: String,
15 |       url: {
16 |         type: String,
17 |         required: true
18 |       },
19 |       onError: Function,
20 |       onSuccess: Function,
21 |     },
22 |     methods: {
23 |       hasSlot() {
24 |         return !!this.$slots['clickable']
25 |       },
26 |       share() {
27 |         const data = {
28 |           title: this.title,
29 |           text: this.text,
30 |           url: this.url
31 |         };
32 | 
33 |         if (navigator.share) {
34 |           navigator.share(data)
35 |             .then((succ) => {
36 |               if (succ) {
37 |                 this.onSuccess(succ);
38 |               }
39 |             })
40 |             .catch((err) => {
41 |               if (onError) {
42 |                 this.onError(err);
43 |               }
44 |             })
45 |         } else {
46 |           if (this.onError) {
47 |             this.onError('method not supported');
48 |           }
49 |         }
50 |       }
51 |     }
52 |   }
53 | </script>
54 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-navigator-share
 2 | A Vue component to use native sharing mechanism of the device as part of the Web Share API.
 3 | 
 4 | Support only https and mobile browser
 5 | <a href="https://navigator-share.surge.sh/" target="_blank">Demo</a>
 6 | 
 7 | ## Instalation
 8 | ```sh
 9 | $ npm install --save vue-navigator-share
10 | ```
11 | 
12 | ## Properties
13 | 
14 | | prop | type | description | required |
15 | | ------ | ------ | ------ | ------ |
16 | | on-error | Function | callback on error | false |
17 | | on-success | Function | callback on success | false |
18 | | url | String | url to share | true |
19 | | title | String | title to share | false |
20 | | text | String | text to share | false |
21 | 
22 | ## Usage
23 | 
24 | ```HTML
25 | <navigator-share
26 |   v-bind:on-error="function"
27 |   v-bind:on-success="otherFunction"
28 |   url="url_to_share"
29 |   title="title_to_share"
30 |   text="text_to_share"
31 | ></navigator-share>
32 | ```
33 | 
34 | ```javascript
35 | <script>
36 | import NavigatorShare from 'vue-navigator-share'
37 | 
38 | export default {
39 |   name: 'app',
40 |   data () {
41 |     return {
42 |     }
43 |   },
44 |   components: {
45 |     NavigatorShare
46 |   },
47 |   methods: {
48 |   }
49 | }
50 | </script>
51 | ```
52 | 
53 | ## Example
54 | 
55 | ```HTML
56 | <navigator-share
57 |   v-bind:on-error="onError"
58 |   v-bind:on-success="onSuccess"
59 |   v-bind:url="url"
60 |   v-bind:title="title"
61 |   text="Hello World"
62 | ></navigator-share>
63 | ```
64 | 
65 | 
66 | ```javascript
67 | <script>
68 | import NavigatorShare from 'vue-navigator-share'
69 | 
70 | export default {
71 |   name: 'app',
72 |   data () {
73 |     return {
74 |     }
75 |   },
76 |   components: {
77 |     NavigatorShare
78 |   },
79 |   computed: {
80 |     url() {
81 |       return window.location.href;
82 |     },
83 |     title() {
84 |       return document.title;
85 |     }
86 |   },
87 |   methods: {
88 |     onError(err) {
89 |       alert(err);
90 |       console.log(err);
91 |     },
92 |     onSuccess(err) {
93 |       console.log(err);
94 |     }
95 |   }
96 | }
97 | </script>
98 | ```
99 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-navigator-share",
 3 |   "version": "1.0.2",
 4 |   "description": "A Vue component to use native sharing mechanism of the device as part of the Web Share API.",
 5 |   "main": "NavigatorShare.vue",
 6 |   "scripts": {
 7 |     "test": ""
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/GabrielBibiano/vue-navigator-share.git"
12 |   },
13 |   "keywords": [
14 |     "vue",
15 |     "VueJs",
16 |     "share",
17 |     "navigator.share",
18 |     "navigator"
19 |   ],
20 |   "author": "Gabriel Bibiano",
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/GabrielBibiano/vue-navigator-share/issues"
24 |   },
25 |   "homepage": "https://github.com/GabrielBibiano/vue-navigator-share#readme"
26 | }


--------------------------------------------------------------------------------