comand-component-library 4.3.22 → 4.3.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.3.22",
+  "version": "4.3.24",
   "license": "GPL-3.0-only",
   "author": "CoManD-UI",
   "private": false,
@@ -9,7 +9,7 @@
     "prepublishOnly": "npm run build-lib",
     "dev": "vite",
     "build": "vite build",
-    "build-lib": "vite build && gulp",
+    "build-lib": "vite build",
     "preview": "vite preview"
   },
   "files": [
@@ -28,23 +28,18 @@
     "./us-cities.json": "./src/assets/lists-of-data/us-cities.json"
   },
   "dependencies": {
-    "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^4.3.43",
-    "comand-ui-iconfonts": "^1.0.19",
-    "core-js": "^3.20.1",
-    "prismjs": "^1.27.0",
+    "comand-frontend-framework": "^4.3.45",
+    "comand-ui-iconfonts": "^1.0.21",
     "vue": "^3.5.25",
-    "vue-router": "^4.0.12",
-    "vuex": "^4.0.2"
+    "vue-router": "^4.0.12"
   },
   "devDependencies": {
     "@iconify/vue": "^4.0.0",
     "@vitejs/plugin-vue": "^6.0.2",
     "@vue/test-utils": "^2.0.0-0",
     "axios": "^1.7.2",
-    "gulp": "^4.0.2",
     "sass": "^1.54.9",
-    "unplugin-vue-components": "^0.24.0",
+    "unplugin-vue-components": "^31.0.0",
     "vite": "^7.2.4",
     "vue-jest": "^5.0.0-0"
   }

package/src/ComponentLibrary.vue

@@ -1187,7 +1187,7 @@
                         @click.prevent="openSettingsSidebar('CmdList')"></a>
                 </h2>
                 <CmdList :cmdHeadline="{ headlineText: 'List of links', headlineLevel: 3 }" ref="CmdList"
-                    v-bind="cmdListSettingsData" :items="listData" listContentType="links" @click="cmdLinkOutput" />
+                    v-bind="listSettingsData" :items="listData" listContentType="links" @click="cmdLinkOutput" />
                 <dl class="output">
                     <dt>Event:</dt>
                     <dd>{{ outputCmdLink?.event?.originalEvent }}</dd>
@@ -1293,12 +1293,10 @@
                 <CmdMultistepFormWrapper :requiredPages="[1, 2]" :defaultInputValues="multistepFormDefaultInputValues">
 
                     <template v-slot:page-1="props">
-                        multistepFormDefaultInputValues: {{ multistepFormDefaultInputValues }}
                         <h3>Page 1 - all fields required</h3>
                         <CmdForm :formElements="multistepFormWrapperPage1Data" :useSlot="false"
                             @validation-status-change="toggleSystemMessage($event, props)" :submitButton="{ show: false }"
                             :modelValue="props.formDataForPage" @update:modelValue="props.updateFormDataForPage" />
-                        props.formDataForPage: {{ props.formDataForPage }}
                         <a href="#" @click.prevent="props.setErrorOnPage('This is an error!')">Set Error</a><br />
                         <a href="#" @click.prevent="props.removeErrorOnPage">Remove Error</a>
                     </template>
@@ -1317,7 +1315,6 @@
                                 @update:modelValue="setValue($event, 'page-2-email', props)"
                                 @validation-status-change="setValidationStatus($event, 'page-2-email', props)" />
                         </CmdForm>
-                        props.formDataForPage: {{ props.formDataForPage }}
                         <a href="#" @click.prevent="props.setErrorOnPage('This is an error!')">Set Error</a>
                     </template>
                     <template v-slot:page-3="props">
@@ -1335,7 +1332,6 @@
                                 <CmdFormElement element="input" type="text" labelText="City:" name="city" id="city"
                                     v-model="props.formDataForPage.city" />
                             </div>
-                            props.formDataForPage: {{ props.formDataForPage }}
                         </CmdForm>
                     </template>
                     <template v-slot:page-last="props">
