comand-component-library 3.1.72 → 3.1.75

package/src/components/CmdTooltipForInputElements.vue

@@ -0,0 +1,122 @@
+<template>
+    <!-- begin CmdTooltip -->
+    <CmdTooltip
+        ref="tooltip"
+        class="box"
+        :class="validationStatus"
+        :relatedId="relatedId"
+        :toggle-visibility-by-click="true">
+
+        <!-- begin CmdSystemMessage -->
+        <CmdSystemMessage
+            v-if="inputAttributes.required && validationMessage"
+            :systemMessage="validationMessage"
+            :validation-status="validationStatus"
+            :iconClose="{show: false}"
+        />
+        <!-- end CmdSystemMessage -->
+
+        <!-- begin CmdListOfRequirements -->
+        <CmdListOfRequirements
+            v-if="showRequirements"
+            :inputRequirements="inputRequirements"
+            :helplink="helplink"
+            :inputModelValue="inputModelValue"
+            :inputAttributes="inputAttributes"
+            :validationTooltip="validationTooltip"
+        />
+        <!-- end CmdListOfRequirements -->
+    </CmdTooltip>
+    <!-- end CmdTooltip -->
+</template>
+
+<script>
+// import components
+import CmdListOfRequirements from "./CmdListOfRequirements"
+import CmdSystemMessage from "./CmdSystemMessage"
+import CmdTooltip from "./CmdTooltip"
+
+export default {
+    name: "CmdTooltipForInputElements",
+    components: {
+        CmdListOfRequirements,
+        CmdSystemMessage,
+        CmdTooltip
+    },
+    props: {
+        /**
+         * related-id for CmdTooltip-component
+         */
+        relatedId: {
+            type: String,
+            default: ""
+        },
+        /**
+         * validation-status for CmdSystemMessage-component and CmdTooltip-component
+         */
+        validationStatus: {
+            type: String,
+            default: ""
+        },
+        /**
+         * validation-message for CmdSystemMessage-component
+         */
+        validationMessage: {
+            type: String,
+            default: ""
+        },
+        /**
+         * toggle visibility for CmdListOfRequirements-component
+         */
+        showRequirements: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * validation-tooltip for CmdListOfRequirements-component
+         */
+        validationTooltip: {
+            type: String,
+            default: ""
+        },
+        /**
+         * list of input-requirements for CmdListOfRequirements-component
+         */
+        inputRequirements: {
+            type: Array,
+            default() {
+                return []
+            }
+        },
+        /**
+         * input-attributes for CmdListOfRequirements-component
+         */
+        inputAttributes: {
+            type: Object,
+            default() {
+                return {}
+            }
+        },
+        /**
+         * input-model-value for CmdListOfRequirements-component
+         */
+        inputModelValue: {
+            type: [String, Boolean, Array, Number],
+            default: ""
+        },
+        /**
+         * helplink for CmdListOfRequirements-component
+         */
+        helplink: {
+            type: String,
+            default: ""
+        }
+    },
+    methods: {
+        hideTooltip() {
+            // close tooltip by calling function from CmdTooltip using $refs
+            this.$refs.tooltip.hideTooltip()
+        }
+    }
+}
+</script>

package/src/components/CmdUploadForm.vue

@@ -2,11 +2,11 @@
     <!-- begin advanced mode -->
     <fieldset v-if="advancedMode" :class="['cmd-upload-form flex-container', { 'upload-initiated': uploadInitiated }]">
         <legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
-        <!-- begin CmdCustomHeadlineFieldset -->
-        <CmdCustomHeadline v-if="cmdCustomHeadlineFieldset"
-                           v-bind="cmdCustomHeadlineFieldset"
+        <!-- begin CmdHeadlineFieldset -->
+        <CmdHeadline v-if="CmdHeadlineFieldset"
+                           v-bind="CmdHeadlineFieldset"
         />
-        <!-- end CmdCustomHeadlineFieldset -->
+        <!-- end CmdHeadlineFieldset -->
 
         <!-- begin CmdSystemMessage -->
         <CmdSystemMessage
@@ -25,20 +25,20 @@
 
         <div :class="['box drop-area flex-container vertical', { 'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
             <template v-if="!listOfFiles.length">
-                <CmdCustomHeadline v-if="allowMultipleFileUploads" v-bind="cmdCustomHeadlineNoFilesToUpload" headlineLevel="4">
+                <CmdHeadline v-if="allowMultipleFileUploads" v-bind="CmdHeadlineNoFilesToUpload" headlineLevel="4">
                     {{ getMessage("cmduploadform.no_files_to_upload") }}
