comand-component-library 4.1.91 → 4.1.93

package/src/ComponentLibrary.vue

@@ -314,7 +314,7 @@
                                 v-bind="{useCustomTooltip: false}"
                             />
                         </div>
-                        <h2>Inputfields in Columns</h2>
+                        <h3>Inputfields in Columns</h3>
                         <div class="flex-container">
                             <CmdFormElement
                                 element="input"
@@ -427,29 +427,37 @@
                             :status="validationStatus"
                             :disabled="disabledStatus"
                         />
-                        <CmdFormElement
-                            element="input"
-                            labelText="Label (inline) for inputfield (search) without search-button:"
-                            :displayLabelInline="true"
-                            type="search"
-                            id="inputfield-search-without-searchbutton"
-                            placeholder="Keyword(s)"
-                            v-model="inputSearch"
-                            :showSearchButton="false"
-                            :status="validationStatus"
-                            :disabled="disabledStatus"
-                        />
-                        <CmdFormElement
-                            element="input"
-                            labelText="Label (inline) for inputfield (search):"
-                            :displayLabelInline="true"
-                            type="search"
-                            id="inputfield-search-with-searchbutton"
-                            placeholder="Keyword(s)"
-                            v-model="inputSearch"
-                            :status="validationStatus"
-                            :disabled="disabledStatus"
-                        />
+                        <h3>Searchfields</h3>
+                        <div class="flex-container">
+                            <CmdFormElement
+                                element="input"
+                                labelText="Label for inputfield (search) without search-button:"
+                                type="search"
+                                id="inputfield-search-without-searchbutton"
+                                placeholder="Keyword(s)"
+                                v-model="inputSearch"
+                                :showSearchButton="false"
+                                :status="validationStatus"
+                                :disabled="disabledStatus"
+                            />
+                            <CmdFormElement
+                                element="input"
+                                labelText="Label for inputfield (search):"
+                                type="search"
+                                id="inputfield-search-with-searchbutton"
+                                placeholder="Keyword(s)"
+                                v-model="inputSearch"
+                                :status="validationStatus"
+                                :disabled="disabledStatus"
+                            />
+                            <!-- begin CmdSmartSearch -->
+                            <CmdSmartSearch
+                                v-bind="smartSearchData"
+                                :disabled="disabledStatus"
+                            />
+                            <!-- end CmdSmartSearch -->
+                        </div>
+                        <h3>Textarea</h3>
                         <CmdFormElement
                             element="textarea"
                             labelText="Label for textarea:"
@@ -1414,6 +1422,51 @@
             </CmdWidthLimitationWrapper>
             <!-- end fancybox --------------------------------------------------------------------------------------------------->
 
+            <!-- begin flexible-scroll-container --------------------------------------------------------------------------------------------------->
+            <CmdWidthLimitationWrapper>
+                <h2 class="headline-demopage" id="section-flexible-scroll-container">Flexible Scroll-Container</h2>
+                <CmdFlexibleScrollContainer style="border: 1px dotted gray">
+                    <template v-slot:fixed-wrapper>
+                        <div class="default-padding" style="border: 1px dotted gray">
+                            Fixed content
+                        </div>
+                    </template>
+                    <template v-slot:scroll-wrapper>
+                        <div class="default-padding" style="border: 1px dotted gray">
+                            <ul>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                                <li>Dynamic Content</li>
+                            </ul>
+                        </div>
+                    </template>
+                </CmdFlexibleScrollContainer>
+            </CmdWidthLimitationWrapper>
+            <!-- end flexible-scroll-container --------------------------------------------------------------------------------------------------->
+
+            <!-- end fancybox --------------------------------------------------------------------------------------------------->
+
             <!-- begin google-maps --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage" id="section-google-maps">Google Maps&trade;</h2>
@@ -1445,7 +1498,7 @@
                     ref="CmdHeadline"
                     headlineLevel="3"
                 >
