comand-component-library 3.2.0 → 3.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.2.0",
+  "version": "3.2.02",
   "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>
@@ -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"
                 />
@@ -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/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/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">
@@ -310,10 +310,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 +338,7 @@ export default {
         padding: var(--default-padding);
     }
 
-    &.stretch-vertically {
-        height: 100%;
-    }
-
+    // boyType === 'content'
     &.content {
         > * {
             > *:last-child {
@@ -420,6 +422,7 @@ export default {
         }
     }
 
+    // boyType === 'product' and boxType === 'user'
     &.product, &.user {
         > div {
             > .cmd-custom-headline {
@@ -429,6 +432,7 @@ export default {
         }
     }
 
+    // boyType === 'product'
     &.product {
         text-decoration: none;
         overflow: hidden;
@@ -508,6 +512,7 @@ export default {
         }
     }
 
+    // boxType === 'user'
     &.user {
         > .box-header {
             --icon-size: 6rem;

package/src/components/CmdFancyBox.vue

@@ -3,7 +3,7 @@
     <div v-if="showFancyBox"
          :class="['cmd-fancybox', {'show-overlay': showOverlay}]"
          role="dialog"
-         :aria-labelledby="ariaLabelText">
+         :aria-label="ariaLabelText">
       <div class="popup" :class="{'image' : fancyBoxImageUrl || fancyBoxGallery }">
         <!-- begin print buttons -->
         <div class="button-wrapper no-flex"

package/src/components/CmdListOfLinks.vue

@@ -148,8 +148,6 @@ export default {
     }
 
     &.horizontal {
-        flex-direction: row;
-
         ul {
             gap: var(--default-gap);
             flex-direction: row;