nicklabs-ui 1.0.45 → 1.0.47
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 +25 -3
- package/dist/index.mjs +551 -529
- package/dist/nicklabs-ui.css +1 -1
- package/dist/src/components/NButton.vue.d.ts +1 -0
- package/dist/src/components/NList.vue.d.ts +1 -1
- package/dist/src/components/NTable.vue.d.ts +1 -1
- package/dist/src/types/components/button.d.ts +2 -2
- package/dist/variables.css +10 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -128,11 +128,12 @@ A versatile button supporting multiple visual variants and semantic intents.
|
|
|
128
128
|
|
|
129
129
|
| Prop | Type | Default | Description |
|
|
130
130
|
|------|------|---------|-------------|
|
|
131
|
-
| `variant` | `"none" \| "solid" \| "outline" \| "ghost" \| "mute"` | `"
|
|
132
|
-
| `intent` | `"none" \| "primary" \| "error" \| "success" \| "warning" \| "info"` | `"none"` | Semantic color intent |
|
|
131
|
+
| `variant` | `"none" \| "solid" \| "outline" \| "ghost" \| "mute" \| "link"` | `"none"` | Visual style |
|
|
132
|
+
| `intent` | `"none" \| "primary" \| "secondary" \| "error" \| "success" \| "warning" \| "info" \| "default" \| "purple"` | `"none"` | Semantic color intent |
|
|
133
|
+
| `loading` | `boolean` | `false` | Show spinner and disable interaction |
|
|
134
|
+
| `disabled` | `boolean` | `false` | Disable interaction |
|
|
133
135
|
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Button size |
|
|
134
136
|
| `radiusSize` | `"sm" \| "md" \| "lg" \| "xl" \| "full"` | `"md"` | Border radius |
|
|
135
|
-
| `disabled` | `boolean` | `false` | Disable interaction |
|
|
136
137
|
| `type` | `"button" \| "submit" \| "reset"` | `"button"` | HTML button type |
|
|
137
138
|
| `square` | `boolean` | `false` | Equal width/height (icon button) |
|
|
138
139
|
| `padding` | `string` | — | Custom padding override |
|
|
@@ -151,6 +152,18 @@ A versatile button supporting multiple visual variants and semantic intents.
|
|
|
151
152
|
<NButton variant="outline" intent="success">Success</NButton>
|
|
152
153
|
<NButton variant="ghost" intent="warning">Warning</NButton>
|
|
153
154
|
<NButton variant="mute" intent="error">Danger</NButton>
|
|
155
|
+
<NButton variant="link" intent="primary">Link style</NButton>
|
|
156
|
+
|
|
157
|
+
<!-- Intents -->
|
|
158
|
+
<NButton variant="solid" intent="secondary">Secondary</NButton>
|
|
159
|
+
<NButton variant="solid" intent="default">Default (grey)</NButton>
|
|
160
|
+
<NButton variant="solid" intent="purple">Purple</NButton>
|
|
161
|
+
|
|
162
|
+
<!-- Loading state -->
|
|
163
|
+
<NButton variant="solid" intent="primary" loading>Saving...</NButton>
|
|
164
|
+
<NButton variant="solid" intent="primary" :loading="isSubmitting" @click="submit">
|
|
165
|
+
Submit
|
|
166
|
+
</NButton>
|
|
154
167
|
|
|
155
168
|
<!-- Sizes -->
|
|
156
169
|
<NButton size="sm">Small</NButton>
|
|
@@ -170,7 +183,16 @@ A versatile button supporting multiple visual variants and semantic intents.
|
|
|
170
183
|
</template>
|
|
171
184
|
|
|
172
185
|
<script setup>
|
|
186
|
+
import { ref } from 'vue'
|
|
173
187
|
import { NButton } from 'nicklabs-ui'
|
|
188
|
+
|
|
189
|
+
const isSubmitting = ref(false)
|
|
190
|
+
|
|
191
|
+
async function submit() {
|
|
192
|
+
isSubmitting.value = true
|
|
193
|
+
await doSomething()
|
|
194
|
+
isSubmitting.value = false
|
|
195
|
+
}
|
|
174
196
|
</script>
|
|
175
197
|
```
|
|
176
198
|
|