comand-component-library 3.1.64 → 3.1.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.64",
+  "version": "3.1.67",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -18,7 +18,7 @@
   ],
   "dependencies": {
     "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^3.2.47",
+    "comand-frontend-framework": "^3.2.48",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",
     "vue": "^3.2.31",

package/src/App.vue

@@ -1,13 +1,13 @@
 <!--suppress HtmlUnknownTarget, NpmUsedModulesInstalled, JSUnresolvedVariable -->
 <template>
     <a id="anchor-back-to-top"></a>
-    <CmdSiteHeader :mainNavigationEntries="navigationData" :sticky="true">
-        <template v-slot:top-header>
-            <CmdTopHeaderNavigation :topHeaderNavigationData="topHeaderNavigationData" v-if="topHeaderNavigationData"/>
-        </template>
+    <CmdSiteHeader :cmdMainNavigation="navigationData" :sticky="true">
         <template v-slot:logo>
-            <CmdCompanyLogo :link="companyLogoData.link" altText="CoManD Logo" :pathDefaultLogo="require('@/assets/images/logo.svg')"
-                            :pathDarkmodeLogo="require('@/assets/images/logo-darkmode.svg')"/>
+            <CmdCompanyLogo :link="companyLogoData.link"
+                            altText="CoManD Logo"
+                            :pathDefaultLogo="require('@/assets/images/logo.svg')"
+                            :pathDarkmodeLogo="require('@/assets/images/logo-darkmode.svg')"
+            />
         </template>
     </CmdSiteHeader>
     <main>
@@ -418,7 +418,7 @@
                                     labelText="Label (inline) for inputfield (search) without search-button:"
                                     :displayLabelInline="true"
                                     type="search"
-                                    id="inputfield-search"
+                                    id="inputfield-search-without-searchbutton"
                                     placeholder="Keyword(s)"
                                     v-model="inputSearch"
                                     :showSearchButton="false"
@@ -427,7 +427,7 @@
                                     labelText="Label (inline) for inputfield (search):"
                                     :displayLabelInline="true"
                                     type="search"
-                                    id="inputfield-search"
+                                    id="inputfield-search-with-searchbutton"
                                     placeholder="Keyword(s)"
                                     v-model="inputSearch"
                                     :status="formElementStatus"/>
@@ -544,6 +544,24 @@
                                             :status="formElementStatus"/>
                         </div>
                     </div>
+                    <CmdInputGroup labelText="Group label for radio group">
+                        <CmdFormElement element="input"
+                                        labelText="Label for radiobutton"
+                                        type="radio"
+                                        id="input-group-radiobutton"
+                                        name="radiogroup2"
+                                        inputValue="radiobuttonValue1"
+                                        v-model="radiobuttonValue"
+                                        :status="formElementStatus"/>
+                        <CmdFormElement element="input"
+                                        labelText="Label for radiobutton"
+                                        type="radio"
+                                        id="input-group-radiobutton"
+                                        name="radiogroup2"
+                                        inputValue="radiobuttonValue2"
+                                        v-model="radiobuttonValue"
+                                        :status="formElementStatus"/>
+                    </CmdInputGroup>
                     <CmdMultipleSwitch labelText="Label for multiple-switch with checkboxes:"
                                        :multipleSwitches="multipleSwitchCheckboxData"
                                        switchTypes="checkbox"
@@ -594,7 +612,7 @@
         <a id="section-bank-account-data"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Bank Account Data</h2>
-            <CmdBankAccountData :account-data="bankAccountData" :cmd-custom-headline="{ text: 'Bank Account', level: 3}" :allow-copy-by-click="true" />
+            <CmdBankAccountData :account-data="bankAccountData" :cmd-custom-headline="{ headlineText: 'Bank Account', headlineLevel: 3}" :allow-copy-by-click="true" />
         </CmdWidthLimitationWrapper>
         <!-- end bank account data ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
@@ -687,13 +705,13 @@
             <h3>Product boxes</h3>
             <div class="grid-container-create-columns">
                 <div class="grid-small-item" v-for="(product, index) in boxProductData" :key="index">
-                    <CmdBox boxType="product" :product="product"/>
+                    <CmdBox boxType="product" :product="product" :cmdCustomHeadline="{headlineLevel: 4}" />
                 </div>
             </div>
             <h3>User boxes</h3>
             <div class="grid-container-create-columns">
                 <div class="grid-small-item" v-for="(user, index) in boxUserData" :key="index">
-                    <CmdBox boxType="user" :user="user"/>
+                    <CmdBox boxType="user" :user="user" :cmdCustomHeadline="{headlineLevel: 4}" />
                 </div>
             </div>
             <h3>Box Site Search</h3>
@@ -723,12 +741,12 @@
         <a id="section-custom-headline"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Custom Headline</h2>
-            <CmdCustomHeadline icon-class="icon-home" pre-headline="Pre-headline" :headline="{ text: 'Headline level 1', level: '1'}"/>
-            <CmdCustomHeadline :headline="{ text: 'Headline level 2', level: '2'}"/>
-            <CmdCustomHeadline :headline="{ text: 'Headline level 3', level: '3'}"/>
-            <CmdCustomHeadline :headline="{ text: 'Headline level 4', level: '4'}"/>
-            <CmdCustomHeadline :headline="{ text: 'Headline level 5', level: '5'}"/>
-            <CmdCustomHeadline :headline="{ text: 'Headline level 6', level: '6'}"/>
+            <CmdCustomHeadline icon-class="icon-home" pre-headline-text="Pre-headline" headlineText="Headline level 1" :headlineLevel="1"/>
+            <CmdCustomHeadline headlineText="Headline level 2" :headlineLevel="2"/>
+            <CmdCustomHeadline headlineText="Headline level 3" :headlineLevel="3"/>
+            <CmdCustomHeadline headlineText="Headline level 4" :headlineLevel="4"/>
+            <CmdCustomHeadline headlineText="Headline level 5" :headlineLevel="5"/>
+            <CmdCustomHeadline headlineText="Headline level 6" :headlineLevel="6"/>
         </CmdWidthLimitationWrapper>
         <!-- end custom-headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
@@ -748,7 +766,7 @@
         <a id="section-google-maps-integration"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Google Maps&trade;-Integration</h2>
-            <CmdGoogleMaps :addressData="addressData"/>
+            <CmdGoogleMaps :address="addressData"/>
         </CmdWidthLimitationWrapper>
 
         <a id="section-image-gallery"></a>
@@ -818,9 +836,9 @@
         <a id="section-system-message"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">System Message</h2>
-            <CmdSystemMessage status="error"
+            <CmdSystemMessage validationStatus="error"
                               :fullWidth="true"
-                              message="This is an error message!"
+                              systemMessage="This is an error message!"
                               :iconMessage="{iconClass: 'icon-error-circle'}">
                 <ul>
                     <li>Error #1</li>
@@ -828,14 +846,20 @@
                     <li>Error #3</li>
                 </ul>
             </CmdSystemMessage>
-            <CmdSystemMessage status="warning" :fullWidth="true" message="This is a warning message!">
+            <CmdSystemMessage validationStatus="warning"
+                              :fullWidth="true"
+                              systemMessage="This is a warning message!">
                 <p>This is additional text!</p>
             </CmdSystemMessage>
-            <CmdSystemMessage status="success" :fullWidth="true" message="This is a success message!"
+            <CmdSystemMessage validationStatus="success"
+                              :fullWidth="true"
+                              systemMessage="This is a success message!"
                               :iconMessage="{iconClass: 'icon-check-circle'}">
                 <p>This is additional text!</p>
             </CmdSystemMessage>
-            <CmdSystemMessage status="info" :fullWidth="true" message="This is an info message!"
+            <CmdSystemMessage validationStatus="info"
+                              :fullWidth="true"
+                              systemMessage="This is an info message!"
                               :iconMessage="{iconClass: 'icon-info-circle'}">
                 <p>This is additional text!</p>
             </CmdSystemMessage>
@@ -857,19 +881,19 @@
             <h2 class="headline-demopage">Tabs</h2>
             <h3>Tabs with content from json-file</h3>
             <CmdTabs :stretchTabs="false" :tabs="tabsData"/>
-            <h3>Tabs with HTML-content from used component</h3>
+            <h3>Tabs with HTML-content (given by slot))</h3>
             <CmdTabs :stretchTabs="true" :tabs="[{name: 'Tab 1'}, {name: 'Tab 2'}, {name: 'Tab 3'}]" :useSlot="true">
                 <template v-slot:tab-content-0>
