comand-component-library 3.1.79 → 3.1.80

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.79",
3
+ "version": "3.1.80",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
package/src/App.vue CHANGED
@@ -49,6 +49,7 @@
49
49
  <li><a href="#section-tables">Tables</a></li>
50
50
  <li><a href="#section-tabs">Tabs</a></li>
51
51
  <li><a href="#section-thumbnail-scroller">Thumbnail-Scroller</a></li>
52
+ <li><a href="#section-toggle-darkmode">ToggleDarkMode</a></li>
52
53
  <li><a href="#section-upload-form">Upload-Form</a></li>
53
54
  </ul>
54
55
  </div>
@@ -86,7 +87,6 @@
86
87
  <fieldset class="grid-container-create-columns">
87
88
  <legend>Legend</legend>
88
89
  <h2>Form Element-Component</h2>
89
- <CmdToggleDarkMode :showLabel="true"/>
90
90
  <div class="flex-container">
91
91
  <CmdFormElement labelText="Input (type text):"
92
92
  element="input"
@@ -457,6 +457,10 @@
457
457
  checkbox with boolean: {{ checkboxValue }}<br/>
458
458
  checkboxes with values: {{ checkboxValues }}
459
459
  </p>
460
+ <h3>Toggle Dark-Mode</h3>
461
+ <a id="section-toggle-darkmode"></a>
462
+ <CmdToggleDarkMode :showLabel="true"/>
463
+ <CmdToggleDarkMode :showLabel="false" :use-styled-layout="true" />
460
464
  <h2>Checkboxes and Radiobuttons</h2>
461
465
  <h3>Checkboxes [native]</h3>
462
466
  <div class="label inline">
@@ -87,7 +87,7 @@
87
87
 
88
88
  <!-- begin boxType 'user' -->
89
89
  <div v-else-if="boxType === 'user' && user" :class="['cmd-box box user', {'stretch-vertically': stretchVertically}]">
90
- <div class="box-header">
90
+ <div class="box-header flex-container vertical">
91
91
  <img v-if="user.image" :src="user.image.src" :alt="user.image.alt"/>
92
92
  <div v-else :class="defaultProfileIconClass" :title="user.name"></div>
93
93
  <!-- begin CmdHeadline -->
@@ -340,6 +340,14 @@ export default {
340
340
  font-size: 1rem;
341
341
  margin-left: auto;
342
342
  }
343
+
344
+ &:hover, &:active, &:focus {
345
+ background: var(--pure-white);
346
+
347
+ > * {
348
+ color: var(--primary-color);
349
+ }
350
+ }
343
351
  }
344
352
 
345
353
  .box-body {
@@ -428,7 +436,6 @@ export default {
428
436
  color: var(--pure-white);
429
437
  text-transform: uppercase;
430
438
  text-align: center;
431
- box-shadow: var(--box-shadow);
432
439
  }
433
440
  }
434
441
 
@@ -449,6 +456,10 @@ export default {
449
456
  display: table;
450
457
  margin: 0 auto;
451
458
  }
459
+
460
+ > img {
461
+ border: 0;
462
+ }
452
463
  }
453
464
 
