comand-component-library 4.2.52 → 4.2.53

package/src/ComponentLibrary.vue

@@ -1157,7 +1157,7 @@
             </CmdWidthLimitationWrapper>
             <!-- end link --------------------------------------------------------------------------------------------------->
 
-            <!-- begin list --------------------------------------------------------------------------------------------------->
+            <!-- begin lists --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage" id="section-list">
                     <span>List</span>
@@ -1165,7 +1165,7 @@
                         @click.prevent="openSettingsSidebar('CmdList')"></a>
                 </h2>
                 <CmdList :cmdHeadline="{ headlineText: 'List of links', headlineLevel: 3 }" ref="CmdList"
-                    v-bind="cmdListSettingsData" :items="listData" listType="links" @click="cmdLinkOutput" />
+                    v-bind="cmdListSettingsData" :items="listData" listContentType="links" @click="cmdLinkOutput" />
                 <dl class="output">
                     <dt>Event:</dt>
                     <dd>{{ outputCmdLink?.event?.originalEvent }}</dd>
@@ -1175,38 +1175,57 @@
                     <dd>{{ outputCmdLink?.event?.linkType }}</dd>
                 </dl>
                 <CmdList :cmdHeadline="{ headlineText: 'List of images', headlineLevel: 3 }" :items="imageGalleryData"
-                    orientation="horizontal" listType="images" />
+                    orientation="horizontal" listContentType="images" />
                 <div class="flex-container">    
                     <CmdList 
                         :cmdHeadline="{ headlineText: 'List of tags (default)', headlineLevel: 3 }" 
                         :items="listOfTagsData"
                         orientation="horizontal" 
-                        listType="tags" 
+                        listContentType="tags" 
                     />
                     <CmdList 
                         :cmdHeadline="{ headlineText: 'List of tags (primary)', headlineLevel: 3 }" 
                         :items="listOfTagsData"
                         orientation="horizontal" 
-                        listType="tags" 
+                        listContentType="tags" 
                         highlightLevel="primary"
                     />
                     <CmdList 
                         :cmdHeadline="{ headlineText: 'List of tags (secondary)', headlineLevel: 3 }" 
                         :items="listOfTagsData"
                         orientation="horizontal" 
-                        listType="tags" 
+                        listContentType="tags" 
                         highlightLevel="secondary"
                     />
                     <CmdList 
                         :cmdHeadline="{ headlineText: 'List of tags (tertiary)', headlineLevel: 3 }" 
                         :items="listOfTagsData"
                         orientation="horizontal" 
-                        listType="tags" 
+                        listContentType="tags" 
                         highlightLevel="tertiary"
                     />
                 </div>
+                <h3>Description Lists</h3>
+                <div class="flex-container">
+                    <CmdList
+                        listType="description"
+                        :cmdHeadline="{ headlineText: 'List with text', headlineLevel: 4 }" 
+                        :items="descriptionListData.text" 
+                    />
+                    <CmdList
+                        listType="description"
+                        :cmdHeadline="{ headlineText: 'List with text (term right aligned)', headlineLevel: 4 }" 
+                        :alignDescriptionTermRight="true"
+                        :items="descriptionListData.text" 
+                    />
+                    <CmdList
+                        listType="description"
+                        :cmdHeadline="{ headlineText: 'List with icons', headlineLevel: 4 }" 
+                        :items="descriptionListData.icons" 
+                    />
+                </div>
             </CmdWidthLimitationWrapper>
-            <!-- end list --------------------------------------------------------------------------------------------------->
+            <!-- end lists --------------------------------------------------------------------------------------------------->
 
             <!-- begin login-form --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
@@ -1340,6 +1359,17 @@
             </CmdWidthLimitationWrapper>
             <!-- end pagination --------------------------------------------------------------------------------------------------->
 
+            <!-- begin paragraph --------------------------------------------------------------------------------------------------->
+            <CmdWidthLimitationWrapper>
+                <h2 class="headline-demopage" id="section-paragraph">
+                    <span>Paragraph</span>
+                    <a href="#" class="button small icon-cog" title="Open Component Settings"
+                        @click.prevent="openSettingsSidebar('CmdParagraph')"></a>
+                </h2>
+                <CmdParagraph ref="CmdParagraph" v-bind="cmdParagraphSettingsData" />
+            </CmdWidthLimitationWrapper>
+            <!-- end paragraph --------------------------------------------------------------------------------------------------->
+
             <!-- begin section --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage" id="section-section">
@@ -1514,6 +1544,18 @@
             </CmdWidthLimitationWrapper>
             <!-- end tabs --------------------------------------------------------------------------------------------------->
 
+            <!-- begin tags --------------------------------------------------------------------------------------------------->
+            <CmdWidthLimitationWrapper>
+                <h2 class="headline-demopage" id="section-tag">
+                    <span>Tag</span>
+                    <a href="#" class="button small icon-cog" title="Open Component Settings"
+                        @click.prevent="openSettingsSidebar('CmdTag')">
+                    </a>
+                </h2>
+                <CmdTag ref="CmdTag" v-bind="cmdTagSettingsData" />
+            </CmdWidthLimitationWrapper>
+            <!-- end tags --------------------------------------------------------------------------------------------------->
+
             <!-- begin text-image-block --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage" id="section-text-image-block">
@@ -1711,6 +1753,7 @@ import inputGroupRadiobuttonsData from '@/assets/data/input-group-radiobuttons.j
 import inputGroupReplacedRadiobuttonsData from '@/assets/data/input-group-replaced-radiobuttons.json'
 import inputGroupToggleSwitchRadiobuttonsData from '@/assets/data/input-group-toggle-switch-radiobuttons.json'
 import listData from '@/assets/data/list.json'
