veload 0.1.0 → 0.1.1
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 +59 -620
- package/dist/components/VPatternSkeleton/presets.d.ts +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +3 -3
- package/dist/style.css +1 -1
- package/package.json +18 -4
package/README.md
CHANGED
|
@@ -1,70 +1,35 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Veload
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Accessible loading UI for Vue 3: animated loaders, skeleton placeholders, progress indicators, and loading-state components with TypeScript support.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Key features
|
|
6
6
|
|
|
7
|
-
- `VSpinner`
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
|
|
16
|
-
> **Release status:** Veloader is licensed under MIT and is being prepared
|
|
17
|
-
> for its first public npm release. It is not yet published, so the install
|
|
18
|
-
> command below becomes usable only after the release is verified on npm.
|
|
7
|
+
- `VSpinner`, `VLoader`, and 36 individually importable loader components.
|
|
8
|
+
- Skeleton primitives, patterns, and named layout presets.
|
|
9
|
+
- Determinate and indeterminate progress indicators.
|
|
10
|
+
- Loading overlays and a loading-aware button.
|
|
11
|
+
- Composables for tracking, delaying, and grouping async loading states.
|
|
12
|
+
- TypeScript declarations and a shared stylesheet.
|
|
13
|
+
- Accessible status and progress semantics, plus reduced-motion support.
|
|
14
|
+
- Vue components that can be rendered with Nuxt SSR.
|
|
19
15
|
|
|
20
16
|
## Installation
|
|
21
17
|
|
|
22
|
-
|
|
23
|
-
npm; consumers can then install the published package with:
|
|
18
|
+
Veload requires Vue `^3.5.2` as a peer dependency.
|
|
24
19
|
|
|
25
20
|
```bash
|
|
26
21
|
npm install veload
|
|
27
22
|
```
|
|
28
23
|
|
|
29
|
-
|
|
30
|
-
compatible Vue 3 release, below Vue 4. Vue 3.0–3.4 are not supported by this
|
|
31
|
-
range. The generated declarations rely on Vue 3.5 type definitions. Use a
|
|
32
|
-
Vue application toolchain such as Vite with its Vue plugin or Nuxt; the
|
|
33
|
-
library itself ships compiled JavaScript, not SFCs consumers need to build.
|
|
34
|
-
|
|
35
|
-
No local library build, repository checkout, linking, or tarball is part of
|
|
36
|
-
the future public consumer workflow. Authorized repository development is
|
|
37
|
-
covered separately under [Local maintainer workflow](#local-maintainer-workflow).
|
|
38
|
-
|
|
39
|
-
The public entry points are:
|
|
40
|
-
|
|
41
|
-
| Import | Exported files |
|
|
42
|
-
| --- | --- |
|
|
43
|
-
| `veload` | Named ESM exports (`dist/index.js`), CommonJS (`dist/index.cjs`), and declarations (`dist/index.d.ts`). |
|
|
44
|
-
| `veload/style.css` | The extracted component stylesheet (`dist/style.css`). |
|
|
45
|
-
|
|
46
|
-
Import from these public paths, not internal source or `dist` subpaths.
|
|
47
|
-
|
|
48
|
-
### Stylesheet
|
|
49
|
-
|
|
50
|
-
Component styles are extracted into `dist/style.css`. Import it once in your
|
|
51
|
-
application entry point or root component:
|
|
24
|
+
Import the stylesheet once in your application entry point:
|
|
52
25
|
|
|
53
26
|
```ts
|
|
54
27
|
import "veload/style.css";
|
|
55
28
|
```
|
|
56
29
|
|
|
57
|
-
|
|
58
|
-
the components render without their intended appearance and animations.
|
|
30
|
+
## Quick Start
|
|
59
31
|
|
|
60
|
-
|
|
61
|
-
per component. The ESM JavaScript entry point is tree-shakeable, so a
|
|
62
|
-
production bundler can remove unused components, but that does not trim the
|
|
63
|
-
shared CSS. Maintainers can run `npm run check:bundle` and
|
|
64
|
-
`npm run check:consumer` for measurements against the current packed build;
|
|
65
|
-
payload sizes change as the collection grows.
|
|
66
|
-
|
|
67
|
-
## Quick start
|
|
32
|
+
Use Veload in a Vue 3 + TypeScript single-file component. This example simulates an async operation; replace it with your application’s work.
|
|
68
33
|
|
|
69
34
|
```vue
|
|
70
35
|
<script setup lang="ts">
|
|
@@ -73,627 +38,101 @@ import { VLoading, useLoading } from "veload";
|
|
|
73
38
|
import "veload/style.css";
|
|
74
39
|
|
|
75
40
|
const { isLoading, execute } = useLoading();
|
|
76
|
-
const message = ref
|
|
41
|
+
const message = ref("Not loaded yet");
|
|
77
42
|
|
|
78
43
|
async function load() {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
return (await response.json()) as string;
|
|
84
|
-
});
|
|
85
|
-
} catch (error) {
|
|
86
|
-
message.value = error instanceof Error ? error.message : "Unknown error";
|
|
87
|
-
}
|
|
44
|
+
await execute(async () => {
|
|
45
|
+
await new Promise<void>((resolve) => setTimeout(resolve, 400));
|
|
46
|
+
message.value = "Ready";
|
|
47
|
+
});
|
|
88
48
|
}
|
|
89
49
|
</script>
|
|
90
50
|
|
|
91
51
|
<template>
|
|
92
52
|
<VLoading :loading="isLoading" label="Loading message">
|
|
93
|
-
<button type="button" @click="load">
|
|
94
|
-
<p
|
|
53
|
+
<button type="button" @click="load">Load message</button>
|
|
54
|
+
<p>{{ message }}</p>
|
|
95
55
|
</VLoading>
|
|
96
56
|
</template>
|
|
97
57
|
```
|
|
98
58
|
|
|
99
|
-
|
|
100
|
-
provided by Veloader. The request runs only on a user click, and the
|
|
101
|
-
application handles its errors. In `<script setup>`, imported components are
|
|
102
|
-
available in the template without registration.
|
|
59
|
+
## Components and composables
|
|
103
60
|
|
|
104
|
-
|
|
61
|
+
All components and composables are named exports from `veload`; there is no plugin to register with `app.use()`.
|
|
105
62
|
|
|
106
|
-
|
|
107
|
-
plugin installation step, or global loading manager. For Options API
|
|
108
|
-
components, import the components and add them to `components`. To opt into
|
|
109
|
-
Vue's global registration instead, register individual exports in `main.ts`:
|
|
63
|
+
**Loading and progress:** `VSpinner`, `VProgress`, `VLoading`, `VLoadingButton`.
|
|
110
64
|
|
|
111
|
-
|
|
112
|
-
import { createApp } from "vue";
|
|
113
|
-
import { VSpinner } from "veload";
|
|
114
|
-
import "veload/style.css";
|
|
115
|
-
import App from "./App.vue";
|
|
65
|
+
**Loader collection:** `VLoader` selects a treatment with its `variant` prop. Individual loader components are also exported:
|
|
116
66
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
67
|
+
- **Motion:** `VBarsLoader`, `VBounceLoader`, `VDotsLoader`, `VDotSweepLoader`, `VEqualizerLoader`, `VSlidingBarsLoader`, `VSpinLoader`, `VSpinDotsLoader`, `VTypingLoader`, `VWaveLoader`.
|
|
68
|
+
- **Circular:** `VBreathingLoader`, `VDualArcLoader`, `VGradientRingLoader`, `VOrbitDotsLoader`, `VOrbitLoader`, `VProgressRingLoader`, `VPulseLoader`, `VRingLoader`, `VRippleLoader`, `VRotateLoader`, `VSignalLoader`, `VSnakeLoader`.
|
|
69
|
+
- **Geometric:** `VBlobLoader`, `VCardFlipLoader`, `VElementLoader`, `VFlowLoader`, `VGridLoader`, `VHashtagLoader`, `VHeatmapLoader`, `VLiquidLoader`, `VLogoSpinLoader`, `VMorphLoader`, `VPlaneLoader`, `VSquaresLoader`, `VStairLoader`.
|
|
70
|
+
- **Utility:** `VFallbackLoader`.
|
|
121
71
|
|
|
122
|
-
|
|
123
|
-
registration does not automatically declare components for Vue's template
|
|
124
|
-
type checker. Prefer local imports, or add a Vue `GlobalComponents` type
|
|
125
|
-
augmentation in the consuming app if global template typing is needed.
|
|
72
|
+
**Skeletons:** `VSkeleton` (`VSkeletonLoader` alias), `VPatternSkeleton`, `VSkeletonGroup`, `VSkeletonSwitch`, `VAutoSkeleton`, and the presets `VArticleSkeleton`, `VCardSkeleton`, `VDashboardSkeleton`, `VFeedSkeleton`, `VFormSkeleton`, `VListSkeleton`, `VMediaCardSkeleton`, `VProductCardSkeleton`, `VProfileSkeleton`, and `VTableSkeleton`.
|
|
126
73
|
|
|
127
|
-
|
|
74
|
+
**Composables:** `useLoading()`, `useDelayedLoading(options?)`, and `useLoadingGroup(sources)`.
|
|
128
75
|
|
|
129
|
-
|
|
76
|
+
## Usage examples
|
|
130
77
|
|
|
131
|
-
|
|
132
|
-
// nuxt.config.ts
|
|
133
|
-
export default defineNuxtConfig({
|
|
134
|
-
css: ["veload/style.css"],
|
|
135
|
-
});
|
|
136
|
-
```
|
|
137
|
-
|
|
138
|
-
Import components directly in page or component SFCs. No Nuxt module,
|
|
139
|
-
client-only plugin, or `<ClientOnly>` wrapper is required to render them.
|
|
140
|
-
Use Nuxt's `useFetch` or `useAsyncData` for initial server data so Nuxt reuses
|
|
141
|
-
the server payload during hydration:
|
|
78
|
+
### Loader and skeleton
|
|
142
79
|
|
|
143
80
|
```vue
|
|
144
|
-
<
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
await useFetch<string>("/api/message");
|
|
149
|
-
</script>
|
|
150
|
-
|
|
151
|
-
<template>
|
|
152
|
-
<VLoading :loading="status === 'pending'" label="Loading message">
|
|
153
|
-
<button type="button" @click="refresh()">Reload</button>
|
|
154
|
-
<p v-if="error">Could not load the message.</p>
|
|
155
|
-
<p v-else-if="message">{{ message }}</p>
|
|
156
|
-
</VLoading>
|
|
157
|
-
</template>
|
|
81
|
+
<VSpinner :size="32" label="Loading products" />
|
|
82
|
+
<VLoader variant="wave" label="Loading results" />
|
|
83
|
+
<VSkeleton variant="rect" width="100%" height="8rem" />
|
|
84
|
+
<VCardSkeleton />
|
|
158
85
|
```
|
|
159
86
|
|
|
160
|
-
|
|
161
|
-
not at module scope where their mutable state could leak across SSR
|
|
162
|
-
requests. `useLoading` and `useDelayedLoading` track user-triggered work;
|
|
163
|
-
they do not replace Nuxt's data fetching or payload handling. Keep
|
|
164
|
-
browser-only code in event handlers or `onMounted` and use matching initial
|
|
165
|
-
state on the server and client to avoid hydration mismatches.
|
|
166
|
-
|
|
167
|
-
## Components
|
|
168
|
-
|
|
169
|
-
### `VSpinner`
|
|
170
|
-
|
|
171
|
-
An accessible CSS spinner with a customizable size and accent color.
|
|
87
|
+
### Progress
|
|
172
88
|
|
|
173
89
|
```vue
|
|
174
|
-
<VSpinner />
|
|
175
|
-
<VSpinner :size="40" color="#22C55E" label="Loading products" />
|
|
176
|
-
```
|
|
177
|
-
|
|
178
|
-
| Prop | Type | Default | Description |
|
|
179
|
-
|---|---|---|---|
|
|
180
|
-
| `size` | `number` | `24` | Diameter in pixels. Negative and non-finite values are normalized. |
|
|
181
|
-
| `color` | `string` | `"currentColor"` | Accent color of the active edge. |
|
|
182
|
-
| `label` | `string` | `"Loading"` | Accessible name for `role="status"`. A blank label makes the spinner decorative. |
|
|
183
|
-
| `decorative` | `boolean` | `false` | Hides the spinner from assistive technology. Use when an ancestor already announces loading. |
|
|
184
|
-
|
|
185
|
-
The visual ring is always `aria-hidden`; only the root status element is
|
|
186
|
-
announced. The spinner itself does not animate under
|
|
187
|
-
`prefers-reduced-motion: reduce`.
|
|
188
|
-
|
|
189
|
-
### `VSkeleton`
|
|
190
|
-
|
|
191
|
-
A placeholder primitive for text, rectangles, and circles.
|
|
192
|
-
|
|
193
|
-
```vue
|
|
194
|
-
<!-- A single line of text -->
|
|
195
|
-
<VSkeleton />
|
|
196
|
-
|
|
197
|
-
<!-- A card-sized rectangle -->
|
|
198
|
-
<VSkeleton variant="rect" width="100%" height="12rem" />
|
|
199
|
-
|
|
200
|
-
<!-- An avatar -->
|
|
201
|
-
<VSkeleton variant="circle" :width="48" label="Loading avatar" />
|
|
202
|
-
|
|
203
|
-
<!-- Static, no shimmer -->
|
|
204
|
-
<VSkeleton variant="rect" :animated="false" height="2rem" />
|
|
205
|
-
```
|
|
206
|
-
|
|
207
|
-
| Prop | Type | Default | Description |
|
|
208
|
-
|---|---|---|---|
|
|
209
|
-
| `variant` | `"text" \| "rect" \| "circle"` | `"text"` | Placeholder shape. Unknown runtime values fall back to `"text"`. |
|
|
210
|
-
| `width` | `number \| string` | `100%` (`40px` for circles) | Pixel number or CSS length. |
|
|
211
|
-
| `height` | `number \| string` | `1em` for text, `6rem` for rectangles, square for circles | Pixel number or CSS length. |
|
|
212
|
-
| `borderRadius` | `number \| string` | Shape-dependent | Overrides the default radius. |
|
|
213
|
-
| `animated` | `boolean` | `true` | Enables the shimmer. Reduced-motion preferences always disable it. |
|
|
214
|
-
| `label` | `string` | — | When provided, the skeleton becomes a `role="status"` placeholder. Without a label it is `aria-hidden`. |
|
|
215
|
-
|
|
216
|
-
For simple layouts, compose the primitive with application spacing. For common
|
|
217
|
-
application layouts, see the named skeleton presets in the [Skeleton collection](#skeleton-collection).
|
|
218
|
-
|
|
219
|
-
### `VProgress`
|
|
220
|
-
|
|
221
|
-
A progress bar for known and unknown totals.
|
|
222
|
-
|
|
223
|
-
```vue
|
|
224
|
-
<!-- Determinate -->
|
|
225
90
|
<VProgress :value="42" label="Uploading files" value-text="42%" />
|
|
226
|
-
|
|
227
|
-
<!-- Indeterminate -->
|
|
228
91
|
<VProgress label="Preparing download" />
|
|
229
|
-
|
|
230
|
-
<!-- Custom range and appearance -->
|
|
231
|
-
<VProgress
|
|
232
|
-
:value="3"
|
|
233
|
-
:max="10"
|
|
234
|
-
label="Steps completed"
|
|
235
|
-
value-text="3 of 10 steps"
|
|
236
|
-
height="1rem"
|
|
237
|
-
color="#16A34A"
|
|
238
|
-
/>
|
|
239
92
|
```
|
|
240
93
|
|
|
241
|
-
|
|
242
|
-
|---|---|---|---|
|
|
243
|
-
| `value` | `number \| null` | `null` | Current value. Omit or pass `null`/`NaN` for indeterminate progress. |
|
|
244
|
-
| `min` | `number` | `0` | Range lower bound. |
|
|
245
|
-
| `max` | `number` | `100` | Range upper bound. |
|
|
246
|
-
| `label` | `string` | `"Progress"` | Accessible name. A blank label omits `aria-label`. |
|
|
247
|
-
| `valueText` | `string` | — | Human-readable value exposed through `aria-valuetext`. Only used while determinate. |
|
|
248
|
-
| `height` | `number \| string` | `8` | Bar thickness in pixels or any CSS length. |
|
|
249
|
-
| `color` | `string` | `#2563eb` | Filled bar color. Overrides `--v-progress-color`. |
|
|
250
|
-
| `trackColor` | `string` | `#e2e8f0` | Track color. Overrides `--v-progress-track-color`. |
|
|
251
|
-
|
|
252
|
-
Values are clamped to `[min, max]`. A non-finite value or an invalid range
|
|
253
|
-
(`max <= min`) produces indeterminate progress with no `aria-valuenow`.
|
|
254
|
-
Indeterminate progress does not claim a completion percentage.
|
|
255
|
-
|
|
256
|
-
### `VLoading`
|
|
257
|
-
|
|
258
|
-
A positioned overlay around content.
|
|
259
|
-
|
|
260
|
-
```vue
|
|
261
|
-
<VLoading :loading="isLoading" label="Loading products">
|
|
262
|
-
<ProductList />
|
|
263
|
-
</VLoading>
|
|
264
|
-
|
|
265
|
-
<!-- Keep content interactive while the overlay is visible -->
|
|
266
|
-
<VLoading :loading="isLoading" :inert-content="false" label="Refreshing">
|
|
267
|
-
<ProductList />
|
|
268
|
-
</VLoading>
|
|
269
|
-
|
|
270
|
-
<!-- Custom indicator -->
|
|
271
|
-
<VLoading :loading="isLoading" label="Loading products">
|
|
272
|
-
<ProductList />
|
|
273
|
-
|
|
274
|
-
<template #indicator>
|
|
275
|
-
<span class="my-loader">Please wait…</span>
|
|
276
|
-
</template>
|
|
277
|
-
</VLoading>
|
|
278
|
-
```
|
|
279
|
-
|
|
280
|
-
| Prop | Type | Default | Description |
|
|
281
|
-
|---|---|---|---|
|
|
282
|
-
| `loading` | `boolean` | `false` | Shows the overlay and sets `aria-busy`. |
|
|
283
|
-
| `label` | `string` | `"Loading"` | Loading message. Visually hidden, announced by `role="status"`. A blank label removes the status role and hides the overlay from assistive technology. |
|
|
284
|
-
| `inertContent` | `boolean` | `true` | Makes wrapped content inert while loading. |
|
|
285
|
-
| `indicatorSize` | `number` | `28` | Size of the built-in spinner. |
|
|
286
|
-
|
|
287
|
-
Slots:
|
|
94
|
+
Omit `value` for an indeterminate progress bar.
|
|
288
95
|
|
|
289
|
-
-
|
|
290
|
-
- `indicator` — replaces the built-in spinner.
|
|
291
|
-
|
|
292
|
-
The overlay is absolutely positioned, so showing and hiding it does not change
|
|
293
|
-
the content's layout. The wrapper establishes a stacking context
|
|
294
|
-
(`isolation: isolate`) and the overlay defaults to `z-index: 10`. Give the
|
|
295
|
-
wrapper a height (or content) when it is not otherwise sized. When
|
|
296
|
-
`inertContent` is `true` (the default), the content is inert and the overlay
|
|
297
|
-
intercepts pointer events; when `false`, the overlay does not intercept pointer
|
|
298
|
-
events and content remains interactive. `inert` is supported by modern
|
|
299
|
-
browsers; older browsers may still allow interaction with content beneath the
|
|
300
|
-
overlay.
|
|
301
|
-
|
|
302
|
-
### `VLoadingButton`
|
|
303
|
-
|
|
304
|
-
A native `<button>` with a loading state.
|
|
96
|
+
### Loading-aware button
|
|
305
97
|
|
|
306
98
|
```vue
|
|
307
|
-
<
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
const { isLoading, execute } = useLoading();
|
|
311
|
-
|
|
312
|
-
function save() {
|
|
313
|
-
return execute(async () => {
|
|
314
|
-
await fetch("/api/save", { method: "POST" });
|
|
315
|
-
});
|
|
316
|
-
}
|
|
317
|
-
</script>
|
|
318
|
-
|
|
319
|
-
<template>
|
|
320
|
-
<VLoadingButton :loading="isLoading" type="submit" @click="save">
|
|
321
|
-
Save changes
|
|
322
|
-
</VLoadingButton>
|
|
323
|
-
</template>
|
|
99
|
+
<VLoadingButton :loading="isSaving" type="submit">
|
|
100
|
+
Save changes
|
|
101
|
+
</VLoadingButton>
|
|
324
102
|
```
|
|
325
103
|
|
|
326
|
-
|
|
327
|
-
|---|---|---|---|
|
|
328
|
-
| `loading` | `boolean` | `false` | Disables the button, sets `aria-busy="true"`, and shows an indicator. |
|
|
329
|
-
| `disabled` | `boolean` | `false` | Native disabled state. The button is also disabled while loading. |
|
|
330
|
-
| `type` | `"button" \| "submit" \| "reset"` | `"button"` | Native button type. The safe default avoids accidental form submission. |
|
|
331
|
-
| `indicatorSize` | `number` | `16` | Size of the built-in spinner. |
|
|
332
|
-
|
|
333
|
-
Slots:
|
|
334
|
-
|
|
335
|
-
- `default` — button label/content. It remains in the accessibility tree and
|
|
336
|
-
keeps its space while loading.
|
|
337
|
-
- `indicator` — replaces the built-in spinner.
|
|
338
|
-
|
|
339
|
-
Native attributes and event listeners are forwarded to the `<button>` element.
|
|
340
|
-
While loading, the native `disabled` attribute prevents repeated activation.
|
|
341
|
-
The component deliberately has no action callback prop: pass your async
|
|
342
|
-
handler through native listeners so errors propagate to your own code.
|
|
343
|
-
|
|
344
|
-
## Composables
|
|
345
|
-
|
|
346
|
-
### `useLoading()`
|
|
347
|
-
|
|
348
|
-
Tracks concurrent asynchronous operations for one loading state.
|
|
349
|
-
|
|
350
|
-
```ts
|
|
351
|
-
import { useLoading } from "veload";
|
|
352
|
-
|
|
353
|
-
const { isLoading, pendingCount, execute } = useLoading();
|
|
354
|
-
|
|
355
|
-
const result = await execute(() => fetchData());
|
|
356
|
-
```
|
|
357
|
-
|
|
358
|
-
| Member | Type | Description |
|
|
359
|
-
|---|---|---|
|
|
360
|
-
| `isLoading` | `Readonly<Ref<boolean>>` | `true` while at least one operation is pending. |
|
|
361
|
-
| `pendingCount` | `Readonly<Ref<number>>` | Number of pending operations for this instance. |
|
|
362
|
-
| `execute` | `<T>(operation: () => Promise<T>) => Promise<T>` | Runs and tracks the operation. Results and errors pass through unchanged. |
|
|
363
|
-
|
|
364
|
-
Each instance owns independent state. Overlapping calls are counted, and
|
|
365
|
-
`isLoading` stays `true` until the last operation settles. Synchronous throws
|
|
366
|
-
from the callback are also cleaned up and propagated.
|
|
367
|
-
|
|
368
|
-
`execute` continues to settle correctly when called outside an active Vue
|
|
369
|
-
effect scope. State is not automatically reset when a scope is disposed;
|
|
370
|
-
pending operations still decrement their own count when they finish.
|
|
371
|
-
|
|
372
|
-
### `useDelayedLoading(options?)`
|
|
373
|
-
|
|
374
|
-
Prevents loading-indicator flicker for fast operations.
|
|
375
|
-
|
|
376
|
-
```ts
|
|
377
|
-
import { useDelayedLoading } from "veload";
|
|
378
|
-
|
|
379
|
-
const { isLoading, pendingCount, execute } = useDelayedLoading({
|
|
380
|
-
delay: 200,
|
|
381
|
-
minVisibleDuration: 300,
|
|
382
|
-
});
|
|
383
|
-
```
|
|
384
|
-
|
|
385
|
-
`options` may also be a number, which is shorthand for `{ delay: number }`.
|
|
386
|
-
|
|
387
|
-
| Option | Type | Default | Description |
|
|
388
|
-
|---|---|---|---|
|
|
389
|
-
| `delay` | `number` | `200` | Milliseconds to wait before `isLoading` becomes `true`. Negative values become `0`; non-finite values use the default. |
|
|
390
|
-
| `minVisibleDuration` | `number` | `0` | Minimum milliseconds the indicator remains visible once shown. Negative values become `0`; non-finite values become `0`. |
|
|
391
|
-
|
|
392
|
-
Behavior:
|
|
393
|
-
|
|
394
|
-
- The operation starts immediately; only indicator visibility is delayed.
|
|
395
|
-
- If all operations finish before `delay`, the indicator never appears.
|
|
396
|
-
- Once visible, the indicator stays visible while any operation is pending.
|
|
397
|
-
- `minVisibleDuration` is measured from the moment the indicator appears, not
|
|
398
|
-
from when each operation starts. It is a minimum for continuous visibility:
|
|
399
|
-
if the indicator has already been visible that long, it hides as soon as all
|
|
400
|
-
operations finish.
|
|
401
|
-
- A new operation starting while a hide is pending cancels that hide and keeps
|
|
402
|
-
the indicator visible.
|
|
403
|
-
- Timers are cleared when operations finish or the owning component/effect
|
|
404
|
-
scope is disposed. Disposing a scope hides a visible indicator immediately.
|
|
405
|
-
- Results and errors are preserved exactly as with `useLoading()`.
|
|
406
|
-
|
|
407
|
-
### `useLoadingGroup(sources)`
|
|
408
|
-
|
|
409
|
-
Aggregates independent loading sources without owning them.
|
|
104
|
+
### Delayed and grouped loading states
|
|
410
105
|
|
|
411
106
|
```ts
|
|
412
|
-
import { useLoading, useLoadingGroup } from "veload";
|
|
107
|
+
import { useDelayedLoading, useLoading, useLoadingGroup } from "veload";
|
|
413
108
|
|
|
109
|
+
const search = useDelayedLoading({ delay: 200, minVisibleDuration: 300 });
|
|
414
110
|
const products = useLoading();
|
|
415
111
|
const categories = useLoading();
|
|
416
|
-
|
|
417
|
-
const { isLoading, activeCount } = useLoadingGroup([
|
|
112
|
+
const catalogLoading = useLoadingGroup([
|
|
418
113
|
products.isLoading,
|
|
419
114
|
categories.isLoading,
|
|
420
115
|
]);
|
|
421
|
-
```
|
|
422
|
-
|
|
423
|
-
`sources` is either an array of `Readonly<Ref<boolean>>` / `() => boolean`
|
|
424
|
-
values, or a getter returning such an array when the set changes dynamically.
|
|
425
|
-
|
|
426
|
-
| Member | Type | Description |
|
|
427
|
-
|---|---|---|
|
|
428
|
-
| `isLoading` | `ComputedRef<boolean>` | `true` when at least one source is active. |
|
|
429
|
-
| `activeCount` | `ComputedRef<number>` | Number of active sources. |
|
|
430
|
-
|
|
431
|
-
The group is read-only: it does not mutate, start, or stop the source states.
|
|
432
|
-
|
|
433
|
-
## Accessibility
|
|
434
|
-
|
|
435
|
-
- `VSpinner` uses `role="status"` with an accessible label. Set `decorative`
|
|
436
|
-
or use a blank label when a parent already announces loading.
|
|
437
|
-
- `VSkeleton` is decorative by default. Provide `label` to expose it as a
|
|
438
|
-
`role="status"` placeholder with `aria-busy="true"`.
|
|
439
|
-
- `VProgress` uses `role="progressbar"` and exposes
|
|
440
|
-
`aria-valuemin`/`aria-valuemax`/`aria-valuenow` only when determinate.
|
|
441
|
-
`aria-valuetext` is available for human-readable values.
|
|
442
|
-
- `VLoading` sets `aria-busy` on its wrapper and announces its label through
|
|
443
|
-
`role="status"`. Its built-in spinner is decorative to avoid duplicate
|
|
444
|
-
announcements. With a blank label the overlay is `aria-hidden`.
|
|
445
|
-
- `VLoadingButton` exposes `aria-busy` while loading and relies on the native
|
|
446
|
-
`disabled` attribute to prevent repeated activation. Its label remains
|
|
447
|
-
available to assistive technology.
|
|
448
|
-
- All animations are disabled or reduced under
|
|
449
|
-
`prefers-reduced-motion: reduce`. Consumers can still add their own motion
|
|
450
|
-
preferences.
|
|
451
|
-
|
|
452
|
-
These behaviors are covered by unit tests, but no formal WCAG conformance
|
|
453
|
-
audit has been performed.
|
|
454
|
-
|
|
455
|
-
## Customization
|
|
456
|
-
|
|
457
|
-
Components use scoped styles and documented CSS custom properties. Set them on
|
|
458
|
-
a component or an ancestor:
|
|
459
|
-
|
|
460
|
-
```vue
|
|
461
|
-
<VProgress
|
|
462
|
-
:value="60"
|
|
463
|
-
style="--v-progress-color: #7c3aed; --v-progress-track-color: #ede9fe"
|
|
464
|
-
/>
|
|
465
|
-
```
|
|
466
|
-
|
|
467
|
-
| Component | Custom property | Default |
|
|
468
|
-
|---|---|---|
|
|
469
|
-
| `VSpinner` | `--v-spinner-border-width` | `3px` |
|
|
470
|
-
| | `--v-spinner-track-color` | `currentColor` |
|
|
471
|
-
| `VSkeleton` | `--v-skeleton-base-color` | `rgba(148, 163, 184, 0.28)` |
|
|
472
|
-
| | `--v-skeleton-highlight-color` | `rgba(255, 255, 255, 0.55)` |
|
|
473
|
-
| | `--v-skeleton-radius` | `0.25em` (text), `0.5rem` (rect) |
|
|
474
|
-
| | `--v-skeleton-duration` | `1.4s` |
|
|
475
|
-
| `VProgress` | `--v-progress-color` | `#2563eb` |
|
|
476
|
-
| | `--v-progress-track-color` | `#e2e8f0` |
|
|
477
|
-
| | `--v-progress-radius` | `999px` |
|
|
478
|
-
| | `--v-progress-duration` | `1.4s` |
|
|
479
|
-
| `VLoading` | `--v-loading-overlay-background` | `rgba(255, 255, 255, 0.72)` |
|
|
480
|
-
| | `--v-loading-color` | `#334155` |
|
|
481
|
-
| | `--v-loading-z-index` | `10` |
|
|
482
|
-
| | `--v-loading-radius` | `inherit` |
|
|
483
|
-
| | `--v-loading-backdrop-filter` | `none` |
|
|
484
|
-
| `VLoadingButton` | `--v-loading-button-gap` | `0.5rem` |
|
|
485
|
-
|
|
486
|
-
The `color`, `trackColor`, and `height` props on `VProgress`, and the
|
|
487
|
-
`borderRadius` prop on `VSkeleton`, take precedence over the corresponding
|
|
488
|
-
custom properties. Animation keyframes are scoped by the build and do not use
|
|
489
|
-
a shared global name.
|
|
490
|
-
|
|
491
|
-
`VLoading` uses a light translucent overlay by default, which assumes a light
|
|
492
|
-
surface. On a dark surface, override the overlay and the label colour:
|
|
493
|
-
|
|
494
|
-
```vue
|
|
495
|
-
<VLoading
|
|
496
|
-
:loading="isLoading"
|
|
497
|
-
label="Loading"
|
|
498
|
-
style="--v-loading-overlay-background: rgba(15, 10, 30, 0.72); --v-loading-color: #f1eefb"
|
|
499
|
-
>
|
|
500
|
-
<ProductList />
|
|
501
|
-
</VLoading>
|
|
502
|
-
```
|
|
503
|
-
|
|
504
|
-
The loaders are styled entirely through their props and expose no custom
|
|
505
|
-
properties. They inherit `currentColor`, so a colour on an ancestor is enough
|
|
506
|
-
to theme them.
|
|
507
|
-
|
|
508
|
-
## TypeScript
|
|
509
|
-
|
|
510
|
-
Declarations are included via the root `types` export; no separate types
|
|
511
|
-
package or ambient module shim is needed. Public prop and return types are
|
|
512
|
-
exported from the package root:
|
|
513
|
-
|
|
514
|
-
```ts
|
|
515
|
-
import type {
|
|
516
|
-
LoaderVariant,
|
|
517
|
-
LoadingSource,
|
|
518
|
-
NamedLoaderProps,
|
|
519
|
-
UseDelayedLoadingOptions,
|
|
520
|
-
UseDelayedLoadingReturn,
|
|
521
|
-
UseLoadingGroupReturn,
|
|
522
|
-
UseLoadingReturn,
|
|
523
|
-
VLoaderProps,
|
|
524
|
-
VLoadingButtonProps,
|
|
525
|
-
VLoadingProps,
|
|
526
|
-
VProgressProps,
|
|
527
|
-
VSkeletonProps,
|
|
528
|
-
VSpinnerProps,
|
|
529
|
-
} from "veload";
|
|
530
|
-
```
|
|
531
|
-
|
|
532
|
-
Use `vue-tsc` (or `nuxt typecheck` in a Nuxt app) to check SFC templates in
|
|
533
|
-
addition to regular TypeScript. Keep Vue within the supported `^3.5.2` peer
|
|
534
|
-
range so the component declarations resolve against compatible Vue types.
|
|
535
|
-
|
|
536
|
-
`execute` preserves the operation's return type:
|
|
537
|
-
|
|
538
|
-
```ts
|
|
539
|
-
interface Product {
|
|
540
|
-
id: number;
|
|
541
|
-
title: string;
|
|
542
|
-
}
|
|
543
|
-
|
|
544
|
-
const products: Product[] = await execute(async () => {
|
|
545
|
-
const response = await fetch("/api/products");
|
|
546
|
-
return (await response.json()) as Product[];
|
|
547
|
-
});
|
|
548
|
-
```
|
|
549
|
-
|
|
550
|
-
## Loader collection
|
|
551
|
-
|
|
552
|
-
Veloader includes **36 named loader treatments**, selectable through
|
|
553
|
-
`VLoader` or individual named exports, plus its skeleton surface. The
|
|
554
|
-
collection expands the original 32 with four additional treatments:
|
|
555
|
-
|
|
556
|
-
| Component | `VLoader` variant | Marks | Suggested use |
|
|
557
|
-
| --- | --- | --- | --- |
|
|
558
|
-
| `VBreathingLoader` | `breathing` | 2 fixed; ignores `count` | Calm background activity or a waiting state. |
|
|
559
|
-
| `VDualArcLoader` | `dual-arc` | 2 fixed; ignores `count` | Compact circular feedback for refresh or synchronization. |
|
|
560
|
-
| `VDotSweepLoader` | `dot-sweep` | 4 by default; `count` supports 1–12 | Sequential activity beside text or in a list. |
|
|
561
|
-
| `VSlidingBarsLoader` | `sliding-bars` | 4 by default; `count` supports 1–12 | Horizontal feedback for a panel or processing task. |
|
|
562
|
-
|
|
563
|
-
The original 32 treatments and named skeleton surface were implemented in
|
|
564
|
-
Vue with React Loadly as a visual reference. The reference package declares
|
|
565
|
-
MIT metadata but has no tracked license text, so no reference source,
|
|
566
|
-
styles, or assets were reused.
|
|
567
116
|
|
|
568
|
-
|
|
569
|
-
(`40`), `duration` (`1000` milliseconds), `count` (`4` where applicable),
|
|
570
|
-
`label` (`"Loading"`), and `decorative` (`false`). `VProgressRingLoader` also
|
|
571
|
-
accepts `value` from `0` to `100`. Import a named loader and use it directly:
|
|
572
|
-
|
|
573
|
-
```vue
|
|
574
|
-
<script setup lang="ts">
|
|
575
|
-
import { VOrbitDotsLoader } from "veload";
|
|
576
|
-
import "veload/style.css";
|
|
577
|
-
</script>
|
|
578
|
-
|
|
579
|
-
<template>
|
|
580
|
-
<VOrbitDotsLoader :size="48" color="#7c3aed" label="Syncing workspace" />
|
|
581
|
-
</template>
|
|
582
|
-
```
|
|
583
|
-
|
|
584
|
-
`count` controls supported repeated-mark treatments, such as `bars`,
|
|
585
|
-
`dots`, `grid` and `orbit-dots`, and is clamped to `1`–`12`. It is not a way
|
|
586
|
-
to change fixed-geometry treatments. Grid, heatmap and squares default to
|
|
587
|
-
four, nine and nine marks respectively; other repeating treatments default
|
|
588
|
-
to four. Row-based repeating treatments grow with the count so their marks
|
|
589
|
-
are not clipped.
|
|
590
|
-
|
|
591
|
-
| Category | Components |
|
|
592
|
-
| --- | --- |
|
|
593
|
-
| Motion | `VBarsLoader`, `VBounceLoader`, `VDotsLoader`, `VDotSweepLoader`, `VEqualizerLoader`, `VSlidingBarsLoader`, `VSpinLoader`, `VSpinDotsLoader`, `VTypingLoader`, `VWaveLoader` |
|
|
594
|
-
| Circular | `VBreathingLoader`, `VDualArcLoader`, `VGradientRingLoader`, `VOrbitDotsLoader`, `VOrbitLoader`, `VProgressRingLoader`, `VPulseLoader`, `VRingLoader`, `VRippleLoader`, `VRotateLoader`, `VSignalLoader`, `VSnakeLoader` |
|
|
595
|
-
| Geometric | `VBlobLoader`, `VCardFlipLoader`, `VElementLoader`, `VFlowLoader`, `VGridLoader`, `VHashtagLoader`, `VHeatmapLoader`, `VLiquidLoader`, `VLogoSpinLoader`, `VMorphLoader`, `VPlaneLoader`, `VSquaresLoader`, `VStairLoader` |
|
|
596
|
-
| Utility | `VFallbackLoader`, `VLoader` (`variant` selects any treatment) |
|
|
597
|
-
|
|
598
|
-
### Skeleton collection
|
|
599
|
-
|
|
600
|
-
`VSkeleton` remains the primitive (`variant`, `width`, `height`, `borderRadius`,
|
|
601
|
-
`animated`, and `label`). It is also exported as `VSkeletonLoader` for catalog
|
|
602
|
-
parity. `VPatternSkeleton` accepts `pattern` (`lines`, `article`, `card`,
|
|
603
|
-
`profile`, `list`, `table`, `media`, `form`, `dashboard`, `feed`, or `product`),
|
|
604
|
-
`rows` (default `3`), `color`, `highlightColor`, `animated` (default `true`),
|
|
605
|
-
and `label`.
|
|
606
|
-
|
|
607
|
-
For `VDashboardSkeleton`, `rows` counts **data rows only**, not the table
|
|
608
|
-
header, statistic tiles, or chart. A fixed header is always rendered, so
|
|
609
|
-
`:rows="1"` means one header plus exactly one data row. `VTableSkeleton`
|
|
610
|
-
uses the same data-row definition but allows its header to be toggled with
|
|
611
|
-
`showHeader`. Row counts are rounded and clamped to `1`–`12`; columns to
|
|
612
|
-
`1`–`6`. This preserves the existing layout and public meaning of `rows`.
|
|
613
|
-
|
|
614
|
-
- Layout helpers: `VSkeletonGroup`, `VSkeletonSwitch`, `VAutoSkeleton`.
|
|
615
|
-
`VAutoSkeleton` is a safe Vue content switcher: it renders a named skeleton
|
|
616
|
-
pattern or `#skeleton` slot while loading and the default slot afterwards. It
|
|
617
|
-
deliberately does not inspect or execute slot components to infer their DOM.
|
|
618
|
-
- Named presets: `VArticleSkeleton`, `VCardSkeleton`, `VDashboardSkeleton`,
|
|
619
|
-
`VFeedSkeleton`, `VFormSkeleton`, `VListSkeleton`, `VMediaCardSkeleton`,
|
|
620
|
-
`VProductCardSkeleton`, `VProfileSkeleton`, and `VTableSkeleton`.
|
|
621
|
-
|
|
622
|
-
Every animation honors `prefers-reduced-motion`; status elements are hidden from
|
|
623
|
-
assistive technology when `decorative` is used or no label is provided.
|
|
624
|
-
|
|
625
|
-
## Limitations
|
|
626
|
-
|
|
627
|
-
- No global loading manager, request deduplication, or automatic HTTP
|
|
628
|
-
integration is provided.
|
|
629
|
-
- `VLoading` positions its overlay absolutely. The wrapper needs content or an
|
|
630
|
-
explicit height to be visible.
|
|
631
|
-
- `VLoading`'s content isolation uses the HTML `inert` attribute. Very old
|
|
632
|
-
browsers may not support it.
|
|
633
|
-
- Progress values only reflect data supplied by the consumer; the library does
|
|
634
|
-
not estimate backend progress.
|
|
635
|
-
- The package has not yet been published. Public installation and release
|
|
636
|
-
availability begin only after npm confirms the first release.
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
## Development
|
|
640
|
-
|
|
641
|
-
### Local maintainer workflow
|
|
642
|
-
|
|
643
|
-
These steps are for authorized repository development before a public
|
|
644
|
-
release, not for consumer installation. Run in `Veloader/pcakage` (the
|
|
645
|
-
directory is actually spelled `pcakage`):
|
|
646
|
-
|
|
647
|
-
```bash
|
|
648
|
-
npm install
|
|
649
|
-
npm run typecheck
|
|
650
|
-
npm test
|
|
651
|
-
npm run build # Vite ESM/CJS build, then declarations
|
|
652
|
-
npm run build:types # declarations only
|
|
653
|
-
npm run check:consumer # pack the library and use it like an application
|
|
654
|
-
npm run check:bundle # measure the tree shaken payload of a consumer
|
|
655
|
-
npm pack --dry-run # inspect package contents
|
|
117
|
+
await search.execute(() => fetchResults());
|
|
656
118
|
```
|
|
657
119
|
|
|
658
|
-
|
|
659
|
-
timers. `vitest.config.ts` contains the test options and reuses the Vue plugin
|
|
660
|
-
from `vite.config.ts`; the production Vite config imports from `vite`, not
|
|
661
|
-
`vitest/config`. Declaration generation uses `tsconfig.build.json`, which
|
|
662
|
-
excludes the local test suites.
|
|
120
|
+
`useLoading()` tracks overlapping promises and exposes `isLoading`, `pendingCount`, and `execute`. `useDelayedLoading()` provides the same API with optional display delay and minimum visible duration. `useLoadingGroup()` derives a combined state from reactive loading sources.
|
|
663
121
|
|
|
664
|
-
|
|
665
|
-
it here (for example, `npm ci --include=dev`) before running the build; an
|
|
666
|
-
installation in the sibling playground is not a replacement. See the
|
|
667
|
-
playground README for its Vercel install order and supported Node version.
|
|
122
|
+
## Accessibility and reduced motion
|
|
668
123
|
|
|
669
|
-
|
|
124
|
+
`VSpinner`, `VLoader`, and `VLoading` expose labeled status semantics. `VLoading` and `VLoadingButton` expose busy state, and determinate `VProgress` exposes its range and value. Skeletons are decorative and hidden from assistive technology by default, or can expose a status label. Loaders provide a `decorative` option when an ancestor already announces loading. Animations respect the user’s `prefers-reduced-motion` setting.
|
|
670
125
|
|
|
671
|
-
|
|
672
|
-
- `dist/index.cjs` (CommonJS)
|
|
673
|
-
- `dist/index.d.ts` (types)
|
|
674
|
-
- `dist/style.css` (extracted styles)
|
|
126
|
+
## SSR compatibility
|
|
675
127
|
|
|
676
|
-
|
|
677
|
-
temporary folder and renders every component on the server with the packed
|
|
678
|
-
package, so the packed artifact is checked rather than only the source.
|
|
679
|
-
This does not publish anything or establish a distribution license.
|
|
128
|
+
Veload components can render with Vue SSR and Nuxt; they do not require a client-only wrapper. Create composables inside component setup rather than at module scope so mutable state is not shared between server requests. Use your framework’s server-aware data-fetching APIs for initial data; loading composables track async work but do not replace data fetching or hydration.
|
|
680
129
|
|
|
681
|
-
|
|
682
|
-
install the resulting `.tgz` using its actual filesystem path from that
|
|
683
|
-
app. A directory link also needs a built `dist` directory and access to a
|
|
684
|
-
compatible Vue peer; it is not a substitute for checking the packed
|
|
685
|
-
artifact. The sibling playground already declares `file:../pcakage`; its
|
|
686
|
-
README documents the repository setup. None of these local steps belong
|
|
687
|
-
in the post-release npm consumer workflow.
|
|
130
|
+
## Playground and documentation
|
|
688
131
|
|
|
689
|
-
|
|
132
|
+
Explore the components and examples in the [Veload playground](https://veload-playground.vercel.app). Browse the [installation guide](https://veload-playground.vercel.app/docs/installation), [API guide](https://veload-playground.vercel.app/docs/api), and [accessibility guide](https://veload-playground.vercel.app/docs/accessibility).
|
|
690
133
|
|
|
691
|
-
The
|
|
692
|
-
`veloader-playground` workspace. It is a Nuxt 4 application that renders on the
|
|
693
|
-
server and consumes this package through its public entry point:
|
|
134
|
+
The source repository is [Shehab-Mo/veload](https://github.com/Shehab-Mo/veload).
|
|
694
135
|
|
|
695
|
-
|
|
696
|
-
- `/loaders` and `/loaders/[name]` — all 36 loader treatments
|
|
697
|
-
- `/skeletons` and `/skeletons/[name]` — primitives, patterns and presets
|
|
698
|
-
- `/docs/installation`, `/docs/accessibility`, `/docs/api` — the guides
|
|
136
|
+
## License
|
|
699
137
|
|
|
138
|
+
[MIT](https://github.com/Shehab-Mo/veload/blob/main/pcakage/LICENSE)
|
|
@@ -20,7 +20,7 @@ export declare const VTableSkeleton: DefineComponent<VTableSkeletonProps>;
|
|
|
20
20
|
*
|
|
21
21
|
* Unlike React Loadly's experimental DOM-inference API, this component never
|
|
22
22
|
* executes or inspects slot content. It renders a supplied skeleton slot or a
|
|
23
|
-
* selected
|
|
23
|
+
* selected Veload pattern while loading, then renders the default slot.
|
|
24
24
|
*/
|
|
25
25
|
export type VAutoSkeletonProps = VSkeletonSwitchProps;
|
|
26
26
|
export declare const VAutoSkeleton: DefineComponent<VAutoSkeletonProps>;
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("vue");var t=(0,e.defineComponent)({__name:`index`,props:{size:{default:24},color:{default:`currentColor`},label:{default:`Loading`},decorative:{type:Boolean,default:!1}},setup(t){let n=t,r=(0,e.computed)(()=>Number.isFinite(n.size)?Math.max(0,n.size):24),i=(0,e.computed)(()=>{let e=typeof n.color==`string`?n.color.trim():``;return e.length>0?e:`currentColor`}),a=(0,e.computed)(()=>typeof n.label==`string`?n.label.trim():``),o=(0,e.computed)(()=>n.decorative||a.value.length===0),s=(0,e.computed)(()=>o.value?{"aria-hidden":`true`}:{role:`status`,"aria-label":a.value});return(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`span`,(0,e.mergeProps)({class:`v-spinner`},s.value),[(0,e.createElementVNode)(`span`,{class:`v-spinner__indicator`,"aria-hidden":`true`,style:(0,e.normalizeStyle)({width:`${r.value}px`,height:`${r.value}px`,borderTopColor:i.value})},null,4)],16))}}),n=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},r=n(t,[[`__scopeId`,`data-v-fc2fa43e`]]);function i(e,t){if(typeof e==`number`)return Number.isFinite(e)?`${Math.max(0,e)}px`:t;if(typeof e==`string`){let n=e.trim();return n.length>0?n:t}return t}var a=n((0,e.defineComponent)({__name:`index`,props:{variant:{default:`text`},width:{},height:{},borderRadius:{},animated:{type:Boolean,default:!0},label:{}},setup(t){let n=t,r=(0,e.computed)(()=>{let e=n.variant;return e===`rect`||e===`circle`?e:`text`}),a=(0,e.computed)(()=>i(n.width,r.value===`circle`?`40px`:`100%`)),o=(0,e.computed)(()=>{if(n.height!==void 0)return i(n.height,r.value===`text`?`1em`:`6rem`);if(r.value!==`circle`)return r.value===`text`?`1em`:`6rem`}),s=(0,e.computed)(()=>{if(n.borderRadius===void 0)return;if(typeof n.borderRadius==`number`)return Number.isFinite(n.borderRadius)?`${Math.max(0,n.borderRadius)}px`:void 0;let e=n.borderRadius.trim();return e.length>0?e:void 0}),c=(0,e.computed)(()=>({width:a.value,height:o.value,borderRadius:s.value,aspectRatio:r.value===`circle`&&n.height===void 0?`1 / 1`:void 0})),l=(0,e.computed)(()=>typeof n.label==`string`?n.label.trim():``),u=(0,e.computed)(()=>l.value.length>0?{role:`status`,"aria-label":l.value,"aria-busy":`true`}:{"aria-hidden":`true`});return(n,i)=>((0,e.openBlock)(),(0,e.createElementBlock)(`span`,(0,e.mergeProps)({class:[`v-skeleton`,[`v-skeleton--${r.value}`,{"v-skeleton--animated":t.animated}]],style:c.value},u.value),null,16))}}),[[`__scopeId`,`data-v-0ae45ca2`]]),o=[`aria-label`,`aria-valuemin`,`aria-valuemax`,`aria-valuenow`,`aria-valuetext`],s=n((0,e.defineComponent)({__name:`index`,props:{value:{default:null},min:{default:0},max:{default:100},label:{default:`Progress`},valueText:{},height:{default:8},color:{},trackColor:{}},setup(t){let n=t;function r(e){if(typeof e!=`string`)return;let t=e.trim();return t.length>0?t:void 0}let a=(0,e.computed)(()=>Number.isFinite(n.min)&&Number.isFinite(n.max)&&n.max>n.min),s=(0,e.computed)(()=>a.value?n.min:0),c=(0,e.computed)(()=>a.value?n.max:100),l=(0,e.computed)(()=>typeof n.value==`number`&&Number.isFinite(n.value)&&a.value),u=(0,e.computed)(()=>!l.value||typeof n.value!=`number`?s.value:Math.min(c.value,Math.max(s.value,n.value))),d=(0,e.computed)(()=>{if(!l.value)return 0;let e=c.value-s.value;return(u.value-s.value)/e*100}),f=(0,e.computed)(()=>typeof n.label==`string`?n.label.trim():``),p=(0,e.computed)(()=>{if(!l.value)return;let e=typeof n.valueText==`string`?n.valueText.trim():``;return e.length>0?e:void 0}),m=(0,e.computed)(()=>({height:i(n.height,`8px`),backgroundColor:r(n.trackColor)})),h=(0,e.computed)(()=>({width:l.value?`${d.value}%`:void 0,backgroundColor:r(n.color)}));return(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{class:(0,e.normalizeClass)([`v-progress`,{"v-progress--indeterminate":!l.value,"v-progress--determinate":l.value}]),role:`progressbar`,"aria-label":f.value.length>0?f.value:void 0,"aria-valuemin":l.value?s.value:void 0,"aria-valuemax":l.value?c.value:void 0,"aria-valuenow":l.value?u.value:void 0,"aria-valuetext":p.value,style:(0,e.normalizeStyle)(m.value)},[(0,e.createElementVNode)(`div`,{class:`v-progress__bar`,"aria-hidden":`true`,style:(0,e.normalizeStyle)(h.value)},null,4)],14,o))}}),[[`__scopeId`,`data-v-86aeb0f3`]]),c=[`aria-busy`],l=[`inert`],u={key:0,class:`v-loading__label`},d=n((0,e.defineComponent)({__name:`index`,props:{loading:{type:Boolean,default:!1},label:{default:`Loading`},inertContent:{type:Boolean,default:!0},indicatorSize:{default:28}},setup(t){let n=t,i=(0,e.computed)(()=>typeof n.label==`string`?n.label.trim():``),a=(0,e.computed)(()=>Number.isFinite(n.indicatorSize)?Math.max(0,n.indicatorSize):28),o=(0,e.computed)(()=>n.loading&&n.inertContent),s=(0,e.computed)(()=>i.value.length>0?{role:`status`}:{"aria-hidden":`true`});return(n,d)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{class:(0,e.normalizeClass)([`v-loading`,{"v-loading--active":t.loading,"v-loading--blocking":o.value}]),"aria-busy":t.loading?`true`:void 0},[(0,e.createElementVNode)(`div`,{class:`v-loading__content`,inert:o.value||void 0},[(0,e.renderSlot)(n.$slots,`default`,{},void 0,!0)],8,l),t.loading?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,(0,e.mergeProps)({key:0,class:`v-loading__overlay`},s.value),[(0,e.renderSlot)(n.$slots,`indicator`,{},()=>[(0,e.createVNode)(r,{size:a.value,decorative:``},null,8,[`size`])],!0),i.value.length>0?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,u,(0,e.toDisplayString)(i.value),1)):(0,e.createCommentVNode)(``,!0)],16)):(0,e.createCommentVNode)(``,!0)],10,c))}}),[[`__scopeId`,`data-v-ac332306`]]),f=[`type`,`disabled`,`aria-busy`],p={key:0,class:`v-loading-button__indicator`,"aria-hidden":`true`},m=n((0,e.defineComponent)({__name:`index`,props:{loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},type:{default:`button`},indicatorSize:{default:16}},setup(t){let n=t,i=(0,e.computed)(()=>n.disabled||n.loading),a=(0,e.computed)(()=>{let e=n.type;return e===`submit`||e===`reset`?e:`button`}),o=(0,e.computed)(()=>Number.isFinite(n.indicatorSize)?Math.max(0,n.indicatorSize):16);return(n,s)=>((0,e.openBlock)(),(0,e.createElementBlock)(`button`,{class:(0,e.normalizeClass)([`v-loading-button`,{"v-loading-button--loading":t.loading}]),type:a.value,disabled:i.value,"aria-busy":t.loading?`true`:void 0},[(0,e.createElementVNode)(`span`,{class:(0,e.normalizeClass)([`v-loading-button__content`,{"v-loading-button__content--hidden":t.loading}])},[(0,e.renderSlot)(n.$slots,`default`,{},void 0,!0)],2),t.loading?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,p,[(0,e.renderSlot)(n.$slots,`indicator`,{},()=>[(0,e.createVNode)(r,{size:o.value,decorative:``},null,8,[`size`])],!0)])):(0,e.createCommentVNode)(``,!0)],10,f))}}),[[`__scopeId`,`data-v-323480f1`]]),h=`bars.blob.bounce.breathing.card-flip.dot-sweep.dots.dual-arc.element.equalizer.fallback.flow.gradient-ring.grid.hashtag.heatmap.liquid.logo-spin.morph.orbit-dots.orbit.plane.progress-ring.pulse.ring.ripple.rotate.signal.sliding-bars.snake.spin-dots.spin.squares.stair.typing.wave`.split(`.`),g={class:`v-loader__visual`,"aria-hidden":`true`},_={key:0,class:`v-loader__value`},v=n((0,e.defineComponent)({__name:`index`,props:{variant:{default:`spin`},color:{default:`currentColor`},size:{default:40},duration:{default:1e3},label:{default:`Loading`},decorative:{type:Boolean,default:!1},count:{},value:{default:null}},setup(t){let n=t,r={breathing:2,"dual-arc":2},i={grid:4,heatmap:9,squares:9};function a(e,t=``){return typeof e==`string`&&e.trim().length>0?e.trim():t}function o(e,t,n,r){if(typeof e!=`number`||!Number.isFinite(e))return t;let i=Math.max(n,e);return r===void 0?i:Math.min(r,i)}let s=(0,e.computed)(()=>{let e=typeof n.variant==`string`?n.variant:``;return h.find(t=>t===e)??`spin`}),c=(0,e.computed)(()=>o(n.size,40,12)),l=(0,e.computed)(()=>o(n.duration,1e3,100)),u=(0,e.computed)(()=>r[s.value]??Math.round(o(n.count,i[s.value]??4,1,12))),d=(0,e.computed)(()=>a(n.color,`currentColor`)),f=(0,e.computed)(()=>a(n.label)),p=(0,e.computed)(()=>!!n.decorative||f.value.length===0),m=(0,e.computed)(()=>typeof n.value==`number`&&Number.isFinite(n.value)?Math.min(100,Math.max(0,n.value)):null),v=(0,e.computed)(()=>p.value?{"aria-hidden":`true`}:{role:`status`,"aria-label":f.value}),y=(0,e.computed)(()=>({"--vl-size":`${c.value}px`,"--vl-color":d.value,"--vl-duration":`${l.value}ms`,"--vl-value":`${m.value??72}%`,"--vl-total":String(u.value)})),b=(0,e.computed)(()=>Array.from({length:u.value}));return(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`span`,(0,e.mergeProps)({class:[`v-loader`,`v-loader--${s.value}`],style:y.value},v.value),[(0,e.createElementVNode)(`span`,g,[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(b.value,(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`span`,{key:n,class:`v-loader__mark`,style:(0,e.normalizeStyle)({"--vl-index":n})},null,4))),128)),s.value===`progress-ring`&&m.value!==null?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,_,(0,e.toDisplayString)(Math.round(m.value))+`%`,1)):(0,e.createCommentVNode)(``,!0)])],16))}}),[[`__scopeId`,`data-v-f38f76f8`]]);function y(t,n){return(0,e.defineComponent)({name:t,inheritAttrs:!1,setup(t,{attrs:r,slots:i}){return()=>(0,e.h)(v,{...r,variant:n},i)}})}var b=y(`VBarsLoader`,`bars`),ee=y(`VBlobLoader`,`blob`),te=y(`VBounceLoader`,`bounce`),ne=y(`VBreathingLoader`,`breathing`),re=y(`VCardFlipLoader`,`card-flip`),ie=y(`VDotSweepLoader`,`dot-sweep`),x=y(`VDotsLoader`,`dots`),S=y(`VDualArcLoader`,`dual-arc`),C=y(`VElementLoader`,`element`),w=y(`VEqualizerLoader`,`equalizer`),T=y(`VFallbackLoader`,`fallback`),E=y(`VFlowLoader`,`flow`),D=y(`VGradientRingLoader`,`gradient-ring`),O=y(`VGridLoader`,`grid`),k=y(`VHashtagLoader`,`hashtag`),A=y(`VHeatmapLoader`,`heatmap`),j=y(`VLiquidLoader`,`liquid`),M=y(`VLogoSpinLoader`,`logo-spin`),N=y(`VMorphLoader`,`morph`),P=y(`VOrbitDotsLoader`,`orbit-dots`),F=y(`VOrbitLoader`,`orbit`),I=y(`VPlaneLoader`,`plane`),L=y(`VProgressRingLoader`,`progress-ring`),R=y(`VPulseLoader`,`pulse`),z=y(`VRingLoader`,`ring`),B=y(`VRippleLoader`,`ripple`),V=y(`VRotateLoader`,`rotate`),H=y(`VSignalLoader`,`signal`),U=y(`VSlidingBarsLoader`,`sliding-bars`),W=y(`VSnakeLoader`,`snake`),G=y(`VSpinDotsLoader`,`spin-dots`),K=y(`VSpinLoader`,`spin`),q=y(`VSquaresLoader`,`squares`),J=y(`VStairLoader`,`stair`),ae=y(`VTypingLoader`,`typing`),oe=y(`VWaveLoader`,`wave`),se={class:`v-pattern-skeleton__body`},ce={key:1,class:`v-pattern-skeleton__stats`},le={class:`v-pattern-skeleton__body`},ue={class:`v-pattern-skeleton__body`},de={key:1,class:`v-pattern-skeleton__inline`},fe={key:0,class:`v-pattern-skeleton__stats`},pe={class:`v-pattern-skeleton__body`},Y=n((0,e.defineComponent)({__name:`index`,props:{pattern:{default:`lines`},rows:{default:3},columns:{default:3},mediaHeight:{},avatarSize:{},showMedia:{type:Boolean,default:!0},showAvatar:{type:Boolean,default:!0},showHeader:{type:Boolean,default:!0},showChart:{type:Boolean,default:!0},showStats:{type:Boolean,default:!0},showSubmit:{type:Boolean,default:!0},showRating:{type:Boolean,default:!0},showPrice:{type:Boolean,default:!0},showCta:{type:Boolean,default:!0},color:{},highlightColor:{},animated:{type:Boolean,default:!0},label:{}},setup(t){let n=t,r=[`lines`,`article`,`card`,`profile`,`list`,`table`,`media`,`form`,`dashboard`,`feed`,`product`];function i(e,t,n=12){return typeof e==`number`&&Number.isFinite(e)?Math.min(n,Math.max(1,Math.round(e))):t}function o(e){return typeof e==`string`&&e.trim()?e.trim():void 0}let s=(0,e.computed)(()=>r.includes(n.pattern)?n.pattern:`lines`),c=(0,e.computed)(()=>i(n.rows,3)),l=(0,e.computed)(()=>i(n.columns,3,6)),u=(0,e.computed)(()=>i(n.avatarSize,48,160)),d=(0,e.computed)(()=>o(n.label)??``),f=(0,e.computed)(()=>d.value?{role:`status`,"aria-label":d.value,"aria-busy":`true`}:{"aria-hidden":`true`}),p=(0,e.computed)(()=>({"--v-skeleton-base-color":o(n.color),"--v-skeleton-highlight-color":o(n.highlightColor)})),m=(0,e.computed)(()=>({gridTemplateColumns:`repeat(${l.value}, minmax(0, 1fr))`}));return(n,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,(0,e.mergeProps)({class:[`v-pattern-skeleton`,`v-pattern-skeleton--${s.value}`],style:p.value},f.value),[s.value===`profile`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:0},[t.showAvatar?((0,e.openBlock)(),(0,e.createBlock)(a,{key:0,variant:`circle`,animated:t.animated,width:u.value},null,8,[`animated`,`width`])):(0,e.createCommentVNode)(``,!0),(0,e.createElementVNode)(`div`,se,[(0,e.createVNode)(a,{animated:t.animated,width:`42%`,height:`1rem`},null,8,[`animated`]),(0,e.createVNode)(a,{animated:t.animated,width:`64%`,height:`.75rem`},null,8,[`animated`]),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,width:n===c.value?`62%`:`100%`,height:`.7rem`},null,8,[`animated`,`width`]))),128))]),t.showStats?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,ce,[((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(3,n=>(0,e.createVNode)(a,{key:n,variant:`rect`,animated:t.animated,height:`2.5rem`},null,8,[`animated`])),64))])):(0,e.createCommentVNode)(``,!0)],64)):s.value===`feed`?((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,{key:1},(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:n,class:`v-pattern-skeleton__feed-item`},[t.showAvatar?((0,e.openBlock)(),(0,e.createBlock)(a,{key:0,variant:`circle`,animated:t.animated,width:u.value},null,8,[`animated`,`width`])):(0,e.createCommentVNode)(``,!0),(0,e.createElementVNode)(`div`,le,[(0,e.createVNode)(a,{animated:t.animated,width:`40%`,height:`.85rem`},null,8,[`animated`]),(0,e.createVNode)(a,{animated:t.animated,width:`100%`,height:`.75rem`},null,8,[`animated`]),(0,e.createVNode)(a,{animated:t.animated,width:`72%`,height:`.75rem`},null,8,[`animated`])])]))),128)):s.value===`media`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:2},[(0,e.createVNode)(a,{variant:`rect`,animated:t.animated,width:t.mediaHeight?t.mediaHeight:`7.5rem`,height:`5.5rem`},null,8,[`animated`,`width`]),(0,e.createElementVNode)(`div`,ue,[(0,e.createVNode)(a,{animated:t.animated,width:`36%`,height:`.7rem`},null,8,[`animated`]),(0,e.createVNode)(a,{animated:t.animated,width:`100%`,height:`1rem`},null,8,[`animated`]),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,width:n===c.value?`62%`:`86%`,height:`.7rem`},null,8,[`animated`,`width`]))),128))])],64)):s.value===`product`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:3},[(0,e.createVNode)(a,{variant:`rect`,animated:t.animated,width:`100%`,height:t.mediaHeight??`10rem`},null,8,[`animated`,`height`]),(0,e.createVNode)(a,{animated:t.animated,width:`74%`,height:`1rem`},null,8,[`animated`]),t.showRating?((0,e.openBlock)(),(0,e.createBlock)(a,{key:0,variant:`rect`,animated:t.animated,width:`4.5rem`,height:`1.25rem`},null,8,[`animated`])):(0,e.createCommentVNode)(``,!0),t.showPrice?((0,e.openBlock)(),(0,e.createBlock)(a,{key:1,animated:t.animated,width:`35%`,height:`1.15rem`},null,8,[`animated`])):(0,e.createCommentVNode)(``,!0),t.showCta?((0,e.openBlock)(),(0,e.createBlock)(a,{key:2,variant:`rect`,animated:t.animated,width:`46%`,height:`2.25rem`},null,8,[`animated`])):(0,e.createCommentVNode)(``,!0)],64)):s.value===`card`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:4},[t.showMedia?((0,e.openBlock)(),(0,e.createBlock)(a,{key:0,variant:`rect`,animated:t.animated,width:`100%`,height:t.mediaHeight??`6rem`},null,8,[`animated`,`height`])):(0,e.createCommentVNode)(``,!0),t.showAvatar?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,de,[(0,e.createVNode)(a,{variant:`circle`,animated:t.animated,width:u.value},null,8,[`animated`,`width`]),(0,e.createVNode)(a,{animated:t.animated,width:`45%`,height:`.8rem`},null,8,[`animated`])])):(0,e.createCommentVNode)(``,!0),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,width:n===c.value?`72%`:`100%`,height:`.75rem`},null,8,[`animated`,`width`]))),128))],64)):s.value===`table`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:5},[t.showHeader?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,class:`v-pattern-skeleton__table-row v-pattern-skeleton__table-header`,style:(0,e.normalizeStyle)(m.value)},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(l.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,height:`.9rem`},null,8,[`animated`]))),128))],4)):(0,e.createCommentVNode)(``,!0),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:n,class:`v-pattern-skeleton__table-row v-pattern-skeleton__data-row`,style:(0,e.normalizeStyle)(m.value)},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(l.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,height:`.75rem`},null,8,[`animated`]))),128))],4))),128))],64)):s.value===`dashboard`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:6},[t.showStats?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,fe,[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(l.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,variant:`rect`,animated:t.animated,height:`4.5rem`},null,8,[`animated`]))),128))])):(0,e.createCommentVNode)(``,!0),t.showChart?((0,e.openBlock)(),(0,e.createBlock)(a,{key:1,variant:`rect`,animated:t.animated,width:`100%`,height:t.mediaHeight??`9rem`},null,8,[`animated`,`height`])):(0,e.createCommentVNode)(``,!0),(0,e.createElementVNode)(`div`,{class:`v-pattern-skeleton__table-row v-pattern-skeleton__table-header`,style:(0,e.normalizeStyle)(m.value)},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(l.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,height:`.7rem`},null,8,[`animated`]))),128))],4),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:n,class:`v-pattern-skeleton__table-row v-pattern-skeleton__data-row`,style:(0,e.normalizeStyle)(m.value)},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(l.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,height:`.65rem`},null,8,[`animated`]))),128))],4))),128))],64)):s.value===`form`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:7},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:n,class:`v-pattern-skeleton__field`},[(0,e.createVNode)(a,{animated:t.animated,width:`30%`,height:`.7rem`},null,8,[`animated`]),(0,e.createVNode)(a,{variant:`rect`,animated:t.animated,width:`100%`,height:`2.5rem`},null,8,[`animated`])]))),128)),t.showSubmit?((0,e.openBlock)(),(0,e.createBlock)(a,{key:0,variant:`rect`,animated:t.animated,width:`8rem`,height:`2.5rem`},null,8,[`animated`])):(0,e.createCommentVNode)(``,!0)],64)):s.value===`list`?((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,{key:8},(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:n,class:`v-pattern-skeleton__feed-item`},[t.showAvatar?((0,e.openBlock)(),(0,e.createBlock)(a,{key:0,variant:`circle`,animated:t.animated,width:u.value},null,8,[`animated`,`width`])):(0,e.createCommentVNode)(``,!0),(0,e.createElementVNode)(`div`,pe,[(0,e.createVNode)(a,{animated:t.animated,width:`76%`,height:`.85rem`},null,8,[`animated`]),(0,e.createVNode)(a,{animated:t.animated,width:`54%`,height:`.7rem`},null,8,[`animated`])])]))),128)):((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:9},[s.value===`article`&&t.showMedia?((0,e.openBlock)(),(0,e.createBlock)(a,{key:0,variant:`rect`,animated:t.animated,width:`100%`,height:t.mediaHeight??`10rem`},null,8,[`animated`,`height`])):(0,e.createCommentVNode)(``,!0),s.value===`article`?((0,e.openBlock)(),(0,e.createBlock)(a,{key:1,animated:t.animated,width:`72%`,height:`1.35rem`},null,8,[`animated`])):(0,e.createCommentVNode)(``,!0),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,width:n===c.value?`62%`:`100%`,height:`.8rem`},null,8,[`animated`,`width`]))),128))],64))],16))}}),[[`__scopeId`,`data-v-e1a021e1`]]),me=n((0,e.defineComponent)({__name:`index`,props:{label:{},gap:{default:`0.75rem`},decorative:{type:Boolean,default:!1}},setup(t){let n=t,r=(0,e.computed)(()=>typeof n.label==`string`?n.label.trim():``),i=(0,e.computed)(()=>n.decorative?{"aria-hidden":`true`}:r.value?{role:`status`,"aria-label":r.value,"aria-busy":`true`}:{});return(n,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,(0,e.mergeProps)({class:`v-skeleton-group`,style:{gap:t.gap}},i.value),[(0,e.renderSlot)(n.$slots,`default`,{},void 0,!0)],16))}}),[[`__scopeId`,`data-v-6a86d8c9`]]),X=(0,e.defineComponent)({__name:`index`,props:{loading:{type:Boolean,default:!0},pattern:{default:`lines`},rows:{default:3},columns:{},mediaHeight:{},avatarSize:{},showMedia:{type:Boolean,default:!0},showAvatar:{type:Boolean,default:!0},showHeader:{type:Boolean,default:!0},showChart:{type:Boolean,default:!0},showStats:{type:Boolean,default:!0},showSubmit:{type:Boolean,default:!0},showRating:{type:Boolean,default:!0},showPrice:{type:Boolean,default:!0},showCta:{type:Boolean,default:!0},color:{},highlightColor:{},animated:{type:Boolean,default:!0},label:{default:`Loading content`}},setup(t){let n=t,r=(0,e.computed)(()=>({pattern:n.pattern,rows:n.rows,columns:n.columns,color:n.color,highlightColor:n.highlightColor,animated:n.animated,label:n.label,mediaHeight:n.mediaHeight,avatarSize:n.avatarSize,showMedia:n.showMedia,showAvatar:n.showAvatar,showHeader:n.showHeader,showChart:n.showChart,showStats:n.showStats,showSubmit:n.showSubmit,showRating:n.showRating,showPrice:n.showPrice,showCta:n.showCta}));return(n,i)=>t.loading?(0,e.renderSlot)(n.$slots,`skeleton`,{},()=>[(0,e.createVNode)(Y,(0,e.normalizeProps)((0,e.guardReactiveProps)(r.value)),null,16)],void 0,1):(0,e.renderSlot)(n.$slots,`default`,{},void 0,void 0,0)}}),he=a;function Z(t,n){return(0,e.defineComponent)({name:t,inheritAttrs:!1,setup(t,{attrs:r}){return()=>(0,e.h)(Y,{...r,pattern:n})}})}var ge=Z(`VArticleSkeleton`,`article`),_e=Z(`VCardSkeleton`,`card`),ve=Z(`VDashboardSkeleton`,`dashboard`),ye=Z(`VFeedSkeleton`,`feed`),be=Z(`VFormSkeleton`,`form`),xe=Z(`VListSkeleton`,`list`),Q=Z(`VMediaCardSkeleton`,`media`),Se=Z(`VProductCardSkeleton`,`product`),Ce=Z(`VProfileSkeleton`,`profile`),we=Z(`VTableSkeleton`,`table`),Te=(0,e.defineComponent)({name:`VAutoSkeleton`,inheritAttrs:!1,props:[`loading`,`pattern`,`rows`,`columns`,`color`,`highlightColor`,`animated`,`label`,`mediaHeight`,`avatarSize`,`showMedia`,`showAvatar`,`showHeader`,`showChart`,`showStats`,`showSubmit`,`showRating`,`showPrice`,`showCta`],setup(t,{attrs:n,slots:r}){return()=>(0,e.h)(X,{...n,...t},r)}});function Ee(){let t=(0,e.ref)(0),n=(0,e.computed)(()=>t.value>0),r=(0,e.readonly)(t);async function i(e){t.value++;try{return await e()}finally{t.value=Math.max(0,t.value-1)}}return{isLoading:n,pendingCount:r,execute:i}}var De=200;function $(e,t){return e===void 0||!Number.isFinite(e)?t:Math.max(0,e)}function Oe(t){let n=typeof t==`number`?t:t?.delay,r=typeof t==`number`?0:t?.minVisibleDuration,i=$(n,De),a=$(r,0),o=(0,e.ref)(0),s=(0,e.ref)(!1),c=(0,e.readonly)(s),l=(0,e.readonly)(o),u=null,d=null,f=null,p=!1;function m(){u!==null&&(clearTimeout(u),u=null)}function h(){d!==null&&(clearTimeout(d),d=null)}function g(){s.value=!0,f=Date.now()}function _(){p||s.value||u!==null||o.value===0||(i<=0?g():u=setTimeout(()=>{u=null,!p&&o.value>0&&g()},i))}function v(){if(m(),h(),!s.value){f=null;return}if(a<=0||f===null){s.value=!1,f=null;return}let e=a-(Date.now()-f);e<=0?(s.value=!1,f=null):d=setTimeout(()=>{d=null,!p&&o.value===0&&(s.value=!1,f=null)},e)}(0,e.getCurrentScope)()&&(0,e.onScopeDispose)(()=>{p=!0,m(),h(),s.value=!1,f=null});async function y(e){o.value++,h(),_();try{return await e()}finally{o.value=Math.max(0,o.value-1),o.value===0&&v()}}return{isLoading:c,pendingCount:l,execute:y}}function ke(t){let n=typeof t==`function`?t:()=>t,r=(0,e.computed)(()=>{let e=0;for(let t of n())(typeof t==`function`?t():t.value)&&e++;return e});return{isLoading:(0,e.computed)(()=>r.value>0),activeCount:r}}exports.VArticleSkeleton=ge,exports.VAutoSkeleton=Te,exports.VBarsLoader=b,exports.VBlobLoader=ee,exports.VBounceLoader=te,exports.VBreathingLoader=ne,exports.VCardFlipLoader=re,exports.VCardSkeleton=_e,exports.VDashboardSkeleton=ve,exports.VDotSweepLoader=ie,exports.VDotsLoader=x,exports.VDualArcLoader=S,exports.VElementLoader=C,exports.VEqualizerLoader=w,exports.VFallbackLoader=T,exports.VFeedSkeleton=ye,exports.VFlowLoader=E,exports.VFormSkeleton=be,exports.VGradientRingLoader=D,exports.VGridLoader=O,exports.VHashtagLoader=k,exports.VHeatmapLoader=A,exports.VLiquidLoader=j,exports.VListSkeleton=xe,exports.VLoader=v,exports.VLoading=d,exports.VLoadingButton=m,exports.VLogoSpinLoader=M,exports.VMediaCardSkeleton=Q,exports.VMorphLoader=N,exports.VOrbitDotsLoader=P,exports.VOrbitLoader=F,exports.VPatternSkeleton=Y,exports.VPlaneLoader=I,exports.VProductCardSkeleton=Se,exports.VProfileSkeleton=Ce,exports.VProgress=s,exports.VProgressRingLoader=L,exports.VPulseLoader=R,exports.VRingLoader=z,exports.VRippleLoader=B,exports.VRotateLoader=V,exports.VSignalLoader=H,exports.VSkeleton=a,exports.VSkeletonGroup=me,exports.VSkeletonLoader=he,exports.VSkeletonSwitch=X,exports.VSlidingBarsLoader=U,exports.VSnakeLoader=W,exports.VSpinDotsLoader=G,exports.VSpinLoader=K,exports.VSpinner=r,exports.VSquaresLoader=q,exports.VStairLoader=J,exports.VTableSkeleton=we,exports.VTypingLoader=ae,exports.VWaveLoader=oe,exports.useDelayedLoading=Oe,exports.useLoading=Ee,exports.useLoadingGroup=ke;
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("vue");var t=(0,e.defineComponent)({__name:`index`,props:{size:{default:24},color:{default:`currentColor`},label:{default:`Loading`},decorative:{type:Boolean,default:!1}},setup(t){let n=t,r=(0,e.computed)(()=>Number.isFinite(n.size)?Math.max(0,n.size):24),i=(0,e.computed)(()=>{let e=typeof n.color==`string`?n.color.trim():``;return e.length>0?e:`currentColor`}),a=(0,e.computed)(()=>typeof n.label==`string`?n.label.trim():``),o=(0,e.computed)(()=>n.decorative||a.value.length===0),s=(0,e.computed)(()=>o.value?{"aria-hidden":`true`}:{role:`status`,"aria-label":a.value});return(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`span`,(0,e.mergeProps)({class:`v-spinner`},s.value),[(0,e.createElementVNode)(`span`,{class:`v-spinner__indicator`,"aria-hidden":`true`,style:(0,e.normalizeStyle)({width:`${r.value}px`,height:`${r.value}px`,borderTopColor:i.value})},null,4)],16))}}),n=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},r=n(t,[[`__scopeId`,`data-v-b967b6f4`]]);function i(e,t){if(typeof e==`number`)return Number.isFinite(e)?`${Math.max(0,e)}px`:t;if(typeof e==`string`){let n=e.trim();return n.length>0?n:t}return t}var a=n((0,e.defineComponent)({__name:`index`,props:{variant:{default:`text`},width:{},height:{},borderRadius:{},animated:{type:Boolean,default:!0},label:{}},setup(t){let n=t,r=(0,e.computed)(()=>{let e=n.variant;return e===`rect`||e===`circle`?e:`text`}),a=(0,e.computed)(()=>i(n.width,r.value===`circle`?`40px`:`100%`)),o=(0,e.computed)(()=>{if(n.height!==void 0)return i(n.height,r.value===`text`?`1em`:`6rem`);if(r.value!==`circle`)return r.value===`text`?`1em`:`6rem`}),s=(0,e.computed)(()=>{if(n.borderRadius===void 0)return;if(typeof n.borderRadius==`number`)return Number.isFinite(n.borderRadius)?`${Math.max(0,n.borderRadius)}px`:void 0;let e=n.borderRadius.trim();return e.length>0?e:void 0}),c=(0,e.computed)(()=>({width:a.value,height:o.value,borderRadius:s.value,aspectRatio:r.value===`circle`&&n.height===void 0?`1 / 1`:void 0})),l=(0,e.computed)(()=>typeof n.label==`string`?n.label.trim():``),u=(0,e.computed)(()=>l.value.length>0?{role:`status`,"aria-label":l.value,"aria-busy":`true`}:{"aria-hidden":`true`});return(n,i)=>((0,e.openBlock)(),(0,e.createElementBlock)(`span`,(0,e.mergeProps)({class:[`v-skeleton`,[`v-skeleton--${r.value}`,{"v-skeleton--animated":t.animated}]],style:c.value},u.value),null,16))}}),[[`__scopeId`,`data-v-9a8cf481`]]),o=[`aria-label`,`aria-valuemin`,`aria-valuemax`,`aria-valuenow`,`aria-valuetext`],s=n((0,e.defineComponent)({__name:`index`,props:{value:{default:null},min:{default:0},max:{default:100},label:{default:`Progress`},valueText:{},height:{default:8},color:{},trackColor:{}},setup(t){let n=t;function r(e){if(typeof e!=`string`)return;let t=e.trim();return t.length>0?t:void 0}let a=(0,e.computed)(()=>Number.isFinite(n.min)&&Number.isFinite(n.max)&&n.max>n.min),s=(0,e.computed)(()=>a.value?n.min:0),c=(0,e.computed)(()=>a.value?n.max:100),l=(0,e.computed)(()=>typeof n.value==`number`&&Number.isFinite(n.value)&&a.value),u=(0,e.computed)(()=>!l.value||typeof n.value!=`number`?s.value:Math.min(c.value,Math.max(s.value,n.value))),d=(0,e.computed)(()=>{if(!l.value)return 0;let e=c.value-s.value;return(u.value-s.value)/e*100}),f=(0,e.computed)(()=>typeof n.label==`string`?n.label.trim():``),p=(0,e.computed)(()=>{if(!l.value)return;let e=typeof n.valueText==`string`?n.valueText.trim():``;return e.length>0?e:void 0}),m=(0,e.computed)(()=>({height:i(n.height,`8px`),backgroundColor:r(n.trackColor)})),h=(0,e.computed)(()=>({width:l.value?`${d.value}%`:void 0,backgroundColor:r(n.color)}));return(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{class:(0,e.normalizeClass)([`v-progress`,{"v-progress--indeterminate":!l.value,"v-progress--determinate":l.value}]),role:`progressbar`,"aria-label":f.value.length>0?f.value:void 0,"aria-valuemin":l.value?s.value:void 0,"aria-valuemax":l.value?c.value:void 0,"aria-valuenow":l.value?u.value:void 0,"aria-valuetext":p.value,style:(0,e.normalizeStyle)(m.value)},[(0,e.createElementVNode)(`div`,{class:`v-progress__bar`,"aria-hidden":`true`,style:(0,e.normalizeStyle)(h.value)},null,4)],14,o))}}),[[`__scopeId`,`data-v-8a7154ed`]]),c=[`aria-busy`],l=[`inert`],u={key:0,class:`v-loading__label`},d=n((0,e.defineComponent)({__name:`index`,props:{loading:{type:Boolean,default:!1},label:{default:`Loading`},inertContent:{type:Boolean,default:!0},indicatorSize:{default:28}},setup(t){let n=t,i=(0,e.computed)(()=>typeof n.label==`string`?n.label.trim():``),a=(0,e.computed)(()=>Number.isFinite(n.indicatorSize)?Math.max(0,n.indicatorSize):28),o=(0,e.computed)(()=>n.loading&&n.inertContent),s=(0,e.computed)(()=>i.value.length>0?{role:`status`}:{"aria-hidden":`true`});return(n,d)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{class:(0,e.normalizeClass)([`v-loading`,{"v-loading--active":t.loading,"v-loading--blocking":o.value}]),"aria-busy":t.loading?`true`:void 0},[(0,e.createElementVNode)(`div`,{class:`v-loading__content`,inert:o.value||void 0},[(0,e.renderSlot)(n.$slots,`default`,{},void 0,!0)],8,l),t.loading?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,(0,e.mergeProps)({key:0,class:`v-loading__overlay`},s.value),[(0,e.renderSlot)(n.$slots,`indicator`,{},()=>[(0,e.createVNode)(r,{size:a.value,decorative:``},null,8,[`size`])],!0),i.value.length>0?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,u,(0,e.toDisplayString)(i.value),1)):(0,e.createCommentVNode)(``,!0)],16)):(0,e.createCommentVNode)(``,!0)],10,c))}}),[[`__scopeId`,`data-v-ac332306`]]),f=[`type`,`disabled`,`aria-busy`],p={key:0,class:`v-loading-button__indicator`,"aria-hidden":`true`},m=n((0,e.defineComponent)({__name:`index`,props:{loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},type:{default:`button`},indicatorSize:{default:16}},setup(t){let n=t,i=(0,e.computed)(()=>n.disabled||n.loading),a=(0,e.computed)(()=>{let e=n.type;return e===`submit`||e===`reset`?e:`button`}),o=(0,e.computed)(()=>Number.isFinite(n.indicatorSize)?Math.max(0,n.indicatorSize):16);return(n,s)=>((0,e.openBlock)(),(0,e.createElementBlock)(`button`,{class:(0,e.normalizeClass)([`v-loading-button`,{"v-loading-button--loading":t.loading}]),type:a.value,disabled:i.value,"aria-busy":t.loading?`true`:void 0},[(0,e.createElementVNode)(`span`,{class:(0,e.normalizeClass)([`v-loading-button__content`,{"v-loading-button__content--hidden":t.loading}])},[(0,e.renderSlot)(n.$slots,`default`,{},void 0,!0)],2),t.loading?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,p,[(0,e.renderSlot)(n.$slots,`indicator`,{},()=>[(0,e.createVNode)(r,{size:o.value,decorative:``},null,8,[`size`])],!0)])):(0,e.createCommentVNode)(``,!0)],10,f))}}),[[`__scopeId`,`data-v-323480f1`]]),h=`bars.blob.bounce.breathing.card-flip.dot-sweep.dots.dual-arc.element.equalizer.fallback.flow.gradient-ring.grid.hashtag.heatmap.liquid.logo-spin.morph.orbit-dots.orbit.plane.progress-ring.pulse.ring.ripple.rotate.signal.sliding-bars.snake.spin-dots.spin.squares.stair.typing.wave`.split(`.`),g={class:`v-loader__visual`,"aria-hidden":`true`},_={key:0,class:`v-loader__value`},v=n((0,e.defineComponent)({__name:`index`,props:{variant:{default:`spin`},color:{default:`currentColor`},size:{default:40},duration:{default:1e3},label:{default:`Loading`},decorative:{type:Boolean,default:!1},count:{},value:{default:null}},setup(t){let n=t,r={breathing:2,"dual-arc":2},i={grid:4,heatmap:9,squares:9};function a(e,t=``){return typeof e==`string`&&e.trim().length>0?e.trim():t}function o(e,t,n,r){if(typeof e!=`number`||!Number.isFinite(e))return t;let i=Math.max(n,e);return r===void 0?i:Math.min(r,i)}let s=(0,e.computed)(()=>{let e=typeof n.variant==`string`?n.variant:``;return h.find(t=>t===e)??`spin`}),c=(0,e.computed)(()=>o(n.size,40,12)),l=(0,e.computed)(()=>o(n.duration,1e3,100)),u=(0,e.computed)(()=>r[s.value]??Math.round(o(n.count,i[s.value]??4,1,12))),d=(0,e.computed)(()=>a(n.color,`currentColor`)),f=(0,e.computed)(()=>a(n.label)),p=(0,e.computed)(()=>!!n.decorative||f.value.length===0),m=(0,e.computed)(()=>typeof n.value==`number`&&Number.isFinite(n.value)?Math.min(100,Math.max(0,n.value)):null),v=(0,e.computed)(()=>p.value?{"aria-hidden":`true`}:{role:`status`,"aria-label":f.value}),y=(0,e.computed)(()=>({"--vl-size":`${c.value}px`,"--vl-color":d.value,"--vl-duration":`${l.value}ms`,"--vl-value":`${m.value??72}%`,"--vl-total":String(u.value)})),b=(0,e.computed)(()=>Array.from({length:u.value}));return(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`span`,(0,e.mergeProps)({class:[`v-loader`,`v-loader--${s.value}`],style:y.value},v.value),[(0,e.createElementVNode)(`span`,g,[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(b.value,(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`span`,{key:n,class:`v-loader__mark`,style:(0,e.normalizeStyle)({"--vl-index":n})},null,4))),128)),s.value===`progress-ring`&&m.value!==null?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,_,(0,e.toDisplayString)(Math.round(m.value))+`%`,1)):(0,e.createCommentVNode)(``,!0)])],16))}}),[[`__scopeId`,`data-v-f38f76f8`]]);function y(t,n){return(0,e.defineComponent)({name:t,inheritAttrs:!1,setup(t,{attrs:r,slots:i}){return()=>(0,e.h)(v,{...r,variant:n},i)}})}var b=y(`VBarsLoader`,`bars`),ee=y(`VBlobLoader`,`blob`),te=y(`VBounceLoader`,`bounce`),ne=y(`VBreathingLoader`,`breathing`),re=y(`VCardFlipLoader`,`card-flip`),ie=y(`VDotSweepLoader`,`dot-sweep`),x=y(`VDotsLoader`,`dots`),S=y(`VDualArcLoader`,`dual-arc`),C=y(`VElementLoader`,`element`),w=y(`VEqualizerLoader`,`equalizer`),T=y(`VFallbackLoader`,`fallback`),E=y(`VFlowLoader`,`flow`),D=y(`VGradientRingLoader`,`gradient-ring`),O=y(`VGridLoader`,`grid`),k=y(`VHashtagLoader`,`hashtag`),A=y(`VHeatmapLoader`,`heatmap`),j=y(`VLiquidLoader`,`liquid`),M=y(`VLogoSpinLoader`,`logo-spin`),N=y(`VMorphLoader`,`morph`),P=y(`VOrbitDotsLoader`,`orbit-dots`),F=y(`VOrbitLoader`,`orbit`),I=y(`VPlaneLoader`,`plane`),L=y(`VProgressRingLoader`,`progress-ring`),R=y(`VPulseLoader`,`pulse`),z=y(`VRingLoader`,`ring`),B=y(`VRippleLoader`,`ripple`),V=y(`VRotateLoader`,`rotate`),H=y(`VSignalLoader`,`signal`),U=y(`VSlidingBarsLoader`,`sliding-bars`),W=y(`VSnakeLoader`,`snake`),G=y(`VSpinDotsLoader`,`spin-dots`),K=y(`VSpinLoader`,`spin`),q=y(`VSquaresLoader`,`squares`),J=y(`VStairLoader`,`stair`),ae=y(`VTypingLoader`,`typing`),oe=y(`VWaveLoader`,`wave`),se={class:`v-pattern-skeleton__body`},ce={key:1,class:`v-pattern-skeleton__stats`},le={class:`v-pattern-skeleton__body`},ue={class:`v-pattern-skeleton__body`},de={key:1,class:`v-pattern-skeleton__inline`},fe={key:0,class:`v-pattern-skeleton__stats`},pe={class:`v-pattern-skeleton__body`},Y=n((0,e.defineComponent)({__name:`index`,props:{pattern:{default:`lines`},rows:{default:3},columns:{default:3},mediaHeight:{},avatarSize:{},showMedia:{type:Boolean,default:!0},showAvatar:{type:Boolean,default:!0},showHeader:{type:Boolean,default:!0},showChart:{type:Boolean,default:!0},showStats:{type:Boolean,default:!0},showSubmit:{type:Boolean,default:!0},showRating:{type:Boolean,default:!0},showPrice:{type:Boolean,default:!0},showCta:{type:Boolean,default:!0},color:{},highlightColor:{},animated:{type:Boolean,default:!0},label:{}},setup(t){let n=t,r=[`lines`,`article`,`card`,`profile`,`list`,`table`,`media`,`form`,`dashboard`,`feed`,`product`];function i(e,t,n=12){return typeof e==`number`&&Number.isFinite(e)?Math.min(n,Math.max(1,Math.round(e))):t}function o(e){return typeof e==`string`&&e.trim()?e.trim():void 0}let s=(0,e.computed)(()=>r.includes(n.pattern)?n.pattern:`lines`),c=(0,e.computed)(()=>i(n.rows,3)),l=(0,e.computed)(()=>i(n.columns,3,6)),u=(0,e.computed)(()=>i(n.avatarSize,48,160)),d=(0,e.computed)(()=>o(n.label)??``),f=(0,e.computed)(()=>d.value?{role:`status`,"aria-label":d.value,"aria-busy":`true`}:{"aria-hidden":`true`}),p=(0,e.computed)(()=>({"--v-skeleton-base-color":o(n.color),"--v-skeleton-highlight-color":o(n.highlightColor)})),m=(0,e.computed)(()=>({gridTemplateColumns:`repeat(${l.value}, minmax(0, 1fr))`}));return(n,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,(0,e.mergeProps)({class:[`v-pattern-skeleton`,`v-pattern-skeleton--${s.value}`],style:p.value},f.value),[s.value===`profile`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:0},[t.showAvatar?((0,e.openBlock)(),(0,e.createBlock)(a,{key:0,variant:`circle`,animated:t.animated,width:u.value},null,8,[`animated`,`width`])):(0,e.createCommentVNode)(``,!0),(0,e.createElementVNode)(`div`,se,[(0,e.createVNode)(a,{animated:t.animated,width:`42%`,height:`1rem`},null,8,[`animated`]),(0,e.createVNode)(a,{animated:t.animated,width:`64%`,height:`.75rem`},null,8,[`animated`]),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,width:n===c.value?`62%`:`100%`,height:`.7rem`},null,8,[`animated`,`width`]))),128))]),t.showStats?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,ce,[((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(3,n=>(0,e.createVNode)(a,{key:n,variant:`rect`,animated:t.animated,height:`2.5rem`},null,8,[`animated`])),64))])):(0,e.createCommentVNode)(``,!0)],64)):s.value===`feed`?((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,{key:1},(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:n,class:`v-pattern-skeleton__feed-item`},[t.showAvatar?((0,e.openBlock)(),(0,e.createBlock)(a,{key:0,variant:`circle`,animated:t.animated,width:u.value},null,8,[`animated`,`width`])):(0,e.createCommentVNode)(``,!0),(0,e.createElementVNode)(`div`,le,[(0,e.createVNode)(a,{animated:t.animated,width:`40%`,height:`.85rem`},null,8,[`animated`]),(0,e.createVNode)(a,{animated:t.animated,width:`100%`,height:`.75rem`},null,8,[`animated`]),(0,e.createVNode)(a,{animated:t.animated,width:`72%`,height:`.75rem`},null,8,[`animated`])])]))),128)):s.value===`media`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:2},[(0,e.createVNode)(a,{variant:`rect`,animated:t.animated,width:t.mediaHeight?t.mediaHeight:`7.5rem`,height:`5.5rem`},null,8,[`animated`,`width`]),(0,e.createElementVNode)(`div`,ue,[(0,e.createVNode)(a,{animated:t.animated,width:`36%`,height:`.7rem`},null,8,[`animated`]),(0,e.createVNode)(a,{animated:t.animated,width:`100%`,height:`1rem`},null,8,[`animated`]),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,width:n===c.value?`62%`:`86%`,height:`.7rem`},null,8,[`animated`,`width`]))),128))])],64)):s.value===`product`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:3},[(0,e.createVNode)(a,{variant:`rect`,animated:t.animated,width:`100%`,height:t.mediaHeight??`10rem`},null,8,[`animated`,`height`]),(0,e.createVNode)(a,{animated:t.animated,width:`74%`,height:`1rem`},null,8,[`animated`]),t.showRating?((0,e.openBlock)(),(0,e.createBlock)(a,{key:0,variant:`rect`,animated:t.animated,width:`4.5rem`,height:`1.25rem`},null,8,[`animated`])):(0,e.createCommentVNode)(``,!0),t.showPrice?((0,e.openBlock)(),(0,e.createBlock)(a,{key:1,animated:t.animated,width:`35%`,height:`1.15rem`},null,8,[`animated`])):(0,e.createCommentVNode)(``,!0),t.showCta?((0,e.openBlock)(),(0,e.createBlock)(a,{key:2,variant:`rect`,animated:t.animated,width:`46%`,height:`2.25rem`},null,8,[`animated`])):(0,e.createCommentVNode)(``,!0)],64)):s.value===`card`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:4},[t.showMedia?((0,e.openBlock)(),(0,e.createBlock)(a,{key:0,variant:`rect`,animated:t.animated,width:`100%`,height:t.mediaHeight??`6rem`},null,8,[`animated`,`height`])):(0,e.createCommentVNode)(``,!0),t.showAvatar?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,de,[(0,e.createVNode)(a,{variant:`circle`,animated:t.animated,width:u.value},null,8,[`animated`,`width`]),(0,e.createVNode)(a,{animated:t.animated,width:`45%`,height:`.8rem`},null,8,[`animated`])])):(0,e.createCommentVNode)(``,!0),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,width:n===c.value?`72%`:`100%`,height:`.75rem`},null,8,[`animated`,`width`]))),128))],64)):s.value===`table`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:5},[t.showHeader?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,class:`v-pattern-skeleton__table-row v-pattern-skeleton__table-header`,style:(0,e.normalizeStyle)(m.value)},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(l.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,height:`.9rem`},null,8,[`animated`]))),128))],4)):(0,e.createCommentVNode)(``,!0),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:n,class:`v-pattern-skeleton__table-row v-pattern-skeleton__data-row`,style:(0,e.normalizeStyle)(m.value)},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(l.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,height:`.75rem`},null,8,[`animated`]))),128))],4))),128))],64)):s.value===`dashboard`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:6},[t.showStats?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,fe,[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(l.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,variant:`rect`,animated:t.animated,height:`4.5rem`},null,8,[`animated`]))),128))])):(0,e.createCommentVNode)(``,!0),t.showChart?((0,e.openBlock)(),(0,e.createBlock)(a,{key:1,variant:`rect`,animated:t.animated,width:`100%`,height:t.mediaHeight??`9rem`},null,8,[`animated`,`height`])):(0,e.createCommentVNode)(``,!0),(0,e.createElementVNode)(`div`,{class:`v-pattern-skeleton__table-row v-pattern-skeleton__table-header`,style:(0,e.normalizeStyle)(m.value)},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(l.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,height:`.7rem`},null,8,[`animated`]))),128))],4),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:n,class:`v-pattern-skeleton__table-row v-pattern-skeleton__data-row`,style:(0,e.normalizeStyle)(m.value)},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(l.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,height:`.65rem`},null,8,[`animated`]))),128))],4))),128))],64)):s.value===`form`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:7},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:n,class:`v-pattern-skeleton__field`},[(0,e.createVNode)(a,{animated:t.animated,width:`30%`,height:`.7rem`},null,8,[`animated`]),(0,e.createVNode)(a,{variant:`rect`,animated:t.animated,width:`100%`,height:`2.5rem`},null,8,[`animated`])]))),128)),t.showSubmit?((0,e.openBlock)(),(0,e.createBlock)(a,{key:0,variant:`rect`,animated:t.animated,width:`8rem`,height:`2.5rem`},null,8,[`animated`])):(0,e.createCommentVNode)(``,!0)],64)):s.value===`list`?((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,{key:8},(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:n,class:`v-pattern-skeleton__feed-item`},[t.showAvatar?((0,e.openBlock)(),(0,e.createBlock)(a,{key:0,variant:`circle`,animated:t.animated,width:u.value},null,8,[`animated`,`width`])):(0,e.createCommentVNode)(``,!0),(0,e.createElementVNode)(`div`,pe,[(0,e.createVNode)(a,{animated:t.animated,width:`76%`,height:`.85rem`},null,8,[`animated`]),(0,e.createVNode)(a,{animated:t.animated,width:`54%`,height:`.7rem`},null,8,[`animated`])])]))),128)):((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:9},[s.value===`article`&&t.showMedia?((0,e.openBlock)(),(0,e.createBlock)(a,{key:0,variant:`rect`,animated:t.animated,width:`100%`,height:t.mediaHeight??`10rem`},null,8,[`animated`,`height`])):(0,e.createCommentVNode)(``,!0),s.value===`article`?((0,e.openBlock)(),(0,e.createBlock)(a,{key:1,animated:t.animated,width:`72%`,height:`1.35rem`},null,8,[`animated`])):(0,e.createCommentVNode)(``,!0),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,width:n===c.value?`62%`:`100%`,height:`.8rem`},null,8,[`animated`,`width`]))),128))],64))],16))}}),[[`__scopeId`,`data-v-e1a021e1`]]),me=n((0,e.defineComponent)({__name:`index`,props:{label:{},gap:{default:`0.75rem`},decorative:{type:Boolean,default:!1}},setup(t){let n=t,r=(0,e.computed)(()=>typeof n.label==`string`?n.label.trim():``),i=(0,e.computed)(()=>n.decorative?{"aria-hidden":`true`}:r.value?{role:`status`,"aria-label":r.value,"aria-busy":`true`}:{});return(n,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,(0,e.mergeProps)({class:`v-skeleton-group`,style:{gap:t.gap}},i.value),[(0,e.renderSlot)(n.$slots,`default`,{},void 0,!0)],16))}}),[[`__scopeId`,`data-v-6a86d8c9`]]),X=(0,e.defineComponent)({__name:`index`,props:{loading:{type:Boolean,default:!0},pattern:{default:`lines`},rows:{default:3},columns:{},mediaHeight:{},avatarSize:{},showMedia:{type:Boolean,default:!0},showAvatar:{type:Boolean,default:!0},showHeader:{type:Boolean,default:!0},showChart:{type:Boolean,default:!0},showStats:{type:Boolean,default:!0},showSubmit:{type:Boolean,default:!0},showRating:{type:Boolean,default:!0},showPrice:{type:Boolean,default:!0},showCta:{type:Boolean,default:!0},color:{},highlightColor:{},animated:{type:Boolean,default:!0},label:{default:`Loading content`}},setup(t){let n=t,r=(0,e.computed)(()=>({pattern:n.pattern,rows:n.rows,columns:n.columns,color:n.color,highlightColor:n.highlightColor,animated:n.animated,label:n.label,mediaHeight:n.mediaHeight,avatarSize:n.avatarSize,showMedia:n.showMedia,showAvatar:n.showAvatar,showHeader:n.showHeader,showChart:n.showChart,showStats:n.showStats,showSubmit:n.showSubmit,showRating:n.showRating,showPrice:n.showPrice,showCta:n.showCta}));return(n,i)=>t.loading?(0,e.renderSlot)(n.$slots,`skeleton`,{},()=>[(0,e.createVNode)(Y,(0,e.normalizeProps)((0,e.guardReactiveProps)(r.value)),null,16)],void 0,1):(0,e.renderSlot)(n.$slots,`default`,{},void 0,void 0,0)}}),he=a;function Z(t,n){return(0,e.defineComponent)({name:t,inheritAttrs:!1,setup(t,{attrs:r}){return()=>(0,e.h)(Y,{...r,pattern:n})}})}var ge=Z(`VArticleSkeleton`,`article`),_e=Z(`VCardSkeleton`,`card`),ve=Z(`VDashboardSkeleton`,`dashboard`),ye=Z(`VFeedSkeleton`,`feed`),be=Z(`VFormSkeleton`,`form`),xe=Z(`VListSkeleton`,`list`),Q=Z(`VMediaCardSkeleton`,`media`),Se=Z(`VProductCardSkeleton`,`product`),Ce=Z(`VProfileSkeleton`,`profile`),we=Z(`VTableSkeleton`,`table`),Te=(0,e.defineComponent)({name:`VAutoSkeleton`,inheritAttrs:!1,props:[`loading`,`pattern`,`rows`,`columns`,`color`,`highlightColor`,`animated`,`label`,`mediaHeight`,`avatarSize`,`showMedia`,`showAvatar`,`showHeader`,`showChart`,`showStats`,`showSubmit`,`showRating`,`showPrice`,`showCta`],setup(t,{attrs:n,slots:r}){return()=>(0,e.h)(X,{...n,...t},r)}});function Ee(){let t=(0,e.ref)(0),n=(0,e.computed)(()=>t.value>0),r=(0,e.readonly)(t);async function i(e){t.value++;try{return await e()}finally{t.value=Math.max(0,t.value-1)}}return{isLoading:n,pendingCount:r,execute:i}}var De=200;function $(e,t){return e===void 0||!Number.isFinite(e)?t:Math.max(0,e)}function Oe(t){let n=typeof t==`number`?t:t?.delay,r=typeof t==`number`?0:t?.minVisibleDuration,i=$(n,De),a=$(r,0),o=(0,e.ref)(0),s=(0,e.ref)(!1),c=(0,e.readonly)(s),l=(0,e.readonly)(o),u=null,d=null,f=null,p=!1;function m(){u!==null&&(clearTimeout(u),u=null)}function h(){d!==null&&(clearTimeout(d),d=null)}function g(){s.value=!0,f=Date.now()}function _(){p||s.value||u!==null||o.value===0||(i<=0?g():u=setTimeout(()=>{u=null,!p&&o.value>0&&g()},i))}function v(){if(m(),h(),!s.value){f=null;return}if(a<=0||f===null){s.value=!1,f=null;return}let e=a-(Date.now()-f);e<=0?(s.value=!1,f=null):d=setTimeout(()=>{d=null,!p&&o.value===0&&(s.value=!1,f=null)},e)}(0,e.getCurrentScope)()&&(0,e.onScopeDispose)(()=>{p=!0,m(),h(),s.value=!1,f=null});async function y(e){o.value++,h(),_();try{return await e()}finally{o.value=Math.max(0,o.value-1),o.value===0&&v()}}return{isLoading:c,pendingCount:l,execute:y}}function ke(t){let n=typeof t==`function`?t:()=>t,r=(0,e.computed)(()=>{let e=0;for(let t of n())(typeof t==`function`?t():t.value)&&e++;return e});return{isLoading:(0,e.computed)(()=>r.value>0),activeCount:r}}exports.VArticleSkeleton=ge,exports.VAutoSkeleton=Te,exports.VBarsLoader=b,exports.VBlobLoader=ee,exports.VBounceLoader=te,exports.VBreathingLoader=ne,exports.VCardFlipLoader=re,exports.VCardSkeleton=_e,exports.VDashboardSkeleton=ve,exports.VDotSweepLoader=ie,exports.VDotsLoader=x,exports.VDualArcLoader=S,exports.VElementLoader=C,exports.VEqualizerLoader=w,exports.VFallbackLoader=T,exports.VFeedSkeleton=ye,exports.VFlowLoader=E,exports.VFormSkeleton=be,exports.VGradientRingLoader=D,exports.VGridLoader=O,exports.VHashtagLoader=k,exports.VHeatmapLoader=A,exports.VLiquidLoader=j,exports.VListSkeleton=xe,exports.VLoader=v,exports.VLoading=d,exports.VLoadingButton=m,exports.VLogoSpinLoader=M,exports.VMediaCardSkeleton=Q,exports.VMorphLoader=N,exports.VOrbitDotsLoader=P,exports.VOrbitLoader=F,exports.VPatternSkeleton=Y,exports.VPlaneLoader=I,exports.VProductCardSkeleton=Se,exports.VProfileSkeleton=Ce,exports.VProgress=s,exports.VProgressRingLoader=L,exports.VPulseLoader=R,exports.VRingLoader=z,exports.VRippleLoader=B,exports.VRotateLoader=V,exports.VSignalLoader=H,exports.VSkeleton=a,exports.VSkeletonGroup=me,exports.VSkeletonLoader=he,exports.VSkeletonSwitch=X,exports.VSlidingBarsLoader=U,exports.VSnakeLoader=W,exports.VSpinDotsLoader=G,exports.VSpinLoader=K,exports.VSpinner=r,exports.VSquaresLoader=q,exports.VStairLoader=J,exports.VTableSkeleton=we,exports.VTypingLoader=ae,exports.VWaveLoader=oe,exports.useDelayedLoading=Oe,exports.useLoading=Ee,exports.useLoadingGroup=ke;
|
package/dist/index.js
CHANGED
|
@@ -33,7 +33,7 @@ var S = /*@__PURE__*/ s({
|
|
|
33
33
|
let n = e.__vccOpts || e;
|
|
34
34
|
for (let [e, r] of t) n[e] = r;
|
|
35
35
|
return n;
|
|
36
|
-
}, w = /*#__PURE__*/ C(S, [["__scopeId", "data-v-
|
|
36
|
+
}, w = /*#__PURE__*/ C(S, [["__scopeId", "data-v-b967b6f4"]]);
|
|
37
37
|
//#endregion
|
|
38
38
|
//#region src/utils/css.ts
|
|
39
39
|
function T(e, t) {
|
|
@@ -86,7 +86,7 @@ var E = /*#__PURE__*/ C(/* @__PURE__ */ s({
|
|
|
86
86
|
style: c.value
|
|
87
87
|
}, u.value), null, 16));
|
|
88
88
|
}
|
|
89
|
-
}), [["__scopeId", "data-v-
|
|
89
|
+
}), [["__scopeId", "data-v-9a8cf481"]]), D = [
|
|
90
90
|
"aria-label",
|
|
91
91
|
"aria-valuemin",
|
|
92
92
|
"aria-valuemax",
|
|
@@ -144,7 +144,7 @@ var E = /*#__PURE__*/ C(/* @__PURE__ */ s({
|
|
|
144
144
|
style: m(v.value)
|
|
145
145
|
}, null, 4)], 14, D));
|
|
146
146
|
}
|
|
147
|
-
}), [["__scopeId", "data-v-
|
|
147
|
+
}), [["__scopeId", "data-v-8a7154ed"]]), ee = ["aria-busy"], te = ["inert"], ne = {
|
|
148
148
|
key: 0,
|
|
149
149
|
class: "v-loading__label"
|
|
150
150
|
}, re = /*#__PURE__*/ C(/* @__PURE__ */ s({
|
package/dist/style.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.v-spinner[data-v-fc2fa43e]{vertical-align:middle;flex:none;justify-content:center;align-items:center;display:inline-flex}.v-spinner__indicator[data-v-fc2fa43e]{box-sizing:border-box;border:var(--v-spinner-border-width,3px) solid var(--v-spinner-track-color,currentColor);border-radius:50%;flex:none;animation:.75s linear infinite veloader-spin-fc2fa43e;display:inline-block}@keyframes veloader-spin-fc2fa43e{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.v-spinner__indicator[data-v-fc2fa43e]{animation:none}}.v-skeleton[data-v-0ae45ca2]{box-sizing:border-box;background-color:var(--v-skeleton-base-color,#94a3b847);display:block;position:relative;overflow:hidden}.v-skeleton--text[data-v-0ae45ca2]{border-radius:var(--v-skeleton-radius,.25em)}.v-skeleton--rect[data-v-0ae45ca2]{border-radius:var(--v-skeleton-radius,.5rem)}.v-skeleton--circle[data-v-0ae45ca2]{border-radius:50%}.v-skeleton--animated[data-v-0ae45ca2]:after{content:"";background-image:linear-gradient(90deg, transparent, var(--v-skeleton-highlight-color,#ffffff8c), transparent);animation:veloader-skeleton-shimmer-0ae45ca2 var(--v-skeleton-duration,1.4s) ease-in-out infinite;position:absolute;inset:0;transform:translate(-100%)}@keyframes veloader-skeleton-shimmer-0ae45ca2{to{transform:translate(100%)}}@media (prefers-reduced-motion:reduce){.v-skeleton--animated[data-v-0ae45ca2]:after{animation:none;display:none}}.v-progress[data-v-86aeb0f3]{box-sizing:border-box;border-radius:var(--v-progress-radius,999px);background-color:var(--v-progress-track-color,#e2e8f0);width:100%;position:relative;overflow:hidden}.v-progress__bar[data-v-86aeb0f3]{border-radius:inherit;background-color:var(--v-progress-color,#2563eb);height:100%;transition:width .2s}.v-progress--indeterminate .v-progress__bar[data-v-86aeb0f3]{width:40%;animation:veloader-progress-indeterminate-86aeb0f3 var(--v-progress-duration,1.4s) ease-in-out infinite}@keyframes veloader-progress-indeterminate-86aeb0f3{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media (prefers-reduced-motion:reduce){.v-progress__bar[data-v-86aeb0f3]{transition:none}.v-progress--indeterminate .v-progress__bar[data-v-86aeb0f3]{opacity:.55;width:100%;animation:none;transform:none}}.v-loading[data-v-ac332306]{isolation:isolate;position:relative}.v-loading__content[data-v-ac332306]{min-width:0}.v-loading__overlay[data-v-ac332306]{z-index:var(--v-loading-z-index,10);box-sizing:border-box;border-radius:var(--v-loading-radius,inherit);background-color:var(--v-loading-overlay-background,#ffffffb8);-webkit-backdrop-filter:var(--v-loading-backdrop-filter,none);backdrop-filter:var(--v-loading-backdrop-filter,none);color:var(--v-loading-color,#334155);pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;padding:1rem;display:flex;position:absolute;inset:0}.v-loading--blocking .v-loading__overlay[data-v-ac332306]{pointer-events:auto}.v-loading__label[data-v-ac332306]{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.v-loading__overlay[data-v-ac332306]{-webkit-backdrop-filter:none;backdrop-filter:none}}.v-loading-button[data-v-323480f1]{vertical-align:middle;box-sizing:border-box;cursor:pointer;justify-content:center;align-items:center;display:inline-flex;position:relative}.v-loading-button[data-v-323480f1]:disabled{cursor:not-allowed}.v-loading-button__content[data-v-323480f1]{justify-content:center;align-items:center;gap:var(--v-loading-button-gap,.5rem);display:inline-flex}.v-loading-button__content--hidden[data-v-323480f1]{opacity:0;pointer-events:none}.v-loading-button__indicator[data-v-323480f1]{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.v-loading-button[data-v-323480f1]{transition:none}}.v-loader[data-v-f38f76f8]{inline-size:var(--vl-size);block-size:var(--vl-size);color:var(--vl-color);vertical-align:middle;contain:layout paint;display:inline-flex}.v-loader__visual[data-v-f38f76f8]{block-size:100%;inline-size:100%;display:block;position:relative}.v-loader__mark[data-v-f38f76f8]{box-sizing:border-box;background:currentColor;display:block;position:absolute}.v-loader__value[data-v-f38f76f8]{font:600 calc(var(--vl-size) * .22)/1 ui-sans-serif, system-ui, sans-serif;place-items:center;display:grid;position:absolute;inset:0}.v-loader--spin .v-loader__visual[data-v-f38f76f8],.v-loader--gradient-ring .v-loader__visual[data-v-f38f76f8],.v-loader--rotate .v-loader__visual[data-v-f38f76f8]{border:max(2px, calc(var(--vl-size) * .09)) solid color-mix(in srgb, currentColor 18%, transparent);animation:spin-f38f76f8 var(--vl-duration) linear infinite;border-top-color:currentColor;border-radius:50%}.v-loader--gradient-ring .v-loader__visual[data-v-f38f76f8]{background:conic-gradient(from 40deg, transparent, currentColor, color-mix(in srgb, currentColor 35%, white), transparent 78%);-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - max(2px, calc(var(--vl-size) * .1))), #000 0);mask:radial-gradient(farthest-side, transparent calc(100% - max(2px, calc(var(--vl-size) * .1))), #000 0);border:0}.v-loader--rotate .v-loader__visual[data-v-f38f76f8]{border-radius:28% 72% 72% 28%;animation-timing-function:cubic-bezier(.6,.05,.35,.95)}.v-loader--ring .v-loader__visual[data-v-f38f76f8]{border:max(2px, calc(var(--vl-size) * .09)) solid currentColor;animation:spin-f38f76f8 calc(var(--vl-duration) * 1.25) cubic-bezier(.55,.1,.45,.9) infinite;border-inline-end-color:#0000;border-radius:50%}.v-loader--pulse .v-loader__visual[data-v-f38f76f8]{animation:pulse-f38f76f8 var(--vl-duration) ease-in-out infinite;background:currentColor;border-radius:50%}.v-loader--ripple .v-loader__visual[data-v-f38f76f8]{border:max(2px, calc(var(--vl-size) * .06)) solid currentColor;animation:ripple-f38f76f8 var(--vl-duration) ease-out infinite;border-radius:50%}.v-loader--ripple .v-loader__mark[data-v-f38f76f8]{border:inherit;border-radius:inherit;animation:ripple-f38f76f8 var(--vl-duration) ease-out calc(var(--vl-duration) / -2) infinite;background:0 0;inset:0}.v-loader--orbit .v-loader__visual[data-v-f38f76f8]{border:max(1px, calc(var(--vl-size) * .035)) solid color-mix(in srgb, currentColor 35%, transparent);animation:spin-f38f76f8 calc(var(--vl-duration) * 1.6) linear infinite;border-radius:50%}.v-loader--orbit .v-loader__mark[data-v-f38f76f8]{block-size:22%;inline-size:22%;transform-origin:50% calc(var(--vl-size) * .61);animation:orbit-f38f76f8 var(--vl-duration) linear infinite;border-radius:50%;inset:-11% auto auto 39%}.v-loader--orbit-dots .v-loader__visual[data-v-f38f76f8]{animation:spin-f38f76f8 calc(var(--vl-duration) * 1.5) linear infinite}.v-loader--orbit-dots .v-loader__mark[data-v-f38f76f8]{block-size:19%;inline-size:19%;transform:rotate(calc(var(--vl-index) * 360deg / var(--vl-total))) translateY(calc(var(--vl-size) * -.38));opacity:calc(.35 + var(--vl-index) / var(--vl-total));border-radius:50%;inset:40%}.v-loader--spin-dots .v-loader__visual[data-v-f38f76f8]{animation:spin-f38f76f8 var(--vl-duration) steps(12) infinite}.v-loader--spin-dots .v-loader__mark[data-v-f38f76f8]{block-size:13%;inline-size:13%;transform:rotate(calc(var(--vl-index) * 360deg / var(--vl-total))) translateY(calc(var(--vl-size) * -.42));transform-origin:50%;opacity:calc(.2 + var(--vl-index) / var(--vl-total));border-radius:50%;inset:43.5%}.v-loader--progress-ring .v-loader__visual[data-v-f38f76f8]{background:conic-gradient(currentColor var(--vl-value), color-mix(in srgb, currentColor 14%, transparent) 0);-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - max(3px, calc(var(--vl-size) * .1))), #000 0);mask:radial-gradient(farthest-side, transparent calc(100% - max(3px, calc(var(--vl-size) * .1))), #000 0);animation:progress-ring-f38f76f8 calc(var(--vl-duration) * 2) ease-in-out infinite alternate;border-radius:50%}.v-loader--progress-ring:has(.v-loader__value) .v-loader__visual[data-v-f38f76f8]{animation:none}.v-loader--dots[data-v-f38f76f8],.v-loader--typing[data-v-f38f76f8],.v-loader--bounce[data-v-f38f76f8]{inline-size:max(calc(var(--vl-size) * 1.5), calc(var(--vl-size) * (.31 * var(--vl-total) - .12)))}.v-loader--bars[data-v-f38f76f8],.v-loader--equalizer[data-v-f38f76f8],.v-loader--wave[data-v-f38f76f8],.v-loader--stair[data-v-f38f76f8]{inline-size:max(calc(var(--vl-size) * 1.5), calc(var(--vl-size) * (.21 * var(--vl-total) - .08)))}.v-loader--dots .v-loader__visual[data-v-f38f76f8],.v-loader--typing .v-loader__visual[data-v-f38f76f8],.v-loader--bounce .v-loader__visual[data-v-f38f76f8]{justify-content:center;align-items:center;gap:calc(var(--vl-size) * .12);display:flex}.v-loader--dots .v-loader__mark[data-v-f38f76f8],.v-loader--typing .v-loader__mark[data-v-f38f76f8],.v-loader--bounce .v-loader__mark[data-v-f38f76f8]{inline-size:calc(var(--vl-size) * .19);block-size:calc(var(--vl-size) * .19);animation:dot-f38f76f8 var(--vl-duration) ease-in-out calc(var(--vl-index) * var(--vl-duration) / -8) infinite;border-radius:50%;position:relative}.v-loader--typing .v-loader__mark[data-v-f38f76f8]{animation-name:typing-f38f76f8}.v-loader--bounce .v-loader__mark[data-v-f38f76f8]{box-shadow:0 calc(var(--vl-size) * .18) 0 color-mix(in srgb, currentColor 14%, transparent);animation-name:bounce-f38f76f8}.v-loader--bars .v-loader__visual[data-v-f38f76f8],.v-loader--equalizer .v-loader__visual[data-v-f38f76f8],.v-loader--wave .v-loader__visual[data-v-f38f76f8],.v-loader--stair .v-loader__visual[data-v-f38f76f8]{justify-content:center;align-items:center;gap:calc(var(--vl-size) * .08);display:flex}.v-loader--bars .v-loader__mark[data-v-f38f76f8],.v-loader--equalizer .v-loader__mark[data-v-f38f76f8],.v-loader--wave .v-loader__mark[data-v-f38f76f8],.v-loader--stair .v-loader__mark[data-v-f38f76f8]{inline-size:calc(var(--vl-size) * .13);transform-origin:50%;block-size:65%;animation:bars-f38f76f8 var(--vl-duration) ease-in-out calc(var(--vl-index) * var(--vl-duration) / -7) infinite;border-radius:999px;position:relative}.v-loader--equalizer .v-loader__mark[data-v-f38f76f8]{border-radius:calc(var(--vl-size) * .04);animation-name:equalizer-f38f76f8}.v-loader--wave .v-loader__mark[data-v-f38f76f8]{border-radius:50%;block-size:18%;animation-name:wave-f38f76f8}.v-loader--stair .v-loader__mark[data-v-f38f76f8]{block-size:calc(18% + var(--vl-index) * 15%);align-self:flex-end;animation-name:stair-f38f76f8}.v-loader--grid .v-loader__visual[data-v-f38f76f8],.v-loader--squares .v-loader__visual[data-v-f38f76f8],.v-loader--heatmap .v-loader__visual[data-v-f38f76f8]{grid-template-columns:repeat(2,1fr);gap:12%;padding:8%;display:grid}.v-loader--grid .v-loader__mark[data-v-f38f76f8],.v-loader--squares .v-loader__mark[data-v-f38f76f8],.v-loader--heatmap .v-loader__mark[data-v-f38f76f8]{animation:grid-f38f76f8 var(--vl-duration) ease-in-out calc(var(--vl-index) * var(--vl-duration) / -6) infinite;border-radius:20%;position:relative}.v-loader--squares .v-loader__visual[data-v-f38f76f8]{grid-template-columns:repeat(3,1fr)}.v-loader--squares .v-loader__mark[data-v-f38f76f8]{border-radius:8%;animation-name:squares-f38f76f8}.v-loader--heatmap .v-loader__visual[data-v-f38f76f8]{grid-template-columns:repeat(3,1fr);gap:7%;padding:2%}.v-loader--heatmap .v-loader__mark[data-v-f38f76f8]{border-radius:20%;animation-name:heatmap-f38f76f8}.v-loader--card-flip .v-loader__visual[data-v-f38f76f8],.v-loader--element .v-loader__visual[data-v-f38f76f8],.v-loader--plane .v-loader__visual[data-v-f38f76f8],.v-loader--logo-spin .v-loader__visual[data-v-f38f76f8],.v-loader--morph .v-loader__visual[data-v-f38f76f8],.v-loader--blob .v-loader__visual[data-v-f38f76f8]{background:currentColor}.v-loader--card-flip .v-loader__visual[data-v-f38f76f8]{block-size:72%;inline-size:72%;animation:card-flip-f38f76f8 var(--vl-duration) cubic-bezier(.6,.05,.3,.95) infinite;border-radius:12%;margin:14%}.v-loader--element .v-loader__visual[data-v-f38f76f8]{block-size:62%;inline-size:62%;animation:element-f38f76f8 var(--vl-duration) ease-in-out infinite;border-radius:10%;margin:19%;transform:rotate(45deg)}.v-loader--plane .v-loader__visual[data-v-f38f76f8]{clip-path:polygon(50% 0,100% 100%,50% 78%,0 100%);animation:plane-f38f76f8 var(--vl-duration) ease-in-out infinite}.v-loader--logo-spin .v-loader__visual[data-v-f38f76f8]{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation:spin-f38f76f8 calc(var(--vl-duration) * 1.2) cubic-bezier(.5,0,.5,1) infinite;border-radius:30% 70%}.v-loader--morph .v-loader__visual[data-v-f38f76f8]{animation:morph-f38f76f8 var(--vl-duration) ease-in-out infinite;border-radius:32% 68% 62% 38%/35% 36% 64% 65%}.v-loader--blob .v-loader__visual[data-v-f38f76f8]{animation:blob-f38f76f8 calc(var(--vl-duration) * 1.8) ease-in-out infinite;border-radius:48% 52% 36% 64%/57% 40% 60% 43%}.v-loader--hashtag .v-loader__visual[data-v-f38f76f8]:before,.v-loader--hashtag .v-loader__visual[data-v-f38f76f8]:after{content:"";background:currentColor;border-radius:999px;position:absolute;inset:8% 39%;transform:rotate(15deg)}.v-loader--hashtag .v-loader__visual[data-v-f38f76f8]:after{transform:rotate(105deg)}.v-loader--fallback .v-loader__visual[data-v-f38f76f8]{border:max(2px, calc(var(--vl-size) * .08)) dashed currentColor;animation:spin-f38f76f8 calc(var(--vl-duration) * 1.4) linear infinite;border-radius:50%}.v-loader--signal .v-loader__visual[data-v-f38f76f8]{border:max(2px, calc(var(--vl-size) * .06)) solid currentColor;animation:signal-f38f76f8 var(--vl-duration) ease-in-out infinite;border-bottom-color:#0000;border-left-color:#0000;border-radius:100% 0 0}.v-loader--snake .v-loader__visual[data-v-f38f76f8]{border:max(3px, calc(var(--vl-size) * .1)) solid transparent;animation:snake-f38f76f8 var(--vl-duration) linear infinite;border-top-color:currentColor;border-right-color:currentColor;border-radius:50%}.v-loader--liquid .v-loader__visual[data-v-f38f76f8]{border:max(2px, calc(var(--vl-size) * .06)) solid currentColor;border-radius:50%;overflow:hidden}.v-loader--liquid .v-loader__visual[data-v-f38f76f8]:after{content:"";block-size:90%;inline-size:180%;animation:liquid-f38f76f8 var(--vl-duration) ease-in-out infinite;background:currentColor;border-radius:42%;position:absolute;inset:42% auto auto -40%}.v-loader--flow .v-loader__visual[data-v-f38f76f8]{background:color-mix(in srgb, currentColor 15%, transparent);border-radius:999px;overflow:hidden}.v-loader--flow .v-loader__visual[data-v-f38f76f8]:after{content:"";border-radius:inherit;animation:flow-f38f76f8 var(--vl-duration) ease-in-out infinite;background:currentColor;position:absolute;inset:36% 0}.v-loader--breathing .v-loader__mark[data-v-f38f76f8]{border-radius:50%}.v-loader--breathing .v-loader__mark[data-v-f38f76f8]:first-child{border:max(1px, calc(var(--vl-size) * .045)) solid currentColor;opacity:.4;animation:breathing-halo-f38f76f8 var(--vl-duration) cubic-bezier(.45, 0, .55, 1) infinite;background:0 0;inset:12%;transform:scale(.86)}.v-loader--breathing .v-loader__mark[data-v-f38f76f8]:last-child{inset:40%}.v-loader--dual-arc .v-loader__mark[data-v-f38f76f8]{border:max(1px, calc(var(--vl-size) * .055)) solid transparent;animation:spin-f38f76f8 var(--vl-duration) linear infinite;background:0 0;border-top-color:currentColor;border-right-color:currentColor;border-radius:50%;inset:5%}.v-loader--dual-arc .v-loader__mark[data-v-f38f76f8]:last-child{opacity:.65;animation-direction:reverse;animation-duration:calc(var(--vl-duration) * 1.25);border-color:#0000 #0000 currentColor currentColor;inset:25%}.v-loader--dot-sweep[data-v-f38f76f8]{inline-size:max(calc(var(--vl-size) * 1.5), calc(var(--vl-size) * (.34 * var(--vl-total) + .2)))}.v-loader--dot-sweep .v-loader__visual[data-v-f38f76f8]{justify-content:center;align-items:center;gap:calc(var(--vl-size) * .18);display:flex}.v-loader--dot-sweep .v-loader__mark[data-v-f38f76f8]{inline-size:calc(var(--vl-size) * .16);block-size:calc(var(--vl-size) * .16);opacity:.65;animation:dot-sweep-f38f76f8 var(--vl-duration) ease-in-out calc(var(--vl-index) * var(--vl-duration) / var(--vl-total) * -1) infinite;border-radius:50%;flex-shrink:0;position:relative}.v-loader--sliding-bars[data-v-f38f76f8]{inline-size:calc(var(--vl-size) * 1.5);block-size:max(var(--vl-size), calc(var(--vl-size) * (.2 * var(--vl-total) + .1)))}.v-loader--sliding-bars .v-loader__visual[data-v-f38f76f8]{justify-content:center;align-items:center;gap:calc(var(--vl-size) * .1);flex-direction:column;display:flex}.v-loader--sliding-bars .v-loader__mark[data-v-f38f76f8]{inline-size:calc(var(--vl-size) * .8);block-size:calc(var(--vl-size) * .1);opacity:.85;animation:sliding-bars-f38f76f8 var(--vl-duration) cubic-bezier(.65, 0, .35, 1) infinite;border-radius:999px;flex-shrink:0;position:relative}.v-loader--sliding-bars .v-loader__mark[data-v-f38f76f8]:nth-child(2n){opacity:.5;animation-delay:calc(var(--vl-duration) / -2)}@keyframes breathing-halo-f38f76f8{0%,to{opacity:.35;transform:scale(.86)}50%{opacity:.7;transform:scale(1.12)}}@keyframes dot-sweep-f38f76f8{0%,to{opacity:.3;transform:translate(-55%)}50%{opacity:1;transform:translate(55%)}}@keyframes sliding-bars-f38f76f8{0%,to{transform:translate(-25%)}50%{transform:translate(25%)}}@keyframes spin-f38f76f8{to{transform:rotate(360deg)}}@keyframes orbit-f38f76f8{to{transform:rotate(360deg)}}@keyframes pulse-f38f76f8{50%{opacity:.45;transform:scale(.62)}}@keyframes ripple-f38f76f8{0%{opacity:1;transform:scale(.2)}to{opacity:0;transform:scale(1)}}@keyframes progress-ring-f38f76f8{to{transform:rotate(160deg)}}@keyframes dot-f38f76f8{50%{opacity:.38;transform:translateY(-35%)}}@keyframes typing-f38f76f8{50%{opacity:.35;transform:scale(.65)}}@keyframes bounce-f38f76f8{50%{transform:translateY(-65%)}}@keyframes bars-f38f76f8{50%{opacity:.42;transform:scaleY(.28)}}@keyframes equalizer-f38f76f8{50%{transform:scaleY(.22)}}@keyframes wave-f38f76f8{50%{transform:translateY(-100%)scale(1.25)}}@keyframes stair-f38f76f8{50%{opacity:.4;transform:translateY(-38%)}}@keyframes grid-f38f76f8{50%{opacity:.35;transform:scale(.45)}}@keyframes squares-f38f76f8{50%{transform:rotate(90deg)scale(.6)}}@keyframes heatmap-f38f76f8{50%{background:color-mix(in srgb, currentColor 28%, transparent);transform:scale(.78)}}@keyframes card-flip-f38f76f8{50%{transform:rotateY(180deg)scale(.82)}}@keyframes element-f38f76f8{50%{border-radius:50%;transform:rotate(225deg)scale(.68)}}@keyframes plane-f38f76f8{50%{transform:translateY(-16%)rotate(8deg)}}@keyframes morph-f38f76f8{50%{border-radius:64% 36% 38% 62%/58% 65% 35% 42%;transform:rotate(90deg)scale(.82)}}@keyframes blob-f38f76f8{50%{border-radius:67% 33% 55% 45%/36% 61% 39% 64%;transform:rotate(24deg)scale(.87)}}@keyframes signal-f38f76f8{50%{opacity:.4;transform:scale(.72)}}@keyframes snake-f38f76f8{to{transform:rotate(360deg)}}@keyframes liquid-f38f76f8{50%{transform:translate(22%)rotate(8deg)}}@keyframes flow-f38f76f8{50%{transform:translate(60%)}}@media (prefers-reduced-motion:reduce){.v-loader[data-v-f38f76f8] *,.v-loader__visual[data-v-f38f76f8],.v-loader__visual[data-v-f38f76f8]:before,.v-loader__visual[data-v-f38f76f8]:after{transition:none!important;animation:none!important}.v-loader--ripple .v-loader__mark[data-v-f38f76f8]{display:none}}.v-pattern-skeleton[data-v-e1a021e1]{gap:.75rem;width:100%;max-width:38rem;display:grid}.v-pattern-skeleton__body[data-v-e1a021e1]{align-content:center;gap:.45rem;min-width:0;display:grid}.v-pattern-skeleton--profile[data-v-e1a021e1]{grid-template-columns:auto 1fr;align-items:start}.v-pattern-skeleton--profile .v-pattern-skeleton__stats[data-v-e1a021e1]{grid-column:1/-1}.v-pattern-skeleton--media[data-v-e1a021e1]{grid-template-columns:auto 1fr;align-items:start}.v-pattern-skeleton__feed-item[data-v-e1a021e1],.v-pattern-skeleton__inline[data-v-e1a021e1]{align-items:center;gap:.75rem;display:flex}.v-pattern-skeleton__feed-item+.v-pattern-skeleton__feed-item[data-v-e1a021e1]{border-top:1px solid color-mix(in srgb, currentColor 9%, transparent);padding-top:.75rem}.v-pattern-skeleton__feed-item .v-pattern-skeleton__body[data-v-e1a021e1]{flex:1}.v-pattern-skeleton__stats[data-v-e1a021e1]{grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:.75rem;display:grid}.v-pattern-skeleton__table-row[data-v-e1a021e1]{border-bottom:1px solid color-mix(in srgb, currentColor 9%, transparent);align-items:center;gap:.75rem;padding:.55rem 0;display:grid}.v-pattern-skeleton__field[data-v-e1a021e1]{gap:.4rem;display:grid}.v-skeleton-group[data-v-6a86d8c9]{width:100%;display:grid}
|
|
1
|
+
.v-spinner[data-v-b967b6f4]{vertical-align:middle;flex:none;justify-content:center;align-items:center;display:inline-flex}.v-spinner__indicator[data-v-b967b6f4]{box-sizing:border-box;border:var(--v-spinner-border-width,3px) solid var(--v-spinner-track-color,currentColor);border-radius:50%;flex:none;animation:.75s linear infinite veload-spin-b967b6f4;display:inline-block}@keyframes veload-spin-b967b6f4{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.v-spinner__indicator[data-v-b967b6f4]{animation:none}}.v-skeleton[data-v-9a8cf481]{box-sizing:border-box;background-color:var(--v-skeleton-base-color,#94a3b847);display:block;position:relative;overflow:hidden}.v-skeleton--text[data-v-9a8cf481]{border-radius:var(--v-skeleton-radius,.25em)}.v-skeleton--rect[data-v-9a8cf481]{border-radius:var(--v-skeleton-radius,.5rem)}.v-skeleton--circle[data-v-9a8cf481]{border-radius:50%}.v-skeleton--animated[data-v-9a8cf481]:after{content:"";background-image:linear-gradient(90deg, transparent, var(--v-skeleton-highlight-color,#ffffff8c), transparent);animation:veload-skeleton-shimmer-9a8cf481 var(--v-skeleton-duration,1.4s) ease-in-out infinite;position:absolute;inset:0;transform:translate(-100%)}@keyframes veload-skeleton-shimmer-9a8cf481{to{transform:translate(100%)}}@media (prefers-reduced-motion:reduce){.v-skeleton--animated[data-v-9a8cf481]:after{animation:none;display:none}}.v-progress[data-v-8a7154ed]{box-sizing:border-box;border-radius:var(--v-progress-radius,999px);background-color:var(--v-progress-track-color,#e2e8f0);width:100%;position:relative;overflow:hidden}.v-progress__bar[data-v-8a7154ed]{border-radius:inherit;background-color:var(--v-progress-color,#2563eb);height:100%;transition:width .2s}.v-progress--indeterminate .v-progress__bar[data-v-8a7154ed]{width:40%;animation:veload-progress-indeterminate-8a7154ed var(--v-progress-duration,1.4s) ease-in-out infinite}@keyframes veload-progress-indeterminate-8a7154ed{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media (prefers-reduced-motion:reduce){.v-progress__bar[data-v-8a7154ed]{transition:none}.v-progress--indeterminate .v-progress__bar[data-v-8a7154ed]{opacity:.55;width:100%;animation:none;transform:none}}.v-loading[data-v-ac332306]{isolation:isolate;position:relative}.v-loading__content[data-v-ac332306]{min-width:0}.v-loading__overlay[data-v-ac332306]{z-index:var(--v-loading-z-index,10);box-sizing:border-box;border-radius:var(--v-loading-radius,inherit);background-color:var(--v-loading-overlay-background,#ffffffb8);-webkit-backdrop-filter:var(--v-loading-backdrop-filter,none);backdrop-filter:var(--v-loading-backdrop-filter,none);color:var(--v-loading-color,#334155);pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;padding:1rem;display:flex;position:absolute;inset:0}.v-loading--blocking .v-loading__overlay[data-v-ac332306]{pointer-events:auto}.v-loading__label[data-v-ac332306]{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.v-loading__overlay[data-v-ac332306]{-webkit-backdrop-filter:none;backdrop-filter:none}}.v-loading-button[data-v-323480f1]{vertical-align:middle;box-sizing:border-box;cursor:pointer;justify-content:center;align-items:center;display:inline-flex;position:relative}.v-loading-button[data-v-323480f1]:disabled{cursor:not-allowed}.v-loading-button__content[data-v-323480f1]{justify-content:center;align-items:center;gap:var(--v-loading-button-gap,.5rem);display:inline-flex}.v-loading-button__content--hidden[data-v-323480f1]{opacity:0;pointer-events:none}.v-loading-button__indicator[data-v-323480f1]{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.v-loading-button[data-v-323480f1]{transition:none}}.v-loader[data-v-f38f76f8]{inline-size:var(--vl-size);block-size:var(--vl-size);color:var(--vl-color);vertical-align:middle;contain:layout paint;display:inline-flex}.v-loader__visual[data-v-f38f76f8]{block-size:100%;inline-size:100%;display:block;position:relative}.v-loader__mark[data-v-f38f76f8]{box-sizing:border-box;background:currentColor;display:block;position:absolute}.v-loader__value[data-v-f38f76f8]{font:600 calc(var(--vl-size) * .22)/1 ui-sans-serif, system-ui, sans-serif;place-items:center;display:grid;position:absolute;inset:0}.v-loader--spin .v-loader__visual[data-v-f38f76f8],.v-loader--gradient-ring .v-loader__visual[data-v-f38f76f8],.v-loader--rotate .v-loader__visual[data-v-f38f76f8]{border:max(2px, calc(var(--vl-size) * .09)) solid color-mix(in srgb, currentColor 18%, transparent);animation:spin-f38f76f8 var(--vl-duration) linear infinite;border-top-color:currentColor;border-radius:50%}.v-loader--gradient-ring .v-loader__visual[data-v-f38f76f8]{background:conic-gradient(from 40deg, transparent, currentColor, color-mix(in srgb, currentColor 35%, white), transparent 78%);-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - max(2px, calc(var(--vl-size) * .1))), #000 0);mask:radial-gradient(farthest-side, transparent calc(100% - max(2px, calc(var(--vl-size) * .1))), #000 0);border:0}.v-loader--rotate .v-loader__visual[data-v-f38f76f8]{border-radius:28% 72% 72% 28%;animation-timing-function:cubic-bezier(.6,.05,.35,.95)}.v-loader--ring .v-loader__visual[data-v-f38f76f8]{border:max(2px, calc(var(--vl-size) * .09)) solid currentColor;animation:spin-f38f76f8 calc(var(--vl-duration) * 1.25) cubic-bezier(.55,.1,.45,.9) infinite;border-inline-end-color:#0000;border-radius:50%}.v-loader--pulse .v-loader__visual[data-v-f38f76f8]{animation:pulse-f38f76f8 var(--vl-duration) ease-in-out infinite;background:currentColor;border-radius:50%}.v-loader--ripple .v-loader__visual[data-v-f38f76f8]{border:max(2px, calc(var(--vl-size) * .06)) solid currentColor;animation:ripple-f38f76f8 var(--vl-duration) ease-out infinite;border-radius:50%}.v-loader--ripple .v-loader__mark[data-v-f38f76f8]{border:inherit;border-radius:inherit;animation:ripple-f38f76f8 var(--vl-duration) ease-out calc(var(--vl-duration) / -2) infinite;background:0 0;inset:0}.v-loader--orbit .v-loader__visual[data-v-f38f76f8]{border:max(1px, calc(var(--vl-size) * .035)) solid color-mix(in srgb, currentColor 35%, transparent);animation:spin-f38f76f8 calc(var(--vl-duration) * 1.6) linear infinite;border-radius:50%}.v-loader--orbit .v-loader__mark[data-v-f38f76f8]{block-size:22%;inline-size:22%;transform-origin:50% calc(var(--vl-size) * .61);animation:orbit-f38f76f8 var(--vl-duration) linear infinite;border-radius:50%;inset:-11% auto auto 39%}.v-loader--orbit-dots .v-loader__visual[data-v-f38f76f8]{animation:spin-f38f76f8 calc(var(--vl-duration) * 1.5) linear infinite}.v-loader--orbit-dots .v-loader__mark[data-v-f38f76f8]{block-size:19%;inline-size:19%;transform:rotate(calc(var(--vl-index) * 360deg / var(--vl-total))) translateY(calc(var(--vl-size) * -.38));opacity:calc(.35 + var(--vl-index) / var(--vl-total));border-radius:50%;inset:40%}.v-loader--spin-dots .v-loader__visual[data-v-f38f76f8]{animation:spin-f38f76f8 var(--vl-duration) steps(12) infinite}.v-loader--spin-dots .v-loader__mark[data-v-f38f76f8]{block-size:13%;inline-size:13%;transform:rotate(calc(var(--vl-index) * 360deg / var(--vl-total))) translateY(calc(var(--vl-size) * -.42));transform-origin:50%;opacity:calc(.2 + var(--vl-index) / var(--vl-total));border-radius:50%;inset:43.5%}.v-loader--progress-ring .v-loader__visual[data-v-f38f76f8]{background:conic-gradient(currentColor var(--vl-value), color-mix(in srgb, currentColor 14%, transparent) 0);-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - max(3px, calc(var(--vl-size) * .1))), #000 0);mask:radial-gradient(farthest-side, transparent calc(100% - max(3px, calc(var(--vl-size) * .1))), #000 0);animation:progress-ring-f38f76f8 calc(var(--vl-duration) * 2) ease-in-out infinite alternate;border-radius:50%}.v-loader--progress-ring:has(.v-loader__value) .v-loader__visual[data-v-f38f76f8]{animation:none}.v-loader--dots[data-v-f38f76f8],.v-loader--typing[data-v-f38f76f8],.v-loader--bounce[data-v-f38f76f8]{inline-size:max(calc(var(--vl-size) * 1.5), calc(var(--vl-size) * (.31 * var(--vl-total) - .12)))}.v-loader--bars[data-v-f38f76f8],.v-loader--equalizer[data-v-f38f76f8],.v-loader--wave[data-v-f38f76f8],.v-loader--stair[data-v-f38f76f8]{inline-size:max(calc(var(--vl-size) * 1.5), calc(var(--vl-size) * (.21 * var(--vl-total) - .08)))}.v-loader--dots .v-loader__visual[data-v-f38f76f8],.v-loader--typing .v-loader__visual[data-v-f38f76f8],.v-loader--bounce .v-loader__visual[data-v-f38f76f8]{justify-content:center;align-items:center;gap:calc(var(--vl-size) * .12);display:flex}.v-loader--dots .v-loader__mark[data-v-f38f76f8],.v-loader--typing .v-loader__mark[data-v-f38f76f8],.v-loader--bounce .v-loader__mark[data-v-f38f76f8]{inline-size:calc(var(--vl-size) * .19);block-size:calc(var(--vl-size) * .19);animation:dot-f38f76f8 var(--vl-duration) ease-in-out calc(var(--vl-index) * var(--vl-duration) / -8) infinite;border-radius:50%;position:relative}.v-loader--typing .v-loader__mark[data-v-f38f76f8]{animation-name:typing-f38f76f8}.v-loader--bounce .v-loader__mark[data-v-f38f76f8]{box-shadow:0 calc(var(--vl-size) * .18) 0 color-mix(in srgb, currentColor 14%, transparent);animation-name:bounce-f38f76f8}.v-loader--bars .v-loader__visual[data-v-f38f76f8],.v-loader--equalizer .v-loader__visual[data-v-f38f76f8],.v-loader--wave .v-loader__visual[data-v-f38f76f8],.v-loader--stair .v-loader__visual[data-v-f38f76f8]{justify-content:center;align-items:center;gap:calc(var(--vl-size) * .08);display:flex}.v-loader--bars .v-loader__mark[data-v-f38f76f8],.v-loader--equalizer .v-loader__mark[data-v-f38f76f8],.v-loader--wave .v-loader__mark[data-v-f38f76f8],.v-loader--stair .v-loader__mark[data-v-f38f76f8]{inline-size:calc(var(--vl-size) * .13);transform-origin:50%;block-size:65%;animation:bars-f38f76f8 var(--vl-duration) ease-in-out calc(var(--vl-index) * var(--vl-duration) / -7) infinite;border-radius:999px;position:relative}.v-loader--equalizer .v-loader__mark[data-v-f38f76f8]{border-radius:calc(var(--vl-size) * .04);animation-name:equalizer-f38f76f8}.v-loader--wave .v-loader__mark[data-v-f38f76f8]{border-radius:50%;block-size:18%;animation-name:wave-f38f76f8}.v-loader--stair .v-loader__mark[data-v-f38f76f8]{block-size:calc(18% + var(--vl-index) * 15%);align-self:flex-end;animation-name:stair-f38f76f8}.v-loader--grid .v-loader__visual[data-v-f38f76f8],.v-loader--squares .v-loader__visual[data-v-f38f76f8],.v-loader--heatmap .v-loader__visual[data-v-f38f76f8]{grid-template-columns:repeat(2,1fr);gap:12%;padding:8%;display:grid}.v-loader--grid .v-loader__mark[data-v-f38f76f8],.v-loader--squares .v-loader__mark[data-v-f38f76f8],.v-loader--heatmap .v-loader__mark[data-v-f38f76f8]{animation:grid-f38f76f8 var(--vl-duration) ease-in-out calc(var(--vl-index) * var(--vl-duration) / -6) infinite;border-radius:20%;position:relative}.v-loader--squares .v-loader__visual[data-v-f38f76f8]{grid-template-columns:repeat(3,1fr)}.v-loader--squares .v-loader__mark[data-v-f38f76f8]{border-radius:8%;animation-name:squares-f38f76f8}.v-loader--heatmap .v-loader__visual[data-v-f38f76f8]{grid-template-columns:repeat(3,1fr);gap:7%;padding:2%}.v-loader--heatmap .v-loader__mark[data-v-f38f76f8]{border-radius:20%;animation-name:heatmap-f38f76f8}.v-loader--card-flip .v-loader__visual[data-v-f38f76f8],.v-loader--element .v-loader__visual[data-v-f38f76f8],.v-loader--plane .v-loader__visual[data-v-f38f76f8],.v-loader--logo-spin .v-loader__visual[data-v-f38f76f8],.v-loader--morph .v-loader__visual[data-v-f38f76f8],.v-loader--blob .v-loader__visual[data-v-f38f76f8]{background:currentColor}.v-loader--card-flip .v-loader__visual[data-v-f38f76f8]{block-size:72%;inline-size:72%;animation:card-flip-f38f76f8 var(--vl-duration) cubic-bezier(.6,.05,.3,.95) infinite;border-radius:12%;margin:14%}.v-loader--element .v-loader__visual[data-v-f38f76f8]{block-size:62%;inline-size:62%;animation:element-f38f76f8 var(--vl-duration) ease-in-out infinite;border-radius:10%;margin:19%;transform:rotate(45deg)}.v-loader--plane .v-loader__visual[data-v-f38f76f8]{clip-path:polygon(50% 0,100% 100%,50% 78%,0 100%);animation:plane-f38f76f8 var(--vl-duration) ease-in-out infinite}.v-loader--logo-spin .v-loader__visual[data-v-f38f76f8]{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation:spin-f38f76f8 calc(var(--vl-duration) * 1.2) cubic-bezier(.5,0,.5,1) infinite;border-radius:30% 70%}.v-loader--morph .v-loader__visual[data-v-f38f76f8]{animation:morph-f38f76f8 var(--vl-duration) ease-in-out infinite;border-radius:32% 68% 62% 38%/35% 36% 64% 65%}.v-loader--blob .v-loader__visual[data-v-f38f76f8]{animation:blob-f38f76f8 calc(var(--vl-duration) * 1.8) ease-in-out infinite;border-radius:48% 52% 36% 64%/57% 40% 60% 43%}.v-loader--hashtag .v-loader__visual[data-v-f38f76f8]:before,.v-loader--hashtag .v-loader__visual[data-v-f38f76f8]:after{content:"";background:currentColor;border-radius:999px;position:absolute;inset:8% 39%;transform:rotate(15deg)}.v-loader--hashtag .v-loader__visual[data-v-f38f76f8]:after{transform:rotate(105deg)}.v-loader--fallback .v-loader__visual[data-v-f38f76f8]{border:max(2px, calc(var(--vl-size) * .08)) dashed currentColor;animation:spin-f38f76f8 calc(var(--vl-duration) * 1.4) linear infinite;border-radius:50%}.v-loader--signal .v-loader__visual[data-v-f38f76f8]{border:max(2px, calc(var(--vl-size) * .06)) solid currentColor;animation:signal-f38f76f8 var(--vl-duration) ease-in-out infinite;border-bottom-color:#0000;border-left-color:#0000;border-radius:100% 0 0}.v-loader--snake .v-loader__visual[data-v-f38f76f8]{border:max(3px, calc(var(--vl-size) * .1)) solid transparent;animation:snake-f38f76f8 var(--vl-duration) linear infinite;border-top-color:currentColor;border-right-color:currentColor;border-radius:50%}.v-loader--liquid .v-loader__visual[data-v-f38f76f8]{border:max(2px, calc(var(--vl-size) * .06)) solid currentColor;border-radius:50%;overflow:hidden}.v-loader--liquid .v-loader__visual[data-v-f38f76f8]:after{content:"";block-size:90%;inline-size:180%;animation:liquid-f38f76f8 var(--vl-duration) ease-in-out infinite;background:currentColor;border-radius:42%;position:absolute;inset:42% auto auto -40%}.v-loader--flow .v-loader__visual[data-v-f38f76f8]{background:color-mix(in srgb, currentColor 15%, transparent);border-radius:999px;overflow:hidden}.v-loader--flow .v-loader__visual[data-v-f38f76f8]:after{content:"";border-radius:inherit;animation:flow-f38f76f8 var(--vl-duration) ease-in-out infinite;background:currentColor;position:absolute;inset:36% 0}.v-loader--breathing .v-loader__mark[data-v-f38f76f8]{border-radius:50%}.v-loader--breathing .v-loader__mark[data-v-f38f76f8]:first-child{border:max(1px, calc(var(--vl-size) * .045)) solid currentColor;opacity:.4;animation:breathing-halo-f38f76f8 var(--vl-duration) cubic-bezier(.45, 0, .55, 1) infinite;background:0 0;inset:12%;transform:scale(.86)}.v-loader--breathing .v-loader__mark[data-v-f38f76f8]:last-child{inset:40%}.v-loader--dual-arc .v-loader__mark[data-v-f38f76f8]{border:max(1px, calc(var(--vl-size) * .055)) solid transparent;animation:spin-f38f76f8 var(--vl-duration) linear infinite;background:0 0;border-top-color:currentColor;border-right-color:currentColor;border-radius:50%;inset:5%}.v-loader--dual-arc .v-loader__mark[data-v-f38f76f8]:last-child{opacity:.65;animation-direction:reverse;animation-duration:calc(var(--vl-duration) * 1.25);border-color:#0000 #0000 currentColor currentColor;inset:25%}.v-loader--dot-sweep[data-v-f38f76f8]{inline-size:max(calc(var(--vl-size) * 1.5), calc(var(--vl-size) * (.34 * var(--vl-total) + .2)))}.v-loader--dot-sweep .v-loader__visual[data-v-f38f76f8]{justify-content:center;align-items:center;gap:calc(var(--vl-size) * .18);display:flex}.v-loader--dot-sweep .v-loader__mark[data-v-f38f76f8]{inline-size:calc(var(--vl-size) * .16);block-size:calc(var(--vl-size) * .16);opacity:.65;animation:dot-sweep-f38f76f8 var(--vl-duration) ease-in-out calc(var(--vl-index) * var(--vl-duration) / var(--vl-total) * -1) infinite;border-radius:50%;flex-shrink:0;position:relative}.v-loader--sliding-bars[data-v-f38f76f8]{inline-size:calc(var(--vl-size) * 1.5);block-size:max(var(--vl-size), calc(var(--vl-size) * (.2 * var(--vl-total) + .1)))}.v-loader--sliding-bars .v-loader__visual[data-v-f38f76f8]{justify-content:center;align-items:center;gap:calc(var(--vl-size) * .1);flex-direction:column;display:flex}.v-loader--sliding-bars .v-loader__mark[data-v-f38f76f8]{inline-size:calc(var(--vl-size) * .8);block-size:calc(var(--vl-size) * .1);opacity:.85;animation:sliding-bars-f38f76f8 var(--vl-duration) cubic-bezier(.65, 0, .35, 1) infinite;border-radius:999px;flex-shrink:0;position:relative}.v-loader--sliding-bars .v-loader__mark[data-v-f38f76f8]:nth-child(2n){opacity:.5;animation-delay:calc(var(--vl-duration) / -2)}@keyframes breathing-halo-f38f76f8{0%,to{opacity:.35;transform:scale(.86)}50%{opacity:.7;transform:scale(1.12)}}@keyframes dot-sweep-f38f76f8{0%,to{opacity:.3;transform:translate(-55%)}50%{opacity:1;transform:translate(55%)}}@keyframes sliding-bars-f38f76f8{0%,to{transform:translate(-25%)}50%{transform:translate(25%)}}@keyframes spin-f38f76f8{to{transform:rotate(360deg)}}@keyframes orbit-f38f76f8{to{transform:rotate(360deg)}}@keyframes pulse-f38f76f8{50%{opacity:.45;transform:scale(.62)}}@keyframes ripple-f38f76f8{0%{opacity:1;transform:scale(.2)}to{opacity:0;transform:scale(1)}}@keyframes progress-ring-f38f76f8{to{transform:rotate(160deg)}}@keyframes dot-f38f76f8{50%{opacity:.38;transform:translateY(-35%)}}@keyframes typing-f38f76f8{50%{opacity:.35;transform:scale(.65)}}@keyframes bounce-f38f76f8{50%{transform:translateY(-65%)}}@keyframes bars-f38f76f8{50%{opacity:.42;transform:scaleY(.28)}}@keyframes equalizer-f38f76f8{50%{transform:scaleY(.22)}}@keyframes wave-f38f76f8{50%{transform:translateY(-100%)scale(1.25)}}@keyframes stair-f38f76f8{50%{opacity:.4;transform:translateY(-38%)}}@keyframes grid-f38f76f8{50%{opacity:.35;transform:scale(.45)}}@keyframes squares-f38f76f8{50%{transform:rotate(90deg)scale(.6)}}@keyframes heatmap-f38f76f8{50%{background:color-mix(in srgb, currentColor 28%, transparent);transform:scale(.78)}}@keyframes card-flip-f38f76f8{50%{transform:rotateY(180deg)scale(.82)}}@keyframes element-f38f76f8{50%{border-radius:50%;transform:rotate(225deg)scale(.68)}}@keyframes plane-f38f76f8{50%{transform:translateY(-16%)rotate(8deg)}}@keyframes morph-f38f76f8{50%{border-radius:64% 36% 38% 62%/58% 65% 35% 42%;transform:rotate(90deg)scale(.82)}}@keyframes blob-f38f76f8{50%{border-radius:67% 33% 55% 45%/36% 61% 39% 64%;transform:rotate(24deg)scale(.87)}}@keyframes signal-f38f76f8{50%{opacity:.4;transform:scale(.72)}}@keyframes snake-f38f76f8{to{transform:rotate(360deg)}}@keyframes liquid-f38f76f8{50%{transform:translate(22%)rotate(8deg)}}@keyframes flow-f38f76f8{50%{transform:translate(60%)}}@media (prefers-reduced-motion:reduce){.v-loader[data-v-f38f76f8] *,.v-loader__visual[data-v-f38f76f8],.v-loader__visual[data-v-f38f76f8]:before,.v-loader__visual[data-v-f38f76f8]:after{transition:none!important;animation:none!important}.v-loader--ripple .v-loader__mark[data-v-f38f76f8]{display:none}}.v-pattern-skeleton[data-v-e1a021e1]{gap:.75rem;width:100%;max-width:38rem;display:grid}.v-pattern-skeleton__body[data-v-e1a021e1]{align-content:center;gap:.45rem;min-width:0;display:grid}.v-pattern-skeleton--profile[data-v-e1a021e1]{grid-template-columns:auto 1fr;align-items:start}.v-pattern-skeleton--profile .v-pattern-skeleton__stats[data-v-e1a021e1]{grid-column:1/-1}.v-pattern-skeleton--media[data-v-e1a021e1]{grid-template-columns:auto 1fr;align-items:start}.v-pattern-skeleton__feed-item[data-v-e1a021e1],.v-pattern-skeleton__inline[data-v-e1a021e1]{align-items:center;gap:.75rem;display:flex}.v-pattern-skeleton__feed-item+.v-pattern-skeleton__feed-item[data-v-e1a021e1]{border-top:1px solid color-mix(in srgb, currentColor 9%, transparent);padding-top:.75rem}.v-pattern-skeleton__feed-item .v-pattern-skeleton__body[data-v-e1a021e1]{flex:1}.v-pattern-skeleton__stats[data-v-e1a021e1]{grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:.75rem;display:grid}.v-pattern-skeleton__table-row[data-v-e1a021e1]{border-bottom:1px solid color-mix(in srgb, currentColor 9%, transparent);align-items:center;gap:.75rem;padding:.55rem 0;display:grid}.v-pattern-skeleton__field[data-v-e1a021e1]{gap:.4rem;display:grid}.v-skeleton-group[data-v-6a86d8c9]{width:100%;display:grid}
|
|
2
2
|
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "veload",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"description": "Accessible Vue 3 loaders, skeletons, progress indicators, and loading-state composables.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
7
7
|
"module": "./dist/index.js",
|
|
@@ -21,7 +21,14 @@
|
|
|
21
21
|
"**/*.css"
|
|
22
22
|
],
|
|
23
23
|
"license": "MIT",
|
|
24
|
-
"homepage": "https://
|
|
24
|
+
"homepage": "https://veload-playground.vercel.app",
|
|
25
|
+
"repository": {
|
|
26
|
+
"type": "git",
|
|
27
|
+
"url": "git+https://github.com/Shehab-Mo/veload.git"
|
|
28
|
+
},
|
|
29
|
+
"bugs": {
|
|
30
|
+
"url": "https://github.com/Shehab-Mo/veload/issues"
|
|
31
|
+
},
|
|
25
32
|
"publishConfig": {
|
|
26
33
|
"access": "public"
|
|
27
34
|
},
|
|
@@ -30,9 +37,16 @@
|
|
|
30
37
|
"vue3",
|
|
31
38
|
"loading",
|
|
32
39
|
"spinner",
|
|
33
|
-
"loader"
|
|
40
|
+
"loader",
|
|
41
|
+
"skeleton",
|
|
42
|
+
"progress",
|
|
43
|
+
"accessibility",
|
|
44
|
+
"typescript",
|
|
45
|
+
"nuxt"
|
|
34
46
|
],
|
|
35
47
|
"scripts": {
|
|
48
|
+
"prepack": "node scripts/package-readme.mjs prepare",
|
|
49
|
+
"postpack": "node scripts/package-readme.mjs cleanup",
|
|
36
50
|
"build": "vite build && npm run build:types",
|
|
37
51
|
"typecheck": "vue-tsc --noEmit",
|
|
38
52
|
"build:types": "vue-tsc -p tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist",
|