chore(flowbite): update to v2.0 of Flowbite

README.md

@@ -36,7 +36,7 @@ Here's an example how you can initialise the components based on data attributes
 ```javascript
 <script setup>
 import { onMounted } from 'vue'
-import { initModals } from 'flowbite'
+import { initModals } from 'flowbite-2.0'
 
 // initialize components based on data attribute selectors
 onMounted(() => {
@@ -66,7 +66,7 @@ import {
     initModals, 
     initPopovers, 
     initTabs, 
-    initTooltips } from 'flowbite'
+    initTooltips } from 'flowbite-2.0'
 
 // initialize components based on data attribute selectors
 onMounted(() => {
@@ -90,7 +90,7 @@ Alternatively, you can also initialise all components using `initFlowbite`:
 ```javascript
 <script setup>
 import { onMounted } from 'vue'
-import { initFlowbite } from 'flowbite'
+import { initFlowbite } from 'flowbite-2.0'
 
 // initialize components based on data attribute selectors
 onMounted(() => {
@@ -112,7 +112,7 @@ Here's an example showing how you can use the Modal component:
 ```javascript
 <script setup>
 import { onMounted } from 'vue'
-import { Modal } from 'flowbite'
+import { Modal } from 'flowbite-2.0'
 
 onMounted(() => {
     const $buttonElement = document.querySelector('#button');

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "flowbite": "^1.6.5",
+    "flowbite-2.0": "^2.2.0",
     "vue": "^3.2.25",
     "vue-router": "^4.1.6"
   },

src/views/Accordion.vue

@@ -1,8 +1,9 @@
 <script setup>
 import { onMounted } from 'vue'
-import { Accordion } from 'flowbite'
+import { Accordion } from 'flowbite-2.0'
 
 onMounted(() => {
+    const accordionItem = document.getElementById('accordion-example');
     // create an array of objects with the id, trigger element (eg. button), and the content element
     const accordionItems = [
         {
@@ -49,7 +50,7 @@ onMounted(() => {
         * accordionItems: array of accordion item objects
         * options: optional
         */
-        const accordion = new Accordion(accordionItems, options);
+        const accordion = new Accordion(accordionItem, accordionItems, options);
 
         // open accordion item based on id
         accordion.open('accordion-example-heading-2');
@@ -58,7 +59,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="max-w-2xl p-4 mx-auto">
+  <div id="accordion-example" class="max-w-2xl p-4 mx-auto">
         <h2 id="accordion-example-heading-1">
           <button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" aria-expanded="true" aria-controls="accordion-example-body-1">
             <span>What is Flowbite?</span>

src/views/Carousel.vue

@@ -1,8 +1,10 @@
 <script setup>
 import { onMounted } from 'vue'
-import { Carousel } from 'flowbite'
+import { Carousel } from 'flowbite-2.0'
 
 onMounted(() => {
+    const carouselElement = document.getElementById('carousel-example');
+
     const items = [
         {
             position: 0,
@@ -51,18 +53,18 @@ onMounted(() => {
         
         // callback functions
         onNext: () => {
-            console.log('next slider item is shown');
+            // console.log('next slider item is shown');
         },
         onPrev: ( ) => {
-            console.log('previous slider item is shown');
+            // console.log('previous slider item is shown');
         },
         onChange: ( ) => {
-            console.log('new slider item has been shown');
+            // console.log('new slider item has been shown');
         }
     };
 
     if (document.getElementById('carousel-item-1')) {
-        const carousel = new Carousel(items, options);
+        const carousel = new Carousel(carouselElement, items, options);
 
         carousel.cycle()
 
@@ -83,7 +85,7 @@ onMounted(() => {
 
 <template>
   <div class="max-w-2xl p-4 mx-auto">
-        <div class="relative">
+        <div id="carousel-example" class="relative">
             <!-- Carousel wrapper -->
             <div class="relative h-56 overflow-hidden rounded-lg sm:h-64 xl:h-80 2xl:h-96">
                  <!-- Item 1 -->

src/views/Collapse.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { onMounted } from 'vue'
-import { Collapse } from 'flowbite'
+import { Collapse } from 'flowbite-2.0'
 
 onMounted(() => {
     // set the target element that will be collapsed or expanded (eg. navbar menu)

src/views/Dial.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { onMounted } from 'vue'
-import { Dial } from 'flowbite'
+import { Dial } from 'flowbite-2.0'
 
 onMounted(() => {
     // parent element wrapping the speed dial

src/views/Dismiss.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { onMounted } from 'vue'
-import { Dismiss } from 'flowbite'
+import { Dismiss } from 'flowbite-2.0'
 
 onMounted(() => {
    // target element that will be dismissed

src/views/Drawer.vue

@@ -1,10 +1,10 @@
 <script setup>
 import { onMounted } from 'vue'
-import { Drawer } from 'flowbite'
+import { Drawer } from 'flowbite-2.0'
 
 onMounted(() => {
    // set the drawer menu element
-    const $targetEl = document.getElementById('drawer-example');
+    const $targetEl = document.getElementById('drawer-example-two');
     const $drawerHideButton = document.getElementById('drawer-hide-button');
 
     // options with default values
@@ -45,9 +45,9 @@ onMounted(() => {
 
 <template>
   <div class="max-w-2xl p-4 mx-auto">
-        <div id="drawer-example" class="fixed z-40 h-screen p-4 overflow-y-auto bg-white w-80 dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-label">
+        <div id="drawer-example-two" class="fixed z-40 h-screen p-4 overflow-y-auto bg-white w-80 dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-label">
             <h5 id="drawer-label" class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400"><svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>Info</h5>
-            <button id="drawer-hide-button" type="button" aria-controls="drawer-example" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" >
+            <button id="drawer-hide-button" type="button" aria-controls="drawer-example-two" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" >
                <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                <span class="sr-only">Close menu</span>
             </button>

src/views/Dropdown.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { onMounted } from 'vue'
-import { Dropdown } from 'flowbite'
+import { Dropdown } from 'flowbite-2.0'
 
 onMounted(() => {
    // set the dropdown menu element

src/views/Events.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { onMounted } from 'vue'
-import { initFlowbite } from 'flowbite'
+import { initFlowbite } from 'flowbite-2.0'
 // initialize components based on data attribute selectors
 onMounted(() => {
     initFlowbite();

src/views/Modal.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { onMounted } from 'vue'
-import { Modal } from 'flowbite'
+import { Modal } from 'flowbite-2.0'
 
 onMounted(() => {
     const $buttonElement = document.querySelector('#button');

src/views/Popover.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { onMounted } from 'vue'
-import { Popover } from 'flowbite'
+import { Popover } from 'flowbite-2.0'
 
 onMounted(() => {
    // set the popover content element

src/views/Tabs.vue

@@ -1,8 +1,10 @@
 <script setup>
 import { onMounted } from 'vue'
-import { Tabs } from 'flowbite'
+import { Tabs } from 'flowbite-2.0'
 
 onMounted(() => {
+    const tabsElement = document.getElementById('tabs-example');
+
    // create an array of objects with the id, trigger element (eg. button), and the content element
     const tabElements = [
         {
@@ -42,7 +44,7 @@ onMounted(() => {
         * tabElements: array of tab objects
         * options: optional
         */
-        const tabs = new Tabs(tabElements, options);
+        const tabs = new Tabs(tabsElement, tabElements, options);
 
         // open tab item based on id
         tabs.show('contacts');
@@ -53,7 +55,7 @@ onMounted(() => {
 <template>
   <div class="max-w-2xl p-4 mx-auto">
         <div class="mb-4 border-b border-gray-200 dark:border-gray-700">
-            <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400" id="tabExample" role="tablist">
+            <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400" id="tabs-example" role="tablist">
                 <li class="mr-2" role="presentation">
                     <button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="profile-tab-example" type="button" role="tab" aria-controls="profile-example" aria-selected="false">Profile</button>
                 </li>

src/views/Tooltip.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { onMounted } from 'vue'
-import { Tooltip } from 'flowbite'
+import { Tooltip } from 'flowbite-2.0'
 
 onMounted(() => {
    // set the tooltip content element

tailwind.config.js

@@ -9,6 +9,6 @@ module.exports = {
     extend: {},
   },
   plugins: [
-    require('flowbite/plugin')
+    require('flowbite-2.0/plugin')
   ],
 }