@dataloop-ai/components 0.18.111 → 0.18.113

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.18.111",
+  "version": "0.18.113",
   "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/DlSelect/DlSelect.vue

@@ -133,6 +133,14 @@
                         }`
                     ]"
                 >
+                    <dl-icon
+                        v-if="clearable && hasSelection"
+                        class=".dl-select__clear-button"
+                        icon="icon-dl-close"
+                        :size="withoutBorders ? '10px' : '12px'"
+                        style="margin-right: 3px; cursor: pointer"
+                        @click.prevent.stop="clearSelection"
+                    />
                     <dl-icon
                         :icon="dropdownIcon"
                         :color="chevronIconColor"
@@ -388,7 +396,7 @@ export default defineComponent({
         },
         capitalizedOptions: { type: Boolean, default: false },
         withoutDropdownIconPadding: { type: Boolean, default: false },
-        clearButtonTooltip: { type: Boolean, default: false },
+        clearable: { type: Boolean, default: false },
         dropdownMaxHeight: { type: String, default: '30vh' },
         preserveSearch: { type: Boolean, default: false },
         disabledTooltip: { type: String, default: 'Disabled' },
@@ -455,6 +463,9 @@ export default defineComponent({
         }
     },
     computed: {
+        hasSelection(): boolean {
+            return !!this.modelValueLength || this.selectedIndex !== -1
+        },
         filteredOptions(): DlSelectOptionType[] {
             if (this.customFilter || this.searchTerm === '') {
                 return this.options
@@ -778,6 +789,13 @@ export default defineComponent({
             this.$emit('change', toEmit)
         },
         clearSelection(): void {
+            let toEmit: any[] | string = []
+            if (this.isModelValuePrimitiveType) {
+                toEmit = ''
+            }
+
+            this.$emit('update:model-value', toEmit)
+            this.$emit('change', toEmit)
             this.selectedIndex = -1
             this.closeMenu()
         },

package/src/components/compound/DlTable/DlTable.vue

@@ -241,6 +241,7 @@
                                         />
                                     </slot>
                                 </td>
+                                <!-- todo wrap this with dltd -->
                                 <slot
                                     v-for="col in computedCols"
                                     v-bind="

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/DlSelectDemo.vue

@@ -161,6 +161,13 @@
             multiselect
             searchable
         />
+        <dl-select
+            v-model="selectedWithChildrenSearch"
+            :options="treeOptions"
+            size="m"
+            multiselect
+            clearable
+        />
         Capitalized options
         <dl-select
             v-model="selectedWithChildrenCapitalized"
@@ -383,6 +390,42 @@
                 </div>
             </template>
         </dl-select>
+
+        Select clearable
+        <dl-select
+            v-model="selectedOption"
+            :options="[
+                {
+                    subLabel: 'not so high',
+                    label: 'High',
+                    value: 'high',
+                    bgColor: 'dl-color-negative'
+                },
+                {
+                    subLabel: 'not so medium',
+                    label: 'Medium',
+                    value: 'medium',
+                    bgColor: 'dl-color-warning',
+                    textColor: 'dl-color-darker'
+                },
+                {
+                    subLabel: 'not so low',
+                    label: 'Low',
+                    value: 'low',
+                    bgColor: 'dl-color-positive',
+                    textColor: 'dl-color-darker'
+                }
+            ]"
+            clearable
+            style="margin-bottom: 150px"
+        >
+            <template #option="scope">
+                <div style="padding: 5px 0px">
+                    <div>{{ scope.opt.label }}</div>
+                    <div>{{ scope.opt.subLabel }}</div>
+                </div>
+            </template>
+        </dl-select>
     </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'}))`
 }