comand-component-library 4.1.75 → 4.1.77
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 +2894 -2749
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/ComponentLibrary.vue +15 -0
- package/src/assets/data/image-gallery.json +1 -0
- package/src/assets/data/listOfComponents.json +1 -0
- package/src/assets/data/thumbnail-scroller-images.json +1 -0
- package/src/componentSettingsDataAndControls.vue +16 -0
- package/src/components/CmdListOfImages.vue +214 -0
- package/src/components/CmdTable.vue +36 -23
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div :class="['cmd-list-of-images',
|
|
3
|
+
{
|
|
4
|
+
box: styleAsBox
|
|
5
|
+
}
|
|
6
|
+
]">
|
|
7
|
+
<!-- begin cmd-headline -->
|
|
8
|
+
<CmdHeadline
|
|
9
|
+
v-if="cmdHeadline?.headlineText || editModeContext"
|
|
10
|
+
v-bind="cmdHeadline"
|
|
11
|
+
/>
|
|
12
|
+
<!-- end cmd-headline -->
|
|
13
|
+
|
|
14
|
+
<!-- begin list of images -->
|
|
15
|
+
<ul :class="['list-of-images', {vertical: orientation === 'vertical'}]">
|
|
16
|
+
<li v-for="(image, index) in images" :key="index">
|
|
17
|
+
<!-- begin CmdImage with link-->
|
|
18
|
+
<a v-if="image.image.url" href="#">
|
|
19
|
+
<CmdImage v-bind="image" />
|
|
20
|
+
</a>
|
|
21
|
+
<!-- end CmdImage with link-->
|
|
22
|
+
|
|
23
|
+
<!-- begin CmdImage without link-->
|
|
24
|
+
<CmdImage v-else v-bind="image" />
|
|
25
|
+
<!-- end CmdImage without link-->
|
|
26
|
+
</li>
|
|
27
|
+
<!-- end edit-mode -->
|
|
28
|
+
</ul>
|
|
29
|
+
<!-- end list of links -->
|
|
30
|
+
</div>
|
|
31
|
+
</template>
|
|
32
|
+
|
|
33
|
+
<script>
|
|
34
|
+
// import mixins (editMode only)
|
|
35
|
+
// import EditMode from "../mixins/EditMode.vue"
|
|
36
|
+
|
|
37
|
+
// import utils (editMode only)
|
|
38
|
+
// import {buildComponentPath, updateHandlerProvider} from "../utils/editmode.js"
|
|
39
|
+
|
|
40
|
+
export default {
|
|
41
|
+
name: "CmdListOfImages",
|
|
42
|
+
emits: ["click"],
|
|
43
|
+
// mixins: [EditMode],
|
|
44
|
+
props: {
|
|
45
|
+
/**
|
|
46
|
+
* style component like a box
|
|
47
|
+
*
|
|
48
|
+
* @affectsStyling: true
|
|
49
|
+
*/
|
|
50
|
+
styleAsBox: {
|
|
51
|
+
type: Boolean,
|
|
52
|
+
default: false
|
|
53
|
+
},
|
|
54
|
+
/**
|
|
55
|
+
* list of displayed images
|
|
56
|
+
*/
|
|
57
|
+
images: {
|
|
58
|
+
type: Array,
|
|
59
|
+
required: false
|
|
60
|
+
},
|
|
61
|
+
/**
|
|
62
|
+
* toggle orientation of list
|
|
63
|
+
*
|
|
64
|
+
* @allowedValues: horizontal, vertical
|
|
65
|
+
*/
|
|
66
|
+
orientation: {
|
|
67
|
+
type: String,
|
|
68
|
+
default: "vertical",
|
|
69
|
+
validator(value) {
|
|
70
|
+
return value === "horizontal" ||
|
|
71
|
+
value === "vertical"
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
/**
|
|
75
|
+
* properties for CmdHeadline-component
|
|
76
|
+
*/
|
|
77
|
+
cmdHeadline: {
|
|
78
|
+
type: Object,
|
|
79
|
+
required: false
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
methods: {
|
|
83
|
+
/*
|
|
84
|
+
onAddItem() {
|
|
85
|
+
this.editModeContext.content.addContent(
|
|
86
|
+
buildComponentPath(this, 'props', 'links', -1),
|
|
87
|
+
this.itemProvider)
|
|
88
|
+
},
|
|
89
|
+
itemProvider() {
|
|
90
|
+
return {
|
|
91
|
+
"iconClass": "icon-user-profile",
|
|
92
|
+
"type": "href",
|
|
93
|
+
"text": "Linktext",
|
|
94
|
+
"path": "#",
|
|
95
|
+
"tooltip": "Tooltip",
|
|
96
|
+
"target": "_blank"
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
updateHandlerProvider() {
|
|
100
|
+
return updateHandlerProvider(this, {
|
|
101
|
+
update(props, childUpdateHandlers) {
|
|
102
|
+
const cmdHeadlineUpdateHandler = childUpdateHandlers?.find(handler => handler.name === "CmdHeadline")
|
|
103
|
+
if (cmdHeadlineUpdateHandler) {
|
|
104
|
+
props.cmdHeadline = props.cmdHeadline || {}
|
|
105
|
+
cmdHeadlineUpdateHandler.update(props.cmdHeadline)
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
})
|
|
109
|
+
}
|
|
110
|
+
*/
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
</script>
|
|
114
|
+
|
|
115
|
+
<style>
|
|
116
|
+
/* begin cmd-list-of-links ---------------------------------------------------------------------------------------- */
|
|
117
|
+
.cmd-list-of-links {
|
|
118
|
+
> ul {
|
|
119
|
+
flex-direction: column;
|
|
120
|
+
gap: calc(var(--default-gap) / 2);
|
|
121
|
+
margin: 0;
|
|
122
|
+
|
|
123
|
+
li {
|
|
124
|
+
list-style: none;
|
|
125
|
+
margin-left: 0 !important; /* overwrite default-settings from frontend-framework */
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
&.align-center {
|
|
129
|
+
justify-content: center;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
&.align-right li {
|
|
133
|
+
text-align: right;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
ul {
|
|
137
|
+
display: flex;
|
|
138
|
+
flex-direction: column;
|
|
139
|
+
margin-left: calc(var(--default-padding) * 2);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
&.show-list-style-items {
|
|
144
|
+
li {
|
|
145
|
+
list-style-type: disc;
|
|
146
|
+
margin-left: 1.7rem;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
&.horizontal {
|
|
151
|
+
> ul {
|
|
152
|
+
gap: var(--default-gap);
|
|
153
|
+
flex-direction: row;
|
|
154
|
+
|
|
155
|
+
> li {
|
|
156
|
+
flex: none;
|
|
157
|
+
display: flex;
|
|
158
|
+
flex-direction: column;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
&.align-right {
|
|
162
|
+
justify-content: flex-end;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
&.stretch {
|
|
166
|
+
justify-content: space-around;
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
&.large-icons {
|
|
173
|
+
li {
|
|
174
|
+
list-style-type: none;
|
|
175
|
+
|
|
176
|
+
a {
|
|
177
|
+
display: flex;
|
|
178
|
+
flex-direction: column;
|
|
179
|
+
gap: calc(var(--default-gap) / 4);
|
|
180
|
+
text-decoration: none;
|
|
181
|
+
align-items: center;
|
|
182
|
+
justify-content: center;
|
|
183
|
+
|
|
184
|
+
span {
|
|
185
|
+
margin: 0;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
[class*="icon-"] {
|
|
189
|
+
font-size: 5rem;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
</style>
|
|
196
|
+
|
|
197
|
+
<style lang="scss">
|
|
198
|
+
@import '../assets/styles/variables';
|
|
199
|
+
|
|
200
|
+
@media only screen and (max-width: $medium-max-width) {
|
|
201
|
+
.cmd-list-of-links {
|
|
202
|
+
> ul {
|
|
203
|
+
ul {
|
|
204
|
+
gap: calc(var(--default-gap) / 2);
|
|
205
|
+
|
|
206
|
+
> li:first-child {
|
|
207
|
+
margin-top: calc(var(--default-gap) / 2);
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
/* end cmd-list-of-links------------------------------------------------------------------------------------------ */
|
|
214
|
+
</style>
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
<div
|
|
3
3
|
:class="['cmd-table-wrapper', {'collapsed': !showTableData, 'full-width': fullWidth, 'has-caption': hasCaption, 'has-overflow': hasOverflow}]">
|
|
4
4
|
<div v-if="collapsible || userCanToggleWidth" class="button-wrapper">
|
|
5
|
+
<!-- begin button to toggle table-width -->
|
|
5
6
|
<a v-if="userCanToggleWidth" class="button"
|
|
6
7
|
href="#" @click.prevent="fullWidth = !fullWidth"
|
|
7
8
|
:title="iconToggleWidth.tooltip"
|
|
@@ -10,6 +11,9 @@
|
|
|
10
11
|
<CmdIcon :iconClass="iconToggleWidth.iconClass" :type="iconToggleWidth.iconType"/>
|
|
11
12
|
<!-- end CmdIcon -->
|
|
12
13
|
</a>
|
|
14
|
+
<!-- end button to toggle table-width -->
|
|
15
|
+
|
|
16
|
+
<!-- begin button to collapse table-content -->
|
|
13
17
|
<a v-if="collapsible" class="button"
|
|
14
18
|
href="#" @click.prevent="showTableData = !showTableData"
|
|
15
19
|
:title="showTableData ? iconCollapse.tooltip : iconExpand.tooltip"
|
|
@@ -19,6 +23,7 @@
|
|
|
19
23
|
:type="showTableData ? iconCollapse.iconType : iconExpand.iconType"/>
|
|
20
24
|
<!-- end CmdIcon -->
|
|
21
25
|
</a>
|
|
26
|
+
<!-- end button to collapse table-content -->
|
|
22
27
|
</div>
|
|
23
28
|
<div class="inner-wrapper" ref="innerWrapper" @scroll="updatePosition">
|
|
24
29
|
<!-- begin CmdSlideButton -->
|
|
@@ -31,32 +36,40 @@
|
|
|
31
36
|
|
|
32
37
|
<!-- begin table -->
|
|
33
38
|
<table ref="table" :class="{'full-width': fullWidth}">
|
|
34
|
-
<
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
39
|
+
<slot name="table-caption">
|
|
40
|
+
<caption v-if="tableData.caption?.text || caption?.text" :class="{ hidden: hideCaption }">
|
|
41
|
+
{{ caption?.text || tableData.caption?.text }}
|
|
42
|
+
</caption>
|
|
43
|
+
</slot>
|
|
44
|
+
<slot name="table-head">
|
|
45
|
+
<thead>
|
|
46
|
+
<tr>
|
|
47
|
+
<th v-for="(tablehead, indexHead) in tableData.thead" :key="indexHead" v-html="tablehead"></th>
|
|
48
|
+
</tr>
|
|
49
|
+
</thead>
|
|
50
|
+
</slot>
|
|
42
51
|
<transition :name="useTransition ? 'fade' : null">
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
52
|
+
<slot name="table-body">
|
|
53
|
+
<tbody v-show="showTableData" aria-expanded="true">
|
|
54
|
+
<tr :class="{'active' : tableData.rowIndexHighlighted === indexRows}"
|
|
55
|
+
v-for="(tablerows, indexRows) in tableData.tbody" :key="indexRows">
|
|
56
|
+
<td :class="{'active' : tableData.columnIndexHighlighted === indexData}"
|
|
57
|
+
v-for="(tabledata, indexData) in tablerows" :key="indexData" v-html="tabledata">
|
|
58
|
+
</td>
|
|
59
|
+
</tr>
|
|
60
|
+
</tbody>
|
|
61
|
+
</slot>
|
|
51
62
|
</transition>
|
|
52
63
|
<transition :name="useTransition ? 'fade' : null">
|
|
53
|
-
<
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
64
|
+
<slot name="table-foot">
|
|
65
|
+
<tfoot v-if="tableData.tfoot && tableData.tfoot.length && showTableData" aria-expanded="true">
|
|
66
|
+
<tr>
|
|
67
|
+
<td :class="{'active' : tableData.columnIndexHighlighted === indexFoot}"
|
|
68
|
+
v-for="(tablefoot, indexFoot) in tableData.tfoot" :key="indexFoot" v-html="tablefoot">
|
|
69
|
+
</td>
|
|
70
|
+
</tr>
|
|
71
|
+
</tfoot>
|
|
72
|
+
</slot>
|
|
60
73
|
</transition>
|
|
61
74
|
</table>
|
|
62
75
|
<!-- end table -->
|