loader-module 1.0.2 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +74 -35
- package/dist/demo.html +1 -8
- package/dist/loader-module.common.js +336 -461
- package/dist/loader-module.common.js.map +1 -1
- package/dist/loader-module.umd.js +346 -462
- package/dist/loader-module.umd.js.map +1 -1
- package/dist/loader-module.umd.min.js +1 -1
- package/dist/loader-module.umd.min.js.map +1 -1
- package/package.json +28 -23
- package/src/LoaderVuex.vue +2 -2
- package/src/index.js +5 -5
- package/src/loaderModule.js +23 -28
- package/vue.config.js +21 -7
- package/src/components/Loader.vue +0 -46
- package/src/store/loaderModule.js +0 -27
- package/webpack.config.js +0 -19
package/README.md
CHANGED
|
@@ -1,66 +1,105 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Vue 3 Loader Module
|
|
2
2
|
|
|
3
|
-
Vue loader
|
|
3
|
+
Vue 3 loader modul sa Vuetify 3 i Vuex 4 podrškom.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Instalacija
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
|
|
8
|
+
npm install loader-module-vue3
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
##
|
|
11
|
+
## Korišćenje
|
|
12
12
|
|
|
13
|
-
###
|
|
13
|
+
### 1. Instaliraj modul
|
|
14
14
|
|
|
15
15
|
```javascript
|
|
16
|
-
import {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
})
|
|
16
|
+
import { createApp } from 'vue'
|
|
17
|
+
import { createStore } from 'vuex'
|
|
18
|
+
import { createVuetify } from 'vuetify'
|
|
19
|
+
import LoaderModule from 'loader-module-vue3'
|
|
20
|
+
|
|
21
|
+
const app = createApp({})
|
|
22
|
+
const store = createStore({})
|
|
23
|
+
const vuetify = createVuetify()
|
|
24
|
+
|
|
25
|
+
app.use(store)
|
|
26
|
+
app.use(vuetify)
|
|
27
|
+
app.use(LoaderModule, { store })
|
|
23
28
|
```
|
|
24
29
|
|
|
25
|
-
###
|
|
30
|
+
### 2. Dodaj komponentu u template
|
|
26
31
|
|
|
27
32
|
```vue
|
|
28
33
|
<template>
|
|
29
34
|
<div>
|
|
30
|
-
|
|
35
|
+
<!-- Tvoj sadržaj -->
|
|
36
|
+
<loader-vuex
|
|
37
|
+
:opacity="0.8"
|
|
38
|
+
:size="80"
|
|
39
|
+
color="primary"
|
|
40
|
+
/>
|
|
31
41
|
</div>
|
|
32
42
|
</template>
|
|
33
|
-
|
|
34
|
-
<script>
|
|
35
|
-
import { LoaderVuex } from 'loader-module'
|
|
36
|
-
|
|
37
|
-
export default {
|
|
38
|
-
components: {
|
|
39
|
-
LoaderVuex
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
</script>
|
|
43
43
|
```
|
|
44
44
|
|
|
45
|
-
###
|
|
45
|
+
### 3. Kontroliši loader
|
|
46
46
|
|
|
47
47
|
```javascript
|
|
48
|
-
//
|
|
48
|
+
// Prikaži loader
|
|
49
49
|
this.$store.dispatch('loaderModule/show')
|
|
50
50
|
|
|
51
|
-
//
|
|
51
|
+
// Sakrij loader
|
|
52
52
|
this.$store.dispatch('loaderModule/hide')
|
|
53
|
+
|
|
54
|
+
// Proveri da li je loader aktivan
|
|
55
|
+
this.$store.getters['loaderModule/isLoading']
|
|
53
56
|
```
|
|
54
57
|
|
|
55
58
|
## Props
|
|
56
59
|
|
|
57
|
-
|
|
60
|
+
| Prop | Tip | Default | Opis |
|
|
61
|
+
|------|-----|---------|------|
|
|
62
|
+
| opacity | Number | 0.7 | Prozirnost overlay-a |
|
|
63
|
+
| zIndex | Number | 5 | Z-index overlay-a |
|
|
64
|
+
| size | Number | 64 | Veličina spinner-a |
|
|
65
|
+
| color | String | 'primary' | Boja spinner-a |
|
|
66
|
+
|
|
67
|
+
## Store Actions
|
|
68
|
+
|
|
69
|
+
| Action | Opis |
|
|
70
|
+
|--------|------|
|
|
71
|
+
| `loaderModule/show` | Prikaži loader |
|
|
72
|
+
| `loaderModule/hide` | Sakrij loader |
|
|
73
|
+
|
|
74
|
+
## Store Getters
|
|
75
|
+
|
|
76
|
+
| Getter | Opis |
|
|
77
|
+
|--------|------|
|
|
78
|
+
| `loaderModule/isLoading` | Da li je loader aktivan |
|
|
58
79
|
|
|
59
|
-
|
|
60
|
-
- `zIndex` (Number): z-index of the overlay (default: 5)
|
|
61
|
-
- `size` (Number): Size of the loader in pixels (default: 64)
|
|
62
|
-
- `color` (String): Color of the loader (default: 'primary')
|
|
80
|
+
## Store State
|
|
63
81
|
|
|
64
|
-
|
|
82
|
+
```javascript
|
|
83
|
+
{
|
|
84
|
+
loaderModule: {
|
|
85
|
+
loaderDialog: false
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Primer
|
|
91
|
+
|
|
92
|
+
Pogledaj `examples/vue3-example.html` za kompletan primer korišćenja.
|
|
65
93
|
|
|
66
|
-
|
|
94
|
+
## Razvoj
|
|
95
|
+
|
|
96
|
+
```bash
|
|
97
|
+
# Instaliraj dependencies
|
|
98
|
+
npm install
|
|
99
|
+
|
|
100
|
+
# Pokreni dev server
|
|
101
|
+
npm run serve
|
|
102
|
+
|
|
103
|
+
# Build za produkciju
|
|
104
|
+
npm run build
|
|
105
|
+
```
|
package/dist/demo.html
CHANGED
|
@@ -1,8 +1 @@
|
|
|
1
|
-
|
|
2
|
-
<title>loader-module demo</title>
|
|
3
|
-
<script src="./loader-module.umd.js"></script>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
<script>
|
|
7
|
-
console.log(loader-module)
|
|
8
|
-
</script>
|
|
1
|
+
<!doctype html><meta charset="utf-8"><title>loader-module demo</title><script src="./loader-module.umd.js"></script><script>console.log(loader-module)</script>
|