@dataloop-ai/components 0.19.251 → 0.19.253

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.19.251",
+  "version": "0.19.253",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlDropdownButton/DlDropdownButton.vue

@@ -79,6 +79,7 @@
             :anchor="menuAnchor"
             :self="menuSelf"
             :offset="menuOffset"
+            :z-index="zIndex"
             separate-close-popup
             :disabled="disabled"
             :max-height="maxHeight"
@@ -140,6 +141,7 @@
             :anchor="menuAnchor"
             :self="menuSelf"
             :offset="menuOffset"
+            :z-index="zIndex"
             separate-close-popup
             :disabled="disabled"
             :max-height="maxHeight"
@@ -242,6 +244,15 @@ export default defineComponent({
         arrowNavItems: {
             type: Array as PropType<any[]>,
             default: () => [] as any[]
+        },
+        contentGap: {
+            type: String,
+            required: false,
+            default: null
+        },
+        zIndex: {
+            type: [String, Number],
+            default: null
         }
     },
     emits: [
@@ -309,7 +320,10 @@ export default defineComponent({
             return {
                 '--justify-content': props.fluid
                     ? 'space-between'
-                    : 'space-around'
+                    : 'space-around',
+                ...(props.contentGap && {
+                    '--dl-button-content-gap': props.contentGap
+                })
             }
         })
 

package/src/components/essential/DlMenu/DlMenu.vue

@@ -481,6 +481,20 @@ export default defineComponent({
             emit('highlighted-item', value, arrowNavItems.value[value] ?? null)
         })
 
+        const { zIndex, height, width } = toRefs(props)
+
+        const computedStyles = computed<any>(() => {
+            return [
+                attrs.style,
+                transitionStyle.value,
+                {
+                    '--menu-z-index': zIndex.value ?? 'var(--dl-z-index-menu)',
+                    '--menu-height': height.value,
+                    '--menu-width': width.value
+                }
+            ]
+        })
+
         return {
             uuid: `dl-menu-${v4()}`,
             onClick,
@@ -491,15 +505,7 @@ export default defineComponent({
             portalEl: isVue2 ? '[data-test-id="portal"]' : portalEl,
             portalIsActive,
             classes: 'dl-menu dl-position-engine scroll' + classes.value,
-            styles: [
-                attrs.style,
-                transitionStyle.value,
-                {
-                    '--menu-z-index': props.zIndex ?? 'var(--dl-z-index-menu)',
-                    '--menu-height': props.height,
-                    '--menu-width': props.width
-                }
-            ] as any,
+            styles: computedStyles,
             selectedItem,
             highlightedIndex
         }