Skip to content

Commit b62f1fb

Browse files
rogeralbinoirogeralbinoi
committedJan 14, 2019
first commit
·
v0.1.200.1.7
0 parents  commit b62f1fb

23 files changed

+11353
-0
lines changed
 

‎.gitignore

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.DS_Store
2+
node_modules
3+
4+
# local env files
5+
.env.local
6+
.env.*.local
7+
8+
# Log files
9+
npm-debug.log*
10+
yarn-debug.log*
11+
yarn-error.log*
12+
13+
# Editor directories and files
14+
.idea
15+
.vscode
16+
*.suo
17+
*.ntvs*
18+
*.njsproj
19+
*.sln
20+
*.sw*

‎README.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# lazyload-vue
2+
3+
## Project setup
4+
```
5+
yarn install
6+
```
7+
8+
### Compiles and hot-reloads for development
9+
```
10+
yarn run serve
11+
```
12+
13+
### Compiles and minifies for production
14+
```
15+
yarn run build
16+
```
17+
18+
### Run your tests
19+
```
20+
yarn run test
21+
```
22+
23+
### Lints and fixes files
24+
```
25+
yarn run lint
26+
```
27+
28+
### Run your unit tests
29+
```
30+
yarn run test:unit
31+
```
32+
33+
### Customize configuration
34+
See [Configuration Reference](https://cli.vuejs.org/config/).

‎babel.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
presets: ["@vue/app"]
3+
};

‎dist/demo.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<meta charset="utf-8">
2+
<title>lazyload-vue demo</title>
3+
<script src="./lazyload-vue.umd.js"></script>
4+
<link rel="stylesheet" href="./lazyload-vue.css">
5+
6+
<script>
7+
console.log(lazyload-vue)
8+
</script>

‎dist/lazyload-vue.common.js

+684
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/lazyload-vue.common.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/lazyload-vue.umd.js

+694
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/lazyload-vue.umd.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/lazyload-vue.umd.min.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/lazyload-vue.umd.min.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
{
2+
"name": "@kazap.co/lazyload-vue",
3+
"version": "0.1.0",
4+
"license": "MIT",
5+
"main": "dist/lazyload-vue.umd.js",
6+
"scripts": {
7+
"start": "vue-cli-service serve",
8+
"serve": "vue-cli-service serve",
9+
"build": "vue-cli-service build --target lib --name lazyload-vue ./src/lazyload-vue.js",
10+
"lint": "vue-cli-service lint",
11+
"test:unit": "vue-cli-service test:unit"
12+
},
13+
"dependencies": {
14+
"stylus": "^0.54.5",
15+
"stylus-loader": "^3.0.2",
16+
"vanilla-lazyload": "^8.17.0",
17+
"vue": "^2.5.21"
18+
},
19+
"devDependencies": {
20+
"@vue/cli-plugin-babel": "^3.3.0",
21+
"@vue/cli-plugin-eslint": "^3.3.0",
22+
"@vue/cli-plugin-unit-jest": "^3.3.0",
23+
"@vue/cli-service": "^3.3.0",
24+
"@vue/eslint-config-prettier": "^4.0.1",
25+
"@vue/test-utils": "^1.0.0-beta.20",
26+
"babel-core": "7.0.0-bridge.0",
27+
"babel-eslint": "^10.0.1",
28+
"babel-jest": "^23.6.0",
29+
"eslint": "^5.8.0",
30+
"eslint-plugin-vue": "^5.0.0",
31+
"vue-template-compiler": "^2.5.21"
32+
},
33+
"eslintConfig": {
34+
"root": true,
35+
"env": {
36+
"node": true
37+
},
38+
"extends": [
39+
"plugin:vue/essential",
40+
"@vue/prettier"
41+
],
42+
"rules": {},
43+
"parserOptions": {
44+
"parser": "babel-eslint"
45+
}
46+
},
47+
"postcss": {
48+
"plugins": {
49+
"autoprefixer": {}
50+
}
51+
},
52+
"browserslist": [
53+
"> 1%",
54+
"last 2 versions",
55+
"not ie <= 8"
56+
],
57+
"jest": {
58+
"moduleFileExtensions": [
59+
"js",
60+
"jsx",
61+
"json",
62+
"vue"
63+
],
64+
"transform": {
65+
"^.+\\.vue$": "vue-jest",
66+
".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
67+
"^.+\\.jsx?$": "babel-jest"
68+
},
69+
"moduleNameMapper": {
70+
"^@/(.*)$": "<rootDir>/src/$1"
71+
},
72+
"snapshotSerializers": [
73+
"jest-serializer-vue"
74+
],
75+
"testMatch": [
76+
"**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
77+
],
78+
"testURL": "http://localhost/"
79+
}
80+
}

