comand-component-library 4.3.20 → 4.3.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.3.20",
+  "version": "4.3.22",
   "license": "GPL-3.0-only",
   "author": "CoManD-UI",
   "private": false,
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^4.3.42",
+    "comand-frontend-framework": "^4.3.43",
     "comand-ui-iconfonts": "^1.0.19",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",

package/src/ComponentLibrary.vue

@@ -175,38 +175,41 @@
                     <a href="#" class="button small icon-cog" title="Open Component Settings"
                         @click.prevent="openSettingsSidebar('CmdAccordion')"></a>
                 </h2>
-                    <CmdAccordion ref="CmdAccordion" open :name="accordionData.name"
-                        :cmdHeadline="{ headlineText: 'Summary (no highlighting)' }"
-                        :textAccordionBody="accordionData.textAccordionBody" v-bind="cmdAccordionSettingsData" />
+                <CmdAccordion ref="CmdAccordion" open :name="accordionData.name"
+                    :cmdHeadline="{ headlineText: 'Summary (no highlighting)' }"
+                    :textAccordionBody="accordionData[0].textAccordionBody" v-bind="cmdAccordionSettingsData" />
                 <CmdAccordion highlightLevel="primary" :name="accordionData.name"
                     :cmdHeadline="{ headlineText: 'Summary (primary highlighting)' }"
-                    :textAccordionBody="accordionData.textAccordionBody" />
+                    :textAccordionBody="accordionData[1].textAccordionBody" />
                 <CmdAccordion highlightLevel="secondary" :name="accordionData.name"
                     :cmdHeadline="{ headlineText: 'Summary (secondary highlighting)' }"
-                    :textAccordionBody="accordionData.textAccordionBody" />
+                    :textAccordionBody="accordionData[2].textAccordionBody" />
                 <CmdAccordion highlightLevel="tertiary" :name="accordionData.name"
                     :cmdHeadline="{ headlineText: 'Summary (tertiary highlighting)' }"
-                    :textAccordionBody="accordionData.textAccordionBody" />
+                    :textAccordionBody="accordionData[3].textAccordionBody" />
             </CmdWidthLimitationWrapper>
             <!-- end accordion --------------------------------------------------------------------------------------------------->
 
             <!-- begin accordions-wrapper --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
-                <h2 class="headline-demopage" id="section-accordion">
+                <h2 class="headline-demopage" id="section-accordions-wrapper">
                     <span>Accordions-Wrapper</span>
                     <a href="#" class="button small icon-cog" title="Open Component Settings"
                         @click.prevent="openSettingsSidebar('CmdAccordionsWrapper')"></a>
                 </h2>
-                <CmdAccordionsWrapper :useGap="false" :useRowViewAsDefault="true">
+                <CmdAccordionsWrapper ref="CmdAccordionsWrapper" v-bind="cmdAccordionsWrapperSettingsData">
                     <template v-slot="slotProps">
                      <CmdAccordion 
-                            v-for="(accordion, index) in 5" 
+                            v-for="(accordion, index) in accordionData" 
                             :key="index" 
                             open 
-                            :name="accordionData.name"
-                            :cmdHeadline="{ headlineText: 'Summary Accordion #' + (index + 1) }"
+                            :accordionName="accordion.name"
+                            :cmdHeadline="{ headlineText: accordion.cmdHeadline.headlineText }"
                             :rowView="slotProps.rowView" 
-                            :textAccordionBody="accordionData.textAccordionBody" 
+                            :openAccordionHasFullWidth="slotProps.fullWidth"
+                            :textAccordionBody="accordion.textAccordionBody" 
+                            :allowMultipleExpandedBoxes="slotProps.allowMultipleExpandedBoxes"
+                            :summaryWritingMode="slotProps.summaryWritingMode"
                         />
                     </template>
                 </CmdAccordionsWrapper>
@@ -1011,7 +1014,7 @@
             </CmdWidthLimitationWrapper>
             <!-- end flexible-scroll-container --------------------------------------------------------------------------------------------------->
 
-            <!-- begin footnote --------------------------------------------------------------------------------------------------->
+            <!-- begin footnotes --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage" id="section-footnote">
                     <span>Footnotes</span>