-                    Headline text<br /> with html given by slot
+                    Headline text<br/> with html given by slot
                 </CmdHeadline>
 
             </CmdWidthLimitationWrapper>
@@ -1540,6 +1593,7 @@
                     ref="CmdLink"
                     v-bind="cmdLinkSettingsData"
                     :icon="{iconClass: 'icon-chevron-one-stripe-right', position: 'right', tooltip: 'Tooltip for hyperlink'}"
+                    @click="cmdLinkOutput"
                 />
                 <CmdLink
                     linkType="href"
@@ -1567,6 +1621,11 @@
                     :fancybox="true"
                     :icon="{iconClass: 'icon-chevron-one-stripe-right', position: 'right', tooltip: 'Tooltip for hyperlink'}"
                 />
+                <dl class="output">
+                    <dt>Event:</dt><dd>{{outputCmdLink?.event?.originalEvent.originalEvent}}</dd>
+                    <dt>Target:</dt><dd>{{outputCmdLink?.event?.originalEvent.target}}</dd>
+                    <dt>LinkType:</dt><dd>{{outputCmdLink?.event?.originalEvent.linkType}}</dd>
+                </dl>
             </CmdWidthLimitationWrapper>
             <!-- end link --------------------------------------------------------------------------------------------------->
 
@@ -1581,7 +1640,13 @@
                     ref="CmdListOfLinks"
                     v-bind="cmdListOfLinksSettingsData"
                     :links="listOfLinksData"
+                    @click="cmdLinkOutput"
                 />
+                <dl class="output">
+                    <dt>Event:</dt><dd>{{outputCmdLink?.event?.originalEvent}}</dd>
+                    <dt>Target:</dt><dd>{{outputCmdLink?.event?.originalEvent.target}}</dd>
+                    <dt>LinkType:</dt><dd>{{outputCmdLink?.event?.linkType}}</dd>
+                </dl>
             </CmdWidthLimitationWrapper>
             <!-- end list-of-links --------------------------------------------------------------------------------------------------->
 
@@ -1608,12 +1673,29 @@
                        @click.prevent="openSettingsSidebar('CmdLoginForm')"></a>
                 </h2>
                 <CmdForm :use-fieldset="false">
-                    <CmdLoginForm ref="CmdLoginForm" v-bind="cmdLoginFormSettingsData" v-model="loginData"/>
+                    <CmdLoginForm
+                        ref="CmdLoginForm"
+                        v-bind="cmdLoginFormSettingsData"
+                        v-model="loginData"
+                    />
                 </CmdForm>
                 <p>LoginData: {{ loginData }}</p>
             </CmdWidthLimitationWrapper>
             <!-- end login-form --------------------------------------------------------------------------------------------------->
 
+            <!-- begin mail-tool --------------------------------------------------------------------------------------------------->
+            <CmdWidthLimitationWrapper>
+                <h2 class="headline-demopage" id="section-mail-tool">
+                    <span>Mail Tool</span>
+                </h2>
+                <CmdMailTool
+                    ref="CmdMailTool"
+                    :mailsInbox="mailToolData.inbox"
+                    :mailsOutbox="mailToolData.outbox"
+                />
+            </CmdWidthLimitationWrapper>
+            <!-- end mail-tool --------------------------------------------------------------------------------------------------->
+
             <!-- begin main-navigation --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage" id="section-main-navigation">
@@ -1842,7 +1924,7 @@
                     :languages="languagesData"
                     @click="updateLanguage"
                 />
-                <p>Selected language: {{selectedLanguage}} </p>
+                <p>Selected language: {{ selectedLanguage }} </p>
             </CmdWidthLimitationWrapper>
             <!-- end switch-language --------------------------------------------------------------------------------------------------->
 
@@ -1975,10 +2057,10 @@
                     <a href="#" class="button small icon-cog" title="Open Component Settings"
                        @click.prevent="openSettingsSidebar('CmdThumbnailScroller')"></a>
                 </h2>
