feat(component): add text component (#153)

* feat(component): add text component * chore: add example for text component * docs: add text component doc
onu-ui · Mar 31, 2023 · d04cc4b · d04cc4b
1 parent 41a19af
commit d04cc4b
Show file tree

Hide file tree

Showing 17 changed files with 423 additions and 5 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -33,6 +33,10 @@ const components = [
         text: 'Link',
         link: '/components/link',
       },
+      {
+        text: 'Text',
+        link: '/components/text',
+      },
     ],
   },
   {

diff --git a/docs/components/text.md b/docs/components/text.md
@@ -0,0 +1,57 @@
+---
+title: Text
+lang: en-US
+---
+
+# Text <new-badge/>
+
+Used for text.
+
+## Basic usage
+
+Use the `type` attribute to define Text's type.
+
+<demo src="../example/text/basic.vue"></demo>
+
+## Gradient
+
+Use the `gradient` to render a gradient Text.
+
+<demo src="../example/text/gradient.vue"></demo>
+
+## Size
+
+Use attribute `size` to set additional sizes with `xs`, `sm`, `md`(base) or `lg`.
+
+<demo src="../example/text/size.vue"></demo>
+
+## Ellipsis
+
+Pass the `truncated` prop to render an ellipsis when the text exceeds the width of the viewport or max-width set.
+
+<demo src="../example/text/ellipsis.vue"></demo>
+
+## Override
+
+Use attribute `tag` or `font` to override element.
+
+<demo src="../example/text/override.vue"></demo>
+
+## Mixed
+
+<demo src="../example/text/mixed.vue"></demo>
+
+## Text Props
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| type | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info'` | `''` | Text type. |
+| size | `'xs' \| 'sm' \| 'md' \| 'lg'` | `''` | Text size.  |
+| truncated | `boolean` | `false` |  Render ellipsis.  |
+| tag | `string` | `'span'` | Custom element tag. |
+| font | `'normal' \| 'block' \| 'bold' \| 'italic' \| 'sub' \| 'sup' \| 'under' \| 'del' \| 'mark'` | `''` | alias for tag. |
+| gradient | `string` | `''` | Render the gradient text, use css `linear-gradient`. |
+
+## Text Slots
+| Name | Parameters | Description | 
+| --- | --- | --- |
+| default | `()` | Customize default content. |
diff --git a/docs/example/text/basic.vue b/docs/example/text/basic.vue
@@ -0,0 +1,23 @@
+<template>
+  <div fscw gap-2>
+    <o-text>Popular, beautiful and fast UnoCSS component library.</o-text>
+    <o-text type="primary">
+      Popular, beautiful and fast UnoCSS component library.
+    </o-text>
+    <o-text type="secondary">
+      Popular, beautiful and fast UnoCSS component library.
+    </o-text>
+    <o-text type="success">
+      Popular, beautiful and fast UnoCSS component library.
+    </o-text>
+    <o-text type="warning">
+      Popular, beautiful and fast UnoCSS component library.
+    </o-text>
+    <o-text type="error">
+      Popular, beautiful and fast UnoCSS component library.
+    </o-text>
+    <o-text type="info">
+      Popular, beautiful and fast UnoCSS component library.
+    </o-text>
+  </div>
+</template>
diff --git a/docs/example/text/ellipsis.vue b/docs/example/text/ellipsis.vue
@@ -0,0 +1,7 @@
+<template>
+  <div fscw gap-2>
+    <o-text class="w-220px" truncated>
+      If your text is too long, it will be omitted
+    </o-text>
+  </div>
+</template>
diff --git a/docs/example/text/gradient.vue b/docs/example/text/gradient.vue
@@ -0,0 +1,7 @@
+<template>
+  <div fscw gap-2>
+    <o-text font="bold" size="lg" gradient="linear-gradient(to right, #0c02ba, #00ff95)">
+      ONU-UI
+    </o-text>
+  </div>
+</template>
diff --git a/docs/example/text/mixed.vue b/docs/example/text/mixed.vue
@@ -0,0 +1,10 @@
+<template>
+  <div fscw gap-2>
+    <o-text>
+      <o-icon name="i-logos:vitejs" />Onu-ui
+    </o-text>
+    <o-text>
+      This is text mixed icon<o-icon name="i-logos:sketch" /> and component<o-button>Button</o-button>
+    </o-text>
+  </div>
+</template>
diff --git a/docs/example/text/override.vue b/docs/example/text/override.vue
@@ -0,0 +1,68 @@
+<template>
+  <div fscw gap-2>
+    <div fsc flex-col gap-2 flex-wrap>
+      <o-text>span</o-text>
+      <o-text tag="p">
+        This is a paragraph.
+      </o-text>
+      <o-text tag="b">
+        Bold
+      </o-text>
+      <o-text tag="i">
+        Italic
+      </o-text>
+      <o-text>
+        This is<o-text tag="sub" size="xs">
+          subscript
+        </o-text>
+      </o-text>
+      <o-text>
+        This is<o-text tag="sup" size="xs">
+          superscript
+        </o-text>
+      </o-text>
+      <o-text tag="ins">
+        Inserted
+      </o-text>
+      <o-text tag="del">
+        Deleted
+      </o-text>
+      <o-text tag="mark">
+        Marked
+      </o-text>
+    </div>
+    <div fsc flex-col gap-2 flex-wrap>
+      <o-text font="normal">
+        span
+      </o-text>
+      <o-text font="block">
+        This is a paragraph.
+      </o-text>
+      <o-text font="bold">
+        Bold
+      </o-text>
+      <o-text font="italic">
+        Italic
+      </o-text>
+      <o-text>
+        This is<o-text font="sub" size="xs">
+          subscript
+        </o-text>
+      </o-text>
+      <o-text>
+        This is<o-text font="sup" size="xs">
+          superscript
+        </o-text>
+      </o-text>
+      <o-text font="under">
+        Inserted
+      </o-text>
+      <o-text font="del">
+        Deleted
+      </o-text>
+      <o-text font="mark">
+        Marked
+      </o-text>
+    </div>
+  </div>
+</template>
diff --git a/docs/example/text/size.vue b/docs/example/text/size.vue
@@ -0,0 +1,16 @@
+<template>
+  <div flex items-start flex-col gap-2>
+    <o-text size="xs">
+      Font Size: xs
+    </o-text>
+    <o-text size="sm">
+      Font Size: sm
+    </o-text>
+    <o-text size="md">
+      Font Size: md
+    </o-text>
+    <o-text size="lg">
+      Font Size: lg
+    </o-text>
+  </div>
+</template>
diff --git a/example/src/components/TheText.vue b/example/src/components/TheText.vue
@@ -0,0 +1,129 @@
+<script setup lang='ts'>
+
+</script>
+
+<template>
+  <OCard title="Text">
+    <div class="space-y-2">
+      <div fsc gap-2 flex-wrap>
+        <o-text>Default</o-text>
+        <o-text type="primary">
+          Primary
+        </o-text>
+        <o-text type="secondary">
+          Secondary
+        </o-text>
+        <o-text type="success">
+          Success
+        </o-text>
+        <o-text type="warning">
+          Warning
+        </o-text>
+        <o-text type="error">
+          Error
+        </o-text>
+        <o-text type="info">
+          Info
+        </o-text>
+      </div>
+      <div fsc gap-2 flex-wrap>
+        <o-text size="xs">
+          XS
+        </o-text>
+        <o-text size="sm">
+          SM
+        </o-text>
+        <o-text size="md">
+          MD(Default)
+        </o-text>
+        <o-text size="lg">
+          LG
+        </o-text>
+      </div>
+      <div fsc gap-2 flex-wrap>
+        <o-text class="w-220px" truncated>
+          If your text is too long, it will be omitted
+        </o-text>
+      </div>
+      <div fsc gap-2 flex-wrap>
+        <div fsc flex-col gap-2 flex-wrap>
+          <o-text>span</o-text>
+          <o-text tag="p">
+            This is a paragraph.
+          </o-text>
+          <o-text tag="b">
+            Bold
+          </o-text>
+          <o-text tag="i">
+            Italic
+          </o-text>
+          <o-text>
+            This is<o-text tag="sub" size="xs">
+              subscript
+            </o-text>
+          </o-text>
+          <o-text>
+            This is<o-text tag="sup" size="xs">
+              superscript
+            </o-text>
+          </o-text>
+          <o-text tag="ins">
+            Inserted
+          </o-text>
+          <o-text tag="del">
+            Deleted
+          </o-text>
+          <o-text tag="mark">
+            Marked
+          </o-text>
+        </div>
+        <div fsc flex-col gap-2 flex-wrap>
+          <o-text font="normal">
+            span
+          </o-text>
+          <o-text font="block">
+            This is a paragraph.
+          </o-text>
+          <o-text font="bold">
+            Bold
+          </o-text>
+          <o-text font="italic">
+            Italic
+          </o-text>
+          <o-text>
+            This is<o-text font="sub" size="xs">
+              subscript
+            </o-text>
+          </o-text>
+          <o-text>
+            This is<o-text font="sup" size="xs">
+              superscript
+            </o-text>
+          </o-text>
+          <o-text font="under">
+            Inserted
+          </o-text>
+          <o-text font="del">
+            Deleted
+          </o-text>
+          <o-text font="mark">
+            Marked
+          </o-text>
+        </div>
+      </div>
+      <div fsc gap-2 flex-wrap>
+        <o-text>
+          <o-icon name="i-logos:vitejs" />Onu-ui
+        </o-text>
+        <o-text>
+          This is text mixed icon<o-icon name="i-logos:sketch" /> and component<o-button>Button</o-button>
+        </o-text>
+      </div>
+      <div fsc gap-2 flex-wrap>
+        <o-text font="bold" size="lg" gradient="linear-gradient(to right, #0c02ba, #00ff95)">
+          ONU-UI
+        </o-text>
+      </div>
+    </div>
+  </OCard>
+</template>
diff --git a/example/src/pages/index.vue b/example/src/pages/index.vue
@@ -8,14 +8,15 @@
     <TheCheckbox />
     <TheAlert />
     <TheBadge />
-    <TheTag /> -->
+    <TheTag />
+    <TheLink />
+    <TheRadio /> -->
     <TheMessage />
     <TheAffix />
     <TheEmpty />
-    <TheLink />
-    <TheRadio />
-    <TheBacktop />
-    <!-- <ThePopup />
+    <TheText />
+    <!-- <TheBacktop />
+    <ThePopup />
     <TheRate />
     <TheCollapse /> -->
   </div>

diff --git a/packages/components/index.ts b/packages/components/index.ts
@@ -21,3 +21,4 @@ export * from './link'
 export * from './radio'
 export * from './radio-group'
 export * from './affix'
+export * from './text'
diff --git a/packages/components/text/index.ts b/packages/components/text/index.ts
@@ -0,0 +1,7 @@
+import { withInstall } from '@onu-ui/utils'
+import Text from './src/text.vue'
+
+export const OText = withInstall(Text)
+export default OText
+
+export * from './src/text'