-                    <h3>Tab 1</h3>
+                    <h4>Tab 1 headline</h4>
                     <p>Content</p>
                 </template>
                 <template v-slot:tab-content-1>
-                    <h3>Tab 2</h3>
+                    <h4>Tab 2</h4>
                     <p>Content</p>
                     <p>Content</p>
                 </template>
                 <template v-slot:tab-content-2>
-                    <h3>Tab 3</h3>
+                    <h4>Tab 3</h4>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
@@ -902,19 +926,20 @@
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Upload-Form</h2>
             <h3>Simple mode</h3>
-            <CmdUploadForm headline="Select files to upload"
-                           :enableDragAndDrop="true"
-                           :allowedFileExtensions="['jpg']"
+            <CmdUploadForm :enableDragAndDrop="true"
+                           :allowedFileExtensions="['jpg', 'png']"
                            :allowMultipleFileUploads="true"
                            :advancedMode="false"
+                           textLegend="Simple upload form"
                            @error="showError"
                            :uploadOptions="{url: 'http://localhost:8888'}"
             />
             <h3>Advanced mode</h3>
-            <CmdUploadForm headline="Select files to upload"
+            <CmdUploadForm :cmdCustomHeadlineFieldset="{headlineText: 'Select files to upload', headlineLevel: 3}"
                            :enableDragAndDrop="true"
