@dataloop-ai/components 0.20.113 → 0.20.117

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.113",
+  "version": "0.20.117",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -23,7 +23,7 @@
     "check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
   },
   "dependencies": {
-    "@dataloop-ai/icons": "^3.1.11",
+    "@dataloop-ai/icons": "^3.1.12",
     "@types/flat": "^5.0.2",
     "@types/lodash": "^4.14.184",
     "@types/sortablejs": "^1.15.7",

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

@@ -68,6 +68,7 @@
                     :style="!isExpanded ? 'display: none;' : 'width: 100%;'"
                     :disabled="disabled"
                     :readonly="readonly"
+                    :placeholder="computedPlaceholder"
                     @input="handleSearchInput"
                     @focus="handleSearchFocus"
                     @blur="handleSearchBlur"
@@ -126,6 +127,7 @@
                         @click.prevent.stop="clearSelection"
                     />
                     <dl-icon
+                        v-if="!hideChevron"
                         :icon="dropdownIcon"
                         :color="chevronIconColor"
                         class="expand-icon"
@@ -166,6 +168,7 @@
                     </dl-item-section>
                 </dl-list-item>
                 <dl-list
+                    v-if="showMenuList"
                     class="select-list"
                     :padding="false"
                     :style="
@@ -448,6 +451,21 @@ export default defineComponent({
         selectedResourceLabel: {
             type: String,
             default: 'Selected Items'
+        },
+        hideChevron: {
+            type: Boolean,
+            default: false
+        },
+        disableSearchHighlighting: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * shows search results only when there is some user input
+         */
+        openMenuDuringSearch: {
+            type: Boolean,
+            default: false
         }
     },
     emits: [
@@ -592,6 +610,9 @@ export default defineComponent({
             if (this.optionsCount > this.MAX_ITEMS_PER_LIST) {
                 style += '; overflow-y: hidden'
             }
+            if (!this.showMenuList) {
+                style += '; border: none;'
+            }
             return style
         },
         computedNoOptionsStyle(): string {
@@ -811,6 +832,16 @@ export default defineComponent({
         },
         chevronIconColor(): string {
             return `${this.disabled ? 'dl-color-disabled' : null}`
+        },
+        showMenuList(): boolean {
+            if (
+                this.openMenuDuringSearch &&
+                this.searchable &&
+                this.searchInputValue.length === 0
+            ) {
+                return false
+            }
+            return true
         }
     },
     watch: {
@@ -1011,7 +1042,10 @@ export default defineComponent({
             const label = `${this.getOptionLabel(option)}`
             let highlightedHtml = label
 
-            if (this.searchInputValue?.length) {
+            if (
+                this.searchInputValue?.length &&
+                !this.disableSearchHighlighting
+            ) {
                 const toReplace = new RegExp(this.searchInputValue, 'gi')
 
                 highlightedHtml = label.replace(
@@ -1369,6 +1403,10 @@ export default defineComponent({
             white-space: nowrap;
             border: 0;
         }
+
+        &::placeholder {
+            color: var(--dl-color-lighter);
+        }
     }
     .bottom-message-container {
         display: flex;

package/src/components/compound/DlTable/styles/dl-table-styles.scss

@@ -139,6 +139,12 @@
         }
     }
 
+    tbody tr.highlighted {
+        td {
+            background-color: var(--dl-color-fill);
+        }
+    }
+
     .dl-table-cell-inner-div {
         text-overflow: ellipsis;
         white-space: nowrap;

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

@@ -266,6 +266,34 @@ export default defineComponent({
                     icon: 'icon-dl-dataset-filled'
                 } as unknown as PropType<DlEmptyStateProps>)
         },
+        /**
+         * Custom icon class to use for expanded rows.
+         */
+        customIconExpandedRow: {
+            type: String,
+            default: 'icon-dl-down-chevron'
+        },
+        /**
+         * Custom icon class to use for compressed (collapsed) rows.
+         */
+        customIconCompressedRow: {
+            type: String,
+            default: 'icon-dl-right-chevron'
+        },
+        /**
+         * color of the chevron icon
+         */
+        chevronIconColor: {
+            type: String,
+            default: ''
+        },
+        /**
+         * identifier (rowKey) to highlight a row.
+         */
+        highlightedRow: {
+            type: String,
+            default: ''
+        },
         /**
          * Scrolling delay
          */
@@ -513,6 +541,11 @@ export default defineComponent({
                 isRowSelected: isRowSelected(props.rowKey, getRowKey.value(row))
                     ? 'selected'
                     : '',
+                isRowHighlighted:
+                    props.highlightedRow &&
+                    (typeof props.rowKey === 'string'
+                        ? row[props.rowKey] === props.highlightedRow
+                        : false),
                 level,
                 class: 'nested-element dl-tr',
                 'data-level': level,
@@ -540,6 +573,9 @@ export default defineComponent({
                 modelValue: isRowSelected(props.rowKey, getRowKey.value(row)),
                 scopedSlots: currentSlots,
                 tooltip: props.identifierAsTooltip ? row.identifier : null,
+                customIconExpandedRow: props.customIconExpandedRow,
+                customIconCompressedRow: props.customIconCompressedRow,
+                chevronIconColor: props.chevronIconColor,
                 'onUpdate:modelValue': (adding: boolean, evt: Event) => {
                     updateSelectionHierarchy(adding, evt, row)
                 },
@@ -568,9 +604,14 @@ export default defineComponent({
                         tableRootRef.value.onTrContextMenu(event, row, index)
                     },
                     updateExpandedRow: () =>
-                        updateExpandedRow(!row.isExpanded, getRowKey.value(row)),
-                    rowHoverStart: (...args: any) => emit('row-hover-start', ...args),
-                    rowHoverEnd: (...args: any) => emit('row-hover-end', ...args)
+                        updateExpandedRow(
+                            !row.isExpanded,
+                            getRowKey.value(row)
+                        ),
+                    rowHoverStart: (...args: any) =>
+                        emit('row-hover-start', ...args),
+                    rowHoverEnd: (...args: any) =>
+                        emit('row-hover-end', ...args)
                 }
             })
         }

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

@@ -1,6 +1,6 @@
 <template>
     <DlTrTree
-        :class="rowClass"
+        :class="rowClass()"
         :no-hover="noHover"
         :children="childrenCount"
         :props="{ row }"
@@ -12,21 +12,15 @@
     >
         <td
             v-if="hasDraggableRows"
-            :style="`width: 25px; opacity: ${isDragIconVisible ? '1' : '0'}`"
+            :style="`width: 25px; opacity: ${
+                isDragIconVisible || isRowHighlighted ? '1' : '0'
+            }`"
         >
             <dl-icon class="draggable-icon" icon="icon-dl-drag" size="12px" />
         </td>
-        <td class="chevron-icon">
-            <DlIcon
-                v-if="(row.children || []).length > 0"
-                :icon="`icon-dl-${row.isExpanded ? 'down' : 'right'}-chevron`"
-                @click.stop.prevent="emitUpdateExpandedRow"
-            />
-        </td>
         <td v-if="hasSelectionMode" class="dl-table--col-auto-width">
             <slot name="body-selection" v-bind="bindBodySelection">
                 <DlCheckbox
-                    style="padding-left: 10px"
                     :color="color"
                     :model-value="modelValue"
                     :indeterminate-value="true"
@@ -38,6 +32,20 @@
                 />
             </slot>
         </td>
+        <td class="chevron-icon-container">
+            <div class="chevron-icon">
+                <DlIcon
+                    v-if="(row.children || []).length > 0"
+                    :icon="`${
+                        row.isExpanded
+                            ? customIconExpandedRow
+                            : customIconCompressedRow
+                    }`"
+                    :style="`color: ${chevronIconColor};`"
+                    @click.stop.prevent="emitUpdateExpandedRow"
+                />
+            </div>
+        </td>
         <DlTdTree
             v-for="(col, colIndex) in computedCols"
             :key="colIndex"
@@ -154,6 +162,31 @@ export default defineComponent({
         tooltip: {
             type: String,
             default: null
+        },
+        /**
+         * Custom icon class to use for expanded rows.
+         */
+        customIconExpandedRow: {
+            type: String,
+            default: 'icon-dl-down-chevron'
+        },
+        /**
+         * Custom icon class to use for compressed (collapsed) rows.
+         */
+        customIconCompressedRow: {
+            type: String,
+            default: 'icon-dl-right-chevron'
+        },
+        /**
+         * color of the chevron icon
+         */
+        chevronIconColor: {
+            type: String,
+            default: ''
+        },
+        isRowHighlighted: {
+            type: Boolean,
+            default: false
         }
     },
     emits: [
@@ -251,14 +284,9 @@ export default defineComponent({
         }
 
         const rowClass = (): string => {
-            if (props.isRowSelected) {
-                return 'selected'
+            if (props.isRowHighlighted) {
+                return 'highlighted'
             }
-            if (props.hasAnyAction) {
-                return ' cursor-pointer'
-            }
-
-            return 'dl-tr'
         }
 
         const getExpandedvisibleChildren = (): void => {
@@ -345,8 +373,15 @@ export default defineComponent({
 <style scoped lang="scss">
 @import '../../DlTable/styles/dl-table-styles.scss';
 .chevron-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     cursor: pointer;
-    width: 25px;
     padding: 5px;
+    height: 100%;
+}
+.chevron-icon-container {
+    cursor: pointer;
+    width: 25px;
 }
 </style>

package/src/demos/DlSelectDemo.vue

@@ -181,6 +181,28 @@
             searchable
         />
 
+        normal search without hightlights
+        <dl-select
+            v-model="selectedByFilteringSearch"
+            :options="searchOptions"
+            size="m"
+            multiselect
+            placeholder="contributors"
+            searchable
+            disable-search-highlighting
+        />
+
+        normal search open menu during search
+        <dl-select
+            v-model="selectedByFilteringSearch"
+            :options="searchOptions"
+            size="m"
+            multiselect
+            placeholder="contributors"
+            searchable
+            open-menu-during-search
+        />
+
         selected ellipsis
         <div style="width: 200px">
             <dl-select

package/src/demos/DlTreeTableDemo.vue

@@ -57,10 +57,7 @@
                 </div>
 
                 <div class="right-panel">
-                    <button
-                        class="btn"
-                        @click="addRowPerPage"
-                    >
+                    <button class="btn" @click="addRowPerPage">
                         Add Rows/Page
                     </button>
 
@@ -111,6 +108,7 @@
                     :virtual-scroll="vScroll"
                     style="height: 500px"
                     :rows-per-page-options="rowsPerPageOptions"
+                    highlighted-row="Frozen Yogurt"
                     @row-click="onRowClick"
                     @th-click="log"
                     @selected-items="selectedItems"