comand-component-library 3.1.90 → 3.1.92

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/{CmdBoxSiteSearch.vue → CmdSiteSearch.vue}

@@ -1,8 +1,8 @@
 <template>
     <fieldset class="cmd-box-site-search flex-container">
         <!-- begin legend -->
-        <legend v-if="showLegend">{{ textLegend }}</legend>
-        <!-- begin legend -->
+        <legend :class="{'hidden' : !showLegend}">{{ textLegend }}</legend>
+        <!-- end legend -->
 
         <!-- begin CmdHeadline -->
         <CmdHeadline
@@ -12,20 +12,21 @@
         <!-- end CmdHeadline -->
 
         <!-- begin form-elements -->
-        <div class="flex-container">
+        <div class="flex-container align-bottom">
             <!-- begin CmdFormElement for first input -->
             <CmdFormElement
-                v-if="cmdFormElementInput1.show"
                 element="input"
                 :type="cmdFormElementInput1.type"
                 :show-label="cmdFormElementInput1.showLabel"
                 :labelText="cmdFormElementInput1.labelText"
                 :placeholder="cmdFormElementInput1.placeholder"
+                :required="cmdFormElementInput1.required"
+                :showSearchButton="cmdFormElementInput1.showSearchButton"
                 v-model="searchValue1"
             />
             <!-- end CmdFormElement for first input -->
 
-            <div class="flex-container no-gap">
+            <div class="flex-container align-bottom no-gap">
                 <!-- begin CmdFormElement for second input -->
                 <CmdFormElement
                     v-if="cmdFormElementInput2.show"
@@ -34,6 +35,7 @@
                     :show-label="cmdFormElementInput2.showLabel"
                     :labelText="cmdFormElementInput2.labelText"
                     :placeholder="cmdFormElementInput2.placeholder"
+                    :required="cmdFormElementInput2.required"
                     v-model="searchValue2"
                 />
                 <!-- end CmdFormElement for second input -->
@@ -47,6 +49,7 @@
                     :show-label="cmdFormElementRadius.showLabel"
                     :labelText="cmdFormElementRadius.labelText"
                     :select-options="cmdFormElementRadius.selectOptions"
+                    :required="cmdFormElementRadius.required"
                 />
                 <!-- end CmdFormElement for radius -->
             </div>
@@ -56,6 +59,7 @@
                 element="button"
                 :nativeButton="cmdFormElementSearchButton"
                 @click="onSearchButtonClick"
+                :disabled="buttonSearchDisabled"
                 aria-live="assertive"
             />
             <!-- end CmdFormElement for search-button -->
@@ -71,9 +75,10 @@
                 <span v-else>{{ getMessage("cmdsitesearch.show_filter_options") }}</span>
             </a>
             <transition name="fade">
-                <div v-if="showFilters && cmdFakeSelect?.selectData.length" class="flex-container no-flex" aria-expanded="true">
+                <div v-if="showFilters && cmdFakeSelect?.selectData.length" class="flex-container no-flex" role="listbox" aria-expanded="true">
                     <!-- begin CmdFakeSelect -->
                     <CmdFakeSelect
+                        role="option"
                         :selectData="cmdFakeSelect?.selectData"
                         v-model="searchFilters"
                         :defaultOptionName="cmdFakeSelect?.defaultOptionName"
@@ -86,7 +91,9 @@
         </template>
         <!-- end filters -->
     </fieldset>
+    <!-- begin CmdFormFilters -->
     <CmdFormFilters v-if="cmdFakeSelect?.show" v-model="searchFilters" :selectedOptionsName="getOptionName"/>
+    <!-- end CmdFormFilters -->
 </template>
 
 <script>
@@ -196,11 +203,12 @@ export default {
             type: Object,
             default() {
                 return {
-                    show: true,
-                    type: "text",
-                    showLabel: true,
+                    type: "search",
+                    showLabel: false,
+                    required: true,
                     labelText: "What do you like to search for?",
-                    placeholder: "Search"
+                    placeholder: "What do you like to search for?",
+                    showSearchButton: false
                 }
             }
         },
@@ -213,9 +221,10 @@ export default {
                 return {
                     show: true,
                     type: "text",
-                    showLabel: true,
+                    showLabel: false,
+                    required: true,
                     labelText: "Where do you like to search?",
-                    placeholder: "City, Zip"
+                    placeholder: "Enter city, zip, country"
                 }
             }
         },
