comand-component-library 3.3.10 → 3.3.12

package/src/components/CmdFancyBox.vue

@@ -17,25 +17,31 @@
 
                 <!-- begin button-wrapper -->
                 <div
-                    v-if="(fancyboxOptions.printButtons && (fancyboxOptions.printButtons.color || fancyboxOptions.printButtons.grayscale)) || fancyboxOptions.closeIcon"
+                    v-if="(fancyboxOptions.printButtons?.color || fancyboxOptions.printButtons?.grayscale) || fancyboxOptions.closeIcon"
                     class="button-wrapper no-flex"
                 >  <!-- begin print buttons -->
-                    <a v-if="fancyboxOptions.printButtons && fancyboxOptions.printButtons.color && fancyboxOptions.printButtons.color.show"
+                    <a v-if="showPrintButtons && fancyboxOptions.printButtons?.color"
                        href="#"
                        class="button print-color"
-                       :title="fancyboxOptions.printButtons.color.tooltip"
+                       :title="fancyboxOptions.printButtons.color?.tooltip"
                        @click.prevent="printInGrayscale = false">
                         <!-- begin CmdIcon -->
-                        <CmdIcon :iconClass="fancyboxOptions.printButtons.color.iconClass" :type="fancyboxOptions.printButtons.color.iconType" />
+                        <CmdIcon
+                            :iconClass="fancyboxOptions.printButtons.color?.iconClass"
+                            :type="fancyboxOptions.printButtons.color?.iconType"
+                        />
                         <!-- end CmdIcon -->
                     </a>
-                    <a v-if="fancyboxOptions.printButtons && fancyboxOptions.printButtons.grayscale && fancyboxOptions.printButtons.grayscale.show"
+                    <a v-if="showPrintButtons && fancyboxOptions.printButtons?.grayscale"
                        href="#"
                        class="button print-grayscale"
-                       :title="fancyboxOptions.printButtons.grayscale.tooltip"
+                       :title="fancyboxOptions.printButtons.grayscale?.tooltip"
                        @click.prevent="printInGrayscale = true">
                        <!-- begin CmdIcon -->
-                       <CmdIcon :iconClass="fancyboxOptions.printButtons.grayscale.iconClass" :type="fancyboxOptions.printButtons.grayscale.iconType" />
+                       <CmdIcon
+                           :iconClass="fancyboxOptions.printButtons.grayscale?.iconClass"
+                           :type="fancyboxOptions.printButtons.grayscale?.iconType"
+                       />
                        <!-- end CmdIcon -->
                     </a>
                     <!-- end print buttons -->
@@ -49,7 +55,10 @@
                        ref="close-dialog"
                        @click.prevent="close">
                        <!-- begin CmdIcon -->
-                       <CmdIcon :iconClass="fancyboxOptions.closeIcon.iconClass" :type="fancyboxOptions.closeIcon.iconType" />
+                       <CmdIcon
+                           :iconClass="fancyboxOptions.closeIcon.iconClass"
+                           :type="fancyboxOptions.closeIcon.iconType"
+                       />
                        <!-- end CmdIcon -->
                     </a>
                     <!-- end close-icon -->
@@ -86,6 +95,37 @@
                     <!-- end slot-content -->
                 </div>
             </div>
