comand-component-library 3.3.11 → 3.3.12

package/src/components/CmdBox.vue

@@ -3,9 +3,13 @@
     <div v-if="boxType === 'content'"
          :class="[
              'cmd-box box content',
-             {open : open, collapsible: collapsible,
-             'stretch-vertically': stretchVertically && !collapsible,
-             'stretch-horizontally': stretchHorizontally}]"
+             {
+                open : open, collapsible: collapsible,
+                'stretch-vertically': stretchVertically && !collapsible,
+                'stretch-horizontally': stretchHorizontally,
+                'row-view': isRowView
+             }
+             ]"
     >
         <!-- begin collapsible header with slot -->
         <a v-if="collapsible"
@@ -139,10 +143,11 @@
             </figure>
             <div v-else>
                 <span :class="defaultProfileIconClass" :title="user.name"></span>
-                <p>{{ user.name }}</p>
+                <p v-if="!rowView">{{ user.name }}</p>
             </div>
         </div>
         <div class="box-body">
+            <p v-if="rowView">{{ user.name }}</p>
             <p v-if="user.profession">{{ user.profession }}</p>
             <p v-if="user.position">{{ user.position }}</p>
             <p v-if="user.description" class="description">{{ user.description }}</p>
@@ -165,36 +170,36 @@ import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdBox/DefaultMessageProperties"
 import GlobalCurrency from "../mixins/GlobalCurrency"
 
