comand-component-library 3.3.75 → 3.3.77

package/src/components/CmdImageGallery.vue

@@ -1,27 +1,83 @@
 <template>
     <div class="grid-container-create-columns cmd-image-gallery">
-        <a v-for="(image, index) in images"
-           :key="index"
-           @click.prevent="showFancyBox(index)"
-           href="#"
-           :title="getMessage('cmdimagegallery.tooltip.open_large_image')">
-           <CmdImage :image="image.image" :figcaption="image.figcaption" />
-        </a>
+        <!-- begin cmd-headline -->
+        <CmdHeadline
+                v-if="cmdHeadline"
+                :headlineText="cmdHeadline.headlineText"
+                :headlineLevel="cmdHeadline.headlineLevel"
+        />
+        <!-- end cmd-headline -->
+
+        <!-- begin default view -->
+        <template v-if="!editModeContext">
+            <!-- begin images linked to fancybox -->
+            <a v-if="useFancyboxForLargeImages" class="image-wrapper" v-for="(image, index) in images"
+               :key="index"
+               href="#"
+               @click.prevent="showFancyBox(index)"
+               :title="getMessage('cmdimagegallery.tooltip.open_large_image')">
+                <CmdImage :image="image.image" :figcaption="image.figcaption"/>
+            </a>
+            <!-- end images linked to fancybox -->
+
+            <!-- begin images not linked to fancybox -->
+            <CmdImage v-else :image="image.image" :figcaption="image.figcaption"/>
+            <!-- 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>
+        <!-- end edit-mode view -->
     </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 I18n from "../mixins/I18n"