-                </CmdCustomHeadline>
-                <CmdCustomHeadline v-else v-bind="cmdCustomHeadlineNoFilesToUpload" headlineLevel="4">
+                </CmdHeadline>
+                <CmdHeadline v-else v-bind="CmdHeadlineNoFilesToUpload" headlineLevel="4">
                     {{ getMessage("cmduploadform.no_file_to_upload") }}
-                </CmdCustomHeadline>
+                </CmdHeadline>
             </template>
 
             <!-- 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">
-                    <CmdCustomHeadline v-bind="cmdCustomHeadlineSummaryOfAllFiles" headlineLevel="4">
+                    <CmdHeadline v-bind="CmdHeadlineSummaryOfAllFiles" headlineLevel="4">
                         {{ getMessage("cmduploadform.headline.summary_of_all_files") }}
-                    </CmdCustomHeadline>
+                    </CmdHeadline>
                     <ul v-if="showTotalUpload && listOfFiles.length !== 1" class="list-of-files total-files">
                         <li class="flex-container no-flex">
                             <a
@@ -80,9 +80,9 @@
 
                 <div class="flex-container vertical list-files-wrapper">
                     <!-- begin list of selected files -->
-                    <CmdCustomHeadline v-bind="cmdCustomHeadlineListOfSelectedFiles" headlineLevel="4">
+                    <CmdHeadline v-bind="CmdHeadlineListOfSelectedFiles" headlineLevel="4">
                         {{ getMessage("cmduploadform.headline.list_of_selected_files") }}
-                    </CmdCustomHeadline>
+                    </CmdHeadline>
                     <ul class="list-of-files">
                         <li
                             v-for="(uploadFile, index) in listOfFiles"
@@ -131,12 +131,12 @@
             <!-- end list of selected files -->
 
             <!-- begin upload conditions -->
-            <CmdCustomHeadline v-if="allowMultipleFileUploads && listOfFiles.length" v-bind="cmdCustomHeadlineSelectAdditionalFiles" headlineLevel="4">
+            <CmdHeadline v-if="allowMultipleFileUploads && listOfFiles.length" v-bind="CmdHeadlineSelectAdditionalFiles" headlineLevel="4">
                 {{ getMessage("cmduploadform.headline.select_additional_files") }}
-            </CmdCustomHeadline>
-            <CmdCustomHeadline v-if="!allowMultipleFileUploads && listOfFiles.length" v-bind="cmdCustomHeadlineSelectNewFile" headlineLevel="4">
+            </CmdHeadline>
+            <CmdHeadline v-if="!allowMultipleFileUploads && listOfFiles.length" v-bind="CmdHeadlineSelectNewFile" headlineLevel="4">
                 {{ getMessage("cmduploadform.headline.select_new_file") }}
-            </CmdCustomHeadline>
+            </CmdHeadline>
             <dl class="small">
                 <template v-if="maxTotalUploadSize > 0">
                     <dt :class="{ error: totalSize > maxTotalUploadSize }">
@@ -306,7 +306,7 @@ import {getFileExtension} from "../utils/getFileExtension.js"
 import axios from "axios"
 
 // import components
-import CmdCustomHeadline from "./CmdCustomHeadline"
+import CmdHeadline from "./CmdHeadline"
 import CmdFormElement from "./CmdFormElement"
 import CmdSystemMessage from "./CmdSystemMessage"
 
