@dataloop-ai/components 0.19.28 → 0.19.30

package/package.json

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

package/src/components/basic/DlGrid/DlGrid.vue

@@ -3,7 +3,7 @@
         <dl-virtual-scroll
             v-slot="{ item }"
             :scroll-debounce="scrollDebounce"
-            style="height: 500px"
+            style="height: var(--dl-virtual-scroll-height, 500px)"
             :items="items"
             :styles="{ gridStyles, gridClass }"
         >

package/src/components/compound/DlInput/types.ts

@@ -1,7 +1,7 @@
 export interface DlInputSuggestion {
     suggestion: string
-    image: string
-    click: boolean
+    image?: string
+    click?: boolean
 }
 
 export interface DlInputFile {

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

@@ -10,6 +10,7 @@
             class="text-input-area"
             type="text"
             clear-button-tooltip
+            style="width: 100%"
             :size="size"
             :model-value="modelValue"
             :placeholder="placeholder"
@@ -50,6 +51,7 @@ import { defineComponent, PropType } from 'vue-demi'
 import { DlButton } from '../../../basic'
 import { DlIcon } from '../../../essential'
 import { DlInput } from '../../DlInput'
+import { DlInputSuggestion } from '../../DlInput/types'
 
 const SearchSizes = {
     l: 'l',
@@ -83,8 +85,8 @@ export default defineComponent({
         },
         placeholder: { type: String, default: '' },
         autoSuggestItems: {
-            type: Array as PropType<string[]>,
-            default: (): string[] => []
+            type: Array as PropType<DlInputSuggestion[]>,
+            default: (): DlInputSuggestion[] => []
         },
         highlightMatches: { type: Boolean, default: false },
         dense: { type: Boolean, default: false },

package/src/components/compound/DlTabs/DlTabs.vue

@@ -9,7 +9,7 @@
             :is-scrollable="isOverflowing"
             :is-at-end="isAtEnd"
             :is-at-start="isAtStart"
-            class="dl-tabs-root"
+            :class="{ 'full-width': fullWidth, 'dl-tabs-root': true }"
             :is-vertical="vertical"
             @left-arrow-click="handleLeft"
             @right-arrow-click="handleRight"

package/src/demos/DlDialogBoxDemo.vue

@@ -30,15 +30,28 @@
                 />
             </template>
             <template #body>
-                <p
+                <div
                     style="
-                        margin: 0;
-                        color: var(--dl-color-medium);
-                        font-size: 10px;
+                        display: flex;
+                        align-content: center;
+                        width: 100%;
+                        height: 100%;
                     "
                 >
-                    Updated by rotemshaham@dataloop.ai
-                </p>
+                    <dl-input
+                        placeholder="placeholder input readonly"
+                        readonly
+                    />
+                    <p
+                        style="
+                            margin: 0;
+                            color: var(--dl-color-medium);
+                            font-size: 10px;
+                        "
+                    >
+                        Updated by rotemshaham@dataloop.ai
+                    </p>
+                </div>
                 <p
                     style="
                         margin: 0;
@@ -214,7 +227,7 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi'
-import { DlButton, DlDialogBox, DlSwitch } from '../components'
+import { DlButton, DlDialogBox, DlSwitch, DlInput } from '../components'
 import { DlDialogBoxHeader, DlDialogBoxFooter } from '../components'
 
 export default defineComponent({
@@ -224,7 +237,8 @@ export default defineComponent({
         DlButton,
         DlDialogBox,
         DlDialogBoxHeader,
-        DlDialogBoxFooter
+        DlDialogBoxFooter,
+        DlInput
     },
     setup() {
         const modalOne = ref<any>(null)

package/src/demos/DlSearchDemo.vue

@@ -16,12 +16,30 @@
             placeholder="Search here"
             :auto-suggest-items="suggestItems"
         />
+        <dl-search
+            v-model="searchValue"
+            size="s"
+            with-search-button
+            highlight-matches
+            placeholder="Search here"
+            :auto-suggest-items="suggestItems"
+        />
+        <dl-search
+            v-model="searchValue"
+            size="s"
+            with-search-button
+            highlight-matches
+            placeholder="Search here"
+            :auto-suggest-items="suggestItems"
+            style="height: 28px"
+        />
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi'
 import { DlSearch } from '../components'
+import { DlInputSuggestion } from '../components/compound/DlInput/types'
 export default defineComponent({
     name: 'DlSearchDemo',
     components: {
@@ -29,7 +47,12 @@ export default defineComponent({
     },
     setup() {
         const searchValue = ref<string>('')
-        const suggestItems = ['foo', 'foo bar', 'bar', 'bar foo']
+        const suggestItems: DlInputSuggestion[] = [
+            { suggestion: 'foo' },
+            { suggestion: 'foo bar' },
+            { suggestion: 'bar' },
+            { suggestion: 'bar foo' }
+        ]
         return { searchValue, suggestItems }
     }
 })