@dataloop-ai/components 0.19.277 → 0.19.279

package/package.json

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

package/src/components/blocks/DlLabelPicker/DlLabelPicker.vue

@@ -34,6 +34,7 @@
             :empty-state-props="emptyStateProps"
             :hide-bottom="hideBottom"
             :hide-no-data="hideNoData"
+            identifier-as-tooltip
             @row-click="handleRowClick"
         >
             <template #body-cell-displayLabel="item">
@@ -41,6 +42,7 @@
                     :text="item.row.displayLabel"
                     :indicator-color="item.row.color"
                     class="dl-label-picker-item"
+                    :data-label-picker-identifier="item.row.identifier"
                 />
             </template>
         </dl-tree-table>
@@ -48,7 +50,15 @@
 </template>
 
 <script lang="ts">
-import { ref, PropType, defineComponent, computed, toRefs } from 'vue-demi'
+import {
+    ref,
+    PropType,
+    defineComponent,
+    computed,
+    toRefs,
+    onMounted,
+    nextTick
+} from 'vue-demi'
 import { DlLabel, DlIcon } from '../../essential'
 import { DlInput, DlTreeTable } from '../../compound'
 import { DlEmptyStateProps, DlTableColumn, DlTableRow } from '../../types'
@@ -188,6 +198,18 @@ export default defineComponent({
             }
             return false
         }
