comand-component-library 4.3.26 → 4.3.27

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-"] {