@dataloop-ai/components 0.20.59 → 0.20.61

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.20.59",
3
+ "version": "0.20.61",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
@@ -12,6 +12,49 @@
12
12
  >
13
13
  <div ref="panel" :style="innerContainerStyles" class="inner-container">
14
14
  <div v-if="collapsed" class="inner-container-overlay" />
15
+ <div
16
+ ref="separator"
17
+ class="separator"
18
+ :class="{ resize: resizable === true && isFullWidth === true }"
19
+ :style="separatorStyles"
20
+ >
21
+ <div
22
+ v-if="showDragHandle"
23
+ v-show="resizable === true"
24
+ class="gutter"
25
+ :style="glutterStyles"
26
+ />
27
+ </div>
28
+ <div
29
+ v-if="hasHeader === true && !isEmpty"
30
+ class="header"
31
+ :style="headerStyles"
32
+ >
33
+ <div class="overflow-hidden">
34
+ <slot name="header" />
35
+ </div>
36
+ </div>
37
+ <div class="content" :style="contentStyle">
38
+ <div class="column" />
39
+ <dl-empty-state
40
+ v-if="isEmpty && emptyStateProps"
41
+ v-bind="emptyStateProps"
42
+ >
43
+ <template v-for="(_, slot) in $slots" #[slot]="props">
44
+ <slot :name="slot" v-bind="props" />
45
+ </template>
46
+ </dl-empty-state>
47
+ <slot v-if="!isEmpty" />
48
+ </div>
49
+ <div
50
+ v-if="hasFooter === true && !isEmpty"
51
+ class="footer"
52
+ :style="footerStyles"
53
+ >
54
+ <div class="overflow-hidden">
55
+ <slot name="footer" />
56
+ </div>
57
+ </div>
15
58
  <div v-if="collapsable === true">
16
59
  <div
17
60
  v-if="
@@ -23,7 +66,7 @@
23
66
  :style="collapseIconStyle"
24
67
  @click="handleCollapseButtonClick"
25
68
  >
26
- <dl-tooltip>Hide</dl-tooltip>
69
+ <dl-tooltip>Collapse Panel</dl-tooltip>
27
70
  <dl-icon
28
71
  icon="icon-dl-collapse"
29
72
  color="dl-color-darker"
@@ -36,7 +79,7 @@
36
79
  :style="collapseIconStyle"
37
80
  @click="handleCollapseButtonClick"
38
81
  >
39
- <dl-tooltip>Show</dl-tooltip>
82
+ <dl-tooltip>Expand Panel</dl-tooltip>
40
83
  <dl-icon
41
84
  icon="icon-dl-expand"
42
85
  color="dl-color-darker"
@@ -55,7 +98,7 @@
55
98
  @mouseleave="collapseButtonMouseLeave"
56
99
  @mouseenter="collapseButtonMouseEnter"
57
100
  >
58
- <dl-tooltip>Hide</dl-tooltip>
101
+ <dl-tooltip>Collapse Panel</dl-tooltip>
59
102
  <dl-icon
60
103
  icon="icon-dl-expand"
61
104
  color="dl-color-darker"
@@ -70,7 +113,7 @@
70
113
  @mouseleave="collapseButtonMouseLeave"
71
114
  @mouseenter="collapseButtonMouseEnter"
72
115
  >
73
- <dl-tooltip>Show</dl-tooltip>
116
+ <dl-tooltip>Expand Panel</dl-tooltip>
74
117
  <dl-icon
75
118
  icon="icon-dl-collapse"
76
119
  color="dl-color-darker"
@@ -78,49 +121,6 @@
78
121
  />
79
122
  </div>
80
123
  </div>
81
- <div
82
- ref="separator"
83
- class="separator"
84
- :class="{ resize: resizable === true }"
85
- :style="separatorStyles"
86
- >
87
- <div
88
- v-if="showDragHandle"
89
- v-show="resizable === true"
90
- class="gutter"
91
- :style="glutterStyles"
92
- />
93
- </div>
94
- <div
95
- v-if="hasHeader === true && !isEmpty"
96
- class="header"
97
- :style="headerStyles"
98
- >
99
- <div class="overflow-hidden">
100
- <slot name="header" />
101
- </div>
102
- </div>
103
- <div class="content" :style="contentStyle">
104
- <div class="column" />
105
- <dl-empty-state
106
- v-if="isEmpty && emptyStateProps"
107
- v-bind="emptyStateProps"
108
- >
109
- <template v-for="(_, slot) in $slots" #[slot]="props">
110
- <slot :name="slot" v-bind="props" />
111
- </template>
112
- </dl-empty-state>
113
- <slot v-if="!isEmpty" />
114
- </div>
115
- <div
116
- v-if="hasFooter === true && !isEmpty"
117
- class="footer"
118
- :style="footerStyles"
119
- >
120
- <div class="overflow-hidden">
121
- <slot name="footer" />
122
- </div>
123
- </div>
124
124
  </div>
125
125
  </div>
126
126
  </template>
@@ -325,7 +325,7 @@ export default defineComponent({
325
325
  alignItems: 'center',
326
326
  borderRadius: '2px',
327
327
  border: this.collapseBorder,
328
- background: 'var(--dl-color-component, #30363D)',
328
+ background: 'var(--dl-color-bg, #30363D)',
329
329
  boxShadow:
330
330
  '0px 4px 4px 0px var(--dl-color-shadow, rgba(27, 30, 34, 0.24))'
331
331
  }
@@ -340,7 +340,7 @@ export default defineComponent({
340
340
  },
341
341
  leftClosedCollapseIconStyle(): Record<string, string> {
342
342
  return {
343
- left: this.isStudioMode ? '10px' : '0px',
343
+ left: this.isStudioMode ? '6px' : '0px',
344
344
  marginRight: '15px',
345
345
  borderTopRightRadius: '2px',
346
346
  borderBottomRightRadius: '2px'