Merge branch 'main' into toggle-size-fix

themesberg · Aug 6, 2024 · 2b7576c · 2b7576c
2 parents 1851aee + bce8477
commit 2b7576c
Show file tree

Hide file tree

Showing 24 changed files with 393 additions and 29 deletions.
diff --git 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
@@ -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>
+```
diff --git 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
@@ -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/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
@@ -8,6 +8,7 @@
       :not-escapable="notEscapable"
       :persistent="persistent"
       :size="size"
+      :position="position"
       @close="closeModal"
     >
       <template #header>
@@ -45,20 +46,22 @@
 <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>(), {
   size: '2xl',
   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
@@ -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/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/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>
+```
diff --git a/docs/components/toggle/examples/FwbToggleExampleOrder.vue 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/docs/components/typography/blockquote/FwbBlockquoteAlignExample.vue 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
@@ -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>