@dataloop-ai/components 0.20.265 → 0.20.266

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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/compound/DlDialogBox/components/DlDialogBoxHeader.vue +21 -18
  3. package/src/demos/DlDialogBoxDemo.vue +62 -37
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.20.265",
3
+ "version": "0.20.266",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
package/src/components/compound/DlDialogBox/components/DlDialogBoxHeader.vue CHANGED
@@ -22,23 +22,25 @@
22
22
  </slot>
23
23
  </p>
24
24
  </div>
25
- <dl-button
26
- v-if="closeButton"
27
- class="close-button"
28
- icon="icon-dl-close"
29
- icon-size="16px"
30
- flat
31
- size="m"
32
- text-color="var(--dell-gray-600)"
33
- hover-bg-color="var(--dell-gray-100)"
34
- pressed-bg-color="var(--dell-gray-200)"
35
- hover-text-color="var(--dell-gray-800)"
36
- pressed-text-color="var(--dell-gray-800)"
37
- :padding="closeIconSizePadding"
38
- @click="$emit('onClose')"
39
- >
40
- <dl-tooltip :delay="800"> Close </dl-tooltip>
41
- </dl-button>
25
+ <div class="actions-container">
26
+ <slot name="actions" />
27
+ <dl-button
28
+ v-if="closeButton"
29
+ icon="icon-dl-close"
30
+ icon-size="16px"
31
+ flat
32
+ size="m"
33
+ text-color="var(--dell-gray-600)"
34
+ hover-bg-color="var(--dell-gray-100)"
35
+ pressed-bg-color="var(--dell-gray-200)"
36
+ hover-text-color="var(--dell-gray-800)"
37
+ pressed-text-color="var(--dell-gray-800)"
38
+ :padding="closeIconSizePadding"
39
+ @click="$emit('onClose')"
40
+ >
41
+ <dl-tooltip :delay="800"> Close </dl-tooltip>
42
+ </dl-button>
43
+ </div>
42
44
  </div>
43
45
  </template>
44
46
 
