@dataloop-ai/components 0.19.39 → 0.19.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.19.39",
3
+ "version": "0.19.41",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
@@ -1,7 +1,6 @@
1
1
  <template>
2
2
  <div class="dl-pagination--legend">
3
- <span>Showing {{ from }}-{{ to
4
- }}<span v-if="total"> of {{ total }} {{ itemsName }} </span></span>
3
+ {{ paginationContent }}
5
4
  </div>
6
5
  </template>
7
6
 
@@ -27,6 +26,14 @@ export default defineComponent({
27
26
  type: String,
28
27
  default: 'rows'
29
28
  }
29
+ },
30
+ computed: {
31
+ paginationContent() {
32
+ return (
33
+ `Showing ${this.from}-${this.to}` +
34
+ (this.total ? ` of ${this.total} ${this.itemsName}` : '')
35
+ )
36
+ }
30
37
  }
31
38
  })
32
39
  </script>
@@ -36,5 +43,8 @@ export default defineComponent({
36
43
  justify-content: flex-end;
37
44
  display: flex;
38
45
  color: var(--dl-color-lighter);
46
+ height: 100%;
47
+ min-width: min-content;
48
+ overflow-y: scroll;
39
49
  }
40
50
  </style>
@@ -70,7 +70,7 @@
70
70
  @virtual-scroll="onVScroll"
71
71
  >
72
72
  <template #before>
73
- <thead v-if="hasThead">
73
+ <thead>
74
74
  <slot
75
75
  v-if="!hideHeader"
76
76
  name="header"
@@ -166,6 +166,7 @@
166
166
  flat
167
167
  icon="icon-dl-column"
168
168
  tooltip="Manage columns"
169
+ :disabled="isDataEmpty"
169
170
  >
170
171
  <slot
171
172
  name="header-cell-visible-columns-menu"
@@ -418,10 +419,7 @@
418
419
  class="dl-table"
419
420
  :class="additionalClasses"
420
421
  >
421
- <thead
422
- v-if="hasThead"
423
- :colspan="columns.length"
424
- >
422
+ <thead :colspan="columns.length">
425
423
  <slot
426
424
  v-if="!hideHeader"
427
425
  name="header"
@@ -516,6 +514,7 @@
516
514
  flat
517
515
  icon="icon-dl-column"
518
516
  tooltip="Manage columns"
517
+ :disabled="isDataEmpty"
519
518
  >
520
519
  <slot
521
520
  name="header-cell-visible-columns-menu"
@@ -750,23 +749,6 @@
750
749
  </slot>
751
750
  </slot>
752
751
 
753
- <DlTr v-if="isDataEmpty && hasEmptyStateProps">
754
- <DlTd colspan="100%">
755
- <div class="flex justify-center full-width">
756
- <dl-empty-state v-bind="emptyStateProps">
757
- <template
758
- v-for="(_, slot) in $slots"
759
- #[slot]="emptyStateProps"
760
- >
761
- <slot
762
- :name="slot"
763
- v-bind="emptyStateProps"
764
- />
765
- </template>
766
- </dl-empty-state>
767
- </div>
768
- </DlTd>
769
- </DlTr>
770
752
  <slot
771
753
  name="bottom-row"
772
754
  :cols="computedCols"
@@ -781,11 +763,30 @@
781
763
  :class="bottomClasses"
782
764
  >
783
765
  <div
784
- v-if="nothingToDisplay && !hideNoData && !isDataEmpty"
766
+ v-if="nothingToDisplay && !hideNoData"
785
767
  class="dl-table__control"
786
768
  >
787
769
  <slot name="no-data">
788
- {{ noDataMessage }}
770
+ <DlTr v-if="isDataEmpty && hasEmptyStateProps && !loading">
771
+ <DlTd colspan="100%">
772
+ <div class="flex justify-center full-width">
773
+ <dl-empty-state v-bind="emptyStateProps">
774
+ <template
775
+ v-for="(_, slot) in $slots"
776
+ #[slot]="emptyStateProps"
777
+ >
778
+ <slot
779
+ :name="slot"
780
+ v-bind="emptyStateProps"
781
+ />
782
+ </template>
783
+ </dl-empty-state>
784
+ </div>
785
+ </DlTd>
786
+ </DlTr>
787
+ <div v-else>
788
+ {{ noDataMessage }}
789
+ </div>
789
790
  </slot>
790
791
  </div>
791
792
  <div
@@ -1101,10 +1102,6 @@ export default defineComponent({
1101
1102
  default: null as unknown as PropType<any[]>
1102
1103
  },
1103
1104
  noHover: Boolean,
1104
- /**
1105
- * Indicates the data is empty
1106
- */
1107
- isEmpty: Boolean,
1108
1105
  /**
1109
1106
  * Will add another column with a button opening a menu which lets the user choose the visible columns
1110
1107
  */
@@ -1244,11 +1241,6 @@ export default defineComponent({
1244
1241
  !!slots['top-selection']
1245
1242
  )
1246
1243
  //
1247
-
1248
- const hasThead = computed(() => {
1249
- return !isDataEmpty.value || !!slots['tbody']
1250
- })
1251
-
1252
1244
  const containerClass = computed(() => {
1253
1245
  const { separator, bordered, dense, loading } = props
1254
1246
  return getContainerClass(separator, bordered, dense, loading)
@@ -1870,7 +1862,6 @@ export default defineComponent({
1870
1862
  return {
1871
1863
  containerStyle,
1872
1864
  isDataEmpty,
1873
- hasThead,
1874
1865
  handleSortableEvent,
1875
1866
  tbodyKey,
1876
1867
  tableKey,
@@ -1,24 +1,29 @@
1
1
  <template>
2
2
  <div style="align-items: stretch">
3
- <div class="row">
3
+ <div>
4
4
  <dl-input
5
5
  v-model="rowsPerPage"
6
+ width="100px"
6
7
  title="rowsPerPage"
7
8
  />
8
9
  <dl-input
9
10
  v-model="total"
11
+ width="100px"
10
12
  title="total items"
11
13
  />
12
14
  <dl-input
13
15
  v-model="max"
16
+ width="100px"
14
17
  title="max"
15
18
  />
16
19
  <dl-input
17
20
  v-model="maxDisplayRange"
21
+ width="100px"
18
22
  title="maxDisplayRange"
19
23
  />
20
24
  <dl-input
21
25
  v-model="itemsName"
26
+ width="100px"
22
27
  title="itemsName"
23
28
  />
24
29
  </div>
@@ -106,7 +111,7 @@ export default defineComponent({
106
111
  boundaryNumbers: true,
107
112
  boundaryLinks: true,
108
113
  directionLinks: true,
109
- total: 200,
114
+ total: 999,
110
115
  withQuickNavigation: true,
111
116
  disabled: false,
112
117
  itemsName: 'Rows',