Misterzym
/
vue-share-buttons
mirror of https://github.com/misterzym/vue-share-buttons
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fix: added roadmap

dependabot/npm_and_yarn/lodash-4.17.19
Alexandrshy 5 years ago
parent
c0d405259f
commit
3b71557f25
2 changed files with 127 additions and 133 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 256
      README.md
  2. 4
      package.json

256
README.md
Unescape View File

@ -21,6 +21,7 @@
- [Example](#example) - [Example](#example)
- [Author](#author) - [Author](#author)
- [Link](#link) - [Link](#link)
- [Roadmap](#roadmap)
- [License](#license) - [License](#license)
## Installation ## Installation
@ -30,6 +31,7 @@
```bash ```bash
npm i vue-share-buttons npm i vue-share-buttons
``` ```
[Link to NPM](https://www.npmjs.com/package/vue-share-buttons) [Link to NPM](https://www.npmjs.com/package/vue-share-buttons)
#### Install using Yarn #### Install using Yarn
@ -37,6 +39,7 @@ npm i vue-share-buttons
```bash ```bash
yarn add vue-share-buttons yarn add vue-share-buttons
``` ```
[Link to Yarn](https://yarn.pm/vue-share-buttons) [Link to Yarn](https://yarn.pm/vue-share-buttons)
## Icons ## Icons
@ -45,7 +48,7 @@ For icons, I use [simpleicons](https://simpleicons.org/)
## Usage ## Usage
You need to import each social button separately. For example, you want to use the share button on Twitter. To do this you need: You need to import each social button separately. For example, you want to use the share button on Twitter. To do this you need:
#### Import component #### Import component
@ -55,8 +58,8 @@ import TwitterButton from "vue-share-buttons/src/components/TwitterButton";
const app = new Vue({ const app = new Vue({
el: "#app", el: "#app",
components: { components: {
TwitterButton TwitterButton,
} },
}); });
``` ```
@ -83,152 +86,152 @@ Below are the options you can pass to create your own button.
> Facebook, LinkedIn, Odnoklassniki > Facebook, LinkedIn, Odnoklassniki
**Option**|**Type's**|**Default**|**Description** | **Option** | **Type's** | **Default** | **Description** |
-----|-----|-----|----- | ------------- | ---------- | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
url|String|`document.location.href`|URL-address you want to share | url | String | `document.location.href` | URL-address you want to share |
description|String|`document.title`|Messages you want to share | description | String | `document.title` | Messages you want to share |
btnText|String|`Facebook`, `LinkedIn`, `Odnoklassniki`, etc.|Text to be written on your button | btnText | String | `Facebook`, `LinkedIn`, `Odnoklassniki`, etc. | Text to be written on your button |
hasIcon|Boolean|`true`|Presence of social network icon in the button | hasIcon | Boolean | `true` | Presence of social network icon in the button |
isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window | isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window |
modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" | modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" |
modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" | modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" |
hasCounter|Boolean|`false`|Presence of a counter with the number of share | hasCounter | Boolean | `false` | Presence of a counter with the number of share |
digitsCounter|Number|`0`|The number of decimal places in the counter | digitsCounter | Number | `0` | The number of decimal places in the counter |
keyCounter|String|`''`|Counter ID (note, it must be unique if you use several buttons with a counter for the same social network on the same page) | keyCounter | String | `''` | Counter ID (note, it must be unique if you use several buttons with a counter for the same social network on the same page) |
> Tumblr, Vkontakte > Tumblr, Vkontakte
**Option**|**Type's**|**Default**|**Description** | **Option** | **Type's** | **Default** | **Description** |
-----|-----|-----|----- | ------------- | ---------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------- |
url|String|`document.location.href`|URL-address you want to share | url | String | `document.location.href` | URL-address you want to share |
description|String|`document.title`|Messages you want to share | description | String | `document.title` | Messages you want to share |
title|String|`''`|Title you want to share | title | String | `''` | Title you want to share |
btnText|String|`Tumblr`, `Vkontakte`|Text to be written on your button | btnText | String | `Tumblr`, `Vkontakte` | Text to be written on your button |
hasIcon|Boolean|`true`|Presence of social network icon in the button | hasIcon | Boolean | `true` | Presence of social network icon in the button |
isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window | isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window |
modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" | modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" |
modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" | modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" |
hasCounter|Boolean|`false`|Presence of a counter with the number of share | hasCounter | Boolean | `false` | Presence of a counter with the number of share |
digitsCounter|Number|`0`|The number of decimal places in the counter | digitsCounter | Number | `0` | The number of decimal places in the counter |
keyCounter|String|`''`|Counter ID (note, it must be unique if you use several buttons with a counter for the same social network on the same page) | keyCounter | String | `''` | Counter ID (note, it must be unique if you use several buttons with a counter for the same social network on the same page) |
> Pinterest > Pinterest
**Option**|**Type's**|**Default**|**Description** | **Option** | **Type's** | **Default** | **Description** |
-----|-----|-----|----- | ------------- | ---------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------- |
url|String|`document.location.href`|URL-address you want to share | url | String | `document.location.href` | URL-address you want to share |
description|String|`document.title`|Messages you want to share | description | String | `document.title` | Messages you want to share |
picture|String|`''`|Picture you want to share | picture | String | `''` | Picture you want to share |
btnText|String|`Pinterest`|Text to be written on your button | btnText | String | `Pinterest` | Text to be written on your button |
hasIcon|Boolean|`true`|Presence of social network icon in the button | hasIcon | Boolean | `true` | Presence of social network icon in the button |
isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window | isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window |
modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" | modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" |
modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" | modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" |
hasCounter|Boolean|`false`|Presence of a counter with the number of share | hasCounter | Boolean | `false` | Presence of a counter with the number of share |
digitsCounter|Number|`0`|The number of decimal places in the counter | digitsCounter | Number | `0` | The number of decimal places in the counter |
keyCounter|String|`''`|Counter ID (note, it must be unique if you use several buttons with a counter for the same social network on the same page) | keyCounter | String | `''` | Counter ID (note, it must be unique if you use several buttons with a counter for the same social network on the same page) |
### Buttons without a counter ### Buttons without a counter
> Twitter, Evernote, Hatena, Instapaper, LiveJournal > Twitter, Evernote, Hatena, Instapaper, LiveJournal
**Option**|**Type's**|**Default**|**Description** | **Option** | **Type's** | **Default** | **Description** |
-----|-----|-----|----- | ----------- | ---------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ |
url|String|`document.location.href`|URL-address you want to share | url | String | `document.location.href` | URL-address you want to share |
description|String|`document.title`|Messages you want to share | description | String | `document.title` | Messages you want to share |
btnText|String|`Twitter`, `Evernote`, `Hatena`, `Instapaper`, `LiveJournal`|Text to be written on your button | btnText | String | `Twitter`, `Evernote`, `Hatena`, `Instapaper`, `LiveJournal` | Text to be written on your button |
hasIcon|Boolean|`true`|Presence of social network icon in the button | hasIcon | Boolean | `true` | Presence of social network icon in the button |
isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window | isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window |
modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" | modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" |
modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" | modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" |
> Digg, Xing, Pocket > Digg, Xing, Pocket
**Option**|**Type's**|**Default**|**Description** | **Option** | **Type's** | **Default** | **Description** |
-----|-----|-----|----- | ----------- | ---------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------ |
url|String|`document.location.href`|URL-address you want to share | url | String | `document.location.href` | URL-address you want to share |
btnText|String|`Digg`, `Xing`, `Pocket`|Text to be written on your button | btnText | String | `Digg`, `Xing`, `Pocket` | Text to be written on your button |
hasIcon|Boolean|`true`|Presence of social network icon in the button | hasIcon | Boolean | `true` | Presence of social network icon in the button |
isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window | isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window |
modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" | modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" |
modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" | modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" |
> Blogger > Blogger
**Option**|**Type's**|**Default**|**Description** | **Option** | **Type's** | **Default** | **Description** |
-----|-----|-----|----- | ----------- | ---------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------ |
url|String|`document.location.href`|URL-address you want to share | url | String | `document.location.href` | URL-address you want to share |
description|String|`document.title`|Messages you want to share | description | String | `document.title` | Messages you want to share |
title|String|`''`|Title you want to share | title | String | `''` | Title you want to share |
btnText|String|`Blogger`|Text to be written on your button | btnText | String | `Blogger` | Text to be written on your button |
hasIcon|Boolean|`true`|Presence of social network icon in the button | hasIcon | Boolean | `true` | Presence of social network icon in the button |
isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window | isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window |
modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" | modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" |
modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" | modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" |
> Reddit, Renren > Reddit, Renren
**Option**|**Type's**|**Default**|**Description** | **Option** | **Type's** | **Default** | **Description** |
-----|-----|-----|----- | ----------- | ---------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------ |
url|String|`document.location.href`|URL-address you want to share | url | String | `document.location.href` | URL-address you want to share |
title|String|`''`|Title you want to share | title | String | `''` | Title you want to share |
btnText|String|`Reddit`, `Renren`|Text to be written on your button | btnText | String | `Reddit`, `Renren` | Text to be written on your button |
hasIcon|Boolean|`true`|Presence of social network icon in the button | hasIcon | Boolean | `true` | Presence of social network icon in the button |
isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window | isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window |
modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" | modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" |
modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" | modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" |
> Weibo > Weibo
**Option**|**Type's**|**Default**|**Description** | **Option** | **Type's** | **Default** | **Description** |
-----|-----|-----|----- | ----------- | ---------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------ |
url|String|`document.location.href`|URL-address you want to share | url | String | `document.location.href` | URL-address you want to share |
description|String|`document.title`|Messages you want to share | description | String | `document.title` | Messages you want to share |
picture|String|`''`|Picture you want to share | picture | String | `''` | Picture you want to share |
title|String|`''`|Title you want to share | title | String | `''` | Title you want to share |
btnText|String|`Weibo`|Text to be written on your button | btnText | String | `Weibo` | Text to be written on your button |
hasIcon|Boolean|`true`|Presence of social network icon in the button | hasIcon | Boolean | `true` | Presence of social network icon in the button |
isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window | isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window |
modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" | modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" |
modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" | modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" |
### Buttons for instant messengers ### Buttons for instant messengers
> Facebook > Facebook
**Option**|**Type's**|**Default**|**Description** | **Option** | **Type's** | **Default** | **Description** |
-----|-----|-----|----- | ---------- | ---------- | ------------------------ | --------------------------------------------- |
appID|String|`''`|A unique identifier for the application | appID | String | `''` | A unique identifier for the application |
url|String|`document.location.href`|URL-address you want to share | url | String | `document.location.href` | URL-address you want to share |
btnText|String|`Facebook`|Text to be written on your button | btnText | String | `Facebook` | Text to be written on your button |
hasIcon|Boolean|`true`|Presence of social network icon in the button | hasIcon | Boolean | `true` | Presence of social network icon in the button |
> Viber, WhatsApp > Viber, WhatsApp
**Option**|**Type's**|**Default**|**Description** | **Option** | **Type's** | **Default** | **Description** |
-----|-----|-----|----- | ---------- | ---------- | ------------------------ | --------------------------------------------- |
url|String|`document.location.href`|URL-address you want to share | url | String | `document.location.href` | URL-address you want to share |
btnText|String|`Viber`, `WhatsApp`|Text to be written on your button | btnText | String | `Viber`, `WhatsApp` | Text to be written on your button |
hasIcon|Boolean|`true`|Presence of social network icon in the button | hasIcon | Boolean | `true` | Presence of social network icon in the button |
> Telegram > Telegram
**Option**|**Type's**|**Default**|**Description** | **Option** | **Type's** | **Default** | **Description** |
-----|-----|-----|----- | ----------- | ---------- | ------------------------ | --------------------------------------------- |
url|String|`document.location.href`|URL-address you want to share | url | String | `document.location.href` | URL-address you want to share |
description|String|`document.title`|Messages you want to share | description | String | `document.title` | Messages you want to share |
btnText|String|`Telegram`|Text to be written on your button | btnText | String | `Telegram` | Text to be written on your button |
hasIcon|Boolean|`true`|Presence of social network icon in the button | hasIcon | Boolean | `true` | Presence of social network icon in the button |
### Send a message via email ### Send a message via email
> This isn't really a share button, this is a button that allows you to open the software to send an email message, but it may be useful for you 🙃 > This isn't really a share button, this is a button that allows you to open the software to send an email message, but it may be useful for you 🙃
**Option**|**Type's**|**Default**|**Description** | **Option** | **Type's** | **Default** | **Description** |
-----|-----|-----|----- | ---------- | ---------- | ------------------------ | --------------------------------------------- |
url|String|`document.location.href`|URL-address you want to share | url | String | `document.location.href` | URL-address you want to share |
btnText|String|`Email`|Text to be written on your button | btnText | String | `Email` | Text to be written on your button |
hasIcon|Boolean|`true`|Presence of social network icon in the button | hasIcon | Boolean | `true` | Presence of social network icon in the button |
### Full list of social networks ### Full list of social networks
@ -257,10 +260,7 @@ hasIcon|Boolean|`true`|Presence of social network icon in the button
## Example ## Example
```html ```html
<twitter-button <twitter-button v-bind:isBlank="false" btnText />
v-bind:isBlank="false"
btnText
/>
``` ```
<img width="38" alt="Twitter button with icon" src="https://user-images.githubusercontent.com/14329906/55610855-df9e9880-5794-11e9-8fe2-8c0fd86df43d.png"> <img width="38" alt="Twitter button with icon" src="https://user-images.githubusercontent.com/14329906/55610855-df9e9880-5794-11e9-8fe2-8c0fd86df43d.png">
@ -268,10 +268,7 @@ hasIcon|Boolean|`true`|Presence of social network icon in the button
[Live Demo](https://codesandbox.io/s/vvyjzw491l?fontsize=14) [Live Demo](https://codesandbox.io/s/vvyjzw491l?fontsize=14)
```html ```html
<twitter-button <twitter-button class="share-button--circle" v-bind:hasIcon="false" />
class="share-button--circle"
v-bind:hasIcon="false"
/>
``` ```
<img width="84" alt="Twitter circle button" src="https://user-images.githubusercontent.com/14329906/55610809-c564ba80-5794-11e9-9d85-1130f7ad0881.png"> <img width="84" alt="Twitter circle button" src="https://user-images.githubusercontent.com/14329906/55610809-c564ba80-5794-11e9-9d85-1130f7ad0881.png">
@ -279,10 +276,9 @@ hasIcon|Boolean|`true`|Presence of social network icon in the button
[Live Demo](https://codesandbox.io/s/9149y00324?fontsize=14) [Live Demo](https://codesandbox.io/s/9149y00324?fontsize=14)
```html ```html
<twitter-button <twitter-button v-bind:hasIcon="false" class="share-button--outline">
v-bind:hasIcon="false" /></twitter-button
class="share-button--outline"> >
/>
``` ```
<img width="85" alt="Twitter outline button without icon" src="https://user-images.githubusercontent.com/14329906/55610923-09f05600-5795-11e9-89c3-13a50ab397eb.png"> <img width="85" alt="Twitter outline button without icon" src="https://user-images.githubusercontent.com/14329906/55610923-09f05600-5795-11e9-89c3-13a50ab397eb.png">
@ -290,10 +286,7 @@ hasIcon|Boolean|`true`|Presence of social network icon in the button
[Live Demo]() [Live Demo]()
```html ```html
<twitter-button <twitter-button class="share-button--circle share-button--outline" btnText />
class="share-button--circle share-button--outline"
btnText
/>
``` ```
<img width="45" alt="Twitter outline and circle button with icon" src="https://user-images.githubusercontent.com/14329906/55610998-44f28980-5795-11e9-8c73-6c29249b8a17.png"> <img width="45" alt="Twitter outline and circle button with icon" src="https://user-images.githubusercontent.com/14329906/55610998-44f28980-5795-11e9-8c73-6c29249b8a17.png">
@ -301,10 +294,7 @@ hasIcon|Boolean|`true`|Presence of social network icon in the button
[Live Demo](https://codesandbox.io/s/y01j0my311?fontsize=14) [Live Demo](https://codesandbox.io/s/y01j0my311?fontsize=14)
```html ```html
<facebook-button <facebook-button class="share-button--outline" hasCounter />
class="share-button--outline"
hasCounter
/>
``` ```
<img width="184" alt="Twitter outline button with icon and counter" src="https://user-images.githubusercontent.com/14329906/55611429-88012c80-5796-11e9-9c71-2bf20e52f95f.png"> <img width="184" alt="Twitter outline button with icon and counter" src="https://user-images.githubusercontent.com/14329906/55611429-88012c80-5796-11e9-9c71-2bf20e52f95f.png">
@ -312,7 +302,7 @@ hasIcon|Boolean|`true`|Presence of social network icon in the button
[Live Demo](https://codesandbox.io/s/88yq86vzk2?fontsize=14) [Live Demo](https://codesandbox.io/s/88yq86vzk2?fontsize=14)
```html ```html
<facebook-button <facebook-button
class="share-button--painted" class="share-button--painted"
url="https://github.com/" url="https://github.com/"
hasCounter hasCounter
@ -331,6 +321,10 @@ This component was developed by [Alexander Shulaev](https://github.com/Alexandrs
SVG-icon by [Simple Icons](https://simpleicons.org/) SVG-icon by [Simple Icons](https://simpleicons.org/)
## Roadmap
- Implement a workflow with automatic version update and automatic publication of changes in npm via GitHub action
## License ## License
[The MIT License (MIT)](https://github.com/Alexandrshy/vue-share-buttons/blob/master/LICENSE.md) [The MIT License (MIT)](https://github.com/Alexandrshy/vue-share-buttons/blob/master/LICENSE.md)

4
package.json
Unescape View File

@ -1,6 +1,6 @@
{ {
"name": "vue-share-buttons", "name": "vue-share-buttons",
"version": "1.0.7", "version": "1.0.8",
"private": false, "private": false,
"license": "MIT", "license": "MIT",
"homepage": "https://github.com/Alexandrshy/vue-share-buttons", "homepage": "https://github.com/Alexandrshy/vue-share-buttons",
@ -26,7 +26,7 @@
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
"build": "vue-cli-service build", "build": "vue-cli-service build",
"lint": "vue-cli-service lint", "lint": "vue-cli-service lint",
"build-bundle": "vue-cli-service build --target lib --name vue-share-buttons ./src/App.vue" "build-bundle": "vue-cli-service build --target lib --name vue-share-buttons ./src/VueShareButtons.vue"
}, },
"dependencies": { "dependencies": {
"node-sass": "^4.11.0", "node-sass": "^4.11.0",

Write Preview
Loading…
Cancel
Save