comand-component-library 4.0.7 → 4.0.9

package/src/assets/data/pages/list-of-site-links.json

@@ -0,0 +1,78 @@
+[
+  {
+    "headline": {
+      "headlineLevel": 4,
+      "headlineText": "Segment #1 (vertical list)"
+    },
+    "orientation": "vertical",
+    "links": [
+      {
+        "iconClass": "icon-home",
+        "type": "href",
+        "text": "Link #1",
+        "path": "#"
+      },
+      {
+        "iconClass": "icon-user-profile",
+        "type": "href",
+        "text": "Link #2",
+        "path": "#",
+        "children": [
+          {
+            "iconClass": "icon-link",
+            "type": "href",
+            "text": "Sublink #1",
+            "path": "#"
+          },
+          {
+            "iconClass": "icon-export",
+            "type": "href",
+            "text": "Sublink #2",
+            "path": "#"
+          }
+        ]
+      },
+      {
+        "type": "href",
+        "text": "Link #3",
+        "path": "#"
+      }
+    ]
+  },
+  {
+    "headline": {
+      "headlineLevel": 4,
+      "headlineText": "Segment #2 (horizontal list)"
+    },
+    "orientation": "horizontal",
+    "links": [
+      {
+        "type": "href",
+        "text": "Link #1",
+        "path": "#"
+      },
+      {
+        "type": "href",
+        "text": "Link #2",
+        "path": "#",
+        "children": [
+          {
+            "type": "href",
+            "text": "Sublink #1",
+            "path": "#"
+          },
+          {
+            "type": "href",
+            "text": "Sublink #2",
+            "path": "#"
+          }
+        ]
+      },
+      {
+        "type": "href",
+        "text": "Link #3",
+        "path": "#"
+      }
+    ]
+  }
+]

package/src/assets/data/social-networks-page-by-json.json

@@ -7,9 +7,9 @@
     "linkText": "Share"
   },
   {
-    "id": "social-network-twitter",
+    "id": "social-network-x",
     "path": "https://twitter.com/home?status=http%3A%2F%2Fdevelopment.comand-cms.com%2Fmodule%2Fteam.html",
-    "tooltip": "Share this page on twitter",
+    "tooltip": "Share this page on X",
     "iconClass": "icon-twitter",
     "linkText": "Share"
   },

package/src/assets/styles/component-library-global-styles.scss

@@ -39,7 +39,7 @@
 @import 'variables'; /* scss-variables (only used for media-query-breakpoints) */
 /* ---------------------------------------------- END IMPORTS -------------------------------------------------- */
 
