comand-component-library 4.3.16 → 4.3.19

package/src/assets/data/footnote.json

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

package/src/assets/data/listOfComponents.json

@@ -10,9 +10,10 @@
   "CompanyLogo",
   "Container",
   "CookieDisclaimer",
-  "Forms",
   "Fancybox",
   "FlexibleScrollContainer",
+  "Footnote",
+  "Forms",
   "GoogleMaps",
   "Headlines",
   "Icons",

package/src/componentSettingsDataAndControls.vue

@@ -350,6 +350,24 @@ export default {
                     }
                 ]
             },
+            cmdFootnoteSettingsData: {
+                cmdHeadline: {
+                    headlineText: "Headline text",
+                    headlineLevel: 3
+                }
+            },
+            cmdFootnoteSettingsControls: {
+                descriptionTermType: [
+                    {
+                        text: "Asterisk (default)",
+                        value: "asterisk"
+                    },
+                    {
+                        text: "Number",
+                        value: "number"
+                    }
+                ]
+            },
             cmdHeadlineSettingsData: {
                 preHeadlineText: "Pre-headline text",
                 headlineText: "Headline text",

package/src/components/CmdAccordion.vue

@@ -1,16 +1,23 @@
 <template>
     <!-- begin CmdAccordion ---------------------------------------------------------------------------------------- -->
-    <details :class="['cmd-accordion', highlightLevel]" :name="accordionName">
+    <details ref="cmdAccordion" :class="['cmd-accordion', highlightLevel, { 'flex-container no-gap' : rowView }]" :name="accordionName">
         <summary>
+            <!--
             <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" />
             <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 -->
             <slot>
-                <p v-html="textAccordionBody">
-                </p>
+                <CmdParagraph :content="textAccordionBody" />
             </slot>
             <!-- end slot-content -->
         </div>
@@ -21,17 +28,29 @@
 <script>
 export default {
     name: "CmdAccordion",
+    mounted() {
+  console.log("this.$refs.cmdAccordion.open:", this.$refs.cmdAccordion?.open)
+},
     props: {
+        /**
+         * arranges box-content in a row
+         *
+         * @affectsStyling: true
+         */
+         rowView: {
+            type: Boolean,
+            default: false
+        },
         /**
          * set highlight-level for headline
          * 
-         * @allowedValues: "none", "primary", "secondary", "tertiary"
+         * @allowedValues: "", "primary", "secondary", "tertiary"
          */
         highlightLevel: {
             type: String,
-            default: "none",
+            default: null,
             validator(value) {
-                return value === "none" ||
+                return value === null ||
                     value === "primary" ||
                     value === "secondary" ||
                     value === "tertiary"
@@ -47,7 +66,31 @@ export default {
         /**
          * properties for CmdIcon-component if accordion is collapsed/closed
          */
-        cmdIconClosed: {
+        cmdIconClosedRowView: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-chevron-one-stripe-down",
+                    tooltip: "Expand accordion"
+                }
+            }
+        },
+        /**
+        * properties for CmdIcon-component if accordion is expanded/open
+        */
+        cmdIconOpenRowView: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-chevron-one-stripe-right",
+                    tooltip: "Collapse accordion"
+                }
+            }
+        },
+        /**
+        * properties for CmdIcon-component if accordion is collapsed/closed
+        */
+         cmdIconClosedColumnView: {
             type: Object,
             default() {
                 return {
@@ -59,7 +102,7 @@ export default {
         /**
         * properties for CmdIcon-component if accordion is expanded/open
         */
-        cmdIconOpen: {
+        cmdIconOpenColumnView: {
             type: Object,
             default() {
                 return {
@@ -89,6 +132,28 @@ export default {
                 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'
+        },
+        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"
         }
     }
 }
@@ -96,6 +161,26 @@ export default {
 
 <style>
 .cmd-accordion {
+    &.flex-container {
+        flex-wrap: nowrap;
+        align-items: center;
+
+        > * {
+            flex: none;
+        }
+
+        &[open] {
+            summary {
+                border: 0;
+            }
+        }
+
+        summary {
+            writing-mode: vertical-rl;
+            transform: rotate(180deg);
+        }
+    }
+
     summary {
         .cmd-headline {
             margin: 0;

package/src/components/CmdAccordionsWrapper.vue

@@ -0,0 +1,209 @@
+<template>
+    <!-- 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 -->
+
+            <div v-if="allowUserToToggleOrientation" class="options-wrapper">
+                <a href="#" @click.prevent="toggleOrientation" :title="rowView ? iconRowView.tooltip : iconColumnView.tooltip">
+                    <!-- begin CmdIcon -->
+                    <CmdIcon :iconClass="rowView ? iconColumnView.iconClass : iconRowView.iconClass" :type="rowView ? iconColumnView.iconType : iconRowView.iconType" />
+                    <!-- end CmdIcon -->
+                </a>
+            </div>
+        </div>
+        <div :class="['inner-accordions-wrapper',
+            {
+                'no-gap': !useGap,
+                'flex-container' : rowView 
+            }
+            ]">
+            <slot
+                :collapsingBoxesOpen="collapsingBoxesOpen"
+                :boxToggled="boxToggled"
+                :boxIsOpen="boxIsOpen"
+                :rowView="rowView"
+                @toggleCollapse="boxIsToggled"
+            >
+            </slot>
+        </div>
+    </div>
+    <!-- end CmdBoxWrapper ---------------------------------------------------------------------------------------- -->
+</template>
+
+<script>
+export default {
+    name: "CmdAccordionsWrapper",
+    data() {
+        return {
+            rowView: this.useRowViewAsDefault,
+            collapsingBoxesOpen: true,
+            currentOpenBox: [],
+            oneBoxPerRow: false
+        }
+    },
+    props: {
+        /**
+         * give list of box-indices that should be open by default
+         *
+         * allowMultipleExpandedBoxes-property must be activated if more than one box should be open by default
+         */
+        openBoxesByDefault: {
+            type: Array,
+            required: false
+        },
+    
+        /**
+         * activate if a gap between boxes should be used
+         */
+        useGap: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * activate if boxes should be arranged vertically (each box is a row) by default
+         */
+        useRowViewAsDefault: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * activate if user can toggle grid- and row-orientation by himself
+         */
+        allowUserToToggleOrientation: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * icon for collapsed box
+         */
+        collapseBoxesIcon: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-chevron-two-stripes-down",
+                    tooltip: "Collapse all boxes"
+                }
+            }
+        },
+        /**
+         * icon for expanded box
+         */
+        expandBoxesIcon: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-chevron-two-stripes-up",
+                    tooltip: "Expand all boxes"
+                }
+            }
+        },
+        /**
+         * set if more than one collapsible box can be expanded at a time
+         */
+        allowMultipleExpandedBoxes: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * define icon for grid-view
+         */
+         iconColumnView: {
+            type: Object,
+            default
+                () {
+                return {
+                    iconClass: 'icon-blocks-small',
+                    tooltip: 'Toggle to row view'
+                }
+            }
+        }
+        ,
+        /**
+         * define icon for row-view
+         */
+        iconRowView: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: 'icon-rows',
+                    tooltip: 'Toggle to column view'
+                }
+            }
+        },
+        /**
+         * properties for CmdHeadline-component
+         */
+        cmdHeadline: {
+            type: Object,
+            default() {
+                return {
+                    headlineText: "",
+                    headlineLevel: 4
+                }
+            }
+        }
+    },
+    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
+            },
+            immediate: true
+        }
+    }
+}
+</script>
+
+<style>
+/* begin cmd-box-wrapper ---------------------------------------------------------------------------------------- */
+.cmd-accordions-wrapper {
+    .inner-accordions-wrapper {
+        .cmd-accordion {
+            flex: none;
+        }
+    }
+}
+</style>
+
+<style>
+/* end cmd-box-wrapper ---------------------------------------------------------------------------------------- */
+</style>

