nicklabs-ui 1.0.33 → 1.0.34
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 +18 -9
- package/dist/index.mjs +215 -193
- package/dist/nicklabs-ui.css +1 -1
- package/dist/src/components/NLoading.vue.d.ts +4 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
A Vue 3 component library with glassmorphism design, built for modern web applications.
|
|
4
4
|
|
|
5
|
-
**Version**: 1.0.
|
|
5
|
+
**Version**: 1.0.34 | **Framework**: Vue 3.5+
|
|
6
6
|
|
|
7
7
|
---
|
|
8
8
|
|
|
@@ -1048,26 +1048,34 @@ import { NTooltip, NButton } from 'nicklabs-ui'
|
|
|
1048
1048
|
|
|
1049
1049
|
#### NLoading
|
|
1050
1050
|
|
|
1051
|
-
Loading indicator
|
|
1051
|
+
Loading indicator supporting inline, overlay, and fullscreen modes.
|
|
1052
1052
|
|
|
1053
1053
|
**Props**
|
|
1054
1054
|
|
|
1055
1055
|
| Prop | Type | Default | Description |
|
|
1056
1056
|
|------|------|---------|-------------|
|
|
1057
|
-
| `loading` | `boolean` | `
|
|
1057
|
+
| `loading` | `boolean` | `true` | Show loading state |
|
|
1058
1058
|
| `title` | `string` | — | Loading message |
|
|
1059
1059
|
| `variant` | `"spinner" \| "dots"` | `"spinner"` | Animation style |
|
|
1060
|
-
| `overlay` | `boolean` | `false` |
|
|
1060
|
+
| `overlay` | `boolean` | `false` | Overlay mode — covers slot content with a backdrop |
|
|
1061
|
+
| `fullscreen` | `boolean` | `false` | Fullscreen mode — covers the entire viewport and blocks interaction |
|
|
1061
1062
|
|
|
1062
1063
|
**Usage**
|
|
1063
1064
|
|
|
1064
1065
|
```vue
|
|
1065
1066
|
<template>
|
|
1066
|
-
<!-- Inline -->
|
|
1067
|
-
<NLoading :loading="isFetching" title="Loading data..."
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1067
|
+
<!-- Inline: shows spinner while loading, slot content when done -->
|
|
1068
|
+
<NLoading :loading="isFetching" title="Loading data...">
|
|
1069
|
+
<p>Content loaded!</p>
|
|
1070
|
+
</NLoading>
|
|
1071
|
+
|
|
1072
|
+
<!-- Overlay: spinner overlaid on top of slot content -->
|
|
1073
|
+
<NLoading :loading="isSubmitting" overlay title="Saving..." variant="dots">
|
|
1074
|
+
<div>Form content here</div>
|
|
1075
|
+
</NLoading>
|
|
1076
|
+
|
|
1077
|
+
<!-- Fullscreen: blocks entire viewport, no slot needed -->
|
|
1078
|
+
<NLoading :loading="isProcessing" fullscreen title="處理中..." />
|
|
1071
1079
|
</template>
|
|
1072
1080
|
|
|
1073
1081
|
<script setup>
|
|
@@ -1076,6 +1084,7 @@ import { NLoading } from 'nicklabs-ui'
|
|
|
1076
1084
|
|
|
1077
1085
|
const isFetching = ref(true)
|
|
1078
1086
|
const isSubmitting = ref(false)
|
|
1087
|
+
const isProcessing = ref(false)
|
|
1079
1088
|
</script>
|
|
1080
1089
|
```
|
|
1081
1090
|
|