-// import components
-import CmdHeadline from "./CmdHeadline"
-import CmdIcon from "./CmdIcon"
-import CmdListOfLinks from "./CmdListOfLinks"
-
 export default {
     name: "CmdBox",
-    components: {
-        CmdHeadline,
-        CmdIcon,
-        CmdListOfLinks,
-    },
     mixins: [
         I18n,
         DefaultMessageProperties,
         GlobalCurrency
     ],
+    emits: ["click", "toggle-collapse"],
     data() {
         return {
             open: this.collapsible ? this.collapsingBoxesOpen : true,
             active: true,
-            showCutOffText: false
+            showCutOffText: false,
+            isRowView: false
         }
     },
-    emits: ["click", "toggle-collapse"],
     props: {
         collapsingBoxesOpen: {
             type: Boolean,
             required: false
         },
+        /**
+         * arranges box-content in a row
+         *
+         * @affectsStyling: true
+         */
+        rowView: {
+            type: Boolean,
+            default: false
+        },
         /**
          * set boyType to show different types of boxes/contents
          *
@@ -384,6 +389,9 @@ export default {
             if (this.collapsible) {
                 this.open = this.collapsingBoxesOpen
             }
+        },
+        isRowView() {
+            this.isRowView = this.rowView
         }
     }
 }
@@ -729,6 +737,33 @@ export default {
                 }
             }
         }
+
+        &.row-view {
+            [class*="icon"] {
+                --icon-size: 3rem;
+            }
+
+            .box-header > div:first-child > [class*="icon-"] {
+                padding: calc(var(--default-padding) * 1.5);
+            }
+
+            .box-body p {
+                text-align: left;
+            }
+
+            .box-footer {
+                border: 0;
+
+                .cmd-list-of-links {
+                    background: none;
+
+                    ul, ul * {
+                        border: 0;
+                        background: inherit;
+                    }
+                }
+            }
+        }
     }
 }
 

package/src/components/CmdBoxWrapper.vue

@@ -18,26 +18,18 @@
                 </a>
             </div>
         </div>
-        <div :class="[useFlexbox ? 'flex-container' : 'grid-container-create-columns', {'one-box-per-row': oneBoxPerRow, 'stretch-boxes-vertically': stretchBoxesVertically}]">
-            <slot :collapsingBoxesOpen="collapsingBoxesOpen" :boxToggled="boxToggled" :currentOpenBox="currentOpenBox"></slot>
+        <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>
         </div>
     </div>
 </template>
 
 <script>
-// import components
-import CmdHeadline from "./CmdHeadline"
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: "CmdBoxWrapper",
-    components: {
-        CmdHeadline,
-        CmdIcon
-    },
     data() {
         return {
-            oneBoxPerRow: this.useRowViewAsDefault,
+            rowView: this.useRowViewAsDefault,
             collapsingBoxesOpen: true,
             currentOpenBox: 0
         }
@@ -227,28 +219,42 @@ export default {
                 margin: 0;
         }
 
-        &.one-box-per-row {
-            flex-direction: column;
+        &.stretch-boxes-vertically {
+            .stretch-vertically {
+                align-self: stretch;
+                height: auto; /* must be set to auto if inner boxes have als stretchVertically-property activated */
+            }
+        }
+    }
+
+    .row-view {
+        flex-direction: column;
 
-            p.cutoff-text {
-                height: auto;
+        p.cutoff-text {
+            height: auto;
 
-                &.fade-last-line::after {
-                    background: none;
-                }
+            &.fade-last-line::after {
+                background: none;
             }
         }
 
-        &.stretch-boxes-vertically {
-            .stretch-vertically {
-                align-self: stretch;
-                height: auto; /* must be set to auto if inner boxes have als stretchVertically-property activated */
+        .cmd-box.user {
+            flex-direction: row;
+            padding: var(--default-padding);
+            align-items: center;
+
+            .box-footer {
+                margin-top: 0;
             }
         }
     }
 
     > .grid-container-create-columns {
         grid-template-columns: repeat(v-bind(boxesPerRowLarge), minmax(0, 1fr));
+
+        &.row-view {
+            grid-template-columns: repeat(1, minmax(0, 1fr));
+        }
     }
 
     @media only screen and (max-width: $medium-max-width) {

package/src/components/CmdBreadcrumbs.vue

@@ -35,14 +35,8 @@
 // import functions
 import {getRoute} from "../utilities.js"
 
-// import components
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: "CmdBreadcrumbs",
-    components: {
-        CmdIcon
-    },
     props: {
         /**
          * label in front/left of breadcrumbs

package/src/components/CmdCompanyLogo.vue

@@ -17,14 +17,8 @@
 // import functions
 import {getRoute} from "../utilities.js"
 
-// import components
-import CmdImage from "./CmdImage"
-
 export default {
     name: "CmdCompanyLogo",
-    components: {
-      CmdImage
-    },
     data() {
         return {
             prefersColorScheme: ""

package/src/components/CmdCookieDisclaimer.vue

@@ -134,19 +134,9 @@
 import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdCookieDisclaimer/DefaultMessageProperties"
 
-// import components
-import CmdBox from "./CmdBox"
-import CmdHeadline from "./CmdHeadline"
-import CmdFormElement from "./CmdFormElement"
-
 export default {
     name: "CmdCookieDisclaimer",
     mixins: [I18n, DefaultMessageProperties],
-    components: {
-        CmdBox,
-        CmdHeadline,
-        CmdFormElement
-    },
     data() {
         return {
             showCookieDisclaimer: true,

package/src/components/CmdFakeSelect.vue

@@ -168,10 +168,6 @@ import FieldValidation from "../mixins/FieldValidation"
 import Identifier from "../mixins/Identifier"
 import Tooltip from "../mixins/Tooltip"
 
-// import components
-import CmdIcon from "./CmdIcon"
-import CmdTooltipForInputElements from "./CmdTooltipForInputElements"
-
 export default {
     name: 'CmdFakeSelect',
     inheritAttrs: false,
@@ -182,10 +178,6 @@ export default {
         Identifier,
         Tooltip
     ],
-    components: {
-        CmdIcon,
-        CmdTooltipForInputElements
-    },
     data() {
         return {
             showOptions: false,

package/src/components/CmdFancyBox.vue

@@ -145,13 +145,6 @@ import {defineComponent, createApp} from "vue"
 // import mixins
 import Identifier from "../mixins/Identifier"
 
-// import components
-import CmdHeadline from "./CmdHeadline"
-import CmdIcon from "./CmdIcon"
-import CmdImage from "./CmdImage"
-import CmdSlideButton from "./CmdSlideButton.vue"
-import CmdThumbnailScroller from './CmdThumbnailScroller.vue'
-
 const openFancyBox = (config) => {
     const node = document.createElement("div");
     document.querySelector("body").appendChild(node);
@@ -164,13 +157,6 @@ const openFancyBox = (config) => {
 
 const FancyBox = defineComponent({
     name: "CmdFancyBox",
-    components: {
-        CmdHeadline,
-        CmdIcon,
-        CmdImage,
-        CmdSlideButton,
-        CmdThumbnailScroller
-    },
     mixins: [
         Identifier
     ],

package/src/components/CmdFormElement.vue

@@ -245,19 +245,11 @@ import FieldValidation from "../mixins/FieldValidation.js"
 import Identifier from "../mixins/Identifier.js"
 import Tooltip from "../mixins/Tooltip.js"
 
-// import components
-import CmdIcon from "./CmdIcon"
-import CmdTooltipForInputElements from "./CmdTooltipForInputElements"
-
 const TYPES_WITHOUT_MAXLENGTH = ["color", "date", "datetime-local", "file", "number", "range"]
 
 export default {
     inheritAttrs: false,
     name: "CmdFormElement",
-    components: {
-        CmdIcon,
-        CmdTooltipForInputElements
-    },
     mixins: [
         I18n,
         DefaultMessageProperties,

package/src/components/CmdFormFilters.vue

@@ -20,9 +20,6 @@
 </template>
 
 <script>
-// import components
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: "CmdFormFilters",
     data() {
@@ -30,9 +27,6 @@ export default {
             options: []
         }
     },
-    components: {
-        CmdIcon
-    },
     props: {
         /**
          * model-value to support v-model

package/src/components/CmdHeadline.vue

@@ -21,14 +21,8 @@
 </template>
 
 <script>
-// import components
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: "CmdHeadline",
-    components: {
-        CmdIcon
-    },
     props: {
         /**
          * text for headline

package/src/components/CmdImageGallery.vue

@@ -11,11 +11,8 @@
 </template>
 
 <script>
-// import components
-import CmdImage from "./CmdImage.vue"
-
 // import functions
-import {openFancyBox} from "./CmdFancyBox"
+import {openFancyBox} from "./CmdFancyBox.vue"
 
 // import mixins
 import I18n from "../mixins/I18n"
@@ -23,9 +20,6 @@ import DefaultMessageProperties from "../mixins/CmdImageGallery/DefaultMessagePr
 
 export default {
     name: "CmdImageGallery",
-    components: {
-        CmdImage
-    },
     mixins: [I18n, DefaultMessageProperties],
     props: {
         /**

package/src/components/CmdImageZoom.vue

@@ -34,14 +34,8 @@
 </template>
 
 <script>
-// import components
-import CmdImage from "./CmdImage"
-
 export default {
     name: "CmdImageZoom",
-    components: {
-        CmdImage
-    },
     props: {
         /**
          * object for small image

package/src/components/CmdInputGroup.vue

@@ -75,15 +75,7 @@ import FieldValidation from "../mixins/FieldValidation.js"
 import Identifier from "../mixins/Identifier"
 import Tooltip from "../mixins/Tooltip.js"
 
-// import components
-import CmdIcon from "./CmdIcon"
-import CmdTooltipForInputElements from "./CmdTooltipForInputElements"
-
 export default {
-    components: {
-        CmdIcon,
-        CmdTooltipForInputElements
-    },
     mixins: [
         FieldValidation,
         Identifier,

package/src/components/CmdListOfLinks.vue

@@ -44,16 +44,8 @@
 import {getRoute} from "../utilities.js"
 import {openFancyBox} from "./CmdFancyBox.vue"
 
-// import components
-import CmdHeadline from "./CmdHeadline"
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: "CmdListOfLinks",
-    components: {
-        CmdHeadline,
-        CmdIcon
-    },
     props: {
         /**
          * activate if component should contain a list of anchors for the section within th page

package/src/components/CmdListOfRequirements.vue

@@ -50,20 +50,12 @@
 </template>
 
 <script>
-// import components
-import CmdHeadline from "./CmdHeadline"
-import CmdIcon from "./CmdIcon"
-
 // import mixins
 import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdListOfRequirements/DefaultMessageProperties"
 
 export default {
     name: "CmdListOfRequirements",
-    components: {
-        CmdHeadline,
-        CmdIcon
-    },
     mixins: [
         I18n,
         DefaultMessageProperties

package/src/components/CmdLoginForm.vue

@@ -173,11 +173,6 @@
 // import utilities
 import {getRoute} from "../utilities.js"
 
-// import components
-import CmdFormElement from "./CmdFormElement"
-import CmdHeadline from "./CmdHeadline"
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: "CmdLoginForm",
     data() {
@@ -189,11 +184,6 @@ export default {
             sendLogin: false
         }
     },
-    components: {
-        CmdFormElement,
-        CmdHeadline,
-        CmdIcon
-    },
     props: {
         /**
          * value for v-model (modelValue is default name in vue 3)

package/src/components/CmdMainNavigation.vue

@@ -153,14 +153,8 @@
 // import functions
 import {getRoute} from "../utilities.js"
 
-// import components
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: "CmdMainNavigation",
-    components: {
-        CmdIcon
-    },
     data() {
         return {
             showOffcanvas: false,

package/src/components/CmdMultistepFormProgressBar.vue

@@ -56,14 +56,8 @@
 // import functions
 import {getRoute} from "../utilities.js"
 
-// import components
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: 'CmdMultistepFormProgressBar',
-    components: {
-        CmdIcon
-    },
     data() {
         return {
             activeLink: 0

package/src/components/CmdNewsletterSubscription.vue

@@ -43,17 +43,9 @@
 </template>
 
 <script>
-// import components
-import CmdFormElement from "./CmdFormElement"
-import CmdInputGroup from "./CmdInputGroup"
-
 export default {
     name: "CmdNewsletterSubscription",
     emits: ["button-click"],
-    components: {
-        CmdFormElement,
-        CmdInputGroup
-    },
     data() {
         return {
             buttonDisabled: true

package/src/components/CmdOpeningHours.vue

@@ -37,9 +37,6 @@
 </template>
 
 <script>
-// import components
-import CmdHeadline from "./CmdHeadline"
-
 export function localizedTime(language) {
     return (hour, minute) => {
         const now = new Date()
@@ -72,9 +69,6 @@ export function timeFormatting(separator, suffix1, suffix2, hoursLeadingZero = t
 
 export default {
     name: "CmdOpeningHours",
-    components: {
-        CmdHeadline
-    },
     props: {
         /**
          * set a link to a detail page

package/src/components/CmdPager.vue

@@ -48,15 +48,8 @@
 // import mixins
 import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdPager/DefaultMessageProperties"
-
-// import components
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: "CmdPager",
-    components: {
-        CmdIcon
-    },
     mixins: [
       I18n,
       DefaultMessageProperties

package/src/components/CmdShareButtons.vue

@@ -30,16 +30,8 @@
 </template>
 
 <script>
-// import components
-import CmdFormElement from "./CmdFormElement"
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: "CmdShareButtons",
-    components: {
-        CmdFormElement,
-        CmdIcon
-    },
     data() {
         return {
             dataPrivacyAccepted: false

package/src/components/CmdSiteHeader.vue

@@ -50,16 +50,8 @@
 </template>
 
 <script>
-// import components
-import CmdCompanyLogo from "./CmdCompanyLogo"
-import CmdMainNavigation from "./CmdMainNavigation"
-
 export default {
     name: "CmdSiteHeader",
-    components: {
-        CmdCompanyLogo,
-        CmdMainNavigation
-    },
     props: {
         /**
          * use only if default-button of inner navigation-component should not be used

package/src/components/CmdSiteSearch.vue

@@ -106,13 +106,6 @@
 import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdSiteSearch/DefaultMessageProperties"
 
-// import files for components
-import CmdFakeSelect from "./CmdFakeSelect"
-import CmdFormElement from "./CmdFormElement"
-import CmdFormFilters from "./CmdFormFilters"
-import CmdHeadline from "./CmdHeadline"
-import CmdIcon from "./CmdIcon"
-
 export default {
     emits: [
         "search",
@@ -123,13 +116,6 @@ export default {
     ],
     name: "CmdBoxSiteSearch",
     mixins: [I18n, DefaultMessageProperties],
-    components: {
-        CmdFakeSelect,
-        CmdFormElement,
-        CmdFormFilters,
-        CmdHeadline,
-        CmdIcon
-    },
     data() {
         return {
             showFilters: false

package/src/components/CmdSlideButton.vue

@@ -10,14 +10,8 @@
 </template>
 
 <script>
-// import components
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: "CmdSlideButton",
-    components: {
-        CmdIcon
-    },
     props: {
         /**
          * set slide-button-type
@@ -76,10 +70,8 @@ export default {
     &.button {
         font-size: 2rem;
         z-index: 10;
-        width: 5rem;
         height: 100%;
         position: absolute;
-        display: -webkit-flex; /* Safari 6-8 */
         display: flex;
         justify-content: center;
         text-decoration: none;