comand-component-library 4.0.7 → 4.0.9

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,
@@ -162,7 +170,7 @@ export default {
             }
         },
         /**
-         * 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",
@@ -369,9 +377,9 @@ export default {
             li {
                 flex: 1;
 
-        .button {
-                display: flex;
-            }
+                .button {
+                    display: flex;
+                }
             }
         }
     }
@@ -401,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 {
@@ -419,14 +427,18 @@ export default {
 @import "../assets/styles/variables";
 
 @container (max-width: #{$small-max-width}) {
-    .button-wrapper {
-        .button {
-            flex: none;
-            width: auto !important;
+    .cmd-social-networks {
+        container-type: normal; /* do not set to 'inline-size' to avoid to be stretched vertically on small devices */
 
-            [class*="icon-"] {
-                & + span {
-                    display: none;
+        .button-wrapper {
+            .button {
+                flex: none;
+                width: auto !important;
+
+                [class*="icon-"] {
+                    & + span {
+                        display: none;
+                    }
                 }
             }
         }

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/CmdWidthLimitationWrapper.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="cmd-width-limitation-wrapper" :class="{'sticky': sticky}">
         <!-- begin slot-content in section -->
-        <section v-if="innerWrapper" :class="setInnerClass" :id="anchorId">
+        <section v-if="useInnerSection" :class="setInnerClass" :id="anchorId">
             <!-- begin cmd-headline -->
             <CmdHeadline
                 v-if="cmdHeadline"
@@ -11,9 +11,19 @@
             />
             <!-- end cmd-headline -->
 
-            <!-- begin slot-content -->
-            <slot></slot>
-            <!-- end slot-content -->
+            <!-- begin slot-content (one column only) -->
+            <slot v-if="numberOfColumns === 1" ></slot>
+            <!-- end slot-content (one column only) -->
+
+            <!-- begin grid-/flex-container to wrap multiple columns/items -->
+            <div v-else :class="useGrid ? 'grid-container-create-columns' : 'flex-container'">
+                <div v-for="index in numberOfColumns" :key="`i${index}`" :class="useGrid ? 'grid-item' : 'flex-item'">
+                    <!-- begin slot-content (multiple columns only) -->
+                    <slot></slot>
+                    <!-- end slot-content (multiple columns only) -->
+                </div>
+            </div>
+            <!-- end grid-/flex-container to wrap multiple columns/items -->
         </section>
         <!-- end slot-content in section -->
 
@@ -32,6 +42,17 @@
 export default {
     name: "CmdWidthLimitationWrapper",
     props: {
+        numberOfColumns: {
+            type: Number,
+            default: 1,
+            validator(value) {
+                return value >= 0
+            }
+        },
+        useGrid: {
+            type: Boolean,
+            default: false
+        },
         /**
          * set a html-tag as inner tag
          *
@@ -41,7 +62,7 @@ export default {
             type: String,
             default: "section",
             validator(value) {
-                return value;
+                return value
             }
         },
         /**
@@ -50,7 +71,7 @@ export default {
          * (if deactivated, content will be directly placed inside cmd-width-limitation-wrapper)
          *
          */
-        innerWrapper: {
+        useInnerSection: {
             type: Boolean,
             default: true
         },

package/src/components/EditComponentWrapper.vue

@@ -530,6 +530,10 @@ function buildComponentPath(component) {
                 }
             }
         }
+
+        &.active {
+            background: hsla(0, 0%, 100%, .2);
+        }
     }
 
     &.active {

package/src/index.js

@@ -25,8 +25,10 @@ export { default as CmdListOfLinks } from '@/components/CmdListOfLinks.vue'
 export { default as CmdLoginForm } from '@/components/CmdLoginForm.vue'
 export { default as CmdMainNavigation } from '@/components/CmdMainNavigation.vue'
 export { default as CmdMultistepFormProgressBar } from '@/components/CmdMultistepFormProgressBar.vue'
+export { default as CmdNewsletterSubscription } from '@/components/CmdNewsletterSubscription.vue'
 export { default as CmdOpeningHours } from '@/components/CmdOpeningHours.vue'
-export { default as CmdPager } from '@/components/CmdPagination.vue'
+export { default as CmdPagination } from '@/components/CmdPagination.vue'
+export { default as CmdPageFooter } from '@/components/CmdPageFooter.vue'
 export { default as CmdProgressBar } from '@/components/CmdProgressBar.vue'
 export { default as CmdSidebar } from '@/components/CmdSidebar.vue'
 export { default as CmdSiteFooter } from '@/components/CmdSiteFooter.vue'

package/src/main.js

@@ -27,7 +27,7 @@ import '@/assets/styles/editmode-iconfont.css'
 import '@/assets/styles/component-library-global-styles.scss'
 
 /* import css for global transitions */
-import '@/assets/styles/transitions.scss'
+import '@/assets/styles/transitions.css'
 
 /* import css-example for your custom styles */
 import '@/assets/styles/template.css'

package/src/mixins/CmdFakeSelect/DefaultMessageProperties.js

@@ -7,7 +7,6 @@ export default {
         "cmdfakeselect.linktext.select_all_options": "Select all options",
         "cmdfakeselect.headline.an_option_is_selected": "An option is selected",
         "cmdfakeselect.option.options_selected": "{0} options selected"
-
       }
     }
   }

package/src/mixins/pages/BasicForm/DefaultMessageProperties.js

@@ -0,0 +1,28 @@
+export default {
+  data() {
+    return {
+      defaultMessageProperties: {
+        "basic_form.legend": "Basic Form",
+        "basic_form.labeltext.salutation_male": "Mr.",
+        "basic_form.labeltext.salutation_female": "Mrs.",
+        "basic_form.labeltext.last_name": "Last name:",
+        "basic_form.placeholder.last_name": "Last name:",
+        "basic_form.labeltext.first_name": "First name:",
+        "basic_form.placeholder.first_name": "First name:",
+        "basic_form.labeltext.email": "Email:",
+        "basic_form.placeholder.email": "Email:",
+        "basic_form.labeltext.phone": "Phone:",
+        "basic_form.placeholder.phone": "Phone:",
+        "basic_form.labeltext.street_no": "Street/No.:",
+        "basic_form.placeholder.street_no": "Street/No.:",
+        "basic_form.labeltext.zip": "Zip:",
+        "basic_form.placeholder.zip": "Zip:",
+        "basic_form.labeltext.city": "City:",
+        "basic_form.placeholder.city": "City:",
+        "basic_form.labeltext.additional_address_info": "Additional address information",
+        "basic_form.placeholder.additional_address_info": "Additional address information",
+        "basic_form.labeltext.data_privacy": "I accept handling and saving of my personal data a mentioned in the <a href='/content/data-privacy-en.html' class='fancybox'>private policy</a>."
+      }
+    }
+  }
+}