Merge branch 'themesberg:main' into feature/spinner-progress/custom-colors

wazeerc · web-flow · commit dc158cbedf83 · 2025-07-18T20:24:21.000+04:00
diff --git a/docs/components/button-group.md b/docs/components/button-group.md
@@ -80,21 +80,11 @@ You can also mix buttons with dropdowns inside the button group.
     </fwb-dropdown>
     <fwb-dropdown text="Dropdown with list">
       <fwb-list-group>
-        <fwb-list-group-item hover>
-          <a href="#">These</a>
-        </fwb-list-group-item>
-        <fwb-list-group-item hover>
-          <a href="#">are</a>
-        </fwb-list-group-item>
-        <fwb-list-group-item hover>
-          <a href="#">some</a>
-        </fwb-list-group-item>
-        <fwb-list-group-item hover>
-          <a href="#">list</a>
-        </fwb-list-group-item>
-        <fwb-list-group-item hover>
-          <a href="#">items</a>
-        </fwb-list-group-item>
+        <fwb-list-group-item href="#"> These </fwb-list-group-item>
+        <fwb-list-group-item href="#"> are </fwb-list-group-item>
+        <fwb-list-group-item href="#"> some </fwb-list-group-item>
+        <fwb-list-group-item href="#"> list </fwb-list-group-item>
+        <fwb-list-group-item href="#"> items </fwb-list-group-item>
       </fwb-list-group>
     </fwb-dropdown>
   </fwb-button-group>
diff --git a/docs/components/buttonGroup/examples/FwbButtonGroupExampleDropdown.vue b/docs/components/buttonGroup/examples/FwbButtonGroupExampleDropdown.vue
@@ -10,20 +10,20 @@
       </fwb-dropdown>
       <fwb-dropdown text="Dropdown with list">
         <fwb-list-group>
-          <fwb-list-group-item hover>
-            <a href="#">These</a>
+          <fwb-list-group-item href="#">
+            These
           </fwb-list-group-item>
-          <fwb-list-group-item hover>
-            <a href="#">are</a>
+          <fwb-list-group-item href="#">
+            are
           </fwb-list-group-item>
-          <fwb-list-group-item hover>
-            <a href="#">some</a>
+          <fwb-list-group-item href="#">
+            some
           </fwb-list-group-item>
-          <fwb-list-group-item hover>
-            <a href="#">list</a>
+          <fwb-list-group-item href="#">
+            list
           </fwb-list-group-item>
-          <fwb-list-group-item hover>
-            <a href="#">items</a>
+          <fwb-list-group-item href="#">
+            items
           </fwb-list-group-item>
         </fwb-list-group>
       </fwb-dropdown>