@@ -1021,18 +1024,15 @@
                 <CmdFootnote 
                     ref="CmdFootnote"
                      v-bind="cmdFootnoteSettingsData"
-                    :cmdHeadline="{ headlineText: 'Footnote with asterisks', headlineLevel: 3}"
-                    descriptionTermType="asterisk"
-                    :descriptionData="footnoteData.descriptionData"
+                    :descriptionData="footnoteData[0].descriptionData"
                 />
                 <CmdFootnote 
-                    :cmdHeadline="{ headlineText: 'Footnote with numbers', headlineLevel: 3}"
-                    descriptionTermType="number"
-                    :descriptionData="footnoteData.descriptionData"
+                    :descriptionData="footnoteData[1].descriptionData"
+                    :descriptionTermType="footnoteData[1].descriptionTermType"
                 />
     
             </CmdWidthLimitationWrapper>
-            <!-- end footnote --------------------------------------------------------------------------------------------------->
+            <!-- end footnotes --------------------------------------------------------------------------------------------------->
 
             <!-- begin forms --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>

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

@@ -1,8 +1,41 @@
-{
-    "name": "accordion-name",
-    "cmdHeadline": {
-        "headlineText": "Summary",
-        "headlineLevel": 4
+[
+    {
+        "name": "accordion-name",
+        "cmdHeadline": {
+            "headlineText": "Summary #1",
+            "headlineLevel": 4
+        },
+        "textAccordionBody": "This is text for accordion body #1!"
     },
-    "textAccordionBody": "This is text for accordion body!"
-}
+    {
+        "name": "accordion-name",
+        "cmdHeadline": {
+            "headlineText": "Summary #2",
+            "headlineLevel": 4
+        },
+        "textAccordionBody": "This is text for accordion body #2!"
+    },
+    {
+        "name": "accordion-name",
+        "cmdHeadline": {
+            "headlineText": "Summary #3",
+            "headlineLevel": 4
+        },
+        "textAccordionBody": "This is text for accordion body #3!"
+    },
+    {
+        "name": "accordion-name",
+        "cmdHeadline": {
+            "headlineText": "Summary #4",
+            "headlineLevel": 4
+        },
+        "textAccordionBody": "This is text for accordion body #4!"
+    },    {
+        "name": "accordion-name",
+        "cmdHeadline": {
+            "headlineText": "Summary #5",
+            "headlineLevel": 4
+        },
+        "textAccordionBody": "This is text for accordion body #5!"
+    }
+]

package/src/assets/data/footnote.json

@@ -1,8 +1,18 @@
-{
-    "descriptionTermType": "number",
-    "descriptionData": [
-        "Footnotetext #1",
-        "Footnotetext #2",
-        "Footnotetext #3"
-    ]
-}
+[
+    {
+        "descriptionTermType": "asterisk",
+        "descriptionData": [
+            "Footnotetext #1",
+            "Footnotetext #2",
+            "Footnotetext #3"
+        ]
+    },
+    {
+        "descriptionTermType": "number",
+        "descriptionData": [
+            "Footnotetext #1",
+            "Footnotetext #2",
+            "Footnotetext #3"
+        ]
+    }
+]

package/src/assets/data/listOfComponents.json

@@ -1,5 +1,6 @@
 [
   "Accordion",
+  "AccordionsWrapper",
   "AddressData",
   "AdvancedFormElements",
   "BankAccountData",

package/src/componentSettingsDataAndControls.vue

@@ -11,6 +11,16 @@ export default {
                 }
             },
             cmdAccordionSettingsControls: {
+                summaryWritingMode: [
+                    {
+                        text: "horizontal (default)",
+                        value: "horizontal"
+                    },
+                    {
+                        text: "vertical",
+                        value: "vertical"
+                    }
+                ],
                 highlightLevel: [
                     {
                         text: "none (default)",
@@ -30,6 +40,29 @@ export default {
                     }
                 ]
             },
+            cmdAccordionsWrapperSettingsData: {
+                cmdHeadline: {
+                    headlineText: "Accordions provided by Slot",
+                    headlineLevel: 4
+                },
+                useGap: true,
+                useRowViewAsDefault: false,
+                fullWidth: true,
+                allowUserToToggleOrientation: true,
+                allowMultipleExpandedBoxes: false
+            },
+            cmdAccordionsWrapperSettingsControls: {
+                summaryWritingMode: [
+                    {
+                        text: "horizontal (default)",
+                        value: "horizontal"
+                    },
+                    {
+                        text: "vertical",
+                        value: "vertical"
+                    }
+                ]
+            },
             cmdAddressDataSettingsData: {
                 cmdHeadline: {
                     headlineText: "Address Data",
@@ -40,7 +73,8 @@ export default {
                 showLabelTexts: false,
                 showIconsOnly: false,
                 showLabels: true,
-                showCityBeforeZip: false
+                showCityBeforeZip: false,
+                styleAsBox: false
             },
             cmdAddressDataSettingsControls: {
                 contentOrientation: [
@@ -60,7 +94,8 @@ export default {
                     headlineLevel: 3
                 },
                 allowCopyByClick: false,
-                additionalInformation: ""
+                additionalInformation: "",
+                styleAsBox: false
             },
             cmdBreadcrumbsSettingsData: {
                 breadcrumbLabel: "You are here:",

package/src/components/CmdAccordion.vue

@@ -1,7 +1,10 @@
 <template>
     <!-- begin CmdAccordion ---------------------------------------------------------------------------------------- -->
-    <details ref="cmdAccordion" :class="['cmd-accordion', highlightLevel, { 'flex-container no-gap' : rowView }]" :name="accordionName">
-        <summary>
+    <details ref="cmdAccordion" 
+        :class="['cmd-accordion', highlightLevel, { 'flex-container no-gap' : rowView, 'stretch-to-full-width': openAccordionHasFullWidth }]" 
+        :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>
@@ -26,6 +29,8 @@
 </template>
 
 <script>
+import {createUuid} from "../utils/common.js"
+
 export default {
     name: "CmdAccordion",
     mounted() {
@@ -33,7 +38,7 @@ export default {
 },
     props: {
         /**
-         * arranges box-content in a row
+         * arranges accordion-content in a row
          *
          * @affectsStyling: true
          */
@@ -41,6 +46,21 @@ export default {
             type: Boolean,
             default: false
         },
+        /**
+         * set direction of text for summary
+         * 
+         * rowView-property must be true
+         * 
+         * @allowedValues: "horizontal", "vertical"
+         */
+         summaryWritingMode: {
+            type: String,
+            default: "horizontal",
+            validator(value) {
+                return value === "horizontal",
+                value === "vertical"
+            }
+        },
         /**
          * set highlight-level for headline
          * 
@@ -63,6 +83,15 @@ export default {
             type: String,
             required: false
         },
+        /**
+         * open accordion uses remaining space in accordions-wrapper
+         * 
+         * rowView must be false 
+         */
+         openAccordionHasFullWidth: {
+            type: Boolean,
+            default: true
+         },
         /**
          * properties for CmdIcon-component if accordion is collapsed/closed
          */
@@ -115,9 +144,18 @@ export default {
         * accordion-name is required if multiple-accrdion-boxes should be connect (name must be identical)
         */
         accordionName: {
-            type: Object,
+            type: String,
             required: false
         },
+        /**
+         * multiple boxes can be expanded if activated
+         * 
+         * accordionName-property must have different value or kept empty for each accordion-box in wrapper
+         */
+         allowMultipleExpandedBoxes: {
+            type: Boolean,
+            default: false
+         },
         /**
          * properties for CmdHeadline-component
          */
@@ -127,6 +165,9 @@ export default {
         }
     },
     computed: {
+        generateAccordionName() {
+            return this.allowMultipleExpandedBoxes ? this.accordionName + "-" + createUuid() : this.accordionName
+        },
         cmdHeadlineProperties() {
             return {
                 headlineLevel: 4,
@@ -155,12 +196,16 @@ export default {
         isOpen() {
             return this.$refs.cmdAccordion?.open + "test"
         }
+    },
+    mounted() {
+        this.isOpen()
     }
 }
 </script>
 
 <style>
 .cmd-accordion {
+    /* begin rowView */
     &.flex-container {
         flex-wrap: nowrap;
         align-items: center;
@@ -173,13 +218,18 @@ export default {
             summary {
                 border: 0;
             }
+
+            &.stretch-to-full-width {
+                flex: 1; /* stretch accordion-body over remaining (horizontal) space in accordion-wrapper */
+            }    
         }
 
-        summary {
+        summary.writing-mode-vertical {
             writing-mode: vertical-rl;
             transform: rotate(180deg);
-        }
+        } 
     }
+    /* end rowView */
 
     summary {
         .cmd-headline {

package/src/components/CmdAccordionsWrapper.vue

@@ -2,22 +2,20 @@
     <!-- begin CmdBoxWrapper ---------------------------------------------------------------------------------------- -->
     <div class="cmd-accordions-wrapper">
         <div v-if="cmdHeadline.headlineText || allowUserToToggleOrientation" class="flex-container headline-wrapper">
-            <!-- begin CmdHeadline -->
             <CmdHeadline v-if="cmdHeadline.headlineText" v-bind="cmdHeadline" />
-            <!-- end CmdHeadline -->
 
+            <!-- begin toggle orientation TODO: replace by CmdLink -->
             <div v-if="allowUserToToggleOrientation" class="options-wrapper">
-                <a href="#" @click.prevent="toggleOrientation" :title="rowView ? iconRowView.tooltip : iconColumnView.tooltip">
-                    <!-- begin CmdIcon -->
+                <a href="#" @click.prevent="toggleOrientation" class="toggle-orientation" :title="rowView ? iconRowView.tooltip : iconColumnView.tooltip">
                     <CmdIcon :iconClass="rowView ? iconColumnView.iconClass : iconRowView.iconClass" :type="rowView ? iconColumnView.iconType : iconRowView.iconType" />
-                    <!-- end CmdIcon -->
                 </a>
             </div>
+            <!-- begin end orientation -->
         </div>
-        <div :class="['inner-accordions-wrapper',
+        <div :class="['inner-accordions-wrapper flex-container',
             {
                 'no-gap': !useGap,
-                'flex-container' : rowView 
+                'flex-direction-column' : !rowView 
             }
             ]">
             <slot
@@ -25,7 +23,9 @@
                 :boxToggled="boxToggled"
                 :boxIsOpen="boxIsOpen"
                 :rowView="rowView"
-                @toggleCollapse="boxIsToggled"
+                :openAccordionHasFullWidth="fullWidth"
+                :summaryWritingMode="summaryWritingMode"
+                :allowMultipleExpandedBoxes="allowMultipleExpandedBoxes"
             >
             </slot>
         </div>
@@ -54,7 +54,6 @@ export default {
             type: Array,
             required: false
         },
-    
         /**
          * activate if a gap between boxes should be used
          */
@@ -69,6 +68,30 @@ export default {
             type: Boolean,
             default: false
         },
+        /**
+         * open accordion uses remaining space in accordions-wrapper
+         * 
+         * rowView must be false 
+         */
+        fullWidth: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * set direction of text for summary
+         * 
+         * rowView-property must be true
+         * 
+         * @allowedValues: "horizontal", "vertical"
+         */
+        summaryWritingMode: {
+            type: String,
+            default: "horizontal",
+            validator(value) {
+                return value === "horizontal",
+                value === "vertical"
+            }
+        },
         /**
          * activate if user can toggle grid- and row-orientation by himself
          */
@@ -149,40 +172,9 @@ export default {
     methods: {
         toggleOrientation() {
             this.rowView = !this.rowView
-            this.oneBoxPerRow = this.rowView
-        },
-        boxIsOpen(index) {
-            return this.currentOpenBox.includes(index)
-        },
-        toggleCollapsingBoxes() {
-            this.collapsingBoxesOpen = !this.collapsingBoxesOpen
-        },
-        boxToggled(boxIndex, open) {
-            if(this.allowMultipleExpandedBoxes) {
-                if(open) {
-                    this.currentOpenBox.push(boxIndex)
-                } else {
-                    // remove boxIndex from array to close specific box
-                    let position = this.currentOpenBox.indexOf(boxIndex)
-                    this.currentOpenBox.splice(position, 1)
-                }
-            } else {
-                this.currentOpenBox  = []
-
-                // add current boxIndex to array to open specific box
-                if(open) {
-                    this.currentOpenBox.push(boxIndex)
-                }
-            }
         }
     },
     watch: {
-        openBoxesByDefault: {
-            handler() {
-                this.currentOpenBox = [...this.openBoxesByDefault || []]
-            },
-            immediate: true
-        },
         useRowViewAsDefault: {
             handler() {
                 this.oneBoxPerRow = this.useRowViewAsDefault
@@ -194,8 +186,17 @@ export default {
 </script>
 
 <style>
-/* begin cmd-box-wrapper ---------------------------------------------------------------------------------------- */
+/* begin cmd-accordions-wrapper ---------------------------------------------------------------------------------------- */
 .cmd-accordions-wrapper {
+    .headline-wrapper {
+        align-items: center;
+
+        .options-wrapper {
+            flex: none;
+
+        }
+    }
+
     .inner-accordions-wrapper {
         .cmd-accordion {
             flex: none;
@@ -204,6 +205,20 @@ export default {
 }
 </style>
 
-<style>
-/* end cmd-box-wrapper ---------------------------------------------------------------------------------------- */
-</style>
+<style lang="scss">
+@import '../assets/styles/variables';
+
+@media only screen and (max-width: $medium-max-width) {
+    .cmd-accordions-wrapper {
+        .toggle-orientation {
+            display: none; /* hide button, because accordions are displayed vertically only at this screen-resolution */
+        }
+
+        .inner-accordions-wrapper {
+            flex-direction: column; /* force accordions to be displayed vertically */
+        }
+    }
+}
+/* end cmd-accordions-wrapper ---------------------------------------------------------------------------------------- */
+</style>
+

package/src/components/CmdAddressData.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- begin CmdAddressData ---------------------------------------------------------------------------------------- -->
-    <div class="cmd-address-data vcard">
+    <div :class="['cmd-address-data vcard', {box: styleAsBox}]">
         <!-- begin slot -->
         <template v-if="useSlot">
             <slot></slot>
@@ -184,6 +184,13 @@ export default {
     name: "CmdAddressData",
     mixins: [EditMode],
     props: {
+        /**
+         * style component as a box
+         */
+        styleAsBox: {
+            type: Boolean,
+            default: false
+        },
         /**
          * activate if you want to use slot instead for given structure
          */

package/src/components/CmdBankAccountData.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- begin CmdBankAccountData ---------------------------------------------------------------------------------------- -->
-    <div class="cmd-bank-account-data">
+    <div :class="['cmd-bank-account-data', {box: styleAsBox}]">
         <!-- begin slot -->
         <template v-if="useSlot">
             <slot></slot>
@@ -41,6 +41,13 @@
 export default {
     name: "CmdBankAccountData",
     props: {
+        /**
+         * style component as a box
+         */
+         styleAsBox: {
+            type: Boolean,
+            default: false
+        },
         /**
          * activate if you want to use slot instead for given structure
          */

package/src/components/CmdFootnote.vue

@@ -71,6 +71,7 @@ export default {
 </script>
 
 <style>
+/* begin cmd-footnote ---------------------------------------------------------------------------------------- */
 .cmd-footnote {
     .cmd-list {
         dl {
@@ -89,4 +90,5 @@ export default {
         }
     }
 }
+/* end cmd-footnote ---------------------------------------------------------------------------------------- */
 </style>

package/src/components/CmdList.vue

@@ -147,7 +147,7 @@ export default {
         /**
          * define the highlight-level
          * 
-         * @allowedValues: "", "primary", "secondary", "tertiary"
+         * @allowedValues: null, "primary", "secondary", "tertiary"
          */
         highlightLevel: {
             type: String,

package/src/components/CmdWidthLimitationWrapper.vue

@@ -147,7 +147,7 @@ export default {
                 if(this.contentOrientation === "horizontal") {
                     return "flex-container"
                 } else if(this.contentOrientation === "vertical") {
-                    return "flex-container vertical"
+                    return "flex-container flex-direction-column"
                 }
             }
             return ""