comand-component-library 4.1.92 → 4.1.94

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 --------------------------------------------------------------------------------------------------->
 
@@ -1859,7 +1924,7 @@
                     :languages="languagesData"
                     @click="updateLanguage"
                 />
-                <p>Selected language: {{selectedLanguage}} </p>
+                <p>Selected language: {{ selectedLanguage }} </p>
             </CmdWidthLimitationWrapper>
             <!-- end switch-language --------------------------------------------------------------------------------------------------->
 
@@ -1992,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"
@@ -2183,6 +2248,7 @@ 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'
@@ -2343,6 +2409,12 @@ export default {
             openLeftSidebar: true,
             openRightSidebar: false,
             openBoxes: [1],
+            outputCmdLink: {
+                event: {
+                    originalEvent: {},
+                    linkType: ""
+                }
+            },
 
             // assign data from json files to data-properties
             addressData,
@@ -2370,6 +2442,7 @@ export default {
             openingHoursData,
             selectOptionsData,
             slideshowData,
+            smartSearchData,
             socialNetworksData,
             tableDataSmall,
             tableDataLarge,
@@ -2385,17 +2458,18 @@ export default {
     },
     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
@@ -2414,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
@@ -2485,7 +2563,7 @@ export default {
                 return navigationData
             }, 1000);
         },
-        clickOnListOfLinks(event) {
+        f(event) {
             event.originalEvent.preventDefault()
             console.log(event)
         },

package/src/assets/data/listOfComponents.json

@@ -10,6 +10,7 @@
   "CookieDisclaimer",
   "Forms",
   "Fancybox",
+  "FlexibleScrollContainer",
   "GoogleMaps",
   "Headlines",
   "Icons",

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/componentSettingsDataAndControls.vue

@@ -457,7 +457,7 @@ data() {
                 headlineText: "Send Login",
                 headlineLevel: 4
             },
-            orientation: "horizontal",
+            orientation: "horizontal"
         },
         cmdLoginFormSettingsControls: {
             orientation: [

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

@@ -179,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 -->
 
@@ -700,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"]
@@ -789,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] = []
                 }
@@ -1036,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/CmdInnerLink.vue

@@ -1,7 +1,9 @@
 <template>
-    <span v-if="icon.iconClass && icon.position === 'left' || icon.position === 'top' || !icon.position" :class="icon.iconClass" :title="icon.tooltip"></span>
+    <img v-if="image?.src && (image?.position === 'left' || image?.position === 'top' || !image?.position)" :src="image?.src" :alt="image?.alt" />
+    <span v-if="icon?.iconClass && (icon?.position === 'left' || icon?.position === 'top' || !icon?.position)" :class="icon?.iconClass" :title="icon?.tooltip"></span>
     <span v-if="text">{{ text }}</span>
-    <span v-if="icon.iconClass && icon.position === 'right' || icon.position === 'bottom'" :class="icon.iconClass" :title="icon.tooltip"></span>
+    <span v-if="icon?.iconClass && (icon?.position === 'right' || icon?.position === 'bottom')" :class="icon?.iconClass" :title="icon?.tooltip"></span>
+    <img v-if="image?.src && (image?.position === 'right' || image?.position === 'bottom' || !image?.position)" :src="imag?.src" :alt="image?.alt" />
     <!-- begin default-slot -->
     <slot></slot>
     <!-- end default-slot -->
@@ -12,18 +14,25 @@ export default {
     name: "CmdInnerLink",
     props: {
         /**
-         * icon to display
+         * displayed icon
          */
         icon: {
             type: Object,
-            default: {}
+            required: false
         },
         /**
          * displayed text
          */
         text: {
             type: String,
-            default: ""
+            required: false
+        },
+        /**
+         * displayed image
+         */
+        image: {
+            type: Object,
+            required: false
         }
     }
 }

package/src/components/CmdLink.vue

@@ -1,20 +1,26 @@
 <template>
     <!-- begin CmdLink -->
     <!-- begin href -->
-    <a v-if="linkType === 'href'" :href="path" :target="target" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton, 'box': styleAsBox, 'fancybox': fancybox}]" @click="emitClick($event, 'href')" :title="icon?.tooltip">
+    <a v-if="linkType === 'href'"
+       :href="path"
+       :target="target"
+       :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton, 'box': styleAsBox, 'fancybox': fancybox}]"
+       @click.prevent="emitClick($event, 'href')"
+       :title="icon?.tooltip"
+    >
         <CmdInnerLink :text="text" :icon="icon">
             <slot></slot>
         </CmdInnerLink>
     </a>
     <!-- end href -->
 
-    <!-- begin router -->
+    <!-- begin router-link -->
     <router-link v-else-if="linkType === 'router'" :to="path" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton, 'box': styleAsBox, 'fancybox': fancybox}]" @click="emitClick($event, 'router')" :title="icon?.tooltip">
         <CmdInnerLink :text="text" :icon="icon">
             <slot></slot>
         </CmdInnerLink>
     </router-link>
