@dataloop-ai/components 0.17.64 → 0.17.65

package/package.json

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

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

@@ -62,6 +62,9 @@ import {
     setColorOnHover,
     setBorderOnHover,
     setBgOnHover,
+    setBgOnPressed,
+    setBorderOnPressed,
+    setTextOnPressed,
     setIconSize,
     setIconPadding,
     setMaxHeight
@@ -291,7 +294,8 @@ export default defineComponent({
                         disabled: this.disabled,
                         flat: this.flat,
                         shaded: this.shaded,
-                        color: this.color
+                        color: this.color,
+                        outlined: this.outlined
                     }),
                     '--dl-button-text-color-hover': setColorOnHover({
                         disabled: this.disabled,
@@ -314,13 +318,18 @@ export default defineComponent({
                         filled: this.filled,
                         color: this.color
                     }),
-                    '--dl-button-text-color-pressed': this.shaded
-                        ? 'var(--dl-color-text-buttons)'
-                        : 'var(--dl-button-text-color)',
-                    '--dl-button-bg-pressed': this.shaded
-                        ? 'var(--dl-color-secondary)'
-                        : 'var(--dl-button-bg)',
-                    '--dl-button-border-pressed': 'var(--dl-button-border)'
+                    '--dl-button-text-color-pressed': setTextOnPressed({
+                        shaded: this.shaded,
+                        outlined: this.shaded
+                    }),
+                    '--dl-button-bg-pressed': setBgOnPressed({
+                        shaded: this.shaded,
+                        outlined: this.outlined
+                    }),
+                    '--dl-button-border-pressed': setBorderOnPressed({
+                        shaded: this.shaded,
+                        outlined: this.outlined
+                    })
                 }
             }
 

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

@@ -70,6 +70,9 @@ export const setTextColor = ({
     if (disabled) {
         return getColor('', 'dl-color-disabled')
     }
+    if (shaded && outlined) {
+        return 'var(--dl-color-text-darker-buttons)'
+    }
     if (outlined) {
         return getColor(textColor, 'dl-color-secondary')
     }
@@ -111,13 +114,17 @@ export const setBorder = ({
     disabled,
     flat,
     color = '',
-    shaded
+    shaded,
+    outlined
 }: Partial<DlButtonProps>) => {
     if (disabled) {
         return flat
             ? 'var(--dl-color-transparent)'
             : 'var(--dl-color-separator)'
     }
+    if (shaded && outlined) {
+        return 'var(--dl-color-separator)'
+    }
     if (flat || shaded) {
         return 'var(--dl-color-transparent)'
     }
@@ -177,3 +184,39 @@ 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)'
+    }
+    if (shaded) {
+        return 'var(--dl-color-secondary)'
+    }
+    return 'var(--dl-button-bg)'
+}
+
+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
+}: Partial<DlButtonProps>) => {
+    if (shaded && outlined) {
+        return 'var(--dl-color-secondary)'
+    }
+    return 'var(--dl-button-border)'
+}

package/src/components/compound/DlDialogBox/DlDialogBox.vue

