comand-component-library 3.3.7 → 3.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.3.7",
+  "version": "3.3.8",
   "private": false,
   "scripts": {
     "publish": "npm publish",
@@ -19,7 +19,7 @@
   ],
   "dependencies": {
     "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^3.2.99",
+    "comand-frontend-framework": "^3.3.7",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",
     "sass": "^1.54.9",

package/src/App.vue

@@ -35,28 +35,29 @@
                         <li><a href="#section-boxes">Boxes</a></li>
                         <li><a href="#section-breadcrumbs">Breadcrumbs</a></li>
                         <li><a href="#section-cookie-disclaimer">Cookie-Disclaimer</a></li>
-                        <li><a href="#section-custom-headline">Custom Headline</a></li>
+                        <li><a href="#section-headlines">Headlines</a></li>
                         <li><a href="#section-fancybox">Fancybox</a></li>
                     </ul>
                     <ul>
-                        <li><a href="#section-google-mapsn">Google-Maps&trade;</a></li>
+                        <li><a href="#section-google-maps">Google-Maps&trade;</a></li>
                         <li><a href="#section-icons">Icons</a></li>
+                        <li><a href="#section-image">Image</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>
                     </ul>
                     <ul>
+                        <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>
                         <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>
                     </ul>
                     <ul>
+                        <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>
                         <li><a href="#section-thumbnail-scroller">Thumbnail-Scroller</a></li>
@@ -201,7 +202,7 @@
                                             :disabled="disabledStatus"
                             />
                             <CmdFormElement element="input"
-                                            labelText="Label for passwordfield:"
+                                            labelText="Label for password-field:"
                                             type="password"
                                             minlength="8"
                                             maxlength="255"
@@ -800,8 +801,8 @@
                         <CmdBox
                             :stretch-vertically="false"
                             :cmdHeadline="{headlineText: 'Box with cutoff text', headlineLevel: 4}"
-                            textBody="This is a long text that is cutoff after a specific number of lines that can be defined by the property 'cutoffTextLines'"
-                            :cutoff-text-lines="3"
+                            textBody="This is a long text that is cutoff after a specific number of lines that can be defined by the property 'cutoffTextLines' and be toggled by a link below."
+                            :cutoff-text-lines="4"
                         />
                         <CmdBox :useSlots="['header', 'body', 'footer']">
                             <template v-slot:header>
@@ -846,6 +847,12 @@
                                 </p>
                             </template>
                         </CmdBox>
+                        <CmdBox
+                            :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}"
+                            :image="{src: 'media/images/content-images/landscape-medium.jpg', altText: 'ALternative text'}"
+                            textBody="This is some text given by property."
+                            :collapsible="true"
+                        />
                         <CmdBox :useSlots="['header', 'body']" :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}" :collapsible="true">
                             <template v-slot:header>
                                 <h4>
@@ -853,7 +860,7 @@
                                 </h4>
                             </template>
                             <template v-slot:body>
-                                <img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text" />
+                                <img src="media/images/content-images/landscape-medium.jpg" alt="Alternative text" />
                             </template>
                         </CmdBox>
                         <CmdBox :useSlots="['header', 'body', 'footer']">
@@ -863,7 +870,7 @@
                                 </h4>
                             </template>
                             <template v-slot:body>
-                                <img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text"/>
+                                <img src="media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
                                 <div class="default-padding">
                                     <h4>Headline</h4>
                                     <p>This is some text information i.e a short-text for a news teaser.</p>
@@ -909,18 +916,20 @@
             </CmdWidthLimitationWrapper>
             <!-- end cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
-            <!-- begin custom-headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
-            <a id="section-custom-headline"></a>
+            <!-- begin headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
+            <a id="section-headlines"></a>
             <CmdWidthLimitationWrapper>
