feat(text): support italic

devlive-community · Nov 7, 2024 · 3f2549d · 3f2549d
1 parent 6be18a1
commit 3f2549d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 5 deletions.
diff --git a/docs/components/text.md b/docs/components/text.md
@@ -92,6 +92,30 @@ This document is mainly used to describe some features and usage of the ShadcnTe
 
 :::
 
+## Italic
+
+::: raw
+
+<CodeRunner title="Italic">
+      <ShadcnText italic color="#18A058">#18A058</ShadcnText>
+      <ShadcnText italic color="#F59E0B">#F59E0B</ShadcnText>
+      <ShadcnText italic color="#EF4444">#EF4444</ShadcnText>
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+      <ShadcnText italic color="#18A058">#18A058</ShadcnText>
+      <ShadcnText italic color="#F59E0B">#F59E0B</ShadcnText>
+      <ShadcnText italic color="#EF4444">#EF4444</ShadcnText>
+</template>
+```
+
+:::
+
 ## Text Props
 
 <ApiTable title="Text Props"
@@ -100,6 +124,7 @@ This document is mainly used to describe some features and usage of the ShadcnTe
         ['colorType', 'The color type of the text', 'enum', 'default', 'default | primary | success | warning | error'],
         ['color', 'The color of the text, if set colorType will be ignored', 'string', 'default', '-'],
         ['strong', 'Whether the text is strong', 'boolean', 'false', '-'],
+        ['italic', 'Whether the text is italic', 'boolean', 'false', '-'],
     ]">
 </ApiTable>
 

diff --git a/src/App.vue b/src/App.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="p-32">
     <ShadcnSpace wrap>
-      <ShadcnText strong color="#18A058">#18A058</ShadcnText>
-      <ShadcnText strong color="#F59E0B">#F59E0B</ShadcnText>
-      <ShadcnText strong color="#EF4444">#EF4444</ShadcnText>
+      <ShadcnText italic color="#18A058">#18A058</ShadcnText>
+      <ShadcnText italic color="#F59E0B">#F59E0B</ShadcnText>
+      <ShadcnText italic color="#EF4444">#EF4444</ShadcnText>
     </ShadcnSpace>
   </div>
 </template>

diff --git a/src/ui/text/ShadcnText.vue b/src/ui/text/ShadcnText.vue
@@ -1,7 +1,8 @@
 <template>
   <div :class="['inline-flex',
               !color && TextType[colorType],
-              strong && 'font-semibold'
+              strong && 'font-semibold',
+              italic && 'italic'
         ]"
        :style="[
               color && {color: color}
@@ -16,6 +17,7 @@ import { TextType } from '@/ui/common/type.ts'
 
 withDefaults(defineProps<TextProps>(), {
   colorType: 'default',
-  strong: false
+  strong: false,
+  italic: false
 })
 </script>
diff --git a/src/ui/text/types.ts b/src/ui/text/types.ts
@@ -5,4 +5,5 @@ export interface TextProps
     color?: string
     colorType?: TextType | string
     strong?: boolean
+    italic?: boolean
 }