+
+            <footer v-if="showSubmitButtons && fancyboxOptions.submitButtons" class="flex-container no-flex">
+                <!-- begin cancel-button -->
+                <button
+                    v-if="fancyboxOptions.submitButtons?.cancel"
+                    @click="cancel"
+                    :title="fancyboxOptions.submitButtons.cancel?.tooltip">
+                    <CmdIcon
+                        v-if="fancyboxOptions.submitButtons.cancel?.iconClass"
+                        :iconClass="fancyboxOptions.submitButtons.cancel?.iconClass"
+                        :type="fancyboxOptions.submitButtons.cancel?.iconType"
+                    />
+                    <span v-if="fancyboxOptions.submitButtons.cancel?.buttonText">{{fancyboxOptions.submitButtons.cancel?.buttonText}}</span>
+                </button>
+                <!-- end cancel-button -->
+
+                <!-- begin confirm-button -->
+                <button
+                    v-if="fancyboxOptions.submitButtons?.confirm"
+                    @click="confirm"
+                    :title="fancyboxOptions.submitButtons.cancel?.tooltip">
+                    <CmdIcon
+                        v-if="fancyboxOptions.submitButtons.confirm?.iconClass"
+                        :iconClass="fancyboxOptions.submitButtons.confirm?.iconClass"
+                        :type="fancyboxOptions.submitButtons.confirm?.iconType"
+                    />
+                    <span v-if="fancyboxOptions.submitButtons.confirm?.buttonText">{{fancyboxOptions.submitButtons.confirm?.buttonText}}</span>
+                </button>
+                <!-- end confirm-button -->
+            </footer>
+
             <!-- begin CmdThumbnailScroller -->
             <CmdThumbnailScroller
                 v-if="fancyBoxGallery"
@@ -105,13 +145,6 @@ import {defineComponent, createApp} from "vue"
 // import mixins
 import Identifier from "../mixins/Identifier"
 
