@dataloop-ai/components 0.20.215 → 0.20.217
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
|
@@ -18,7 +18,8 @@
|
|
|
18
18
|
:opened-icon="openedIcon"
|
|
19
19
|
data-test-id="accordion-header"
|
|
20
20
|
:background-color="backgroundColor"
|
|
21
|
-
|
|
21
|
+
:form-mode="formMode"
|
|
22
|
+
:with-background="withBackground"
|
|
22
23
|
@click="handleClick"
|
|
23
24
|
>
|
|
24
25
|
<template #header>
|
|
@@ -88,7 +89,8 @@ export default defineComponent({
|
|
|
88
89
|
closedIcon: { type: String, default: 'icon-dl-right-chevron' },
|
|
89
90
|
openedIcon: { type: String, default: 'icon-dl-down-chevron' },
|
|
90
91
|
backgroundColor: { type: String, default: 'dell-blue-100' },
|
|
91
|
-
withBackground: { type: Boolean, default: false }
|
|
92
|
+
withBackground: { type: Boolean, default: false },
|
|
93
|
+
formMode: { type: Boolean, default: false }
|
|
92
94
|
},
|
|
93
95
|
emits: ['update:model-value', 'hide', 'show'],
|
|
94
96
|
data() {
|
|
@@ -106,20 +108,31 @@ export default defineComponent({
|
|
|
106
108
|
return this.$slots.header !== undefined
|
|
107
109
|
},
|
|
108
110
|
accordionContentStyles(): Record<string, string> {
|
|
111
|
+
let padding = '0 16px 15px 38px'
|
|
112
|
+
if (this.formMode) {
|
|
113
|
+
padding = '8px 16px 8px 34px'
|
|
114
|
+
} else if (this.withBackground) {
|
|
115
|
+
padding = '16px'
|
|
116
|
+
}
|
|
109
117
|
return {
|
|
110
118
|
'--dl-color-accordion-content-background':
|
|
111
119
|
this.withBackground && this.isOpen
|
|
112
120
|
? getColor(this.backgroundColor)
|
|
113
121
|
: '',
|
|
114
|
-
'--dl-accordion-content-padding':
|
|
115
|
-
? '16px'
|
|
116
|
-
: '0 16px 15px 38px',
|
|
122
|
+
'--dl-accordion-content-padding': padding,
|
|
117
123
|
'--dl-accordion-content-border-radius': this.withBackground
|
|
118
124
|
? '4px'
|
|
119
125
|
: '',
|
|
120
126
|
'--dl-accordion-margin-left': this.withBackground
|
|
121
127
|
? '12px'
|
|
122
|
-
: '0px'
|
|
128
|
+
: '0px',
|
|
129
|
+
'--dl-accordion-border-left':
|
|
130
|
+
this.formMode && this.isOpen
|
|
131
|
+
? '4px solid var(--dell-blue-500)'
|
|
132
|
+
: 'none',
|
|
133
|
+
'--dl-accordion-border-bottom': this.separator
|
|
134
|
+
? '1px solid var(--dell-gray-300)'
|
|
135
|
+
: 'none'
|
|
123
136
|
}
|
|
124
137
|
}
|
|
125
138
|
},
|
|
@@ -139,6 +152,7 @@ export default defineComponent({
|
|
|
139
152
|
.accordion {
|
|
140
153
|
max-width: 100%;
|
|
141
154
|
margin-left: var(--dl-accordion-margin-left);
|
|
155
|
+
border-left: var(--dl-accordion-border-left, none);
|
|
142
156
|
}
|
|
143
157
|
.accordion-content {
|
|
144
158
|
text-align: left;
|
|
@@ -150,7 +164,7 @@ export default defineComponent({
|
|
|
150
164
|
max-height: fit-content;
|
|
151
165
|
overflow: hidden;
|
|
152
166
|
&__border {
|
|
153
|
-
border-bottom:
|
|
167
|
+
border-bottom: var(--dl-accordion-border-bottom, none);
|
|
154
168
|
}
|
|
155
169
|
&.right-side {
|
|
156
170
|
padding: 0 38px 16px 16px;
|
|
@@ -158,6 +172,7 @@ export default defineComponent({
|
|
|
158
172
|
&.closed {
|
|
159
173
|
border-color: transparent;
|
|
160
174
|
padding-bottom: 0;
|
|
175
|
+
padding-top: 0;
|
|
161
176
|
}
|
|
162
177
|
background-color: var(--dl-color-accordion-content-background);
|
|
163
178
|
border-radius: var(--dl-accordion-content-border-radius);
|
|
@@ -61,7 +61,8 @@ export default defineComponent({
|
|
|
61
61
|
closedIcon: { type: String, default: 'icon-dl-right-chevron' },
|
|
62
62
|
openedIcon: { type: String, default: 'icon-dl-down-chevron' },
|
|
63
63
|
backgroundColor: { type: String, default: 'dell-blue-100' },
|
|
64
|
-
|
|
64
|
+
formMode: { type: Boolean, default: false },
|
|
65
|
+
withBackground: { type: Boolean, default: false }
|
|
65
66
|
},
|
|
66
67
|
emits: ['click'],
|
|
67
68
|
setup() {
|
|
@@ -78,7 +79,17 @@ export default defineComponent({
|
|
|
78
79
|
let bgColor = ''
|
|
79
80
|
let hoverBgColor = ''
|
|
80
81
|
let activeBgColor = ''
|
|
81
|
-
|
|
82
|
+
let padding = '12px 16px'
|
|
83
|
+
let marginBottom = '0px'
|
|
84
|
+
let borderRadius = '0px'
|
|
85
|
+
let borderTop = 'none'
|
|
86
|
+
if (this.formMode) {
|
|
87
|
+
padding = this.isOpen
|
|
88
|
+
? '12px 16px 12px 12px'
|
|
89
|
+
: '11px 16px 12px 16px'
|
|
90
|
+
borderTop = !this.isOpen
|
|
91
|
+
? '1px solid var(--dell-gray-300, #C5C5C5)'
|
|
92
|
+
: 'none'
|
|
82
93
|
if (this.isOpen) {
|
|
83
94
|
bgColor = getColor(this.backgroundColor)
|
|
84
95
|
const nextShadeColor = getDellColorNextShade(
|
|
@@ -100,6 +111,13 @@ export default defineComponent({
|
|
|
100
111
|
? getColor(nextShadeColor)
|
|
101
112
|
: hoverBgColor
|
|
102
113
|
}
|
|
114
|
+
} else if (this.withBackground) {
|
|
115
|
+
;(hoverBgColor = !this.isOpen
|
|
116
|
+
? getColor(this.backgroundColor)
|
|
117
|
+
: ''),
|
|
118
|
+
(padding = '4px')
|
|
119
|
+
marginBottom = '2px'
|
|
120
|
+
borderRadius = !this.isOpen ? '4px' : '0px'
|
|
103
121
|
}
|
|
104
122
|
|
|
105
123
|
return {
|
|
@@ -115,9 +133,10 @@ export default defineComponent({
|
|
|
115
133
|
'--dl-accordion-header-background-color': bgColor,
|
|
116
134
|
'--dl-accordion-header-hover-background-color': hoverBgColor,
|
|
117
135
|
'--dl-accordion-header-active-background-color': activeBgColor,
|
|
118
|
-
'--dl-accordion-header-border-radius':
|
|
119
|
-
'--dl-accordion-header-padding':
|
|
120
|
-
'--dl-accordion-header-margin-bottom':
|
|
136
|
+
'--dl-accordion-header-border-radius': borderRadius,
|
|
137
|
+
'--dl-accordion-header-padding': padding,
|
|
138
|
+
'--dl-accordion-header-margin-bottom': marginBottom,
|
|
139
|
+
'--dl-accordion-header-border-top': borderTop
|
|
121
140
|
}
|
|
122
141
|
},
|
|
123
142
|
hasSlot(): boolean {
|
|
@@ -148,6 +167,7 @@ export default defineComponent({
|
|
|
148
167
|
color: var(--dl-title-color);
|
|
149
168
|
margin-bottom: var(--dl-accordion-header-margin-bottom);
|
|
150
169
|
background-color: var(--dl-accordion-header-background-color, transparent);
|
|
170
|
+
border-top: var(--dl-accordion-header-border-top, none);
|
|
151
171
|
}
|
|
152
172
|
|
|
153
173
|
.accordion-header:hover {
|
|
@@ -292,11 +292,11 @@ export default defineComponent({
|
|
|
292
292
|
width: 100%;
|
|
293
293
|
background-color: var(--dl-color-panel-background);
|
|
294
294
|
border: 1px solid var(--dl-color-separator);
|
|
295
|
-
color: var(--
|
|
296
|
-
border-radius: 2px;
|
|
295
|
+
color: var(--dell-gray-200);
|
|
297
296
|
display: flex;
|
|
298
297
|
flex-direction: column;
|
|
299
298
|
z-index: var(--dialog-z-index);
|
|
299
|
+
box-shadow: 0 8px 8px 0 var(--dell-shadow, rgba(0, 0, 0, 0.14));
|
|
300
300
|
|
|
301
301
|
&--fullscreen {
|
|
302
302
|
margin: 0;
|