comand-component-library 3.3.85 → 3.3.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.3.85",
+  "version": "3.3.86",
   "private": false,
   "type": "module",
   "scripts": {

package/src/components/CmdImage.vue

@@ -15,18 +15,18 @@
         <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
+                <template v-if="figcaption?.show && figcaption?.position === 'top'">
+                    <CmdFormElement
                         v-if="slotProps.editing"
-                element="input"
-                type="text"
+                        element="input"
+                        type="text"
                         :class="[textAlign, 'edit-mode']"
-                :required="true"
-                labelText="Text figcaption"
-                v-model="editableFigcaptionText"
-            />
+                        :required="true"
+                        labelText="Text figcaption"
+                        v-model="editableFigcaptionText"
+                    />
                     <figcaption v-else-if="figcaption?.text">{{ figcaption?.text }}</figcaption>
-        </template>
+                </template>
                 <!-- end figcaption above image -->
 
                 <!-- begin image-wrapper -->
@@ -36,7 +36,7 @@
                        v-on="dragAndDropHandler"
                        @click.prevent="selectFiles"
                        title="Drag new image to this area to replace old one!">
-            <span class="icon-image"></span>
+                        <span class="icon-image"></span>
                         <img :src="imageSource" :alt="image?.alt" :title="image?.tooltip"/>
                     </a>
                     <!-- end image with drop-area -->
@@ -61,20 +61,20 @@
                 <!-- end image-wrapper -->
 
                 <!-- begin figcaption below image -->
-                <template v-if="figcaption.show && figcaption?.position !== 'top'">
-            <CmdFormElement
+                <template v-if="figcaption?.show && figcaption?.position !== 'top'">
+                    <CmdFormElement
                         v-if="slotProps.editing"
-                element="input"
-                type="text"
+                        element="input"
+                        type="text"
                         :class="[textAlign, 'edit-mode']"
-                :required="true"
-                labelText="Text figcaption"
-                :showLabel="false"
-                v-model="editableFigcaptionText"
+                        :required="true"
+                        labelText="Text figcaption"
+                        :showLabel="false"
+                        v-model="editableFigcaptionText"
                         placeholder="figcaption"
-            />
+                    />
                     <figcaption v-else-if="figcaption?.text">{{ figcaption?.text }}</figcaption>
-        </template>
+                </template>
                 <!-- end figcaption below image -->
 
                 <!-- begin show placeholder if no image exists (and component is not edited) -->
@@ -84,7 +84,7 @@
                     <span>Add new image</span>
                 </button>
                 <!-- end show placeholder if no image exists (and component is not edited) -->
-    </figure>
+            </figure>
         </template>
     </EditComponentWrapper>
     <!-- end edit-mode -->
@@ -196,7 +196,7 @@ export default {
         },
         imageSource() {
             // check if a new image is provided
-            if(this.newImageSource) {
+            if (this.newImageSource) {
                 return this.newImageSource
             }
 
@@ -207,13 +207,13 @@ export default {
                 return null
             }
 
-            if(typeof imgSrc === "string") {
+            if (typeof imgSrc === "string") {
                 return imgSrc
             }
 
             const deviceWidth = this.currentWindowWidth;
             // return image for small-devices (if exists)
-            if(imgSrc.small && deviceWidth <= this.smallMaxWidth) {
+            if (imgSrc.small && deviceWidth <= this.smallMaxWidth) {
                 return imgSrc.small
             }
             // return image for medium-devices (if exists)
@@ -372,55 +372,55 @@ export default {
 <style lang="scss">
 /* begin cmd-image ------------------------------------------------------------------------------------------ */
 .cmd-image {
-  img {
-      display: block;
-  }
+    img {
+        display: block;
+    }
 
-  &.text-center {
-    figcaption {
-      text-align: center;
+    &.text-center {
+        figcaption {
+            text-align: center;
+        }
     }
-  }
 
-  &.text-right {
-    figcaption {
-      text-align: right;
+    &.text-right {
+        figcaption {
+            text-align: right;
+        }
     }
-  }
 
-  .drop-area {
-    border: 0;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
+    .drop-area {
+        border: 0;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
 
-    > [class*="icon"] {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translateX(-50%) translateY(-50%);
-      font-size: 10rem;
-      color: var(--pure-white);
-      text-shadow: var(--text-shadow);
-      z-index: 10;
-    }
+        > [class*="icon"] {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translateX(-50%) translateY(-50%);
+            font-size: 10rem;
+            color: var(--pure-white);
+            text-shadow: var(--text-shadow);
+            z-index: 10;
+        }
 
-    img {
-      opacity: .7;
-      transition: var(--default-transition);
+        img {
+            opacity: .7;
+            transition: var(--default-transition);
 
-      &:hover, :active, :focus {
-        opacity: 1;
-        transition: var(--default-transition);
-      }
+            &:hover, :active, :focus {
+                opacity: 1;
+                transition: var(--default-transition);
+            }
 
             &:not([src]) {
                 display: block;
                 width: 100%;
                 min-height: 30rem;
             }
+        }
     }
-  }
 }
 
 .edit-mode .edit-component-wrapper .cmd-image {