comand-component-library 3.2.8 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.2.08",
+  "version": "3.3.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -18,7 +18,7 @@
   ],
   "dependencies": {
     "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^3.2.91",
+    "comand-frontend-framework": "^3.2.95",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",
     "sass": "^1.54.9",

package/src/App.vue

@@ -2,8 +2,6 @@
 <template>
     <div id="page-wrapper">
         <a id="anchor-back-to-top"></a>
-        <Icon icon="mdi-light:home" class="icon-" />
-       ICON: <Icon icon="mdi:account-cowboy-hat" />
         <!-- begin site-header --------------------------------------------------------------------------------------------------------------------------------------------------->
         <CmdSiteHeader :sticky="true">
             <template v-slot:top-header>
@@ -41,24 +39,25 @@
                         <li><a href="#section-fancybox">Fancybox</a></li>
                     </ul>
                     <ul>
-                        <li><a href="#section-google-maps-integration">Google-Maps&trade;-Integration</a></li>
+                        <li><a href="#section-google-mapsn">Google-Maps&trade;</a></li>
+                        <li><a href="#section-icons">Icons</a></li>
                         <li><a href="#section-image-gallery">Image Gallery</a></li>
                         <li><a href="#section-image-zoom">Image-Zoom</a></li>
                         <li><a href="#section-list-of-links">List Of Links</a></li>
                         <li><a href="#section-login-form">Login Form</a></li>
                         <li><a href="#section-main-navigation">Main-Navigation</a></li>
-                        <li><a href="#section-multistep-form-progress-bar">Multistepform-Progressbar</a></li>
                     </ul>
                     <ul>
+                        <li><a href="#section-multistep-form-progress-bar">Multistepform-Progressbar</a></li>
                         <li><a href="#section-pager">Pager</a></li>
                         <li><a href="#section-share-buttons">Share Buttons</a></li>
                         <li><a href="#section-site-header">Site Header</a></li>
                         <li><a href="#section-site-search">Site Search</a></li>
                         <li><a href="#section-slideshow">Slideshow</a></li>
                         <li><a href="#section-system-message">System-Message</a></li>
-                        <li><a href="#section-tables">Tables</a></li>
                     </ul>
                     <ul>
+                        <li><a href="#section-tables">Tables</a></li>
                         <li><a href="#section-tabs">Tabs</a></li>
                         <li><a href="#section-thumbnail-scroller">Thumbnail-Scroller</a></li>
                         <li><a href="#section-toggle-darkmode">ToggleDarkMode</a></li>
@@ -932,7 +931,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"/>
@@ -940,25 +939,49 @@
             </CmdWidthLimitationWrapper>
             <!-- end fancybox ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
-            <a id="section-google-maps-integration"></a>
+            <!-- begin google-maps ------------------------------------------------------------------------------------------------------------------------------------------------------->
+            <a id="section-google-maps"></a>
             <CmdWidthLimitationWrapper>
-                <h2 class="headline-demopage">Google Maps&trade;-Integration</h2>
+                <h2 class="headline-demopage">Google Maps&trade;</h2>
                 <CmdGoogleMaps :address="addressData"/>
             </CmdWidthLimitationWrapper>
+            <!-- end google-maps ------------------------------------------------------------------------------------------------------------------------------------------------------->
+
+            <!-- begin icons ------------------------------------------------------------------------------------------------------------------------------------------------------->
+            <a id="section-icons"></a>
+            <CmdWidthLimitationWrapper>
+                <h2 class="headline-demopage">Icons</h2>
+                <ul>
+                    <li><span>Icon from local iconfont</span><CmdIcon iconClass="icon-home" /></li>
+                    <li><span>Icon from iconify-api (icomoon-font)</span><CmdIcon iconClass="icomoon-free:home" /></li>
+                    <li><span>Icon from iconify-api (bootstrap-font)</span><CmdIcon iconClass="bi:house-fill" /></li>
+                    <li><span>Icon from iconify-api (material-design-font)</span><CmdIcon iconClass="mdi:home" /></li>
+                    <li><span>Icon from iconify-api (font-awesome-solid-font)</span><CmdIcon iconClass="fa6-solid:house-chimney" /></li>
+
+                </ul>
+            </CmdWidthLimitationWrapper>
+            <!-- end icons ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+            <!-- begin image-gallery------------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-image-gallery"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Image-Gallery</h2>
-                <CmdImageGallery :images="imageGalleryData"/>
+                <CmdImageGallery :images="imageGalleryData" />
             </CmdWidthLimitationWrapper>
+            <!-- end image-gallery ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+            <!-- begin image-zoom ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-image-zoom"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Image-Zoom</h2>
-                <CmdImageZoom small-image-url="media/images/content-images/logo-business-edition-landscape.jpg"
-                              large-image-url="media/images/content-images/logo-business-edition-landscape-large.jpg"/>
+                <CmdImageZoom
+                    small-image-url="media/images/content-images/logo-business-edition-landscape.jpg"
+                    large-image-url="media/images/content-images/logo-business-edition-landscape-large.jpg"
+                />
             </CmdWidthLimitationWrapper>
+            <!-- end image-zoom ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+            <!-- begin login-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-login-form"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Login Form</h2>
@@ -967,13 +990,15 @@
                 </CmdForm>
                 <p>LoginData: {{ loginData }}</p>
             </CmdWidthLimitationWrapper>
+            <!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
+
 
             <!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-list-of-links"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">List Of Links</h2>
                 <h3>Vertical</h3>
-                <CmdListOfLinks :links="listOfLinksData"/>
+                <CmdListOfLinks :links="listOfLinksData" />
                 <h3>Horizontal (aligned left, with headline)</h3>
                 <CmdListOfLinks
                     orientation="horizontal"
@@ -1007,6 +1032,7 @@
             <a id="section-multistep-form-progress-bar"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Multistepform-Progressbar</h2>
+                <h3>Steps with icons</h3>
                 <CmdMultistepFormProgressBar
                     :multisteps="multistepsData.withIcon"
                     separatorIconClass="icon-single-arrow-right"
@@ -1015,7 +1041,7 @@
                 <div>
                     <p>Page {{ showPageMultistep }}</p>
                 </div>
-                <h2 class="headline-demopage">Multistepform-Progressbar</h2>
+                <h3>Steps with number</h3>
                 <CmdMultistepFormProgressBar
                     :showStepNumber="true"
                     :multisteps="multistepsData.withoutIcon"
@@ -1318,9 +1344,6 @@
 </template>
 
 <script>
-import {Icon} from "@iconify/vue"
-
-
 // import used example data
 import accordionData from '@/assets/data/accordion.json'
 import addressData from '@/assets/data/address-data.json'
@@ -1369,6 +1392,7 @@ import CmdForm from "@/components/CmdForm.vue"
 import CmdFormElement from "@/components/CmdFormElement.vue"
 import CmdFormFilters from "@/components/CmdFormFilters.vue"
 import CmdGoogleMaps from "./components/CmdGoogleMaps"
+import CmdIcon from "./components/CmdIcon"
 import CmdImageGallery from "@/components/CmdImageGallery.vue"
 import CmdImageZoom from "@/components/CmdImageZoom.vue"
 import CmdInputGroup from "./components/CmdInputGroup"
@@ -1404,7 +1428,6 @@ import {localizedTime} from "./components/CmdOpeningHours"
 export default {
     name: "App",
     components: {
-        Icon,
         CmdListOfLinks,
         CmdAddressData,
         CmdBackToTopButton,
@@ -1422,6 +1445,7 @@ export default {
         CmdFormFilters,
         CmdFormElement,
         CmdGoogleMaps,
+        CmdIcon,
         CmdImageGallery,
         CmdImageZoom,
         CmdInputGroup,
@@ -1604,11 +1628,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/assets/data/icon.json

@@ -0,0 +1,17 @@
+{
+  "prefix": "cmd",
+  "icons": {
+    "3d-cursor": {
+      "body": "<path d=\"M13 4H4v9.01h2V6h7V4z\" fill=\"currentColor\"/><path d=\"M29.49 13.12l-9-5a1 1 0 0 0-1 0l-9 5A1 1 0 0 0 10 14v10a1 1 0 0 0 .52.87l9 5A1 1 0 0 0 20 30a1.05 1.05 0 0 0 .49-.13l9-5A1 1 0 0 0 30 24V14a1 1 0 0 0-.51-.88zM19 27.3l-7-3.89v-7.72l7 3.89zm1-9.45L13.06 14L20 10.14L26.94 14zm8 5.56l-7 3.89v-7.72l7-3.89z\" fill=\"currentColor\"/>",
+      "hidden": true
+    },
+    "building": {
+      "body": "<path fill=\"currentColor\" d=\"M28 2H16a2.002 2.002 0 0 0-2 2v10H4a2.002 2.002 0 0 0-2 2v14h28V4a2.002 2.002 0 0 0-2-2ZM9 28v-7h4v7Zm19 0H15v-8a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v8H4V16h12V4h12Z\"/><path fill=\"currentColor\" d=\"M18 8h2v2h-2zm6 0h2v2h-2zm-6 6h2v2h-2zm6 0h2v2h-2zm-6 6h2v2h-2zm6 0h2v2h-2z\"/>"
+    },
+    "linkedin": {
+      "body": "<path fill=\"currentColor\" d=\"M12,12h5.535v2.837h0.078C18.384,13.456,20.27,12,23.078,12C28.92,12,30,15.637,30,20.367V30h-5.77v-8.54\n\tc0-2.037-0.041-4.657-3-4.657c-3.006,0-3.463,2.219-3.463,4.51V30H12V12z\"/>\n<path fill=\"currentColor\" d=\"M2,12h6v18H2V12z\"/>\n<path fill=\"currentColor\" d=\"M8,7c0,1.657-1.343,3-3,3S2,8.657,2,7s1.343-3,3-3S8,5.343,8,7z\"/>"
+    }
+  },
+  "width": 32,
+  "height": 32
+}

package/src/assets/data/tabs.json

@@ -3,19 +3,21 @@
     "name": "Tab 1",
     "headlineText": "Tab 1 Headline",
     "headlineLevel": 4,
-    "iconClass": "icon-home",
+    "iconClass": "icomoon-free:airplane",
     "htmlContent": "<p>Inhalt 1</p>"
   },
   {
     "name": "Tab 2",
     "headlineText": "Tab 2 Headline",
     "headlineLevel": 4,
+    "iconClass": "icomoon-free:blocked",
     "htmlContent": "<p>Inhalt 2</p>"
   },
   {
     "name": "Tab 3",
     "headlineText": "Tab 3 Headline",
     "headlineLevel": 4,
+    "iconClass": "cmd:linkedin",
     "htmlContent": "<p>Inhalt 3</p>"
   }
 ]

package/src/components/CmdAddressData.vue

@@ -51,7 +51,7 @@
                 </dd>
                 <!-- end telephone -->
 
-                <!-- begin mobilephone -->
+                <!-- begin mobile phone -->
                 <dt v-if="addressData.mobilephone?.value">
                     <span v-if="addressData.mobilephone.iconClass && showLabelIcons" :class="addressData.mobilephone.iconClass" :title="getMessage('cmdaddressdata.labeltext.mobile_phone')"></span>
                     <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.mobile_phone')}}</span>
@@ -59,7 +59,7 @@
                 <dd v-if="addressData.mobilephone?.value">
                     <a :href="'tel:' + addressData.mobilephone" title="Call number" class="tel" v-telephone="addressData.mobilephone.value">{{ addressData.mobilephone.value  }}</a>
                 </dd>
-                <!-- end mobilephone -->
+                <!-- end mobile phone -->
 
                 <!-- begin fax -->
                 <dt v-if="addressData.fax?.value">

package/src/components/CmdBox.vue

@@ -368,7 +368,7 @@ export default {
             }
 
             > .toggle-icon, .toggle-icon > [class*="icon"] {
-                font-size: 1rem;
+                font-size: var(--font-size-small);
             }
         }
 

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">
@@ -240,6 +265,13 @@ export default {
         pathFlags: {
             type: String,
             default: "/media/images/flags"
+        },
+        /**
+         * default text if no option is selected (and first option is not used)
+         */
+        textPleaseSelect: {
+           type: String,
+           default: "Please select\u2026"
         }
     },
     computed: {
@@ -260,11 +292,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
                 }
             }
 
