comand-component-library 3.3.84 → 3.3.86

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>