@dataloop-ai/components 0.17.105 → 0.17.107

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.17.105",
+  "version": "0.17.107",
   "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

@@ -466,7 +466,7 @@ export default defineComponent({
             )
         },
         hasPrepend(): boolean {
-            return !!this.$slots.prepend && !this.isSmall
+            return !!this.$slots.prepend
         },
         hasAppend(): boolean {
             return (
@@ -489,7 +489,6 @@ export default defineComponent({
                 !this.disabled &&
                 !this.readonly &&
                 !!this.modelValue
-                // this.focused
             )
         },
         showShowPassButton(): boolean {
@@ -760,9 +759,8 @@ export default defineComponent({
         }
 
         &--s {
-            padding-top: 3px;
+            padding-top: 4px;
             padding-bottom: 3px;
-            padding-left: 5px;
             padding-right: 5px;
         }
         &--small {
@@ -835,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/components/compound/DlSelect/DlSelect.vue

@@ -281,13 +281,10 @@
                             name="option"
                         />
                         <template v-else>
-                            {{
-                                capitalizedOptions
-                                    ? typeof getOptionLabel(option) ===
-                                        'string' &&
-                                        getOptionLabel(option).toLowerCase()
-                                    : getOptionLabel(option)
-                            }}
+                            <span
+                                class="inner-option"
+                                v-html="getOptionHtml(option)"
+                            />
                         </template>
                     </dl-select-option>
                     <dl-list-item v-if="hasAfterOptions && !noOptions">
@@ -418,6 +415,7 @@ export default defineComponent({
         const selectedIndex = ref(-1)
         const highlightedIndex = ref(-1)
         const isEmpty = ref(true)
+        const searchInputValue = ref('')
         const MAX_ITEMS_PER_LIST = 100 // HARDCODED - max items per list before virtual scroll
 
         const setHighlightedIndex = (value: any) => {
@@ -446,7 +444,8 @@ export default defineComponent({
             selectedIndex,
             setHighlightedIndex,
             handleSelectedItem,
-            handleModelValueUpdate
+            handleModelValueUpdate,
+            searchInputValue
         }
     },
     computed: {
@@ -817,7 +816,19 @@ export default defineComponent({
                     (this.$refs.menu as any)?.updatePosition()
                 })
             }
-            this.$emit('search-input', (e.target as HTMLInputElement).value)
+            const searchValue = (e.target as HTMLInputElement).value
+            this.searchInputValue = searchValue
+            this.$emit('search-input', searchValue)
+        },
+        getOptionHtml(option: DlSelectOptionType) {
+            return `<span>${(this.capitalizedOptions
+                ? typeof this.getOptionLabel(option) === 'string' &&
+                  this.getOptionLabel(option).toLowerCase()
+                : this.getOptionLabel(option)
+            ).replace(
+                this.searchInputValue,
+                `<span style="background: var(--dl-color-warning)">${this.searchInputValue}</span>`
+            )}</span>`
         },
         handleSearchBlur(e: Event): void {
             if (this.search) {

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>