+import descriptionListData from '@/assets/data/list-description-list.json'
 import listOfTagsData from '@/assets/data/list-of-tags.json'
 import switchLanguage from '@/assets/data/switch-language.json'
 import mailToolData from '@/assets/data/mail-tool.json'
@@ -1910,6 +1953,7 @@ export default {
             switchLanguage,
             listData,
             listOfTagsData,
+            descriptionListData,
             multistepsData,
             mailToolData,
             navigationData,

package/src/assets/data/list-description-list.json

@@ -0,0 +1,74 @@
+{
+  "text": [
+    {
+      "descriptionTerm": {
+        "text": "Description Term #1"
+      },
+      "descriptionData": {
+        "text": "Description Data #1"
+      }
+    },
+    {
+      "descriptionTerm": {
+        "text": "Description Term #2"
+      },
+      "descriptionData": {
+        "text": "Description Data #2"
+      }
+    },
+    {
+      "descriptionTerm": {
+        "text": "Description Term #3"
+      },
+      "descriptionData": {
+        "text": "Description Data #3"
+      }
+    }
+  ],
+  "icons": [
+    {
+      "descriptionTerm": {
+        "cmdIcon": {
+          "show": true,
+          "iconClass": "icon-home",
+          "tooltip": "Href with anchor"
+        }
+      },
+      "descriptionData": {
+        "cmdLink": {
+          "linkType": "href",
+          "text": "Description data in link ",
+          "path": "#anchor-back-to-top"
+        }
+      }
+    },
+    {
+      "descriptionTerm": {
+        "cmdIcon": {
+          "show": true,
+          "iconClass": "icon-user-profile",
+          "tooltip": "Href with anchor"
+        }
+      },
+      "descriptionData": {
+        "text": "Data without link"
+      }
+    },
+    {
+      "descriptionTerm": {
+        "cmdIcon": {
+          "show": true,
+          "iconClass": "icon-phone",
+          "tooltip": "Href with anchor"
+        }
+      },
+      "descriptionData": {
+        "cmdLink": {
+          "linkType": "href",
+          "text": "Description data in link",
+          "path": "#anchor-back-to-top"
+        }
+      }
+    }
+  ]
+}

package/src/assets/data/listOfComponents.json

@@ -29,6 +29,7 @@
   "PageFooter",
   "PageHeader",
   "Pagination",
+  "Paragraph",
   "Section",
   "SiteFooter",
   "SiteHeader",
@@ -40,6 +41,7 @@
   "SystemMessage",
   "Tables",
   "Tabs",
+  "Tag",
   "TextImageBlock",
   "ThumbnailScroller",
   "ToggleDarkMode",

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

@@ -284,22 +284,8 @@ a img.flag {
         border-color: var(--status-color);
     }
 }
-
-.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/componentSettingsDataAndControls.vue

@@ -651,6 +651,31 @@ data() {
                 }
             ]
         },
+        cmdParagraphSettingsData: {
+            content: "This is a paragraph with content provided per property with <dfn title='HyperText Markup Language'>HTML</dfn> inside. Its alignment can be adjusted with the <em>textAlign</em>-property. Additionally the number of columns (1-4) can be defined by <em>numberOfColumns</em>-property.",
+            numberOfColumns: 1,
+            textAlign: "left",
+        },
+        cmdParagraphSettingsControls: {
+            textAlign: [
+                {
+                    text: "left",
+                    value: "left"
+                },
+                {
+                    text: "center",
+                    value: "center"
+                },
+                {
+                    text: "right",
+                    value: "right"
+                },
+                {
+                    text: "justify",
+                    value: "justify"
+                }
+            ]
+        },
         cmdSiteHeaderSettingsData: {
             sticky: false,
             navigationInline: false,
@@ -775,6 +800,30 @@ data() {
                 }
             ]
         },
+        cmdTagSettingsData: {
+            tagText: "Text for Tag",
+            removeByClick: false
+        },
+        cmdTagSettingsControls: {
+            highlightLevel: [
+                {
+                    text: "none (default)",
+                    value: "none"
+                },
+                {
+                    text: "primary",
+                    value: "primary"
+                },
+                {
+                    text: "secondary",
+                    value: "secondary"
+                },
+                {
+                    text: "tertiary",
+                    value: "tertiary"
+                }
+            ]
+        },
         cmdTextImageBlockSettingsData: {
             htmlContent: "Text given as html-content",
             paragraphTextAlign: "left",

package/src/components/CmdCodeOutput.vue

@@ -25,8 +25,6 @@
 </template>
 
 <script>
-import { ref } from "vue"
-
 export default {
     name: "CmdCodeOutput",
     props: {

package/src/components/CmdLink.vue

@@ -21,6 +21,7 @@
     <!-- begin router-link -->
     <router-link v-else-if="linkType === 'router'" 
         :to="!disabled ? path : {}" 
+        exact-active-class="router-link-exact-active active"
         :class="['cmd-link', highlightLevel, {'button': styleAsButton, 'disabled': disabled, 'box': styleAsBox, 'fancybox': fancybox}]" 
         @click="emitClick($event, 'router')" 
         :title="icon?.tooltip">

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
          *
@@ -263,7 +315,9 @@ export default {
             return null
         },
         listTag() {
-            return this.orderedList ? "ol" : "ul"
+            if(this.listType !== "description") {
+                return this.listType === "ordered" ? "ol" : "ul"
+            }
         }
     },
     methods: {
@@ -274,7 +328,8 @@ export default {
         onAddItem() {
             this.editModeContext.content.addContent(
                 buildComponentPath(this, 'props', 'links', -1),
-                this.itemProvider)
+                this.itemProvider
+            )
         },
         itemProvider() {
             return {
@@ -416,11 +471,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>