-                <h2 class="headline-demopage">Headline</h2>
-                <CmdHeadline icon-class="icon-home" pre-headline-text="Pre-headline" headlineText="Headline level 1" :headlineLevel="1"/>
+                <h2 class="headline-demopage">Headlines</h2>
+                <CmdHeadline :headlineIcon="{iconClass: 'icon-home'}" pre-headline-text="Pre-headline" headlineText="Headline level 1" :headlineLevel="1"/>
                 <CmdHeadline headlineText="Headline level 2" :headlineLevel="2"/>
                 <CmdHeadline headlineText="Headline level 3" :headlineLevel="3"/>
                 <CmdHeadline headlineText="Headline level 4" :headlineLevel="4"/>
                 <CmdHeadline headlineText="Headline level 5" :headlineLevel="5"/>
                 <CmdHeadline headlineText="Headline level 6" :headlineLevel="6"/>
+                <CmdHeadline pre-headline-text="Pre-headline" headlineText="Headline level 1 (center)" text-align="center" :headlineLevel="1"/>
+                <CmdHeadline pre-headline-text="Pre-headline" headlineText="Headline level 1 (right)" text-align="right" :headlineLevel="1"/>
             </CmdWidthLimitationWrapper>
-            <!-- end custom-headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
+            <!-- end headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
             <!-- begin fancybox ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-fancybox"></a>
@@ -928,11 +937,18 @@
                 <h2 class="headline-demopage">Fancybox</h2>
                 <a href="#" @click.prevent="showFancyBox('text','Some text')">Open FancyBox with text</a>
                 <a href="#"
-                   @click.prevent="showFancyBox('image', 'media/images/content-images/landscape-large.jpg', 'Alternative text', 'figcaption')"
-                   title="Open FancyBox with large image"
+                   @click.prevent="showFancyBox('url', 'media/images/content-images/landscape-large.jpg')"
+                   title="Open FancyBox with large image given by url"
                 >
                    <img src="media/images/content-images/landscape-small.jpg" alt="Alternative text"/>
                 </a>
+                <a href="#"
+                   @click.prevent="showFancyBox('image', 'media/images/content-images/landscape-large.jpg')"
+                   title="Open FancyBox with large image given by property"
+                >
+                    <img src="media/images/content-images/landscape-small.jpg" alt="Alternative text"/>
+                </a>
+
             </CmdWidthLimitationWrapper>
             <!-- end fancybox ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
@@ -954,11 +970,21 @@
                     <li><span>Icon from iconify-api (bootstrap-font)</span><CmdIcon iconClass="bi:house-fill" /></li>
                     <li><span>Icon from iconify-api (material-design-font)</span><CmdIcon iconClass="mdi:home" /></li>
                     <li><span>Icon from iconify-api (font-awesome-solid-font)</span><CmdIcon iconClass="fa6-solid:house-chimney" /></li>
-
                 </ul>
             </CmdWidthLimitationWrapper>
             <!-- end icons ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+            <!-- begin images ------------------------------------------------------------------------------------------------------------------------------------------------------->
+            <a id="section-image"></a>
+            <CmdWidthLimitationWrapper>
+                <h2 class="headline-demopage">Image</h2>
+                <div class="flex-container">
+                    <CmdImage :image="imageData[0].image" :figcaption="imageData[0].figcaption" />
+                    <CmdImage :image="imageData[1].image" :figcaption="imageData[1].figcaption" />
+                </div>
+            </CmdWidthLimitationWrapper>
+            <!-- end images ------------------------------------------------------------------------------------------------------------------------------------------------------->
+
             <!-- begin image-gallery------------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-image-gallery"></a>
             <CmdWidthLimitationWrapper>
@@ -972,8 +998,16 @@
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Image-Zoom</h2>
                 <CmdImageZoom
-                    small-image-url="media/images/content-images/logo-business-edition-landscape.jpg"
-                    large-image-url="media/images/content-images/logo-business-edition-landscape-large.jpg"
+                    :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'
+                    }"
                 />
             </CmdWidthLimitationWrapper>
             <!-- end image-zoom ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -1065,12 +1099,23 @@
             <a id="section-pager"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Pager</h2>
+                <h3>Link-view</h3>
+                <div>
+                    <p>Page {{ showPagePager }}</p>
+                </div>
+                <CmdPager
+                    :pages="4"
+                    :itemsPerPage="1"
+                    @click="showPagePager = $event"
+                />
+                <h3>Button-view</h3>
                 <div>
                     <p>Page {{ showPagePager }}</p>
                 </div>
                 <CmdPager
