refactor(ui): card component has topright action slot

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);

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()

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.