comand-component-library 3.1.40 → 3.1.44

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.
@@ -1,22 +1,22 @@
1
1
  [
2
2
  {
3
- "hexCode": "#ffffff",
4
- "colorName": "White"
3
+ "value": "#ffffff",
4
+ "text": "White"
5
5
  },
6
6
  {
7
- "hexCode": "#ff0000",
8
- "colorName": "Red"
7
+ "value": "#ff0000",
8
+ "text": "Red"
9
9
  },
10
10
  {
11
- "hexCode": "#00ff00",
12
- "colorName": "Green"
11
+ "value": "#00ff00",
12
+ "text": "Green"
13
13
  },
14
14
  {
15
- "hexCode": "#0000ff",
16
- "colorName": "Blue"
15
+ "value": "#0000ff",
16
+ "text": "Blue"
17
17
  },
18
18
  {
19
- "hexCode": "#000000",
20
- "colorName": "Black"
19
+ "value": "#000000",
20
+ "text": "Black"
21
21
  }
22
22
  ]
@@ -1,37 +1,30 @@
1
1
  [
2
2
  {
3
- "isoCode": "cn",
4
- "countryName": "China",
5
- "flagPath": "/media/images/flags/flag-cn.svg"
3
+ "value": "cn",
4
+ "text": "China"
6
5
  },
7
6
  {
8
- "isoCode": "de",
9
- "countryName": "Germany",
10
- "flagPath": "/media/images/flags/flag-de.svg"
7
+ "value": "de",
8
+ "text": "Germany"
11
9
  },
12
10
  {
13
- "isoCode": "en",
14
- "countryName": "United Kingdom",
15
- "flagPath": "/media/images/flags/flag-en.svg"
11
+ "value": "en",
12
+ "text": "United Kingdom"
16
13
  },
17
14
  {
18
- "isoCode": "es",
19
- "countryName": "Spain",
20
- "flagPath": "/media/images/flags/flag-es.svg"
15
+ "value": "es",
16
+ "text": "Spain"
21
17
  },
22
18
  {
23
- "isoCode": "fr",
24
- "countryName": "France",
25
- "flagPath": "/media/images/flags/flag-fr.svg"
19
+ "value": "fr",
20
+ "text": "France"
26
21
  },
27
22
  {
28
- "isoCode": "it",
29
- "countryName": "Italy",
30
- "flagPath": "/media/images/flags/flag-it.svg"
23
+ "value": "it",
24
+ "text": "Italy"
31
25
  },
32
26
  {
33
- "isoCode": "ru",
34
- "countryName": "Russia",
35
- "flagPath": "/media/images/flags/flag-ru.svg"
27
+ "value": "ru",
28
+ "text": "Russia"
36
29
  }
37
30
  ]
@@ -0,0 +1,23 @@
1
+ [
2
+ {
3
+ "text": "Optionname 1",
4
+ "value": "1",
5
+ "icon": {
6
+ "iconClass": "icon-home"
7
+ }
8
+ },
9
+ {
10
+ "text": "Optionname 2",
11
+ "value": "2",
12
+ "icon": {
13
+ "iconClass": "icon-globe"
14
+ }
15
+ },
16
+ {
17
+ "text": "Optionname 3",
18
+ "value": "3",
19
+ "icon": {
20
+ "iconClass": "icon-user-profile"
21
+ }
22
+ }
23
+ ]
@@ -1,14 +1,14 @@
1
1
  [
2
2
  {
3
- "optionName": "Optionname 1",
4
- "optionValue": "Option 1"
3
+ "text": "Optionname 1",
4
+ "value": "1"
5
5
  },
6
6
  {
7
- "optionName": "Optionname 2",
8
- "optionValue": "Option 2"
7
+ "text": "Optionname 2",
8
+ "value": "2"
9
9
  },
10
10
  {
11
- "optionName": "Optionname 3",
12
- "optionValue": "Option 3"
11
+ "text": "Optionname 3",
12
+ "value": "3"
13
13
  }
14
14
  ]
