├── .babelrc
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── index.html
├── package.json
├── src
    ├── app.js
    ├── autolink.js
    └── index.js
└── webpack.config.demo.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # app
 2 | bundle.js
 3 | /index.js
 4 | /autolink.js
 5 | 
 6 | # Logs
 7 | logs
 8 | *.log
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | 
15 | # Directory for instrumented libs generated by jscoverage/JSCover
16 | lib-cov
17 | 
18 | # Coverage directory used by tools like istanbul
19 | coverage
20 | 
21 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
22 | .grunt
23 | 
24 | # node-waf configuration
25 | .lock-wscript
26 | 
27 | # Compiled binary addons (http://nodejs.org/api/addons.html)
28 | build/Release
29 | 
30 | # Dependency directory
31 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
32 | node_modules
33 | .DS_Store
34 | .AppleDouble
35 | .LSOverride
36 | 
37 | # Icon must end with two \r
38 | Icon
39 | 
40 | 
41 | # Thumbnails
42 | ._*
43 | 
44 | # Files that might appear on external disk
45 | .Spotlight-V100
46 | .Trashes
47 | 
48 | # Directories potentially created on remote AFP share
49 | .AppleDB
50 | .AppleDesktop
51 | Network Trash Folder
52 | Temporary Items
53 | .apdisk
54 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | webpack.config.demo.js
2 | bundle.js
3 | index.html
4 | /src
5 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 egoist 0x142857@gmail.com
 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
13 | all 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
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-autolink
 2 | 
 3 | It's not just link, it's everything link-able in text.
 4 | 
 5 | ## Installation
 6 | 
 7 | ```bash
 8 | npm i -D vue-autolink
 9 | ```
