comand-component-library 3.3.83 → 3.3.85

package/src/components/CmdImageGallery.vue

@@ -2,9 +2,8 @@
     <div class="grid-container-create-columns cmd-image-gallery">
         <!-- begin cmd-headline -->
         <CmdHeadline
-                v-if="cmdHeadline"
-                :headlineText="cmdHeadline.headlineText"
-                :headlineLevel="cmdHeadline.headlineLevel"
+            v-if="cmdHeadline?.headlineText || editModeContext"
+            v-bind="cmdHeadline"
         />
         <!-- end cmd-headline -->
 
@@ -21,49 +20,45 @@
             <!-- end images linked to fancybox -->
 
             <!-- begin images not linked to fancybox -->
-            <CmdImage v-else :image="image.image" :figcaption="image.figcaption"/>
+            <div v-else v-for="(image, index) in images" :key="`i${index}`" class="image-wrapper">
+                <CmdImage :image="image.image" :figcaption="image.figcaption"/>
+            </div>
             <!-- end images not linked to fancybox -->
         </template>
         <!-- end default view -->
 
         <!-- begin edit-mode view -->
-        <EditComponentWrapper class="image-wrapper" v-else v-for="(image, index) in images" :key="'x' + index" :componentIdentifier="componentIdentifier(index)">
-            <CmdImage
-                    :image="image.image"
-                    :figcaption="image.figcaption"
-                    :editModeContextData="{imageIndex: index}"
-            />
-        </EditComponentWrapper>
+        <CmdImage
+            v-else-if="images.length"
+            v-for="(image, index) in images"
+            :key="index"
+            class="image-wrapper"
+            :image="image.image"
+            :figcaption="image.figcaption"
+            :componentPath="['props', 'images', index]"
+            :editModeConfig="imageStructure()"
+        />
         <!-- end edit-mode view -->
+
+        <!-- begin show placeholder if no image exists (and component is not edited) -->
+        <button v-else type="button" class="button confirm" @click="onAddItem">
+            <span class="icon-plus"></span>
+            <span>Add new gallery-image</span>
+        </button>
+        <!-- end show placeholder if no image exists (and component is not edited) -->
     </div>
 </template>
 
 <script>
 // import functions
 import {openFancyBox} from "./CmdFancyBox.vue"
