@dataloop-ai/components 0.20.126 → 0.20.127

package/package.json

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

package/src/assets/theme.css

@@ -57,6 +57,7 @@ body {
     --dl-color-fill: #0000001e;
     --dl-color-fill-hover: #f8f8f8;
     --dl-color-separator: #e4e4e4;
+    --dl-color-component: #ffffff;
     --dl-color-scrollbar: #e4e4e4;
     --dl-color-body-background: #eef1ff;
     --dl-color-panel-background: #ffffff;
@@ -118,6 +119,7 @@ body {
     --dl-color-fill-secondary: #f8f8f81a;
     --dl-color-fill-hover: #454a50;
     --dl-color-separator: #ffffff26;
+    --dl-color-component: #30363d;
     --dl-color-body-background: #24282d;
     --dl-color-panel-background: #30363d;
     --dl-color-side-panel: #2a343e;

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

@@ -223,6 +223,40 @@ export default defineComponent({
         const onClear = (event: InputEvent) => {
             emit('clear', event)
         }
+
+        function setSelectedLabelByName(displayLabel: string) {
+            const stack = [...items.value]
+
+            while (stack.length) {
+                const item = stack.pop()
+
+                if (item.displayLabel === displayLabel) {
+                    currentSelectedLabel.value = item
+                    emit('selected-label', item)
+
+                    nextTick(() => {
+                        const target = table.value?.$el.querySelector(
+                            `[data-label-picker-identifier="${item.identifier}"]`
+                        )
+                        table.value?.$el
+                            .querySelectorAll('tr.selected')
+                            .forEach((tr: Element) =>
+                                tr.classList.remove('selected')
+                            )
+                        target?.closest('tr')?.classList.add('selected')
+                    })
+                    return
+                }
+
+                if (item.children?.length) {
+                    stack.push(...item.children)
+                }
+            }
+            console.warn(
+                `[DlLabelPicker] No label found for displayLabel "${displayLabel}"`
+            )
+        }
+
         return {
             handleRowClick,
             inputValue,
@@ -234,7 +268,8 @@ export default defineComponent({
             isFilterString,
             onClear,
             onBlur,
-            onFocus
+            onFocus,
+            setSelectedLabelByName
         }
     }
 })
@@ -249,6 +284,14 @@ export default defineComponent({
     height: 32px;
     line-height: 30px;
 }
+
+.dl-label-picker .dl-table tbody tr.highlighted td {
+    background-color: var(--dl-color-panel-background);
+}
+
+.dl-label-picker .dl-table tbody tr.selected td {
+    background-color: var(--dl-color-fill);
+}
 </style>
 
 <style>