@dataloop-ai/components 0.18.112 → 0.18.114

package/package.json

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

package/src/components/basic/DlButton/DlButton.vue

@@ -214,10 +214,24 @@ export default defineComponent({
         },
         getIconColor(): string {
             if (this.disabled) {
-                return 'dl-color-disabled'
+                return setTextColor({
+                    disabled: this.disabled,
+                    outlined: this.outlined,
+                    flat: this.flat,
+                    color: this.color,
+                    filled: this.filled,
+                    shaded: this.shaded,
+                    textColor: this.iconColor ?? this.textColor
+                })
             }
             if (this.mouseOver) {
-                return 'dl-color-hover'
+                return setColorOnHover({
+                    disabled: this.disabled,
+                    outlined: this.outlined,
+                    shaded: this.shaded,
+                    flat: this.flat,
+                    color: this.iconColor ?? this.textColor
+                })
             }
 
             if (this.iconColor) {
@@ -333,20 +347,6 @@ export default defineComponent({
                         flat: this.flat,
                         color: this.textColor
                     }),
-                    '--dl-button-icon-color-hover': setColorOnHover({
-                        disabled: this.disabled,
-                        outlined: this.outlined,
-                        shaded: this.shaded,
-                        flat: this.flat,
-                        color: this.getIconColor
-                    }),
-                    '--dl-icon-color': setColorOnHover({
-                        disabled: this.disabled,
-                        outlined: this.outlined,
-                        shaded: this.shaded,
-                        flat: this.flat,
-                        color: this.getIconColor
-                    }),
                     '--dl-button-border-hover': setBorderOnHover({
                         disabled: this.disabled,
                         flat: this.flat,
@@ -519,9 +519,6 @@ export default defineComponent({
 
 .dl-button-icon {
     transition: var(--dl-button-text-transition-duration);
-    &:hover:enabled:not(:active) {
-        color: var(--dl-button-icon-color-hover);
-    }
 }
 
 .dl-button-container {

package/src/components/basic/DlButton/utils.ts

@@ -163,12 +163,13 @@ export const setColorOnHover = ({
 export const setBorderOnHover = ({
     disabled,
     flat,
-    color
+    color,
+    shaded
 }: Partial<DlButtonProps>) => {
     if (disabled) {
         return 'var(--dl-color-separator)'
     }
-    if (flat) {
+    if (flat || shaded) {
         return 'var(--dl-color-transparent)'
     }
     if (color) {
@@ -180,15 +181,21 @@ export const setBorderOnHover = ({
 export const setBgOnHover = ({
     disabled,
     flat,
+    shaded,
     outlined,
     filled,
     color
 }: Partial<DlButtonProps>) => {
-    if (color) return getLighterGradient(color)
+    if (shaded) {
+        return 'var(--dl-color-fill)'
+    }
 
     if (disabled || flat || outlined) {
         return 'var(--dl-color-transparent)'
     }
+
+    if (color) return getLighterGradient(color)
+
     if (filled) {
         return 'var(--dl-color-hover)'
     }
@@ -196,15 +203,9 @@ export const setBgOnHover = ({
     return 'var(--dl-color-panel-background)'
 }
 
-export const setBgOnPressed = ({
-    shaded,
-    outlined
-}: Partial<DlButtonProps>) => {
-    if (shaded && outlined) {
-        return 'var(--dl-color-text-buttons)'
-    }
+export const setBgOnPressed = ({ shaded }: Partial<DlButtonProps>) => {
     if (shaded) {
-        return 'var(--dl-color-secondary)'
+        return 'var(--dl-color-fill-hover)'
     }
     return 'var(--dl-button-bg)'
 }
@@ -213,21 +214,21 @@ export const setTextOnPressed = ({
     shaded,
     outlined
 }: Partial<DlButtonProps>) => {
-    if (shaded && outlined) {
-        return 'var(--dl-color-secondary)'
-    }
-    if (shaded) {
-        return 'var(--dl-color-text-buttons)'
-    }
     return 'var(--dl-button-text-color)'
 }
 
 export const setBorderOnPressed = ({
     shaded,
-    outlined
+    disabled,
+    flat,
+    color
 }: Partial<DlButtonProps>) => {
-    if (shaded && outlined) {
-        return 'var(--dl-color-secondary)'
+    if (disabled) {
+        return 'var(--dl-color-separator)'
     }
+    if (flat || shaded) {
+        return 'var(--dl-color-transparent)'
+    }
+    if (color) return getLighterGradient(color)
     return 'var(--dl-button-border)'
 }

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/components/essential/DlIcon/DlIcon.vue

@@ -89,7 +89,7 @@ export default defineComponent({
         cssIconVars(): Record<string, string> {
             return {
                 '--dl-icon-font-size': `${this.size}`,
-                '--icon-color': this.color
+                '--dl-icon-color': this.color
                     ? // todo: remove this. this is needed for now until the swap of DLBTN in OA
                       getColor(
                           this.color === 'secondary'
@@ -157,7 +157,7 @@ export default defineComponent({
 <style scoped lang="scss">
 .dl-icon {
     display: inline-flex;
-    color: var(--dl-icon-color, var(--icon-color));
+    color: var(--dl-icon-color);
     font-size: var(--dl-icon-font-size);
 }
 </style>

package/src/demos/DlButtonDemo.vue

@@ -293,26 +293,44 @@
                 outlined
             />
         </div>
-        <div>
-            <h3>hover color</h3>
+        <div style="display: flex; flex-direction: column">
+            <h3>button with icon color</h3>
             <dl-button
                 icon="icon-dl-search"
-                flat
-                dense
+                :icon-color="'red'"
+                :text-color="'blue'"
+                color="green"
                 label="test me"
-                text-color="red"
+                size="s"
+                flat
             />
-        </div>
-        <div>
-            <h3>button with icon color</h3>
             <dl-button
                 icon="icon-dl-search"
                 :icon-color="'red'"
+                :text-color="'blue'"
+                color="green"
                 label="test me"
                 size="s"
                 shaded
+            />
+            <dl-button
+                icon="icon-dl-search"
+                :icon-color="'red'"
+                :text-color="'blue'"
+                color="green"
+                label="test me"
+                size="s"
                 outlined
             />
+            <dl-button
+                icon="icon-dl-search"
+                :icon-color="'red'"
+                :text-color="'blue'"
+                color="green"
+                label="test me"
+                size="s"
+                filled
+            />
         </div>
     </div>
 </template>

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>
 

package/src/utils/getColor.ts

@@ -10,6 +10,7 @@ const getColor = (color: string, fallback?: string) => {
     }
 
     if (!color) return `var(--${fallback || 'dl-color-darker'})`
+    if (color.includes('var(--')) return color
 
     return `var(--${color}, var(--${fallback || 'dl-color-darker'}))`
 }