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>

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'