-    <!-- end router -->
+    <!-- end router-link -->
 
     <!-- begin button -->
     <button v-else-if="linkType === 'button'" :class="['cmd-link button', {'primary': primaryButton, 'box': styleAsBox, 'fancybox': fancybox}]" type="submit" @click="emitClick($event, 'button')" :title="icon?.tooltip">
@@ -112,7 +118,7 @@ export default {
     },
     methods: {
         emitClick(event, linkType) {
-            this.$emit('click', {originalEvent: event, linkType: linkType})
+            this.$emit("click", {originalEvent: event, linkType: linkType})
         }
     }
 }

package/src/components/CmdListOfLinks.vue

@@ -23,6 +23,7 @@
                 :key="index"
                 :class="{'active': sectionAnchors && activeSection === index}"
                 :link="link"
+                @click="emitClick($event, linkType)"
             />
             <!-- end CmdListOfLinksItem-->
 
@@ -199,6 +200,9 @@ export default {
             }
                 }
             })
+        },
+        emitClick(event, linkType) {
+            this.$emit("click", {originalEvent: event, linkType: linkType})
         }
     }
 }

package/src/components/CmdListOfLinksItem.vue

@@ -14,6 +14,7 @@
             :styleAsButton="link?.styleAsButton"
             :primaryButton="link?.primaryButton"
             :styleAsBox="link?.styleAsBox"
+            @click="emitClick($event, linkType)"
         />
         <!-- end CmdLink -->
 
@@ -78,6 +79,9 @@ export default {
                     props.text = text
                 }
             })
+        },
+        emitClick(event, linkType) {
+            this.$emit("click", {originalEvent: event, linkType: linkType})
         }
     }
 }

package/src/components/CmdSmartSearch.vue

@@ -0,0 +1,135 @@
+<template>
+    <div class="cmd-smart-search">
+        <!--  begin CmdFormElement -->
+        <CmdFormElement
+            element="input"
+            type="search"
+            v-bind="cmdFormElementOptions"
+            v-model="searchTerm"
+            @input="showRecommendations"
+        />
+        <!-- end CmdFormElement -->
+
+        <!-- begin list-of-recommendations -->
+        <ul v-if="showListOfRecommmendations" class="list-of-recommendations no-list-items">
+            <li v-for="(item, index) in listOfRecommendations" :key="index">
+                <!-- begin CmdLink -->
+                <CmdLink v-bind="item" @click="optionSelected" />
+                <!-- end CmdLink -->
+            </li>
+        </ul>
+        <!-- end list-of-recommendations -->
+    </div>
+</template>
+
+<script>
+export default {
+    name: "CmdSmartSearch",
+    data() {
+        return {
+            showListOfRecommmendations: false,
+            searchTerm: ""
+        }
+    },
+    props: {
+        /**
+         * set default v-model (must be named modelValue in Vue3)
+         */
+        modelValue: {
+            type: [String, Number],
+            default: ""
+        },
+        /**
+         * provide list for recommendations shown below search-field
+         */
+        listOfRecommendations: {
+            type: Array,
+            required: true
+        },
+        /**
+         * define search-field
+         */
+        cmdFormElement: {
+            type: Object,
+            required: false
+        }
+    },
+    computed: {
+        cmdFormElementOptions() {
+            return {
+                labelText: "Search",
+                placeholder: "Enter Keyword(s)",
+                showSearchButton: false,
+                ...this.cmdFormElement
+            }
+        }
+    },
+    methods: {
+        showRecommendations() {
+            this.showListOfRecommmendations = true
+        },
+        optionSelected(event) {
+            event.originalEvent.preventDefault()
+            this.showListOfRecommmendations = false
+            console.log("event", event)
+            this.searchTerm = event.target.value // set search-field to selected option
+            this.$emit("update:modelValue", this.searchTerm)
+        }
+    },
+    watch: {
+        searchTerm() {
+            if(this.searchTerm.length) {
+                this.showRecommendations()
+            } else {
+                this.showListOfRecommmendations = false
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.cmd-smart-search {
+    .list-of-recommendations {
+        display: flex;
+        flex-direction: column;
+        border: var(--default-border);
+        border-top: 0;
+        background: var(--default-background);
+        border-bottom-left-radius: var(--default-border-radius);
+        border-bottom-right-radius: var(--default-border-radius);
+
+        li {
+            &:not(:last-child) {
+                border-bottom: var(--default-border);
+            }
+
+            &:last-child {
+                border-bottom-left-radius: inherit;
+                border-bottom-right-radius: inherit;
+
+                a {
+                    border-bottom-left-radius: inherit;
+                    border-bottom-right-radius: inherit;
+                }
+            }
+
+            a {
+                display: flex;
+                align-items: center;
+                padding: var(--default-padding);
+                text-decoration: none;
+                width: 100%;
+
+                &:hover, &:active, &:focus {
+                    background: var(--hyperlink-color);
+
+                    span, span[class*="icon"] {
+                        color: var(--pure-white);
+                    }
+                }
+            }
+        }
+    }
+}
+</style>