Skip to content

Commit 45b57eb

Browse files
oumoussa98oumoussa98
authored
Merge pull request #44 from oumoussa98/dev
Dev
2 parents 4022646 + c6f2f95 commit 45b57eb

19 files changed

+2166
-6706
lines changed

‎.prettierignore

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
node_modules
2+
lib
3+
dist
4+
*.log
5+
.cache
6+
.DS_Store
7+
.temp
8+
dist
9+
!.env.example
10+
.env
11+
.env.*
12+
*-lock.json
13+
*-lock.yaml

‎demo/package-lock.json

Lines changed: 404 additions & 336 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"vue": "^3.2.13"
1111
},
1212
"devDependencies": {
13+
"@vitejs/plugin-vue": "^3.2.0",
1314
"vite": "^3.0.2"
1415
}
1516
}

‎demo/src/App.vue

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -80,29 +80,50 @@ const load = async $state => {
8080
target="_blank"
8181
href="https://github.com/oumoussa98/vue3-infinite-loading/tree/main/example"
8282
>
83-
<img src="./assets/github.svg" alt="github icon" />
83+
<img
84+
src="./assets/github.svg"
85+
alt="github icon"
86+
>
8487
</a>
8588
<span class="props">
86-
<Checkbox :checked="top" :disabled="!target" label="top" @click="topToggler">
89+
<Checkbox
90+
:checked="top"
91+
:disabled="!target"
92+
label="top"
93+
@click="topToggler"
94+
>
8795
Top
8896
</Checkbox>
89-
<Checkbox :checked="target" label="target" @click="targetToggler">
97+
<Checkbox
98+
:checked="target"
99+
label="target"
100+
@click="targetToggler"
101+
>
90102
Target
91103
</Checkbox>
92104
<div>
93105
Distance:
94106
<input
95-
@change="distanceHandler"
96-
class="distance"
97107
v-model.number.lazy="distance"
108+
class="distance"
98109
type="text"
99-
/>
110+
@change="distanceHandler"
111+
>
100112
</div>
101113
</span>
102114
<span class="buttons">
103-
<button class="btn-mount" @click="mountToggler">{{ mountname }}</button>
104-
<button class="btn-refresh" @click="refresh">Refresh</button>
105-
<button class="btn-reset" @click="reset">Reset</button>
115+
<button
116+
class="btn-mount"
117+
@click="mountToggler"
118+
>{{ mountname }}</button>
119+
<button
120+
class="btn-refresh"
121+
@click="refresh"
122+
>Refresh</button>
123+
<button
124+
class="btn-reset"
125+
@click="reset"
126+
>Reset</button>
106127
</span>
107128
</div>
108129
<div v-if="mount">

‎demo/src/components/Bottom.vue

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,22 @@ const { comments } = toRefs(props);
99

1010
<template>
1111
<div v-bind="$attrs">
12-
<div class="results" :class="{ 'bottom-results': $attrs.target }">
13-
<div class="result" v-for="comment in comments" :key="comment.id">
12+
<div
13+
class="results"
14+
:class="{ 'bottom-results': $attrs.target }"
15+
>
16+
<div
17+
v-for="comment in comments"
18+
:key="comment.id"
19+
class="result"
20+
>
1421
<div>{{ comment.email }}</div>
1522
<div>{{ comment.id }}</div>
1623
</div>
17-
<infinite-loading class="loader" v-bind="$attrs" />
24+
<infinite-loading
25+
class="loader"
26+
v-bind="$attrs"
27+
/>
1828
</div>
1929
</div>
2030
</template>

‎demo/src/components/Checkbox.vue

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,24 @@
11
<script setup>
2-
import { toRefs } from "vue";
3-
const props = defineProps({
2+
defineProps({
43
label: { type: String, required: true },
54
disabled: { type: Boolean, required: false },
65
checked: { required: false },
76
});
87
const emit = defineEmits(["click"]);
9-
const { label } = toRefs(props);
108
</script>
119
<template>
12-
<label class="wrapper flex items-center" :class="{ disabled: disabled }">
10+
<label
11+
class="wrapper flex items-center"
12+
:class="{ disabled: disabled }"
13+
>
1314
<slot />
14-
<input @click="emit('click')" class="checkbox" type="checkbox" :checked="checked" />
15-
<span class="checkmark"></span>
15+
<input
16+
class="checkbox"
17+
type="checkbox"
18+
:checked="checked"
19+
@click="emit('click')"
20+
>
21+
<span class="checkmark" />
1622
</label>
1723
</template>
1824

‎demo/src/components/Top.vue

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,20 @@ const { comments } = toRefs(props);
99

1010
<template>
1111
<div v-bind="$attrs">
12-
<div class="results" :class="{ 'top-results': $attrs.target }">
13-
<infinite-loading class="loader" top v-bind="$attrs" />
14-
<div class="result" v-for="comment in comments" :key="comment.id">
12+
<div
13+
class="results"
14+
:class="{ 'top-results': $attrs.target }"
15+
>
16+
<infinite-loading
17+
class="loader"
18+
top
19+
v-bind="$attrs"
20+
/>
21+
<div
22+
v-for="comment in comments"
23+
:key="comment.id"
24+
class="result"
25+
>
1526
<div>{{ comment.email }}</div>
1627
<div>{{ comment.id }}</div>
1728
</div>

‎demo/src/main.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { createApp } from "vue";
22
import App from "./App.vue";
3-
import "../lib/style.css";
43

54
import InfiniteLoading from "../../src/components/InfiniteLoading.vue";
65

76
const app = createApp(App);
87

98
if (import.meta.env.MODE === "production") {
109
const modules = import.meta.glob("../lib/v3-infinite-loading.mjs", { eager: true });
10+
import.meta.glob("../lib/style.css", { eager: true });
1111
const InfiniteLoadingProd = modules["../lib/v3-infinite-loading.mjs"].default;
12-
app.component("infinite-loading", InfiniteLoadingProd);
13-
} else app.component("infinite-loading", InfiniteLoading);
12+
app.component("InfiniteLoading", InfiniteLoadingProd);
13+
} else app.component("InfiniteLoading", InfiniteLoading);
1414

1515
app.mount("#app");

‎docs/.vitepress/components/Home.vue

Lines changed: 46 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
<script setup>
2-
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
3-
const displayHint = async (text) => {
4-
const el = document.querySelector('div.install .inner-text')
5-
el.innerText = text
6-
el.parentElement.style.color = '#00c96f'
7-
await sleep(1500)
8-
el.parentElement.style.color = '#aac8e4'
9-
el.innerText = 'npm i v3-infinite-loading'
10-
}
2+
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
3+
const displayHint = async text => {
4+
const el = document.querySelector("div.install .inner-text");
5+
el.innerText = text;
6+
el.parentElement.style.color = "#00c96f";
7+
await sleep(1500);
8+
el.parentElement.style.color = "#aac8e4";
9+
el.innerText = "npm i v3-infinite-loading";
10+
};
1111
1212
const copyText = () => {
1313
navigator.clipboard
14-
.writeText('npm i v3-infinite-loading')
14+
.writeText("npm i v3-infinite-loading")
1515
.then(() => {
16-
displayHint('Copied to clipboard')
16+
displayHint("Copied to clipboard");
1717
})
1818
.catch(() => {
19-
displayHint('Failed to copy 😞')
20-
})
21-
}
19+
displayHint("Failed to copy 😞");
20+
});
21+
};
2222
</script>
2323

