From d4e19914275a07510495d9e027c52be38397f211 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Thu, 16 Jan 2025 11:10:17 +0200
Subject: [PATCH] refactor(ui): card component has topright action slot

---
 front/src/components/ui/Card.vue    | 13 +++++++++++++
 front/src/components/ui/Input.vue   |  6 +++---
 front/ui-docs/components/ui/card.md | 16 ++++++++++++++++
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/front/src/components/ui/Card.vue b/front/src/components/ui/Card.vue
index 3e86a79b2..acb488210 100644
--- a/front/src/components/ui/Card.vue
+++ b/front/src/components/ui/Card.vue
@@ -68,6 +68,12 @@ const attributes = computed(() =>
       {{ title }}
     </component>
 
+    <!-- Topright action -->
+
+    <div v-if="$slots.topright" :class="$style.topright">
+      <slot name="topright" />
+    </div>
+
     <!-- Content -->
 
     <Alert blue v-if="$slots.alert" :class="$style.alert">
@@ -184,6 +190,13 @@ const attributes = computed(() =>
     margin-top:16px;
   }
 
+  >.topright {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 14px;
+  }
+
   >.alert {
     padding-left: var(--fw-card-padding);
     padding-right: var(--fw-card-padding);
diff --git a/front/src/components/ui/Input.vue b/front/src/components/ui/Input.vue
index e339bbc9f..ed443c01c 100644
--- a/front/src/components/ui/Input.vue
+++ b/front/src/components/ui/Input.vue
@@ -30,9 +30,9 @@ onKeyboardShortcut('escape', () => showPassword.value = false)
 // TODO: Implement `copy password` button?
 
 const attributes = computed(() => ({
-  ...(restProps.password && !showPassword.value? {type:'password'} : {}),
-  ...(restProps.search? {type:'search'} : {}),
-  ...(restProps.numeric? {type:'numeric'} : {}),
+  ...(restProps.password && !showPassword.value? {type: 'password'} : {}),
+  ...(restProps.search? {type: 'search'} : {}),
+  ...(restProps.numeric? {type: 'numeric'} : {}),
 }))
 
 const { t } = useI18n()
diff --git a/front/ui-docs/components/ui/card.md b/front/ui-docs/components/ui/card.md
index 3db24a8ed..7d993a887 100644
--- a/front/ui-docs/components/ui/card.md
+++ b/front/ui-docs/components/ui/card.md
@@ -198,6 +198,22 @@ You can combine this prop with any other prop configuration. If you combine it w
 </Card>
 </div>
 
+## Add a topright action
+
+```vue-html
+<Card title="Topright action">
+  <template #topright>
+    <OptionsButton square-small />
+  </template>
+</Card>
+```
+
+<Card title="Topright action">
+  <template #topright>
+    <OptionsButton square-small />
+  </template>
+</Card>
+
 ## Add a Footer
 
 Items in this region are secondary and will be displayed smaller than the main content.