package/src/components/CmdFootnote.vue

@@ -0,0 +1,92 @@
+<template>
+    <div class="cmd-footnote">
+        <CmdHeadline v-if="cmdHeadline?.headlineText" v-bind="cmdHeadlineProperties" />
+        <CmdList listType="description" :items="items" :class="'type-' + descriptionTermType" />
+    </div>
+</template>
+
+<script>
+export default {
+    name: "CmdFootnote",
+    props: {
+        /**
+         * set type of descriptionTerm
+         * 
+         * @allowedValues: "asterisk", "number"
+         */
+        descriptionTermType: {
+            type: String,
+            default: "asterisk",
+            validator(value) {
+                return value === "number" ||
+                    value === "asterisk"
+            }
+        },
+        /**
+         * descriptionData (the footnote-texts)
+         */
+        descriptionData: {
+            type: Array,
+            required: true
+        },
+        /**
+         * properties for CmdHeadline-component
+         */
+        cmdHeadline: {
+            type: Object,
+            required: false
+        },
+    },
+    computed: {
+        cmdHeadlineProperties() {
+            return {
+                headlineLevel: 6,
+                ...this.cmdHeadline
+            }
+        },
+        items() {
+            const items = []
+
+            for (let i = 0; i < this.descriptionData.length; i++) {
+                const getTerm = (index) => {
+                    if (this.descriptionTermType === "number") {
+                        return { text: index + 1 };
+                    } else {
+                        return { text: "*".repeat(index + 1) }
+                    }
+                }
+
+                items.push({
+                    descriptionTerm: getTerm(i),
+                    descriptionData: {
+                        text: this.descriptionData[i]
+                    }
+                })
+            }
+
+            return items
+        }
+    }
+}
+</script>
+
+<style>
+.cmd-footnote {
+    .cmd-list {
+        dl {
+            grid-column-gap: .1rem; /* overwrite settings from frontend-framework */
+
+            dt {
+                vertical-align: super;
+                font-size: 1rem;
+            }
+        }
+
+        &.type-asterisk {
+            dt {
+                text-align: right;
+            }
+        }
+    }
+}
+</style>