-                           :allowedFileExtensions="['jpg']"
+                           :allowedFileExtensions="['jpg', 'png']"
                            :allowMultipleFileUploads="true"
+                           textLegend="Advanced upload form"
                            :uploadOptions="{url: 'http://localhost:8888'}"
             />
         </CmdWidthLimitationWrapper>
@@ -922,18 +947,26 @@
 
     <CmdWidthLimitationWrapper id="site-footer" inner-component="footer">
         <CmdSwitchLanguage :languages="languagesData" @click="doSomething"/>
-        <CmdFooterNavigation :footerNavigation="footerNavigationData" headline="Links"/>
-        <CmdOpeningHours :openingHours="openingHoursData" :closed="true" headline="Opening hours"
-                         textOpenClosed="Closed right now!" textHolidaysClosed="Closed on holidays"
-                         textMiscInfo="Miscellaneous information"/>
-        <CmdAddressData :addressData="addressData" :linkGoogleMaps="true" headline="Contact"/>
+        <CmdListOfLinks :links="footerNavigationData"
+                        :cmdCustomHeadline="{headlineText: 'List of links', headlineLevel: 6}"
+        />
+        <CmdOpeningHours :openingHours="openingHoursData"
+                         :closed="true"
+                         :cmdCustomHeadline="{headlineText: 'Opening hours', headlineLevel: 6}"
+                         textOpenClosed="Closed right now!"
+                         textHolidaysClosed="Closed on holidays"
+                         textMiscInfo="Miscellaneous information"
+        />
+        <CmdAddressData :addressData="addressData"
+                        :linkGoogleMaps="true"
+                        :cmdCustomHeadline="{headlineText: 'Address data', headlineLevel: 6}"
+        />
     </CmdWidthLimitationWrapper>
 
     <CmdCopyrightInformation/>
 
     <CmdFancyBox :show="fancyBoxCookieDisclaimer" :fancyboxOptions="{}" :allowEscapeKey="false">
