comand-component-library 3.1.41 → 3.1.45

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.41",
3
+ "version": "3.1.45",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
@@ -17,7 +17,7 @@
17
17
  ],
18
18
  "dependencies": {
19
19
  "clickout-event": "^1.1.2",
20
- "comand-frontend-framework": "^3.2.23",
20
+ "comand-frontend-framework": "^3.2.27",
21
21
  "core-js": "^3.16.1",
22
22
  "vue": "^3.2.1",
23
23
  "vue-router": "^4.0.11",
@@ -30,6 +30,7 @@
30
30
  "@vue/cli-plugin-vuex": "^4.5.13",
31
31
  "@vue/cli-service": "^4.5.13",
32
32
  "@vue/compiler-sfc": "^3.1.5",
33
+ "axios": "^0.24.0",
33
34
  "babel-eslint": "^10.1.0",
34
35
  "eslint": "^6.7.2",
35
36
  "eslint-plugin-vue": "^7.14.0",
package/src/App.vue CHANGED
@@ -329,7 +329,7 @@
329
329
  element="input"
330
330
  type="text"
331
331
  id="inputfield2"
332
- iconClass="icon-user-profile"
332
+ innerIconClass="icon-user-profile"
333
333
  placeholder="Type in username"
334
334
  tooltipText="This is a tooltip!"
335
335
  :status="formElementStatus"/>
@@ -337,7 +337,7 @@
337
337
  labelText="Label for inputfield (with icon):"
338
338
  type="password"
339
339
  id="inputfield3"
340
- iconClass="icon-security-settings"
340
+ innerIconClass="icon-security-settings"
341
341
  placeholder="Type in password"
342
342
  tooltipText="This is a tooltip!"
343
343
  :status="formElementStatus"/>
@@ -637,7 +637,8 @@
637
637
  <a id="section-login-form"></a>
638
638
  <CmdWidthLimitationWrapper>
639
639
  <h2 class="headline-demopage">Login Form</h2>
640
- <CmdLoginForm/>
640
+ <CmdLoginForm v-model="loginData" />
641
+ <p>LoginData: {{loginData}}</p>
641
642
  </CmdWidthLimitationWrapper>
642
643
 
643
644
  <a id="section-main-headline"></a>
@@ -757,7 +758,12 @@
757
758
  <a id="section-upload-form"></a>
758
759
  <CmdWidthLimitationWrapper>
759
760
  <h2 class="headline-demopage">Upload-Form</h2>
760
- <CmdUploadForm headline="Select files to upload" :enableDragAndDrop="true" :allowedFileTypes="['image/jpeg']"/>
761
+ <CmdUploadForm headline="Select files to upload"
762
+ :enableDragAndDrop="true"
763
+ :allowedFileExtensions="['jpg']"
764
+ :allowMultipleFileUploads="true"
765
+ :uploadOptions="{url: 'http://localhost:8888'}"
766
+ />
761
767
  </CmdWidthLimitationWrapper>
762
768
  </main>
763
769
 
@@ -913,6 +919,7 @@ export default {
913
919
  selectedCountry: "de",
914
920
  selectedColor: "",
915
921
  rangeValue: 50,
922
+ loginData: {},
916
923
  formElementStatus: "",
917
924
  switchButtonRadio: "radio1",
918
925
  switchButtonCheckbox: ["checkbox1"],
@@ -3,22 +3,14 @@
3
3
  "value": "cn",
4
4
  "text": "China"
5
5
  },
6
- {
7
- "value": "de",
8
- "text": "Germany"
9
- },
10
- {
11
- "value": "en",
12
- "text": "United Kingdom"
13
- },
14
- {
15
- "value": "es",
16
- "text": "Spain"
17
- },
18
6
  {
19
7
  "value": "fr",
20
8
  "text": "France"
21
9
  },
10
+ {
11
+ "value": "de",
12
+ "text": "Germany"
13
+ },
22
14
  {
23
15
  "value": "it",
24
16
  "text": "Italy"
@@ -26,5 +18,13 @@
26
18
  {
27
19
  "value": "ru",
28
20
  "text": "Russia"
21
+ },
22
+ {
23
+ "value": "es",
24
+ "text": "Spain"
25
+ },
26
+ {
27
+ "value": "en",
28
+ "text": "United Kingdom"
29
29
  }
30
30
  ]
@@ -4,7 +4,7 @@
4
4
  "value": "1"
5
5
  },
