@vuesimple/vs-loader 3.1.6 → 3.1.7
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 +60 -43
- package/build/vite.config.js +2 -2
- package/dist/index.esm.js +120 -58
- package/dist/index.min.js +2 -3
- package/dist/index.umd.js +2 -3
- package/package.json +4 -3
- package/src/vs-loader.vue +12 -0
- package/src/vs-skeleton.vue +126 -0
package/README.md
CHANGED
|
@@ -70,55 +70,72 @@ app.use(VsLoader.plugin);
|
|
|
70
70
|
|
|
71
71
|
<br />
|
|
72
72
|
|
|
73
|
-
|
|
74
|
-
<img src="https://i.imgur.com/MWynQNa.png" width="20px"> Nuxt.js
|
|
75
|
-
</h3>
|
|
73
|
+
### ⚙ Props
|
|
76
74
|
|
|
77
|
-
|
|
75
|
+
#### Common props
|
|
78
76
|
|
|
79
|
-
|
|
77
|
+
| Name | Type | Default | Description |
|
|
78
|
+
| ------- | -------------- | ------- | ------------------------------------------------ |
|
|
79
|
+
| variant | String | `pulse` | Variants: `pulse`, `dots`, `inline`, `skeleton`. |
|
|
80
|
+
| color | String | - | Loader color. |
|
|
81
|
+
| size | Number\|String | - | Loader size. |
|
|
82
|
+
| center | Boolean | - | Center aligns the loader wrt the parent div. |
|
|
80
83
|
|
|
81
|
-
|
|
84
|
+
#### Skeleton props (`variant="skeleton"`)
|
|
82
85
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
+
| Name | Type | Default | Description |
|
|
87
|
+
| ------ | -------------- | ------- | ------------------------------------------------------------------------------------------------- |
|
|
88
|
+
| type | String | `line` | Shape of the skeleton item. Options: `line`, `square`, `circle`. |
|
|
89
|
+
| count | Number\|String | `1` | Number of skeleton items to render. |
|
|
90
|
+
| size | Number\|String | - | Override size in px or any CSS value. Sets height for `line`, width+height for `square`/`circle`. |
|
|
91
|
+
| width | String | - | Override width for `line` type (e.g. `60%`, `200px`). |
|
|
92
|
+
| color | String | - | Base skeleton color. Defaults to `#e9e9e9`. Also accepts CSS variable. |
|
|
93
|
+
| center | Boolean | - | Center aligns the skeleton items. |
|
|
94
|
+
|
|
95
|
+
#### Skeleton CSS variables
|
|
86
96
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
-
|
|
91
|
-
```javascript
|
|
92
|
-
module.exports = {
|
|
93
|
-
...
|
|
94
|
-
plugins: [
|
|
95
|
-
{ src: '~plugins/vs-loader', mode: 'client' }
|
|
96
|
-
...
|
|
97
|
-
]
|
|
98
|
-
}
|
|
99
|
-
```
|
|
100
|
-
- In the page/ component
|
|
101
|
-
|
|
102
|
-
```html
|
|
103
|
-
<template>
|
|
104
|
-
<vs-loader variant="pulse"></vs-loader>
|
|
105
|
-
</template>
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
**Note**
|
|
109
|
-
|
|
110
|
-
- For older Nuxt versions, use `<no-ssr>...</no-ssr>` tag.
|
|
111
|
-
- You can also do
|
|
112
|
-
`import VsLoader from '@vuesimple/vs-loader'`
|
|
113
|
-
& add in `component:{VsLoader}` and use it within component, without globally installing in plugin folder.
|
|
97
|
+
| Variable | Default | Description |
|
|
98
|
+
| ----------------------- | -------------------------- | ------------------------ |
|
|
99
|
+
| `--vs-skeleton-color` | `#e9e9e9` | Base background color. |
|
|
100
|
+
| `--vs-skeleton-shimmer` | `rgba(255, 255, 255, 0.6)` | Shimmer highlight color. |
|
|
114
101
|
|
|
115
102
|
<br />
|
|
116
103
|
|
|
117
|
-
###
|
|
104
|
+
### 🦴 Skeleton Examples
|
|
105
|
+
|
|
106
|
+
**Line (default)**
|
|
107
|
+
|
|
108
|
+
```html
|
|
109
|
+
<vs-loader variant="skeleton" type="line" :count="3" />
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
**Circle**
|
|
113
|
+
|
|
114
|
+
```html
|
|
115
|
+
<vs-loader variant="skeleton" type="circle" :count="3" size="48" />
|
|
116
|
+
```
|
|
118
117
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
118
|
+
**Square**
|
|
119
|
+
|
|
120
|
+
```html
|
|
121
|
+
<vs-loader variant="skeleton" type="square" size="100" />
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
**Card preview layout**
|
|
125
|
+
|
|
126
|
+
```html
|
|
127
|
+
<div style="display: flex; gap: 16px; align-items: flex-start">
|
|
128
|
+
<vs-loader variant="skeleton" type="circle" size="48" />
|
|
129
|
+
<div style="flex: 1; display: flex; flex-direction: column; gap: 8px">
|
|
130
|
+
<vs-loader variant="skeleton" type="line" width="50%" size="14" />
|
|
131
|
+
<vs-loader variant="skeleton" type="line" width="80%" size="14" />
|
|
132
|
+
<vs-loader variant="skeleton" type="line" width="65%" size="14" />
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
**Custom color via CSS variable**
|
|
138
|
+
|
|
139
|
+
```html
|
|
140
|
+
<vs-loader variant="skeleton" type="line" :count="3" style="--vs-skeleton-shimmer: rgba(255,255,255,0.9)" />
|
|
141
|
+
```
|
package/build/vite.config.js
CHANGED
|
@@ -2,10 +2,10 @@ import vue from '@vitejs/plugin-vue';
|
|
|
2
2
|
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
|
|
3
3
|
|
|
4
4
|
export default {
|
|
5
|
-
plugins: [vue(), cssInjectedByJsPlugin()],
|
|
5
|
+
plugins: [vue(), cssInjectedByJsPlugin({ styleId: 'vs-loader-styles' })],
|
|
6
6
|
build: {
|
|
7
7
|
// separate css file or not
|
|
8
|
-
cssCodeSplit:
|
|
8
|
+
cssCodeSplit: false,
|
|
9
9
|
lib: {
|
|
10
10
|
entry: './src/index.js',
|
|
11
11
|
formats: ['es', 'umd', 'iife'],
|
package/dist/index.esm.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(
|
|
2
|
-
import { openBlock as s, createElementBlock as
|
|
3
|
-
const
|
|
4
|
-
const
|
|
5
|
-
for (const [
|
|
6
|
-
|
|
7
|
-
return
|
|
8
|
-
},
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.id="vs-loader-styles",t.appendChild(document.createTextNode('.vs-pulse{display:flex}.vs-pulse.vs-loader--center{align-items:center;justify-content:center}@-webkit-keyframes v-pulseStretchDelay{0%,80%{-webkit-transform:scale(1);transform:scale(1);-webkit-opacity:1;opacity:1}45%{-webkit-transform:scale(.1);transform:scale(.1);-webkit-opacity:.7;opacity:.7}}@keyframes v-pulseStretchDelay{0%,80%{-webkit-transform:scale(1);transform:scale(1);-webkit-opacity:1;opacity:1}45%{-webkit-transform:scale(.1);transform:scale(.1);-webkit-opacity:.7;opacity:.7}}.vs-dots.vs-loader--center{display:flex;align-items:center;justify-content:center}.vs-dots svg{width:4.5em;margin:3px}.vs-dots .circle-one{animation:1.25s ease-in-out 0s infinite normal none running circleOneKeyframe}.vs-dots .circle-two{animation:1.25s ease-in-out 0s infinite normal none running circleTwoKeyframe}.vs-dots .circle-three{animation:1.25s ease-in-out 0s infinite normal none running circleThreeKeyframe}@keyframes circleOneKeyframe{0%{transform:translateY(5px)}3%{transform:translate(1px,-5px)}6%{transform:translate(3px,-15px)}8%{transform:translate(5px,-18px)}9%{transform:translate(7px,-21px)}11%{transform:translate(8px,-22px)}13%{transform:translate(9px,-23px)}16%{transform:translate(12px,-25px)}18%{transform:translate(13px,-26px)}23%{transform:translate(18px,-26px)}24%{transform:translate(19px,-25px)}28%{transform:translate(22px,-23px)}31%{transform:translate(24px,-21px)}33%{transform:translate(26px,-18px)}34%{transform:translate(28px,-14px)}36%{transform:translate(29px,-12px)}38%{transform:translate(30px,-5px)}39%{transform:translate(31px,5px)}54%{transform:translate(31px,3px)}59%{transform:translate(33px)}61%{transform:translate(43px)}63%{transform:translate(48px)}64%{transform:translate(51px)}66%{transform:translate(53px)}68%{transform:translate(55px)}69%{transform:translate(57px)}76%{transform:translate(60px)}81%{transform:translate(61px)}83%,to{transform:translate(62px)}}@keyframes circleTwoKeyframe{4%{transform:translate(0)}6%{transform:translate(-1px)}8%{transform:translate(-2px)}9%{transform:translate(-5px)}11%{transform:translate(-7px)}13%{transform:translate(-12px)}14%{transform:translate(-17px)}16%{transform:translate(-19px)}18%{transform:translate(-22px)}19%{transform:translate(-25px)}21%{transform:translate(-26px)}23%{transform:translate(-27px)}24%{transform:translate(-28px)}26%{transform:translate(-29px)}29%{transform:translate(-30px)}33%,89%{transform:translate(-31px)}91%{transform:translate(-31px,1px)}94%{transform:translate(-31px,2px)}98%{transform:translate(-31px,3px)}99%{transform:translate(-31px,4px)}to{transform:translate(-31px,5px)}}@keyframes circleThreeKeyframe{39%{transform:translate(0)}44%{transform:translateY(1px)}46%{transform:translateY(2px)}48%{transform:translateY(3px)}49%{transform:translateY(4px)}51%{transform:translateY(5px)}53%{transform:translate(-1px,-6px)}54%{transform:translate(-2px,-13px)}56%{transform:translate(-3px,-15px)}58%{transform:translate(-5px,-19px)}59%{transform:translate(-7px,-21px)}61%{transform:translate(-8px,-22px)}63%{transform:translate(-9px,-24px)}64%{transform:translate(-11px,-25px)}66%{transform:translate(-12px,-26px)}74%{transform:translate(-19px,-26px)}76%{transform:translate(-20px,-25px)}78%{transform:translate(-22px,-24px)}81%{transform:translate(-24px,-21px)}83%{transform:translate(-26px,-19px)}84%{transform:translate(-28px,-15px)}86%{transform:translate(-29px,-13px)}88%{transform:translate(-30px,-6px)}89%{transform:translate(-31px,5px)}91%{transform:translate(-31px,4px)}93%{transform:translate(-31px,3px)}94%{transform:translate(-31px,2px)}98%{transform:translate(-31px,1px)}to{transform:translate(-31px)}}.vs-inline.vs-loader--center{display:flex;align-items:center;justify-content:center}.vs-inline .vs-inline--circle{opacity:.2}.vs-inline .vs-inline--circle:nth-child(1){animation:pulseAnimation 1s infinite;animation-delay:.4s}.vs-inline .vs-inline--circle:nth-child(2){animation:pulseAnimation 1s infinite;animation-delay:.2s}.vs-inline .vs-inline--circle:nth-child(3){animation:pulseAnimation 1s infinite}@keyframes pulseAnimation{0%,to{opacity:.2}50%{opacity:.8}}.vs-skeleton{display:flex;flex-direction:column;gap:8px}.vs-skeleton.vs-loader--center{align-items:center;justify-content:center}.vs-skeleton__item{position:relative;overflow:hidden;background-color:var(--vs-skeleton-color, #e9e9e9)}.vs-skeleton__item--line{height:16px;width:100%;border-radius:4px}.vs-skeleton__item--square{width:80px;height:80px;border-radius:4px}.vs-skeleton__item--circle{width:40px;height:40px;border-radius:50%}.vs-skeleton__item:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background:linear-gradient(90deg,transparent 0%,var(--vs-skeleton-shimmer, rgba(255, 255, 255, .6)) 50%,transparent 100%);animation:vs-shimmer 1s infinite}@keyframes vs-shimmer{to{transform:translate(100%)}}')),document.head.appendChild(t)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
|
|
2
|
+
import { openBlock as s, createElementBlock as l, normalizeClass as u, createElementVNode as r, normalizeStyle as a, Fragment as p, renderList as y, createBlock as f, resolveDynamicComponent as m, normalizeProps as v, guardReactiveProps as h } from "vue";
|
|
3
|
+
const _ = (e, n) => {
|
|
4
|
+
const t = e.__vccOpts || e;
|
|
5
|
+
for (const [o, i] of n)
|
|
6
|
+
t[o] = i;
|
|
7
|
+
return t;
|
|
8
|
+
}, g = {
|
|
9
9
|
name: "VsLoader",
|
|
10
10
|
props: {
|
|
11
11
|
color: {
|
|
@@ -55,23 +55,23 @@ const l = (r, o) => {
|
|
|
55
55
|
};
|
|
56
56
|
}
|
|
57
57
|
};
|
|
58
|
-
function
|
|
59
|
-
return s(),
|
|
60
|
-
class: u(["vs-pulse", { "vs-loader--center":
|
|
58
|
+
function S(e, n, t, o, i, c) {
|
|
59
|
+
return s(), l("div", {
|
|
60
|
+
class: u(["vs-pulse", { "vs-loader--center": t.center }])
|
|
61
61
|
}, [
|
|
62
|
-
|
|
63
|
-
style:
|
|
62
|
+
r("div", {
|
|
63
|
+
style: a([i.spinnerStyle, i.spinnerDelay1])
|
|
64
64
|
}, null, 4),
|
|
65
|
-
|
|
66
|
-
style:
|
|
65
|
+
r("div", {
|
|
66
|
+
style: a([i.spinnerStyle, i.spinnerDelay2])
|
|
67
67
|
}, null, 4),
|
|
68
|
-
|
|
69
|
-
style:
|
|
68
|
+
r("div", {
|
|
69
|
+
style: a([i.spinnerStyle, i.spinnerDelay3])
|
|
70
70
|
}, null, 4)
|
|
71
71
|
], 2);
|
|
72
72
|
}
|
|
73
|
-
const
|
|
74
|
-
const
|
|
73
|
+
const x = /* @__PURE__ */ _(g, [["render", S]]);
|
|
74
|
+
const z = {
|
|
75
75
|
name: "VsDotsLoader",
|
|
76
76
|
props: {
|
|
77
77
|
color: {
|
|
@@ -86,44 +86,44 @@ const h = {
|
|
|
86
86
|
type: Boolean
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
|
-
},
|
|
90
|
-
/* @__PURE__ */
|
|
89
|
+
}, b = ["color", "font-size"], w = /* @__PURE__ */ r("g", { fill: "currentColor" }, [
|
|
90
|
+
/* @__PURE__ */ r("circle", {
|
|
91
91
|
cy: "36",
|
|
92
92
|
r: "9",
|
|
93
93
|
cx: "9",
|
|
94
94
|
class: "circle-one"
|
|
95
95
|
}),
|
|
96
|
-
/* @__PURE__ */
|
|
96
|
+
/* @__PURE__ */ r("circle", {
|
|
97
97
|
cy: "36",
|
|
98
98
|
r: "9",
|
|
99
99
|
cx: "40",
|
|
100
100
|
class: "circle-two"
|
|
101
101
|
}),
|
|
102
|
-
/* @__PURE__ */
|
|
102
|
+
/* @__PURE__ */ r("circle", {
|
|
103
103
|
cy: "36",
|
|
104
104
|
r: "9",
|
|
105
105
|
cx: "71",
|
|
106
106
|
class: "circle-three"
|
|
107
107
|
})
|
|
108
|
-
], -1),
|
|
109
|
-
|
|
108
|
+
], -1), D = [
|
|
109
|
+
w
|
|
110
110
|
];
|
|
111
|
-
function
|
|
112
|
-
return s(),
|
|
113
|
-
class: u(["vs-dots", { "vs-loader--center":
|
|
111
|
+
function $(e, n, t, o, i, c) {
|
|
112
|
+
return s(), l("div", {
|
|
113
|
+
class: u(["vs-dots", { "vs-loader--center": t.center }])
|
|
114
114
|
}, [
|
|
115
|
-
(s(),
|
|
116
|
-
color:
|
|
117
|
-
"font-size":
|
|
115
|
+
(s(), l("svg", {
|
|
116
|
+
color: t.color,
|
|
117
|
+
"font-size": t.size,
|
|
118
118
|
xmlns: "http://www.w3.org/2000/svg",
|
|
119
119
|
focusable: "false",
|
|
120
120
|
viewBox: "0 0 80 72",
|
|
121
121
|
role: "progressbar"
|
|
122
|
-
},
|
|
122
|
+
}, D, 8, b))
|
|
123
123
|
], 2);
|
|
124
124
|
}
|
|
125
|
-
const
|
|
126
|
-
const
|
|
125
|
+
const k = /* @__PURE__ */ _(z, [["render", $]]);
|
|
126
|
+
const B = {
|
|
127
127
|
name: "VsInlineLoader",
|
|
128
128
|
props: {
|
|
129
129
|
color: {
|
|
@@ -138,46 +138,98 @@ const $ = {
|
|
|
138
138
|
type: Boolean
|
|
139
139
|
}
|
|
140
140
|
}
|
|
141
|
-
},
|
|
141
|
+
}, N = ["color", "width"], C = /* @__PURE__ */ r("circle", {
|
|
142
142
|
cx: "14",
|
|
143
143
|
fill: "currentColor",
|
|
144
144
|
cy: "2",
|
|
145
145
|
r: "2",
|
|
146
146
|
class: "vs-inline--circle"
|
|
147
|
-
}, null, -1),
|
|
147
|
+
}, null, -1), V = /* @__PURE__ */ r("circle", {
|
|
148
148
|
cx: "8",
|
|
149
149
|
fill: "currentColor",
|
|
150
150
|
cy: "2",
|
|
151
151
|
r: "2",
|
|
152
152
|
class: "vs-inline--circle"
|
|
153
|
-
}, null, -1),
|
|
153
|
+
}, null, -1), L = /* @__PURE__ */ r("circle", {
|
|
154
154
|
cx: "2",
|
|
155
155
|
fill: "currentColor",
|
|
156
156
|
cy: "2",
|
|
157
157
|
r: "2",
|
|
158
158
|
class: "vs-inline--circle"
|
|
159
|
-
}, null, -1),
|
|
160
|
-
B,
|
|
159
|
+
}, null, -1), P = [
|
|
161
160
|
C,
|
|
162
|
-
V
|
|
161
|
+
V,
|
|
162
|
+
L
|
|
163
163
|
];
|
|
164
|
-
function
|
|
165
|
-
return s(),
|
|
166
|
-
class: u(["vs-inline", { "vs-loader--center":
|
|
164
|
+
function I(e, n, t, o, i, c) {
|
|
165
|
+
return s(), l("div", {
|
|
166
|
+
class: u(["vs-inline", { "vs-loader--center": t.center }])
|
|
167
167
|
}, [
|
|
168
|
-
(s(),
|
|
169
|
-
color:
|
|
168
|
+
(s(), l("svg", {
|
|
169
|
+
color: t.color,
|
|
170
170
|
viewBox: "0 0 16 4",
|
|
171
|
-
width:
|
|
172
|
-
},
|
|
171
|
+
width: t.size * 4
|
|
172
|
+
}, P, 8, N))
|
|
173
173
|
], 2);
|
|
174
174
|
}
|
|
175
|
-
const
|
|
175
|
+
const F = /* @__PURE__ */ _(B, [["render", I]]);
|
|
176
|
+
const E = {
|
|
177
|
+
name: "VsSkeleton",
|
|
178
|
+
props: {
|
|
179
|
+
type: {
|
|
180
|
+
type: String,
|
|
181
|
+
default: "line",
|
|
182
|
+
validator: (e) => ["square", "line", "circle"].includes(e)
|
|
183
|
+
},
|
|
184
|
+
count: {
|
|
185
|
+
type: [Number, String],
|
|
186
|
+
default: 1
|
|
187
|
+
},
|
|
188
|
+
size: {
|
|
189
|
+
type: [Number, String],
|
|
190
|
+
default: null
|
|
191
|
+
},
|
|
192
|
+
width: {
|
|
193
|
+
type: String,
|
|
194
|
+
default: null
|
|
195
|
+
},
|
|
196
|
+
color: {
|
|
197
|
+
type: String,
|
|
198
|
+
default: null
|
|
199
|
+
},
|
|
200
|
+
center: {
|
|
201
|
+
type: Boolean
|
|
202
|
+
}
|
|
203
|
+
},
|
|
204
|
+
computed: {
|
|
205
|
+
containerStyle() {
|
|
206
|
+
return this.color ? { "--vs-skeleton-color": this.color } : {};
|
|
207
|
+
},
|
|
208
|
+
itemStyle() {
|
|
209
|
+
const e = {}, n = this.size != null ? typeof this.size == "number" ? `${this.size}px` : this.size : null;
|
|
210
|
+
return this.type === "line" ? (n && (e.height = n), this.width && (e.width = this.width)) : n && (e.width = n, e.height = n), e;
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
};
|
|
214
|
+
function R(e, n, t, o, i, c) {
|
|
215
|
+
return s(), l("div", {
|
|
216
|
+
class: u(["vs-skeleton", { "vs-loader--center": t.center }]),
|
|
217
|
+
style: a(c.containerStyle)
|
|
218
|
+
}, [
|
|
219
|
+
(s(!0), l(p, null, y(t.count, (d) => (s(), l("div", {
|
|
220
|
+
key: d,
|
|
221
|
+
class: u(["vs-skeleton__item", `vs-skeleton__item--${t.type}`]),
|
|
222
|
+
style: a(c.itemStyle)
|
|
223
|
+
}, null, 6))), 128))
|
|
224
|
+
], 6);
|
|
225
|
+
}
|
|
226
|
+
const q = /* @__PURE__ */ _(E, [["render", R]]), M = {
|
|
176
227
|
name: "VsLoader",
|
|
177
228
|
components: {
|
|
178
|
-
Pulse:
|
|
179
|
-
Dots:
|
|
180
|
-
Inline:
|
|
229
|
+
Pulse: x,
|
|
230
|
+
Dots: k,
|
|
231
|
+
Inline: F,
|
|
232
|
+
Skeleton: q
|
|
181
233
|
},
|
|
182
234
|
props: {
|
|
183
235
|
variant: {
|
|
@@ -195,18 +247,28 @@ const N = /* @__PURE__ */ l($, [["render", L]]), P = {
|
|
|
195
247
|
},
|
|
196
248
|
center: {
|
|
197
249
|
type: Boolean
|
|
250
|
+
},
|
|
251
|
+
// Skeleton-specific
|
|
252
|
+
type: {
|
|
253
|
+
type: String
|
|
254
|
+
},
|
|
255
|
+
count: {
|
|
256
|
+
type: [Number, String]
|
|
257
|
+
},
|
|
258
|
+
width: {
|
|
259
|
+
type: String
|
|
198
260
|
}
|
|
199
261
|
}
|
|
200
262
|
};
|
|
201
|
-
function
|
|
202
|
-
return s(),
|
|
263
|
+
function O(e, n, t, o, i, c) {
|
|
264
|
+
return s(), f(m(t.variant), v(h(e.$props)), null, 16);
|
|
203
265
|
}
|
|
204
|
-
const
|
|
205
|
-
install(
|
|
206
|
-
|
|
266
|
+
const T = /* @__PURE__ */ _(M, [["render", O]]), A = {
|
|
267
|
+
install(e) {
|
|
268
|
+
e.component("VsLoader", T);
|
|
207
269
|
}
|
|
208
270
|
};
|
|
209
271
|
export {
|
|
210
|
-
|
|
211
|
-
|
|
272
|
+
T as default,
|
|
273
|
+
A as plugin
|
|
212
274
|
};
|
package/dist/index.min.js
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(
|
|
2
|
-
var VsLoader=function(
|
|
3
|
-
`,document.head.appendChild(c);const B="",l=(r,a)=>{const e=r.__vccOpts||r;for(const[s,n]of a)e[s]=n;return e},m={name:"VsLoader",props:{color:{type:String,default:"#1f73b7"},size:{type:[Number,String],default:10},margin:{type:String,default:"3px"},radius:{type:String,default:"100%"},center:{type:Boolean}},data(){return{spinnerStyle:{backgroundColor:this.color,width:this.size+"px",height:this.size+"px",margin:this.margin,borderRadius:this.radius,display:"inline-block",animationName:"v-pulseStretchDelay",animationDuration:"0.75s",animationIterationCount:"infinite",animationTimingFunction:"cubic-bezier(.2,.68,.18,1.08)",animationFillMode:"both"},spinnerDelay1:{animationDelay:"0.12s"},spinnerDelay2:{animationDelay:"0.24s"},spinnerDelay3:{animationDelay:"0.36s"}}}};function f(r,a,e,s,n,i){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["vs-pulse",{"vs-loader--center":e.center}])},[t.createElementVNode("div",{style:t.normalizeStyle([n.spinnerStyle,n.spinnerDelay1])},null,4),t.createElementVNode("div",{style:t.normalizeStyle([n.spinnerStyle,n.spinnerDelay2])},null,4),t.createElementVNode("div",{style:t.normalizeStyle([n.spinnerStyle,n.spinnerDelay3])},null,4)],2)}const x=l(m,[["render",f]]),V="",d={name:"VsDotsLoader",props:{color:{type:String,default:"#1f73b7"},size:{type:[Number,String],default:10},center:{type:Boolean}}},y=["color","font-size"],_=[t.createElementVNode("g",{fill:"currentColor"},[t.createElementVNode("circle",{cy:"36",r:"9",cx:"9",class:"circle-one"}),t.createElementVNode("circle",{cy:"36",r:"9",cx:"40",class:"circle-two"}),t.createElementVNode("circle",{cy:"36",r:"9",cx:"71",class:"circle-three"})],-1)];function u(r,a,e,s,n,i){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["vs-dots",{"vs-loader--center":e.center}])},[(t.openBlock(),t.createElementBlock("svg",{color:e.color,"font-size":e.size,xmlns:"http://www.w3.org/2000/svg",focusable:"false",viewBox:"0 0 80 72",role:"progressbar"},_,8,y))],2)}const h=l(d,[["render",u]]),E="",g={name:"VsInlineLoader",props:{color:{type:String,default:"#1f73b7"},size:{type:[Number,String],default:10},center:{type:Boolean}}},v=["color","width"],k=[t.createElementVNode("circle",{cx:"14",fill:"currentColor",cy:"2",r:"2",class:"vs-inline--circle"},null,-1),t.createElementVNode("circle",{cx:"8",fill:"currentColor",cy:"2",r:"2",class:"vs-inline--circle"},null,-1),t.createElementVNode("circle",{cx:"2",fill:"currentColor",cy:"2",r:"2",class:"vs-inline--circle"},null,-1)];function b(r,a,e,s,n,i){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["vs-inline",{"vs-loader--center":e.center}])},[(t.openBlock(),t.createElementBlock("svg",{color:e.color,viewBox:"0 0 16 4",width:e.size*4},k,8,v))],2)}const S={name:"VsLoader",components:{Pulse:x,Dots:h,Inline:l(g,[["render",b]])},props:{variant:{type:String,default:"Pulse"},color:{type:String},size:{type:[Number,String]},margin:{type:String},center:{type:Boolean}}};function w(r,a,e,s,n,i){return t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.variant),t.normalizeProps(t.guardReactiveProps(r.$props)),null,16)}const p=l(S,[["render",w]]),z={install(r){r.component("VsLoader",p)}};return o.default=p,o.plugin=z,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),o}({},Vue);
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.id="vs-loader-styles",t.appendChild(document.createTextNode('.vs-pulse{display:flex}.vs-pulse.vs-loader--center{align-items:center;justify-content:center}@-webkit-keyframes v-pulseStretchDelay{0%,80%{-webkit-transform:scale(1);transform:scale(1);-webkit-opacity:1;opacity:1}45%{-webkit-transform:scale(.1);transform:scale(.1);-webkit-opacity:.7;opacity:.7}}@keyframes v-pulseStretchDelay{0%,80%{-webkit-transform:scale(1);transform:scale(1);-webkit-opacity:1;opacity:1}45%{-webkit-transform:scale(.1);transform:scale(.1);-webkit-opacity:.7;opacity:.7}}.vs-dots.vs-loader--center{display:flex;align-items:center;justify-content:center}.vs-dots svg{width:4.5em;margin:3px}.vs-dots .circle-one{animation:1.25s ease-in-out 0s infinite normal none running circleOneKeyframe}.vs-dots .circle-two{animation:1.25s ease-in-out 0s infinite normal none running circleTwoKeyframe}.vs-dots .circle-three{animation:1.25s ease-in-out 0s infinite normal none running circleThreeKeyframe}@keyframes circleOneKeyframe{0%{transform:translateY(5px)}3%{transform:translate(1px,-5px)}6%{transform:translate(3px,-15px)}8%{transform:translate(5px,-18px)}9%{transform:translate(7px,-21px)}11%{transform:translate(8px,-22px)}13%{transform:translate(9px,-23px)}16%{transform:translate(12px,-25px)}18%{transform:translate(13px,-26px)}23%{transform:translate(18px,-26px)}24%{transform:translate(19px,-25px)}28%{transform:translate(22px,-23px)}31%{transform:translate(24px,-21px)}33%{transform:translate(26px,-18px)}34%{transform:translate(28px,-14px)}36%{transform:translate(29px,-12px)}38%{transform:translate(30px,-5px)}39%{transform:translate(31px,5px)}54%{transform:translate(31px,3px)}59%{transform:translate(33px)}61%{transform:translate(43px)}63%{transform:translate(48px)}64%{transform:translate(51px)}66%{transform:translate(53px)}68%{transform:translate(55px)}69%{transform:translate(57px)}76%{transform:translate(60px)}81%{transform:translate(61px)}83%,to{transform:translate(62px)}}@keyframes circleTwoKeyframe{4%{transform:translate(0)}6%{transform:translate(-1px)}8%{transform:translate(-2px)}9%{transform:translate(-5px)}11%{transform:translate(-7px)}13%{transform:translate(-12px)}14%{transform:translate(-17px)}16%{transform:translate(-19px)}18%{transform:translate(-22px)}19%{transform:translate(-25px)}21%{transform:translate(-26px)}23%{transform:translate(-27px)}24%{transform:translate(-28px)}26%{transform:translate(-29px)}29%{transform:translate(-30px)}33%,89%{transform:translate(-31px)}91%{transform:translate(-31px,1px)}94%{transform:translate(-31px,2px)}98%{transform:translate(-31px,3px)}99%{transform:translate(-31px,4px)}to{transform:translate(-31px,5px)}}@keyframes circleThreeKeyframe{39%{transform:translate(0)}44%{transform:translateY(1px)}46%{transform:translateY(2px)}48%{transform:translateY(3px)}49%{transform:translateY(4px)}51%{transform:translateY(5px)}53%{transform:translate(-1px,-6px)}54%{transform:translate(-2px,-13px)}56%{transform:translate(-3px,-15px)}58%{transform:translate(-5px,-19px)}59%{transform:translate(-7px,-21px)}61%{transform:translate(-8px,-22px)}63%{transform:translate(-9px,-24px)}64%{transform:translate(-11px,-25px)}66%{transform:translate(-12px,-26px)}74%{transform:translate(-19px,-26px)}76%{transform:translate(-20px,-25px)}78%{transform:translate(-22px,-24px)}81%{transform:translate(-24px,-21px)}83%{transform:translate(-26px,-19px)}84%{transform:translate(-28px,-15px)}86%{transform:translate(-29px,-13px)}88%{transform:translate(-30px,-6px)}89%{transform:translate(-31px,5px)}91%{transform:translate(-31px,4px)}93%{transform:translate(-31px,3px)}94%{transform:translate(-31px,2px)}98%{transform:translate(-31px,1px)}to{transform:translate(-31px)}}.vs-inline.vs-loader--center{display:flex;align-items:center;justify-content:center}.vs-inline .vs-inline--circle{opacity:.2}.vs-inline .vs-inline--circle:nth-child(1){animation:pulseAnimation 1s infinite;animation-delay:.4s}.vs-inline .vs-inline--circle:nth-child(2){animation:pulseAnimation 1s infinite;animation-delay:.2s}.vs-inline .vs-inline--circle:nth-child(3){animation:pulseAnimation 1s infinite}@keyframes pulseAnimation{0%,to{opacity:.2}50%{opacity:.8}}.vs-skeleton{display:flex;flex-direction:column;gap:8px}.vs-skeleton.vs-loader--center{align-items:center;justify-content:center}.vs-skeleton__item{position:relative;overflow:hidden;background-color:var(--vs-skeleton-color, #e9e9e9)}.vs-skeleton__item--line{height:16px;width:100%;border-radius:4px}.vs-skeleton__item--square{width:80px;height:80px;border-radius:4px}.vs-skeleton__item--circle{width:40px;height:40px;border-radius:50%}.vs-skeleton__item:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background:linear-gradient(90deg,transparent 0%,var(--vs-skeleton-shimmer, rgba(255, 255, 255, .6)) 50%,transparent 100%);animation:vs-shimmer 1s infinite}@keyframes vs-shimmer{to{transform:translate(100%)}}')),document.head.appendChild(t)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
|
|
2
|
+
var VsLoader=function(c,e){"use strict";const $="",s=(t,l)=>{const n=t.__vccOpts||t;for(const[r,o]of l)n[r]=o;return n},d={name:"VsLoader",props:{color:{type:String,default:"#1f73b7"},size:{type:[Number,String],default:10},margin:{type:String,default:"3px"},radius:{type:String,default:"100%"},center:{type:Boolean}},data(){return{spinnerStyle:{backgroundColor:this.color,width:this.size+"px",height:this.size+"px",margin:this.margin,borderRadius:this.radius,display:"inline-block",animationName:"v-pulseStretchDelay",animationDuration:"0.75s",animationIterationCount:"infinite",animationTimingFunction:"cubic-bezier(.2,.68,.18,1.08)",animationFillMode:"both"},spinnerDelay1:{animationDelay:"0.12s"},spinnerDelay2:{animationDelay:"0.24s"},spinnerDelay3:{animationDelay:"0.36s"}}}};function _(t,l,n,r,o,i){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vs-pulse",{"vs-loader--center":n.center}])},[e.createElementVNode("div",{style:e.normalizeStyle([o.spinnerStyle,o.spinnerDelay1])},null,4),e.createElementVNode("div",{style:e.normalizeStyle([o.spinnerStyle,o.spinnerDelay2])},null,4),e.createElementVNode("div",{style:e.normalizeStyle([o.spinnerStyle,o.spinnerDelay3])},null,4)],2)}const p=s(d,[["render",_]]),D="",y={name:"VsDotsLoader",props:{color:{type:String,default:"#1f73b7"},size:{type:[Number,String],default:10},center:{type:Boolean}}},m=["color","font-size"],u=[e.createElementVNode("g",{fill:"currentColor"},[e.createElementVNode("circle",{cy:"36",r:"9",cx:"9",class:"circle-one"}),e.createElementVNode("circle",{cy:"36",r:"9",cx:"40",class:"circle-two"}),e.createElementVNode("circle",{cy:"36",r:"9",cx:"71",class:"circle-three"})],-1)];function f(t,l,n,r,o,i){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vs-dots",{"vs-loader--center":n.center}])},[(e.openBlock(),e.createElementBlock("svg",{color:n.color,"font-size":n.size,xmlns:"http://www.w3.org/2000/svg",focusable:"false",viewBox:"0 0 80 72",role:"progressbar"},u,8,m))],2)}const h=s(y,[["render",f]]),v="",g={name:"VsInlineLoader",props:{color:{type:String,default:"#1f73b7"},size:{type:[Number,String],default:10},center:{type:Boolean}}},S=["color","width"],k=[e.createElementVNode("circle",{cx:"14",fill:"currentColor",cy:"2",r:"2",class:"vs-inline--circle"},null,-1),e.createElementVNode("circle",{cx:"8",fill:"currentColor",cy:"2",r:"2",class:"vs-inline--circle"},null,-1),e.createElementVNode("circle",{cx:"2",fill:"currentColor",cy:"2",r:"2",class:"vs-inline--circle"},null,-1)];function z(t,l,n,r,o,i){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vs-inline",{"vs-loader--center":n.center}])},[(e.openBlock(),e.createElementBlock("svg",{color:n.color,viewBox:"0 0 16 4",width:n.size*4},k,8,S))],2)}const B=s(g,[["render",z]]),F="",b={name:"VsSkeleton",props:{type:{type:String,default:"line",validator:t=>["square","line","circle"].includes(t)},count:{type:[Number,String],default:1},size:{type:[Number,String],default:null},width:{type:String,default:null},color:{type:String,default:null},center:{type:Boolean}},computed:{containerStyle(){return this.color?{"--vs-skeleton-color":this.color}:{}},itemStyle(){const t={},l=this.size!=null?typeof this.size=="number"?`${this.size}px`:this.size:null;return this.type==="line"?(l&&(t.height=l),this.width&&(t.width=this.width)):l&&(t.width=l,t.height=l),t}}};function x(t,l,n,r,o,i){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vs-skeleton",{"vs-loader--center":n.center}]),style:e.normalizeStyle(i.containerStyle)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.count,w=>(e.openBlock(),e.createElementBlock("div",{key:w,class:e.normalizeClass(["vs-skeleton__item",`vs-skeleton__item--${n.type}`]),style:e.normalizeStyle(i.itemStyle)},null,6))),128))],6)}const V={name:"VsLoader",components:{Pulse:p,Dots:h,Inline:B,Skeleton:s(b,[["render",x]])},props:{variant:{type:String,default:"Pulse"},color:{type:String},size:{type:[Number,String]},margin:{type:String},center:{type:Boolean},type:{type:String},count:{type:[Number,String]},width:{type:String}}};function E(t,l,n,r,o,i){return e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.variant),e.normalizeProps(e.guardReactiveProps(t.$props)),null,16)}const a=s(V,[["render",E]]),N={install(t){t.component("VsLoader",a)}};return c.default=a,c.plugin=N,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),c}({},Vue);
|
package/dist/index.umd.js
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(
|
|
2
|
-
(function(
|
|
3
|
-
`,document.head.appendChild(c);const B="",l=(r,s)=>{const e=r.__vccOpts||r;for(const[o,n]of s)e[o]=n;return e},m={name:"VsLoader",props:{color:{type:String,default:"#1f73b7"},size:{type:[Number,String],default:10},margin:{type:String,default:"3px"},radius:{type:String,default:"100%"},center:{type:Boolean}},data(){return{spinnerStyle:{backgroundColor:this.color,width:this.size+"px",height:this.size+"px",margin:this.margin,borderRadius:this.radius,display:"inline-block",animationName:"v-pulseStretchDelay",animationDuration:"0.75s",animationIterationCount:"infinite",animationTimingFunction:"cubic-bezier(.2,.68,.18,1.08)",animationFillMode:"both"},spinnerDelay1:{animationDelay:"0.12s"},spinnerDelay2:{animationDelay:"0.24s"},spinnerDelay3:{animationDelay:"0.36s"}}}};function f(r,s,e,o,n,i){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["vs-pulse",{"vs-loader--center":e.center}])},[t.createElementVNode("div",{style:t.normalizeStyle([n.spinnerStyle,n.spinnerDelay1])},null,4),t.createElementVNode("div",{style:t.normalizeStyle([n.spinnerStyle,n.spinnerDelay2])},null,4),t.createElementVNode("div",{style:t.normalizeStyle([n.spinnerStyle,n.spinnerDelay3])},null,4)],2)}const x=l(m,[["render",f]]),V="",d={name:"VsDotsLoader",props:{color:{type:String,default:"#1f73b7"},size:{type:[Number,String],default:10},center:{type:Boolean}}},y=["color","font-size"],_=[t.createElementVNode("g",{fill:"currentColor"},[t.createElementVNode("circle",{cy:"36",r:"9",cx:"9",class:"circle-one"}),t.createElementVNode("circle",{cy:"36",r:"9",cx:"40",class:"circle-two"}),t.createElementVNode("circle",{cy:"36",r:"9",cx:"71",class:"circle-three"})],-1)];function u(r,s,e,o,n,i){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["vs-dots",{"vs-loader--center":e.center}])},[(t.openBlock(),t.createElementBlock("svg",{color:e.color,"font-size":e.size,xmlns:"http://www.w3.org/2000/svg",focusable:"false",viewBox:"0 0 80 72",role:"progressbar"},_,8,y))],2)}const h=l(d,[["render",u]]),E="",g={name:"VsInlineLoader",props:{color:{type:String,default:"#1f73b7"},size:{type:[Number,String],default:10},center:{type:Boolean}}},v=["color","width"],k=[t.createElementVNode("circle",{cx:"14",fill:"currentColor",cy:"2",r:"2",class:"vs-inline--circle"},null,-1),t.createElementVNode("circle",{cx:"8",fill:"currentColor",cy:"2",r:"2",class:"vs-inline--circle"},null,-1),t.createElementVNode("circle",{cx:"2",fill:"currentColor",cy:"2",r:"2",class:"vs-inline--circle"},null,-1)];function b(r,s,e,o,n,i){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["vs-inline",{"vs-loader--center":e.center}])},[(t.openBlock(),t.createElementBlock("svg",{color:e.color,viewBox:"0 0 16 4",width:e.size*4},k,8,v))],2)}const S={name:"VsLoader",components:{Pulse:x,Dots:h,Inline:l(g,[["render",b]])},props:{variant:{type:String,default:"Pulse"},color:{type:String},size:{type:[Number,String]},margin:{type:String},center:{type:Boolean}}};function w(r,s,e,o,n,i){return t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.variant),t.normalizeProps(t.guardReactiveProps(r.$props)),null,16)}const p=l(S,[["render",w]]),z={install(r){r.component("VsLoader",p)}};a.default=p,a.plugin=z,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.id="vs-loader-styles",t.appendChild(document.createTextNode('.vs-pulse{display:flex}.vs-pulse.vs-loader--center{align-items:center;justify-content:center}@-webkit-keyframes v-pulseStretchDelay{0%,80%{-webkit-transform:scale(1);transform:scale(1);-webkit-opacity:1;opacity:1}45%{-webkit-transform:scale(.1);transform:scale(.1);-webkit-opacity:.7;opacity:.7}}@keyframes v-pulseStretchDelay{0%,80%{-webkit-transform:scale(1);transform:scale(1);-webkit-opacity:1;opacity:1}45%{-webkit-transform:scale(.1);transform:scale(.1);-webkit-opacity:.7;opacity:.7}}.vs-dots.vs-loader--center{display:flex;align-items:center;justify-content:center}.vs-dots svg{width:4.5em;margin:3px}.vs-dots .circle-one{animation:1.25s ease-in-out 0s infinite normal none running circleOneKeyframe}.vs-dots .circle-two{animation:1.25s ease-in-out 0s infinite normal none running circleTwoKeyframe}.vs-dots .circle-three{animation:1.25s ease-in-out 0s infinite normal none running circleThreeKeyframe}@keyframes circleOneKeyframe{0%{transform:translateY(5px)}3%{transform:translate(1px,-5px)}6%{transform:translate(3px,-15px)}8%{transform:translate(5px,-18px)}9%{transform:translate(7px,-21px)}11%{transform:translate(8px,-22px)}13%{transform:translate(9px,-23px)}16%{transform:translate(12px,-25px)}18%{transform:translate(13px,-26px)}23%{transform:translate(18px,-26px)}24%{transform:translate(19px,-25px)}28%{transform:translate(22px,-23px)}31%{transform:translate(24px,-21px)}33%{transform:translate(26px,-18px)}34%{transform:translate(28px,-14px)}36%{transform:translate(29px,-12px)}38%{transform:translate(30px,-5px)}39%{transform:translate(31px,5px)}54%{transform:translate(31px,3px)}59%{transform:translate(33px)}61%{transform:translate(43px)}63%{transform:translate(48px)}64%{transform:translate(51px)}66%{transform:translate(53px)}68%{transform:translate(55px)}69%{transform:translate(57px)}76%{transform:translate(60px)}81%{transform:translate(61px)}83%,to{transform:translate(62px)}}@keyframes circleTwoKeyframe{4%{transform:translate(0)}6%{transform:translate(-1px)}8%{transform:translate(-2px)}9%{transform:translate(-5px)}11%{transform:translate(-7px)}13%{transform:translate(-12px)}14%{transform:translate(-17px)}16%{transform:translate(-19px)}18%{transform:translate(-22px)}19%{transform:translate(-25px)}21%{transform:translate(-26px)}23%{transform:translate(-27px)}24%{transform:translate(-28px)}26%{transform:translate(-29px)}29%{transform:translate(-30px)}33%,89%{transform:translate(-31px)}91%{transform:translate(-31px,1px)}94%{transform:translate(-31px,2px)}98%{transform:translate(-31px,3px)}99%{transform:translate(-31px,4px)}to{transform:translate(-31px,5px)}}@keyframes circleThreeKeyframe{39%{transform:translate(0)}44%{transform:translateY(1px)}46%{transform:translateY(2px)}48%{transform:translateY(3px)}49%{transform:translateY(4px)}51%{transform:translateY(5px)}53%{transform:translate(-1px,-6px)}54%{transform:translate(-2px,-13px)}56%{transform:translate(-3px,-15px)}58%{transform:translate(-5px,-19px)}59%{transform:translate(-7px,-21px)}61%{transform:translate(-8px,-22px)}63%{transform:translate(-9px,-24px)}64%{transform:translate(-11px,-25px)}66%{transform:translate(-12px,-26px)}74%{transform:translate(-19px,-26px)}76%{transform:translate(-20px,-25px)}78%{transform:translate(-22px,-24px)}81%{transform:translate(-24px,-21px)}83%{transform:translate(-26px,-19px)}84%{transform:translate(-28px,-15px)}86%{transform:translate(-29px,-13px)}88%{transform:translate(-30px,-6px)}89%{transform:translate(-31px,5px)}91%{transform:translate(-31px,4px)}93%{transform:translate(-31px,3px)}94%{transform:translate(-31px,2px)}98%{transform:translate(-31px,1px)}to{transform:translate(-31px)}}.vs-inline.vs-loader--center{display:flex;align-items:center;justify-content:center}.vs-inline .vs-inline--circle{opacity:.2}.vs-inline .vs-inline--circle:nth-child(1){animation:pulseAnimation 1s infinite;animation-delay:.4s}.vs-inline .vs-inline--circle:nth-child(2){animation:pulseAnimation 1s infinite;animation-delay:.2s}.vs-inline .vs-inline--circle:nth-child(3){animation:pulseAnimation 1s infinite}@keyframes pulseAnimation{0%,to{opacity:.2}50%{opacity:.8}}.vs-skeleton{display:flex;flex-direction:column;gap:8px}.vs-skeleton.vs-loader--center{align-items:center;justify-content:center}.vs-skeleton__item{position:relative;overflow:hidden;background-color:var(--vs-skeleton-color, #e9e9e9)}.vs-skeleton__item--line{height:16px;width:100%;border-radius:4px}.vs-skeleton__item--square{width:80px;height:80px;border-radius:4px}.vs-skeleton__item--circle{width:40px;height:40px;border-radius:50%}.vs-skeleton__item:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background:linear-gradient(90deg,transparent 0%,var(--vs-skeleton-shimmer, rgba(255, 255, 255, .6)) 50%,transparent 100%);animation:vs-shimmer 1s infinite}@keyframes vs-shimmer{to{transform:translate(100%)}}')),document.head.appendChild(t)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
|
|
2
|
+
(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.VsLoader={},i.Vue))})(this,function(i,e){"use strict";const $="",c=(t,l)=>{const n=t.__vccOpts||t;for(const[r,o]of l)n[r]=o;return n},d={name:"VsLoader",props:{color:{type:String,default:"#1f73b7"},size:{type:[Number,String],default:10},margin:{type:String,default:"3px"},radius:{type:String,default:"100%"},center:{type:Boolean}},data(){return{spinnerStyle:{backgroundColor:this.color,width:this.size+"px",height:this.size+"px",margin:this.margin,borderRadius:this.radius,display:"inline-block",animationName:"v-pulseStretchDelay",animationDuration:"0.75s",animationIterationCount:"infinite",animationTimingFunction:"cubic-bezier(.2,.68,.18,1.08)",animationFillMode:"both"},spinnerDelay1:{animationDelay:"0.12s"},spinnerDelay2:{animationDelay:"0.24s"},spinnerDelay3:{animationDelay:"0.36s"}}}};function _(t,l,n,r,o,s){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vs-pulse",{"vs-loader--center":n.center}])},[e.createElementVNode("div",{style:e.normalizeStyle([o.spinnerStyle,o.spinnerDelay1])},null,4),e.createElementVNode("div",{style:e.normalizeStyle([o.spinnerStyle,o.spinnerDelay2])},null,4),e.createElementVNode("div",{style:e.normalizeStyle([o.spinnerStyle,o.spinnerDelay3])},null,4)],2)}const p=c(d,[["render",_]]),D="",y={name:"VsDotsLoader",props:{color:{type:String,default:"#1f73b7"},size:{type:[Number,String],default:10},center:{type:Boolean}}},m=["color","font-size"],u=[e.createElementVNode("g",{fill:"currentColor"},[e.createElementVNode("circle",{cy:"36",r:"9",cx:"9",class:"circle-one"}),e.createElementVNode("circle",{cy:"36",r:"9",cx:"40",class:"circle-two"}),e.createElementVNode("circle",{cy:"36",r:"9",cx:"71",class:"circle-three"})],-1)];function f(t,l,n,r,o,s){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vs-dots",{"vs-loader--center":n.center}])},[(e.openBlock(),e.createElementBlock("svg",{color:n.color,"font-size":n.size,xmlns:"http://www.w3.org/2000/svg",focusable:"false",viewBox:"0 0 80 72",role:"progressbar"},u,8,m))],2)}const h=c(y,[["render",f]]),v="",g={name:"VsInlineLoader",props:{color:{type:String,default:"#1f73b7"},size:{type:[Number,String],default:10},center:{type:Boolean}}},S=["color","width"],k=[e.createElementVNode("circle",{cx:"14",fill:"currentColor",cy:"2",r:"2",class:"vs-inline--circle"},null,-1),e.createElementVNode("circle",{cx:"8",fill:"currentColor",cy:"2",r:"2",class:"vs-inline--circle"},null,-1),e.createElementVNode("circle",{cx:"2",fill:"currentColor",cy:"2",r:"2",class:"vs-inline--circle"},null,-1)];function z(t,l,n,r,o,s){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vs-inline",{"vs-loader--center":n.center}])},[(e.openBlock(),e.createElementBlock("svg",{color:n.color,viewBox:"0 0 16 4",width:n.size*4},k,8,S))],2)}const B=c(g,[["render",z]]),T="",x={name:"VsSkeleton",props:{type:{type:String,default:"line",validator:t=>["square","line","circle"].includes(t)},count:{type:[Number,String],default:1},size:{type:[Number,String],default:null},width:{type:String,default:null},color:{type:String,default:null},center:{type:Boolean}},computed:{containerStyle(){return this.color?{"--vs-skeleton-color":this.color}:{}},itemStyle(){const t={},l=this.size!=null?typeof this.size=="number"?`${this.size}px`:this.size:null;return this.type==="line"?(l&&(t.height=l),this.width&&(t.width=this.width)):l&&(t.width=l,t.height=l),t}}};function b(t,l,n,r,o,s){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vs-skeleton",{"vs-loader--center":n.center}]),style:e.normalizeStyle(s.containerStyle)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.count,w=>(e.openBlock(),e.createElementBlock("div",{key:w,class:e.normalizeClass(["vs-skeleton__item",`vs-skeleton__item--${n.type}`]),style:e.normalizeStyle(s.itemStyle)},null,6))),128))],6)}const V={name:"VsLoader",components:{Pulse:p,Dots:h,Inline:B,Skeleton:c(x,[["render",b]])},props:{variant:{type:String,default:"Pulse"},color:{type:String},size:{type:[Number,String]},margin:{type:String},center:{type:Boolean},type:{type:String},count:{type:[Number,String]},width:{type:String}}};function E(t,l,n,r,o,s){return e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.variant),e.normalizeProps(e.guardReactiveProps(t.$props)),null,16)}const a=c(V,[["render",E]]),N={install(t){t.component("VsLoader",a)}};i.default=a,i.plugin=N,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vuesimple/vs-loader",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.7",
|
|
4
4
|
"description": "A simple vue loader. Perfect for all your loader scenarios.",
|
|
5
5
|
"main": "dist/index.umd.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -21,7 +21,8 @@
|
|
|
21
21
|
"url": "git+https://github.com/ashwinkshenoy/vue-simple.git"
|
|
22
22
|
},
|
|
23
23
|
"publishConfig": {
|
|
24
|
-
"registry": "https://registry.npmjs.org"
|
|
24
|
+
"registry": "https://registry.npmjs.org",
|
|
25
|
+
"access": "public"
|
|
25
26
|
},
|
|
26
27
|
"keywords": [
|
|
27
28
|
"vue",
|
|
@@ -43,5 +44,5 @@
|
|
|
43
44
|
"url": "https://github.com/ashwinkshenoy/vue-simple/issues"
|
|
44
45
|
},
|
|
45
46
|
"homepage": "https://github.com/ashwinkshenoy/vue-simple",
|
|
46
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "2002c260f34ce422b53c85326fbac4ae675a5cb5"
|
|
47
48
|
}
|
package/src/vs-loader.vue
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
import Pulse from './vs-pulse.vue';
|
|
7
7
|
import Dots from './vs-dots.vue';
|
|
8
8
|
import Inline from './vs-inline.vue';
|
|
9
|
+
import Skeleton from './vs-skeleton.vue';
|
|
9
10
|
|
|
10
11
|
export default {
|
|
11
12
|
name: 'VsLoader',
|
|
@@ -14,6 +15,7 @@
|
|
|
14
15
|
Pulse,
|
|
15
16
|
Dots,
|
|
16
17
|
Inline,
|
|
18
|
+
Skeleton,
|
|
17
19
|
},
|
|
18
20
|
|
|
19
21
|
props: {
|
|
@@ -33,6 +35,16 @@
|
|
|
33
35
|
center: {
|
|
34
36
|
type: Boolean,
|
|
35
37
|
},
|
|
38
|
+
// Skeleton-specific
|
|
39
|
+
type: {
|
|
40
|
+
type: String,
|
|
41
|
+
},
|
|
42
|
+
count: {
|
|
43
|
+
type: [Number, String],
|
|
44
|
+
},
|
|
45
|
+
width: {
|
|
46
|
+
type: String,
|
|
47
|
+
},
|
|
36
48
|
},
|
|
37
49
|
};
|
|
38
50
|
</script>
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div :class="['vs-skeleton', { 'vs-loader--center': center }]" :style="containerStyle">
|
|
3
|
+
<div
|
|
4
|
+
v-for="i in count"
|
|
5
|
+
:key="i"
|
|
6
|
+
class="vs-skeleton__item"
|
|
7
|
+
:class="`vs-skeleton__item--${type}`"
|
|
8
|
+
:style="itemStyle"
|
|
9
|
+
></div>
|
|
10
|
+
</div>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script>
|
|
14
|
+
export default {
|
|
15
|
+
name: 'VsSkeleton',
|
|
16
|
+
|
|
17
|
+
props: {
|
|
18
|
+
type: {
|
|
19
|
+
type: String,
|
|
20
|
+
default: 'line',
|
|
21
|
+
validator: val => ['square', 'line', 'circle'].includes(val),
|
|
22
|
+
},
|
|
23
|
+
count: {
|
|
24
|
+
type: [Number, String],
|
|
25
|
+
default: 1,
|
|
26
|
+
},
|
|
27
|
+
size: {
|
|
28
|
+
type: [Number, String],
|
|
29
|
+
default: null,
|
|
30
|
+
},
|
|
31
|
+
width: {
|
|
32
|
+
type: String,
|
|
33
|
+
default: null,
|
|
34
|
+
},
|
|
35
|
+
color: {
|
|
36
|
+
type: String,
|
|
37
|
+
default: null,
|
|
38
|
+
},
|
|
39
|
+
center: {
|
|
40
|
+
type: Boolean,
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
|
|
44
|
+
computed: {
|
|
45
|
+
containerStyle() {
|
|
46
|
+
return this.color ? { '--vs-skeleton-color': this.color } : {};
|
|
47
|
+
},
|
|
48
|
+
|
|
49
|
+
itemStyle() {
|
|
50
|
+
const style = {};
|
|
51
|
+
const sz = this.size != null ? (typeof this.size === 'number' ? `${this.size}px` : this.size) : null;
|
|
52
|
+
|
|
53
|
+
if (this.type === 'line') {
|
|
54
|
+
if (sz) style.height = sz;
|
|
55
|
+
if (this.width) style.width = this.width;
|
|
56
|
+
} else {
|
|
57
|
+
if (sz) {
|
|
58
|
+
style.width = sz;
|
|
59
|
+
style.height = sz;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
return style;
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
};
|
|
67
|
+
</script>
|
|
68
|
+
|
|
69
|
+
<style lang="scss">
|
|
70
|
+
$el: '.vs-skeleton';
|
|
71
|
+
|
|
72
|
+
#{$el} {
|
|
73
|
+
display: flex;
|
|
74
|
+
flex-direction: column;
|
|
75
|
+
gap: 8px;
|
|
76
|
+
|
|
77
|
+
&.vs-loader--center {
|
|
78
|
+
align-items: center;
|
|
79
|
+
justify-content: center;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
&__item {
|
|
83
|
+
position: relative;
|
|
84
|
+
overflow: hidden;
|
|
85
|
+
background-color: var(--vs-skeleton-color, #e9e9e9);
|
|
86
|
+
|
|
87
|
+
&--line {
|
|
88
|
+
height: 16px;
|
|
89
|
+
width: 100%;
|
|
90
|
+
border-radius: 4px;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
&--square {
|
|
94
|
+
width: 80px;
|
|
95
|
+
height: 80px;
|
|
96
|
+
border-radius: 4px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
&--circle {
|
|
100
|
+
width: 40px;
|
|
101
|
+
height: 40px;
|
|
102
|
+
border-radius: 50%;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
&::after {
|
|
106
|
+
content: '';
|
|
107
|
+
position: absolute;
|
|
108
|
+
inset: 0;
|
|
109
|
+
transform: translateX(-100%);
|
|
110
|
+
background: linear-gradient(
|
|
111
|
+
90deg,
|
|
112
|
+
transparent 0%,
|
|
113
|
+
var(--vs-skeleton-shimmer, rgba(255, 255, 255, 0.6)) 50%,
|
|
114
|
+
transparent 100%
|
|
115
|
+
);
|
|
116
|
+
animation: vs-shimmer 1s infinite;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
@keyframes vs-shimmer {
|
|
121
|
+
100% {
|
|
122
|
+
transform: translateX(100%);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
</style>
|