@@ -276,29 +308,37 @@ export default {
                     return this.modelValue.length + " options selected"
                 }
             } else if (this.selectData?.length) {
+                // return text of first option nothing is selected (and type !== checkboxOptions && type !== content)
                 return this.selectData[0].text
             }
 
-            return "Please select"
+            // return default text if nothing is selected (and no modelValue exists) (and type !== checkboxOptions && type !== content)
+            return this.textPleaseSelect
         },
         // 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
         },
         optionCountry() {
             if (this.type === "country") {
-                return this.modelValue
+                   return this.modelValue || this.selectData?.[0]?.value
             }
             return null
         },
         optionColor() {
             if (this.type === "color") {
-                return this.modelValue
+                return this.modelValue || this.selectData?.[0]?.value
             }
             return null
         },
@@ -464,7 +504,7 @@ export default {
 
                     > [class*="icon-"]:last-child {
                         margin-left: auto;
-                        font-size: 1rem;
+                        font-size: var(--icon-size-small);
                     }
 
                     &:hover, &:active, &:focus {

package/src/components/CmdFancyBox.vue

@@ -2,7 +2,7 @@
     <teleport to="body">
         <dialog
             ref="dialog"
-            :class="['cmd-fancybox', {'show-overlay': showOverlay, 'image' : fancyBoxImageUrl || fancyBoxGallery}]"
+            :class="['cmd-fancybox', {'show-overlay': showOverlay, 'image' : fancyBoxImageUrl || fancyBoxGallery, 'image-gallery': fancyBoxGallery}]"
             :aria-label="ariaLabelText"
         >
             <header class="flex-container">
@@ -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
+            }
         }
     }
 })
