comand-component-library 4.2.52 → 4.2.54

package/src/components/CmdTag.vue

@@ -0,0 +1,101 @@
+<template>
+    <!-- begin CmdTag ---------------------------------------------------------------------------------------- -->
+    <small v-if="showTag" :class="['cmd-tag tag', highlightLevel]" ref="tag">
+        <slot>
+            <span>{{ tagText }}</span>
+            <a v-if="removeTagByClick" href="#" @click.prevent="removeTag">
+                <!-- begin CmdIcon -->
+                <CmdIcon v-bind="cmdIcon" />
+                <!-- end CmdIcon -->
+            </a>
+        </slot>
+    </small>
+    <!-- end CmdTag ---------------------------------------------------------------------------------------- -->
+</template>
+
+<script>
+export default {
+    name: "CmdTag",
+    emits: ["click"],
+    data() {
+        return {
+            showTag: true
+        }
+    },
+    props: {
+        /**
+         * the displayed text of the tag
+         */
+         tagText: {
+            type: String,
+            required: true
+        },
+        /**
+         * enable removing the tag by click
+         */
+         removeTagByClick: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * set highlight-level for tag
+         * 
+         * @allowedValues: "none", "primary", "secondary", "tertiary"
+         */
+         highlightLevel: {
+            type: Boolean,
+            default: "none",
+            validator(value) {
+                return value === "none" ||
+                    value === "primary" ||
+                    value === "secondary" ||
+                    value === "tertiary"
+            }
+        },
+        /**
+         * properties for CmdIcon-component
+         */
+         cmdIcon: {
+            type: Object,
+            default: function () {
+                return {
+                    iconClass: "icon-cancel-circle",
+                    tooltip: "Back to top",
+                    iconType: "auto"
+                }
+            }
+        }
+    },
+    methods: {
+        removeTag() {
+            const event = {
+                prevented: false,
+                preventDefault() {
+                    this.prevented = true
+                }
+            }
+
+            this.$emit("click", event)
+            
+            if (!event.prevented) {
+                this.showTag = false
+            }
+        }
+    }
+}
+</script>
+
+<style>
+/* begin cmd-tag ------------------------------------------------------------------------------------------ */
+.cmd-tag {
+    align-self: start; /* if used in vertical flex-container */
+    gap: var(--default-gap-half);
+
+    .primary, .secondary, .tertiary {
+        span[class*="icon-"] {
+            color: var(--color-white);
+        }
+    }
+}
+/* end cmd-tag ------------------------------------------------------------------------------------------ */
+</style>

package/src/components/CmdTextImageBlock.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdTextImageBlock ---------------------------------------------------------------------------------------- -->
     <div :class="['cmd-text-image-block flex-container', orientation]">
         <!-- begin cmdHeadline -->
         <CmdHeadline
@@ -57,6 +58,7 @@
         </EditComponentWrapper>
         <!-- end edit-mode -->
     </div>
+    <!-- end CmdTextImageBlock ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdThumbnailScroller.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdThumbnailScroller ---------------------------------------------------------------------------------------- -->
     <div :class="[
         'cmd-thumbnail-scroller',
         {
@@ -89,6 +90,7 @@
             <!-- end CmdSlideButton -->
         </div>
     </div>
+    <!-- end CmdThumbnailScroller ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdToggleDarkMode.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdToggleDarkMode ---------------------------------------------------------------------------------------- -->
     <div :class="['cmd-toggle-dark-mode', {'styled-layout': useStyledLayout, 'dark-mode': darkMode}]">
         <template v-if="!editing">
         <!-- begin button-style -->
@@ -53,6 +54,7 @@
             <!-- end edit-mode -->
         </template>
     </div>
+    <!-- end CmdToggleDarkMode ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdTooltip.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdTooltip ---------------------------------------------------------------------------------------- -->
     <div v-if="tooltipVisibility" :class="['cmd-tooltip', validationStatus]" ref="tooltip">
         <div v-if="cmdHeadline || iconClose.show" class="headline-wrapper">
             <!-- begin CmdHeadline -->
@@ -23,6 +24,7 @@
             {{ tooltipText }}
         </slot>
         <!-- end slot-content -->
+         <!-- end CmdTooltip ---------------------------------------------------------------------------------------- -->
     </div>
 </template>
 

package/src/components/CmdTooltipForFormElements.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdTooltipForFormElements ---------------------------------------------------------------------------------------- -->
     <!-- begin CmdTooltip -->
     <CmdTooltip
         ref="tooltip"
@@ -16,6 +17,7 @@
         <!-- end CmdListOfRequirements -->
     </CmdTooltip>
     <!-- end CmdTooltip -->
+    <!-- end CmdTooltipForFormElements ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdUploadForm.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdUploadForm ---------------------------------------------------------------------------------------- -->
     <!-- begin advanced mode -->
     <fieldset v-if="advancedMode" :class="['cmd-upload-form flex-container vertical', { 'upload-initiated': uploadInitiated }]">
         <legend :class="{hidden : !legend.show, 'align-left': legend.align === 'left'}">{{ legend.text }}</legend>
@@ -347,6 +348,7 @@
         ref="formElement"
     />
     <!-- end CmdFormElement -->
+    <!-- end CmdUploadForm ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdWidthLimitationWrapper.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdWidthLimitationWrapper ---------------------------------------------------------------------------------------- -->
     <div class="cmd-width-limitation-wrapper" :class="{'sticky': sticky}" ref="width-limitation-wrapper">
         <!-- begin slot-content in section -->
         <section v-if="useInnerSection" :class="setInnerClass" :id="anchorId">
@@ -32,6 +33,7 @@
         </template>
         <!-- end slot-content without section -->
     </div>
+    <!-- end CmdWidthLimitationWrapper ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>