comand-component-library 4.0.6 → 4.0.8

package/src/components/CmdListOfLinksItem.vue

@@ -15,15 +15,26 @@
         <!-- end use href --->
 
         <!-- begin use router-link -->
-        <router-link v-else-if="link.type === 'router'"
-                     :to="getRoute(link)"
-                     :title="link.tooltip">
+        <router-link
+            v-else-if="link.type === 'router'"
+            :to="getRoute(link)"
+            :title="link.tooltip">
             <!-- begin CmdIcon -->
             <CmdIcon v-if="link.iconClass" :iconClass="link.iconClass" :type="link.iconType" />
             <!-- end CmdIcon -->
             <span v-if="link.text">{{ link.text }}</span>
         </router-link>
         <!-- end use router-link -->
+
+        <!-- begin CmdListOfLinksItem for nested children -->
+        <ul v-if="!editModeContext">
+            <CmdListOfLinksItem
+                v-for="(child, index) in link.children"
+                :key="index"
+                :link="child"
+            />
+        </ul>
+        <!-- end CmdListOfLinksItem for nested children -->
     </li>
     <!-- end default-view -->
 

package/src/components/CmdPageFooter.vue

@@ -0,0 +1,83 @@
+<template>
+    <div :class="['cmd-page-footer flex-container', {'small-buttons': useSmallButtons}]">
+        <!-- begin button print-preview -->
+        <button
+            v-if="buttonPrintView.show"
+            :class="['button', {'primary': buttonPrintView.primary}]"
+            :title="buttonPrintView.text ? buttonPrintView.icon?.tooltip : null"
+        >
+            <span v-if="buttonPrintView.icon?.show" :class="buttonPrintView.icon?.iconClass"></span>
+            <span v-if="buttonPrintView.text">{{buttonPrintView.text}}</span>
+        </button>
+        <!-- end button print-preview -->
+
+        <!-- begin slot-content -->
+        <slot></slot>
+        <!-- end slot-content -->
+
+        <!-- begin CmdSocialNetworks -->
+        <CmdSocialNetworks v-if="cmdSocialNetworks" :networks="cmdSocialNetworks">
+            <slot name="cmd-social-networks"></slot>
+        </CmdSocialNetworks>
+        <!-- end CmdSocialNetworks -->
+    </div>
+</template>
+
+<script>
+export default {
+    name: "CmdPageFooter",
+    props: {
+        /**
+         * define button for print-preview
+         */
+        buttonPrintView: {
+            type: Object,
+            default() {
+                return {
+                    show: true,
+                    primary: false,
+                    icon: {
+                        show: true,
+                        iconClass: "icon-print-preview",
+                        tooltip: "Open print preview"
+                    },
+                    text: "Print preview"
+                }
+            }
+        },
+        /**
+         * activate to use small buttons
+         */
+        useSmallButtons: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * properties for CmdSocialNetworks-component
+         */
+        cmdSocialNetworks: {
+            type: Array,
+            required: false
+        }
+    }
+}
+</script>
+
+<style>
+/* begin cmd-page-footer -------------------------------------------------------------------------------------------- */
+.cmd-page-footer {
+    align-items: flex-end;
+
+    &.small-buttons {
+        button, .button {
+            padding: var(--button-padding-small);
+            min-height: var(--button-min-height-small);
+
+            span {
+                font-size: var(--font-size-small);
+            }
+        }
+    }
+}
+/* end cmd-page-footer -------------------------------------------------------------------------------------------- */
+</style>

package/src/components/CmdPagination.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="cmd-pager">
+    <div class="cmd-pagination">
         <!-- begin button/link to previous page -->
         <a
             :href="getPreviousHref"
@@ -47,10 +47,10 @@
 <script>
 // import mixins
 import I18n from "../mixins/I18n"