-                    :items="4"
+                    :pages="4"
                     :itemsPerPage="1"
+                    link-type="button"
                     @click="showPagePager = $event"
                 />
             </CmdWidthLimitationWrapper>
@@ -1160,7 +1205,7 @@
                 <CmdSystemMessage validationStatus="error"
                                   :fullWidth="true"
                                   systemMessage="This is an error message!"
-                                  :iconMessage="{iconClass: 'icon-error-circle'}">
+                                  :iconMessage="{iconClass: 'icon-error-circle', show: true}">
                     <ul>
                         <li>Error #1</li>
                         <li>Error #2</li>
@@ -1175,13 +1220,13 @@
                 <CmdSystemMessage validationStatus="success"
                                   :fullWidth="true"
                                   systemMessage="This is a success message!"
-                                  :iconMessage="{iconClass: 'icon-check-circle'}">
+                                  :iconMessage="{iconClass: 'icon-check-circle', show: true}">
                     <p>This is additional text!</p>
                 </CmdSystemMessage>
                 <CmdSystemMessage validationStatus="info"
                                   :fullWidth="true"
                                   systemMessage="This is an info message!"
-                                  :iconMessage="{iconClass: 'icon-info-circle'}">
+                                  :iconMessage="{iconClass: 'icon-info-circle', show: true}">
                     <p>This is additional text!</p>
                 </CmdSystemMessage>
             </CmdWidthLimitationWrapper>
@@ -1355,6 +1400,7 @@ import fakeSelectCountriesData from '@/assets/data/fake-select-countries.json'
 import fakeSelectFilterOptionsData from '@/assets/data/fake-select-filter-options.json'
 import fakeSelectOptionsData from '@/assets/data/fake-select-options.json'
 import fakeSelectOptionsWithIconsData from '@/assets/data/fake-select-options-with-icons.json'
+import imageData from '@/assets/data/image.json'
 import imageGalleryData from '@/assets/data/image-gallery.json'
 import inputGroupRadiobuttonsData from '@/assets/data/input-group-radiobuttons.json'
 import inputGroupReplacedRadiobuttonsData from '@/assets/data/input-group-replaced-radiobuttons.json'
@@ -1390,6 +1436,7 @@ import CmdFormElement from "@/components/CmdFormElement.vue"
 import CmdFormFilters from "@/components/CmdFormFilters.vue"
 import CmdGoogleMaps from "./components/CmdGoogleMaps"
 import CmdIcon from "./components/CmdIcon"
+import CmdImage from "./components/CmdImage"
 import CmdImageGallery from "@/components/CmdImageGallery.vue"
 import CmdImageZoom from "@/components/CmdImageZoom.vue"
 import CmdInputGroup from "./components/CmdInputGroup"