@@ -315,7 +315,7 @@ export default {
     emits: ["click", "error", "upload-complete", "upload-file-success"],
     mixins: [I18n, DefaultMessageProperties],
     components: {
-        CmdCustomHeadline,
+        CmdHeadline,
         CmdFormElement,
         CmdSystemMessage,
     },
@@ -506,51 +506,51 @@ export default {
             default: "icon-cancel"
         },
         /**
-         * properties for CmdCustomHeadline-component at of the fieldset
+         * properties for CmdHeadline-component at of the fieldset
          */
-        cmdCustomHeadlineFieldset: {
+        CmdHeadlineFieldset: {
             type: Object,
             required: false
         },
         /**
-         * properties for CmdCustomHeadline-component shown if no files for upload exist
+         * properties for CmdHeadline-component shown if no files for upload exist
          */
-        cmdCustomHeadlineNoFilesToUpload: {
+        CmdHeadlineNoFilesToUpload: {
             type: Object,
             required: false
         },
         /**
-         * properties for CmdCustomHeadline-component shown if no file for upload exist
+         * properties for CmdHeadline-component shown if no file for upload exist
          */
-        cmdCustomHeadlineNoFileToUpload: {
+        CmdHeadlineNoFileToUpload: {
             type: Object,
             required: false
         },
         /**
-         * properties for CmdCustomHeadline-component for 'summary of all files'
+         * properties for CmdHeadline-component for 'summary of all files'
          */
-        cmdCustomHeadlineSummaryOfAllFiles: {
+        CmdHeadlineSummaryOfAllFiles: {
             type: Object,
             required: false
         },
         /**
-         * properties for CmdCustomHeadline-component for 'list of selected files'
+         * properties for CmdHeadline-component for 'list of selected files'
          */
-        cmdCustomHeadlineListOfSelectedFiles: {
+        CmdHeadlineListOfSelectedFiles: {
             type: Object,
             required: false
         },
         /**
-         * properties for CmdCustomHeadline-component for 'select additional files'
+         * properties for CmdHeadline-component for 'select additional files'
          */
-        cmdCustomHeadlineSelectAdditionalFiles: {
+        CmdHeadlineSelectAdditionalFiles: {
             type: Object,
             required: false
         },
         /**
-         * properties for CmdCustomHeadline-component for 'select new file'
+         * properties for CmdHeadline-component for 'select new file'
          */
-        cmdCustomHeadlineSelectNewFile: {
+        CmdHeadlineSelectNewFile: {
             type: Object,
             required: false
         },

package/src/components/CmdWidthLimitationWrapper.vue

@@ -110,23 +110,6 @@ export default {
         right: 0;
         top: 0;
     }
-
-    &#site-footer {
-        padding: var(--grid-gap) 0;
-        border-top: var(--default-border);
-        background: var(--default-background-color);
-
-        &.sticky {
-            top: auto;
-            bottom: 0;
-        }
-
-        .cmd-switch-language {
-            width: 100%;
-            flex: none;
-        }
-    }
 }
-
 /* end cmd-width-limitation-wrapper ------------------------------------------------------------------------------------------ */
 </style>

package/src/documentation/generated/CmdAddressDataPropertyDescriptions.json

@@ -0,0 +1,32 @@
+{
+    "showLabelIcons": {
+        "comments": [
+            "show a label-icon (if exists)"
+        ]
+    },
+    "showLabelTexts": {
+        "comments": [
+            "show a label-text"
+        ]
+    },
+    "CmdHeadline": {
+        "comments": [
+            "properties for CmdHeadline-component"
+        ]
+    },
+    "showLabels": {
+        "comments": [
+            "option to toggle labels (i.e. telephone, email etc.) in front/left of data"
+        ]
+    },
+    "addressData": {
+        "comments": [
+            "all address-data (incl. labels) that will be shown"
+        ]
+    },
+    "linkGoogleMaps": {
+        "comments": [
+            "link physical address (street, no, zip and city) with Google Maps"
+        ]
+    }
+}

package/src/documentation/generated/CmdBackToTopButtonPropertyDescriptions.json

@@ -0,0 +1,12 @@
+{
+    "iconBackToTop": {
+        "comments": [
+            "icon-class (and shown tooltip on hover) for back to top button"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "partial"
+            ]
+        }
+    }
+}

package/src/documentation/generated/CmdBankAccountDataPropertyDescriptions.json

@@ -0,0 +1,34 @@
+{
+    "accountData": {
+        "comments": [
+            "bank account data",
+            "",
+            "must contain: owner, name of bank, IBAN, SWIFT/BIC"
+        ]
+    },
+    "allowCopyByClick": {
+        "comments": [
+            "enable if data can be copied by click on icon"
+        ]
+    },
+    "additionalInformation": {
+        "comments": [
+            "additional information shown in a paragraph below account data"
+        ]
+    },
+    "iconCopy": {
+        "comments": [
+            "icon 'copy'"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "partial"
+            ]
+        }
+    },
+    "CmdHeadline": {
+        "comments": [
+            "properties for CmdHeadline-component"
+        ]
+    }
+}

package/src/documentation/generated/CmdBoxPropertyDescriptions.json

@@ -0,0 +1,96 @@
+{
+    "boxType": {
+        "comments": [
+            "set boyType to show different types of boxes/contents"
+        ],
+        "annotations": {
+            "allowedValues": [
+                "content, product, user"
+            ],
+            "affectsStyling": [
+                "true"
+            ]
+        }
+    },
+    "collapsible": {
+        "comments": [
+            "activate if box should be collapsible"
+        ]
+    },
+    "useTransition": {
+        "comments": [
+            "use transition to expand and collapse box-body",
+            "",
+            "boyType must be 'content' and 'collapsible' must be activated"
+        ]
+    },
+    "defaultProfileIconClass": {
+        "comments": [
+            "set default profile-icon (will eb shown if no user-image exists)"
+        ]
+    },
+    "product": {
+        "comments": [
+            "the shown product (incl. name, price, image, description)"
+        ],
+        "annotations": {
+            "required": [
+                "only available for boxtype===product"
+            ]
+        }
+    },
+    "user": {
+        "comments": [
+            "the shown user-profile (incl. name, image, contact-data)"
+        ],
+        "annotations": {
+            "required": [
+                "only available for boxtype===user"
+            ]
+        }
+    },
+    "useSlots": {
+        "comments": [
+            "activated if all content (incl. headline) is given by slot",
+            "",
+            "if false textBody-property must be set"
+        ]
+    },
+    "textBody": {
+        "comments": [
+            "String used as content (placed in a paragraph-tag) for box-body",
+            "",
+            "should only be used, if no further html-structure is required for box-body"
+        ]
+    },
+    "iconOpen": {
+        "comments": [
+            "icon to expand an accordion"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "partial"
+            ]
+        }
+    },
+    "iconClosed": {
+        "comments": [
+            "icon to collapse an accordion"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "partial"
+            ]
+        }
+    },
+    "stretchVertically": {
+        "comments": [
+            "allow box to be stretched as high as parent-element"
+        ]
+    },
+    "CmdHeadline": {
+        "comments": [
+            "properties for CmdHeadline-component"
+        ]
+    }
+}

package/src/documentation/generated/CmdBoxSiteSearchPropertyDescriptions.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"
+        ]
+    }
+}

