comand-component-library 4.2.50 → 4.2.52

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

@@ -2,8 +2,9 @@
   {
     "name": "Product name 1",
     "image": {
-      "src": "media/images/demo-images/medium/landscape-01.jpg",
-      "alt": "Alternative text"
+      "src": "/media/images/demo-images/medium/landscape-01.jpg",
+      "alt": "Alternative text",
+      "figcaption": "Product name 1"
     },
     "articleNumber": "AB12345",
     "price": 123.45,
@@ -14,8 +15,9 @@
   {
     "name": "Product name 2",
     "image": {
-      "src": "media/images/demo-images/medium/landscape-02.jpg",
-      "alt": "Alternative text"
+      "src": "/media/images/demo-images/medium/landscape-02.jpg",
+      "alt": "Alternative text",
+      "figcaption": "Product name 2"
     },
     "articleNumber": "AB12346",
     "price": 123.46,
@@ -26,8 +28,9 @@
   {
     "name": "Product name 3",
     "image": {
-      "src": "media/images/demo-images/medium/landscape-03.jpg",
-      "alt": "Alternative text"
+      "src": "/media/images/demo-images/medium/landscape-03.jpg",
+      "alt": "Alternative text",
+      "figcaption": "Product name 3"
     },
     "articleNumber": "AB12347",
     "price": 123.47,
@@ -38,8 +41,9 @@
   {
     "name": "Product name 4",
     "image": {
-      "src": "media/images/demo-images/medium/landscape-04.jpg",
-      "alt": "Alternative text"
+      "src": "/media/images/demo-images/medium/landscape-04.jpg",
+      "alt": "Alternative text",
+      "figcaption": "Product name 4"
     },
     "articleNumber": "AB12348",
     "price": 123.48,
@@ -50,8 +54,9 @@
   {
     "name": "Product name 5",
     "image": {
-      "src": "media/images/demo-images/medium/landscape-05.jpg",
-      "alt": "Alternative text"
+      "src": "/media/images/demo-images/medium/landscape-05.jpg",
+      "alt": "Alternative text",
+      "figcaption": "Product name 5"
     },
     "articleNumber": "AB12349",
     "price": 123.49,

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

@@ -5,7 +5,7 @@
     "gender": "m",
     "image": {
       "src": "/media/images/user-images/fake-user-1.jpg",
-      "altText": "Alt text"
+      "alt": "Alt text"
     },
     "profession": "User profession",
     "position": "User position",
@@ -41,7 +41,7 @@
         }
       },
       {
-        "path": "https://www.comand-cms.com",
+        "path": "https://www.comand-ui.com",
         "target": "comand",
         "icon": {
           "iconClass": "icon-globe",
@@ -56,7 +56,7 @@
     "gender": "m",
     "image": {
       "src": "/media/images/user-images/fake-user-3.jpg",
-      "altText": "Alt text"
+      "alt": "Alt text"
     },
     "profession": "User profession",
     "position": "User position",
@@ -70,7 +70,7 @@
         }
       },
       {
-        "path": "https://www.comand-cms.com",
+        "path": "https://www.comand-ui.com",
         "target": "comand",
         "icon": {
           "iconClass": "icon-globe",
@@ -92,7 +92,7 @@
     "gender": "m",
     "image": {
       "src": "/media/images/user-images/fake-user-4.jpg",
-      "altText": "Alt text"
+      "alt": "Alt text"
     },
     "profession": "User profession",
     "position": "User position",
@@ -106,7 +106,7 @@
         }
       },
       {
-        "path": "https://www.comand-cms.com",
+        "path": "https://www.comand-ui.com",
         "target": "comand",
         "icon": {
           "iconClass": "icon-globe",
@@ -128,7 +128,7 @@
     "gender": "m",
     "image": {
       "src": "/media/images/user-images/fake-user-5.jpg",
-      "altText": "Alt text"
+      "alt": "Alt text"
     },
     "profession": "User profession",
     "position": "User position",
@@ -142,7 +142,7 @@
         }
       },
       {
-        "path": "https://www.comand-cms.com",
+        "path": "https://www.comand-ui.com",
         "target": "comand",
         "icon": {
           "iconClass": "icon-globe",

package/src/assets/data/list-of-tags.json

@@ -1,3 +1,3 @@
 [
-  "tag 1", "tag 2", "tag 3"
+  "Tag 1", "Tag 2", "Tag 3"
 ]

package/src/assets/data/pages/boxes-team-overview.json

@@ -49,7 +49,7 @@
               "tooltip": "Send mail"
             },
             {
-              "path": "https://www.comand-cms.com",
+              "path": "https://www.comand-ui.com",
               "target": "comand",
               "iconClass": "icon-globe",
               "tooltip": "Visit website"
@@ -74,7 +74,7 @@
               "tooltip": "Send mail"
             },
             {
-              "path": "https://www.comand-cms.com",
+              "path": "https://www.comand-ui.com",
               "target": "comand",
               "iconClass": "icon-globe",
               "tooltip": "Visit website"
@@ -104,7 +104,7 @@
               "tooltip": "Send mail"
             },
             {
-              "path": "https://www.comand-cms.com",
+              "path": "https://www.comand-ui.com",
               "target": "comand",
               "iconClass": "icon-globe",
               "tooltip": "Visit website"
@@ -134,7 +134,7 @@
               "tooltip": "Send mail"
             },
             {
-              "path": "https://www.comand-cms.com",
+              "path": "https://www.comand-ui.com",
               "target": "comand",
               "iconClass": "icon-globe",
               "tooltip": "Visit website"
@@ -199,7 +199,7 @@
               "tooltip": "Send mail"
             },
             {
-              "path": "https://www.comand-cms.com",
+              "path": "https://www.comand-ui.com",
               "target": "comand",
               "iconClass": "icon-globe",
               "tooltip": "Visit website"
@@ -224,7 +224,7 @@
               "tooltip": "Send mail"
             },
             {
-              "path": "https://www.comand-cms.com",
+              "path": "https://www.comand-ui.com",
               "target": "comand",
               "iconClass": "icon-globe",
               "tooltip": "Visit website"
@@ -254,7 +254,7 @@
               "tooltip": "Send mail"
             },
             {
-              "path": "https://www.comand-cms.com",
+              "path": "https://www.comand-ui.com",
               "target": "comand",
               "iconClass": "icon-globe",
               "tooltip": "Visit website"
@@ -284,7 +284,7 @@
               "tooltip": "Send mail"
             },
             {
-              "path": "https://www.comand-cms.com",
+              "path": "https://www.comand-ui.com",
               "target": "comand",
               "iconClass": "icon-globe",
               "tooltip": "Visit website"

package/src/componentSettingsDataAndControls.vue

@@ -104,24 +104,22 @@ data() {
                 headlineText: "Container Headline",
                 headlineLevel: 3
             },
-            contentAboveSlot: "<p>Content above slot</p>",
-            contentBelowSlot: "<p>Content below slot</p>",
-            containerType: "flex"
+            containerType: "default"
         },
         cmdContainerSettingsControls: {
             containerType: [
                 {
-                    text: "flex (default)",
+                    text: "default (default)",
+                    text: "default",
+                },
+                {
+                    text: "flex",
                     value: "flex"
                 },
                 {
                     text: "grid",
                     value: "grid"
-                },
-                {
-                    text: "none",
-                    value: ""
-                },
+                }
             ],
             contentOrientation: [
                 {
@@ -334,6 +332,24 @@ data() {
                     text: "Right",
                     value: "right"
                 }
+            ],
+            highlightLevel: [
+                {
+                    text: "none (default)",
+                    value: "none"
+                },
+                {
+                    text: "primary",
+                    value: "primary"
+                },
+                {
+                    text: "secondary",
+                    value: "secondary"
+                },
+                {
+                    text: "tertiary",
+                    value: "tertiary"
+                }
             ]
         },
         cmdInputGroupSettingsData: {
@@ -401,6 +417,24 @@ data() {
                     text: "button",
                     value: "button"
                 }
+            ],
+            highlightLevel: [
+                {
+                    text: "none",
+                    value: "none"
+                },
+                {
+                    text: "primary (default)",
+                    value: "primary"
+                },
+                {
+                    text: "secondary",
+                    value: "secondary"
+                },
+                {
+                    text: "tertiary",
+                    value: "tertiary"
+                }
             ]
         },
         cmdListSettingsData: {
@@ -508,6 +542,24 @@ data() {
                     text: "icon-chevron-two-stripes-right",
                     value: "icon-chevron-two-stripes-right"
                 }
+            ],
+            highlightLevel: [
+                {
+                    text: "none",
+                    value: "none"
+                },
+                {
+                    text: "primary (default)",
+                    value: "primary"
+                },
+                {
+                    text: "secondary",
+                    value: "secondary"
+                },
+                {
+                    text: "tertiary",
+                    value: "tertiary"
+                }
             ]
         },
         cmdNewsletterSubscriptionSettingsData: {
@@ -669,7 +721,7 @@ data() {
         cmdSystemMessageSettingsData: {
             validationStatus: "error",
             fullWidth: true,
-            systemMessage: "This is an error message!",
+            systemMessage: "This is an system message!",
             messageHeadlineLevel: 4
         },
         cmdSystemMessageSettingsControls: {
@@ -703,6 +755,26 @@ data() {
             useSlot: false,
             activeTab: 0
         },
+        cmdTabsSettingsControls: {
+            highlightLevel: [
+                {
+                    text: "none",
+                    value: "none"
+                },
+                {
+                    text: "primary (default)",
+                    value: "primary"
+                },
+                {
+                    text: "secondary",
+                    value: "secondary"
+                },
+                {
+                    text: "tertiary",
+                    value: "tertiary"
+                }
+            ]
+        },
         cmdTextImageBlockSettingsData: {
             htmlContent: "Text given as html-content",
             paragraphTextAlign: "left",

package/src/components/CmdAddressData.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdAddressData ---------------------------------------------------------------------------------------- -->
     <div class="cmd-address-data vcard">
         <!-- begin slot -->
         <template v-if="useSlot">
@@ -169,6 +170,7 @@
             <!-- end address-data in vCard microformat -->
         </template>
     </div>
+    <!-- end CmdAddressData ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdAddressDataItem.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdAddressDataItem ---------------------------------------------------------------------------------------- -->
     <dt :class="['cmd-address-data-item', {'address': addressEntry.name === 'address'}]" :id="addressEntry.id">
         <!-- begin CmdIcon -->
         <CmdIcon
@@ -165,7 +166,7 @@
         <!-- end unlinked address -->
     </dd>
     <!-- end data for address -->
-
+    <!-- end CmdAddressDataItem ---------------------------------------------------------------------------------------- -->
 </template>
 <!-- end data (except for address) -->
 <script>

package/src/components/CmdBackToTopButton.vue

@@ -1,13 +1,13 @@
 <template>
-    <!-- begin cmd-back-to-top-button -->
-    <transition name="fade">
+    <!-- begin CmdBackToTopButton ---------------------------------------------------------------------------------------- -->
+    <transition :name="transition">
         <a v-if="show" class="cmd-back-to-top-button button" id="back-to-top-button" href="#" role="button" :title="cmdIcon.tooltip" @click.prevent="onBackToTop">
             <!-- begin CmdIcon -->
             <CmdIcon :iconClass="cmdIcon.iconClass" :type="cmdIcon.iconType" />
             <!-- end CmdIcon -->
         </a>
     </transition>
-    <!-- end cmd-back-to-top-button -->
+    <!-- end CmdBackToTopButton ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -21,6 +21,15 @@ export default {
         }
     },
     props: {
+        /**
+         * define the transition when button appears/disappears
+         * 
+         * @allowedValues: "none", "fade", "scroll" 
+         */
+        transition: {
+            type: String,
+            default: "fade"
+        },
         /**
          * define which container's scroll-behavior should be observed (can be any selector)
          */

package/src/components/CmdBankAccountData.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdBankAccountData ---------------------------------------------------------------------------------------- -->
     <div class="cmd-bank-account-data">
         <!-- begin slot -->
         <template v-if="useSlot">
@@ -33,6 +34,7 @@
             <!-- end additional information -->
         </template>
     </div>
+    <!-- end CmdBankAccountData ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdBasicForm.vue

@@ -1,5 +1,6 @@
 <template>
-    <div class="cmd-pages-basic-form">
+    <!-- begin CmdBasicForm---------------------------------------------------------------------------------------- -->
+    <div class="cmd-basic-form">
         <!-- begin CmdHeadline -->
         <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline" />
         <!-- end CmdHeadline -->
@@ -258,6 +259,7 @@
         </CmdForm>
         <!-- end CmdForm -->
     </div>
+    <!-- end CmdBasicForm---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -611,7 +613,8 @@ export default {
 </script>
 
 <style>
-.cmd-pages-basic-form {
+/* begin cmd-basic-form ---------------------------------------------------------------------------------------- */
+.cmd-basic-form {
     fieldset {
         margin: 0;
 
@@ -629,5 +632,6 @@ export default {
 .grecaptcha-badge {
     bottom: 10rem !important;
 }
+/* end cmd-basic-form ---------------------------------------------------------------------------------------- */
 </style>
 

package/src/components/CmdBox.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdBox ---------------------------------------------------------------------------------------- -->
     <!-- begin boxType 'content' -->
     <div v-if="boxType === 'content'"
          ref="cmdBox"
@@ -158,11 +159,7 @@
        href="#"
        @click.prevent="clickOnProduct(product)">
         <div class="box-header flex-container vertical">
-            <figure v-if="product.image !== undefined">
-                <img :src="product.image.src" :alt="product.image.alt"/>
-                <figcaption>{{ product.name }}</figcaption>
-            </figure>
-            <p v-else>{{ product.name }}</p>
+            <CmdImage v-if="product.image?.src" v-bind="product.image" />
 
             <!-- begin ribbons -->
             <div v-if="product.new" class="ribbon-new">
@@ -200,16 +197,28 @@
          ]">
         <!-- begin box-header -->
         <div class="box-header flex-container vertical">
-            <figure v-if="user.image">
+            <!-- begin user-image -->
+            <figure v-if="user.image?.src">
                 <img :src="user.image.src" :alt="user.image.alt"/>
-                <figcaption v-if="!rowView" class="user-name">{{ user.name }}<span v-if="user.age" class="user-age"> ({{
-                        user.age
-                    }})</span></figcaption>
+                <figcaption v-if="!rowView" class="user-name">
+                    {{ user.name }}
+                    <span v-if="user.age" class="user-age"> 
+                        ({{ user.age }})
+                    </span>
+                </figcaption>
             </figure>
-            <div v-else>
-                <span :class="defaultProfileIconClass" :title="user.name"></span>
+            <!-- end no user-image -->
+
+            <!-- begin no user-image -->
+            <div v-else class="no-user-image">
+                <CmdIcon
+                  :iconClass="iconUserProfile.iconClass"
+                  :type="iconUserProfile.iconType"
+                  :title="user.name" 
+                />
                 <p v-if="!rowView" class="user-name">{{ user.name }}</p>
             </div>
+            <!-- end no user-image -->
         </div>
         <!-- end box-header -->
 
@@ -237,6 +246,7 @@
         <!-- end box-footer -->
     </div>
     <!-- end boxType 'user' -->
+    <!-- end CmdBox ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -357,13 +367,6 @@ export default {
             type: String,
             required: false
         },
-        /**
-         * set the default profile-icon (will eb shown if no user-image exists)
-         */
-        defaultProfileIconClass: {
-            type: String,
-            default: "icon-user-profile"
-        },
         /**
          * the shown product (incl. name, price, image, description)
          *
@@ -427,6 +430,20 @@ export default {
             type: String,
             default: ""
         },
+        /**
+         * icon for user-profile if no user-image exists
+         *
+         * @requiredForAccessibility: partial
+         */
+         iconUserProfile: {
+            type: Object,
+            default: function () {
+                return {
+                    iconClass: "icon-user-profile",
+                    iconType: "auto"
+                }
+            }
+        },
         /**
          * icon to expand an accordion
          *
@@ -440,7 +457,7 @@ export default {
                     tooltip: "Close content",
                     iconType: "auto"
                 }
-            },
+            }
         },
         /**
          * icon to collapse an accordion
@@ -597,7 +614,7 @@ export default {
         align-self: auto !important; /* overwrite settings form frontend-framework */
     }
 
-    &:has(.cmd-image:only-child) {
+    &:has(> .cmd-image:only-child) {
         align-self: start !important;
     }
 
@@ -849,10 +866,13 @@ export default {
         .box-body {
             flex-grow: 1;
             padding: var(--default-padding);
-            padding-bottom: 0;
 
             > * {
                 text-align: center;
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
             }
 
             .price {
@@ -884,20 +904,19 @@ export default {
         > .box-header {
             --default-icon-size: 6rem;
             --box-header-text-color: var(--primary-color);
-
+            
             background: none;
 
             > div:first-child > [class*="icon-"] {
                 aspect-ratio: 1/1;
             }
 
-            img, > div:first-child > [class*="icon-"] {
-                display: table;
-                margin: 0 auto var(--default-margin) auto !important;
-                padding: calc(var(--default-padding) * 3);
-                border-radius: var(--full-circle);
-                background: var(--box-header-background);
-                color: var(--color-white);
+            &:has(img) {
+                --box-header-padding: var(--default-padding);
+            }
+
+            img {
+                margin: 0 auto var(--default-margin) auto;
 
                 & + p, & + figcaption {
                     margin: 0 auto;
@@ -907,13 +926,17 @@ export default {
                 }
             }
 
-            img {
+            img, .no-user-image {
                 padding: 0;
                 width: calc(var(--default-icon-size) * 2);
                 aspect-ratio: 1/1;
-            }
-
-            > div:first-child > [class*="icon-"] {
+                max-width: 12rem;
+                border-radius: var(--full-circle);
+                background: var(--box-header-background);
+                display: flex;
+                color: var(--color-white);
+                justify-content: center;
+                align-items: center;
                 margin: 0;
                 font-size: var(--default-icon-size);
             }
@@ -1003,8 +1026,12 @@ export default {
         }
 
         &.row-view {
-            .box-body p {
-                text-align: left;
+            .box-body {
+                padding: 0;
+
+                p {
+                    text-align: left;
+                }
             }
 
             .box-footer {

package/src/components/CmdBoxWrapper.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdBoxWrapper ---------------------------------------------------------------------------------------- -->
     <div class="cmd-box-wrapper">
         <div v-if="cmdHeadline.headlineText || allowUserToToggleOrientation" class="flex-container headline-wrapper">
             <!-- begin CmdHeadline -->
@@ -31,6 +32,7 @@
             </slot>
         </div>
     </div>
+    <!-- end CmdBoxWrapper ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -313,6 +315,10 @@ export default {
             padding: var(--default-padding);
             align-items: center;
 
+            img {
+                margin-bottom: 0;
+            }
+
             .box-footer {
                 margin-top: 0;
             }