@@ -0,0 +1,14 @@
1
+ [
2
+ {
3
+ "text": "Optionname 1",
4
+ "value": "1"
5
+ },
6
+ {
7
+ "text": "Optionname 2",
8
+ "value": "2"
9
+ },
10
+ {
11
+ "text": "Optionname 3",
12
+ "value": "3"
13
+ }
14
+ ]
@@ -4,42 +4,56 @@
4
4
  <ul :class="{'open': showOptions}" @clickout="closeOptions">
5
5
  <li>
6
6
  <a href="#" @click.prevent="toggleOptions">
7
- <img v-if="type === 'country' && miscInfo" :src="pathFlag(miscInfo)" :alt="miscInfo" class="flag" :class="miscInfo"/>
8
- <span v-else-if="type === 'color' && miscInfo" class="color"
9
- :style="'background: ' + miscInfo"></span>
7
+ <img v-if="type === 'country'" :src="pathFlag(optionCountry)" :alt="optionCountry" class="flag" :class="optionCountry"/>
8
+ <span v-else-if="type === 'color'" class="color"
9
+ :style="'background: ' + optionColor"></span>
10
+ <span v-if="optionIcon" :class="optionIcon"></span>
10
11
  <span>{{ optionName }}</span>
11
12
  <span :class="dropdownIconClass"></span>
12
13
  </a>
13
- <ul v-if="type === 'filterList' && showOptions" class="filter-list">
14
+
15
+ <!-- begin default dropdown (incl. optional icon) -->
16
+ <ul v-if="type === 'default' && showOptions">
14
17
  <li v-for="(option, index) in selectData" :key="index">
15
- <label :for="'option-' + (index + 1)">
16
- <input type="checkbox" :value="option.optionValue" @change="optionSelect"
17
- :checked="value.includes(`${option.optionValue}`)" :id="'option-' + (index + 1)"/>
18
- <span>{{ option.optionName }}</span>
19
- </label>
20
- </li>
21
- </ul>
22
- <ul v-else-if="type === 'country' && showOptions">
23
- <li v-for="(country, index) in selectData" :key="index">
24
- <a href="#"
25
- @click.prevent="selectOption(country.countryName, country.isoCode)">
26
- <img class="flag" :src="pathFlag(country.isoCode)"
27
- :alt="country.countryName"/><span>{{ country.countryName }}</span>
18
+ <a href="#" @click.prevent="selectOption(option.value)" :class="{'active' : option.value === value}">
19
+ <span v-if="option.icon?.iconClass" :class="option.icon.iconClass"></span>
20
+ <span>{{ option.text }}</span>
28
21
  </a>
29
22
  </li>
30
23
  </ul>
