comand-component-library 4.0.29 → 4.0.31

package/src/components/CmdLink.vue

@@ -0,0 +1,108 @@
+<template>
+    <!-- begin CmdLink -->
+    <!-- begin href -->
+    <a v-if="linkType === 'href'" :href="path" :target="target" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton}]" @click.prevent="emitClick($event, 'href')">
+        <span v-if="icon.iconClass && icon.position !== 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
+        <span v-if="text">{{ text }}</span>
+        <span v-if="icon.iconClass && icon.position === 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
+    </a>
+    <!-- end href -->
+
+    <!-- begin router -->
+    <router-link v-else-if="linkType === 'router'" :to="path" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton}]" @click.prevent="emitClick($event, 'router')">
+        <span v-if="icon.iconClass && icon.position !== 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
+        <span v-if="text">{{ text }}</span>
+        <span v-if="icon.iconClass && icon.position === 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
+    </router-link>
+    <!-- end router -->
+
+    <!-- begin button -->
+    <button v-else-if="linkType === 'button'" :class="['cmd-link button', {'primary': primaryButton}]" type="submit" @click.prevent="emitClick($event, 'button')">
+        <span v-if="icon.iconClass && icon.position !== 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
+        <span v-if="text">{{ text }}</span>
+        <span v-if="icon.iconClass && icon.position === 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
+    </button>
+    <!-- end button -->
+    <!-- end CmdLink -->
+</template>
+
+<script>
+export default {
+    name: "CmdLink",
+    emits: ["click"],
+    props: {
+        /**
+         * set type of link
+         * @allowedValues: 'href', 'router', 'button'
+         */
+        linkType: {
+            type: String,
+            default: "href"
+        },
+        /**
+         * set path
+         * 
+         * linkType must be 'href', 'router'
+         */
+        path: {
+            type: String,
+            default: "#"
+        },
+        /**
+         * set target
+         *
+         * linkType must be 'href'
+         */
+        target: {
+            type: String,
+            default: ""
+        },
+        /**
+         * icon to display
+         */
+        icon: {
+            type: Object,
+            default: {}
+        },
+        /**
+         * displayed text
+         *
+         */
+        text: {
+            type: String,
+            default: ""
+        },
+        /**
+         * toggle if link should be styled as button
+         *
+         * (type 'button' will always be styles as button)
+         */
+        styleAsButton: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * activate if button should be styled as primary-button
+         *
+         * (type must be 'button' or styleAsButton-property must be activated)
+         */
+        primaryButton: {
+            type: Boolean,
+            default: false
+        }
+    },
+    methods: {
+        emitClick(event, linkType) {
+            this.$emit('click', {originalEvent: event, linkType: linkType})
+        }
+    }
+}
+</script>
+
+<style>
+.cmd-link {
+    span[class*="icon"]:not(:only-child) {
+        font-size: 1rem;
+    }
+}
+</style>

package/src/components/CmdSlideshow.vue

@@ -16,14 +16,15 @@
                 <template v-if="currentItem">
                     <template v-if="!useSlot">
                         <template v-if="!editModeContext">
-                            <a v-if="currentItem?.link?.href" :href="currentItem?.link?.href"
+                            <a v-if="currentItem?.link?.href"
+                               :href="currentItem?.link?.href"
                                :title="currentItem?.link?.tooltip">
-                            <!-- begin CmdImage -->
-                            <CmdImage :image="currentItem?.image" :figcaption="currentItem?.figcaption"/>
-                            <!-- begin CmdImage -->
-                        </a>
+                                <!-- begin CmdImage -->
+                                <CmdImage :image="currentItem?.image" :figcaption="currentItem?.figcaption"/>
+                                <!-- begin CmdImage -->
+                            </a>
 
-                       <!-- begin CmdImage -->
+                            <!-- begin CmdImage -->
                             <CmdImage v-else :image="currentItem?.image" :figcaption="currentItem?.figcaption"/>
                             <!-- begin CmdImage -->
                         </template>

package/src/components/CmdSwitchLanguage.vue

@@ -93,7 +93,7 @@ export default {
             margin: 0;
 
             a:not([class*="active"]) {
-                filter: contrast(.5);
+                filter: contrast(.6);
 
                 &:hover, &:focus-visible, &:active, &.active, &.router-link-active {
                     filter: none;

package/src/components/CmdThumbnailScroller.vue

@@ -418,7 +418,7 @@ export default {
                 flex: none; /* avoids items to shrink to small on small screens */
 
                 img {
-                    min-width: 15rem;
+                    min-width: 5rem;
                     max-height: 10rem;
                 }
 

package/src/index.js

@@ -22,6 +22,7 @@ export { default as CmdImage } from '@/components/CmdImage.vue'
 export { default as CmdImageGallery } from '@/components/CmdImageGallery.vue'
 export { default as CmdImageZoom } from '@/components/CmdImageZoom.vue'
 export { default as CmdInputGroup } from '@/components/CmdInputGroup.vue'
+export { default as CmdLink } from '@/components/CmdLink.vue'
 export { default as CmdListOfLinks } from '@/components/CmdListOfLinks.vue'
 export { default as CmdLoginForm } from '@/components/CmdLoginForm.vue'
 export { default as CmdMainNavigation } from '@/components/CmdMainNavigation.vue'