comand-component-library 3.2.7 → 3.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.2.07",
+  "version": "3.2.9",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/App.vue

@@ -932,7 +932,7 @@
                 <h2 class="headline-demopage">Fancybox</h2>
                 <a href="#" @click.prevent="showFancyBox('text','Some text')">Open FancyBox with text</a>
                 <a href="#"
-                   @click.prevent="showFancyBox('image', 'media/images/content-images/landscape-large.jpg', 'Alternative text')"
+                   @click.prevent="showFancyBox('image', 'media/images/content-images/landscape-large.jpg', 'Alternative text', 'figcaption')"
                    title="Open FancyBox with large image"
                 >
                    <img src="media/images/content-images/landscape-small.jpg" alt="Alternative text"/>
@@ -1604,11 +1604,11 @@ export default {
         showError() {
             alert("Error")
         },
-        showFancyBox(type, content, altText) {
+        showFancyBox(type, content, altText, figcaption) {
             if (type === 'text') {
                 openFancyBox({content: content, cmdHeadline: {show: true, headlineText: "Fancybox headline", headlineLevel: 3}})
             } else if (type === 'image') {
-                openFancyBox({url: content, altText: altText, cmdHeadline: {show: true, headlineText: "Fancybox headline", headlineLevel: 3}})
+                openFancyBox({url: content, altText: altText, cmdHeadline: {show: true, headlineText: "Fancybox headline", headlineLevel: 3}, figcaption: figcaption})
             }
         },
         getOptionName(option) {

package/src/assets/data/fake-select-options-with-icons.json

@@ -13,5 +13,10 @@
     "text": "Option 3",
     "value": "3",
     "iconClass": "icon-phone"
+  },
+  {
+    "value": "4",
+    "iconClass": "icon-fax",
+    "tooltip": "Fax"
   }
 ]

package/src/components/CmdFakeSelect.vue

@@ -47,12 +47,26 @@
         <ul :class="{'open': showOptions}" @clickout="closeOptions" :aria-expanded="showOptions">
             <li>
                 <!-- begin default/selected-option -->
-                <a href="#" @click.prevent="toggleOptions" @blur="onBlur">
+                <a href="#" @click.prevent="toggleOptions" @blur="onBlur" :title="optionIcon?.tooltip">
+                    <!-- begin show flag -->
                     <img v-if="type === 'country' && optionCountry" :src="pathFlag(optionCountry)" :alt="optionCountry" :class="['flag', optionCountry]"/>
+                    <!-- end show flag -->
+
+                    <!-- begin show color-box -->
                     <span v-else-if="type === 'color'" :style="'background: ' + optionColor"></span>
-                    <span v-if="optionIcon" :class="optionIcon"></span>
-                    <span class="option-name" :style="limitWidthStyle">{{ optionName }}</span>
+                    <!-- end show color-box -->
+
+                    <!-- begin optional icon -->
+                    <span v-if="optionIcon?.iconClass" :class="optionIcon?.iconClass"></span>
+                    <!-- end optional icon -->
+
+                    <!-- begin text -->
+                    <span v-if="optionName" class="option-name" :style="limitWidthStyle">{{ optionName }}</span>
+                    <!-- end text -->
+
+                    <!-- begin custom dropdown-icon -->
                     <span v-if="dropdownIcon" :class="dropdownIcon.iconClass" :title="dropdownIcon.tooltip"></span>
+                    <!-- end custom dropdown-icon -->
                 </a>
                 <!-- end default/selected-option-->
 
@@ -60,9 +74,13 @@
                 <ul v-if="type === 'default' && showOptions" role="listbox">
                     <li v-for="(option, index) in selectData" :key="index" role="option" :aria-selected="option.value === modelValue">
                         <!-- begin type 'href' -->
-                        <a v-if="optionLinkType === 'href'" href="#" @click.prevent="selectOption(option.value)" :class="{'active' : option.value === modelValue}">
+                        <a v-if="optionLinkType === 'href'"
+                           href="#" @click.prevent="selectOption(option.value)"
+                           :class="{'active' : option.value === modelValue}"
+                           :title="option.tooltip"
+                        >
                             <span v-if="option.iconClass" :class="option.iconClass"></span>
-                            <span>{{ option.text }}</span>
+                            <span v-if="option.text">{{ option.text }}</span>
                         </a>
                         <!-- end type 'href' -->
 
@@ -76,27 +94,34 @@
                 </ul>
                 <!-- end default dropdown (incl. optional icon) -->
 
-                <!-- begin dropdown with checkboxes -->
+                <!-- begin dropdown with checkboxes/countries/colors -->
                 <ul v-else-if="type !== 'default' && type !== 'content' && showOptions" :class="{'checkbox-options': type === 'checkboxOptions'}" :aria-expanded="showOptions">
                     <li v-for="(option, index) in selectData" :key="index">
+                        <!-- begin checkboxes -->
                         <label v-if="type === 'checkboxOptions'" :for="'option-' + (index + 1)" :class="{'active' : modelValue.includes(`${option.value}`)}">
                             <input type="checkbox" :value="option.value" @change="optionSelect"
                                    :checked="compareValues(option.value)" :id="'option-' + (index + 1)"/>
                             <span>{{ option.text }}</span>
                         </label>
+                        <!-- end checkboxes -->
 
+                        <!-- begin country-flags -->
                         <a v-else-if="type === 'country'" href="#"
                            @click.prevent="selectOption(option.value)" :class="{'active' : option.value === modelValue}">
                             <img class="flag" :src="pathFlag(option.value)"
                                  :alt="option.text"/>
                             <span>{{ option.text }}</span>
                         </a>
+                        <!-- end country-flags -->
 
+                        <!-- begin color-boxes -->
                         <a v-else-if="type === 'color'" href="#" @click.prevent="selectOption(option.value)" :class="{'active' : option.value === modelValue}">
                             <span class="color" :style="'background: ' + option.value"></span>
                             <span>{{ option.text }}</span>
                         </a>
+                        <!-- end color-boxe -->
                     </li>
+
                     <!-- begin (de)select all options -->
                     <li v-if="showSelectAllOptions && type === 'checkboxOptions'" class="select-all-options">
                         <a href="#" @click.prevent="toggleAllOptions">
@@ -106,7 +131,7 @@
                     </li>
                     <!-- end (de)select all options -->
                 </ul>
-                <!-- end dropdown with checkboxes -->
+                <!-- end dropdown with checkboxes/countries/colors -->
 
                 <!-- begin dropdown with slot -->
                 <template v-else-if="type === 'content' && showOptions" :aria-expanded="showOptions">
@@ -260,11 +285,11 @@ export default {
         optionName() {
             // fake a native selectbox
             if (this.type !== "checkboxOptions" && this.type !== "content" && this.modelValue) {
-                const result = this.selectData.find(option => option.value === this.modelValue)?.text
+                const result = this.selectData.find(option => option.value === this.modelValue)
 
                 // if find() returns some data, return this data
                 if (result) {
-                    return result
+                   return result.text
                 }
             }
 
@@ -284,9 +309,15 @@ export default {
         // get the displayed icon (only available for default selectbox)
         optionIcon() {
             if (this.type === "default") {
-                return this.selectData.find(option => {
+
+                const selectedOption = this.selectData.find(option => {
                     return option.value === this.modelValue
-                })?.icon?.iconClass
+                })
+
+                return {
+                    iconClass: selectedOption?.iconClass,
+                    tooltip: selectedOption?.tooltip
+                }
             }
             return null
         },

package/src/components/CmdFancyBox.vue

@@ -45,6 +45,7 @@
                        id="close-dialog"
                        :class="fancyboxOptions.closeIcon.iconClass"
                        :title="fancyboxOptions.closeIcon.tooltip"
+                       ref="close-dialog"
                        @click.prevent="close">
                     </a>
                     <!-- end close-icon -->
@@ -54,7 +55,7 @@
             <div :class="['outer-content-wrapper', {'grayscale' : printInGrayscale}]">
                 <div v-if="fancyBoxImageUrl" class="content">
                     <figure>
-                        <img :src="fancyBoxImageUrl" :alt="altText" />#
+                        <img :src="fancyBoxImageUrl" :alt="altText" />
                         <figcaption v-if="figcaption">{{ figcaption }}</figcaption>
                     </figure>
                 </div>
@@ -108,8 +109,8 @@ import CmdSlideButton from "./CmdSlideButton.vue"
 import CmdThumbnailScroller from './CmdThumbnailScroller.vue'
 
 const openFancyBox = (config) => {
-    const node = document.createElement('div');
-    document.querySelector('body').appendChild(node);
+    const node = document.createElement("div");
+    document.querySelector("body").appendChild(node);
     const fb = createApp(FancyBox, {
         ...config,
         show: true
@@ -280,10 +281,8 @@ const FancyBox = defineComponent({
         )
     },
     mounted() {
-        // avoid scrolling if fancybox is shown
         if (this.showFancyBox) {
-            document.querySelector("body").classList.add("avoid-scrolling")
-            this.$refs.dialog.showModal()
+            this.showDialog()
         }
     },
     beforeUnmount() {
@@ -293,6 +292,14 @@ const FancyBox = defineComponent({
         }
     },
     methods: {
+        showDialog() {
+            // avoid scrolling if fancybox is shown
+                document.querySelector("body").classList.add("avoid-scrolling")
+                this.$refs.dialog.showModal()
+
+                // overwrite default behavior of dialog-element, which sets focus on first focusable element inside
+                this.$refs["close-dialog"].focus()
+        },
         updateContentOnPropertyChange() {
             this.fancyBoxImageUrl = this.fancyBoxContent = this.fancyBoxElements = null
             if (this.url) {
@@ -359,21 +366,13 @@ const FancyBox = defineComponent({
         showFancyBox: {
             handler() {
                 if (this.showFancyBox) {
-                    // add listener and class to disable scroll
-                    // this.$_FancyBox_verticalScrollPosition = window.scrollY
-                    document.querySelector("body").classList.add("avoid-scrolling")
-                    // window.addEventListener("scroll", this.$_FancyBox_scrollHandler)
-                    this.$refs.dialog.showModal()
+                    this.showDialog()
                 } else {
                     // remove class to re-enable scrolling
                     document.querySelector("body").classList.remove("avoid-scrolling")
-                    // window.removeEventListener("scroll", this.$_FancyBox_scrollHandler)
-                    // console.log("$_FancyBox_verticalScrollPosition", this.$_FancyBox_verticalScrollPosition)
-                    // window.scrollTo(0, this.$_FancyBox_verticalScrollPosition)
                     this.$refs.dialog.close()
                 }
-            },
-            immediate: false
+            }
         }
     }
 })
@@ -429,7 +428,7 @@ export default FancyBox
 
     &.image {
         .outer-content-wrapper {
-            overflow-y: hidden;
+            max-height: none;
         }
 
         img {

package/src/components/CmdTabs.vue

@@ -138,6 +138,14 @@ export default {
                         color: inherit;
                     }
                 }
+
+                &.active {
+                   color: var(--pure-white);
+
+                    &:hover, &:active, &:focus {
+                        color: var(--hyperlink-color);
+                    }
+                }
             }
         }
 

package/src/directives/focus.js

@@ -2,7 +2,7 @@ export default {
     // el = real dom-element
     mounted(el) {
         // check if element is native input-element
-        if(el.tagName === "INPUT" || el.tagName === "SELECT" || el.tagName === "TEXTAREA") {
+        if(el.tagName === "INPUT" || el.tagName === "SELECT" || el.tagName === "TEXTAREA" || el.tagName === "A") {
             el.focus()
         } else {
             // check if component is used, which contains a native input-element