comand-component-library 4.3.26 → 4.3.28

package/src/components/CmdImage.vue

@@ -14,7 +14,7 @@
         :itemProvider="editModeConfig?.allowAddItem !== false ? itemProvider : null"
     >
         <template v-slot="slotProps">
-            <figure :class="['cmd-image flex-container no-gap vertical', textAlign]">
+            <figure :class="['cmd-image flex-container no-gap vertical', alignContent]">
                 <!-- begin figcaption above image -->
                 <template v-if="figcaption?.show && figcaption?.position === 'top'">
                     <!-- begin CmdFormElement -->
@@ -28,14 +28,14 @@
                         v-model="editableFigcaptionText"
                     />
                     <!-- end CmdFormElement -->
-                    <figcaption v-else-if="figcaption?.text" v-html="figcaption?.text"/>
+                    <figcaption v-else-if="figcaptionProperties?.text" v-html="figcaptionProperties?.text"/>
                 </template>
                 <!-- 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 }]"
+                    <a href="#" :class="['box drop-area flex-container flex-direction-column', { 'allow-drop': allowDrop }]"
                        v-on="dragAndDropHandler"
                        @click.prevent="selectFiles"
                        title="Drag new image to this area to replace old one!">
@@ -64,7 +64,7 @@
                 <!-- end image-wrapper -->
 
                 <!-- begin figcaption below image -->
-                <template v-if="figcaption?.show && figcaption?.position !== 'top'">
+                <template v-if="figcaptionProperties?.show && figcaptionProperties?.position !== 'top'">
                     <!-- begin CmdFormElement -->
                     <CmdFormElement
                         v-if="slotProps.editing"
@@ -78,7 +78,7 @@
                         placeholder="figcaption"
                     />
                     <!-- end CmdFormElement -->
-                    <figcaption v-else-if="figcaption?.text" v-html="figcaption?.text"/>
+                    <figcaption v-else-if="figcaptionProperties?.text" v-html="figcaptionProperties?.text"/>
                 </template>
                 <!-- end figcaption below image -->
 
@@ -98,10 +98,10 @@
 
     <!-- begin default-view -->
     <!-- begin image with figure/figcaption -->
-    <figure v-else-if="useFigureTag" :class="['cmd-image', textAlign]">
-        <figcaption v-if="figcaption?.position === 'top' && figcaption?.text && figcaption?.show" v-html="figcaption?.text"/>
+    <figure v-else-if="useFigureTag" :class="['cmd-image flex-container flex-direction-column', alignContent]">
+        <figcaption v-if="figcaptionProperties?.position === 'top' && figcaptionProperties?.text && figcaptionProperties?.show" v-html="figcaptionProperties?.text"/>
         <img :src="imageSource" :alt="image?.alt" :title="image?.tooltip" :loading="image?.lazyLoading !== false ? 'lazy' : null" @load="onImageLoaded"/>
-        <figcaption v-if="figcaption?.position !== 'top' && figcaption?.text && figcaption?.show" v-html="figcaption?.text"/>
+        <figcaption v-if="figcaptionProperties?.position === 'bottom' && figcaptionProperties?.text && figcaptionProperties?.show" v-html="figcaptionProperties?.text"/>
     </figure>
     <!-- end image with figure/figcaption -->
 