-        <CmdCookieDisclaimer headline="Usage of cookies on this web site"
-                             :cookieOptions="cookieDisclaimerData"
+        <CmdCookieDisclaimer :cookieOptions="cookieDisclaimerData"
                              buttonLabelAcceptAllCookies="Accept all cookies"
                              buttonLabelAcceptCurrentSettings="Accept current settings"
                              @closeCookieDisclaimer="fancyBoxCookieDisclaimer = false"
@@ -979,7 +1012,6 @@ import tabsData from '@/assets/data/tabs.json'
 import tableDataSmall from '@/assets/data/table-small.json'
 import tableDataLarge from '@/assets/data/table-large.json'
 import thumbnailScrollerData from '@/assets/data/thumbnail-scroller.json'
-import topHeaderNavigationData from '@/assets/data/list-of-links-top-header-navigation.json'
 
 // import used components
 import CmdAddressData from "@/components/CmdAddressData"
@@ -1000,7 +1032,9 @@ import CmdFormFilters from "@/components/CmdFormFilters.vue"
 import CmdGoogleMaps from "./components/CmdGoogleMaps"
 import CmdImageGallery from "@/components/CmdImageGallery.vue"
 import CmdImageZoom from "@/components/CmdImageZoom.vue"
+import CmdInputGroup from "./components/CmdInputGroup"
 import CmdLoginForm from "@/components/CmdLoginForm.vue"
+import CmdListOfLinks from "./components/CmdListOfLinks"
 import CmdMainNavigation from "@/components/CmdMainNavigation.vue"
 import CmdMultipleSwitch from "@/components/CmdMultipleSwitch.vue"
 import CmdMultistepFormProgressBar from "@/components/CmdMultistepFormProgressBar.vue"
