comand-component-library 3.1.45 → 3.1.48

package/src/components/CmdTabs.vue

@@ -2,7 +2,7 @@
     <div class="cmd-tabs">
         <ul :class="{'stretch-tabs' : stretchTabs}">
             <li :class="{active : showTab === index}" v-for="(tab, index) in tabs" :key="index" role="tab">
-                <a @click.prevent="showTab = index" :title="!tab.name ? tab.tooltip : false">
+                <a @click.prevent="setActiveTab(index)" :title="!tab.name ? tab.tooltip : false">
                     <span v-if="tab.iconClass">{{ tab.iconClass }}</span>
                     <span v-if="tab.name">{{ tab.name }}</span>
                 </a>
@@ -10,25 +10,47 @@
         </ul>
         <template v-if="useSlot">
             <div v-show="showTab === index" v-for="(tab, index) in tabs" :key="index" aria-live="assertive">
+                <!-- begin slot-content -->
                 <slot :name="'tab-content-' + index"></slot>
+                <!-- end slot-content -->
             </div>
         </template>
         <div v-else aria-live="assertive">
-            <h3 class="headline">{{ tabs[showTab].headline }}</h3>
+            <!-- begin CmdCustomHeadline -->
+            <CmdCustomHeadline
+               v-bind="cmdCustomHeadline"
+               :headlineText="tabs[showTab].headline"
+            />
+            <!-- end CmdCustomHeadline -->
+
             <div v-html="tabs[showTab].htmlContent"></div>
         </div>
     </div>
 </template>
 
 <script>