diff --git a/docs/components/card.md b/docs/components/card.md
@@ -20,7 +20,7 @@ Use these responsive card components to show data entries and information to you
 <fwb-card-example />
 ```vue
 <template>
-    <fwb-card href="#">
+    <fwb-card href="#" class="w-sm">
       <div class="p-5">
         <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
           Noteworthy technology acquisitions 2021
@@ -46,6 +46,7 @@ import { FwbCard } from 'flowbite-vue'
       img-alt="Desk"
       img-src="https://flowbite.com/docs/images/blog/image-1.jpg"
       variant="image"
+      class="w-md"
     >
       <div class="p-5">
         <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
@@ -72,6 +73,7 @@ import { FwbCard } from 'flowbite-vue'
       img-alt="Desk"
       img-src="https://flowbite.com/docs/images/blog/image-4.jpg"
       variant="horizontal"
+      class="w-lg"
     >
       <div class="p-5">
         <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
diff --git a/docs/components/card/examples/FwbCardExample.vue b/docs/components/card/examples/FwbCardExample.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="vp-raw inline-flex flex-wrap gap-2">
-    <fwb-card href="#">
+    <fwb-card href="#" class="w-sm">
       <div class="p-5">
         <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
           Noteworthy technology acquisitions 2021
diff --git a/docs/components/card/examples/FwbCardExampleHorizontal.vue b/docs/components/card/examples/FwbCardExampleHorizontal.vue
@@ -4,6 +4,7 @@
       img-alt="Desk"
       img-src="https://flowbite.com/docs/images/blog/image-4.jpg"
       variant="horizontal"
+      class="w-lg"
     >
       <div class="p-5">
         <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
diff --git a/docs/components/card/examples/FwbCardExampleImage.vue b/docs/components/card/examples/FwbCardExampleImage.vue
@@ -4,6 +4,7 @@
       img-alt="Desk"
       img-src="https://flowbite.com/docs/images/blog/image-1.jpg"
       variant="image"
+      class="w-md"
     >
       <div class="p-5">
         <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md
@@ -144,16 +144,16 @@ import { FwbDropdown } from 'flowbite-vue'
 <template>
     <fwb-dropdown text="Menu" content-class="rounded-lg">
       <fwb-list-group class="text-sm text-gray-700 dark:text-gray-200">
-        <fwb-list-group-item class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+        <fwb-list-group-item to="#">
           Dashboard
         </fwb-list-group-item>
-        <fwb-list-group-item class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+        <fwb-list-group-item href="#">
           Settings
         </fwb-list-group-item>
-        <fwb-list-group-item class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+        <fwb-list-group-item href="#">
           Earnings
         </fwb-list-group-item>
-        <fwb-list-group-item class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+        <fwb-list-group-item @click="signOut">
           Sign out
         </fwb-list-group-item>
       </fwb-list-group>
diff --git a/docs/components/dropdown/examples/FwbDropdownExampleListGroup.vue b/docs/components/dropdown/examples/FwbDropdownExampleListGroup.vue
@@ -5,16 +5,16 @@
       content-wrapper-class="rounded-lg"
     >
       <fwb-list-group class="text-sm text-gray-700 dark:text-gray-200">
-        <fwb-list-group-item class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+        <fwb-list-group-item to="#">
           Dashboard
         </fwb-list-group-item>
-        <fwb-list-group-item class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+        <fwb-list-group-item href="#">
           Settings
         </fwb-list-group-item>
-        <fwb-list-group-item class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+        <fwb-list-group-item href="#">
           Earnings
         </fwb-list-group-item>
-        <fwb-list-group-item class="cursor-pointer border-b-0 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+        <fwb-list-group-item @click="signOut">
           Sign out
         </fwb-list-group-item>
       </fwb-list-group>
@@ -24,4 +24,5 @@
 
 <script lang="ts" setup>
 import { FwbDropdown, FwbListGroup, FwbListGroupItem } from '../../../../src/index'
+const signOut = () => {}
 </script>
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
@@ -1,7 +1,7 @@
 <script setup>
 import FwbListGroupExample from './listGroup/examples/FwbListGroupExample.vue'
 import FwbListGroupExampleDisabled from './listGroup/examples/FwbListGroupExampleDisabled.vue'
-import FwbListGroupExampleHover from './listGroup/examples/FwbListGroupExampleHover.vue'
+import FwbListGroupExampleLink from './listGroup/examples/FwbListGroupExampleLink.vue'
 import FwbListGroupExampleIcon from './listGroup/examples/FwbListGroupExampleIcon.vue'
 </script>
 
@@ -36,17 +36,27 @@ import { FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
 </script>
 ```
 
-## Hover
+## Links
 