31
- <ul v-else-if="type === 'color' && showOptions">
32
- <li v-for="(color, index) in selectData" :key="index">
33
- <a href="#" @click.prevent="selectOption(color.colorName, color.hexCode)">
34
- <span class="color" :style="'background: ' + color.hexCode"></span><span>{{
35
- color.colorName
24
+ <!-- end default dropdown (incl. optional icon) -->
25
+
26
+ <!-- begin dropdown with checkboxes -->
27
+ <ul v-else-if="type !== 'default' && type !== 'content' && showOptions" class="checkbox-options">
28
+ <li v-for="(option, index) in selectData" :key="index">
29
+ <label v-if="type === 'checkboxOptions'" :for="'option-' + (index + 1)" :class="{'active' : value.includes(`${option.value}`)}">
30
+ <input type="checkbox" :value="option.value" @change="optionSelect"
31
+ :checked="value.includes(`${option.value}`)" :id="'option-' + (index + 1)"/>
32
+ <span>{{ option.text }}</span>
33
+ </label>
34
+
35
+ <a v-else-if="type === 'country'" href="#"
36
+ @click.prevent="selectOption(option.value)" :class="{'active' : option.value === value}">
37
+ <img class="flag" :src="pathFlag(option.value)"
38
+ :alt="option.text"/>
39
+ <span>{{ option.text }}</span>
40
+ </a>
41
+
42
+ <a v-else href="#" @click.prevent="selectOption(option.value)" :class="{'active' : option.value === value}">
43
+ <span class="color" :style="'background: ' + option.value"></span>
44
+ <span>{{
45
+ option.text
36
46
  }}</span>
37
47
  </a>
38
48
  </li>
39
49
  </ul>
40
- <template v-else-if="!type && showOptions">
50
+ <!-- end dropdown with checkboxes -->
51
+
52
+ <!-- begin dropdown with slot -->
53
+ <template v-else-if="type === 'content' && showOptions">
41
54
  <slot></slot>
42
55
  </template>
56
+ <!-- end dropdown with slot -->
43
57
  </li>
44
58
  </ul>
45
59
  </div>
@@ -48,6 +62,11 @@
48
62
  <script>
49
63
  export default {
50
64
  name: 'CmdFakeSelect',
65
+ data() {
66
+ return {
67
+ showOptions: false
68
+ }
69
+ },
51
70
  props: {
52
71
  /**
53
72
  * set different default selectbox-types for
@@ -56,7 +75,7 @@ export default {
56
75
  */
57
76
  type: {
58
77
  type: String,
59
- required: false
78
+ default: "default"
60
79
  },
61
80
  /**
62
81
  * set default value
@@ -110,6 +129,58 @@ export default {
110
129
  default: "/media/images/flags"
111
130
  }
112
131
  },
132
+ computed: {
133
+ // get the displayed option name
134
+ optionName() {
135
+ // fake a normal checkbox
136
+ if (this.type !== "checkboxOptions" && this.type !== "content" && this.value) {
137
+ const result = this.selectData.find(option => option.value === this.value)?.text
138
+
139
+ // if find() returns some data, return this data
140
+ if (result) {
141
+ return result
142
+ }
143
+ }
144
+
145
+ // selectbox with checkbox-options
146
+ else if (this.type === "checkboxOptions") {
147
+ if (this.value.length === 1) {
148
+ return this.selectData.find(option => option.value === this.value[0])?.text
149
+ } else if (this.value.length > 1) {
150
+ return this.value.length + " options selected"
151
+ }
152
+ }
153
+
154
+ // if nothing is selected return the set default option name
155
+ if (this.defaultOptionName) {
156
+ return this.defaultOptionName
157
+ }
158
+
159
+ // if nothing is selected and no default option name is set, return default text (so selectbox is not empty)
160
+ return "Please select\u2026"
161
+ },
162
+ // get the displayed icon (only available for default selectbox)
163
+ optionIcon() {
164
+ if (this.type === "default") {
165
+ return this.selectData.find(option => {
166
+ return option.value === this.value
167
+ })?.icon?.iconClass
168
+ }
169
+ return null
170
+ },
171
+ optionCountry() {
172
+ if (this.type === "country") {
173
+ return this.value
174
+ }
175
+ return null
176
+ },
177
+ optionColor() {
178
+ if (this.type === "color") {
179
+ return this.value
180
+ }
181
+ return null
182
+ }
183
+ },
113
184
  methods: {
114
185
  toggleOptions() {
115
186
  if (this.status !== 'disabled') {
@@ -125,11 +196,9 @@ export default {
125
196
  }
126
197
  this.$emit('update:value', value);
127
198
  },
128
- selectOption(optionName, miscInfo) {
129
- this.optionName = optionName
130
- this.miscInfo = miscInfo
199
+ selectOption(optionValue) {
131
200
  this.showOptions = false
132
- this.$emit('update:value', miscInfo);
201
+ this.$emit('update:value', optionValue);
133
202
  },
134
203
  closeOptions() {
135
204
  this.showOptions = false
@@ -137,32 +206,6 @@ export default {
137
206
  pathFlag(isoCode) {
138
207
  return this.pathFlags + "/flag-" + isoCode + ".svg"
139
208
  }
140
- },
141
- data() {
142
- return {
143
- showOptions: false,
144
- optionName: this.defaultOptionName,
145
- miscInfo: ""
146
- }
147
- },
148
- watch: {
149
- value: {
150
- handler() {
151
- if (this.selectData) {
152
- for (let i = 0; i < this.selectData.length; i++) {
153
- let currentEntry = this.selectData[i]
154
- if (this.type === 'country' && this.value === currentEntry.isoCode) {
155
- this.optionName = currentEntry.countryName
156
- this.miscInfo = currentEntry.isoCode
157
- } else if (this.type === 'color' && this.value === currentEntry.hexCode) {
158
- this.optionName = currentEntry.colorName
159
- this.miscInfo = currentEntry.hexCode
160
- }
161
- }
162
- }
163
- },
164
- immediate: true
165
- }
166
209
  }
167
210
  }
168
211
  </script>
@@ -193,7 +236,7 @@ export default {
193
236
  height: inherit;
194
237
  border: var(--default-border);
195
238
 
196
- [class*='icon-'] {
239
+ > [class*='icon-']:last-child {
197
240
  margin-left: auto;
198
241
  font-size: 1rem;
199
242
  }
@@ -245,6 +288,20 @@ export default {
245
288
  margin: 0 calc(var(--default-margin) / 2) 0 0;
246
289
  }
247
290
  }
291
+
292
+ &.active {
293
+ background: var(--light-gray);
294
+
295
+ &:hover, &:active, &:focus {
296
+ background: var(--primary-color);
297
+ }
298
+ }
299
+ }
300
+
301
+ label {
302
+ &.active {
303
+ background: var(--light-gray);
304
+ }
248
305
  }
249
306
 
250
307
  ul {
@@ -268,7 +325,7 @@ export default {
268
325
  }
269
326
  }
270
327
 
271
- &.filter-list {
328
+ &.checkbox-options {
272
329
  li {
273
330
  padding: calc(var(--default-padding) / 2);
274
331
  }
@@ -28,7 +28,6 @@
28
28
  @change="$emit('change', $event)"
29
29
  :autocomplete="datalist ? 'off' : 'on'"
30
30
  :list="datalist ? datalist.id : false"
31
- :disabled="status === 'disabled'"
32
31
  :value="value"
33
32
  />
34
33
  </template>
@@ -50,7 +49,6 @@
50
49
  :value="inputValue"
51
50
  :class="[htmlClass, status, { 'replace-input-type': replaceInputType }]"
52
51
  :id="id"
53
- :disabled="status === 'disabled'"
54
52
  :aria-invalid="status === 'error'"
55
53
  :aria-describedby="`status-message-${id}`"
56
54
  />
@@ -66,7 +64,6 @@
66
64
  <select v-if="element === 'select'"
67
65
  v-bind="$attrs"
68
66
  :id="id"
69
- :disabled="status === 'disabled'"
70
67
  @change="$emit('input', $event.target.value)"
71
68
  >
72
69
  <option v-for="(option, index) in selectOptions" :key="index" :value="option.value"
@@ -79,7 +76,6 @@
79
76
  <textarea v-if="element === 'textarea'"
80
77
  v-bind="$attrs"
81
78
  :id="id"
82
- :disabled="status === 'disabled'"
83
79
  :value="value"
84
80
  @input="onInput"
85
81
  @focus="tooltip = true"
@@ -94,7 +90,7 @@
94
90
  <!-- begin searchfield -->
95
91
  <span v-else-if="element === 'input' && $attrs.type === 'search'" class="flex-container no-gap">
96
92
  <input v-bind="$attrs" :id="id" @input="onInput" :value="value"/>
97
- <button class="no-flex" type="button" :disabled="status === 'disabled'">
93
+ <button class="no-flex" type="button">
98
94
  <span class="icon-search"></span>
99
95
  </button>
100
96
  </span>
@@ -102,7 +98,7 @@
102
98
  </label>
103
99
 
104
100
  <!-- begin button -->
105
- <button v-else class="button" v-bind="$attrs" :disabled="status === 'disabled'">
101
+ <button v-else class="button" v-bind="$attrs">
106
102
  <span v-if="buttonIcon.iconPosition === 'before'" :class="buttonIcon.iconClass"></span>
107
103
  <span v-if="buttonIcon.iconPosition">{{ buttonText }}</span>
108
104
  <template v-else>
@@ -78,7 +78,7 @@
78
78
  v-if="buttons.login.linkType === 'button'"
79
79
  :type="buttons.login.type === 'submit' ? 'submit' : 'button'"
80
80
  :class="['button', { primary: buttons.login.primary }]"
81
- @click.prevent="onClick"
81
+ @click="onClick"
82
82
  >
83
83
  <span
84
84
  v-if="buttons.login.icon.iconClass"
@@ -140,12 +140,11 @@
140
140
  v-if="buttons.sendLogin.linkType === 'button'"
141
141
  :type="buttons.sendLogin.type === 'submit' ? 'submit' : 'button'"
142
142
  :class="['button', { primary: buttons.sendLogin.primary }]"
143
- @click.prevent="sendLogin"
144
143
  >
145
144
  <span
146
- v-if="buttons.sendLogin.icon.iconClass"
147
- :class="buttons.sendLogin.icon.iconClass"
148
- :title="buttons.sendLogin.icon.tooltip"
145
+ v-if="buttons.sendLogin.icon?.iconClass"
146
+ :class="buttons.sendLogin.icon?.iconClass"
147
+ :title="buttons.sendLogin.icon?.tooltip"
149
148
  ></span>
150
149
  <span v-if="buttons.sendLogin.text">{{ buttons.sendLogin.text }}</span>
151
150
  </button>
@@ -174,6 +173,18 @@ export default {
174
173
  CmdFormElement
175
174
  },
176
175
  props: {
176
+ /**
177
+ * value for v-model (modelValue is default name in vue 3)
178
+ */
179
+ modelValue: {
180
+ type: Object,
181
+ default() {
182
+ return {
183
+ username: "",
184
+ password: ""
185
+ }
186
+ }
187
+ },
177
188
  /**
178
189
  * legend for login-fieldset (required for accessibility)
179
190
  */
@@ -332,12 +343,23 @@ export default {
332
343
  }
333
344
  },
334
345
  methods: {
335
- onClick() {
336
- this.$emit("click")
346
+ modelChange() {
347
+ this.$emit("update:modelValue", { "username": this.username, "password": this.password })
348
+ },
349
+ onClick(event) {
350
+ this.$emit("click", event)
337
351
  },
338
352
  getRoute(language) {
339
353
  return getRoute(language)
340
354
  }
355
+ },
356
+ watch: {
357
+ username() {
358
+ this.modelChange()
359
+ },
360
+ password() {
361
+ this.modelChange()
362
+ }
341
363
  }
342
364
  }
343
365
  </script>
@@ -13,7 +13,7 @@ export default {
13
13
  name: "CmdProgressBar",
14
14
  data() {
15
15
  return {
16
- loadingStatus: 50
16
+ loadingStatus: 30
17
17
  }
18
18
  },
19
19
  props: {
@@ -4,9 +4,11 @@
4
4
  'colored' : colored, 'on' : colored && isChecked,
5
5
  'off' : colored && !isChecked, 'disabled': $attrs.disabled
6
6
  }
7
- ]" :for="id">
8
- <input :type="type" :id="id" :name="name" :value="inputValue" :checked="isChecked" @change="onChange"
9
- v-bind="$attrs"/>
7
+ ]"
8
+ :for="id"
9
+ :title="$attrs.title"
10
+ >
11
+ <input :type="type" :id="id" :name="name" :value="inputValue" :checked="isChecked" @change="onChange" v-bind="$attrs"/>
10
12
  <span class="label" v-if="onLabel && offLabel && !labelText">{{ onLabel }}</span>
11
13
  <span class="label" v-if="onLabel && offLabel && !labelText">{{ offLabel }}</span>
12
14
  <span class="label" v-if="!onLabel && !offLabel && labelText">{{ labelText }}</span>