@@ -1355,7 +1351,6 @@
                             <CmdSystemMessage systemMessage="Your request was send successfully!"
                                 validationStatus="success" :iconClose="{ show: false }" />
                             <p>A copy with all submitted data was send to you.</p>
-                            props.formDataForPage: {{ props.formDataForPage }}
                         </template>
                     </template>
                 </CmdMultistepFormWrapper>
@@ -1404,7 +1399,6 @@
                                 iconClass: "icon-chevron-one-stripe-left",
                                 tooltip: "To previous page"
                             }' text="Back" @click="props.setPrevPage" :disabled="props.disabledPrevLink" />
-                            props.disabledPrevLink: {{ props.disabledPrevLink }}
                         </div>
                     </template>
                 </CmdMultistepFormWrapper>
@@ -1506,10 +1500,11 @@
                 </h2>
                 <h3>Section with content provided by properties</h3>
                 <CmdSection
+                    style="border: 1px dashed var(--color-medium-gray);"
                     :cmdHeadline="{ headlineText: 'Headline for section provided by property', headlineLevel: 4 }"
                     content="Content for section provided by property." />
                 <h3>Section with content provided by slot</h3>
-                <CmdSection :useSlot="true">
+                <CmdSection :useSlot="true" style="border: 1px dashed var(--color-medium-gray);">
                     <h4>Headline for section provided by slot</h4>
                     <p>Content for section provided by slot.</p>
                 </CmdSection>
@@ -1524,9 +1519,12 @@
             <!-- begin site-footer --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage" id="section-site-footer">Site Footer</h2>
+                <h3>Site Footer with content provided by properties</h3>
+                <CmdSiteFooter :cmdList="{items: listData}" />
+                <h3>Site Footer with content provided by slot</h3>
                 <CmdSiteFooter>
                     <CmdLink linkType="href" ref="CmdLink" v-bind="cmdLinkSettingsData"
-                        :icon="{ iconClass: 'icon-chevron-one-stripe-left', position: 'left', tooltip: 'Tooltip for hyperlink' }"
+                        :icon="{ iconClass: 'icon-chevron-one-stripe-right', position: 'left', tooltip: 'Tooltip for hyperlink' }"
                         @click="cmdLinkOutput" />
                 </CmdSiteFooter>
             </CmdWidthLimitationWrapper>
@@ -1561,6 +1559,48 @@
             </CmdWidthLimitationWrapper>
             <!-- end site-search --------------------------------------------------------------------------------------------------->
 
+            <!-- begin site-wrapper --------------------------------------------------------------------------------------------------->
+            <CmdWidthLimitationWrapper>
+                <h2 class="headline-demopage" id="section-site-wrapper">
+                    <span>Site Wrapper</span>
+                    <a href="#" class="button small icon-cog" title="Open Component Settings"
+                    @click.prevent="openSettingsSidebar('CmdSiteWrapper')"></a>
+                </h2>
+                <h3>Site Wrapper with content provided by properties</h3>
+                <CmdSiteWrapper 
+                    class="demo-border"
+                    ref="CmdSiteWrapper"  
+                    :pageContent="siteWrapperData.pageContent"
+                    :cmdSiteHeader="siteWrapperData.cmdSiteHeader" 
+                    :cmdSiteFooter="siteWrapperData.cmdSiteFooter"
+                 />
+                 <h3>Site Wrapper with content (in three columns) provided by slot</h3>
+                 <CmdSiteWrapper class="demo-border">
+                    <template v-slot:topheader>
+                        <CmdList :items="listData" orientation="horizontal" align="right" />
+                    </template>
+                    <template v-slot:logo>
+                        <CmdCompanyLogo  v-bind="companyLogoData" />
+                    </template>
+                    <template v-slot:left-column>
+                        Slot content for left column
+                    </template>
+                    <template v-slot:page-content>
+                        <div class="demo-border">
+                            <h2>Headline for page-content-slot</h2>
+                            <p>Content for page-content-slot</p>
+                        </div>
+                    </template>
+                    <template v-slot:right-column>
+                        Slot content for right column
+                    </template>
+                    <template v-slot:site-footer>
+                        Slot content for site-footer-slot
+                    </template>
+                 </CmdSiteWrapper>
+            </CmdWidthLimitationWrapper>
+            <!-- end site-wrapper --------------------------------------------------------------------------------------------------->
+
             <!-- begin slideshow --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage" id="section-slideshow">