6
6
  {
7
- "text": "Optionname 2",
7
+ "text": "Optionname 2 with very multiple words",
8
8
  "value": "2"
9
9
  },
10
10
  {
@@ -52,7 +52,6 @@ label, .label {
52
52
  /* begin flags --------------------------------------------------------------------------------------------------------------------------------------------------- */
53
53
  .flag {
54
54
  width: 3rem;
55
- height: 2rem;
56
55
  background-size: 100% 100%;
57
56
  display: block;
58
57
  }
@@ -1,16 +1,17 @@
1
1
  <template>
2
- <div :class="[status, 'cmd-fake-select label']">
2
+ <div :class="[status, 'cmd-fake-select label', {color: type === 'color'}]">
3
3
  <span>{{ labelText }}</span>
4
4
  <ul :class="{'open': showOptions}" @clickout="closeOptions">
5
5
  <li>
6
+ <!-- begin default/selected-option -->
6
7
  <a href="#" @click.prevent="toggleOptions">
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>
8
+ <img v-if="type === 'country' && optionCountry" :src="pathFlag(optionCountry)" :alt="optionCountry" :class="['flag', optionCountry]"/>
9
+ <span v-else-if="type === 'color'" :style="'background: ' + optionColor"></span>
10
10
  <span v-if="optionIcon" :class="optionIcon"></span>
11
11
  <span>{{ optionName }}</span>
12
- <span :class="dropdownIconClass"></span>
12
+ <span :class="dropdownIconClass" title="Toggle dropdown visibility"></span>
13
13
  </a>
14
+ <!-- end default/selected-option-->
14
15
 
15
16
  <!-- begin default dropdown (incl. optional icon) -->
16
17
  <ul v-if="type === 'default' && showOptions">
@@ -24,7 +25,7 @@
24
25
  <!-- end default dropdown (incl. optional icon) -->
25
26
 
26
27
  <!-- begin dropdown with checkboxes -->
27
- <ul v-else-if="type !== 'default' && type !== 'content' && showOptions" class="checkbox-options">
28
+ <ul v-else-if="type !== 'default' && type !== 'content' && showOptions" :class="{'checkbox-options': type === 'checkboxOptions'}">
28
29
  <li v-for="(option, index) in selectData" :key="index">
29
30
  <label v-if="type === 'checkboxOptions'" :for="'option-' + (index + 1)" :class="{'active' : value.includes(`${option.value}`)}">
30
31
  <input type="checkbox" :value="option.value" @change="optionSelect"
@@ -42,8 +43,8 @@
42
43
  <a v-else href="#" @click.prevent="selectOption(option.value)" :class="{'active' : option.value === value}">
43
44
  <span class="color" :style="'background: ' + option.value"></span>
44
45
  <span>{{
45
- option.text
46
- }}</span>
46
+ option.text
47
+ }}</span>
47
48
  </a>
48
49
  </li>
49
50
  </ul>
@@ -170,7 +171,7 @@ export default {
170
171
  },
171
172
  optionCountry() {
172
173
  if (this.type === "country") {
173
- return this.value
174
+ return this.value
174
175
  }
175
176
  return null
176
177
  },
@@ -179,6 +180,10 @@ export default {
179
180
  return this.value
180
181
  }
181
182
  return null
