Merge branch 'main' into bulk-import-components

src/components/Dropdown/composables/useDropdownClasses.ts

@@ -5,6 +5,8 @@ import type { DropdownPlacement } from '../types'
 
 const defaultDropdownClasses = 'absolute z-10 bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700'
 
+const defaultGapInPx = 8
+
 const placementDropdownClasses: Record<DropdownPlacement, string> = {
     bottom: '',
     left: 'top-0',
@@ -20,16 +22,16 @@ export type UseDropdownClassesProps = {
 
 const placementCalculators: Record<DropdownPlacement, (rect: DOMRect) => string> = {
     bottom(rect: DOMRect): string {
-        return `bottom: -${rect.height}px;`
+        return `bottom: -${rect.height + defaultGapInPx}px;`
     },
     left(rect: DOMRect): string {
-        return `left: -${rect.width}px;`
+        return `left: -${rect.width + defaultGapInPx}px;`
     },
     right(rect: DOMRect): string {
-        return `right: -${rect.width}px;`
+        return `right: -${rect.width + defaultGapInPx}px;`
     },
     top(rect: DOMRect): string {
-        return `top: -${rect.height}px;`
+        return `top: -${rect.height + defaultGapInPx}px;`
     },
 
 }

src/components/Tabs/Tabs.vue

@@ -5,10 +5,10 @@
         <tab-pane
             v-for="(item, id) in tabsChildren"
             :key="id"
-            :active="modelValueRef === item.props.name"
-            :name="item.props.name"
-            :disabled="item.props.disabled"
-            :title="item.props.title"
+            :active="modelValueRef === item.props?.name"
+            :name="item.props?.name"
+            :disabled="item.props?.disabled"
+            :title="item.props?.title"
         />
       </ul>
     </div>