Feature/paragraph updates

docs/components/paragraph.md

@@ -1,8 +1,6 @@
 <script setup>
 import FwbPExample from './typography/p/FwbPExample.vue'
-import FwbPExampleAlign from './typography/p/FwbPExampleAlign.vue'
 import FwbPExampleCustom from './typography/p/FwbPExampleCustom.vue'
-import FwbPExampleWeight from './typography/p/FwbPExampleWeight.vue'
 </script>
 
 # Vue Paragraph - Flowbite
@@ -15,7 +13,7 @@ Use this example of a paragraph element to use inside article content or a landi
 
 ```vue
 <template>
-  <fwb-p class="mb-2">
+  <fwb-p>
     Track work across the enterprise through an open, collaborative platform.
     Link issues across Jira and ingest data from other software development
     tools, so your IT support and operations teams have richer contextual
@@ -36,72 +34,42 @@ import { FwbP } from 'flowbite-vue'
 
 <fwb-p-example />
 
-## Weight
+## Custom classes
 
-Use `weight` prop to set the text-weight.
+Use `class` attribute to apply the tailwind classes.
 
 ```vue
 <template>
-  <fwb-p class="mb-2" weight="light">
+  <fwb-p class="font-light">
     Track work across the enterprise through an open, collaborative platform.
     Link issues across Jira and ingest data from other software development
     tools, so your IT support and operations teams have richer contextual
     information to rapidly respond to requests, incidents, and changes.
   </fwb-p>
-  <fwb-p weight="bold">
+  <fwb-p class="font-bold">
     Deliver great service experiences fast - without the complexityof
     traditional ITSM solutions. Accelerate critical development work,
     eliminate toil, and deploy changes with ease, with a complete
     audit trail for every change.
   </fwb-p>
-</template>
-
-<script setup>
-import { FwbP } from 'flowbite-vue'
-</script>
-```
-
-<fwb-p-example-weight />
-
-## Alignment
-
-Use `align` prop to set the text alignment.
-
-```vue
-<template>
-  <fwb-p  align="left" class="mb-2">
+  <fwb-p  class="test-left">
     Deliver great service experiences fast - without the complexityof
     traditional ITSM solutions. Accelerate critical development work,
     eliminate toil, and deploy changes with ease, with a complete
     audit trail for every change.
   </fwb-p>
-  <fwb-p align="center" class="mb-2">
+  <fwb-p class="test-center">
     Deliver great service experiences fast - without the complexityof
     traditional ITSM solutions. Accelerate critical development work,
     eliminate toil, and deploy changes with ease, with a complete
     audit trail for every change.
   </fwb-p>
-  <fwb-p align="right" class="mb-2">
+  <fwb-p class="text-right">
     Deliver great service experiences fast - without the complexityof
     traditional ITSM solutions. Accelerate critical development work,
     eliminate toil, and deploy changes with ease, with a complete
     audit trail for every change.
   </fwb-p>
-</template>
-
-<script setup>
-import { FwbP } from 'flowbite-vue'
-</script>
-```
-
-<fwb-p-example-align />
-
-## Custom classes
-
-Use `class` attribute to apply the tailwind classes.
-
-```vue
-<template>
   <fwb-p class="text-green-600 dark:text-green-400 italic">
     Deliver great service experiences fast - without the complexityof
     traditional ITSM solutions. Accelerate critical development work,

docs/components/typography/p/FwbPExample.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vp-raw">
-    <fwb-p class="mb-2">
+    <fwb-p>
       Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams
       have richer contextual information to rapidly respond to requests, incidents, and changes.
     </fwb-p>

docs/components/typography/p/FwbPExampleCustom.vue

@@ -1,7 +1,40 @@
 <template>
   <div class="vp-raw">
-    <fwb-p class="text-green-800 dark: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.
+    <fwb-p class="font-light">
+      Track work across the enterprise through an open, collaborative platform.
+      Link issues across Jira and ingest data from other software development
+      tools, so your IT support and operations teams have richer contextual
+      information to rapidly respond to requests, incidents, and changes.
+    </fwb-p>
+    <fwb-p class="font-bold">
+      Deliver great service experiences fast - without the complexityof
+      traditional ITSM solutions. Accelerate critical development work,
+      eliminate toil, and deploy changes with ease, with a complete
+      audit trail for every change.
+    </fwb-p>
+    <fwb-p class="text-left">
+      Deliver great service experiences fast - without the complexityof
+      traditional ITSM solutions. Accelerate critical development work,
+      eliminate toil, and deploy changes with ease, with a complete
+      audit trail for every change.
+    </fwb-p>
+    <fwb-p class="text-center">
+      Deliver great service experiences fast - without the complexityof
+      traditional ITSM solutions. Accelerate critical development work,
+      eliminate toil, and deploy changes with ease, with a complete
+      audit trail for every change.
+    </fwb-p>
+    <fwb-p class="text-right">
+      Deliver great service experiences fast - without the complexityof
+      traditional ITSM solutions. Accelerate critical development work,
+      eliminate toil, and deploy changes with ease, with a complete
+      audit trail for every change.
+    </fwb-p>
+    <fwb-p class="text-green-600 dark:text-green-400 italic">
+      Deliver great service experiences fast - without the complexityof
+      traditional ITSM solutions. Accelerate critical development work,
+      eliminate toil, and deploy changes with ease, with a complete
+      audit trail for every change.
     </fwb-p>
   </div>
 </template>

docs/pages/getting-started.md

@@ -19,7 +19,7 @@ npm i flowbite flowbite-vue
 ```javascript
 module.exports = {
   content: [
-    'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx}',
+    'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx,vue}',
     'node_modules/flowbite/**/*.{js,jsx,ts,tsx}'
   ],
   plugins: [

src/components/Typography/FwbP.vue

@@ -1,65 +1,25 @@
 <template>
-  <p :class="[color, sizes[size], heights[height], weights[weight], whitespaces[whitespace], aligns[align]]">
+  <p :class="componentClasses">
     <slot />
   </p>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useMergeClasses } from '@/composables/useMergeClasses'
+
 interface ParagraphProps {
-  height?: 'normal' | 'relaxed' | 'loose'
-  color?: string
-  size?: string
-  weight?: string
-  whitespace?: string
-  align?: string
+  class?: string
 }
 
-withDefaults(defineProps<ParagraphProps>(), {
-  height: 'normal',
-  color: 'text-gray-900 dark:text-white',
-  size: '',
-  weight: '',
-  whitespace: '',
-  align: '',
+const props = withDefaults(defineProps<ParagraphProps>(), {
+  class: '',
 })
 
-const sizes: Record<string, string> = {
-  xs: 'text-xs',
-  sm: 'text-sm',
-  base: 'text-base',
-  lg: 'text-lg',
-  xl: 'text-xl',
-}
+const defaultClasses = 'mb-3 last:mb-0 text-gray-900 dark:text-white leading-normal'
 
-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',
-}
+const componentClasses = computed(() => useMergeClasses([
+  defaultClasses,
+  props.class,
+]))
 </script>

src/composables/useMergeClasses.ts

@@ -1,4 +1,4 @@
 import { twMerge } from 'tailwind-merge'
 
-export const useMergeClasses = (componentClasses: string): string =>
+export const useMergeClasses = (componentClasses: string | string[]): string =>
   twMerge(componentClasses)