comand-component-library 3.1.90 → 3.1.91

package/src/components/CmdShareButtons.vue

@@ -1,21 +1,51 @@
 <template>
-    <div :class="['cmd-share-buttons',{'stretch': stretchButtons, 'align-right': align === 'right'}]">
-        <a v-for="shareButton in validShareButtons"
-           :key="shareButton.path" class="button"
-           :id="shareButton.id"
-           :href="getUrl(shareButton)"
-           target="_blank"
-           :title="shareButton.tooltip">
-            <span v-if="shareButton.iconClass" :class="shareButton.iconClass"></span>
-            <span v-if="shareButton.linkText">{{ shareButton.linkText }}</span>
-        </a>
+    <div :class="['cmd-share-buttons', {'stretch': stretchButtons, 'align-right': align === 'right'}]">
+        <CmdFormElement
+            v-if="userMustAcceptDataPrivacy"
+            element="input"
+            type="checkbox"
+            :toggle-switch="cmdFormElement.toggleSwitch"
+            :labelText="cmdFormElement.labelText"
+            :required="cmdFormElement.required"
+            v-model="dataPrivacyAccepted"
+        />
+        <div class="share-button-wrapper">
+            <a v-for="shareButton in validShareButtons"
+               :key="shareButton.path" :class="['button', {disabled: userMustAcceptDataPrivacy && !dataPrivacyAccepted}]"
+               :id="shareButton.id"
+               :href="getUrl(shareButton)"
+               target="_blank"
+               :title="tooltip(shareButton.tooltip)">
+                <span v-if="shareButton.iconClass && shareButton.iconPosition !== 'right'" :class="shareButton.iconClass"></span>
+                <span v-if="shareButton.linkText">{{ shareButton.linkText }}</span>
+                <span v-if="shareButton.iconClass && shareButton.iconPosition === 'right'" :class="shareButton.iconClass"></span>
+            </a>
+        </div>
     </div>
 </template>
 
 <script>
