comand-component-library 3.2.1 → 3.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.2.01",
+  "version": "3.2.03",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -27,6 +27,7 @@
     "vuex": "^4.0.2"
   },
   "devDependencies": {
+    "@iconify/vue": "^4.0.0",
     "@vue/cli-plugin-babel": "^4.5.15",
     "@vue/cli-plugin-eslint": "^4.5.15",
     "@vue/cli-plugin-router": "^4.5.15",

package/src/App.vue

@@ -2,6 +2,8 @@
 <template>
     <div id="page-wrapper">
         <a id="anchor-back-to-top"></a>
+        <Icon icon="mdi-light:home" class="icon-" />
+       ICON: <Icon icon="mdi:account-cowboy-hat" />
         <!-- begin site-header --------------------------------------------------------------------------------------------------------------------------------------------------->
         <CmdSiteHeader :sticky="true">
             <template v-slot:top-header>
@@ -42,21 +44,22 @@
                         <li><a href="#section-google-maps-integration">Google-Maps&trade;-Integration</a></li>
                         <li><a href="#section-image-gallery">Image Gallery</a></li>
                         <li><a href="#section-image-zoom">Image-Zoom</a></li>
+                        <li><a href="#section-list-of-links">List Of Links</a></li>
                         <li><a href="#section-login-form">Login Form</a></li>
                         <li><a href="#section-main-navigation">Main-Navigation</a></li>
                         <li><a href="#section-multistep-form-progress-bar">Multistepform-Progressbar</a></li>
-                        <li><a href="#section-pager">Pager</a></li>
                     </ul>
                     <ul>
+                        <li><a href="#section-pager">Pager</a></li>
                         <li><a href="#section-share-buttons">Share Buttons</a></li>
                         <li><a href="#section-site-header">Site Header</a></li>
                         <li><a href="#section-site-search">Site Search</a></li>
                         <li><a href="#section-slideshow">Slideshow</a></li>
                         <li><a href="#section-system-message">System-Message</a></li>
                         <li><a href="#section-tables">Tables</a></li>
-                        <li><a href="#section-tabs">Tabs</a></li>
                     </ul>
                     <ul>
+                        <li><a href="#section-tabs">Tabs</a></li>
                         <li><a href="#section-thumbnail-scroller">Thumbnail-Scroller</a></li>
                         <li><a href="#section-toggle-darkmode">ToggleDarkMode</a></li>
                         <li><a href="#section-tooltip">Tooltip</a></li>
@@ -370,8 +373,8 @@
                                     id="range-value"
                                 />
                             </label>
-                            <label for="range-slider" class="hidden">
-                                <span class="label-text">
+                            <label for="range-slider">
+                                <span class="label-text hidden">
                                     <span>Range Value</span>
                                 </span>
                                 <input
@@ -845,7 +848,7 @@
                         </CmdBox>
                     </div>
                     <div class="grid-small-item">
-                        <CmdBox :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}" :collapsible="true" :stretchVertically="false">
+                        <CmdBox :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}" :collapsible="true">
                             <template v-slot:header>
                                 <h3>
                                     Collapsible box with image
@@ -971,8 +974,16 @@
                 <h2 class="headline-demopage">List Of Links</h2>
                 <h3>Vertical</h3>
                 <CmdListOfLinks :links="listOfLinksData"/>
-                <h3>Horizontal (aligned left)</h3>
-                <CmdListOfLinks orientation="horizontal" align="left" :links="listOfLinksData"/>
+                <h3>Horizontal (aligned left, with headline)</h3>
+                <CmdListOfLinks
+                    orientation="horizontal"
+                    align="left"
+                    :links="listOfLinksData"
+                    :cmdHeadline="{
+                        headlineText: 'Headline',
+                        headlineLevel: 5
+                    }"
+                />
                 <h3>Horizontal (aligned center)</h3>
                 <CmdListOfLinks orientation="horizontal" align="center" :links="listOfLinksData"/>
                 <h3>Horizontal (aligned right)</h3>
@@ -997,7 +1008,17 @@
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Multistepform-Progressbar</h2>
                 <CmdMultistepFormProgressBar
-                    :multisteps="multistepsData"
+                    :multisteps="multistepsData.withIcon"
+                    separatorIconClass="icon-single-arrow-right"
+                    @click="showPageMultistep = $event.index + 1"
+                />
+                <div>
+                    <p>Page {{ showPageMultistep }}</p>
+                </div>
+                <h2 class="headline-demopage">Multistepform-Progressbar</h2>
+                <CmdMultistepFormProgressBar
+                    :showStepNumber="true"
+                    :multisteps="multistepsData.withoutIcon"
                     separatorIconClass="icon-single-arrow-right"
                     @click="showPageMultistep = $event.index + 1"
                 />
@@ -1285,7 +1306,7 @@
                 <template #privacy-text>
                     <p>
                         <strong>
-                            By browsing this web site to accept the usage and saving of anonymous data!
+                            By browsing this web site you accept the usage and saving of anonymous data!
                         </strong>
                     </p>
                 </template>
@@ -1297,6 +1318,9 @@
 </template>
 
 <script>
+import {Icon} from "@iconify/vue"
+
+
 // import used example data
 import accordionData from '@/assets/data/accordion.json'
 import addressData from '@/assets/data/address-data.json'
@@ -1380,6 +1404,7 @@ import {localizedTime} from "./components/CmdOpeningHours"
 export default {
     name: "App",
     components: {
+        Icon,
         CmdListOfLinks,
         CmdAddressData,
         CmdBackToTopButton,

package/src/assets/data/main-navigation.json

@@ -41,6 +41,23 @@
         }
       ]
     },