183
+ },
184
+ overflowWidth() {
185
+ let outerWidth = document.querySelector(".cmd-fake-select").outerWidth()
186
+ return "width: " + outerWidth + "px;"
182
187
  }
183
188
  },
184
189
  methods: {
@@ -236,7 +241,13 @@ export default {
236
241
  height: inherit;
237
242
  border: var(--default-border);
238
243
 
239
- > [class*='icon-']:last-child {
244
+ > span:not([class*="icon"]) {
245
+ text-overflow: ellipsis;
246
+ overflow: hidden;
247
+ width: 95%;
248
+ }
249
+
250
+ > [class*="icon-"]:last-child {
240
251
  margin-left: auto;
241
252
  font-size: 1rem;
242
253
  }
@@ -245,6 +256,8 @@ export default {
245
256
  }
246
257
 
247
258
  &.open {
259
+ border-bottom: 0;
260
+
248
261
  > li {
249
262
  &:first-child {
250
263
  > a {
@@ -299,23 +312,23 @@ export default {
299
312
  }
300
313
 
301
314
  label {
302
- &.active {
303
- background: var(--light-gray);
304
- }
315
+ display: flex;
316
+ }
317
+
318
+ span {
319
+ white-space: nowrap;
305
320
  }
306
321
 
307
322
  ul {
308
323
  position: absolute;
309
324
  list-style: none;
310
325
  z-index: 10;
311
- width: 100%;
312
- margin-left: 0;
313
- border-top: 0;
326
+ min-width: 100%;
327
+ margin: 0;
314
328
  border-bottom-right-radius: var(--border-radius);
315
329
  border-bottom-left-radius: var(--border-radius);
316
330
  background: var(--pure-white);
317
331
  border: var(--primary-border);
318
- border-top: 0;
319
332
 
320
333
  li {
321
334
  &:last-child {
@@ -325,6 +338,14 @@ export default {
325
338
  }
326
339
  }
327
340
 
341
+ &.custom-fake-select-content {
342
+ padding: var(--default-padding);
343
+
344
+ img {
345
+ display: block;
346
+ }
347
+ }
348
+
328
349
  &.checkbox-options {
329
350
  li {
330
351
  padding: calc(var(--default-padding) / 2);
@@ -390,6 +411,24 @@ export default {
390
411
  }
391
412
  }
392
413
  }
414
+
415
+ &.color {
416
+ li {
417
+ a {
418
+ gap: calc(var(--default-gap) / 2);
419
+
420
+ > span:first-child {
421
+ width: 1.5rem;
422
+ aspect-ratio: 1;
423
+ border: var(--default-border);
424
+
425
+ &[style=""] {
426
+ display: none;
427
+ }
428
+ }
429
+ }
430
+ }
431
+ }
393
432
  }
394
433
 
395
434
  /* end cmd-fake-select ------------------------------------------------------------------------------------------ */
@@ -3,18 +3,17 @@
3
3
  :for="id"
4
4
  :class="['cmd-form-element', status, {'inline' : displayLabelInline, 'checked': isChecked}]"
5
5
  ref="label">
6
- <!-- begin label (+ required) -->
6
+ <!-- begin label (+ required asterisk) -->
7
7
  <span v-if="labelText && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
8
8
  :class="{'hidden': hideLabel}">
9
9
  <span>{{ labelText }}</span>
10
10
  <sup v-if="$attrs.required">*</sup>
11
11
  </span>
12
- <!-- end label (+ required) -->
12
+ <!-- end label (+ required asterisk) -->
13
13
 
14
- <!-- begin icon -->
15
- <span v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio' && innerIconClass" class="place-inside"
16
- :class="[status, innerIconClass]"></span>
17
- <!-- end icon -->
14
+ <!-- begin inner-icon -->
15
+ <span v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio' && innerIconClass" :class="['place-inside', status, innerIconClass]"></span>
16
+ <!-- end inner-icon -->
18
17
 
19
18
  <!-- begin inputfield -->
20
19
  <template
@@ -28,12 +27,15 @@
28
27
  @change="$emit('change', $event)"
29
28
  :autocomplete="datalist ? 'off' : 'on'"
30
29
  :list="datalist ? datalist.id : false"
31
- :disabled="status === 'disabled'"
32
30
  :value="value"
33
31
  />
34
32
  </template>
35
33
  <!-- end inputfield -->
36
34
 
35
+ <!-- begin show-password-icon -->
36
+ <a v-if="$attrs.type === 'password'" href="#" @click.prevent="showPassword" class="place-inside icon-visible" title="Toggle password visibility"></a>
37
+ <!-- end show-password-icon -->
38
+
37
39
  <!-- begin datalist -->
38
40
  <template v-if="datalist && datalist.options.length">
39
41
  <datalist :id="datalist.id">
@@ -50,14 +52,13 @@
50
52
  :value="inputValue"
51
53
  :class="[htmlClass, status, { 'replace-input-type': replaceInputType }]"
52
54
  :id="id"
53
- :disabled="status === 'disabled'"
54
55
  :aria-invalid="status === 'error'"
55
56
  :aria-describedby="`status-message-${id}`"
56
57
  />
57
58
  <span v-if="labelText">
58
- <span>{{ labelText }}</span>
59
- <sup v-if="$attrs.required">*</sup>
60
- </span>
59
+ <span>{{ labelText }}</span>
60
+ <sup v-if="$attrs.required">*</sup>
61
+ </span>
61
62
  <slot v-else></slot>
62
63
  </template>
63
64
  <!-- end checkbox and radiobutton -->
@@ -66,7 +67,6 @@
66
67
  <select v-if="element === 'select'"
67
68
  v-bind="$attrs"
68
69
  :id="id"
69
- :disabled="status === 'disabled'"
70
70
  @change="$emit('input', $event.target.value)"
71
71
  >
72
72
  <option v-for="(option, index) in selectOptions" :key="index" :value="option.value"
@@ -79,7 +79,6 @@
79
79
  <textarea v-if="element === 'textarea'"
80
80
  v-bind="$attrs"
81
81
  :id="id"
82
- :disabled="status === 'disabled'"
83
82
  :value="value"
84
83
  @input="onInput"
85
84
  @focus="tooltip = true"
@@ -94,7 +93,7 @@
94
93
  <!-- begin searchfield -->
95
94
  <span v-else-if="element === 'input' && $attrs.type === 'search'" class="flex-container no-gap">
96
95
  <input v-bind="$attrs" :id="id" @input="onInput" :value="value"/>
97
- <button class="no-flex" type="button" :disabled="status === 'disabled'">
96
+ <button class="no-flex" type="button">
98
97
  <span class="icon-search"></span>
99
98
  </button>
100
99
  </span>
@@ -102,7 +101,7 @@
102
101
  </label>
103
102
 
104
103
  <!-- begin button -->
105
- <button v-else class="button" v-bind="$attrs" :disabled="status === 'disabled'">
104
+ <button v-else class="button" v-bind="$attrs">
106
105
  <span v-if="buttonIcon.iconPosition === 'before'" :class="buttonIcon.iconClass"></span>
107
106
  <span v-if="buttonIcon.iconPosition">{{ buttonText }}</span>
108
107
  <template v-else>
@@ -304,7 +303,19 @@ export default {
304
303
  },
305
304
  onInput(e) {
306
305
  this.$emit('update:value', e.target.value)
306
+ },
307
+ showPassword() {
308
+ alert(this.$el)
307
309
  }
308
310
  }
309
311
  }
310
312
  </script>
313
+
314
+ <style lang="scss">
315
+ .cmd-form-element {
316
+ input + .place-inside[class*="icon"] {
317
+ left: auto;
318
+ right: .5rem
319
+ }
320
+ }
321
+ </style>
@@ -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>