-                <p> date (YMD/default): {{formatDate('2025-01-28', "", "-")}}</p>
-                <p> date (DMY): {{formatDate('2025-01-28', "dmy")}}</p>
-                <p> date (MDY): {{formatDate('2025-01-28', "mdy", "/")}}</p>
-                <p> date (invalid)): {{formatDate('invalid')}}</p>
+                <p> date (YMD/default): {{ formatDate('2025-01-28', "", "-") }}</p>
+                <p> date (DMY): {{ formatDate('2025-01-28', "dmy") }}</p>
+                <p> date (MDY): {{ formatDate('2025-01-28', "mdy", "/") }}</p>
+                <p> date (invalid)): {{ formatDate('invalid') }}</p>
                 <div class="inline-size">
                     <CmdThumbnailScroller
                         ref="CmdThumbnailScroller"
@@ -2160,11 +2242,13 @@ import inputGroupReplacedRadiobuttonsData from '@/assets/data/input-group-replac
 import inputGroupToggleSwitchRadiobuttonsData from '@/assets/data/input-group-toggle-switch-radiobuttons.json'
 import listOfLinksData from '@/assets/data/list-of-links.json'
 import languagesData from '@/assets/data/switch-language.json'
+import mailToolData from '@/assets/data/mail-tool.json'
 import multistepsData from '@/assets/data/multistep-form-progress-bar.json'
 import navigationData from '@/assets/data/main-navigation.json'
 import openingHoursData from '@/assets/data/opening-hours.json'
 import selectOptionsData from '@/assets/data/select-options.json'
 import slideshowData from '@/assets/data/slideshow.json'
+import smartSearchData from '@/assets/data/smart-search.json'
 import socialNetworksData from '@/assets/data/social-networks-page-by-json.json'
 import tabsData from '@/assets/data/tabs.json'
 import tableDataSmall from '@/assets/data/table-small.json'
