@dataloop-ai/components 0.17.104 → 0.17.106

package/package.json

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

package/src/components/basic/DlGrid/types.ts

@@ -2,3 +2,4 @@ export interface DlGridLayout {
     name: string
     value: number[][]
 }
+export type DlGridSideType = 'left' | 'right'

package/src/components/basic/DlWidget/DlWidget.vue

@@ -94,6 +94,7 @@ export default defineComponent({
                 clone.style.visibility = 'visible'
                 clone.style.width = `${this.draggedWidget.offsetWidth}px`
                 clone.style.height = `${this.draggedWidget.offsetHeight}px`
+                clone.style.backgroundColor = `var(--dl-color-bg)`
             }
 
             const sourceCanvas = this.draggedWidget?.querySelector('canvas')
@@ -249,6 +250,8 @@ export default defineComponent({
 
     &__drag {
         position: relative;
+        opacity: 0.2;
+        background: var(--dl-color-separator);
         &::after {
             content: '';
             position: absolute;
@@ -256,7 +259,6 @@ export default defineComponent({
             height: 100%;
             top: 0;
             left: 0;
-            background: var(--dl-color-separator);
             border-radius: 5px;
         }
     }

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

@@ -1,4 +1,5 @@
 import { cloneDeep } from 'lodash'
+import { DlGridSideType } from '../DlGrid/types'
 
 export function leastCommonMultiple(arr: number[]) {
     if (!arr) return
@@ -61,11 +62,9 @@ export function swapElemensInMatrix(
     layout: number[][],
     sourceIndex: any,
     targetIndex: any,
-    side: string,
+    side: DlGridSideType,
     maxElements: number
 ) {
-    if (targetIndex.column === sourceIndex.column + 1 && side === 'left')
-        return layout
     const newLayout = cloneDeep(layout)
 
     const removedElement = newLayout[sourceIndex.row].splice(
@@ -78,7 +77,35 @@ export function swapElemensInMatrix(
         removedElement[0]
     )
 
-    return isTooLarge(newLayout, maxElements) ? layout : newLayout
+    return isTooLarge(newLayout, maxElements)
+        ? moveElementsToNextIndex(newLayout, maxElements)
+        : newLayout
+}
+
+function moveElementsToNextIndex(
+    template: number[][],
+    maxElements: number
+): number[][] {
+    const clonedTemplate: number[][] = cloneDeep(template)
+    let overflow: number[] = []
+
+    for (let i = 0; i < clonedTemplate.length; i++) {
+        let currentRow = clonedTemplate[i]
+        if (overflow.length > 0) {
+            currentRow = overflow.concat(currentRow)
+            overflow = []
+        }
+        if (currentRow.length > maxElements) {
+            overflow = currentRow.slice(maxElements)
+            currentRow = currentRow.slice(0, maxElements)
+        }
+        clonedTemplate[i] = currentRow
+        if (i + 1 < clonedTemplate.length && overflow.length > 0) {
+            clonedTemplate[i + 1] = overflow.concat(clonedTemplate[i + 1])
+            overflow = []
+        }
+    }
+    return clonedTemplate
 }
 
 function isTooLarge(layout: number[][], max: number) {

package/src/components/compound/DlDropdownButton/DlDropdownButton.vue

@@ -465,7 +465,7 @@ export default defineComponent({
     &--separator {
         position: absolute;
         left: 0;
-        width: 1px;
+        width: 0.7px;
         height: 60%;
     }
 

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[] {
@@ -456,7 +466,7 @@ export default defineComponent({
             )
         },
         hasPrepend(): boolean {
-            return !!this.$slots.prepend && !this.isSmall
+            return !!this.$slots.prepend
         },
         hasAppend(): boolean {
             return (
@@ -479,7 +489,6 @@ export default defineComponent({
                 !this.disabled &&
                 !this.readonly &&
                 !!this.modelValue
-                // this.focused
             )
         },
         showShowPassButton(): boolean {
@@ -750,9 +759,8 @@ export default defineComponent({
         }
 
         &--s {
-            padding-top: 3px;
+            padding-top: 4px;
             padding-bottom: 3px;
-            padding-left: 5px;
             padding-right: 5px;
         }
         &--small {
@@ -765,14 +773,12 @@ export default defineComponent({
         &--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;
             }
         }
 
@@ -782,11 +788,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 {
@@ -827,6 +833,7 @@ export default defineComponent({
         }
 
         &--s {
+            margin-top: 1px;
             height: 20px;
         }
 

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

@@ -51,13 +51,15 @@ import { DlInput } from '../../DlInput'
 
 const SearchSizes = {
     l: 'l',
-    m: 'm'
+    m: 'm',
+    s: 's'
 } as const
 type TSearchSizes = (typeof SearchSizes)[keyof typeof SearchSizes]
 
 const BUTTON_SIZES = {
     l: 'l',
-    m: 's'
+    m: 's',
+    s: 's'
 }
 
 export default defineComponent({

package/src/demos/DlWidgetDemo.vue

@@ -7,11 +7,11 @@
                     @change="selectLayout"
                 >
                     <option
-                        v-for="(layout, index) in layouts"
-                        :key="index"
-                        :value="index"
+                        v-for="(layoutItem, layoutIndex) in layouts"
+                        :key="layoutIndex"
+                        :value="layoutIndex"
                     >
-                        {{ layout.name }}
+                        {{ layoutItem.name }}
                     </option>
                 </select>
                 <button
@@ -42,9 +42,7 @@
                 </template>
                 <template #content>
                     <dl-bar-chart
-                        :legend-props="legendProps"
                         :data="data"
-                        :options="options"
                         :items-in-view="8"
                     />
                 </template>
@@ -75,9 +73,7 @@
                 </template>
                 <template #content>
                     <dl-bar-chart
-                        :legend-props="legendProps"
                         :data="data"
-                        :options="options"
                         :items-in-view="6"
                     />
                 </template>
@@ -89,9 +85,7 @@
                 </template>
                 <template #content>
                     <dl-bar-chart
-                        :legend-props="legendProps"
                         :data="data"
-                        :options="options"
                         :items-in-view="6"
                     />
                 </template>
@@ -104,9 +98,7 @@
                 </template>
                 <template #content>
                     <dl-bar-chart
-                        :legend-props="legendProps"
                         :data="data"
-                        :options="options"
                         :items-in-view="8"
                     />
                 </template>
@@ -125,9 +117,7 @@
                 </template>
                 <template #content>
                     <dl-bar-chart
-                        :legend-props="legendProps"
                         :data="data"
-                        :options="options"
                         :items-in-view="6"
                     />
                 </template>