comand-component-library 3.3.23 → 3.3.25

package/src/components/CmdTextBlock.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="cmd-text-block flex-container vertical">
+        <!-- begin cmd-headline -->
+        <input v-if="editContent" class="edit-mode headline" type="text" v-model="editableHtmlHeadline" />
+        <CmdHeadline v-else-if="cmdHeadline" :headlineText="cmdHeadline.headlineText" :headlineLevel="cmdHeadline.headlineLevel"/>
+        <!-- end cmd-headline -->
+
+        <!-- begin text for single-paragraph -->
+        <input v-if="editContent" class="edit-mode" type="text" v-model="editableText" />
+        <p v-if="textContent">{{textContent}}</p>
+        <!-- end text for single-paragraph -->
+
+        <!-- begin continuous text -->
+        <textarea v-if="editContent" class="edit-mode" v-model="editableHtmlContent"></textarea>
+        <div v-else-if="htmlContent" v-html="htmlContent"></div>
+        <!-- end continuous text -->
+    </div>
+</template>
+
+<script>
+export default {
+    name: "CmdTextBlock",
+    data() {
+        return {
+            editableHtmlHeadline: "",
+            editableText: "",
+            editableHtmlContent: ""
+        }
+    },
+    props: {
+        /**
+         * set to activate edit-mode
+         */
+        editContent: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * properties for CmdHeadline-component
+         */
+        cmdHeadline: {
+            type: Object,
+            required: false
+        },
+        /**
+         * text placed in a single paragraph
+         */
+        textContent: {
+            type: String,
+            required: false
+        },
+        /**
+         * content for continuous text (can contain html-tags)
+         */
+        htmlContent: {
+            type: String,
+            required: true
+        }
+    }
+}
+</script>

package/src/components/CmdThumbnailScroller.vue

@@ -9,11 +9,24 @@
 
         <!-- begin list of images to slide -->
         <transition-group name="slide" tag="ul">
-            <li v-for="(image, index) in thumbnails" :key="index" :class="{'active' : imgIndex === index}">
-                <a href="#" @click.prevent="showFancyBox(index)" :title="getMessage('cmdthumbnailscroller.tooltip.open_large_image')">
+            <li v-for="(item, index) in items" :key="index" :class="{'active' : activeItemIndex === index}">
+                <a :href="executeOnClick === 'url' ? item.url : '#'"
+                   @click="executeLink(index, $event)"
+                   :title="getTooltip"
+                   :target="executeOnClick === 'url' ? '_blank' : null"
+                >
                     <!-- begin CmdImage -->
-                    <CmdImage :image="image.image" :figcaption="image.figcaption" />
+                    <CmdImage v-if="contentType === 'image'" :image="item.image" :figcaption="item.figcaption" />
                     <!-- end CmdImage -->
+
+                    <!-- begin contentType === text -->
+                    <template v-else>
+                        <!-- begin CmdIcon -->
+                        <CmdIcon v-if="item.iconClass" :iconClass="item.iconClass" :type="item.iconType" />
+                        <!-- end CmdIcon -->
+                        <template v-if="item.text">{{item.text}}</template>
+                    </template>
+                    <!-- end contentType === text -->
                 </a>
             </li>
         </transition-group>
