comand-component-library 4.2.52 → 4.2.54

package/src/components/CmdList.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdList ---------------------------------------------------------------------------------------- -->
     <transition :name="transition">
         <div :class="['cmd-list',
             {
@@ -7,16 +8,16 @@
                 'large-icons': largeIcons,
                 'show-list-style-items': showListStyleItems,
             },
-            'list-type-' + listType
+            'list-content-type-' + listContentType
         ]">
             <!-- begin cmd-headline -->
             <CmdHeadline v-if="cmdHeadline?.headlineText || editModeContext" v-bind="cmdHeadline" />
             <!-- end cmd-headline -->
 
-            <!-- begin list of links -->
-            <component :is="listTag"
+            <!-- begin list of links ordered/unordered -->
+            <component v-if="listType !== 'description'" :is="listTag"
                 :class="['flex-container', { 'no-gap': !useGap }, 'align-' + align, setStretchClass, { horizontal: orientation === 'horizontal' }]">
-                <template v-if="listType === 'links'">
+                <template v-if="listContentType === 'links'">
                     <slot>
                         <!-- begin CmdListOfLinksItem-->
                         <CmdListOfLinksItem v-if="!editModeContext" v-for="(link, index) in items" :key="index"
@@ -47,7 +48,7 @@
                 </template>
 
                 <!-- begin list of images -->
-                <template v-if="listType === 'images'">
+                <template v-if="listContentType === 'images'">
                     <slot>
                         <li v-for="(image, index) in items" :key="index">
                             <!-- begin CmdImage with link-->
@@ -65,26 +66,56 @@
                 <!-- end list of images -->
 
                 <!-- begin tags -->
-                <template v-if="listType === 'tags'">
+                <template v-if="listContentType === 'tags'">
                     <slot>
                         <li v-for="(tag, index) in listOfTagItems" :key="index">
-                            <small :class="['tag flex-container', highlightLevel]">
-                                <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>
+                            <!-- begin CmdTag -->
+                            <CmdTag 
+                                :tagText="tag"
+                                :highlightLevel="highlightLevel" 
+                                :removeTagByClick="true" 
+                                @click.prevent="removeTag(event, index)" 
+                            />
+                            <!-- end CmdTag -->
                         </li>
                     </slot>
                 </template>
                 <!-- end tags -->
             </component>
-            <!-- end list of links -->
+            <!-- end list of links ordered/unordered -->
+
+            <!-- begin description list -->
+            <dl v-else>
+                <template v-for="(entry, index) in items" :key="index">
+                    <dt v-if="!alignDescriptionTermRight">
+                        <CmdIcon 
+                            v-if="entry.descriptionTerm?.cmdIcon?.iconClass" 
+                            v-bind="entry.descriptionTerm.cmdIcon"
+                        />
+                        <span v-if="entry.descriptionTerm?.text">{{ entry.descriptionTerm?.text }}</span>
+                    </dt>
+                    <dd>
+                        <CmdLink 
+                            v-if="entry.descriptionData.cmdLink !== undefined" 
+                            v-bind="entry.descriptionData.cmdLink">
+                        </CmdLink>
+                        <template v-else>
+                            {{ entry.descriptionData.text }}
+                        </template>
+                    </dd>
+                    <dt v-if="alignDescriptionTermRight">
+                        <CmdIcon 
+                            v-if="entry.descriptionTerm?.cmdIcon?.iconClass" 
+                            v-bind="entry.descriptionTerm.cmdIcon"
+                        />
+                        <span v-if="entry.descriptionTerm?.text">{{ entry.descriptionTerm?.text }}</span>
+                    </dt>
+                </template>
+            </dl>
+            <!-- end description list -->
         </div>
     </transition>
