@dataloop-ai/components 0.17.103 → 0.17.105

package/package.json

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

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

@@ -401,6 +401,15 @@ export default defineComponent({
             }
             return classes
         },
+        getBorderColor(): string {
+            if (this.error) {
+                return `var(--dl-color-negative)`
+            } else if (this.warning) {
+                return `var(--dl-color-warning)`
+            } else {
+                return `var(--dl-color-secondary)`
+            }
+        },
         cssVars(): Record<string, any> {
             let inputMargin = this.margin
 
@@ -408,7 +417,8 @@ export default defineComponent({
                 inputMargin = '0px 20px 0px 0px'
             }
             return {
-                '--dl-input-margin': inputMargin
+                '--dl-input-margin': inputMargin,
+                '--dl-input-border-color-hover': this.getBorderColor
             }
         },
         inputClasses(): string[] {
@@ -450,7 +460,10 @@ export default defineComponent({
             ]
         },
         isSmall(): boolean {
-            return this.size === InputSizes.s
+            return (
+                this.size === (InputSizes.s as TInputSizes) ||
+                this.size === (InputSizes.small as TInputSizes)
+            )
         },
         hasPrepend(): boolean {
             return !!this.$slots.prepend && !this.isSmall
@@ -664,6 +677,9 @@ export default defineComponent({
         &--s {
             margin: 4px auto auto;
         }
+        &--small {
+            margin: 4px auto auto;
+        }
     }
 
     &__title {
@@ -696,6 +712,9 @@ export default defineComponent({
         &--s {
             padding: 0px 10px;
         }
+        &--small {
+            padding: 0px 10px;
+        }
     }
 
     &__input-wrapper {
@@ -735,6 +754,10 @@ export default defineComponent({
             padding-top: 7px;
             padding-bottom: 7px;
         }
+        &--medium {
+            padding-top: 7px;
+            padding-bottom: 7px;
+        }
 
         &--s {
             padding-top: 3px;
@@ -742,18 +765,22 @@ export default defineComponent({
             padding-left: 5px;
             padding-right: 5px;
         }
+        &--small {
+            padding-top: 3px;
+            padding-bottom: 3px;
+            padding-left: 5px;
+            padding-right: 5px;
+        }
 
         &--error {
             border-color: var(--dl-color-negative);
             &:hover {
-                border-color: var(--dl-color-separator) !important;
             }
         }
 
         &--warning {
-            border-color: var(--dl-color-warning);
+            border-color: var(--dl-input-border-color-hover);
             &:hover {
-                border-color: var(--dl-color-separator) !important;
             }
         }
 
@@ -763,11 +790,11 @@ export default defineComponent({
         }
 
         &:hover {
-            border-color: var(--dl-color-secondary);
+            border-color: var(--dl-input-border-color-hover);
         }
 
         &:focus {
-            border-color: var(--dl-color-secondary);
+            border-color: var(--dl-input-border-color-hover);
         }
 
         &:disabled {
@@ -795,14 +822,26 @@ export default defineComponent({
             height: 34px;
         }
 
+        &--large {
+            height: 34px;
+        }
+
         &--m {
             height: 28px;
         }
 
+        &--medium {
+            height: 28px;
+        }
+
         &--s {
             height: 20px;
         }
 
+        &--small {
+            height: 20px;
+        }
+
         &--pos-left {
             top: 0;
             left: 0;

package/src/components/compound/DlSelect/DlSelect.vue

@@ -636,7 +636,10 @@ export default defineComponent({
             return classes
         },
         isSmall(): boolean {
-            return this.size === InputSizes.s
+            return (
+                this.size === (InputSizes.s as TInputSizes) ||
+                this.size === (InputSizes.small as TInputSizes)
+            )
         },
         hasPrepend(): boolean {
             if (isVue2) {
@@ -870,6 +873,10 @@ export default defineComponent({
         display: flex;
         align-items: center;
     }
+    &--small {
+        display: flex;
+        align-items: center;
+    }
     &--placeholder {
         color: var(--placeholder-color);
     }
@@ -880,7 +887,7 @@ export default defineComponent({
         align-items: center;
         color: var(--dl-color-lighter);
 
-        &--s {
+        &--small {
             margin-right: 5px;
             margin-bottom: 0px;
         }
@@ -965,6 +972,10 @@ export default defineComponent({
             padding-top: 7px;
             padding-bottom: 7px;
         }
+        &--medium {
+            padding-top: 7px;
+            padding-bottom: 7px;
+        }
 
         &--s {
             padding-top: 3px;
@@ -973,6 +984,13 @@ export default defineComponent({
             padding-right: 5px;
             width: calc(100% - 10px);
         }
+        &--small {
+            padding-top: 3px;
+            padding-bottom: 3px;
+            padding-left: 5px;
+            padding-right: 5px;
+            width: calc(100% - 10px);
+        }
 
         &--has-selection {
             color: var(--dl-color-medium);
@@ -1067,14 +1085,26 @@ export default defineComponent({
             height: 34px;
         }
 
+        &--large {
+            height: 34px;
+        }
+
         &--m {
             height: 28px;
         }
 
+        &--medium {
+            height: 28px;
+        }
+
         &--s {
             height: 20px;
         }
 
+        &--small {
+            height: 20px;
+        }
+
         &--pos-left {
             top: 0;
             left: 0;

package/src/components/compound/DlSelect/utils.ts

@@ -13,7 +13,10 @@ export const getLabel = (option: any) => {
 const ICON_SIZES = {
     s: '12px',
     m: '14px',
-    l: '16px'
+    l: '16px',
+    small: '12px',
+    medium: '14px',
+    large: '16px'
 }
 
 export const getLabelOfSelectedOption = (

package/src/utils/input-sizes.ts

@@ -1,7 +1,10 @@
 export const InputSizes = {
     l: 'l',
     m: 'm',
-    s: 's'
+    s: 's',
+    large: 'large',
+    medium: 'medium',
+    small: 'small'
 } as const
 
-export type TInputSizes = typeof InputSizes[keyof typeof InputSizes]
+export type TInputSizes = (typeof InputSizes)[keyof typeof InputSizes]