@@ -2325,6 +2409,12 @@ export default {
             openLeftSidebar: true,
             openRightSidebar: false,
             openBoxes: [1],
+            outputCmdLink: {
+                event: {
+                    originalEvent: {},
+                    linkType: ""
+                }
+            },
 
             // assign data from json files to data-properties
             addressData,
@@ -2347,10 +2437,12 @@ export default {
             languagesData,
             listOfLinksData,
             multistepsData,
+            mailToolData,
             navigationData,
             openingHoursData,
             selectOptionsData,
             slideshowData,
+            smartSearchData,
             socialNetworksData,
             tableDataSmall,
             tableDataLarge,
@@ -2361,19 +2453,23 @@ export default {
             packageJson
         }
     },
+    mounted() {
+        console.log("Component Library is mounted");
+    },
     computed: {
         navigationDataModified() {
-            if(!this.useRouterLinks) {
+            if (!this.useRouterLinks) {
                 function mapLinkTypes(navigationEntries) {
                     return navigationEntries.map((item) => {
                         item.type = "href"
 
-                        if(item.subentries?.length) {
+                        if (item.subentries?.length) {
                             item.subentries = mapLinkTypes(item.subentries)
                         }
                         return item
                     })
                 }
+
                 return mapLinkTypes(this.navigationData.navigationEntries)
             }
             return this.navigationData.navigationEntries
@@ -2392,6 +2488,10 @@ export default {
         }
     },
     methods: {
+        cmdLinkOutput(event, linkType) {
+            this.outputCmdLink.event.originalEvent = event
+            this.outputCmdLink.event.linkType = linkType
+        },
         formatDate,
         updateLanguage(event) {
             this.selectedLanguage = event.iso2
@@ -2463,7 +2563,7 @@ export default {
                 return navigationData
             }, 1000);
         },
-        clickOnListOfLinks(event) {
+        f(event) {
             event.originalEvent.preventDefault()
             console.log(event)
         },

package/src/assets/data/listOfComponents.json

@@ -20,6 +20,7 @@
   "ListOfImages",
   "ListOfLinks",
   "LoginForm",
+  "MailTool",
   "MainNavigation",
   "MultistepFormProgressBar",
   "NewsletterSubscription",

package/src/assets/data/mail-tool.json

@@ -0,0 +1,50 @@
+{
+  "inbox": [
+    {
+      "id": 1,
+      "cmdImage": {
+        "src": "/public/media/images/user-images/fake-user-1.jpg",
+        "alt": "User image"
+      },
+      "contactFullName": "Name Sender #1",
+      "subject": "This is the subject of this mail #1",
+      "isoDate": "2025-02-20",
+      "time": "19:39"
+    },
+    {
+      "id": 2,
+      "cmdImage": {
+        "src": "/public/media/images/user-images/fake-user-2.jpg",
+        "alt": "User image"
+      },
+      "contactFullName": "Name Sender #2",
+      "subject": "This is the subject of this mail #2",
+      "isoDate": "2025-02-20",
+      "time": "21:08"
+    }
+  ],
+  "outbox": [
+    {
+      "id": 3,
+      "cmdImage": {
+        "src": "/public/media/images/user-images/fake-user-2.jpg",
+        "alt": "User image"
+      },
+      "contactFullName": "Name Receiver #1",
+      "subject": "This is the subject of this mail #1",
+      "isoDate": "2025-02-20",
+      "time": "19:41"
+    },
+    {
+      "id": 4,
+      "cmdImage": {
+        "src": "/public/media/images/user-images/fake-user-3.jpg",
+        "alt": "User image"
+      },
+      "contactFullName": "Name Receiver #2",
+      "subject": "This is the subject of this mail #2",
+      "isoDate": "2025-02-21",
+      "time": "15:55"
+    }
+  ]
+}

package/src/assets/data/smart-search.json

@@ -0,0 +1,28 @@
+{
+  "listOfRecommendations": [
+    {
+      "linkType": "href",
+      "text": "Option #1",
+      "icon": {
+        "iconClass": "icon-home"
+      }
+    },
+    {
+      "linkType": "href",
+      "text": "Option #2",
+      "icon": {
+        "iconClass": "icon-company"
+      }
+    },
+    {
+      "linkType": "href",
+      "text": "Option #3",
+      "icon": {
+        "iconClass": "icon-globe"
+      }
+    }
+  ],
+  "cmdFormElement": {
+    "labelText": "Label for inputfield (search) with smart-search:"
+  }
+}

package/src/assets/data/tabs.json

@@ -1,20 +1,20 @@
 [
   {
-    "name": "Tab 1",
+    "text": "Tab 1",
     "headlineText": "Tab 1 Headline",
     "headlineLevel": 4,
     "iconClass": "icomoon-free:airplane",
     "htmlContent": "<p>Content for Tab 1</p>"
   },
   {
-    "name": "Tab 2",
+    "text": "Tab 2",
     "headlineText": "Tab 2 Headline",
     "headlineLevel": 4,
     "iconClass": "icomoon-free:blocked",
     "htmlContent": "<p>Content for Tab  2</p>"
   },
   {
-    "name": "Tab 3",
+    "text": "Tab 3",
     "headlineText": "Tab 3 Headline",
     "headlineLevel": 4,
     "iconClass": "cmd:linkedin",

package/src/componentSettingsDataAndControls.vue

@@ -449,16 +449,15 @@ data() {
             ]
         },
         cmdLoginFormSettingsData: {
-            legendLoginForm: {
-                show: true,
-                align: "left",
-                text: "Login form"
+            cmdHeadlineLoginForm: {
+                headlineText: "Login",
+                headlineLevel: 4
             },
-            legendForgotLoginForm: {
-                show: true,
-                align: "right",
-                text: "Forgot login form"
-            }
+            cmdHeadlineSendLoginForm: {
+                headlineText: "Send Login",
+                headlineLevel: 4
+            },
+            orientation: "horizontal"
         },
         cmdLoginFormSettingsControls: {
             orientation: [
@@ -509,10 +508,6 @@ data() {
         },
         cmdNewsletterSubscriptionSettingsData: {
             buttonType: "submit",
-            legend: {
-                show: true,
-                text: "Stay up-to-date"
-            },
             cmdInputGroup: {
                 inputElements: [
                     {
@@ -615,11 +610,7 @@ data() {
             ],
         },
         cmdSiteSearchSettingsData: {
-            useFilters: true,
-            legend: {
-                show: true,
-                text: "Search"
-            }
+            useFilters: true
         },
         cmdSlideshowSettingsData: {
             useSlot: false,

package/src/components/CmdAddressData.vue

@@ -172,10 +172,11 @@
 </template>
 
 <script>
-import EditMode from "../mixins/EditMode.vue"
-import {buildComponentPath, updateHandlerProvider} from "../utils/editmode.js";
+// import functions
+import {buildComponentPath, updateHandlerProvider} from "../utils/editmode.js"
 
 // import mixins
+import EditMode from "../mixins/EditMode.vue"
 
 export default {
     name: "CmdAddressData",

package/src/components/CmdBackToTopButton.vue

@@ -11,7 +11,6 @@
 </template>
 
 <script>
-
 export default {
     name: "CmdBackToTopButton",
     data() {

package/src/components/CmdBasicForm.vue

@@ -263,8 +263,9 @@
 // import mixins
 import I18n from "../mixins/I18n.js"
 import DefaultMessageProperties from "../mixins/CmdBasicForm/DefaultMessageProperties.js"
-import {ContactFormValidator} from "../utils/ContactFormValidation.js"
 
+// import functions
+import {ContactFormValidator} from "../utils/ContactFormValidation.js"
 import {openFancyBox} from "./CmdFancyBox.vue"
 
 export default {

package/src/components/CmdFlexibleScrollContainer.vue

@@ -0,0 +1,41 @@
+<template>
+    <div :class="['cmd-flexible-scroll-container flexible-scroll-container', {'reverse-order': fixedContainerAtBottom}]">
+        <div class="fixed-wrapper">
+            <!-- begin slot for fixed-wrapper -->
+            <slot name="fixed-wrapper"></slot>
+            <!-- end slot for fixed-wrapper -->
+        </div>
+        <div class="scroll-wrapper">
+            <!-- begin slot for scroll-wrapper -->
+            <slot name="scroll-wrapper"></slot>
+            <!-- end slot for scroll-wrapper -->
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "CmdFlexibleScrollContainer",
+    /**
+     * put fixed container to bottom
+     *
+     * @affectLayout: true
+     */
+    props: {
+        fixedContainerAtBottom: {
+            type: Boolean,
+            default: false
+        }
+    }
+}
+</script>
+
+<style>
+/* begin cmd-flexible-scroll-container  ------------------------------------------------------------------------------------------ */
+.cmd-flexible-scroll-container {
+    &.reverse-order {
+        flex-direction: column-reverse;
+    }
+}
+/* end cmd-flexible-scroll-container  ------------------------------------------------------------------------------------------ */
+</style>

package/src/components/CmdFormElement.vue

@@ -71,7 +71,6 @@
             <!-- begin inputfield -->
             <template v-if="element === 'input' && $attrs.type !== 'search'">
                 <input
-                    v-bind="elementAttributes"
                     :id="htmlId"
                     :class="inputClass"
                     @focus="tooltip = true"
@@ -83,8 +82,10 @@
                     :autocomplete="autocomplete"
                     :list="datalist ? datalist.id : null"
                     :value="modelValue"
+                    :minlength="$attrs.type === 'password' ? '8' : null"
                     :maxlength="getMaxLength()"
                     ref="input"
+                    v-bind="elementAttributes"
                 />
             </template>
             <!-- end inputfield -->
@@ -178,27 +179,27 @@
                 @blur="onBlur"
                 @change="$emit('update:modelValue', $event.target.value)">
 
-                <option v-if="!groupSelectOptionsByInitialLetters"
+            <option v-if="!groupSelectOptionsByInitialLetters"
                     v-for="(option, index) in selectOptions"
                     :key="index"
                     :value="option.value"
                     :selected="option.value === modelValue"
+            >
+                {{ option.text }}
+            </option>
+            <optgroup v-else :label="key"
+                      v-for="(options, key) in initialLetters"
+                      :key="key"
+            >
+                <option
+                    v-for="(option, optionIndex) in options"
+                    :key="optionIndex"
+                    :value="option.value"
+                    :selected="option.value === modelValue"
                 >
                     {{ option.text }}
                 </option>
-                <optgroup v-else :label="key"
-                    v-for="(options, key) in initialLetters"
-                    :key="key"
-                >
-                    <option
-                        v-for="(option, optionIndex) in options"
-                        :key="optionIndex"
-                        :value="option.value"
-                        :selected="option.value === modelValue"
-                    >
-                        {{ option.text }}
-                    </option>
-                </optgroup>
+            </optgroup>
         </select>
         <!-- end selectbox -->
 
@@ -699,7 +700,7 @@ export default {
     },
     computed: {
         initialLetters() {
-                return this.getInitialLetters(this.selectOptions)
+            return this.getInitialLetters(this.selectOptions)
         },
         elementAttributes() {
             const commonAttributes = ["name", "required", "readonly", "disabled", "autofocus"]
@@ -788,7 +789,7 @@ export default {
             listOfOptions.sort((a, b) => a.text.toLowerCase().localeCompare(b.text.toLowerCase()))
 
             for (let i = 0; i < listOfOptions.length; i++) {
-                const initialLetter = listOfOptions[i].text.slice(0,1)
+                const initialLetter = listOfOptions[i].text.slice(0, 1)
                 if (!groupedListOfOptions[initialLetter]) {
                     groupedListOfOptions[initialLetter] = []
                 }
@@ -829,8 +830,11 @@ export default {
             const useValidation = event.target.closest("form")?.dataset.useValidation === "true"
 
             if (useValidation) {
+                // get value from input-element
+                const value = event.target.value
+
                 // if input is filled, set status to success (expect for checkboxes and radiobuttons)
-                if (!["checkbox", "radio"].includes(this.$attrs.type) && this.modelValue) {
+                if (!["checkbox", "radio"].includes(this.$attrs.type) && value) {
                     this.validationStatus = "success"
                 }
 
@@ -840,7 +844,7 @@ export default {
                     if (this.customRequirements) {
                         // check if customRequirement returns invalid result
                         const invalidCustomRequirement = this.customRequirements.some(requirement => {
-                            return !requirement.valid(this.modelValue)
+                            return !requirement.valid(value)
                         })
 
                         // set validation-status if invalidCustomRequirement returns at least one invalid entry
@@ -1032,10 +1036,8 @@ export default {
     }
 
     .place-inside {
-        + .search-field-wrapper {
-            input {
-                padding-left: calc(var(--default-padding) * 3);
-            }
+        input {
+            padding-left: calc(var(--default-padding) * 3);
         }
     }
 

package/src/components/CmdImage.vue

@@ -105,7 +105,7 @@
     <!-- end image with figure/figcaption -->
 
     <!-- begin image without figure/figcaption -->
-    <img v-else :src="imageSource" :alt="image?.alt" :title="image?.tooltip" @load="onImageLoaded"/>
+    <img v-else class="cmd-image" :src="imageSource" :alt="image?.alt" :title="image?.tooltip" @load="onImageLoaded"/>
     <!-- end image without figure/figcaption -->
     <!-- end default-view -->
 </template>