@dataloop-ai/components 0.19.4 → 0.19.6

package/package.json

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

package/src/components/basic/DlPopup/DlPopup.vue

@@ -111,8 +111,6 @@ export default defineComponent({
         title: { type: String, default: '' },
         subtitle: { type: String, default: '' },
         withCloseButton: Boolean,
-        height: { type: String, default: 'auto' },
-        width: { type: String, default: 'auto' },
         draggable: Boolean,
         isEmpty: Boolean,
         emptyStateProps: {
@@ -151,8 +149,9 @@ export default defineComponent({
             type: String as PropType<Element | string>,
             default: null
         },
-
         touchPosition: Boolean,
+        height: { type: String, default: 'auto' },
+        width: { type: String, default: 'auto' },
         maxHeight: { type: String, default: 'auto' },
         maxWidth: { type: String, default: 'auto' },
         menuClass: {
@@ -169,10 +168,11 @@ export default defineComponent({
         },
         /**
          * the % of the parent element that triggers the tooltips visibility
+         * @default 0 - no hide occurs when trigger % is 0
          */
         triggerPercentage: {
             type: Number,
-            default: 1
+            default: 0
         }
     },
     emits: [...useModelToggleEmits, 'click', 'escapekey', 'close-button-click'],
@@ -229,8 +229,6 @@ export default defineComponent({
             title,
             subtitle,
             withCloseButton,
-            height,
-            width,
             isEmpty,
             emptyStateProps,
             modelValue,

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

@@ -133,7 +133,14 @@ export default defineComponent({
         },
 
         touchPosition: Boolean,
-
+        width: {
+            type: String,
+            default: 'auto'
+        },
+        height: {
+            type: String,
+            default: 'auto'
+        },
         maxHeight: {
             type: String,
             default: null
@@ -421,12 +428,12 @@ export default defineComponent({
                 return
             }
 
-            const isAnchorElVisible = await CheckAnchorElVisibility(
-                anchorEl.value,
-                {
-                    triggerPercentage: props.triggerPercentage
-                }
-            )
+            const isAnchorElVisible =
+                props.triggerPercentage === 0
+                    ? true
+                    : await CheckAnchorElVisibility(anchorEl.value, {
+                          triggerPercentage: props.triggerPercentage
+                      })
 
             if (!isAnchorElVisible) {
                 hide()
@@ -480,7 +487,9 @@ export default defineComponent({
                 attrs.style,
                 transitionStyle.value,
                 {
-                    '--menu-z-index': props.zIndex ?? 'var(--dl-z-index-menu)'
+                    '--menu-z-index': props.zIndex ?? 'var(--dl-z-index-menu)',
+                    '--menu-height': props.height,
+                    '--menu-width': props.width
                 }
             ] as any,
             selectedItem,
@@ -495,6 +504,8 @@ export default defineComponent({
     position: fixed !important;
     display: inline-block;
     max-width: 95vw;
+    height: var(--menu-height);
+    width: var(--menu-width);
     border: 1px solid var(--dl-color-separator);
 
     box-shadow: var(--dl-menu-shadow);

package/src/demos/DlPopupDemo.vue

@@ -224,6 +224,39 @@
                 </template>
             </dl-popup>
         </dl-button>
+        <dl-button label="Open Popup with  height and width">
+            <dl-popup
+                title="Edit Item Description"
+                additional-info="Some additional information"
+                subtitle="Some text for better explanation."
+                with-close-button
+                :style="{ '--dl-popup-padding': '0px' }"
+                height="50px"
+                width="500px"
+            >
+                <dl-text-area
+                    v-model="text"
+                    :max-length="100"
+                    show-counter
+                    placeholder="Type your text"
+                    width="203px"
+                />
+                <template #close-button>
+                    <dl-button
+                        flat
+                        style="padding-bottom: 0; padding-top: 0"
+                        label="clear"
+                        size="m"
+                        @click="handleClear"
+                    />
+                </template>
+                <template #footer>
+                    <dl-button fluid>
+                        Save
+                    </dl-button>
+                </template>
+            </dl-popup>
+        </dl-button>
     </div>
 </template>
 <script lang="ts">