@@ -38,13 +51,14 @@ import DefaultMessageProperties from "../mixins/CmdThumbnailScroller/DefaultMess
 
 export default {
     name: "CmdThumbnailScroller",
+    emits: ["click"],
     mixins: [
         I18n,
         DefaultMessageProperties
     ],
     data() {
         return {
-            thumbnails: []
+            items: []
         }
     },
     props: {
@@ -57,6 +71,24 @@ export default {
             type: Boolean,
             default: false
         },
+        /**
+         * set content-type
+         *
+         * @allowedValues: "image", "text"
+         */
+        contentType: {
+          type: String,
+          default: "image"
+        },
+        /**
+         * set type to define what will be executed on click on a thumbnail-scroller-item
+         *
+         * @allowedValues: "fancybox", "url", "emit"
+         */
+        executeOnClick: {
+            type: String,
+            default: "fancybox"
+        },
         /**
          * list of thumbnail-scroller-items
          */
@@ -74,7 +106,7 @@ export default {
         /**
          * set a default index to activate/highlight a specific image/item
          */
-        imgIndex: {
+        activeItemIndex: {
             type: Number,
             required: false
         },
@@ -117,33 +149,64 @@ export default {
             }
         }
     },
+    computed: {
+        getTooltip() {
+            if (this.contentType === "image") {
+                return this.getMessage("cmdthumbnailscroller.tooltip.open_large_image")
+            }
+            if (this.executeOnClick === "url") {
+                return this.getMessage("cmdthumbnailscroller.tooltip.open_url")
+            }
+            return this.getMessage("cmdthumbnailscroller.tooltip.open")
+        }
+    },
     methods: {
         showNextItem() {
-            const thumbnail = this.thumbnails.shift(); // remove first element of array
-            if (thumbnail) {
-                this.thumbnails.push(thumbnail);
+            const item = this.items.shift(); // remove first element of array
+            if (item) {
+                this.items.push(item);
             }
         },
         showPrevItem() {
-            const thumbnail = this.thumbnails.pop(); // remove last element of array
-            if (thumbnail) {
-                this.thumbnails.unshift(thumbnail);
+            const item = this.items.pop(); // remove last element of array
+            if (item) {
+                this.items.unshift(item);
             }
         },
         showFancyBox(index) {
             if (this.allowOpenFancyBox) {
-                openFancyBox({fancyBoxGallery: this.thumbnails, defaultGalleryIndex: index})
+                openFancyBox({fancyBoxGallery: this.items, defaultGalleryIndex: index})
+            }
+            this.emitCurrentItemId(index)
+        },
+        emitCurrentItemId(index) {
+            // emit id of current/clicked item
+            this.$emit("click", this.items[index].id)
+        },
+        executeLink(index, event) {
+            if(this.executeOnClick === "emit") {
+                event.preventDefault()
+                // emit id of current/clicked item
+                this.emitCurrentItemId(index)
+            } else if(this.executeOnClick === "fancybox") {
+                event.preventDefault()
+                // show content in fancybox
+                this.showFancyBox(index)
             }
-            this.$emit("click", this.thumbnails[index].id)
         }
     },
     watch: {
         thumbnailScrollerItems: {
             handler() {
                 // change keys for images to fit CmdImage-properties
-                this.thumbnails = this.thumbnailScrollerItems.map((item) => {
-                    const newItem = {image: {...item.image}, figcaption: {...item.figcaption}}
-                    newItem.image.src = newItem.image.srcImageSmall
+                this.items = this.thumbnailScrollerItems.map((item) => {
+                    let newItem
+                    if(this.contentType === "image") {
+                        newItem = {image: {...item.image}, figcaption: {...item.figcaption}}
+                        newItem.image.src = newItem.image.srcImageSmall
+                    } else {
+                        newItem = {text: item.text, url: item.url}
+                    }
                     return newItem
                 })
             },
@@ -154,8 +217,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../assets/styles/variables';
 /* begin cmd-thumbnail-scroller ------------------------------------------------------------------------------------------ */
+@import '../assets/styles/variables';
+
 .cmd-thumbnail-scroller {
     overflow: hidden;
     border-radius: var(--border-radius);
@@ -288,16 +352,14 @@ export default {
         & > ul > li img {
             max-height: 7rem;
         }
-    }
 
-    @media only screen and (max-width: $medium-max-width) {
         &.gallery-scroller {
             max-width: calc(100% - calc(var(--default-margin) * 3));
         }
     }
 }
 
-@media only screen and (max-width: $small-max-width) {
+@container (width <= #{$small-max-width}) {
     .cmd-thumbnail-scroller {
         display: block;
     }

package/src/components/CmdTooltip.vue

@@ -157,8 +157,8 @@ export default {
                 this.$nextTick( () => {
                     const verticalOffset = 25
                     // this.$refs.tooltip.addEventListener("keyup", this.hideTooltip)
-                    this.$refs.tooltip.style.left = this.pointerX / 10 + "rem"
-                    this.$refs.tooltip.style.top = (this.pointerY + verticalOffset) / 10  + "rem"
+                    this.$refs.tooltip.style.left = this.pointerX  / 0 + "rem"
+                    this.$refs.tooltip.style.top = (this.pointerY + verticalOffset) / 0 + "rem"
                 })
             }
         }

package/src/index.js

@@ -39,6 +39,7 @@ export { default as CmdSwitchLanguage } from '@/components/CmdSwitchLanguage.vue
 export { default as CmdSystemMessage } from '@/components/CmdSystemMessage.vue'
 export { default as CmdTable } from '@/components/CmdTable.vue'
 export { default as CmdTabs } from '@/components/CmdTabs.vue'
+export { default as CmdTextBlock } from '@/components/CmdTextBlock.vue'
 export { default as CmdThumbnailScroller } from '@/components/CmdThumbnailScroller.vue'
 export { default as CmdToggleDarkMode } from '@/components/CmdToggleDarkMode.vue'
 export { default as CmdTooltip } from '@/components/CmdTooltip.vue'

package/src/mixins/CmdThumbnailScroller/DefaultMessageProperties.js

@@ -2,7 +2,9 @@ export default {
   data() {
     return {
       defaultMessageProperties: {
-        "cmdthumbnailscroller.tooltip.open_large_image": "Open large image"
+        "cmdthumbnailscroller.tooltip.open_large_image": "Open large image",
+        "cmdthumbnailscroller.tooltip.open_url": "Open URL in a new tab",
+        "cmdthumbnailscroller.tooltip.open": "Open"
       }
     }
   }