jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feature/paragraph updates (#257)

Browse Source 
* 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>
This commit is contained in:
Sqrcz
2023-12-18 08:57:06 +01:00
committed by GitHub
parent 77d73abe34
commit 7948a04159
7 changed files with 80 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
docs/components/paragraph.md
View File

@@ -1,8 +1,6 @@
<script setup> <script setup>
import FwbPExample from './typography/p/FwbPExample.vue' import FwbPExample from './typography/p/FwbPExample.vue'
import FwbPExampleAlign from './typography/p/FwbPExampleAlign.vue'
import FwbPExampleCustom from './typography/p/FwbPExampleCustom.vue' import FwbPExampleCustom from './typography/p/FwbPExampleCustom.vue'
import FwbPExampleWeight from './typography/p/FwbPExampleWeight.vue'
</script> </script>
# Vue Paragraph - Flowbite # Vue Paragraph - Flowbite
@@ -15,7 +13,7 @@ Use this example of a paragraph element to use inside article content or a landi
```vue ```vue
<template> <template>
<fwb-p class="mb-2"> <fwb-p>
Track work across the enterprise through an open, collaborative platform. Track work across the enterprise through an open, collaborative platform.
Link issues across Jira and ingest data from other software development Link issues across Jira and ingest data from other software development
tools, so your IT support and operations teams have richer contextual tools, so your IT support and operations teams have richer contextual
@@ -36,72 +34,42 @@ import { FwbP } from 'flowbite-vue'
<fwb-p-example /> <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 ## Custom classes
Use `class` attribute to apply the tailwind classes. Use `class` attribute to apply the tailwind classes.
```vue ```vue
<template> <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"> <fwb-p class="text-green-600 dark:text-green-400 italic">
Deliver great service experiences fast - without the complexityof Deliver great service experiences fast - without the complexityof
traditional ITSM solutions. Accelerate critical development work, traditional ITSM solutions. Accelerate critical development work,

2
docs/components/typography/p/FwbPExample.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="vp-raw"> <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 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. have richer contextual information to rapidly respond to requests, incidents, and changes.
</fwb-p> </fwb-p>

26
docs/components/typography/p/FwbPExampleAlign.vue
View File

@@ -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>

37
docs/components/typography/p/FwbPExampleCustom.vue
View File

@@ -1,7 +1,40 @@
<template> <template>
<div class="vp-raw"> <div class="vp-raw">
<fwb-p class="text-green-800 dark:text-green-400 italic"> <fwb-p class="font-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. 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> </fwb-p>
</div> </div>
</template> </template>

17
docs/components/typography/p/FwbPExampleWeight.vue
View File

@@ -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>

2
docs/pages/getting-started.md
View File

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

64
src/components/Typography/FwbP.vue
View File

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