+    <!-- end CmdList ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -120,23 +151,35 @@ export default {
          */
         highlightLevel: {
             type: String,
-            default() {
-                return "none"
+            default: "none",
+            validator(value) {
+                return value === "none" ||
+                    value === "primary" ||
+                    value === "secondary" ||
+                    value === "tertiary"
             }
         },
         /**
-         * define if an order-list should be used (else an unordered one will be used)
+         * define the list type
+         * 
+         * @affectsStyling: true
+         * @allowedValues: "unordered", "ordered", "description"
          */
-        orderedList: {
-            type: Boolean,
-            default: false
+        listType: {
+            typ: String,
+            default: "unordered",
+            validator(value) {
+                return value === "unordered" ||
+                    value === "ordered" ||
+                    value === "description"
+            }
         },
         /**
          * set list-type
          *
          * @allowedValues: links, images, tags
          */
-        listType: {
+        listContentType: {
             typ: String,
             default: "links",
             validator(value) {
@@ -195,6 +238,15 @@ export default {
             type: Boolean,
             default: false
         },
+        /**
+         * set if description term should be aligned right
+         * 
+         * @affectsStyling: true
+         */
+         alignDescriptionTermRight: {
+            type: Boolean,
+            default: false
+         },
         /**
          * set horizontal alignment
          *
@@ -231,8 +283,19 @@ export default {
                     value === "vertical"
             }
         },
+        /**
+         * allow tags to be remove by click 
+         * 
+         * (listContentType-property must be set to "tags")
+         */
+        removeTagByClick: {
+            type: Boolean,
+            default: false
+        },
         /**
          * define remove-icon/link for tags
+         * 
+         * (listContentType-property must be set to "tags" and removeTabByClick-property must be set to true)
          */
         iconRemoveTag: {
             type: Object,
@@ -263,7 +326,9 @@ export default {
             return null
         },
         listTag() {
-            return this.orderedList ? "ol" : "ul"
+            if(this.listType !== "description") {
+                return this.listType === "ordered" ? "ol" : "ul"
+            }
         }
     },
     methods: {
@@ -274,7 +339,8 @@ export default {
         onAddItem() {
             this.editModeContext.content.addContent(
                 buildComponentPath(this, 'props', 'links', -1),
-                this.itemProvider)
+                this.itemProvider
+            )
         },
         itemProvider() {
             return {
@@ -416,11 +482,11 @@ export default {
 
 @media only screen and (max-width: $medium-max-width) {
     .cmd-list {
-        >ul {
+        > ul {
             ul {
                 gap: calc(var(--default-gap) / 2);
 
-                >li:first-child {
+                > li:first-child {
                     margin-top: calc(var(--default-gap) / 2);
                 }
             }

package/src/components/CmdMultistepFormProgressBar.vue

@@ -1,10 +1,11 @@
 <template>
+    <!-- begin CmdMultistepFormProgressBar ---------------------------------------------------------------------------------------- -->
     <ol :class="['cmd-multistep-form-progress-bar', {'use-gap': useGap, 'full-width': fullWidth}]">
         <li v-for="(step, index) in multisteps" :key="index">
             <!-- begin CmdLink -->
             <CmdLink
                 :linkType="step.linkType"
-                :class="['stretch-on-small-devices', activeLinkClass(step.linkType, index)]"
+                :class="['stretch-on-small-devices', activeLinkClass(index)]"
                 :styleAsButton="styleAsButtons"
                 :highlightLevel="highlightLevel"
                 :path="step.path"
@@ -25,6 +26,7 @@
             <!-- end separator -->
         </li>
     </ol>
+    <!-- end CmdMultistepFormProgressBar ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -55,6 +57,13 @@ export default {
                     value === "tertiary"
             }
         },
+        /**
+         * set active step
+         */
+        activeStep: {
+            type: Number,
+            default: 0
+        },
         /**
          * toggle if steps should be stretched to full-width of parent container (else steps will be centered)
          */
@@ -100,11 +109,9 @@ export default {
         }
     },
     methods: {
-        activeLinkClass(linkType, index) {
+        activeLinkClass(index) {
             if(this.activeLink === index) {
-                if(linkType !== "router") {
                     return "active"
-                }
             }
             return ""
         },
@@ -115,6 +122,14 @@ export default {
         getRoute(step) {
             return getRoute(step)
         }
+    },
+    watch: {
+        activeStep: {
+            handler() {
+                this.activeLink = this.activeStep
+            },
+            immediate: true
+        }
     }
 }
 </script>

package/src/components/CmdNewsletterSubscription.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdNewsletterSubscription ---------------------------------------------------------------------------------------- -->
     <fieldset class="cmd-newsletter-subscription flex-container">
         <!-- begin legend -->
         <legend :class="{hidden : !legend.show, 'align-left': legend.align === 'left'}">{{ legend.text }}</legend>
@@ -41,6 +42,7 @@
             <!-- end cmd-form-element -->
         </div>
     </fieldset>
+    <!-- end CmdNewsletterSubscription ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdOpeningHours.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdOpeningHours ---------------------------------------------------------------------------------------- -->
     <div class="cmd-opening-hours">
         <!-- begin cmd-headline -->
         <CmdHeadline
@@ -116,6 +117,7 @@
         </div>
         <!-- end edit-mode -->
     </div>
+    <!-- end CmdOpeningHours ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdOpeningHoursItem.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdOpeningHoursItem ---------------------------------------------------------------------------------------- -->
     <!-- begin opening-days and -hours -->
     <template v-if="!editing">
         <dt class="cmd-opening-hours-item">{{ day.day }}</dt>
@@ -120,6 +121,7 @@
         <!-- end hours -->
     </template>
     <!-- end edit-mode -->
+    <!-- end CmdOpeningHoursItem ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdPageFooter.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdPageFooter ---------------------------------------------------------------------------------------- -->
     <footer :class="['cmd-page-footer flex-container', {'small-buttons': useSmallButtons}]">
         <!-- begin CmdSocialNetworks -->
         <CmdSocialNetworks v-if="cmdSocialNetworks" v-bind="cmdSocialNetworks">
@@ -26,6 +27,7 @@
             <!-- end button print-preview -->
         </div>
     </footer>
+    <!-- end CmdPageFooter ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdPageHeader.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdPageHeader ---------------------------------------------------------------------------------------- -->
     <header v-if="cmdBreadcrumbs || cmdHeadline || $slots.default" class="cmd-page-header flex-container">
         <div v-if="cmdBreadcrumbs || cmdHeadline" class="headline-wrapper flex-container vertical">
             <!-- begin CmdBreadcrumbs -->
@@ -14,6 +15,7 @@
         <slot v-if="$slots.default"></slot>
         <!-- end slot -->
     </header>
+    <!-- end CmdPageHeader ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdPagination.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdPagination ---------------------------------------------------------------------------------------- -->
     <div class="cmd-pagination">
         <!-- begin button/link to previous page -->
         <a
@@ -42,6 +43,7 @@
         </a>
         <!-- end button/link to next page -->
     </div>
+    <!-- end CmdPagination ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdParagraph.vue

@@ -0,0 +1,50 @@
+<template>
+    <!-- begin CmdParagraph ---------------------------------------------------------------------------------------- -->
+    <p 
+        :class="['cmd-paragraph', 'text-align-' + textAlign, 'column-count-' + numberOfColumns]" 
+        v-html="content"
+    >
+    </p>
+    <!-- end CmdParagraph ---------------------------------------------------------------------------------------- -->
+</template>
+
+<script>
+export default {
+    name: "CmdParagraph",
+    props: {
+        /**
+         * provide (html-)content
+         */
+        content: {
+            type: String,
+            required: true
+        },
+        /**
+         * set the number of columns
+         *
+         * @affectStyling: true
+         * @allowedValues: 1/"1", 2/"2", 3/"3",
+         */
+        numberOfColumns: {
+            type: [String, Number],
+            default: 1
+        },
+        /**
+         * set text-align
+         * 
+         * @affectStyling: partially
+         * @allowedValues: "left", "center", "right", "justify"
+         */
+        textAlign: {
+            type: String,
+            default: "left",
+            validator(value) {
+                return value === "left" ||
+                    value === "center" ||
+                    value === "right" ||
+                    value === "justify"
+            }
+        }
+    }
+}
+</script>

package/src/components/CmdSection.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSection ---------------------------------------------------------------------------------------- -->
     <section :class="['cmd-section flex-container', {box: styleAsBox, 'vertical': orientation === 'vertical'}]">
         <!-- begin CmdHeadline -->
         <CmdHeadline
@@ -15,6 +16,7 @@
         <slot v-else></slot>
         <!-- end slot -->
     </section>
+    <!-- end CmdSection ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSidebar.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSidebar ---------------------------------------------------------------------------------------- -->
     <aside :class="['cmd-sidebar', wrapperClass, {'box': styledAsBox, 'collapse-to-right': !collapseToLeft}]">
         <!-- begin inner-sidebar-wrapper -->
         <div class="inner-sidebar-wrapper">
@@ -34,6 +35,7 @@
         </a>
         <!-- end column to toggle sidebar open-closed-status -->
     </aside>
+    <!-- end CmdSidebar ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSiteFooter.vue

@@ -1,9 +1,11 @@
 <template>
+    <!-- begin CmdSiteFooter ---------------------------------------------------------------------------------------- -->
     <div class="cmd-site-footer site-footer">
         <footer :class="['flex-container', {vertical: orientation === 'vertical'}]">
             <slot></slot>
         </footer>
     </div>
+    <!-- end CmdSiteFooter ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSiteHeader.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSiteHeader ---------------------------------------------------------------------------------------- -->
     <div
         ref="site-header"
         :class="[
@@ -62,6 +63,7 @@
         />
         <!-- end CmdMainNavigation -->
     </div>
+    <!-- end CmdSiteHeader ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSiteSearch.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdBoxSiteSearch ---------------------------------------------------------------------------------------- -->
     <fieldset class="cmd-box-site-search flex-container">
         <!-- begin legend -->
         <legend :class="{hidden : !legend.show, 'align-left': legend.align === 'left'}">{{ legend.text }}</legend>
@@ -98,6 +99,7 @@
     <!-- begin CmdFormFilters -->
     <CmdFormFilters v-if="useFilters" v-model="searchFilters" :selectedOptionsName="getOptionName"/>
     <!-- end CmdFormFilters -->
+     <!-- end CmdBoxSiteSearch ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSlideButton.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSlideButton ---------------------------------------------------------------------------------------- -->
     <a href="#"
        @click.prevent
        :class="['cmd-slide-button', 'button', 'keep-behavior-on-small-devices', slideButtonType]"
@@ -7,6 +8,7 @@
         <CmdIcon :type="getDirection.iconType || 'auto'" :iconClass="getDirection.iconClass || 'right'" />
         <!-- end CmdIcon -->
     </a>
+    <!-- end CmdSlideButton ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSocialNetworks.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSocialNetworks ---------------------------------------------------------------------------------------- -->
     <div :class="['cmd-social-networks', {'stretch': stretchButtons}, alignment]">
         <!-- begin CmdHeadline -->
         <CmdHeadline
@@ -64,6 +65,7 @@
         </button>
         <!-- end list of networks -->
     </div>
+    <!-- end CmdSocialNetworks ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSocialNetworksItem.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSocialNetworksItem ---------------------------------------------------------------------------------------- -->
     <li class="cmd-social-networks-item">
         <a
             :key="network.path"
@@ -15,6 +16,7 @@
             <span v-if="network.linkText">{{ network.linkText }}</span>
         </a>
     </li>
+    <!-- end CmdSocialNetworksItem ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSwitchLanguage.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSwitchLanguage ---------------------------------------------------------------------------------------- -->
     <div class="cmd-switch-language">
         <ul>
             <li v-for="(language, index) in languages" :key="index">
@@ -25,6 +26,7 @@
             </li>
         </ul>
     </div>
+    <!-- end CmdSwitchLanguage ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSystemMessage.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSystemMessage ---------------------------------------------------------------------------------------- -->
     <transition :name="transition">
         <div
             v-if="showSystemMessage"
@@ -6,20 +7,6 @@
             :role="validationStatus === 'error' ? 'alert' : 'dialog'"
             :aria-labelledby="htmlId"
         >
-            <!-- begin close-icon -->
-            <a
-                v-if="iconClose.show && iconClose.iconClass"
-                href="#"
-                class="close-button"
-                @click.prevent="hideSystemMessage"
-                :title="iconClose.tooltip"
-            >
-                <!-- begin CmdIcon -->
-                <CmdIcon :iconClass="iconClose.iconClass" :type="iconClose.iconType" />
-                <!-- end CmdIcon -->
-            </a>
-            <!-- end close-icon -->
-
             <!-- begin slot-content -->
             <slot>
                 <!-- begin CmdHeadline -->
@@ -33,8 +20,23 @@
                 <!-- end CmdHeadline -->
             </slot>
             <!-- end slot-content -->
+
+            <!-- begin close-icon -->
+            <a
+                v-if="iconClose.show && iconClose.iconClass"
+                href="#"
+                class="close-button"
+                @click.prevent="hideSystemMessage"
+                :title="iconClose.tooltip"
+            >
+                <!-- begin CmdIcon -->
+                <CmdIcon :iconClass="iconClose.iconClass" :type="iconClose.iconType" />
+                <!-- end CmdIcon -->
+            </a>
+            <!-- end close-icon -->
         </div>
     </transition>
+    <!-- end CmdSystemMessage ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdTable.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdTableWrapper ---------------------------------------------------------------------------------------- -->
     <div
         :class="['cmd-table-wrapper', {'collapsed': !showTableData, 'full-width': fullWidth, 'has-caption': hasCaption, 'has-overflow': hasOverflow}]">
         <div v-if="collapsible || userCanToggleWidth" class="button-wrapper">
@@ -82,6 +83,7 @@
             <!-- end CmdSlideButton -->
         </div>
     </div>
+    <!-- end CmdTableWrapper ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdTabs.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdTabs ---------------------------------------------------------------------------------------- -->
     <div :class="['cmd-tabs', highlightLevel]">
         <!-- being tab-list -->
         <ul :class="{'stretch-tabs' : stretchTabs}" role="tablist">
@@ -40,6 +41,7 @@
         </div>
         <!-- end tab-content -->
     </div>
+    <!-- end CmdTabs ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>