@dataloop-ai/components 0.17.76 → 0.17.77

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.17.76",
3
+ "version": "0.17.77",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
@@ -24,14 +24,16 @@
24
24
  'dialog-wrapper--right': position === 'right',
25
25
  'dialog-wrapper--left': position === 'left'
26
26
  }"
27
+ @mouseenter="visibleDragIcon = true"
28
+ @mouseleave="visibleDragIcon = false"
27
29
  >
28
30
  <dl-icon
29
31
  v-if="draggable"
30
- :style="{ cursor: draggableOptions.draggableCursor }"
32
+ :style="iconStyles"
31
33
  class="dialog-wrapper--draggable-icon"
32
34
  color="dl-color-medium"
33
35
  icon="icon-dl-drag"
34
- size="15px"
36
+ size="12px"
35
37
  @mousedown="startDragElement"
36
38
  />
37
39
  <div
@@ -101,7 +103,8 @@ export default defineComponent({
101
103
  originalX: 0,
102
104
  originalY: 0,
103
105
  draggableCursor: 'pointer'
104
- }
106
+ },
107
+ visibleDragIcon: false
105
108
  }
106
109
  },
107
110
  computed: {
@@ -112,7 +115,18 @@ export default defineComponent({
112
115
  : 'rgba(0, 0, 0, 0.4)',
113
116
  '--dl-dialog-separator': this.separators
114
117
  ? '1px solid var(--dl-color-separator)'
115
- : 'none'
118
+ : 'none',
119
+ '--dl-dialog-box-drag-icon-left': `${
120
+ typeof this.width === 'string'
121
+ ? parseInt(this.width)
122
+ : this.width / 2
123
+ }px`
124
+ }
125
+ },
126
+ iconStyles() {
127
+ return {
128
+ cursor: this.draggableOptions.draggableCursor,
129
+ visibility: this.visibleDragIcon ? 'visible' : 'hidden'
116
130
  }
117
131
  },
118
132
  hasParent(): boolean {
@@ -243,8 +257,8 @@ export default defineComponent({
243
257
 
244
258
  &--draggable-icon {
245
259
  position: absolute;
246
- top: -1px;
247
- left: 3px;
260
+ top: 2px;
261
+ left: var(--dl-dialog-box-drag-icon-left);
248
262
  cursor: pointer;
249
263
  transform: rotate(90deg);
250
264
  }
@@ -264,6 +278,7 @@ export default defineComponent({
264
278
  display: flex;
265
279
  padding: var(--dl-dialog-box-header-padding, 16px);
266
280
  border-bottom: var(--dl-dialog-separator);
281
+ height: var(--dl-dialog-box-header-height, 60px);
267
282
  }
268
283
 
269
284
  .content {
@@ -282,6 +297,7 @@ export default defineComponent({
282
297
  .footer {
283
298
  display: flex;
284
299
  padding: var(--dl-dialog-box-footer-padding, 20px 16px);
300
+ height: var(--dl-dialog-box-footer-height, 35px);
285
301
  border-top: var(--dl-dialog-separator);
286
302
  }
287
303
 
@@ -18,6 +18,6 @@ export default defineComponent({
18
18
  width: 100%;
19
19
  align-items: flex-start;
20
20
  justify-content: flex-end;
21
- gap: 15px;
21
+ gap: 16px;
22
22
  }
23
23
  </style>
@@ -81,12 +81,11 @@ export default defineComponent({
81
81
 
82
82
  .subtitle {
83
83
  font-size: var(--dl-font-size-body);
84
- margin: 3px 0 0 0;
85
84
  color: var(--dl-color-medium);
85
+ margin: 0;
86
86
  }
87
87
 
88
88
  .close-button {
89
- margin-right: -6px;
90
- margin-top: -6px;
89
+ margin-top: 5px;
91
90
  }
92
91
  </style>