comand-component-library 3.3.7 → 3.3.8

package/src/components/CmdMainNavigation.vue

@@ -439,7 +439,7 @@ export default {
                                 span {
                                     font-weight: bold;
 
-                                    &[class*="icon"] {
+                                    &[class*="icon-"] {
                                         font-size: var(--font-size-small);
                                     }
                                 }
@@ -472,7 +472,7 @@ export default {
                                     padding-left: calc(var(--default-margin) * 2);
 
                                     span {
-                                        & + span[class*="icon"]::before {
+                                        & + [class*="icon-"]::before {
                                             display: inline-block;
                                             transform: rotate(0);
                                         }
@@ -492,7 +492,7 @@ export default {
 
                         &.open {
                             > a span {
-                                + span[class*="icon"]::before {
+                                + [class*="icon-"]::before {
                                     display: inline-block;
                                     transform: rotate(-180deg);
                                 }

package/src/components/CmdMultistepFormProgressBar.vue

@@ -130,10 +130,10 @@ export default {
             width: 100%;
             background: var(--primary-color-reduced-opacity);
 
-            span, span[class*="icon"] {
+            span, [class*="icon-"] {
                 color: var(--default-background-color-reduced-opacity);
 
-                & + span[class*="icon"] {
+                & + [class*="icon-"] {
                     &:last-child {
                         border: var(--default-border);
                         border-radius: var(--full-circle);
@@ -155,7 +155,7 @@ export default {
                 }
 
                 &:hover, &:active, &:focus {
-                    span, span[class*="icon"] {
+                    span, [class*="icon-"] {
                         color: var(--pure-white);
                     }
                 }
@@ -181,7 +181,7 @@ export default {
 
         &:last-child {
             a {
-                span[class*="icon-"] {
+                [class*="icon-"] {
                     &:last-of-type {
                         display: none;
                     }
@@ -193,7 +193,7 @@ export default {
             a {
                 background: var(--primary-color);
 
-                span, span[class*='icon'] {
+                span, [class*="icon-"] {
                     color: var(--pure-white);
                 }
             }
@@ -215,7 +215,7 @@ export default {
                     span, span[class*='color'] {
                         color: inherit;
 
-                        & + span[class*="icon"] {
+                        & + [class*="icon-"] {
                             &:last-child {
                                 border-color: var(--border-color);
                                 color: var(--pure-white);
@@ -225,7 +225,7 @@ export default {
                     }
 
                     &:hover, &:active, &:focus {
-                        span, span[class*="icon"] {
+                        span, [class*="icon-"] {
                             &:not(:last-child) {
                                 color: var(--primary-color);
                             }
@@ -251,8 +251,8 @@ export default {
             }
 
             a {
-                span, span[class*="icon"] {
-                    & + span[class*="icon"] {
+                span, [class*="icon-"] {
+                    & + [class*="icon-"] {
                         &:last-child {
                             left: auto;
                             right: auto;

package/src/components/CmdPager.vue

@@ -1,42 +1,54 @@
 <template>
     <div class="cmd-pager">
-        <div class="pager">
-            <!-- begin button to previous page -->
-            <a class="page-change" :class="{'disabled': currentPage === 1, 'button': showLinksAsButtons}"
-               @click.prevent="previousPage">
-                <span :class="prevButton.iconClass"></span><span v-if="prevButton.buttonText">{{
-                    prevButton.buttonText
-                }}</span>
-            </a>
-            <!-- end button to previous page -->
-
-            <!-- begin buttons with page numbers -->
-            <div class="page-index">
-                <div class="flex-container">
-                    <a :class="{'disabled': currentPage === index + 1, 'button': showLinksAsButtons}"
-                       v-for="(item, index) in items"
-                       :key="index"
-                       @click.stop.prevent="showPage(item)" aria-live="polite">
-                        <span>{{ index + 1 }}</span>
-                    </a>
-                </div>
+        <!-- begin button/link to previous page -->
+        <a
+            :href="getPreviousHref"
+            :class="['page-change', {'disabled': currentPage === 1, 'button': linkType === 'button'}]"
+            @click.prevent="previousPage"
+            :title="!prevLink.showText ? prevLink.text : null"
+        >
+            <!-- begin CmdIcon -->
+            <CmdIcon :iconClass="prevLink.iconClass" :type="prevLink.iconType"/>
+            <!-- end CmdIcon -->
+            <span v-if="prevLink.showText">{{ prevLink.text }}</span>
+        </a>
+        <!-- end button/link to previous page -->
+
+        <!-- begin buttons/link with page numbers -->
+        <div class="page-index">
+            <div class="flex-container">
+                <a :href="getHref(page)"
+                   :class="{'disabled': currentPage === index + 1, 'button': linkType === 'button'}"
+                   :title="currentPage !== index + 1 ? getMessage('cmdpager.tooltip.go_to_page', index + 1) : getMessage('cmdpager.tooltip.not_possible')"
+                   v-for="(page, index) in pages"
+                   :key="index"
+                   @click.stop.prevent="showPage(page)" aria-live="polite">
+                    <span>{{ index + 1 }}</span>
+                </a>
             </div>
-            <!-- end buttons with page numbers -->
-
-            <!-- begin button to next page -->
-            <a class="page-change" :class="{'disabled': currentPage === numberOfPages, 'button': showLinksAsButtons}"
-               @click.prevent="nextPage">
-                <span v-if="nextButton.buttonText">{{ nextButton.buttonText }}</span>
-                <!-- begin CmdIcon -->
-                <CmdIcon :iconClass="nextButton.iconClass" :type="nextButton.iconType" />
-                <!-- end CmdIcon -->
-            </a>
-            <!-- end button to next page -->
         </div>
+        <!-- end buttons/link with page numbers -->
+
+        <!-- begin button/link to next page -->
+        <a :href="getNextHref"
+           :class="['page-change', {'disabled': currentPage === numberOfPages, 'button': linkType === 'button'}]"
+           @click.prevent="nextPage"
+           :title="!nextLink.showText ? nextLink.text : null"
+        >
+            <span v-if="nextLink.showText">{{ nextLink.text }}</span>
+            <!-- begin CmdIcon -->
+            <CmdIcon :iconClass="nextLink.iconClass" :type="nextLink.iconType"/>
+            <!-- end CmdIcon -->
+        </a>
+        <!-- end button/link to next page -->
     </div>
 </template>
 
 <script>
+// import mixins
+import I18n from "../mixins/I18n"
+import DefaultMessageProperties from "../mixins/CmdPager/DefaultMessageProperties"
+
 // import components
 import CmdIcon from "./CmdIcon"
 
@@ -45,6 +57,10 @@ export default {
     components: {
         CmdIcon
     },
+    mixins: [
+      I18n,
+      DefaultMessageProperties
+    ],
     emits: ['click'],
     data() {
         return {
@@ -53,9 +69,9 @@ export default {
     },
     props: {
         /**
-         * number of items displayed
+         * number of pages displayed
          */
-        items: {
+        pages: {
             type: Number,
             required: true
         },
@@ -67,37 +83,41 @@ export default {
             required: true
         },
         /**
-         * show links as buttons
+         * set type of links
+         *
+         * @allowedValues: "href", "button"
          */
-        showLinksAsButtons: {
-            type: Boolean,
-            default: true
+        linkType: {
+            type: String,
+            default: "href"
         },
         /**
-         * button to switch to previous page
+         * link to switch to previous page
          *
          * @requiredForAccessibility: partial
          */
-        prevButton: {
+        prevLink: {
             type: Object,
-            default: function() {
+            default: function () {
                 return {
                     iconClass: "icon-single-arrow-left",
-                    buttonText: "prev"
+                    text: "prev",
+                    showText: true
                 }
             }
         },
         /**
-         * button to switch to next page
+         * link to switch to next page
          *
          * @requiredForAccessibility: partial
          */
-        nextButton: {
+        nextLink: {
             type: Object,
-            default: function() {
+            default: function () {
                 return {
                     iconClass: "icon-single-arrow-right",
-                    buttonText: "next"
+                    text: "next",
+                    showText: true
                 }
             }
         }
@@ -105,12 +125,30 @@ export default {
     computed: {
         numberOfPages() {
             return Math.ceil(this.items / this.itemsPerPage)
+        },
+        getPreviousHref() {
+            if (this.currentPage === 1) {
+                return null
+            }
+            return "#"
+        },
+        getNextHref() {
+            if (this.currentPage === this.numberOfPages) {
+                return null
+            }
+            return "#"
         }
     },
     methods: {
+        getHref(page) {
+            if (this.linkType !== "href" || this.currentPage === page) {
+                return null
+            }
+            return "#"
+        },
         showPage(page) {
             this.currentPage = page
-            this.$emit('click', page)
+            this.$emit("click", page)
         },
         nextPage() {
             if (this.currentPage < this.numberOfPages) {
@@ -128,70 +166,68 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../assets/styles/variables';
 /* begin cmd-pager ---------------------------------------------------------------------------------------- */
+@import '../assets/styles/variables';
+
 .cmd-pager {
-    > p {
-        text-align: center;
+    display: flex;
+    justify-content: space-between;
+
+    button, .button {
+        float: none;
+        margin: 0;
+
+        span {
+            align-self: center;
+        }
     }
 
-    .pager {
+    a {
         display: flex;
-        justify-content: space-between;
-
-        button, .button {
-            float: none;
-            margin: 0;
+        align-items: center;
+        text-decoration: none;
 
-            span {
-                align-self: center;
-            }
+        &:hover, &:active, &:focus {
+            cursor: pointer;
         }
 
-        > a {
-            &:last-of-type {
-                > [class*="icon-"] {
-                    margin-right: 0;
-                }
-            }
-
+        &:last-of-type {
             > [class*="icon-"] {
-                font-size: var(--icon-size-small);
+                margin-right: 0;
             }
         }
 
-        a.disabled {
-            opacity: var(--reduced-opacity);
+        > [class*="icon-"] {
+            font-size: var(--icon-size-small);
         }
+    }
 
-        .page-index {
-            a:not(.button) {
-                padding: calc(var(--default-padding) / 2);
-                padding-top: 0;
-            }
+    .page-index {
+        a:not(.button) {
+            padding: 0 calc(var(--default-padding) / 2);
         }
+    }
 
-        @media only screen and (max-width: $medium-max-width) {
-            > a.button {
-                span {
-                    margin: 0;
+    @media only screen and (max-width: $medium-max-width) {
+        > a.button {
+            span {
+                margin: 0;
 
-                    &:not([class*='icon']) {
-                        display: none;
-                    }
+                &:not([class*='icon']) {
+                    display: none;
                 }
             }
         }
+    }
 
-        @media only screen and (max-width: $small-max-width) {
-            .button {
-                width: auto; /* overwrite default settings from framework.css */
-            }
+    @media only screen and (max-width: $small-max-width) {
+        .button {
+            width: auto; /* overwrite default settings from framework.css */
+        }
 
-            .page-index {
-                .flex-container {
-                    flex-direction: row; /* overwrite default settings from framework.css */
-                }
+        .page-index {
+            .flex-container {
+                flex-direction: row; /* overwrite default settings from framework.css */
             }
         }
     }

package/src/components/CmdShareButtons.vue

@@ -271,7 +271,7 @@ export default {
             flex: none;
             width: auto !important;
 
-            span[class*="icon"] {
+            [class*="icon-"] {
                 & + span {
                     display: none;
                 }

package/src/components/CmdSlideButton.vue

@@ -3,13 +3,21 @@
        @click.prevent
        :class="['cmd-slide-button', 'button', slideButtonType]"
        :title="getDirection.tooltip">
-        <span :class="getDirection.iconClass || 'next'"></span>
+        <!-- being CmdIcon -->
+        <CmdIcon :iconClass="getDirection.iconClass || 'next'" />
+        <!-- end CmdIcon -->
     </a>
 </template>
 
 <script>
+// import components
+import CmdIcon from "./CmdIcon"
+
 export default {
     name: "CmdSlideButton",
+    components: {
+        CmdIcon
+    },
     props: {
         /**
          * set slide-button-type
@@ -88,7 +96,7 @@ export default {
             transition: var(--default-transition);
 
             span {
-                color: var(--primary-color);
+                color: var(--hyperlink-color-highlighted);
             }
         }
 
@@ -105,7 +113,6 @@ export default {
         &.up, &.down {
             width: 100%;
             height: auto;
-            height: auto;
             left: 0;
             top: 0;
         }

package/src/components/CmdSlideshow.vue

@@ -10,23 +10,27 @@
 
             <!-- begin area to slide -->
             <transition name="fade">
-                <a v-if="currentItem?.href" :href="currentItem.href" :key="index" :title="currentItem.title">
+                <a v-if="currentItem?.link?.href" :href="currentItem?.link?.href" :title="currentItem?.link?.tooltip" :key="index">
                     <figure v-if="currentItem && !useSlot" class="slideshow-item">
-                        <img :src="currentItem.imgPath" :alt="currentItem.alt"/>
-                        <figcaption>{{ currentItem.figcaption }}</figcaption>
+                        <!-- begin CmdImage -->
+                        <CmdImage :image="currentItem?.image" :figcaption="currentItem?.figcaption"/>
+                        <!-- begin CmdImage -->
                     </figure>
                 </a>
-                <figure v-else-if="currentItem && !currentItem.href && currentItem && !useSlot" :key="index" class="slideshow-item">
-                        <img :src="currentItem.imgPath" :alt="currentItem.alt"/>
-                        <figcaption>{{ currentItem.figcaption }}</figcaption>
+                <figure v-else-if="currentItem && !currentItem?.link?.href && !useSlot" :key="index" class="slideshow-item">
+                    <!-- begin CmdImage -->
+                    <CmdImage :image="currentItem?.image" :figcaption="currentItem?.figcaption"/>
+                    <!-- begin CmdImage -->
                 </figure>
                 <div
-                    class="image-wrapper"
                     v-else-if="currentItem && useSlot"
+                    class="image-wrapper"
                     :key="index"
-                    :style="'background-image: url(' + currentItem.imgPath + ')'"
+                    :style="'background-image: url(' + currentItem.image.srcLarge + ')'"
                 >
+                    <!-- begin slot -->
                     <slot :name="'item' + currentSlotItem"></slot>
+                    <!-- end slot -->
                 </div>
             </transition>
             <!-- end area to slide -->
@@ -49,6 +53,7 @@
 
 <script>
 // import components
+import CmdImage from "./CmdImage"
 import CmdSlideButton from "./CmdSlideButton"
 
 const NOT_YET_PRELOADED_IMAGE = image => !image.loaded
@@ -67,6 +72,7 @@ export default {
         }
     },
     components: {
+        CmdImage,
         CmdSlideButton
     },
     props: {
@@ -182,14 +188,12 @@ export default {
             }
             this.preload(this.index)
         },
-
         setupSlider() {
             this.preload();
             if (this.autoplay && this.hnd === null) {
                 this.hnd = window.setInterval(() => this.pause || this.showNextItem(), this.autoplayInterval);
             }
         },
-
         preload(index = 0, num = 2) {
             if (!this.preloadComplete) {
                 for (let i = index, n = index + num, c = this.slideshowItems.length; i < n && i < c; i++) {
@@ -202,34 +206,37 @@ export default {
                 this.preloadComplete = !this.slideshowItems.find(NOT_YET_PRELOADED_IMAGES);
             }
         },
-
         getDeviceImage(item) {
-            if (item === undefined || item.images === undefined) {
+            if (item === undefined || item.image === undefined) {
                 return null;
             }
             const deviceWidth = window.innerWidth;
-            const image = {};
-
-            for (let i = 0, c = item.images.length; i < c; i++) {
-                const deviceImage = item.images[i];
-
-                if (!deviceImage.maxWidth || deviceWidth <= deviceImage.maxWidth) {
-                    image.imgPath = deviceImage.imgPath
-                    image.alt = item.alt
-                    image.figcaption = item.figcaption
-                    image.target = item.target
-                    image.title = item.title
-                    return image;
+            const currentImage = {};
+
+            for (let i = 0, c = item.image.length; i < c; i++) {
+                const deviceImage = item.image[i];
+
+                if (!deviceImage.image.maxWidth || deviceWidth <= deviceImage.image.maxWidth) {
+                    currentImage.image.srcSmall = deviceImage.image.srcSmall
+                    currentImage.image.alt = item.image.alt
+                    currentImage.image.tooltip = item.image.tooltip
+                    currentImage.figcaption.text = item.figcaption.text
+                    currentImage.figcaption.position = item.figcaption.position
+                    currentImage.figcaption.textAlign = item.figcaption.textAlign
+                    currentImage.figcaption.show = item.figcaption.show
+                    return currentImage;
                 }
             }
 
-            if (item.images.length) {
-                image.imgPath = item.images[0].imgPath
-                image.alt = item.alt
-                image.figcaption = item.figcaption
-                image.target = item.target
-                image.title = item.title
-                return image;
+            if (item.image.length) {
+                currentImage.image.srcSmall = item.image.srcSmall
+                currentImage.image.alt = item.image.alt
+                currentImage.image.tooltip = item.image.tooltip
+                currentImage.figcaption.text = item.figcaption.text
+                currentImage.figcaption.position = item.figcaption.position
+                currentImage.figcaption.textAlign = item.figcaption.textAlign
+                currentImage.figcaption.show = item.figcaption.show
+                return currentImage;
             }
             return null;
         }

package/src/components/CmdSystemMessage.vue

@@ -22,7 +22,7 @@
             <!-- begin CmdHeadline -->
             <CmdHeadline
                 class="message-headline"
-                :iconClass="iconMessage.iconClass"
+                :headlineIcon="headlineIcon"
                 :headlineText="systemMessage"
                 :headlineLevel="messageHeadlineLevel"
                 :id="htmlId"
@@ -82,7 +82,8 @@ export default {
             default: function() {
                 return {
                     show: true,
-                    iconClass: "icon-warning"
+                    iconClass: "icon-warning",
+                    type: "auto"
                 }
             }
         },
@@ -118,6 +119,17 @@ export default {
             }
         }
     },
+    computed: {
+        headlineIcon() {
+            if(this.iconMessage.show) {
+                return {
+                    iconClass: this.iconMessage.iconClass,
+                    type: this.iconMessage.type
+                }
+            }
+            return null
+        }
+    },
     watch: {
         message() {
             this.showSystemMessage = true
@@ -145,28 +157,32 @@ export default {
         }
     }
 
-    > a[class*="icon-"]:not(.button) {
-        font-size: 0.8rem;
-        font-weight: bold;
-        color: var(--pure-white);
+    > a:not(.button) {
+        display: block;
         position: absolute;
+        top: 0.5rem;
         right: 0.5rem;
         text-decoration: none;
-        top: 0.5rem;
-        border: var(--default-border);
-        border-color: var(--pure-white);
-        border-radius: var(--full-circle);
-        padding: calc(var(--default-padding) / 2);
 
-        &:hover, &:active, &:focus {
-            color: var(--hyperlink-color);
-            border-color: var(--hyperlink-color);
-            background: var(--pure-white);
+        [class*="icon-"] {
+            font-size: 0.8rem;
+            font-weight: bold;
+            color: var(--pure-white);
+            border: var(--default-border);
+            border-color: var(--pure-white);
+            border-radius: var(--full-circle);
+            padding: calc(var(--default-padding) / 2);
+
+            &:hover, &:active, &:focus {
+                color: var(--hyperlink-color);
+                border-color: var(--hyperlink-color);
+                background: var(--pure-white);
+            }
         }
     }
 
     &.warning {
-        > a[class*="icon-"]:not(.button) {
+        > a:not(.button) [class*="icon-"] {
             color: var(--text-color);
             border-color: var(--text-color);
 

package/src/components/CmdTable.vue

@@ -208,7 +208,7 @@ export default {
             min-width: 2rem;
             min-height: 2rem;
 
-            span[class*="icon"] {
+            [class*="icon-"] {
                 font-size: var(--icon-size-small);
             }
         }