+
+        onMounted(() => {
+            nextTick(() => {
+                if (items.value?.[0]?.identifier) {
+                    const target = table.value.$el.querySelector(
+                        `[data-label-picker-identifier="${items.value[0].identifier}"]`
+                    )
+                    target?.closest('tr')?.classList.add('selected')
+                }
+            })
+        })
+
         return {
             handleRowClick,
             inputValue,

package/src/components/compound/DlSearches/DlSmartSearch/utils/index.ts

@@ -1,6 +1,5 @@
 export * from './highlightSyntax'
 
-import { DateInterval } from '../../../DlDateTime/types'
 import { ColorSchema, SyntaxColorSchema, Filters } from '../types'
 import {
     operators,

package/src/components/compound/DlSelect/DlSelect.vue

@@ -155,17 +155,25 @@
                 @highlighted-item="setHighlightedIndex"
                 @selected-item="handleSelectedItem"
             >
-                <dl-list class="select-list" :padding="false">
-                    <dl-list-item v-if="noOptions">
-                        <dl-item-section color="dl-color-medium">
-                            <slot name="no-options"> No options </slot>
-                        </dl-item-section>
-                    </dl-list-item>
-                    <dl-list-item v-if="hasBeforeOptions && !noOptions">
-                        <dl-item-section color="dl-color-medium">
-                            <slot name="before-options" />
-                        </dl-item-section>
-                    </dl-list-item>
+                <dl-list-item v-if="hasBeforeOptions && !noOptions">
+                    <dl-item-section color="dl-color-medium">
+                        <slot name="before-options" />
+                    </dl-item-section>
+                </dl-list-item>
+                <dl-list-item v-if="noOptions">
+                    <dl-item-section color="dl-color-medium">
+                        <slot name="no-options"> No options </slot>
+                    </dl-item-section>
+                </dl-list-item>
+                <dl-list
+                    class="select-list"
+                    :padding="false"
+                    :style="
+                        optionsCount > MAX_ITEMS_PER_LIST
+                            ? ''
+                            : `width: 100%; max-height: calc(${calculatedDropdownMaxHeight} - 20px); overflow-y: scroll;`
+                    "
+                >
                     <dl-select-option
                         v-if="showAllItems"
                         :multiselect="multiselect"
@@ -194,7 +202,7 @@
                         :virtual-scroll-item-size="28"
                         :virtual-scroll-sticky-size-start="28"
                         :virtual-scroll-sticky-size-end="20"
-                        :style="`width: 100%; max-height: calc(${dropdownMaxHeight} - 20px);`"
+                        :style="`width: 100%; max-height: calc(${calculatedDropdownMaxHeight} - 20px);`"
                     >
                         <dl-select-option
                             :key="getKeyForOption(item)"
@@ -290,12 +298,12 @@
                             </slot>
                         </dl-select-option>
                     </div>
-                    <dl-list-item v-if="hasAfterOptions && !noOptions">
-                        <dl-item-section>
-                            <slot name="after-options" />
-                        </dl-item-section>
-                    </dl-list-item>
                 </dl-list>
+                <dl-list-item v-if="hasAfterOptions && !noOptions">
+                    <dl-item-section>
+                        <slot name="after-options" />
+                    </dl-item-section>
+                </dl-list-item>
             </dl-menu>
         </div>
         <div
@@ -487,46 +495,6 @@ export default defineComponent({
             if (this.customFilter || this.searchTerm === '') {
                 return this.options
             }
-
-            // alternate version here it shows from child down
-            // const labelIncluded = (
-            //     options: DlSelectOptionType[],
-            //     term: string
-            // ): DlSelectOptionType[] => {
-            //     const filteredNodes: DlSelectOptionType[] = []
-
-            //     for (const op of options) {
-            //         const queue: DlSelectOptionType[] = [op]
-            //         while (queue.length) {
-            //             const node = queue.shift()
-            //             let shouldPush = false
-
-            //             const label = getLabel(node)
-
-            //             if (
-            //                 label &&
-            //                 label
-            //                     .toLowerCase()
-            //                     .includes(term.toLowerCase().trim())
-            //             ) {
-            //                 filteredNodes.push(node)
-            //                 shouldPush = true
-            //             }
-
-            //             if (
-            //                 !shouldPush &&
-            //                 (node as DlSelectOptionEntry)?.children?.length
-            //             ) {
-            //                 queue.push(
-            //                     ...(node as DlSelectOptionEntry).children
-            //                 )
-            //             }
-            //         }
-            //     }
-
-            //     return filteredNodes
-            // }
-
             const labelIncluded = (
                 options: DlSelectOptionType[],
                 term: string
@@ -574,6 +542,27 @@ export default defineComponent({
 
             return labelIncluded(cloneDeep(this.options), this.searchTerm)
         },
+        calculatedDropdownMaxHeight(): string {
+            const knownValuePhrases = ['vh', 'px', 'vw', 'em', 'rem', '%']
+            let val = this.dropdownMaxHeight
+
+            for (const phrase of knownValuePhrases) {
+                if (val.includes(phrase)) {
+                    val = val.replace(phrase, '')
+                    let value = parseInt(val)
+                    if (this.hasAfterOptions) {
+                        value -= 5
+                    }
+                    if (this.hasBeforeOptions) {
+                        value -= 5
+                    }
+                    return String(value + phrase)
+                }
+            }
+
+            // :shrug: if it's not a known value, just return it
+            return `calc(${this.dropdownMaxHeight} - 20px)`
+        },
         computedMenuStyle(): string {
             let style = this.menuStyle ?? ''
             if (this.optionsCount > this.MAX_ITEMS_PER_LIST) {

package/src/components/compound/DlTreeTable/DlTreeTable.vue

@@ -165,6 +165,13 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
+        /**
+         * identifier As Tooltip form row object
+         */
+        identifierAsTooltip: {
+            type: Boolean,
+            default: false
+        },
         /**
          * Function to generate the label visible when selecting rows
          */
@@ -530,6 +537,7 @@ export default defineComponent({
                 computedCols: tableRootRef.value.computedCols,
                 modelValue: isRowSelected(props.rowKey, getRowKey.value(row)),
                 scopedSlots: currentSlots,
+                tooltip: props.identifierAsTooltip ? row.identifier : null,
                 'onUpdate:modelValue': (adding: boolean, evt: Event) => {
                     updateSelectionHierarchy(adding, evt, row)
                 },

package/src/components/compound/DlTreeTable/components/DlTdTree.vue

@@ -6,7 +6,10 @@
         :data-col-index="colIndex"
     >
         <slot name="icon" />
-        <dl-tooltip v-if="hasEllipsis">
+        <dl-tooltip v-if="tooltip">
+            {{ tooltip }}
+        </dl-tooltip>
+        <dl-tooltip v-else-if="hasEllipsis">
             <slot />
         </dl-tooltip>
         <slot />
@@ -39,6 +42,10 @@ export default defineComponent({
         colIndex: {
             type: Number,
             default: null
+        },
+        tooltip: {
+            type: String,
+            default: null
         }
     },
     setup(props) {

package/src/components/compound/DlTreeTable/views/DlTrTreeView.vue

@@ -53,6 +53,7 @@
                     }px;`
             "
             :col-index="colIndex"
+            :tooltip="tooltip"
         >
             <template v-if="!hasSlotByName(`body-cell-${col.name}`)">
                 {{ getCellValue(col, row) }}
@@ -149,6 +150,10 @@ export default defineComponent({
         modelValue: {
             type: [String, Boolean],
             default: null
+        },
+        tooltip: {
+            type: String,
+            default: null
         }
     },
     emits: [

package/src/demos/DlLabelPickerDemo.vue

@@ -26,17 +26,17 @@ const rows: DlLabelPickerItem[] = [
         color: '#ff0000',
         children: [
             {
-                identifier: 'b',
+                identifier: 'a.a',
                 displayLabel: 'hello',
                 color: '#ffff00',
                 children: [
                     {
-                        identifier: 'c',
+                        identifier: 'a.a.a',
                         displayLabel: 'test 2',
                         color: '#00ff00',
                         children: [
                             {
-                                identifier: 'd',
+                                identifier: 'a.a.a.a',
                                 displayLabel: 'test 3',
                                 color: '#ff00aa',
                                 children: []
@@ -44,7 +44,7 @@ const rows: DlLabelPickerItem[] = [
                         ]
                     },
                     {
-                        identifier: 'd',
+                        identifier: 'a.a.b',
                         displayLabel: 'test 4',
                         color: '#ff00ff',
                         children: []

package/src/demos/DlSelectDemo.vue

@@ -156,10 +156,7 @@
             all-items-option
         >
             <template #prepend>
-                <dl-icon
-                    size="12px"
-                    icon="icon-dl-filter"
-                />
+                <dl-icon size="12px" icon="icon-dl-filter" />
             </template>
         </dl-select>
         custom search
@@ -594,13 +591,47 @@
             multiselect
             style="margin-bottom: 150px"
         />
+
+        <dl-select
+            :options="searchOptions"
+            title="With before and after options"
+        >
+            <template #before-options>
+                <dl-button label="Button" />
+            </template>
+            <template #after-options>
+                <dl-button label="Button" />
+            </template>
+        </dl-select>
+        <dl-select
+            :options="alotOfOptions"
+            title="With before and after options - lots of options"
+        >
+            <template #before-options>
+                <dl-button label="Button" />
+            </template>
+            <template #after-options>
+                <dl-button label="Button" />
+            </template>
+        </dl-select>
+        <dl-select
+            :options="someOptions"
+            title="With before and after options - some options"
+        >
+            <template #before-options>
+                <dl-button label="Button" />
+            </template>
+            <template #after-options>
+                <dl-button label="Button" />
+            </template>
+        </dl-select>
     </div>
 </template>
 
 <script lang="ts">
 import { cloneDeep } from 'lodash'
 import { defineComponent } from 'vue-demi'
-import { DlChip, DlSelect, DlIcon, DlBadge } from '../components'
+import { DlChip, DlSelect, DlIcon, DlBadge, DlButton } from '../components'
 import { DlSelectOptionType } from '../components/compound/DlSelect/utils'
 
 const defaultOptions = [
@@ -828,7 +859,7 @@ const treeOptionsExpanded: DlSelectOptionType[] = [
 ]
 
 export default defineComponent({
-    components: { DlSelect, DlIcon, DlChip, DlBadge },
+    components: { DlSelect, DlIcon, DlChip, DlBadge, DlButton },
     data() {
         return {
             selectedWithFit: [],
@@ -883,6 +914,21 @@ export default defineComponent({
 
             return arr
         },
+        someOptions(): DlSelectOptionType[] {
+            const arr = [] as any[]
+
+            for (let i = 0; i < 10; ++i) {
+                arr.push({
+                    key: i,
+                    subLabel: 'not so high',
+                    label: 'High ' + i,
+                    value: 'high',
+                    bgColor: 'dl-color-negative'
+                })
+            }
+
+            return arr
+        },
         alotOfOptionsExpanded(): DlSelectOptionType[] {
             const arr = cloneDeep(this.alotOfOptions)
             arr.push(treeOptionsExpanded[0])