@dataloop-ai/components 0.20.264 → 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.
- package/package.json +2 -2
- package/src/components/compound/DlDialogBox/components/DlDialogBoxHeader.vue +27 -14
- package/src/components/compound/DlSelect/DlSelect.vue +2 -2
- package/src/components/essential/DlMenu/DlMenu.vue +5 -0
- package/src/demos/DlDialogBoxDemo.vue +62 -37
- package/src/demos/DlSelectDemo.vue +1 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dataloop-ai/components",
|
|
3
|
-
"version": "0.20.
|
|
3
|
+
"version": "0.20.266",
|
|
4
4
|
"exports": {
|
|
5
5
|
".": "./index.ts",
|
|
6
6
|
"./models": "./models.ts",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@dataloop-ai/icons": "^3.1.
|
|
26
|
+
"@dataloop-ai/icons": "^3.1.82",
|
|
27
27
|
"@monaco-editor/loader": "^1.4.0",
|
|
28
28
|
"@types/flat": "^5.0.2",
|
|
29
29
|
"@types/lodash": "^4.14.184",
|
|
@@ -22,19 +22,25 @@
|
|
|
22
22
|
</slot>
|
|
23
23
|
</p>
|
|
24
24
|
</div>
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
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>
|
|
38
44
|
</div>
|
|
39
45
|
</template>
|
|
40
46
|
|
|
@@ -94,9 +100,16 @@ export default defineComponent({
|
|
|
94
100
|
margin: 0;
|
|
95
101
|
}
|
|
96
102
|
|
|
97
|
-
.
|
|
103
|
+
.actions-container {
|
|
98
104
|
margin-top: 5px;
|
|
99
105
|
display: flex;
|
|
106
|
+
gap: var(--dl-dialog-box-header-actions-gap, 4px);
|
|
100
107
|
align-items: flex-start;
|
|
108
|
+
::v-deep button.dl-button {
|
|
109
|
+
--dl-button-border-radius: 0;
|
|
110
|
+
&:focus-visible {
|
|
111
|
+
--dl-button-border-radius: 2px;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
101
114
|
}
|
|
102
115
|
</style>
|
|
@@ -153,8 +153,7 @@
|
|
|
153
153
|
square
|
|
154
154
|
no-focus
|
|
155
155
|
:offset="[0, 3]"
|
|
156
|
-
style="
|
|
157
|
-
:style="computedMenuStyle"
|
|
156
|
+
:menu-style="computedMenuStyle"
|
|
158
157
|
:menu-class="menuClass"
|
|
159
158
|
:disabled="disabled || readonly"
|
|
160
159
|
:arrow-nav-items="options"
|
|
@@ -703,6 +702,7 @@ export default defineComponent({
|
|
|
703
702
|
},
|
|
704
703
|
computedMenuStyle(): string {
|
|
705
704
|
let style = this.menuStyle ?? ''
|
|
705
|
+
style += '; border-radius: 0'
|
|
706
706
|
if (this.optionsCount > this.MAX_ITEMS_PER_LIST) {
|
|
707
707
|
style += '; overflow-y: hidden'
|
|
708
708
|
}
|
|
@@ -159,6 +159,10 @@ export default defineComponent({
|
|
|
159
159
|
type: String,
|
|
160
160
|
default: ''
|
|
161
161
|
},
|
|
162
|
+
menuStyle: {
|
|
163
|
+
type: String,
|
|
164
|
+
default: ''
|
|
165
|
+
},
|
|
162
166
|
arrowNavItems: {
|
|
163
167
|
type: Array as PropType<any[]>,
|
|
164
168
|
default: () => [] as any[]
|
|
@@ -551,6 +555,7 @@ export default defineComponent({
|
|
|
551
555
|
const computedStyles = computed<any>(() => {
|
|
552
556
|
return [
|
|
553
557
|
attrs.style,
|
|
558
|
+
props.menuStyle,
|
|
554
559
|
transitionStyle.value,
|
|
555
560
|
{
|
|
556
561
|
'--menu-z-index': zIndex.value ?? 'var(--dl-z-index-menu)',
|
|
@@ -1,20 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
|
-
<dl-switch
|
|
4
|
-
|
|
5
|
-
|
|
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">
|