comand-component-library 3.3.81 → 3.3.83

package/src/components/CmdBoxWrapper.vue

@@ -19,7 +19,14 @@
             </div>
         </div>
         <div :class="[useFlexbox ? 'flex-container' : 'grid-container-create-columns', {'row-view': rowView, 'stretch-boxes-vertically': stretchBoxesVertically}]">
-            <slot :collapsingBoxesOpen="collapsingBoxesOpen" :boxToggled="boxToggled" :currentOpenBox="currentOpenBox" :rowView="rowView"></slot>
+            <slot
+                :collapsingBoxesOpen="collapsingBoxesOpen"
+                :boxToggled="boxToggled"
+                :currentOpenBox="currentOpenBox"
+                :rowView="rowView"
+                @toggleCollapse="boxIsToggled"
+            >
+            </slot>
         </div>
     </div>
 </template>
@@ -106,6 +113,13 @@ export default {
             type: [Number, Array],
             default: 4
         },
+        /**
+         * set if more than one collapsible box can be expanded at a time
+         */
+        allowMultipleExpandedBoxes: {
+            type: Boolean,
+            default: true
+        },
         /**
          * define icon for grid-view
          */
@@ -158,12 +172,14 @@ export default {
         boxesPerRowSmall() {
             return this.boxesPerRowResponsive(2, 1)
         }
-    }
-    ,
+    },
     methods: {
+        boxIsToggled(event) {
+          alert(event)
+        },
         boxesPerRowResponsive(index, defaultBoxesPerRow) {
             // show only one box per row in row-view
-            if (this.allowUserToToggleView && this.oneBoxPerRow) {
+            if (this.oneBoxPerRow) {
                 return 1
             }
 

package/src/components/CmdFakeSelect.vue

@@ -183,7 +183,7 @@ export default {
         return {
             showOptions: false,
             validationStatus: "",
-            limitWidthStyle: {},
+            limitWidthStyle: null,
             allOptionsSelected: false
         }
     },
@@ -553,7 +553,7 @@ export default {
                         border-color: var(--primary-color);
 
                         span, [class*="icon"] {
-                            color: var(--color-scheme-text-color-inverted);
+                            color: var(--hyperlink-color);
                         }
                     }
                 }

package/src/components/CmdFormElement.vue

@@ -184,7 +184,10 @@
                   @focus="tooltip = true"
                   @blur="onBlur">
         </textarea>
-        <span v-if="element === 'textarea' && showCharactersTextarea">{{ charactersTextarea }}</span>
+        <span v-if="element === 'textarea' && showCharactersTextarea" class="characters-left-wrapper">
+            <span v-if="textCharactersLeft">{{ textCharactersLeft }}</span>
+            <span :class="['characters-left', {error: charactersLeft === 0}]">{{ charactersLeft }}</span>
+        </span>
         <!-- end textarea -->
 
         <!-- begin searchfield -->
@@ -457,9 +460,9 @@ export default {
          * type-property must be set to textarea
          * showCharactersTextarea-property must be activated
          */
-        textCharacters: {
+        textCharactersLeft: {
             type: String,
-            default: "Characters"
+            default: "Characters left:"
         },
         /**
          * toggle visibility of search-button (next to search-field)
@@ -471,7 +474,7 @@ export default {
         /**
          * icon to delete search term
          *
-         * element-property must me set to 'input'
+         * element-property must be set to 'input'
          * type-property must be set to 'search'
          *
          */
@@ -488,7 +491,7 @@ export default {
         /**
          * icon to search term
          *
-         * element-property must me set to 'input'
+         * element-property must be set to 'input'
          * type-property must be set to 'search'
          *
          */
@@ -505,7 +508,7 @@ export default {
         /**
          * icon for error-validated items in list-of-requirements
          *
-         * element-property must me set to 'input'
+         * element-property must be set to 'input'
          * showRequirements-subproperty (of CmdListOfRequirements)  must be set to 'true'
          *
          */
@@ -522,7 +525,7 @@ export default {
         /**
          * icon for warning-validated items in list-of-requirements
          *
-         * element-property must me set to 'input'
+         * element-property must be set to 'input'
          * showRequirements-subproperty (of CmdListOfRequirements)  must be set to 'true'
          *
          */
@@ -539,7 +542,7 @@ export default {
         /**
          * icon for success-validated items in list-of-requirements
          *
-         * element-property must me set to 'input'
+         * element-property must be set to 'input'
          * showRequirements-subproperty (of CmdListOfRequirements)  must be set to 'true'
          *
          */
@@ -556,8 +559,8 @@ export default {
         /**
          * icon for info-validated items in list-of-requirements
          *
-         * element-property must me set to 'input'
-         * showRequirements-subproperty (of CmdListOfRequirements) must be set to 'true'
+         * element-property must be set to 'input'
+         * showRequirements-sub-property (of CmdListOfRequirements) must be set to 'true'
          *
          */
         iconHasStateInfo: {
@@ -600,7 +603,7 @@ export default {
         /**
          * icon to toggle password-visibility
          *
-         * element-property must me set to 'input'
+         * element-property must be set to 'input'
          * type-property must be set to 'password'
          *
          */
@@ -617,7 +620,7 @@ export default {
         /**
          * icon to toggle password-visibility
          *
-         * element-property must me set to 'input'
+         * element-property must be set to 'input'
          * type-property must be set to 'password'
          *
          */
@@ -626,7 +629,7 @@ export default {
             default() {
                 return {
                     show: true,
-                    iconClass: "icon-not-visible",
+                    iconClass: "icon-not-visible"
                 }
             }
         }
@@ -677,8 +680,8 @@ export default {
             }
             return false
         },
-        charactersTextarea() {
-            return this.textCharacters + " " + this.modelValue.length + "/" + this.getMaxLength()
+        charactersLeft() {
+            return this.getMaxLength() - this.modelValue.length
         },
         validationTooltip() {
             if (!this.useCustomTooltip) {
@@ -932,6 +935,24 @@ export default {
         }
     }
 
+    .characters-left-wrapper {
+        margin-top: calc(var(--default-margin) / 2);
+        display: block;
+
+        span:not(:only-child):first-child {
+            margin-right: calc(var(--default-margin) / 2);
+            color: var(--text-color);
+        }
+
+        .characters-left {
+            color: var(--text-color);
+
+            &.error {
+                color: var(--error-color);
+            }
+        }
+    }
+
     /* begin toggle-switch */
     /* no cmd-prefix-styling (class based on frontend-framework) */
     &.toggle-switch {

package/src/components/CmdSidebar.vue

@@ -0,0 +1,167 @@
+<template>
+    <aside :class="['cmd-sidebar', wrapperClass, {'box': styledAsBox, 'collapse-to-right': !collapseToLeft}]">
+        <!-- begin inner-sidebar-wrapper -->
+        <div class="inner-sidebar-wrapper">
+            <!-- begin CmdHeadline -->
+            <CmdHeadline
+                v-if="cmdHeadline?.headlineText && open"
+                :headlineText="cmdHeadline.headlineText"
+                :headlineLevel="cmdHeadline.headlineLevel || 3"
+                :textAlign="cmdHeadline.textAlign"
+                class="sidebar-main-headline"
+            />
+            <!-- end CmdHeadline -->
+
+            <!-- begin slot-content for open sidebar -->
+            <div v-if="open" class="open-slot-wrapper">
+                <slot name="open" :openBoxStatus="open"></slot>
+            </div>
+            <!-- end slot-content for open sidebar -->
+
+            <!-- begin slot-content for closed sidebar -->
+            <div v-else class="closed-slot-wrapper">
+                <slot name="closed" :openBoxStatus="open"></slot>
+            </div>
+            <!-- end slot-content for closed sidebar -->
+        </div>
+        <!-- end inner-sidebar-wrapper -->
+
+        <!-- begin column to toggle sidebar open-closed-status -->
+        <a v-if="collapsible"
+           href="#"
+           :title="open ? 'Collapse sidebar' : 'Expand sidebar'"
+           @click.prevent="toggleSidebar">
+            <span :class="iconClassOpenCollapse"></span>
+        </a>
+        <!-- end column to toggle sidebar open-closed-status -->
+    </aside>
+</template>
+
+<script>
+export default {
+    name: "CmdSidebar",
+    data() {
+        return {
+            open: true
+        }
+    },
+    props: {
+        /**
+         * set if sidebar should be collapsible by the user
+         */
+        collapsible: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * set open/closed status from outside or as default
+         */
+        openSidebar: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * set if the sidebar should be styled as box (border, background, no padding in this case)
+         */
+        styledAsBox: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * set if the sidebar should collapse to the left (otherwise it will collapse to the right)
+         *
+         * collapsible-property must be set to true
+         */
+        collapseToLeft: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * properties for CmdHeadline-component
+         */
+        cmdHeadline: {
+            type: Object,
+            required: false
+        }
+    },
+    computed: {
+        wrapperClass() {
+            if (this.open) {
+                return 'open'
+            }
+            return 'closed'
+        },
+        iconClassOpenCollapse() {
+            if (this.collapseToLeft) {
+                if (this.open) {
+                    return "icon-single-arrow-left"
+                }
+                return "icon-single-arrow-right"
+            } else {
+                if (this.open) {
+                    return "icon-single-arrow-right"
+                }
+                return "icon-single-arrow-left"
+            }
+        }
+    },
+    methods: {
+        toggleSidebar() {
+            this.open = !this.open
+            this.$emit("toggleSidebar", this.open)
+        }
+    },
+    watch: {
+        openSidebar: {
+            handler() {
+                this.open = this.openSidebar
+            },
+            immediate: true
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.cmd-sidebar {
+    display: flex;
+    height: 100%;
+
+    &.box {
+        padding: 0;
+    }
+
+    .inner-sidebar-wrapper {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        .cmd-headline.sidebar-main-headline {
+            padding: var(--default-padding);
+            margin: 0;
+        }
+    }
+
+    .open-slot-wrapper {
+        flex: 1;
+    }
+
+    & > a {
+        display: flex;
+        flex: none;
+        text-decoration: none;
+        padding: calc(var(--default-padding) / 2);
+        align-items: center;
+        border-left: var(--default-border);
+    }
+
+    &.collapse-to-right {
+        flex-direction: row-reverse;
+
+        > a {
+            border-left: 0;
+            border-right: var(--default-border);
+        }
+    }
+}
+</style>

package/src/components/CmdTable.vue

@@ -1,12 +1,13 @@
 <template>
-    <div :class="['cmd-table-wrapper', {'collapsed': !showTableData, 'full-width': fullWidth, 'has-caption': hasCaption}]">
+    <div
+        :class="['cmd-table-wrapper', {'collapsed': !showTableData, 'full-width': fullWidth, 'has-caption': hasCaption}]">
         <div v-if="collapsible || userCanToggleWidth" class="button-wrapper">
             <a v-if="userCanToggleWidth" class="button"
                href="#" @click.prevent="fullWidth = !fullWidth"
                :title="iconToggleWidth.tooltip"
             >
                 <!-- begin CmdIcon -->
-                <CmdIcon :iconClass="iconToggleWidth.iconClass" :type="iconToggleWidth.iconType" />
+                <CmdIcon :iconClass="iconToggleWidth.iconClass" :type="iconToggleWidth.iconType"/>
                 <!-- end CmdIcon -->
             </a>
             <a v-if="collapsible" class="button"
@@ -14,12 +15,22 @@
                :title="showTableData ? iconCollapse.tooltip : iconExpand.tooltip"
             >
                 <!-- begin CmdIcon -->
-                <CmdIcon :iconClass="showTableData ? iconCollapse.iconClass : iconExpand.iconClass" :type="showTableData ? iconCollapse.iconType : iconExpand.iconType" />
+                <CmdIcon :iconClass="showTableData ? iconCollapse.iconClass : iconExpand.iconClass"
+                         :type="showTableData ? iconCollapse.iconType : iconExpand.iconType"/>
                 <!-- end CmdIcon -->
             </a>
         </div>
         <div class="inner-wrapper">
-            <table :class="{'full-width': fullWidth}">
+            <!-- begin CmdSlideButton -->
+            <CmdSlideButton
+                v-if="showSlideButtons"
+                @click.prevent="scrollLeft"
+                slideButtonType="prev"
+            />
+            <!-- end CmdSlideButton -->
+
+            <!-- begin table -->
+            <table ref="table" :class="{'full-width': fullWidth, 'has-overflow': hasOverflow}">
                 <caption v-if="tableData.caption?.text || caption?.text" :class="{ hidden: hideCaption }">
                     {{ caption?.text || tableData.caption?.text }}
                 </caption>
@@ -32,8 +43,10 @@
                 </thead>
                 <transition name="fade">
                     <tbody v-show="showTableData" aria-expanded="true">
-                    <tr :class="{'active' : tableData.rowIndexHighlighted === indexRows}" v-for="(tablerows, indexRows) in tableData.tbody" :key="indexRows">
-                        <td :class="{'active' : tableData.columnIndexHighlighted === indexData}" v-for="(tabledata, indexData) in tablerows" :key="indexData">
+                    <tr :class="{'active' : tableData.rowIndexHighlighted === indexRows}"
+                        v-for="(tablerows, indexRows) in tableData.tbody" :key="indexRows">
+                        <td :class="{'active' : tableData.columnIndexHighlighted === indexData}"
+                            v-for="(tabledata, indexData) in tablerows" :key="indexData">
                             {{ tabledata }}
                         </td>
                     </tr>
@@ -42,18 +55,28 @@
                 <transition name="fade">
                     <tfoot v-if="tableData.tfoot && tableData.tfoot.length && showTableData" aria-expanded="true">
                     <tr>
-                        <td :class="{'active' : tableData.columnIndexHighlighted === indexFoot}" v-for="(tablefoot, indexFoot) in tableData.tfoot" :key="indexFoot">
+                        <td :class="{'active' : tableData.columnIndexHighlighted === indexFoot}"
+                            v-for="(tablefoot, indexFoot) in tableData.tfoot" :key="indexFoot">
                             {{ tablefoot }}
                         </td>
                     </tr>
                     </tfoot>
                 </transition>
             </table>
+            <!-- end table -->
+
+            <!-- begin CmdSlideButton -->
+            <CmdSlideButton
+                v-if="showSlideButtons"
+                @click.prevent="scrollRight"
+            />
+            <!-- end CmdSlideButton -->
         </div>
     </div>
 </template>
 
 <script>
+import { ref } from 'vue'
 export default {
     name: "CmdTable",
     data() {
@@ -100,6 +123,13 @@ export default {
             type: Boolean,
             default: true
         },
+        /**
+         * user can toggle width (full-width (=100% of parent container or as wide as table content) with button above table)
+         */
+        showSlideButtons: {
+            type: Boolean,
+            default: true
+        },
         /**
          * icon to expand table (vertically)
          *
@@ -168,6 +198,18 @@ export default {
         },
         hideCaption() {
             return this.caption?.show === false || (this.caption?.show !== true && !this.tableData.caption?.show)
+        },
+        hasOverflow() {
+            console.log("this.$refs.table", this.$refs.table)
+            // return this.$refs.table.scrollWidth > this.$refs.table.clientWidth
+        }
+    },
+    methods: {
+        scrollLeft() {
+            this.$refs.table.scrollLeft = 0
+        },
+        scrollRight() {
+            this.$refs.table.scrollRight = 0
         }
     }
 }
@@ -209,8 +251,20 @@ export default {
     }
 
     .inner-wrapper {
+        display: flex;
         overflow-x: auto;
         width: 100%;
+        padding: 0 4rem;
+        border: 1px solid red;
+
+        .cmd-slide-button {
+            left: 0;
+        }
+
+        .cmd-slide-button:last-child {
+            right: 0;
+            left: auto;
+        }
 
         table {
             table-layout: fixed;

package/src/components/CmdTabs.vue

@@ -108,7 +108,6 @@ export default {
 .cmd-tabs {
     > ul {
         margin-bottom: 0;
-        display: -webkit-flex; /* Safari 6-8 */
         display: flex;
 
         > li {
@@ -142,6 +141,10 @@ export default {
             }
 
             &.active {
+                span, [class*="icon-"] {
+                    color: var(--pure-white);
+                }
+
                 &:hover, &:active {
                     a, a:focus {
                         color: var(--hyperlink-color);
@@ -151,7 +154,6 @@ export default {
                             color: var(--hyperlink-color-highlighted);
                         }
                     }
-
                 }
                 
                 a:focus {
@@ -161,7 +163,6 @@ export default {
                         color: inherit !important;
                     }
                 }
-
             }
         }
 

package/src/index.js

@@ -27,12 +27,13 @@ export { default as CmdMultistepFormProgressBar } from '@/components/CmdMultiste
 export { default as CmdOpeningHours } from '@/components/CmdOpeningHours.vue'
 export { default as CmdPager } from '@/components/CmdPager.vue'
 export { default as CmdProgressBar } from '@/components/CmdProgressBar.vue'
-export { default as CmdSocialNetworks } from '@/components/CmdSocialNetworks.vue'
+export { default as CmdSidebar } from '@/components/CmdSidebar.vue'
 export { default as CmdSiteFooter } from '@/components/CmdSiteFooter.vue'
 export { default as CmdSiteHeader } from '@/components/CmdSiteHeader.vue'
 export { default as CmdSiteSearch } from '@/components/CmdSiteSearch.vue'
 export { default as CmdSlideButton } from '@/components/CmdSlideButton.vue'
 export { default as CmdSlideshow } from '@/components/CmdSlideshow.vue'
+export { default as CmdSocialNetworks } from '@/components/CmdSocialNetworks.vue'
 export { default as CmdSwitchLanguage } from '@/components/CmdSwitchLanguage.vue'
 export { default as CmdSystemMessage } from '@/components/CmdSystemMessage.vue'
 export { default as CmdTable } from '@/components/CmdTable.vue'

package/src/main.js

@@ -1,4 +1,4 @@
-/* import generated css from components */
+/* begin imports css from comand-frontend-framework ---------------------------------------------------------------------------------------- */
 import "comand-frontend-framework/styles"
 /* end imports css from comand-frontend-framework ---------------------------------------------------------------------------------------- */
 
@@ -20,6 +20,9 @@ import directiveFocus from "./directives/focus"
 /* import additional iconfont containing company-logos */
 import '@/assets/styles/logos-iconfont.css'
 
+/* import additional iconfont containing editmode-iconfont-icons */
+import '@/assets/styles/editmode-iconfont.css'
+
 /* import css for global-styles */
 import '@/assets/styles/global-styles.scss'