comand-component-library 3.1.70 → 3.1.73

package/src/components/CmdToggleDarkMode.vue

@@ -6,6 +6,10 @@
             :labelText="labelText"
             :showLabel="showLabel"
             v-model="darkMode"
+            :toggle-switch="true"
+            :useIconsForToggleSwitch="true"
+            toggle-switch-checked-icon-class="icon-home"
+            toggle-switch-unchecked-icon-class="icon-globe"
         />
     </div>
 </template>
@@ -14,19 +18,17 @@
 import CmdFormElement from "./CmdFormElement"
 
 export default {
-    data() {
-      return {
-          darkMode: false
-      }
-    },
+    name: "ToggleDarkMode",
     components: {
         CmdFormElement
     },
+    data() {
+        return {
+            darkMode: false,
+            labelText: "Light mode activated"
+        }
+    },
     props: {
-        labelText: {
-            type: String,
-            default: "Toggle Darkmode"
-        },
         showLabel: {
             type: Boolean,
             default: false
@@ -56,11 +58,29 @@ export default {
             const htmlTag = document.querySelector('html')
             if(this.darkMode) {
                 htmlTag.classList.replace("light-mode", "dark-mode");
+                this.labelText = "Dark-Mode enabled"
             } else {
                 htmlTag.classList.replace("dark-mode", "light-mode");
+                this.labelText = "Light-Mode enabled"
             }
             htmlTag.dispatchEvent(new CustomEvent('toggle-color-scheme', { detail: this.darkMode ? 'dark-mode' : 'light-mode' }))
         }
     }
 }
-</script>
+</script>
+
+<style lang="scss">
+.cmd-toggle-dark-mode {
+    .cmd-form-element {
+        input {
+            background: blue;
+        }
+    }
+
+    &.dark-mode {
+        input {
+            background: black;
+        }
+    }
+}
+</style>

package/src/components/CmdTooltip.vue

@@ -138,7 +138,7 @@ export default {
     },
     unmounted() {
         if(this.relatedId) {
-            const relatedElement = document.getElementById(this.relatedId)
+            const relatedElement = document.getElementById(this.npm )
 
             if(relatedElement) {
                 relatedElement.removeEventListener("mouseenter", this.showTooltip)

package/src/documentation/generated/CmdAddressDataPropertyDescriptions.json

@@ -0,0 +1,32 @@
+{
+    "showLabelIcons": {
+        "comments": [
+            "show a label-icon (if exists)"
+        ]
+    },
+    "showLabelTexts": {
+        "comments": [
+            "show a label-text"
+        ]
+    },
+    "cmdCustomHeadline": {
+        "comments": [
+            "properties for CmdCustomHeadline-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"
+            ]
+        }
+    },
+    "cmdCustomHeadline": {
+        "comments": [
+            "properties for CmdCustomHeadline-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"
+        ]
+    },
+    "cmdCustomHeadline": {
+        "comments": [
+            "properties for CmdCustomHeadline-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"
+        ]
+    },
+    "cmdCustomHeadline": {
+        "comments": [
+            "properties for CmdCustomHeadline-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"
+            ]
+        }
+    }
+}

package/src/documentation/generated/CmdCookieDisclaimerPropertyDescriptions.json

@@ -0,0 +1,32 @@
+{
+    "cmdCustomHeadlineCookieDisclaimer": {
+        "comments": [
+            "properties for CmdCustomHeadline-component at top of cookie disclaimer"
+        ]
+    },
+    "cmdBoxRequiredCookies": {
+        "comments": [
+            "property for CmdBox-component surrounding the required cookies"
+        ]
+    },
+    "cmdBoxOptionalCookies": {
+        "comments": [
+            "property for CmdBox-component surrounding the optional cookies"
+        ]
+    },
+    "cookieOptions": {
+        "comments": [
+            "list of cookie-options"
+        ]
+    },
+    "buttonLabelAcceptAllCookies": {
+        "comments": [
+            "label for button to accepting all cookies"
+        ]
+    },
+    "buttonLabelAcceptCurrentSettings": {
+        "comments": [
+            "label for button for accepting current settings"
+        ]
+    }
+}

package/src/documentation/generated/CmdCustomHeadlinePropertyDescriptions.json

@@ -0,0 +1,22 @@
+{
+    "headlineText": {
+        "comments": [
+            "text for headline"
+        ]
+    },
+    "headlineLevel": {
+        "comments": [
+            "level for headline"
+        ]
+    },
+    "preHeadlineText": {
+        "comments": [
+            "small pre-headline-text above main-headline"
+        ]
+    },
+    "iconClass": {
+        "comments": [
+            "icon-class for icon shown left/before headline"
+        ]
+    }
+}

package/src/documentation/generated/CmdFakeSelectPropertyDescriptions.json

@@ -0,0 +1,84 @@
+{
+    "type": {
+        "comments": [
+            "set different default selectbox-types for"
+        ],
+        "annotations": {
+            "allowedValues": [
+                "default, color, country, checkboxOptions"
+            ]
+        }
+    },
+    "optionLinkType": {
+        "comments": [
+            "set type of option-links"
+        ],
+        "annotations": {
+            "allowedValues": [
+                "href, router"
+            ]
+        }
+    },
+    "modelValue": {
+        "comments": [
+            "set default v-model (must be named modelValue in Vue3)"
+        ]
+    },
+    "selectData": {
+        "comments": [
+            "list of options to select (incl. displayed names and values)",
+            "",
+            "type-property must be set to \"checkboxOptions\""
+        ]
+    },
+    "showSelectAllOptions": {
+        "comments": [
+            "toggles option to (de)select all options in a checkbox-list",
+            "",
+            "type-property must be set to \"checkboxOptions\""
+        ]
+    },
+    "status": {
+        "comments": [
+            "status (i.e. for validation)"
+        ],
+        "annotations": {
+            "allowedValues": [
+                "error, warning, success, info"
+            ],
+            "affectsStyling": [
+                "true"
+            ]
+        }
+    },
+    "dropdownIcon": {
+        "comments": [
+            "icon for dropdown-icon (i.e. an angle/arrow)"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "partial"
+            ],
+            "defaultIcon": [
+                "icon-single-arrow-down"
+            ]
+        }
+    },
+    "labelText": {
+        "comments": [
+            "label-text for fake-select",
+            "",
+            " @requiredForAccessibility: true"
+        ]
+    },
+    "showLabel": {
+        "comments": [
+            "toggle label visibility"
+        ]
+    },
+    "pathFlags": {
+        "comments": [
+            "path to flag-files (will be combined with flag isoCode to load svg)"
+        ]
+    }
+}

package/src/documentation/generated/CmdFancyBoxPropertyDescriptions.json

@@ -0,0 +1,62 @@
+{
+    "url": {
+        "comments": [
+            "set if content should be loaded by url"
+        ]
+    },
+    "fancyboxOptions": {
+        "comments": [
+            "options to show at top (closeIcon, printButtons)"
+        ]
+    },
+    "allowEscapeKey": {
+        "comments": [
+            "allow closing fancybox by escape-key"
+        ]
+    },
+    "content": {
+        "comments": [
+            "the content shown in the main area"
+        ]
+    },
+    "elements": {
+        "comments": [
+            "list of show elements (not images)"
+        ]
+    },
+    "fancyBoxGallery": {
+        "comments": [
+            "use if a gallery of images should be opened (and navigated) inside fancybox"
+        ]
+    },
+    "defaultGalleryIndex": {
+        "comments": [
+            "if gallery is used, you can set default index"
+        ]
+    },
+    "show": {
+        "comments": [
+            "show/hide entire fancybox"
+        ]
+    },
+    "showOverlay": {
+        "comments": [
+            "show/hide overlay (around fancybox, above website)"
+        ],
+        "annotations": {
+            "affectsStyling": [
+                "true"
+            ]
+        }
+    },
+    "altText": {
+        "comments": [
+            "alternative text for large image (required for images)"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "true"
+            ]
+        }
+    }
+}