Merge pull request #907 from themesberg/datepicker-instance

Datepicker instance

README.md

@@ -94,13 +94,13 @@ The quickest way to get started working with Flowbite is to simply include the C
 Require the following minified stylesheet inside the `head` tag:
 
 ```html
-<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet" />
+<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.4.0/flowbite.min.css" rel="stylesheet" />
 ```
 
 And include the following javascript file before the end of the `body` tag:
 
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.4.0/flowbite.min.js"></script>
 ```
 
 ### Bundled JavaScript
@@ -437,7 +437,7 @@ Flowbite is an open source collection of UI components built with the utility cl
   </a>
  </td>
  <td width="33.3333%">
-  <a href="https://flowbite.com/docs/plugins/datepicker/">
+  <a href="https://flowbite.com/docs/components/datepicker/">
   <img alt="Tailwind CSS Datepicker" src="https://flowbite.s3.amazonaws.com/github/datepicker.jpg">
   </a>
  </td>

config.yml

@@ -5,7 +5,7 @@ enableInlineShortcodes: true
 
 params:
  homepage: "https://flowbite.com"
- current_version: 2.3.0
+ current_version: 2.4.0
  authors: Themesberg
  social_image_path: /docs/images/og-image.png
 

content/components/clipboard.md

@@ -8,8 +8,8 @@ requires_js: true
 
 previous: Chat Bubble
 previousLink: components/chat-bubble/
-next: Device mockups
-nextLink: components/device-mockups/
+next: Datepicker
+nextLink: components/datepicker/
 ---
 
 The copy to clipboard component allows you to copy text, lines of code, contact details or any other data to the clipboard with a single click on a trigger element such as a button. This component can be used to copy text from an input field, textarea, code block or even address fields in a form element.

content/components/device-mockups.md

@@ -5,8 +5,8 @@ description: Use the device mockups component to add content and screenshot prev
 group: components
 toc: true
 
-previous: Clipboard
-previousLink: components/clipboard/
+previous: Datepicker
+previousLink: components/datepicker/
 next: Drawer
 nextLink: components/drawer/
 ---

content/components/dropdowns.md

@@ -18,7 +18,7 @@ Make sure to include <a href="{{< ref "getting-started/quickstart" >}}">Flowbite
 
 ## Dropdown example
 
-If you want to show a dropdown menu when clicking on an element make sure that you add the `data-dropdown-toggle="dropdownId"` data attribute to the element (ie. a button) that will trigger the dropdown menu.
+If you want to show a dropdown menu when clicking on an element make sure that you add the data attribute `data-dropdown-toggle="dropdownId"` to the element (ie. a button) that will trigger the dropdown menu.
 
 The `dropdownId` is the id of the dropdown menu element.
 

content/forms/number-input.md

@@ -260,7 +260,7 @@ This component can be used to set a currency value inside a form field when you
 
 ## Credit card input
 
-Use this component to set the information needed when making an online transaction with a credit card by adding the card number, expiration date, and security code. The component uses the [Flowbite Datepicker](https://flowbite.com/docs/plugins/datepicker/).
+Use this component to set the information needed when making an online transaction with a credit card by adding the card number, expiration date, and security code. The component uses the [Flowbite Datepicker](https://flowbite.com/docs/components/datepicker/).
 
 {{< example id="zip-code-number-input" github="components/number-input.md" show_dark=true iframeHeight="540" >}}
 <form class="max-w-sm mx-auto">
@@ -349,7 +349,7 @@ document.querySelectorAll('[data-focus-input-init]').forEach(function(element) {
 
 ## Number input with slider
 
-This example can be used to set the value of a number input field by sliding the range slider component or by typing the value in the input field. The component uses the [Flowbite Range Slider](https://flowbite.com/docs/plugins/range-slider/).
+This example can be used to set the value of a number input field by sliding the range slider component or by typing the value in the input field. The component uses the [Flowbite Range Slider](https://flowbite.com/docs/components/range-slider/).
 
 {{< example id="zip-code-number-input" github="components/number-input.md" show_dark=true iframeHeight="290" disable_init_js="true" javascript=`
 // Get the elements

content/forms/timepicker.md

@@ -234,7 +234,7 @@ Use this example to show or hide the timepicker when clicking on an trigger elem
 
 ## Inline timepicker buttons
 