+//import DefaultMessageProperties from "../mixins/CmdImageGallery/DefaultMessageProperties"
 
 export default {
     name: "CmdImageGallery",
-    mixins: [I18n, DefaultMessageProperties],
+    mixins: [],
+    provide() {
+        return {
+            editModeContext: this.context
+        }
+    },
+    inject: {
+        editModeContext: {
+            default: null
+        }
+    },
     props: {
+        editModeContextData: {
+            type: Object
+        },
+        /**
+         * properties for CmdHeadline-component
+         */
+        cmdHeadline: {
+            type: Object,
+            required: false
+        },
+        /**
+         * set if large version of images can be opened in a fancybox
+         */
+        useFancyboxForLargeImages: {
+            type: Boolean,
+            default: true
+        },
         /**
          * list of images (incl. captions)
          *
@@ -41,9 +97,48 @@ 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)
+            }
+
+            identifier.push(index)
+
+            return identifier.join(".")
+        },
         showFancyBox(index) {
             openFancyBox({fancyBoxGallery: this.images, defaultGalleryIndex: index})
+        },
+        getMessage() {
+            return ""
+        },
+        onSave(data) {
+            const imageIndex = data[0].editModeContextData.imageIndex
+            return {
+                editModeContextData: {
+                    ...(this.editModeContextData || {})
+                },
+                update(props) {
+                    props.images[imageIndex].image = {
+                        ...props.images[imageIndex].image,
+                        ...data[0].image
+                    }
+                    props.images[imageIndex].figcaption = {
+                        ...props.images[imageIndex].figcaption,
+                        ...data[0].figcaption
+                    }
+                }
+            }
         }
     }
 }
@@ -52,33 +147,38 @@ export default {
 <style lang="scss">
 /* begin cmd-image-gallery ---------------------------------------------------------------------------------------- */
 .cmd-image-gallery {
-    > a {
-        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 {
+    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);
 
-        &:hover, &:active, &:focus {
-            text-decoration: none;
+    img {
+      border: var(--default-border);
+      border-radius: var(--border-radius);
+      max-height: 30rem;
+    }
 
-            img {
-                border: var(--primary-border);
-            }
-        }
+    figcaption {
+      padding: calc(var(--default-padding) / 2);
+    }
 
-        & + .pager {
-            margin-top: calc(var(--default-margin) * 2);
-        }
+    &:hover, &:active, &:focus {
+      text-decoration: none;
+
+      img {
+        border: var(--primary-border);
+      }
+    }
+
+    & + .pager {
+      margin-top: calc(var(--default-margin) * 2);
     }
+  }
 }
 
 /* end cmd-image-gallery ------------------------------------------------------------------------------------------ */

package/src/components/CmdMainNavigation.vue

@@ -409,7 +409,6 @@ export default {
                         ul {
                             z-index: 1000; /* keep ul above overlay */
                             height: 100%;
-                            background: var(--color-scheme-background-color);
                         }
                     }
                 }
@@ -444,7 +443,7 @@ export default {
                                 align-items: center;
 
                                 span {
-                                    font-weight: bold;
+                                    font-weight: var(--font-weight-bold);
 
                                     &[class*="icon-"] {
                                         font-size: var(--font-size-small);

package/src/components/CmdPager.vue

@@ -23,7 +23,7 @@
                    v-for="(page, index) in pages"
                    :key="index"
                    @click.stop.prevent="showPage(page)" aria-live="polite">
-                    <span>{{ index + 1 }}</span>
+                   <span :class="{hidden: !showPageNumbers}">{{ index + 1 }}</span>
                 </a>
             </div>
         </div>
@@ -75,6 +75,13 @@ export default {
             type: Number,
             required: true
         },
+        /**
+         * toggle page-numbers on buttons
+         */
+        showPageNumbers: {
+            type: Boolean,
+            default: true
+        },
         /**
          * set type of links
          *

package/src/components/CmdSlideButton.vue

@@ -77,21 +77,15 @@ export default {
         display: flex;
         justify-content: center;
         text-decoration: none;
-        background: var(--default-background-color-reduced-opacity);
         border: 0;
+        outline: 0;
 
         span {
             align-self: center;
-            color: var(--primary-color-reduced-opacity);
         }
 
         &:hover, &:active, &:focus {
-            background: var(--pure-white);
             transition: var(--default-transition);
-
-            span {
-                color: var(--hyperlink-color-highlighted);
-            }
         }
 
         &.prev {

package/src/components/CmdSocialNetworks.vue

@@ -219,6 +219,7 @@ export default {
         .button {
           padding: calc(var(--default-padding) / 2) var(--default-padding);
           gap: calc(var(--default-gap) / 2);
+          outline: 0;
 
           span {
             margin: 0;

package/src/components/CmdSystemMessage.vue

@@ -105,7 +105,7 @@ export default {
             default() {
                 return {
                     show: true,
-                    iconClass: "icon-cancel",
+                    iconClass: "icon-cancel-circle",
                     tooltip: "Close this message"
                 }
             }
@@ -156,24 +156,15 @@ export default {
         top: .5rem;
         right: .5rem;
         text-decoration: none;
-        border: var(--default-border);
-        border-color: var(--pure-white);
-        border-radius: var(--full-circle);
-        padding: calc(var(--default-padding) / 2);
         z-index: 100;
         line-height: 1;
 
         [class*="icon-"] {
-            font-size: 0.8rem;
             color: var(--pure-white);
         }
 
         &:hover, &:active, &:focus {
-            border-color: var(--hyperlink-color);
-            background: var(--pure-white);
-
             [class*="icon-"] {
-                font-size: 0.8rem;
                 color: var(--hyperlink-color);
             }
         }

package/src/components/CmdTable.vue

@@ -32,8 +32,8 @@
                 </thead>
                 <transition name="fade">
                     <tbody v-show="showTableData" aria-expanded="true">
-                    <tr :class="{'highlighted' : tableData.rowIndexHighlighted === indexRows}" v-for="(tablerows, indexRows) in tableData.tbody" :key="indexRows">
-                        <td :class="{'highlighted' : tableData.columnIndexHighlighted === indexData}" v-for="(tabledata, indexData) in tablerows" :key="indexData">
+                    <tr :class="{'active' : tableData.rowIndexHighlighted === indexRows}" v-for="(tablerows, indexRows) in tableData.tbody" :key="indexRows">
+                        <td :class="{'active' : tableData.columnIndexHighlighted === indexData}" v-for="(tabledata, indexData) in tablerows" :key="indexData">
                             {{ tabledata }}
                         </td>
                     </tr>
@@ -42,7 +42,7 @@
                 <transition name="fade">
                     <tfoot v-if="tableData.tfoot && tableData.tfoot.length && showTableData" aria-expanded="true">
                     <tr>
-                        <td :class="{'highlighted' : tableData.columnIndexHighlighted === indexFoot}" v-for="(tablefoot, indexFoot) in tableData.tfoot" :key="indexFoot">
+                        <td :class="{'active' : tableData.columnIndexHighlighted === indexFoot}" v-for="(tablefoot, indexFoot) in tableData.tfoot" :key="indexFoot">
                             {{ tablefoot }}
                         </td>
                     </tr>

package/src/components/CmdTextBlock.vue

@@ -1,39 +1,41 @@
 <template>
     <div class="cmd-text-block flex-container vertical">
         <!-- begin cmd-headline -->
-        <input v-if="editContent" class="edit-mode headline" type="text" v-model="editableHtmlHeadline" />
-        <CmdHeadline v-else-if="cmdHeadline" :headlineText="cmdHeadline.headlineText" :headlineLevel="cmdHeadline.headlineLevel"/>
+        <CmdHeadline v-if="cmdHeadline" :headlineText="cmdHeadline.headlineText" :headlineLevel="cmdHeadline.headlineLevel" />
         <!-- end cmd-headline -->
 
-        <!-- begin text for single-paragraph -->
-        <input v-if="editContent" class="edit-mode" type="text" v-model="editableText" />
-        <p v-if="textContent">{{textContent}}</p>
-        <!-- end text for single-paragraph -->
-
         <!-- begin continuous text -->
-        <textarea v-if="editContent" class="edit-mode" v-model="editableHtmlContent"></textarea>
+        <textarea v-if="editModeContext?.editing" class="edit-mode" v-model="editableHtmlContent"></textarea>
         <div v-else-if="htmlContent" v-html="htmlContent"></div>
         <!-- end continuous text -->
     </div>
 </template>
 
 <script>
+import {useEditModeContext} from "../editmode/editModeContext.js"
+
 export default {
     name: "CmdTextBlock",
+    provide() {
+        return {
+            editModeContext: this.context
+        }
+    },
+    inject: {
+        editModeContext: {
+            default: null
+        }
+    },
     data() {
         return {
-            editableHtmlHeadline: "",
-            editableText: "",
-            editableHtmlContent: ""
+            context: useEditModeContext(this.editModeContext, {tb: true}, this.onPersist),
+            editableHtmlHeadline: this.cmdHeadline?.headlineText || "",
+            editableHtmlContent: this.htmlContent
         }
     },
     props: {
-        /**
-         * set to activate edit-mode
-         */
-        editContent: {
-            type: Boolean,
-            default: false
+        editModeContextData: {
+            type: Object
         },
         /**
          * properties for CmdHeadline-component
@@ -42,13 +44,6 @@ export default {
             type: Object,
             required: false
         },
-        /**
-         * text placed in a single paragraph
-         */
-        textContent: {
-            type: String,
-            required: false
-        },
         /**
          * content for continuous text (can contain html-tags)
          */
@@ -56,6 +51,23 @@ export default {
             type: String,
             required: true
         }
+    },
+    methods: {
+        onPersist(data) {
+            const htmlContent = this.editableHtmlContent
+            return {
+                editModeContextData: {
+                    ...(this.editModeContextData || {})
+                },
+                update(props) {
+                    props.cmdHeadline = {
+                        ...(props.cmdHeadline || {}),
+                    }
+                    props.cmdHeadline.headlineText = data[0].headlineText
+                    props.htmlContent = htmlContent
+                }
+            }
+        }
     }
 }
 </script>

package/src/editmode/editModeContext.js

@@ -0,0 +1,50 @@
+import {ref, watchEffect} from "vue"
+
+export function useEditModeContext(parentContext, props, persistHandler) {
+    const editing = ref(!!parentContext?.editing)
+    const saveHandlers = []
+
+    function save() {
+        const data = []
+        saveHandlers.forEach(saveHandler => {
+            const result = saveHandler();
+            if (result) {
+                data.push(result)
+            }
+        })
+        callPersistHandler(data)
+    }
+
+    function callPersistHandler(data) {
+        let processedData = data
+        if (persistHandler) {
+            processedData = persistHandler(data)
+        }
+        if (parentContext && processedData != null) {
+            parentContext.callPersistHandler(processedData)
+        }
+    }
+
+    function addSaveHandler(saveHandler) {
+        if (!saveHandlers.includes(saveHandler)) {
+            saveHandlers.push(saveHandler)
+        }
+    }
+
+    if (parentContext) {
+        parentContext.addSaveHandler(save)
+    }
+
+    watchEffect(() => editing.value = !!parentContext?.editing);
+
+    return {
+        editing,
+        props: {
+            ...(parentContext?.props || {}),
+            ...(props || {})
+        },
+        addSaveHandler,
+        save,
+        callPersistHandler
+    }
+}

package/src/main.js

@@ -1,23 +1,12 @@
-/* begin imports css from comand-frontend-framework ---------------------------------------------------------------------------------------- */
-/* import normalize to set same default styles for all browsers */
-import 'comand-frontend-framework/src/assets/css/normalize.css'
-
-/* import framework-styles */
-import 'comand-frontend-framework/src/assets/css/framework.css'
-
-/* import breakpoints */
-import 'comand-frontend-framework/src/assets/css/breakpoints.css'
-
-/* import framework-iconfont */
-import 'comand-frontend-framework/src/assets/css/framework-iconfont.css'
-import 'comand-frontend-framework/src/assets/css/template.css'
+/* import generated css from components */
+import "comand-frontend-framework/styles"
 /* end imports css from comand-frontend-framework ---------------------------------------------------------------------------------------- */
 
-import { createApp } from 'vue'
+import { createApp } from "vue"
 
-// import App from './App.vue'
-import App from './App.vue'
-//import { createRouter, createWebHistory } from 'vue-router'
+// import App from "./App.vue"
+import App from "./App.vue"
+//import { createRouter, createWebHistory } from "vue-router"
 import "clickout-event"
 
 /* import directives */
@@ -37,14 +26,14 @@ import '@/assets/styles/global-styles.scss'
 /* import css for global transitions */
 import '@/assets/styles/transitions.scss'
 
-/* import css-example for your custom styles (contains overwritten primary-color only) */
+/* import css-example for your custom styles */
 import '@/assets/styles/template.css'
 
 /* import css for prism-library (for styling syntax) */
 import "prismjs/themes/prism.css"
 
 /* import css for demopage only */
-import 'comand-frontend-framework/public/demopage-only.css'
+//import 'comand-frontend-framework/public/demopage-only.css'
 /* end imports css from comand-component-library ---------------------------------------------------------------------------------------- */
 
 import router from "./router"