comand-component-library 3.3.75 → 3.3.76
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/dist/comand-component-library.js +4234 -3816
- package/dist/comand-component-library.umd.cjs +4 -4
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/App.vue +269 -211
- package/src/assets/data/image.json +1 -5
- package/src/assets/styles/global-styles.scss +198 -188
- package/src/components/CmdBackToTopButton.vue +1 -1
- package/src/components/CmdBox.vue +0 -2
- package/src/components/CmdFormElement.vue +3 -4
- package/src/components/CmdHeadline.vue +68 -35
- package/src/components/CmdImage.vue +355 -21
- package/src/components/CmdImageGallery.vue +132 -32
- package/src/components/CmdMainNavigation.vue +1 -2
- package/src/components/CmdPager.vue +8 -1
- package/src/components/CmdSlideButton.vue +1 -7
- package/src/components/CmdSocialNetworks.vue +1 -0
- package/src/components/CmdSystemMessage.vue +1 -10
- package/src/components/CmdTable.vue +3 -3
- package/src/components/CmdTextBlock.vue +36 -24
- package/src/editmode/editModeContext.js +50 -0
- package/src/main.js +8 -19
@@ -14,11 +14,7 @@
|
|
14
14
|
},
|
15
15
|
{
|
16
16
|
"image": {
|
17
|
-
"src":
|
18
|
-
"small": "media/images/demo-images/small/landscape-01.jpg",
|
19
|
-
"medium": "media/images/demo-images/medium/landscape-01.jpg",
|
20
|
-
"large": "media/images/demo-images/large/landscape-01.jpg"
|
21
|
-
},
|
17
|
+
"src": "media/images/demo-images/large/landscape-02.jpg",
|
22
18
|
"alt": "Alternative text",
|
23
19
|
"tooltip": "Tooltip"
|
24
20
|
},
|
@@ -41,283 +41,293 @@
|
|
41
41
|
|
42
42
|
// assign scss-variables for breakpoints (from variables.scss) to css-variables, to get access to their value in JavaScript by getComputedStyle(document.documentElement).getPropertyValue
|
43
43
|
html {
|
44
|
-
|
45
|
-
|
44
|
+
--medium-max-width: #{$medium-max-width};
|
45
|
+
--small-max-width: #{$small-max-width};
|
46
46
|
}
|
47
|
+
|
47
48
|
/* ---------------------------------------------- BEGIN COMPONENTS AND GLOBAL STYLES -------------------------------------------------- */
|
48
49
|
/* begin styles for main structure --------------------------------------------------------------------------------------------------------------------------------------------------- */
|
49
50
|
body {
|
50
|
-
|
51
|
+
overflow: hidden;
|
51
52
|
}
|
52
53
|
|
53
54
|
#page-wrapper {
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
55
|
+
scroll-padding-top: 10.5rem;
|
56
|
+
display: flex;
|
57
|
+
flex-direction: column;
|
58
|
+
scroll-snap-type: y mandatory;
|
59
|
+
overflow-y: scroll;
|
60
|
+
width: 100vw;
|
61
|
+
height: 100vh;
|
62
|
+
scroll-behavior: smooth;
|
63
|
+
|
64
|
+
.cmd-site-footer {
|
65
|
+
margin-top: auto;
|
66
|
+
}
|
66
67
|
}
|
67
68
|
|
68
69
|
#component-library {
|
69
|
-
|
70
|
-
|
70
|
+
/*scroll-padding-top: unset !important;*/
|
71
|
+
scroll-snap-type: unset !important;
|
71
72
|
}
|
72
73
|
|
73
74
|
body, .cmd-site-header, .cmd-site-footer, .cmd-copyright-information {
|
74
|
-
|
75
|
+
transition: background linear .5s;
|
75
76
|
}
|
77
|
+
|
76
78
|
/* end styles for main structure --------------------------------------------------------------------------------------------------------------------------------------------------- */
|
77
79
|
|
78
80
|
/* begin .avoid-scrolling --------------------------------------------------------------------------------------------------------------------------------------------------- */
|
79
81
|
body.avoid-scrolling {
|
80
|
-
|
81
|
-
|
82
|
+
overflow: hidden;
|
83
|
+
height: 100%;
|
82
84
|
}
|
85
|
+
|
83
86
|
/* end .avoid-scrolling --------------------------------------------------------------------------------------------------------------------------------------------------- */
|
84
87
|
|
85
88
|
/* begin flags --------------------------------------------------------------------------------------------------------------------------------------------------- */
|
86
89
|
.flag {
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
+
width: 3rem;
|
91
|
+
background-size: 100% 100%;
|
92
|
+
display: block;
|
90
93
|
}
|
94
|
+
|
91
95
|
/* end flags --------------------------------------------------------------------------------------------------------------------------------------------------- */
|
92
96
|
|
93
97
|
/* begin input-wrapper for .select --------------------------------------------------------------------------------------------------------------------------------------------------- */
|
94
98
|
.select {
|
95
|
-
|
99
|
+
height: var(--input-height); /* forces different browsers to render same height */
|
96
100
|
}
|
97
101
|
|
98
102
|
.input-wrapper {
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
103
|
+
.select {
|
104
|
+
&:first-of-type {
|
105
|
+
> ul {
|
106
|
+
> li {
|
107
|
+
&:first-child {
|
108
|
+
border-top-right-radius: 0;
|
109
|
+
border-bottom-right-radius: 0;
|
110
|
+
}
|
111
|
+
}
|
112
|
+
}
|
107
113
|
}
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
114
|
+
|
115
|
+
&:last-of-type {
|
116
|
+
> ul {
|
117
|
+
> li {
|
118
|
+
&:first-child {
|
119
|
+
border-top-left-radius: 0;
|
120
|
+
border-bottom-left-radius: 0;
|
121
|
+
}
|
122
|
+
}
|
123
|
+
}
|
118
124
|
}
|
119
|
-
}
|
120
125
|
}
|
121
|
-
}
|
122
126
|
}
|
127
|
+
|
123
128
|
/* end input-wrapper for .select --------------------------------------------------------------------------------------------------------------------------------------------------- */
|
124
129
|
|
125
130
|
/* begin product-listing --------------------------------------------------------------------------------------------------------------------------------------------------- */
|
126
131
|
#product-listing-wrapper {
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
132
|
+
> a {
|
133
|
+
border: var(--default-border);
|
134
|
+
text-decoration: none;
|
135
|
+
display: flex;
|
136
|
+
flex-direction: column;
|
137
|
+
grid-column: span var(--grid-small-span);
|
138
|
+
order: 1;
|
139
|
+
|
140
|
+
&:hover, &:active, &:focus {
|
141
|
+
border-color: var(--primary-color);
|
142
|
+
background: var(--default-background-color);
|
143
|
+
}
|
138
144
|
}
|
139
|
-
}
|
140
145
|
|
141
|
-
|
142
|
-
|
143
|
-
|
146
|
+
img {
|
147
|
+
order: 1;
|
148
|
+
}
|
144
149
|
|
145
|
-
|
146
|
-
|
147
|
-
|
150
|
+
&.products-squares {
|
151
|
+
> a {
|
152
|
+
grid-column: span calc(var(--grid-columns) / 2);
|
153
|
+
}
|
148
154
|
}
|
149
|
-
}
|
150
155
|
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
156
|
+
&.products-lines {
|
157
|
+
> a {
|
158
|
+
grid-column: span var(--grid-columns);
|
159
|
+
flex-direction: unset;
|
160
|
+
|
161
|
+
img {
|
162
|
+
margin-left: 0;
|
163
|
+
}
|
164
|
+
}
|
165
|
+
|
166
|
+
& .product-information {
|
167
|
+
display: flex;
|
168
|
+
flex-direction: column;
|
169
|
+
padding: calc(var(--default-padding) * 2);
|
170
|
+
margin-right: auto;
|
171
|
+
}
|
155
172
|
|
156
|
-
|
157
|
-
|
158
|
-
|
173
|
+
.description {
|
174
|
+
display: block;
|
175
|
+
}
|
159
176
|
}
|
160
177
|
|
161
|
-
|
162
|
-
|
163
|
-
flex-direction: column;
|
164
|
-
padding: calc(var(--default-padding) * 2);
|
165
|
-
margin-right: auto;
|
178
|
+
&.product-information {
|
179
|
+
order: 2;
|
166
180
|
}
|
167
181
|
|
168
182
|
.description {
|
169
|
-
|
183
|
+
display: none;
|
184
|
+
}
|
185
|
+
|
186
|
+
h3, div {
|
187
|
+
padding: var(--default-padding);
|
188
|
+
margin: 0;
|
170
189
|
}
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
order: 2;
|
175
|
-
}
|
176
|
-
|
177
|
-
.description {
|
178
|
-
display: none;
|
179
|
-
}
|
180
|
-
|
181
|
-
h3, div {
|
182
|
-
padding: var(--default-padding);
|
183
|
-
margin: 0;
|
184
|
-
}
|
185
|
-
|
186
|
-
h3, p {
|
187
|
-
text-align: center;
|
188
|
-
}
|
189
|
-
|
190
|
-
.price {
|
191
|
-
order: 3;
|
192
|
-
margin-top: auto;
|
193
|
-
}
|
194
|
-
|
195
|
-
p {
|
196
|
-
&:last-child {
|
197
|
-
&, & > span {
|
198
|
-
margin-bottom: 0;
|
199
|
-
font-size: 2rem;
|
200
|
-
}
|
190
|
+
|
191
|
+
h3, p {
|
192
|
+
text-align: center;
|
201
193
|
}
|
202
194
|
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
195
|
+
.price {
|
196
|
+
order: 3;
|
197
|
+
margin-top: auto;
|
198
|
+
}
|
199
|
+
|
200
|
+
p {
|
201
|
+
&:last-child {
|
202
|
+
&, & > span {
|
203
|
+
margin-bottom: 0;
|
204
|
+
font-size: 2rem;
|
205
|
+
}
|
206
|
+
}
|
207
|
+
|
208
|
+
> span {
|
209
|
+
&:first-child {
|
210
|
+
text-decoration: line-through;
|
211
|
+
font-style: italic;
|
212
|
+
margin-right: var(--default-margin);
|
213
|
+
opacity: var(--reduced-opacity);
|
214
|
+
font-size: 1.5rem;
|
215
|
+
}
|
216
|
+
}
|
211
217
|
}
|
212
|
-
}
|
213
218
|
}
|
219
|
+
|
214
220
|
/* end product-listing --------------------------------------------------------------------------------------------------------------------------------------------------- */
|
215
221
|
|
216
222
|
/* begin tooltip for cmd-form-element and cmd-fake-select ---------------------------------------------------------------------------------------------------------------- */
|
217
223
|
.cmd-form-element, .cmd-fake-select, .cmd-input-group {
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
}
|
225
|
-
|
226
|
-
&.has-state, & + .cmd-tooltip {
|
227
|
-
.label-text {
|
228
|
-
> span, > a, sup {
|
229
|
-
color: var(--status-color);
|
230
|
-
}
|
224
|
+
.cmd-tooltip {
|
225
|
+
position: absolute;
|
226
|
+
right: 0;
|
227
|
+
transform: translateY(calc(-100% - calc(var(--default-margin) / 2)));
|
228
|
+
left: auto !important; /* overwrite calculated inline-styles from javascript for cmd-tooltip-component */
|
229
|
+
top: 0 !important; /* overwrite calculated inline-styles from javascript for cmd-tooltip-component */
|
231
230
|
}
|
232
231
|
|
233
|
-
&.
|
234
|
-
|
235
|
-
|
232
|
+
&.has-state, & + .cmd-tooltip {
|
233
|
+
.label-text {
|
234
|
+
> span, > a, sup {
|
235
|
+
color: var(--status-color);
|
236
|
+
}
|
237
|
+
}
|
236
238
|
|
237
|
-
|
238
|
-
|
239
|
-
|
239
|
+
&.error {
|
240
|
+
--status-color: var(--error-color);
|
241
|
+
}
|
240
242
|
|
241
|
-
|
242
|
-
|
243
|
-
|
243
|
+
&.warning {
|
244
|
+
--status-color: var(--warning-color);
|
245
|
+
}
|
246
|
+
|
247
|
+
&.success {
|
248
|
+
--status-color: var(--success-color);
|
249
|
+
}
|
244
250
|
|
245
|
-
|
246
|
-
|
251
|
+
&.info {
|
252
|
+
--status-color: var(--info-color);
|
253
|
+
}
|
247
254
|
}
|
248
|
-
}
|
249
255
|
|
250
|
-
|
251
|
-
|
252
|
-
|
256
|
+
& + .cmd-tooltip {
|
257
|
+
border-color: var(--status-color);
|
258
|
+
}
|
253
259
|
}
|
260
|
+
|
254
261
|
/* end tooltip for cmd-form-element and cmd-fake-select ------------------------------------------------------------------------------------------------------------------ */
|
255
262
|
/* ---------------------------------------------- END COMPONENTS AND GLOBAL STYLES -------------------------------------------------- */
|
256
263
|
|
257
264
|
/* ---------------------------------------------- BEGIN MEDIA QUERIES AND BROWSER SPECIFIC STYLES -------------------------------------------------- */
|
258
265
|
/* begin styles for medium screens --------------------------------------------------------------------------------------------------------------------------------------------------- */
|
259
266
|
@media only screen and (max-width: $medium-max-width) {
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
267
|
+
html {
|
268
|
+
--grid-small-span: 3; /* default column span smaller part */
|
269
|
+
--grid-large-span: 3; /* default column span larger part */
|
270
|
+
}
|
264
271
|
}
|
272
|
+
|
265
273
|
/* end styles for medium screens --------------------------------------------------------------------------------------------------------------------------------------------------- */
|
266
274
|
|
267
275
|
/* begin styles for small screens --------------------------------------------------------------------------------------------------------------------------------------------------- */
|
268
276
|
@media only screen and (max-width: $small-max-width) {
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
|
277
|
+
body, html {
|
278
|
+
height: auto;
|
279
|
+
}
|
280
|
+
|
281
|
+
html {
|
282
|
+
--grid-small-span: 4; /* default column span smaller part */
|
283
|
+
--grid-large-span: 4; /* default column span larger part */
|
284
|
+
}
|
285
|
+
|
286
|
+
.section-wrapper {
|
287
|
+
padding: calc(var(--default-padding) * 2) 0;
|
288
|
+
}
|
289
|
+
|
290
|
+
a[href^="tel"] {
|
291
|
+
text-decoration: underline;
|
292
|
+
}
|
285
293
|
}
|
294
|
+
|
286
295
|
/* end styles for small screens --------------------------------------------------------------------------------------------------------------------------------------------------- */
|
287
296
|
/* ---------------------------------------------- END MEDIA QUERIES AND BROWSER SPECIFIC STYLES -------------------------------------------------- */
|
288
297
|
|
289
298
|
/* ---------------------------------------------- BEGIN COLORS-SCHEMES (LIGHT-/DARK-MODE) -------------------------------------------------- */
|
290
299
|
html {
|
291
|
-
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
--color-scheme-text-color-buttons: var(--dark-mode-text-color-buttons);
|
302
|
-
--color-scheme-text-color-inverted: var(--light-mode-text-color);
|
303
|
-
--color-scheme-background: var(--dark-mode-background-color);
|
304
|
-
--color-scheme-background-inverted: var(--light-mode-background-color);
|
305
|
-
--default-background-color-lightness: 20%;
|
306
|
-
|
307
|
-
&.dark-mode {
|
308
|
-
/* assign default colors for custom dark-mode set by class */
|
309
|
-
--color-scheme-text-color: var(--dark-mode-text-color);
|
300
|
+
&.light-mode {
|
301
|
+
/* assign default colors for custom light-mode set by class */
|
302
|
+
--color-scheme-text-color: var(--light-mode-text-color);
|
303
|
+
--color-scheme-text-color-buttons: var(--light-mode-text-color-buttons);
|
304
|
+
--color-scheme-background-color: var(--light-mode-background-color);
|
305
|
+
--color-scheme-text-color-inverted: var(--dark-mode-text-color);
|
306
|
+
--color-scheme-background-inverted: var(--dark-mode-background-color);
|
307
|
+
--default-background-color-lightness: 97%;
|
308
|
+
}
|
309
|
+
|
310
310
|
--color-scheme-text-color-buttons: var(--dark-mode-text-color-buttons);
|
311
|
-
--color-scheme-background-color: var(--dark-mode-background-color);
|
312
311
|
--color-scheme-text-color-inverted: var(--light-mode-text-color);
|
312
|
+
--color-scheme-background: var(--dark-mode-background-color);
|
313
313
|
--color-scheme-background-inverted: var(--light-mode-background-color);
|
314
314
|
--default-background-color-lightness: 20%;
|
315
|
-
--hyperlink-color-lightness: 40%; /* hyperlink-color-lightness */
|
316
|
-
--hyperlink-color-highlighted-lightness: 50%; /* hyperlink-color-highlighted-lightness (used for highlighted hyperlinks) */
|
317
315
|
|
318
|
-
|
319
|
-
|
316
|
+
&.dark-mode {
|
317
|
+
/* assign default colors for custom dark-mode set by class */
|
318
|
+
--color-scheme-text-color: var(--dark-mode-text-color);
|
319
|
+
--color-scheme-text-color-buttons: var(--dark-mode-text-color-buttons);
|
320
|
+
--color-scheme-background-color: var(--dark-mode-background-color);
|
321
|
+
--color-scheme-text-color-inverted: var(--light-mode-text-color);
|
322
|
+
--color-scheme-background-inverted: var(--light-mode-background-color);
|
323
|
+
--default-background-color-lightness: 20%;
|
324
|
+
--hyperlink-color-lightness: 40%; /* hyperlink-color-lightness */
|
325
|
+
--hyperlink-color-highlighted-lightness: 50%; /* hyperlink-color-highlighted-lightness (used for highlighted hyperlinks) */
|
326
|
+
|
327
|
+
:where(label, .label) .label-text > [class*="icon-"] {
|
328
|
+
background: var(--dark-gray);
|
329
|
+
}
|
320
330
|
}
|
321
|
-
}
|
322
331
|
}
|
332
|
+
|
323
333
|
/* ---------------------------------------------- END COLORS-SCHEMES (LIGHT-/DARK-MODE) -------------------------------------------------- */
|
@@ -1,7 +1,7 @@
|
|
1
1
|
<template>
|
2
2
|
<!-- begin cmd-back-to-top-button -->
|
3
3
|
<transition name="fade">
|
4
|
-
<a v-if="show" class="cmd-back-to-top-button button" id="back-to-top-button" href="#" :title="iconBackToTop.tooltip" @click.prevent="onBackToTop">
|
4
|
+
<a v-if="show" class="cmd-back-to-top-button button" id="back-to-top-button" href="#" role="button" :title="iconBackToTop.tooltip" @click.prevent="onBackToTop">
|
5
5
|
<!-- begin CmdIcon -->
|
6
6
|
<CmdIcon :iconClass="iconBackToTop.iconClass" :type="iconBackToTop.iconType" />
|
7
7
|
<!-- end CmdIcon -->
|
@@ -544,7 +544,6 @@ export default {
|
|
544
544
|
.navigation {
|
545
545
|
margin: 0;
|
546
546
|
height: 100%;
|
547
|
-
background: var(--pure-white);
|
548
547
|
|
549
548
|
li {
|
550
549
|
list-style-type: none;
|
@@ -554,7 +553,6 @@ export default {
|
|
554
553
|
display: block;
|
555
554
|
padding: var(--default-padding);
|
556
555
|
text-decoration: none;
|
557
|
-
background: var(--pure-white);
|
558
556
|
border-bottom: var(--default-border);
|
559
557
|
|
560
558
|
&:hover, &:active, &:focus {
|
@@ -22,14 +22,13 @@
|
|
22
22
|
|
23
23
|
<!-- begin label-text (+ required asterisk) -->
|
24
24
|
<span v-if="(labelText || $slots.labeltext) && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
|
25
|
-
|
26
|
-
class="label-text">
|
25
|
+
:class="['label-text', { hidden: !showLabel }]">
|
27
26
|
<span>
|
28
27
|
<template v-if="labelText">{{ labelText }}</template>
|
29
28
|
<!-- begin slot 'labeltext' -->
|
30
29
|
<slot v-else name="labeltext" />
|
31
30
|
<!-- end slot 'labeltext' -->
|
32
|
-
<sup v-if="$attrs.required">*</sup>
|
31
|
+
<sup v-if="$attrs.required" aria-hidden="true">*</sup>
|
33
32
|
</span>
|
34
33
|
|
35
34
|
<!-- begin CmdTooltipForInputElements -->
|
@@ -154,7 +153,7 @@
|
|
154
153
|
<span class="label-text">{{ onLabel }}</span>
|
155
154
|
<span class="label-text">{{ offLabel }}</span>
|
156
155
|
</span>
|
157
|
-
<span v-if="labelText" class="label-text">
|
156
|
+
<span v-if="labelText" :class="['label-text', {hidden: !showLabel}]">
|
158
157
|
<span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
|
159
158
|
</span>
|
160
159
|
</template>
|