-import {useEditModeContext} from "../editmode/editModeContext.js"
-
-// import mixins
-//import I18n from "../mixins/I18n"
-//import DefaultMessageProperties from "../mixins/CmdImageGallery/DefaultMessageProperties"
+import EditMode from "../mixins/EditMode.vue"
+import {buildComponentPath, updateHandlerProvider} from "../utils/editmode.js"
 
 export default {
     name: "CmdImageGallery",
-    mixins: [],
-    provide() {
-        return {
-            editModeContext: this.context
-        }
-    },
-    inject: {
-        editModeContext: {
-            default: null
-        }
-    },
+    mixins: [EditMode],
     props: {
-        editModeContextData: {
-            type: Object
-        },
         /**
          * properties for CmdHeadline-component
          */
@@ -97,24 +92,25 @@ export default {
             default: "bottom"
         }
     },
-    data() {
-        return {
-            context: useEditModeContext(this.editModeContext, {}, this.onSave)
-        }
-    },
     methods: {
-        componentIdentifier(index) {
-            const identifier = []
-            identifier.push(this.editModeContext.props.sectionId)
-            identifier.push(this.editModeContextData.componentIndex)
-
-            if(this.editModeContextData.childComponentIndex != null) {
-                identifier.push(this.editModeContextData.childComponentIndex)
+        itemProvider() {
+            return {
+                "image": {
+                    "src": "/media/images/demo-images/medium/landscape-01.jpg",
+                    "alt": "Alternative Text",
+                },
+                "figcaption": {
+                    "text": "Figcaption DE",
+                    "position": "bottom",
+                    "textAlign": "center",
+                    "show": true
+                }
             }
-
-            identifier.push(index)
-
-            return identifier.join(".")
+        },
+        onAddItem() {
+            this.editModeContext.content.addContent(
+                buildComponentPath(this, 'props', 'images', -1),
+                this.itemProvider)
         },
         showFancyBox(index) {
             openFancyBox({fancyBoxGallery: this.images, defaultGalleryIndex: index})
@@ -122,23 +118,28 @@ export default {
         getMessage() {
             return ""
         },
-        onSave(data) {
-            const imageIndex = data[0].editModeContextData.imageIndex
+        imageStructure() {
             return {
-                editModeContextData: {
-                    ...(this.editModeContextData || {})
-                },
-                update(props) {
-                    props.images[imageIndex].image = {
-                        ...props.images[imageIndex].image,
-                        ...data[0].image
+                itemProviderOverwrite: () => ({
+                    "image": {
+                        "srcImageLarge": "/media/images/demo-images/large/landscape-01.jpg",
+                        "tooltip": "Tooltip DE"
                     }
-                    props.images[imageIndex].figcaption = {
-                        ...props.images[imageIndex].figcaption,
-                        ...data[0].figcaption
+                })
+            }
+        },
+        updateHandlerProvider() {
+            const htmlContent = this.editableHtmlContent
+            return updateHandlerProvider(this, {
+                update(props, childUpdateHandlers) {
+                    props.htmlContent = htmlContent
+                    const cmdHeadlineUpdateHandler = childUpdateHandlers?.find(handler => handler.name === "CmdHeadline")
+                    if (cmdHeadlineUpdateHandler) {
+                        props.cmdHeadline = props.cmdHeadline || {}
+                        cmdHeadlineUpdateHandler.update(props.cmdHeadline)
                     }
                 }
-            }
+            })
         }
     }
 }
@@ -147,38 +148,40 @@ export default {
 <style lang="scss">
 /* begin cmd-image-gallery ---------------------------------------------------------------------------------------- */
 .cmd-image-gallery {
-  > .cmd-headline, > input.edit-mode {
-    grid-column: span var(--grid-columns);
-    margin-bottom: 0;
-  }
-
-  > .image-wrapper {
-    align-self: center;
-    justify-self: center;
-    grid-column: span var(--grid-small-span);
-
-    img {
-      border: var(--default-border);
-      border-radius: var(--border-radius);
-      max-height: 30rem;
+    > .cmd-headline, > input.edit-mode, > .edit-component-wrapper {
+        grid-column: span var(--grid-columns);
+        margin-bottom: 0;
     }
 
-    figcaption {
-      padding: calc(var(--default-padding) / 2);
-    }
+    .image-wrapper {
+        align-self: center;
+        justify-self: center;
+        grid-column: span var(--grid-small-span);
+        width: 100%;
+        min-width: 11.1rem; // assure to be as wide as action-buttons in edit-mode
+
+        img {
+            border: var(--default-border);
+            border-radius: var(--border-radius);
+            max-height: 30rem;
+        }
 
-    &:hover, &:active, &:focus {
-      text-decoration: none;
+        figcaption {
+            padding: calc(var(--default-padding) / 2);
+        }
 
-      img {
-        border: var(--primary-border);
-      }
-    }
+        &:hover, &:active, &:focus {
+            text-decoration: none;
 
-    & + .pager {
-      margin-top: calc(var(--default-margin) * 2);
+            img {
+                border: var(--primary-border);
+            }
+        }
+
+        & + .pager {
+            margin-top: calc(var(--default-margin) * 2);
+        }
     }
-  }
 }
 
 /* end cmd-image-gallery ------------------------------------------------------------------------------------------ */

package/src/components/CmdListOfLinks.vue

@@ -1,52 +1,60 @@
 <template>
     <div :class="['cmd-list-of-links', {box: styleAsBox, horizontal: orientation === 'horizontal', 'section-anchors': sectionAnchors, 'large-icons': largeIcons}]">
-        <!-- begin CmdHeadline -->
+        <!-- begin cmd-headline -->
         <CmdHeadline
-            v-if="cmdHeadline"
+            v-if="cmdHeadline?.headlineText || editModeContext"
             v-bind="cmdHeadline"
         />
-        <!-- end CmdHeadline -->
+        <!-- end cmd-headline -->
 
         <!-- begin list of links -->
         <ul :class="['flex-container', {'no-gap': !useGap},'align-' + align, setStretchClass]">
-            <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">
-                    <!-- begin CmdIcon -->
-                    <CmdIcon v-if="link.iconClass" :iconClass="link.iconClass" :type="link.iconType" />
-                    <!-- end CmdIcon -->
-                    <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">
-                    <!-- begin CmdIcon -->
-                    <CmdIcon v-if="link.iconClass" :iconClass="link.iconClass" :type="link.iconType" />
-                    <!-- end CmdIcon -->
-                    <span v-if="link.text">{{ link.text }}</span>
-                </router-link>
-                <!-- end use router-link -->
+            <CmdListOfLinksItem
+                v-if="!editModeContext"
+                v-for="(link, index) in links"
+                :key="index"
+                :class="{'active': sectionAnchors && activeSection === index}"
+                :link="link"
+            />
+
+            <!-- begin edit-mode -->
+            <li v-else>
+                <EditComponentWrapper
+                    v-for="(link, index) in links"
+                    :key="'x' + index"
+                    class="edit-items"
+                    :showComponentName="false"
+                    componentTag="ul"
+                    componentName="CmdLinkItem"
+                    :componentProps="link"
+                    :allowedComponentTypes="[]"
+                    :componentPath="['props', 'links', index]"
+                    :itemProvider="itemProvider"
+                >
+                    <CmdListOfLinksItem
+                        :class="{'active': sectionAnchors && activeSection === index}"
+                        :link="link"
+                    />
+                </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>
+                </button>
             </li>
+            <!-- end edit-mode -->
         </ul>
         <!-- end list of links -->
     </div>
 </template>
 
 <script>
-// import functions
-import {getRoute} from "../utilities.js"
-import {openFancyBox} from "./CmdFancyBox.vue"
+import EditMode from "../mixins/EditMode.vue"
+import {buildComponentPath, updateHandlerProvider} from "../utils/editmode.js"
 
 export default {
     name: "CmdListOfLinks",
     emits: ["click"],
+    mixins: [EditMode],
     props: {
         /**
          * activate if component should contain a list of anchors for the section within the page
@@ -133,16 +141,31 @@ export default {
         }
     },
     methods: {
-        getRoute(link) {
-            return getRoute(link)
+        onAddItem() {
+            this.editModeContext.content.addContent(
+                buildComponentPath(this, 'props', 'links', -1),
+                this.itemProvider)
+        },
+        itemProvider() {
+            return {
+                "iconClass": "icon-user-profile",
+                "type": "href",
+                "text": "Linktext",
+                "path": "#",
+                "tooltip": "Tooltip",
+                "target": "_blank"
+            }
         },
-        executeLink(link, event) {
-            if (link.fancybox) {
-                event.preventDefault()
-                openFancyBox({url: link.path, showSubmitButtons: link.showSubmitButtons})
-                return
+        updateHandlerProvider() {
+            return updateHandlerProvider(this, {
+                update(props, childUpdateHandlers) {
+                    const cmdHeadlineUpdateHandler = childUpdateHandlers?.find(handler => handler.name === "CmdHeadline")
+                    if (cmdHeadlineUpdateHandler) {
+                        props.cmdHeadline = props.cmdHeadline || {}
+                        cmdHeadlineUpdateHandler.update(props.cmdHeadline)
             }
-            this.$emit("click", {link, originalEvent: event})
+                }
+            })
         }
     }
 }
@@ -151,10 +174,7 @@ export default {
 <style lang="scss">
 /* begin cmd-list-of-links ---------------------------------------------------------------------------------------- */
 .cmd-list-of-links {
-    display: flex;
-    flex-direction: column;
-
-    ul {
+    > ul {
         flex-direction: column;
         gap: calc(var(--default-gap) / 2);
         margin: 0;
@@ -166,7 +186,7 @@ export default {
     }
 
     &.horizontal {
-        ul {
+        > ul {
             gap: var(--default-gap);
             flex-direction: row;
 

package/src/components/CmdListOfLinksItem.vue

@@ -0,0 +1,97 @@
+<template>
+    <!-- begin default-view -->
+    <li v-if="!editing" class="cmd-list-of-links-item">
+        <!-- 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">
+            <!-- begin CmdIcon -->
+            <CmdIcon v-if="link.iconClass" :iconClass="link.iconClass" :type="link.iconType" />
+            <!-- end CmdIcon -->
+            <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">
+            <!-- begin CmdIcon -->
+            <CmdIcon v-if="link.iconClass" :iconClass="link.iconClass" :type="link.iconType" />
+            <!-- end CmdIcon -->
+            <span v-if="link.text">{{ link.text }}</span>
+        </router-link>
+        <!-- end use router-link -->
+    </li>
+    <!-- end default-view -->
+
+    <!-- begin edit-mode -->
+    <template v-else>
+        <div class="input-wrapper">
+            <CmdFormElement
+                element="input"
+                type="text"
+                labelText="Linktext"
+                :showLabel="false"
+                placeholder="Linktext"
+                v-model="editableText"
+            />
+        </div>
+    </template>
+    <!-- end edit-mode -->
+</template>
+
+<script>
+import EditMode from "../mixins/EditMode.vue"
+
+// import functions
+//import {getRoute} from 'comand-component-library'
+import {openFancyBox} from "./CmdFancyBox.vue"
+import {buildComponentPath, updateHandlerProvider} from "../utils/editmode.js"
+export default {
+    name: "CmdListOfLinksItem",
+    inheritAttrs: false,
+    mixins: [EditMode],
+    data() {
+        return {
+            editableText: this.link.text
+        }
+    },
+    props: {
+        /**
+         * single link
+         */
+        link: {
+            type: Object,
+            required: false
+        }
+    },
+    methods: {
+        updateHandlerProvider() {
+            const text = this.editableText
+            return updateHandlerProvider(this, {
+                update(props) {
+                    props.text = text
+                }
+            })
+        },
+        getRoute(link) {
+            return getRoute(link)
+        },
+        executeLink(link, event) {
+            if (link.fancybox) {
+                event.preventDefault()
+                openFancyBox({url: link.path, showSubmitButtons: link.showSubmitButtons})
+                return
+            }
+            this.$emit("click", {link, originalEvent: event})
+        },
+    }
+}
+</script>
+
+<style lang="scss">
+
+</style>

package/src/components/CmdLoginForm.vue

@@ -404,9 +404,10 @@ export default {
             if (event == null) {
                 return
             }
-            if(fieldType === "username") {
+
+            if (fieldType === "username") {
                 this.usernameValidationStatus = event === "success";
-            } else if(fieldType === "password") {
+            } else if (fieldType === "password") {
                 this.passwordValidationStatus = event === "success";
             } else {
                 this.emailValidationStatus = event === "success";
@@ -435,10 +436,6 @@ export default {
             align-items: center;
             text-decoration: none;
             flex: none;
-
-            [class*="icon-"] {
-                text-decoration: none;
-            }
         }
 
         > .button {

package/src/components/CmdMultistepFormProgressBar.vue

@@ -124,8 +124,8 @@ export default {
             width: 100%;
             background: var(--primary-color-reduced-opacity);
 
-            span, [class*="icon-"] {
-                color: var(--default-background-color-reduced-opacity);
+            :is(span, [class*="icon-"]) {
+                color: var(--pure-white);
 
                 & + [class*="icon-"] {
                     &:last-child {
@@ -147,11 +147,17 @@ export default {
                         }
                     }
                 }
+            }
 
-                &:hover, &:active, &:focus {
-                    span, [class*="icon-"] {
-                        color: var(--pure-white);
-                    }
+            &:hover, &:active, &:focus {
+                background: var(--primary-color);
+
+                :is(span, [class*="icon-"]) {
+                    color: var(--pure-white);
+                }
+
+                .number {
+                    color: var(--primary-color);
                 }
             }
 
@@ -165,7 +171,9 @@ export default {
                 justify-content: center;
                 border-radius: var(--full-circle);
                 border: var(--default-border);
-                color: var(--default-background-color-reduced-opacity);
+                border-color: var(--pure-white);
+                background: var(--pure-white);
+                color: var(--primary-color-reduced-opacity);
             }
         }
 
@@ -190,12 +198,24 @@ export default {
                 span, [class*="icon-"] {
                     color: var(--pure-white);
                 }
+
+                &:hover, &:active, &:focus {
+                    span, [class*="icon-"] {
+                        color: var(--pure-white);
+
+                        & + [class*="icon-"] {
+                            &:last-child {
+                                color: var(--text-color);
+                            }
+                        }
+                    }
+                }
             }
 
             .number {
                 background: var(--pure-white);
                 border-color: var(--pure-white);
-                color: var(--primary-color);
+                color: var(--primary-color) !important;
             }
 
             & ~ li {
@@ -224,8 +244,17 @@ export default {
                                 color: var(--primary-color);
                             }
                         }
+
+                        .number {
+                            border-color: var(--primary-color);
+                        }
                     }
                 }
+
+                .number {
+                    background: none;
+                    border-color: var(--border-color);
+                }
             }
 
             & + li {