comand-component-library 3.1.44 → 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.
Files changed (9) hide show
  1. package/dist/comand-component-library.css +1 -1
  2. package/dist/comand-component-library.umd.min.js +1 -1
  3. package/package.json +1 -1
  4. package/src/App.vue +2 -2
  5. package/src/assets/data/fake-select-countries.json +12 -12
  6. package/src/assets/data/fake-select-options.json +1 -1
  7. package/src/assets/styles/global-styles.scss +0 -1
  8. package/src/components/CmdFakeSelect.vue +56 -17
  9. package/src/components/CmdFormElement.vue +24 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "comand-component-library",
3
- "version": "3.1.44",
3
+ "version": "3.1.45",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
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"/>
package/src/assets/data/fake-select-countries.json CHANGED
@@ -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
  ]
package/src/assets/data/fake-select-options.json CHANGED
@@ -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
  {
package/src/assets/styles/global-styles.scss CHANGED
@@ -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
  }
package/src/components/CmdFakeSelect.vue CHANGED
@@ -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 ------------------------------------------------------------------------------------------ */
package/src/components/CmdFormElement.vue CHANGED
@@ -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
@@ -33,6 +32,10 @@
33
32
  </template>
34
33
  <!-- end inputfield -->
35
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
+
36
39
  <!-- begin datalist -->
37
40
  <template v-if="datalist && datalist.options.length">
38
41
  <datalist :id="datalist.id">
@@ -53,9 +56,9 @@
53
56
  :aria-describedby="`status-message-${id}`"
54
57
  />
55
58
  <span v-if="labelText">
56
- <span>{{ labelText }}</span>
57
- <sup v-if="$attrs.required">*</sup>
58
- </span>
59
+ <span>{{ labelText }}</span>
60
+ <sup v-if="$attrs.required">*</sup>
61
+ </span>
59
62
  <slot v-else></slot>
60
63
  </template>
61
64
  <!-- end checkbox and radiobutton -->
@@ -300,7 +303,19 @@ export default {
300
303
  },
301
304
  onInput(e) {
302
305
  this.$emit('update:value', e.target.value)
306
+ },
307
+ showPassword() {
308
+ alert(this.$el)
303
309
  }
304
310
  }
305
311
  }
306
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>