2424
<template>
@@ -36,21 +36,42 @@ const copyText = () => {
3636
<div class="actions">
3737
<a class="get-started" href="/guide/introduction.html">
3838
Get Started
39-
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24">
40-
<path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z" />
39+
<svg
40+
class="icon"
41+
xmlns="http://www.w3.org/2000/svg"
42+
width="10"
43+
height="10"
44+
viewBox="0 0 24 24"
45+
>
46+
<path
47+
d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"
48+
/>
4149
</svg>
4250
</a>
4351
<div @click="copyText" class="install">
4452
<span class="inner-text">npm i v3-infinite-loading</span>
4553
<svg width="16" height="19" xmlns="http://www.w3.org/2000/svg">
4654
<g>
4755
<title>Layer 1</title>
48-
<path fill="#666666" stroke="null" id="svg_1" opacity="0.35"
49-
d="m2.50926,14.0668l0,-11.0873c0,-1.53097 1.24085,-2.77183 2.77182,-2.77183l4.61971,0l5.54365,5.54365l0,8.31548c0,1.53097 -1.24085,2.77182 -2.77182,2.77182l-7.39154,0c-1.53097,0 -2.77182,-1.24085 -2.77182,-2.77182z" />
50-
<path stroke="null" fill="#666666" id="svg_2"
51-
d="m9.84788,3.95635l0,-3.69577l5.54365,5.54365l-3.69577,0c-1.02096,0 -1.84788,-0.82693 -1.84788,-1.84788z" />
52-
<path stroke="null" fill="#757575" id="svg_3"
53-
d="m5.22817,16.89153c-1.53097,0 -2.77183,-1.24085 -2.77183,-2.77183l0,-11.0873c-1.02096,0 -1.84788,0.82693 -1.84788,1.84788l0,11.0873c0,1.53097 1.24085,2.77183 2.77183,2.77183l7.39153,0c1.02096,0 1.84788,-0.82693 1.84788,-1.84788l-7.39153,0z" />
56+
<path
57+
fill="#666666"
58+
stroke="null"
59+
id="svg_1"
60+
opacity="0.35"
61+
d="m2.50926,14.0668l0,-11.0873c0,-1.53097 1.24085,-2.77183 2.77182,-2.77183l4.61971,0l5.54365,5.54365l0,8.31548c0,1.53097 -1.24085,2.77182 -2.77182,2.77182l-7.39154,0c-1.53097,0 -2.77182,-1.24085 -2.77182,-2.77182z"
62+
/>
63+
<path
64+
stroke="null"
65+
fill="#666666"
66+
id="svg_2"
67+
d="m9.84788,3.95635l0,-3.69577l5.54365,5.54365l-3.69577,0c-1.02096,0 -1.84788,-0.82693 -1.84788,-1.84788z"
68+
/>
69+
<path
70+
stroke="null"
71+
fill="#757575"
72+
id="svg_3"
73+
d="m5.22817,16.89153c-1.53097,0 -2.77183,-1.24085 -2.77183,-2.77183l0,-11.0873c-1.02096,0 -1.84788,0.82693 -1.84788,1.84788l0,11.0873c0,1.53097 1.24085,2.77183 2.77183,2.77183l7.39153,0c1.02096,0 1.84788,-0.82693 1.84788,-1.84788l-7.39153,0z"
74+
/>
5475
</g>
5576
</svg>
5677
</div>
@@ -60,9 +81,7 @@ const copyText = () => {
6081
<section id="highlights" class="vt-box-container">
6182
<div class="vt-box text-center">
6283
<h2>Light and Simple</h2>
63-
<p>
64-
Light weight, Simple and easy to use api and a built in spinner
65-
</p>
84+
<p>Light weight, Simple and easy to use api and a built in spinner</p>
6685
</div>
6786
<div class="vt-box text-center">
6887
<h2>2-directions support</h2>
@@ -190,11 +209,11 @@ html:not(.dark) .accent,
190209
font-weight: 400;
191210
font-size: 15px;
192211
max-width: 200px;
193-
color: rgba(60, 60, 60, .7);
212+
color: rgba(60, 60, 60, 0.7);
194213
}
195214
196215
.dark #highlights p {
197-
color: rgba(235, 235, 235, .6);
216+
color: rgba(235, 235, 235, 0.6);
198217
}
199218
200219
#highlights .vt-box {

