From 7948a04159932b3faf29725691b427b1ac0f6ae4 Mon Sep 17 00:00:00 2001
From: Sqrcz <naorniakowski@slashlab.pl>
Date: Mon, 18 Dec 2023 08:57:06 +0100
Subject: [PATCH] Feature/paragraph updates (#257)

* useMergeClasses accepted types updated - to match twMerge

* fwb-paragraph updated to accept user classes

* docs updated to fix missing tailwind classes

* fwb-p documentation updated

* tailwindcss class wrapper props removed

* Update docs/components/typography/p/FwbPExampleCustom.vue

* Update docs/components/typography/p/FwbPExampleCustom.vue

---------

Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>
---
 docs/components/paragraph.md                  | 94 ++++++-------------
 docs/components/typography/p/FwbPExample.vue  |  2 +-
 .../typography/p/FwbPExampleAlign.vue         | 26 -----
 .../typography/p/FwbPExampleCustom.vue        | 37 +++++++-
 .../typography/p/FwbPExampleWeight.vue        | 17 ----
 docs/pages/getting-started.md                 |  2 +-
 src/components/Typography/FwbP.vue            | 64 +++----------
 7 files changed, 80 insertions(+), 162 deletions(-)
 delete mode 100644 docs/components/typography/p/FwbPExampleAlign.vue
 delete mode 100644 docs/components/typography/p/FwbPExampleWeight.vue

diff --git a/docs/components/paragraph.md b/docs/components/paragraph.md
index a08927b..1783cc4 100644
--- a/docs/components/paragraph.md
+++ b/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
-
-Use `weight` prop to set the text-weight.
-
-```vue
-<template>
-  <fwb-p class="mb-2" weight="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">
-    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">
-    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">
-    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">
-    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="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="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 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 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,
diff --git a/docs/components/typography/p/FwbPExample.vue b/docs/components/typography/p/FwbPExample.vue
index a91f393..1631a0b 100644
--- a/docs/components/typography/p/FwbPExample.vue
+++ b/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>
diff --git a/docs/components/typography/p/FwbPExampleAlign.vue b/docs/components/typography/p/FwbPExampleAlign.vue
deleted file mode 100644
index b174788..0000000
--- a/docs/components/typography/p/FwbPExampleAlign.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <fwb-p
-      align="left"
-      class="mb-2"
-    >
-      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>
-    <fwb-p
-      align="center"
-      class="mb-2"
-    >
-      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>
-    <fwb-p
-      align="right"
-      class="mb-2"
-    >
-      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>
-  </div>
-</template>
-
-<script setup>
-import { FwbP } from '../../../../src/'
-</script>
diff --git a/docs/components/typography/p/FwbPExampleCustom.vue b/docs/components/typography/p/FwbPExampleCustom.vue
index 5ca6a6f..1242a7a 100644
--- a/docs/components/typography/p/FwbPExampleCustom.vue
+++ b/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>
diff --git a/docs/components/typography/p/FwbPExampleWeight.vue b/docs/components/typography/p/FwbPExampleWeight.vue
deleted file mode 100644
index 67ecbec..0000000
--- a/docs/components/typography/p/FwbPExampleWeight.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <fwb-p
-      class="mb-2"
-      weight="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">
-      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>
-  </div>
-</template>
-
-<script setup>
-import { FwbP } from '../../../../src/'
-</script>
diff --git a/docs/pages/getting-started.md b/docs/pages/getting-started.md
index 1f34f53..224fa73 100644
--- a/docs/pages/getting-started.md
+++ b/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: [
diff --git a/src/components/Typography/FwbP.vue b/src/components/Typography/FwbP.vue
index 81cdf33..03bfb0b 100644
--- a/src/components/Typography/FwbP.vue
+++ b/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>