@dataloop-ai/components 0.19.154 → 0.19.156

package/package.json

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

package/src/components/compound/DlInput/DlInput.vue

@@ -1,12 +1,6 @@
 <template>
-    <div
-        :id="uuid"
-        style="display: block"
-    >
-        <div
-            :style="cssVars"
-            :class="rootContainerClasses"
-        >
+    <div :id="uuid" style="display: block">
+        <div :style="cssVars" :class="rootContainerClasses">
             <div class="row full-width full-height">
                 <div
                     :class="`${isSmall ? 'col' : 'row  full-width'} top`"
@@ -30,7 +24,8 @@
                                     v-if="required"
                                     :class="asteriskClasses"
                                 >
-                                    *</span>
+                                    *</span
+                                >
                                 {{
                                     !required && optional ? ' (Optional)' : null
                                 }}
@@ -47,10 +42,7 @@
                             </dl-tooltip>
                         </span>
                     </div>
-                    <div
-                        v-if="!!topMessage.length && !isSmall"
-                        class="break"
-                    />
+                    <div v-if="!!topMessage.length && !isSmall" class="break" />
                     <div
                         v-if="!!topMessage.length"
                         :class="{
@@ -84,7 +76,7 @@
                             </div>
                             <div
                                 ref="input"
-                                :contenteditable="!readonly && !disabled"
+                                :contenteditable="contenteditable"
                                 :class="inputClasses"
                                 :placeholder="placeholder"
                                 @input="onChange"
@@ -93,15 +85,11 @@
                                 @keydown="onKeydown"
                                 @keyup.enter="onEnterPress"
                                 @paste="handlePaste"
-                            >
-                                <span
-                                    v-if="readonly || disabled"
-                                    :class="{
-                                        'placeholder-string': showPlaceholder,
-                                        'placeholder-string--disabled': disabled
-                                    }"
-                                >{{ spanText }}</span>
-                            </div>
+                                @mouseover="onHover"
+                            />
+                            <dl-tooltip v-if="showTooltip">
+                                {{ spanText }}
+                            </dl-tooltip>
                             <div
                                 v-if="
                                     hasAppend ||
@@ -113,10 +101,7 @@
                                     'dl-input__adornment-container--pos-right'
                                 ]"
                             >
-                                <slot
-                                    v-if="hasAppend"
-                                    name="append"
-                                />
+                                <slot v-if="hasAppend" name="append" />
                                 <span
                                     v-if="showClearButton"
                                     class="dl-input__adornment-container--clear"
@@ -181,7 +166,7 @@
                                         v-if="item.image"
                                         :src="item.image"
                                         class="dl-input__suggestion--image"
-                                    >
+                                    />
                                     <span
                                         v-for="(word, index) in getSuggestWords(
                                             item.suggestion,
@@ -193,7 +178,9 @@
                                                 word.highlighted
                                         }"
                                     >
-                                        <span v-if="word.value[0] === ' '">&nbsp;</span>
+                                        <span v-if="word.value[0] === ' '"
+                                        >&nbsp;</span
+                                        >
                                         {{ word.value }}
                                         <span
                                             v-if="
@@ -201,7 +188,8 @@
                                                     word.value.length - 1
                                                 ] === ' '
                                             "
-                                        >&nbsp;</span>
+                                        >&nbsp;</span
+                                        >
                                     </span>
                                 </dl-list-item>
                             </dl-list>
@@ -260,10 +248,7 @@
                         </div>
                     </div>
                 </div>
-                <div
-                    v-if="files.length"
-                    class="dl-input__files"
-                >
+                <div v-if="files.length" class="dl-input__files">
                     <input-file-element
                         v-for="file in files"
                         :key="file.id"
@@ -282,10 +267,7 @@
                 style="--dl-dialog-box-content-padding: 0"
             >
                 <template #body>
-                    <img
-                        class="dl-input__zoom-image"
-                        :src="currentZoomImage"
-                    >
+                    <img class="dl-input__zoom-image" :src="currentZoomImage" />
                 </template>
             </dl-dialog-box>
             <dl-dialog-box