-// assign scss-variables for breakpoints (from variables.scss) to css-variables, to get access to their value in JavaScript by getComputedStyle(document.documentElement).getPropertyValue
+/* assign scss-variables for breakpoints (from variables.scss) to css-variables, to get access to their value in JavaScript by getComputedStyle(document.documentElement).getPropertyValue */
 html {
     --medium-max-width: #{$medium-max-width};
     --small-max-width: #{$small-max-width};
@@ -250,6 +250,18 @@ body.avoid-scrolling {
 
         &.success {
             --status-color: var(--success-color);
+
+            .label-text > a {
+                &:has([class*="icon-"]) {
+                    &:hover, &:active, &:focus {
+                        cursor: default;
+
+                        [class*="icon-"] {
+                            color: var(--success-color);
+                        }
+                    }
+                }
+            }
         }
 
         &.info {
@@ -301,6 +313,12 @@ body.avoid-scrolling {
 
 /* ---------------------------------------------- BEGIN COLORS-SCHEMES (LIGHT-/DARK-MODE) -------------------------------------------------- */
 html {
+    --color-scheme-text-color-buttons: var(--dark-mode-text-color-buttons);
+    --color-scheme-text-color-inverted: var(--light-mode-text-color);
+    --color-scheme-background: var(--dark-mode-background);
+    --color-scheme-background-inverted: var(--light-mode-background);
+    --default-background-color-lightness: 20%;
+
     &.light-mode {
         /* assign default colors for custom light-mode set by class */
         --color-scheme-text-color: var(--light-mode-text-color);
@@ -311,12 +329,6 @@ html {
         --default-background-color-lightness: 97%;
     }
 
-    --color-scheme-text-color-buttons: var(--dark-mode-text-color-buttons);
-    --color-scheme-text-color-inverted: var(--light-mode-text-color);
-    --color-scheme-background: var(--dark-mode-background);
-    --color-scheme-background-inverted: var(--light-mode-background);
-    --default-background-color-lightness: 20%;
-
     &.dark-mode {
         /* assign default colors for custom dark-mode set by class */
         --color-scheme-text-color: var(--dark-mode-text-color);

package/src/componentSettingsDataAndControls.vue

@@ -339,7 +339,8 @@ data() {
             largeIcons: false,
             sectionAnchors: false,
             orientation: "vertical",
-            align: "left"
+            align: "left",
+            showListStyleItems: false
         },
         cmdListOfLinksSettingsControls: {
             align: [
@@ -366,6 +367,16 @@ data() {
                     text: "Horizontal",
                     value: "horizontal"
                 }
+            ],
+            showListStyleItems: [
+                {
+                    text: "False (default)",
+                    value: false
+                },
+                {
+                    text: "True",
+                    value: true
+                }
             ]
         },
         cmdLoginFormSettingsData: {
@@ -458,6 +469,9 @@ data() {
                 headlineLevel: 3
             }
         },
+        cmdPageFooterSettingsData: {
+            useSmallButtons: false
+        },
         cmdPaginationSettingsData: {
             pages: 3,
             itemsPerPage: 1,
@@ -580,7 +594,8 @@ data() {
         cmdTextImageBlockSettingsData: {
             htmlContent: "Text given as html-content",
             paragraphTextAlign: "left",
-            headlinePosition: "aboveImage"
+            headlinePosition: "aboveImage",
+            orientation: "vertical"
         },
         cmdTextImageBlockSettingsControls: {
             paragraphTextAlign: [
@@ -606,6 +621,16 @@ data() {
                     text: "Below Image",
                     value: "belowImage"
                 }
+            ],
+            orientation: [
+                {
+                    text: "Vertical (default)",
+                    value: "vertical"
+                },
+                {
+                    text: "Horizontal",
+                    value: "horizontal"
+                }
             ]
         },
         cmdThumbnailScrollerSettingsData: {

package/src/components/CmdFakeSelect.vue

@@ -24,7 +24,7 @@
                 <a v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
                    href="#"
                    @click.prevent
-                   :title="!useCustomTooltip ? getValidationMessage : ''"
+                   :title="validationTooltip"
                    :aria-errormessage="tooltipId"
                    aria-live="assertive"
                    :id="tooltipId">
@@ -71,7 +71,7 @@
                     <!-- end optional icon -->
 
                     <!-- begin text -->
-                    <span v-if="optionName" class="option-name" :style="limitWidthStyle">{{ optionName }}</span>
+                    <span v-if="optionName" class="option-name">{{ optionName }}</span>
                     <!-- end text -->
 
                     <!-- begin custom dropdown-icon -->
@@ -179,7 +179,8 @@
 <script>
 // import mixins
 import I18n from "../mixins/I18n"
-import DefaultMessageProperties from "../mixins/CmdFakeSelect/DefaultMessageProperties"
+import DefaultMessagePropertiesFakeSelect from "../mixins/CmdFakeSelect/DefaultMessageProperties"
+import DefaultMessagePropertiesFormElement from "../mixins/CmdFormElement/DefaultMessageProperties"
 import FieldValidation from "../mixins/FieldValidation"
 import Identifier from "../mixins/Identifier"
 import Tooltip from "../mixins/Tooltip"
@@ -189,7 +190,8 @@ export default {
     inheritAttrs: false,
     mixins: [
         I18n,
-        DefaultMessageProperties,
+        DefaultMessagePropertiesFakeSelect,
+        DefaultMessagePropertiesFormElement,
         FieldValidation,
         Identifier,
         Tooltip
@@ -198,7 +200,6 @@ export default {
         return {
             showOptions: false,
             validationStatus: "",
-            limitWidthStyle: null,
             allOptionsSelected: false
         }
     },
@@ -428,16 +429,6 @@ export default {
             return this.getMessage("cmdfakeselect.linktext.select_all_options")
         }
     },
-    mounted() {
-        //this.$nextTick(this.limitWidth)
-        //setTimeout(this.limitWidth, 250)
-        const hnd = setInterval(() => {
-            if (this.$refs.fakeselect) {
-                clearInterval(hnd)
-                this.limitWidth()
-            }
-        }, 100)
-    },
     methods: {
         toggleAllOptions() {
             this.validationStatus = "success"
@@ -454,12 +445,6 @@ export default {
 
             this.$emit("update:modelValue", checkboxValues)
         },
-        limitWidth() {
-            if (this.$refs.fakeselect) {
-                const outerWidth = this.$refs.fakeselect.offsetWidth
-                this.limitWidthStyle = {width: outerWidth / 100 * 90 + "px"}
-            }
-        },
         toggleOptions() {
             if (this.$attrs.disabled !== 'disabled') {
                 this.showOptions = !this.showOptions
@@ -570,6 +555,10 @@ export default {
                     color: var(--color-scheme-text-color);
                     border-radius: var(--default-border-radius);
 
+                    img {
+                        flex-shrink: 0;
+                    }
+
                     span, [class*="icon"] {
                         color: var(--color-scheme-text-color);
                     }

package/src/components/CmdFormElement.vue

@@ -881,8 +881,11 @@ export default {
     }
 
     &.has-state, & + .cmd-tooltip {
-        * {
-            --status-color: var(--error-color);
+
+        &.error {
+            * {
+                --status-color: var(--error-color);
+            }
         }
 
         ::placeholder {

package/src/components/CmdInputGroup.vue

@@ -242,7 +242,7 @@ export default {
         updateStatus() {
             if (this.required) {
                 if (this.inputValue?.length) {
-                    this.validationStatus = ""
+                    this.validationStatus = "success"
                     return
                 }
                 this.validationStatus = "error"

package/src/components/CmdListOfLinks.vue

@@ -1,5 +1,12 @@
 <template>
-    <div :class="['cmd-list-of-links', {box: styleAsBox, horizontal: orientation === 'horizontal', 'section-anchors': sectionAnchors, 'large-icons': largeIcons}]">
+    <div :class="['cmd-list-of-links',
+        {
+            box: styleAsBox, horizontal: orientation === 'horizontal',
+            'section-anchors': sectionAnchors,
+            'large-icons': largeIcons,
+            'show-list-style-items': showListStyleItems
+        }
+    ]">
         <!-- begin cmd-headline -->
         <CmdHeadline
             v-if="cmdHeadline?.headlineText || editModeContext"
@@ -9,6 +16,7 @@
 
         <!-- begin list of links -->
         <ul :class="['flex-container', {'no-gap': !useGap}, 'align-' + align, setStretchClass]">
+            <!-- begin CmdListOfLinksItem-->
             <CmdListOfLinksItem
                 v-if="!editModeContext"
                 v-for="(link, index) in links"
@@ -16,6 +24,7 @@
                 :class="{'active': sectionAnchors && activeSection === index}"
                 :link="link"
             />
+            <!-- end CmdListOfLinksItem-->
 
             <!-- begin edit-mode -->
             <li v-else>
@@ -31,11 +40,14 @@
                     :componentPath="['props', 'links', index]"
                     :itemProvider="itemProvider"
                 >
+                    <!-- begin CmdListOfLinksItem-->
                     <CmdListOfLinksItem
                         :class="{'active': sectionAnchors && activeSection === index}"
                         :link="link"
                     />
+                    <!-- end CmdListOfLinksItem-->
                 </EditComponentWrapper>
+
                 <button v-if="links.length === 0" type="button" class="button confirm small" @click="onAddItem">
                     <span class="icon-plus"></span>
                     <span>Add new entry</span>
@@ -48,7 +60,10 @@
 </template>
 
 <script>
+// import mixins (editMode only)
 import EditMode from "../mixins/EditMode.vue"
+
+// import utils (editMode only)
 import {buildComponentPath, updateHandlerProvider} from "../utils/editmode.js"
 
 export default {
@@ -97,6 +112,15 @@ export default {
             type: Number,
             default: 0
         },
+        /**
+         * toggle list-style-items visibility
+         *
+         * @affectsStyling: true
+         */
+        showListStyleItems: {
+            type: Boolean,
+            default: false
+        },
         /**
          * set horizontal alignment
          *
@@ -200,6 +224,19 @@ export default {
         &.align-right li {
             text-align: right;
         }
+
+        ul {
+            display: flex;
+            flex-direction: column;
+            margin-left: calc(var(--default-padding) * 2);
+        }
+    }
+
+    &.show-list-style-items {
+        li {
+            list-style-type: disc;
+            margin-left: 1.7rem;
+        }
     }
 
     &.horizontal {
@@ -210,6 +247,7 @@ export default {
             > li {
                 flex: none;
                 display: flex;
+                flex-direction: column;
             }
 
             &.align-right {
@@ -224,20 +262,42 @@ export default {
     }
 
     &.large-icons {
-        li a {
-            display: flex;
-            flex-direction: column;
-            gap: calc(var(--default-gap) / 4);
-            text-decoration: none;
-            align-items: center;
-            justify-content: center;
+        li {
+            list-style-type: none;
+
+            a {
+                display: flex;
+                flex-direction: column;
+                gap: calc(var(--default-gap) / 4);
+                text-decoration: none;
+                align-items: center;
+                justify-content: center;
+
+                span {
+                    margin: 0;
+                }
 
-            span {
-                margin: 0;
+                [class*="icon-"] {
+                    font-size: 5rem;
+                }
             }
+        }
+    }
+}
+</style>
 
-            [class*="icon-"] {
-                font-size: 5rem;
+<style lang="scss">
+@import '../assets/styles/variables';
+
+@media only screen and (max-width: $medium-max-width) {
+    .cmd-list-of-links {
+        > ul {
+            ul {
+                gap: calc(var(--default-gap) / 2);
+
+                > li:first-child {
+                    margin-top: calc(var(--default-gap) / 2);
+                }
             }
         }
     }

package/src/components/CmdListOfLinksItem.vue

@@ -15,15 +15,26 @@
         <!-- end use href --->
 
         <!-- begin use router-link -->
-        <router-link v-else-if="link.type === 'router'"
-                     :to="getRoute(link)"
-                     :title="link.tooltip">
+        <router-link
+            v-else-if="link.type === 'router'"
+            :to="getRoute(link)"
+            :title="link.tooltip">
             <!-- begin CmdIcon -->
             <CmdIcon v-if="link.iconClass" :iconClass="link.iconClass" :type="link.iconType" />
             <!-- end CmdIcon -->
             <span v-if="link.text">{{ link.text }}</span>
         </router-link>
         <!-- end use router-link -->
+
+        <!-- begin CmdListOfLinksItem for nested children -->
+        <ul v-if="!editModeContext">
+            <CmdListOfLinksItem
+                v-for="(child, index) in link.children"
+                :key="index"
+                :link="child"
+            />
+        </ul>
+        <!-- end CmdListOfLinksItem for nested children -->
     </li>
     <!-- end default-view -->
 

package/src/components/CmdPageFooter.vue

@@ -0,0 +1,83 @@
+<template>
+    <div :class="['cmd-page-footer flex-container', {'small-buttons': useSmallButtons}]">
+        <!-- begin button print-preview -->
+        <button
+            v-if="buttonPrintView.show"
+            :class="['button', {'primary': buttonPrintView.primary}]"
+            :title="buttonPrintView.text ? buttonPrintView.icon?.tooltip : null"
+        >
+            <span v-if="buttonPrintView.icon?.show" :class="buttonPrintView.icon?.iconClass"></span>
+            <span v-if="buttonPrintView.text">{{buttonPrintView.text}}</span>
+        </button>
+        <!-- end button print-preview -->
+
+        <!-- begin slot-content -->
+        <slot></slot>
+        <!-- end slot-content -->
+
+        <!-- begin CmdSocialNetworks -->
+        <CmdSocialNetworks v-if="cmdSocialNetworks" :networks="cmdSocialNetworks">
+            <slot name="cmd-social-networks"></slot>
+        </CmdSocialNetworks>
+        <!-- end CmdSocialNetworks -->
+    </div>
+</template>
+
+<script>
+export default {
+    name: "CmdPageFooter",
+    props: {
+        /**
+         * define button for print-preview
+         */
+        buttonPrintView: {
+            type: Object,
+            default() {
+                return {
+                    show: true,
+                    primary: false,
+                    icon: {
+                        show: true,
+                        iconClass: "icon-print-preview",
+                        tooltip: "Open print preview"
+                    },
+                    text: "Print preview"
+                }
+            }
+        },
+        /**
+         * activate to use small buttons
+         */
+        useSmallButtons: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * properties for CmdSocialNetworks-component
+         */
+        cmdSocialNetworks: {
+            type: Array,
+            required: false
+        }
+    }
+}
+</script>
+
+<style>
+/* begin cmd-page-footer -------------------------------------------------------------------------------------------- */
+.cmd-page-footer {
+    align-items: flex-end;
+
+    &.small-buttons {
+        button, .button {
+            padding: var(--button-padding-small);
+            min-height: var(--button-min-height-small);
+
+            span {
+                font-size: var(--font-size-small);
+            }
+        }
+    }
+}
+/* end cmd-page-footer -------------------------------------------------------------------------------------------- */
+</style>

package/src/components/CmdPagination.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="cmd-pager">
+    <div class="cmd-pagination">
         <!-- begin button/link to previous page -->
         <a
             :href="getPreviousHref"
@@ -47,10 +47,10 @@
 <script>
 // import mixins
 import I18n from "../mixins/I18n"
-import DefaultMessageProperties from "../mixins/CmdPager/DefaultMessageProperties"
+import DefaultMessageProperties from "../mixins/CmdPagination/DefaultMessageProperties"
 
 export default {
-    name: "CmdPager",
+    name: "CmdPagination",
     mixins: [
         I18n,
         DefaultMessageProperties
@@ -172,7 +172,7 @@ export default {
 
 <style>
 /* begin cmd-pagination ---------------------------------------------------------------------------------------- */
-.cmd-pager {
+.cmd-pagination {
     display: flex;
     justify-content: space-between;
 

package/src/components/CmdSidebar.vue

@@ -130,6 +130,8 @@ export default {
 
     &.box {
         padding: 0;
+
+        border-left: 0;
     }
 
     .cmd-box-wrapper > .grid-container-create-columns {