comand-component-library 3.3.84 → 3.3.86

package/src/components/CmdAddressDataItem.vue

@@ -0,0 +1,306 @@
+<template>
+    <dt :class="['cmd-address-data-item', {'address': addressEntry.type === 'address'}]">
+        <!-- begin CmdIcon -->
+        <CmdIcon
+                v-if="addressEntry.iconClass && showLabelIcons"
+                :iconClass="addressEntry.iconClass"
+                :type="addressEntry.iconType"
+                :tooltip="addressEntry.labelText"
+        />
+        <!-- end CmdIcon -->
+        <span v-if="showLabelTexts">{{ addressEntry.labelText }}</span>
+    </dt>
+    <!-- end labels -->
+
+    <!-- begin data (except for address) -->
+    <dd v-if="addressEntry.type !== 'address' && (addressEntry.data || addressEntry.href)" :class="vCardClass(addressEntry)">
+        <template v-if="!editing">
+            <a v-if="addressEntry.href"
+               :href="getHref(addressEntry)"
+               :target="addressEntry.type === 'url' ? '_blank' : null"
+               :title="addressEntry.tooltip"
+               :data-type="addressEntry.type"
+               v-telephone="addressEntry.href">
+                {{ addressEntry.data || addressEntry.href }}
+            </a>
+            <span v-else v-html="addressEntry.data"></span>
+        </template>
+
+        <!-- begin edit-mode -->
+        <CmdFormElement
+                v-else
+                element="input"
+                :type="inputType(addressEntry)"
+                class="edit-mode"
+                :show-label="false"
+                :labelText="addressEntry.labelText"
+                :placeholder="addressEntry.labelText"
+                v-model="editableAddressEntry"
+        />
+        <!-- end edit-mode -->
+    </dd>
+
+    <!-- begin data for address -->
+    <dd v-else-if="addressEntry.type === 'address'">
+        <!-- begin linked address -->
+        <a v-if="linkGoogleMaps && !editing"
+           :href="locateAddress(addressEntry)"
+           target="google-maps"
+           :title="addressEntry.tooltip">
+            <!-- begin street/number -->
+            <template v-if="addressEntry.streetNo">
+                <span class="street-address">{{ addressEntry.streetNo }}</span><br/>
+            </template>
+            <!-- end street/number -->
+
+            <!-- begin zip/city -->
+            <span v-if="addressEntry.zip" class="postal-code">{{ addressEntry.zip }}</span>
+            <template v-if="addressEntry.city">
+                <span class="locality">{{ addressEntry.city }}</span><br/>
+            </template>
+            <!-- end zip/city -->
+
+            <!-- begin miscInfo -->
+            <template v-if="addressEntry.miscInfo">
+                <span>{{ addressEntry.miscInfo }}</span><br v-if="addressEntry.country" />
+            </template>
+            <!-- end miscInfo -->
+
+            <!-- begin country -->
+            <span v-if="addressEntry.country" class="country-name">{{ addressEntry.country }}</span>
+            <!-- end country -->
+        </a>
+        <!-- end linked address -->
+
+        <!-- begin unlinked address -->
+        <template v-else>
+            <template v-if="!editing">
+                <!-- begin street/number -->
+                <template v-if="addressEntry.streetNo">
+                    <span class="street-address">{{ addressEntry.streetNo }}</span><br/>
+                </template>
+                <!-- end street/number -->
+
+                <!-- begin zip/city -->
+                <span v-if="addressEntry.zip" class="postal-code">{{ addressEntry.zip }}&nbsp;</span>
+                <template v-if="addressEntry.city">
+                    <span class="locality">{{ addressEntry.city }}</span><br/>
+                </template>
+                <!-- end zip/city -->
+
+                <!-- begin miscInfo -->
+                <template v-if="addressEntry.miscInfo">
+                    <span>{{ addressEntry.miscInfo }}</span><br/>
+                </template>
+                <!-- end miscInfo -->
+
+                <!-- begin country -->
+                <span v-if="addressEntry.country" class="country-name">{{ addressEntry.country }}</span>
+                <!-- end country -->
+            </template>
+
+            <!-- begin edit-mode for address -->
+            <template v-else>
+                <!-- begin street/number -->
+                <CmdFormElement
+                        element="input"
+                        type="text"
+                        class="edit-mode"
+                        :show-label="false"
+                        :labelText="addressEntry.labelText"
+                        :placeholder="addressEntry.labelText"
+                        v-model="editableAddressEntry.streetNo"
+                />
+                <!-- end street/number -->
+
+                <!-- begin zip/city -->
+                <div class="input-wrapper">
+                    <CmdFormElement
+                            element="input"
+                            type="text"
+                            class="edit-mode"
+                            :show-label="false"
+                            :labelText="addressEntry.labelText"
+                            :placeholder="addressEntry.labelText"
+                            v-model="editableAddressEntry.zip"
+                    />
+                    <CmdFormElement
+                            element="input"
+                            type="text"
+                            class="edit-mode"
+                            :show-label="false"
+                            :labelText="addressEntry.labelText"
+                            :placeholder="addressEntry.labelText"
+                            v-model="editableAddressEntry.city"
+                    />
+                </div>
+                <!-- end zip/city -->
+
+                <!-- begin miscInfo -->
+                <CmdFormElement
+                        element="input"
+                        type="text"
+                        class="edit-mode"
+                        :show-label="false"
+                        :labelText="addressEntry.labelText"
+                        :placeholder="addressEntry.labelText"
+                        v-model="editableAddressEntry.miscInfo"
+                />
+                <!-- end miscInfo -->
+
+                <!-- begin country -->
+                <CmdFormElement
+                        element="select"
+                        class="edit-mode"
+                        :show-label="false"
+                        :labelText="addressEntry.labelText"
+                        :selectOptions="[{text: 'Germany', value: 'de'}, {text: 'United Kingdom', value: 'uk'}]"
+                        v-model="editableAddressEntry.country"
+                />
+                <!-- end country -->
+            </template>
+            <!-- end edit-mode for address -->
+        </template>
+        <!-- end unlinked address -->
+    </dd>
+    <!-- end data for address -->
+
+</template>
+<!-- end data (except for address) -->
+<script>
+import EditMode from "../mixins/EditMode.vue"
+import {updateHandlerProvider} from "../utils/editmode.js";
+
+export default {
+    name: "CmdAddressDataItem",
+    mixins: [EditMode],
+    data() {
+        return {
+            editableAddressEntry: null
+        }
+    },
+    props: {
+        addressEntry: {
+            type: Object,
+            default: {}
+        },
+        /**
+         * show an icon (if exists) in front of label-text
+         */
+        showLabelIcons: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * show a label-text for each entry
+         */
+        showLabelTexts: {
+            type: Boolean,
+            default: false
+        },
+        linkGoogleMaps: {
+            type: Boolean,
+            default: false
+        }
+    },
+    methods: {
+        vCardClass(entry) {
+            if (entry.type === 'company') {
+                return "org"
+            }
+            if (entry.type === "address") {
+                if (entry.streetNo) {
+                    return "street-address"
+                }
+                if (entry.zip) {
+                    return "postal-code"
+                }
+                if (entry.city) {
+                    return "locality"
+                }
+                if (entry.country) {
+                    return "country-name"
+                }
+            }
+            return null
+        },
+        inputType(entry) {
+            if (entry.type === "phone") {
+                return "tel"
+            } else if (entry.type === "email") {
+                return "email"
+            } else if (entry.type === "url") {
+                return "url"
+            }
+            return "text"
+        },
+        locateAddress(entry) {
+            return "https://www.google.com/maps/place/" + entry.streetNo + ", " + entry.zip + " " + entry.city
+        },
+        getHref(entry) {
+            if (entry.type === "phone") {
+                return "tel:" + entry.href
+            }
+            if (entry.type === "email") {
+                return "mailto:" + entry.href
+            }
+            if (entry.type === "url") {
+                return entry.href
+            }
+            return null
+        },
+        addHandlerProvider() {
+            const itemStructure = {
+                "type": "default",
+                "iconClass": "icon-mail",
+                "data": "Your data",
+                "labelText": "Labeltext",
+                "tooltip": "Tooltip",
+                "href": "#"
+            }
+            return updateHandlerProvider(this, {
+                item() {
+                    return itemStructure
+                }
+            })
+        },
+        updateHandlerProvider() {
+            const addressData = this.editableAddressEntry
+            return updateHandlerProvider(this, {
+                update(props) {
+                    if (typeof addressData === "object") {
+                        Object.entries(addressData).forEach(([name, value]) => props[name] = value)
+                    } else {
+                        if (props.href == null) {
+                            props.data = addressData
+                        } else {
+                            props.href = addressData
+                        }
+                    }
+                }
+            })
+        }
+    },
+    watch: {
+        addressEntry: {
+            handler() {
+                // check if entry 'address' to create object
+                if (this.addressEntry.type === "address") {
+                    this.editableAddressEntry = {
+                        streetNo: this.addressEntry.streetNo,
+                        zip: this.addressEntry.zip,
+                        city: this.addressEntry.city,
+                        miscInfo: this.addressEntry.miscInfo,
+                        country: this.addressEntry.country
+                    }
+                    // for each other entry assign data or href
+                } else {
+                    this.editableAddressEntry = (this.addressEntry.href == null ? this.addressEntry.data : this.addressEntry.href) || ""
+                }
+            },
+            immediate: true,
+            deep: true
+        }
+    }
+}
+</script>