@@ -262,7 +262,7 @@ export default defineComponent({
 
 .header {
     display: flex;
-    padding: 16px;
+    padding: var(--dl-dialog-box-header-padding, 16px);
     border-bottom: var(--dl-dialog-separator);
 }
 
@@ -281,7 +281,7 @@ export default defineComponent({
 
 .footer {
     display: flex;
-    padding: 20px 16px;
+    padding: var(--dl-dialog-box-footer-padding, 20px 16px);
     border-top: var(--dl-dialog-separator);
 }
 

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

@@ -44,6 +44,7 @@
             <dl-button
                 class="dl-smart-search__buttons--filters"
                 shaded
+                outlined
                 size="s"
             >
                 Saved Filters
@@ -65,6 +66,7 @@
             v-model="jsonEditorModel"
             :height="500"
             :width="800"
+            style="--dl-dialog-box-footer-padding: 10px 16px"
         >
             <template #header>
                 <dl-dialog-box-header
@@ -90,6 +92,7 @@
                                 label="Align Left"
                                 flat
                                 color="secondary"
+                                padding="0px 3px"
                                 @click="alignJsonText"
                             />
                         </div>
@@ -111,11 +114,13 @@
                             label="Delete Query"
                             flat
                             color="secondary"
+                            padding="0"
                             @click="handleQueryRemove"
                         />
                     </div>
                     <div class="json-editor__footer-save">
                         <dl-button
+                            style="margin-right: 14px"
                             outlined
                             label="Save As"
                             @click="saveQueryDialogBoxModel = true"
@@ -152,7 +157,10 @@
                 </div>
             </template>
         </dl-dialog-box>
-        <dl-dialog-box v-model="saveQueryDialogBoxModel">
+        <dl-dialog-box
+            v-model="saveQueryDialogBoxModel"
+            style="--dl-dialog-box-footer-padding: 14px 17px"
+        >
             <template #header>
                 <dl-dialog-box-header
                     title="Save Query"
@@ -162,17 +170,22 @@
             <template #body>
                 <dl-input
                     v-model="newQueryName"
+                    title="Query name"
                     style="text-align: center"
                     placeholder="Type query name"
                 />
             </template>
             <template #footer>
                 <div class="dl-smart-search__buttons--save">
-                    <dl-button @click="handleSaveQuery">
+                    <dl-button
+                        :disabled="!newQueryName"
+                        outlined
+                        @click="handleSaveQuery"
+                    >
                         Save
                     </dl-button>
                     <dl-button
-                        padding="10px"
+                        :disabled="!newQueryName"
                         @click="handleSaveQuery(true)"
                     >
                         Save and Search
@@ -685,8 +698,12 @@ export default defineComponent({
         display: flex;
         justify-content: space-between;
     }
-    &-save > * {
-        margin: 0px 10px;
+    &-delete {
+        align-items: center;
+        display: flex;
+        & > * {
+            margin-bottom: 6px;
+        }
     }
 }
 .json-query {

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

@@ -8,6 +8,7 @@
             volatile
             full-width
             :items="tabItems"
+            font-size="14px"
         />
         <div class="dl-filters-tabs">
             <dl-tab-panels v-model="currentTab">

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

@@ -66,15 +66,16 @@
                             v-if="withSaveButton"
                             class="dl-smart-search-input__save-btn-wrapper"
                         >
-                            <dl-button
-                                icon="icon-dl-save"
-                                size="16px"
-                                flat
-                                :disabled="saveStatus"
-                                @click="save"
-                            >
+                            <div>
+                                <dl-button
+                                    icon="icon-dl-save"
+                                    size="16px"
+                                    flat
+                                    :disabled="saveStatus"
+                                    @click="save"
+                                />
                                 <dl-tooltip> Save Query </dl-tooltip>
-                            </dl-button>
+                            </div>
                             <dl-button
                                 icon="icon-dl-edit"
                                 size="16px"
@@ -612,7 +613,7 @@ export default defineComponent({
         }
 
         &--disabled {
-            border-color: var(--dl-color-disabled);
+            border-color: var(--dl-color-separator);
         }
     }
 
@@ -650,7 +651,7 @@ export default defineComponent({
         height: auto;
 
         min-height: 14px;
-        max-height: 100%;
+        max-height: var(--dl-smart-search-bar-wrapper-height);
         display: block;
     }
 

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

@@ -8,10 +8,7 @@
             class="query__header"
             @mousedown="$emit('select')"
         >
-            <dl-icon
-                :icon="icon"
-                style="margin-bottom: 3px"
-            />
+            <dl-icon :icon="icon" />
             <span class="query__header--title">
                 {{ name }}
             </span>
@@ -80,7 +77,7 @@ export default defineComponent({
         display: flex;
         align-items: center;
         &--title {
-            font-size: 0.5em;
+            font-size: 12px;
             margin: 0px 12px;
         }
     }