@dataloop-ai/components 0.16.36 → 0.16.38

package/package.json

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

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

@@ -694,7 +694,6 @@ export default defineComponent({
             padding-bottom: 3px;
             padding-left: 5px;
             padding-right: 5px;
-            width: 100%;
         }
 
         &--error {

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

@@ -34,6 +34,7 @@
         <dl-button
             v-show="withSearchBtn"
             padding="9px 16px"
+            style="width: 20%; min-width: fit-content"
             :size="size"
             :class="buttonClasses"
             fluid

package/src/components/compound/DlTable/DlTable.vue

@@ -408,19 +408,17 @@
         </div>
 
         <div
-            v-if="hasPaginationSlot"
-            class="dl-table__control"
-        >
-            <slot
-                v-bind="marginalsScope"
-                name="pagination"
-            />
-        </div>
-
-        <div
-            v-else-if="!hideBottom || hideNoData"
+            v-if="!hideBottom"
             :class="bottomClasses"
         >
+            <div class="dl-table__control">
+                <slot
+                    v-if="nothingToDisplay && !hideNoData"
+                    name="no-data"
+                >
+                    {{ bottomMessage }}
+                </slot>
+            </div>
             <div class="dl-table__control">
                 <slot
                     name="bottom"
@@ -434,20 +432,21 @@
                             {{ selectedRowsLabel(rowsSelectedNumber) }}
                         </div>
                     </div>
-                    <dl-pagination
-                        v-if="displayPagination"
-                        v-bind="marginalsScope.pagination"
-                        @update:rowsPerPage="
-                            (v) => setPagination({ rowsPerPage: v })
-                        "
-                        @update:modelValue="(v) => setPagination({ page: v })"
-                    />
 
                     <slot
-                        v-if="nothingToDisplay && !hideNoData"
-                        name="no-data"
+                        v-bind="marginalsScope"
+                        name="pagination"
                     >
-                        {{ bottomMessage }}
+                        <dl-pagination
+                            v-if="displayPagination"
+                            v-bind="marginalsScope.pagination"
+                            @update:rowsPerPage="
+                                (v) => setPagination({ rowsPerPage: v })
+                            "
+                            @update:modelValue="
+                                (v) => setPagination({ page: v })
+                            "
+                        />
                     </slot>
                 </slot>
             </div>
@@ -1118,6 +1117,7 @@ export default defineComponent({
         function onVScroll(info: ScrollDetails) {
             emit('virtual-scroll', info)
         }
+
         //
 
         const onTrClick = (

package/src/demo/DlInputDemo.vue

@@ -89,17 +89,34 @@
             error
             error-message="Error message is the strongest."
         />
+        <p>input in a row with button</p>
+        <div class="row">
+            <dl-input
+                class="input-parts"
+                style="width: 440px"
+                placeholder="Select option"
+                title="Min"
+                without-root-padding
+                size="s"
+            />
+            <dl-button
+                dense
+                flat
+                icon="icon-dl-add"
+                size="m"
+            />
+        </div>
     </div>
 </template>
-
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi'
-import { DlInput, DlIcon } from '../components'
+import { DlInput, DlIcon, DlButton } from '../components'
 export default defineComponent({
     name: 'DlInputDemo',
     components: {
         DlInput,
-        DlIcon
+        DlIcon,
+        DlButton
     },
     setup() {
         const textInputValue = ref<string>('')
@@ -118,3 +135,4 @@ export default defineComponent({
     }
 })
 </script>
+<style></style>

package/src/demo/DlTableDemo.vue

@@ -215,6 +215,37 @@
                     />
                 </div>
             </div>
+            <div>
+                <p>#no-data & #pagination declare together</p>
+                <DlTable
+                    :selected="selected"
+                    :separator="separator"
+                    :columns="columns"
+                    :bordered="bordered"
+                    :draggable="draggable"
+                    :dense="dense"
+                    class="sticky-header"
+                    :filter="filter"
+                    :selection="selection"
+                    :loading="loading"
+                    :resizable="resizable"
+                    row-key="name"
+                    color="dl-color-secondary"
+                    title="Table Title"
+                    :virtual-scroll="vScroll"
+                    style="height: 200px"
+                    :rows-per-page-options="rowsPerPageOptions"
+                    @row-click="log"
+                    @update:selected="updateSeleted"
+                >
+                    <template #pagination>
+                        pagination slot, no-data slot should be visible too
+                    </template>
+                    <template #no-data>
+                        no-data slot, pagination slot should be visible too
+                    </template>
+                </DlTable>
+            </div>
         </div>
     </div>
 </template>