‎docs/api/props.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,4 @@
5252
- **Type**: `String`
5353
- **Default**: `Oops something went wrong!`
5454
- **Details**:
55-
override text message display on complete
55+
override text message display on complete

‎docs/guide/installation.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@ npm install v3-infinite-loading
1313
##### register globally
1414

1515
```js
16-
import InfiniteLoading from 'v3-infinite-loading'
17-
import 'v3-infinite-loading/lib/style.css' //required if you're not going to override default slots
16+
import InfiniteLoading from "v3-infinite-loading";
17+
import "v3-infinite-loading/lib/style.css"; //required if you're not going to override default slots
1818

19-
const app = createApp(App)
19+
const app = createApp(App);
2020

21-
app.component('infinite-loading', InfiniteLoading)
21+
app.component("infinite-loading", InfiniteLoading);
2222

23-
app.mount('#app')
23+
app.mount("#app");
2424
```
2525

2626
##### usage in SFC with script setup

‎docs/guide/quick-demo.md

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -31,31 +31,30 @@ We're using [{JSON} Placeholder API](https://jsonplaceholder.typicode.com/) to g
3131

3232
```html
3333
<script setup>
34-
import { ref } from 'vue'
35-
import InfiniteLoading from 'v3-infinite-loading'
36-
import 'v3-infinite-loading/lib/style.css'
34+
import { ref } from "vue";
35+
import InfiniteLoading from "v3-infinite-loading";
36+
import "v3-infinite-loading/lib/style.css";
3737
38-
let comments = ref([])
39-
let page = 1
40-
const load = async ($state) => {
41-
console.log('loading...')
38+
let comments = ref([]);
39+
let page = 1;
40+
const load = async $state => {
41+
console.log("loading...");
4242
4343
try {
4444
const response = await fetch(
45-
'https://jsonplaceholder.typicode.com/comments?_limit=10&_page=' +
46-
page
47-
)
48-
const json = await response.json()
49-
if (json.length < 10) $state.complete()
45+
"https://jsonplaceholder.typicode.com/comments?_limit=10&_page=" + page
46+
);
47+
const json = await response.json();
48+
if (json.length < 10) $state.complete();
5049
else {
51-
comments.value.push(...json)
52-
$state.loaded()
50+
comments.value.push(...json);
51+
$state.loaded();
5352
}
54-
page++
53+
page++;
5554
} catch (error) {
56-
$state.error()
55+
$state.error();
5756
}
58-
}
57+
};
5958
</script>
6059
```
6160

‎docs/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,4 @@ title: An infinite scroll component compatible with vue.js 3 and vite
77
import Home from "./.vitepress/components/Home.vue"
88
</script>
99

10-
<Home />
10+
<Home />

0 commit comments

Comments
 (0)