@dataloop-ai/components 0.18.113 → 0.18.114

package/package.json

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

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

@@ -17,6 +17,7 @@
                 :schema="schema"
                 :color-schema="colorSchema"
                 :strict="strict"
+                :placeholder="placeholder"
                 @focus="isFocused = true"
                 @blur="isFocused = false"
             />
@@ -130,6 +131,10 @@ export default defineComponent({
         strict: {
             type: Boolean,
             default: false
+        },
+        placeholder: {
+            type: String,
+            default: ''
         }
     },
     emits: ['save-query', 'remove-query', 'search-query', 'update:model-value'],

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

@@ -24,7 +24,7 @@
                         ref="input"
                         :class="inputClass"
                         :style="textareaStyles"
-                        :placeholder="placeholder"
+                        :placeholder="inputPlaceholder"
                         :contenteditable="!disabled"
                         @keypress="onKeyPress"
                         @input="onInput"
@@ -431,6 +431,10 @@ export default defineComponent({
             if (e.key === 'Enter') {
                 e.preventDefault()
             }
+
+            if (!focused.value) {
+                focus()
+            }
         }
 
         const onInput = (e: Event) => {
@@ -612,6 +616,13 @@ export default defineComponent({
                 message: error.value
             }
         })
+
+        const inputPlaceholder = computed(() => {
+            return focused.value || searchQuery.value.length
+                ? ''
+                : props.placeholder
+        })
+
         //#endregion
 
         //#region watcher
@@ -715,7 +726,8 @@ export default defineComponent({
             onInput,
             onDateSelection,
             computedStatus,
-            setInputFromSuggestion
+            setInputFromSuggestion,
+            inputPlaceholder
         }
     }
 })
@@ -831,8 +843,10 @@ export default defineComponent({
         color: var(--dl-color-darker);
         background-color: var(--dl-color-panel-background);
 
-        ::placeholder {
+        &::before {
             color: var(--dl-color-lighter);
+            /* In case this causes render shadowing move to use html/injection approach */
+            content: attr(placeholder);
         }
         & > * {
             display: flex;

package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -70,6 +70,19 @@
         />
         {{ queryObject }}
         {{ queryObject2 }}
+
+        <br>
+        <br>
+        With placeholder
+        <dl-smart-search-input
+            v-model="queryObject"
+            :aliases="aliases"
+            :schema="schema"
+            :color-schema="colorSchema"
+            :strict="strictState"
+            :disabled="switchState"
+            placeholder="I am a placeholder"
+        />
     </div>
 </template>