+    {
+      "type": "href",
+      "text": "Entry 3",
+      "path": "#",
+      "subentries": [
+        {
+          "type": "href",
+          "text": "Entry 3.1",
+          "path": ""
+        },
+        {
+          "type": "href",
+          "text": "Entry 3.2",
+          "path": ""
+        }
+      ]
+    },
     {
       "type": "href",
       "text": "CoManD-CMS",

package/src/assets/data/multistep-form-progress-bar.json

@@ -1,33 +1,63 @@
-[
-  {
-    "type": "href",
-    "path": "",
-    "text": "Contact",
-    "tooltip": "This is a tooltip for step 1",
-    "iconClass": "icon-address"
-  },
-  {
-    "type": "href",
-    "path": "",
-    "text": "Settings",
-    "iconClass": "icon-configuration"
-  },
-  {
-    "type": "href",
-    "path": "",
-    "text": "Attachments",
-    "iconClass": "icon-attachment"
-  },
-  {
-    "type": "href",
-    "path": "",
-    "text": "Terms and Conditions",
-    "iconClass": "icon-section-sign"
-  },
-  {
-    "type": "href",
-    "path": "",
-    "text": "Summary",
-    "iconClass": "icon-rows"
-  }
-]
+{
+  "withIcon": [
+    {
+      "type": "href",
+      "path": "#",
+      "text": "Contact",
+      "tooltip": "This is a tooltip for step 1",
+      "iconClass": "icon-address"
+    },
+    {
+      "type": "href",
+      "path": "#",
+      "text": "Settings",
+      "iconClass": "icon-configuration"
+    },
+    {
+      "type": "href",
+      "path": "#",
+      "text": "Attachments",
+      "iconClass": "icon-attachment"
+    },
+    {
+      "type": "href",
+      "path": "#",
+      "text": "Terms and Conditions",
+      "iconClass": "icon-section-sign"
+    },
+    {
+      "type": "href",
+      "path": "#",
+      "text": "Summary",
+      "iconClass": "icon-rows"
+    }
+  ],
+  "withoutIcon": [
+    {
+      "type": "href",
+      "path": "#",
+      "text": "Contact",
+      "tooltip": "This is a tooltip for step 1"
+    },
+    {
+      "type": "href",
+      "path": "#",
+      "text": "Settings"
+    },
+    {
+      "type": "href",
+      "path": "#",
+      "text": "Attachments"
+    },
+    {
+      "type": "href",
+      "path": "#",
+      "text": "Terms and Conditions"
+    },
+    {
+      "type": "href",
+      "path": "#",
+      "text": "Summary"
+    }
+  ]
+}

package/src/assets/styles/global-styles.scss

@@ -45,6 +45,7 @@
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  height: 100vh;
 
   .cmd-site-footer {
     margin-top: auto;
@@ -64,7 +65,6 @@ body, .cmd-site-header, .cmd-site-footer, .cmd-copyright-information {
 /* begin .avoid-scrolling --------------------------------------------------------------------------------------------------------------------------------------------------- */
 body.avoid-scrolling {
   overflow: hidden;
-  height: 100vh;
 }
 /* end .avoid-scrolling --------------------------------------------------------------------------------------------------------------------------------------------------- */
 

package/src/components/CmdBox.vue

@@ -1,7 +1,7 @@
 <template>
     <!-- begin boxType 'content' -->
     <div v-if="boxType === 'content'"
-         :class="['cmd-box box content', {open : open, collapsible: collapsible, 'stretch-vertically': stretchVertically, 'stretch-horizontally': stretchHorizontally}]">
+         :class="['cmd-box box content', {open : open, collapsible: collapsible, 'stretch-vertically': stretchVertically && open, 'stretch-horizontally': stretchHorizontally}]">
         <template v-if="useSlots?.includes('header')">
             <!-- begin collapsible header with slot -->
             <div v-if="collapsible" class="box-header">
@@ -74,12 +74,14 @@
             </figure>
             <p v-else>{{ product.name }}</p>
 
-            <div class="ribbon-new" v-if="product.new">
+            <!-- begin ribbons -->
+            <div v-if="product.new" class="ribbon-new">
                 <span>{{ getMessage("cmdbox.productbox.new") }}</span>
             </div>
             <div v-if="product.discount" class="ribbon-discount">
                 <span>{{ product.discount }}</span>
             </div>
+            <!-- end ribbons -->
         </div>
         <div class="box-body">
             <p v-if="product.articleNumber">{{ getMessage("cmdbox.productbox.article_no") }} {{ product.articleNumber }}</p>
@@ -310,10 +312,15 @@ export default {
         display: flex;
     }
 
+    &.stretch-vertically {
+        height: 100%;
+    }
+
     > .cmd-headline {
         margin-bottom: 0;
     }
 
+    // collapsible box only
     &.collapsible {
         a.box-header {
             justify-content: space-between;
@@ -333,10 +340,7 @@ export default {
         padding: var(--default-padding);
     }
 
-    &.stretch-vertically {
-        height: 100%;
-    }
-
+    // boyType === 'content'
     &.content {
         > * {
             > *:last-child {
@@ -420,6 +424,7 @@ export default {
         }
     }
 
+    // boyType === 'product' and boxType === 'user'
     &.product, &.user {
         > div {
             > .cmd-custom-headline {
@@ -429,6 +434,7 @@ export default {
         }
     }
 
+    // boyType === 'product'
     &.product {
         text-decoration: none;
         overflow: hidden;
@@ -508,6 +514,7 @@ export default {
         }
     }
 
+    // boxType === 'user'
     &.user {
         > .box-header {
             --icon-size: 6rem;