(WIP) adds support for v3x

.storybook/config.js

@@ -1,18 +1,10 @@
-import Vue from 'vue'
 import { configure, storiesOf } from '@storybook/vue'
-import VueSocialSharing from '../src/vue-social-sharing'
 import './style.css'
 import StaticData from './stories/static-data'
 import DynamicData from './stories/dynamic-data'
 import CustomShareNetwork from './stories/custom-share-network'
 import MultipleShareNetworks from './stories/multiple-share-networks'
 
-Vue.use(VueSocialSharing, {
-  networks: {
-    fakeblock: 'https://fakeblock.com/share?url=@url&title=@title'
-  }
-})
-
 const stories = storiesOf('VueSocialSharing', module)
 
 function loadStories () {

.storybook/stories/custom-share-network.js

@@ -1,18 +1,25 @@
 import customShareNetwork from './custom-share-network.md'
+import { ShareNetwork, useNetworks } from '../../src/vue-social-sharing'
 
 export default {
   name: 'Custom Share Network',
   code: () => ({
+    components: { ShareNetwork },
+    setup () {
+      const { setNetwork } = useNetworks()
+
+      setNetwork('fakeblock', 'https://fakeblock.com/share?url=@url&title=@title')
+    },
     template: `      
       <div id="share-network-list">
-        <ShareNetwork
+        <share-network
           network="fakeblock"
           url="https://news.vuejs.org/issues/180"
           title="Say hi to Vite! A brand new, extremely fast development setup for Vue."
         >
           <i class="fab fah fa-lg fa-react"></i>
           <span>Custom Network</span>
-        </ShareNetwork>
+        </share-network>
       </div>
       `
   }),

.storybook/stories/custom-share-network.md

@@ -2,23 +2,6 @@
 
 To use a custom network you need to define it in the initialisation option of the `VueSocialSharing` plugin.
 
-```javascript
-import Vue from 'vue'
-import VueSocialSharing from 'vue-social-sharing'
-
-Vue.use(VueSocialSharing, {
-  networks: {
-    fakeblock: 'https://fakeblock.com/share?url=@url&title=@title',
-  }
-})
-
-new Vue({
-  el: '#app',
-})
-```
-
-You can then use your custom network like any other one:
-
 ```html
 <template>
   <ShareNetwork
@@ -32,8 +15,14 @@ You can then use your custom network like any other one:
 </template>
 
 <script>
+import { ShareNetwork, useNetworks } from 'vue-social-sharing'
 export default {
- // Nothing needed here
+ components: { ShareNetwork },
+ setup () {
+  const { setNetwork } = useNetworks()
+
+  setNetwork('fakeblock', 'https://fakeblock.com/share?url=@url&title=@title')
+ }
 }
 </script>
 ```

.storybook/stories/dynamic-data-notes.md

@@ -20,6 +20,8 @@
 </template>
 
 <script>
+import { ShareNetwork } from 'vue-social-sharing'
+
 export default {
   data () {
     return {
@@ -30,7 +32,8 @@ export default {
       hashtags: 'vuejs,vite,javascript',
       twitterUser: 'youyuxi'
     }
-  }
+  },
+  components: { ShareNetwork }
 }
 </script>
 ```

.storybook/stories/dynamic-data.js

@@ -1,15 +1,17 @@
 import dynamicDataNotes from './dynamic-data-notes.md'
+import { ShareNetwork } from '../../src/vue-social-sharing'
 
 export default {
   name: 'Dynamic data',
   code: () => ({
+    components: { ShareNetwork },
     template: `
       <div style="text-align: center;">
         <p>Change the url to share on Twitter:</p>
         <input type="text" v-model="url" style="margin-bottom: 20px;padding: 5px;min-width: 230px;text-align: center;">
 
         <div id="share-network-list">
-          <ShareNetwork
+          <share-network
             network="twitter"
             :url="url"
             :title="title"
@@ -20,7 +22,7 @@ export default {
           >
             <i class="fab fah fa-lg fa-twitter"></i>
             <span>Share on Twitter</span>
-          </ShareNetwork>
+          </share-network>
         </div>
       </div>
       `,

.storybook/stories/multiple-share-networks.js

@@ -1,11 +1,13 @@
 import multipleShareNetworks from './multiple-share-networks.md'
+import { ShareNetwork } from '../../src/vue-social-sharing'
 
 export default {
   name: 'Multiple share networks',
   code: () => ({
+    components: { ShareNetwork },
     template: `      
       <div id="share-network-list">
-        <ShareNetwork
+        <share-network
           v-for="network in networks"
           :network="network.network"
           :key="network.network"
@@ -19,7 +21,7 @@ export default {
         >
           <i :class="network.icon"></i>
           <span>{{ network.name }}</span>
-        </ShareNetwork>
+        </share-network>
       </div>
       `,
     data () {

.storybook/stories/static-data-notes.md

@@ -17,8 +17,11 @@
 </template>
 
 <script>
+import { ShareNetwork } from 'vue-social-sharing'
+
 export default {
-  // Nothing needed here
+  // ...
+  components: { ShareNetwork }
 }
 </script>
 ```

.storybook/stories/static-data.js

@@ -1,11 +1,13 @@
 import staticDataNotes from './static-data-notes.md'
+import { ShareNetwork } from '../../src/vue-social-sharing'
 
 export default {
   name: 'Static data',
   code: () => ({
+    components: { ShareNetwork },
     template: `
       <div id="share-network-list">
-        <ShareNetwork
+        <share-network
           network="twitter"
           url="https://news.vuejs.org/issues/180"
           title="Say hi to Vite! A brand new, extremely fast development setup for Vue."
@@ -16,7 +18,7 @@ export default {
         >
           <i class="fab fah fa-lg fa-twitter"></i>
           <span>Share on Twitter</span>
-        </ShareNetwork>
+        </share-network>
       </div>
       `
   }),

package.json

@@ -54,6 +54,7 @@
     "@babel/preset-env": "^7.5.5",
     "@storybook/addon-notes": "^5.1.10",
     "@storybook/vue": "^5.1.10",
+    "@vue/composition-api": "^1.0.0-beta.21",
     "@vue/test-utils": "^1.0.2",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.0.1",
@@ -78,8 +79,12 @@
     "webpack": "^4.39.1",
     "webpack-cli": "^3.3.6"
   },
+  "dependencies": {
+    "vue-demi": "latest"
+  },
   "peerDependencies": {
-    "vue": "^2.6.10"
+    "@vue/composition-api": "^1.0.0-beta.1",
+    "vue": "^2.6.10 || >=3.0.0-rc.0"
   },
   "vetur": {
     "tags": "vetur/vetur-tags.json"

src/hooks/networks.js

@@ -0,0 +1,45 @@
+import { reactive, toRefs } from 'vue-demi'
+
+const state = reactive({
+  networks: {
+    baidu: 'http://cang.baidu.com/do/add?iu=@u&it=@t',
+    buffer: 'https://bufferapp.com/add?text=@t&url=@u',
+    email: 'mailto:?subject=@t&body=@u%0D%0A@d',
+    evernote: 'https://www.evernote.com/clip.action?url=@u&title=@t',
+    facebook: 'https://www.facebook.com/sharer/sharer.php?u=@u&title=@t&description=@d&quote=@q&hashtag=@h',
+    flipboard: 'https://share.flipboard.com/bookmarklet/popout?v=2&url=@u&title=@t',
+    hackernews: 'https://news.ycombinator.com/submitlink?u=@u&t=@t',
+    instapaper: 'http://www.instapaper.com/edit?url=@u&title=@t&description=@d',
+    line: 'http://line.me/R/msg/text/?@t%0D%0A@u%0D%0A@d',
+    linkedin: 'https://www.linkedin.com/sharing/share-offsite/?url=@u',
+    odnoklassniki: 'https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=@u&st.comments=@t',
+    pinterest: 'https://pinterest.com/pin/create/button/?url=@u&media=@m&description=@t',
+    pocket: 'https://getpocket.com/save?url=@u&title=@t',
+    quora: 'https://www.quora.com/share?url=@u&title=@t',
+    reddit: 'https://www.reddit.com/submit?url=@u&title=@t',
+    skype: 'https://web.skype.com/share?url=@t%0D%0A@u%0D%0A@d',
+    sms: 'sms:?body=@t%0D%0A@u%0D%0A@d',
+    stumbleupon: 'https://www.stumbleupon.com/submit?url=@u&title=@t',
+    telegram: 'https://t.me/share/url?url=@u&text=@t%0D%0A@d',
+    tumblr: 'https://www.tumblr.com/share/link?url=@u&name=@t&description=@d',
+    twitter: 'https://twitter.com/intent/tweet?text=@t&url=@u&hashtags=@h@tu',
+    viber: 'viber://forward?text=@t%0D%0A@u%0D%0A@d',
+    vk: 'https://vk.com/share.php?url=@u&title=@t&description=@d&image=@m&noparse=true',
+    weibo: 'http://service.weibo.com/share/share.php?url=@u&title=@t&pic=@m',
+    whatsapp: 'https://api.whatsapp.com/send?text=@t%0D%0A@u%0D%0A@d',
+    wordpress: 'https://wordpress.com/press-this.php?u=@u&t=@t&s=@d&i=@m',
+    xing: 'https://www.xing.com/social/share/spi?op=share&url=@u&title=@t',
+    yammer: 'https://www.yammer.com/messages/new?login=true&status=@t%0D%0A@u%0D%0A@d'
+  }
+})
+
+export const useNetworks = () => {
+  const setNetwork = (key, value) => {
+    state.networks = { ...state.networks, [key]: value }
+  }
+
+  return {
+    setNetwork,
+    ...toRefs(state)
+  }
+}

src/hooks/popup.js

@@ -0,0 +1,60 @@
+const $window = typeof window !== 'undefined' ? window : null
+
+export const usePopup = (options = { width: 626, height: 436 }) => {
+  let popupInterval = null
+  let popupWindow = null
+  const width = $window.innerWidth || (document.documentElement.clientWidth || $window.screenX)
+  const height = $window.innerHeight || (document.documentElement.clientHeight || $window.screenY)
+  const systemZoom = width / $window.screen.availWidth
+
+  const popupLeft = (width - options.width) / 2 / systemZoom + ($window.screenLeft !== undefined ? $window.screenLeft : $window.screenX)
+  const popupTop = (height - options.height) / 2 / systemZoom + ($window.screenTop !== undefined ? $window.screenTop : $window.screenY)
+
+  const share = (shareLink, key) => {
+    console.log(shareLink, key)
+    // If a popup window already exist, we close it and trigger a change event.
+    if (popupWindow && popupInterval) {
+      clearInterval(popupInterval)
+
+      // Force close (for Facebook)
+      popupWindow.close()
+
+      // emit('change')
+    }
+
+    popupWindow = $window.open(
+      shareLink,
+      'sharer-' + key,
+      ',height=' + options.height +
+      ',width=' + options.width +
+      ',left=' + popupLeft +
+      ',top=' + popupTop +
+      ',screenX=' + popupLeft +
+      ',screenY=' + popupTop
+    )
+
+    // If popup are prevented (AdBlocker, Mobile App context..), popup.window stays undefined and we can't display it
+    if (!popupWindow) return
+
+    popupWindow.focus()
+
+    // Create an interval to detect popup closing event
+    popupInterval = setInterval(() => {
+      if (!popupWindow || popupWindow.closed) {
+        clearInterval(popupInterval)
+
+        popupWindow = null
+
+        // emit('close')
+      }
+    }, 500)
+  }
+
+  const touch = (shareLink) => {
+    $window.open(shareLink, '_blank')
+
+    // emit('open')
+  }
+
+  return { share, touch }
+}