feat(ui): add `icon` prop to modal and enable custom title bar

front/src/components/ui/Modal.vue

@@ -12,7 +12,8 @@ const props = defineProps<{
   title: string,
   overPopover?: true,
   destructive?: true,
-  cancel?: string
+  cancel?: string,
+  icon? : string
 } & (ColorProps | DefaultProps)>()
 
 const isOpen = defineModel<boolean>({ default: false })
@@ -52,15 +53,18 @@ onKeyboardShortcut('escape', () => isOpen.value = false)
           v-bind="{...$attrs, ...color(props)}"
         >
           <Layout flex gap-12 style="padding: 12px;">
-            <div style="width: 48px;">
+            <div style="width: 48px;" v-if="!$slots.topleft && !icon" />
-              <slot name="topleft" />
+            <div v-if="icon" style="display: flex; justify-content: center; align-items: center; width: 48px;">
+              <i :class="['bi', icon]" style="font-size: 18px;"/>
             </div>
-            <Spacer h grow />
+            <slot name="topleft" />
+            <Spacer grow v-if="!$slots.topleft" />
             <Heading :h2="title"
+              v-if="title !== ''"
               section-heading
               :class="{'destructive-header': destructive}"
             />
-            <Spacer h grow />
+            <Spacer grow v-if="!$slots.topleft" />
             <Button icon="bi-x-lg" ghost @click="isOpen = false" align-self="baseline" />
           </Layout>
 
@@ -76,6 +80,8 @@ onKeyboardShortcut('escape', () => isOpen.value = false)
             </Transition>
 
             <slot />
+
+            <Spacer size-46 v-if="!$slots.actions" />
           </div>
 
           <!-- Actions slot -->
@@ -86,7 +92,6 @@ onKeyboardShortcut('escape', () => isOpen.value = false)
               {{ cancel }}
             </Button>
           </Layout>
-          <Spacer size-46 v-else />
         </div>
       </div>
     </Transition>

front/ui-docs/components/ui/modal.md

@@ -3,6 +3,7 @@ import { ref, watchEffect } from 'vue'
 
 import Alert from '~/components/ui/Alert.vue'
 import Button from '~/components/ui/Button.vue'
+import Input from '~/components/ui/Input.vue'
 import Modal from '~/components/ui/Modal.vue'
 import Layout from '~/components/ui/Layout.vue'
 
@@ -25,6 +26,8 @@ const isOpen8 = ref(false)
 const isOpen9 = ref(false)
 const isOpen10 = ref(false)
 
+const input = ref('Episcosaurus')
+
 </script>
 
 ```ts
@@ -111,27 +114,22 @@ The `cancel` prop accepts a string and will add a cancel button.
 
 Note that the Cancel button has `autofocus`. If you want another button to auto-focus, implement the Cancel button manually inside the `#action` slot.
 
-## Add elements to the top left corner
+## Customize the title bar
 
-Use this slot for indicators such as the user's photo.
+Use the `icon` prop and/or the `#topleft` slot for indicators such as the user's photo or a search input. You can hide the title by setting it to `""`.
 
 <Button primary @click="isOpen10 = true">
     Open modal
 </Button>
-<Modal v-model="isOpen10" title="My modal">
+<Modal v-model="isOpen10" title="" icon="bi-info-circle">
-  Modal content
   <template #topleft>
-    <Button disabled icon="bi-star" align-self="baseline" />
+    <Input ghost v-model="input" autofocus />
-  </template>
-  <template #actions>
-    <Spacer grow />
-    <Button autofocus @click="isOpen10 = false">
-      Ok
-    </Button>
   </template>
+  No information pages found for <code>{{ input }}</code>
 </Modal>
 
-## Alert inside modal
+
+## Add a main alert
 
 You can nest [Funkwhale alerts](./alert) to visually highlight content within the modal.