+// import components
+import CmdCustomHeadline from "./CmdCustomHeadline"
+
 export default {
     name: "CmdTabs",
+    components: {
+        CmdCustomHeadline
+    },
     data() {
         return {
-            showTab: 0
+            showTab: this.activeTab
         }
     },
+    emits: ["active-tab"],
     props: {
+        /**
+         * properties for CmdCustomHeadline-component
+         */
+        cmdCustomHeadline: {
+            type: Object,
+            required: false
+        },
         /**
          * activate if tabs should be (equally) stretched horizontally over full width of tab-content
          */
@@ -49,6 +71,24 @@ export default {
         useSlot: {
             type: Boolean,
             default: false
+        },
+        /**
+         * set default active/shown tab
+         */
+        activeTab: {
+            type: Number,
+            default: 0
+        }
+    },
+    methods: {
+      setActiveTab(index) {
+          this.showTab = index
+          this.$emit("active-tab", index)
+      }
+    },
+    watch: {
+        activeTab() {
+            this.showTab = this.activeTab
         }
     }
 }

package/src/components/CmdThumbnailScroller.vue

@@ -1,6 +1,13 @@
 <template>
     <div :class="['cmd-thumbnail-scroller', {'gallery-scroller' : !allowOpenFancyBox}]">
-        <CmdSlideButton @click.prevent="showPrevItem" slideButtonType="prev" />
+        <!-- begin CmdSlideButton -->
+        <CmdSlideButton
+            @click.prevent="showPrevItem"
+            slideButtonType="prev"
+        />
+        <!-- end CmdSlideButton -->
+
+        <!-- begin list of images to slide -->
         <transition-group name="slide" tag="ul">
             <li v-for="(image, index) in thumbnails" :key="image.imgId" :class="{'active' : imgIndex === index}">
                 <a href="#" @click.prevent="showFancyBox(index)">
@@ -12,7 +19,14 @@
                 </a>
             </li>
         </transition-group>
-        <CmdSlideButton @click.prevent="showNextItem" :slideButtons="cmdSlideButtons.next"/>
+        <!-- end list of images to slide -->
+
+        <!-- begin CmdSlideButton -->
+        <CmdSlideButton
+            @click.prevent="showNextItem"
+            :slideButtons="cmdSlideButtons.next"
+        />
+        <!-- end CmdSlideButton -->
     </div>
 </template>
 
@@ -22,14 +36,14 @@ import CmdSlideButton from "./CmdSlideButton.vue"
 
 export default {
     name: "CmdThumbnailScroller",
+    components: {
+        CmdSlideButton
+    },
     data() {
         return {
             thumbnails: []
         }
     },
-    components: {
-        CmdSlideButton
-    },
     props: {
         /**
          * list of thumbnail-scroller-items
@@ -65,7 +79,9 @@ export default {
             }
         },
         /**
-         * properties for cmdSlideButtons-component
+         * properties for CmdSlideButtons-component
+         *
+         * @requiredForAccessibility: partial
          */
         cmdSlideButtons: {
             type: Object,

package/src/components/CmdTooltip.vue

@@ -1,17 +1,168 @@
 <template>
-    <span class="cmd-tooltip">{{ tooltipText }}</span>
+    <div v-if="tooltipVisibility" :class="['cmd-tooltip', status]" ref="tooltip" aria-role="tooltip">
+        <div v-if="cmdCustomHeadline || iconClose.show" class="headline-wrapper">
+            <!-- begin CmdCustomHeadline -->
+            <CmdCustomHeadline v-if="cmdCustomHeadline"
+                               :iconClass="cmdCustomHeadline.iconClass"
+                               :preHeadline="cmdCustomHeadline.preHeadline"
+                               :headlineLevel="cmdCustomHeadline.headlineLevel"
+                               :headlineText="cmdCustomHeadline.headlineText"/>
+            <!-- end CmdCustomHeadline -->
+
+            <!-- begin icon to close tooltip -->
+            <a v-if="iconClose.show && toggleVisibilityByClick" href="#" @click.prevent="tooltipVisibility = false" :title="iconClose.tooltip">
+                <span :class="iconClose.iconClass"></span>
+            </a>
+            <!-- end icon to close tooltip -->
+        </div>
+        <!-- begin slot-content -->
+        <slot>
+            {{ tooltipText }}
+        </slot>
+        <!-- end slot-content -->
+    </div>
 </template>
 
 <script>
+// import components
+import CmdCustomHeadline from "./CmdCustomHeadline"
+
 export default {
     name: "CmdTooltip",
+    components: {
+        CmdCustomHeadline
+    },
+    data() {
+        return {
+            tooltipVisibility: false,
+            pointerX: 0,
+            pointerY: 0
+        }
+    },
     props: {
         /**
-         * text for tooltip
+         * properties for CmdCustomHeadline-component
+         */
+        cmdCustomHeadline: {
+            type: Object,
+            default() {}
+        },
+        /**
+         * text shown as tooltip
          */
         tooltipText: {
             type: String,
-            required: true
+            required: false
+        },
+        /**
+         * id of related input-element
+         */
+        relatedId: {
+            type: String,
+            required: false
+        },
+        /**
+         * status
+         *
+         * @allowedValues: error, warning, success, info
+         */
+        status: {
+            type: String,
+            required: false
+        },
+        /**
+         * icon 'close'
+         *
+         * @requiredForAccessibility: partial
+         */
+        iconClose: {
+          type: Object,
+          default() {
+              return {
+                  show: true,
+                  iconClass: "icon-cancel",
+                  tooltip: "Close this tooltip!"
+              }
+          }
+        },
+        /**
+         * enable toggling tooltip-visibility by click
+         */
+        toggleVisibilityByClick: {
+            type: Boolean,
+            default: false
+        }
+    },
+    mounted() {
+        if(this.relatedId) {
+            const relatedElement = document.getElementById(this.relatedId)
+
+            if(relatedElement) {
+                relatedElement.addEventListener("mouseenter", this.showTooltip)
+                document.addEventListener("scroll", this.hideTooltip) // avoid fixed tooltip on scroll
+                document.addEventListener("keyup", this.hideTooltipOnEsc) // close tooltip by using "escape"-key
+
+                if (this.toggleVisibilityByClick) {
+                    relatedElement.addEventListener("click", this.toggleTooltipVisibility)
+                } else {
+                    relatedElement.addEventListener("mouseleave", this.hideTooltip)
+                }
+            }
+        }
+    },
+    methods: {
+        toggleTooltipVisibility(event) {
+            this.getPointerPosition(event)
+            this.tooltipVisibility = !this.tooltipVisibility
+        },
+        showTooltip(event) {
+            if(!this.toggleVisibilityByClick) {
+                this.tooltipVisibility = true
+            }
+            this.getPointerPosition(event)
+        },
+        hideTooltipOnEsc(event) {
+            if(this.allowEscapeKey) {
+                if (event.key === 'Escape' || event.key === 'Esc') {
+                    this.hideTooltip()
+                }
+            }
+        },
+        hideTooltip() {
+            this.tooltipVisibility = false
+        },
+        getPointerPosition(event) {
+            this.pointerX = event.clientX
+            this.pointerY = event.clientY
+        }
+    },
+    unmounted() {
+        if(this.relatedId) {
+            const relatedElement = document.getElementById(this.relatedId)
+
+            if(relatedElement) {
+                relatedElement.removeEventListener("mouseenter", this.showTooltip)
+                document.removeEventListener("scroll", this.hideTooltip)
+                document.removeEventListener("keyup", this.hideTooltipOnEsc)
+
+                if (this.toggleVisibilityByClick) {
+                    relatedElement.removeEventListener("click", this.toggleTooltipVisibility)
+                } else {
+                    relatedElement.removeEventListener("mouseleave", this.showTooltip)
+                }
+            }
+        }
+    },
+    watch: {
+        tooltipVisibility() {
+            if(this.tooltipVisibility) {
+                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"
+                })
+            }
         }
     }
 }
@@ -20,16 +171,38 @@ export default {
 <style lang="scss">
 /* begin cmd-tooltip ------------------------------------------------------------------------------------------ */
 .cmd-tooltip {
-    position: absolute;
-    padding: .2rem calc(var(--default-padding) / 2);
-    top: .3rem;
+    padding: .6rem .7rem .4rem .7rem;
     line-height: 100%;
-    right: 0;
+    font-size: 1.1rem;
+    position: fixed;
     background: var(--pure-white);
-    border: var(--primary-border);
-    font-weight: bold;
-    font-size: 1.2rem;
-    border-bottom: 0;
+    z-index: 100;
+    border: var(--default-border);
+    border-color: hsl(220, 2%, 25%);
+    border-right-color: hsl(240, 1%, 81%);
+    border-bottom-color: hsl(240, 1%, 81%);
+    display: flex;
+    flex-direction: column;
+
+    .headline-wrapper {
+        display: flex;
+
+        a {
+            margin-left: auto;
+
+            span[class*="icon"] {
+                padding-left: 1rem;
+                font-size: 1.2rem;
+            }
+        }
+    }
+}
+
+@-moz-document url-prefix() {
+    .cmd-tooltip {
+        font-size: 1.3rem;
+        border-color: hsl(0, 0%, 46%);
+    }
 }
 
 /* end cmd-tooltip ------------------------------------------------------------------------------------------ */