package/src/documentation/generated/CmdBoxWrapperPropertyDescriptions.json

@@ -0,0 +1,47 @@
+{
+    "useRowViewAsDefault": {
+        "comments": [
+            "activate if boxes should be arranged vertically (each box is a row) by default"
+        ]
+    },
+    "allowUserToToggleView": {
+        "comments": [
+            "activate if user can toggle grid- and row-view by himself"
+        ]
+    },
+    "allowTogglingCollapsingBoxes": {
+        "comments": [
+            "activate if user can toggle grid- and row-view by himself"
+        ]
+    },
+    "collapseBoxesIcon": {
+        "comments": [
+            "icon for collapsed box"
+        ]
+    },
+    "expandBoxesIcon": {
+        "comments": [
+            "icon for expanded box"
+        ]
+    },
+    "useFlexbox": {
+        "comments": [
+            "activate if you want to use a flex-container instead of a css-grid-container"
+        ]
+    },
+    "boxesPerRow": {
+        "comments": [
+            "define the number of boxes per row (if view is grid-view)"
+        ]
+    },
+    "iconGridView": {
+        "comments": [
+            "define icon for grid-view"
+        ]
+    },
+    "iconRowView": {
+        "comments": [
+            "define icon for row-view"
+        ]
+    }
+}

package/src/documentation/generated/CmdBreadcrumbsPropertyDescriptions.json

@@ -0,0 +1,17 @@
+{
+    "breadcrumbLabel": {
+        "comments": [
+            "label in front/left of breadcrumbs"
+        ]
+    },
+    "breadcrumbLinks": {
+        "comments": [
+            "list of breadcrumb-links (incl. path, icon and text)"
+        ]
+    },
+    "breadcrumbSeparator": {
+        "comments": [
+            "separator sign between entries"
+        ]
+    }
+}

package/src/documentation/generated/CmdCompanyLogoPropertyDescriptions.json

@@ -0,0 +1,27 @@
+{
+    "link": {
+        "comments": [
+            "link for company logo (i.e. to homepage)"
+        ]
+    },
+    "pathDefaultLogo": {
+        "comments": [
+            "path to (default) logo-file"
+        ]
+    },
+    "pathDarkmodeLogo": {
+        "comments": [
+            "path to dark-mode logo-file"
+        ]
+    },
+    "altText": {
+        "comments": [
+            "alternative text for image"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "true"
+            ]
+        }
+    }
+}