-import DefaultMessageProperties from "../mixins/CmdPager/DefaultMessageProperties"
+import DefaultMessageProperties from "../mixins/CmdPagination/DefaultMessageProperties"
 
 export default {
-    name: "CmdPager",
+    name: "CmdPagination",
     mixins: [
         I18n,
         DefaultMessageProperties
@@ -172,7 +172,7 @@ export default {
 
 <style>
 /* begin cmd-pagination ---------------------------------------------------------------------------------------- */
-.cmd-pager {
+.cmd-pagination {
     display: flex;
     justify-content: space-between;
 

package/src/components/CmdSidebar.vue

@@ -130,6 +130,8 @@ export default {
 
     &.box {
         padding: 0;
+
+        border-left: 0;
     }
 
     .cmd-box-wrapper > .grid-container-create-columns {
@@ -171,7 +173,6 @@ export default {
 
         > a {
             border-right: var(--default-border);
-            border-left: 0;
         }
     }
 }

package/src/components/CmdSocialNetworks.vue

@@ -21,17 +21,22 @@
 
         <!-- begin list of networks -->
         <ul v-if="validNetworks.length > 0" :class="['button-wrapper', {'no-gap': !useGap}]">
-            <!-- begin cmd-social-networks (default view) -->
-            <CmdSocialNetworksItem
-                v-if="!editModeContext"
-                v-for="(entry, index) in validNetworks"
-                :key="index"
-                :network="entry"
-                :userMustAcceptDataPrivacy="userMustAcceptDataPrivacy"
-                :buttonTextAlign="buttonTextAlign"
-                :dataPrivacyAccepted="dataPrivacyAccepted"
-            />
-            <!-- end cmd-social-networks (default view) -->
+            <template v-if="!editModeContext">
+                <!-- begin cmd-social-networks (default view) -->
+                <CmdSocialNetworksItem
+                    v-for="(entry, index) in validNetworks"
+                    :key="index"
+                    :network="entry"
+                    :userMustAcceptDataPrivacy="userMustAcceptDataPrivacy"
+                    :buttonTextAlign="buttonTextAlign"
+                    :dataPrivacyAccepted="dataPrivacyAccepted"
+                />
+                <!-- end cmd-social-networks (default view) -->
+
+                <!-- begin slot-content -->
+                <slot></slot>
+                <!-- end slot-content -->
+            </template>
 
             <!-- begin edit-mode -->
             <EditComponentWrapper
@@ -62,9 +67,12 @@
 </template>
 
 <script>
-import {buildComponentPath} from "../utils/editmode.js"
+// import mixins (EditMode only)
 import EditMode from "../mixins/EditMode.vue"
 
+// import utils (EditMode only)
+import {buildComponentPath} from "../utils/editmode.js"
+
 export default {
     name: "CmdSocialNetworks",
     mixins: [EditMode],
@@ -110,7 +118,7 @@ export default {
             default: false
         },
         /**
-         * list of networks (i.e. facebook, twitter etc.)
+         * list of networks (i.e. facebook, linkedin etc.)
          */
         networks: {
             type: Array,
@@ -149,20 +157,20 @@ export default {
             default: "You must accept data privacy conditions!"
         },
         /**
-         * alignment for buttons
+         * text-alignment for buttons
          *
          * @allowedValues: "left", "right"
          */
         buttonTextAlign: {
             type: String,
-            default: "left",
+            default: "right",
             validator(value) {
                 return value === "left" ||
                     value === "right"
             }
         },
         /**
-         * properties for cmdFormElement
+         * properties for CmdFormElement-component
          *
          * userMustAcceptDataPrivacy-property must be activated
          */
@@ -217,7 +225,7 @@ export default {
                 this.itemProvider)
         },
         itemProvider() {
-            return                 {
+            return {
                 "id": "social-network-facebook",
                 "path": "https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdevelopment.comand-cms.com%2Fmodule%2Fteam.html",
                 "tooltip": "Share this page on facebook",
@@ -298,6 +306,10 @@ export default {
             }
 
             &.text-align-right {
+                flex-direction: row;
+            }
+
+            &.text-align-left {
                 flex-direction: row-reverse;
             }
         }
@@ -365,9 +377,9 @@ export default {
             li {
                 flex: 1;
 
-        .button {
-                display: flex;
-            }
+                .button {
+                    display: flex;
+                }
             }
         }
     }
@@ -397,8 +409,8 @@ export default {
         --social-network-color: #3c5a99;
     }
 
-    #social-network-twitter {
-        --social-network-color: #6bacde;
+    #social-network-x {
+        --social-network-color: #14171a;
     }
 
     #social-network-xing {

package/src/components/CmdSocialNetworksItem.vue

@@ -2,7 +2,7 @@
     <li class="cmd-social-networks-item">
         <a
             :key="network.path"
-            :class="['button', {disabled: userMustAcceptDataPrivacy && !dataPrivacyAccepted}, {'text-align-right': buttonTextAlign === 'right'}]"
+            :class="['button', {disabled: userMustAcceptDataPrivacy && !dataPrivacyAccepted}, 'text-align-' + buttonTextAlign]"
             :id="network.id"
             :href="getUrl(network)"
             @click="preventOnDisabled"

package/src/components/CmdSwitchLanguage.vue

@@ -95,8 +95,10 @@ export default {
             a:not([class*="active"]) {
                 filter: contrast(.5);
 
-                &:hover, &:focus, &:active {
+                &:hover, &:focus-visible, &:active, &.active {
                     filter: none;
+                    padding: 0; /* overwrite default settings from frontend-framework for .active */
+                    background: none; /* overwrite default settings from frontend-framework for .active */
                 }
             }
         }

package/src/components/CmdTextImageBlock.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="cmd-text-image-block flex-container vertical">
+    <div :class="['cmd-text-image-block flex-container', orientation]">
         <!-- begin cmdHeadline -->
         <CmdHeadline
-            v-if="(cmdHeadline?.headlineText || editModeContext) && headlinePosition === 'aboveImage'"
+            v-if="(cmdHeadline?.headlineText || editModeContext) && (headlinePosition === 'aboveImage' && orientation === 'vertical')"
             v-bind="cmdHeadline"
         />
         <!-- end cmdHeadline -->
@@ -16,14 +16,19 @@
         />
         <!-- end cmdImage -->
 
-        <!-- begin cmdHeadline -->
-        <CmdHeadline
-            v-if="(cmdHeadline?.headlineText || editModeContext) && headlinePosition === 'belowImage'"
-            v-bind="cmdHeadline"
-        />
-        <!-- end cmdHeadline -->
+        <div class="flex-container vertical">
+            <!-- begin cmdHeadline -->
+            <CmdHeadline
+                v-if="(cmdHeadline?.headlineText || editModeContext) && (headlinePosition === 'belowImage' || orientation === 'horizontal')"
+                v-bind="cmdHeadline"
+            />
+            <!-- end cmdHeadline -->
+
+            <!-- begin continuous text -->
+            <div v-if="htmlContent" v-html="htmlContent" :class="textAlign"></div>
+            <!-- end continuous text -->
+        </div>
 
-        <!-- begin continuous text -->
         <!-- begin edit-mode -->
         <EditComponentWrapper
             v-if="editModeContext"
@@ -47,14 +52,14 @@
             </template>
         </EditComponentWrapper>
         <!-- end edit-mode -->
-
-        <div v-else-if="htmlContent" v-html="htmlContent" :class="textAlign"></div>
-        <!-- end continuous text -->
     </div>
 </template>
 
 <script>
+// import mixins (editMode only)
 import EditMode from "../mixins/EditMode.vue"
+
+// import utils (editMode only)
 import {updateHandlerProvider} from "../utils/editmode.js"
 
 export default {
@@ -66,8 +71,18 @@ export default {
         }
     },
     props: {
-        editModeContextData: {
-            type: Object
+        /**
+         * orientation for entire component
+         *
+         * @allowedValues: "vertical", "horizontal"
+         */
+        orientation: {
+            type: String,
+            default: "vertical",
+            validator(value) {
+                return value === "vertical" ||
+                value === "horizontal"
+            }
         },
         /**
          * content for continuous text (can contain html-tags)
@@ -104,7 +119,7 @@ export default {
             }
         },
         /**
-         * properties for CmdHeadline-component
+         * property for CmdHeadline-component
          */
         cmdHeadline: {
             type: Object,
@@ -116,6 +131,12 @@ export default {
         cmdImage: {
             type: Object,
             required: false
+        },
+        /**
+         * editMode only
+         */
+        editModeContextData: {
+            type: Object
         }
     },
     computed: {
@@ -163,7 +184,15 @@ export default {
 </script>
 
 <style>
+/* begin cmd-text-image-block ---------------------------------------------------------------------------------------- */
+.cmd-text-image-block {
+    > .flex-container {
+        gap: calc(var(--default-gap) / 2);
+    }
+}
+
 .edit-mode .cmd-text-image-block textarea {
     width: 100%;
 }
+/* end cmd-text-image-block ---------------------------------------------------------------------------------------- */
 </style>

package/src/components/CmdThumbnailScroller.vue

@@ -421,7 +421,7 @@ export default {
                     text-align: center;
 
                     &.active {
-                        color: var(--pure-white);
+                        color: var(--hyperlink-color-highlighted);
                         background: none; /* overwrite default behaviour from frontend-framework */
 
                         span, span[class*="icon"] {
@@ -438,6 +438,7 @@ export default {
                         figcaption {
                             background: var(--primary-color);
                             opacity: 1;
+                            color: var(--pure-white);
                         }
                     }
 
@@ -545,7 +546,7 @@ export default {
     }
 
     &.large-icons {
-        li a {
+        ul li a {
             display: flex;
             flex-direction: column;
             gap: calc(var(--default-gap) / 4);