@@ -1919,6 +1959,7 @@ import multistepFormWrapperPage1Data from '@/assets/data/multistep-form-wrapper-
 import navigationData from '@/assets/data/main-navigation.json'
 import openingHoursData from '@/assets/data/opening-hours.json'
 import selectOptionsData from '@/assets/data/select-options.json'
+import siteWrapperData from '@/assets/data/site-wrapper.json'
 import slideshowData from '@/assets/data/slideshow.json'
 import smartSearchData from '@/assets/data/smart-search.json'
 import socialNetworksData from '@/assets/data/social-networks-page-by-json.json'
@@ -2136,6 +2177,7 @@ export default {
             navigationData,
             openingHoursData,
             selectOptionsData,
+            siteWrapperData,
             slideshowData,
             smartSearchData,
             socialNetworksData,
@@ -2559,7 +2601,7 @@ export default {
 
             .comand-versions {
                 margin: 0;
-                background: var(--color-scheme-background-color);
+                background: var(--color-scheme-background);
 
                 dd {
                     white-space: nowrap;

package/src/assets/data/footnote.json

@@ -4,7 +4,7 @@
         "descriptionData": [
             "Footnotetext #1",
             "Footnotetext #2",
-            "Footnotetext #3"
+            "<a href='#'>Footnotelink</a>"
         ]
     },
     {
@@ -12,7 +12,7 @@
         "descriptionData": [
             "Footnotetext #1",
             "Footnotetext #2",
-            "Footnotetext #3"
+            "<a href='#'>Footnotelink</a>"
         ]
     }
 ]

package/src/assets/data/listOfComponents.json

@@ -38,6 +38,7 @@
   "SiteFooter",
   "SiteHeader",
   "SiteSearch",
+  "SiteWrapper",
   "Slideshow",
   "SmartSearch",
   "SocialNetworks",

package/src/assets/data/site-wrapper.json

@@ -0,0 +1,176 @@
+{
+    "pageContent": "<div style='height: 100%;'>Main content provided by property</div>",
+    "cmdSiteHeader": {
+        "sticky": true,
+        "navigationInline": false,
+        "resizeHeaderOnScroll": false,
+        "scrollContainerToResizeHeader": ".page-wrapper",
+        "useGrid": true,
+        "cmdMainNavigation": {
+            "offcanvasPosition": "right",
+            "stretchMainItems": false,
+            "persistOnMobile": false,
+            "navigationEntries": [
+                {
+                    "type": "href",
+                    "text": "href 1",
+                    "path": "#",
+                    "iconClass": "icon-home"
+                },
+                {
+                    "type": "href",
+                    "text": "href 2",
+                    "path": "",
+                    "subentries": [
+                        {
+                            "type": "href",
+                            "text": "href 2.1",
+                            "path": "",
+                            "subentries": [
+                                {
+                                    "type": "href",
+                                    "text": "href 2.1.1",
+                                    "path": "#"
+                                },
+                                {
+                                    "type": "href",
+                                    "text": "href 2.1.2",
+                                    "path": "#"
+                                },
+                                {
+                                    "type": "href",
+                                    "text": "href 2.1.3",
+                                    "path": "#"
+                                }
+                            ]
+                        },
+                        {
+                            "type": "href",
+                            "text": "href 2.2",
+                            "path": "#",
+                            "subentries": []
+                        }
+                    ]
+                },
+                {
+                    "type": "router",
+                    "text": "router 1",
+                    "path": "#"
+                },
+                {
+                    "type": "router",
+                    "text": "router 2",
+                    "path": "#",
+                    "subentries": [
+                        {
+                            "type": "router",
+                            "text": "router 2.1",
+                            "path": {
+                                "name": "home"
+                            }
+                        },
+                        {
+                            "type": "router",
+                            "text": "router 2.2",
+                            "path": {
+                                "name": "home"
+                            }
+                        }
+                    ]
+                },
+                {
+                    "type": "href",
+                    "text": "CoManD-UI",
+                    "path": "https://www.comand-ui.com",
+                    "target": "comand-website"
+                }
+            ]
+        },
+        "cmdCompanyLogo": {
+            "link": {
+                "type": "href",
+                "path": "./",
+                "tooltip": "Tooltip"
+            },
+            "pathDefaultLogo": "/media/images/logos/logo.svg",
+            "pathDarkmodeLogo": "/media/images/logos/logo-darkmode.svg",
+            "altText": "Company Logo"
+        }
+    },
+    "cmdSiteFooter": {
+        "contentOrientation": "vertical",
+        "cmdList": {
+            "items": [
+            {
+                "icon": {
+                    "iconClass": "icon-user-profile",
+                    "tooltip": "Href with anchor"
+                },
+                "linkType": "href",
+                "text": "",
+                "path": "#anchor-back-to-top"
+            },
+            {
+                "linkType": "router",
+                "text": "Router",
+                "path": {
+                    "path": "#"
+                }
+            },
+            {
+                "icon": {
+                    "iconClass": "icon-home",
+                    "tooltip": "Router with object for path"
+                },
+                "linkType": "router",
+                "text": "Router (+hash)",
+                "path": {
+                    "path": "/",
+                    "hash": "#anchor-back-to-top"
+                }
+            },
+            {
+                "icon": {
+                    "iconClass": "icon-user-profile",
+                    "tooltip": "Tooltip"
+                },
+                "linkType": "href",
+                "text": "Fancybox content",
+                "path": "/content/fancybox-content.html",
+                "fancybox": true,
+                "children": [
+                    {
+                        "icon": {
+                            "iconClass": "icon-home",
+                            "tooltip": "Tooltip"
+                        },
+                        "linkType": "href",
+                        "text": "Link for child #1",
+                        "path": "#"
+                    },
+                    {
+                        "icon": {
+                            "iconClass": "icon-globe",
+                            "tooltip": "Tooltip"
+                        },
+                        "linkType": "href",
+                        "text": "Link for child #2",
+                        "path": "#"
+                    }
+                ]
+            },
+            {
+                "icon": {
+                    "iconClass": "icon-export",
+                    "tooltip": "Tooltip"
+                },
+                "linkType": "href",
+                "text": "External link",
+                "path": "https://www.comand-ui.com",
+                "target": "_blank",
+                "tooltip": "Open CoManD-Website in new tab"
+            }
+        ]
+    }
+    }
+}

package/src/componentSettingsDataAndControls.vue

@@ -788,6 +788,14 @@ export default {
                     }
                 ],
             },
