comand-component-library 3.3.83 → 3.3.85

package/src/components/CmdHeadline.vue

@@ -1,31 +1,85 @@
 <template>
-    <div v-if="!editModeContext?.editing" :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': headlineIcon?.iconClass}, getTextAlign]">
+    <div v-if="!editModeContext || settingsContext || mainSidebarContext"
+         :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': headlineIcon?.iconClass}, getTextAlign]">
         <!-- begin CmdIcon -->
         <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType" />
         <!-- end CmdIcon -->
 
         <div v-if="preHeadlineText">
             <span class="pre-headline-text">{{ preHeadlineText }}</span>
-            <component :is="getHeadlineTag">
+            <component v-if="headlineText" :is="headlineTag">
                 <!-- being slot -->
                 <slot>{{ headlineText }}</slot>
                 <!-- end slot -->
             </component>
         </div>
-        <component v-else :is="getHeadlineTag">
+        <component v-else-if="headlineText" :is="headlineTag">
             <!-- being slot -->
             <slot>{{ headlineText }}</slot>
             <!-- end slot -->
         </component>
     </div>
     <!-- begin edit-mode -->
-    <input v-else type="text" :class="['edit-mode', 'headline', 'h'+ headlineLevel]" v-model="editableHeadlineText" />
+    <EditComponentWrapper
+        v-else
+        ref="editComponentWrapper"
+        class="edit-items"
+        :showComponentName="false"
+        :allowedComponentTypes="[]"
+        componentName="CmdHeadline"
+        :componentProps="{headlineText, headlineLevel}"
+        :componentPath="headlineComponentPath"
+        :allowDeleteComponent="!!headlineText"
+    >
+        <template v-slot="slotProps">
+            <CmdFormElement
+                v-if="slotProps.editing"
+                element="input"
+                type="text"
+                :class="['edit-mode', 'headline', 'h'+ headlineLevel, getTextAlign]"
+                labelText="Headline"
+                :showLabel="false"
+                placeholder="Headline"
+                v-model="editableHeadlineText"
+            />
+            <div v-else-if="headlineText"
+                 :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': headlineIcon?.iconClass}, getTextAlign]">
+                <!-- begin CmdIcon -->
+                <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
+                <!-- end CmdIcon -->
+
+                <div v-if="preHeadlineText">
+                    <span class="pre-headline-text">{{ preHeadlineText }}</span>
+                    <component v-if="headlineText" :is="headlineTag">
+                        <!-- being slot -->
+                        <slot>{{ headlineText }}</slot>
+                        <!-- end slot -->
+                    </component>
+                </div>
+                <component v-else-if="headlineText" :is="headlineTag">
+                    <!-- being slot -->
+                    <slot>{{ headlineText }}</slot>
+                    <!-- end slot -->
+                </component>
+            </div>
+            <!-- begin show placeholder if no image exists (and component is not edited) -->
+            <button v-else-if="componentActive" type="button" class="button confirm" @click="onAddItem">
+                <span class="icon-plus"></span>
+                <span>Add new headline</span>
+            </button>
+            <!-- end show placeholder if no image exists (and component is not edited) -->
+        </template>
+    </EditComponentWrapper>
     <!-- end edit-mode -->
 </template>
 
 <script>
