comand-component-library 4.0.6 → 4.0.8

package/src/components/CmdUploadForm.vue

@@ -24,7 +24,8 @@
         </CmdSystemMessage>
         <!-- end CmdSystemMessage -->
 
-        <div :class="['box flex-container vertical', { 'drop-area': enableDragAndDrop, 'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
+        <div :class="['box flex-container vertical', { 'drop-area': enableDragAndDrop, 'allow-drop': allowDrop }]"
+             v-on="dragAndDropHandler">
             <template v-if="!listOfFiles.length">
                 <!-- begin CmdHeadline -->
                 <CmdHeadline v-if="allowMultipleFileUploads" v-bind="cmdHeadlineNoFilesToUpload" headlineLevel="4">
@@ -35,7 +36,8 @@
 
             <!-- begin total-upload information -->
             <div v-else class="flex-container vertical">
-                <div v-if="showTotalUpload && listOfFiles.length !== 1" class="flex-container vertical list-files-wrapper">
+                <div v-if="showTotalUpload && listOfFiles.length !== 1"
+                     class="flex-container vertical list-files-wrapper">
                     <!-- begin CmdHeadline -->
                     <CmdHeadline v-bind="cmdHeadlineSummaryOfAllFiles" headlineLevel="4">
                         {{ getMessage("cmduploadform.headline.summary_of_all_files") }}
@@ -50,7 +52,7 @@
                                 @click.prevent="cancelUpload"
                             >
                                 <!-- begin CmdIcon -->
-                                <CmdIcon :iconClass="deleteIcon.iconClass" :type="deleteIcon.iconClass" />
+                                <CmdIcon :iconClass="deleteIcon.iconClass" :type="deleteIcon.iconClass"/>
                                 <!-- end CmdIcon -->
                             </a>
                             <span>
@@ -103,7 +105,7 @@
                                 @click.prevent="removeFile(index)"
                             >
                                 <!-- begin CmdIcon -->
-                                <CmdIcon :iconClass="iconDelete.iconClass" :type="iconDelete.iconType" />
+                                <CmdIcon :iconClass="iconDelete.iconClass" :type="iconDelete.iconType"/>
                                 <!-- end CmdIcon -->
                             </a>
                             <span
@@ -143,61 +145,65 @@
             <!-- end list of selected files -->
 
             <!-- begin upload conditions -->
-            <!-- begin CmdHeadline -->
-            <CmdHeadline v-if="allowMultipleFileUploads && listOfFiles.length" v-bind="cmdHeadlineSelectAdditionalFiles" headlineLevel="4">
-                {{ getMessage("cmduploadform.headline.select_additional_files") }}
-            </CmdHeadline>
-            <!-- end CmdHeadline -->
-
-            <!-- begin CmdHeadline -->
-            <CmdHeadline v-if="!allowMultipleFileUploads && listOfFiles.length" v-bind="cmdHeadlineSelectNewFile" headlineLevel="4">
-                {{ getMessage("cmduploadform.headline.select_new_file") }}
-            </CmdHeadline>
-            <!-- end CmdHeadline -->
-
-            <dl class="small">
-                <template v-if="maxTotalUploadSize > 0">
-                    <dt :class="{ error: totalSize > maxTotalUploadSize }">
-                        {{ getMessage("cmduploadform.max_total_upload_size") }}
+            <div class="upload-conditions">
+                <!-- begin CmdHeadline -->
+                <CmdHeadline v-if="allowMultipleFileUploads && listOfFiles.length"
+                             v-bind="cmdHeadlineSelectAdditionalFiles" headlineLevel="4">
+                    {{ getMessage("cmduploadform.headline.select_additional_files") }}
+                </CmdHeadline>
+                <!-- end CmdHeadline -->
+
+                <!-- begin CmdHeadline -->
+                <CmdHeadline v-if="!allowMultipleFileUploads && listOfFiles.length" v-bind="cmdHeadlineSelectNewFile"
+                             headlineLevel="4">
+                    {{ getMessage("cmduploadform.headline.select_new_file") }}
+                </CmdHeadline>
+                <!-- end CmdHeadline -->
+
+                <dl class="small">
+                    <template v-if="maxTotalUploadSize > 0">
+                        <dt :class="{ error: totalSize > maxTotalUploadSize }">
+                            {{ getMessage("cmduploadform.max_total_upload_size") }}
+                        </dt>
+                        <dd :class="['text-align-right', { error: totalSize > maxTotalUploadSize }]">
+                            {{ formatSize(maxTotalUploadSize) }}
+                        </dd>
+                    </template>
+                    <dt :class="{ error: errors.fileSize }">
+                        {{ getMessage("cmduploadform.max_file_upload_size") }}
                     </dt>
-                    <dd :class="['text-align-right', { error: totalSize > maxTotalUploadSize }]">
-                        {{ formatSize(maxTotalUploadSize) }}
+                    <dd :class="['text-align-right', { error: errors.fileSize }]">
+                        {{ formatSize(maxFileUploadSize) }}
                     </dd>