-This is an advanced example that you can use to show the details of an event and select a date of the event based on the [Flowbite Datepicker](https://flowbite.com/docs/plugins/datepicker/) and select the time using a predefined set of time intervals based on checkbox elements.
+This is an advanced example that you can use to show the details of an event and select a date of the event based on the [Flowbite Datepicker](https://flowbite.com/docs/components/datepicker/) and select the time using a predefined set of time intervals based on checkbox elements.
 
 {{< example id="timepicker-inline-example" github="components/timepicker.md" show_dark=true >}}
 <h2 class="text-xl text-gray-900 dark:text-white font-bold mb-2">Digital Transformation</h2>
@@ -376,7 +376,7 @@ This is an advanced example that you can use to show the details of an event and
 
 ## Modal with timepicker
 
-Use this example to select a date and time inside of a modal component based on the [Flowbite Datepicker](https://flowbite.com/docs/plugins/datepicker/) and select a time interval using checkbox elements with predefined time values for event time scheduling.
+Use this example to select a date and time inside of a modal component based on the [Flowbite Datepicker](https://flowbite.com/docs/components/datepicker/) and select a time interval using checkbox elements with predefined time values for event time scheduling.
 
 {{< example id="timepicker-modal-example" github="components/timepicker.md" class="flex justify-center" show_dark=true iframeHeight="880" >}}
 <button type="button" data-modal-target="timepicker-modal" data-modal-toggle="timepicker-modal" class="text-gray-900 bg-white hover:bg-gray-100 border border-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-gray-600 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700">

content/getting-started/blazor.md

@@ -219,7 +219,7 @@ module.exports = {
 
 ```bash
  <!-- ... -->
- <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.4.0/flowbite.min.js"></script>
  </body>
 </html>
 ```

content/getting-started/changelog.md

@@ -15,6 +15,12 @@ nextLink: getting-started/react/
 
 We strive to keep a good accountability of all of the version changes that we make for the Flowbite library.
 
+### v2.4.0
+
+- the datepicker is now a core component of Flowbite and has API methods, events, and options
+- updated the documentation for the datepicker component and related integration guides
+- minor visual bug fixes and improvements
+
 ### v2.3.0
 
 - added new "copy to clipboard" component and examples

content/getting-started/introduction.md

@@ -45,7 +45,7 @@ Here's a quick overview of the Flowbite ecosystem including the open source Tail
  </a>
  <a href="{{< param homepage >}}/pro/" class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 dark:border-gray-700 lg:mb-0">
   <h3 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Upgrade to Pro</h3>
-  <p class="font-normal text-gray-700 dark:text-gray-400">Check out over 400+ website sections and advanced UI components built with Tailwind CSS and the Flowbite Library.</p>
+  <p class="font-normal text-gray-700 dark:text-gray-400">Check out over 410+ website sections and advanced UI components built with Tailwind CSS and the Flowbite Library.</p>
  </a>
 </div>
 

content/getting-started/nuxt-js.md

@@ -180,16 +180,33 @@ Let's use the <a href="{{< ref "components/modal" >}}#javascript-behaviour">Moda
 
 You can automatically make the interactive components work by importing the init functions from the Flowbite package using the onMounted lifecycle method from Nuxt.
 
-For example, here's how would initialize all of interactive UI components (ie. modals) inside your Vue template:
+When using Flowbite you need to make sure that the client side JavaScript is executed only after the page is fully loaded. This is why we recommend you to create a `useFlowbite.js` file inside the `composables` folder:
+
+```javascript
+// composables/useFlowbite.js
+
+export function useFlowbite(callback) {
+ if (process.client) {
+ import('flowbite').then((flowbite) => {
+ callback(flowbite);
+ });
+ }
+}
+```
+
+Then you can import the `useFlowbite` function inside your Nuxt page and use it to initialize the components:
 
 ```javascript
 <script setup>
 import { onMounted } from 'vue'
+import { useFlowbite } from '~/composables/useFlowbite';
 import { initFlowbite } from 'flowbite'
 
 // initialize components based on data attribute selectors
 onMounted(() => {
- initFlowbite();
+ useFlowbite(() => {
+ initFlowbite();
+ })
 })
 </script>
 
@@ -203,6 +220,7 @@ Alternatively, here's a full list of available functions to use to initialise th
 ```javascript
 <script setup>
 import { onMounted } from 'vue'
+import { useFlowbite } from '~/composables/useFlowbite';
 import { 
  initAccordions, 
  initCarousels, 
@@ -218,17 +236,19 @@ import {
 
 // initialize components based on data attribute selectors
 onMounted(() => {
- initAccordions();
- initCarousels();
- initCollapses();
- initDials();
- initDismisses();
- initDrawers();
- initDropdowns();
- initModals();
- initPopovers();
- initTabs();
- initTooltips();
+ useFlowbite(() => {
+ initAccordions();
+ initCarousels();
+ initCollapses();
+ initDials();
+ initDismisses();
+ initDrawers();
+ initDropdowns();
+ initModals();
+ initPopovers();
+ initTabs();
+ initTooltips();
+ })
 })
 </script>
 ```
@@ -245,27 +265,30 @@ To make the component interactive we need to import the Modal object from Flowbi
 <script setup>
 import { onMounted } from 'vue'
 import { Modal } from 'flowbite'
+import { useFlowbite } from '~/composables/useFlowbite';
 
 onMounted(() => {
- // setup available elements
- const $buttonElement = document.querySelector('#button');
- const $modalElement = document.querySelector('#modal');
- const $closeButton = document.querySelector('#closeButton');
-
- // set modal options
- const modalOptions = {
- backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40'
- }
-
- // create a new modal instance
- if ($modalElement) {
- const modal = new Modal($modalElement, modalOptions);
-
- // set event listeners for the button to show the modal
- $buttonElement.addEventListener('click', () => modal.toggle());
- $closeButton.addEventListener('click', () => modal.hide());
-
- }
+ useFlowbite(() => {
+ // setup available elements
+ const $buttonElement = document.querySelector('#button');
+ const $modalElement = document.querySelector('#modal');
+ const $closeButton = document.querySelector('#closeButton');
+
+ // set modal options
+ const modalOptions = {
+ backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40'
+ }
+
+ // create a new modal instance
+ if ($modalElement) {
+ const modal = new Modal($modalElement, modalOptions);
+
+ // set event listeners for the button to show the modal
+ $buttonElement.addEventListener('click', () => modal.toggle());
+ $closeButton.addEventListener('click', () => modal.hide());
+
+ }
+ })
 })
 </script>
 ```

content/getting-started/phoenix.md

@@ -579,7 +579,11 @@ You can check out the full collection of website sections by browsing the [Flowb
 
 ## Datepicker plugin
 
-If you want to use the <a href="{{< ref "plugins/datepicker" >}}">Flowbite Datepicker</a> plugin using JavaScript you will need to include it into your project via NPM:
+Since the release of version `2.4.0` of Flowbite the Datepicker component is part of the main package so it should work out of the box without any additional setup.
+
+### Versions prior to 2.4.0
+
+To use the <a href="{{< ref "plugins/datepicker" >}}">Flowbite Datepicker</a> plugin using JavaScript you will need to include it into your project via NPM:
 
 ```bash
 npm install flowbite-datepicker --save

content/getting-started/rails.md

@@ -170,12 +170,16 @@ Alternatively to all of the above you can also include the JavaScript via CDN:
 
 ### Datepicker
 
+Since the release of version `2.4.0` of Flowbite the Datepicker component is now part of the main package so you don't need to include `datepicker.turbo.js` separately. It will work out of the box.
+
+### Versions prior to 2.4.0
+
 In order to support turbo load from Ruby on Rails 7, you have to include the `datepicker.turbo.js` file either from NPM or CDN into your project.
 
 Include the following JavaScript file to support the datepicker component:
 
 ```bash
-pin "flowbite-datepicker", to: "https://cdnjs.cloudflare.com/ajax/libs/flowbite/{{< current_version >}}/datepicker.turbo.min.js"
+pin "flowbite-datepicker", to: "https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/datepicker.turbo.min.js"
 ```
 
 Don't forget to also import it inside your `application.js` file:

content/plugins/charts.md

@@ -6,9 +6,6 @@ group: plugins
 toc: true
 requires_js: true
 
-next: Datepicker
-nextLink: plugins/datepicker/
-
 previous: Horizontal line (HR)
 previousLink: typography/hr/
 ---