comand-component-library 4.2.65 → 4.2.68
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 +1547 -1499
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/ComponentLibrary.vue +5 -5
- package/src/assets/data/form-elements.json +29 -24
- package/src/components/CmdBasicForm.vue +1 -1
- package/src/components/CmdCompanyLogo.vue +1 -0
- package/src/components/CmdContainer.vue +13 -1
- package/src/components/CmdFancyBox.vue +1 -1
- package/src/components/CmdForm.vue +35 -0
- package/src/components/CmdMainNavigation.vue +1 -0
- package/src/components/CmdOpeningHoursItem.vue +39 -39
- package/src/components/CmdSiteHeader.vue +0 -1
- package/src/components/CmdUploadForm.vue +2 -2
- package/src/components/EditComponentWrapper.vue +2 -2
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
ref="form"
|
|
18
18
|
class="flex-container flex-direction-column"
|
|
19
19
|
>
|
|
20
|
-
<div v-if="configuration.salutation" class="flex-container flex-none row-for-small order-male-female">
|
|
20
|
+
<div v-if="configuration.salutation" class="flex-container flex-items-flex-none row-for-small order-male-female">
|
|
21
21
|
<!-- begin cmd-form-element -->
|
|
22
22
|
<CmdFormElement
|
|
23
23
|
element="input"
|
|
@@ -58,12 +58,21 @@ export default {
|
|
|
58
58
|
type: Boolean,
|
|
59
59
|
default: true
|
|
60
60
|
},
|
|
61
|
+
/**
|
|
62
|
+
* activate if container itself should not be handled as a flex-item by its parent
|
|
63
|
+
*
|
|
64
|
+
* @affectsStyling: true
|
|
65
|
+
*/
|
|
66
|
+
flexNone: {
|
|
67
|
+
type: Boolean,
|
|
68
|
+
default: false
|
|
69
|
+
},
|
|
61
70
|
/**
|
|
62
71
|
* activate if items should not behave like flex-items (they are now shrunk to their content)
|
|
63
72
|
*
|
|
64
73
|
* @affectsStyling: true
|
|
65
74
|
*/
|
|
66
|
-
|
|
75
|
+
flexItemsFlexNone: {
|
|
67
76
|
type: Boolean,
|
|
68
77
|
default: false
|
|
69
78
|
},
|
|
@@ -132,6 +141,9 @@ export default {
|
|
|
132
141
|
if (this.flexNone) {
|
|
133
142
|
htmlClasses.push("flex-none")
|
|
134
143
|
}
|
|
144
|
+
if (this.flexItemsFlexNone) {
|
|
145
|
+
htmlClasses.push("flex-items-flex-none")
|
|
146
|
+
}
|
|
135
147
|
if (this.alignItems) {
|
|
136
148
|
htmlClasses.push("align-items-" + this.alignItems)
|
|
137
149
|
}
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
<!-- end slot-content -->
|
|
93
93
|
</div>
|
|
94
94
|
</div>
|
|
95
|
-
<footer v-if="showSubmitButtons && fancyBoxOptionsProperties.submitButtons" class="flex-container flex-none">
|
|
95
|
+
<footer v-if="showSubmitButtons && fancyBoxOptionsProperties.submitButtons" class="flex-container flex-items-flex-none">
|
|
96
96
|
<!-- begin cancel-button -->
|
|
97
97
|
<button
|
|
98
98
|
v-if="fancyBoxOptionsProperties.submitButtons?.cancel"
|
|
@@ -43,6 +43,41 @@
|
|
|
43
43
|
:labelText="item.labelText"
|
|
44
44
|
:inputElements="item.inputElements"
|
|
45
45
|
/>
|
|
46
|
+
<div
|
|
47
|
+
v-else-if="item.component === 'flexContainer'"
|
|
48
|
+
class="flex-container"
|
|
49
|
+
>
|
|
50
|
+
<template v-for="(item, index) in item.formElements" :key="index">
|
|
51
|
+
<CmdFormElement
|
|
52
|
+
v-if="!item.component || item.component === 'CmdFormElement'"
|
|
53
|
+
:key="index"
|
|
54
|
+
:element="item.element || 'input'"
|
|
55
|
+
:type="item.type || 'text'"
|
|
56
|
+
:name="item.name"
|
|
57
|
+
:class="item.htmlClass"
|
|
58
|
+
:id="item.id || createHtmlId()"
|
|
59
|
+
v-model="formValues[item.name]"
|
|
60
|
+
:inputValue="item.inputValue"
|
|
61
|
+
:fieldIconClass="item.innerIconClass"
|
|
62
|
+
:selectOptions="item.selectOptions"
|
|
63
|
+
:labelText="item.labelText"
|
|
64
|
+
:placeholder="item.placeholder"
|
|
65
|
+
:required="item.required"
|
|
66
|
+
:disabled="item.disabled"
|
|
67
|
+
:autocomplete="item.autocomplete"
|
|
68
|
+
:minlength="item.minlength"
|
|
69
|
+
:maxlength="item.maxlength"
|
|
70
|
+
:nativeButton="item.nativeButton"
|
|
71
|
+
@validation-status-change="formElementHasError($event, item.name)"
|
|
72
|
+
/>
|
|
73
|
+
<CmdInputGroup
|
|
74
|
+
v-else-if="item.component === 'CmdInputGroup'"
|
|
75
|
+
v-model="formValues[item.name]"
|
|
76
|
+
:labelText="item.labelText"
|
|
77
|
+
:inputElements="item.inputElements"
|
|
78
|
+
/>
|
|
79
|
+
</template>
|
|
80
|
+
</div>
|
|
46
81
|
</template>
|
|
47
82
|
<!-- end loop for formElements -->
|
|
48
83
|
|
|
@@ -35,49 +35,49 @@
|
|
|
35
35
|
<!-- begin hours -->
|
|
36
36
|
<dd class="flex-container flex-none">
|
|
37
37
|
<!-- begin AM -->
|
|
38
|
-
<div class="flex-container flex-none am-wrapper">
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
38
|
+
<div class="flex-container flex-items-flex-none am-wrapper">
|
|
39
|
+
<template v-if="editableDay.amClosed">
|
|
40
|
+
<CmdFormElement
|
|
41
|
+
element="input"
|
|
42
|
+
type="text"
|
|
43
|
+
class="edit-mode"
|
|
44
|
+
:showLabel="false"
|
|
45
|
+
labelText="Text for 'closed'"
|
|
46
|
+
placeholder="Text for 'closed'"
|
|
47
|
+
v-model="editableDay.amDisplayText"
|
|
48
|
+
/>
|
|
49
|
+
</template>
|
|
50
|
+
<div v-if="!editableDay.amClosed" class="input-wrapper">
|
|
51
|
+
<CmdFormElement
|
|
52
|
+
element="input"
|
|
53
|
+
type="time"
|
|
54
|
+
class="edit-mode"
|
|
55
|
+
:showLabel="false"
|
|
56
|
+
labelText="Text for AM from"
|
|
57
|
+
placeholder="Text for AM from"
|
|
58
|
+
v-model="editableDay.amFrom"
|
|
59
|
+
/>
|
|
60
|
+
<CmdFormElement
|
|
61
|
+
element="input"
|
|
62
|
+
type="time"
|
|
63
|
+
:showLabel="false"
|
|
64
|
+
class="edit-mode"
|
|
65
|
+
:min="editableDay.amFrom"
|
|
66
|
+
labelText="Text for AM till"
|
|
67
|
+
placeholder="Text for AM till"
|
|
68
|
+
v-model="editableDay.amTill"
|
|
69
|
+
/>
|
|
70
|
+
</div>
|
|
71
|
+
<a href="#"
|
|
72
|
+
@click.prevent="toggleClosedStatus('am')"
|
|
73
|
+
:title="editableDay.amClosed ? 'Set to open' : 'Set to closed'"
|
|
74
|
+
:class="editableDay.amClosed ? 'icon-clock' : 'icon-blocked'"
|
|
75
|
+
></a>
|
|
76
76
|
</div>
|
|
77
77
|
<!-- end AM -->
|
|
78
78
|
|
|
79
79
|
<!-- begin PM -->
|
|
80
|
-
<div class="flex-container flex-none pm-wrapper">
|
|
80
|
+
<div class="flex-container flex-items-flex-none pm-wrapper">
|
|
81
81
|
<template v-if="editableDay.pmClosed">
|
|
82
82
|
<CmdFormElement
|
|
83
83
|
element="input"
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
<!-- end CmdHeadline -->
|
|
47
47
|
|
|
48
48
|
<ul v-if="showTotalUpload && listOfFiles.length !== 1" class="list-of-files total-files">
|
|
49
|
-
<li class="flex-container flex-none">
|
|
49
|
+
<li class="flex-container flex-items-flex-none">
|
|
50
50
|
<a
|
|
51
51
|
href="#"
|
|
52
52
|
:title="getMessage('upload_form.labeltext.remove_all_files_from_list')"
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
<li
|
|
99
99
|
v-for="(uploadFile, index) in listOfFiles"
|
|
100
100
|
:key="index"
|
|
101
|
-
class="flex-container flex-none"
|
|
101
|
+
class="flex-container flex-items-flex-none"
|
|
102
102
|
>
|
|
103
103
|
<a
|
|
104
104
|
href="#"
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
:data-identifier="componentIdentifier">
|
|
10
10
|
<li v-if="componentTag === 'ul'" class="action-buttons-wrapper">
|
|
11
11
|
<!-- begin action-buttons -->
|
|
12
|
-
<ul v-show="active" class="flex-container flex-none action-buttons" :data-component="componentName">
|
|
12
|
+
<ul v-show="active" class="flex-container flex-items-flex-none action-buttons" :data-component="componentName">
|
|
13
13
|
<!-- begin add -->
|
|
14
14
|
<li>
|
|
15
15
|
<a :class="['icon-hexagon button confirm', {disabled: !addHandlerProvider && !itemProvider && !allowAddComponent}]"
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
<!-- begin action-buttons -->
|
|
80
80
|
<p v-if="isOuterComponent" class="component-name">{{ componentName }}</p>
|
|
81
81
|
<ul v-show="active"
|
|
82
|
-
class="flex-container flex-none action-buttons"
|
|
82
|
+
class="flex-container flex-items-flex-none action-buttons"
|
|
83
83
|
:data-component="componentName"
|
|
84
84
|
@mouseenter="addHighlightRelatedComponent"
|
|
85
85
|
@mouseleave="removeHighlightRelatedComponent">
|