-                </template>
-                <dt :class="{ error: errors.fileSize }">
-                    {{ getMessage("cmduploadform.max_file_upload_size") }}
-                </dt>
-                <dd :class="['text-align-right', { error: errors.fileSize }]">
-                    {{ formatSize(maxFileUploadSize) }}
-                </dd>
-                <dt :class="{ error: errors.fileType }">
-                    {{ getMessage("cmduploadform.allowed_file_types") }}
-                </dt>
-                <dd>
-                    <a
-                        href="#"
-                        @click.prevent="showListOfFileExtensions = !showListOfFileExtensions"
-                        :title="getMessage('cmduploadform.tooltip.toggle_list_of_allowed_file_types')">
-                        <!-- begin CmdIcon -->
-                        <CmdIcon
-                            :iconClass="showListOfFileExtensions ? iconInvisible.iconClass : iconVisible.iconClass"
-                            :type="showListOfFileExtensions ? iconInvisible.iconType : iconVisible.iconType"
-                        />
-                        <!-- end CmdIcon -->
-                    </a>
-                    <transition name="fade">
-                        <ul v-if="showListOfFileExtensions" class="list-of-file-extensions">
-                            <li
-                                v-for="(fileExtension, index) in allowedFileExtensions"
-                                :key="index"
-                                :class="{ error: errors.fileType }"
-                            >
-                                {{ fileExtension }}
-                            </li>
-                        </ul>
-                    </transition>
-                </dd>
-            </dl>
+                    <dt :class="{ error: errors.fileType }">
+                        {{ getMessage("cmduploadform.allowed_file_types") }}
+                    </dt>
+                    <dd>
+                        <a
+                            href="#"
+                            @click.prevent="showListOfFileExtensions = !showListOfFileExtensions"
+                            :title="getMessage('cmduploadform.tooltip.toggle_list_of_allowed_file_types')">
+                            <!-- begin CmdIcon -->
+                            <CmdIcon
+                                :iconClass="showListOfFileExtensions ? iconInvisible.iconClass : iconVisible.iconClass"
+                                :type="showListOfFileExtensions ? iconInvisible.iconType : iconVisible.iconType"
+                            />
+                            <!-- end CmdIcon -->
+                        </a>
+                        <transition name="fade">
+                            <ul v-if="showListOfFileExtensions" class="list-of-file-extensions">
+                                <li
+                                    v-for="(fileExtension, index) in allowedFileExtensions"
+                                    :key="index"
+                                    :class="{ error: errors.fileType }"
+                                >
+                                    {{ fileExtension }}
+                                </li>
+                            </ul>
+                        </transition>
+                    </dd>
+                </dl>
+            </div>
             <!-- end upload conditions -->
 
             <!-- begin upload-button and drag-and-drop-text -->
@@ -209,7 +215,7 @@
                     @click="selectFiles()"
                 >
                     <!-- begin CmdIcon -->
