comand-component-library 3.3.87 → 4.0.1

package/src/components/CmdSlideButton.vue

@@ -66,8 +66,6 @@ export default {
 
 <style lang="scss">
 /* begin cmd-slide-button ---------------------------------------------------------------------------------------- */
-@import '../assets/styles/variables';
-
 .cmd-slide-button {
     &.button {
         font-size: 2rem;
@@ -84,10 +82,6 @@ export default {
             align-self: center;
         }
 
-        &:hover, &:active, &:focus {
-            transition: var(--default-transition);
-        }
-
         &.prev {
             left: 0;
             top: 0;
@@ -111,7 +105,15 @@ export default {
         }
     }
 
-    @media only screen and (max-width: $small-max-width) {
+
+}
+</style>
+
+<style lang="scss">
+@import '../assets/styles/variables';
+
+@media only screen and (max-width: $small-max-width) {
+    .cmd-slide-button {
         &.button {
             width: auto; /* overwrite button-behavior for small-devices from frontend-framework */
         }

package/src/components/CmdSlideshow.vue

@@ -313,10 +313,8 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-slideshow ---------------------------------------------------------------------------------------- */
-@import '../assets/styles/variables';
-
 .cmd-slideshow {
     figure a, img {
         display: block;
@@ -375,12 +373,11 @@ export default {
 
         .image-wrapper {
             width: 100%;
-            min-width: 11.1rem; // assure to be as wide as action-buttons in edit-mode
+            min-width: 11.1rem; /* assure to be as wide as action-buttons in edit-mode */
             min-height: 50rem;
         }
 
         > ol {
-            display: -webkit-flex; /* Safari 6-8 */
             display: flex;
             margin: 0 auto;
             position: absolute;
@@ -404,7 +401,7 @@ export default {
                 }
 
                 &:hover, &:active, &:focus, &.active {
-                    border-color: var(--pure-white);
+                    border-color: var(--hyperlink-color);
 
                     a {
                         background: var(--pure-white);
@@ -448,12 +445,6 @@ export default {
             background: var(--pure-white-reduced-opacity);
         }
     }
-
-    @media only screen and (max-width: $medium-max-width) {
-        figcaption {
-            font-size: 2rem;
-        }
-    }
 }
 
 .edit-mode .cmd-slideshow .image-wrapper.edit-items {
@@ -464,6 +455,17 @@ export default {
         font-size: 3rem;
     }
 }
+</style>
 
+<style lang="scss">
+@import '../assets/styles/variables';
+
+@media only screen and (max-width: $medium-max-width) {
+    .cmd-slideshow {
+        figcaption {
+            font-size: 2rem;
+        }
+    }
+}
 /* end cmd-slideshow ------------------------------------------------------------------------------------------ */
 </style>

package/src/components/CmdSocialNetworks.vue

@@ -21,12 +21,17 @@
 
         <!-- 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) -->
 
             <!-- begin edit-mode -->
             <EditComponentWrapper
@@ -254,8 +259,6 @@ export default {
 
 <style lang="scss">
 /* begin cmd-social-networks -------------------------------------------------------------------------------------------- */
-@import "../assets/styles/variables";
-
 .cmd-social-networks {
     display: flex;
     flex-direction: column;
@@ -285,7 +288,7 @@ export default {
                 margin: 0;
             }
 
-          &.text-align-right {
+            &.text-align-right {
                 flex-direction: row-reverse;
             }
         }
@@ -401,6 +404,10 @@ export default {
         --social-network-color: #0077b5;
     }
 }
+</style>
+
+<style lang="scss">
+@import "../assets/styles/variables";
 
 @container (max-width: #{$small-max-width}) {
     .button-wrapper {

package/src/components/CmdSocialNetworksItem.vue

@@ -10,11 +10,7 @@
             :title="tooltip(network.tooltip)">
 
             <!-- begin CmdIcon -->
-            <CmdIcon
-                v-if="network.iconClass"
-                :iconClass="network.iconClass"
-                :type="network.iconType"
-            />
+            <CmdIcon v-if="network.iconClass" :iconClass="network.iconClass" :type="network.iconType" />
             <!-- end CmdIcon -->
 
             <span v-if="network.linkText">{{ network.linkText }}</span>
@@ -46,8 +42,7 @@ export default {
          * toggle if user has to accept that anonymous data will be send while sharing
          */
         userMustAcceptDataPrivacy: {
-            type: Boolean,
-            default: true
+            type: Boolean
         },
         /**
          * alignment for buttons

package/src/components/CmdSwitchLanguage.vue

@@ -80,7 +80,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-switch-language ---------------------------------------------------------------------------------------- */
 .cmd-switch-language {
     ul {

package/src/components/CmdSystemMessage.vue

@@ -130,9 +130,10 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-system-message ---------------------------------------------------------------------------------------- */
 .cmd-system-message {
+    display: inline-flex;
     margin: var(--default-margin) 0;
     align-items: center;
 
@@ -158,31 +159,35 @@ export default {
         text-decoration: none;
         z-index: 100;
         line-height: 1;
+        background: var(--pure-white);
+        border-radius: var(--full-circle);
 
         [class*="icon-"] {
-            color: var(--pure-white);
+            color: var(--default-text-color);
         }
 
         &:hover, &:active, &:focus {
+            background: none;
+
             [class*="icon-"] {
-                color: var(--hyperlink-color);
+                color: var(--pure-white);
             }
         }
     }
 
     &.warning {
         > a:not(.button) {
-            border-color: var(--text-color);
+            border-color: var(--default-text-color);
 
             [class*="icon-"] {
-                color: var(--text-color);
+                color: var(--default-text-color);
             }
 
             &:hover, &:active, &:focus {
                 border-color: var(--hyperlink-color);
 
                 [class*="icon-"] {
-                    color: var(--hyperlink-color);
+                    color: var(--pure-white);
                 }
             }
         }

package/src/components/CmdTable.vue

@@ -20,7 +20,7 @@
                 <!-- end CmdIcon -->
             </a>
         </div>
-        <div class="inner-wrapper" ref="innerWrapper">
+        <div class="inner-wrapper" ref="innerWrapper" @scroll="updatePosition">
             <!-- begin CmdSlideButton -->
             <CmdSlideButton
                 v-if="showSlideButtons"
@@ -83,7 +83,7 @@ export default {
     data() {
         return {
             showTableData: true,
-            fullWidth: this.fullWidthOnDefault,
+            fullWidth: false,
             hasOverflow: false
         }
     },
@@ -190,8 +190,6 @@ export default {
         }
     },
     mounted() {
-        console.log("this.$refs.innerWrapper.clientWidth", this.$refs.innerWrapper.clientWidth)
-        console.log("this.$refs.table.clientWidth", this.$refs.table.clientWidth)
         this.hasOverflow = this.$refs.table.clientWidth > this.$refs.innerWrapper.clientWidth
     },
     computed: {
@@ -209,16 +207,70 @@ export default {
     },
     methods: {
         scrollLeft() {
-            this.$refs.table.scrollLeft = 0
+            this.$refs.innerWrapper.scrollLeft = 0
+            this.$refs.table.previousElementSibling.style.cssText = "left: 0;"
+            this.updatePosition()
         },
         scrollRight() {
-            this.$refs.table.scrollRight = 0
+            this.$refs.table.querySelector("th:last-child").scrollIntoView()
+            this.$refs.table.nextElementSibling.style.cssText = "right: auto;"
+            this.updatePosition()
+        },
+        updatePosition() {
+            const leftSlidebutton = this.$refs.table.previousElementSibling
+            const rightSlidebutton = this.$refs.table.nextElementSibling
+            const innerWrapper = this.$refs.innerWrapper
+
+            const parentRect = innerWrapper.getBoundingClientRect();
+            const newRight = parentRect.width + innerWrapper.scrollLeft - rightSlidebutton.getBoundingClientRect().width
+            const newLeft = innerWrapper.scrollLeft
+
+            console.log("parentRect", parentRect)
+
+            leftSlidebutton.style.left = `${newLeft}px`
+            rightSlidebutton.style.left = `${newRight}px`;
+
+            if(newLeft === 0) {
+                leftSlidebutton.style.display = "none"
+            } else {
+                leftSlidebutton.style.display = "flex"
+            }
+
+            if(newLeft === innerWrapper.scrollLeftMax) {
+               rightSlidebutton.style.display = "none"
+            } else {
+               rightSlidebutton.style.display = "flex"
+            }
+
+            //     const parentRect = this.$refs.innerWrapper.getBoundingClientRect();
+            //     const rightSlidebutton = this.$refs.table.nextElementSibling.getBoundingClientRect();
+            //     const leftSlidebutton = this.$refs.table.previousElementSibling.getBoundingClientRect();
+            //
+            //     // Calculate the new right position
+            //     const newRight = rightSlidebutton.width + parentRect.right;
+            //     const newLeft = parentRect.width - parentRect.left;
+            // console.log("parentRect.width", parentRect.width)
+            //     console.log("parentRect.right", parentRect.right)
+            // console.log("parentRect.left", parentRect.left)
+            //
+            //     // Apply the new right position
+            // this.$refs.table.nextElementSibling.style.left = `${newRight}px`;
+            // this.$refs.table.previousElementSibling.style.right = `${newLeft}px`;
+        }
+
+    },
+    watch: {
+        fullWidthOnDefault: {
+            handler() {
+                this.fullWidth = this.fullWidthOnDefault
+            },
+            immediate: true
         }
     }
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-table-wrapper ---------------------------------------------------------------------------------------- */
 .cmd-table-wrapper {
     display: inline-flex;
@@ -264,11 +316,11 @@ export default {
 
         .cmd-slide-button {
             left: 0;
-        }
 
-        .cmd-slide-button:last-child {
-            right: 0;
-            left: auto;
+            &:last-child {
+                right: 0;
+                left: auto;
+            }
         }
 
         table {
@@ -300,11 +352,7 @@ export default {
 
     &.has-overflow {
         .cmd-slide-button {
-            display: block;
-        }
-
-        .inner-wrapper {
-            padding: 0 4rem;
+            display: flex;
         }
     }
 }

package/src/components/CmdTabs.vue

@@ -103,11 +103,11 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-tabs ------------------------------------------------------------------------------------------ */
 .cmd-tabs {
     > ul {
-        margin-bottom: 0;
+        margin: 0;
         display: flex;
 
         > li {

package/src/components/CmdTextImageBlock.vue

@@ -78,6 +78,8 @@ export default {
         },
         /**
          * text-alignment for paragraph/continuous text
+         *
+         * @allowedValues: "left", "center", "right"
          */
         paragraphTextAlign: {
             type: String,
@@ -151,7 +153,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 .edit-mode .cmd-text-image-block textarea {
     width: 100%;
 }