comand-component-library 4.3.21 → 4.3.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.3.21",
+  "version": "4.3.23",
   "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.42",
-    "comand-ui-iconfonts": "^1.0.19",
-    "core-js": "^3.20.1",
-    "prismjs": "^1.27.0",
+    "comand-frontend-framework": "^4.3.43",
+    "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

@@ -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>
@@ -2559,7 +2559,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/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,18 +1,13 @@
 <template>
     <!-- begin CmdAccordion ---------------------------------------------------------------------------------------- -->
-    <details ref="cmdAccordion" :class="['cmd-accordion', highlightLevel, { 'flex-container no-gap' : rowView }]" :name="accordionName">
-        <summary :class="{'writing-mode-vertical' : summaryWritingMode}">
-            <!--
-            <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" />
+    <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'}">
+            <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 -->
@@ -26,11 +21,10 @@
 </template>
 
 <script>
+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
@@ -52,7 +46,7 @@ export default {
             type: String,
             default: "horizontal",
             validator(value) {
-                return value === "horizontal",
+                return value === "horizontal" ||
                 value === "vertical"
             }
         },
@@ -78,6 +72,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
          */
@@ -97,7 +100,7 @@ export default {
             type: Object,
             default() {
                 return {
-                    iconClass: "icon-chevron-one-stripe-right",
+                    iconClass: "icon-chevron-one-stripe-left",
                     tooltip: "Collapse accordion"
                 }
             }
@@ -130,9 +133,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
          */
@@ -142,34 +154,21 @@ export default {
         }
     },
     computed: {
+        generateAccordionName() {
+            return this.allowMultipleExpandedBoxes ? this.accordionName + "-" + createUuid() : this.accordionName
+        },
         cmdHeadlineProperties() {
             return {
                 headlineLevel: 4,
                 ...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"
-        }
+        toggleIconIconClassClosed() {
+            return this.rowView ? this.cmdIconClosedRowView?.iconClass : this.cmdIconClosedColumnView?.iconClass
+        } 
     }
 }
 </script>
@@ -189,12 +188,16 @@ export default {
             summary {
                 border: 0;
             }
+
+            &.stretch-to-full-width {
+                flex: 1; /* stretch accordion-body over remaining (horizontal) space in accordion-wrapper */
+            }    
         }
 
         summary.writing-mode-vertical {
             writing-mode: vertical-rl;
             transform: rotate(180deg);
-        }
+        } 
     }
     /* end rowView */
 

package/src/components/CmdAccordionsWrapper.vue

@@ -2,31 +2,28 @@
     <!-- 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
                 :collapsingBoxesOpen="collapsingBoxesOpen"
-                :boxToggled="boxToggled"
-                :boxIsOpen="boxIsOpen"
                 :rowView="rowView"
+                :openAccordionHasFullWidth="fullWidth"
                 :summaryWritingMode="summaryWritingMode"
-                @toggleCollapse="boxIsToggled"
+                :allowMultipleExpandedBoxes="allowMultipleExpandedBoxes"
             >
             </slot>
         </div>
@@ -55,7 +52,6 @@ export default {
             type: Array,
             required: false
         },
-    
         /**
          * activate if a gap between boxes should be used
          */
@@ -70,6 +66,15 @@ 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
          * 
@@ -81,7 +86,7 @@ export default {
             type: String,
             default: "horizontal",
             validator(value) {
-                return value === "horizontal",
+                return value === "horizontal" ||
                 value === "vertical"
             }
         },
@@ -131,7 +136,7 @@ export default {
             default
                 () {
                 return {
-                    iconClass: 'icon-blocks-small',
+                    iconClass: 'icon-columns',
                     tooltip: 'Toggle to row view'
                 }
             }
@@ -165,40 +170,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
@@ -212,11 +186,37 @@ export default {
 <style>
 /* begin cmd-accordions-wrapper ---------------------------------------------------------------------------------------- */
 .cmd-accordions-wrapper {
+    .headline-wrapper {
+        align-items: center;
+
+        .options-wrapper {
+            flex: none;
+
+        }
+    }
+
     .inner-accordions-wrapper {
         .cmd-accordion {
             flex: none;
         }
     }
 }
+</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>
+</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/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