├── .gitignore
├── .vscode
    └── extensions.json
├── LICENSE.md
├── README.md
├── index.html
├── package.json
├── public
    └── vite.svg
├── src
    ├── App.vue
    ├── assets
    │   └── vue.svg
    ├── components
    │   └── HelloWorld.vue
    ├── main.js
    ├── router
    │   └── index.js
    ├── style.css
    └── views
    │   ├── Accordion.vue
    │   ├── Carousel.vue
    │   ├── Collapse.vue
    │   ├── Datepicker.vue
    │   ├── Dial.vue
    │   ├── Dismiss.vue
    │   ├── Drawer.vue
    │   ├── Dropdown.vue
    │   ├── Events.vue
    │   ├── InputCounter.vue
    │   ├── Modal.vue
    │   ├── Popover.vue
    │   ├── Tabs.vue
    │   └── Tooltip.vue
└── vite.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar"]
3 | }
4 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Bergside Inc.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Tailwind 4 Vue Starter
 2 | 
 3 | [Follow this guide](https://flowbite.com/docs/getting-started/vue/) to learn how to set up Tailwind CSS v4 with Vue and Flowbite.
 4 | 
 5 | ## Create a Vue project
 6 | 
 7 | Follow the next steps to install Tailwind CSS (with v4) and Flowbite with Vue 3 and Vite.
 8 | 
 9 | 1. Create a new Vite project running the following commands in your terminal:
10 | 
11 | ```bash
12 | npm create vite@latest flowbite-app -- --template vue
13 | cd flowbite-app
14 | ```
15 | 
16 | ## Install Tailwind CSS
17 | 
18 | This guide uses the newest version of Tailwind CSS v4 which brings many improvements.
19 | 
20 | 1. Install Tailwind CSS using Vite via the terminal:
21 | 
22 | ```bash
23 | npm install tailwindcss @tailwindcss/vite --save
24 | ```
25 | 
26 | 2. Add the Tailwind plugin inside your `vite.config.js` file:
27 | 
28 | ```javascript
29 | import { defineConfig } from 'vite'
30 | import vue from '@vitejs/plugin-vue'
31 | import tailwindcss from '@tailwindcss/vite'
32 | 
33 | // https://vite.dev/config/
34 | export default defineConfig({
35 |   plugins: [
36 |     vue(), 
37 |     tailwindcss()
38 |   ],
39 | })
40 | ```
41 | 
42 | 3. Import the `tailwind` module inside your `style.css` file:
43 | 
44 | ```css
45 | @import "tailwindcss";
46 | ```
47 | 
48 | You have now installed both Tailwind CSS and Vue and can proceed with the next steps.
49 | 
50 | ## Install Flowbite
51 | 
52 | The UI components from Flowbite can help you save time building websites with Vue and Tailwind. Make sure that you follow the next steps to ensure that you install both the CSS and JavaScript dependencies.
53 | 
54 | 1. Install Flowbite as a dependency using NPM by running the following command:
55 | 
56 | ```bash
57 | npm install flowbite --save
58 | ```
59 | 
60 | 2. Import the default theme variables from Flowbite inside your main `input.css` CSS file:
61 | 
62 | ```css
63 | @import "flowbite/src/themes/default";
64 | ```
65 | 
66 | 3. Import the Flowbite plugin file in your CSS:
67 | 
68 | ```css
69 | @plugin "flowbite/plugin";
70 | ```
71 | 
72 | 4. Configure the source files of Flowbite in your CSS:
73 | 
74 | ```css
75 | @source "../node_modules/flowbite";
76 | ```
77 | 
78 | ## Flowbite Components
79 | 
80 | Now that you have successfully installed Vue, Tailwind CSS and Flowbite you can start importing and using components from the open-source library of [Flowbite](https://flowbite.com) such as modals, navbars, tables, dropdowns, and more.
81 | 
82 | 
83 | 4. Start a local development server by running the following command in your terminal:
84 | 
85 | ```bash
86 | npm run dev
87 | ```
88 | 
89 | If you want to build the project then you can run `npm run build`.
90 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + Vue</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tailwind-vue-starter",
 3 |   "version": "1.0.0",
 4 |   "description": "A free and open-source starter project to help you get started with the core Flowbite Library components and Vue 3",
 5 |   "license": "MIT",
 6 |   "repository": "https://github.com/themesberg/tailwind-vue-starter",
 7 |   "homepage": "https://flowbite.com/docs/getting-started/vue/",
 8 |   "contributors": [
 9 |     "Zoltán Szőgyényi (https://twitter.com/zoltanszogyenyi)"
10 |   ],
11 |   "author": "Bergside Inc.",
12 |   "type": "module",
13 |   "scripts": {
14 |     "dev": "vite",
15 |     "build": "vite build",
16 |     "preview": "vite preview"
17 |   },
18 |   "dependencies": {
19 |     "@tailwindcss/vite": "^4.0.8",
20 |     "flowbite": "^3.1.2",
21 |     "tailwindcss": "^4.0.8",
22 |     "vue": "^3.5.13",
23 |     "vue-router": "^4.5.0"
24 |   },
25 |   "devDependencies": {
26 |     "@vitejs/plugin-vue": "^5.2.1",
27 |     "vite": "^6.1.0"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | </script>
 3 | 
 4 | <template>
 5 |   <div class="flex items-center justify-center h-screen bg-gray-50">
 6 |         <div>
 7 |           <h1 class="mb-6 text-4xl">Flowbite + Vue 3 + Tailwind CSS Starter</h1>
 8 |           <div class="w-auto mb-4 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
 9 |               <router-link to="/" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Home</router-link>
10 |               <router-link to="/events" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Events (data attributes)</router-link>
11 |               <router-link to="/accordion" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Accordion</router-link>
12 |               <router-link to="/carousel" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Carousel</router-link>
13 |               <router-link to="/modal" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Modal</router-link>
14 |               <router-link to="/collapse" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Collapse</router-link>
15 |               <router-link to="/dial" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Speed Dial</router-link>
16 |               <router-link to="/dismiss" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Dismiss</router-link>
17 |               <router-link to="/drawer" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Drawer</router-link>
18 |               <router-link to="/dropdown" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Dropdown</router-link>
19 |               <router-link to="/popover" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Popover</router-link>
20 |               <router-link to="/tabs" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Tabs</router-link>
21 |               <router-link to="/tooltip" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Tooltip</router-link>
22 |               <router-link to="/input-counter" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Input Counter</router-link>
23 |               <router-link to="/datepicker" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Datepicker</router-link>
24 |           </div>
25 |           <p class="mb-8">Learn more about <a href="https://flowbite.com/docs/getting-started/vue/" class="text-blue-600 hover:underline">Flowbite + Vue 3 here</a>.</p>
26 | 
27 |           <router-view />
28 |         </div>
29 |     </div>
30 | </template>
31 | 


--------------------------------------------------------------------------------
/src/assets/vue.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { ref } from 'vue'
 3 | import { onMounted } from 'vue'
 4 | import { initFlowbite } from 'flowbite'
 5 | 
 6 | defineProps({
 7 |   msg: String,
 8 | })
 9 | 
10 | // initialize components based on data attribute selectors
11 | onMounted(() => {
12 |     initFlowbite();
13 | })
14 | 
15 | const count = ref(0)
16 | </script>
17 | 
18 | <template>
19 |   <h1>{{ msg }}</h1>
20 | 
21 | 
22 | 
23 | <nav class="bg-white border-gray-200 dark:bg-gray-900">
24 |   <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
25 |     <a href="https://flowbite.com/" class="flex items-center space-x-3 rtl:space-x-reverse">
26 |         <img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo" />
27 |         <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
28 |     </a>
29 |     <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
30 |         <span class="sr-only">Open main menu</span>
31 |         <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
32 |             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
33 |         </svg>
34 |     </button>
35 |     <div class="hidden w-full md:block md:w-auto" id="navbar-default">
36 |       <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
37 |         <li>
38 |           <a href="#" class="block py-2 px-3 text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500" aria-current="page">Home</a>
39 |         </li>
40 |         <li>
41 |           <a href="#" class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About</a>
42 |         </li>
43 |         <li>
44 |           <a href="#" class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Services</a>
45 |         </li>
46 |         <li>
47 |           <a href="#" class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Pricing</a>
48 |         </li>
49 |         <li>
50 |           <a href="#" class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
51 |         </li>
52 |       </ul>
53 |     </div>
54 |   </div>
55 | </nav>
56 | 
57 | 
58 |   <div class="card">
59 |     <button type="button" @click="count++">count is {{ count }}</button>
60 |     <p>
61 |       Edit
62 |       <code>components/HelloWorld.vue</code> to test HMR
63 |     </p>
64 |   </div>
65 | 
66 |   <p>
67 |     Check out
68 |     <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
69 |       >create-vue</a
70 |     >, the official Vue + Vite starter
71 |   </p>
72 |   <p>
73 |     Learn more about IDE Support for Vue in the
74 |     <a
75 |       href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
76 |       target="_blank"
77 |       >Vue Docs Scaling up Guide</a
78 |     >.
79 |   </p>
80 |   <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
81 | </template>
82 | 
83 | <style scoped>
84 | .read-the-docs {
85 |   color: #888;
86 | }
87 | </style>
88 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import './style.css'
3 | import router from './router'
4 | import App from './App.vue'
5 | 
6 | createApp(App).use(router).mount('#app')
7 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createWebHistory, createRouter } from "vue-router";
 2 | import Events from "../views/Events.vue";
 3 | import Accordion from "../views/Accordion.vue";
 4 | import Carousel from "../views/Carousel.vue";
 5 | import Collapse from "../views/Collapse.vue";
 6 | import Dial from "../views/Dial.vue";
 7 | import Dismiss from "../views/Dismiss.vue";
 8 | import Drawer from "../views/Drawer.vue";
 9 | import Dropdown from "../views/Dropdown.vue";
10 | import Popover from "../views/Popover.vue";
11 | import Tabs from "../views/Tabs.vue";
12 | import Tooltip from "../views/Tooltip.vue";
13 | import Modal from "../views/Modal.vue";
14 | import InputCounter from "../views/InputCounter.vue";
15 | import Datepicker from "../views/Datepicker.vue";
16 | 
17 | const routes = [
18 |   {
19 |     path: "/events",
20 |     name: "Events",
21 |     component: Events,
22 |   },
23 |   {
24 |     path: "/accordion",
25 |     name: "Accordion",
26 |     component: Accordion,
27 |   },
28 |   {
29 |     path: "/carousel",
30 |     name: "Carousel",
31 |     component: Carousel,
32 |   },
33 |   {
34 |     path: "/collapse",
35 |     name: "Collapse",
36 |     component: Collapse,
37 |   },
38 |   {
39 |     path: "/dial",
40 |     name: "Dial",
41 |     component: Dial,
42 |   },
43 |   {
44 |     path: "/dismiss",
45 |     name: "Dismiss",
46 |     component: Dismiss,
47 |   },
48 |   {
49 |     path: "/drawer",
50 |     name: "Drawer",
51 |     component: Drawer,
52 |   },
53 |   {
54 |     path: "/dropdown",
55 |     name: "Dropdown",
56 |     component: Dropdown,
57 |   },
58 |   {
59 |     path: "/popover",
60 |     name: "Popover",
61 |     component: Popover,
62 |   },
63 |   {
64 |     path: "/tabs",
65 |     name: "Tabs",
66 |     component: Tabs,
67 |   },
68 |   {
69 |     path: "/tooltip",
70 |     name: "Tooltip",
71 |     component: Tooltip,
72 |   },
73 |   {
74 |     path: "/modal",
75 |     name: "Modal",
76 |     component: Modal,
77 |   },
78 |   {
79 |     path: "/input-counter",
80 |     name: "InputCounter",
81 |     component: InputCounter,
82 |   },
83 |   {
84 |     path: "/datepicker",
85 |     name: "Datepicker",
86 |     component: Datepicker,
87 |   },
88 | ];
89 | 
90 | const router = createRouter({
91 |   history: createWebHistory(),
92 |   routes,
93 | });
94 | 
95 | export default router;


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss";
2 | 
3 | @import "flowbite/src/themes/default";
4 | @plugin "flowbite/plugin";
5 | @source "../node_modules/flowbite";
6 | @source "../node_modules/flowbite-datepicker";
7 | 


--------------------------------------------------------------------------------
/src/views/Accordion.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { onMounted } from 'vue'
  3 | import { Accordion } from 'flowbite'
  4 | 
  5 | onMounted(() => {
  6 |     const accordionItem = document.getElementById('accordion-example');
  7 |     // create an array of objects with the id, trigger element (eg. button), and the content element
  8 |     const accordionItems = [
  9 |         {
 10 |             id: 'accordion-example-heading-1',
 11 |             triggerEl: document.querySelector('#accordion-example-heading-1'),
 12 |             targetEl: document.querySelector('#accordion-example-body-1'),
 13 |             active: true
 14 |         },
 15 |         {
 16 |             id: 'accordion-example-heading-2',
 17 |             triggerEl: document.querySelector('#accordion-example-heading-2'),
 18 |             targetEl: document.querySelector('#accordion-example-body-2'),
 19 |             active: false
 20 |         },
 21 |         {
 22 |             id: 'accordion-example-heading-3',
 23 |             triggerEl: document.querySelector('#accordion-example-heading-3'),
 24 |             targetEl: document.querySelector('#accordion-example-body-3'),
 25 |             active: false
 26 |         }
 27 |     ];
 28 | 
 29 |     // options with default values
 30 |     const options = {
 31 |         alwaysOpen: true,
 32 |         activeClasses: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white',
 33 |         inactiveClasses: 'text-gray-500 dark:text-gray-400',
 34 |         onOpen: (item) => {
 35 |             console.log('accordion item has been shown');
 36 |             console.log(item);
 37 |         },
 38 |         onClose: (item) => {
 39 |             console.log('accordion item has been hidden');
 40 |             console.log(item);
 41 |         },
 42 |         onToggle: (item) => {
 43 |             console.log('accordion item has been toggled');
 44 |             console.log(item);
 45 |         },
 46 |     };
 47 | 
 48 |     if (document.querySelector('#accordion-example-heading-1')) {
 49 |         /*
 50 |         * accordionItems: array of accordion item objects
 51 |         * options: optional
 52 |         */
 53 |         const accordion = new Accordion(accordionItem, accordionItems, options);
 54 | 
 55 |         // open accordion item based on id
 56 |         accordion.open('accordion-example-heading-2');
 57 |     }
 58 | })
 59 | </script>
 60 | 
 61 | <template>
 62 |   <div id="accordion-example" class="max-w-2xl p-4 mx-auto">
 63 |         <h2 id="accordion-example-heading-1">
 64 |           <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">
 65 |             <span>What is Flowbite?</span>
 66 |             <svg data-accordion-icon class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
 67 |           </button>
 68 |         </h2>
 69 |         <div id="accordion-example-body-1" class="hidden" aria-labelledby="accordion-example-heading-1">
 70 |           <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
 71 |             <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
 72 |             <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
 73 |           </div>
 74 |         </div>
 75 |         <h2 id="accordion-example-heading-2">
 76 |           <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 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="false" aria-controls="accordion-example-body-2">
 77 |             <span>Is there a Figma file available?</span>
 78 |             <svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
 79 |           </button>
 80 |         </h2>
 81 |         <div id="accordion-example-body-2" class="hidden" aria-labelledby="accordion-example-heading-2">
 82 |           <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
 83 |             <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
 84 |             <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
 85 |           </div>
 86 |         </div>
 87 |         <h2 id="accordion-example-heading-3">
 88 |           <button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border border-gray-200 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="false" aria-controls="accordion-example-body-3">
 89 |             <span>What are the differences between Flowbite and Tailwind UI?</span>
 90 |             <svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
 91 |           </button>
 92 |         </h2>
 93 |         <div id="accordion-example-body-3" class="hidden" aria-labelledby="accordion-example-heading-3">
 94 |           <div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
 95 |             <p class="mb-2 text-gray-500 dark:text-gray-400">The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
 96 |             <p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
 97 |             <p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
 98 |             <ul class="pl-5 text-gray-500 list-disc dark:text-gray-400">
 99 |               <li><a href="https://flowbite.com/pro/" class="text-blue-600 dark:text-blue-500 hover:underline">Flowbite Pro</a></li>
100 |               <li><a href="https://tailwindui.com/" rel="nofollow" class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind UI</a></li>
101 |             </ul>
102 |           </div>
103 |         </div>
104 |     </div>
105 | </template>
106 | 


--------------------------------------------------------------------------------
/src/views/Carousel.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { onMounted } from 'vue'
  3 | import { Carousel } from 'flowbite'
  4 | 
  5 | onMounted(() => {
  6 |     const carouselElement = document.getElementById('carousel-example');
  7 | 
  8 |     const items = [
  9 |         {
 10 |             position: 0,
 11 |             el: document.getElementById('carousel-item-1')
 12 |         },
 13 |         {
 14 |             position: 1,
 15 |             el: document.getElementById('carousel-item-2')
 16 |         },
 17 |         {
 18 |             position: 2,
 19 |             el: document.getElementById('carousel-item-3')
 20 |         },
 21 |         {
 22 |             position: 3,
 23 |             el: document.getElementById('carousel-item-4')
 24 |         },
 25 |     ];
 26 | 
 27 |     const options = {
 28 |         defaultPosition: 1,
 29 |         interval: 3000,
 30 |         
 31 |         indicators: {
 32 |             activeClasses: 'bg-white dark:bg-gray-800',
 33 |             inactiveClasses: 'bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800',
 34 |             items: [
 35 |                 {
 36 |                     position: 0,
 37 |                     el: document.getElementById('carousel-indicator-1')
 38 |                 },
 39 |                 {
 40 |                     position: 1,
 41 |                     el: document.getElementById('carousel-indicator-2')
 42 |                 },
 43 |                 {
 44 |                     position: 2,
 45 |                     el: document.getElementById('carousel-indicator-3')
 46 |                 },
 47 |                 {
 48 |                     position: 3,
 49 |                     el: document.getElementById('carousel-indicator-4')
 50 |                 },
 51 |             ]
 52 |         },
 53 |         
 54 |         // callback functions
 55 |         onNext: () => {
 56 |             // console.log('next slider item is shown');
 57 |         },
 58 |         onPrev: ( ) => {
 59 |             // console.log('previous slider item is shown');
 60 |         },
 61 |         onChange: ( ) => {
 62 |             // console.log('new slider item has been shown');
 63 |         }
 64 |     };
 65 | 
 66 |     if (document.getElementById('carousel-item-1')) {
 67 |         const carousel = new Carousel(carouselElement, items, options);
 68 | 
 69 |         carousel.cycle()
 70 | 
 71 |         // set event listeners for prev and next buttons
 72 |         const prevButton = document.getElementById('data-carousel-prev');
 73 |         const nextButton = document.getElementById('data-carousel-next');
 74 | 
 75 |         prevButton.addEventListener('click', () => {
 76 |             carousel.prev();
 77 |         });
 78 | 
 79 |         nextButton.addEventListener('click', () => {
 80 |             carousel.next();
 81 |         });
 82 |     }
 83 | })
 84 | </script>
 85 | 
 86 | <template>
 87 |   <div class="max-w-2xl p-4 mx-auto">
 88 |         <div id="carousel-example" class="relative">
 89 |             <!-- Carousel wrapper -->
 90 |             <div class="relative h-56 overflow-hidden rounded-lg sm:h-64 xl:h-80 2xl:h-96">
 91 |                  <!-- Item 1 -->
 92 |                 <div id="carousel-item-1" class="hidden duration-700 ease-in-out">
 93 |                     <span class="absolute text-2xl font-semibold text-white -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 sm:text-3xl dark:text-gray-800">First Slide</span>
 94 |                     <img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
 95 |                 </div>
 96 |                 <!-- Item 2 -->
 97 |                 <div id="carousel-item-2" class="hidden duration-700 ease-in-out">
 98 |                     <img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
 99 |                 </div>
100 |                 <!-- Item 3 -->
101 |                 <div id="carousel-item-3" class="hidden duration-700 ease-in-out">
102 |                     <img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
103 |                 </div>
104 |                 <!-- Item 4 -->
105 |                 <div id="carousel-item-4" class="hidden duration-700 ease-in-out">
106 |                     <img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
107 |                 </div>
108 |             </div>
109 |             <!-- Slider indicators -->
110 |             <div class="absolute z-30 flex space-x-3 -translate-x-1/2 bottom-5 left-1/2">
111 |                 <button id="carousel-indicator-1" type="button" class="w-3 h-3 rounded-full" aria-current="true" aria-label="Slide 1"></button>
112 |                 <button id="carousel-indicator-2" type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2"></button>
113 |                 <button id="carousel-indicator-3" type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3"></button>
114 |                 <button id="carousel-indicator-4" type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 4"></button>
115 |             </div>
116 |             <!-- Slider controls -->
117 |             <button id="data-carousel-prev" type="button" class="absolute top-0 left-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none">
118 |                 <span class="inline-flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
119 |                     <svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
120 |                     <span class="hidden">Previous</span>
121 |                 </span>
122 |             </button>
123 |             <button id="data-carousel-next" type="button" class="absolute top-0 right-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none">
124 |                 <span class="inline-flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
125 |                     <svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
126 |                     <span class="hidden">Next</span>
127 |                 </span>
128 |             </button>
129 |         </div>
130 |     </div>
131 | </template>
132 | 


--------------------------------------------------------------------------------
/src/views/Collapse.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import { Collapse } from 'flowbite'
 4 | 
 5 | onMounted(() => {
 6 |     // set the target element that will be collapsed or expanded (eg. navbar menu)
 7 |     const $targetEl = document.getElementById('targetEl');
 8 | 
 9 |     // optionally set a trigger element (eg. a button, hamburger icon)
10 |     const $triggerEl = document.getElementById('triggerEl');
11 | 
12 |     // optional options with default values and callback functions
13 |     const options = {
14 |     onCollapse: () => {
15 |         console.log('element has been collapsed')
16 |     },
17 |     onExpand: () => {
18 |         console.log('element has been expanded')
19 |     },
20 |     onToggle: () => {
21 |         console.log('element has been toggled')
22 |     }
23 |     };
24 | 
25 |     if ($targetEl) {
26 |         /*
27 |         * targetEl: required
28 |         * options: optional
29 |         */
30 |         const collapse = new Collapse($targetEl, $triggerEl, options);
31 | 
32 |         // show the target element
33 |         collapse.expand();
34 |     }
35 | })
36 | </script>
37 | 
38 | <template>
39 |   <div class="max-w-2xl p-4 mx-auto">
40 |         <!-- Trigger element -->
41 |         <button id="triggerEl" aria-expanded="false" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Trigger collapse</button>
42 | 
43 |         <!-- Target element -->
44 |         <div id="targetEl" class="hidden">
45 |         <ul class="w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
46 |             <li class="w-full px-4 py-2 border-b border-gray-200 rounded-t-lg dark:border-gray-600">Profile</li>
47 |             <li class="w-full px-4 py-2 border-b border-gray-200 dark:border-gray-600">Settings</li>
48 |             <li class="w-full px-4 py-2 border-b border-gray-200 dark:border-gray-600">Messages</li>
49 |             <li class="w-full px-4 py-2 rounded-b-lg">Download</li>
50 |         </ul>
51 |         </div>
52 | </div>
53 | </template>
54 | 


--------------------------------------------------------------------------------
/src/views/Datepicker.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import { Datepicker } from 'flowbite'
 4 | 
 5 | onMounted(() => {
 6 |     console.log('mounted');
 7 |     // set the target element of the input field
 8 |     const $datepickerEl = document.getElementById('datepicker-custom');
 9 | 
10 |     console.log($datepickerEl);
11 | 
12 |     // optional options with default values and callback functions
13 |     const options = {
14 |         defaultDatepickerId: null,
15 |         autohide: false,
16 |         format: 'mm/dd/yyyy',
17 |         maxDate: null,
18 |         minDate: null,
19 |         orientation: 'bottom',
20 |         buttons: false,
21 |         autoSelectToday: false,
22 |         title: null,
23 |         language: 'en',
24 |         rangePicker: false,
25 |         onShow: () => {},
26 |         onHide: () => {},
27 |     };
28 | 
29 |     const instanceOptions = {
30 |         id: 'datepicker-custom-example',
31 |         override: true
32 |     };
33 | 
34 |     if ($datepickerEl) {
35 |         const datepicker = new Datepicker($datepickerEl, options, instanceOptions);
36 |     }
37 | })
38 | </script>
39 | 
40 | <template>
41 |   <div class="max-w-2xl p-4 mx-auto">
42 |     <div class="relative max-w-sm">
43 |         <div class="absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none">
44 |             <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
45 |             <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
46 |             </svg>
47 |         </div>
48 |         <input id="datepicker-custom" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 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" placeholder="Select date">
49 |     </div>
50 |     </div>
51 | </template>


--------------------------------------------------------------------------------
/src/views/Dial.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import { Dial } from 'flowbite'
 4 | 
 5 | onMounted(() => {
 6 |     // parent element wrapping the speed dial
 7 |     const $parentEl = document.getElementById('dialParent')
 8 | 
 9 |     // the trigger element that can be clicked or hovered
10 |     const $triggerEl = document.getElementById('dialButton');
11 | 
12 |     // the content wrapping element of menu items or buttons
13 |     const $targetEl = document.getElementById('dialContent');
14 | 
15 |     // options with default values
16 |     const options = {
17 |     triggerType: 'hover',
18 |     onHide: () => {
19 |         console.log('speed dial is shown');
20 |     },
21 |     onShow: () => {
22 |         console.log('speed dial is hidden');
23 |     },
24 |     onToggle: () => {
25 |         console.log('speed dial is toggled')
26 |     }
27 |     };
28 | 
29 |     if ($parentEl) {
30 |         /*
31 |         * parentEl: required
32 |         * targetEl: required
33 |         * triggerEl: required
34 |         * options: optional
35 |         */
36 |         const dial = new Dial($parentEl, $triggerEl, $targetEl, options);
37 | 
38 |         // show the speed dial
39 |         dial.show();
40 |     }
41 | })
42 | </script>
43 | 
44 | <template>
45 |   <div class="max-w-2xl p-4 mx-auto">
46 |         <div id="dialParent" class="fixed right-6 bottom-6 group">
47 |             <div id="dialContent" class="flex flex-col items-center hidden mb-4 space-y-2">
48 |                 <button type="button" data-tooltip-target="tooltip-share" data-tooltip-placement="left" class="flex justify-center items-center w-[52px] h-[52px] text-gray-500 hover:text-gray-900 bg-white rounded-full border border-gray-200 dark:border-gray-600 shadow-sm dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 focus:outline-none dark:focus:ring-gray-400">
49 |                     <svg aria-hidden="true" class="w-6 h-6 -ml-px " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z"></path></svg>
50 |                     <span class="sr-only">Share</span>
51 |                 </button>
52 |                 <div id="tooltip-share" role="tooltip" class="absolute z-10 invisible inline-block w-auto px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
53 |                     Share
54 |                     <div class="tooltip-arrow" data-popper-arrow></div>
55 |                 </div>
56 |                 <button type="button" data-tooltip-target="tooltip-print" data-tooltip-placement="left" class="flex justify-center items-center w-[52px] h-[52px] text-gray-500 hover:text-gray-900 bg-white rounded-full border border-gray-200 dark:border-gray-600 shadow-sm dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 focus:outline-none dark:focus:ring-gray-400">
57 |                     <svg aria-hidden="true" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 4v3H4a2 2 0 00-2 2v3a2 2 0 002 2h1v2a2 2 0 002 2h6a2 2 0 002-2v-2h1a2 2 0 002-2V9a2 2 0 00-2-2h-1V4a2 2 0 00-2-2H7a2 2 0 00-2 2zm8 0H7v3h6V4zm0 8H7v4h6v-4z" clip-rule="evenodd"></path></svg>
58 |                     <span class="sr-only">Print</span>
59 |                 </button>
60 |                 <div id="tooltip-print" role="tooltip" class="absolute z-10 invisible inline-block w-auto px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
61 |                     Print
62 |                     <div class="tooltip-arrow" data-popper-arrow></div>
63 |                 </div>
64 |                 <button type="button" data-tooltip-target="tooltip-download" data-tooltip-placement="left" class="flex justify-center items-center w-[52px] h-[52px] text-gray-500 hover:text-gray-900 bg-white rounded-full border border-gray-200 dark:border-gray-600 shadow-sm dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 focus:outline-none dark:focus:ring-gray-400">
65 |                     <svg aria-hidden="true" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V8a2 2 0 00-2-2h-5L9 4H4zm7 5a1 1 0 00-2 0v1.586l-.293-.293a.999.999 0 10-1.414 1.414l2 2a.999.999 0 001.414 0l2-2a.999.999 0 10-1.414-1.414l-.293.293V9z" fill-rule="evenodd"></path></svg>
66 |                     <span class="sr-only">Download</span>
67 |                 </button>
68 |                 <div id="tooltip-download" role="tooltip" class="absolute z-10 invisible inline-block w-auto px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
69 |                     Download
70 |                     <div class="tooltip-arrow" data-popper-arrow></div>
71 |                 </div>
72 |                 <button type="button" data-tooltip-target="tooltip-copy" data-tooltip-placement="left" class="flex justify-center items-center w-[52px] h-[52px] text-gray-500 hover:text-gray-900 bg-white rounded-full border border-gray-200 dark:border-gray-600 dark:hover:text-white shadow-sm dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 focus:outline-none dark:focus:ring-gray-400">
73 |                     <svg aria-hidden="true" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7 9a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2V9z"></path><path d="M5 3a2 2 0 00-2 2v6a2 2 0 002 2V5h8a2 2 0 00-2-2H5z"></path></svg>
74 |                     <span class="sr-only">Copy</span>
75 |                 </button>
76 |                 <div id="tooltip-copy" role="tooltip" class="absolute z-10 invisible inline-block w-auto px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
77 |                     Copy
78 |                     <div class="tooltip-arrow" data-popper-arrow></div>
79 |                 </div>
80 |             </div>
81 |             <button type="button" id="dialButton" aria-controls="speed-dial-menu-default" aria-expanded="false" class="flex items-center justify-center text-white bg-blue-700 rounded-full w-14 h-14 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:focus:ring-blue-800">
82 |                 <svg aria-hidden="true" class="w-8 h-8 transition-transform group-hover:rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
83 |                 <span class="sr-only">Open actions menu</span>
84 |             </button>
85 |         </div>
86 |     </div>
87 | </template>
88 | 


--------------------------------------------------------------------------------
/src/views/Dismiss.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import { Dismiss } from 'flowbite'
 4 | 
 5 | onMounted(() => {
 6 |    // target element that will be dismissed
 7 |     const $targetEl = document.getElementById('targetElement');
 8 | 
 9 |     // optional trigger element
10 |     const $triggerEl = document.getElementById('triggerElement');
11 | 
12 |     // options object
13 |     const options = {
14 |     transition: 'transition-opacity',
15 |     duration: 1000,
16 |     timing: 'ease-out',
17 | 
18 |     // callback functions
19 |     onHide: (context, targetEl) => {
20 |         console.log('element has been dismissed')
21 |         console.log(targetEl)
22 |     }
23 |     };
24 | 
25 |     if ($targetEl) {
26 |         /*
27 |         * targetEl: required
28 |         * triggerEl: optional
29 |         * options: optional
30 |         */
31 |         const dismiss = new Dismiss($targetEl, $triggerEl, options);
32 | 
33 |         // programatically hide it
34 |         // dismiss.hide();
35 | 
36 |     }
37 | })
38 | </script>
39 | 
40 | <template>
41 |   <div class="max-w-2xl p-4 mx-auto">
42 |         <button id="triggerElement" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Hide alert</button>
43 | 
44 |         <div id="targetElement" class="p-4 mb-4 text-sm text-blue-700 bg-blue-100 rounded-lg dark:bg-blue-200 dark:text-blue-800" role="alert">
45 |         <span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
46 |         </div>
47 |     </div>
48 | </template>
49 | 


--------------------------------------------------------------------------------
/src/views/Drawer.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import { initFlowbite } from 'flowbite'
 4 | // initialize components based on data attribute selectors
 5 | onMounted(() => {
 6 |     initFlowbite();
 7 | })
 8 | </script>
 9 | 
10 | <template>
11 |   
12 | 
13 | <!-- drawer init and toggle -->
14 | <div class="text-center">
15 |    <button class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800" type="button" data-drawer-target="drawer-example" data-drawer-show="drawer-example" aria-controls="drawer-example">
16 |    Show drawer
17 |    </button>
18 | </div>
19 | 
20 | <!-- drawer component -->
21 | <div id="drawer-example" class="fixed top-0 left-0 z-40 h-screen p-4 overflow-y-auto transition-transform -translate-x-full bg-white w-80 dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-label">
22 |    <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-4 h-4 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
23 |     <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
24 |   </svg>Info</h5>
25 |    <button type="button" data-drawer-hide="drawer-example" aria-controls="drawer-example" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 end-2.5 flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white" >
26 |       <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
27 |          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
28 |       </svg>
29 |       <span class="sr-only">Close menu</span>
30 |    </button>
31 |       
32 |    <p class="mb-6 text-sm text-gray-500 dark:text-gray-400">Supercharge your hiring by taking advantage of our <a href="#" class="text-blue-600 underline dark:text-blue-500 hover:no-underline">limited-time sale</a> for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design job board.</p>
33 |    <div class="grid grid-cols-2 gap-4">
34 |       <a href="#" class="px-4 py-2 text-sm font-medium text-center text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Learn more</a>
35 |       <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Get access <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
36 |     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
37 |   </svg></a>
38 |    </div>
39 | </div>
40 | 
41 | </template>
42 | 


--------------------------------------------------------------------------------
/src/views/Dropdown.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import { Dropdown } from 'flowbite'
 4 | 
 5 | onMounted(() => {
 6 |    // set the dropdown menu element
 7 |     const $targetEl = document.getElementById('dropdownMenu');
 8 | 
 9 |     // set the element that trigger the dropdown menu on click
10 |     const $triggerEl = document.getElementById('dropdownButton');
11 | 
12 |     // options with default values
13 |     const options = {
14 |     placement: 'bottom',
15 |     offsetSkidding: 0,
16 |     offsetDistance: 10,
17 |     onHide: () => {
18 |         console.log('dropdown has been hidden');
19 |     },
20 |     onShow: () => {
21 |         console.log('dropdown has been shown');
22 |     }
23 |     };
24 | 
25 |     if ($targetEl) {
26 |         /*
27 |         * targetEl: required
28 |         * triggerEl: required
29 |         * options: optional
30 |         */
31 |         const dropdown = new Dropdown($targetEl, $triggerEl, options);
32 | 
33 |         // show the dropdown
34 |         dropdown.show();
35 |     }
36 | })
37 | </script>
38 | 
39 | <template>
40 |   <div class="max-w-2xl p-4 mx-auto">
41 |     <button id="dropdownButton" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">Dropdown button <svg aria-hidden="true" class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></button>
42 |     <!-- Dropdown menu -->
43 |     <div id="dropdownMenu" class="z-10 hidden bg-white divide-y divide-gray-100 rounded shadow w-44 dark:bg-gray-700">
44 |         <ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownButton">
45 |         <li>
46 |             <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
47 |         </li>
48 |         <li>
49 |             <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
50 |         </li>
51 |         <li>
52 |             <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
53 |         </li>
54 |         <li>
55 |             <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Sign out</a>
56 |         </li>
57 |         </ul>
58 |     </div>
59 | </div>
60 | </template>
61 | 


--------------------------------------------------------------------------------
/src/views/Events.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { onMounted } from 'vue'
  3 | import { initFlowbite } from 'flowbite'
  4 | // initialize components based on data attribute selectors
  5 | onMounted(() => {
  6 |     initFlowbite();
  7 | 
  8 |     // full list:
  9 |     // initAccordions();
 10 |     // initCarousels();
 11 |     // initCollapses();
 12 |     // initDials();
 13 |     // initDismisses();
 14 |     // initDrawers();
 15 |     // initDropdowns();
 16 |     // initModals();
 17 |     // initPopovers();
 18 |     // initTabs();
 19 |     // initTooltips();
 20 | })
 21 | </script>
 22 | 
 23 | <template>
 24 |     <div class="relative max-w-sm">
 25 |         <div class="absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none">
 26 |             <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
 27 |             <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
 28 |             </svg>
 29 |         </div>
 30 |         <input datepicker id="default-datepicker" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 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" placeholder="Select date">
 31 |     </div>
 32 | 
 33 |     <div class="flex justify-center space-x-4 m-5">
 34 |         <button id="defaultModalButton" data-tooltip-target="tooltip-default" data-modal-toggle="defaultModal" data-modal-target="defaultModal" class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
 35 |         Show Modal
 36 |         </button>
 37 |         <div id="tooltip-default" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
 38 |             Tooltip content
 39 |             <div class="tooltip-arrow" data-popper-arrow></div>
 40 |         </div>
 41 | 
 42 |         <!-- drawer init and toggle -->
 43 |         <div class="text-center">
 44 |             <button class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800" type="button" data-drawer-target="drawer-example" data-drawer-show="drawer-example" aria-controls="drawer-example">
 45 |             Show drawer
 46 |             </button>
 47 |         </div>
 48 |     </div>
 49 | 
 50 |     <!-- drawer component -->
 51 |     <div id="drawer-example" class="fixed z-40 h-screen p-4 overflow-y-auto bg-white w-80 dark:bg-gray-800 transition-transform left-0 top-0 -translate-x-full" tabindex="-1" aria-labelledby="drawer-label">
 52 |         <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>
 53 |         <button type="button" data-drawer-hide="drawer-example" 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" >
 54 |             <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>
 55 |             <span class="sr-only">Close menu</span>
 56 |         </button>
 57 |         <p class="mb-6 text-sm text-gray-500 dark:text-gray-400">Supercharge your hiring by taking advantage of our <a href="#" class="text-blue-600 underline dark:text-blue-500 hover:no-underline">limited-time sale</a> for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design job board.</p>
 58 |         <div class="grid grid-cols-2 gap-4">
 59 |             <a href="#" class="px-4 py-2 text-sm font-medium text-center text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Learn more</a>
 60 |             <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Get access <svg class="w-4 h-4 ml-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></a>
 61 |         </div>
 62 |     </div>
 63 | 
 64 |     <div id="defaultModal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-modal md:h-full">
 65 |         <div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
 66 |             <div class="relative p-4 bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5">
 67 |                 <div class="flex justify-between items-center pb-4 mb-4 rounded-t border-b sm:mb-5 dark:border-gray-600">
 68 |                     <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
 69 |                         Add Product
 70 |                     </h3>
 71 |                     <button type="button" 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" data-modal-toggle="defaultModal">
 72 |                         <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>
 73 |                         <span class="sr-only">Close modal</span>
 74 |                     </button>
 75 |                 </div>
 76 |                 <form action="#">
 77 |                     <div class="grid gap-4 mb-4 sm:grid-cols-2">
 78 |                         <div>
 79 |                             <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Name</label>
 80 |                             <input type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 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" placeholder="Type product name" required="">
 81 |                         </div>
 82 |                         <div>
 83 |                             <label for="brand" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Brand</label>
 84 |                             <input type="text" name="brand" id="brand" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 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" placeholder="Product brand" required="">
 85 |                         </div>
 86 |                         <div>
 87 |                             <label for="price" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Price</label>
 88 |                             <input type="number" name="price" id="price" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 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" placeholder="$2999" required="">
 89 |                         </div>
 90 |                         <div>
 91 |                             <label for="category" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Category</label>
 92 |                             <select id="category" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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">
 93 |                                 <option selected="">Select category</option>
 94 |                                 <option value="TV">TV/Monitors</option>
 95 |                                 <option value="PC">PC</option>
 96 |                                 <option value="GA">Gaming/Console</option>
 97 |                                 <option value="PH">Phones</option>
 98 |                             </select>
 99 |                         </div>
100 |                         <div class="sm:col-span-2">
101 |                             <label for="description" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Description</label>
102 |                             <textarea id="description" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 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" placeholder="Write product description here"></textarea>                    
103 |                         </div>
104 |                     </div>
105 |                     <button type="submit" class="text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
106 |                         <svg class="mr-1 -ml-1 w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
107 |                         Add new product
108 |                     </button>
109 |                 </form>
110 |             </div>
111 |         </div>
112 |     </div>
113 | </template>


--------------------------------------------------------------------------------
/src/views/InputCounter.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import { InputCounter } from 'flowbite';
 4 | 
 5 | onMounted(() => {
 6 |     // set the target element of the input field
 7 |     const $targetEl = document.getElementById('counter-input-example');
 8 | 
 9 |     // optionally set the increment and decrement elements
10 |     const $incrementEl = document.getElementById('increment-button');
11 | 
12 |     const $decrementEl = document.getElementById('decrement-button');
13 | 
14 |     // optional options with default values and callback functions
15 |     const options = {
16 |         minValue: 0,
17 |         maxValue: null, // infinite
18 |         onIncrement: () => {
19 |             console.log('input field value has been incremented');
20 |         },
21 |         onDecrement: () => {
22 |             console.log('input field value has been decremented');
23 |         }
24 |     };
25 | 
26 |     const instanceOptions = {
27 |         id: 'counter-input-example',
28 |         override: true
29 |     };
30 | 
31 |     if ($targetEl) {
32 |         const counterInput = new InputCounter($targetEl, $incrementEl, $decrementEl, options, instanceOptions);
33 |     }
34 | })
35 | </script>
36 | 
37 | <template>
38 |   <form class="max-w-xs mx-auto">
39 |         <label for="counter-input-example" class="block mb-1 text-sm font-medium text-gray-900 dark:text-white">Choose quantity:</label>
40 |         <div class="relative flex items-center">
41 |             <button type="button" id="decrement-button" class="flex-shrink-0 bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 inline-flex items-center justify-center border border-gray-300 rounded-md h-5 w-5 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none">
42 |                 <svg class="w-2.5 h-2.5 text-gray-900 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 2">
43 |                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h16"/>
44 |                 </svg>
45 |             </button>
46 |             <input type="text" id="counter-input-example" class="flex-shrink-0 text-gray-900 dark:text-white border-0 bg-transparent text-sm font-normal focus:outline-none focus:ring-0 max-w-[2.5rem]" placeholder="" value="12" required>
47 |             <button type="button" id="increment-button" class="flex-shrink-0 bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 inline-flex items-center justify-center border border-gray-300 rounded-md h-5 w-5 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none">
48 |                 <svg class="w-2.5 h-2.5 text-gray-900 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
49 |                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
50 |                 </svg>
51 |             </button>
52 |         </div>
53 |     </form>
54 | </template>
55 | 


--------------------------------------------------------------------------------
/src/views/Modal.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import { initFlowbite } from 'flowbite'
 4 | // initialize components based on data attribute selectors
 5 | onMounted(() => {
 6 |     initFlowbite();
 7 | })
 8 | </script>
 9 | 
10 | <template>
11 |   
12 | 
13 | <!-- Modal toggle -->
14 | <button data-modal-target="default-modal" data-modal-toggle="default-modal" class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
15 |   Toggle modal
16 | </button>
17 | 
18 | <!-- Main modal -->
19 | <div id="default-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
20 |     <div class="relative p-4 w-full max-w-2xl max-h-full">
21 |         <!-- Modal content -->
22 |         <div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
23 |             <!-- Modal header -->
24 |             <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200">
25 |                 <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
26 |                     Terms of Service
27 |                 </h3>
28 |                 <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="default-modal">
29 |                     <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
30 |                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
31 |                     </svg>
32 |                     <span class="sr-only">Close modal</span>
33 |                 </button>
34 |             </div>
35 |             <!-- Modal body -->
36 |             <div class="p-4 md:p-5 space-y-4">
37 |                 <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
38 |                     With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
39 |                 </p>
40 |                 <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
41 |                     The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
42 |                 </p>
43 |             </div>
44 |             <!-- Modal footer -->
45 |             <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
46 |                 <button data-modal-hide="default-modal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
47 |                 <button data-modal-hide="default-modal" type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Decline</button>
48 |             </div>
49 |         </div>
50 |     </div>
51 | </div>
52 | 
53 | </template>
54 | 


--------------------------------------------------------------------------------
/src/views/Popover.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import { Popover } from 'flowbite'
 4 | 
 5 | onMounted(() => {
 6 |    // set the popover content element
 7 |     const $targetEl = document.getElementById('popoverContent');
 8 | 
 9 |     // set the element that trigger the popover using hover or click
10 |     const $triggerEl = document.getElementById('popoverButton');
11 | 
12 |     // options with default values
13 |     const options = {
14 |     placement: 'top',
15 |     triggerType: 'hover',
16 |     offset: 10,
17 |     onHide: () => {
18 |         console.log('popover is shown');
19 |     },
20 |     onShow: () => {
21 |         console.log('popover is hidden');
22 |     }
23 |     };
24 | 
25 |     if ($targetEl) {
26 |         /*
27 |         * targetEl: required
28 |         * triggerEl: required
29 |         * options: optional
30 |         */
31 |         const popover = new Popover($targetEl, $triggerEl, options);
32 | 
33 |         popover.show();
34 |     }
35 | })
36 | </script>
37 | 
38 | <template>
39 |   <div class="flex justify-center max-w-2xl p-4 mx-auto pt-36">
40 |     <button id="popoverButton" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Default popover</button>
41 |     <div data-popover id="popoverContent" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
42 |         <div class="px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
43 |             <h3 class="font-semibold text-gray-900 dark:text-white">Popover title</h3>
44 |         </div>
45 |         <div class="px-3 py-2">
46 |             <p>And here's some amazing content. It's very engaging. Right?</p>
47 |         </div>
48 |         <div data-popper-arrow></div>
49 |     </div>
50 | </div>
51 | </template>
52 | 


--------------------------------------------------------------------------------
/src/views/Tabs.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import { Tabs } from 'flowbite'
 4 | 
 5 | onMounted(() => {
 6 |     const tabsElement = document.getElementById('tabs-example');
 7 | 
 8 |    // create an array of objects with the id, trigger element (eg. button), and the content element
 9 |     const tabElements = [
10 |         {
11 |             id: 'profile',
12 |             triggerEl: document.querySelector('#profile-tab-example'),
13 |             targetEl: document.querySelector('#profile-example')
14 |         },
15 |         {
16 |             id: 'dashboard',
17 |             triggerEl: document.querySelector('#dashboard-tab-example'),
18 |             targetEl: document.querySelector('#dashboard-example')
19 |         },
20 |         {
21 |             id: 'settings',
22 |             triggerEl: document.querySelector('#settings-tab-example'),
23 |             targetEl: document.querySelector('#settings-example')
24 |         },
25 |         {
26 |             id: 'contacts',
27 |             triggerEl: document.querySelector('#contacts-tab-example'),
28 |             targetEl: document.querySelector('#contacts-example')
29 |         }
30 |     ];
31 | 
32 |     // options with default values
33 |     const options = {
34 |         defaultTabId: 'settings',
35 |         activeClasses: 'text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-400 border-blue-600 dark:border-blue-500',
36 |         inactiveClasses: 'text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300',
37 |         onShow: () => {
38 |             console.log('tab is shown');
39 |         }
40 |     };
41 | 
42 |     if (document.querySelector('#profile-tab-example')) {
43 |         /*
44 |         * tabElements: array of tab objects
45 |         * options: optional
46 |         */
47 |         const tabs = new Tabs(tabsElement, tabElements, options);
48 | 
49 |         // open tab item based on id
50 |         tabs.show('contacts');
51 |     }
52 | })
53 | </script>
54 | 
55 | <template>
56 |   <div class="max-w-2xl p-4 mx-auto">
57 |         <div class="mb-4 border-b border-gray-200 dark:border-gray-700">
58 |             <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">
59 |                 <li class="mr-2" role="presentation">
60 |                     <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>
61 |                 </li>
62 |                 <li class="mr-2" role="presentation">
63 |                     <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="dashboard-tab-example" type="button" role="tab" aria-controls="dashboard-example" aria-selected="false">Dashboard</button>
64 |                 </li>
65 |                 <li class="mr-2" role="presentation">
66 |                     <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="settings-tab-example" type="button" role="tab" aria-controls="settings-example" aria-selected="false">Settings</button>
67 |                 </li>
68 |                 <li role="presentation">
69 |                     <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="contacts-tab-example" type="button" role="tab" aria-controls="contacts-example" aria-selected="false">Contacts</button>
70 |                 </li>
71 |             </ul>
72 |         </div>
73 |         <div id="tabContentExample">
74 |             <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="profile-example" role="tabpanel" aria-labelledby="profile-tab-example">
75 |                 <p class="text-sm text-gray-500 dark:text-gray-400">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Profile tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
76 |             </div>
77 |             <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="dashboard-example" role="tabpanel" aria-labelledby="dashboard-tab-example">
78 |                 <p class="text-sm text-gray-500 dark:text-gray-400">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Dashboard tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
79 |             </div>
80 |             <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="settings-example" role="tabpanel" aria-labelledby="settings-tab-example">
81 |                 <p class="text-sm text-gray-500 dark:text-gray-400">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Settings tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
82 |             </div>
83 |             <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="contacts-example" role="tabpanel" aria-labelledby="contacts-tab-example">
84 |                 <p class="text-sm text-gray-500 dark:text-gray-400">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Contacts tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
85 |             </div>
86 |         </div>
87 |     </div>
88 | </template>
89 | 


--------------------------------------------------------------------------------
/src/views/Tooltip.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import { Tooltip } from 'flowbite'
 4 | 
 5 | onMounted(() => {
 6 |    // set the tooltip content element
 7 |     const $targetEl = document.getElementById('tooltipContent');
 8 | 
 9 |     // set the element that trigger the tooltip using hover or click
10 |     const $triggerEl = document.getElementById('tooltipButton');
11 | 
12 |     // options with default values
13 |     const options = {
14 |     placement: 'top',
15 |     triggerType: 'hover',
16 |     onHide: () => {
17 |         console.log('tooltip is shown');
18 |     },
19 |     onShow: () => {
20 |         console.log('tooltip is hidden');
21 |     }
22 |     };
23 | 
24 |     if ($targetEl) {
25 |         /*
26 |         * targetEl: required
27 |         * triggerEl: required
28 |         * options: optional
29 |         */
30 |         const tooltip = new Tooltip($targetEl, $triggerEl, options);
31 | 
32 |         // show the tooltip
33 |         tooltip.show();
34 |     }
35 | })
36 | </script>
37 | 
38 | <template>
39 |   <div class="flex justify-center max-w-2xl p-4 mx-auto pt-26">
40 |         <button id="tooltipButton" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Default tooltip</button>
41 |         <div id="tooltipContent" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
42 |             Tooltip content
43 |             <div class="tooltip-arrow" data-popper-arrow></div>
44 |         </div>
45 |     </div>
46 | </template>
47 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | import tailwindcss from '@tailwindcss/vite'
 4 | 
 5 | // https://vite.dev/config/
 6 | export default defineConfig({
 7 |   plugins: [
 8 |     vue(), 
 9 |     tailwindcss()
10 |   ],
11 | })
12 | 


--------------------------------------------------------------------------------