@@ -405,6 +404,10 @@ export default FancyBox
     overflow: hidden;
     gap: calc(var(--default-gap) / 2);
 
+    &.image-gallery {
+        margin-top: calc(var(--default-margin) * 2)
+    }
+
     // detect open-attribute (will be added to dom automatically)
     &[open] {
         display: flex;
@@ -429,7 +432,7 @@ export default FancyBox
 
     &.image {
         .outer-content-wrapper {
-            overflow-y: hidden;
+            max-height: none;
         }
 
         img {
@@ -559,7 +562,7 @@ export default FancyBox
 
 @media only screen and (max-width: $medium-max-width) {
     dialog {
-        top: var(--default-margin);
+        margin-top: var(--default-margin);
     }
 }
 /* end cmd-fancybox ------------------------------------------------------------------------------------------ */

package/src/components/CmdFormFilters.vue

@@ -113,7 +113,7 @@ export default {
         margin-right: var(--default-margin);
         border: var(--default-border);
         background: var(--pure-white);
-        font-size: 1.1rem;
+        font-size: var(--font-size-small);
 
         &:hover, &:active, &:focus {
             border-color: var(--primary-color);
@@ -131,7 +131,7 @@ export default {
         }
 
         [class*="icon-"] {
-            font-size: 1rem;
+            font-size: var(--icon-size-small);
         }
     }
 }