comand-component-library 4.2.90 → 4.2.92
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": "4.2.
|
|
3
|
+
"version": "4.2.92",
|
|
4
4
|
"license": "GPL-3.0-only",
|
|
5
5
|
"author": "CoManD-UI",
|
|
6
6
|
"private": false,
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"clickout-event": "^1.1.2",
|
|
32
|
-
"comand-frontend-framework": "^4.3.
|
|
32
|
+
"comand-frontend-framework": "^4.3.25",
|
|
33
33
|
"comand-ui-iconfonts": "^1.0.19",
|
|
34
34
|
"core-js": "^3.20.1",
|
|
35
35
|
"prismjs": "^1.27.0",
|
package/src/ComponentLibrary.vue
CHANGED
|
@@ -396,62 +396,89 @@
|
|
|
396
396
|
<h3>Switches without switch-labels</h3>
|
|
397
397
|
<CmdFormElement element="input" type="checkbox" id="toggle-switch-checkbox"
|
|
398
398
|
v-model="switchButtonCheckboxToggleSwitch"
|
|
399
|
-
labelText="Labeltext for Toggle-Switch
|
|
399
|
+
labelText="Labeltext for Toggle-Switch (not required)" :toggleSwitch="true"
|
|
400
400
|
:status="validationStatus" :disabled="disabledStatus" />
|
|
401
|
+
<output>v-model: {{switchButtonCheckboxToggleSwitch}}</output>
|
|
401
402
|
<CmdFormElement element="input" type="checkbox" id="toggle-switch-checkbox-required"
|
|
402
|
-
v-model="
|
|
403
|
-
labelText="Labeltext for Toggle-Switch
|
|
403
|
+
v-model="switchButtonCheckboxToggleSwitchRequired"
|
|
404
|
+
labelText="Labeltext for Toggle-Switch (required)" :toggleSwitch="true"
|
|
404
405
|
:status="validationStatus" :disabled="disabledStatus" :required="true" />
|
|
406
|
+
<output>v-model: {{switchButtonCheckboxToggleSwitchRequired}}</output>
|
|
405
407
|
<CmdFormElement element="input" type="checkbox" id="toggle-switch-checkbox-colored"
|
|
406
408
|
v-model="switchButtonCheckboxToggleSwitchColored"
|
|
407
|
-
labelText="Labeltext for colored Toggle-Switch
|
|
409
|
+
labelText="Labeltext for colored Toggle-Switch with set value" :toggleSwitch="true" inputValue="yes"
|
|
408
410
|
:colored="true" :status="validationStatus" :disabled="disabledStatus" />
|
|
411
|
+
<output>v-model: {{switchButtonCheckboxToggleSwitchColored}}</output>
|
|
409
412
|
<h3>Switches with switch-labels</h3>
|
|
410
413
|
<CmdFormElement element="input" type="checkbox" id="toggle-switch-checkbox-switch-label"
|
|
411
414
|
v-model="switchButtonCheckbox" labelText="Labeltext for Toggle-Switch with Switch-Label"
|
|
412
415
|
inputValue="checkbox1" onLabel="Label on" offLabel="Label off" :toggleSwitch="true"
|
|
413
416
|
:status="validationStatus" :disabled="disabledStatus" />
|
|
417
|
+
<output>v-model: {{switchButtonCheckbox}}</output>
|
|
414
418
|
<CmdFormElement element="input" type="checkbox" id="toggle-switch-checkbox-switch-label-colored"
|
|
415
|
-
v-model="
|
|
419
|
+
v-model="switchButtonCheckboxColored" inputValue="checkbox2"
|
|
416
420
|
labelText="Labeltext for Toggle-Switch (Checkbox, colored)" onLabel="Label on"
|
|
417
421
|
offLabel="Label off" :colored="true" :toggleSwitch="true" :status="validationStatus"
|
|
418
422
|
:disabled="disabledStatus" />
|
|
423
|
+
<output>v-model: {{switchButtonCheckboxColored}}</output>
|
|
419
424
|
<CmdFormElement element="input" type="radio" name="radiogroup" id="toggle-switch-radio1"
|
|
420
425
|
v-model="switchButtonRadio" onLabel="Label on" offLabel="Label off" :colored="true"
|
|
421
426
|
:toggleSwitch="true" :status="validationStatus" :disabled="disabledStatus"
|
|
422
427
|
inputValue="radio1" labelText="Labeltext for Toggle-Switch (Radio, colored) #1" />
|
|
428
|
+
<output>v-model: {{switchButtonRadio}}</output>
|
|
423
429
|
<CmdFormElement element="input" type="radio" name="radiogroup" id="toggle-switch-radio2"
|
|
424
430
|
v-model="switchButtonRadio" onLabel="Label on" offLabel="Label off" :colored="true"
|
|
425
431
|
:toggleSwitch="true" :status="validationStatus" :disabled="disabledStatus"
|
|
426
432
|
inputValue="radio2" labelText="Labeltext for Toggle-Switch (Radio, colored) #2" />
|
|
433
|
+
<output>v-model: {{switchButtonRadio}}</output>
|
|
427
434
|
<!-- end toggle-switch-radio with switch-label (colored) -->
|
|
428
435
|
|
|
429
436
|
<!-- begin checkboxes and radiobuttons -->
|
|
430
|
-
<CmdFormElement element="input" labelText="Label for (required) checkbox with boolean"
|
|
431
|
-
type="checkbox" required="required" id="checkbox-required-with-boolean"
|
|
432
|
-
v-model="checkboxRequiredValue" :status="validationStatus" :disabled="disabledStatus" />
|
|
433
|
-
<p>
|
|
434
|
-
checkbox (required) with boolean: {{ checkboxRequiredValue }}<br />
|
|
435
|
-
checkbox with boolean: {{ checkboxValue }}<br />
|
|
436
|
-
checkboxes with values: {{ checkboxValues }}
|
|
437
|
-
</p>
|
|
438
|
-
|
|
439
437
|
<h2>Checkboxes and Radiobuttons</h2>
|
|
440
438
|
<h3>Checkboxes [native]</h3>
|
|
441
439
|
<div class="label inline">
|
|
442
440
|
<span class="label-text">Label for native checkboxes:</span>
|
|
443
441
|
<div class="flex-container flex-items-flex-none">
|
|
444
|
-
<CmdFormElement
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
v-model="
|
|
449
|
-
id="checkbox-with-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
442
|
+
<CmdFormElement
|
|
443
|
+
element="input"
|
|
444
|
+
type="checkbox"
|
|
445
|
+
labelText="Label for checkbox with boolean"
|
|
446
|
+
v-model="nativeCheckboxValues"
|
|
447
|
+
id="checkbox-with-boolean"
|
|
448
|
+
name="native-checkbox-group"
|
|
449
|
+
:status="validationStatus"
|
|
450
|
+
:disabled="disabledStatus"
|
|
451
|
+
/>
|
|
452
|
+
<CmdFormElement
|
|
453
|
+
element="input"
|
|
454
|
+
type="checkbox"
|
|
455
|
+
labelText="Label for checkbox with value"
|
|
456
|
+
v-model="nativeCheckboxValues"
|
|
457
|
+
inputValue="checkboxValue1"
|
|
458
|
+
id="checkbox-with-value-1"
|
|
459
|
+
name="native-checkbox-group"
|
|
460
|
+
:status="validationStatus"
|
|
461
|
+
:disabled="disabledStatus"
|
|
462
|
+
/>
|
|
463
|
+
<CmdFormElement
|
|
464
|
+
element="input"
|
|
465
|
+
type="checkbox"
|
|
466
|
+
labelText="Label for checkbox with value"
|
|
467
|
+
v-model="nativeCheckboxValues"
|
|
468
|
+
inputValue="checkboxValue2"
|
|
469
|
+
id="checkbox-with-value-2"
|
|
470
|
+
name="native-checkbox-group"
|
|
471
|
+
:status="validationStatus"
|
|
472
|
+
:disabled="disabledStatus"
|
|
473
|
+
/>
|
|
474
|
+
<CmdFormElement
|
|
475
|
+
element="input"
|
|
476
|
+
type="checkbox"
|
|
477
|
+
v-model="nativeCheckboxValues"
|
|
478
|
+
inputValue="checkboxValue3"
|
|
479
|
+
id="checkbox-with-value-3"
|
|
480
|
+
name="native-checkbox-group"
|
|
481
|
+
:status="validationStatus"
|
|
455
482
|
:disabled="disabledStatus">
|
|
456
483
|
<template v-slot:labeltext>
|
|
457
484
|
Labeltext with <a href="#">link</a> given by slot
|
|
@@ -459,19 +486,42 @@
|
|
|
459
486
|
</CmdFormElement>
|
|
460
487
|
</div>
|
|
461
488
|
</div>
|
|
489
|
+
<output>
|
|
490
|
+
v-model: {{ nativeCheckboxValues }}
|
|
491
|
+
</output>
|
|
462
492
|
<h3>Checkboxes (replaced)</h3>
|
|
463
493
|
<div class="label inline">
|
|
464
494
|
<span class="label-text">Label for Replaced Input-Type-Checkbox:</span>
|
|
465
495
|
<div class="flex-container flex-items-flex-none">
|
|
466
|
-
<CmdFormElement
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
496
|
+
<CmdFormElement
|
|
497
|
+
element="input"
|
|
498
|
+
type="checkbox"
|
|
499
|
+
labelText="Label for replaced checkbox"
|
|
500
|
+
:replaceInputType="true"
|
|
501
|
+
id="inputfield9"
|
|
502
|
+
name="replaced-checkbox-group"
|
|
503
|
+
v-model="replacedCheckboxValue"
|
|
504
|
+
inputValue="checkboxValue1"
|
|
505
|
+
:status="validationStatus"
|
|
506
|
+
:disabled="disabledStatus"
|
|
507
|
+
/>
|
|
508
|
+
<CmdFormElement
|
|
509
|
+
element="input"
|
|
510
|
+
type="checkbox"
|
|
511
|
+
labelText="Label for replaced checkbox"
|
|
512
|
+
name="replaced-checkbox-group"
|
|
513
|
+
v-model="replacedCheckboxValue"
|
|
514
|
+
inputValue="checkboxValue2"
|
|
515
|
+
:replaceInputType="true"
|
|
516
|
+
id="inputfield10"
|
|
517
|
+
:status="validationStatus"
|
|
518
|
+
:disabled="disabledStatus"
|
|
519
|
+
/>
|
|
473
520
|
</div>
|
|
474
521
|
</div>
|
|
522
|
+
<output>
|
|
523
|
+
v-model: {{ replacedCheckboxValue }}
|
|
524
|
+
</output>
|
|
475
525
|
<h3>Radiobuttons [native]</h3>
|
|
476
526
|
<div class="label inline">
|
|
477
527
|
<span class="label-text">Label for native radiobuttons:</span>
|
|
@@ -484,9 +534,9 @@
|
|
|
484
534
|
v-model="radiobuttonValue" :status="validationStatus" :disabled="disabledStatus" />
|
|
485
535
|
</div>
|
|
486
536
|
</div>
|
|
487
|
-
<
|
|
488
|
-
|
|
489
|
-
</
|
|
537
|
+
<output>
|
|
538
|
+
v-model: {{ radiobuttonValue }}
|
|
539
|
+
</output>
|
|
490
540
|
<h3>Radiobuttons (replaced)</h3>
|
|
491
541
|
<div class="label inline">
|
|
492
542
|
<span class="label-text">Label for Replaced Input-Type-Radio:</span>
|
|
@@ -501,6 +551,9 @@
|
|
|
501
551
|
:status="validationStatus" :disabled="disabledStatus" />
|
|
502
552
|
</div>
|
|
503
553
|
</div>
|
|
554
|
+
<output>
|
|
555
|
+
v-model: {{ radiobuttonValue }}
|
|
556
|
+
</output>
|
|
504
557
|
<!-- end checkboxes and radiobuttons -->
|
|
505
558
|
|
|
506
559
|
<!-- begin input-groups -->
|
|
@@ -513,55 +566,30 @@
|
|
|
513
566
|
labelText="Grouplabel for radio-group given by property:"
|
|
514
567
|
:inputElements="idForReplacedInputsInInputGroup('radio-group')" v-model="inputGroup">
|
|
515
568
|
</CmdInputGroup>
|
|
516
|
-
<
|
|
517
|
-
<dt>Selected value:</dt>
|
|
518
|
-
<dd>
|
|
519
|
-
<output>{{ inputGroup }}</output>
|
|
520
|
-
</dd>
|
|
521
|
-
</dl>
|
|
569
|
+
<output>v-model: {{ inputGroup }}</output>
|
|
522
570
|
<h3>Input Groups with Checkboxes/Radiobuttons (toggle-switches)</h3>
|
|
523
571
|
<CmdInputGroup labelText="Grouplabel for checkbox-group styled as toggle-switches (colored):"
|
|
524
572
|
:inputElements="idForReplacedInputsInInputGroup('checkbox-group-toggle-switch')"
|
|
525
573
|
inputTypes="checkbox" v-model="inputGroupValueToggleSwitchCheckbox" :toggleSwitches="true"
|
|
526
574
|
:colored="true" required="required" :status="validationStatus" :disabled="disabledStatus" />
|
|
527
|
-
<
|
|
528
|
-
<dt>Selected value(s):</dt>
|
|
529
|
-
<dd>
|
|
530
|
-
<output>{{ inputGroupValueToggleSwitchCheckbox }}</output>
|
|
531
|
-
</dd>
|
|
532
|
-
</dl>
|
|
575
|
+
<output>v-model: {{ inputGroupValueToggleSwitchCheckbox }}</output>
|
|
533
576
|
<CmdInputGroup labelText="Grouplabel for radio-group styled as toggle-switches:"
|
|
534
577
|
:inputElements="idForReplacedInputsInInputGroup('radio-group-toggle-switch')"
|
|
535
578
|
inputTypes="radio" v-model="inputGroupValueToggleSwitchRadio" :toggleSwitches="true"
|
|
536
579
|
required="required" :status="validationStatus" :disabled="disabledStatus" />
|
|
537
|
-
<
|
|
538
|
-
<dt>Selected value(s):</dt>
|
|
539
|
-
<dd>
|
|
540
|
-
<output>{{ inputGroupValueToggleSwitchRadio }}</output>
|
|
541
|
-
</dd>
|
|
542
|
-
</dl>
|
|
580
|
+
<output>v-model: {{ inputGroupValueToggleSwitchRadio }}</output>
|
|
543
581
|
<CmdInputGroup
|
|
544
582
|
labelText="Grouplabel for radio-group given by property styled as multiple-switch:"
|
|
545
583
|
:inputElements="idForReplacedInputsInInputGroup('radio-group-multiple-switch')"
|
|
546
584
|
inputTypes="radio" :multipleSwitch="true" v-model="inputGroupValue3"
|
|
547
585
|
:status="validationStatus" :disabled="disabledStatus" />
|
|
548
|
-
<
|
|
549
|
-
<dt>Selected value(s):</dt>
|
|
550
|
-
<dd>
|
|
551
|
-
<output>{{ inputGroupValue3 }}</output>
|
|
552
|
-
</dd>
|
|
553
|
-
</dl>
|
|
586
|
+
<output>v-model: {{ inputGroupValue3 }}</output>
|
|
554
587
|
<CmdInputGroup
|
|
555
588
|
labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally):"
|
|
556
589
|
:inputElements="inputGroupCheckboxes" inputTypes="checkbox" :multipleSwitch="true"
|
|
557
590
|
:required="true" v-model="inputGroupValue4" :stretchHorizontally="true"
|
|
558
591
|
:status="validationStatus" :disabled="disabledStatus" />
|
|
559
|
-
<
|
|
560
|
-
<dt>Selected value(s):</dt>
|
|
561
|
-
<dd>
|
|
562
|
-
<output>{{ inputGroupValue4 }}</output>
|
|
563
|
-
</dd>
|
|
564
|
-
</dl>
|
|
592
|
+
<output>v-model: {{ inputGroupValue4 }}</output>
|
|
565
593
|
</fieldset>
|
|
566
594
|
<!-- end fieldset -->
|
|
567
595
|
<div class="flex-container">
|
|
@@ -2087,6 +2115,8 @@ export default {
|
|
|
2087
2115
|
filters: ["2"],
|
|
2088
2116
|
switchButtonRadio: "radio1",
|
|
2089
2117
|
switchButtonCheckboxToggleSwitch: false,
|
|
2118
|
+
switchButtonCheckboxToggleSwitchRequired: false,
|
|
2119
|
+
switchButtonCheckboxToggleRequired: false,
|
|
2090
2120
|
switchButtonCheckboxToggleSwitchColored: false,
|
|
2091
2121
|
switchButtonCheckbox: ["checkbox1"],
|
|
2092
2122
|
switchButtonCheckboxColored: false,
|
|
@@ -2101,8 +2131,8 @@ export default {
|
|
|
2101
2131
|
componentSettings: {},
|
|
2102
2132
|
checkboxValue: true,
|
|
2103
2133
|
checkboxRequiredValue: false,
|
|
2104
|
-
|
|
2105
|
-
replacedCheckboxValue: "checkboxValue1",
|
|
2134
|
+
nativeCheckboxValues: ["checkboxValue1"],
|
|
2135
|
+
replacedCheckboxValue: ["checkboxValue1", "checkboxValue2"],
|
|
2106
2136
|
radiobuttonValue: "radiobuttonValue1",
|
|
2107
2137
|
replacedRadiobuttonValue: "radiobuttonValue1",
|
|
2108
2138
|
fakeSelectDefault: "",
|
|
@@ -2613,5 +2643,16 @@ export default {
|
|
|
2613
2643
|
display: block;
|
|
2614
2644
|
}
|
|
2615
2645
|
}
|
|
2646
|
+
|
|
2647
|
+
output {
|
|
2648
|
+
display: flex;
|
|
2649
|
+
align-self: flex-start;
|
|
2650
|
+
flex: none;
|
|
2651
|
+
padding: var(--default-padding);
|
|
2652
|
+
border: 1px dashed black;
|
|
2653
|
+
background: rgb(202, 192, 17);
|
|
2654
|
+
font-weight: bold;
|
|
2655
|
+
color: black;
|
|
2656
|
+
}
|
|
2616
2657
|
}
|
|
2617
2658
|
</style>
|
|
@@ -94,10 +94,8 @@
|
|
|
94
94
|
class="deleteicon"
|
|
95
95
|
href="#"
|
|
96
96
|
@click.prevent="deleteInput"
|
|
97
|
-
|
|
98
|
-
<!-- begin CmdIcon -->
|
|
97
|
+
:title="iconDelete?.tooltip">
|
|
99
98
|
<CmdIcon :iconClass="iconDelete?.iconClass" :type="iconDelete?.iconType"/>
|
|
100
|
-
<!-- end CmdIcon -->
|
|
101
99
|
</a>
|
|
102
100
|
<!-- end delete-icon -->
|
|
103
101
|
</template>
|
|
@@ -105,17 +103,15 @@
|
|
|
105
103
|
|
|
106
104
|
<!-- begin show-password-icon -->
|
|
107
105
|
<a v-if="$attrs.type === 'password'"
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
106
|
+
href="#"
|
|
107
|
+
class="place-inside"
|
|
108
|
+
@mousedown.prevent="showPassword"
|
|
109
|
+
@mouseup.prevent="hidePassword"
|
|
110
|
+
@mouseleave.prevent="hidePassword"
|
|
111
|
+
@click.prevent
|
|
112
|
+
:title="iconPasswordVisible.tooltip"
|
|
115
113
|
>
|
|
116
|
-
|
|
117
|
-
<CmdIcon :iconClass="iconPasswordVisible.iconClass"/>
|
|
118
|
-
<!-- end CmdIcon -->
|
|
114
|
+
<CmdIcon :iconClass="iconPasswordVisible.iconClass"/>
|
|
119
115
|
</a>
|
|
120
116
|
<!-- end show-password-icon -->
|
|
121
117
|
</span>
|
|
@@ -136,7 +132,6 @@
|
|
|
136
132
|
v-bind="elementAttributes"
|
|
137
133
|
@change="onChange"
|
|
138
134
|
@blur="onBlur"
|
|
139
|
-
@input="onInput"
|
|
140
135
|
:checked="isChecked"
|
|
141
136
|
:value="inputValue"
|
|
142
137
|
:class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType}]"
|
|
@@ -169,7 +164,7 @@
|
|
|
169
164
|
@blur="onBlur"
|
|
170
165
|
:checked="isChecked"
|
|
171
166
|
:value="inputValue"
|
|
172
|
-
:class="
|
|
167
|
+
:class="[inputClass, validationStatus]"
|
|
173
168
|
:id="htmlId"
|
|
174
169
|
:disabled="$attrs.disabled"
|
|
175
170
|
:aria-invalid="validationStatus === 'error'"
|
|
@@ -884,7 +879,7 @@ export default {
|
|
|
884
879
|
this.validateInput(event)
|
|
885
880
|
this.closeTooltipOnBlur()
|
|
886
881
|
this.$emit('blur', event)
|
|
887
|
-
},
|
|
882
|
+
},
|
|
888
883
|
onInput(event) {
|
|
889
884
|
this.validateInput(event)
|
|
890
885
|
this.$emit('update:modelValue', event.target.value)
|