feat(card): default title

CyanSalt · Jul 20, 2023 · d44b9b8 · d44b9b8
1 parent c317ec0
commit d44b9b8
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 34 deletions.
diff --git a/docs/components/card.md b/docs/components/card.md
@@ -51,45 +51,21 @@ import { RCard, RSpace } from 'roughness'
 
 <template>
   <RSpace vertical>
-    <RCard type="info">
-      <template #title>INFO</template>
-      For every minute in Africa, 60 seconds pass.
-    </RCard>
-    <RCard type="success">
-      <template #title>SUCCESS</template>
-      You successfully failed.
-    </RCard>
-    <RCard type="warning">
-      <template #title>WARNING</template>
-      No programmer can see warnings.
-    </RCard>
-    <RCard type="error">
-      <template #title>ERROR</template>
-      You threw tantrums on me!
-    </RCard>
+    <RCard type="info">For every minute in Africa, 60 seconds pass.</RCard>
+    <RCard type="success">You successfully failed.</RCard>
+    <RCard type="warning">No programmer can see warnings.</RCard>
+    <RCard type="error">You threw tantrums on me!</RCard>
   </RSpace>
 </template>
 ```
 
 </RDetails>
 
 <RSpace vertical>
-  <RCard type="info">
-    <template #title>INFO</template>
-    For every minute in Africa, 60 seconds pass.
-  </RCard>
-  <RCard type="success">
-    <template #title>SUCCESS</template>
-    You successfully failed.
-  </RCard>
-  <RCard type="warning">
-    <template #title>WARNING</template>
-    No programmer can see warnings.
-  </RCard>
-  <RCard type="error">
-    <template #title>ERROR</template>
-    You threw tantrums on me!
-  </RCard>
+  <RCard type="info">For every minute in Africa, 60 seconds pass.</RCard>
+  <RCard type="success">You successfully failed.</RCard>
+  <RCard type="warning">No programmer can see warnings.</RCard>
+  <RCard type="error">You threw tantrums on me!</RCard>
 </RSpace>
 
 ## Usage
@@ -196,7 +172,7 @@ import { RCard, RSpace } from 'roughness'
 
   <template #body:title:description>
 
-  The content of the card title.
+  The content of the card title. When a reasonable `type` is specified, the uppercase form of `type` is displayed by default.
 
   Only available if the `header` is `true`.
 

diff --git a/src/card/index.vue b/src/card/index.vue
@@ -34,6 +34,8 @@ defineSlots<{
   default?: (props: {}) => any,
 }>()
 
+const COLORED_TYPES = ['primary', 'info', 'success', 'warning', 'error', 'comment']
+
 const getReactionState = useReactionState(toRef(() => reactions))
 
 function draw(rc: RoughSVG, svg: SVGSVGElement) {
@@ -69,7 +71,9 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
       class="r-card__header"
     >
       <RText tag="strong" :type="type" size="large" class="r-card__title">
-        <slot name="title"></slot>
+        <slot name="title">
+          <template v-if="COLORED_TYPES.includes(type!)">{{ type!.toUpperCase() }}</template>
+        </slot>
       </RText>
       <slot name="header-end"></slot>
     </RSpace>