-                    <CmdIcon :iconClass="iconFileUpload.iconClass" :type="iconFileUpload.iconType" />
+                    <CmdIcon :iconClass="iconFileUpload.iconClass" :type="iconFileUpload.iconType"/>
                     <!-- end CmdIcon -->
                     <span v-if="allowMultipleFileUploads">{{
                             getMessage("cmduploadform.labeltext.select_files")
@@ -265,7 +271,7 @@
                 @click="uploadFiles"
             >
                 <!-- begin CmdIcon -->
-                <CmdIcon :iconClass="iconUpload.iconClass" :type="iconUpload.iconType" />
+                <CmdIcon :iconClass="iconUpload.iconClass" :type="iconUpload.iconType"/>
                 <!-- end CmdIcon -->
                 <span v-if="listOfFiles.length === 1 || !allowMultipleFileUploads">
                     {{ getMessage("cmduploadform.buttontext.upload_file") }}
@@ -274,7 +280,7 @@
             </button>
             <button :class="['button', { disabled: listOfFiles.length === 0 }]" @click="cancel">
                 <!-- begin CmdIcon -->
-                <CmdIcon :iconClass="iconCancel.iconClass" :type="iconCancel.iconType" />
+                <CmdIcon :iconClass="iconCancel.iconClass" :type="iconCancel.iconType"/>
                 <!-- end CmdIcon -->
                 <span>{{ getMessage("cmduploadform.buttontext.cancel") }}</span>
             </button>
@@ -283,7 +289,9 @@
     <!-- end advanced mode -->
 
     <!-- begin simple mode -->
-    <a v-else href="#" @click.prevent="selectFiles" :class="['cmd-upload-form box', { 'drop-area': enableDragAndDrop, 'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
+    <a v-else href="#" @click.prevent="selectFiles"
+       :class="['cmd-upload-form box', { 'drop-area': enableDragAndDrop, 'allow-drop': allowDrop }]"
+       v-on="dragAndDropHandler">
         <!-- begin progressbar -->
         <span class="progressbar" v-if="uploadInitiated">
             <span>{{ getPercentage(totalUploadProgress) }}</span>
@@ -301,20 +309,20 @@
                 <template v-if="fileTypeImage">
                     <span>{{ getMessage("cmduploadform.select_image") }}</span>
                     <!-- begin CmdIcon -->
-                    <CmdIcon :iconClass="iconImage.iconClass" :type="iconImage.iconType" />
+                    <CmdIcon :iconClass="iconImage.iconClass" :type="iconImage.iconType"/>
                     <!-- end CmdIcon -->
                 </template>
                 <template v-else>
                     <span>{{ getMessage("cmduploadform.select_file") }}</span>
                     <!-- begin CmdIcon -->
-                    <CmdIcon :iconClass="iconFileUpload.iconClass" :type="iconFileUpload.iconType" />
+                    <CmdIcon :iconClass="iconFileUpload.iconClass" :type="iconFileUpload.iconType"/>
                     <!-- end CmdIcon -->
                 </template>
             </template>
             <template v-else>
                 <span>{{ getMessage("cmduploadform.drag_and_drop_file_here") }}</span>
                 <!-- begin CmdIcon -->
-                <CmdIcon :iconClass="iconDragAndDrop.iconClass" :type="iconDragAndDrop.iconType" />
+                <CmdIcon :iconClass="iconDragAndDrop.iconClass" :type="iconDragAndDrop.iconType"/>
                 <!-- end CmdIcon -->
             </template>
             <small>{{ getMessage("cmduploadform.max_upload_size") }} {{ formatSize(maxFileUploadSize) }}</small>
@@ -1187,6 +1195,12 @@ export default {
         }
     }
 
+    .upload-conditions {
+        .cmd-headline > * {
+            text-align: center;
+        }
+    }
+
     p {
         &.text-drag-and-drop {
             &.disabled {

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

@@ -376,21 +376,34 @@ function buildComponentPath(component) {
 
     display: block;
 
+    label {
+        &.text-center input {
+            text-align: center;
+        }
+
+        &.edit-mode input, select, .cmd-fake-select {
+            padding: 0;
+            height: auto;
+            min-height: calc(var(--input-height) / 2);
+        }
+    }
+
+    [data-component="CmdSlideshow"] {
+        top: 1.8rem;
+        right: 5.3rem;
+    }
+
     &.highlight {
         border-color: var(--hyperlink-color-highlighted);
         border-style: dotted;
     }
 
-    .cmd-headline {
-        margin: 0;
-    }
-
     .component-name {
         display: none;
         position: absolute;
         left: auto;
         right: 8rem;
-        font-size: 1rem;
+        font-size: 1.1rem;
         font-style: italic;
         z-index: 1;
         padding: .2rem 2rem .2rem .5rem;
@@ -398,15 +411,6 @@ function buildComponentPath(component) {
         margin: 0;
     }
 
-    &.active {
-        border-color: var(--pure-white);
-        min-height: 2.5rem;
-
-        .component-name {
-            display: block;
-        }
-    }
-
     .action-buttons {
         --action-buttons-size: 3.6rem;
 
@@ -456,8 +460,10 @@ function buildComponentPath(component) {
             left: 0;
             right: auto; /* avoids container to be stretched */
             flex-wrap: nowrap;
+            border: var(--default-border);
+            border-color: var(--pure-white);
             border-bottom: 0;
-            backdrop-filter: var(--primary-color);
+            background: var(--pure-white);
             border-radius: var(--default-border-radius);
 
             li {
@@ -504,20 +510,74 @@ function buildComponentPath(component) {
                         top: 0;
                         left: 0;
                         transform: none;
+
+                        &::before {
+                            color: var(--hyperlink-color)
+                        }
                     }
 
                     &.primary {
                         background: var(--primary-color);
                     }
+
+                    &:hover, &:active, &:focus {
+                        span[class*="icon-"] {
+                            &::before {
+                                color: var(--hyperlink-color-highlighted)
+                            }
+                        }
+                    }
                 }
             }
         }
 
         &.active {
-            //width: 100%; /* stretch inside flex-container */
-            background: var(--pure-white);
+            background: hsla(0, 0%, 100%, .2);
+        }
+    }
+
+    &.active {
+        //width: 100%; /* stretch inside flex-container */
+        background: var(--pure-white);
+        border-color: var(--pure-white);
+        min-height: 2.5rem;
+
+        .component-name {
+            display: block;
+        }
+
+        label {
+            &.cmd-form-element {
+                :is(input[type="checkbox"], input[type="radio"]):checked {
+                    & ~ .label-text span {
+                        color: var(--pure-white);
+                    }
+                }
+            }
+        }
+    }
+
+    /* begin edit-mode-styles for specific components */
+    .cmd-headline {
+        margin: 0;
+    }
+
+    .cmd-thumbnail-scroller {
+        .inner-thumbnail-wrapper > ul > li {
+            align-self: flex-start;
+        }
+
+        .cmd-image .drop-area span[class*="icon"] {
+            font-size: 5rem;
+        }
+    }
+
+    .cmd-image {
+        input {
+            width: 5rem;
         }
     }
+    /* end edit-mode-styles for specific components */
 
     // begin component-level only
     &:not(.edit-items) {

package/src/index.js

@@ -26,7 +26,8 @@ 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 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/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>."
+      }
+    }
+  }
+}