@@ -227,9 +236,14 @@ export default {
             default() {
                 return {
                     show: true,
-                    showLabel: true,
+                    showLabel: false,
+                    required: false,
                     labelText: "Radius",
                     selectOptions: [
+                        {
+                            text: "None",
+                            value: 0
+                        },
                         {
                             text: "5 Km",
                             value: 5
@@ -310,6 +324,13 @@ export default {
             set(value) {
                 this.$emit("update:modelValueSearchFilters", value)
             }
+        },
+        buttonSearchDisabled() {
+            const validInput1 = !this.cmdFormElementInput1.required || this.searchValue1.trim()
+            const validInput2 = !this.cmdFormElementInput2.show || !this.cmdFormElementInput2.required || this.searchValue2.trim()
+            const validInputRadius = !this.cmdFormElementRadius.show || !this.cmdFormElementRadius.required || this.radius
+
+            return !(validInput1 && validInput2 && validInputRadius)
         }
     },
     methods: {

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/components/CmdTooltipForInputElements.vue

@@ -7,15 +7,6 @@
         :relatedId="relatedId"
         :toggle-visibility-by-click="true">
 
-        <!-- begin CmdSystemMessage -->
-        <CmdSystemMessage
-            v-if="cmdListOfRequirements?.inputAttributes?.required && validationMessage"
-            :systemMessage="validationMessage"
-            :validation-status="validationStatus"
-            :iconClose="{show: false}"
-        />
-        <!-- end CmdSystemMessage -->
-
         <!-- begin CmdListOfRequirements -->
         <CmdListOfRequirements
             v-if="cmdListOfRequirements.showRequirements"
@@ -35,14 +26,12 @@
 <script>
 // import components
 import CmdListOfRequirements from "./CmdListOfRequirements"
-import CmdSystemMessage from "./CmdSystemMessage"
 import CmdTooltip from "./CmdTooltip"
 
 export default {
     name: "CmdTooltipForInputElements",
     components: {
         CmdListOfRequirements,
-        CmdSystemMessage,
         CmdTooltip
     },
     props: {
@@ -54,19 +43,12 @@ export default {
             default: ""
         },
         /**
-         * validation-status for CmdSystemMessage-component and CmdTooltip-component
+         * validation-status for CmdTooltip-component
          */
         validationStatus: {
             type: String,
             default: ""
         },
-        /**
-         * validation-message for CmdSystemMessage-component
-         */
-        validationMessage: {
-            type: String,
-            default: ""
-        },
         /**
          * properties for CmdListOfRequirements-component
          */

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/CmdLoginFormPropertyDescriptions.json

@@ -4,7 +4,7 @@
             "value for v-model (modelValue is default name in vue 3)"
         ]
     },
-    "textLegend": {
+    "textLegendLoginForm": {
         "comments": [
             "text used as legend for login-fieldset"
         ],
@@ -19,9 +19,9 @@
             "toggle legend visibility"
         ]
     },
-    "legendSendLoginForm": {
+    "textLegendForgotLoginForm": {
         "comments": [
-            "legend for send-login-fieldset"
+            "legend for forgot-login-fieldset"
         ],
         "annotations": {
             "requiredForAccessibility": [

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/documentation/generated/CmdSiteSearchPropertyDescriptions.json

@@ -0,0 +1,79 @@
+{
+    "modelValueInput1": {
+        "comments": [
+            "custom modelValue for first input-field"
+        ]
+    },
+    "modelValueInput2": {
+        "comments": [
+            "custom modelValue for second input-field"
+        ]
+    },
+    "modelValueRadius": {
+        "comments": [
+            "custom modelValue for radius"
+        ]
+    },
+    "modelValueSearchFilters": {
+        "comments": [
+            "custom modelValue for search-filters"
+        ]
+    },
+    "useFilters": {
+        "comments": [
+            "toggle use of filters (must configured)"
+        ]
+    },
+    "textLegend": {
+        "comments": [
+            "text for legend"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "true"
+            ]
+        }
+    },
+    "showLegend": {
+        "comments": [
+            "toggle legend visibility",
+            "",
+            "textLegend must be set"
+        ]
+    },
+    "results": {
+        "comments": [
+            "send search result from outside to display inside this component"
+        ]
+    },
+    "cmdHeadline": {
+        "comments": [
+            "properties for CmdHeadline-component"
+        ]
+    },
+    "cmdFormElementInput1": {
+        "comments": [
+            "properties for CmdFormElement-component first search-field"
+        ]
+    },
+    "cmdFormElementInput2": {
+        "comments": [
+            "properties for CmdFormElement-component for second search-field"
+        ]
+    },
+    "cmdFormElementRadius": {
+        "comments": [
+            "properties for CmdFormElement-component for radius"
+        ]
+    },
+    "cmdFormElementSearchButton": {
+        "comments": [
+            "properties for CmdFormElement-component for search-button"
+        ]
+    },
+    "cmdFakeSelect": {
+        "comments": [
+            "properties for CmdFakeSelect-component for filters"
+        ]
+    }
+}