10 | 
11 | ## Example
12 | 
13 | **app.js**
14 | 
15 | ```javascript
16 | // locally
17 | import autoLink from 'vue-autolink/autolink'
18 | new Vue({
19 |   components: { autoLink }
20 | })
21 | // globally
22 | import autoLink from 'vue-autolink'
23 | Vue.use(autoLink)
24 | ```
25 | 
26 | **template**
27 | 
28 | ```html
29 | <!-- enable all embed and escape html -->
30 | <auto-link :content="content_variable" embed safe></auto-link>
31 | <!-- enable specific embed-able links -->
32 | <auto-link :content="content_variable" embed="youtube,youku"></auto-link>
33 | <!-- custom attributes -->
34 | <auto-link :content="content_variable" :link-attr="{'data-link': true}" :image-attr="{'data-image': true}"></auto-link>
35 | <!-- it's sure that you can still use :style :class on component -->
36 | <auto-link :class="{myStyle: true}" :style="{textAlign: 'center'}"></auto-link>
37 | ```
38 | 
39 | For more usages, check out [autolink.js](https://github.com/egoist/autolink.js)
40 | 
41 | ## License
42 | 
43 | MIT &copy; [EGOIST](https://github.com/egoist)
44 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>vue-autolink</title>
 6 |   </head>
 7 |   <body>
 8 |     <div id="app">
 9 |       <auto-link
10 |         :style="{textAlign: 'center'}"
11 |         :class="{isOk: true}"
12 |         :content="content"
13 |         embed="youku,youtube"
14 |         safe
15 |         :link-attr="{ad:2}"
16 |         :image-attr="{what: 'good'}">
17 |       </auto-link>
18 |     </div>
19 |     <script src="./bundle.js"></script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-autolink",
 3 |   "version": "0.0.11",
 4 |   "description": "Auto-link url and images in Vue components",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo 'lol'",
 8 |     "build": "babel src --out-dir ./ && rm app.js",
 9 |     "build:demo": "webpack --config webpack.config.demo.js",
10 |     "watch:demo": "webpack --config webpack.config.demo.js --watch"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git+https://github.com/egoist/vue-autolink.git"
15 |   },
16 |   "keywords": [
17 |     "vue",
18 |     "auto",
19 |     "link",
20 |     "url",
21 |     "image"
22 |   ],
23 |   "author": "EGOIST",
24 |   "license": "MIT",
25 |   "bugs": {
26 |     "url": "https://github.com/egoist/vue-autolink/issues"
27 |   },
28 |   "homepage": "https://github.com/egoist/vue-autolink#readme",
29 |   "devDependencies": {
30 |     "babel-cli": "^6.2.0",
31 |     "babel-loader": "^6.2.0",
32 |     "babel-preset-es2015": "^6.1.18",
33 |     "vue": "^1.0.10",
34 |     "webpack": "^1.12.9"
35 |   },
36 |   "dependencies": {
37 |     "autolink.js": "^0.0.54"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import autoLink from './'
 3 | Vue.use(autoLink)
 4 | new Vue({
 5 |   el: '#app',
 6 |   data () {
 7 |     return {
 8 |       content: `<script></script> http://github.com/egoist/vue-autolink
 9 |       https://www.kickstarter.com/projects/1546683916/treasures-of-the-universe-unique-astrophotography?ref=home_popular
10 |       http://ww4.sinaimg.cn/large/a15b4afegw1eyfizrn3w9j20go0goq3w.jpg
11 |       `
12 |     }
13 |   },
14 |   ready () {
15 |     console.log(this)
16 |   }
17 | })
18 | 


--------------------------------------------------------------------------------
/src/autolink.js:
--------------------------------------------------------------------------------
 1 | import autoLink from 'autolink.js'
 2 | 
 3 | function defaultFalse (val) {
 4 |   if (typeof val === 'undefined') {
 5 |     return false
 6 |   }
 7 |   if (val === false || val == 'false') {
 8 |     return false
 9 |   }
10 |   return true
11 | }
12 | 
13 | function defaultTrue (val) {
14 |   if (typeof val === 'undefined') {
15 |     return true
16 |   }
17 |   if (val === false || val == 'false') {
18 |     return false
19 |   }
20 |   return true
21 | }
22 | 
23 | function parseEmbed (opts, embed) {
24 |   if (typeof embed !== 'undefined') {
25 |     if (embed === 'false') {
26 |       opts.embed = false
27 |     } else {
28 |       if (embed.length === 0 || embed === 'true') {
29 |         opts.embed = true
30 |       } else {
31 |         embed.split(',').forEach(e => {
32 |           opts[e.trim()] = true
33 |         })
34 |       }
35 |     }
36 |   }
37 |   return opts
38 | }
39 | 
40 | export default {
41 |   props: ['class', 'style', 'content', 'embed', 'image', 'link-attr', 'image-attr', 'safe'],
42 |   template: '<div :class="class" :style="style">{{{ content | autolink }}}</div>',
43 |   filters: {
44 |     autolink (val) {
45 |       let opts = {}
46 |       opts.image = defaultTrue(this.image)
47 |       opts = parseEmbed(opts, this.embed)
48 |       opts.linkAttr = this.linkAttr
49 |       opts.imageAttr = this.imageAttr
50 |       opts.safe = defaultFalse(this.safe)
51 |       return autoLink(val, opts)
52 |     }
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import autoLink from './autolink'
2 | 
3 | export default function (Vue) {
4 |   Vue.component('autoLink', autoLink)
5 | }
6 | 


--------------------------------------------------------------------------------
/webpack.config.demo.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   entry: ['./src/app'],
 3 |   output: {
 4 |     path: __dirname,
 5 |     filename: 'bundle.js'
 6 |   },
 7 |   resolve: {
 8 |     extensions: ['', '.js']
 9 |   },
10 |   module: {
11 |     loaders: [
12 |       { test: /\.js$/, loaders: ['babel'], exclude: [/node_modules/] }
13 |     ]
14 |   },
15 |   plugins: []
16 | }
17 | 


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