package/src/components/CmdHeadline.vue

@@ -152,13 +152,13 @@ export default {
         /**
          * set highlight-level for headline
          * 
-         * @allowedValues: "none", "primary", "secondary", "tertiary"
+         * @allowedValues: "", "primary", "secondary", "tertiary"
          */
          highlightLevel: {
             type: String,
-            default: "none",
+            default: "",
             validator(value) {
-                return value === "none" ||
+                return value === "" ||
                     value === "primary" ||
                     value === "secondary" ||
                     value === "tertiary"

package/src/components/CmdInputGroup.vue

@@ -338,7 +338,7 @@ export default {
             },
             // set/write a value to update v-model for this component
             set(value) {
-                this.$emit('validation-status-change', this.validationStatus)
+                this.$emit("validation-status-change", this.validationStatus)
                 this.$emit("update:modelValue", value)
             }
         }

package/src/components/CmdList.vue

@@ -11,7 +11,7 @@
             'list-content-type-' + listContentType
         ]">
             <!-- begin cmd-headline -->
-            <CmdHeadline v-if="cmdHeadline?.headlineText || editModeContext" v-bind="cmdHeadline" />
+            <CmdHeadline v-if="cmdHeadline?.headlineText || editModeContext" v-bind="cmdHeadlineProperties" />
             <!-- end cmd-headline -->
 
             <!-- begin list of links ordered/unordered -->
@@ -147,13 +147,13 @@ export default {
         /**
          * define the highlight-level
          * 
-         * @allowedValues: "none", "primary", "secondary", "tertiary"
+         * @allowedValues: "", "primary", "secondary", "tertiary"
          */
         highlightLevel: {
             type: String,
-            default: "none",
+            default: null,
             validator(value) {
-                return value === "none" ||
+                return value === null ||
                     value === "primary" ||
                     value === "secondary" ||
                     value === "tertiary"
@@ -176,6 +176,8 @@ export default {
         },
         /**
          * set list-type
+         * 
+         * listType-property must be set to "ordered" or "unordered"
          *
          * @allowedValues: links, images, tags
          */
@@ -231,6 +233,8 @@ export default {
         },
         /**
          * toggle list-style-items visibility
+         * 
+         * listType-property must be set to "ordered" or "unordered"
          *
          * @affectsStyling: true
          */
@@ -284,9 +288,9 @@ export default {
             }
         },
         /**
-         * allow tags to be remove by click 
+         * allow tags to be removed by click 
          * 
-         * (listContentType-property must be set to "tags")
+         * listContentType-property must be set to "tags"
          */
         removeTagByClick: {
             type: Boolean,
@@ -295,7 +299,7 @@ export default {
         /**
          * define remove-icon/link for tags
          * 
-         * (listContentType-property must be set to "tags" and removeTabByClick-property must be set to true)
+         * listContentType-property must be set to "tags" and removeTabByClick-property must be set to true
          */
         iconRemoveTag: {
             type: Object,
@@ -319,6 +323,12 @@ export default {
         this.updateActiveClass()
     },
     computed: {
+        cmdHeadlineProperties() {
+            return {
+                headlineLevel: 3,
+                ...this.cmdHeadline
+            }
+        },
         setStretchClass() {
             if (this.largeIcons && this.orientation === "horizontal") {
                 return "stretch"

package/src/index.js

@@ -1,5 +1,6 @@
 // export components
 export { default as CmdAddressData } from '@/components/CmdAddressData.vue'
+export { default as CmdAccordion } from '@/components/CmdAccordion.vue'
 export { default as CmdBackToTopButton } from '@/components/CmdBackToTopButton.vue'
 export { default as CmdBankAccountData } from '@/components/CmdBankAccountData.vue'
 export { default as CmdBasicForm } from '@/components/CmdBasicForm.vue'
@@ -35,6 +36,7 @@ export { default as CmdOpeningHours } from '@/components/CmdOpeningHours.vue'
 export { default as CmdPagination } from '@/components/CmdPagination.vue'
 export { default as CmdPageFooter } from '@/components/CmdPageFooter.vue'
 export { default as CmdPageHeader } from '@/components/CmdPageHeader.vue'
+export { default as CmdParagraph } from '@/components/CmdParagraph.vue'
 export { default as CmdProgressBar } from '@/components/CmdProgressBar.vue'
 export { default as CmdSection } from '@/components/CmdSection.vue'
 export { default as CmdSidebar } from '@/components/CmdSidebar.vue'