@dataloop-ai/components 0.20.119 → 0.20.120

package/package.json

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

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

@@ -6,7 +6,8 @@
         :class="{
             'root-container--s': isSmall,
             [identifierClass]: true,
-            'fit-content': fitContent
+            'fit-content': fitContent,
+            'row-root': !!errorIcon.length
         }"
     >
         <div
@@ -318,17 +319,42 @@
             v-if="!isSmall && (!!infoMessage.length || !!errorMessage.length)"
             class="bottom-message-container"
         >
-            <dl-info-error-message
-                v-if="!!infoMessage.length && !error"
-                position="below"
-                :value="infoMessage"
-            />
-            <dl-info-error-message
-                v-if="error && !!errorMessage.length"
-                position="below"
-                error
-                :value="errorMessage"
-            />
+            <span v-if="!!errorIcon.length">
+                <dl-icon
+                    v-if="!!infoMessage.length && !error"
+                    icon="icon-dl-info"
+                    :inline="false"
+                    :size="iconSize"
+                >
+                    <dl-tooltip>
+                        {{ infoMessage }}
+                    </dl-tooltip>
+                </dl-icon>
+                <dl-icon
+                    v-if="error && !!errorMessage.length"
+                    :icon="errorIcon"
+                    :inline="false"
+                    color="dl-color-negative"
+                    :size="iconSize"
+                >
+                    <dl-tooltip>
+                        {{ errorMessage }}
+                    </dl-tooltip>
+                </dl-icon>
+            </span>
+            <span v-else>
+                <dl-info-error-message
+                    v-if="!!infoMessage.length && !error"
+                    position="below"
+                    :value="infoMessage"
+                />
+                <dl-info-error-message
+                    v-if="error && !!errorMessage.length"
+                    position="below"
+                    error
+                    :value="errorMessage"
+                />
+            </span>
         </div>
     </div>
 </template>
@@ -409,6 +435,7 @@ export default defineComponent({
         infoMessage: { type: String, default: '' },
         errorMessage: { type: String, default: '' },
         error: { type: Boolean, default: false },
+        errorIcon: { type: String, default: '' },
         disabled: { type: Boolean, default: false },
         readonly: { type: Boolean, default: false },
         emitValue: { type: Boolean, default: false }, // We emit the value from the option and compare with it as a modelvalue
@@ -1418,4 +1445,9 @@ export default defineComponent({
 .fit-content > * {
     max-width: fit-content;
 }
+.row-root {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
 </style>

package/src/demos/DlSelectDemo.vue

@@ -732,6 +732,30 @@
                 <div>{{ scope.opt.label }}</div>
             </template>
         </dl-select>
+        Recipe for a select with {{ labelInputError }} as labels
+        <dl-select
+            ref="newLabelInput"
+            v-model.trim="labelInputError"
+            hide-dropdown-icon
+            :input-debounce="0"
+            :options="searchOptions"
+            :error="labelInputError.length === 0"
+            error-message="label Input Error Message"
+            hide-selected
+            searchable
+            placeholder="Insert label number"
+            size="m"
+            style="width: 80%; margin-bottom: 0"
+            custom-filter
+            hide-chevron
+            open-menu-during-search
+            disable-search-highlighting
+            menu-class="--js-add-new-recipe-label"
+            class="--js-add-new-recipe-label"
+            error-icon="icon-dl-error-filled"
+        >
+            <template #prepend><span /></template>
+        </dl-select>
     </div>
 </template>
 
@@ -1023,7 +1047,8 @@ export default defineComponent({
             disabledSelected: 'disabled option',
             preSelectedValue: null,
             optionsAsNumbers,
-            selectedNumbers: []
+            selectedNumbers: [],
+            labelInputError: ''
         }
     },
     computed: {