@@ -1027,6 +1061,7 @@ import * as functions from "@/mixins/FieldValidation.js"
 export default {
     name: "App",
     components: {
+        CmdListOfLinks,
         CmdAddressData,
         CmdBackToTopButton,
         CmdBankAccountData,
@@ -1045,6 +1080,7 @@ export default {
         CmdGoogleMaps,
         CmdImageGallery,
         CmdImageZoom,
+        CmdInputGroup,
         CmdLoginForm,
         CmdMainNavigation,
         CmdMultistepFormProgressBar,
@@ -1148,8 +1184,7 @@ export default {
             tableDataSmall,
             tableDataLarge,
             tabsData,
-            thumbnailScrollerData,
-            topHeaderNavigationData
+            thumbnailScrollerData
         }
     },
     methods: {

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

@@ -8,7 +8,6 @@
     "links": [
         {
         "path": "mailto:",
-        "target": "",
         "iconClass": "icon-mail",
         "tooltip": "Send mail"
       }
@@ -22,7 +21,6 @@
     "links": [
       {
         "path": "mailto:",
-        "target": "",
         "iconClass": "icon-mail",
         "tooltip": "Send mail"
       },
@@ -42,7 +40,6 @@
     "links":  [
       {
         "path": "mailto:",
-        "target": "",
         "iconClass": "icon-mail",
         "tooltip": "Send mail"
       },
@@ -54,7 +51,6 @@
       },
       {
         "path": "tel:",
-        "target": "",
         "iconClass": "icon-phone",
         "tooltip": "Make call"
       }
@@ -68,7 +64,6 @@
     "links":  [
       {
         "path": "mailto:",
-        "target": "",
         "iconClass": "icon-mail",
         "tooltip": "Send mail"
       },
@@ -80,7 +75,6 @@
       },
       {
         "path": "tel:",
-        "target": "",
         "iconClass": "icon-phone",
         "tooltip": "Make call"
       }
@@ -94,7 +88,6 @@
     "links":  [
       {
         "path": "mailto:",
-        "target": "",
         "iconClass": "icon-mail",
         "tooltip": "Send mail"
       },
@@ -106,7 +99,6 @@
       },
       {
         "path": "tel:",
-        "target": "",
         "iconClass": "icon-phone",
         "tooltip": "Make call"
       }

package/src/assets/data/cookie-disclaimer.json

@@ -4,7 +4,7 @@
     "cookies": [
         {
           "id": "cookie-sessionid",
-          "description": "These cookies are required for functionality",
+          "description": "This cookie is required for functionality",
           "labelText": "SessionID",
           "checked": true,
           "status": "disabled",
@@ -16,7 +16,7 @@
         },
         {
           "id": "cookie-google-recaptcha",
-          "description": "This cookies prevents bots from sending forms",
+          "description": "This cookie prevents bots from sending forms",
           "labelText": "Google reCaptcha™",
           "checked": true,
           "status": "disabled",
@@ -34,7 +34,7 @@
     "cookies": [
       {
         "id": "cookie-google-maps",
-        "description": "These cookies enables the Google Map",
+        "description": "This cookie enables the Google Map™",
         "labelText": "Google Maps™",
         "checked": false,
         "linkDataPrivacy": {

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

@@ -21,22 +21,5 @@
     "path": "http://www.comand-cms.com",
     "target": "_blank",
     "tooltip": "Open CoManD-Website in new tab"
-  },
-  {
-    "type":"router",
-    "text": "Router-link with path",
-    "path": "/"
-  },
-  {
-    "type":"router",
-    "text": "Router-link with name",
-    "tooltip": "Go to homepage",
-    "route": {
-      "name": "home",
-      "params": {
-        "param1": "value",
-        "param2": "value"
-      }
-    }
   }
 ]

package/src/assets/data/tabs.json

@@ -1,17 +1,20 @@
 [
   {
     "name": "Tab 1",
-    "headline": "Tab 1 Headline",
+    "headlineText": "Tab 1 Headline",
+    "headlineLevel": 4,
     "htmlContent": "<p>Inhalt 1</p>"
   },
   {
     "name": "Tab 2",
-    "headline": "Tab 2 Headline",
+    "headlineText": "Tab 2 Headline",
+    "headlineLevel": 4,
     "htmlContent": "<p>Inhalt 2</p>"
   },
   {
     "name": "Tab 3",
-    "headline": "Tab 3 Headline",
+    "headlineText": "Tab 3 Headline",
+    "headlineLevel": 4,
     "htmlContent": "<p>Inhalt 3</p>"
   }
 ]

package/src/components/CmdBox.vue

@@ -1,11 +1,24 @@
 <template>
     <!-- begin boxType 'content' -->
     <div v-if="boxType === 'content'" :class="['cmd-box box content', {open : open, collapsible: collapsible}]">
-        <header v-if="useSlots?.includes('header')">
-            <!-- begin slot 'header' -->
-            <slot name="header"></slot>
-            <!-- end slot 'header' -->
-        </header>
+        <template v-if="useSlots?.includes('header')">
+            <!-- begin collapsible header with slot -->
+            <a v-if="collapsible" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
+                <!-- begin slot 'header' -->
+                <slot name="header"></slot>
+                <!-- end slot 'header' -->
+                <span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
+            </a>
+            <!-- end collapsible header with slot -->
+
+            <!-- begin default header with slot -->
+            <header v-else>
+                <!-- begin slot 'header' -->
+                <slot name="header"></slot>
+                <!-- end slot 'header' -->
+            </header>
+            <!-- end default header with slot -->
+        </template>
         <template v-else>
             <!-- begin header for collapsible -->
             <a v-if="collapsible" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">

package/src/components/CmdBoxSiteSearch.vue

@@ -126,7 +126,7 @@ export default {
          */
         textLegend: {
             type: String,
-            required: true
+            required: false
         },
         /**
          * toggle legend visibility

package/src/components/CmdCompanyLogo.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="cmd-company-logo">
-        <a v-if="link.type === 'router'"  href="./" :title="link.tooltip">
-            <img :src="pathCurrentLogo" :alt="altText"/>
-        </a>
-        <router-link v-else to="./" :title="link.tooltip">
+        <router-link v-if="link.type === 'router'" :href="link.path" :title="link.tooltip">
             <img :src="pathCurrentLogo" :alt="altText"/>
         </router-link>
+        <a v-else :to="link.path" :title="link.tooltip">
+            <img :src="pathCurrentLogo" :alt="altText"/>
+        </a>
     </div>
 </template>