package/src/components/CmdBox.vue

@@ -445,6 +445,7 @@ export default {
         a.box-header {
             justify-content: space-between;
             background: var(--primary-color);
+            border: var(--primary-border);
 
             &:hover, &:active, &:focus {
                 background: var(--pure-white);

package/src/components/CmdBoxWrapper.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="cmd-box-wrapper">
-        <div class="flex-container headline-wrapper">
+        <div v-if="cmdHeadline.headlineText || allowUserToToggleOrientation || allowTogglingCollapsingBoxes"
+             class="flex-container headline-wrapper">
             <!-- begin CmdHeadline -->
             <CmdHeadline v-if="cmdHeadline.headlineText" v-bind="cmdHeadline" />
             <!-- end CmdHeadline -->
@@ -18,11 +19,18 @@
                 </a>
             </div>
         </div>
-        <div :class="[useFlexbox ? 'flex-container' : 'grid-container-create-columns', {'row-view': rowView, 'stretch-boxes-vertically': stretchBoxesVertically}]">
+        <div :class="[
+            useFlexbox ? 'flex-container' : 'grid-container-create-columns',
+            {
+                'no-gap': !useGap,
+                'row-view': rowView,
+                'stretch-boxes-vertically': stretchBoxesVertically
+            }
+            ]">
             <slot
                 :collapsingBoxesOpen="collapsingBoxesOpen"
                 :boxToggled="boxToggled"
-                :currentOpenBox="currentOpenBox"
+                :boxIsOpen="boxIsOpen"
                 :rowView="rowView"
                 @toggleCollapse="boxIsToggled"
             >
@@ -38,10 +46,26 @@ export default {
         return {
             rowView: this.useRowViewAsDefault,
             collapsingBoxesOpen: true,
-            currentOpenBox: 0
+            currentOpenBox: []
         }
     },
     props: {
+        /**
+         * give list of box-indices that should be open by default
+         *
+         * allowMultipleExpandedBoxes-property must be activated if more than one box should be open by default
+         */
+        openBoxesByDefault: {
+            type: Array,
+            required: false
+        },
+        /**
+         * activate if a gap between boxes should be used
+         */
+        useGap: {
+            type: Boolean,
+            default: false
+        },
         /**
          * activate if boxes should be arranged vertically (each box is a row) by default
          */
@@ -174,6 +198,9 @@ export default {
         }
     },
     methods: {
+        boxIsOpen(index) {
+            return this.currentOpenBox.includes(index)
+        },
         boxIsToggled(event) {
           alert(event)
         },
@@ -201,10 +228,31 @@ export default {
             this.collapsingBoxesOpen = !this.collapsingBoxesOpen
         },
         boxToggled(boxIndex, open) {
-            this.currentOpenBox = open ? boxIndex : 0
+            if(this.allowMultipleExpandedBoxes) {
+                if(open) {
+                    this.currentOpenBox.push(boxIndex)
+                } else {
+                    // remove boxIndex from array to close specific box
+                    let position = this.currentOpenBox.indexOf(boxIndex)
+                    this.currentOpenBox.splice(position, 1)
+                }
+            } else {
+                this.currentOpenBox  = []
+
+                // add current boxIndex to array to open specific box
+                if(open) {
+                    this.currentOpenBox.push(boxIndex)
+                }
+            }
         }
     },
     watch: {
+        openBoxesByDefault: {
+            handler() {
+                this.currentOpenBox = [...this.openBoxesByDefault || []]
+            },
+            immediate: true
+        },
         useRowViewAsDefault: {
             handler() {
                 this.oneBoxPerRow = this.useRowViewAsDefault

package/src/components/CmdFancyBox.vue

@@ -75,7 +75,6 @@
                 <div v-else-if="fancyBoxContent" class="content" v-html="fancyBoxContent"></div>
                 <div v-else-if="fancyBoxElements" class="content"></div>
                 <div v-else-if="fancyBoxGallery" class="content">
-
                     <!-- begin CmdSlideButton -->
                     <CmdSlideButton @click.prevent="showPrevItem" slideButtonType="prev"/>
                     <!-- end CmdSlideButton -->
@@ -174,11 +173,11 @@ const FancyBox = defineComponent({
     },
     props: {
         /**
-         * sets aria-label-text on component
+         * sets default aria-label-text on component
          *
          * @requiredForAccessibility: true
          */
-        ariaLabelText: {
+        defaultAriaLabelText: {
             type: String,
             required: true
         },
@@ -201,7 +200,7 @@ const FancyBox = defineComponent({
          */
         showSubmitButtons: {
             type: Boolean,
-            default: true
+            default: false
         },
         /**
          * options to show at top (closeIcon, printButtons)
@@ -348,6 +347,13 @@ const FancyBox = defineComponent({
               fancyBoxItem.src = this.fancyBoxImageUrl
           }
           return fancyBoxItem
+      },
+      ariaLabelText() {
+          if(this.fancyBoxGallery?.length) {
+              return this.fancyBoxGallery[this.index].figcaption.text
+          } else {
+              return this.defaultAriaLabelText
+          }
       }
     },
     methods: {
@@ -513,6 +519,7 @@ export default FancyBox
 
         img {
             display: block;
+            margin: 0 auto;
         }
 
         figcaption {
@@ -520,6 +527,26 @@ export default FancyBox
         }
     }
 
+    .inner-thumbnail-wrapper li {
+        figure {
+            opacity: 0.8;
+        }
+
+        &.active {
+            figure {
+                opacity: 1;
+            }
+
+            img {
+                border-color: var(--hyperlink-color-highlighted);
+            }
+
+            a {
+                color: var(--hyperlink-color-highlighted);
+            }
+        }
+    }
+
     > header {
         justify-content: space-between;
 

package/src/components/CmdForm.vue

@@ -4,8 +4,37 @@
             <fieldset class="flex-container">
                 <legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
                 <!-- begin default-slot-content -->
-                <slot></slot>
+                <slot v-if="useSlot"></slot>
                 <!-- end default-slot-content -->
+
+                <!-- begin loop for formElements -->
+                <CmdFormElement
+                    v-else
+                    v-for="(item, index) in formElements"
+                    :key="index"
+                    :element="item.element || 'input'"
+                    :type="item.type || 'text'"
+                    :name="item.name"
+                    :class="item.htmlClass"
+                    :id="item.id || createHtmlId()"
+                    v-model="formValues[item.name]"
+                    :inputValue="item.inputValue"
+                    :fieldIconClass="item.innerIconClass"
+                    :selectOptions="item.selectOptions"
+                    :labelText="item.labelText"
+                    :placeholder="item.placeholder"
+                    :required="item.required"
+                    :disabled="item.disabled"
+                    :autocomplete="item.autocomplete"
+                    :minlength="item.minlength"
+                    :maxlength="item.maxlength"
+                    :nativeButton="item.nativeButton"
+                />
+                <!-- end loop for formElements -->
+                <button v-if="submitButton" class="button" type="submit">
+                    <span v-if="submitButton.iconClass" :class="submitButton.iconClass"></span>
+                    <span v-if="submitButton.text">{{ submitButton.text }}</span>
+                </button>
             </fieldset>
 
             <!-- begin button-row-slot-content -->
@@ -20,15 +49,32 @@
 </template>
 
 <script>
+import {createHtmlId} from "@"
+
 export default {
     name: "CmdForm",
     emits: ["submit"],
     data(){
         return {
-            errorOccurred: false
+            errorOccurred: false,
+            formValues: {}
         }
     },
     props: {
+        /**
+         * activate if form-elements should be given by slot
+         */
+        useSlot: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * define form-elements by given array
+         */
+        formElements: {
+          type: Array,
+          required: false
+        },
         /**
          * deactivate if browser-validation should be used
          */
@@ -73,20 +119,68 @@ export default {
         textLegend: {
             type: String,
             required: false
+        },
+        /**
+         * submitbutton to submit all formdata
+         */
+        submitButton: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-check",
+                    text: "Submit"
+                }
+            }
         }
     },
     methods: {
+        createHtmlId,
+        submitFormData(event) {
+            // fill formdata with names and value
+            let formdata = {}
+            this.formElements.forEach((element) => {
+                formdata[element.name] = this.formValues[element.name]
+            })
+
+            this.$emit("submit", {originalEvent: event, formdata: formdata})
+        },
         onSubmit(event) {
             if(this.useValidation) {
-                event.preventDefault()
                 if(event.target.checkValidity()) {
                     this.errorOccurred = false
-                    this.$emit("submit", event)
+                    this.submitFormData(event)
                 } else {
+                    event.preventDefault()
                     this.errorOccurred = true
                 }
+            } else {
+                this.submitFormData(event)
             }
         }
+    },
+    watch: {
+        formElements: {
+            handler() {
+                this.formValues = {}
+
+                this.formElements?.forEach(element => {
+                    if(element.type === "checkbox") {
+                        // create array if element is a checkbox (to contain several values)
+                        if(!this.formValues[element.name]) {
+                            this.formValues[element.name] = []
+                        }
+
+                        if(element.value != null) {
+                            this.formValues[element.name].push(element.value)
+                        }
+                    } else {
+                        this.formValues[element.name] = element.value ?? ""
+                    }
+                })
+            },
+            immediate: true,
+            deep: true
+        }
     }
 }
 </script>

package/src/components/CmdFormElement.vue

@@ -216,7 +216,7 @@
     <!-- end searchfield -->
 
     <!-- begin button -->
-    <button v-else class="button" v-bind="buttonAttrs">
+    <button v-else-if="element === 'button'" class="button" v-bind="buttonAttrs" @click="submit">
         <!-- begin CmdIcon -->
         <CmdIcon
             v-if="nativeButton?.icon?.show && (nativeButton?.icon?.position === 'before' || !nativeButton?.icon?.position)"
@@ -825,6 +825,10 @@ export default {
             if(this.$refs.tooltip) {
                 this.$refs.tooltip.hideTooltip()
             }
+        },
+        // (submit-)button is clicked
+        submit(event) {
+            this.$emit("submit", event)
         }
     },
     watch: {