@dataloop-ai/components 0.17.106 → 0.17.108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.17.106",
+  "version": "0.17.108",
   "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/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/components/compound/DlSelect/DlSelect.vue

@@ -281,13 +281,10 @@
                             name="option"
                         />
                         <template v-else>
-                            {{
-                                capitalizedOptions
-                                    ? typeof getOptionLabel(option) ===
-                                        'string' &&
-                                        getOptionLabel(option).toLowerCase()
-                                    : getOptionLabel(option)
-                            }}
+                            <span
+                                class="inner-option"
+                                v-html="getOptionHtml(option)"
+                            />
                         </template>
                     </dl-select-option>
                     <dl-list-item v-if="hasAfterOptions && !noOptions">
@@ -418,6 +415,7 @@ export default defineComponent({
         const selectedIndex = ref(-1)
         const highlightedIndex = ref(-1)
         const isEmpty = ref(true)
+        const searchInputValue = ref('')
         const MAX_ITEMS_PER_LIST = 100 // HARDCODED - max items per list before virtual scroll
 
         const setHighlightedIndex = (value: any) => {
@@ -446,7 +444,8 @@ export default defineComponent({
             selectedIndex,
             setHighlightedIndex,
             handleSelectedItem,
-            handleModelValueUpdate
+            handleModelValueUpdate,
+            searchInputValue
         }
     },
     computed: {
@@ -817,7 +816,19 @@ export default defineComponent({
                     (this.$refs.menu as any)?.updatePosition()
                 })
             }
-            this.$emit('search-input', (e.target as HTMLInputElement).value)
+            const searchValue = (e.target as HTMLInputElement).value
+            this.searchInputValue = searchValue
+            this.$emit('search-input', searchValue)
+        },
+        getOptionHtml(option: DlSelectOptionType) {
+            return `<span>${(this.capitalizedOptions
+                ? typeof this.getOptionLabel(option) === 'string' &&
+                  this.getOptionLabel(option).toLowerCase()
+                : this.getOptionLabel(option)
+            ).replace(
+                this.searchInputValue,
+                `<span style="background: var(--dl-color-warning)">${this.searchInputValue}</span>`
+            )}</span>`
         },
         handleSearchBlur(e: Event): void {
             if (this.search) {

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
         }
     }
 })