comand-component-library 3.1.70 → 3.1.71
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.css +1 -1
- package/dist/comand-component-library.umd.min.js +1 -1
- package/package.json +2 -2
- package/src/App.vue +102 -57
- package/src/assets/data/list-of-links.json +0 -1
- package/src/assets/styles/global-styles.scss +26 -0
- package/src/components/CmdBox.vue +8 -4
- package/src/components/CmdCompanyLogo.vue +3 -3
- package/src/components/CmdCookieDisclaimer.vue +20 -4
- package/src/components/CmdFakeSelect.vue +5 -9
- package/src/components/CmdFormElement.vue +34 -41
- package/src/components/CmdInputGroup.vue +14 -2
- package/src/components/CmdProgressBar.vue +2 -2
- package/src/components/CmdTable.vue +1 -1
- package/src/index.js +1 -1
- package/src/mixins/CmdFormElement/DefaultMessageProperties.js +1 -1
- package/src/mixins/FieldValidation.js +1 -1
- package/src/mixins/GlobalDefaultMessageProperties.js +1 -2
- package/src/mixins/I18n.js +12 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "comand-component-library",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.71",
|
|
4
4
|
"private": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"serve": "vue-cli-service serve",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
],
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"clickout-event": "^1.1.2",
|
|
21
|
-
"comand-frontend-framework": "^3.2.
|
|
21
|
+
"comand-frontend-framework": "^3.2.60",
|
|
22
22
|
"core-js": "^3.20.1",
|
|
23
23
|
"prismjs": "^1.27.0",
|
|
24
24
|
"vue": "^3.2.31",
|
package/src/App.vue
CHANGED
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
<li><a href="#" @click.prevent="formElementStatus = ''" :class="{'active' : formElementStatus === ''}"
|
|
66
66
|
id="status-default">Default</a></li>
|
|
67
67
|
<li class="error"><a href="#" @click.prevent="formElementStatus = 'error'"
|
|
68
|
-
|
|
68
|
+
:class="{'active' : formElementStatus === 'error'}" id="status-error">Error</a></li>
|
|
69
69
|
<li><a href="#" @click.prevent="formElementStatus = 'warning'"
|
|
70
70
|
:class="{'active' : formElementStatus === 'warning'}" id="status-warning">Warning</a></li>
|
|
71
71
|
<li><a href="#" @click.prevent="formElementStatus = 'success'"
|
|
@@ -78,14 +78,14 @@
|
|
|
78
78
|
</div>
|
|
79
79
|
|
|
80
80
|
<!-- begin cmd-form-filters -->
|
|
81
|
-
<CmdFormFilters v-model="fakeSelectFilters" :selectedOptionsName="getOptionName"
|
|
81
|
+
<CmdFormFilters v-model="fakeSelectFilters" :selectedOptionsName="getOptionName"/>
|
|
82
82
|
<!-- end cmd-form-filters -->
|
|
83
83
|
|
|
84
84
|
<CmdForm :use-fieldset="false" id="advanced-form-elements" novalidate="novalidate">
|
|
85
85
|
<fieldset class="grid-container-create-columns">
|
|
86
86
|
<legend>Legend</legend>
|
|
87
87
|
<h2>Form Element-Component</h2>
|
|
88
|
-
<CmdToggleDarkMode :showLabel="true"
|
|
88
|
+
<CmdToggleDarkMode :showLabel="true"/>
|
|
89
89
|
<div class="flex-container">
|
|
90
90
|
<CmdFormElement labelText="Input (type text):"
|
|
91
91
|
element="input"
|
|
@@ -132,11 +132,11 @@
|
|
|
132
132
|
<div class="flex-container">
|
|
133
133
|
<!-- type === default: normal selectbox (with optional icons) -->
|
|
134
134
|
<CmdFakeSelect labelText="Default selectbox:"
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
135
|
+
:status="formElementStatus"
|
|
136
|
+
:selectData="fakeSelectOptionsData"
|
|
137
|
+
v-model="fakeSelectDefault"
|
|
138
|
+
required
|
|
139
|
+
defaultOptionName="Select an option:"
|
|
140
140
|
/>
|
|
141
141
|
<CmdFakeSelect labelText="Default selectbox with icons:"
|
|
142
142
|
:status="formElementStatus"
|
|
@@ -201,29 +201,40 @@
|
|
|
201
201
|
|
|
202
202
|
<!-- begin slider -->
|
|
203
203
|
<h2>Slider [native]</h2>
|
|
204
|
-
<
|
|
205
|
-
<span>Single-Slider (with in- and output):</span>
|
|
204
|
+
<div class="label" :class="formElementStatus">
|
|
205
|
+
<span class="label-text">Single-Slider (with in- and output):</span>
|
|
206
206
|
<span class="flex-container no-flex">
|
|
207
|
-
<
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
207
|
+
<label for="range-value">
|
|
208
|
+
<span class="label-text">
|
|
209
|
+
<span>Range Value</span>
|
|
210
|
+
</span>
|
|
211
|
+
<input
|
|
212
|
+
type="number"
|
|
213
|
+
:class="formElementStatus"
|
|
214
|
+
v-model="rangeValue"
|
|
215
|
+
:disabled="formElementStatus === 'disabled'"
|
|
216
|
+
min="0"
|
|
217
|
+
max="100"
|
|
218
|
+
id="range-value"
|
|
219
|
+
/>
|
|
220
|
+
</label>
|
|
221
|
+
<label for="range-slider" class="hidden">
|
|
222
|
+
<span class="label-text">
|
|
223
|
+
<span>Range Value</span>
|
|
224
|
+
</span>
|
|
225
|
+
<input
|
|
226
|
+
type="range"
|
|
227
|
+
class="range-slider"
|
|
228
|
+
:class="{'disabled': formElementStatus === 'disabled'}"
|
|
229
|
+
id="range-slider"
|
|
230
|
+
v-model="rangeValue"
|
|
231
|
+
:disabled="formElementStatus === 'disabled'"
|
|
232
|
+
min="0"
|
|
233
|
+
max="100"
|
|
234
|
+
/>
|
|
235
|
+
</label>
|
|
225
236
|
</span>
|
|
226
|
-
</
|
|
237
|
+
</div>
|
|
227
238
|
<!-- end slider -->
|
|
228
239
|
|
|
229
240
|
<hr/>
|
|
@@ -335,7 +346,7 @@
|
|
|
335
346
|
maxlength="100"
|
|
336
347
|
v-model="inputUsername"
|
|
337
348
|
:status="formElementStatus"
|
|
338
|
-
|
|
349
|
+
/>
|
|
339
350
|
<CmdFormElement element="input"
|
|
340
351
|
labelText="Label for passwordfield:"
|
|
341
352
|
type="password"
|
|
@@ -427,9 +438,9 @@
|
|
|
427
438
|
v-model="checkboxRequiredValue"
|
|
428
439
|
:status="formElementStatus"/>
|
|
429
440
|
<p>
|
|
430
|
-
checkbox (required) with boolean: {{checkboxRequiredValue}}<br
|
|
431
|
-
checkbox with boolean: {{checkboxValue}}<br
|
|
432
|
-
checkboxes with values: {{checkboxValues}}
|
|
441
|
+
checkbox (required) with boolean: {{ checkboxRequiredValue }}<br/>
|
|
442
|
+
checkbox with boolean: {{ checkboxValue }}<br/>
|
|
443
|
+
checkboxes with values: {{ checkboxValues }}
|
|
433
444
|
</p>
|
|
434
445
|
<div class="label inline">
|
|
435
446
|
<span class="label-text">Label for Replaced Input-Type-Checkbox:</span>
|
|
@@ -474,7 +485,7 @@
|
|
|
474
485
|
</div>
|
|
475
486
|
</div>
|
|
476
487
|
<p>
|
|
477
|
-
Radiobuttons with values: {{radiobuttonValue}}
|
|
488
|
+
Radiobuttons with values: {{ radiobuttonValue }}
|
|
478
489
|
</p>
|
|
479
490
|
<div class="label inline">
|
|
480
491
|
<span class="label-text">Label for Replaced Input-Type-Radio:</span>
|
|
@@ -499,6 +510,7 @@
|
|
|
499
510
|
:status="formElementStatus"/>
|
|
500
511
|
</div>
|
|
501
512
|
</div>
|
|
513
|
+
<h2>Input-Groups</h2>
|
|
502
514
|
<CmdInputGroup
|
|
503
515
|
labelText="Group label for radio-group given by slot"
|
|
504
516
|
:useSlot="true"
|
|
@@ -539,8 +551,35 @@
|
|
|
539
551
|
</dd>
|
|
540
552
|
</dl>
|
|
541
553
|
<CmdInputGroup
|
|
542
|
-
labelText="Grouplabel for radio-group
|
|
543
|
-
|
|
554
|
+
labelText="Grouplabel for radio-group styled as replaced-input-type"
|
|
555
|
+
:inputElements="inputGroupRadiobuttons"
|
|
556
|
+
inputTypes="radio"
|
|
557
|
+
v-model="inputGroupValueReplaceInputTypeRadio"
|
|
558
|
+
:replaceInputType="true"
|
|
559
|
+
/>
|
|
560
|
+
<dl>
|
|
561
|
+
<dt>Selected value(s):</dt>
|
|
562
|
+
<dd>
|
|
563
|
+
<output>{{ inputGroupValueReplaceInputTypeRadio }}</output>
|
|
564
|
+
</dd>
|
|
565
|
+
</dl>
|
|
566
|
+
<CmdInputGroup
|
|
567
|
+
labelText="Grouplabel for checkbox-group styled as replaced-input-type"
|
|
568
|
+
:inputElements="inputGroupRadiobuttons"
|
|
569
|
+
inputTypes="checkbox"
|
|
570
|
+
v-model="inputGroupValueReplaceInputTypeCheckbox"
|
|
571
|
+
:replaceInputType="true"
|
|
572
|
+
required="required"
|
|
573
|
+
/>
|
|
574
|
+
<dl>
|
|
575
|
+
<dt>Selected value(s):</dt>
|
|
576
|
+
<dd>
|
|
577
|
+
<output>{{ inputGroupValueReplaceInputTypeCheckbox }}</output>
|
|
578
|
+
</dd>
|
|
579
|
+
</dl>
|
|
580
|
+
<CmdInputGroup
|
|
581
|
+
labelText="Grouplabel for radio-group given by property styled as multiple-switch"
|
|
582
|
+
:inputElements="inputGroupRadiobuttons.map(item => ({...item, id: item.id + '-multi', name: item.name + '-multi'}))"
|
|
544
583
|
inputTypes="radio"
|
|
545
584
|
:multipleSwitch="true"
|
|
546
585
|
v-model="inputGroupValue3"
|
|
@@ -579,7 +618,7 @@
|
|
|
579
618
|
<span>Native submit-button</span>
|
|
580
619
|
</button>
|
|
581
620
|
</div>
|
|
582
|
-
|
|
621
|
+
</CmdForm>
|
|
583
622
|
</CmdWidthLimitationWrapper>
|
|
584
623
|
<!-- end advanced form elements ----------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
585
624
|
|
|
@@ -591,7 +630,7 @@
|
|
|
591
630
|
<a id="section-bank-account-data"></a>
|
|
592
631
|
<CmdWidthLimitationWrapper>
|
|
593
632
|
<h2 class="headline-demopage">Bank Account Data</h2>
|
|
594
|
-
<CmdBankAccountData :account-data="bankAccountData" :cmd-custom-headline="{ headlineText: 'Bank Account', headlineLevel: 3}" :allow-copy-by-click="true"
|
|
633
|
+
<CmdBankAccountData :account-data="bankAccountData" :cmd-custom-headline="{ headlineText: 'Bank Account', headlineLevel: 3}" :allow-copy-by-click="true"/>
|
|
595
634
|
</CmdWidthLimitationWrapper>
|
|
596
635
|
<!-- end bank account data ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
597
636
|
|
|
@@ -684,13 +723,13 @@
|
|
|
684
723
|
<h3>Product boxes</h3>
|
|
685
724
|
<div class="grid-container-create-columns">
|
|
686
725
|
<div class="grid-small-item" v-for="(product, index) in boxProductData" :key="index">
|
|
687
|
-
<CmdBox boxType="product" :product="product" :cmdCustomHeadline="{headlineLevel: 4}"
|
|
726
|
+
<CmdBox boxType="product" :product="product" :cmdCustomHeadline="{headlineLevel: 4}"/>
|
|
688
727
|
</div>
|
|
689
728
|
</div>
|
|
690
729
|
<h3>User boxes</h3>
|
|
691
730
|
<div class="grid-container-create-columns">
|
|
692
731
|
<div class="grid-small-item" v-for="(user, index) in boxUserData" :key="index">
|
|
693
|
-
<CmdBox boxType="user" :user="user" :cmdCustomHeadline="{headlineLevel: 4}"
|
|
732
|
+
<CmdBox boxType="user" :user="user" :cmdCustomHeadline="{headlineLevel: 4}"/>
|
|
694
733
|
</div>
|
|
695
734
|
</div>
|
|
696
735
|
<h3>Box Site Search</h3>
|
|
@@ -701,12 +740,16 @@
|
|
|
701
740
|
v-model:modelValueSearchFilters="filters"
|
|
702
741
|
@search="siteSearchOutput"
|
|
703
742
|
textLegend="Search"
|
|
704
|
-
:cmdFakeSelect="siteSearchFilters"
|
|
743
|
+
:cmdFakeSelect="siteSearchFilters"/>
|
|
705
744
|
<dl>
|
|
706
|
-
<dt>siteSearchInput1:</dt
|
|
707
|
-
<
|
|
708
|
-
<dt>
|
|
709
|
-
<
|
|
745
|
+
<dt>siteSearchInput1:</dt>
|
|
746
|
+
<dd>{{ siteSearchInput1 }}</dd>
|
|
747
|
+
<dt>siteSearchInput2:</dt>
|
|
748
|
+
<dd>{{ siteSearchInput2 }}</dd>
|
|
749
|
+
<dt>Radius:</dt>
|
|
750
|
+
<dd>{{ radius }}</dd>
|
|
751
|
+
<dt>Filters:</dt>
|
|
752
|
+
<dd>{{ filters }}</dd>
|
|
710
753
|
</dl>
|
|
711
754
|
</CmdWidthLimitationWrapper>
|
|
712
755
|
<!-- end boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
@@ -777,8 +820,8 @@
|
|
|
777
820
|
<a id="section-login-form"></a>
|
|
778
821
|
<CmdWidthLimitationWrapper>
|
|
779
822
|
<h2 class="headline-demopage">Login Form</h2>
|
|
780
|
-
<CmdLoginForm v-model="loginData" v-focus
|
|
781
|
-
<p>LoginData: {{loginData}}</p>
|
|
823
|
+
<CmdLoginForm v-model="loginData" v-focus/>
|
|
824
|
+
<p>LoginData: {{ loginData }}</p>
|
|
782
825
|
</CmdWidthLimitationWrapper>
|
|
783
826
|
|
|
784
827
|
<!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
@@ -786,13 +829,13 @@
|
|
|
786
829
|
<CmdWidthLimitationWrapper>
|
|
787
830
|
<h2 class="headline-demopage">List Of Links</h2>
|
|
788
831
|
<h3>Vertical</h3>
|
|
789
|
-
<CmdListOfLinks :links="listOfLinksData"
|
|
832
|
+
<CmdListOfLinks :links="listOfLinksData"/>
|
|
790
833
|
<h3>Horizontal (aligned left)</h3>
|
|
791
|
-
<CmdListOfLinks orientation="horizontal" align="left" :links="listOfLinksData"
|
|
834
|
+
<CmdListOfLinks orientation="horizontal" align="left" :links="listOfLinksData"/>
|
|
792
835
|
<h3>Horizontal (aligned center)</h3>
|
|
793
|
-
<CmdListOfLinks orientation="horizontal" align="center" :links="listOfLinksData"
|
|
836
|
+
<CmdListOfLinks orientation="horizontal" align="center" :links="listOfLinksData"/>
|
|
794
837
|
<h3>Horizontal (aligned right)</h3>
|
|
795
|
-
<CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData"
|
|
838
|
+
<CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData"/>
|
|
796
839
|
</CmdWidthLimitationWrapper>
|
|
797
840
|
<!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
798
841
|
|
|
@@ -876,9 +919,9 @@
|
|
|
876
919
|
<CmdWidthLimitationWrapper>
|
|
877
920
|
<h2 class="headline-demopage">Tables</h2>
|
|
878
921
|
<h3>Table as wide as its content (with caption)</h3>
|
|
879
|
-
<CmdTable :collapsible="true" :fullWidthOnDefault="false"
|
|
922
|
+
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataSmall"/>
|
|
880
923
|
<h3>Table as wide as its content (without caption)</h3>
|
|
881
|
-
<CmdTable :collapsible="true" :fullWidthOnDefault="false"
|
|
924
|
+
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :caption="{ text: 'Hidden caption', show: false}" :table-data="tableDataSmall"/>
|
|
882
925
|
<h3>Table as wide as possible</h3>
|
|
883
926
|
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataLarge"/>
|
|
884
927
|
</CmdWidthLimitationWrapper>
|
|
@@ -911,14 +954,14 @@
|
|
|
911
954
|
<a id="section-thumbnail-scroller"></a>
|
|
912
955
|
<CmdWidthLimitationWrapper>
|
|
913
956
|
<h2 class="headline-demopage">Thumbnail-Scroller</h2>
|
|
914
|
-
<CmdThumbnailScroller :thumbnail-scroller-items="thumbnailScrollerData"
|
|
957
|
+
<CmdThumbnailScroller :thumbnail-scroller-items="thumbnailScrollerData"/>
|
|
915
958
|
</CmdWidthLimitationWrapper>
|
|
916
959
|
|
|
917
960
|
<a id="section-tooltip"></a>
|
|
918
961
|
<CmdWidthLimitationWrapper>
|
|
919
962
|
<h2 class="headline-demopage">Tooltip</h2>
|
|
920
963
|
<p>
|
|
921
|
-
<a href="#" @click.prevent id="hoverme">Hover me!</a><br
|
|
964
|
+
<a href="#" @click.prevent id="hoverme">Hover me!</a><br/>
|
|
922
965
|
<a href="#" @click.prevent id="clickme" title="Native tooltip">Click me!</a>
|
|
923
966
|
</p>
|
|
924
967
|
<CmdTooltip related-id="hoverme">
|
|
@@ -981,7 +1024,7 @@
|
|
|
981
1024
|
<template #privacy-text>
|
|
982
1025
|
<p>
|
|
983
1026
|
<strong>
|
|
984
|
-
By browsing
|
|
1027
|
+
By browsing this web site to accept the usage and saving of anonymous data!
|
|
985
1028
|
</strong>
|
|
986
1029
|
</p>
|
|
987
1030
|
</template>
|
|
@@ -1113,6 +1156,8 @@ export default {
|
|
|
1113
1156
|
textarea: "",
|
|
1114
1157
|
inputGroupValue1: "radiobuttonValue1",
|
|
1115
1158
|
inputGroupValue2: "website",
|
|
1159
|
+
inputGroupValueReplaceInputTypeRadio: "phone",
|
|
1160
|
+
inputGroupValueReplaceInputTypeCheckbox: ["phone"],
|
|
1116
1161
|
inputGroupValue3: "email",
|
|
1117
1162
|
inputGroupValue4: [],
|
|
1118
1163
|
inputGroupRadiobuttons: [
|
|
@@ -1249,7 +1294,7 @@ export default {
|
|
|
1249
1294
|
}
|
|
1250
1295
|
},
|
|
1251
1296
|
mounted() {
|
|
1252
|
-
|
|
1297
|
+
document.querySelector('html').addEventListener('toggle-color-scheme', (event) => console.log('colorScheme:', event.detail))
|
|
1253
1298
|
},
|
|
1254
1299
|
methods: {
|
|
1255
1300
|
siteSearchOutput(event) {
|
|
@@ -174,6 +174,32 @@ body.avoid-scrolling {
|
|
|
174
174
|
|
|
175
175
|
/* begin tooltip for cmd-form-element and cmd-fake-select ---------------------------------------------------------------------------------------------------------------- */
|
|
176
176
|
.cmd-form-element, .cmd-fake-select {
|
|
177
|
+
|
|
178
|
+
&.has-state, & + .cmd-tooltip {
|
|
179
|
+
.label-text {
|
|
180
|
+
span, sup {
|
|
181
|
+
color: var(--status-color);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
&.error {
|
|
186
|
+
--status-color: var(--error-color);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
&.warning {
|
|
190
|
+
--status-color: var(--warning-color);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
&.success {
|
|
195
|
+
--status-color: var(--success-color);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
&.info {
|
|
199
|
+
--status-color: var(--info-color);
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
|
|
177
203
|
& + .cmd-tooltip {
|
|
178
204
|
border-color: var(--status-color);
|
|
179
205
|
|
|
@@ -3,12 +3,16 @@
|
|
|
3
3
|
<div v-if="boxType === 'content'" :class="['cmd-box box content', {open : open, collapsible: collapsible, 'stretch-vertically': stretchVertically}]">
|
|
4
4
|
<template v-if="useSlots?.includes('header')">
|
|
5
5
|
<!-- begin collapsible header with slot -->
|
|
6
|
-
<
|
|
6
|
+
<div v-if="collapsible" class="box-header">
|
|
7
7
|
<!-- begin slot 'header' -->
|
|
8
8
|
<slot name="header"></slot>
|
|
9
9
|
<!-- end slot 'header' -->
|
|
10
|
-
<
|
|
11
|
-
|
|
10
|
+
<a href="#"
|
|
11
|
+
:title="open ? iconOpen.tooltip : iconClosed.tooltip"
|
|
12
|
+
@click.prevent="toggleContentVisibility">
|
|
13
|
+
<span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
|
|
14
|
+
</a>
|
|
15
|
+
</div>
|
|
12
16
|
<!-- end collapsible header with slot -->
|
|
13
17
|
|
|
14
18
|
<!-- begin default header with slot -->
|
|
@@ -309,7 +313,7 @@ export default {
|
|
|
309
313
|
margin-bottom: 0;
|
|
310
314
|
}
|
|
311
315
|
|
|
312
|
-
&:last-child {
|
|
316
|
+
&:not(.open):last-child {
|
|
313
317
|
margin-top: auto;
|
|
314
318
|
}
|
|
315
319
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="cmd-company-logo">
|
|
3
|
-
<router-link v-if="link.type === 'router'" :
|
|
3
|
+
<router-link v-if="link.type === 'router'" :to="link.path" :title="link.tooltip">
|
|
4
4
|
<img :src="pathCurrentLogo" :alt="altText"/>
|
|
5
5
|
</router-link>
|
|
6
|
-
<a v-else :
|
|
7
|
-
<img :src="pathCurrentLogo" :alt="altText"/>
|
|
6
|
+
<a v-else :href="link.path" :title="link.tooltip">
|
|
7
|
+
<img :src="pathCurrentLogo" :alt="altText" />
|
|
8
8
|
</a>
|
|
9
9
|
</div>
|
|
10
10
|
</template>
|
|
@@ -21,8 +21,15 @@
|
|
|
21
21
|
:key="index"
|
|
22
22
|
>
|
|
23
23
|
<template v-slot:header>
|
|
24
|
-
<!-- begin
|
|
25
|
-
|
|
24
|
+
<!-- begin CmdFormElement -->
|
|
25
|
+
<CmdFormElement
|
|
26
|
+
element="input"
|
|
27
|
+
type="checkbox"
|
|
28
|
+
labelText="Google Analytics"
|
|
29
|
+
id="google-analytics"
|
|
30
|
+
:toggleSwitch="true"
|
|
31
|
+
/>
|
|
32
|
+
<!-- end CmdFormElement -->
|
|
26
33
|
</template>
|
|
27
34
|
<template v-slot:body>
|
|
28
35
|
<p v-if="cookie.description">{{ cookie.description }}</p>
|
|
@@ -49,8 +56,15 @@
|
|
|
49
56
|
:key="index"
|
|
50
57
|
>
|
|
51
58
|
<template v-slot:header>
|
|
52
|
-
<!-- begin
|
|
53
|
-
|
|
59
|
+
<!-- begin CmdFormElement -->
|
|
60
|
+
<CmdFormElement
|
|
61
|
+
element="input"
|
|
62
|
+
type="checkbox"
|
|
63
|
+
labelText="Google Analytics"
|
|
64
|
+
id="google-analytics"
|
|
65
|
+
:toggleSwitch="true"
|
|
66
|
+
/>
|
|
67
|
+
<!-- end CmdFormElement -->
|
|
54
68
|
</template>
|
|
55
69
|
<template v-slot:body>
|
|
56
70
|
<p v-if="cookie.description">{{ cookie.description }}</p>
|
|
@@ -92,12 +106,14 @@
|
|
|
92
106
|
// import components
|
|
93
107
|
import CmdBox from "./CmdBox"
|
|
94
108
|
import CmdCustomHeadline from "./CmdCustomHeadline"
|
|
109
|
+
import CmdFormElement from "./CmdFormElement"
|
|
95
110
|
|
|
96
111
|
export default {
|
|
97
112
|
name: "CmdCookieDisclaimer",
|
|
98
113
|
components: {
|
|
99
114
|
CmdBox,
|
|
100
115
|
CmdCustomHeadline,
|
|
116
|
+
CmdFormElement
|
|
101
117
|
},
|
|
102
118
|
data() {
|
|
103
119
|
return {
|
|
@@ -460,10 +460,6 @@ export default {
|
|
|
460
460
|
.cmd-fake-select {
|
|
461
461
|
align-self: flex-end;
|
|
462
462
|
|
|
463
|
-
& + .cmd-tooltip {
|
|
464
|
-
border-color: var(--status-color);
|
|
465
|
-
}
|
|
466
|
-
|
|
467
463
|
> span:first-child {
|
|
468
464
|
a {
|
|
469
465
|
align-self: flex-end;
|
|
@@ -604,21 +600,21 @@ export default {
|
|
|
604
600
|
}
|
|
605
601
|
}
|
|
606
602
|
|
|
607
|
-
&.
|
|
603
|
+
&.has-state {
|
|
608
604
|
> ul {
|
|
609
605
|
> li {
|
|
610
606
|
> a {
|
|
611
|
-
border-color: var(--
|
|
607
|
+
border-color: var(--status-color);
|
|
612
608
|
|
|
613
609
|
> span, span[class*="icon-"] {
|
|
614
|
-
color: var(--
|
|
610
|
+
color: var(--status-color);
|
|
615
611
|
}
|
|
616
612
|
|
|
617
613
|
&:hover, &:active, &:focus {
|
|
618
614
|
background: var(--pure-white);
|
|
619
615
|
|
|
620
616
|
span {
|
|
621
|
-
color: var(--
|
|
617
|
+
color: var(--status-color);
|
|
622
618
|
}
|
|
623
619
|
}
|
|
624
620
|
}
|
|
@@ -668,7 +664,7 @@ export default {
|
|
|
668
664
|
|
|
669
665
|
> span:first-child {
|
|
670
666
|
width: 1.5rem;
|
|
671
|
-
aspect-ratio: 1;
|
|
667
|
+
aspect-ratio: 1/1;
|
|
672
668
|
border: var(--default-border);
|
|
673
669
|
|
|
674
670
|
&[style=""] {
|