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 }}
+
+
+
+
+
+
@@ -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
+## Add a topright action
+
+```vue-html
+
+
+
+
+
+```
+
+
+
+
+
+
+
## Add a Footer
Items in this region are secondary and will be displayed smaller than the main content.