454
465
  .box-body {
@@ -477,6 +488,13 @@ export default {
477
488
  > .box-header {
478
489
  padding: var(--default-padding);
479
490
 
491
+ .cmd-headline {
492
+ > * {
493
+ display: block;
494
+ text-align: center;
495
+ }
496
+ }
497
+
480
498
  > img, > div:first-child {
481
499
  display: table;
482
500
  margin: 0 auto;
@@ -237,14 +237,20 @@ export default {
237
237
 
238
238
  // push all required cookies to array
239
239
  const requiredCookies = this.cookieOptions?.required?.cookies
240
- for(let i = 0; i < requiredCookies.length ; i++) {
241
- allCookies.push(requiredCookies[i].value)
240
+
241
+ if (requiredCookies) {
242
+ for (let i = 0; i < requiredCookies.length; i++) {
243
+ allCookies.push(requiredCookies[i].value)
244
+ }
242
245
  }
243
246
 
244
247
  // push all optional cookies to array
245
248
  const optionalCookies = this.cookieOptions?.optional?.cookies
246
- for(let i = 0; i < optionalCookies.length ; i++) {
247
- allCookies.push(optionalCookies[i].value)
249
+
250
+ if (optionalCookies) {
251
+ for (let i = 0; i < optionalCookies.length; i++) {
252
+ allCookies.push(optionalCookies[i].value)
253
+ }
248
254
  }
249
255
 
250
256
  this.$emit("close-cookie-disclaimer", allCookies)
@@ -444,6 +444,7 @@ export default {
444
444
 
445
445
  .cmd-fake-select {
446
446
  align-self: flex-end;
447
+ border-radius: var(--border-radius);
447
448
 
448
449
  > span:first-child {
449
450
  a {
@@ -456,7 +457,6 @@ export default {
456
457
  margin: 0;
457
458
  display: block;
458
459
  min-width: 0;
459
- background: var(--color-scheme-background-color);
460
460
  box-shadow: none;
461
461
  border-radius: var(--border-radius);
462
462
 
@@ -467,6 +467,7 @@ export default {
467
467
  > a {
468
468
  height: inherit;
469
469
  border: var(--default-border);
470
+ background: var(--color-scheme-background-color);
470
471
 
471
472
  .option-name {
472
473
  text-overflow: ellipsis;
@@ -1,7 +1,7 @@
1
1
  <template>
2
- <form class="cmd-form" :data-use-validation="useValidation" @submit="onSubmit" :class="{error: errorOccurred}">
2
+ <form class="cmd-form" :data-use-validation="useValidation" @submit="onSubmit" :class="{error: errorOccurred}" :novalidate="novalidate">
3
3
  <template v-if="useFieldset">
4
- <fieldset>
4
+ <fieldset class="flex-container">
5
5
  <legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
6
6
  <!-- begin default-slot-content -->
7
7
  <slot></slot>
@@ -29,6 +29,13 @@ export default {
29
29
  }
30
30
  },
31
31
  props: {
32
+ /**
33
+ * deactivate if browser-validation should be used
34
+ */
35
+ novalidate: {
36
+ type: Boolean,
37
+ default: true
38
+ },
32
39
  /**
33
40
  * if activated the entire form will be validated by pre-coded validation
34
41
  *
@@ -37,6 +37,7 @@
37
37
  :inputModelValue="modelValue"
38
38
  :helplink="helplink"
39
39
  :relatedId="tooltipId"
40
+ :labelText="labelText"
40
41
  />
41
42
  <!-- end CmdTooltipForInputElements -->
42
43
 
@@ -113,6 +114,7 @@
113
114
  />
114
115
  <span v-if="labelText" :class="['label-text', { hidden: !showLabel }]"><span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span></span>
115
116
  </template>
117
+
116
118
  <!-- begin labels for toggle-switch with switch-label -->
117
119
  <template v-else-if="onLabel && offLabel">
118
120
  <span class="switch-label-wrapper">
@@ -830,6 +832,11 @@ export default {
830
832
  z-index: 100;
831
833
  }
832
834
 
835
+ input:not(:only-child) {
836
+ border-top-right-radius: 0;
837
+ border-bottom-right-radius: 0;
838
+ }
839
+
833
840
  a.button {
834
841
  & + a[class*="icon"] {
835
842
  right: 5rem;
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div :class="['cmd-headline', { 'has-pre-headline-text': preHeadlineText}]">
2
+ <div :class="['cmd-headline', { 'has-pre-headline-text': preHeadlineText, 'has-icon': iconClass}]">
3
3
  <span v-if="iconClass" :class="iconClass"></span>
4
4
  <div v-if="preHeadlineText">
5
5
  <span class="pre-headline-text">{{ preHeadlineText }}</span>
@@ -62,11 +62,14 @@ export default {
62
62
  @import '../assets/styles/variables';
63
63
 
64
64
  .cmd-headline {
65
- display: flex;
66
- align-items: center;
67
65
  margin-bottom: var(--default-margin);
68
66
  gap: calc(var(--default-gap) / 2);
69
67
 
68
+ &.has-icon {
69
+ display: flex;
70
+ align-items: center;
71
+ }
72
+
70
73
  &.has-pre-headline-text {
71
74
  [class*="icon"] {
72
75
  font-size: 5rem;
@@ -79,8 +82,11 @@ export default {
79
82
 
80
83
  h1, h2, h3, h4, h5, h6 {
81
84
  margin: 0;
82
- display: flex;
83
- align-items: center;
85
+
86
+ &:only-child {
87
+ flex: none;
88
+ width: 100%;
89
+ }
84
90
  }
85
91
 
86
92
  @media only screen and ($small-max-width) {
@@ -2,7 +2,7 @@
2
2
  <div class="cmd-list-of-requirements">
3
3
  <!-- begin cmd-custom-headline -->
4
4
  <CmdHeadline :headline-level="cmdHeadline.headlineLevel">
5
- <!-- {{ getMessage("cmdfakeselect.headline.requirements_for_input") }}<br/>"{{ labelText }}" -->
5
+ {{ headlineRequirements }}<template v-if="labelText"><br/><em>{{ labelText }}</em></template>
6
6
  </CmdHeadline>
7
7
  <!-- end cmd-custom-headline -->
8
8
 
@@ -13,8 +13,8 @@
13
13
  <dd :class="requirement.valid(inputModelValue, inputAttributes) ? 'success' : 'error'">
14
14
  <span
15
15
  aria-live="assertive"
16
- :class="requirement.valid(inputModelValue, inputAttributes) ? 'icon-check-circle' : 'icon-error-circle'"
17
- :title="requirement.valid(inputModelValue, inputAttributes) ? 'success' : 'error'"
16
+ :class="requirement.valid(inputModelValue, inputAttributes) ? iconSuccess.iconClass : iconError.iconClass"
17
+ :title="requirement.valid(inputModelValue, inputAttributes) ? iconSuccess.tooltip : iconError.tooltip"
18
18
  >
19
19
  </span>
20
20
  </dd>
@@ -48,11 +48,19 @@
48
48
  // import components
49
49
  import CmdHeadline from "./CmdHeadline"
50
50
 
51
+ // import mixins
52
+ import I18n from "../mixins/I18n"
53
+ import DefaultMessageProperties from "../mixins/CmdListOfRequirements/DefaultMessageProperties"
54
+
51
55
  export default {
52
56
  name: "CmdListOfRequirements",
53
57
  components: {
54
58
  CmdHeadline
55
59
  },
60
+ mixins: [
61
+ I18n,
62
+ DefaultMessageProperties
63
+ ],
56
64
  props: {
57
65
  /**
58
66
  * property to check validity of given modelValue
@@ -69,7 +77,7 @@ export default {
69
77
  required: true
70
78
  },
71
79
  /**
72
- * text for label
80
+ * text for label (used in headline)
73
81
  */
74
82
  labelText: {
75
83
  type: String,
@@ -89,6 +97,30 @@ export default {
89
97
  type: String,
90
98
  required: false
91
99
  },
100
+ /**
101
+ * icon to show success-status
102
+ */
103
+ iconSuccess: {
104
+ type: Object,
105
+ default() {
106
+ return {
107
+ iconClass: "icon-check-circle",
108
+ tooltip: "success"
109
+ }
110
+ }
111
+ },
112
+ /**
113
+ * icon to show error-status
114
+ */
115
+ iconError: {
116
+ type: Object,
117
+ default() {
118
+ return {
119
+ iconClass: "icon-error-circle",
120
+ tooltip: "error"
121
+ }
122
+ }
123
+ },
92
124
  /**
93
125
  * properties of CmdHeadline-component
94
126
  */
@@ -100,6 +132,14 @@ export default {
100
132
  }
101
133
  }
102
134
  }
135
+ },
136
+ computed: {
137
+ headlineRequirements() {
138
+ if (this.inputRequirements.length > 1) {
139
+ return this.getMessage("cmdlistofrequirements.headline.requirements_for_input")
140
+ }
141
+ return this.getMessage("cmdlistofrequirements.headline.requirement_for_input")
142
+ }
103
143
  }
104
144
  }
105
145
  </script>
@@ -19,7 +19,7 @@
19
19
  </a>
20
20
  </li>
21
21
  <li v-for="(navigationEntry, index) in navigationEntries" :key="index"
22
- :class="{'open' : navigationEntry.open}">
22
+ :class="{'open' : navigationEntry.open, 'has-subentries': navigationEntry.subentries}">
23
23
  <!-- begin type === href -->
24
24
  <a
25
25
  v-if="navigationEntry.type === 'href'"
@@ -105,6 +105,7 @@ export default {
105
105
  &.up, &.down {
106
106
  width: 100%;
107
107
  height: auto;
108
+ height: auto;
108
109
  left: 0;
109
110
  top: 0;
110
111
  }
@@ -122,6 +122,8 @@ export default {
122
122
  display: block;
123
123
  padding: var(--default-padding);
124
124
  color: var(--color-scheme-text-color);
125
+ border-top-left-radius: var(--border-radius);
126
+ border-top-right-radius: var(--border-radius);
125
127
 
126
128
  &:hover, &:active, &:focus {
127
129
  cursor: pointer;
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div :class="['cmd-toggle-dark-mode', {'dark-mode': darkMode}]">
2
+ <div :class="['cmd-toggle-dark-mode', {'styled-layout': useStyledLayout, 'dark-mode': darkMode}]">
3
3
  <CmdFormElement
4
4
  element="input"
5
5
  type="checkbox"
@@ -7,6 +7,7 @@
7
7
  :showLabel="showLabel"
8
8
  v-model="darkMode"
9
9
  :toggle-switch="true"
10
+ :title="!showLabel ? labelText: ''"
10
11
  />
11
12
  </div>
12
13
  </template>
@@ -22,20 +23,46 @@ export default {
22
23
  data() {
23
24
  return {
24
25
  darkMode: false,
25
- labelText: "Light mode activated"
26
+ labelText: ""
26
27
  }
27
28
  },
28
29
  props: {
30
+ /**
31
+ * toggle visibility of label
32
+ */
29
33
  showLabel: {
30
34
  type: Boolean,
31
35
  default: false
36
+ },
37
+ /**
38
+ * activate if styled layout should be used
39
+ *
40
+ * @affectsStyling: true
41
+ */
42
+ useStyledLayout: {
43
+ type: Boolean,
44
+ default: false
45
+ },
46
+ /**
47
+ * label-text to enable dark-mode
48
+ *
49
+ * @requiredForAccessibility: true
50
+ */
51
+ labelTextDarkMode: {
52
+ type: String,
53
+ default: "Dark-mode enabled"
54
+ },
55
+ /**
56
+ * label-text to enable light-mode
57
+ *
58
+ * @requiredForAccessibility: true
59
+ */
60
+ labelTextLightMode: {
61
+ type: String,
62
+ default: "Light-mode enabled"
32
63
  }
33
64
  },
34
65
  created() {
35
- // get color-scheme (light-/dark-mode) from browser-settings
36
- // this.darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
37
- // document.body.classList.add(this.darkMode ? 'dark-mode' : 'light-mode');
38
-
39
66
  const mql = window.matchMedia('(prefers-color-scheme: dark)')
40
67
  mql.addEventListener("change", this.onColorSchemeChange)
41
68
  this.onColorSchemeChange(mql)
@@ -50,74 +77,80 @@ export default {
50
77
  }
51
78
  },
52
79
  watch: {
53
- darkMode() {
54
- // toggle classes to overwrite media-query styles for color-schemes
55
- const htmlTag = document.querySelector('html')
56
- if(this.darkMode) {
57
- htmlTag.classList.replace("light-mode", "dark-mode");
58
- this.labelText = "Dark-Mode enabled"
59
- } else {
60
- htmlTag.classList.replace("dark-mode", "light-mode");
61
- this.labelText = "Light-Mode enabled"
62
- }
63
- htmlTag.dispatchEvent(new CustomEvent('toggle-color-scheme', { detail: this.darkMode ? 'dark-mode' : 'light-mode' }))
80
+ darkMode: {
81
+ handler() {
82
+ // toggle classes to overwrite media-query styles for color-schemes
83
+ const htmlTag = document.querySelector('html')
84
+ if (this.darkMode) {
85
+ htmlTag.classList.replace("light-mode", "dark-mode");
86
+ this.labelText = this.labelTextDarkMode
87
+ } else {
88
+ htmlTag.classList.replace("dark-mode", "light-mode");
89
+ this.labelText = this.labelTextLightMode
90
+ }
91
+ htmlTag.dispatchEvent(new CustomEvent('toggle-color-scheme', {detail: this.darkMode ? 'dark-mode' : 'light-mode'}))
92
+ },
93
+ immediate: true
64
94
  }
65
95
  }
66
96
  }
67
97
  </script>
68
98
 
69
99
  <style lang="scss">
100
+ /* begin cmd-toggle-dark-mode ---------------------------------------------------------------------------------------- */
70
101
  .cmd-toggle-dark-mode {
71
- .cmd-form-element {
102
+ &.styled-layout {
72
103
  input {
73
104
  --dark-blue: hsl(195, 96%, 45%);
74
105
  --medium-blue: hsl(194, 97%, 39%);
75
106
  --light-blue: hsl(195, 97%, 76%);
76
- background: linear-gradient(to bottom, var(--dark-blue) 0%,var(--light-blue) 67%);
107
+ background: linear-gradient(to bottom, var(--dark-blue) 0%, var(--light-blue) 67%);
77
108
  border-color: var(--medium-blue);
78
109
 
79
- &:after {
110
+ &::after {
80
111
  --yellow-hue: 60;
81
112
  --yellow-saturation: 100%;
82
113
  --yellow-lightness: 76.7%;
83
- background: radial-gradient(ellipse at center, var(--pure-white) 20%, hsl(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness)) 30%, hsla(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness),0) 100%);
114
+ background: radial-gradient(ellipse at center, var(--pure-white) 20%, hsl(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness)) 30%, hsla(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness), 0) 100%);
84
115
  border-color: transparent;
85
116
  box-shadow: 0 0 1rem hsl(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness));
86
117
  }
87
118
  }
88
- }
89
119
 
90
- &.dark-mode {
91
- input {
92
- background: var(--color-scheme-background-color);
93
- border-color: var(--color-scheme-text-color);
94
-
95
- &:before {
96
- --size: 1.2rem;
97
- content: "";
98
- width: var(--size);
99
- aspect-ratio: 1/1;
120
+ &.dark-mode {
121
+ input {
100
122
  background: var(--color-scheme-background-color);
101
- border-radius: var(--full-circle);
102
- position: absolute;
103
- top: 0;
104
- right: calc(var(--size) / 2);
105
- transform: translateY(calc(50% - 35%));
106
- z-index: 100;
107
- }
123
+ border-color: var(--color-scheme-text-color);
108
124
 
109
- &:after {
110
- background: radial-gradient(ellipse at center, var(--pure-white) 50%,var(--medium-gray) 100%);
111
- border-color: transparent;
112
- box-shadow: .2rem .1rem .2rem hsla(var(--pure-white-hue), var(--pure-white-saturation), var(--pure-white-lightness), .3);
125
+ &::before {
126
+ --size: 1.2rem;
127
+ content: "";
128
+ width: var(--size);
129
+ aspect-ratio: 1/1;
130
+ background: var(--color-scheme-background-color);
131
+ border-radius: var(--full-circle);
132
+ position: absolute;
133
+ top: 0;
134
+ right: calc(var(--size) / 2);
135
+ transform: translateY(calc(50% - 35%));
136
+ z-index: 100;
137
+ transition: var(--default-transition);
138
+ }
139
+
140
+ &::after {
141
+ background: radial-gradient(ellipse at center, var(--pure-white) 50%, var(--medium-gray) 100%);
142
+ border-color: transparent;
143
+ box-shadow: .2rem .1rem .2rem hsla(var(--pure-white-hue), var(--pure-white-saturation), var(--pure-white-lightness), .3);
144
+ }
113
145
  }
114
- }
115
146
 
116
- .label-text {
117
- span {
118
- color: var(--color-scheme-text-color);
147
+ .label-text {
148
+ span {
149
+ color: var(--color-scheme-text-color);
150
+ }
119
151
  }
120
152
  }
121
153
  }
122
154
  }
155
+ /* end cmd-toggle-dark-mode ---------------------------------------------------------------------------------------- */
123
156
  </style>
@@ -24,6 +24,7 @@
24
24
  :inputModelValue="inputModelValue"
25
25
  :inputAttributes="inputAttributes"
26
26
  :validationTooltip="validationTooltip"
27
+ :labelText="labelText"
27
28
  />
28
29
  <!-- end CmdListOfRequirements -->
29
30
  </CmdTooltip>
@@ -44,6 +45,13 @@ export default {
44
45
  CmdTooltip
45
46
  },
46
47
  props: {
48
+ /**
49
+ * text for label (used in headline)
50
+ */
51
+ labelText: {
52
+ type: String,
53
+ required: false
54
+ },
47
55
  /**
48
56
  * related-id for CmdTooltip-component
49
57
  */
@@ -1,4 +1,9 @@
1
1
  {
2
+ "novalidate": {
3
+ "comments": [
4
+ "deactivate if browser-validation should be used"
5
+ ]
6
+ },
2
7
  "useValidation": {
3
8
  "comments": [
4
9
  "if activated the entire form will be validated by pre-coded validation"
@@ -11,7 +11,7 @@
11
11
  },
12
12
  "labelText": {
13
13
  "comments": [
14
- "text for label"
14
+ "text for label (used in headline)"
15
15
  ]
16
16
  },
17
17
  "inputRequirements": {
@@ -24,6 +24,16 @@
24
24
  "set a helplink to a different page for further support"
25
25
  ]
26
26
  },
27
+ "iconSuccess": {
28
+ "comments": [
29
+ "icon to show success-status"
30
+ ]
31
+ },
32
+ "iconError": {
33
+ "comments": [
34
+ "icon to show error-status"
35
+ ]
36
+ },
27
37
  "cmdHeadline": {
28
38
  "comments": [
29
39
  "properties of CmdHeadline-component"
@@ -0,0 +1,37 @@
1
+ {
2
+ "showLabel": {
3
+ "comments": [
4
+ "toggle visibility of label"
5
+ ]
6
+ },
7
+ "useStyledLayout": {
8
+ "comments": [
9
+ "activate if styled layout should be used"
10
+ ],
11
+ "annotations": {
12
+ "affectsStyling": [
13
+ "true"
14
+ ]
15
+ }
16
+ },
17
+ "labelTextDarkMode": {
18
+ "comments": [
19
+ "label-text to enable dark-mode"
20
+ ],
21
+ "annotations": {
22
+ "requiredForAccessibility": [
23
+ "true"
24
+ ]
25
+ }
26
+ },
27
+ "labelTextLightMode": {
28
+ "comments": [
29
+ "label-text to enable light-mode"
30
+ ],
31
+ "annotations": {
32
+ "requiredForAccessibility": [
33
+ "true"
34
+ ]
35
+ }
36
+ }
37
+ }
@@ -1,4 +1,9 @@
1
1
  {
2
+ "labelText": {
3
+ "comments": [
4
+ "text for label (used in headline)"
5
+ ]
6
+ },
2
7
  "relatedId": {
3
8
  "comments": [
4
9
  "related-id for CmdTooltip-component"
@@ -2,7 +2,7 @@ export default {
2
2
  data() {
3
3
  return {
4
4
  defaultMessageProperties: {
5
- "cmdfakeselect.headline.requirement_for_input": "Requirement for input",
5
+ "cmdfakeselect.headline.requirements_for_input": "Requirements for input",
6
6
  "cmdfakeselect.linktext.deselect_all_options": "Deselect all options",
7
7
  "cmdfakeselect.linktext.select_all_options": "Select all options",
8
8
  "cmdfakeselect.headline.": "An option is selected",