comand-component-library 3.3.84 → 3.3.86

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 {