comand-component-library 4.0.6 → 4.0.8

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

@@ -11,7 +11,19 @@
     "text": "Internal link",
     "path": "/content/fancybox-content.html",
     "tooltip": "Open local file in fancybox",
-    "fancybox": true
+    "fancybox": true,
+    "children": [
+      {
+        "type": "href",
+        "text": "Link for child #1",
+        "path": "#"
+      },
+      {
+        "type": "href",
+        "text": "Link for child #2",
+        "path": "#"
+      }
+    ]
   },
   {
     "iconClass": "icon-export",

package/src/assets/data/pages/list-of-downloads.json

@@ -0,0 +1,56 @@
+[
+  {
+    "headline": {
+      "headlineLevel": 4,
+      "headlineText": "Segment #1 (vertical list)"
+    },
+    "orientation": "vertical",
+    "links": [
+      {
+        "iconClass": "icon-file-pdf",
+        "type": "href",
+        "text": "Download file #1",
+        "path": "#"
+      },
+      {
+        "iconClass": "icon-file-excel",
+        "type": "href",
+        "text": "Download file #2",
+        "path": "#"
+      },
+      {
+        "iconClass": "icon-file-other",
+        "type": "href",
+        "text": "Download file #3",
+        "path": "#"
+      }
+    ]
+  },
+  {
+    "headline": {
+      "headlineLevel": 4,
+      "headlineText": "Segment #2 (horizontal list)"
+    },
+    "orientation": "horizontal",
+    "links": [
+      {
+        "iconClass": "icon-file-pdf",
+        "type": "href",
+        "text": "Download file #1",
+        "path": "#"
+      },
+      {
+        "iconClass": "icon-file-excel",
+        "type": "href",
+        "text": "Download file #2",
+        "path": "#"
+      },
+      {
+        "iconClass": "icon-file-other",
+        "type": "href",
+        "text": "Download file #3",
+        "path": "#"
+      }
+    ]
+  }
+]

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

@@ -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 {

package/src/componentSettingsDataAndControls.vue

@@ -5,6 +5,10 @@ export default {
 data() {
     return {
         cmdAddressDataSettingsData: {
+            cmdHeadline: {
+                headlineText: "Address Data",
+                headlineLevel: 3
+            },
             useSlot: false,
             showLabelIcons: true,
             showLabelTexts: false,
@@ -12,6 +16,10 @@ data() {
             showLabels: true
         },
         cmdBankAccountDataSettingsData: {
+            cmdHeadline: {
+                headlineText: "Bank Account Data",
+                headlineLevel: 3
+            },
             allowCopyByClick: false,
             additionalInformation: ""
         },
@@ -331,7 +339,8 @@ data() {
             largeIcons: false,
             sectionAnchors: false,
             orientation: "vertical",
-            align: "left"
+            align: "left",
+            showListStyleItems: false
         },
         cmdListOfLinksSettingsControls: {
             align: [
@@ -358,6 +367,16 @@ data() {
                     text: "Horizontal",
                     value: "horizontal"
                 }
+            ],
+            showListStyleItems: [
+                {
+                    text: "False (default)",
+                    value: false
+                },
+                {
+                    text: "True",
+                    value: true
+                }
             ]
         },
         cmdLoginFormSettingsData: {
@@ -450,6 +469,9 @@ data() {
                 headlineLevel: 3
             }
         },
+        cmdPageFooterSettingsData: {
+            useSmallButtons: false
+        },
         cmdPaginationSettingsData: {
             pages: 3,
             itemsPerPage: 1,
@@ -523,12 +545,12 @@ data() {
             ],
             buttonTextAlign: [
                 {
-                    text: "Left (default)",
-                    value: "left"
+                    text: "Right (default)",
+                    value: "right"
                 },
                 {
-                    text: "Right",
-                    value: "right"
+                    text: "Left",
+                    value: "left"
                 }
             ]
         },
@@ -572,7 +594,8 @@ data() {
         cmdTextImageBlockSettingsData: {
             htmlContent: "Text given as html-content",
             paragraphTextAlign: "left",
-            headlinePosition: "aboveImage"
+            headlinePosition: "aboveImage",
+            orientation: "vertical"
         },
         cmdTextImageBlockSettingsControls: {
             paragraphTextAlign: [
@@ -598,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

@@ -18,12 +18,13 @@
         <template v-if="showLabel">
             <!-- begin label -->
             <span class="label-text">
-                <span :id="htmlId">{{ labelText }}<sup v-if="$attrs.required !== undefined">*</sup></span>
+                <span :id="htmlId">{{ labelText }}<sup v-if="$attrs.required !== undefined" aria-hidden="true">*</sup></span>
 
+                <!-- begin status-icon (linked with tooltip) -->
                 <a v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
                    href="#"
                    @click.prevent
-                   :title="!useCustomTooltip ? getValidationMessage : ''"
+                   :title="validationTooltip"
                    :aria-errormessage="tooltipId"
                    aria-live="assertive"
                    :id="tooltipId">
@@ -31,6 +32,7 @@
                    <CmdIcon :iconClass="getStatusIconClass"/>
                     <!-- end CmdIcon -->
                 </a>
+                <!-- end status-icon (linked with tooltip) -->
 
                 <!-- begin CmdTooltipForFormElements -->
                 <CmdTooltipForFormElements
@@ -51,7 +53,9 @@
                 <!-- begin default/selected-option -->
                 <a href="#" @click.prevent="toggleOptions" @blur="onBlur" :title="optionIcon?.tooltip">
                     <!-- begin show flag -->
-                    <img v-if="type === 'country' && optionCountry" :src="pathFlag(optionCountry)" :alt="optionCountry"
+                    <img v-if="type === 'country' && optionCountry"
+                         :src="pathFlag(optionCountry)"
+                         :alt="optionCountry"
                          :class="['flag', optionCountry]"/>
                     <!-- end show flag -->
 
@@ -67,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 -->
@@ -175,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"
@@ -185,7 +190,8 @@ export default {
     inheritAttrs: false,
     mixins: [
         I18n,
-        DefaultMessageProperties,
+        DefaultMessagePropertiesFakeSelect,
+        DefaultMessagePropertiesFormElement,
         FieldValidation,
         Identifier,
         Tooltip
@@ -194,7 +200,6 @@ export default {
         return {
             showOptions: false,
             validationStatus: "",
-            limitWidthStyle: null,
             allOptionsSelected: false
         }
     },
@@ -424,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"
@@ -450,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
@@ -566,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/CmdFancyBox.vue

@@ -474,6 +474,7 @@ export default FancyBox
 <style>
 /* begin cmd-fancybox ---------------------------------------------------------------------------------------- */
 .cmd-fancybox {
+    position: fixed;
     z-index: 500;
     flex-direction: column;
     padding: var(--default-padding);

package/src/components/CmdForm.vue

@@ -31,10 +31,13 @@
                     :nativeButton="item.nativeButton"
                 />
                 <!-- end loop for formElements -->
-                <button v-if="submitButton" class="button" type="submit">
+
+                <!-- begin submit-button -->
+                <button v-if="submitButton" :class="['button', {primary: submitButton.primary}]" :type="submitButton.type">
                     <span v-if="submitButton.iconClass" :class="submitButton.iconClass"></span>
                     <span v-if="submitButton.text">{{ submitButton.text }}</span>
                 </button>
+                <!-- end submit-button -->
             </fieldset>
 
             <!-- begin button-row-slot-content -->
@@ -128,7 +131,9 @@ export default {
             default() {
                 return {
                     iconClass: "icon-check",
-                    text: "Submit"
+                    text: "Submit",
+                    type: "submit",
+                    primary: true
                 }
             }
         }

package/src/components/CmdFormElement.vue

@@ -22,12 +22,17 @@
               :class="['label-text', { hidden: !showLabel }]">
             <span>
                 <template v-if="labelText">{{ labelText }}</template>
+
                 <!-- begin slot 'labeltext' -->
                 <slot v-else name="labeltext"/>
                 <!-- end slot 'labeltext' -->
-                <sup v-if="$attrs.required" aria-hidden="true">*</sup>
+
+                <!-- begin required asterisk -->
+                <sup v-if="$attrs.required !== undefined" aria-hidden="true">*</sup>
+                <!-- end required asterisk -->
             </span>
 
+            <!-- begin status-icon (linked with tooltip) -->
             <a v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
                href="#"
                @click.prevent
@@ -39,6 +44,7 @@
                 <CmdIcon :iconClass="getStatusIconClass"/>
                 <!-- end CmdIcon -->
             </a>
+            <!-- end status-icon (linked with tooltip) -->
 
             <!-- begin CmdTooltipForFormElements -->
             <CmdTooltipForFormElements
@@ -875,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

@@ -14,9 +14,9 @@
 
         <!-- begin label -->
         <span v-show="showLabel" class="label-text">
-            <span :id="htmlId">{{ labelText }}<sup v-if="required">*</sup></span>
+            <span :id="htmlId">{{ labelText }}<sup v-if="required" aria-hidden="true">*</sup></span>
 
-            <!-- begin status-icon -->
+            <!-- begin status-icon (linked with tooltip) -->
             <a v-if="(required || inputRequirements.length > 0) && showStatusIcon"
                href="#"
                @click.prevent
@@ -28,7 +28,7 @@
                <CmdIcon :iconClass="getStatusIconClass"/>
                 <!-- end CmdIcon -->
             </a>
-            <!-- end status-icon -->
+            <!-- end status-icon (linked with tooltip) -->
 
             <!-- begin CmdTooltipForFormElements -->
             <CmdTooltipForFormElements
@@ -87,9 +87,11 @@
 import FieldValidation from "../mixins/FieldValidation.js"
 import Identifier from "../mixins/Identifier"
 import Tooltip from "../mixins/Tooltip.js"
+import DefaultMessageProperties from "../mixins/CmdFormElement/DefaultMessageProperties"
 
 export default {
     mixins: [
+        DefaultMessageProperties,
         FieldValidation,
         Identifier,
         Tooltip
@@ -240,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);
+                }
             }
         }
     }