feat(new component): Initial typography (#199)

* feat: typography

* feat: typography

* feat: typography

* Update docs/components/heading.md

* Update src/components/Typography/A.vue

* Update src/components/Typography/Heading.vue

* Update src/components/Typography/Img.vue

* Update src/components/Typography/P.vue

---------

Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>

docs/.vitepress/config.mts

@@ -18,6 +18,13 @@ function buildSidebar() {
       collapsible: true,
       items: [...getFormComponents()],
     },
+    {
+      text: 'Typography',
+      collapsible: true,
+      items: [
+        ...getTypography(),
+      ]
+    },
     {
       text: 'Utils',
       collapsible: true,
@@ -75,6 +82,15 @@ function getUtils() {
   ]
 }
 
+function getTypography() {
+  return [
+    { text: 'Heading', link: '/components/heading' },
+    { text: 'Paragraph', link: '/components/paragraph' },
+    { text: 'Image', link: '/components/image' },
+    { text: 'Link', link: '/components/link' }
+  ]
+}
+
 /**
  * This can be used as an example
  * https://github.com/vuejs/vitepress/blob/master/docs/.vitepress/config.js

docs/components/heading.md

@@ -0,0 +1,142 @@
+<script setup>
+import H1 from './typography/heading/H1.vue'
+import H2 from './typography/heading/H2.vue'
+import H3 from './typography/heading/H3.vue'
+import H4 from './typography/heading/H4.vue'
+import H5 from './typography/heading/H5.vue'
+import H6 from './typography/heading/H6.vue'
+import HColor from './typography/heading/HColor.vue'
+import HCustom from './typography/heading/HCustom.vue'
+</script>
+
+# Vue Heading - Flowbite
+
+#### The heading component defines six levels of title elements from H1 to H6 that are used as titles and subtitles on a web page based on multiple styles and layouts
+
+## Heading one (H1)
+
+Use the `tag="h1"` as the most important text element to indicate the title of your web page.
+
+```vue
+<template>
+  <Heading tag="h1">This is my heading</Heading>
+</template>
+
+<script setup>
+import Heading from 'flowbite-vue'
+</script>
+```
+
+<H1 />
+
+## Heading one (H2)
+
+The H2 tag can be used as subtitles of the page’s sections.
+
+```vue
+<template>
+  <Heading tag="h2">This is my heading</Heading>
+</template>
+
+<script setup>
+import Heading from 'flowbite-vue'
+</script>
+```
+
+<H2 />
+
+## Heading one (H3)
+
+Use the H3 tags inside sections that already have a H2 available.
+
+```vue
+<template>
+  <Heading tag="h3">This is my heading</Heading>
+</template>
+
+<script setup>
+import Heading from 'flowbite-vue'
+</script>
+```
+
+<H3 />
+
+## Heading one (H4)
+
+The H4 can be generally used after H2 and H3 tags are already present and you need a more in-depth hierarchy.
+
+```vue
+<template>
+  <Heading tag="h4">This is my heading</Heading>
+</template>
+
+<script setup>
+import Heading from 'flowbite-vue'
+</script>
+```
+
+<H4 />
+
+## Heading one (H5)
+
+The H5 tag is most often used in longer articles with other heading already available or in sidebars.
+
+```vue
+<template>
+  <Heading tag="h5">This is my heading</Heading>
+</template>
+
+<script setup>
+import Heading from 'flowbite-vue'
+</script>
+```
+
+<H5 />
+
+## Heading one (H6)
+
+Using the H6 tag is quite rare because it means that you’ve already used all heading from H1 to H5, but you can still use it if you have a very complex article with lots of headings.
+
+```vue
+<template>
+  <Heading tag="h6">This is my heading</Heading>
+</template>
+
+<script setup>
+import Heading from 'flowbite-vue'
+</script>
+```
+
+<H6 />
+
+## Color
+
+Use the `color` prop to set the text color.
+
+```vue
+<template>
+  <Heading color="text-green-400" tag="h1">This is my heading</Heading>
+</template>
+
+<script setup>
+import Heading from 'flowbite-vue'
+</script>
+```
+
+<HColor />
+
+## Custom classes
+
+Use the `class` attribute to apply the tailwind classes.
+
+```vue
+<template>
+  <Heading class="!text-xl italic underline" tag="h1">This is my heading</Heading>
+</template>
+
+<script setup>
+import Heading from 'flowbite-vue'
+</script>
+```
+
+<HCustom />

docs/components/image.md

@@ -0,0 +1,113 @@
+<script setup>
+import Img from './typography/image/Img.vue'
+import ImgCap from './typography/image/ImgCap.vue'
+import ImgSize from './typography/image/ImgSize.vue'
+import ImgAlign from './typography/image/ImgAlign.vue'
+import ImgBlur from './typography/image/ImgBlur.vue'
+import ImgCustom from './typography/image/ImgCustom.vue'
+</script>
+
+# Vue Images - Flowbite
+
+#### The image component can be used to embed images inside the web page in articles and sections based on multiple styles, sizes, layouts and hover animations
+
+## Default image
+
+Use this example to show the a responsive image that won’t grow beyond the maximum original width.
+
+```vue
+<template>
+  <Img src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
+</template>
+
+<script setup>
+import Img from 'flowbite-vue'
+</script>
+```
+
+<Img />
+
+## Image caption
+
+This example can be used to add a caption for the image often used inside articles. Use `caption-class` to override the cation.
+
+```vue
+<template>
+  <Img caption="flowbite-vue" src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
+</template>
+
+<script setup>
+import Img from 'flowbite-vue'
+</script>
+```
+
+<ImgCap />
+
+## Sizes
+
+Set the size of the image using the `w-size` and `h-size` or `max-w-size` utility classes from Tailwind CSS to set the width and height of the element.
+
+```vue
+<template>
+  <Img size="max-w-md" src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
+</template>
+
+<script setup>
+import Img from 'flowbite-vue'
+</script>
+```
+
+<ImgSize />
+
+## Alignment
+
+Align the image component to the center or right side of the document page using `mx-auto` and `ml-auto` margin styles.
+
+```vue
+<template>
+  <Img align="ml-auto" size="max-w-md" src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
+</template>
+
+<script setup>
+import Img from 'flowbite-vue'
+</script>
+```
+
+<ImgAlign />
+
+## Grayscale
+
+Use the filter option and apply a grayscale to the image element using the grayscale class.
+
+```vue
+<template>
+  <Img
+    size="max-w-lg"
+    alt="My gallery"
+    img-class="rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0"
+    src="https://flowbite-svelte.com/images/examples/content-gallery-3.png"
+  />
+</template>
+
+<script setup>
+import Img from 'flowbite-vue'
+</script>
+```
+
+<ImgBlur />
+
+## Custom classes
+
+Use the `img-class` prop to apply tailwind classes.
+
+```vue
+<template>
+  <Img img-class="rounded-lg border-[1px]" size="max-w-lg" src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
+</template>
+
+<script setup>
+import Img from 'flowbite-vue'
+</script>
+```
+
+<ImgCustom />

docs/components/link.md

@@ -0,0 +1,60 @@
+<script setup>
+import A from './typography/link/A.vue'
+import APara from './typography/link/APara.vue'
+import ACustom from './typography/link/ACustom.vue'
+</script>
+
+# Vue Links - Flowbite
+
+#### The link component can be used to set hyperlinks from one page to another or to an external website when clicking on an inline text item, button, or card
+
+## Default link
+
+Use this example to set default styles to an inline link element.
+
+```vue
+<template>
+  <A href="/"> Flowbite-vue </A>
+</template>
+
+<script setup>
+import A from 'flowbite-vue'
+</script>
+```
+
+<A />
+
+## Para link
+
+Use this example to set a link inside a paragraph with an underline style.
+
+```vue
+<template>
+  <P>
+    The free updates that will be provided is based on the <A href="/" class="underline hover:no-underline">roadmap</A> that we have laid out for this project. It is also possible that we will provide
+    extra updates outside of the roadmap as well.
+  </P>
+</template>
+
+<script setup>
+import { P, A } from 'flowbite-vue'
+</script>
+```
+
+<APara />
+
+## Custom classes
+
+Use `class` attribute prop to apply the tailwind classes.
+
+```vue
+<template>
+  <A class="underline italic" href="/"> Flowbite-vue </A>
+</template>
+
+<script setup>
+import A from 'flowbite-vue'
+</script>
+```
+
+<ACustom />

docs/components/paragraph.md

@@ -0,0 +1,86 @@
+<script setup>
+import P from './typography/p/P.vue'
+import PWeight from './typography/p/PWeight.vue'
+import PAlign from './typography/p/PAlign.vue'
+import PCustom from './typography/p/PCustom.vue'
+</script>
+
+# Vue Paragraph - Flowbite
+
+#### Use the paragraph component to create multiple blocks of text separated by blank lines and write content based on multiple layouts and styles
+
+## Default paragraph
+
+Use this example of a paragraph element to use inside article content or a landing page.
+
+```vue
+<template>
+  <P>
+    Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
+    audit trail for every change.
+  </P>
+</template>
+
+<script setup>
+import P from 'flowbite-vue'
+</script>
+```
+
+<P />
+
+## Weight
+
+Use `weight` prop to set the text-weight.
+
+```vue
+<template>
+  <P weight="light">
+    Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
+    audit trail for every change.
+  </P>
+</template>
+
+<script setup>
+import P from 'flowbite-vue'
+</script>
+```
+
+<PWeight />
+
+## Alignment
+
+Use `align` prop to set the text alignment.
+
+```vue
+<template>
+  <P align="center">
+    Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
+    audit trail for every change.
+  </P>
+</template>
+
+<script setup>
+import P from 'flowbite-vue'
+</script>
+```
+
+<PAlign />
+
+## Custom classes
+
+Use `class` attribute to apply the tailwind classes.
+
+```vue
+<template>
+  <P class="!text-green-400 italic">
+    Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
+    audit trail for every change.
+  </P>
+</template>
+
+<script setup>
+import P from 'flowbite-vue'
+</script>
+```
+
+<PCustom />

docs/components/typography/heading/H1.vue

@@ -0,0 +1,7 @@
+<template>
+  <Heading tag="h1">This is my heading</Heading>
+</template>
+
+<script setup>
+import Heading from '../../../../src/components/Typography/Heading.vue'
+</script>

docs/components/typography/heading/H2.vue

@@ -0,0 +1,7 @@
+<template>
+  <Heading tag="h2">This is my heading</Heading>
+</template>
+
+<script setup>
+import Heading from '../../../../src/components/Typography/Heading.vue'
+</script>

docs/components/typography/heading/H3.vue

@@ -0,0 +1,7 @@
+<template>
+  <Heading tag="h3">This is my heading</Heading>
+</template>
+
+<script setup>
+import Heading from '../../../../src/components/Typography/Heading.vue'
+</script>

docs/components/typography/heading/H4.vue

@@ -0,0 +1,7 @@
+<template>
+  <Heading tag="h4">This is my heading</Heading>
+</template>
+
+<script setup>
+import Heading from '../../../../src/components/Typography/Heading.vue'
+</script>

docs/components/typography/heading/H5.vue

@@ -0,0 +1,7 @@
+<template>
+  <Heading tag="h5">This is my heading</Heading>
+</template>
+
+<script setup>
+import Heading from '../../../../src/components/Typography/Heading.vue'
+</script>

docs/components/typography/heading/H6.vue

@@ -0,0 +1,7 @@
+<template>
+  <Heading tag="h6">This is my heading</Heading>
+</template>
+
+<script setup>
+import Heading from '../../../../src/components/Typography/Heading.vue'
+</script>

docs/components/typography/heading/HColor.vue

@@ -0,0 +1,7 @@
+<template>
+  <Heading color="text-green-400" tag="h1">This is my heading</Heading>
+</template>
+
+<script setup>
+import Heading from '../../../../src/components/Typography/Heading.vue'
+</script>

docs/components/typography/heading/HCustom.vue

@@ -0,0 +1,7 @@
+<template>
+  <Heading class="underline italic !text-xl" tag="h1">This is my heading</Heading>
+</template>
+
+<script setup>
+import Heading from '../../../../src/components/Typography/Heading.vue'
+</script>

docs/components/typography/image/Img.vue

@@ -0,0 +1,7 @@
+<template>
+  <Img src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg" alt="flowbite-vue" />
+</template>
+
+<script setup>
+import Img from '../../../../src/components/Typography/Img.vue'
+</script>

docs/components/typography/image/ImgAlign.vue

@@ -0,0 +1,7 @@
+<template>
+  <Img alignment="mx-auto" size="max-w-md" src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg" alt="flowbite-vue" />
+</template>
+
+<script setup>
+import Img from '../../../../src/components/Typography/Img.vue'
+</script>

docs/components/typography/image/ImgBlur.vue

@@ -0,0 +1,13 @@
+<template>
+  <Img
+    size="max-w-lg"
+    alt="My gallery"
+    alignment="mx-auto"
+    img-class="rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0"
+    src="https://flowbite-svelte.com/images/examples/content-gallery-3.png"
+  />
+</template>
+
+<script setup>
+import Img from '../../../../src/components/Typography/Img.vue'
+</script>

docs/components/typography/image/ImgCap.vue

@@ -0,0 +1,7 @@
+<template>
+  <Img caption="flowbite-vue" src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg" alt="flowbite-vue" />
+</template>
+
+<script setup>
+import Img from '../../../../src/components/Typography/Img.vue'
+</script>

docs/components/typography/image/ImgCustom.vue

@@ -0,0 +1,7 @@
+<template>
+  <Img img-class="rounded-lg border-[1px]" alignment="mx-auto" size="max-w-lg" src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg" alt="flowbite-vue" />
+</template>
+
+<script setup>
+import Img from '../../../../src/components/Typography/Img.vue'
+</script>

docs/components/typography/image/ImgSize.vue

@@ -0,0 +1,7 @@
+<template>
+  <Img size="max-w-md" src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg" alt="flowbite-vue" />
+</template>
+
+<script setup>
+import Img from '../../../../src/components/Typography/Img.vue'
+</script>

docs/components/typography/link/A.vue

@@ -0,0 +1,7 @@
+<template>
+  <A href="/">Flowbite-vue </A>
+</template>
+
+<script setup>
+import A from '../../../../src/components/Typography/A.vue'
+</script>

docs/components/typography/link/ACustom.vue

@@ -0,0 +1,7 @@
+<template>
+  <A class="underline italic" href="/">Flowbite-vue </A>
+</template>
+
+<script setup>
+import A from '../../../../src/components/Typography/A.vue'
+</script>

docs/components/typography/link/APara.vue

@@ -0,0 +1,11 @@
+<template>
+  <P>
+    The free updates that will be provided is based on the <A href="/" class="underline hover:no-underline">roadmap</A> that we have laid out for this project. It is also possible that we will provide
+    extra updates outside of the roadmap as well.
+  </P>
+</template>
+
+<script setup>
+import A from '../../../../src/components/Typography/A.vue'
+import P from '../../../../src/components/Typography/P.vue'
+</script>

docs/components/typography/p/P.vue

@@ -0,0 +1,10 @@
+<template>
+  <P>
+    Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
+    audit trail for every change.
+  </P>
+</template>
+
+<script setup>
+import P from '../../../../src/components/Typography/P.vue'
+</script>

docs/components/typography/p/PAlign.vue

@@ -0,0 +1,10 @@
+<template>
+  <P align="center">
+    Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
+    audit trail for every change.
+  </P>
+</template>
+
+<script setup>
+import P from '../../../../src/components/Typography/P.vue'
+</script>

docs/components/typography/p/PCustom.vue

@@ -0,0 +1,10 @@
+<template>
+  <P class="!text-green-400 italic">
+    Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
+    audit trail for every change.
+  </P>
+</template>
+
+<script setup>
+import P from '../../../../src/components/Typography/P.vue'
+</script>

docs/components/typography/p/PWeight.vue

@@ -0,0 +1,10 @@
+<template>
+  <P weight="light">
+    Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
+    audit trail for every change.
+  </P>
+</template>
+
+<script setup>
+import P from '../../../../src/components/Typography/P.vue'
+</script>

src/components/Typography/A.vue

@@ -0,0 +1,17 @@
+<template>
+  <a :href="href" :class="[color, 'inline-flex items-center hover:underline']">
+    <slot />
+  </a>
+</template>
+
+<script setup lang="ts">
+interface LinkProps {
+  href?: string
+  color?: string
+}
+
+withDefaults(defineProps<LinkProps>(), {
+  href: '',
+  color: 'text-primary-600 dark:text-primary-500',
+})
+</script>

src/components/Typography/Heading.vue

@@ -0,0 +1,28 @@
+<template>
+  <div :class="customSize ? customSize : [textSizes[tag], color, 'w-full']">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+interface HeadingProps {
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  color?: string
+  customSize?: string
+}
+
+withDefaults(defineProps<HeadingProps>(), {
+  tag: 'h1',
+  color: 'text-gray-900 dark:text-white',
+  customSize: '',
+})
+
+const textSizes: Record<string, string> = {
+  h1: 'text-5xl font-extrabold',
+  h2: 'text-4xl font-bold',
+  h3: 'text-3xl font-bold',
+  h4: 'text-2xl font-bold',
+  h5: 'text-xl font-bold',
+  h6: 'text-lg font-bold',
+}
+</script>

src/components/Typography/Img.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <figure v-if="caption" :class="figClass">
+      <img :src="src" :alt="alt" :class="[size, alignment, imgClass]" />
+      <figcaption :class="captionClass">{{ caption }}</figcaption>
+    </figure>
+
+    <img v-else :src="src" :alt="alt" :class="[size, alignment, imgClass]" />
+  </div>
+</template>
+
+<script setup lang="ts">
+interface ImageProps {
+  caption?: string
+  src?: string
+  size?: string
+  alt?: string
+  imgClass?: string
+  alignment?: string
+  captionClass?: string
+  figClass?: string
+}
+
+withDefaults(defineProps<ImageProps>(), {
+  caption: '',
+  src: '',
+  size: 'max-w-full',
+  alt: '',
+  imgClass: 'h-auto',
+  alignment: '',
+  captionClass: 'mt-2 text-sm text-center text-gray-500 dark:text-gray-400',
+  figClass: 'max-w-lg',
+})
+</script>

src/components/Typography/P.vue

@@ -0,0 +1,65 @@
+<template>
+  <p :class="[color, sizes[size], heights[height], weights[weight], whitespaces[whitespace], aligns[align]]">
+    <slot />
+  </p>
+</template>
+
+<script setup lang="ts">
+interface ParagraphProps {
+  height?: 'normal' | 'relaxed' | 'loose'
+  color?: string
+  size?: string
+  weight?: string
+  whitespace?: string
+  align?: string
+}
+
+withDefaults(defineProps<ParagraphProps>(), {
+  height: 'normal',
+  color: 'text-gray-900 dark:text-white',
+  size: '',
+  weight: '',
+  whitespace: '',
+  align: '',
+})
+
+const sizes: Record<string, string> = {
+  xs: 'text-xs',
+  sm: 'text-sm',
+  base: 'text-base',
+  lg: 'text-lg',
+  xl: 'text-xl',
+}
+
+const weights: Record<string, string> = {
+  thin: 'font-thin',
+  extralight: 'font-extralight',
+  light: 'font-light',
+  normal: 'font-normal',
+  medium: 'font-medium',
+  semibold: 'font-semibold',
+  bold: 'font-bold',
+  extrabold: 'font-extrabold',
+  black: 'font-black',
+}
+
+const aligns: Record<string, string> = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+}
+
+const heights: Record<string, string> = {
+  normal: 'leading-normal',
+  relaxed: 'leading-relaxed',
+  loose: 'leading-loose',
+}
+
+const whitespaces: Record<string, string> = {
+  normal: 'whitespace-normal',
+  nowrap: 'whitespace-nowrap',
+  pre: 'whitespace-pre',
+  preline: 'whitespace-pre-line',
+  prewrap: 'whitespace-pre-wrap',
+}
+</script>

src/index.ts

@@ -69,4 +69,9 @@ export { default as Radio } from './components/Radio/Radio.vue'
 
 export { default as FileInput } from './components/FileInput/FileInput.vue'
 
+export { default as Heading } from './components/Typography/Heading.vue'
+export { default as A } from './components/Typography/Heading.vue'
+export { default as P } from './components/Typography/P.vue'
+export { default as Img } from './components/Typography/Img.vue'
+
 export * from './composables'