comand-component-library 4.2.50 → 4.2.51
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 +1294 -1262
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/ComponentLibrary.vue +532 -1254
- package/src/assets/data/list-of-tags.json +1 -1
- package/src/assets/data/listOfComponents.json +1 -1
- package/src/components/CmdList.vue +47 -2
|
@@ -77,8 +77,21 @@
|
|
|
77
77
|
|
|
78
78
|
<!-- begin tags -->
|
|
79
79
|
<template v-if="listType === 'tags'">
|
|
80
|
-
<li v-for="(tag, index) in
|
|
81
|
-
<small class="tag">
|
|
80
|
+
<li v-for="(tag, index) in listOfTagItems" :key="index">
|
|
81
|
+
<small class="tag flex-container">
|
|
82
|
+
<span>{{ tag }}</span>
|
|
83
|
+
<!-- begin icon 'remove tag' -->
|
|
84
|
+
<a v-if="iconRemoveTag.show"
|
|
85
|
+
href="#"
|
|
86
|
+
@click.prevent="removeTag(index)"
|
|
87
|
+
:title="iconRemoveTag.tooltip"
|
|
88
|
+
class="flex-none"
|
|
89
|
+
>
|
|
90
|
+
<span :class="iconRemoveTag.iconClass"></span>
|
|
91
|
+
</a>
|
|
92
|
+
<!-- end icon 'remove tag' -->
|
|
93
|
+
</small>
|
|
94
|
+
|
|
82
95
|
</li>
|
|
83
96
|
</template>
|
|
84
97
|
<!-- end tags -->
|
|
@@ -98,6 +111,11 @@ export default {
|
|
|
98
111
|
name: "CmdListOfLinks",
|
|
99
112
|
emits: ["click"],
|
|
100
113
|
mixins: [EditMode],
|
|
114
|
+
data() {
|
|
115
|
+
return {
|
|
116
|
+
listOfTagItems: [...(this.items || [])]
|
|
117
|
+
}
|
|
118
|
+
},
|
|
101
119
|
props: {
|
|
102
120
|
/**
|
|
103
121
|
* set list-type
|
|
@@ -199,6 +217,19 @@ export default {
|
|
|
199
217
|
value === "vertical"
|
|
200
218
|
}
|
|
201
219
|
},
|
|
220
|
+
/**
|
|
221
|
+
* define remove-icon/link for tags
|
|
222
|
+
*/
|
|
223
|
+
iconRemoveTag: {
|
|
224
|
+
type: Object,
|
|
225
|
+
default: () => (
|
|
226
|
+
{
|
|
227
|
+
show: true,
|
|
228
|
+
title: "Remove this tag",
|
|
229
|
+
iconClass: "icon-cancel"
|
|
230
|
+
}
|
|
231
|
+
)
|
|
232
|
+
},
|
|
202
233
|
/**
|
|
203
234
|
* properties for CmdHeadline-component
|
|
204
235
|
*/
|
|
@@ -216,6 +247,10 @@ export default {
|
|
|
216
247
|
}
|
|
217
248
|
},
|
|
218
249
|
methods: {
|
|
250
|
+
removeTag(event, index) {
|
|
251
|
+
this.listOfTagItems.splice(index, 1);
|
|
252
|
+
this.$emit("remove-tag", {originalEvent: event, tagIndex: index})
|
|
253
|
+
},
|
|
219
254
|
onAddItem() {
|
|
220
255
|
this.editModeContext.content.addContent(
|
|
221
256
|
buildComponentPath(this, 'props', 'links', -1),
|
|
@@ -260,6 +295,16 @@ export default {
|
|
|
260
295
|
li {
|
|
261
296
|
list-style: none;
|
|
262
297
|
margin-left: 0 !important; /* overwrite default-settings from frontend-framework */
|
|
298
|
+
|
|
299
|
+
&:has(.tag) {
|
|
300
|
+
.tag {
|
|
301
|
+
gap: var(--default-gap-half);
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
[class*="icon-"] {
|
|
305
|
+
font-size: var(--icon-size-small);
|
|
306
|
+
}
|
|
307
|
+
}
|
|
263
308
|
}
|
|
264
309
|
|
|
265
310
|
&.align-center {
|