@@ -98,9 +100,10 @@ export default defineComponent({
98
100
  margin: 0;
99
101
  }
100
102
 
101
- .close-button {
103
+ .actions-container {
102
104
  margin-top: 5px;
103
105
  display: flex;
106
+ gap: var(--dl-dialog-box-header-actions-gap, 4px);
104
107
  align-items: flex-start;
105
108
  ::v-deep button.dl-button {
106
109
  --dl-button-border-radius: 0;
package/src/demos/DlDialogBoxDemo.vue CHANGED
@@ -1,20 +1,9 @@
1
1
  <template>
2
2
  <div>
3
- <dl-switch
4
- v-model="draggable"
5
- left-label="Draggable"
6
- />
7
- <dl-switch
8
- v-model="fullscreen"
9
- left-label="Full screen"
10
- />
11
- <dl-switch
12
- v-model="fullHeight"
13
- left-label="Full height"
14
- />
15
- <dl-button @click="openModal">
16
- Open modal
17
- </dl-button>
3
+ <dl-switch v-model="draggable" left-label="Draggable" />
4
+ <dl-switch v-model="fullscreen" left-label="Full screen" />
5
+ <dl-switch v-model="fullHeight" left-label="Full height" />
6
+ <dl-button @click="openModal"> Open modal </dl-button>
18
7
  <dl-dialog-box
19
8
  ref="modalOne"
20
9
  v-model="isOpenedFirstModal"
@@ -27,7 +16,58 @@
27
16
  title="Dialog Box Title"
28
17
  subtitle="updated by rotemshaham@dataloop.ai"
29
18
  @on-close="closeModal"
30
- />
19
+ >
20
+ <template #actions>
21
+ <dl-button
22
+ icon="icon-dl-edit"
23
+ icon-size="16px"
24
+ size="m"
25
+ flat
26
+ text-color="var(--dell-gray-600)"
27
+ hover-bg-color="var(--dell-gray-100)"
28
+ pressed-bg-color="var(--dell-gray-200)"
29
+ hover-text-color="var(--dell-gray-800)"
30
+ pressed-text-color="var(--dell-gray-800)"
31
+ padding="0 0 0 0"
32
+ />
33
+ <dl-button
34
+ icon="icon-dl-delete"
35
+ icon-size="16px"
36
+ size="m"
37
+ flat
38
+ text-color="var(--dell-gray-600)"
39
+ hover-bg-color="var(--dell-gray-100)"
40
+ pressed-bg-color="var(--dell-gray-200)"
41
+ hover-text-color="var(--dell-gray-800)"
42
+ pressed-text-color="var(--dell-gray-800)"
43
+ padding="0 0 0 0"
44
+ />
45
+ <dl-button
46
+ icon="icon-dl-download"
47
+ icon-size="16px"
48
+ size="m"
49
+ flat
50
+ text-color="var(--dell-gray-600)"
51
+ hover-bg-color="var(--dell-gray-100)"
52
+ pressed-bg-color="var(--dell-gray-200)"
53
+ hover-text-color="var(--dell-gray-800)"
54
+ pressed-text-color="var(--dell-gray-800)"
55
+ padding="0 0 0 0"
56
+ />
57
+ <dl-button
58
+ icon="icon-dl-settings"
59
+ icon-size="16px"
60
+ size="m"
61
+ flat
62
+ text-color="var(--dell-gray-600)"
63
+ hover-bg-color="var(--dell-gray-100)"
64
+ pressed-bg-color="var(--dell-gray-200)"
65
+ hover-text-color="var(--dell-gray-800)"
66
+ pressed-text-color="var(--dell-gray-800)"
67
+ padding="0 0 0 0"
68
+ />
69
+ </template>
70
+ </dl-dialog-box-header>
31
71
  </template>
32
72
  <template #body>
33
73
  <div
@@ -95,24 +135,17 @@
95
135
  </template>
96
136
  <template #footer>
97
137
  <dl-dialog-box-footer>
98
- <dl-button
99
- outlined
100
- @click="openSecondModal"
101
- >
138
+ <dl-button outlined @click="openSecondModal">
102
139
  Open empty modal
103
140
  </dl-button>
104
- <dl-button @click="closeModal">
105
- Close
106
- </dl-button>
141
+ <dl-button @click="closeModal"> Close </dl-button>
107
142
  </dl-dialog-box-footer>
108
143
  </template>
109
144
  </dl-dialog-box>
110
145
 
111
146
  <div>
112
147
  Styled Tooltip using a class
113
- <dl-button @click="openModal2">
114
- Open modal
115
- </dl-button>
148
+ <dl-button @click="openModal2"> Open modal </dl-button>
116
149
  <dl-dialog-box
117
150
  ref="modalTwo"
118
151
  v-model="isOpenedSecondModal"
@@ -162,10 +195,7 @@
162
195
  </template>
163
196
  <template #footer>
164
197
  <dl-dialog-box-footer>
165
- <dl-button
166
- outlined
167
- @click="openSecondModal"
168
- >
198
+ <dl-button outlined @click="openSecondModal">
169
199
  Open empty modal
170
200
  </dl-button>
171
201
  <dl-button @click="isOpenedSecondModal = false">
@@ -177,9 +207,7 @@
177
207
  </div>
178
208
  <div>
179
209
  Styled Tooltip using an id
180
- <dl-button @click="openModal3">
181
- Open modal
182
- </dl-button>
210
+ <dl-button @click="openModal3"> Open modal </dl-button>
183
211
  <dl-dialog-box
184
212
  ref="modalThree"
185
213
  v-model="isOpenedThirdModal"
@@ -228,10 +256,7 @@
228
256
  </template>
229
257
  <template #footer>
230
258
  <dl-dialog-box-footer>
231
- <dl-button
232
- outlined
233
- @click="openSecondModal"
234
- >
259
+ <dl-button outlined @click="openSecondModal">
235
260
  Open empty modal
236
261
  </dl-button>
237
262
  <dl-button @click="isOpenedThirdModal = false">