├── .eslintrc
├── .gitignore
├── .npmignore
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── README
└── vue-good-links.gif
├── bili.config.js
├── dev
├── App.vue
├── index.html
├── main.js
└── styles
│ └── simplegrid.scss
├── dist
├── vue-good-links.cjs.js
├── vue-good-links.css
├── vue-good-links.es.js
├── vue-good-links.js
├── vue-good-links.min.css
├── vue-good-links.min.css.map
├── vue-good-links.min.js
└── vue-good-links.min.js.map
├── docs
├── index.html
├── main.1218fcc6.js
├── main.1218fcc6.js.map
├── main.889cb514.css
├── vendors~main.e734ecf8.css
├── vendors~main.e734ecf8.js
└── vendors~main.e734ecf8.js.map
├── package-lock.json
├── package.json
└── src
├── index.js
├── vgl-ghost
└── vgl-ghost.vue
├── vgl-rollup
└── vgl-rollup.vue
├── vgl-rotate
└── vgl-rotate.vue
├── vgl-slidein
└── vgl-slidein.vue
├── vgl-swing
└── vgl-swing.vue
└── vgl-wave
└── vgl-wave.vue
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "airbnb",
4 | "plugin:vue/base"
5 | ],
6 | "rules": {
7 | "func-names": ["error", "never"],
8 | "no-shadow": "off",
9 | "no-unused-vars": "off",
10 | "consistent-return": "off",
11 | "no-param-reassign": "off",
12 | "no-plusplus": "off",
13 | "import/no-unresolved": "off",
14 | "import/extensions": "off",
15 | "no-continue": "off",
16 | "comma-dangle": ["error", {
17 | "arrays": "always-multiline",
18 | "objects": "always-multiline",
19 | "imports": "always-multiline",
20 | "exports": "always-multiline",
21 | "functions": "never"
22 | }]
23 | },
24 | "globals": {
25 | "_": false,
26 | "moment": false
27 | }
28 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | npm-debug.log
3 | node_modules/
4 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .gitignore
2 | .DS_Store
3 | node_modules/
4 | *.log
5 | dev
6 | src
7 | .babelrc
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
6 |
7 | ## Our Standards
8 |
9 | Examples of behavior that contributes to creating a positive environment include:
10 |
11 | * Using welcoming and inclusive language
12 | * Being respectful of differing viewpoints and experiences
13 | * Gracefully accepting constructive criticism
14 | * Focusing on what is best for the community
15 | * Showing empathy towards other community members
16 |
17 | Examples of unacceptable behavior by participants include:
18 |
19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | * Trolling, insulting/derogatory comments, and personal or political attacks
21 | * Public or private harassment
22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission
23 | * Other conduct which could reasonably be considered inappropriate in a professional setting
24 |
25 | ## Our Responsibilities
26 |
27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28 |
29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30 |
31 | ## Scope
32 |
33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34 |
35 | ## Enforcement
36 |
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at anand.cooper@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38 |
39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
40 |
41 | ## Attribution
42 |
43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
44 |
45 | [homepage]: http://contributor-covenant.org
46 | [version]: http://contributor-covenant.org/version/1/4/
47 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017
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 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-good-links
2 |
3 |
4 | [](https://github.com/xaksis/vue-good-links/releases)
5 | [](https://github.com/xaksis/vue-good-links/blob/master/LICENSE)
6 |
7 |
8 | An easy to use link/text hover effect library for VueJS
9 | 
10 |
11 | ## Live Demo
12 |
13 | [vue-good-links Demo](https://xaksis.github.io/vue-good-links/)
14 |
15 | If you endup using and liking vue-good-links, consider spreading the joy :)
16 |
17 |
18 |
19 | ## Follow the project progress live
20 | [Vue-good-links Project](https://timerbit.com/#/public/29XFY0N7Rw9uCBsujiTM)
21 |
22 | ### Installing
23 |
24 | Install with npm:
25 | ```
26 | npm install --save vue-good-links
27 | ```
28 |
29 | ### Usage
30 |
31 | import directly into components:
32 |
33 | ```vue
34 |
35 |
36 | this is my
37 |
38 |
39 |
40 |
49 | ```
50 |
51 | or use globally
52 | ```js
53 | import VueGoodLinks from 'vue-good-links';
54 |
55 | // import the styles
56 | import 'vue-good-links/dist/vue-good-links.css';
57 |
58 | Vue.use(VueGoodLinks);
59 | ```
60 |
61 | ### List of Effects
62 |
63 | - VglWave
64 | - VglRollup
65 | - VglSlidein
66 | - VglGhost
67 | - VglSwing
68 | - VglRotate
69 |
70 | ### Component Options
71 |
72 |
73 |
74 | Option
75 | Description
76 | Type, Example
77 |
78 |
79 |
80 |
81 | originalSpanStyle
82 | css styles for standing text span. (applies to all but VglWave)
83 |
84 |
85 | <vgl-swing :originalSpanStyle="{color: 'blue'}" text="fancy!"></vgl-swing>
86 |
87 |
88 |
89 |
90 | hoverSpanStyle
91 | css styles for hovering text span. (applies to all but VglWave)
92 |
93 |
94 | <vgl-swing :hoverSpanStyle="{color: 'blue'}" text="fancy!"></vgl-swing>
95 |
96 |
97 |
98 |
99 |
100 |
101 | ## License
102 |
103 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details
104 |
105 | >inspiration for effects taken from [Tympanus](https://tympanus.net/Development/CreativeLinkEffects/)
106 |
--------------------------------------------------------------------------------
/README/vue-good-links.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xaksis/vue-good-links/ef9e78d9e97daa65452311e7123823ad40737cb9/README/vue-good-links.gif
--------------------------------------------------------------------------------
/bili.config.js:
--------------------------------------------------------------------------------
1 | const { version } = require('./package');
2 |
3 | const banner = `/**
4 | * vue-good-links v${version}
5 | * (c) 2018-present xaksis
6 | * https://github.com/xaksis/vue-good-links
7 | * Released under the MIT License.
8 | */
9 | `;
10 |
11 | module.exports = {
12 | name: 'vue-good-links',
13 | banner,
14 | format: [
15 | 'cjs',
16 | 'es',
17 | 'umd',
18 | 'umd-min',
19 | ],
20 | compress: 'umd',
21 | plugins: ['vue'],
22 | vue: {
23 | css: true,
24 | },
25 | buble: {
26 | transforms: {
27 | generator: true,
28 | dangerousForOf: true,
29 | },
30 | },
31 | };
32 |
--------------------------------------------------------------------------------
/dev/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
10 |
11 |
12 |
code
13 |
<vgl-wave text="Wave Text"></vgl-wave>
14 |
15 |
16 |
17 |
code
18 |
<vgl-swing text="Swing Text"></vgl-swing>
19 |
20 |
21 |
22 |
23 |
27 |
code
28 |
<vgl-rotate text="Rotate Text"></vgl-rotate>
29 |
30 |
31 |
32 |
code
33 |
<vgl-ghost text="Ghost Text"></vgl-ghost>
34 |
35 |
36 |
37 |
38 |
43 |
code
44 |
<vgl-rollup text="Rollup Text"></vgl-rollup>
45 |
46 |
47 |
48 |
code
49 |
<vgl-slidein text="Slidein Text"></vgl-slidein>
50 |
51 |
52 |
53 |
54 |
55 |
56 |
Each variant can also be used in a paragraph
57 |
Lorem amet consectetur . Tempora
58 |
63 |
64 | cumque vel magni quasi , sequi nisi expedita alias in maiores dignissimos ducimus ?
65 |
66 |
67 |
68 |
69 |
78 |
79 |
80 |
81 |
82 |
115 |
116 |
117 |
157 |
158 |
--------------------------------------------------------------------------------
/dev/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | vue-good-links
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/dev/main.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line import/no-extraneous-dependencies
2 | import Vue from 'vue';
3 | import App from './App';
4 | // import VueGoodLinks from '../dist/vue-good-links.es';
5 | import VueGoodLinks from '../src';
6 |
7 | Vue.use(VueGoodLinks);
8 |
9 | Vue.config.productionTip = false;
10 |
11 | /* eslint-disable no-new */
12 | new Vue({
13 | el: '#app',
14 | render: h => h(App),
15 | });
16 |
--------------------------------------------------------------------------------
/dev/styles/simplegrid.scss:
--------------------------------------------------------------------------------
1 | // SIMPLE GRID - SASS/SCSS
2 |
3 | @import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic);
4 |
5 | // fonts
6 | $font-family: 'Lato', Helvetica, sans-serif;
7 | $font-weight-light: 300;
8 | $font-weight-regular: 400;
9 | $font-weight-heavy: 700;
10 | $font-height: 1.5;
11 |
12 | // colors
13 | $dark-grey: #333447;
14 | $dark-gray: #333447; // for the Americans
15 |
16 | // universal
17 |
18 | html,
19 | body {
20 | height: 100%;
21 | width: 100%;
22 | margin: 0;
23 | padding: 0;
24 | left: 0;
25 | top: 0;
26 | font-size: 100%;
27 | }
28 |
29 | * {
30 | font-family: $font-family;
31 | color: $dark-grey;
32 | line-height: $font-height;
33 | }
34 |
35 | // typography
36 |
37 | h1 {
38 | font-size: 2.5rem;
39 | }
40 |
41 | h2 {
42 | font-size: 2rem;
43 | }
44 |
45 | h3 {
46 | font-size: 1.375rem;
47 | }
48 |
49 | h4 {
50 | font-size: 1.125rem;
51 | }
52 |
53 | h5 {
54 | font-size: 1rem;
55 | }
56 |
57 | h6 {
58 | font-size: 0.875rem;
59 | }
60 |
61 | p {
62 | font-size: 1.125rem;
63 | font-weight: 200;
64 | // line-height: 1.8;
65 | }
66 |
67 | .font-light {
68 | font-weight: $font-weight-light;
69 | }
70 |
71 | .font-regular {
72 | font-weight: $font-weight-regular;
73 | }
74 |
75 | .font-heavy {
76 | font-weight: $font-weight-heavy;
77 | }
78 |
79 | // utility
80 |
81 | .left {
82 | text-align: left;
83 | }
84 |
85 | .right {
86 | text-align: right;
87 | }
88 |
89 | .center {
90 | text-align: center;
91 | margin-left: auto;
92 | margin-right: auto;
93 | }
94 |
95 | .justify {
96 | text-align: justify;
97 | }
98 |
99 | .hidden-sm {
100 | display: none;
101 | }
102 |
103 | // grid
104 |
105 | $width: 96%;
106 | $gutter: 4%;
107 | $breakpoint-small: 33.75em; // 540px
108 | $breakpoint-med: 45em; // 720px
109 | $breakpoint-large: 60em; // 960px
110 |
111 | .container {
112 | width: 90%;
113 | margin-left: auto;
114 | margin-right: auto;
115 |
116 | @media only screen and (min-width: $breakpoint-small) {
117 | width: 80%;
118 | }
119 |
120 | @media only screen and (min-width: $breakpoint-large) {
121 | width: 75%;
122 | max-width: 60rem;
123 | }
124 | }
125 |
126 | .row {
127 | position: relative;
128 | width: 100%;
129 | }
130 |
131 | .row [class^="col"] {
132 | float: left;
133 | margin: 0.5rem 2%;
134 | min-height: 0.125rem;
135 | }
136 |
137 | .row::after {
138 | content: "";
139 | display: table;
140 | clear: both;
141 | }
142 |
143 | .col-1,
144 | .col-2,
145 | .col-3,
146 | .col-4,
147 | .col-5,
148 | .col-6,
149 | .col-7,
150 | .col-8,
151 | .col-9,
152 | .col-10,
153 | .col-11,
154 | .col-12 {
155 | width: $width;
156 | }
157 |
158 | .col-1-sm { width:($width / 12) - ($gutter * 11 / 12); }
159 | .col-2-sm { width: ($width / 6) - ($gutter * 10 / 12); }
160 | .col-3-sm { width: ($width / 4) - ($gutter * 9 / 12); }
161 | .col-4-sm { width: ($width / 3) - ($gutter * 8 / 12); }
162 | .col-5-sm { width: ($width / (12 / 5)) - ($gutter * 7 / 12); }
163 | .col-6-sm { width: ($width / 2) - ($gutter * 6 / 12); }
164 | .col-7-sm { width: ($width / (12 / 7)) - ($gutter * 5 / 12); }
165 | .col-8-sm { width: ($width / (12 / 8)) - ($gutter * 4 / 12); }
166 | .col-9-sm { width: ($width / (12 / 9)) - ($gutter * 3 / 12); }
167 | .col-10-sm { width: ($width / (12 / 10)) - ($gutter * 2 / 12); }
168 | .col-11-sm { width: ($width / (12 / 11)) - ($gutter * 1 / 12); }
169 | .col-12-sm { width: $width; }
170 |
171 | @media only screen and (min-width: $breakpoint-med) {
172 | .col-1 { width:($width / 12) - ($gutter * 11 / 12); }
173 | .col-2 { width: ($width / 6) - ($gutter * 10 / 12); }
174 | .col-3 { width: ($width / 4) - ($gutter * 9 / 12); }
175 | .col-4 { width: ($width / 3) - ($gutter * 8 / 12); }
176 | .col-5 { width: ($width / (12 / 5)) - ($gutter * 7 / 12); }
177 | .col-6 { width: ($width / 2) - ($gutter * 6 / 12); }
178 | .col-7 { width: ($width / (12 / 7)) - ($gutter * 5 / 12); }
179 | .col-8 { width: ($width / (12 / 8)) - ($gutter * 4 / 12); }
180 | .col-9 { width: ($width / (12 / 9)) - ($gutter * 3 / 12); }
181 | .col-10 { width: ($width / (12 / 10)) - ($gutter * 2 / 12); }
182 | .col-11 { width: ($width / (12 / 11)) - ($gutter * 1 / 12); }
183 | .col-12 { width: $width; }
184 |
185 | .hidden-sm {
186 | display: block;
187 | }
188 | }
--------------------------------------------------------------------------------
/dist/vue-good-links.cjs.js:
--------------------------------------------------------------------------------
1 | /**
2 | * vue-good-links v0.0.3
3 | * (c) 2018-present xaksis
4 | * https://github.com/xaksis/vue-good-links
5 | * Released under the MIT License.
6 | */
7 |
8 | 'use strict';
9 |
10 | Object.defineProperty(exports, '__esModule', { value: true });
11 |
12 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
13 |
14 | var debounce = _interopDefault(require('lodash.debounce'));
15 |
16 | function _defineProperty(obj, key, value) {
17 | if (key in obj) {
18 | Object.defineProperty(obj, key, {
19 | value: value,
20 | enumerable: true,
21 | configurable: true,
22 | writable: true
23 | });
24 | } else {
25 | obj[key] = value;
26 | }
27 |
28 | return obj;
29 | }
30 |
31 | var VglWave = {
32 | render: function render() {
33 | var _vm = this;
34 |
35 | var _h = _vm.$createElement;
36 |
37 | var _c = _vm._self._c || _h;
38 |
39 | return _c('span', _vm._g({
40 | staticClass: "vgl-wave-wrap",
41 | on: {
42 | "mouseover": _vm.startAnimating,
43 | "mouseleave": _vm.stopAnimating
44 | }
45 | }, _vm.$listeners), _vm._l(_vm.letters, function (l, idx) {
46 | return _c('span', {
47 | key: idx,
48 | staticClass: "vgl-lettr",
49 | class: {
50 | 'vgl-active': _vm.activeIndex === idx
51 | }
52 | }, [_c('span', {
53 | staticClass: "vgl-lettr-inner"
54 | }, [_vm._v(_vm._s(l))]), _c('span', {
55 | staticStyle: {
56 | "opacity": "0"
57 | }
58 | }, [_vm._v(_vm._s(l))])]);
59 | }));
60 | },
61 | staticRenderFns: [],
62 | name: 'vgl-wave',
63 | props: {
64 | text: {
65 | type: String,
66 | default: 'Sample Text'
67 | }
68 | },
69 | data: function data() {
70 | return {
71 | activeIndex: -1,
72 | timeouts: [],
73 | intervals: []
74 | };
75 | },
76 | computed: {
77 | letters: function letters() {
78 | return this.text ? this.text.split('') : '';
79 | }
80 | },
81 | methods: {
82 | startAnimating: debounce(function () {
83 | var _this = this;
84 |
85 | var delay = 150; // if animation is already going, we don't need to do anything
86 |
87 | if (this.activeIndex > -1) return;
88 |
89 | var _loop = function _loop(i) {
90 | _this.timeouts.push(setTimeout(function () {
91 | // start animating right away
92 | _this.activeIndex = i; // repeat animation for as long as I'm hovering
93 |
94 | _this.intervals.push(setInterval(function () {
95 | _this.activeIndex = i;
96 | }, _this.letters.length * delay));
97 | }, i * delay));
98 | };
99 |
100 | for (var i = 0; i < this.letters.length; i++) {
101 | _loop(i);
102 | }
103 | }, 150),
104 | stopAnimating: debounce(function () {
105 | for (var i = 0; i < this.timeouts.length; i++) {
106 | clearTimeout(this.timeouts[i]);
107 | clearInterval(this.intervals[i]);
108 | }
109 |
110 | this.timeouts = [];
111 | this.intervals = [];
112 | this.activeIndex = -1;
113 | }, 150)
114 | },
115 | mounted: function mounted() {},
116 | components: {}
117 | };
118 |
119 | var VglRollup = {
120 | render: function render() {
121 | var _vm = this;
122 |
123 | var _h = _vm.$createElement;
124 |
125 | var _c = _vm._self._c || _h;
126 |
127 | return _c('span', _vm._g({
128 | staticClass: "vgl-rollup-wrap",
129 | style: {
130 | height: _vm.spanHeight
131 | },
132 | on: {
133 | "mouseover": _vm.startAnimating,
134 | "mouseleave": _vm.stopAnimating
135 | }
136 | }, _vm.$listeners), [_c('span', {
137 | staticClass: "vgl-rollup-original",
138 | style: _vm.internalOriginalSpanStyle
139 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
140 | staticClass: "vgl-rollup-bold",
141 | style: _vm.internalBoldSpanStyle
142 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
143 | ref: "originalText",
144 | staticStyle: {
145 | "opacity": "0",
146 | "font-weight": "bold"
147 | }
148 | }, [_vm._v(_vm._s(_vm.text))])]);
149 | },
150 | staticRenderFns: [],
151 | name: 'vgl-rollup',
152 | props: {
153 | text: {
154 | type: String,
155 | default: 'Sample Text'
156 | },
157 | hoverSpanStyle: {
158 | type: Object,
159 | // eslint-disable-next-line
160 | default: function _default() {
161 | return {};
162 | }
163 | },
164 | originalSpanStyle: {
165 | type: Object,
166 | // eslint-disable-next-line
167 | default: function _default() {
168 | return {};
169 | }
170 | }
171 | },
172 | data: function data() {
173 | return {
174 | active: false,
175 | spanHeight: 0
176 | };
177 | },
178 | computed: {
179 | internalOriginalSpanStyle: function internalOriginalSpanStyle() {
180 | return Object.assign({}, this.originalSpanStyle, {
181 | top: this.active ? "-".concat(this.spanHeight) : 0
182 | });
183 | },
184 | internalBoldSpanStyle: function internalBoldSpanStyle() {
185 | return Object.assign({}, this.hoverSpanStyle, {
186 | top: this.active ? 0 : "".concat(this.spanHeight)
187 | });
188 | }
189 | },
190 | methods: {
191 | startAnimating: debounce(function () {
192 | this.active = true;
193 | }, 150),
194 | stopAnimating: debounce(function () {
195 | this.active = false;
196 | }, 150),
197 | init: function init() {
198 | var originalSpan = this.$refs.originalText;
199 | var spanStyle = window.getComputedStyle(originalSpan, null); // console.log(spanStyle);
200 |
201 | this.spanHeight = spanStyle.lineHeight; // const num = parseInt(spanHeight.substring(0, spanHeight.length - 2), 10) * 1.2;
202 | // this.spanHeight = `${num}px`;
203 | }
204 | },
205 | mounted: function mounted() {
206 | this.init();
207 | },
208 | components: {}
209 | };
210 |
211 | var VglSlidein = {
212 | render: function render() {
213 | var _vm = this;
214 |
215 | var _h = _vm.$createElement;
216 |
217 | var _c = _vm._self._c || _h;
218 |
219 | return _c('span', _vm._g({
220 | staticClass: "vgl-slidein-wrap",
221 | style: {
222 | width: _vm.spanWidth
223 | },
224 | on: {
225 | "mouseover": _vm.startAnimating,
226 | "mouseleave": _vm.stopAnimating
227 | }
228 | }, _vm.$listeners), [_c('span', {
229 | ref: "mainText",
230 | staticClass: "vgl-slidein-original",
231 | style: _vm.internalOriginalSpanStyle
232 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
233 | staticClass: "vgl-slidein-bold",
234 | style: _vm.internalBoldSpanStyle
235 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
236 | ref: "originalText",
237 | staticStyle: {
238 | "opacity": "0"
239 | }
240 | }, [_vm._v(_vm._s(_vm.text))])]);
241 | },
242 | staticRenderFns: [],
243 | name: 'vgl-slidein',
244 | props: {
245 | text: {
246 | type: String,
247 | default: 'Sample Text'
248 | },
249 | hoverSpanStyle: {
250 | type: Object,
251 | // eslint-disable-next-line
252 | default: function _default() {
253 | return {};
254 | }
255 | },
256 | originalSpanStyle: {
257 | type: Object,
258 | // eslint-disable-next-line
259 | default: function _default() {
260 | return {};
261 | }
262 | }
263 | },
264 | data: function data() {
265 | return {
266 | active: false,
267 | spanWidth: 0
268 | };
269 | },
270 | computed: {
271 | internalOriginalSpanStyle: function internalOriginalSpanStyle() {
272 | return Object.assign({
273 | padding: '0px 5px'
274 | }, this.originalSpanStyle, {
275 | left: this.active ? "".concat(this.spanWidth) : 0
276 | });
277 | },
278 | internalBoldSpanStyle: function internalBoldSpanStyle() {
279 | return Object.assign({
280 | backgroundColor: 'black',
281 | color: 'white',
282 | padding: '0px 5px'
283 | }, this.hoverSpanStyle, {
284 | left: this.active ? 0 : "-".concat(this.spanWidth)
285 | });
286 | }
287 | },
288 | methods: {
289 | startAnimating: debounce(function () {
290 | this.active = true;
291 | }, 150),
292 | stopAnimating: debounce(function () {
293 | this.active = false;
294 | }, 150),
295 | init: function init() {
296 | // const horizontalPadding = 5;
297 | var originalSpan = this.$refs.mainText;
298 | this.spanWidth = "".concat(originalSpan.offsetWidth, "px");
299 | }
300 | },
301 | mounted: function mounted() {
302 | this.init();
303 | },
304 | components: {}
305 | };
306 |
307 | var VglGhost = {
308 | render: function render() {
309 | var _vm = this;
310 |
311 | var _h = _vm.$createElement;
312 |
313 | var _c = _vm._self._c || _h;
314 |
315 | return _c('span', _vm._g({
316 | staticClass: "vgl-ghost-wrap",
317 | on: {
318 | "mouseover": _vm.startAnimating,
319 | "mouseleave": _vm.stopAnimating
320 | }
321 | }, _vm.$listeners), [_c('span', {
322 | staticClass: "vgl-ghost-original",
323 | staticStyle: {}
324 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
325 | staticClass: "vgl-ghost-bold",
326 | class: {
327 | 'vgl-active': _vm.active
328 | },
329 | staticStyle: {}
330 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
331 | ref: "originalText",
332 | staticStyle: {
333 | "opacity": "0"
334 | }
335 | }, [_vm._v(_vm._s(_vm.text))])]);
336 | },
337 | staticRenderFns: [],
338 | name: 'vgl-ghost',
339 | props: {
340 | text: {
341 | type: String,
342 | default: 'Sample Text'
343 | },
344 | hoverSpanStyle: {
345 | type: Object,
346 | // eslint-disable-next-line
347 | default: function _default() {
348 | return {};
349 | }
350 | },
351 | originalSpanStyle: {
352 | type: Object,
353 | // eslint-disable-next-line
354 | default: function _default() {
355 | return {};
356 | }
357 | }
358 | },
359 | data: function data() {
360 | return {
361 | active: false,
362 | spanWidth: 0
363 | };
364 | },
365 | computed: {},
366 | methods: {
367 | startAnimating: debounce(function () {
368 | this.active = true;
369 | }, 150),
370 | stopAnimating: debounce(function () {
371 | this.active = false;
372 | }, 150),
373 | init: function init() {
374 | var horizontalPadding = 5;
375 | var originalSpan = this.$refs.originalText; // console.log(originalSpan.offsetWidth);
376 |
377 | this.spanWidth = "".concat(originalSpan.offsetWidth + horizontalPadding * 2, "px");
378 | }
379 | },
380 | mounted: function mounted() {},
381 | components: {}
382 | };
383 |
384 | var VglSwing = {
385 | render: function render() {
386 | var _vm = this;
387 |
388 | var _h = _vm.$createElement;
389 |
390 | var _c = _vm._self._c || _h;
391 |
392 | return _c('span', _vm._g({
393 | staticClass: "vgl-swing-wrap",
394 | class: {
395 | 'vgl-active': _vm.active
396 | },
397 | on: {
398 | "mouseover": _vm.startAnimating,
399 | "mouseleave": _vm.stopAnimating
400 | }
401 | }, _vm.$listeners), [_c('span', {
402 | staticClass: "vgl-swing-original",
403 | style: _vm.internalOriginalSpanStyle
404 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
405 | staticClass: "vgl-swing-bold",
406 | style: _vm.internalBoldSpanStyle
407 | }, [_vm._v(_vm._s(_vm.text))])]);
408 | },
409 | staticRenderFns: [],
410 | name: 'vgl-swing',
411 | props: {
412 | text: {
413 | type: String,
414 | default: 'Sample Text'
415 | },
416 | hoverSpanStyle: {
417 | type: Object,
418 | // eslint-disable-next-line
419 | default: function _default() {
420 | return {};
421 | }
422 | },
423 | originalSpanStyle: {
424 | type: Object,
425 | // eslint-disable-next-line
426 | default: function _default() {
427 | return {};
428 | }
429 | }
430 | },
431 | data: function data() {
432 | return {
433 | active: false,
434 | spanWidth: 0
435 | };
436 | },
437 | computed: {
438 | internalOriginalSpanStyle: function internalOriginalSpanStyle() {
439 | return Object.assign({
440 | padding: '0px 5px'
441 | }, this.originalSpanStyle, {
442 | left: this.active ? "".concat(this.spanWidth) : 0
443 | });
444 | },
445 | internalBoldSpanStyle: function internalBoldSpanStyle() {
446 | return Object.assign({
447 | padding: '0px 5px'
448 | }, this.hoverSpanStyle, {
449 | left: this.active ? 0 : "-".concat(this.spanWidth)
450 | });
451 | }
452 | },
453 | methods: {
454 | startAnimating: debounce(function () {
455 | this.active = true;
456 | }, 150),
457 | stopAnimating: debounce(function () {
458 | this.active = false;
459 | }, 150),
460 | init: function init() {
461 | var horizontalPadding = 5;
462 | var originalSpan = this.$refs.originalText; // console.log(originalSpan.offsetWidth);
463 |
464 | this.spanWidth = "".concat(originalSpan.offsetWidth + horizontalPadding * 2, "px");
465 | }
466 | },
467 | mounted: function mounted() {},
468 | components: {}
469 | };
470 |
471 | var VglRotate = {
472 | render: function render() {
473 | var _vm = this;
474 |
475 | var _h = _vm.$createElement;
476 |
477 | var _c = _vm._self._c || _h;
478 |
479 | return _c('span', _vm._g({
480 | staticClass: "vgl-rotate-wrap",
481 | class: {
482 | 'vgl-active': _vm.active
483 | },
484 | on: {
485 | "mouseover": _vm.startAnimating,
486 | "mouseleave": _vm.stopAnimating
487 | }
488 | }, _vm.$listeners), [_c('span', {
489 | staticClass: "vgl-rotate-bold",
490 | style: _vm.internalBoldSpanStyle
491 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
492 | staticClass: "vgl-rotate-original",
493 | style: _vm.internalOriginalSpanStyle
494 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
495 | ref: "originalText",
496 | staticStyle: {
497 | "opacity": "0"
498 | },
499 | style: _vm.internalBoldSpanStyle
500 | }, [_vm._v(_vm._s(_vm.text))])]);
501 | },
502 | staticRenderFns: [],
503 | name: 'vgl-rotate',
504 | props: {
505 | text: {
506 | type: String,
507 | default: 'Sample Text'
508 | },
509 | hoverSpanStyle: {
510 | type: Object,
511 | // eslint-disable-next-line
512 | default: function _default() {
513 | return {};
514 | }
515 | },
516 | originalSpanStyle: {
517 | type: Object,
518 | // eslint-disable-next-line
519 | default: function _default() {
520 | return {};
521 | }
522 | }
523 | },
524 | data: function data() {
525 | return {
526 | active: false,
527 | spanWidth: 0
528 | };
529 | },
530 | computed: {
531 | internalOriginalSpanStyle: function internalOriginalSpanStyle() {
532 | return Object.assign({
533 | padding: '0px 5px'
534 | }, this.originalSpanStyle, {
535 | transformOrigin: "50% 50% -".concat(this.spanWidth)
536 | });
537 | },
538 | internalBoldSpanStyle: function internalBoldSpanStyle() {
539 | return Object.assign({
540 | padding: '0px 5px'
541 | }, this.hoverSpanStyle, {
542 | transformOrigin: "50% 50% ".concat(this.spanWidth)
543 | });
544 | }
545 | },
546 | methods: {
547 | startAnimating: debounce(function () {
548 | this.active = true;
549 | }, 150),
550 | stopAnimating: debounce(function () {
551 | this.active = false;
552 | }, 150),
553 | init: function init() {
554 | var originalSpan = this.$refs.originalText; // console.log(originalSpan.offsetWidth);
555 |
556 | this.spanWidth = "".concat(originalSpan.offsetWidth / 2, "px");
557 | }
558 | },
559 | mounted: function mounted() {
560 | this.init();
561 | },
562 | components: {}
563 | };
564 |
565 | var _components;
566 | var components = (_components = {}, _defineProperty(_components, VglWave.name, VglWave), _defineProperty(_components, VglRollup.name, VglRollup), _defineProperty(_components, VglSlidein.name, VglSlidein), _defineProperty(_components, VglGhost.name, VglGhost), _defineProperty(_components, VglSwing.name, VglSwing), _defineProperty(_components, VglRotate.name, VglRotate), _components);
567 |
568 | function install(Vue, options) {
569 | if (options && options.components) {
570 | options.components.forEach(function (c) {
571 | return Vue.component(c.name, components[c.name]);
572 | });
573 | } else {
574 | Object.keys(components).forEach(function (key) {
575 | Vue.component(key, components[key]);
576 | });
577 | }
578 | } // Automatic installation if Vue has been added to the global scope.
579 |
580 |
581 | if (typeof window !== 'undefined' && window.Vue) {
582 | window.Vue.use({
583 | install: install
584 | });
585 | }
586 |
587 | var index = {
588 | install: install
589 | };
590 |
591 | exports.default = index;
592 | exports.VglWave = VglWave;
593 | exports.VglRollup = VglRollup;
594 | exports.VglSlidein = VglSlidein;
595 | exports.VglGhost = VglGhost;
596 | exports.VglSwing = VglSwing;
597 | exports.VglRotate = VglRotate;
598 |
--------------------------------------------------------------------------------
/dist/vue-good-links.css:
--------------------------------------------------------------------------------
1 | .vgl-wave-wrap {
2 | position: relative; }
3 | .vgl-wave-wrap .vgl-lettr {
4 | position: relative; }
5 | .vgl-wave-wrap .vgl-lettr .vgl-lettr-inner {
6 | position: absolute;
7 | transition: all 0.15s ease-out;
8 | bottom: 0; }
9 | .vgl-wave-wrap .vgl-lettr.vgl-active .vgl-lettr-inner {
10 | bottom: 20%; }
11 |
12 | .vgl-rollup-wrap {
13 | position: relative;
14 | display: inline-block;
15 | vertical-align: top;
16 | overflow: hidden; }
17 | .vgl-rollup-wrap .vgl-rollup-original, .vgl-rollup-wrap .vgl-rollup-bold {
18 | transition: all 0.3s;
19 | display: inline-block;
20 | position: absolute; }
21 | .vgl-rollup-wrap .vgl-rollup-bold {
22 | font-weight: bold; }
23 |
24 | .vgl-slidein-wrap {
25 | position: relative;
26 | display: inline-block;
27 | vertical-align: top;
28 | overflow: hidden;
29 | white-space: nowrap; }
30 | .vgl-slidein-wrap .vgl-slidein-original, .vgl-slidein-wrap .vgl-slidein-bold {
31 | transition: all 0.3s;
32 | display: inline-block;
33 | position: absolute; }
34 |
35 | .vgl-ghost-wrap {
36 | position: relative;
37 | display: inline-block;
38 | vertical-align: top;
39 | white-space: nowrap; }
40 | .vgl-ghost-wrap .vgl-ghost-original, .vgl-ghost-wrap .vgl-ghost-bold {
41 | transition: all 0.3s;
42 | display: inline-block;
43 | position: absolute; }
44 | .vgl-ghost-wrap .vgl-ghost-original {
45 | opacity: 0.6; }
46 | .vgl-ghost-wrap .vgl-ghost-bold {
47 | transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
48 | transition: transform 0.3s, opacity 0.3s;
49 | opacity: 0; }
50 | .vgl-ghost-wrap .vgl-ghost-bold.vgl-active {
51 | opacity: 1;
52 | transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); }
53 |
54 | .vgl-swing-wrap {
55 | position: relative;
56 | display: inline-block;
57 | vertical-align: top;
58 | white-space: nowrap; }
59 | .vgl-swing-wrap .vgl-swing-original, .vgl-swing-wrap .vgl-swing-bold {
60 | display: inline-block; }
61 | .vgl-swing-wrap .vgl-swing-original {
62 | transform-origin: 0% 50%;
63 | transform-style: preserve-3d; }
64 | .vgl-swing-wrap .vgl-swing-bold {
65 | position: absolute;
66 | transform: rotateX(270deg);
67 | transition: transform 0.6s;
68 | transform-origin: 0 0;
69 | pointer-events: none;
70 | background-color: black;
71 | color: white; }
72 | .vgl-swing-wrap.vgl-active {
73 | perspective: 800px; }
74 | .vgl-swing-wrap.vgl-active .vgl-swing-bold {
75 | transform: rotateX(0deg); }
76 |
77 | .vgl-rotate-wrap {
78 | position: relative;
79 | display: inline-block;
80 | vertical-align: top;
81 | white-space: nowrap; }
82 | .vgl-rotate-wrap .vgl-rotate-original, .vgl-rotate-wrap .vgl-rotate-bold {
83 | display: inline-block;
84 | position: absolute; }
85 | .vgl-rotate-wrap .vgl-rotate-original {
86 | background: grey;
87 | transition: all 0.4s; }
88 | .vgl-rotate-wrap .vgl-rotate-bold {
89 | transform: rotateY(-90deg);
90 | transition: all 0.4s;
91 | background-color: black;
92 | color: white; }
93 | .vgl-rotate-wrap.vgl-active {
94 | perspective: 800px;
95 | transform-style: preserve-3d; }
96 | .vgl-rotate-wrap.vgl-active .vgl-rotate-original {
97 | transform: rotateY(-90deg); }
98 | .vgl-rotate-wrap.vgl-active .vgl-rotate-bold {
99 | transform: rotateY(0deg); }
100 |
--------------------------------------------------------------------------------
/dist/vue-good-links.es.js:
--------------------------------------------------------------------------------
1 | /**
2 | * vue-good-links v0.0.3
3 | * (c) 2018-present xaksis
4 | * https://github.com/xaksis/vue-good-links
5 | * Released under the MIT License.
6 | */
7 |
8 | import debounce from 'lodash.debounce';
9 |
10 | function _defineProperty(obj, key, value) {
11 | if (key in obj) {
12 | Object.defineProperty(obj, key, {
13 | value: value,
14 | enumerable: true,
15 | configurable: true,
16 | writable: true
17 | });
18 | } else {
19 | obj[key] = value;
20 | }
21 |
22 | return obj;
23 | }
24 |
25 | var VglWave = {
26 | render: function render() {
27 | var _vm = this;
28 |
29 | var _h = _vm.$createElement;
30 |
31 | var _c = _vm._self._c || _h;
32 |
33 | return _c('span', _vm._g({
34 | staticClass: "vgl-wave-wrap",
35 | on: {
36 | "mouseover": _vm.startAnimating,
37 | "mouseleave": _vm.stopAnimating
38 | }
39 | }, _vm.$listeners), _vm._l(_vm.letters, function (l, idx) {
40 | return _c('span', {
41 | key: idx,
42 | staticClass: "vgl-lettr",
43 | class: {
44 | 'vgl-active': _vm.activeIndex === idx
45 | }
46 | }, [_c('span', {
47 | staticClass: "vgl-lettr-inner"
48 | }, [_vm._v(_vm._s(l))]), _c('span', {
49 | staticStyle: {
50 | "opacity": "0"
51 | }
52 | }, [_vm._v(_vm._s(l))])]);
53 | }));
54 | },
55 | staticRenderFns: [],
56 | name: 'vgl-wave',
57 | props: {
58 | text: {
59 | type: String,
60 | default: 'Sample Text'
61 | }
62 | },
63 | data: function data() {
64 | return {
65 | activeIndex: -1,
66 | timeouts: [],
67 | intervals: []
68 | };
69 | },
70 | computed: {
71 | letters: function letters() {
72 | return this.text ? this.text.split('') : '';
73 | }
74 | },
75 | methods: {
76 | startAnimating: debounce(function () {
77 | var _this = this;
78 |
79 | var delay = 150; // if animation is already going, we don't need to do anything
80 |
81 | if (this.activeIndex > -1) return;
82 |
83 | var _loop = function _loop(i) {
84 | _this.timeouts.push(setTimeout(function () {
85 | // start animating right away
86 | _this.activeIndex = i; // repeat animation for as long as I'm hovering
87 |
88 | _this.intervals.push(setInterval(function () {
89 | _this.activeIndex = i;
90 | }, _this.letters.length * delay));
91 | }, i * delay));
92 | };
93 |
94 | for (var i = 0; i < this.letters.length; i++) {
95 | _loop(i);
96 | }
97 | }, 150),
98 | stopAnimating: debounce(function () {
99 | for (var i = 0; i < this.timeouts.length; i++) {
100 | clearTimeout(this.timeouts[i]);
101 | clearInterval(this.intervals[i]);
102 | }
103 |
104 | this.timeouts = [];
105 | this.intervals = [];
106 | this.activeIndex = -1;
107 | }, 150)
108 | },
109 | mounted: function mounted() {},
110 | components: {}
111 | };
112 |
113 | var VglRollup = {
114 | render: function render() {
115 | var _vm = this;
116 |
117 | var _h = _vm.$createElement;
118 |
119 | var _c = _vm._self._c || _h;
120 |
121 | return _c('span', _vm._g({
122 | staticClass: "vgl-rollup-wrap",
123 | style: {
124 | height: _vm.spanHeight
125 | },
126 | on: {
127 | "mouseover": _vm.startAnimating,
128 | "mouseleave": _vm.stopAnimating
129 | }
130 | }, _vm.$listeners), [_c('span', {
131 | staticClass: "vgl-rollup-original",
132 | style: _vm.internalOriginalSpanStyle
133 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
134 | staticClass: "vgl-rollup-bold",
135 | style: _vm.internalBoldSpanStyle
136 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
137 | ref: "originalText",
138 | staticStyle: {
139 | "opacity": "0",
140 | "font-weight": "bold"
141 | }
142 | }, [_vm._v(_vm._s(_vm.text))])]);
143 | },
144 | staticRenderFns: [],
145 | name: 'vgl-rollup',
146 | props: {
147 | text: {
148 | type: String,
149 | default: 'Sample Text'
150 | },
151 | hoverSpanStyle: {
152 | type: Object,
153 | // eslint-disable-next-line
154 | default: function _default() {
155 | return {};
156 | }
157 | },
158 | originalSpanStyle: {
159 | type: Object,
160 | // eslint-disable-next-line
161 | default: function _default() {
162 | return {};
163 | }
164 | }
165 | },
166 | data: function data() {
167 | return {
168 | active: false,
169 | spanHeight: 0
170 | };
171 | },
172 | computed: {
173 | internalOriginalSpanStyle: function internalOriginalSpanStyle() {
174 | return Object.assign({}, this.originalSpanStyle, {
175 | top: this.active ? "-".concat(this.spanHeight) : 0
176 | });
177 | },
178 | internalBoldSpanStyle: function internalBoldSpanStyle() {
179 | return Object.assign({}, this.hoverSpanStyle, {
180 | top: this.active ? 0 : "".concat(this.spanHeight)
181 | });
182 | }
183 | },
184 | methods: {
185 | startAnimating: debounce(function () {
186 | this.active = true;
187 | }, 150),
188 | stopAnimating: debounce(function () {
189 | this.active = false;
190 | }, 150),
191 | init: function init() {
192 | var originalSpan = this.$refs.originalText;
193 | var spanStyle = window.getComputedStyle(originalSpan, null); // console.log(spanStyle);
194 |
195 | this.spanHeight = spanStyle.lineHeight; // const num = parseInt(spanHeight.substring(0, spanHeight.length - 2), 10) * 1.2;
196 | // this.spanHeight = `${num}px`;
197 | }
198 | },
199 | mounted: function mounted() {
200 | this.init();
201 | },
202 | components: {}
203 | };
204 |
205 | var VglSlidein = {
206 | render: function render() {
207 | var _vm = this;
208 |
209 | var _h = _vm.$createElement;
210 |
211 | var _c = _vm._self._c || _h;
212 |
213 | return _c('span', _vm._g({
214 | staticClass: "vgl-slidein-wrap",
215 | style: {
216 | width: _vm.spanWidth
217 | },
218 | on: {
219 | "mouseover": _vm.startAnimating,
220 | "mouseleave": _vm.stopAnimating
221 | }
222 | }, _vm.$listeners), [_c('span', {
223 | ref: "mainText",
224 | staticClass: "vgl-slidein-original",
225 | style: _vm.internalOriginalSpanStyle
226 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
227 | staticClass: "vgl-slidein-bold",
228 | style: _vm.internalBoldSpanStyle
229 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
230 | ref: "originalText",
231 | staticStyle: {
232 | "opacity": "0"
233 | }
234 | }, [_vm._v(_vm._s(_vm.text))])]);
235 | },
236 | staticRenderFns: [],
237 | name: 'vgl-slidein',
238 | props: {
239 | text: {
240 | type: String,
241 | default: 'Sample Text'
242 | },
243 | hoverSpanStyle: {
244 | type: Object,
245 | // eslint-disable-next-line
246 | default: function _default() {
247 | return {};
248 | }
249 | },
250 | originalSpanStyle: {
251 | type: Object,
252 | // eslint-disable-next-line
253 | default: function _default() {
254 | return {};
255 | }
256 | }
257 | },
258 | data: function data() {
259 | return {
260 | active: false,
261 | spanWidth: 0
262 | };
263 | },
264 | computed: {
265 | internalOriginalSpanStyle: function internalOriginalSpanStyle() {
266 | return Object.assign({
267 | padding: '0px 5px'
268 | }, this.originalSpanStyle, {
269 | left: this.active ? "".concat(this.spanWidth) : 0
270 | });
271 | },
272 | internalBoldSpanStyle: function internalBoldSpanStyle() {
273 | return Object.assign({
274 | backgroundColor: 'black',
275 | color: 'white',
276 | padding: '0px 5px'
277 | }, this.hoverSpanStyle, {
278 | left: this.active ? 0 : "-".concat(this.spanWidth)
279 | });
280 | }
281 | },
282 | methods: {
283 | startAnimating: debounce(function () {
284 | this.active = true;
285 | }, 150),
286 | stopAnimating: debounce(function () {
287 | this.active = false;
288 | }, 150),
289 | init: function init() {
290 | // const horizontalPadding = 5;
291 | var originalSpan = this.$refs.mainText;
292 | this.spanWidth = "".concat(originalSpan.offsetWidth, "px");
293 | }
294 | },
295 | mounted: function mounted() {
296 | this.init();
297 | },
298 | components: {}
299 | };
300 |
301 | var VglGhost = {
302 | render: function render() {
303 | var _vm = this;
304 |
305 | var _h = _vm.$createElement;
306 |
307 | var _c = _vm._self._c || _h;
308 |
309 | return _c('span', _vm._g({
310 | staticClass: "vgl-ghost-wrap",
311 | on: {
312 | "mouseover": _vm.startAnimating,
313 | "mouseleave": _vm.stopAnimating
314 | }
315 | }, _vm.$listeners), [_c('span', {
316 | staticClass: "vgl-ghost-original",
317 | staticStyle: {}
318 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
319 | staticClass: "vgl-ghost-bold",
320 | class: {
321 | 'vgl-active': _vm.active
322 | },
323 | staticStyle: {}
324 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
325 | ref: "originalText",
326 | staticStyle: {
327 | "opacity": "0"
328 | }
329 | }, [_vm._v(_vm._s(_vm.text))])]);
330 | },
331 | staticRenderFns: [],
332 | name: 'vgl-ghost',
333 | props: {
334 | text: {
335 | type: String,
336 | default: 'Sample Text'
337 | },
338 | hoverSpanStyle: {
339 | type: Object,
340 | // eslint-disable-next-line
341 | default: function _default() {
342 | return {};
343 | }
344 | },
345 | originalSpanStyle: {
346 | type: Object,
347 | // eslint-disable-next-line
348 | default: function _default() {
349 | return {};
350 | }
351 | }
352 | },
353 | data: function data() {
354 | return {
355 | active: false,
356 | spanWidth: 0
357 | };
358 | },
359 | computed: {},
360 | methods: {
361 | startAnimating: debounce(function () {
362 | this.active = true;
363 | }, 150),
364 | stopAnimating: debounce(function () {
365 | this.active = false;
366 | }, 150),
367 | init: function init() {
368 | var horizontalPadding = 5;
369 | var originalSpan = this.$refs.originalText; // console.log(originalSpan.offsetWidth);
370 |
371 | this.spanWidth = "".concat(originalSpan.offsetWidth + horizontalPadding * 2, "px");
372 | }
373 | },
374 | mounted: function mounted() {},
375 | components: {}
376 | };
377 |
378 | var VglSwing = {
379 | render: function render() {
380 | var _vm = this;
381 |
382 | var _h = _vm.$createElement;
383 |
384 | var _c = _vm._self._c || _h;
385 |
386 | return _c('span', _vm._g({
387 | staticClass: "vgl-swing-wrap",
388 | class: {
389 | 'vgl-active': _vm.active
390 | },
391 | on: {
392 | "mouseover": _vm.startAnimating,
393 | "mouseleave": _vm.stopAnimating
394 | }
395 | }, _vm.$listeners), [_c('span', {
396 | staticClass: "vgl-swing-original",
397 | style: _vm.internalOriginalSpanStyle
398 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
399 | staticClass: "vgl-swing-bold",
400 | style: _vm.internalBoldSpanStyle
401 | }, [_vm._v(_vm._s(_vm.text))])]);
402 | },
403 | staticRenderFns: [],
404 | name: 'vgl-swing',
405 | props: {
406 | text: {
407 | type: String,
408 | default: 'Sample Text'
409 | },
410 | hoverSpanStyle: {
411 | type: Object,
412 | // eslint-disable-next-line
413 | default: function _default() {
414 | return {};
415 | }
416 | },
417 | originalSpanStyle: {
418 | type: Object,
419 | // eslint-disable-next-line
420 | default: function _default() {
421 | return {};
422 | }
423 | }
424 | },
425 | data: function data() {
426 | return {
427 | active: false,
428 | spanWidth: 0
429 | };
430 | },
431 | computed: {
432 | internalOriginalSpanStyle: function internalOriginalSpanStyle() {
433 | return Object.assign({
434 | padding: '0px 5px'
435 | }, this.originalSpanStyle, {
436 | left: this.active ? "".concat(this.spanWidth) : 0
437 | });
438 | },
439 | internalBoldSpanStyle: function internalBoldSpanStyle() {
440 | return Object.assign({
441 | padding: '0px 5px'
442 | }, this.hoverSpanStyle, {
443 | left: this.active ? 0 : "-".concat(this.spanWidth)
444 | });
445 | }
446 | },
447 | methods: {
448 | startAnimating: debounce(function () {
449 | this.active = true;
450 | }, 150),
451 | stopAnimating: debounce(function () {
452 | this.active = false;
453 | }, 150),
454 | init: function init() {
455 | var horizontalPadding = 5;
456 | var originalSpan = this.$refs.originalText; // console.log(originalSpan.offsetWidth);
457 |
458 | this.spanWidth = "".concat(originalSpan.offsetWidth + horizontalPadding * 2, "px");
459 | }
460 | },
461 | mounted: function mounted() {},
462 | components: {}
463 | };
464 |
465 | var VglRotate = {
466 | render: function render() {
467 | var _vm = this;
468 |
469 | var _h = _vm.$createElement;
470 |
471 | var _c = _vm._self._c || _h;
472 |
473 | return _c('span', _vm._g({
474 | staticClass: "vgl-rotate-wrap",
475 | class: {
476 | 'vgl-active': _vm.active
477 | },
478 | on: {
479 | "mouseover": _vm.startAnimating,
480 | "mouseleave": _vm.stopAnimating
481 | }
482 | }, _vm.$listeners), [_c('span', {
483 | staticClass: "vgl-rotate-bold",
484 | style: _vm.internalBoldSpanStyle
485 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
486 | staticClass: "vgl-rotate-original",
487 | style: _vm.internalOriginalSpanStyle
488 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
489 | ref: "originalText",
490 | staticStyle: {
491 | "opacity": "0"
492 | },
493 | style: _vm.internalBoldSpanStyle
494 | }, [_vm._v(_vm._s(_vm.text))])]);
495 | },
496 | staticRenderFns: [],
497 | name: 'vgl-rotate',
498 | props: {
499 | text: {
500 | type: String,
501 | default: 'Sample Text'
502 | },
503 | hoverSpanStyle: {
504 | type: Object,
505 | // eslint-disable-next-line
506 | default: function _default() {
507 | return {};
508 | }
509 | },
510 | originalSpanStyle: {
511 | type: Object,
512 | // eslint-disable-next-line
513 | default: function _default() {
514 | return {};
515 | }
516 | }
517 | },
518 | data: function data() {
519 | return {
520 | active: false,
521 | spanWidth: 0
522 | };
523 | },
524 | computed: {
525 | internalOriginalSpanStyle: function internalOriginalSpanStyle() {
526 | return Object.assign({
527 | padding: '0px 5px'
528 | }, this.originalSpanStyle, {
529 | transformOrigin: "50% 50% -".concat(this.spanWidth)
530 | });
531 | },
532 | internalBoldSpanStyle: function internalBoldSpanStyle() {
533 | return Object.assign({
534 | padding: '0px 5px'
535 | }, this.hoverSpanStyle, {
536 | transformOrigin: "50% 50% ".concat(this.spanWidth)
537 | });
538 | }
539 | },
540 | methods: {
541 | startAnimating: debounce(function () {
542 | this.active = true;
543 | }, 150),
544 | stopAnimating: debounce(function () {
545 | this.active = false;
546 | }, 150),
547 | init: function init() {
548 | var originalSpan = this.$refs.originalText; // console.log(originalSpan.offsetWidth);
549 |
550 | this.spanWidth = "".concat(originalSpan.offsetWidth / 2, "px");
551 | }
552 | },
553 | mounted: function mounted() {
554 | this.init();
555 | },
556 | components: {}
557 | };
558 |
559 | var _components;
560 | var components = (_components = {}, _defineProperty(_components, VglWave.name, VglWave), _defineProperty(_components, VglRollup.name, VglRollup), _defineProperty(_components, VglSlidein.name, VglSlidein), _defineProperty(_components, VglGhost.name, VglGhost), _defineProperty(_components, VglSwing.name, VglSwing), _defineProperty(_components, VglRotate.name, VglRotate), _components);
561 |
562 | function install(Vue, options) {
563 | if (options && options.components) {
564 | options.components.forEach(function (c) {
565 | return Vue.component(c.name, components[c.name]);
566 | });
567 | } else {
568 | Object.keys(components).forEach(function (key) {
569 | Vue.component(key, components[key]);
570 | });
571 | }
572 | } // Automatic installation if Vue has been added to the global scope.
573 |
574 |
575 | if (typeof window !== 'undefined' && window.Vue) {
576 | window.Vue.use({
577 | install: install
578 | });
579 | }
580 |
581 | var index = {
582 | install: install
583 | };
584 |
585 | export default index;
586 | export { VglWave, VglRollup, VglSlidein, VglGhost, VglSwing, VglRotate };
587 |
--------------------------------------------------------------------------------
/dist/vue-good-links.js:
--------------------------------------------------------------------------------
1 | /**
2 | * vue-good-links v0.0.3
3 | * (c) 2018-present xaksis
4 | * https://github.com/xaksis/vue-good-links
5 | * Released under the MIT License.
6 | */
7 |
8 | (function (global, factory) {
9 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
10 | typeof define === 'function' && define.amd ? define(['exports'], factory) :
11 | (factory((global.vueGoodLinks = {})));
12 | }(this, (function (exports) { 'use strict';
13 |
14 | function _defineProperty(obj, key, value) {
15 | if (key in obj) {
16 | Object.defineProperty(obj, key, {
17 | value: value,
18 | enumerable: true,
19 | configurable: true,
20 | writable: true
21 | });
22 | } else {
23 | obj[key] = value;
24 | }
25 |
26 | return obj;
27 | }
28 |
29 | var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
30 |
31 | /**
32 | * lodash (Custom Build)
33 | * Build: `lodash modularize exports="npm" -o ./`
34 | * Copyright jQuery Foundation and other contributors
35 | * Released under MIT license
36 | * Based on Underscore.js 1.8.3
37 | * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
38 | */
39 |
40 | /** Used as the `TypeError` message for "Functions" methods. */
41 | var FUNC_ERROR_TEXT = 'Expected a function';
42 |
43 | /** Used as references for various `Number` constants. */
44 | var NAN = 0 / 0;
45 |
46 | /** `Object#toString` result references. */
47 | var symbolTag = '[object Symbol]';
48 |
49 | /** Used to match leading and trailing whitespace. */
50 | var reTrim = /^\s+|\s+$/g;
51 |
52 | /** Used to detect bad signed hexadecimal string values. */
53 | var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
54 |
55 | /** Used to detect binary string values. */
56 | var reIsBinary = /^0b[01]+$/i;
57 |
58 | /** Used to detect octal string values. */
59 | var reIsOctal = /^0o[0-7]+$/i;
60 |
61 | /** Built-in method references without a dependency on `root`. */
62 | var freeParseInt = parseInt;
63 |
64 | /** Detect free variable `global` from Node.js. */
65 | var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
66 |
67 | /** Detect free variable `self`. */
68 | var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
69 |
70 | /** Used as a reference to the global object. */
71 | var root = freeGlobal || freeSelf || Function('return this')();
72 |
73 | /** Used for built-in method references. */
74 | var objectProto = Object.prototype;
75 |
76 | /**
77 | * Used to resolve the
78 | * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
79 | * of values.
80 | */
81 | var objectToString = objectProto.toString;
82 |
83 | /* Built-in method references for those with the same name as other `lodash` methods. */
84 | var nativeMax = Math.max,
85 | nativeMin = Math.min;
86 |
87 | /**
88 | * Gets the timestamp of the number of milliseconds that have elapsed since
89 | * the Unix epoch (1 January 1970 00:00:00 UTC).
90 | *
91 | * @static
92 | * @memberOf _
93 | * @since 2.4.0
94 | * @category Date
95 | * @returns {number} Returns the timestamp.
96 | * @example
97 | *
98 | * _.defer(function(stamp) {
99 | * console.log(_.now() - stamp);
100 | * }, _.now());
101 | * // => Logs the number of milliseconds it took for the deferred invocation.
102 | */
103 | var now = function() {
104 | return root.Date.now();
105 | };
106 |
107 | /**
108 | * Creates a debounced function that delays invoking `func` until after `wait`
109 | * milliseconds have elapsed since the last time the debounced function was
110 | * invoked. The debounced function comes with a `cancel` method to cancel
111 | * delayed `func` invocations and a `flush` method to immediately invoke them.
112 | * Provide `options` to indicate whether `func` should be invoked on the
113 | * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
114 | * with the last arguments provided to the debounced function. Subsequent
115 | * calls to the debounced function return the result of the last `func`
116 | * invocation.
117 | *
118 | * **Note:** If `leading` and `trailing` options are `true`, `func` is
119 | * invoked on the trailing edge of the timeout only if the debounced function
120 | * is invoked more than once during the `wait` timeout.
121 | *
122 | * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
123 | * until to the next tick, similar to `setTimeout` with a timeout of `0`.
124 | *
125 | * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
126 | * for details over the differences between `_.debounce` and `_.throttle`.
127 | *
128 | * @static
129 | * @memberOf _
130 | * @since 0.1.0
131 | * @category Function
132 | * @param {Function} func The function to debounce.
133 | * @param {number} [wait=0] The number of milliseconds to delay.
134 | * @param {Object} [options={}] The options object.
135 | * @param {boolean} [options.leading=false]
136 | * Specify invoking on the leading edge of the timeout.
137 | * @param {number} [options.maxWait]
138 | * The maximum time `func` is allowed to be delayed before it's invoked.
139 | * @param {boolean} [options.trailing=true]
140 | * Specify invoking on the trailing edge of the timeout.
141 | * @returns {Function} Returns the new debounced function.
142 | * @example
143 | *
144 | * // Avoid costly calculations while the window size is in flux.
145 | * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
146 | *
147 | * // Invoke `sendMail` when clicked, debouncing subsequent calls.
148 | * jQuery(element).on('click', _.debounce(sendMail, 300, {
149 | * 'leading': true,
150 | * 'trailing': false
151 | * }));
152 | *
153 | * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
154 | * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
155 | * var source = new EventSource('/stream');
156 | * jQuery(source).on('message', debounced);
157 | *
158 | * // Cancel the trailing debounced invocation.
159 | * jQuery(window).on('popstate', debounced.cancel);
160 | */
161 | function debounce(func, wait, options) {
162 | var lastArgs,
163 | lastThis,
164 | maxWait,
165 | result,
166 | timerId,
167 | lastCallTime,
168 | lastInvokeTime = 0,
169 | leading = false,
170 | maxing = false,
171 | trailing = true;
172 |
173 | if (typeof func != 'function') {
174 | throw new TypeError(FUNC_ERROR_TEXT);
175 | }
176 | wait = toNumber(wait) || 0;
177 | if (isObject(options)) {
178 | leading = !!options.leading;
179 | maxing = 'maxWait' in options;
180 | maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
181 | trailing = 'trailing' in options ? !!options.trailing : trailing;
182 | }
183 |
184 | function invokeFunc(time) {
185 | var args = lastArgs,
186 | thisArg = lastThis;
187 |
188 | lastArgs = lastThis = undefined;
189 | lastInvokeTime = time;
190 | result = func.apply(thisArg, args);
191 | return result;
192 | }
193 |
194 | function leadingEdge(time) {
195 | // Reset any `maxWait` timer.
196 | lastInvokeTime = time;
197 | // Start the timer for the trailing edge.
198 | timerId = setTimeout(timerExpired, wait);
199 | // Invoke the leading edge.
200 | return leading ? invokeFunc(time) : result;
201 | }
202 |
203 | function remainingWait(time) {
204 | var timeSinceLastCall = time - lastCallTime,
205 | timeSinceLastInvoke = time - lastInvokeTime,
206 | result = wait - timeSinceLastCall;
207 |
208 | return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result;
209 | }
210 |
211 | function shouldInvoke(time) {
212 | var timeSinceLastCall = time - lastCallTime,
213 | timeSinceLastInvoke = time - lastInvokeTime;
214 |
215 | // Either this is the first call, activity has stopped and we're at the
216 | // trailing edge, the system time has gone backwards and we're treating
217 | // it as the trailing edge, or we've hit the `maxWait` limit.
218 | return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
219 | (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
220 | }
221 |
222 | function timerExpired() {
223 | var time = now();
224 | if (shouldInvoke(time)) {
225 | return trailingEdge(time);
226 | }
227 | // Restart the timer.
228 | timerId = setTimeout(timerExpired, remainingWait(time));
229 | }
230 |
231 | function trailingEdge(time) {
232 | timerId = undefined;
233 |
234 | // Only invoke if we have `lastArgs` which means `func` has been
235 | // debounced at least once.
236 | if (trailing && lastArgs) {
237 | return invokeFunc(time);
238 | }
239 | lastArgs = lastThis = undefined;
240 | return result;
241 | }
242 |
243 | function cancel() {
244 | if (timerId !== undefined) {
245 | clearTimeout(timerId);
246 | }
247 | lastInvokeTime = 0;
248 | lastArgs = lastCallTime = lastThis = timerId = undefined;
249 | }
250 |
251 | function flush() {
252 | return timerId === undefined ? result : trailingEdge(now());
253 | }
254 |
255 | function debounced() {
256 | var time = now(),
257 | isInvoking = shouldInvoke(time);
258 |
259 | lastArgs = arguments;
260 | lastThis = this;
261 | lastCallTime = time;
262 |
263 | if (isInvoking) {
264 | if (timerId === undefined) {
265 | return leadingEdge(lastCallTime);
266 | }
267 | if (maxing) {
268 | // Handle invocations in a tight loop.
269 | timerId = setTimeout(timerExpired, wait);
270 | return invokeFunc(lastCallTime);
271 | }
272 | }
273 | if (timerId === undefined) {
274 | timerId = setTimeout(timerExpired, wait);
275 | }
276 | return result;
277 | }
278 | debounced.cancel = cancel;
279 | debounced.flush = flush;
280 | return debounced;
281 | }
282 |
283 | /**
284 | * Checks if `value` is the
285 | * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
286 | * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
287 | *
288 | * @static
289 | * @memberOf _
290 | * @since 0.1.0
291 | * @category Lang
292 | * @param {*} value The value to check.
293 | * @returns {boolean} Returns `true` if `value` is an object, else `false`.
294 | * @example
295 | *
296 | * _.isObject({});
297 | * // => true
298 | *
299 | * _.isObject([1, 2, 3]);
300 | * // => true
301 | *
302 | * _.isObject(_.noop);
303 | * // => true
304 | *
305 | * _.isObject(null);
306 | * // => false
307 | */
308 | function isObject(value) {
309 | var type = typeof value;
310 | return !!value && (type == 'object' || type == 'function');
311 | }
312 |
313 | /**
314 | * Checks if `value` is object-like. A value is object-like if it's not `null`
315 | * and has a `typeof` result of "object".
316 | *
317 | * @static
318 | * @memberOf _
319 | * @since 4.0.0
320 | * @category Lang
321 | * @param {*} value The value to check.
322 | * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
323 | * @example
324 | *
325 | * _.isObjectLike({});
326 | * // => true
327 | *
328 | * _.isObjectLike([1, 2, 3]);
329 | * // => true
330 | *
331 | * _.isObjectLike(_.noop);
332 | * // => false
333 | *
334 | * _.isObjectLike(null);
335 | * // => false
336 | */
337 | function isObjectLike(value) {
338 | return !!value && typeof value == 'object';
339 | }
340 |
341 | /**
342 | * Checks if `value` is classified as a `Symbol` primitive or object.
343 | *
344 | * @static
345 | * @memberOf _
346 | * @since 4.0.0
347 | * @category Lang
348 | * @param {*} value The value to check.
349 | * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
350 | * @example
351 | *
352 | * _.isSymbol(Symbol.iterator);
353 | * // => true
354 | *
355 | * _.isSymbol('abc');
356 | * // => false
357 | */
358 | function isSymbol(value) {
359 | return typeof value == 'symbol' ||
360 | (isObjectLike(value) && objectToString.call(value) == symbolTag);
361 | }
362 |
363 | /**
364 | * Converts `value` to a number.
365 | *
366 | * @static
367 | * @memberOf _
368 | * @since 4.0.0
369 | * @category Lang
370 | * @param {*} value The value to process.
371 | * @returns {number} Returns the number.
372 | * @example
373 | *
374 | * _.toNumber(3.2);
375 | * // => 3.2
376 | *
377 | * _.toNumber(Number.MIN_VALUE);
378 | * // => 5e-324
379 | *
380 | * _.toNumber(Infinity);
381 | * // => Infinity
382 | *
383 | * _.toNumber('3.2');
384 | * // => 3.2
385 | */
386 | function toNumber(value) {
387 | if (typeof value == 'number') {
388 | return value;
389 | }
390 | if (isSymbol(value)) {
391 | return NAN;
392 | }
393 | if (isObject(value)) {
394 | var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
395 | value = isObject(other) ? (other + '') : other;
396 | }
397 | if (typeof value != 'string') {
398 | return value === 0 ? value : +value;
399 | }
400 | value = value.replace(reTrim, '');
401 | var isBinary = reIsBinary.test(value);
402 | return (isBinary || reIsOctal.test(value))
403 | ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
404 | : (reIsBadHex.test(value) ? NAN : +value);
405 | }
406 |
407 | var lodash_debounce = debounce;
408 |
409 | var VglWave = {
410 | render: function render() {
411 | var _vm = this;
412 |
413 | var _h = _vm.$createElement;
414 |
415 | var _c = _vm._self._c || _h;
416 |
417 | return _c('span', _vm._g({
418 | staticClass: "vgl-wave-wrap",
419 | on: {
420 | "mouseover": _vm.startAnimating,
421 | "mouseleave": _vm.stopAnimating
422 | }
423 | }, _vm.$listeners), _vm._l(_vm.letters, function (l, idx) {
424 | return _c('span', {
425 | key: idx,
426 | staticClass: "vgl-lettr",
427 | class: {
428 | 'vgl-active': _vm.activeIndex === idx
429 | }
430 | }, [_c('span', {
431 | staticClass: "vgl-lettr-inner"
432 | }, [_vm._v(_vm._s(l))]), _c('span', {
433 | staticStyle: {
434 | "opacity": "0"
435 | }
436 | }, [_vm._v(_vm._s(l))])]);
437 | }));
438 | },
439 | staticRenderFns: [],
440 | name: 'vgl-wave',
441 | props: {
442 | text: {
443 | type: String,
444 | default: 'Sample Text'
445 | }
446 | },
447 | data: function data() {
448 | return {
449 | activeIndex: -1,
450 | timeouts: [],
451 | intervals: []
452 | };
453 | },
454 | computed: {
455 | letters: function letters() {
456 | return this.text ? this.text.split('') : '';
457 | }
458 | },
459 | methods: {
460 | startAnimating: lodash_debounce(function () {
461 | var _this = this;
462 |
463 | var delay = 150; // if animation is already going, we don't need to do anything
464 |
465 | if (this.activeIndex > -1) return;
466 |
467 | var _loop = function _loop(i) {
468 | _this.timeouts.push(setTimeout(function () {
469 | // start animating right away
470 | _this.activeIndex = i; // repeat animation for as long as I'm hovering
471 |
472 | _this.intervals.push(setInterval(function () {
473 | _this.activeIndex = i;
474 | }, _this.letters.length * delay));
475 | }, i * delay));
476 | };
477 |
478 | for (var i = 0; i < this.letters.length; i++) {
479 | _loop(i);
480 | }
481 | }, 150),
482 | stopAnimating: lodash_debounce(function () {
483 | for (var i = 0; i < this.timeouts.length; i++) {
484 | clearTimeout(this.timeouts[i]);
485 | clearInterval(this.intervals[i]);
486 | }
487 |
488 | this.timeouts = [];
489 | this.intervals = [];
490 | this.activeIndex = -1;
491 | }, 150)
492 | },
493 | mounted: function mounted() {},
494 | components: {}
495 | };
496 |
497 | var VglRollup = {
498 | render: function render() {
499 | var _vm = this;
500 |
501 | var _h = _vm.$createElement;
502 |
503 | var _c = _vm._self._c || _h;
504 |
505 | return _c('span', _vm._g({
506 | staticClass: "vgl-rollup-wrap",
507 | style: {
508 | height: _vm.spanHeight
509 | },
510 | on: {
511 | "mouseover": _vm.startAnimating,
512 | "mouseleave": _vm.stopAnimating
513 | }
514 | }, _vm.$listeners), [_c('span', {
515 | staticClass: "vgl-rollup-original",
516 | style: _vm.internalOriginalSpanStyle
517 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
518 | staticClass: "vgl-rollup-bold",
519 | style: _vm.internalBoldSpanStyle
520 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
521 | ref: "originalText",
522 | staticStyle: {
523 | "opacity": "0",
524 | "font-weight": "bold"
525 | }
526 | }, [_vm._v(_vm._s(_vm.text))])]);
527 | },
528 | staticRenderFns: [],
529 | name: 'vgl-rollup',
530 | props: {
531 | text: {
532 | type: String,
533 | default: 'Sample Text'
534 | },
535 | hoverSpanStyle: {
536 | type: Object,
537 | // eslint-disable-next-line
538 | default: function _default() {
539 | return {};
540 | }
541 | },
542 | originalSpanStyle: {
543 | type: Object,
544 | // eslint-disable-next-line
545 | default: function _default() {
546 | return {};
547 | }
548 | }
549 | },
550 | data: function data() {
551 | return {
552 | active: false,
553 | spanHeight: 0
554 | };
555 | },
556 | computed: {
557 | internalOriginalSpanStyle: function internalOriginalSpanStyle() {
558 | return Object.assign({}, this.originalSpanStyle, {
559 | top: this.active ? "-".concat(this.spanHeight) : 0
560 | });
561 | },
562 | internalBoldSpanStyle: function internalBoldSpanStyle() {
563 | return Object.assign({}, this.hoverSpanStyle, {
564 | top: this.active ? 0 : "".concat(this.spanHeight)
565 | });
566 | }
567 | },
568 | methods: {
569 | startAnimating: lodash_debounce(function () {
570 | this.active = true;
571 | }, 150),
572 | stopAnimating: lodash_debounce(function () {
573 | this.active = false;
574 | }, 150),
575 | init: function init() {
576 | var originalSpan = this.$refs.originalText;
577 | var spanStyle = window.getComputedStyle(originalSpan, null); // console.log(spanStyle);
578 |
579 | this.spanHeight = spanStyle.lineHeight; // const num = parseInt(spanHeight.substring(0, spanHeight.length - 2), 10) * 1.2;
580 | // this.spanHeight = `${num}px`;
581 | }
582 | },
583 | mounted: function mounted() {
584 | this.init();
585 | },
586 | components: {}
587 | };
588 |
589 | var VglSlidein = {
590 | render: function render() {
591 | var _vm = this;
592 |
593 | var _h = _vm.$createElement;
594 |
595 | var _c = _vm._self._c || _h;
596 |
597 | return _c('span', _vm._g({
598 | staticClass: "vgl-slidein-wrap",
599 | style: {
600 | width: _vm.spanWidth
601 | },
602 | on: {
603 | "mouseover": _vm.startAnimating,
604 | "mouseleave": _vm.stopAnimating
605 | }
606 | }, _vm.$listeners), [_c('span', {
607 | ref: "mainText",
608 | staticClass: "vgl-slidein-original",
609 | style: _vm.internalOriginalSpanStyle
610 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
611 | staticClass: "vgl-slidein-bold",
612 | style: _vm.internalBoldSpanStyle
613 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
614 | ref: "originalText",
615 | staticStyle: {
616 | "opacity": "0"
617 | }
618 | }, [_vm._v(_vm._s(_vm.text))])]);
619 | },
620 | staticRenderFns: [],
621 | name: 'vgl-slidein',
622 | props: {
623 | text: {
624 | type: String,
625 | default: 'Sample Text'
626 | },
627 | hoverSpanStyle: {
628 | type: Object,
629 | // eslint-disable-next-line
630 | default: function _default() {
631 | return {};
632 | }
633 | },
634 | originalSpanStyle: {
635 | type: Object,
636 | // eslint-disable-next-line
637 | default: function _default() {
638 | return {};
639 | }
640 | }
641 | },
642 | data: function data() {
643 | return {
644 | active: false,
645 | spanWidth: 0
646 | };
647 | },
648 | computed: {
649 | internalOriginalSpanStyle: function internalOriginalSpanStyle() {
650 | return Object.assign({
651 | padding: '0px 5px'
652 | }, this.originalSpanStyle, {
653 | left: this.active ? "".concat(this.spanWidth) : 0
654 | });
655 | },
656 | internalBoldSpanStyle: function internalBoldSpanStyle() {
657 | return Object.assign({
658 | backgroundColor: 'black',
659 | color: 'white',
660 | padding: '0px 5px'
661 | }, this.hoverSpanStyle, {
662 | left: this.active ? 0 : "-".concat(this.spanWidth)
663 | });
664 | }
665 | },
666 | methods: {
667 | startAnimating: lodash_debounce(function () {
668 | this.active = true;
669 | }, 150),
670 | stopAnimating: lodash_debounce(function () {
671 | this.active = false;
672 | }, 150),
673 | init: function init() {
674 | // const horizontalPadding = 5;
675 | var originalSpan = this.$refs.mainText;
676 | this.spanWidth = "".concat(originalSpan.offsetWidth, "px");
677 | }
678 | },
679 | mounted: function mounted() {
680 | this.init();
681 | },
682 | components: {}
683 | };
684 |
685 | var VglGhost = {
686 | render: function render() {
687 | var _vm = this;
688 |
689 | var _h = _vm.$createElement;
690 |
691 | var _c = _vm._self._c || _h;
692 |
693 | return _c('span', _vm._g({
694 | staticClass: "vgl-ghost-wrap",
695 | on: {
696 | "mouseover": _vm.startAnimating,
697 | "mouseleave": _vm.stopAnimating
698 | }
699 | }, _vm.$listeners), [_c('span', {
700 | staticClass: "vgl-ghost-original",
701 | staticStyle: {}
702 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
703 | staticClass: "vgl-ghost-bold",
704 | class: {
705 | 'vgl-active': _vm.active
706 | },
707 | staticStyle: {}
708 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
709 | ref: "originalText",
710 | staticStyle: {
711 | "opacity": "0"
712 | }
713 | }, [_vm._v(_vm._s(_vm.text))])]);
714 | },
715 | staticRenderFns: [],
716 | name: 'vgl-ghost',
717 | props: {
718 | text: {
719 | type: String,
720 | default: 'Sample Text'
721 | },
722 | hoverSpanStyle: {
723 | type: Object,
724 | // eslint-disable-next-line
725 | default: function _default() {
726 | return {};
727 | }
728 | },
729 | originalSpanStyle: {
730 | type: Object,
731 | // eslint-disable-next-line
732 | default: function _default() {
733 | return {};
734 | }
735 | }
736 | },
737 | data: function data() {
738 | return {
739 | active: false,
740 | spanWidth: 0
741 | };
742 | },
743 | computed: {},
744 | methods: {
745 | startAnimating: lodash_debounce(function () {
746 | this.active = true;
747 | }, 150),
748 | stopAnimating: lodash_debounce(function () {
749 | this.active = false;
750 | }, 150),
751 | init: function init() {
752 | var horizontalPadding = 5;
753 | var originalSpan = this.$refs.originalText; // console.log(originalSpan.offsetWidth);
754 |
755 | this.spanWidth = "".concat(originalSpan.offsetWidth + horizontalPadding * 2, "px");
756 | }
757 | },
758 | mounted: function mounted() {},
759 | components: {}
760 | };
761 |
762 | var VglSwing = {
763 | render: function render() {
764 | var _vm = this;
765 |
766 | var _h = _vm.$createElement;
767 |
768 | var _c = _vm._self._c || _h;
769 |
770 | return _c('span', _vm._g({
771 | staticClass: "vgl-swing-wrap",
772 | class: {
773 | 'vgl-active': _vm.active
774 | },
775 | on: {
776 | "mouseover": _vm.startAnimating,
777 | "mouseleave": _vm.stopAnimating
778 | }
779 | }, _vm.$listeners), [_c('span', {
780 | staticClass: "vgl-swing-original",
781 | style: _vm.internalOriginalSpanStyle
782 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
783 | staticClass: "vgl-swing-bold",
784 | style: _vm.internalBoldSpanStyle
785 | }, [_vm._v(_vm._s(_vm.text))])]);
786 | },
787 | staticRenderFns: [],
788 | name: 'vgl-swing',
789 | props: {
790 | text: {
791 | type: String,
792 | default: 'Sample Text'
793 | },
794 | hoverSpanStyle: {
795 | type: Object,
796 | // eslint-disable-next-line
797 | default: function _default() {
798 | return {};
799 | }
800 | },
801 | originalSpanStyle: {
802 | type: Object,
803 | // eslint-disable-next-line
804 | default: function _default() {
805 | return {};
806 | }
807 | }
808 | },
809 | data: function data() {
810 | return {
811 | active: false,
812 | spanWidth: 0
813 | };
814 | },
815 | computed: {
816 | internalOriginalSpanStyle: function internalOriginalSpanStyle() {
817 | return Object.assign({
818 | padding: '0px 5px'
819 | }, this.originalSpanStyle, {
820 | left: this.active ? "".concat(this.spanWidth) : 0
821 | });
822 | },
823 | internalBoldSpanStyle: function internalBoldSpanStyle() {
824 | return Object.assign({
825 | padding: '0px 5px'
826 | }, this.hoverSpanStyle, {
827 | left: this.active ? 0 : "-".concat(this.spanWidth)
828 | });
829 | }
830 | },
831 | methods: {
832 | startAnimating: lodash_debounce(function () {
833 | this.active = true;
834 | }, 150),
835 | stopAnimating: lodash_debounce(function () {
836 | this.active = false;
837 | }, 150),
838 | init: function init() {
839 | var horizontalPadding = 5;
840 | var originalSpan = this.$refs.originalText; // console.log(originalSpan.offsetWidth);
841 |
842 | this.spanWidth = "".concat(originalSpan.offsetWidth + horizontalPadding * 2, "px");
843 | }
844 | },
845 | mounted: function mounted() {},
846 | components: {}
847 | };
848 |
849 | var VglRotate = {
850 | render: function render() {
851 | var _vm = this;
852 |
853 | var _h = _vm.$createElement;
854 |
855 | var _c = _vm._self._c || _h;
856 |
857 | return _c('span', _vm._g({
858 | staticClass: "vgl-rotate-wrap",
859 | class: {
860 | 'vgl-active': _vm.active
861 | },
862 | on: {
863 | "mouseover": _vm.startAnimating,
864 | "mouseleave": _vm.stopAnimating
865 | }
866 | }, _vm.$listeners), [_c('span', {
867 | staticClass: "vgl-rotate-bold",
868 | style: _vm.internalBoldSpanStyle
869 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
870 | staticClass: "vgl-rotate-original",
871 | style: _vm.internalOriginalSpanStyle
872 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', {
873 | ref: "originalText",
874 | staticStyle: {
875 | "opacity": "0"
876 | },
877 | style: _vm.internalBoldSpanStyle
878 | }, [_vm._v(_vm._s(_vm.text))])]);
879 | },
880 | staticRenderFns: [],
881 | name: 'vgl-rotate',
882 | props: {
883 | text: {
884 | type: String,
885 | default: 'Sample Text'
886 | },
887 | hoverSpanStyle: {
888 | type: Object,
889 | // eslint-disable-next-line
890 | default: function _default() {
891 | return {};
892 | }
893 | },
894 | originalSpanStyle: {
895 | type: Object,
896 | // eslint-disable-next-line
897 | default: function _default() {
898 | return {};
899 | }
900 | }
901 | },
902 | data: function data() {
903 | return {
904 | active: false,
905 | spanWidth: 0
906 | };
907 | },
908 | computed: {
909 | internalOriginalSpanStyle: function internalOriginalSpanStyle() {
910 | return Object.assign({
911 | padding: '0px 5px'
912 | }, this.originalSpanStyle, {
913 | transformOrigin: "50% 50% -".concat(this.spanWidth)
914 | });
915 | },
916 | internalBoldSpanStyle: function internalBoldSpanStyle() {
917 | return Object.assign({
918 | padding: '0px 5px'
919 | }, this.hoverSpanStyle, {
920 | transformOrigin: "50% 50% ".concat(this.spanWidth)
921 | });
922 | }
923 | },
924 | methods: {
925 | startAnimating: lodash_debounce(function () {
926 | this.active = true;
927 | }, 150),
928 | stopAnimating: lodash_debounce(function () {
929 | this.active = false;
930 | }, 150),
931 | init: function init() {
932 | var originalSpan = this.$refs.originalText; // console.log(originalSpan.offsetWidth);
933 |
934 | this.spanWidth = "".concat(originalSpan.offsetWidth / 2, "px");
935 | }
936 | },
937 | mounted: function mounted() {
938 | this.init();
939 | },
940 | components: {}
941 | };
942 |
943 | var _components;
944 | var components = (_components = {}, _defineProperty(_components, VglWave.name, VglWave), _defineProperty(_components, VglRollup.name, VglRollup), _defineProperty(_components, VglSlidein.name, VglSlidein), _defineProperty(_components, VglGhost.name, VglGhost), _defineProperty(_components, VglSwing.name, VglSwing), _defineProperty(_components, VglRotate.name, VglRotate), _components);
945 |
946 | function install(Vue, options) {
947 | if (options && options.components) {
948 | options.components.forEach(function (c) {
949 | return Vue.component(c.name, components[c.name]);
950 | });
951 | } else {
952 | Object.keys(components).forEach(function (key) {
953 | Vue.component(key, components[key]);
954 | });
955 | }
956 | } // Automatic installation if Vue has been added to the global scope.
957 |
958 |
959 | if (typeof window !== 'undefined' && window.Vue) {
960 | window.Vue.use({
961 | install: install
962 | });
963 | }
964 |
965 | var index = {
966 | install: install
967 | };
968 |
969 | exports.default = index;
970 | exports.VglWave = VglWave;
971 | exports.VglRollup = VglRollup;
972 | exports.VglSlidein = VglSlidein;
973 | exports.VglGhost = VglGhost;
974 | exports.VglSwing = VglSwing;
975 | exports.VglRotate = VglRotate;
976 |
977 | Object.defineProperty(exports, '__esModule', { value: true });
978 |
979 | })));
980 |
--------------------------------------------------------------------------------
/dist/vue-good-links.min.css:
--------------------------------------------------------------------------------
1 | .vgl-wave-wrap,.vgl-wave-wrap .vgl-lettr{position:relative}.vgl-wave-wrap .vgl-lettr .vgl-lettr-inner{position:absolute;transition:all .15s ease-out;bottom:0}.vgl-wave-wrap .vgl-lettr.vgl-active .vgl-lettr-inner{bottom:20%}
2 | .vgl-rollup-wrap{position:relative;display:inline-block;vertical-align:top;overflow:hidden}.vgl-rollup-wrap .vgl-rollup-bold,.vgl-rollup-wrap .vgl-rollup-original{transition:all .3s;display:inline-block;position:absolute}.vgl-rollup-wrap .vgl-rollup-bold{font-weight:700}
3 | .vgl-slidein-wrap{position:relative;display:inline-block;vertical-align:top;overflow:hidden;white-space:nowrap}.vgl-slidein-wrap .vgl-slidein-bold,.vgl-slidein-wrap .vgl-slidein-original{transition:all .3s;display:inline-block;position:absolute}
4 | .vgl-ghost-wrap{position:relative;display:inline-block;vertical-align:top;white-space:nowrap}.vgl-ghost-wrap .vgl-ghost-bold,.vgl-ghost-wrap .vgl-ghost-original{transition:all .3s;display:inline-block;position:absolute}.vgl-ghost-wrap .vgl-ghost-original{opacity:.6}.vgl-ghost-wrap .vgl-ghost-bold{transform:scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);transition:transform .3s,opacity .3s;opacity:0}.vgl-ghost-wrap .vgl-ghost-bold.vgl-active{opacity:1;transform:scale(1) translateX(0) translateY(0) rotate(0deg)}
5 | .vgl-swing-wrap{position:relative;vertical-align:top;white-space:nowrap}.vgl-swing-wrap,.vgl-swing-wrap .vgl-swing-bold,.vgl-swing-wrap .vgl-swing-original{display:inline-block}.vgl-swing-wrap .vgl-swing-original{transform-origin:0 50%;transform-style:preserve-3d}.vgl-swing-wrap .vgl-swing-bold{position:absolute;transform:rotateX(270deg);transition:transform .6s;transform-origin:0 0;pointer-events:none;background-color:#000;color:#fff}.vgl-swing-wrap.vgl-active{perspective:800px}.vgl-swing-wrap.vgl-active .vgl-swing-bold{transform:rotateX(0deg)}
6 | .vgl-rotate-wrap{position:relative;display:inline-block;vertical-align:top;white-space:nowrap}.vgl-rotate-wrap .vgl-rotate-bold,.vgl-rotate-wrap .vgl-rotate-original{display:inline-block;position:absolute}.vgl-rotate-wrap .vgl-rotate-original{background:grey;transition:all .4s}.vgl-rotate-wrap .vgl-rotate-bold{transform:rotateY(-90deg);transition:all .4s;background-color:#000;color:#fff}.vgl-rotate-wrap.vgl-active{perspective:800px;transform-style:preserve-3d}.vgl-rotate-wrap.vgl-active .vgl-rotate-original{transform:rotateY(-90deg)}.vgl-rotate-wrap.vgl-active .vgl-rotate-bold{transform:rotateY(0deg)}
7 | /*# sourceMappingURL=vue-good-links.min.css.map */
--------------------------------------------------------------------------------
/dist/vue-good-links.min.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["dist/vgl-wave.vue.0.vue.component.scss","dist/vgl-rollup.vue.0.vue.component.scss","dist/vgl-slidein.vue.0.vue.component.scss","dist/vgl-ghost.vue.0.vue.component.scss","dist/vgl-swing.vue.0.vue.component.scss","dist/vgl-rotate.vue.0.vue.component.scss"],"names":[],"mappings":"AAEE,yCACE,iBAAmB,CAAE,AACrB,2CACE,kBAAmB,AACnB,6BAA+B,AAC/B,QAAU,CAAE,AACd,sDACE,UAAY,CAAE;ACTpB,iBACE,kBAAmB,AACnB,qBAAsB,AACtB,mBAAoB,AACpB,eAAiB,CAAE,AACnB,wEACE,mBAAqB,AACrB,qBAAsB,AACtB,iBAAmB,CAAE,AACvB,kCACE,eAAkB,CAAE;ACVxB,kBACE,kBAAmB,AACnB,qBAAsB,AACtB,mBAAoB,AACpB,gBAAiB,AACjB,kBAAoB,CAAE,AACtB,4EACE,mBAAqB,AACrB,qBAAsB,AACtB,iBAAmB,CAAE;ACTzB,gBACE,kBAAmB,AACnB,qBAAsB,AACtB,mBAAoB,AACpB,kBAAoB,CAAE,AACtB,oEACE,mBAAqB,AACrB,qBAAsB,AACtB,iBAAmB,CAAE,AACvB,oCACE,UAAa,CAAE,AACjB,gCACE,qEAAsE,AACtE,qCAAyC,AACzC,SAAW,CAAE,AACb,2CACE,UAAW,AACX,2DAAiE,CAAE;ACjBzE,gBACE,kBAAmB,AAEnB,mBAAoB,AACpB,kBAAoB,CAAE,AACtB,oFAHA,oBAAsB,CAII,AAC1B,oCACE,uBAAyB,AACzB,2BAA6B,CAAE,AACjC,gCACE,kBAAmB,AACnB,0BAA2B,AAC3B,yBAA2B,AAC3B,qBAAsB,AACtB,oBAAqB,AACrB,sBAAwB,AACxB,UAAa,CAAE,AACjB,2BACE,iBAAmB,CAAE,AACrB,2CACE,uBAAyB,CAAE;ACrBjC,iBACE,kBAAmB,AACnB,qBAAsB,AACtB,mBAAoB,AACpB,kBAAoB,CAAE,AACtB,wEACE,qBAAsB,AACtB,iBAAmB,CAAE,AACvB,sCACE,gBAAiB,AACjB,kBAAqB,CAAE,AACzB,kCACE,0BAA2B,AAC3B,mBAAqB,AACrB,sBAAwB,AACxB,UAAa,CAAE,AACjB,4BACE,kBAAmB,AACnB,2BAA6B,CAAE,AAC/B,iDACE,yBAA2B,CAAE,AAC/B,6CACE,uBAAyB,CAAE","file":"dist/vue-good-links.min.css","sourcesContent":[".vgl-wave-wrap {\n position: relative; }\n .vgl-wave-wrap .vgl-lettr {\n position: relative; }\n .vgl-wave-wrap .vgl-lettr .vgl-lettr-inner {\n position: absolute;\n transition: all 0.15s ease-out;\n bottom: 0; }\n .vgl-wave-wrap .vgl-lettr.vgl-active .vgl-lettr-inner {\n bottom: 20%; }\n",".vgl-rollup-wrap {\n position: relative;\n display: inline-block;\n vertical-align: top;\n overflow: hidden; }\n .vgl-rollup-wrap .vgl-rollup-original, .vgl-rollup-wrap .vgl-rollup-bold {\n transition: all 0.3s;\n display: inline-block;\n position: absolute; }\n .vgl-rollup-wrap .vgl-rollup-bold {\n font-weight: bold; }\n",".vgl-slidein-wrap {\n position: relative;\n display: inline-block;\n vertical-align: top;\n overflow: hidden;\n white-space: nowrap; }\n .vgl-slidein-wrap .vgl-slidein-original, .vgl-slidein-wrap .vgl-slidein-bold {\n transition: all 0.3s;\n display: inline-block;\n position: absolute; }\n",".vgl-ghost-wrap {\n position: relative;\n display: inline-block;\n vertical-align: top;\n white-space: nowrap; }\n .vgl-ghost-wrap .vgl-ghost-original, .vgl-ghost-wrap .vgl-ghost-bold {\n transition: all 0.3s;\n display: inline-block;\n position: absolute; }\n .vgl-ghost-wrap .vgl-ghost-original {\n opacity: 0.6; }\n .vgl-ghost-wrap .vgl-ghost-bold {\n transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);\n transition: transform 0.3s, opacity 0.3s;\n opacity: 0; }\n .vgl-ghost-wrap .vgl-ghost-bold.vgl-active {\n opacity: 1;\n transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); }\n",".vgl-swing-wrap {\n position: relative;\n display: inline-block;\n vertical-align: top;\n white-space: nowrap; }\n .vgl-swing-wrap .vgl-swing-original, .vgl-swing-wrap .vgl-swing-bold {\n display: inline-block; }\n .vgl-swing-wrap .vgl-swing-original {\n transform-origin: 0% 50%;\n transform-style: preserve-3d; }\n .vgl-swing-wrap .vgl-swing-bold {\n position: absolute;\n transform: rotateX(270deg);\n transition: transform 0.6s;\n transform-origin: 0 0;\n pointer-events: none;\n background-color: black;\n color: white; }\n .vgl-swing-wrap.vgl-active {\n perspective: 800px; }\n .vgl-swing-wrap.vgl-active .vgl-swing-bold {\n transform: rotateX(0deg); }\n",".vgl-rotate-wrap {\n position: relative;\n display: inline-block;\n vertical-align: top;\n white-space: nowrap; }\n .vgl-rotate-wrap .vgl-rotate-original, .vgl-rotate-wrap .vgl-rotate-bold {\n display: inline-block;\n position: absolute; }\n .vgl-rotate-wrap .vgl-rotate-original {\n background: grey;\n transition: all 0.4s; }\n .vgl-rotate-wrap .vgl-rotate-bold {\n transform: rotateY(-90deg);\n transition: all 0.4s;\n background-color: black;\n color: white; }\n .vgl-rotate-wrap.vgl-active {\n perspective: 800px;\n transform-style: preserve-3d; }\n .vgl-rotate-wrap.vgl-active .vgl-rotate-original {\n transform: rotateY(-90deg); }\n .vgl-rotate-wrap.vgl-active .vgl-rotate-bold {\n transform: rotateY(0deg); }\n"]}
--------------------------------------------------------------------------------
/dist/vue-good-links.min.js:
--------------------------------------------------------------------------------
1 | /**
2 | * vue-good-links v0.0.3
3 | * (c) 2018-present xaksis
4 | * https://github.com/xaksis/vue-good-links
5 | * Released under the MIT License.
6 | */
7 |
8 | !function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(t.vueGoodLinks={})}(this,function(t){"use strict";function n(t,n,e){return n in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e,t}var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},i="Expected a function",a=NaN,s="[object Symbol]",o=/^\s+|\s+$/g,r=/^[-+]0x[0-9a-f]+$/i,l=/^0b[01]+$/i,c=/^0o[0-7]+$/i,u=parseInt,p="object"==typeof e&&e&&e.Object===Object&&e,f="object"==typeof self&&self&&self.Object===Object&&self,v=p||f||Function("return this")(),d=Object.prototype.toString,g=Math.max,h=Math.min,m=function(){return v.Date.now()};function y(t){var n=typeof t;return!!t&&("object"==n||"function"==n)}function S(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return!!t&&"object"==typeof t}(t)&&d.call(t)==s}(t))return a;if(y(t)){var n="function"==typeof t.valueOf?t.valueOf():t;t=y(n)?n+"":n}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(o,"");var e=l.test(t);return e||c.test(t)?u(t.slice(2),e?2:8):r.test(t)?a:+t}var x,_=function(t,n,e){var a,s,o,r,l,c,u=0,p=!1,f=!1,v=!0;if("function"!=typeof t)throw new TypeError(i);function d(n){var e=a,i=s;return a=s=void 0,u=n,r=t.apply(i,e)}function x(t){var e=t-c;return void 0===c||e>=n||e<0||f&&t-u>=o}function _(){var t=m();if(x(t))return b(t);l=setTimeout(_,function(t){var e=n-(t-c);return f?h(e,o-(t-u)):e}(t))}function b(t){return l=void 0,v&&a?d(t):(a=s=void 0,r)}function O(){var t=m(),e=x(t);if(a=arguments,s=this,c=t,e){if(void 0===l)return function(t){return u=t,l=setTimeout(_,n),p?d(t):r}(c);if(f)return l=setTimeout(_,n),d(c)}return void 0===l&&(l=setTimeout(_,n)),r}return n=S(n)||0,y(e)&&(p=!!e.leading,o=(f="maxWait"in e)?g(S(e.maxWait)||0,n):o,v="trailing"in e?!!e.trailing:v),O.cancel=function(){void 0!==l&&clearTimeout(l),u=0,a=c=s=l=void 0},O.flush=function(){return void 0===l?r:b(m())},O},b={render:function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("span",t._g({staticClass:"vgl-wave-wrap",on:{mouseover:t.startAnimating,mouseleave:t.stopAnimating}},t.$listeners),t._l(t.letters,function(n,i){return e("span",{key:i,staticClass:"vgl-lettr",class:{"vgl-active":t.activeIndex===i}},[e("span",{staticClass:"vgl-lettr-inner"},[t._v(t._s(n))]),e("span",{staticStyle:{opacity:"0"}},[t._v(t._s(n))])])}))},staticRenderFns:[],name:"vgl-wave",props:{text:{type:String,default:"Sample Text"}},data:function(){return{activeIndex:-1,timeouts:[],intervals:[]}},computed:{letters:function(){return this.text?this.text.split(""):""}},methods:{startAnimating:_(function(){var t=this;if(!(this.activeIndex>-1))for(var n=function(n){t.timeouts.push(setTimeout(function(){t.activeIndex=n,t.intervals.push(setInterval(function(){t.activeIndex=n},150*t.letters.length))},150*n))},e=0;e \n * Build: `lodash modularize exports=\"npm\" -o ./`\n * Copyright jQuery Foundation and other contributors \n * Released under MIT license \n * Based on Underscore.js 1.8.3 \n * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors\n */\n\n/** Used as the `TypeError` message for \"Functions\" methods. */\nvar FUNC_ERROR_TEXT = 'Expected a function';\n\n/** Used as references for various `Number` constants. */\nvar NAN = 0 / 0;\n\n/** `Object#toString` result references. */\nvar symbolTag = '[object Symbol]';\n\n/** Used to match leading and trailing whitespace. */\nvar reTrim = /^\\s+|\\s+$/g;\n\n/** Used to detect bad signed hexadecimal string values. */\nvar reIsBadHex = /^[-+]0x[0-9a-f]+$/i;\n\n/** Used to detect binary string values. */\nvar reIsBinary = /^0b[01]+$/i;\n\n/** Used to detect octal string values. */\nvar reIsOctal = /^0o[0-7]+$/i;\n\n/** Built-in method references without a dependency on `root`. */\nvar freeParseInt = parseInt;\n\n/** Detect free variable `global` from Node.js. */\nvar freeGlobal = typeof global == 'object' && global && global.Object === Object && global;\n\n/** Detect free variable `self`. */\nvar freeSelf = typeof self == 'object' && self && self.Object === Object && self;\n\n/** Used as a reference to the global object. */\nvar root = freeGlobal || freeSelf || Function('return this')();\n\n/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/**\n * Used to resolve the\n * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)\n * of values.\n */\nvar objectToString = objectProto.toString;\n\n/* Built-in method references for those with the same name as other `lodash` methods. */\nvar nativeMax = Math.max,\n nativeMin = Math.min;\n\n/**\n * Gets the timestamp of the number of milliseconds that have elapsed since\n * the Unix epoch (1 January 1970 00:00:00 UTC).\n *\n * @static\n * @memberOf _\n * @since 2.4.0\n * @category Date\n * @returns {number} Returns the timestamp.\n * @example\n *\n * _.defer(function(stamp) {\n * console.log(_.now() - stamp);\n * }, _.now());\n * // => Logs the number of milliseconds it took for the deferred invocation.\n */\nvar now = function() {\n return root.Date.now();\n};\n\n/**\n * Creates a debounced function that delays invoking `func` until after `wait`\n * milliseconds have elapsed since the last time the debounced function was\n * invoked. The debounced function comes with a `cancel` method to cancel\n * delayed `func` invocations and a `flush` method to immediately invoke them.\n * Provide `options` to indicate whether `func` should be invoked on the\n * leading and/or trailing edge of the `wait` timeout. The `func` is invoked\n * with the last arguments provided to the debounced function. Subsequent\n * calls to the debounced function return the result of the last `func`\n * invocation.\n *\n * **Note:** If `leading` and `trailing` options are `true`, `func` is\n * invoked on the trailing edge of the timeout only if the debounced function\n * is invoked more than once during the `wait` timeout.\n *\n * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred\n * until to the next tick, similar to `setTimeout` with a timeout of `0`.\n *\n * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)\n * for details over the differences between `_.debounce` and `_.throttle`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Function\n * @param {Function} func The function to debounce.\n * @param {number} [wait=0] The number of milliseconds to delay.\n * @param {Object} [options={}] The options object.\n * @param {boolean} [options.leading=false]\n * Specify invoking on the leading edge of the timeout.\n * @param {number} [options.maxWait]\n * The maximum time `func` is allowed to be delayed before it's invoked.\n * @param {boolean} [options.trailing=true]\n * Specify invoking on the trailing edge of the timeout.\n * @returns {Function} Returns the new debounced function.\n * @example\n *\n * // Avoid costly calculations while the window size is in flux.\n * jQuery(window).on('resize', _.debounce(calculateLayout, 150));\n *\n * // Invoke `sendMail` when clicked, debouncing subsequent calls.\n * jQuery(element).on('click', _.debounce(sendMail, 300, {\n * 'leading': true,\n * 'trailing': false\n * }));\n *\n * // Ensure `batchLog` is invoked once after 1 second of debounced calls.\n * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });\n * var source = new EventSource('/stream');\n * jQuery(source).on('message', debounced);\n *\n * // Cancel the trailing debounced invocation.\n * jQuery(window).on('popstate', debounced.cancel);\n */\nfunction debounce(func, wait, options) {\n var lastArgs,\n lastThis,\n maxWait,\n result,\n timerId,\n lastCallTime,\n lastInvokeTime = 0,\n leading = false,\n maxing = false,\n trailing = true;\n\n if (typeof func != 'function') {\n throw new TypeError(FUNC_ERROR_TEXT);\n }\n wait = toNumber(wait) || 0;\n if (isObject(options)) {\n leading = !!options.leading;\n maxing = 'maxWait' in options;\n maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;\n trailing = 'trailing' in options ? !!options.trailing : trailing;\n }\n\n function invokeFunc(time) {\n var args = lastArgs,\n thisArg = lastThis;\n\n lastArgs = lastThis = undefined;\n lastInvokeTime = time;\n result = func.apply(thisArg, args);\n return result;\n }\n\n function leadingEdge(time) {\n // Reset any `maxWait` timer.\n lastInvokeTime = time;\n // Start the timer for the trailing edge.\n timerId = setTimeout(timerExpired, wait);\n // Invoke the leading edge.\n return leading ? invokeFunc(time) : result;\n }\n\n function remainingWait(time) {\n var timeSinceLastCall = time - lastCallTime,\n timeSinceLastInvoke = time - lastInvokeTime,\n result = wait - timeSinceLastCall;\n\n return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result;\n }\n\n function shouldInvoke(time) {\n var timeSinceLastCall = time - lastCallTime,\n timeSinceLastInvoke = time - lastInvokeTime;\n\n // Either this is the first call, activity has stopped and we're at the\n // trailing edge, the system time has gone backwards and we're treating\n // it as the trailing edge, or we've hit the `maxWait` limit.\n return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||\n (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));\n }\n\n function timerExpired() {\n var time = now();\n if (shouldInvoke(time)) {\n return trailingEdge(time);\n }\n // Restart the timer.\n timerId = setTimeout(timerExpired, remainingWait(time));\n }\n\n function trailingEdge(time) {\n timerId = undefined;\n\n // Only invoke if we have `lastArgs` which means `func` has been\n // debounced at least once.\n if (trailing && lastArgs) {\n return invokeFunc(time);\n }\n lastArgs = lastThis = undefined;\n return result;\n }\n\n function cancel() {\n if (timerId !== undefined) {\n clearTimeout(timerId);\n }\n lastInvokeTime = 0;\n lastArgs = lastCallTime = lastThis = timerId = undefined;\n }\n\n function flush() {\n return timerId === undefined ? result : trailingEdge(now());\n }\n\n function debounced() {\n var time = now(),\n isInvoking = shouldInvoke(time);\n\n lastArgs = arguments;\n lastThis = this;\n lastCallTime = time;\n\n if (isInvoking) {\n if (timerId === undefined) {\n return leadingEdge(lastCallTime);\n }\n if (maxing) {\n // Handle invocations in a tight loop.\n timerId = setTimeout(timerExpired, wait);\n return invokeFunc(lastCallTime);\n }\n }\n if (timerId === undefined) {\n timerId = setTimeout(timerExpired, wait);\n }\n return result;\n }\n debounced.cancel = cancel;\n debounced.flush = flush;\n return debounced;\n}\n\n/**\n * Checks if `value` is the\n * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)\n * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an object, else `false`.\n * @example\n *\n * _.isObject({});\n * // => true\n *\n * _.isObject([1, 2, 3]);\n * // => true\n *\n * _.isObject(_.noop);\n * // => true\n *\n * _.isObject(null);\n * // => false\n */\nfunction isObject(value) {\n var type = typeof value;\n return !!value && (type == 'object' || type == 'function');\n}\n\n/**\n * Checks if `value` is object-like. A value is object-like if it's not `null`\n * and has a `typeof` result of \"object\".\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is object-like, else `false`.\n * @example\n *\n * _.isObjectLike({});\n * // => true\n *\n * _.isObjectLike([1, 2, 3]);\n * // => true\n *\n * _.isObjectLike(_.noop);\n * // => false\n *\n * _.isObjectLike(null);\n * // => false\n */\nfunction isObjectLike(value) {\n return !!value && typeof value == 'object';\n}\n\n/**\n * Checks if `value` is classified as a `Symbol` primitive or object.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.\n * @example\n *\n * _.isSymbol(Symbol.iterator);\n * // => true\n *\n * _.isSymbol('abc');\n * // => false\n */\nfunction isSymbol(value) {\n return typeof value == 'symbol' ||\n (isObjectLike(value) && objectToString.call(value) == symbolTag);\n}\n\n/**\n * Converts `value` to a number.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to process.\n * @returns {number} Returns the number.\n * @example\n *\n * _.toNumber(3.2);\n * // => 3.2\n *\n * _.toNumber(Number.MIN_VALUE);\n * // => 5e-324\n *\n * _.toNumber(Infinity);\n * // => Infinity\n *\n * _.toNumber('3.2');\n * // => 3.2\n */\nfunction toNumber(value) {\n if (typeof value == 'number') {\n return value;\n }\n if (isSymbol(value)) {\n return NAN;\n }\n if (isObject(value)) {\n var other = typeof value.valueOf == 'function' ? value.valueOf() : value;\n value = isObject(other) ? (other + '') : other;\n }\n if (typeof value != 'string') {\n return value === 0 ? value : +value;\n }\n value = value.replace(reTrim, '');\n var isBinary = reIsBinary.test(value);\n return (isBinary || reIsOctal.test(value))\n ? freeParseInt(value.slice(2), isBinary ? 2 : 8)\n : (reIsBadHex.test(value) ? NAN : +value);\n}\n\nmodule.exports = debounce;\n","\n\n {{l}} {{l}} \n \n \n\n\n\n\n","\n\n {{text}} \n {{text}} \n {{text}} \n \n \n\n\n\n\n","\n\n {{text}} \n {{text}} \n {{text}} \n \n \n\n\n\n\n","\n\n {{text}} \n {{text}} \n {{text}} \n \n \n\n\n\n\n","\n\n {{text}} \n {{text}} \n \n \n\n\n\n\n","\n\n {{text}} \n {{text}} \n {{text}} \n \n \n\n\n\n\n","import VglWave from './vgl-wave/vgl-wave.vue';\nimport VglRollup from './vgl-rollup/vgl-rollup.vue';\nimport VglSlidein from './vgl-slidein/vgl-slidein.vue';\nimport VglGhost from './vgl-ghost/vgl-ghost.vue';\nimport VglSwing from './vgl-swing/vgl-swing.vue';\nimport VglRotate from './vgl-rotate/vgl-rotate.vue';\n\nconst components = {\n [VglWave.name]: VglWave,\n [VglRollup.name]: VglRollup,\n [VglSlidein.name]: VglSlidein,\n [VglGhost.name]: VglGhost,\n [VglSwing.name]: VglSwing,\n [VglRotate.name]: VglRotate,\n};\n\nfunction install(Vue, options) {\n if (options && options.components) {\n options.components.forEach(c => Vue.component(c.name, components[c.name]));\n } else {\n Object.keys(components).forEach((key) => {\n Vue.component(key, components[key]);\n });\n }\n}\n\n// Automatic installation if Vue has been added to the global scope.\nif (typeof window !== 'undefined' && window.Vue) {\n window.Vue.use({ install });\n}\n\nexport default { install };\n\nexport {\n VglWave,\n VglRollup,\n VglSlidein,\n VglGhost,\n VglSwing,\n VglRotate,\n};\n\n"],"names":["FUNC_ERROR_TEXT","NAN","symbolTag","reTrim","reIsBadHex","reIsBinary","reIsOctal","freeParseInt","parseInt","freeGlobal","global","Object","freeSelf","self","root","Function","objectToString","prototype","toString","nativeMax","Math","max","nativeMin","min","now","Date","isObject","value","type","toNumber","isObjectLike","call","isSymbol","other","valueOf","replace","isBinary","test","slice","func","wait","options","lastArgs","lastThis","maxWait","result","timerId","lastCallTime","lastInvokeTime","leading","maxing","trailing","TypeError","invokeFunc","time","args","thisArg","undefined","apply","shouldInvoke","timeSinceLastCall","timerExpired","trailingEdge","setTimeout","remainingWait","debounced","isInvoking","arguments","this","leadingEdge","cancel","clearTimeout","flush","String","text","split","debounce","activeIndex","i","timeouts","push","intervals","setInterval","_this","letters","length","originalSpanStyle","active","spanHeight","hoverSpanStyle","originalSpan","$refs","originalText","spanStyle","window","getComputedStyle","lineHeight","init","spanWidth","mainText","offsetWidth","horizontalPadding","components","VglWave","name","VglRollup","VglSlidein","VglGhost","VglSwing","VglRotate","install","Vue","forEach","component","c","keys","key","use"],"mappings":";;;;;;;kaAUIA,EAAkB,sBAGlBC,EAAM,IAGNC,EAAY,kBAGZC,EAAS,aAGTC,EAAa,qBAGbC,EAAa,aAGbC,EAAY,cAGZC,EAAeC,SAGfC,EAA8B,iBAAVC,GAAsBA,GAAUA,EAAOC,SAAWA,QAAUD,EAGhFE,EAA0B,iBAARC,MAAoBA,MAAQA,KAAKF,SAAWA,QAAUE,KAGxEC,EAAOL,GAAcG,GAAYG,SAAS,cAATA,GAUjCC,EAPcL,OAAOM,UAOQC,SAG7BC,EAAYC,KAAKC,IACjBC,EAAYF,KAAKG,IAkBjBC,EAAM,WACR,OAAOV,EAAKW,KAAKD,OA4MnB,SAASE,EAASC,GAChB,IAAIC,SAAcD,EAClB,QAASA,IAAkB,UAARC,GAA4B,YAARA,GA4EzC,SAASC,EAASF,GAChB,GAAoB,iBAATA,EACT,OAAOA,EAET,GAhCF,SAAkBA,GAChB,MAAuB,iBAATA,GAtBhB,SAAsBA,GACpB,QAASA,GAAyB,iBAATA,EAsBtBG,CAAaH,IAAUX,EAAee,KAAKJ,IAAUzB,EA8BpD8B,CAASL,GACX,OAAO1B,EAET,GAAIyB,EAASC,GAAQ,CACnB,IAAIM,EAAgC,mBAAjBN,EAAMO,QAAwBP,EAAMO,UAAYP,EACnEA,EAAQD,EAASO,GAAUA,EAAQ,GAAMA,EAE3C,GAAoB,iBAATN,EACT,OAAiB,IAAVA,EAAcA,GAASA,EAEhCA,EAAQA,EAAMQ,QAAQhC,EAAQ,IAC9B,IAAIiC,EAAW/B,EAAWgC,KAAKV,GAC/B,OAAQS,GAAY9B,EAAU+B,KAAKV,GAC/BpB,EAAaoB,EAAMW,MAAM,GAAIF,EAAW,EAAI,GAC3ChC,EAAWiC,KAAKV,GAAS1B,GAAO0B,EAGvC,QAtPA,SAAkBY,EAAMC,EAAMC,GAC5B,IAAIC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EAAiB,EACjBC,GAAU,EACVC,GAAS,EACTC,GAAW,EAEf,GAAmB,mBAARZ,EACT,MAAM,IAAIa,UAAUpD,GAUtB,SAASqD,EAAWC,GAClB,IAAIC,EAAOb,EACPc,EAAUb,EAKd,OAHAD,EAAWC,OAAWc,EACtBT,EAAiBM,EACjBT,EAASN,EAAKmB,MAAMF,EAASD,GAqB/B,SAASI,EAAaL,GACpB,IAAIM,EAAoBN,EAAOP,EAM/B,YAAyBU,IAAjBV,GAA+Ba,GAAqBpB,GACzDoB,EAAoB,GAAOV,GANJI,EAAON,GAM8BJ,EAGjE,SAASiB,IACP,IAAIP,EAAO9B,IACX,GAAImC,EAAaL,GACf,OAAOQ,EAAaR,GAGtBR,EAAUiB,WAAWF,EAzBvB,SAAuBP,GACrB,IAEIT,EAASL,GAFWc,EAAOP,GAI/B,OAAOG,EAAS5B,EAAUuB,EAAQD,GAHRU,EAAON,IAGkCH,EAoBhCmB,CAAcV,IAGnD,SAASQ,EAAaR,GAKpB,OAJAR,OAAUW,EAINN,GAAYT,EACPW,EAAWC,IAEpBZ,EAAWC,OAAWc,EACfZ,GAeT,SAASoB,IACP,IAAIX,EAAO9B,IACP0C,EAAaP,EAAaL,GAM9B,GAJAZ,EAAWyB,UACXxB,EAAWyB,KACXrB,EAAeO,EAEXY,EAAY,CACd,QAAgBT,IAAZX,EACF,OAvEN,SAAqBQ,GAMnB,OAJAN,EAAiBM,EAEjBR,EAAUiB,WAAWF,EAAcrB,GAE5BS,EAAUI,EAAWC,GAAQT,EAiEzBwB,CAAYtB,GAErB,GAAIG,EAGF,OADAJ,EAAUiB,WAAWF,EAAcrB,GAC5Ba,EAAWN,GAMtB,YAHgBU,IAAZX,IACFA,EAAUiB,WAAWF,EAAcrB,IAE9BK,EAIT,OAxGAL,EAAOX,EAASW,IAAS,EACrBd,EAASe,KACXQ,IAAYR,EAAQQ,QAEpBL,GADAM,EAAS,YAAaT,GACHtB,EAAUU,EAASY,EAAQG,UAAY,EAAGJ,GAAQI,EACrEO,EAAW,aAAcV,IAAYA,EAAQU,SAAWA,GAiG1Dc,EAAUK,OAnCV,gBACkBb,IAAZX,GACFyB,aAAazB,GAEfE,EAAiB,EACjBN,EAAWK,EAAeJ,EAAWG,OAAUW,GA+BjDQ,EAAUO,MA5BV,WACE,YAAmBf,IAAZX,EAAwBD,EAASiB,EAAatC,MA4BhDyC,qcCvOD,6BAGIQ,eACG,oDAKK,iEAOPL,KAAKM,KAAON,KAAKM,KAAKC,MAAM,IAAM,6BAI3BC,EAAS,2BAGnBR,KAAKS,aAAe,sBAEfC,KACFC,SAASC,KAAKjB,WAAW,aAEvBc,YAAcC,IAGdG,UAAUD,KAAKE,YAAY,aACzBL,YAAcC,GAXX,IAYPK,EAAKC,QAAQC,UAZN,IAaTP,KATIA,EAAI,EAAGA,EAAIV,KAAKgB,QAAQC,OAAQP,MAAhCA,IAWR,mBAEYF,EAAS,eACjB,IAAIE,EAAI,EAAGA,EAAIV,KAAKW,SAASM,OAAQP,iBAC3BV,KAAKW,SAASD,kBACbV,KAAKa,UAAUH,SAE1BC,iBACAE,kBACAJ,aAAe,GACnB,4lBC3CC,+BAGIJ,eACG,oCAGH9D,eAEG,8CAMHA,eAEG,sDAQD,aACI,2EAMPyD,KAAKkB,uBACHlB,KAAKmB,kBAAanB,KAAKoB,YAAe,8DAKxCpB,KAAKqB,oBACHrB,KAAKmB,OAAS,YAAOnB,KAAKoB,wCAKnBZ,EAAS,gBAClBW,QAAS,GACb,mBAEYX,EAAS,gBACjBW,QAAS,GACb,yBAGKG,EAAetB,KAAKuB,MAAMC,aAC1BC,EAAYC,OAAOC,iBAAiBL,EAAc,WAEnDF,WAAaK,EAAUG,qCAMzBC,okBC7DD,gCAGIxB,eACG,oCAGH9D,eAEG,8CAMHA,eAEG,sDAQD,YACG,iFAMA,WACNyD,KAAKkB,wBACFlB,KAAKmB,iBAAYnB,KAAK8B,WAAc,4EAKzB,cACV,gBACE,WACN9B,KAAKqB,qBACFrB,KAAKmB,OAAS,aAAQnB,KAAK8B,uCAKrBtB,EAAS,gBAClBW,QAAS,GACb,mBAEYX,EAAS,gBACjBW,QAAS,GACb,yBAIKG,EAAetB,KAAKuB,MAAMQ,cAC3BD,oBAAeR,EAAaU,4CAI9BH,ihBChED,8BAGIxB,eACG,oCAGH9D,eAEG,8CAMHA,eAEG,sDAQD,YACG,wCAMGiE,EAAS,gBAClBW,QAAS,GACb,mBAEYX,EAAS,gBACjBW,QAAS,GACb,yBAIKG,EAAetB,KAAKuB,MAAMC,kBAE3BM,oBAAeR,EAAaU,YAAeC,mfC9C9C,8BAGI5B,eACG,oCAGH9D,eAEG,8CAMHA,eAEG,sDAQD,YACG,iFAMA,WACNyD,KAAKkB,wBACFlB,KAAKmB,iBAAYnB,KAAK8B,WAAc,oEAKjC,WACN9B,KAAKqB,qBACFrB,KAAKmB,OAAS,aAAQnB,KAAK8B,uCAKrBtB,EAAS,gBAClBW,QAAS,GACb,mBAEYX,EAAS,gBACjBW,QAAS,GACb,yBAIKG,EAAetB,KAAKuB,MAAMC,kBAE3BM,oBAAeR,EAAaU,YAAeC,4mBCtD9C,+BAGI5B,eACG,oCAGH9D,eAEG,8CAMHA,eAEG,sDAQD,YACG,iFAMA,WACNyD,KAAKkB,sDACqBlB,KAAK8B,6EAKzB,WACN9B,KAAKqB,kDACoBrB,KAAK8B,uCAKrBtB,EAAS,gBAClBW,QAAS,GACb,mBAEYX,EAAS,gBACjBW,QAAS,GACb,yBAIKG,EAAetB,KAAKuB,MAAMC,kBAE3BM,oBAAgBR,EAAaU,YAAe,kCAI9CH,uBC9EHK,UACHC,EAAQC,KAAOD,OACfE,EAAUD,KAAOC,OACjBC,EAAWF,KAAOE,OAClBC,EAASH,KAAOG,OAChBC,EAASJ,KAAOI,OAChBC,EAAUL,KAAOK,MAGpB,SAASC,EAAQC,EAAKtE,GAChBA,GAAWA,EAAQ6D,aACbA,WAAWU,QAAQ,mBAAKD,EAAIE,UAAUC,EAAEV,KAAMF,EAAWY,EAAEV,gBAE5DW,KAAKb,GAAYU,QAAQ,SAACI,KAC3BH,UAAUG,EAAKd,EAAWc,MAMd,oBAAXtB,QAA0BA,OAAOiB,YACnCA,IAAIM"}
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 | vue-good-links
--------------------------------------------------------------------------------
/docs/main.1218fcc6.js:
--------------------------------------------------------------------------------
1 | !function(t){function e(e){for(var a,s,o=e[0],l=e[1],c=e[2],v=0,p=[];v-1))for(var e=function(e){t.timeouts.push(setTimeout(function(){t.activeIndex=e,t.intervals.push(setInterval(function(){t.activeIndex=e},150*t.letters.length))},150*e))},n=0;n')])])},function(){var t=this.$createElement,e=this._self._c||t;return e("pre",[e("code",{staticClass:"language-markup"},[this._v(' ')])])},function(){var t=this.$createElement,e=this._self._c||t;return e("pre",[e("code",{staticClass:"language-markup"},[this._v(' ')])])},function(){var t=this.$createElement,e=this._self._c||t;return e("pre",[e("code",{staticClass:"language-markup"},[this._v(' ')])])},function(){var t=this.$createElement,e=this._self._c||t;return e("pre",[e("code",{staticClass:"language-markup"},[this._v(' ')])])},function(){var t=this.$createElement,e=this._self._c||t;return e("pre",[e("code",{staticClass:"language-markup"},[this._v(' ')])])},function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"container"},[n("div",{staticClass:"vgl-footer"},[n("div",{staticClass:"center text-muted"},[t._v("A project by "),n("a",{attrs:{href:"https://github.com/xaksis"}},[t._v("xaksis")])]),t._v(" "),n("div",{staticClass:"center space-top"},[n("span",{staticClass:"text-muted"},[t._v("you may also like")]),t._v(" "),n("br"),t._v(" "),n("a",{attrs:{href:"https://github.com/xaksis/vue-good-table"}},[t._v("vue-good-table")]),t._v("\n & \n "),n("a",{attrs:{href:"https://github.com/xaksis/vue-good-wizard"}},[t._v("vue-good-wizard")])])])])}],!1,null,null,null).exports);a.a.use(E),a.a.config.productionTip=!1,new a.a({el:"#app",render:function(t){return t($)}})},,,function(t,e,n){"use strict";var a=n(3);n.n(a).a},,,,,,function(t,e,n){"use strict";var a=n(5);n.n(a).a},,function(t,e,n){"use strict";var a=n(6);n.n(a).a},,function(t,e,n){"use strict";var a=n(7);n.n(a).a},,function(t,e,n){"use strict";var a=n(8);n.n(a).a},,function(t,e,n){"use strict";var a=n(9);n.n(a).a},,function(t,e,n){"use strict";var a=n(10);n.n(a).a},,,,function(t,e,n){t.exports=n(12)}]);
2 | //# sourceMappingURL=main.1218fcc6.js.map
--------------------------------------------------------------------------------
/docs/main.889cb514.css:
--------------------------------------------------------------------------------
1 | @import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic);.vgl-wave-wrap,.vgl-wave-wrap .vgl-lettr{position:relative}.vgl-wave-wrap .vgl-lettr .vgl-lettr-inner{position:absolute;transition:all .15s ease-out;bottom:0}.vgl-wave-wrap .vgl-lettr.vgl-active .vgl-lettr-inner{bottom:20%}.vgl-rollup-wrap{position:relative;display:inline-block;vertical-align:top;overflow:hidden}.vgl-rollup-wrap .vgl-rollup-bold,.vgl-rollup-wrap .vgl-rollup-original{transition:all .3s;display:inline-block;position:absolute}.vgl-rollup-wrap .vgl-rollup-bold{font-weight:700}.vgl-slidein-wrap{position:relative;display:inline-block;vertical-align:top;overflow:hidden;white-space:nowrap}.vgl-slidein-wrap .vgl-slidein-bold,.vgl-slidein-wrap .vgl-slidein-original{transition:all .3s;display:inline-block;position:absolute}.vgl-ghost-wrap{position:relative;display:inline-block;vertical-align:top;white-space:nowrap}.vgl-ghost-wrap .vgl-ghost-bold,.vgl-ghost-wrap .vgl-ghost-original{transition:all .3s;display:inline-block;position:absolute}.vgl-ghost-wrap .vgl-ghost-original{opacity:.6}.vgl-ghost-wrap .vgl-ghost-bold{transform:scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);transition:transform .3s,opacity .3s;opacity:0}.vgl-ghost-wrap .vgl-ghost-bold.vgl-active{opacity:1;transform:scale(1) translateX(0) translateY(0) rotate(0deg)}.vgl-swing-wrap{position:relative;vertical-align:top;white-space:nowrap}.vgl-swing-wrap,.vgl-swing-wrap .vgl-swing-bold,.vgl-swing-wrap .vgl-swing-original{display:inline-block}.vgl-swing-wrap .vgl-swing-original{transform-origin:0 50%;transform-style:preserve-3d}.vgl-swing-wrap .vgl-swing-bold{position:absolute;transform:rotateX(270deg);transition:transform .6s;transform-origin:0 0;pointer-events:none;background-color:#000;color:#fff}.vgl-swing-wrap.vgl-active{perspective:800px}.vgl-swing-wrap.vgl-active .vgl-swing-bold{transform:rotateX(0deg)}.vgl-rotate-wrap{position:relative;display:inline-block;vertical-align:top;white-space:nowrap}.vgl-rotate-wrap .vgl-rotate-bold,.vgl-rotate-wrap .vgl-rotate-original{display:inline-block;position:absolute}.vgl-rotate-wrap .vgl-rotate-original{background:grey;transition:all .4s}.vgl-rotate-wrap .vgl-rotate-bold{transform:rotateY(-90deg);transition:all .4s;background-color:#000;color:#fff}.vgl-rotate-wrap.vgl-active{perspective:800px;transform-style:preserve-3d}.vgl-rotate-wrap.vgl-active .vgl-rotate-original{transform:rotateY(-90deg)}.vgl-rotate-wrap.vgl-active .vgl-rotate-bold{transform:rotateY(0deg)}body,html{height:100%;width:100%;margin:0;padding:0;left:0;top:0;font-size:100%}*{font-family:Lato,Helvetica,sans-serif;color:#333447;line-height:1.5}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.375rem}h4{font-size:1.125rem}h5{font-size:1rem}h6{font-size:.875rem}p{font-size:1.125rem;font-weight:200}.font-light{font-weight:300}.font-regular{font-weight:400}.font-heavy{font-weight:700}.left{text-align:left}.right{text-align:right}.center{text-align:center;margin-left:auto;margin-right:auto}.justify{text-align:justify}.hidden-sm{display:none}.container{width:90%;margin-left:auto;margin-right:auto}@media only screen and (min-width:33.75em){.container{width:80%}}@media only screen and (min-width:60em){.container{width:75%;max-width:60rem}}.row{position:relative;width:100%}.row [class^=col]{float:left;margin:.5rem 2%;min-height:.125rem}.row:after{content:"";display:table;clear:both}.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{width:96%}.col-1-sm{width:4.33333%}.col-2-sm{width:12.66667%}.col-3-sm{width:21%}.col-4-sm{width:29.33333%}.col-5-sm{width:37.66667%}.col-6-sm{width:46%}.col-7-sm{width:54.33333%}.col-8-sm{width:62.66667%}.col-9-sm{width:71%}.col-10-sm{width:79.33333%}.col-11-sm{width:87.66667%}.col-12-sm{width:96%}@media only screen and (min-width:45em){.col-1{width:4.33333%}.col-2{width:12.66667%}.col-3{width:21%}.col-4{width:29.33333%}.col-5{width:37.66667%}.col-6{width:46%}.col-7{width:54.33333%}.col-8{width:62.66667%}.col-9{width:71%}.col-10{width:79.33333%}.col-11{width:87.66667%}.col-12{width:96%}.hidden-sm{display:block}}*{color:#636366}a{line-height:inherit}a,a *{color:#3fa46a}section{margin-bottom:30px}.title{text-align:center;text-transform:uppercase}.text-muted{opacity:.7}.vgl-footer{margin:100px 0 50px;border-radius:10px;padding:20px;background:#f1f1f4}.space-top{margin-top:20px}.github-corner:hover .octo-arm{animation:octocat-wave .56s ease-in-out}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave .56s ease-in-out}}
--------------------------------------------------------------------------------
/docs/vendors~main.e734ecf8.css:
--------------------------------------------------------------------------------
1 | code[class*=language-],pre[class*=language-]{color:#000;background:none;text-shadow:0 1px #fff;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-]::selection,pre[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-good-links",
3 | "version": "0.0.3",
4 | "description": "An easy to use link/text hover effect library for VueJS",
5 | "main": "dist/vue-good-links.cjs.js",
6 | "module": "dist/vue-good-links.es.js",
7 | "files": [
8 | "dist",
9 | "src"
10 | ],
11 | "scripts": {
12 | "bundle": "bili",
13 | "dev": "poi",
14 | "dev-build": "poi build",
15 | "test": "echo \"Error: no test specified\" && exit 1"
16 | },
17 | "repository": {
18 | "type": "git",
19 | "url": "git+https://github.com/xaksis/vue-good-links"
20 | },
21 | "keywords": [
22 | "vue",
23 | "vuejs",
24 | "links",
25 | "fancy"
26 | ],
27 | "author": {
28 | "name": "xaksis",
29 | "email": "shay@crayonbits.com"
30 | },
31 | "poi": {
32 | "entry": "dev/main.js",
33 | "outDir": "docs",
34 | "homepage": "./",
35 | "publicPath": "./",
36 | "html": {
37 | "template": "dev/index.html"
38 | }
39 | },
40 | "license": "MIT",
41 | "dependencies": {
42 | "lodash.debounce": "^4.0.8"
43 | },
44 | "devDependencies": {
45 | "bili": "^3.1.2",
46 | "node-sass": "^4.9.0",
47 | "poi": "^10.2.1",
48 | "prismjs": "^1.14.0",
49 | "rollup-plugin-vue": "^3.0.0",
50 | "sass-loader": "^7.0.1"
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import VglWave from './vgl-wave/vgl-wave.vue';
2 | import VglRollup from './vgl-rollup/vgl-rollup.vue';
3 | import VglSlidein from './vgl-slidein/vgl-slidein.vue';
4 | import VglGhost from './vgl-ghost/vgl-ghost.vue';
5 | import VglSwing from './vgl-swing/vgl-swing.vue';
6 | import VglRotate from './vgl-rotate/vgl-rotate.vue';
7 |
8 | const components = {
9 | [VglWave.name]: VglWave,
10 | [VglRollup.name]: VglRollup,
11 | [VglSlidein.name]: VglSlidein,
12 | [VglGhost.name]: VglGhost,
13 | [VglSwing.name]: VglSwing,
14 | [VglRotate.name]: VglRotate,
15 | };
16 |
17 | function install(Vue, options) {
18 | if (options && options.components) {
19 | options.components.forEach(c => Vue.component(c.name, components[c.name]));
20 | } else {
21 | Object.keys(components).forEach((key) => {
22 | Vue.component(key, components[key]);
23 | });
24 | }
25 | }
26 |
27 | // Automatic installation if Vue has been added to the global scope.
28 | if (typeof window !== 'undefined' && window.Vue) {
29 | window.Vue.use({ install });
30 | }
31 |
32 | export default { install };
33 |
34 | export {
35 | VglWave,
36 | VglRollup,
37 | VglSlidein,
38 | VglGhost,
39 | VglSwing,
40 | VglRotate,
41 | };
42 |
43 |
--------------------------------------------------------------------------------
/src/vgl-ghost/vgl-ghost.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 | {{text}}
9 | {{text}}
12 | {{text}}
15 |
16 |
17 |
18 |
75 |
76 |
102 |
--------------------------------------------------------------------------------
/src/vgl-rollup/vgl-rollup.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 | {{text}}
9 | {{text}}
12 | {{text}}
15 |
16 |
17 |
18 |
90 |
91 |
108 |
--------------------------------------------------------------------------------
/src/vgl-rotate/vgl-rotate.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 | {{text}}
10 | {{text}}
13 | {{text}}
17 |
18 |
19 |
20 |
92 |
93 |
126 |
--------------------------------------------------------------------------------
/src/vgl-slidein/vgl-slidein.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 | {{text}}
10 | {{text}}
13 | {{text}}
16 |
17 |
18 |
19 |
92 |
93 |
111 |
--------------------------------------------------------------------------------
/src/vgl-swing/vgl-swing.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 | {{text}}
10 | {{text}}
13 |
14 |
15 |
16 |
87 |
88 |
119 |
--------------------------------------------------------------------------------
/src/vgl-wave/vgl-wave.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 | {{l}} {{l}}
12 |
13 |
14 |
15 |
73 |
74 |
93 |
--------------------------------------------------------------------------------