+import EditMode from "../mixins/EditMode.vue"
+import {buildComponentPath, findEditComponentWrapper, updateHandlerProvider} from "../utils/editmode.js"
+
 export default {
     name: "CmdHeadline",
+    mixins: [EditMode],
     inject: {
         editModeContext: {
             default: null
@@ -33,7 +87,8 @@ export default {
     },
     data() {
         return {
-            editableHeadlineText: this.headlineText
+            editableHeadlineText: null,
+            editablePreHeadlineText: null
         }
     },
     props: {
@@ -49,7 +104,7 @@ export default {
          */
         headlineLevel: {
             type: [String, Number],
-            required: true
+            default: "2"
         },
         /**
          * small pre-headline-text above main-headline
@@ -73,16 +128,16 @@ export default {
         textAlign: {
             type: String,
             default: null
-        },
-        editModeContextData: {
-            type: Object
         }
     },
-    mounted() {
-        this.editModeContext?.addSaveHandler(this.onSave)
-    },
     computed: {
-        getHeadlineTag() {
+        componentActive() {
+            return this.editModeContext?.system.isActiveComponent(buildComponentPath(findEditComponentWrapper(this)))
+        },
+        headlineComponentPath() {
+            return this.componentPath || ["props", "cmdHeadline"]
+        },
+        headlineTag() {
             if(this.headlineLevel) {
                 return "h" + this.headlineLevel
             }
@@ -96,17 +151,36 @@ export default {
         }
     },
     methods: {
-        onSave() {
+        updateHandlerProvider() {
             const headlineText = this.editableHeadlineText
-            return {
-                editModeContextData: {
-                    ...(this.editModeContextData || {})
-                },
-                headlineText,
+            const preHeadlineText = this.editablePreHeadlineText
+            const headlineLevel = this.headlineLevel
+
+            return updateHandlerProvider(this, {
                 update(props) {
                     props.headlineText = headlineText
+                    props.preHeadlineText = preHeadlineText
+                    props.headlineLevel = headlineLevel
                 }
+            })
+        },
+        onAddItem() {
+            // execute editComponent-function from editComponentWrapper to enter editMode directly on "add"
+            this.$refs.editComponentWrapper.editComponent()
             }
+    },
+    watch: {
+        headlineText: {
+            handler() {
+                this.editableHeadlineText = this.headlineText
+            },
+            immediate: true
+        },
+        preHeadlineText: {
+            handler() {
+                this.editablePreHeadlineText = this.preHeadlineText
+            },
+            immediate: true
         }
     }
 }
@@ -117,50 +191,103 @@ export default {
 //@import '../assets/styles/variables';
 
 .cmd-headline {
-  margin-bottom: var(--default-margin);
-  gap: calc(var(--default-gap) / 2);
+    margin-bottom: var(--default-margin);
+    gap: calc(var(--default-gap) / 2);
+
+    &.text-center > * {
+        text-align: center;
+    }
+
+    &.text-right > * {
+        text-align: right;
+    }
+
+    &.has-pre-headline-text {
+        text-align: inherit;
+    }
+
+    p {
+        margin-bottom: 0;
+    }
+
+    &:has(span[class*="icon"]) {
+        display: flex;
+        align-items: center;
+    }
+
+    &:has(h1) span[class*="icon"] {
+        font-size: calc(var(--headline-font-size-h1) * 1.6);
+    }
+
+    &:has(h2) span[class*="icon"] {
+        font-size: calc(var(--headline-font-size-h2) * 1.8);
+    }
 
-  &.text-center > * {
-    text-align: center;
-  }
+    &:has(h3) span[class*="icon"] {
+        font-size: calc(var(--headline-font-size-h3) * 1.9);
+    }
+
+    &:has(h4) span[class*="icon"] {
+        font-size: calc(var(--headline-font-size-h4) * 2);
+    }
 
-  &.text-right > * {
-    text-align: right;
-  }
+    &:has(h5) span[class*="icon"] {
+        font-size: calc(var(--headline-font-size-h5) * 2.1);
+    }
 
-  &.has-icon {
-    display: flex;
-    align-items: center;
-  }
+    &:has(h6) span[class*="icon"] {
+        font-size: calc(var(--headline-font-size-h6) * 2.2);
+    }
 
-  &.has-pre-headline-text {
-    text-align: inherit;
+    &:has(h4, h5, h6) .pre-headline-text {
+        font-size: var(--font-size-small);
+    }
 
-    [class*="icon-"] {
-      font-size: 5rem;
+    .pre-headline-text {
+        line-height: 1;
     }
-  }
 
-  p {
-    margin-bottom: 0;
-  }
+    h1, h2, h3, h4, h5, h6 {
+        margin: 0;
 
-  h1, h2, h3, h4, h5, h6 {
-    margin: 0;
+        &:only-child {
+            flex: none;
+            width: 100%;
+        }
+    }
+}
 
-    &:only-child {
-      flex: none;
-      width: 100%;
+.edit-mode label.headline {
+    input {
+        padding: 0;
+        height: auto;
+        font-weight: var(--headline-font-weight);
     }
-  }
 
-  //@media only screen and (max-width: $small-max-width) {
-  //    flex-direction: column;
-  //
-  //    h1 {
-  //        margin-bottom: calc(var(--default-margin) * 2);
-  //    }
-  //}
+    &.h1 input {
+        font-size: var(--headline-font-size-h1);
+        text-transform: var(--headline-text-transform);
+    }
+
+    &.h2 input {
+        font-size: var(--headline-font-size-h2);
+    }
+
+    &.h3 input {
+        font-size: var(--headline-font-size-h3);
+    }
+
+    &.h4 input {
+        font-size: var(--headline-font-size-h4);
+    }
+
+    &.h5 input {
+        font-size: var(--headline-font-size-h5);
+    }
+
+    &.h6 input {
+        font-size: var(--headline-font-size-h6);
+    }
 }
 /* end cmd-headline ------------------------------------------------------------------------------------------ */
 </style>

package/src/components/CmdImage.vue

@@ -1,42 +1,105 @@
 <template>
     <!-- begin edit-mode -->
-    <figure v-if="editing" :class="['cmd-image flex-container vertical', getTextAlign]">
-        <template v-if="figcaption?.position === 'top'">
+    <EditComponentWrapper
+        v-if="editModeContext"
+        ref="editComponentWrapper"
+        class="edit-items"
+        :showComponentName="false"
+        :allowedComponentTypes="[]"
+        componentName="CmdImage"
+        :componentProps="{image, figcaption}"
+        :componentPath="imageComponentPath"
+        :allowDeleteComponent="!!imageSource"
+        :itemProvider="editModeConfig?.allowAddItem !== false ? itemProvider : null"
+    >
+        <template v-slot="slotProps">
+            <figure :class="['cmd-image flex-container no-gap vertical', textAlign]">
+                <!-- begin figcaption above image -->
+                <template v-if="figcaption.show && figcaption?.position === 'top'">
             <CmdFormElement
+                        v-if="slotProps.editing"
                 element="input"
                 type="text"
+                        :class="[textAlign, 'edit-mode']"
                 :required="true"
                 labelText="Text figcaption"
                 v-model="editableFigcaptionText"
             />
+                    <figcaption v-else-if="figcaption?.text">{{ figcaption?.text }}</figcaption>
         </template>
-        <div :class="['box drop-area flex-container vertical', { 'allow-drop': allowDrop }]" v-on="dragAndDropHandler" title="Drag new image to this area to replace old one!">
+                <!-- end figcaption above image -->
+
+                <!-- begin image-wrapper -->
+                <template v-if="slotProps.editing">
+                    <!-- begin image with drop-area -->
+                    <a href="#" :class="['box drop-area flex-container vertical', { 'allow-drop': allowDrop }]"
+                       v-on="dragAndDropHandler"
+                       @click.prevent="selectFiles"
+                       title="Drag new image to this area to replace old one!">
             <span class="icon-image"></span>
-            <img :src="imageSource" :alt="image.alt" :title="image.tooltip"/>
-        </div>
+                        <img :src="imageSource" :alt="image?.alt" :title="image?.tooltip"/>
+                    </a>
+                    <!-- end image with drop-area -->
+
+                    <!-- begin CmdFormElement -->
+                    <CmdFormElement
+                        class="hidden"
+                        element="input"
+                        type="file"
+                        labelText="Select new image"
+                        :disabled="uploadInitiated"
+                        @change="fileSelected"
+                        ref="formElement"
+                    />
+                    <!-- end CmdFormElement -->
+                </template>
+                <template v-else-if="imageSource">
+                    <!-- begin image without drop-area -->
+                    <img :src="imageSource" :alt="image?.alt" :title="image?.tooltip"/>
+                    <!-- end image without drop-area -->
+                </template>
+                <!-- end image-wrapper -->
 
-        <template v-if="figcaption?.position !== 'top'">
+                <!-- begin figcaption below image -->
+                <template v-if="figcaption.show && figcaption?.position !== 'top'">
             <CmdFormElement
+                        v-if="slotProps.editing"
                 element="input"
                 type="text"
-                :class="getTextAlign"
+                        :class="[textAlign, 'edit-mode']"
                 :required="true"
                 labelText="Text figcaption"
                 :showLabel="false"
                 v-model="editableFigcaptionText"
+                        placeholder="figcaption"
             />
+                    <figcaption v-else-if="figcaption?.text">{{ figcaption?.text }}</figcaption>
         </template>
+                <!-- end figcaption below image -->
+
+                <!-- begin show placeholder if no image exists (and component is not edited) -->
+                <button v-if="!slotProps.editing && !imageSource" type="button" class="button confirm"
+                        @click="onAddItem">
+                    <span class="icon-add"></span>
+                    <span>Add new image</span>
+                </button>
+                <!-- end show placeholder if no image exists (and component is not edited) -->
     </figure>
+        </template>
+    </EditComponentWrapper>
     <!-- end edit-mode -->
 
-    <figure v-else :class="['cmd-image', getTextAlign]">
+    <!-- begin default-view -->
+    <figure v-else :class="['cmd-image', textAlign]">
         <figcaption v-if="figcaption?.show && figcaption?.position === 'top'">{{ figcaption?.text }}</figcaption>
-        <img :src="imageSource" :alt="image.alt" :title="image.tooltip"/>
+        <img :src="imageSource" :alt="image?.alt" :title="image?.tooltip"/>
         <figcaption v-if="figcaption?.show && figcaption?.position !== 'top'">{{ figcaption?.text }}</figcaption>
     </figure>
+    <!-- end default-view -->
 </template>
 
 <script>
+import {createUuid} from "../utils/common.js"
 import {checkAndUploadFile} from "../utils/checkAndUploadFile"
 import EditMode from "../mixins/EditMode.vue"
 import {updateHandlerProvider} from "../utils/editmode.js"
@@ -53,6 +116,7 @@ export default {
             uploadInitiated: false,
             allowDrop: false,
             showFigcaption: true,
+            figcaptionText: null,
             figcaptionPosition: null,
             figcaptionTextAlign: null,
             tooltip: null,
@@ -81,8 +145,7 @@ export default {
                     text: "Right",
                     value: "right"
                 }
-            ],
-            figcaptionText: null
+            ]
         }
     },
     props: {
@@ -91,7 +154,7 @@ export default {
          */
         image: {
             type: Object,
-            required: true
+            required: false
         },
         /**
          * figcaption-object including visibility, position (top/bottom), text
@@ -101,12 +164,15 @@ export default {
             required: false
         },
         /**
-         * max file size (in bytes) for file to upload
+         * maximum file size (in bytes) for file to upload
          */
         maxFileUploadSize: {
             type: Number,
             default: 500000
         },
+        /**
+         * minimum image width (in pixels) for file to upload
+         */
         minImageWidth: {
             type: Number,
             default: 600
@@ -125,6 +191,9 @@ export default {
         window.removeEventListener("resize", this.updateWindowWidth)
     },
     computed: {
+        imageComponentPath() {
+            return this.componentPath || ["props", "cmdImage"]
+        },
         imageSource() {
             // check if a new image is provided
             if(this.newImageSource) {
@@ -132,7 +201,11 @@ export default {
             }
 
             // if only one src exists
-            const imgSrc = this.image.src
+            const imgSrc = this.image?.src
+
+            if (!imgSrc) {
+                return null
+            }
 
             if(typeof imgSrc === "string") {
                 return imgSrc
@@ -150,7 +223,7 @@ export default {
             // else return large (will be used if images for small-and -medium-devices do not exist or if screen resolution is larger than mediumMaxWidth)
             return imgSrc.large
         },
-        getTextAlign() {
+        textAlign() {
             if (this.figcaption?.textAlign) {
                 return "text-" + this.figcaption.textAlign
             }
@@ -167,7 +240,7 @@ export default {
         },
         editableFigcaptionText: {
             get() {
-                return this.figcaptionText == null ? this.figcaption.text : this.figcaptionText
+                return this.figcaptionText == null ? this.figcaption?.text : this.figcaptionText
             },
             set(value) {
                 this.figcaptionText = value
@@ -175,6 +248,36 @@ export default {
         }
     },
     methods: {
+        itemProvider() {
+            const editModeConfig = this.editModeConfig?.itemProviderOverwrite?.()
+            return {
+                "image": {
+                    "src": "/media/images/demo-images/medium/landscape-01.jpg",
+                    "alt": "Alternative Text",
+                    // add additional keys from editModeConfig
+                    ...editModeConfig?.image || {}
+                },
+                "figcaption": {
+                    "text": "Figcaption DE",
+                    "position": "bottom",
+                    "textAlign": "center",
+                    "show": true
+                }
+            }
+        },
+        onAddItem() {
+            // execute editComponent-function from editComponentWrapper to enter editMode directly on "add"
+            this.$refs.editComponentWrapper.editComponent()
+        },
+        selectFiles() {
+            let inputFile = this.$refs.formElement.getDomElement().querySelector("input[type='file']")
+            inputFile.click()
+        },
+        fileSelected(event) {
+            if (event.target.files.length > 0) {
+                checkAndUploadFile(event.target.files[0], this.allowedFileExtensions, this.minImageWidth, this.maxFileUploadSize, (imageSource) => this.newImageSource = imageSource)
+            }
+        },
         updateWindowWidth() {
             this.currentWindowWidth = window.innerWidth
         },
@@ -182,10 +285,10 @@ export default {
             return {
                 image: {...this.image},
                 figcaption: {
-                    show: this.editableShowFigcaption,
-                    position: this.editableFigcaptionPosition,
-                    textAlign: this.editableFigcaptionTextAlign,
-                    text: this.editableFigcaptionText
+                    show: this.showFigcaption,
+                    position: this.figcaptionPosition,
+                    textAlign: this.figcaptionTextAlign,
+                    text: this.figcaptionText
                 }
             }
         },
@@ -238,7 +341,9 @@ export default {
             })
         },
         updateHandlerProvider() {
-            const figcaptionText = this.editableFigcaptionText
+            const figcaptionText = this.figcaptionText
+            this.figcaptionText = null // reset data-property
+
             return updateHandlerProvider(this, {
                 update(props) {
                     if (!props.figcaption) {
@@ -248,6 +353,18 @@ export default {
                 }
             })
         }
+    },
+    watch: {
+        figcaption: {
+            handler() {
+                this.showFigcaption = this.figcaption?.show
+                this.figcaptionText = this.figcaption?.text
+                this.figcaptionPosition = this.figcaption?.position
+                this.figcaptionTextAlign = this.figcaption?.textAlign
+            },
+            immediate: true,
+            deep: true
+        }
     }
 }
 </script>
@@ -296,9 +413,21 @@ export default {
         opacity: 1;
         transition: var(--default-transition);
       }
+
+            &:not([src]) {
+                display: block;
+                width: 100%;
+                min-height: 30rem;
+            }
     }
   }
 }
 
+.edit-mode .edit-component-wrapper .cmd-image {
+    label.edit-mode input {
+        padding: calc(var(--default-padding) / 2);
+    }
+}
+
 /* end cmd-image ------------------------------------------------------------------------------------------ */
 </style>