MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(ui): destructive modals

This commit is contained in:
ArneBo 2025-01-20 13:55:00 +01:00
parent 9f69cfd9b5
commit d4dfac84a2
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
front/ui-docs/components/ui/modal.md
View File

@ -26,7 +26,7 @@ const isOpen8 = ref(false)
</script> </script>
```ts ```ts
import Modal from "~/components/ui/Modal.vue" import Modal from "~/components/ui/Modal.vue";
``` ```
# Modal # Modal
@ -167,7 +167,7 @@ You can nest [Funkwhale alerts](./alert) to visually highlight content within th
The `destructive` prop is used to visually indicate a potentially dangerous or irreversible action. When set to `true`, the modal will have a distinctive red styling to draw the user's attention and highlight the critical nature of the action. The `destructive` prop is used to visually indicate a potentially dangerous or irreversible action. When set to `true`, the modal will have a distinctive red styling to draw the user's attention and highlight the critical nature of the action.
| Prop | Data type | Required? | Default | Description | | Prop | Data type | Required? | Default | Description |
|---------------|-----------|-----------|---------|--------------------------------------------------| | ------------- | --------- | --------- | ------- | ---------------------------------------------------- |
| `destructive` | `true` | No | `false` | Applies a red styling to emphasize dangerous actions | | `destructive` | `true` | No | `false` | Applies a red styling to emphasize dangerous actions |
<Layout flex> <Layout flex>
@ -203,6 +203,7 @@ The `destructive` prop is used to visually indicate a potentially dangerous or i
### Styling Effects ### Styling Effects
When the `destructive` prop is set to `true`, the modal will: When the `destructive` prop is set to `true`, the modal will:
- Add a red border - Add a red border
- Style the title in red - Style the title in red