‎public/favicon.ico

1.12 KB
Binary file not shown.

‎public/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title>lazyload-vue</title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but lazyload-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
</noscript>
14+
<div id="app"></div>
15+
<!-- built files will be auto injected -->
16+
</body>
17+
</html>

‎src/App.vue

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div id="app">
3+
<h1>Lazyload Vue</h1>
4+
<h2>Wrapper for Vanilla Lazyload</h2>
5+
<Grid />
6+
</div>
7+
</template>
8+
9+
<script>
10+
import Grid from "./components/Grid.vue";
11+
12+
export default {
13+
name: "app",
14+
components: {
15+
Grid
16+
}
17+
};
18+
</script>
19+
20+
<style>
21+
#app {
22+
font-family: "Avenir", Helvetica, Arial, sans-serif;
23+
-webkit-font-smoothing: antialiased;
24+
-moz-osx-font-smoothing: grayscale;
25+
text-align: center;
26+
color: #2c3e50;
27+
margin-top: 60px;
28+
}
29+
</style>

‎src/assets/logo.png

6.69 KB
Loading

‎src/components/Grid.vue

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div class="wrapper">
3+
<div class="container">
4+
<div class="card" v-for="image in images" :key="image">
5+
<h3>Lorem ipsum dolor sit amet</h3>
6+
<img
7+
v-lazy-src="`http://lorempixel.com/200/200/fashion/${image}`"
8+
alt="My Image Example"
9+
/>
10+
</div>
11+
</div>
12+
</div>
13+
</template>
14+
15+
<script>
16+
export default {
17+
name: "Grid",
18+
props: {
19+
msg: String
20+
},
21+
data() {
22+
return {
23+
images: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
24+
};
25+
}
26+
};
27+
</script>
28+
29+
<!-- Add "scoped" attribute to limit CSS to this component only -->
30+
<style scoped lang="stylus">
31+
.wrapper
32+
background #eee
33+
box-shadow 0 0 0 3px rgba(0,0,0,.3)
34+
.container
35+
margin 0 auto
36+
max-width 900px
37+
overflow hidden
38+
background #fff
39+
</style>

‎src/directives/lazySrc.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import LazyLoad from "vanilla-lazyload";
2+
3+
const lazySrc = () => {
4+
const lazyLoadInstance = new LazyLoad({
5+
elements_selector: ".lazy-image"
6+
});
7+
8+
function bind(el, binding, vnode) {
9+
if (vnode.tag === "img") {
10+
el.dataset.src = binding.value;
11+
el.classList.add("lazy-image");
12+
}
13+
}
14+
15+
function inserted() {
16+
lazyLoadInstance.update();
17+
}
18+
19+
return {
20+
bind,
21+
inserted
22+
};
23+
};
24+
25+
export default lazySrc();

‎src/lazyload-vue.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import LazyLoadVue from "./plugins/LazyLoadVue";
2+
3+
export default LazyLoadVue;

‎src/main.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Vue from "vue";
2+
import App from "./App.vue";
3+
import LazyLoadVue from "@/plugins/LazyLoadVue";
4+
5+
Vue.config.productionTip = false;
6+
7+
Vue.use(LazyLoadVue);
8+
9+
new Vue({
10+
render: h => h(App)
11+
}).$mount("#app");

‎src/plugins/LazyLoadVue/index.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import lazySrc from "@/directives/lazySrc";
2+
3+
const lazyLoadPlugin = {};
4+
5+
lazyLoadPlugin.install = function(Vue) {
6+
Vue.directive("lazy-src", lazySrc);
7+
};
8+
9+
export default lazyLoadPlugin;

‎tests/unit/.eslintrc.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
env: {
3+
jest: true
4+
}
5+
};

‎tests/unit/example.spec.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { shallowMount } from "@vue/test-utils";
2+
import HelloWorld from "@/components/HelloWorld.vue";
3+
4+
describe("HelloWorld.vue", () => {
5+
it("renders props.msg when passed", () => {
6+
const msg = "new message";
7+
const wrapper = shallowMount(HelloWorld, {
8+
propsData: { msg }
9+
});
10+
expect(wrapper.text()).toMatch(msg);
11+
});
12+
});

‎yarn.lock

+9,675
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.