@@ -1443,6 +1490,7 @@ export default {
         CmdFormElement,
         CmdGoogleMaps,
         CmdIcon,
+        CmdImage,
         CmdImageGallery,
         CmdImageZoom,
         CmdInputGroup,
@@ -1588,6 +1636,7 @@ export default {
             fakeSelectOptionsData,
             fakeSelectOptionsWithIconsData,
             listOfLinksData,
+            imageData,
             imageGalleryData,
             inputGroupReplacedRadiobuttonsData,
             inputGroupToggleSwitchRadiobuttonsData,
@@ -1625,11 +1674,31 @@ export default {
         showError() {
             alert("Error")
         },
-        showFancyBox(type, content, altText, figcaption) {
-            if (type === 'text') {
-                openFancyBox({content: content, cmdHeadline: {show: true, headlineText: "Fancybox headline", headlineLevel: 3}})
-            } else if (type === 'image') {
-                openFancyBox({url: content, altText: altText, cmdHeadline: {show: true, headlineText: "Fancybox headline", headlineLevel: 3}, figcaption: figcaption})
+        showFancyBox(type, content) {
+            if (type === "text") {
+                openFancyBox({content: content, cmdHeadline: {show: true, headlineText: "Fancybox with text", headlineLevel: 3}})
+            } else if (type === "url") {
+                openFancyBox({url: content, cmdHeadline: {show: true, headlineText: "Fancybox with image given by url", headlineLevel: 3}})
+            } else if (type === "image") {
+                openFancyBox({
+                    url: content,
+                    cmdHeadline: {
+                        show: true,
+                        headlineText: "Fancybox with image given by property",
+                        headlineLevel: 3
+                    },
+                    cmdImage: {
+                        image: {
+                            src: "",
+                            alt: "Alternative text",
+                            tooltip: "This is a tooltip"
+                        },
+                        figcaption: {
+                            show: true,
+                            text: "figcaption"
+                        }
+                    }
+                })
             }
         },
         getOptionName(option) {

package/src/assets/data/address-data.json

@@ -29,6 +29,14 @@
       "email": {
             "iconClass": "icon-mail",
             "value": "Your email address"
+      },
+      "website": {
+            "iconClass": "icon-globe",
+            "value": "Your web site"
+      },
+      "custom": {
+            "iconClass": "icon-questionmark-circle",
+            "value": "Custom data"
       }
 }
 

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

@@ -1,30 +1,54 @@
 [
   {
-    "imgId": 1,
-    "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-    "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
-    "alt": "Alternative text 1",
-    "figcaption": "Figcaption 1"
+    "image": {
+      "src": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
+      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "alt": "Alternative text 1"
+    },
+    "figcaption": {
+      "show": true,
+      "position": "bottom",
+      "text": "Figcaption 1",
+      "textAlign": "center"
+    }
   },
   {
-    "imgId": 2,
-    "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-green-landscape.jpg",
-    "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-green-landscape.jpg",
-    "alt": "Alternative text 2",
-    "figcaption": "Figcaption 2"
+    "image": {
+      "src": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
+      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "alt": "Alternative text 2"
+    },
+    "figcaption": {
+      "show": true,
+      "position": "bottom",
+      "text": "Figcaption 2",
+      "textAlign": "center"
+    }
   },
   {
-    "imgId": 3,
-    "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-red-landscape.jpg",
-    "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-red-landscape.jpg",
-    "alt": "Alternative text 3",
-    "figcaption": "Figcaption 3"
+    "image": {
+      "src": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
+      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "alt": "Alternative text 3"
+    },
+    "figcaption": {
+      "show": true,
+      "position": "bottom",
+      "text": "Figcaption 3",
+      "textAlign": "center"
+    }
   },
   {
-    "imgId": 4,
-    "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-yellow-landscape.jpg",
-    "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-yellow-landscape.jpg",
-    "alt": "Alternative text 4",
-    "figcaption": "Figcaption 4"
+    "image": {
+      "src": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
+      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "alt": "Alternative text 4"
+    },
+    "figcaption": {
+      "show": true,
+      "position": "bottom",
+      "text": "Figcaption 4",
+      "textAlign": "center"
+    }
   }
 ]

package/src/assets/data/image.json

@@ -0,0 +1,28 @@
+[
+  {
+    "image": {
+      "src": "media/images/content-images/landscape-large.jpg",
+      "alt": "Alternative text",
+      "tooltip": "Tooltip"
+    },
+    "figcaption": {
+      "show": true,
+      "position": "top",
+      "text": "Figcaption above image (centered)",
+      "textAlign": "center"
+    }
+  },
+  {
+    "image": {
+      "src": "media/images/content-images/landscape-large.jpg",
+      "alt": "Alternative text",
+      "tooltip": "Tooltip"
+    },
+    "figcaption": {
+      "show": true,
+      "position": "",
+      "text": "Figcaption below image (aligned right)",
+      "textAlign": "right"
+    }
+  }
+]

package/src/assets/data/slideshow.json

@@ -1,62 +1,79 @@
 [
   {
-    "images": [
-      {
-        "maxWidth": 600,
-        "imgPath": "/media/images/slideshow-images/small/slide1.jpg"
-      },
-      {
-        "imgPath": "/media/images/slideshow-images/medium/slide1.jpg",
-        "maxWidth": 1024
-      },
-      {
-        "imgPath": "/media/images/slideshow-images/large/slide1.jpg"
-      }
-    ],
-    "alt": "Alternativ Text 1",
-    "href": "#anchor-section",
-    "title": "Link titel",
-    "target": "",
-    "figcaption": "Figcaption DE 1"
+    "image": {
+      "srcLarge": "/media/images/slideshow-images/large/slide1.jpg",
+      "srcMedium": "/media/images/slideshow-images/medium/slide1.jpg",
+      "srcSmall": "/media/images/slideshow-images/small/slide1.jpg",
+      "alt": "Alternativ Text 1",
+      "tooltip": "Tooltip 1"
+    },
+    "figcaption": {
+      "text": "Figcaption DE 1",
+      "position": "bottom",
+      "textAlign": "center",
+      "show": true
+    },
+    "link": {
+      "href": "#-anchor-section",
+      "target": null
+    }
   },
   {
-    "images": [
-      {
-        "imgPath": "/media/images/slideshow-images/large/slide2.jpg"
-      }
-    ],
-    "imgPath": "/media/images/slideshow-images/large/slide2.jpg",
-    "alt": "Alternativ Text 2",
-    "href": "#anchor-section",
-    "title": "Link titel",
-    "target": "",
-    "figcaption": "Figcaption DE 2"
+    "image": {
+      "srcLarge": "/media/images/slideshow-images/large/slide2.jpg",
+      "srcMedium": "/media/images/slideshow-images/medium/slide2.jpg",
+      "srcSmall": "/media/images/slideshow-images/small/slide2.jpg",
+      "alt": "Alternativ Text 2",
+      "tooltip": "Tooltip 2"
+    },
+    "figcaption": {
+      "text": "Figcaption DE 2",
+      "position": "bottom",
+      "textAlign": "center",
+      "show": true
+    },
+    "link": {
+      "href": "#-anchor-section",
+      "target": null
+    }
   },
   {
-    "images": [
-      {
-        "imgPath": "/media/images/slideshow-images/large/slide3.jpg"
-      }
-    ],
-    "imgPath": "/media/images/slideshow-images/large/slide3.jpg",
-    "alt": "Alternativ Text 3",
-    "href": "#anchor-section",
-    "title": "Link titel",
-    "target": "",
-    "figcaption": "Figcaption DE 3"
+    "image": {
+      "srcLarge": "/media/images/slideshow-images/large/slide3.jpg",
+      "srcMedium": "/media/images/slideshow-images/medium/slide3.jpg",
+      "srcSmall": "/media/images/slideshow-images/small/slide3.jpg",
+      "alt": "Alternativ Text 3",
+      "tooltip": "Tooltip 3"
+    },
+    "figcaption": {
+      "text": "Figcaption DE 3",
+      "position": "bottom",
+      "textAlign": "center",
+      "show": true
+    },
+    "link": {
+      "href": "#-anchor-section",
+      "target": null
+    }
   },
   {
-    "images": [
-      {
-        "imgPath": "/media/images/slideshow-images/large/slide4.jpg"
-      }
-    ],
-    "imgPath": "/media/images/slideshow-images/large/slide4.jpg",
-    "alt": "Alternativ Text 4",
-    "href": "#anchor-section",
-    "title": "Link titel",
-    "target": "",
-    "figcaption": "Figcaption DE 4"
+    "image": {
+      "srcLarge": "/media/images/slideshow-images/large/slide4.jpg",
+      "srcMedium": "/media/images/slideshow-images/medium/slide4.jpg",
+      "srcSmall": "/media/images/slideshow-images/small/slide4.jpg",
+      "alt": "Alternativ Text 4",
+      "tooltip": "Tooltip 4"
+    },
+    "figcaption": {
+      "text": "Figcaption DE 4",
+      "position": "bottom",
+      "textAlign": "center",
+      "show": true
+    },
+    "link": {
+      "href": "#-anchor-section",
+      "target": null
+    }
   }
 ]