+// import components
+import CmdFormElement from "./CmdFormElement"
+
 export default {
     name: "CmdShareButtons",
+    components: {
+        CmdFormElement
+    },
+    data() {
+        return {
+            dataPrivacyAccepted: false
+        }
+    },
     props: {
+        /**
+         * set default v-model (must be named modelValue in Vue3)
+         */
+        modelValue: {
+            type: [String, Number, Array],
+            default: ""
+        },
         /**
          * set horizontal alignment
          *
@@ -54,6 +84,37 @@ export default {
         appendPage: {
             type: Boolean,
             default: true
+        },
+        /**
+         * toggle if user has to accept that anonymous data will be send while sharing
+         */
+        userMustAcceptDataPrivacy: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * tooltip shown on hovering disabled buttons
+         *
+         * userMustAcceptDataPrivacy-property must be activated
+         */
+        tooltipAcceptDataPrivacy: {
+            type: String,
+            default: "You must accept data privacy conditions!"
+        },
+        /**
+         * properties for cmdFormElement
+         *
+         * userMustAcceptDataPrivacy-property must be activated
+         */
+        cmdFormElement: {
+            type: Object,
+            default() {
+                return {
+                    toggleSwitch: true,
+                    labelText: "I accept that anonymous data will be send to the platform I share this page on!",
+                    required: true
+                }
+            }
         }
     },
     computed: {
@@ -63,19 +124,28 @@ export default {
     },
     methods: {
         getUrl(shareButton) {
-            // if path is not given completely by json-data
-            if(this.appendPage) {
-                // if page to share is given by property
-                if (this.page) {
-                    return shareButton.path + encodeURIComponent(this.page)
+            if(this.userMustAcceptDataPrivacy && this.dataPrivacyAccepted) {
+                // if path is not given completely by json-data
+                if (this.appendPage) {
+                    // if page to share is given by property
+                    if (this.page) {
+                        return shareButton.path + encodeURIComponent(this.page)
+                    }
+
+                    // if current page should be append to url
+                    return shareButton.path + encodeURIComponent(location.href)
                 }
 
-                // if current page should be append to url
-                return shareButton.path + encodeURIComponent(location.href)
+                // if path is given completely by json-data
+                return shareButton.path
             }
-
-            // if path is given completely by json-data
-            return shareButton.path
+            return null
+        },
+        tooltip(tooltip) {
+            if(this.userMustAcceptDataPrivacy && this.dataPrivacyAccepted) {
+                return tooltip
+            }
+            return this.tooltipAcceptDataPrivacy
         }
     }
 }
@@ -87,10 +157,19 @@ export default {
 
 .cmd-share-buttons {
     display: flex;
+    flex-direction: column;
     gap: var(--default-gap);
 
     &.align-right {
-        justify-content: flex-end;
+        .share-button-wrapper {
+            justify-content: flex-end;
+        }
+    }
+
+    &.stretch {
+        .button {
+            flex: 1;
+        }
     }
 
     .button {
@@ -101,12 +180,6 @@ export default {
         }
     }
 
-    &.stretch {
-        .button {
-            flex: 1;
-        }
-    }
-
     a:last-of-type {
         margin-right: 0;
     }

package/src/components/CmdSystemMessage.vue

@@ -4,6 +4,7 @@
             v-if="showSystemMessage"
             :class="['cmd-system-message', 'system-message', 'flex-container', 'vertical', { 'full-width': fullWidth }, validationStatus]"
             :role="validationStatus === 'error' ? 'alert' : 'dialog'"
+            :aria-labelledby="htmlId"
         >
             <!-- begin close-icon -->
             <a
@@ -21,6 +22,7 @@
                 :iconClass="iconMessage.iconClass"
                 :headlineText="systemMessage"
                 :headlineLevel="messageHeadlineLevel"
+                :id="htmlId"
             />
             <!-- end cmd-headline -->
 
@@ -32,11 +34,15 @@
 </template>
 
 <script>
+// import mixins
+import Identifier from "../mixins/Identifier"
+
 // import components
 import CmdHeadline from "./CmdHeadline"
 
 export default {
     name: "CmdSystemMessage",
+    mixins: [Identifier],
     components: {
         CmdHeadline
     },

package/src/components/CmdTabs.vue

@@ -3,7 +3,7 @@
         <ul :class="{'stretch-tabs' : stretchTabs}" role="tablist">
             <li :class="{active : showTab === index}" v-for="(tab, index) in tabs" :key="index" role="tab">
                 <a @click.prevent="setActiveTab(index)" :title="!tab.name ? tab.tooltip : false">
-                    <span v-if="tab.iconClass">{{ tab.iconClass }}</span>
+                    <span v-if="tab.iconClass" :class="tab.iconClass"></span>
                     <span v-if="tab.name">{{ tab.name }}</span>
                 </a>
             </li>
@@ -108,21 +108,21 @@ export default {
         > li {
             z-index: 10;
             margin-left: 0;
-            border-bottom: 0;
             border-top-left-radius: var(--border-radius);
             border-top-right-radius: var(--border-radius);
             list-style-type: none;
             background: var(--color-scheme-background-color);
             border: var(--default-border);
+            border-bottom: 0;
 
             &.active {
-                border-bottom: 0;
                 border-color: var(--primary-color);
-                top: .1rem;
             }
 
             a {
-                display: block;
+                display: flex;
+                align-items: center;
+                justify-content: center;
                 padding: var(--default-padding);
                 color: var(--color-scheme-text-color);
                 border-top-left-radius: var(--border-radius);

package/src/components/CmdThumbnailScroller.vue

@@ -10,7 +10,7 @@
         <!-- begin list of images to slide -->
         <transition-group name="slide" tag="ul">
             <li v-for="(image, index) in thumbnails" :key="image.imgId" :class="{'active' : imgIndex === index}">
-                <a href="#" @click.prevent="showFancyBox(index)">
+                <a href="#" @click.prevent="showFancyBox(index)" :title="getMessage('cmdthumbnailscroller.tooltip.open_large_image')">
                     <figure>
                         <figcaption v-if="figcaption.show && figcaption.position === 'above-image' && image.figcaption.length">{{ image.figcaption }}</figcaption>
                         <img :src="image.srcImageSmall" :alt="image.alt"/>
@@ -31,6 +31,10 @@
 </template>
 
 <script>
+// import mixins
+import I18n from "../mixins/I18n"
+import DefaultMessageProperties from "../mixins/CmdThumbnailScroller/DefaultMessageProperties"
+
 // import components
 import CmdSlideButton from "./CmdSlideButton.vue"
 
@@ -42,6 +46,10 @@ export default {
     components: {
         CmdSlideButton
     },
+    mixins: [
+        I18n,
+        DefaultMessageProperties
+    ],
     data() {
         return {
             thumbnails: []

package/src/components/CmdTooltip.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="tooltipVisibility" :class="['cmd-tooltip', status]" ref="tooltip" aria-role="tooltip">
+    <div v-if="tooltipVisibility" :class="['cmd-tooltip', status]" ref="tooltip">
         <div v-if="cmdHeadline || iconClose.show" class="headline-wrapper">
             <!-- begin CmdHeadline -->
             <CmdHeadline

package/src/documentation/generated/CmdFancyBoxPropertyDescriptions.json

@@ -58,5 +58,15 @@
                 "true"
             ]
         }
+    },
+    "cmdHeadline": {
+        "comments": [
+            "properties for CmdHeadline-component"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "true"
+            ]
+        }
     }
 }

package/src/documentation/generated/CmdFormElementPropertyDescriptions.json

@@ -95,11 +95,6 @@
             "may not be named as 'class' because it is a reserved keyword in JavaScript"
         ]
     },
-    "id": {
-        "comments": [
-            "if for native form-element"
-        ]
-    },
     "datalist": {
         "comments": [
             "set if a native datalist should be used"

package/src/documentation/generated/CmdNewsletterSubscriptionPropertyDescriptions.json

@@ -0,0 +1,42 @@
+{
+    "modelValue": {
+        "comments": [
+            "set value for v-model (must be named modelValue in vue3 if default v-model should be used)"
+        ]
+    },
+    "buttonType": {
+        "comments": [
+            "set value for v-model (must be named modelValue in vue3 if default v-model should be used)"
+        ]
+    },
+    "textLegend": {
+        "comments": [
+            "text used as legend for login-fieldset"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "true"
+            ]
+        }
+    },
+    "showLegend": {
+        "comments": [
+            "toggle legend visibility"
+        ]
+    },
+    "cmdInputGroup": {
+        "comments": [
+            "properties for CmdInputGroup-component"
+        ]
+    },
+    "cmdFormElementEmail": {
+        "comments": [
+            "properties for CmdFormElement-component for email-field"
+        ]
+    },
+    "cmdFormElementSubmit": {
+        "comments": [
+            "properties for CmdFormElement-component for submit-button"
+        ]
+    }
+}

package/src/documentation/generated/CmdShareButtonsPropertyDescriptions.json

@@ -1,4 +1,9 @@
 {
+    "modelValue": {
+        "comments": [
+            "set default v-model (must be named modelValue in Vue3)"
+        ]
+    },
     "align": {
         "comments": [
             "set horizontal alignment"
@@ -30,5 +35,24 @@
         "comments": [
             "activate if page to share is not given by json-data"
         ]
+    },
+    "userMustAcceptDataPrivacy": {
+        "comments": [
+            "toggle if user has to accept that anonymous data will be send while sharing"
+        ]
+    },
+    "tooltipAcceptDataPrivacy": {
+        "comments": [
+            "tooltip shown on hovering disabled buttons",
+            "",
+            "userMustAcceptDataPrivacy-property must be activated"
+        ]
+    },
+    "cmdFormElement": {
+        "comments": [
+            "properties for cmdFormElement",
+            "",
+            "userMustAcceptDataPrivacy-property must be activated"
+        ]
     }
 }

package/src/mixins/CmdThumbnailScroller/DefaultMessageProperties.js

@@ -0,0 +1,9 @@
+export default {
+  data() {
+    return {
+      defaultMessageProperties: {
+        "cmdthumbnailscroller.tooltip.open_large_image": "Open large image"
+      }
+    }
+  }
+}

package/src/mixins/FieldValidation.js

@@ -215,7 +215,7 @@ export default {
                 standardRequirements.push({
                     message: this.getRequirementMessage(),
                     valid(value, attributes) {
-                        return (!attributes.required && !inputRequired) || value.length > 0
+                        return (!attributes.required && !inputRequired) || (value != null && String(value).length > 0)
                     }
                 })
             }
@@ -249,6 +249,13 @@ export default {
         getRequirementMessage() {
             return this.getMessage("cmdfieldvalidation.required_field_is_filled")
         }
+    },
+    watch: {
+        validationStatus: {
+            handler() {
+                this.$emit("validation-status-change", this.validationStatus)
+            }
+        }
     }
 }
 

package/src/mixins/Identifier.js

@@ -0,0 +1,28 @@
+// import utils
+import {createHtmlId} from "@/utils/common";
+
+export default {
+    props: {
+        /**
+         * use as unique id if generated it should not be used
+         */
+        id: {
+            type: String,
+            required: false
+        }
+    },
+    computed: {
+        htmlId() {
+            return this.id || createHtmlId()
+        }
+    },
+    methods: {
+        buildHtmlId(...params) {
+            return params
+                .map(param => {
+                    return param.replace(/\s/g, "")
+                })
+                .join("")
+        }
+    }
+}

package/src/utils/common.js

@@ -12,4 +12,8 @@ function createUuid(){
     })
 }
 
-export {isFrameMode, createUuid}
+function createHtmlId() {
+   return "cmd-" + createUuid()
+}
+
+export {isFrameMode, createUuid, createHtmlId}