From 6f1c1d86816d42dc6ff49b11cc0446481fb1b2fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?O=C4=9Fuzhan=20G=C3=BC=C3=A7?=
 <58819819+ogzcode@users.noreply.github.com>
Date: Thu, 1 Aug 2024 09:38:11 +0300
Subject: [PATCH 1/9] chore: Update dropdown placement and alignment (#313)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: Update dropdown placement and alignment

* chore: Update dropdown placement and alignment

---------

Co-authored-by: Oğuzhan Güç <oguzhan.guc@ayssoft.com>
---
 docs/components/dropdown.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md
index 844a5c23..82df12bc 100644
--- a/docs/components/dropdown.md
+++ b/docs/components/dropdown.md
@@ -22,7 +22,7 @@ The dropdown component can be used to show a list of menu items when clicking on
 <fwb-dropdown-example-placement />
 ```vue
 <template>
-  <fwb-dropdown text="Bottom">
+  <fwb-dropdown placement="top" text="Top">
     <div class="w-52">
       <p class="p-2">
         Dropdown content line one
@@ -38,7 +38,7 @@ The dropdown component can be used to show a list of menu items when clicking on
       </p>
     </div>
   </fwb-dropdown>
-  <fwb-dropdown placement="top" text="Top">
+  <fwb-dropdown placement="right" text="Right">
     <div class="w-52">
       <p class="p-2">
         Dropdown content line one
@@ -54,7 +54,7 @@ The dropdown component can be used to show a list of menu items when clicking on
       </p>
     </div>
   </fwb-dropdown>
-  <fwb-dropdown placement="right" text="Right">
+  <fwb-dropdown text="Bottom">
     <div class="w-52">
       <p class="p-2">
         Dropdown content line one
@@ -100,7 +100,7 @@ The property controls how the dropdown is aligned with the trigger
 <fwb-dropdown-example-alignment />
 ```vue
 <template>
-  <fwb-dropdown text="Bottom" align-to-end>
+  <fwb-dropdown placement="top" text="Top" align-to-end>
     <div class="w-52">
       <p class="p-2">
         Dropdown content line one
@@ -116,7 +116,7 @@ The property controls how the dropdown is aligned with the trigger
       </p>
     </div>
   </fwb-dropdown>
-  <fwb-dropdown placement="top" text="Top" align-to-end>
+  <fwb-dropdown placement="right" text="Right" align-to-end>
     <div class="w-52">
       <p class="p-2">
         Dropdown content line one
@@ -132,7 +132,7 @@ The property controls how the dropdown is aligned with the trigger
       </p>
     </div>
   </fwb-dropdown>
-  <fwb-dropdown placement="right" text="Right" align-to-end>
+  <fwb-dropdown text="Bottom" align-to-end>
     <div class="w-52">
       <p class="p-2">
         Dropdown content line one

From 09d8a047eda0ee4ff1556602b167fc19b1538791 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?O=C4=9Fuzhan=20G=C3=BC=C3=A7?=
 <58819819+ogzcode@users.noreply.github.com>
Date: Thu, 1 Aug 2024 23:53:46 +0300
Subject: [PATCH 2/9] chore: Update select input styles (#309)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The `underlineSelectClasses` in the `useSelectClasses.ts` file has been updated to include a new `dark:text-gray-500` class. This change improves the styling of the select input in dark mode.

Co-authored-by: Oğuzhan Güç <oguzhan.guc@ayssoft.com>
---
 src/components/FwbSelect/composables/useSelectClasses.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FwbSelect/composables/useSelectClasses.ts b/src/components/FwbSelect/composables/useSelectClasses.ts
index c9766b8a..65643768 100644
--- a/src/components/FwbSelect/composables/useSelectClasses.ts
+++ b/src/components/FwbSelect/composables/useSelectClasses.ts
@@ -12,7 +12,7 @@ const baseLabelClasses = 'block mb-2 text-sm font-medium'
 // INPUT
 const defaultSelectClasses = 'w-full text-gray-900 bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500'
 const disabledSelectClasses = 'cursor-not-allowed bg-gray-100'
-const underlineSelectClasses = 'bg-transparent dark:bg-transparent border-b-2 border-gray-200 appearance-none dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer'
+const underlineSelectClasses = 'bg-transparent dark:bg-transparent dark:text-gray-500 border-b-2 border-gray-200 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer'
 const selectSizeClasses: Record<InputSize, string> = {
   lg: 'p-4',
   md: 'p-2.5 text-sm',

From a39cad36522fbbcded2d85991318cd70f943a9fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?O=C4=9Fuzhan=20G=C3=BC=C3=A7?=
 <58819819+ogzcode@users.noreply.github.com>
Date: Fri, 2 Aug 2024 00:01:36 +0300
Subject: [PATCH 3/9] Missing disabled style and doc code for textarea (#307)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: Add minlength and maxlength attributes to textarea component

* chore: Update textarea default classes to include disabled styles

---------

Co-authored-by: Oğuzhan Güç <oguzhan.guc@ayssoft.com>
---
 docs/components/textarea.md                              | 9 ++++++++-
 .../FwbTextarea/composables/useTextareaClasses.ts        | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

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('')
 </script>
 ```
 
-## Disabled / Readonly Textarea
+## Disabled / Readonly Textarea / Max-Min Length
 
 <fwb-textarea-example-disabled />
 ```vue
 <template>
   <div>
+    <fwb-textarea
+      v-model="message"
+      label="Textarea with minlength 10 and maxlength 20"
+      minlength="10"
+      maxlength="20"
+      required
+    />
     <fwb-textarea
       v-model="message"
       label="Your message"
diff --git a/src/components/FwbTextarea/composables/useTextareaClasses.ts b/src/components/FwbTextarea/composables/useTextareaClasses.ts
index 344913a7..700460de 100644
--- a/src/components/FwbTextarea/composables/useTextareaClasses.ts
+++ b/src/components/FwbTextarea/composables/useTextareaClasses.ts
@@ -2,7 +2,7 @@ import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
 import { computed } from 'vue'
 
 const textareaWrapperClasses = 'block w-full mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600'
-const textareaDefaultClasses = 'block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-200 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
+const textareaDefaultClasses = 'block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-200 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 disabled:cursor-not-allowed disabled:opacity-50'
 const textareaLabelClasses = 'block mb-2 text-sm font-medium text-gray-900 dark:text-white'
 const textareaFooterClasses = 'block py-2 px-3 border-gray-200 dark:border-gray-600'
 

From 3ba50d74ef9bc5d68a4e4d6cee03e2ac5add992d Mon Sep 17 00:00:00 2001
From: Bart Duisters <43420049+bartduisters@users.noreply.github.com>
Date: Thu, 1 Aug 2024 23:26:31 +0200
Subject: [PATCH 4/9] Fix badge colors (#302)

---
 src/components/FwbBadge/composables/useBadgeClasses.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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<BadgeType, string> = {
   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',

From 37954f96d9e5a39b139d627f9d568e3403b9c05f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?O=C4=9Fuzhan=20G=C3=BC=C3=A7?=
 <58819819+ogzcode@users.noreply.github.com>
Date: Sat, 3 Aug 2024 01:33:38 +0300
Subject: [PATCH 5/9] Blockquote component (#311)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: Add FwbBlockquote component

This commit adds a new component called FwbBlockquote. It includes the template, script, and styles for rendering a blockquote element with customizable size, alignment, type, and citation. The component also utilizes the useBlockquoteClasses composable to generate the appropriate CSS classes based on the props.

Note: This commit message follows the established convention of starting with a type (feat) followed by a concise description of the changes.

* feat: Sample components for doc page

* feat: Blockquote doc page added

* fix: Update FwbBlockquote component

This commit updates the FwbBlockquote component in the typography/blockquote directory. The changes include:
- Fixing a typo in the component name from "FwbBlockquote" to "fwb-blockquote" to adhere to the naming convention.
- Adding missing spaces in the blockquote text to improve readability.
- Adding multiple blockquote examples with different sizes and alignments to the documentation page.

Note: This commit message follows the established convention of starting with a type (feat) followed by a concise description of the changes.

* fix: Update FwbBlockquote component name and fix typo

This commit updates the FwbBlockquote component in the typography/blockquote directory. The changes include:
- Fixing a typo in the component name from "FwbBlockquote" to "fwb-blockquote" to adhere to the naming convention.

Note: This commit message follows the established convention of starting with a type (chore) followed by a concise description of the changes.

* refactor: Remove deprecated FwbBlockquote component and related files

This commit removes the deprecated FwbBlockquote component and its related files:
- src/components/FwbBlockquote/FwbBlockquote.vue
- src/components/FwbBlockquote/composables/useBlockquoteClasses.ts
- src/components/FwbBlockquote/types.ts

The functionality of the FwbBlockquote component has been replaced by the new FwbBlockquote component located at src/components/Typography/FwbBlockquote.vue.

Note: This commit message follows the established convention of starting with a type (refactor) followed by a concise description of the changes.

* refactor: Apply lint rules to FwbBlockquote component and related files.

* fix: lint added

* refactor: Apply lint rules

---------

Co-authored-by: Oğuzhan Güç <oguzhan.guc@ayssoft.com>
---
 docs/.vitepress/config.mts                    |  1 +
 docs/components/blockquote.md                 | 73 +++++++++++++++++++
 .../blockquote/FwbBlockquoteAlignExample.vue  | 21 ++++++
 .../blockquote/FwbBlockquoteExample.vue       | 12 +++
 .../blockquote/FwbBlockquoteSizeExample.vue   | 18 +++++
 .../blockquote/FwbBlockquoteSolidExample.vue  | 12 +++
 src/components/Typography/FwbBlockquote.vue   | 34 +++++++++
 src/index.ts                                  |  1 +
 8 files changed, 172 insertions(+)
 create mode 100644 docs/components/blockquote.md
 create mode 100644 docs/components/typography/blockquote/FwbBlockquoteAlignExample.vue
 create mode 100644 docs/components/typography/blockquote/FwbBlockquoteExample.vue
 create mode 100644 docs/components/typography/blockquote/FwbBlockquoteSizeExample.vue
 create mode 100644 docs/components/typography/blockquote/FwbBlockquoteSolidExample.vue
 create mode 100644 src/components/Typography/FwbBlockquote.vue

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index ccd469fc..bde3bc2b 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -85,6 +85,7 @@ function getUtils() {
 
 function getTypography() {
   return [
+    { text: "Blockquote", link: '/components/blockquote' },
     { text: 'Heading', link: '/components/heading' },
     { text: 'Paragraph', link: '/components/paragraph' },
     { text: 'Image', link: '/components/image' },
diff --git a/docs/components/blockquote.md b/docs/components/blockquote.md
new file mode 100644
index 00000000..dbccdc3a
--- /dev/null
+++ b/docs/components/blockquote.md
@@ -0,0 +1,73 @@
+<script setup>
+import FwbBlockquoteExample from './typography/blockquote/FwbBlockquoteExample.vue'
+import FwbBlockquoteSolidExample from './typography/blockquote/FwbBlockquoteSolidExample.vue'
+import FwbBlockquoteAlignExample from './typography/blockquote/FwbBlockquoteAlignExample.vue'
+import FwbBlockquoteSizeExample from './typography/blockquote/FwbBlockquoteSizeExample.vue'
+</script>
+
+# Vue Blockquote - Flowbite
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/typography/blockquote/](https://flowbite.com/docs/typography/blockquote/)
+:::
+
+## Get started with a collection of blockquote components when quoting external sources such as quotes inside an article, user reviews, and testimonials based on multiple examples of layouts, styles, and contexts.
+
+## Default blockquote
+
+Use this example to quote an external source inside a `<fwb-blockquote>` component.
+
+<fwb-blockquote-example/>
+
+```vue
+<fwb-blockquote>
+    "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. 
+    Perfect choice for your next SaaS application."
+</fwb-blockquote>
+```
+
+## Solid background
+This example can be used as an alternative style to the default style by applying a solid background color with `type="solid"`.
+
+<fwb-blockquote-solid-example />
+
+```vue
+<fwb-blockquote type="solid">
+    "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+</fwb-blockquote>
+```
+
+## Alignment
+
+Choose from the following examples the blockquote text alignment from starting from left, center to right based on the utility classes from Tailwind CSS.
+
+<fwb-blockquote-align-example />
+```vue
+<fwb-blockquote class="text-left">
+    "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+</fwb-blockquote>
+<fwb-blockquote class="text-center">
+    "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+</fwb-blockquote>
+<fwb-blockquote class="text-right">
+    "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+</fwb-blockquote>
+```
+
+## Size
+
+Choose from one of the multiple sizes for the default blockquote component based on the surrounding elements and sizes.
+
+<fwb-blockquote-size-example />
+```vue
+<fwb-blockquote class="text-lg">
+    "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+</fwb-blockquote>
+<fwb-blockquote class="text-xl">
+    "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+</fwb-blockquote>
+<fwb-blockquote class="text-2xl">
+    "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+</fwb-blockquote>
+```
\ No newline at end of file
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 @@
+<template>
+<div class="vp-raw flex flex-col gap-6">
+    <fwb-blockquote class="text-left">
+        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS
+        application."
+    </fwb-blockquote>
+    <fwb-blockquote class="text-center">
+        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS
+        application."
+    </fwb-blockquote>
+    <fwb-blockquote class="text-right">
+        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS
+        application."
+    </fwb-blockquote>
+</div>
+</template>
+
+<script setup>
+import { FwbBlockquote } from '../../../../src/index'
+
+</script>
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 @@
+<template>
+<div class="vp-raw">
+    <fwb-blockquote>
+        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+    </fwb-blockquote>
+</div>
+</template>
+
+<script setup>
+import { FwbBlockquote } from '../../../../src/index'
+
+</script>
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 @@
+<template>
+<div class="vp-raw flex flex-col gap-6">
+    <fwb-blockquote class="text-lg">
+        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+    </fwb-blockquote>
+    <fwb-blockquote class="text-xl">
+        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+    </fwb-blockquote>
+    <fwb-blockquote class="text-2xl">
+        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+    </fwb-blockquote>
+</div>
+</template>
+
+<script setup>
+import { FwbBlockquote } from '../../../../src/index'
+
+</script>
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 @@
+<template>
+<div class="vp-raw flex">
+    <fwb-blockquote type="solid">
+        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+    </fwb-blockquote>
+</div>
+</template>
+
+<script setup>
+import { FwbBlockquote } from '../../../../src/index'
+
+</script>
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 @@
+<template>
+    <blockquote :class="blockquoteClasses" :cite="cite">
+        <slot></slot>
+    </blockquote>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useMergeClasses } from '@/composables/useMergeClasses'
+
+type BlockquoteType = 'default' | 'solid'
+
+interface BlockquoteProps {
+  type?: BlockquoteType;
+  cite?: string;
+  class?: string;
+}
+
+const props = withDefaults(defineProps<BlockquoteProps>(), {
+  type: 'default',
+  cite: '',
+  class: '',
+})
+
+const defaultBlockquoteClasses = 'font-semibold text-lg italic text-gray-900 dark:text-white'
+const solidBlockquoteClasses = 'bg-gray-100 dark:bg-gray-800 border-l-4 border-gray-300 p-4 dark:border-gray-500'
+
+const blockquoteClasses = computed(() => useMergeClasses([
+  defaultBlockquoteClasses,
+  props.type === 'solid' ? solidBlockquoteClasses : '',
+  props.class,
+]))
+
+</script>
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'

From afaea01bcaa2b45f563702b39c5f75cc74d56be8 Mon Sep 17 00:00:00 2001
From: Cesar Navarro <cnavarro@pernix-solutions.com>
Date: Fri, 2 Aug 2024 17:28:22 -0600
Subject: [PATCH 6/9] fix: Fixed issue with AccordionPanel onUnmounted callback
 (#303)

---
 src/components/FwbAccordion/FwbAccordionPanel.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

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 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { nanoid } from 'nanoid'
 import { useAccordionState } from './composables/useAccordionState'
 
@@ -33,9 +33,4 @@ onMounted(() => {
     isVisible: (accordionState.value.openFirstItem && panelIndex === 0) ?? false,
   }
 })
-onUnmounted(() => {
-  if (accordionState.value.panels[panelId]) {
-    delete accordionState.value.panels[panelId]
-  }
-})
 </script>

From 4ebd52ded90ab2148ce0b6ac41f44966985e5a63 Mon Sep 17 00:00:00 2001
From: Steve Axtmann <steve.axtmann+github@gmail.com>
Date: Sat, 3 Aug 2024 01:54:36 +0200
Subject: [PATCH 7/9] feat(dropdown): add show/hide events (#301)

* feat(dropdown): add show/hide events

* style(dropdown): fixed styling
---
 docs/components/dropdown.md                | 23 ++++++++++++++++++++++
 src/components/FwbDropdown/FwbDropdown.vue | 18 ++++++++++++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md
index 82df12bc..b6ccdeb7 100644
--- a/docs/components/dropdown.md
+++ b/docs/components/dropdown.md
@@ -257,3 +257,26 @@ import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
 import { FwbDropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
 </script>
 ```
+
+## 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/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 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, toRef } from 'vue'
+import { computed, ref, toRef, watch } from 'vue'
 import { onClickOutside } from '@vueuse/core'
 import type { DropdownPlacement } from './types'
 import FwbButton from '@/components/FwbButton/FwbButton.vue'
@@ -74,6 +74,22 @@ const props = withDefaults(
   },
 )
 
+const emit = defineEmits<{
+  'show': []
+  'hide': []
+}>()
+
+watch(
+  visible,
+  (isVisible: boolean) => {
+    if (isVisible) {
+      emit('show')
+    } else {
+      emit('hide')
+    }
+  },
+)
+
 const placementTransitionMap: Record<DropdownPlacement, string> = {
   bottom: 'to-bottom',
   left: 'to-left',

From 0cc202f2b06749ebeabd35e62f2072f3da7e1516 Mon Sep 17 00:00:00 2001
From: Andrey Akulov <andreyjamer@users.noreply.github.com>
Date: Sat, 3 Aug 2024 05:07:02 +0500
Subject: [PATCH 8/9] feat: Toggle label position (#296)

* Fixed sizes for toggle components

* Implemented option to swap the order of toggle and the label for Toggle component
---
 docs/components/toggle.md                     | 15 +++++++++++
 .../toggle/examples/FwbToggleExampleOrder.vue | 13 +++++++++
 src/components/FwbToggle/FwbToggle.vue        |  8 ++++--
 .../FwbToggle/composables/useToggleClasses.ts | 27 +++++++++++++++----
 4 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 docs/components/toggle/examples/FwbToggleExampleOrder.vue

diff --git a/docs/components/toggle.md b/docs/components/toggle.md
index dc31732a..5760ede2 100644
--- a/docs/components/toggle.md
+++ b/docs/components/toggle.md
@@ -4,6 +4,7 @@
   import FwbToggleExampleColors from './toggle/examples/FwbToggleExampleColors.vue'
   import FwbToggleExampleDisabled from './toggle/examples/FwbToggleExampleDisabled.vue'
   import FwbToggleExampleSize from './toggle/examples/FwbToggleExampleSize.vue'
+  import FwbToggleExampleOrder from './toggle/examples/FwbToggleExampleOrder.vue'
 </script>
 
 # Vue Toggle - Flowbite
@@ -94,3 +95,17 @@ const toggle = ref(false)
 import { FwbToggle } from 'flowbite-vue'
 </script>
 ```
+
+## Label position
+
+<fwb-toggle-example-order />
+```vue
+<template>
+  <fwb-toggle label="Toggle me" />
+  <fwb-toggle label="Toggle me" reverse />
+</template>
+
+<script setup>
+import { FwbToggle } from 'flowbite-vue'
+</script>
+```
\ 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 @@
+<template>
+  <div class="vp-raw grid gap-3">
+    <fwb-toggle label="Toggle me" />
+    <fwb-toggle
+      label="Toggle me"
+      reverse
+    />
+  </div>
+</template>
+
+<script setup>
+import { FwbToggle } from '../../../../src/index'
+</script>
diff --git a/src/components/FwbToggle/FwbToggle.vue b/src/components/FwbToggle/FwbToggle.vue
index 64e666d7..ee542a99 100644
--- a/src/components/FwbToggle/FwbToggle.vue
+++ b/src/components/FwbToggle/FwbToggle.vue
@@ -1,5 +1,5 @@
 <template>
-  <label :class="labelClasses">
+  <label :class="[labelClasses, labelOrder]">
     <input
       v-model="model"
       :disabled="disabled"
@@ -7,7 +7,7 @@
       type="checkbox"
     >
     <span :class="[toggleClasses, toggleSize, toggleColor]" />
-    <span :class="toggleBallClasses">{{ label }}</span>
+    <span :class="[toggleBallClasses, toggleBallOrder]">{{ label }}</span>
   </label>
 </template>
 
@@ -22,6 +22,7 @@ interface ToggleProps {
   label?: string;
   modelValue?: boolean;
   size?: InputSize;
+  reverse?: boolean;
 }
 
 const props = withDefaults(defineProps<ToggleProps>(), {
@@ -30,6 +31,7 @@ const props = withDefaults(defineProps<ToggleProps>(), {
   label: '',
   modelValue: false,
   size: 'md',
+  reverse: false,
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -48,5 +50,7 @@ const {
   toggleClasses,
   toggleColor,
   toggleBallClasses,
+  toggleBallOrder,
+  labelOrder,
 } = useToggleClasses(toRefs(props))
 </script>
diff --git a/src/components/FwbToggle/composables/useToggleClasses.ts b/src/components/FwbToggle/composables/useToggleClasses.ts
index 4bf91b3f..c063b841 100644
--- a/src/components/FwbToggle/composables/useToggleClasses.ts
+++ b/src/components/FwbToggle/composables/useToggleClasses.ts
@@ -3,13 +3,25 @@ import type { InputSize } from '@/components/FwbInput/types'
 
 // Toggle Background
 const defaultLabelClasses = 'w-fit relative inline-flex items-center cursor-pointer'
-const defaultToggleBackgroundClasses = '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 peer-checked:after:border-white after:content-[""] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 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 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 = 'text-sm font-medium text-gray-900 dark:text-gray-300'
+
+const labelOrderClasses: Record<string, string> = {
+  direct: '',
+  reverse: 'flex-row-reverse',
+}
+
+const toggleBallOrderClasses: Record<string, string> = {
+  direct: 'ms-3',
+  reverse: 'me-3',
+}
+
 const toggleSizeClasses: Record<InputSize, string> = {
-  lg: 'w-14 h-7 after:top-0.5 after:left-[4px] after:h-6 after:w-6',
-  md: 'w-11 h-6 after:top-[2px] after:left-[2px] after:h-5 after:w-5',
-  sm: 'w-9 h-5 after:top-[2px] after:left-[2px] after:h-4 after:w-4',
+  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',
+  sm: 'w-9 h-5 after:top-[2px] after:start-[2px] after:h-4 after:w-4',
 }
+
 const toggleColorClasses: Record<string, string> = {
   red: 'peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600',
   green: 'peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600',
@@ -22,6 +34,7 @@ const toggleColorClasses: Record<string, string> = {
 export type UseToggleClassesProps = {
   size: Ref<InputSize>
   color: Ref<string>
+  reverse: Ref<boolean>
 }
 
 export function useToggleClasses (props: UseToggleClassesProps) {
@@ -30,6 +43,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 +52,7 @@ export function useToggleClasses (props: UseToggleClassesProps) {
     toggleClasses,
     toggleColor,
     toggleBallClasses,
+    toggleBallOrder,
+    labelOrder,
   }
 }

From bce8477853d987d478a4eac4392c27a8881e0d54 Mon Sep 17 00:00:00 2001
From: Gleb Dmitriev <50412253+woodrunsdeep@users.noreply.github.com>
Date: Wed, 7 Aug 2024 03:07:00 +0400
Subject: [PATCH 9/9] feat: add positioning options to FwbModal (#293)

* fix: correct close button alignment in rtl mode

* feat: add positioning options to FwbModal

* docs: add position example for FwbModal

* fix: change position types to logical ones

* fix: annotate objects
---
 docs/components/modal.md                      | 28 +++++++++
 .../modal/examples/FwbModalExample.vue        |  5 +-
 .../examples/FwbModalExamplePosition.vue      | 62 +++++++++++++++++++
 src/components/FwbModal/FwbModal.vue          | 26 ++++++--
 src/components/FwbModal/types.ts              |  2 +-
 5 files changed, 115 insertions(+), 8 deletions(-)
 create mode 100644 docs/components/modal/examples/FwbModalExamplePosition.vue

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'
 </script>
 # Vue Modal - Flowbite
 
@@ -91,6 +92,33 @@ import { FwbModal } from 'flowbite-vue'
 </script>
 ```
 
+## 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`
+
+<fwb-modal-example-position />
+```vue
+<template>
+  <fwb-modal position="top-start" />
+  <fwb-modal position="top-center" />
+  <fwb-modal position="top-end" />
+  <fwb-modal position="center-start" />
+  <fwb-modal position="center" />
+  <fwb-modal position="center-end" />
+  <fwb-modal position="bottom-start" />
+  <fwb-modal position="bottom-center" />
+  <fwb-modal position="bottom-end" />
+</template>
+
+<script setup>
+import { FwbModal } from 'flowbite-vue'
+</script>
+```
+
 ## 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"
     >
       <template #header>
@@ -45,13 +46,14 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { FwbButton, FwbModal } from '../../../../src/index'
-import { type ModalSize } from '../../../../src/components/FwbModal/types'
+import { type ModalPosition, type ModalSize } from '../../../../src/components/FwbModal/types'
 
 interface ModalProps {
   size?: ModalSize,
   notEscapable?: boolean,
   persistent?: boolean,
   triggerText?: string
+  position?: ModalPosition
 }
 
 withDefaults(defineProps<ModalProps>(), {
@@ -59,6 +61,7 @@ withDefaults(defineProps<ModalProps>(), {
   notEscapable: false,
   persistent: false,
   triggerText: 'Open Modal',
+  position: 'center',
 })
 
 const isShowModal = ref(false)
diff --git a/docs/components/modal/examples/FwbModalExamplePosition.vue b/docs/components/modal/examples/FwbModalExamplePosition.vue
new file mode 100644
index 00000000..654829ec
--- /dev/null
+++ b/docs/components/modal/examples/FwbModalExamplePosition.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="flex flex-wrap justify-start gap-2 vp-raw">
+    <span>
+      <fwb-modal-example
+        position="top-start"
+        trigger-text="Top Start"
+      />
+    </span>
+    <span>
+      <fwb-modal-example
+        position="top-center"
+        trigger-text="Top Center"
+      />
+    </span>
+    <span>
+      <fwb-modal-example
+        position="top-end"
+        trigger-text="Top End"
+      />
+    </span>
+    <span>
+      <fwb-modal-example
+        position="center-start"
+        trigger-text="Center Start"
+      />
+    </span>
+    <span>
+      <fwb-modal-example
+        position="center"
+        trigger-text="Center"
+      />
+    </span>
+    <span>
+      <fwb-modal-example
+        position="center-end"
+        trigger-text="Center End"
+      />
+    </span>
+    <span>
+      <fwb-modal-example
+        position="bottom-start"
+        trigger-text="Bottom Start"
+      />
+    </span>
+    <span>
+      <fwb-modal-example
+        position="bottom-center"
+        trigger-text="Bottom Center"
+      />
+    </span>
+    <span>
+      <fwb-modal-example
+        position="bottom-end"
+        trigger-text="Bottom End"
+      />
+    </span>
+  </div>
+</template>
+
+<script setup>
+import FwbModalExample from './FwbModalExample.vue'
+</script>
diff --git a/src/components/FwbModal/FwbModal.vue b/src/components/FwbModal/FwbModal.vue
index 6a879e38..7f84d6c8 100644
--- a/src/components/FwbModal/FwbModal.vue
+++ b/src/components/FwbModal/FwbModal.vue
@@ -3,14 +3,14 @@
     <div class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40" />
     <div
       ref="modalRef"
-      class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center flex"
+      class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full grid"
       tabindex="0"
       @click.self="clickOutside"
       @keyup.esc="closeWithEsc"
     >
       <div
-        :class="`${modalSizeClasses[size]}`"
-        class="relative p-4 w-full h-full"
+        :class="`${modalSizeClasses[size]} ${modalPositionClasses[position]}`"
+        class="relative p-4 w-full"
       >
         <!-- Modal content -->
         <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
@@ -23,7 +23,7 @@
             <button
               v-if="!persistent"
               aria-label="close"
-              class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+              class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ms-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
               type="button"
               @click="closeModal"
             >
@@ -63,22 +63,24 @@
 
 <script lang="ts" setup>
 import { onMounted, ref, type Ref } from 'vue'
-import type { ModalSize } from './types'
+import type { ModalPosition, ModalSize } from './types'
 
 interface ModalProps {
   notEscapable?: boolean,
   persistent?: boolean
   size?: ModalSize,
+  position?: ModalPosition
 }
 
 const props = withDefaults(defineProps<ModalProps>(), {
   notEscapable: false,
   persistent: false,
   size: '2xl',
+  position: 'center',
 })
 
 const emit = defineEmits(['close', 'click:outside'])
-const modalSizeClasses = {
+const modalSizeClasses: Record<ModalSize, string> = {
   xs: 'max-w-xs',
   sm: 'max-w-sm',
   md: 'max-w-md',
@@ -92,6 +94,18 @@ const modalSizeClasses = {
   '7xl': 'max-w-7xl',
 }
 
+const modalPositionClasses: Record<ModalPosition, string> = {
+  'top-start': 'self-start justify-self-start',
+  'top-center': 'self-start justify-self-center',
+  'top-end': 'self-start justify-self-end',
+  'center-start': 'self-center justify-self-start',
+  center: 'self-center justify-self-center',
+  'center-end': 'self-center justify-self-end',
+  'bottom-start': 'self-end justify-self-start',
+  'bottom-center': 'self-end justify-self-center',
+  'bottom-end': 'self-end justify-self-end',
+}
+
 function closeModal () {
   emit('close')
 }
diff --git a/src/components/FwbModal/types.ts b/src/components/FwbModal/types.ts
index 0610eb66..d6b6fb98 100644
--- a/src/components/FwbModal/types.ts
+++ b/src/components/FwbModal/types.ts
@@ -1,2 +1,2 @@
-export type ModalPosition = 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right';
+export type ModalPosition = 'bottom-start' | 'bottom-end' | 'bottom-center' | 'top-start' | 'top-center' | 'top-end' | 'center-start' | 'center' | 'center-end';
 export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl';