@dataloop-ai/components 0.17.107 → 0.17.109

package/package.json

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

package/src/App.vue

@@ -59,7 +59,7 @@
                         margin-top: 15px;
                         min-width: 200px;
                         height: 100%;
-                        height: calc(100vh - 18vh);
+                        height: calc(100vh - 20vh);
                         overflow: auto;
                     "
                 >

package/src/assets/constants.scss

@@ -19,7 +19,8 @@
     --dl-z-index-panel-container-elements: 3030; // collapse icon + separator
 
     --dl-z-index-overlay: 5000;
-
+    --dl-z-index-dialog: 5200;
+    --dl-z-index-popup: 5500;
     --dl-z-index-menu: 6000;
     --dl-z-index-tooltip: 9000;
 

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

@@ -462,7 +462,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .dl-popup {
-    z-index: calc(var(--dl-z-index-menu) - 1);
+    z-index: var(--dl-z-index-popup);
     position: fixed !important;
     padding: var(--dl-popup-padding, 10px 0 16px 0);
     border: 1px solid var(--dl-color-separator);

package/src/components/compound/DlDateTime/DlDateTimeRange/DlDateTimeRange.vue

@@ -416,7 +416,16 @@ export default defineComponent({
             this.$emit('set-type', value)
         },
         updateDateInterval(value: DateInterval | null) {
-            this.dateInterval = value
+            this.dateInterval = {
+                from: value.from,
+                to: new Date(
+                    value.from.getFullYear(),
+                    value.from.getMonth(),
+                    value.from.getDate(),
+                    23,
+                    59
+                )
+            }
             this.$emit('update:modelValue', value)
             this.$emit('change', value)
         },

package/src/components/compound/DlDialogBox/DlDialogBox.vue

@@ -223,7 +223,7 @@ export default defineComponent({
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: var(--dl-z-index-menu);
+    z-index: var(--dl-z-index-dialog);
     overflow-x: hidden;
     overflow-y: hidden;
     text-align: start;
@@ -239,7 +239,9 @@ export default defineComponent({
     bottom: 0;
     left: 0;
     background-color: var(--dl-backdrop-color);
-    z-index: var(--dl-z-index-menu);
+    z-index: var(
+        --dl-z-index-dialog
+    ); // todo: check if this should be overlay instead.
 }
 
 .dialog-wrapper {
@@ -251,7 +253,7 @@ export default defineComponent({
     border-radius: 2px;
     display: flex;
     flex-direction: column;
-    z-index: var(--dl-z-index-menu);
+    z-index: var(--dl-z-index-dialog);
 
     &--fullscreen {
         margin: 0;

package/src/demos/DlMenuDemo.vue

@@ -507,6 +507,31 @@
                         </dl-list>
                     </dl-menu>
                 </dl-button>
+
+                <h4>With max height with alot of elements</h4>
+                <dl-button :label="arrowNavigationLabel">
+                    <dl-menu
+                        max-height="250px"
+                        self="bottom middle"
+                        anchor="top middle"
+                        :offset="[50, 5]"
+                        @show="onShow"
+                        @hide="onHide"
+                    >
+                        <dl-list style="min-width: 100px">
+                            <dl-list-item
+                                v-for="(item, index) in alotOfListItems"
+                                :key="index"
+                                clickable
+                                :is-highlighted="index === highlightedIndex"
+                            >
+                                <dl-item-section>
+                                    {{ item }}
+                                </dl-item-section>
+                            </dl-list-item>
+                        </dl-list>
+                    </dl-menu>
+                </dl-button>
             </div>
         </div>
     </div>
@@ -551,6 +576,109 @@ export default defineComponent({
             'Help & Feedback'
         ])
 
+        const alotOfListItems = ref([
+            'New tab0',
+            'New incognito tab1',
+            'Recent tabs2',
+            'History3',
+            'Downloads4',
+            'Settings5',
+            'Help & Feedback6',
+            'New tab7',
+            'New incognito tab8',
+            'Recent tabs9',
+            'History10',
+            'Downloads11',
+            'Settings12',
+            'Help & Feedback13',
+            'New tab14',
+            'New incognito tab15',
+            'Recent tabs16',
+            'History17',
+            'Downloads18',
+            'Settings19',
+            'Help & Feedback20',
+            'New tab21',
+            'New incognito tab22',
+            'Recent tabs23',
+            'History24',
+            'Downloads25',
+            'Settings26',
+            'Help & Feedback27',
+            'New tab28',
+            'New incognito tab29',
+            'Recent tabs30',
+            'History31',
+            'Downloads32',
+            'Settings33',
+            'Help & Feedback34',
+            'New tab35',
+            'New incognito tab36',
+            'Recent tabs37',
+            'History38',
+            'Downloads39',
+            'Settings40',
+            'Help & Feedback41',
+            'New tab42',
+            'New incognito tab43',
+            'Recent tabs44',
+            'History45',
+            'Downloads46',
+            'Settings47',
+            'Help & Feedback48',
+            'New tab49',
+            'New incognito tab50',
+            'Recent tabs51',
+            'History52',
+            'Downloads53',
+            'Settings54',
+            'Help & Feedback55',
+            'New tab56',
+            'New incognito tab57',
+            'Recent tabs58',
+            'History59',
+            'Downloads60',
+            'Settings61',
+            'Help & Feedback62',
+            'New tab63',
+            'New incognito tab64',
+            'Recent tabs65',
+            'History66',
+            'Downloads67',
+            'Settings68',
+            'Help & Feedback69',
+            'New tab70',
+            'New incognito tab71',
+            'Recent tabs72',
+            'History73',
+            'Downloads74',
+            'Settings75',
+            'Help & Feedback76',
+            'New tab77',
+            'New incognito tab78',
+            'Recent tabs79',
+            'History80',
+            'Downloads81',
+            'Settings82',
+            'Help & Feedback83',
+            'New tab84',
+            'New incognito tab85',
+            'Recent tabs86',
+            'History87',
+            'Downloads88',
+            'Settings89',
+            'Help & Feedback90',
+            'New tab91',
+            'New incognito tab92',
+            'Recent tabs93',
+            'History94',
+            'Downloads95',
+            'Settings96',
+            'Help & Feedback97',
+            'New tab98',
+            'New incognito tab99'
+        ])
+
         const onShow = (value: any) => {
             isMenuOpen.value = !!value
         }
@@ -578,7 +706,8 @@ export default defineComponent({
             isMenuOpen,
             selectedItem,
             highlightedIndex,
-            arrowNavigationLabel
+            arrowNavigationLabel,
+            alotOfListItems
         }
     }
 })