comand-component-library 3.1.65 → 3.1.66

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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "comand-component-library",
3
- "version": "3.1.65",
3
+ "version": "3.1.66",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
package/src/App.vue CHANGED
@@ -723,12 +723,12 @@
723
723
  <a id="section-custom-headline"></a>
724
724
  <CmdWidthLimitationWrapper>
725
725
  <h2 class="headline-demopage">Custom Headline</h2>
726
- <CmdCustomHeadline icon-class="icon-home" pre-headline-text="Pre-headline" :headline="{ headlineText: 'Headline level 1', headlineLevel: '1'}"/>
727
- <CmdCustomHeadline :headline="{ headlineText: 'Headline level 2', headlineLevel: '2'}"/>
728
- <CmdCustomHeadline :headline="{ headlineText: 'Headline level 3', headlineLevel: '3'}"/>
729
- <CmdCustomHeadline :headline="{ headlineText: 'Headline level 4', headlineLevel: '4'}"/>
730
- <CmdCustomHeadline :headline="{ headlineText: 'Headline level 5', headlineLevel: '5'}"/>
731
- <CmdCustomHeadline :headline="{ headlineText: 'Headline level 6', headlineLevel: '6'}"/>
726
+ <CmdCustomHeadline icon-class="icon-home" pre-headline-text="Pre-headline" headlineText="Headline level 1" :headlineLevel="1"/>
727
+ <CmdCustomHeadline headlineText="Headline level 2" :headlineLevel="2"/>
728
+ <CmdCustomHeadline headlineText="Headline level 3" :headlineLevel="3"/>
729
+ <CmdCustomHeadline headlineText="Headline level 4" :headlineLevel="4"/>
730
+ <CmdCustomHeadline headlineText="Headline level 5" :headlineLevel="5"/>
731
+ <CmdCustomHeadline headlineText="Headline level 6" :headlineLevel="6"/>
732
732
  </CmdWidthLimitationWrapper>
733
733
  <!-- end custom-headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
734
734
 
@@ -913,14 +913,16 @@
913
913
  :allowedFileExtensions="['jpg', 'png']"
914
914
  :allowMultipleFileUploads="true"
915
915
  :advancedMode="false"
916
+ textLegend="Simple upload form"
916
917
  @error="showError"
917
918
  :uploadOptions="{url: 'http://localhost:8888'}"
918
919
  />
919
920
  <h3>Advanced mode</h3>
920
921
  <CmdUploadForm headline="Select files to upload"
921
922
  :enableDragAndDrop="true"
922
- :allowedFileExtensions="['jpg']"
923
+ :allowedFileExtensions="['jpg', 'png']"
923
924
  :allowMultipleFileUploads="true"
925
+ textLegend="Advanced upload form"
924
926
  :uploadOptions="{url: 'http://localhost:8888'}"
925
927
  />
926
928
  </CmdWidthLimitationWrapper>
@@ -947,8 +949,7 @@
947
949
  <CmdCopyrightInformation/>
948
950
 
949
951
  <CmdFancyBox :show="fancyBoxCookieDisclaimer" :fancyboxOptions="{}" :allowEscapeKey="false">
950
- <CmdCookieDisclaimer headline="Usage of cookies on this web site"
951
- :cookieOptions="cookieDisclaimerData"
952
+ <CmdCookieDisclaimer :cookieOptions="cookieDisclaimerData"
952
953
  buttonLabelAcceptAllCookies="Accept all cookies"
953
954
  buttonLabelAcceptCurrentSettings="Accept current settings"
954
955
  @closeCookieDisclaimer="fancyBoxCookieDisclaimer = false"
