comand-component-library 4.2.10 → 4.2.11
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/dist/comand-component-library.js +265 -251
- package/dist/style.css +1 -1
- package/package.json +3 -2
- package/src/ComponentLibrary.vue +3 -2
- package/src/assets/lists-of-data/.htaccess +1 -1
- package/src/assets/lists-of-data/casual-01.json +1 -1
- package/src/assets/lists-of-data/founder-01.json +111 -0
- package/src/assets/lists-of-data/investor-01.json +114 -0
- package/src/components/CmdFakeSelect.vue +5 -5
- package/src/components/CmdInputGroup.vue +3 -4
- package/src/components/CmdListOfRequirements.vue +6 -6
- package/src/components/CmdTooltip.vue +16 -2
- package/src/main.js +5 -1
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
{
|
|
2
|
+
"person": {
|
|
3
|
+
"id": 1,
|
|
4
|
+
"type": "founder",
|
|
5
|
+
"imgSrc": "https://comand-ui.com/samples/images/user-images/fake-user-6.jpg",
|
|
6
|
+
"bgImgSrc": "/images/background-images/background-abstract-1.jpg",
|
|
7
|
+
"lastName": "Founder",
|
|
8
|
+
"middleName": "",
|
|
9
|
+
"firstName": "Michael",
|
|
10
|
+
"birthdate": "1985-08-12",
|
|
11
|
+
"gender": "m",
|
|
12
|
+
"profession": "Marketing",
|
|
13
|
+
"countryIso": "de",
|
|
14
|
+
"companyName": "The Next Unicorn Inc.",
|
|
15
|
+
"about": "Making the world better step by step!",
|
|
16
|
+
"group": "Friends"
|
|
17
|
+
},
|
|
18
|
+
"account": {
|
|
19
|
+
"online": true,
|
|
20
|
+
"type": "premium",
|
|
21
|
+
"created": "2023-03-17"
|
|
22
|
+
},
|
|
23
|
+
"tags": [
|
|
24
|
+
{
|
|
25
|
+
"name": "Marketing"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"name": "Sales"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"name": "Procurement"
|
|
32
|
+
}
|
|
33
|
+
],
|
|
34
|
+
"contact": [
|
|
35
|
+
{
|
|
36
|
+
"name": "companyName",
|
|
37
|
+
"iconClass": "icon-company",
|
|
38
|
+
"data": "Your company name",
|
|
39
|
+
"labelText": "companyName"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"name": "address",
|
|
43
|
+
"iconClass": "icon-location-set",
|
|
44
|
+
"labelText": "Address",
|
|
45
|
+
"streetNo": "Your Street/No",
|
|
46
|
+
"zip": "Your zip",
|
|
47
|
+
"city": "Grevenbroich",
|
|
48
|
+
"miscInfo": "Misc. info",
|
|
49
|
+
"country": "de",
|
|
50
|
+
"tooltip": "Open address on GoogleMaps™ (in new tab)"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"name": "phone",
|
|
54
|
+
"iconClass": "icon-phone",
|
|
55
|
+
"data": "Your phone number",
|
|
56
|
+
"labelText": "Telephone",
|
|
57
|
+
"tooltip": "Call number",
|
|
58
|
+
"href": "00492181818123"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"name": "phone",
|
|
62
|
+
"iconClass": "icon-device-smartphone",
|
|
63
|
+
"data": "Your mobile phone number",
|
|
64
|
+
"labelText": "Mobile phone",
|
|
65
|
+
"tooltip": "Call number",
|
|
66
|
+
"href": "00491721055725"
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"name": "email",
|
|
70
|
+
"iconClass": "icon-mail",
|
|
71
|
+
"data": "Your email address",
|
|
72
|
+
"labelText": "Email",
|
|
73
|
+
"tooltip": "Send mail",
|
|
74
|
+
"href": "biock@biock.com"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"name": "url",
|
|
78
|
+
"iconClass": "icon-globe",
|
|
79
|
+
"data": "Your web site",
|
|
80
|
+
"labelText": "Web site",
|
|
81
|
+
"tooltip": "Open website in browser",
|
|
82
|
+
"href": "https://www.biock.com"
|
|
83
|
+
}
|
|
84
|
+
],
|
|
85
|
+
"networks": [
|
|
86
|
+
{
|
|
87
|
+
"buttonClass": "social-network-facebook",
|
|
88
|
+
"iconClass": "icon-facebook",
|
|
89
|
+
"type": "href",
|
|
90
|
+
"path": "https://www.facebook.com",
|
|
91
|
+
"target": "_blank",
|
|
92
|
+
"tooltip": "Visit profile on facebook"
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"buttonClass": "social-network-x",
|
|
96
|
+
"iconClass": "icon-x",
|
|
97
|
+
"type": "href",
|
|
98
|
+
"path": "https://www.twitter.com",
|
|
99
|
+
"target": "_blank",
|
|
100
|
+
"tooltip": "Visit profile on X"
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"buttonClass": "social-network-linkedin",
|
|
104
|
+
"iconClass": "icon-linkedin",
|
|
105
|
+
"type": "href",
|
|
106
|
+
"path": "https://www.linkedin.com",
|
|
107
|
+
"target": "_blank",
|
|
108
|
+
"tooltip": "Visit profile on linkedin"
|
|
109
|
+
}
|
|
110
|
+
]
|
|
111
|
+
}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
{
|
|
2
|
+
"person": {
|
|
3
|
+
"id": 1,
|
|
4
|
+
"type": "investor",
|
|
5
|
+
"imgSrc": "/images/user-images/fake-user-1.jpg",
|
|
6
|
+
"bgImgSrc": "/images/background-images/golden-gate-bridge.jpg",
|
|
7
|
+
"imgStyle": "color",
|
|
8
|
+
"lastName": "Investor",
|
|
9
|
+
"middleName": "",
|
|
10
|
+
"firstName": "Julia",
|
|
11
|
+
"birthdate": "1980-12-22",
|
|
12
|
+
"gender": "f",
|
|
13
|
+
"countryIso": "de",
|
|
14
|
+
"gmt": "+1",
|
|
15
|
+
"profession": "Owner",
|
|
16
|
+
"companyName": "VC Investments",
|
|
17
|
+
"companyLink": "",
|
|
18
|
+
"about": "I am a great investor!"
|
|
19
|
+
},
|
|
20
|
+
"account": {
|
|
21
|
+
"online": true,
|
|
22
|
+
"type": "premium",
|
|
23
|
+
"isMyAccount": true,
|
|
24
|
+
"created": "2023-03-18"
|
|
25
|
+
},
|
|
26
|
+
"tags": [
|
|
27
|
+
{
|
|
28
|
+
"name": "Trainings"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"name": "Investment"
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"name": "Fundings"
|
|
35
|
+
}
|
|
36
|
+
],
|
|
37
|
+
"contact": [
|
|
38
|
+
{
|
|
39
|
+
"name": "companyName",
|
|
40
|
+
"iconClass": "icon-company",
|
|
41
|
+
"data": "Your company name",
|
|
42
|
+
"labelText": "companyName"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"name": "address",
|
|
46
|
+
"iconClass": "icon-location-set",
|
|
47
|
+
"labelText": "Address",
|
|
48
|
+
"streetNo": "Your Street/No",
|
|
49
|
+
"zip": "Your zip",
|
|
50
|
+
"city": "San Francisco",
|
|
51
|
+
"miscInfo": "Misc. info",
|
|
52
|
+
"country": "de",
|
|
53
|
+
"tooltip": "Open address on GoogleMaps™ (in new tab)"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"name": "phone",
|
|
57
|
+
"iconClass": "icon-phone",
|
|
58
|
+
"data": "Your phone number",
|
|
59
|
+
"labelText": "Telephone",
|
|
60
|
+
"tooltip": "Call number",
|
|
61
|
+
"href": "00492181818123"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"name": "phone",
|
|
65
|
+
"iconClass": "icon-device-smartphone",
|
|
66
|
+
"data": "Your mobile phone number",
|
|
67
|
+
"labelText": "Mobile phone",
|
|
68
|
+
"tooltip": "Call number",
|
|
69
|
+
"href": "00491721055725"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"name": "email",
|
|
73
|
+
"iconClass": "icon-mail",
|
|
74
|
+
"data": "Your email address",
|
|
75
|
+
"labelText": "Email",
|
|
76
|
+
"tooltip": "Send mail",
|
|
77
|
+
"href": "biock@biock.com"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"name": "url",
|
|
81
|
+
"iconClass": "icon-globe",
|
|
82
|
+
"data": "Your web site",
|
|
83
|
+
"labelText": "Web site",
|
|
84
|
+
"tooltip": "Open website in browser",
|
|
85
|
+
"href": "https://www.biock.com"
|
|
86
|
+
}
|
|
87
|
+
],
|
|
88
|
+
"networks": [
|
|
89
|
+
{
|
|
90
|
+
"buttonClass": "social-network-facebook",
|
|
91
|
+
"iconClass": "icon-facebook",
|
|
92
|
+
"type": "href",
|
|
93
|
+
"path": "https://www.facebook.com",
|
|
94
|
+
"target": "_blank",
|
|
95
|
+
"tooltip": "Visit profile on facebook"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"buttonClass": "social-network-x",
|
|
99
|
+
"iconClass": "icon-x",
|
|
100
|
+
"type": "href",
|
|
101
|
+
"path": "https://www.twitter.com",
|
|
102
|
+
"target": "_blank",
|
|
103
|
+
"tooltip": "Visit profile on X"
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
"buttonClass": "social-network-linkedin",
|
|
107
|
+
"iconClass": "icon-linkedin",
|
|
108
|
+
"type": "href",
|
|
109
|
+
"path": "https://www.linkedin.com",
|
|
110
|
+
"target": "_blank",
|
|
111
|
+
"tooltip": "Visit profile on linkedin"
|
|
112
|
+
}
|
|
113
|
+
]
|
|
114
|
+
}
|
|
@@ -359,11 +359,11 @@ export default {
|
|
|
359
359
|
|
|
360
360
|
// set default-tooltip if customTooltip is not set
|
|
361
361
|
if (this.validationStatus === 'error') {
|
|
362
|
-
return this.getMessage("
|
|
362
|
+
return this.getMessage("form_element.validation_tooltip.an_error_occurred")
|
|
363
363
|
} else if (this.validationStatus === 'success') {
|
|
364
|
-
return this.getMessage("
|
|
364
|
+
return this.getMessage("form_element.validation_tooltip.information_is_filled_correctly")
|
|
365
365
|
}
|
|
366
|
-
return this.getMessage("
|
|
366
|
+
return this.getMessage("form_element.validation_tooltip.open_field_requirements")
|
|
367
367
|
},
|
|
368
368
|
// get the displayed option name
|
|
369
369
|
optionName() {
|
|
@@ -540,7 +540,7 @@ export default {
|
|
|
540
540
|
text-decoration: none !important;
|
|
541
541
|
|
|
542
542
|
&[class*="icon"]:last-child {
|
|
543
|
-
margin-left: auto !important;
|
|
543
|
+
margin-left: auto !important; /* overwrite default settings from frontend-framework */
|
|
544
544
|
}
|
|
545
545
|
}
|
|
546
546
|
}
|
|
@@ -579,7 +579,7 @@ export default {
|
|
|
579
579
|
}
|
|
580
580
|
|
|
581
581
|
> [class*="icon-"]:last-child {
|
|
582
|
-
margin-left: auto;
|
|
582
|
+
margin-left: auto !important; /* overwrite default settings from frontend-framework */
|
|
583
583
|
font-size: var(--icon-size-small);
|
|
584
584
|
}
|
|
585
585
|
|
|
@@ -272,11 +272,11 @@ export default {
|
|
|
272
272
|
|
|
273
273
|
// set default-tooltip if customTooltip is not set
|
|
274
274
|
if (this.validationStatus === 'error') {
|
|
275
|
-
return this.getMessage("
|
|
275
|
+
return this.getMessage("form_element.validation_tooltip.an_error_occurred")
|
|
276
276
|
} else if (this.validationStatus === 'success') {
|
|
277
|
-
return this.getMessage("
|
|
277
|
+
return this.getMessage("form_element.validation_tooltip.information_is_filled_correctly")
|
|
278
278
|
}
|
|
279
|
-
return this.getMessage("
|
|
279
|
+
return this.getMessage("form_element.validation_tooltip.open_field_requirements")
|
|
280
280
|
},
|
|
281
281
|
inputValue: {
|
|
282
282
|
// read inputValue
|
|
@@ -322,7 +322,6 @@ export default {
|
|
|
322
322
|
/* overwrite default behavior from frontend-framework */
|
|
323
323
|
> .label-text {
|
|
324
324
|
display: inline-flex;
|
|
325
|
-
margin: 0;
|
|
326
325
|
|
|
327
326
|
> span + a:has([class*="icon-"]) {
|
|
328
327
|
margin-left: calc(var(--default-margin) / 2);
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<div class="cmd-list-of-requirements">
|
|
3
3
|
<!-- begin CmdHeadline -->
|
|
4
4
|
<CmdHeadline v-if="showHeadline" :headline-level="cmdHeadline.headlineLevel">
|
|
5
|
-
{{ headlineRequirements }}<template v-if="labelText"><br
|
|
5
|
+
{{ headlineRequirements }}<template v-if="labelText"><br/>"{{ labelText }}"</template>
|
|
6
6
|
</CmdHeadline>
|
|
7
7
|
<!-- end CmdHeadline -->
|
|
8
8
|
|
|
@@ -159,22 +159,22 @@ export default {
|
|
|
159
159
|
}
|
|
160
160
|
|
|
161
161
|
.error, .error span {
|
|
162
|
-
--status-color: var(--error-color);
|
|
162
|
+
--status-color: var(--error-color) !important; /* assure status-color is not overwritten by form-element-status */
|
|
163
163
|
}
|
|
164
164
|
|
|
165
165
|
.warning, .warning span {
|
|
166
|
-
--status-color: var(--warning-color);
|
|
166
|
+
--status-color: var(--warning-color) !important; /* assure status-color is not overwritten by form-element-status */
|
|
167
167
|
}
|
|
168
168
|
|
|
169
169
|
.success, .success span {
|
|
170
|
-
--status-color: var(--success-color);
|
|
170
|
+
--status-color: var(--success-color) !important; /* assure status-color is not overwritten by form-element-status */
|
|
171
171
|
}
|
|
172
172
|
|
|
173
173
|
.info, .info span {
|
|
174
|
-
--status-color: var(--info-color);
|
|
174
|
+
--status-color: var(--info-color) !important; /* assure status-color is not overwritten by form-element-status */
|
|
175
175
|
}
|
|
176
176
|
|
|
177
|
-
dt {
|
|
177
|
+
dt, dt span[class*="icon-"] {
|
|
178
178
|
color: var(--status-color);
|
|
179
179
|
}
|
|
180
180
|
|
|
@@ -36,6 +36,11 @@ export default {
|
|
|
36
36
|
pointerY: 0
|
|
37
37
|
}
|
|
38
38
|
},
|
|
39
|
+
inject: {
|
|
40
|
+
injectScrollContainer: {
|
|
41
|
+
default: ""
|
|
42
|
+
}
|
|
43
|
+
},
|
|
39
44
|
props: {
|
|
40
45
|
/**
|
|
41
46
|
* properties for CmdHeadline-component
|
|
@@ -119,8 +124,17 @@ export default {
|
|
|
119
124
|
const relatedElement = document.getElementById(this.relatedId)
|
|
120
125
|
|
|
121
126
|
if (relatedElement) {
|
|
122
|
-
|
|
123
|
-
|
|
127
|
+
const scrollContainerSelector = this.injectScrollContainer || this.scrollContainer
|
|
128
|
+
|
|
129
|
+
if (scrollContainerSelector) {
|
|
130
|
+
const scrollContainerElement = document.querySelector(scrollContainerSelector)
|
|
131
|
+
|
|
132
|
+
if(scrollContainerElement) {
|
|
133
|
+
scrollContainerElement.addEventListener("scroll", this.hideTooltip) // avoid fixed tooltip on scroll
|
|
134
|
+
} else {
|
|
135
|
+
console.warn( "'CmdTooltip-Component': Element accessed by " + scrollContainerSelector + " does not exist! Please provide selector for an existing element!")
|
|
136
|
+
}
|
|
137
|
+
|
|
124
138
|
document.addEventListener("keyup", this.hideTooltipOnEsc) // close tooltip by using "escape"-key
|
|
125
139
|
}
|
|
126
140
|
|
package/src/main.js
CHANGED
|
@@ -43,4 +43,8 @@ import router from "./router"
|
|
|
43
43
|
// })
|
|
44
44
|
|
|
45
45
|
// createApp(App).use(router).directive('telephone', directiveTelephone).directive('focus', directiveFocus).mount('#app')
|
|
46
|
-
createApp(ComponentLibrary)
|
|
46
|
+
createApp(ComponentLibrary)
|
|
47
|
+
.use(router).directive('telephone', directiveTelephone)
|
|
48
|
+
.directive('focus', directiveFocus)
|
|
49
|
+
.directive('fancybox', directiveFancybox)
|
|
50
|
+
.mount('#app')
|