comand-component-library 4.2.49 → 4.2.51

package/src/assets/data/list-of-tags.json

@@ -1,3 +1,3 @@
 [
-  "tag 1", "tag 2", "tag 3"
+  "Tag 1", "Tag 2", "Tag 3"
 ]

package/src/assets/data/listOfComponents.json

@@ -39,7 +39,7 @@
   "SwitchLanguage",
   "SystemMessage",
   "Tables",
-  "Tabs",
+  "Tags",
   "TextImageBlock",
   "ThumbnailScroller",
   "ToggleDarkMode",

package/src/assets/styles/component-library-global-styles.scss

@@ -285,7 +285,21 @@ a img.flag {
     }
 }
 
+.cmd-link.button {
+    &.router-link-active {
+        background: var(--button-primary-background-highlighted); /* set background for active router-links styled as buttons buttons */
+    }
+}
+
 /* end tooltip for cmd-form-element and cmd-fake-select -------------------------------------------------------------------------------------------------------------------- */
+
+/* begin cmd-link -------------------------------------------------------------------------------------------------------------------- */
+.cmd-link.button {
+    &.router-link-active {
+        background: var(--button-primary-background-highlighted); /* set background for active router-links styled as buttons */
+    }
+}
+/* end cmd-link -------------------------------------------------------------------------------------------------------------------- */
 /* ----------------------------------------------- END COMPONENTS AND GLOBAL STYLES --------------------------------------------------- */
 
 /* ---------------------------------------------- BEGIN MEDIA QUERIES AND BROWSER SPECIFIC STYLES -------------------------------------------------- */

package/src/components/CmdLink.vue

@@ -168,9 +168,7 @@ export default {
     gap: var(--icon-and-text-gap);
     align-items: center;
 
-    &.active, &.router-link-active:not(.button) {
-        background: var(--button-primary-background-highlighted); /* overwrite background for active links/buttons */
-        
+    &.active, &.router-link-active {
         &.button {
             padding: var(--button-padding); /* overwrite padding for active links/buttons */
         }

package/src/components/CmdList.vue

@@ -77,8 +77,21 @@
 
             <!-- begin tags -->
             <template v-if="listType === 'tags'">
-                <li v-for="(tag, index) in items" :key="index">
-                    <small class="tag">{{ tag }}</small>
+                <li v-for="(tag, index) in listOfTagItems" :key="index">
+                    <small class="tag flex-container">
+                       <span>{{ tag }}</span>
+                       <!-- begin icon 'remove tag' -->
+                        <a v-if="iconRemoveTag.show" 
+                           href="#" 
+                           @click.prevent="removeTag(index)" 
+                           :title="iconRemoveTag.tooltip"
+                           class="flex-none"
+                        >
+                                <span :class="iconRemoveTag.iconClass"></span>
+                        </a>
+                        <!-- end icon 'remove tag' -->
+                    </small>
+
                 </li>
             </template>
             <!-- end tags -->
@@ -98,6 +111,11 @@ export default {
     name: "CmdListOfLinks",
     emits: ["click"],
     mixins: [EditMode],
+    data() {
+        return {
+            listOfTagItems: [...(this.items || [])]
+        }
+    },
     props: {
         /**
          * set list-type
@@ -199,6 +217,19 @@ export default {
                     value === "vertical"
             }
         },
+        /**
+         * define remove-icon/link for tags
+         */
+        iconRemoveTag: {
+            type: Object,
+            default: () => (
+                {
+                    show: true,
+                    title: "Remove this tag",
+                    iconClass: "icon-cancel"
+                }
+            )
+        },
         /**
          * properties for CmdHeadline-component
          */
@@ -216,6 +247,10 @@ export default {
         }
     },
     methods: {
+        removeTag(event, index) {
+            this.listOfTagItems.splice(index, 1);
+            this.$emit("remove-tag", {originalEvent: event, tagIndex: index})
+        },
         onAddItem() {
             this.editModeContext.content.addContent(
                 buildComponentPath(this, 'props', 'links', -1),
@@ -260,6 +295,16 @@ export default {
         li {
             list-style: none;
             margin-left: 0 !important; /* overwrite default-settings from frontend-framework */
+
+            &:has(.tag) {
+                .tag {
+                    gap: var(--default-gap-half);
+                }
+
+                [class*="icon-"] {
+                    font-size: var(--icon-size-small);
+                }
+            }
         }
 
         &.align-center {