comand-component-library 3.1.44 → 3.1.47

package/src/components/CmdFormFilters.vue

@@ -7,9 +7,9 @@
             </a>
         </li>
         <li v-for="(option, index) in options" :key="index">
-            <a href="#" @click.prevent="deleteClickedFilter(index)">
-                <span :class="deleteFilter.iconClass"></span>
+            <a href="#" @click.prevent="deleteClickedFilter(index)" :title="deleteFilter.icon.tooltip">
                 <span>{{ selectedOptionsName(option) }}</span>
+                <span :class="deleteFilter.icon.iconClass"></span>
             </a>
         </li>
     </ul>
@@ -27,12 +27,14 @@ export default {
         /**
          * list of all selected options
          */
-        selectedOptions: {
+        modelValue: {
             type: Array,
             required: true
         },
         /**
          * delete-all-filters-link
+         *
+         * @requiredForAccessibility: partial
          */
         linkDeleteAllFilters: {
             type: Object,
@@ -41,21 +43,23 @@ export default {
                     text: "Delete all filters",
                     icon: {
                         show: true,
-                        iconClass: "icon-cancel",
+                        iconClass: "icon-error-circle",
                         tooltip: ""
                     }
                 }
             }
         },
         /**
-         * icon for delete (a single) filter)
+         * icon for deleting (a single) filter
+         *
+         * @requiredForAccessibility: partial
          */
         deleteFilter: {
             type: Object,
             default() {
                 return {
                     icon: {
-                        iconClass: "icon-cancel",
+                        iconClass: "icon-error-circle",
                         tooltip: "Delete this filter"
                     }
                 }
@@ -79,13 +83,13 @@ export default {
             this.updateSelectedOptions()
         },
         updateSelectedOptions() {
-            this.$emit("update:selectedOptions", this.options)
+            this.$emit("update:modelValue", this.options)
         }
     },
     watch: {
-        selectedOptions: {
+        modelValue: {
             handler() {
-                this.options = JSON.parse(JSON.stringify(this.selectedOptions))
+                this.options = JSON.parse(JSON.stringify(this.modelValue))
             },
             immediate: true,
             deep: true
@@ -101,13 +105,23 @@ export default {
 
     li {
         list-style-type: none;
-        padding: 0 .5rem;
         margin-left: 0;
         margin-right: var(--default-margin);
-        border: .1rem dotted var(--text-color);
+        border: var(--default-border);
         background: var(--pure-white);
         font-size: 1.1rem;
 
+        &:hover, &:active, &:focus {
+            border-color: var(--primary-color);
+        }
+
+        a {
+            padding: 0 calc(var(--default-padding) / 2);
+            display: flex;
+            align-items: center;
+            text-decoration: none;
+        }
+
         &:last-of-type {
             margin-right: 0;
         }

package/src/components/CmdGoogleMaps.vue

@@ -9,16 +9,22 @@ export default {
     name: "CmdGoogleMaps",
     props: {
         /**
-         * address to show show on Google Maps™
+         * address to show on Google Maps™
          */
-        addressData: {
+        address: {
             type: Object,
             required: true
         }
     },
     computed: {
         locateAddress() {
-            return "https://maps.google.de/maps?hl=de&q=" + this.addressData.address.streetNo + ",+" + this.addressData.address.zip + "+" + this.addressData.address.city + "&ie=UTF8&t=&z=17&iwloc=B&output=embed"
+            if(this.address) {
+                const url = new URL("https://maps.google.de/maps?ie=UTF8&t=&z=17&iwloc=B&output=embed")
+                url.searchParams.set("hl", "de")
+                url.searchParams.set("q", [this.address.streetNo, this.address.zip, this.address.city, this.address.latitude, this.address.longitude, this.location].join(" ").trim())
+                return url.href
+            }
+            return "https://maps.google.de/maps?ie=UTF8&t=&z=17&iwloc=B&output=embed"
         }
     }
 }

package/src/components/CmdImageGallery.vue

@@ -1,10 +1,14 @@
 <template>
     <div class="grid-container-create-columns cmd-image-gallery">
-        <a href="#" v-for="(image, index) in images" :key="index" @click.prevent="showFancyBox(index)"
-           title="Open large image">
+        <a v-for="(image, index) in images"
+           :key="index"
+           @click.prevent="showFancyBox(index)"
+           href="#"
+           :title="getMessage('cmdsitesearch.labeltext.open_large_image')">
             <figure>
-                <img :src="image.srcImageSmall" :alt="image.alt">
-                <figcaption v-if="image.figcaption">{{ image.figcaption }}</figcaption>
+                <figcaption v-if="image.figcaption && figcaptionPosition === 'top'">{{ image.figcaption }}</figcaption>
+                <img :src="image.srcImageSmall" :alt="image.alt" />
+                <figcaption v-if="image.figcaption && figcaptionPosition === 'bottom'">{{ image.figcaption }}</figcaption>
             </figure>
         </a>
     </div>
@@ -13,13 +17,32 @@
 <script>
 import {openFancyBox} from "./CmdFancyBox"
 
+// import mixins
+import I18n from "../mixins/I18n"
+import DefaultMessageProperties from "../mixins/CmdSiteSearch/DefaultMessageProperties"
+
 export default {
     name: "CmdImageGallery",
+    mixins: [I18n, DefaultMessageProperties],
     props: {
         /**
          * list of images (incl. captions)
+         *
+         * @requiredForAccessibility: partial
+         */
+        images: {
+            type: Array,
+            required: true
+        },
+        /**
+         * position of figcaption
+         *
+         * @allowedValues: top, bottom
          */
-        images: Array
+        figcaptionPosition: {
+            type: String,
+            default: "bottom"
+        }
     },
     methods: {
         showFancyBox(index) {

package/src/components/CmdImageZoom.vue

@@ -1,15 +1,23 @@
 <template>
     <div class="grid-container-create-columns cmd-imagezoom">
         <div class="grid-small-item">
+            <!-- begin small image -->
             <a href="#" class="thumbnails-imagezoom">
-                <img :src="smallImageUrl" alt="Small Image" @mouseover="onMouseOver" @mousemove="onMouseMove"
+                <img :src="smallImageUrl"
+                     alt="Small Image"
+                     @mouseover="onMouseOver"
+                     @mousemove="onMouseMove"
                      @mouseout="onMouseOut"/>
             </a>
+            <!-- end small image -->
         </div>
+
+        <!-- begin large image -->
         <div v-if="showLargeImage" class="zoom-container grid-large-item">
             <img :src="largeImageUrl" alt="Large Image"/>
         </div>
         <div v-if="showLargeImage" class="zoom-overlay"></div>
+        <!-- end large image -->
     </div>
 </template>
 

package/src/components/CmdListOfLinks.vue

@@ -0,0 +1,169 @@
+<template>
+    <div :class="['cmd-list-of-links', 'align-' + align, {box: styleAsBox, horizontal: orientation === 'horizontal', 'section-anchors': sectionAnchors}]">
+        <!-- begin CmdCustomHeadline -->
+        <CmdCustomHeadline v-if="cmdCustomHeadline"
+                           v-bind="cmdCustomHeadline" />
+        <!-- end CmdCustomHeadline -->
+
+        <!-- begin list of links -->
+        <ul :class="['flex-container', {'no-gap': !useGap}]">
+            <li v-for="(link, index) in links" :key="index" :class="{'active': sectionAnchors && activeSection === index}">
+                <!-- begin use href -->
+                <a v-if="link.type === 'href' || link.type === undefined"
+                   :href="link.path"
+                   :target="link.target"
+                   @click="executeLink(link, $event)"
+                   :title="link.tooltip && link.tooltip !== undefined ? link.tooltip : undefined">
+                    <span v-if="link.iconClass" :class="link.iconClass"></span>
+                    <span v-if="link.text">{{ link.text }}</span>
+                </a>
+                <!-- end use href --->
+
+                <!-- begin use router-link -->
+                <router-link v-else-if="link.type === 'router'"
+                             :to="getRoute(link)"
+                             :title="link.tooltip">
+                    <span v-if="link.iconClass" :class="link.iconClass"></span>
+                    <span v-if="link.text">{{ link.text }}</span>
+                </router-link>
+                <!-- end use router-link -->
+            </li>
+        </ul>
+        <!-- end list of links -->
+    </div>
+</template>
+
+<script>
+// import functions
+import {getRoute} from "../utilities.js"
+import {openFancyBox} from "./CmdFancyBox.vue"
+
+// import components
+import CmdCustomHeadline from "./CmdCustomHeadline"
+
+export default {
+    name: "CmdListOfLinks",
+    components: {
+        CmdCustomHeadline
+    },
+    props: {
+        /**
+         * activate if component should contain a list of anchors for the section within th page
+         */
+        sectionAnchors: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * given active section from outside to set class for styling
+         *
+         * sectionAnchors-property must be activated
+         */
+        activeSection: {
+            type: Number,
+            default: 0
+        },
+        /**
+         * set horizontal alignment
+         *
+         * orientation-property must be set to 'horizontal'
+         *
+         * @allowedValues: left, center, right
+         */
+        align: {
+            type: String,
+            default: "left"
+        },
+        /**
+         * properties for cmdCustomHeadline-component
+         */
+        cmdCustomHeadline: {
+            type: Object,
+            required: false
+        },
+        /**
+         * list of displayed links
+         */
+        links: {
+            type: Array,
+            required: false
+        },
+        /**
+         * toggle orientation of list
+         *
+         * @allowedValues: horizontal, vertical
+         */
+        orientation: {
+            type: String,
+            default: "vertical"
+        },
+        /**
+         * toggle gab between links
+         */
+        useGap: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * style component like a box
+         *
+         * @affectsStyling: true
+         */
+        styleAsBox: {
+            type: Boolean,
+            default: false
+        }
+    },
+    methods: {
+        getRoute(link) {
+            return getRoute(link)
+        },
+        executeLink(link, event) {
+            if (link.fancybox) {
+                event.preventDefault()
+                openFancyBox({url: link.path})
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+/* begin cmd-list-of-links ---------------------------------------------------------------------------------------- */
+.cmd-list-of-links {
+    display: flex;
+    flex-direction: column;
+
+    ul {
+        flex-direction: column;
+        gap: calc(var(--default-gap) / 2);
+
+        li {
+            list-style: none;
+            margin-left: 0;
+        }
+    }
+
+    &.horizontal {
+        ul {
+            flex-direction: row;
+            gap: var(--default-gap);
+
+            > li {
+                flex: none;
+                display: flex;
+                align-items: center;
+            }
+        }
+
+        &.align-center {
+            align-items: center;
+        }
+
+        &.align-right {
+            align-items: flex-end;
+        }
+    }
+}
+/* end cmd-list-of-links------------------------------------------------------------------------------------------ */
+</style>