Dropdown content line one
@@ -100,7 +100,7 @@ The property controls how the dropdown is aligned with the trigger
```vue
-
+
Dropdown content line one
@@ -116,7 +116,7 @@ The property controls how the dropdown is aligned with the trigger
-
+
Dropdown content line one
@@ -132,7 +132,7 @@ The property controls how the dropdown is aligned with the trigger
-
+
Dropdown content line one
@@ -257,3 +257,26 @@ import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
import { FwbDropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
```
+
+## API
+
+### Props
+| Name | Values | Default |
+|----------|--------|---------|
+| placement | `DropdownPlacement` | `'bottom'` |
+| text | `string` | `''` |
+| transition | `string` | `''` |
+| closeInside | `boolean` | `false` |
+| alignToEnd | `boolean` | `false` |
+
+### Events
+| Name | Description |
+|------|------------------------|
+| show | the dropdown is opened |
+| hide | the dropdown is closed |
+
+### Slots
+| Name | Description |
+|------------|-------------------|
+| default | dropdown content |
+| suffix | button suffix |
diff --git a/docs/components/modal.md b/docs/components/modal.md
index 7eaad07d..b78884d3 100644
--- a/docs/components/modal.md
+++ b/docs/components/modal.md
@@ -3,6 +3,7 @@ import FwbModalExample from './modal/examples/FwbModalExample.vue'
import FwbModalExampleSize from './modal/examples/FwbModalExampleSize.vue'
import FwbModalExampleEscapable from './modal/examples/FwbModalExampleEscapable.vue'
import FwbModalExamplePersistent from './modal/examples/FwbModalExamplePersistent.vue'
+import FwbModalExamplePosition from './modal/examples/FwbModalExamplePosition.vue'
# Vue Modal - Flowbite
@@ -91,6 +92,33 @@ import { FwbModal } from 'flowbite-vue'
```
+## Position
+
+The `position` prop allows you to control the placement of the modal on the screen, taking into account RTL (Right-to-Left) mode. You can choose from the following options:
+
+`top-start`, `top-center`, `top-end`, `center-start`, `center`, `center-end`, `bottom-start`, `bottom-center`, `bottom-end`
+
+The default value is: `center`
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
## Escapable
The escapable property is true by default to improve user experience and accessibility.
diff --git a/docs/components/modal/examples/FwbModalExample.vue b/docs/components/modal/examples/FwbModalExample.vue
index 3bfba80b..383c5688 100644
--- a/docs/components/modal/examples/FwbModalExample.vue
+++ b/docs/components/modal/examples/FwbModalExample.vue
@@ -8,6 +8,7 @@
:not-escapable="notEscapable"
:persistent="persistent"
:size="size"
+ :position="position"
@close="closeModal"
>
@@ -45,13 +46,14 @@
diff --git a/docs/components/textarea.md b/docs/components/textarea.md
index 92dbd6e1..72e36341 100644
--- a/docs/components/textarea.md
+++ b/docs/components/textarea.md
@@ -96,12 +96,19 @@ const message = ref('')
```
-## Disabled / Readonly Textarea
+## Disabled / Readonly Textarea / Max-Min Length
```vue
+
# Vue Toggle - Flowbite
@@ -94,3 +95,17 @@ const toggle = ref(false)
import { FwbToggle } from 'flowbite-vue'
```
+
+## Label position
+
+
+```vue
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/docs/components/toggle/examples/FwbToggleExampleOrder.vue b/docs/components/toggle/examples/FwbToggleExampleOrder.vue
new file mode 100644
index 00000000..938b74ca
--- /dev/null
+++ b/docs/components/toggle/examples/FwbToggleExampleOrder.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
diff --git a/docs/components/typography/blockquote/FwbBlockquoteAlignExample.vue b/docs/components/typography/blockquote/FwbBlockquoteAlignExample.vue
new file mode 100644
index 00000000..cc64af14
--- /dev/null
+++ b/docs/components/typography/blockquote/FwbBlockquoteAlignExample.vue
@@ -0,0 +1,21 @@
+
+
+
+ "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS
+ application."
+
+
+ "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS
+ application."
+
+
+ "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS
+ application."
+
+
+
+
+
diff --git a/docs/components/typography/blockquote/FwbBlockquoteExample.vue b/docs/components/typography/blockquote/FwbBlockquoteExample.vue
new file mode 100644
index 00000000..cff5cec9
--- /dev/null
+++ b/docs/components/typography/blockquote/FwbBlockquoteExample.vue
@@ -0,0 +1,12 @@
+
+
+
+ "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+
+
+
+
+
diff --git a/docs/components/typography/blockquote/FwbBlockquoteSizeExample.vue b/docs/components/typography/blockquote/FwbBlockquoteSizeExample.vue
new file mode 100644
index 00000000..901ff387
--- /dev/null
+++ b/docs/components/typography/blockquote/FwbBlockquoteSizeExample.vue
@@ -0,0 +1,18 @@
+
+
+
+ "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+
+
+ "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+
+
+ "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+
+
+
+
+
diff --git a/docs/components/typography/blockquote/FwbBlockquoteSolidExample.vue b/docs/components/typography/blockquote/FwbBlockquoteSolidExample.vue
new file mode 100644
index 00000000..9a061d1f
--- /dev/null
+++ b/docs/components/typography/blockquote/FwbBlockquoteSolidExample.vue
@@ -0,0 +1,12 @@
+
+
+
+ "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+
+
+
+
+
diff --git a/src/components/FwbAccordion/FwbAccordionPanel.vue b/src/components/FwbAccordion/FwbAccordionPanel.vue
index 9cc4ab2c..9827a9b6 100644
--- a/src/components/FwbAccordion/FwbAccordionPanel.vue
+++ b/src/components/FwbAccordion/FwbAccordionPanel.vue
@@ -8,7 +8,7 @@
diff --git a/src/components/FwbBadge/composables/useBadgeClasses.ts b/src/components/FwbBadge/composables/useBadgeClasses.ts
index 23d9f4ee..a6fba5bd 100644
--- a/src/components/FwbBadge/composables/useBadgeClasses.ts
+++ b/src/components/FwbBadge/composables/useBadgeClasses.ts
@@ -8,7 +8,7 @@ const onlyIconClasses = 'p-1 rounded-full mr-2'
const badgeTextClasses: Record = {
default: 'text-blue-800 dark:text-blue-800',
- dark: 'text-gray-800 dark:bg-gray-700',
+ dark: 'text-gray-800 dark:text-gray-300',
red: 'text-red-800 dark:text-red-900',
green: 'text-green-800 dark:text-green-900',
yellow: 'text-yellow-800 dark:text-yellow-900',
diff --git a/src/components/FwbDropdown/FwbDropdown.vue b/src/components/FwbDropdown/FwbDropdown.vue
index 93b73d67..8e3a2e49 100644
--- a/src/components/FwbDropdown/FwbDropdown.vue
+++ b/src/components/FwbDropdown/FwbDropdown.vue
@@ -44,7 +44,7 @@
diff --git a/src/components/FwbToggle/composables/useToggleClasses.ts b/src/components/FwbToggle/composables/useToggleClasses.ts
index 7ca92c28..a014c116 100644
--- a/src/components/FwbToggle/composables/useToggleClasses.ts
+++ b/src/components/FwbToggle/composables/useToggleClasses.ts
@@ -1,10 +1,17 @@
import { computed, type Ref } from 'vue'
import type { InputSize } from '@/components/FwbInput/types'
-// Toggle Background
const defaultLabelClasses = 'w-fit relative inline-flex items-center cursor-pointer'
const defaultToggleBackgroundClasses = 'relative bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[""] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:border-gray-600 peer-checked:bg-blue-600'
-const defaultToggleBallClasses = 'ml-3 text-sm font-medium text-gray-900 dark:text-gray-300'
+const defaultToggleBallClasses = 'text-sm font-medium text-gray-900 dark:text-gray-300'
+const labelOrderClasses: Record = {
+ direct: '',
+ reverse: 'flex-row-reverse',
+}
+const toggleBallOrderClasses: Record = {
+ direct: 'ms-3',
+ reverse: 'me-3',
+}
const toggleSizeClasses: Record = {
lg: 'w-14 h-7 after:top-0.5 after:start-[4px] after:h-6 after:w-6',
md: 'w-11 h-6 after:top-[2px] after:start-[2px] after:h-5 after:w-5',
@@ -22,6 +29,7 @@ const toggleColorClasses: Record = {
export type UseToggleClassesProps = {
size: Ref
color: Ref
+ reverse: Ref
}
export function useToggleClasses (props: UseToggleClassesProps) {
@@ -30,6 +38,8 @@ export function useToggleClasses (props: UseToggleClassesProps) {
const toggleSize = computed(() => toggleSizeClasses[props.size.value])
const toggleColor = computed(() => toggleColorClasses[props.color.value])
const toggleBallClasses = computed(() => defaultToggleBallClasses)
+ const toggleBallOrder = computed(() => toggleBallOrderClasses[props.reverse.value ? 'reverse' : 'direct'])
+ const labelOrder = computed(() => labelOrderClasses[props.reverse.value ? 'reverse' : 'direct'])
return {
labelClasses,
@@ -37,5 +47,7 @@ export function useToggleClasses (props: UseToggleClassesProps) {
toggleClasses,
toggleColor,
toggleBallClasses,
+ toggleBallOrder,
+ labelOrder,
}
}
diff --git a/src/components/Typography/FwbBlockquote.vue b/src/components/Typography/FwbBlockquote.vue
new file mode 100644
index 00000000..6b482159
--- /dev/null
+++ b/src/components/Typography/FwbBlockquote.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
diff --git a/src/index.ts b/src/index.ts
index 994321a8..92134782 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -72,6 +72,7 @@ export { default as FwbA } from './components/Typography/FwbA.vue'
export { default as FwbHeading } from './components/Typography/FwbHeading.vue'
export { default as FwbImg } from './components/Typography/FwbImg.vue'
export { default as FwbP } from './components/Typography/FwbP.vue'
+export { default as FwbBlockquote } from './components/Typography/FwbBlockquote.vue'
// utilities
export { default as FlowbiteThemable } from './components/utils/FlowbiteThemable/FlowbiteThemable.vue'