@@ -121,6 +121,11 @@ import {updateHandlerProvider} from "../utils/editmode.js"
 export default {
     name: "CmdImage",
     mixins: [EditMode],
+    inject: {
+        editModeContext: {
+            default: null
+        }
+    },
     data() {
         return {
             mediumMaxWidth: 1023,
@@ -185,6 +190,13 @@ export default {
         },
         /**
          * figcaption-object including visibility, position (top/bottom), text
+         * 
+         * {
+         *     position: "top"/"bottom",
+         *     show: true/false,
+         *     tooltip: "text",
+         *     textAlign: "left"/"center"/"right"
+         * }
          */
         figcaption: {
             type: Object,
@@ -218,6 +230,14 @@ export default {
         window.removeEventListener("resize", this.updateWindowWidth)
     },
     computed: {
+        figcaptionProperties() {
+            return {
+                "show": true,
+                "position": "bottom",
+                "textAlign": "center",
+                ...this.figcaption
+            }
+        },
         imageComponentPath() {
             return this.componentPath || ["props", "cmdImage"]
         },
@@ -250,9 +270,21 @@ 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
         },
+        alignContent() {
+            switch (this.figcaption?.textAlign) {
+                case "left":
+                    return "align-items-flex-start";
+                case "center":
+                    return "align-items-center";
+                case "right":
+                    return "align-item-flex-end";
+                default:
+                    return null;
+            }
+        },
         textAlign() {
             if (this.figcaption?.textAlign) {
-                return "text-" + this.figcaption.textAlign
+                return "text-align-" + this.figcaption.textAlign
             }
             return ''
         },
@@ -402,27 +434,18 @@ export default {
 <style>
 /* begin cmd-image ------------------------------------------------------------------------------------------ */
 .cmd-image {
+    gap: var(--gap-small);
+
     img {
         display: block;
     }
 
     figcaption {
+        padding: 0;
         border-bottom-left-radius: var(--default-border-radius);
         border-bottom-right-radius: var(--default-border-radius);
     }
 
-    &.text-center {
-        figcaption {
-            text-align: center;
-        }
-    }
-
-    &.text-right {
-        figcaption {
-            text-align: right;
-        }
-    }
-
     .drop-area {
         border: 0;
         align-items: center;

package/src/components/CmdImageGallery.vue

@@ -60,14 +60,12 @@ import {buildComponentPath, updateHandlerProvider} from "../utils/editmode.js"
 export default {
     name: "CmdImageGallery",
     mixins: [EditMode],
+    inject: {
+        editModeContext: {
+            default: null
+        }
+    },
     props: {
-        /**
-         * properties for CmdHeadline-component
-         */
-        cmdHeadline: {
-            type: Object,
-            required: false
-        },
         /**
          * set if large version of images can be opened in a fancybox
          */
@@ -96,7 +94,14 @@ export default {
                 return value === "top" ||
                     value === "bottom"
             }
-        }
+        },
+        /**
+         * properties for CmdHeadline-component
+         */
+        cmdHeadline: {
+            type: Object,
+            required: false
+        },
     },
     methods: {
         itemProvider() {

package/src/components/CmdLink.vue

@@ -2,11 +2,13 @@
     <!-- begin CmdLink ---------------------------------------------------------------------------------------- -->
     <!-- begin href -->
     <a v-if="linkType === 'href'"
+       ref="cmd-link"
        :href="!disabled ? path : null"
        :target="target"
        :class="['cmd-link', highlightLevel, {'button': styleAsButton, 'disabled': disabled, 'box': styleAsBox, 'fancybox': fancybox}]"
        @click.prevent="emitClick($event, 'href')"
        :title="icon?.tooltip"
+       :role="styleAsButton ? 'button' : null"
     >
         <!-- begin CmdInnterLink -->
         <CmdInnerLink :text="text" :icon="icon" :image="image">
@@ -23,7 +25,8 @@
         :to="!disabled ? path : {}" 
         exact-active-class="router-link-exact-active active"
         :class="['cmd-link', highlightLevel, {'button': styleAsButton, 'disabled': disabled, 'box': styleAsBox, 'fancybox': fancybox}]" 
-        @click="emitClick($event, 'router')" 
+        @click="emitClick($event, 'router')"
+        :role="styleAsButton ? 'button' : null" 
         :title="icon?.tooltip">
         <!-- begin CmdInnterLink -->
         <CmdInnerLink :text="text" :icon="icon" :image="image">
@@ -37,6 +40,7 @@
 
     <!-- begin button -->
     <button v-else-if="linkType === 'button' || linkType === 'submit'" 
+        ref="cmd-link"
         :class="['cmd-link button', highlightLevel, {'disabled': disabled, 'box': styleAsBox, 'fancybox': fancybox}]" 
         type="submit"
         :disabled="disabled" 
@@ -125,13 +129,13 @@ export default {
         },
         /**
          * set highlight-level for link/button
-         * null"none", "primary", "secondary", "tertiary"
+         * null, "primary", "secondary", "tertiary"
          */
          highlightLevel: {
             type: String,
             default: "primary",
             validator(value) {
-                return value === null||
+                return value === null ||
                     value === "primary" ||
                     value === "secondary" ||
                     value === "tertiary"
@@ -160,6 +164,19 @@ export default {
         }
     },
     methods: {
+        /**
+         * public function to enable calling foucs() on main-component from outside
+         */
+        focus() {
+            const link = this.$refs["cmd-link"]
+            // check if link provides native function focus() (for a/button)
+            if(typeof link.focus === "function" ) {
+                link.focus()
+            } else {
+                // set focus for router-link
+                link.$el.focus()
+            }
+        }, 
         emitClick(event, linkType) {
             this.$emit("click", {originalEvent: event, linkType: linkType})
         }
@@ -182,8 +199,6 @@ export default {
 
     img {
         max-height: 4rem;
-        aspect-ratio: 1/1;
-        border-radius: var(--full-circle);
         margin: 0;
     }
 

package/src/components/CmdList.vue

@@ -127,6 +127,11 @@ export default {
     name: "CmdListOfLinks",
     emits: ["click"],
     mixins: [EditMode],
+    inject: {
+        editModeContext: {
+            default: null
+        }
+    },
     data() {
         return {
             listOfTagItems: [...(this.items || [])]
@@ -392,7 +397,7 @@ export default {
 .cmd-list {
     > ul {
         flex-direction: column;
-        gap: var(--default-gap-half);
+        gap: var(--gap-small);
         margin: 0;
 
         li {
@@ -402,7 +407,7 @@ export default {
 
             &:has(.tag) {
                 .tag {
-                    gap: var(--default-gap-half);
+                    gap: var(--gap-small);
 
                     &.primary, &.secondary, &.tertiary {
                         [class*="icon-"] {