+            cmdSiteWrapperSettingsData: {
+                "cmdSiteHeader.show": {
+                    show: true
+                },
+                "cmdSiteFooter.show": {
+                    show: true
+                }
+            },
             cmdSiteSearchSettingsData: {
                 useFilters: true,
                 legend: {

package/src/components/CmdAccordion.vue

@@ -5,17 +5,9 @@
         :name="generateAccordionName"
     >
         <summary :class="{'writing-mode-vertical' : summaryWritingMode === 'vertical'}">
-            <!--
-            <span :class="[cmdIconClosed.iconClass, 'closed']" :title="cmdIconClosed.tooltip"></span>
-            <span :class="[cmdIconOpen.iconClass, 'open']" :title="cmdIconOpen.tooltip"></span>
-        -->
-            <CmdIcon :iconClass="toggleIconIconClass" :class="toggleIconStatus" :tooltip="toggleIconTooltip" />
+            <CmdIcon :iconClass="toggleIconIconClassClosed" class="closed" :tooltip="cmdIconClosedRowView.tooltip" />
+            <CmdIcon :iconClass="toggleIconIconClassOpen" class="open" :tooltip="cmdIconOpenRowView.tooltip" />
             <CmdHeadline v-bind="cmdHeadlineProperties" />
-            <!--
-            toggleIconStatus: {{ toggleIconStatus }}<br />
-            this.$refs.cmdAccordion?.open: {{ $refs.cmdAccordion?.open }}<br />
-            isOpen: {{ isOpen() }}
-        -->
         </summary>
         <div class="accordion-body">
             <!-- begin slot-content -->
@@ -33,9 +25,6 @@ import {createUuid} from "../utils/common.js"
 
 export default {
     name: "CmdAccordion",
-    mounted() {
-  console.log("this.$refs.cmdAccordion.open:", this.$refs.cmdAccordion?.open)
-},
     props: {
         /**
          * arranges accordion-content in a row
@@ -57,7 +46,7 @@ export default {
             type: String,
             default: "horizontal",
             validator(value) {
-                return value === "horizontal",
+                return value === "horizontal" ||
                 value === "vertical"
             }
         },
@@ -111,7 +100,7 @@ export default {
             type: Object,
             default() {
                 return {
-                    iconClass: "icon-chevron-one-stripe-right",
+                    iconClass: "icon-chevron-one-stripe-left",
                     tooltip: "Collapse accordion"
                 }
             }
@@ -174,31 +163,12 @@ export default {
                 ...this.cmdHeadline
             }
         },
-        toggleIconIconClass() {
-            if(this.rowView) {
-                return this.isOpen ? this.cmdIconOpenRowView?.iconClass : this.cmdIconClosedRowView?.iconClass
-            } else {
-                return this.isOpen ? this.cmdIconOpenColumnView?.iconClass : this.cmdIconClosedColumnView?.iconClass
-            }
-        },
-        toggleIconStatus() {
-            return this.isOpen ? 'open' : 'closed'
+        toggleIconIconClassOpen() {
+            return this.rowView ? this.cmdIconOpenRowView?.iconClass : this.cmdIconOpenColumnView?.iconClass
         },
-        toggleIconTooltip() {
-            if(this.rowView) {
-                return this.isOpen ? this.cmdIconOpenRowView?.tooltip : this.cmdIconClosedRowView?.tooltip
-            } else {
-                return this.isOpen ? this.cmdIconOpenColumnView?.tooltip : this.cmdIconClosedColumnView?.tooltip
-            }
-        }
-    },
-    methods: {
-        isOpen() {
-            return this.$refs.cmdAccordion?.open + "test"
-        }
-    },
-    mounted() {
-        this.isOpen()
+        toggleIconIconClassClosed() {
+            return this.rowView ? this.cmdIconClosedRowView?.iconClass : this.cmdIconClosedColumnView?.iconClass
+        } 
     }
 }
 </script>

package/src/components/CmdAccordionsWrapper.vue

@@ -20,8 +20,6 @@
             ]">
             <slot
                 :collapsingBoxesOpen="collapsingBoxesOpen"
-                :boxToggled="boxToggled"
-                :boxIsOpen="boxIsOpen"
                 :rowView="rowView"
                 :openAccordionHasFullWidth="fullWidth"
                 :summaryWritingMode="summaryWritingMode"
@@ -88,7 +86,7 @@ export default {
             type: String,
             default: "horizontal",
             validator(value) {
-                return value === "horizontal",
+                return value === "horizontal" ||
                 value === "vertical"
             }
         },
@@ -138,7 +136,7 @@ export default {
             default
                 () {
                 return {
-                    iconClass: 'icon-blocks-small',
+                    iconClass: 'icon-columns',
                     tooltip: 'Toggle to row view'
                 }
             }

package/src/components/CmdContainer.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- begin CmdContainer ---------------------------------------------------------------------------------------- -->
-    <div class="cmd-container">
+    <div :class="['cmd-container', {box: styleAsBox}]">
         <!-- begin CmdHeadline -->
         <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline" />
         <!-- end CmdHeadline -->
@@ -18,6 +18,13 @@
 export default {
     name: "CmdContainer",
     props: {
+        /**
+         * style component as a box
+         */
+        styleAsBox: {
+            type: Boolean,
+            default: false
+        },
         /** define container-type
          *
          * @affectsStyling: true

package/src/components/CmdCookieDisclaimer.vue

@@ -126,12 +126,14 @@
 
                 <!-- begin button-wrapper for 'accept'-buttons -->
                 <div class="button-wrapper align-center">
-                    <button type="button" @click="acceptCurrentCookies">
-                        <span>{{ getMessage('cookie_disclaimer.button.accept_current_settings') }}</span>
-                    </button>
-                    <button type="button" class="primary" @click="acceptAllCookies">
-                        <span>{{ getMessage('cookie_disclaimer.button.accept_all_cookies') }}</span>
-                    </button>
+                    <CmdLink
+                        v-bind="cmdLinkAcceptRequiredCookiesProperties" 
+                        @click="acceptRequiredCookies"
+                    />
+                    <CmdLink
+                        v-bind="cmdLinkAcceptAllCookiesProperties" 
+                        @click="acceptAllCookies"
+                    />
                 </div>
                 <!-- end button-wrapper for 'accept'-buttons -->
             </div>
@@ -144,6 +146,7 @@
 // import mixins
 import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdCookieDisclaimer/DefaultMessageProperties"
+import CmdLink from "./CmdLink.vue";
 
 export default {
     name: "CmdCookieDisclaimer",
@@ -218,9 +221,39 @@ export default {
         showPrivacyText: {
             type: Boolean,
             default: true
+        },
+        /**
+         * properties for CmdLink-compnent for "accept required cookies"-button
+         */
+        cmdLinkAcceptRequiredCookies: {
+            type: Object,
+            required: false
+        },
+        /**
+         * properties for CmdLink-compnent for "accept all cookies"-button
+         */
+         cmdLinkAcceptAllCookies: {
+            type: Object,
+            required: false
         }
     },
     computed: {
+        cmdLinkAcceptRequiredCookiesProperties() {
+            return {
+                linkType: "button",
+                highlightLevel: null,
+                text: this.getMessage("cookie_disclaimer.button.accept_required_cookies"),
+                ...this.cmdLinkAcceptRequiredCookies
+            }
+        },
+        cmdLinkAcceptAllCookiesProperties() {
+            return {
+                linkType: "button",
+                highlightLevel: "primary",
+                text: this.getMessage("cookie_disclaimer.button.accept_all_cookies"),
+                ...this.cmdLinkAcceptAllCookies
+            }
+        },
         acceptedCookies: {
             get() {
                 const cookies = this.modelValue ? [...this.modelValue] : []
@@ -270,7 +303,7 @@ export default {
                 this.openBoxes.splice(index, 1);
             }
         },
-        acceptCurrentCookies() {
+        acceptRequiredCookies() {
             this.$emit("close-cookie-disclaimer", this.acceptedCookies)
         },
         acceptAllCookies() {

package/src/components/CmdLink.vue

@@ -125,14 +125,13 @@ export default {
         },
         /**
          * set highlight-level for link/button
-         * 
-         * @allowedValues: "none", "primary", "secondary", "tertiary"
+         * null"none", "primary", "secondary", "tertiary"
          */
          highlightLevel: {
             type: String,
             default: "primary",
             validator(value) {
-                return value === "none" ||
+                return value === null||
                     value === "primary" ||
                     value === "secondary" ||
                     value === "tertiary"