@@ -321,10 +303,7 @@
                     </dl-dialog-box-footer>
                 </template>
             </dl-dialog-box>
-            <div
-                v-if="hasAction"
-                class="dl-input__action"
-            >
+            <div v-if="hasAction" class="dl-input__action">
                 <slot name="action" />
             </div>
         </div>
@@ -892,8 +871,14 @@ export default defineComponent({
             (val: string | number) => {
                 nextTick(() => {
                     if (firstTime.value) {
+                        if (readonly.value || disabled.value) {
+                            prevInputValue.value = String(val)
+                            input.value.innerHTML = placeHolderHTML.value
+                        } else {
+                            onModelValueChange(val)
+                        }
+
                         firstTime.value = false
-                        onModelValueChange(val)
                         return
                     }
                     debouncedOnModelValueChange.value(val)
@@ -902,6 +887,36 @@ export default defineComponent({
             { immediate: true }
         )
 
+        const placeHolderHTML = computed<string>(() => {
+            let classes = ''
+            if (showPlaceholder.value) {
+                classes += 'placeholder-string'
+            }
+            if (disabled.value) {
+                classes += ' placeholder-string--disabled'
+            }
+
+            return `<span class="${classes}">${spanText.value}</span>`
+        })
+
+        const contenteditable = computed<boolean>(() => {
+            return !disabled.value && !readonly.value
+        })
+
+        const prevInputValue = ref('')
+        watch([disabled, readonly], (value) => {
+            if (!input.value) {
+                return
+            }
+
+            if (value[0] || value[1]) {
+                prevInputValue.value = input.value.innerHTML
+                input.value.innerHTML = placeHolderHTML.value
+            } else {
+                input.value.innerHTML = prevInputValue.value
+            }
+        })
+
         return {
             suggestItems,
             highlightedIndex,
@@ -920,7 +935,8 @@ export default defineComponent({
             spanText,
             handleValueTrim: debouncedHandleValueTrim,
             onModelValueChange: debouncedOnModelValueChange,
-            isInternalChange
+            isInternalChange,
+            contenteditable
         }
     },
     data() {
@@ -932,7 +948,8 @@ export default defineComponent({
             currentZoomImage: null,
             currentFile: null,
             newFileName: null,
-            focused: false
+            focused: false,
+            showTooltip: false
         }
     },
     computed: {
@@ -1110,6 +1127,18 @@ export default defineComponent({
         }
     },
     methods: {
+        onHover() {
+            const inputRef = this.$refs.input as HTMLInputElement
+            if (!inputRef) {
+                return
+            }
+
+            if (inputRef?.scrollWidth > inputRef?.clientWidth) {
+                this.showTooltip = true
+            } else {
+                this.showTooltip = false
+            }
+        },
         onKeydown(e: KeyboardEvent) {
             if (e.key !== 'Backspace') {
                 /**
@@ -1314,7 +1343,6 @@ export default defineComponent({
 <style scoped lang="scss">
 [contenteditable='true']:empty:before {
     content: attr(placeholder);
-    pointer-events: none;
     display: inline;
     opacity: 0.5;
     -webkit-text-security: none;
@@ -1416,7 +1444,6 @@ export default defineComponent({
         &--disabled {
             border-color: var(--dl-color-separator);
             color: var(--dl-color-disabled);
-            pointer-events: none;
             cursor: not-allowed;
         }
         &--s {
@@ -1521,7 +1548,7 @@ export default defineComponent({
         .placeholder-string--disabled,
         &--disabled {
             color: var(--dl-color-disabled);
-            pointer-events: none;
+            cursor: not-allowed;
         }
     }
 

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

@@ -213,6 +213,10 @@ export default defineComponent({
             type: Array as PropType<string[]>,
             default: () => [] as string[]
         },
+        forbiddenKeys: {
+            type: Array as PropType<string[]>,
+            default: () => [] as string[]
+        },
         strict: {
             type: Boolean,
             default: false
@@ -245,7 +249,8 @@ export default defineComponent({
             schema,
             omitSuggestions,
             height,
-            width
+            width,
+            forbiddenKeys
         } = toRefs(props)
         //#endregion
 
@@ -269,7 +274,7 @@ export default defineComponent({
         // todo: these can be stale data. we need to update them on schema change.
         const { hasEllipsis } = useSizeObserver(input)
         const { suggestions, error, findSuggestions, checkErrors } =
-            useSuggestions(schema, aliases, { strict, omitSuggestions })
+            useSuggestions(schema, aliases, { strict, forbiddenKeys, omitSuggestions })
         //#endregion
 
         //#region methods
@@ -490,7 +495,7 @@ export default defineComponent({
             }
 
             if (cancelBlur.value === 0) {
-                if (showSuggestions.value) {
+                if (showSuggestions.value && computedStatus.value.type !== 'error') {
                     focused.value = true
                     return
                 }

package/src/demos/DlInputDemo.vue

@@ -19,46 +19,32 @@
                 :disabled="disabledInput"
             />
         </div>
-        <div>
-            <input v-model="textVal">
+        <div style="max-width: 150px">
+            <input v-model="textVal" />
             <div>This is to test v-model reactivity</div>
             <dl-input
                 v-model="textVal"
                 placeholder="Test reactivity"
+                :disabled="disabledInput"
             />
             <dl-input
                 v-model="textVal"
                 placeholder="Test reactivity disabled"
                 disabled
             />
-            <dl-input
-                v-model="textVal"
-                disabled
-            />
-            <dl-input
-                v-model="textVal"
-                readonly
-            />
+            <dl-input v-model="textVal" disabled />
+            <dl-input v-model="textVal" readonly />
         </div>
 
         <div>
             <div>With auto trim</div>
 
-            <dl-input
-                v-model="trimmedValue"
-                auto-trim
-            />
+            <dl-input v-model="trimmedValue" auto-trim />
         </div>
 
-        <dl-input
-            placeholder="placeholder input readonly"
-            readonly
-        />
+        <dl-input placeholder="placeholder input readonly" readonly />
 
-        <dl-input
-            placeholder="placeholder input disabled"
-            disabled
-        />
+        <dl-input placeholder="placeholder input disabled" disabled />
 
         <dl-input
             style="width: 500px"
@@ -135,7 +121,7 @@
                     style="display: none"
                     type="file"
                     @change="addFile"
-                >
+                />
             </template>
         </dl-input>
         <dl-input
@@ -172,10 +158,7 @@
             optional
         />
         <p>input in a row with button</p>
-        <div
-            class="row"
-            style="align-items: center"
-        >
+        <div class="row" style="align-items: center">
             <dl-input
                 max-width="220px"
                 class="input-parts"
@@ -184,17 +167,9 @@
                 dense
                 size="s"
             />
-            <dl-button
-                dense
-                flat
-                icon="icon-dl-add"
-                size="m"
-            />
+            <dl-button dense flat icon="icon-dl-add" size="m" />
         </div>
-        <div
-            class="row"
-            style="align-items: center"
-        >
+        <div class="row" style="align-items: center">
             <dl-input
                 max-width="220px"
                 class="input-parts"
@@ -204,12 +179,7 @@
                 expandable
                 size="s"
             />
-            <dl-button
-                dense
-                flat
-                icon="icon-dl-add"
-                size="m"
-            />
+            <dl-button dense flat icon="icon-dl-add" size="m" />
         </div>
         <dl-input
             :model-value="'Readonly text'"
@@ -223,12 +193,7 @@
         <div style="align-items: center; width: 250px; overflow: scroll">
             <dl-input class="input-parts">
                 <template #action>
-                    <dl-button
-                        dense
-                        flat
-                        icon="icon-dl-add"
-                        size="m"
-                    />
+                    <dl-button dense flat icon="icon-dl-add" size="m" />
                 </template>
             </dl-input>
         </div>
@@ -241,12 +206,7 @@
                 tooltip="test me tooltip"
             >
                 <template #action>
-                    <dl-button
-                        dense
-                        flat
-                        icon="icon-dl-add"
-                        size="m"
-                    />
+                    <dl-button dense flat icon="icon-dl-add" size="m" />
                 </template>
             </dl-input>
         </div>
@@ -260,12 +220,7 @@
                 size="small"
             >
                 <template #action>
-                    <dl-button
-                        dense
-                        flat
-                        icon="icon-dl-add"
-                        size="m"
-                    />
+                    <dl-button dense flat icon="icon-dl-add" size="m" />
                 </template>
             </dl-input>
         </div>

package/src/hooks/use-suggestions.ts

@@ -123,9 +123,9 @@ const mergeWords = (words: string[]) => {
 export const useSuggestions = (
     schema: Ref<Schema>,
     aliases: Ref<Alias[]>,
-    options: { strict?: Ref<boolean>; omitSuggestions?: Ref<string[]> } = {}
+    options: { strict?: Ref<boolean>; forbiddenKeys?: Ref<string[]>; omitSuggestions?: Ref<string[]> } = {}
 ) => {
-    const { strict, omitSuggestions } = options
+    const { strict, forbiddenKeys, omitSuggestions } = options
     const aliasesArray = aliases.value ?? []
     const schemaValue = schema.value ?? {}
 
@@ -159,7 +159,7 @@ export const useSuggestions = (
         const expressions = mapWordsToExpressions(mergedWords)
 
         error.value = input.length
-            ? getError(schemaValue, aliasesArray, expressions, { strict })
+            ? getError(schemaValue, aliasesArray, expressions, { strict, forbiddenKeys })
             : null
     }
 
@@ -329,7 +329,8 @@ export const useSuggestions = (
 
 const errors = {
     INVALID_EXPRESSION: 'Invalid Expression',
-    INVALID_VALUE: (field: string) => `Invalid value for "${field}" field`
+    INVALID_VALUE: (field: string) => `Invalid value for "${field}" field`,
+    FORBIDDEN_KEY: (field: string) => `Forbidden field "${field}"`
 }
 
 const isInputAllowed = (input: string, allowedKeys: string[]): boolean => {
@@ -361,9 +362,9 @@ const getError = (
     schema: Schema,
     aliases: Alias[],
     expressions: Expression[],
-    options: { strict?: Ref<boolean> } = {}
+    options: { strict?: Ref<boolean>; forbiddenKeys?: Ref<string[]>; } = {}
 ): string | null => {
-    const { strict } = options
+    const { strict, forbiddenKeys } = options
     const hasErrorInStructure = expressions
         .flatMap((exp) => Object.values(exp))
         .some((el, index, arr) => {
@@ -378,7 +379,7 @@ const getError = (
     return expressions
         .filter(({ field, value }) => field !== null && value !== null)
         .reduce<string | null>((acc, { field, value, operator }, _, arr) => {
-            if (acc === 'warning') return acc
+            if (acc && acc !== 'warning') return acc
             const fieldKey: string =
                 getAliasObjByAlias(aliases, field)?.key ?? field
 
@@ -409,14 +410,21 @@ const getError = (
                 return false
             }
 
-            const pattern = new RegExp(`${fieldKey}\\.\\d`)
+            const pattern = new RegExp(`^${fieldKey}\\.\\d`)
             const isValid = isInputAllowed(fieldKey, keys)
+            const isForbidden = !!forbiddenKeys?.value?.includes(fieldKey)
             if (
                 !keys.includes(fieldKey) &&
                 !hasValidExpression(keys, pattern) &&
-                !isValid
+                !isValid &&
+                !isForbidden
             ) {
-                return strict.value ? errors.INVALID_EXPRESSION : 'warning'
+                return strict?.value ? errors.INVALID_EXPRESSION : 'warning'
+            }
+
+            if (isForbidden) {
+                arr.splice(1)
+                return (acc = errors.FORBIDDEN_KEY(field))
             }
 
             const valid = isValidByDataType(
@@ -430,7 +438,7 @@ const getError = (
                 return (acc = errors.INVALID_VALUE(field))
             }
 
-            return (acc = null)
+            return (acc === 'warning' ? acc : acc = null)
         }, null)
 }