comand-component-library 3.3.10 → 3.3.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.3.10",
+  "version": "3.3.11",
   "private": false,
   "scripts": {
     "publish": "npm publish",

package/src/App.vue

@@ -998,16 +998,8 @@
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Image-Zoom</h2>
                 <CmdImageZoom
-                    :imageSmall="{
-                       src: 'media/images/content-images/logo-business-edition-landscape.jpg',
-                       alt: 'Alternative text',
-                       tooltip: 'Tooltip'
-                    }"
-                    :imageLarge="{
-                       src: 'media/images/content-images/logo-business-edition-landscape.jpg',
-                       alt: 'Alternative text',
-                       tooltip: 'Tooltip'
-                    }"
+                    :imageSmall="imageData[0]"
+                    :imageLarge="imageData[0]"
                 />
             </CmdWidthLimitationWrapper>
             <!-- end image-zoom ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -1516,7 +1508,6 @@ export default {
         CmdUploadForm,
         CmdWidthLimitationWrapper
     },
-
     data() {
         return {
             acceptedCookies: ["google-maps"],

package/src/assets/data/box-user.json

@@ -1,13 +1,17 @@
 [
   {
     "name": "User name 1",
-    "image": {
-      "src": "/media/images/user-images/fake-user-1.jpg",
-      "alt": "Alternative text"
-    },
+    "age": 35,
+    "gender": "m",
+    "imageSrc": "/media/images/user-images/fake-user-1.jpg",
     "profession": "User profession",
     "position": "User position",
     "description": "User profile with image",
+    "tag": [
+      "Tagname",
+      "Long tag",
+      "One more tag"
+    ],
     "links": [
         {
         "path": "mailto:",
@@ -18,6 +22,9 @@
   },
   {
     "name": "User name 2",
+    "age": 35,
+    "gender": "m",
+    "imageSrc": "/media/images/user-images/fake-user-2.jpg",
     "profession": "User profession",
     "position": "User position",
     "description": "User description",
@@ -37,6 +44,9 @@
   },
   {
     "name": "User name 3",
+    "age": 35,
+    "gender": "m",
+    "imageSrc": "/media/images/user-images/fake-user-3.jpg",
     "profession": "User profession",
     "position": "User position",
     "description": "User with a long text as description that wraps over multiple lines",
@@ -61,6 +71,9 @@
   },
   {
     "name": "User name 4",
+    "age": 35,
+    "gender": "m",
+    "imageSrc": "/media/images/user-images/fake-user-4.jpg",
     "profession": "User profession",
     "position": "User position",
     "description": "User description",
@@ -85,6 +98,9 @@
   },
   {
     "name": "User name 5",
+    "age": 35,
+    "gender": "m",
+    "imageSrc": "/media/images/user-images/fake-user-5.jpg",
     "profession": "User profession",
     "position": "User position",
     "description": "User description",

package/src/assets/data/image-gallery.json

@@ -1,8 +1,8 @@
 [
   {
     "image": {
-      "src": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "src": "media/images/gallery-images/large/landscape-01.jpg",
+      "srcImageLarge": "media/images/gallery-images/large/landscape-01.jpg",
       "alt": "Alternative text 1"
     },
     "figcaption": {
@@ -14,8 +14,8 @@
   },
   {
     "image": {
-      "src": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "src": "media/images/gallery-images/large/landscape-02.jpg",
+      "srcImageLarge": "media/images/gallery-images/large/landscape-02.jpg",
       "alt": "Alternative text 2"
     },
     "figcaption": {
@@ -27,8 +27,8 @@
   },
   {
     "image": {
-      "src": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "src": "media/images/gallery-images/large/landscape-03.jpg",
+      "srcImageLarge": "media/images/gallery-images/large/landscape-03.jpg",
       "alt": "Alternative text 3"
     },
     "figcaption": {
@@ -40,8 +40,8 @@
   },
   {
     "image": {
-      "src": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "src": "media/images/gallery-images/large/landscape-04.jpg",
+      "srcImageLarge": "media/images/gallery-images/large/landscape-04.jpg",
       "alt": "Alternative text 4"
     },
     "figcaption": {

package/src/components/CmdBox.vue

@@ -123,11 +123,19 @@
     <!-- end boxType 'product' -->
 
     <!-- begin boxType 'user' -->
-    <div v-else-if="boxType === 'user' && user" :class="['cmd-box box user', {'stretch-vertically': stretchVertically,'stretch-horizontally': stretchHorizontally}]">
+    <div v-else-if="boxType === 'user' && user"
+         :class="[
+             'cmd-box box user',
+              profileType,
+             {
+                 'stretch-vertically': stretchVertically,
+                'stretch-horizontally': stretchHorizontally
+             }
+         ]">
         <div class="box-header flex-container vertical">
             <figure v-if="user.image">
                 <img :src="user.image.src" :alt="user.image.alt"/>
-                <figcaption>{{ user.name }}</figcaption>
+                <figcaption>{{ user.name }} <span v-if="user.age">, {{user.age}}</span></figcaption>
             </figure>
             <div v-else>
                 <span :class="defaultProfileIconClass" :title="user.name"></span>
@@ -139,6 +147,11 @@
             <p v-if="user.position">{{ user.position }}</p>
             <p v-if="user.description" class="description">{{ user.description }}</p>
         </div>
+        <ul class="tags">
+            <li v-for="(tag, index) in user.tags" :key="index">
+                {{tag}}
+            </li>
+        </ul>
         <div v-if="user.links" class="box-footer">
             <CmdListOfLinks :links="user.links" orientation="horizontal" :useGap="false"/>
         </div>
@@ -249,6 +262,17 @@ export default {
             type: Object,
             required: false
         },
+        /**
+         * profile types for user-boxes
+         *
+         * @required: only available for boxtype===user
+         *
+         * @allowedValues: 'business', 'influencer', 'dating'
+         */
+        profileType: {
+            type: String,
+            default: 'business'
+        },
         /**
          * activated if all content (incl. headline) is given by slot
          *

package/src/components/CmdFakeSelect.vue

@@ -266,7 +266,7 @@ export default {
         /**
          * label-text for fake-select
          *
-         *  @requiredForAccessibility: true
+         * @requiredForAccessibility: true
          */
         labelText: {
             type: String,

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"
@@ -134,6 +174,7 @@ const FancyBox = defineComponent({
     mixins: [
         Identifier
     ],
+    emits: ['cancel', 'confirm'],
     data() {
         return {
             fancyBoxContent: null,
@@ -161,6 +202,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 +224,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 +439,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 +581,11 @@ export default FancyBox
         }
     }
 
+    > footer {
+        margin-top: auto;
+        justify-content: flex-end;
+    }
+
     .outer-content-wrapper {
         max-height: 85vh;
         overflow-x: hidden;

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"

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">
@@ -107,12 +107,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 +165,6 @@ export default {
             padding-bottom: 0;
         }
 
-        &.one-child-only {
-            gap: 0;
-        }
-
         &.flex-container {
             width: 100%;
 
@@ -197,10 +187,6 @@ export default {
         .cmd-company-logo {
             grid-column: span var(--grid-small-span);
         }
-
-         > *:only-child {
-             gap: 0;
-         }
     }
 
     &.navigation-inline {

package/src/documentation/generated/CmdBoxPropertyDescriptions.json

@@ -61,6 +61,20 @@
             ]
         }
     },
+    "profileType": {
+        "comments": [
+            "profile types for user-boxes"
+        ],
+        "annotations": {
+            "required": [
+                "only available for boxtype===user",
+                ""
+            ],
+            "allowedValues": [
+                "'business', 'influencer', 'dating'"
+            ]
+        }
+    },
     "useSlots": {
         "comments": [
             "activated if all content (incl. headline) is given by slot",

package/src/documentation/generated/CmdFakeSelectPropertyDescriptions.json

@@ -66,10 +66,13 @@
     },
     "labelText": {
         "comments": [
-            "label-text for fake-select",
-            "",
-            " @requiredForAccessibility: true"
-        ]
+            "label-text for fake-select"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "true"
+            ]
+        }
     },
     "showLabel": {
         "comments": [

package/src/documentation/generated/CmdFancyBoxPropertyDescriptions.json

@@ -14,6 +14,16 @@
             "set if content should be loaded by url"
         ]
     },
+    "showPrintButtons": {
+        "comments": [
+            "toggle visibility of print-buttons"
+        ]
+    },
+    "showSubmitButtons": {
+        "comments": [
+            "toggle visibility of print-buttons"
+        ]
+    },
     "fancyboxOptions": {
         "comments": [
             "options to show at top (closeIcon, printButtons)"