@dataloop-ai/components 0.20.119 → 0.20.121

package/package.json

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

package/src/components/compound/DlJsonEditor/DlJsonEditor.vue

@@ -58,7 +58,7 @@ export default defineComponent({
             default: Mode.text
         }
     },
-    emits: ['update:model-value', 'align-text', 'change', 'focus', 'blur'],
+    emits: ['update:model-value', 'align-text', 'change', 'content-error', 'focus', 'blur'],
     setup(props, { emit }) {
         const { modelValue, indentation, readonly, mode } = toRefs(props)
 
@@ -99,6 +99,7 @@ export default defineComponent({
                         '[DlJsonEditor] Failed to parse JSON'
                     )
                 }
+                emit('content-error')
                 return
             }
 

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchJsonEditorDialog.vue

@@ -43,6 +43,7 @@
                             flat
                             color="secondary"
                             padding="0px 3px"
+                            :disabled="alignDisabled"
                             @click="alignJSON"
                         />
                     </div>
@@ -51,6 +52,7 @@
                         v-model="stringifiedJSON"
                         class="json-editor"
                         @change="onChange"
+                        @content-error="onContentError"
                     />
                 </div>
             </template>
@@ -230,6 +232,7 @@ export default defineComponent({
         const showSaveDialog = ref(false)
         const showDeleteDialog = ref(false)
         const newQueryName = ref('')
+        const alignDisabled = ref(false)
 
         const selectOptions = computed<DlSelectOption[]>(() => {
             return uniqBy(
@@ -313,6 +316,11 @@ export default defineComponent({
             const parsed = toObject(json)
             if (!parsed) return
             emit('change', parsed)
+            alignDisabled.value = false
+        }
+
+        const onContentError = () => {
+            alignDisabled.value = true
         }
 
         const saveQuery = (searchAfterSave = false) => {
@@ -386,10 +394,12 @@ export default defineComponent({
             alignJSON,
             onQuerySelect,
             newQueryName,
+            alignDisabled,
             showDeleteDialog,
             selectOptions,
             search,
             onChange,
+            onContentError,
             saveQuery,
             deleteQuery
         }

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: {