@@ -4,7 +4,7 @@
4
4
  "cookies": [
5
5
  {
6
6
  "id": "cookie-sessionid",
7
- "description": "These cookies are required for functionality",
7
+ "description": "This cookie is required for functionality",
8
8
  "labelText": "SessionID",
9
9
  "checked": true,
10
10
  "status": "disabled",
@@ -16,7 +16,7 @@
16
16
  },
17
17
  {
18
18
  "id": "cookie-google-recaptcha",
19
- "description": "This cookies prevents bots from sending forms",
19
+ "description": "This cookie prevents bots from sending forms",
20
20
  "labelText": "Google reCaptcha™",
21
21
  "checked": true,
22
22
  "status": "disabled",
@@ -34,7 +34,7 @@
34
34
  "cookies": [
35
35
  {
36
36
  "id": "cookie-google-maps",
37
- "description": "These cookies enables the Google Map",
37
+ "description": "This cookie enables the Google Map",
38
38
  "labelText": "Google Maps™",
39
39
  "checked": false,
40
40
  "linkDataPrivacy": {
@@ -1,11 +1,24 @@
1
1
  <template>
2
2
  <!-- begin boxType 'content' -->
3
3
  <div v-if="boxType === 'content'" :class="['cmd-box box content', {open : open, collapsible: collapsible}]">
4
- <header v-if="useSlots?.includes('header')">
5
- <!-- begin slot 'header' -->
6
- <slot name="header"></slot>
7
- <!-- end slot 'header' -->
8
- </header>
4
+ <template v-if="useSlots?.includes('header')">
5
+ <!-- begin collapsible header with slot -->
6
+ <a v-if="collapsible" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
7
+ <!-- begin slot 'header' -->
8
+ <slot name="header"></slot>
9
+ <!-- end slot 'header' -->
10
+ <span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
11
+ </a>
12
+ <!-- end collapsible header with slot -->
13
+
14
+ <!-- begin default header with slot -->
15
+ <header v-else>
16
+ <!-- begin slot 'header' -->
17
+ <slot name="header"></slot>
18
+ <!-- end slot 'header' -->
19
+ </header>
20
+ <!-- end default header with slot -->
21
+ </template>
9
22
  <template v-else>
10
23
  <!-- begin header for collapsible -->
11
24
  <a v-if="collapsible" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
@@ -12,82 +12,75 @@
12
12
 
13
13
  <!-- begin slot for cookie-options -->
14
14
  <slot name="cookie-options">
15
- <div v-if="cookieOptions.required">
16
- <CmdCustomHeadline
17
- v-if="cmdCustomHeadlineRequiredCookies?.show && cmdCustomHeadlineRequiredCookies?.headlineText && cmdCustomHeadlineRequiredCookies?.headlineLevel"
18
- v-bind="cmdCustomHeadlineRequiredCookies"
19
- :headlineText="cmdCustomHeadlineRequiredCookies.headlineText"
20
- :headlineLevel="cmdCustomHeadlineRequiredCookies.headlineLevel"
21
- />
22
- <!-- &lt;!&ndash; begin CmdAccordion &ndash;&gt;-->
23
- <!-- <CmdAccordion :accordion-data="cookieOptions.required.cookies.length" :accordionData="2">-->
24
- <!-- <template v-for="(cookie, index) in cookieOptions.required.cookies"-->
25
- <!-- v-slot:[`accordionHeadline${index}`]-->
26
- <!-- :key="index">-->
27
- <!-- &lt;!&ndash; begin CmdSwitchButton &ndash;&gt;-->
28
- <!-- <CmdSwitchButton-->
29
- <!-- type="checkbox"-->
30
- <!-- :id="cookie.id"-->
31
- <!-- :labelText="cookie.labelText"-->
32
- <!-- v-model="cookie.checked"-->
33
- <!-- :status="cookie.status"-->
34
- <!-- disabled="disabled"-->
35
- <!-- />-->
36
- <!-- &lt;!&ndash; end CmdSwitchButton &ndash;&gt;-->
37
- <!-- </template>-->
38
- <!-- <template v-for="(cookie, index) in cookieOptions.required.cookies"-->
39
- <!-- v-slot:[`accordionContent${index}`]-->
40
- <!-- :key="index">-->
41
- <!-- <p v-if="cookie.description">{{ cookie.description }}</p>-->
42
- <!-- <p v-if="cookie.linkDataPrivacy">-->
43
- <!-- {{ cookie.linkDataPrivacy.label }}-->
44
- <!-- <a @click="openDataPrivacy"-->
45
- <!-- :href="cookie.linkDataPrivacy.link"-->
46
- <!-- :target="cookie.linkDataPrivacy.target">-->
47
- <!-- {{ cookie.linkDataPrivacy.linkText }}-->
48
- <!-- </a>-->
49
- <!-- </p>-->
50
- <!-- <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>-->
51
- <!-- </template>-->
52
- <!-- </CmdAccordion>-->
53
- <!-- &lt;!&ndash; end CmdAccordion &ndash;&gt;-->
15
+ <div v-if="cookieOptions.required" class="flex-container vertical">
16
+ <CmdCustomHeadline v-if="cmdBoxRequiredCookies?.showHeadline" :headline-text="cmdBoxRequiredCookies?.headlineText" :headline-level="cmdBoxRequiredCookies?.headlineLevel "/>
17
+ <!-- begin CmdBox -->
18
+ <CmdBox v-for="(cookie, index) in cookieOptions.required.cookies"
19
+ :useSlots="['header', 'body']"
20
+ v-bind="cmdBoxRequiredCookies"
21
+ :key="index"
22
+ >
23
+ <template v-slot:header>
24
+ <!-- begin CmdSwitchButton -->
25
+ <CmdSwitchButton
26
+ type="checkbox"
27
+ :id="cookie.id"
28
+ :labelText="cookie.labelText"
29
+ v-model="cookie.checked"
30
+ :status="cookie.status"
31
+ disabled="disabled"
32
+ />
33
+ <!-- end CmdSwitchButton -->
34
+ </template>
35
+ <template v-slot:body>
36
+ <p v-if="cookie.description">{{ cookie.description }}</p>
37
+ <p v-if="cookie.linkDataPrivacy">
38
+ {{ cookie.linkDataPrivacy.label }}
39
+ <a @click="openDataPrivacy"
40
+ :href="cookie.linkDataPrivacy.link"
41
+ :target="cookie.linkDataPrivacy.target">
42
+ {{ cookie.linkDataPrivacy.linkText }}
43
+ </a>
44
+ </p>
45
+ <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>
46
+ </template>
47
+ </CmdBox>
48
+ <!-- end CmdBox -->
54
49
  </div>
55
- <hr />
56
- <div v-if="cookieOptions.optional">
57
- <CmdCustomHeadline
58
- v-if="cmdCustomHeadlineOptionalCookies?.show && cmdCustomHeadlineOptionalCookies?.headlineText && cmdCustomHeadlineOptionalCookies?.headlineLevel"
59
- v-bind="cmdCustomHeadlineOptionalCookies"
60
- :headlineText="cmdCustomHeadlineOptionalCookies.headlineText"
61
- :headlineLevel="cmdCustomHeadlineOptionalCookies.headlineLevel"
62
- />
63
- <!-- &lt;!&ndash; begin CmdAccordion &ndash;&gt;-->
64
- <!-- <CmdAccordion :accordion-data="cookieOptions.optional.cookies.length" :accordionData="2">-->
65
- <!-- <template v-for="(cookie, index) in cookieOptions.optional.cookies"-->
66
- <!-- v-slot:[`accordionHeadline${index}`]-->
67
- <!-- :key="index">-->
68
- <!-- &lt;!&ndash; begin CmdSwitchButton &ndash;&gt;-->
69
- <!-- <CmdSwitchButton-->
70
- <!-- type="checkbox"-->
71
- <!-- :id="cookie.id"-->
72
- <!-- :labelText="cookie.labelText"-->
73
- <!-- v-model="cookie.checked"-->
74
- <!-- :status="cookie.status"-->
75
- <!-- />-->
76
- <!-- &lt;!&ndash; end CmdSwitchButton &ndash;&gt;-->
77
- <!-- </template>-->
78
- <!-- <template v-for="(cookie, index) in cookieOptions.optional.cookies"-->
79
- <!-- v-slot:[`accordionContent${index}`]-->
80
- <!-- :key="index">-->
81
- <!-- <p>{{ cookie.description }}</p>-->
82
- <!-- <p v-if="cookie.linkDataPrivacy">-->
83
- <!-- {{ cookie.linkDataPrivacy.label }}-->
84
- <!-- <a @click="openDataPrivacy" :href="cookie.linkDataPrivacy.link"-->
85
- <!-- :target="cookie.linkDataPrivacy.target">{{ cookie.linkDataPrivacy.linkText }}</a>-->
86
- <!-- </p>-->
87
- <!-- <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>-->
88
- <!-- </template>-->
89
- <!-- </CmdAccordion>-->
90
- <!-- &lt;!&ndash; end CmdAccordion &ndash;&gt;-->
50
+ <hr/>
51
+ <div v-if="cookieOptions.optional" class="flex-container vertical">
52
+ <CmdCustomHeadline v-if="cmdBoxOptionalCookies?.showHeadline" :headline-text="cmdBoxOptionalCookies?.headlineText" :headline-level="cmdBoxOptionalCookies?.headlineLevel "/>
53
+ <!-- begin CmdBox -->
54
+ <CmdBox v-for="(cookie, index) in cookieOptions.optional.cookies"
55
+ :useSlots="['header', 'body']"
56
+ v-bind="cmdBoxOptionalCookies"
57
+ :key="index"
58
+ >
59
+ <template v-slot:header>
60
+ <!-- begin CmdSwitchButton -->
61
+ <CmdSwitchButton
62
+ type="checkbox"
63
+ :id="cookie.id"
64
+ :labelText="cookie.labelText"
65
+ v-model="cookie.checked"
66
+ :status="cookie.status"
67
+ />
68
+ <!-- end CmdSwitchButton -->
69
+ </template>
70
+ <template v-slot:body>
71
+ <p v-if="cookie.description">{{ cookie.description }}</p>
72
+ <p v-if="cookie.linkDataPrivacy">
73
+ {{ cookie.linkDataPrivacy.label }}
74
+ <a @click="openDataPrivacy"
75
+ :href="cookie.linkDataPrivacy.link"
76
+ :target="cookie.linkDataPrivacy.target">
77
+ {{ cookie.linkDataPrivacy.linkText }}
78
+ </a>
79
+ </p>
80
+ <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>
81
+ </template>
82
+ </CmdBox>
83
+ <!-- end CmdBox -->
91
84
  </div>
92
85
  </slot>
93
86
  <!-- end slot for cookie-options -->
@@ -98,7 +91,7 @@
98
91
 
99
92
  <!-- begin button-wrapper for 'accept'-buttons -->
100
93
  <div class="button-wrapper align-center">
101
- <button v-if="buttonLabelAcceptCurrentSettings" type="button" @click="acceptCookies('currentSettings')">
94
+ <button v-if="buttonLabelAcceptCurrentSettings" type="button" @click="acceptCookies('currentSettings')">
102
95
  <span>{{ buttonLabelAcceptCurrentSettings }}</span>
103
96
  </button>
104
97
  <button v-if="buttonLabelAcceptAllCookies" type="button" class="primary" @click="acceptCookies('allCookies')">
@@ -112,14 +105,16 @@
112
105
 
113
106
  <script>
114
107
  // import components
108
+ import CmdBox from "./CmdBox"
115
109
  import CmdCustomHeadline from "./CmdCustomHeadline"
116
- // import CmdSwitchButton from "./CmdSwitchButton"
110
+ import CmdSwitchButton from "./CmdSwitchButton"
117
111
 
118
112
  export default {
119
113
  name: "CmdCookieDisclaimer",
120
114
  components: {
121
- CmdCustomHeadline
122
- // CmdSwitchButton
115
+ CmdBox,
116
+ CmdCustomHeadline,
117
+ CmdSwitchButton
123
118
  },
124
119
  data() {
125
120
  return {
@@ -142,26 +137,28 @@ export default {
142
137
  }
143
138
  },
144
139
  /**
145
- * properties for CmdCustomHeadline-component above required cookies
140
+ * property for CmdBox-component surrounding the required cookies
146
141
  */
147
- cmdCustomHeadlineRequiredCookies: {
142
+ cmdBoxRequiredCookies: {
148
143
  type: Object,
149
144
  default() {
150
145
  return {
151
- show: true,
146
+ collapsible: true,
147
+ showHeadline: true,
152
148
  headlineText: "Required cookies",
153
149
  headlineLevel: 3
154
150
  }
155
151
  }
156
152
  },
157
153
  /**
158
- * properties for CmdCustomHeadline-component above optional cookies
154
+ * property for CmdBox-component surrounding the optional cookies
159
155
  */
160
- cmdCustomHeadlineOptionalCookies: {
156
+ cmdBoxOptionalCookies: {
161
157
  type: Object,
162
158
  default() {
163
159
  return {
164
- show: true,
160
+ collapsible: true,
161
+ showHeadline: true,
165
162
  headlineText: "Optional cookies",
166
163
  headlineLevel: 3
167
164
  }
@@ -218,6 +215,12 @@ export default {
218
215
  bottom: 0;
219
216
  top: auto;
220
217
 
218
+ .cmd-box {
219
+ .box-body {
220
+ padding: var(--default-padding);
221
+ }
222
+ }
223
+
221
224
  h1 {
222
225
  text-align: center;
223
226
  }
@@ -234,22 +237,6 @@ export default {
234
237
  margin-bottom: var(--default-margin);
235
238
  }
236
239
 
237
- .cmd-accordion {
238
- .accordion-headline {
239
- &:hover, &:active, &:focus {
240
- label, .label {
241
- span {
242
- color: var(--pure-white) !important;
243
- }
244
- }
245
- }
246
- }
247
-
248
- .toggle-switch {
249
- display: flex;
250
- }
251
- }
252
-
253
240
  p {
254
241
  a {
255
242
  text-decoration: underline;