-<fwb-list-group-example-hover />
+:::tip
+`href` prop is used for external links. `to` prop is used for internal links. `target` prop is used to set the target attribute for external links, the hover effect is automatically enabled.
+:::
+<fwb-list-group-example-link />
 ```vue
 <template>
   <fwb-list-group>
-    <fwb-list-group-item active hover>Item 1</fwb-list-group-item>
-    <fwb-list-group-item hover>Item 2</fwb-list-group-item>
-    <fwb-list-group-item hover>Item 3</fwb-list-group-item>
-    <fwb-list-group-item hover>Item 4</fwb-list-group-item>
-    <fwb-list-group-item hover>Item 5</fwb-list-group-item>
+    <fwb-list-group-item active href="#">
+      Link with href (active)
+    </fwb-list-group-item>
+    <fwb-list-group-item href="https://flowbite.com" target="__blank">
+      External link (target blank)
+    </fwb-list-group-item>
+    <fwb-list-group-item to="#">
+      Router link
+    </fwb-list-group-item>
+    <fwb-list-group-item>
+      Regular item (no hover)
+    </fwb-list-group-item>
   </fwb-list-group>
 </template>
 
diff --git a/docs/components/listGroup/examples/FwbListGroupExampleLink.vue b/docs/components/listGroup/examples/FwbListGroupExampleLink.vue
@@ -3,22 +3,20 @@
     <fwb-list-group>
       <fwb-list-group-item
         active
-        hover
+        href="#"
       >
-        Item 1
+        Link with href (active)
       </fwb-list-group-item>
-      <fwb-list-group-item hover>
-        Item 2
-      </fwb-list-group-item>
-      <fwb-list-group-item hover>
-        Item 3
-      </fwb-list-group-item>
-      <fwb-list-group-item hover>
-        Item 4
+      <fwb-list-group-item
+        href="https://flowbite.com"
+        target="__blank"
+      >
+        External link
       </fwb-list-group-item>
-      <fwb-list-group-item hover>
-        Item 5
+      <fwb-list-group-item to="#">
+        Router link
       </fwb-list-group-item>
+      <fwb-list-group-item> Regular item (no hover) </fwb-list-group-item>
     </fwb-list-group>
   </div>
 </template>
diff --git a/src/components/FwbCard/FwbCard.vue b/src/components/FwbCard/FwbCard.vue
@@ -1,7 +1,7 @@
 <template>
   <component
     :is="wrapperType"
-    :class="cardClasses"
+    :class="[cardClasses, props.class]"
     :href="href"
   >
     <img
@@ -41,6 +41,10 @@ const props = defineProps({
     type: String as PropType<CardsVariant>,
     default: 'default',
   },
+  class: {
+    type: String,
+    default: '',
+  },
 })
 
 const { cardClasses, horizontalImageClasses } = useCardsClasses(toRefs(props))
diff --git a/src/components/FwbCard/composables/useCardClasses.ts b/src/components/FwbCard/composables/useCardClasses.ts
@@ -5,6 +5,7 @@ import type { CardsVariant } from '../types'
 export type UseCardsClassesProps = {
   variant: Ref<CardsVariant>
   href?: Ref<string>
+  class?: Ref<string>
 }
 
 export function useCardsClasses (props: UseCardsClassesProps): {
@@ -13,17 +14,20 @@ export function useCardsClasses (props: UseCardsClassesProps): {
 } {
   const cardClasses = computed(() => {
     let computedClasses = ''
+
     if (props.variant.value === 'image') {
-      computedClasses = 'max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700'
+      computedClasses = 'min-w-sm rounded-lg border border-gray-200 shadow-md dark:border-gray-700'
+    } else if (props.variant.value === 'default') {
+      computedClasses = 'block min-w-sm rounded-lg border border-gray-200 shadow-md dark:border-gray-700 '
+    } else if (props.variant.value === 'horizontal') {
+      computedClasses = 'flex flex-col items-center rounded-lg border shadow-md md:flex-row md:min-w-xl dark:border-gray-700'
     }
 
-    if (props.variant.value === 'default') {
-      computedClasses = 'block max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700 '
-    } else if (props.variant.value === 'horizontal') {
-      computedClasses = 'flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl dark:border-gray-700 dark:bg-gray-800'
+    if (!props.class?.value || (!props.class.value.includes('bg-'))) {
+      computedClasses += ' bg-white dark:bg-gray-800'
     }
 
-    if (props.href?.value) {
+    if (props.href?.value && !props.class?.value) {
       computedClasses += ' hover:bg-gray-100 dark:hover:bg-gray-700'
     }
 
diff --git a/src/components/FwbListGroup/FwbListGroupItem.vue b/src/components/FwbListGroup/FwbListGroupItem.vue
@@ -1,5 +1,10 @@
 <template>
-  <li :class="itemClasses">
+  <component
+    :is="componentTag"
+    :class="itemClasses"
+    :target="showTarget ? target : undefined"
+    v-bind="linkAttr ? { [linkAttr]: linkTarget } : {}"
+  >
     <div
       v-if="$slots.prefix"
       class="mr-2"
@@ -13,19 +18,16 @@
     >
       <slot name="suffix" />
     </div>
-  </li>
+  </component>
 </template>
 
 <script lang="ts" setup>
-import { toRefs } from 'vue'
+import { computed, resolveComponent, toRef, useAttrs } from 'vue'
 
 import { useListGroupItemClasses } from './composables/useListGroupItemClasses'
 
+const attrs = useAttrs()
 const props = defineProps({
-  hover: {
-    type: Boolean,
-    default: false,
-  },
   disabled: {
     type: Boolean,
     default: false,
@@ -34,7 +36,51 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  to: {
+    type: [String, Object],
+    default: null,
+  },
+  href: {
+    type: String,
+    default: null,
+  },
+  target: {
+    type: String,
+    default: '_self',
+  },
+  tag: {
+    type: String,
+    default: 'li',
+  },
+})
+
+const isLink = computed(() => !!props.href || !!props.to)
+const isRouterLink = computed(() => props.tag === 'router-link' || props.tag === 'nuxt-link')
+const linkComponent = computed(() => {
+  if (isRouterLink.value) {
+    return resolveComponent(props.tag)
+  }
+  return props.tag !== 'li' ? props.tag : 'a'
 })
+const componentTag = computed(() => {
+  if (!isLink.value) return props.tag
+  if (props.to) {
+    return linkComponent.value
+  }
+  return 'a'
+})
+const linkAttr = computed(() => {
+  if (!isLink.value) return null
+  return isRouterLink.value
+    ? 'to'
+    : 'href'
+})
+const linkTarget = computed(() => props.to || props.href)
+const showTarget = computed(() => !!props.href && !props.to)
+
+const disabled = toRef(props, 'disabled')
+const active = toRef(props, 'active')
+const hover = computed(() => isLink.value || !!attrs.onClick)
 
-const { itemClasses } = useListGroupItemClasses(toRefs(props))
+const { itemClasses } = useListGroupItemClasses({ disabled, active, hover })
 </script>
diff --git a/src/components/FwbListGroup/composables/useListGroupItemClasses.ts b/src/components/FwbListGroup/composables/useListGroupItemClasses.ts
@@ -3,7 +3,7 @@ import { computed, type Ref } from 'vue'
 import { useMergeClasses } from '@/composables/useMergeClasses'
 
 const defaultItemClasses = 'inline-flex items-center w-full px-4 py-2 border-b border-gray-200 dark:border-gray-600'
-const hoverItemClasses = 'block w-full px-4 py-2 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:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white'
+const hoverItemClasses = 'w-full px-4 py-2 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:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white'
 const disabledItemClasses = 'bg-gray-100 cursor-not-allowed dark:bg-gray-600 dark:text-gray-400'
 const activeItemClasses = 'text-white bg-blue-700 dark:bg-gray-800 hover:text-white hover:bg-blue-700 hover:dark:bg-gray-800'
 
diff --git a/src/components/FwbTextarea/FwbTextarea.vue b/src/components/FwbTextarea/FwbTextarea.vue
diff --git a/src/components/FwbToggle/FwbToggle.vue b/src/components/FwbToggle/FwbToggle.vue

Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@`
`4`	`4`	`img-alt="Desk"`
`5`	`5`	`img-src="https://flowbite.com/docs/images/blog/image-4.jpg"`
`6`	`6`	`variant="horizontal"`
	`7`	`+ class="w-lg"`
`7`	`8`	`>`
`8`	`9`	`<div class="p-5">`
`9`	`10`	`<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">`