maintenance: minor fixes (#353)

* WIP: accordion custom classes

* feature: custom classes added to accordion

* Accordion documentation updated

* fix: prop names fixed in the docs

* fix: extra line removed

* fix: ReferenceErrors in documentation build

* fix: button props type name

Author: Sqrcz

docs/.vitepress/config.mts renamed to docs/.vitepress/config.ts

@@ -99,6 +99,7 @@ function getTypography () {
  */
 export default defineConfig({
   title: 'Flowbite Vue 3',
+  description: 'Flowbite Vue is an open-source UI component library built with Vue components, Tailwind CSS utility classes and based on the Flowbite design system and components.',
   cleanUrls: true,
   head: [
     ['link', { rel: 'icon', type: 'image/svg', href: '/assets/logo.svg' }],
@@ -136,7 +137,7 @@ export default defineConfig({
 
     footer: {
       message: 'Released under the MIT License.',
-      copyright: 'Copyright © 2023 Flowbite™',
+      copyright: `Copyright © ${new Date().getFullYear()} Flowbite™`,
     },
   },
 })

docs/components/button-group.md

@@ -1,7 +1,12 @@
 <script setup>
+import { defineClientComponent } from 'vitepress'
+
 import FwbButtonGroupExample from './buttonGroup/examples/FwbButtonGroupExample.vue'
 import FwbButtonGroupExampleIcon from './buttonGroup/examples/FwbButtonGroupExampleIcon.vue'
-import FwbButtonGroupExampleDropdown from './buttonGroup/examples/FwbButtonGroupExampleDropdown.vue'
+
+const FwbButtonGroupExampleDropdown = defineClientComponent(() => {
+  return import('./buttonGroup/examples/FwbButtonGroupExampleDropdown.vue')
+})
 </script>
 
 # Vue Button Group - Flowbite
@@ -98,4 +103,4 @@ You can also mix buttons with dropdowns inside the button group.
 <script setup>
   import { FwbButtonGroup, FwbButton, FwbDropdown, FwbListGroupItem, FwbListGroup } from 'flowbite-vue'
 </script>
-```
+```

docs/components/dropdown.md

@@ -1,12 +1,30 @@
 <script setup>
-import FwbDropdownExamplePlacement from './dropdown/examples/FwbDropdownExamplePlacement.vue'
-import FwbDropdownExampleAlignment from './dropdown/examples/FwbDropdownExampleAlignment.vue'
-import FwbDropdownExampleListGroup from './dropdown/examples/FwbDropdownExampleListGroup.vue'
-import FwbDropdownExampleButtonColors from './dropdown/examples/FwbDropdownExampleButtonColors.vue'
-import FwbDropdownExampleButtonGroup from './dropdown/examples/FwbDropdownExampleButtonGroup.vue'
-import FwbDropdownExampleDisabled from './dropdown/examples/FwbDropdownExampleDisabled.vue'
-import FwbDropdownExampleTrigger from './dropdown/examples/FwbDropdownExampleTrigger.vue'
-import FwbDropdownExampleCloseInside from './dropdown/examples/FwbDropdownExampleCloseInside.vue'
+import { defineClientComponent } from 'vitepress'
+
+const FwbDropdownExamplePlacement = defineClientComponent(() => {
+  return import('./dropdown/examples/FwbDropdownExamplePlacement.vue')
+})
+const FwbDropdownExampleAlignment = defineClientComponent(() => {
+  return import('./dropdown/examples/FwbDropdownExampleAlignment.vue')
+})
+const FwbDropdownExampleListGroup = defineClientComponent(() => {
+  return import('./dropdown/examples/FwbDropdownExampleListGroup.vue')
+})
+const FwbDropdownExampleButtonColors = defineClientComponent(() => {
+  return import('./dropdown/examples/FwbDropdownExampleButtonColors.vue')
+})
+const FwbDropdownExampleButtonGroup = defineClientComponent(() => {
+  return import('./dropdown/examples/FwbDropdownExampleButtonGroup.vue')
+})
+const FwbDropdownExampleDisabled = defineClientComponent(() => {
+  return import('./dropdown/examples/FwbDropdownExampleDisabled.vue')
+})
+const FwbDropdownExampleTrigger = defineClientComponent(() => {
+  return import('./dropdown/examples/FwbDropdownExampleTrigger.vue')
+})
+const FwbDropdownExampleCloseInside = defineClientComponent(() => {
+  return import('./dropdown/examples/FwbDropdownExampleCloseInside.vue')
+})
 </script>
 
 # Vue Dropdown - Flowbite

docs/components/flowbiteThemable/examples/FlowbiteThemableExampleDropdown.vue

@@ -35,8 +35,25 @@
     </div>
     <div class="inline-flex flex-wrap gap-2">
       <flowbite-themable :theme="activeTheme">
-        <fwb-dropdown text="Dropdown">
-          Dropdown content...
+        <fwb-dropdown>
+          <nav class="py-2 text-sm text-gray-700 dark:text-gray-200">
+            <a
+              href="#"
+              class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+            >Dashboard</a>
+            <a
+              href="#"
+              class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+            >Settings</a>
+            <a
+              href="#"
+              class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+            >Earnings</a>
+            <a
+              href="#"
+              class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+            >Sign out</a>
+          </nav>
         </fwb-dropdown>
       </flowbite-themable>
     </div>

docs/components/flowbiteThemable/flowbiteThemable.md

@@ -1,7 +1,12 @@
 <script setup>
+import { defineClientComponent } from 'vitepress'
+
 import FlowbiteThemableExampleTabs from './examples/FlowbiteThemableExampleTabs.vue'
 import FlowbiteThemableExampleButton from './examples/FlowbiteThemableExampleButton.vue'
-import FlowbiteThemableExampleDropdown from './examples/FlowbiteThemableExampleDropdown.vue'
+
+const FlowbiteThemableExampleDropdown = defineClientComponent(() => {
+  return import('./examples/FlowbiteThemableExampleDropdown.vue')
+})
 </script>
 
 # Vue Themable Configuration - Flowbite

src/components/FwbButton/FwbButton.vue

@@ -86,7 +86,7 @@ import type { ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVarian
 import FwbSpinner from '@/components/FwbSpinner/FwbSpinner.vue'
 import { useMergeClasses } from '@/composables/useMergeClasses'
 
-interface IButtonProps {
+interface ButtonProps {
   class?: string | object
   color?: ButtonVariant
   gradient?: ButtonGradient | null
@@ -101,7 +101,7 @@ interface IButtonProps {
   href?: string
   tag?: string
 }
-const props = withDefaults(defineProps<IButtonProps>(), {
+const props = withDefaults(defineProps<ButtonProps>(), {
   class: '',
   color: 'default',
   gradient: null,