-// import components
-import CmdHeadline from "./CmdHeadline"
-import CmdIcon from "./CmdIcon"
-import CmdImage from "./CmdImage"
-import CmdSlideButton from "./CmdSlideButton.vue"
-import CmdThumbnailScroller from './CmdThumbnailScroller.vue'
-
 const openFancyBox = (config) => {
     const node = document.createElement("div");
     document.querySelector("body").appendChild(node);
@@ -124,16 +157,10 @@ const openFancyBox = (config) => {
 
 const FancyBox = defineComponent({
     name: "CmdFancyBox",
-    components: {
-        CmdHeadline,
-        CmdIcon,
-        CmdImage,
-        CmdSlideButton,
-        CmdThumbnailScroller
-    },
     mixins: [
         Identifier
     ],
+    emits: ['cancel', 'confirm'],
     data() {
         return {
             fancyBoxContent: null,
@@ -161,6 +188,20 @@ const FancyBox = defineComponent({
             type: String,
             required: false
         },
+        /**
+         * toggle visibility of print-buttons
+         */
+        showPrintButtons: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * toggle visibility of print-buttons
+         */
+        showSubmitButtons: {
+            type: Boolean,
+            default: true
+        },
         /**
          * options to show at top (closeIcon, printButtons)
          */
@@ -169,19 +210,35 @@ const FancyBox = defineComponent({
             default() {
                 return {
                     closeIcon: {
-                        "iconClass": "icon-cancel",
-                        "tooltip": "Close"
+                        iconClass: "icon-cancel",
+                        iconType: "auto",
+                        tooltip: "Close"
                     },
                     printButtons: {
-                        "color": {
-                            show: true,
-                            "iconClass": "icon-print",
-                            "tooltip": "print in color"
+                        color: {
+                            iconClass: "icon-print",
+                            iconType: "auto",
+                            tooltip: "print in color"
+                        },
+                        grayscale: {
+                            iconClass: "icon-print",
+                            iconType: "auto",
+                            tooltip: "print in grayscale"
+                        }
+                    },
+                    submitButtons: {
+                        cancel: {
+                            iconClass: "icon-cancel",
+                            iconType: "auto",
+                            tooltip: "Cancel",
+                            buttonText: "Cancel"
                         },
-                        "grayscale": {
-                            show: true,
-                            "iconClass": "icon-print",
-                            "tooltip": "print in grayscale"
+                        confirm: {
+                            iconClass: "icon-check",
+                            iconType: "auto",
+                            buttonText: "Confirm",
+                            tooltip: "Confirm",
+                            buttonType: "primary"
                         }
                     }
                 }
@@ -368,6 +425,14 @@ const FancyBox = defineComponent({
 
             // remove class to re-enable scrolling
             document.querySelector("body").classList.remove("avoid-scrolling")
+        },
+        cancel() {
+            this.$emit("cancel", true)
+            this.close()
+        },
+        confirm() {
+            this.$emit("confirm", true)
+            this.close()
         }
     },
     watch: {
@@ -502,6 +567,11 @@ export default FancyBox
         }
     }
 
+    > footer {
+        margin-top: auto;
+        justify-content: flex-end;
+    }
+
     .outer-content-wrapper {
         max-height: 85vh;
         overflow-x: hidden;

package/src/components/CmdFormElement.vue

@@ -245,19 +245,11 @@ import FieldValidation from "../mixins/FieldValidation.js"
 import Identifier from "../mixins/Identifier.js"
 import Tooltip from "../mixins/Tooltip.js"
 
-// import components
-import CmdIcon from "./CmdIcon"
-import CmdTooltipForInputElements from "./CmdTooltipForInputElements"
-
 const TYPES_WITHOUT_MAXLENGTH = ["color", "date", "datetime-local", "file", "number", "range"]
 
 export default {
     inheritAttrs: false,
     name: "CmdFormElement",
-    components: {
-        CmdIcon,
-        CmdTooltipForInputElements
-    },
     mixins: [
         I18n,
         DefaultMessageProperties,

package/src/components/CmdFormFilters.vue

@@ -20,9 +20,6 @@
 </template>
 
 <script>
-// import components
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: "CmdFormFilters",
     data() {
@@ -30,9 +27,6 @@ export default {
             options: []
         }
     },
-    components: {
-        CmdIcon
-    },
     props: {
         /**
          * model-value to support v-model

package/src/components/CmdHeadline.vue

@@ -21,14 +21,8 @@
 </template>
 
 <script>
-// import components
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: "CmdHeadline",
-    components: {
-        CmdIcon
-    },
     props: {
         /**
          * text for headline

package/src/components/CmdImageGallery.vue

@@ -11,11 +11,8 @@
 </template>
 
 <script>
-// import components
-import CmdImage from "./CmdImage.vue"
-
 // import functions
-import {openFancyBox} from "./CmdFancyBox"
+import {openFancyBox} from "./CmdFancyBox.vue"
 
 // import mixins
 import I18n from "../mixins/I18n"
@@ -23,9 +20,6 @@ import DefaultMessageProperties from "../mixins/CmdImageGallery/DefaultMessagePr
 
 export default {
     name: "CmdImageGallery",
-    components: {
-        CmdImage
-    },
     mixins: [I18n, DefaultMessageProperties],
     props: {
         /**

package/src/components/CmdImageZoom.vue

@@ -5,7 +5,8 @@
             <a href="#" class="thumbnails-imagezoom">
                 <!-- begin CmdImage -->
                 <CmdImage
-                    :image="imageSmall"
+                    :image="imageSmall.image"
+                    :figcaption="imageSmall.figcaption"
                     @mouseover="onMouseOver"
                     @mousemove="onMouseMove"
                     @mouseout="onMouseOut"
@@ -19,7 +20,8 @@
         <div v-if="showLargeImage" class="zoom-container grid-large-item">
             <!-- begin CmdImage -->
             <CmdImage
-                :image="imageLarge"
+                :image="imageLarge.image"
+                :figcaption="imageLarge.figcaption"
                 @mouseover="onMouseOver"
                 @mousemove="onMouseMove"
                 @mouseout="onMouseOut"
@@ -32,14 +34,8 @@
 </template>
 
 <script>
-// import components
-import CmdImage from "./CmdImage"
-
 export default {
     name: "CmdImageZoom",
-    components: {
-        CmdImage
-    },
     props: {
         /**
          * object for small image

package/src/components/CmdInputGroup.vue

@@ -75,15 +75,7 @@ import FieldValidation from "../mixins/FieldValidation.js"
 import Identifier from "../mixins/Identifier"
 import Tooltip from "../mixins/Tooltip.js"
 
-// import components
-import CmdIcon from "./CmdIcon"
-import CmdTooltipForInputElements from "./CmdTooltipForInputElements"
-
 export default {
-    components: {
-        CmdIcon,
-        CmdTooltipForInputElements
-    },
     mixins: [
         FieldValidation,
         Identifier,

package/src/components/CmdListOfLinks.vue

@@ -44,16 +44,8 @@
 import {getRoute} from "../utilities.js"
 import {openFancyBox} from "./CmdFancyBox.vue"
 
-// import components
-import CmdHeadline from "./CmdHeadline"
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: "CmdListOfLinks",
-    components: {
-        CmdHeadline,
-        CmdIcon
-    },
     props: {
         /**
          * activate if component should contain a list of anchors for the section within th page

package/src/components/CmdListOfRequirements.vue

@@ -50,20 +50,12 @@
 </template>
 
 <script>
-// import components
-import CmdHeadline from "./CmdHeadline"
-import CmdIcon from "./CmdIcon"
-
 // import mixins
 import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdListOfRequirements/DefaultMessageProperties"
 
 export default {
     name: "CmdListOfRequirements",
-    components: {
-        CmdHeadline,
-        CmdIcon
-    },
     mixins: [
         I18n,
         DefaultMessageProperties

package/src/components/CmdLoginForm.vue

@@ -173,11 +173,6 @@
 // import utilities
 import {getRoute} from "../utilities.js"
 
-// import components
-import CmdFormElement from "./CmdFormElement"
-import CmdHeadline from "./CmdHeadline"
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: "CmdLoginForm",
     data() {
@@ -189,11 +184,6 @@ export default {
             sendLogin: false
         }
     },
-    components: {
-        CmdFormElement,
-        CmdHeadline,
-        CmdIcon
-    },
     props: {
         /**
          * value for v-model (modelValue is default name in vue 3)

package/src/components/CmdMainNavigation.vue

@@ -153,14 +153,8 @@
 // import functions
 import {getRoute} from "../utilities.js"
 
-// import components
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: "CmdMainNavigation",
-    components: {
-        CmdIcon
-    },
     data() {
         return {
             showOffcanvas: false,

package/src/components/CmdMultistepFormProgressBar.vue

@@ -56,14 +56,8 @@
 // import functions
 import {getRoute} from "../utilities.js"
 
-// import components
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: 'CmdMultistepFormProgressBar',
-    components: {
-        CmdIcon
-    },
     data() {
         return {
             activeLink: 0

package/src/components/CmdNewsletterSubscription.vue

@@ -43,17 +43,9 @@
 </template>
 
 <script>
-// import components
-import CmdFormElement from "./CmdFormElement"
-import CmdInputGroup from "./CmdInputGroup"
-
 export default {
     name: "CmdNewsletterSubscription",
     emits: ["button-click"],
-    components: {
-        CmdFormElement,
-        CmdInputGroup
-    },
     data() {
         return {
             buttonDisabled: true

package/src/components/CmdOpeningHours.vue

@@ -37,9 +37,6 @@
 </template>
 
 <script>
-// import components
-import CmdHeadline from "./CmdHeadline"
-
 export function localizedTime(language) {
     return (hour, minute) => {
         const now = new Date()
@@ -72,9 +69,6 @@ export function timeFormatting(separator, suffix1, suffix2, hoursLeadingZero = t
 
 export default {
     name: "CmdOpeningHours",
-    components: {
-        CmdHeadline
-    },
     props: {
         /**
          * set a link to a detail page

package/src/components/CmdPager.vue

@@ -48,15 +48,8 @@
 // import mixins
 import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdPager/DefaultMessageProperties"
-
-// import components
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: "CmdPager",
-    components: {
-        CmdIcon
-    },
     mixins: [
       I18n,
       DefaultMessageProperties

package/src/components/CmdShareButtons.vue

@@ -30,16 +30,8 @@
 </template>
 
 <script>
-// import components
-import CmdFormElement from "./CmdFormElement"
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: "CmdShareButtons",
-    components: {
-        CmdFormElement,
-        CmdIcon
-    },
     data() {
         return {
             dataPrivacyAccepted: false

package/src/components/CmdSiteHeader.vue

@@ -6,10 +6,10 @@
         </div>
         <!-- end slot for elements above header -->
 
-        <header :class="[
-            useGrid ? 'grid-container-create-columns': 'flex-container',
-            {'has-navigation': (cmdMainNavigation?.navigationEntries?.length && navigationInline) || $slots.navigation,
-            'one-child-only' : oneChildOnly}
+        <header
+            :class="[
+                useGrid ? 'grid-container-create-columns': 'flex-container',
+                {'has-navigation': (cmdMainNavigation?.navigationEntries?.length && navigationInline) || $slots.navigation}
             ]">
             <!-- begin slots for logo and other header elements -->
             <template v-if="$slots.logo || $slots.header || $slots.navigation">
@@ -50,16 +50,8 @@
 </template>
 
 <script>
-// import components
-import CmdCompanyLogo from "./CmdCompanyLogo"
-import CmdMainNavigation from "./CmdMainNavigation"
-
 export default {
     name: "CmdSiteHeader",
-    components: {
-        CmdCompanyLogo,
-        CmdMainNavigation
-    },
     props: {
         /**
          * use only if default-button of inner navigation-component should not be used
@@ -107,12 +99,6 @@ export default {
             type: Object,
             required: false
         }
-    },
-    computed: {
-        oneChildOnly() {
-            // check if sum of children equals "1" by turning objects into booleans, which will be converted to numbers by using "+".
-            return (!!this.cmdCompanyLogo + !!this.cmdMainNavigation + !!this.$slots.logo + !!this.$slots.header + !!this.$slots.navigation) === 1
-        }
     }
 }
 </script>
@@ -171,10 +157,6 @@ export default {
             padding-bottom: 0;
         }
 
-        &.one-child-only {
-            gap: 0;
-        }
-
         &.flex-container {
             width: 100%;
 
@@ -197,10 +179,6 @@ export default {
         .cmd-company-logo {
             grid-column: span var(--grid-small-span);
         }
-
-         > *:only-child {
-             gap: 0;
-         }
     }
 
     &.navigation-inline {

package/src/components/CmdSiteSearch.vue

@@ -106,13 +106,6 @@
 import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdSiteSearch/DefaultMessageProperties"
 
-// import files for components
-import CmdFakeSelect from "./CmdFakeSelect"
-import CmdFormElement from "./CmdFormElement"
-import CmdFormFilters from "./CmdFormFilters"
-import CmdHeadline from "./CmdHeadline"
-import CmdIcon from "./CmdIcon"
-
 export default {
     emits: [
         "search",
@@ -123,13 +116,6 @@ export default {
     ],
     name: "CmdBoxSiteSearch",
     mixins: [I18n, DefaultMessageProperties],
-    components: {
-        CmdFakeSelect,
-        CmdFormElement,
-        CmdFormFilters,
-        CmdHeadline,
-        CmdIcon
-    },
     data() {
         return {
             showFilters: false

package/src/components/CmdSlideButton.vue

@@ -10,14 +10,8 @@
 </template>
 
 <script>
-// import components
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: "CmdSlideButton",
-    components: {
-        CmdIcon
-    },
     props: {
         /**
          * set slide-button-type
@@ -76,10 +70,8 @@ export default {
     &.button {
         font-size: 2rem;
         z-index: 10;
-        width: 5rem;
         height: 100%;
         position: absolute;
-        display: -webkit-flex; /* Safari 6-8 */
         display: flex;
         justify-content: center;
         text-decoration: none;

package/src/components/CmdSlideshow.vue

@@ -52,10 +52,6 @@
 </template>
 
 <script>
-// import components
-import CmdImage from "./CmdImage"
-import CmdSlideButton from "./CmdSlideButton"
-
 const NOT_YET_PRELOADED_IMAGE = image => !image.loaded
 const NOT_YET_PRELOADED_IMAGES = item => item.images && item.images.find(NOT_YET_PRELOADED_IMAGE)
 
@@ -71,10 +67,6 @@ export default {
             currentSlotItem: 0
         }
     },
-    components: {
-        CmdImage,
-        CmdSlideButton
-    },
     props: {
         /**
          * use slot for images