comand-component-library 3.2.3 → 3.2.5

package/package.json

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

package/src/App.vue

@@ -29,7 +29,7 @@
         <!-- end site-header --------------------------------------------------------------------------------------------------------------------------------------------------->
         <main>
             <!-- begin width-limitation-wrapper (with table of contents) --------------------------------------------------------------------------------------------------------------------------------------------------->
-            <CmdWidthLimitationWrapper>
+            <CmdWidthLimitationWrapper :cmdHeadline="{headlineText: 'Table of contents', headlineLevel: 2}">
                 <div class="flex-container">
                     <ul>
                         <li><a href="#section-advanced-form-elements">Advanced Form Elements</a></li>
@@ -66,7 +66,6 @@
                         <li><a href="#section-upload-form">Upload-Form</a></li>
                     </ul>
                 </div>
-                <hr/>
             </CmdWidthLimitationWrapper>
             <!-- end width-limitation-wrapper (with table of contents) --------------------------------------------------------------------------------------------------------------------------------------------------->
 
@@ -933,9 +932,10 @@
                 <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/logo-business-edition-landscape.jpg', 'Alternative text')"
-                   title="Open FancyBox with large image">
-                    <img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text"/>
+                   @click.prevent="showFancyBox('image', 'media/images/content-images/landscape-large.jpg', 'Alternative text')"
+                   title="Open FancyBox with large image"
+                >
+                   <img src="media/images/content-images/landscape-small.jpg" alt="Alternative text"/>
                 </a>
             </CmdWidthLimitationWrapper>
             <!-- end fancybox ------------------------------------------------------------------------------------------------------------------------------------------------------->

package/src/components/CmdCookieDisclaimer.vue

@@ -274,7 +274,7 @@ export default {
                 event.preventDefault()
                 fetch(event.target.href).then((response) =>
                     response.text()
-                ).then((content) => { /* use arrow function to get access to dataPrivacy by 'this' = vue-instance (otherwise 'this' wouldn't be vue-instance in this fethc-method */
+                ).then((content) => { /* use arrow function to get access to dataPrivacy by 'this' = vue-instance (otherwise 'this' wouldn't be vue-instance in this fetch-method) */
                     this.dataPrivacyContent = content
                 })
             }
@@ -295,9 +295,12 @@ export default {
 
     .cmd-box {
         .box-header {
+            padding: 0;
             justify-content: unset; /* overwrite setting for collapsible boxes */
 
             label {
+                padding: calc(var(--default-padding) / 2) var(--default-padding);
+
                 &.disabled {
                     .label-text span {
                         color: var(--pure-white) !important; /* required to set label-text in header to white */
@@ -305,6 +308,7 @@ export default {
                 }
 
                 & + .toggle-icon {
+                    padding: calc(var(--default-padding) / 2) var(--default-padding);
                     width: 100%;
                     justify-content: flex-end;
                     text-align: right;
@@ -312,8 +316,10 @@ export default {
             }
 
             &:hover, &:active, &:focus {
+                background: var(--hyperlink-color);
+
                 label.disabled .label-text span {
-                    color: var(--disabled-color) !important; /* required to set label-text on hover back to disabled-color */
+                    color: var(--pure-white) !important; /* required to set label-text on hover back to disabled-color */
                 }
             }
         }

package/src/components/CmdFancyBox.vue

@@ -1,87 +1,99 @@
 <template>
-    <!--  <transition name="fade">-->
-    <dialog
-        ref="dialog"
-        :class="['cmd-fancybox', {'show-overlay': showOverlay, 'image' : fancyBoxImageUrl || fancyBoxGallery}]"
-        :aria-label="ariaLabelText"
-    >
-        <!-- begin print buttons -->
-        <div class="button-wrapper no-flex"
-             v-if="(fancyboxOptions.printButtons && (fancyboxOptions.printButtons.color || fancyboxOptions.printButtons.grayscale)) || fancyboxOptions.closeIcon">
-            <a href="#"
-               v-if="fancyboxOptions.printButtons && fancyboxOptions.printButtons.color && fancyboxOptions.printButtons.color.show"
-               :class="['button', fancyboxOptions.printButtons.color.iconClass]"
-               :title="fancyboxOptions.printButtons.color.tooltip"
-               id="print-color"
-               @click.prevent="printInGrayscale = false">
-            </a>
-            <a href="#"
-               v-if="fancyboxOptions.printButtons && fancyboxOptions.printButtons.grayscale && fancyboxOptions.printButtons.grayscale.show"
-               :class="['button', fancyboxOptions.printButtons.grayscale.iconClass]"
-               :title="fancyboxOptions.printButtons.grayscale.tooltip"
-               id="print-grayscale"
-               @click.prevent="printInGrayscale = true">
-            </a>
-            <!-- end print buttons -->
-
-            <!-- begin close-icon -->
-            <a href="#"
-               v-if="fancyboxOptions.closeIcon"
-               :class="fancyboxOptions.closeIcon.iconClass"
-               :title="fancyboxOptions.closeIcon.tooltip"
-               @click.prevent="close">
-            </a>
-            <!-- end close-icon -->
-        </div>
-        <div :class="{'grayscale' : printInGrayscale}">
-            <!-- begin CmdHeadline -->
-            <CmdHeadline
-                v-if="cmdHeadline?.show"
-                :headlineText="cmdHeadline?.headlineText"
-                :headlineLevel="cmdHeadline?.headlineLevel"
-                :id="htmlId"
-            />
-            <!-- end CmdHeadline -->
-
-            <div v-if="fancyBoxImageUrl" class="content">
-                <img :src="fancyBoxImageUrl" :alt="altText"/>
-            </div>
-            <div v-else-if="fancyBoxContent" class="content" v-html="fancyBoxContent"></div>
-            <div v-else-if="fancyBoxElements" class="content"></div>
-            <div v-else-if="fancyBoxGallery" class="content">
-
-                <!-- begin CmdSlideButton -->
-                <CmdSlideButton @click.prevent="showPrevItem" slideButtonType="prev"/>
-                <!-- end CmdSlideButton -->
-
-                <!-- begin enlarged image -->
-                <figure>
-                    <img :src="fancyBoxGallery[index].srcImageLarge" :alt="fancyBoxGallery[index].alt"/>
-                    <figcaption>{{ fancyBoxGallery[index].figcaption }}</figcaption>
-                </figure>
-                <!-- end enlarged image -->
-
-                <!-- begin CmdSlideButton -->
-                <CmdSlideButton @click.prevent="showNextItem"/>
-                <!-- end CmdSlideButton -->
-            </div>
-            <div v-else class="content">
-                <!-- begin slot-content -->
-                <slot></slot>
-                <!-- end slot-content -->
+    <teleport to="body">
+        <dialog
+            ref="dialog"
+            :class="['cmd-fancybox', {'show-overlay': showOverlay, 'image' : fancyBoxImageUrl || fancyBoxGallery}]"
+            :aria-label="ariaLabelText"
+        >
+            <header class="flex-container">
+                <!-- begin CmdHeadline -->
+                <CmdHeadline
+                    v-if="cmdHeadline?.show"
+                    :headlineText="cmdHeadline?.headlineText"
+                    :headlineLevel="cmdHeadline?.headlineLevel"
+                    :id="htmlId"
+                />
+                <!-- end CmdHeadline -->
+
+                <!-- begin button-wrapper -->
+                <div
+                    v-if="(fancyboxOptions.printButtons && (fancyboxOptions.printButtons.color || fancyboxOptions.printButtons.grayscale)) || fancyboxOptions.closeIcon"
+                    class="button-wrapper no-flex"
+                >  <!-- begin print buttons -->
+                    <a v-if="fancyboxOptions.printButtons && fancyboxOptions.printButtons.color && fancyboxOptions.printButtons.color.show"
+                       href="#"
+                       class="button primary"
+                       :class="fancyboxOptions.printButtons.color.iconClass"
+                       :title="fancyboxOptions.printButtons.color.tooltip"
+                       id="print-color"
+                       @click.prevent="printInGrayscale = false">
+                    </a>
+                    <a v-if="fancyboxOptions.printButtons && fancyboxOptions.printButtons.grayscale && fancyboxOptions.printButtons.grayscale.show"
+                       href="#"
+                       class="button primary"
+                       :class="fancyboxOptions.printButtons.grayscale.iconClass"
+                       :title="fancyboxOptions.printButtons.grayscale.tooltip"
+                       id="print-grayscale"
+                       @click.prevent="printInGrayscale = true">
+                    </a>
+                    <!-- end print buttons -->
+
+                    <!-- begin close-icon -->
+                    <a v-if="fancyboxOptions.closeIcon"
+                       href="#"
+                       class="button primary"
+                       id="close-dialog"
+                       :class="fancyboxOptions.closeIcon.iconClass"
+                       :title="fancyboxOptions.closeIcon.tooltip"
+                       @click.prevent="close">
+                    </a>
+                    <!-- end close-icon -->
+                </div>
+                <!-- end button-wrapper -->
+            </header>
+            <div :class="['outer-content-wrapper', {'grayscale' : printInGrayscale}]">
+                <div v-if="fancyBoxImageUrl" class="content">
+                    <figure>
+                        <img :src="fancyBoxImageUrl" :alt="altText" />#
+                        <figcaption v-if="figcaption">{{ figcaption }}</figcaption>
+                    </figure>
+                </div>
+                <div v-else-if="fancyBoxContent" class="content" v-html="fancyBoxContent"></div>
+                <div v-else-if="fancyBoxElements" class="content"></div>
+                <div v-else-if="fancyBoxGallery" class="content">
+
+                    <!-- begin CmdSlideButton -->
+                    <CmdSlideButton @click.prevent="showPrevItem" slideButtonType="prev"/>
+                    <!-- end CmdSlideButton -->
+
+                    <!-- begin enlarged image -->
+                    <figure>
+                        <img :src="fancyBoxGallery[index].srcImageLarge" :alt="fancyBoxGallery[index].alt"/>
+                        <figcaption>{{ fancyBoxGallery[index].figcaption }}</figcaption>
+                    </figure>
+                    <!-- end enlarged image -->
+
+                    <!-- begin CmdSlideButton -->
+                    <CmdSlideButton @click.prevent="showNextItem"/>
+                    <!-- end CmdSlideButton -->
+                </div>
+                <div v-else class="content">
+                    <!-- begin slot-content -->
+                    <slot></slot>
+                    <!-- end slot-content -->
+                </div>
             </div>
-        </div>
-    </dialog>
-    <!-- begin CmdThumbnailScroller -->
-    <CmdThumbnailScroller
-        v-if="fancyBoxGallery"
-        :thumbnailScrollerItems="[...fancyBoxGallery]"
-        :allowOpenFancyBox="false"
-        @click="showItem"
-        :imgIndex="index"
-    />
-    <!-- end CmdThumbnailScroller -->
-    <!--  </transition>-->
+            <!-- begin CmdThumbnailScroller -->
+            <CmdThumbnailScroller
+                v-if="fancyBoxGallery"
+                :thumbnailScrollerItems="[...fancyBoxGallery]"
+                :allowOpenFancyBox="false"
+                @click="showItem"
+                :imgIndex="index"
+            />
+            <!-- end CmdThumbnailScroller -->
+        </dialog>
+    </teleport>
 </template>
 
 <script>
@@ -142,6 +154,13 @@ const FancyBox = defineComponent({
             type: String,
             required: false
         },
+        /**
+         * figcaption if image is given by url
+         */
+        figcaption: {
+            type: String,
+            required: false
+        },
         /**
          * options to show at top (closeIcon, printButtons)
          */
@@ -239,21 +258,16 @@ const FancyBox = defineComponent({
         }
     },
     created() {
+        // enable closing dialog by escape-key
         if (this.allowEscapeKey) {
             this.$_FancyBox_escapeKeyHandler = e => (e.key === "Escape" || e.key === "Esc") && this.close()
             document.querySelector("body").addEventListener("keyup", this.$_FancyBox_escapeKeyHandler)
         }
 
-        /* begin avoid scrolling if fancybox is shown */
-        /* register new properties for vue-instance */
-        /* get current vertical scroll position */
-        // this.$_FancyBox_verticalScrollPosition = window.scrollY
-        //
-
+        // scroll content to initial position
         this.$_FancyBox_scrollHandler = () => {
             window.scrollTo(0, this.$_FancyBox_verticalScrollPosition)
         }
-        /* end avoid scrolling if fancybox is shown */
 
         this.$watch(
             () => [
@@ -266,12 +280,14 @@ const FancyBox = defineComponent({
         )
     },
     mounted() {
+        // avoid scrolling if fancybox is shown
         if (this.showFancyBox) {
             document.querySelector("body").classList.add("avoid-scrolling")
             this.$refs.dialog.showModal()
         }
     },
     beforeUnmount() {
+        // remove event-listener for escape-key
         if (this.allowEscapeKey) {
             document.querySelector("body").removeEventListener("keyup", this.$_FancyBox_escapeKeyHandler)
         }
@@ -308,7 +324,6 @@ const FancyBox = defineComponent({
                 this.index = this.fancyBoxGallery.length - 1;
             }
         },
-
         showItem(imgId) {
             for (let i = 0; i < this.fancyBoxGallery.length; i++) {
                 if (this.fancyBoxGallery[i].imgId === imgId) {
@@ -317,7 +332,6 @@ const FancyBox = defineComponent({
                 }
             }
         },
-
         showNextItem() {
             if (this.index < this.fancyBoxGallery.length - 1) {
                 this.index++;
@@ -325,7 +339,6 @@ const FancyBox = defineComponent({
                 this.index = 0;
             }
         },
-
         close() {
             if (this.$options.el) {
                 this.$destroy()
@@ -335,6 +348,7 @@ const FancyBox = defineComponent({
                 this.$emit("update:show", false)
             }
 
+            // remove class to re-enable scrolling
             document.querySelector("body").classList.remove("avoid-scrolling")
         }
     },
@@ -351,7 +365,7 @@ const FancyBox = defineComponent({
                     // window.addEventListener("scroll", this.$_FancyBox_scrollHandler)
                     this.$refs.dialog.showModal()
                 } else {
-                    // remove listener and class to re-enable scroll
+                    // 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)
@@ -365,11 +379,11 @@ const FancyBox = defineComponent({
 })
 
 async function getContentType(url) {
-    const response = await fetch(url, {method: 'HEAD'})
+    const response = await fetch(url, {method: "HEAD"})
     if (response.ok) {
-        return (response.headers.get('Content-Type') || '').split(';')[0]
+        return (response.headers.get("Content-Type") || "").split(";")[0]
     }
-    return 'text/html'
+    return "text/html"
 }
 
 export {openFancyBox}
@@ -378,19 +392,18 @@ export default FancyBox
 
 <style lang="scss">
 /* begin cmd-fancybox ---------------------------------------------------------------------------------------- */
-@import '../assets/styles/variables';
+@import "../assets/styles/variables";
 
 .cmd-fancybox {
-    overflow-x: hidden;
     z-index: 500;
     flex-direction: column;
     padding: var(--default-padding);
-    min-width: 30%;
-    max-width: var(--max-width);
-    min-height: 30%;
-    max-height: 80%;
+    min-width: 30vw;
+    min-height: 30vh;
     background: var(--pure-white);
     border-radius: var(--border-radius);
+    overflow: hidden;
+    gap: calc(var(--default-gap) / 2);
 
     // detect open-attribute (will be added to dom automatically)
     &[open] {
@@ -402,6 +415,10 @@ export default FancyBox
         background: rgba(0, 0, 0, var(--reduced-opacity));
     }
 
+    > header {
+        display: flex;
+    }
+
     .cmd-cookie-disclaimer {
         padding: 0;
     }
@@ -411,7 +428,9 @@ export default FancyBox
     }
 
     &.image {
-        overflow-y: hidden;
+        .outer-content-wrapper {
+            overflow-y: hidden;
+        }
 
         img {
             display: block;
@@ -422,76 +441,111 @@ export default FancyBox
         }
     }
 
-    > .button-wrapper {
-        margin-bottom: var(--default-margin);
-        flex-direction: row;
+    > header {
+        justify-content: space-between;
 
-        a:not(.button) {
-            margin-left: auto;
+        > .cmd-headline {
+            max-width: 80%;
+            flex-shrink: 1;
+            margin-bottom: 0;
         }
 
-        a.icon-print {
-            background: linear-gradient(135deg, #009fe3 0%, #009fe3 25%, #e6007e 25%, #e6007e 50%, #ffed00 50%, #ffed00 50%, #ffed00 75%, #000000 75%, #000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-            border: var(--default-border);
-            margin-left: 0;
-            text-shadow: var(--text-shadow);
+        > .button-wrapper {
+            flex-shrink: 0;
+            flex-direction: row;
+            align-items: flex-start;
+            gap: calc(var(--default-gap) / 2);
+            margin-left: auto;
 
-            &:hover, &:active, &:focus {
-                border: var(--primary-border);
-                color: var(--pure-white);
-            }
+            > .button {
+                display: block;
+                border: var(--default-border);
+                padding: .2rem;
+                min-width: 0;
+                min-height: 0;
 
-            &#print-grayscale {
-                background: linear-gradient(135deg, #000000 0%, #000000 50%, #ffffff 50%, #ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-            }
-        }
+                &[class*="icon"] {
+                    color: var(--text-color);
+                    background: var(--pure-white);
+                }
 
-        .content > :only-child {
-            margin-bottom: 0;
-        }
-    }
+                &.icon-print {
+                    background: linear-gradient(135deg, #009fe3 0%, #009fe3 25%, #e6007e 25%, #e6007e 50%, #ffed00 50%, #ffed00 50%, #ffed00 75%, var(--medium-gray) 75%, var(--medium-gray) 100%);
 
-    .gallery-scroller {
-        background: var(--pure-black);
-        max-width: 80%;
-        left: 0;
-        right: 0;
-        position: fixed;
-        bottom: 1rem;
-        margin: auto;
-        background: var(--pure-black);
-
-        li:not(.active) {
-            img {
-                opacity: var(--reduced-opacity);
-            }
+                    &#print-grayscale {
+                        background: linear-gradient(135deg, var(--medium-gray) 0%, var(--medium-gray) 50%, var(--pure-white) 50%, var(--pure-white) 100%);
+
+                        &:hover, &:active, &:focus {
+                            background: var(--pure-white);
+                        }
+                    }
+                }
 
-            a {
                 &:hover, &:active, &:focus {
-                    img {
-                        opacity: 1;
+                    border: var(--primary-border);
+                    background: var(--pure-white);
+
+                    &[class*="icon"] {
+                        color: var(--primary-color);
                     }
                 }
             }
+        }
+    }
+
+    .outer-content-wrapper {
+        max-height: 85vh;
+        overflow-x: hidden;
+        max-width: var(--max-width);
+
+        .content {
+            > img, > video {
+                &:only-child {
+                    margin: auto;
+                    max-height: 80vmin;
+                    max-width: 80vmax;
+                }
+            }
 
             figcaption {
-                color: var(--pure-white);
-                text-decoration: none;
+                font-size: 2rem;
+                padding: calc(var(--default-padding) / 2) 0;
             }
         }
     }
 
     @media only screen and (max-width: $medium-max-width) {
-        .gallery-scroller {
-            display: block;
+        .outer-content-wrapper {
+            .content {
+                > img, > video {
+                    &:only-child {
+                        margin: auto;
+                        max-height: 60vmin;
+                    }
+                }
+            }
         }
 
-        .popup {
-            max-width: 80%;
+        > header {
+            flex-direction: row;
+
+            .button:not(#close-dialog) {
+                display: none;
+            }
         }
     }
 
     @media only screen and (max-width: $small-max-width) {
+        .outer-content-wrapper {
+            .content {
+                > img, > video {
+                    &:only-child {
+                        max-height: 50vmin;
+                    }
+                }
+            }
+        }
+
         [class*="switch-button-"] {
             width: 3rem;
 
@@ -503,5 +557,10 @@ export default FancyBox
     }
 }
 
+@media only screen and (max-width: $medium-max-width) {
+    dialog {
+        top: var(--default-margin);
+    }
+}
 /* end cmd-fancybox ------------------------------------------------------------------------------------------ */
 </style>

package/src/components/CmdIcon.vue

@@ -0,0 +1,39 @@
+<template>
+    <span v-if="fontSource === 'iconify'" :title="tooltip"></span>
+    <span v-if="fontSource === 'local'" :class="iconClass" :title="tooltip"></span>
+</template>
+
+<script>
+export default {
+    name: "CmdIcon",
+    props: {
+        /**
+         * font-source where to load the icons from
+         * 'local' is for using an implemented icon-fonts by using class 'icon-name'
+         * 'iconify' is for using icons from iconify-dependency (https://iconify.design/)
+         *
+         * @allowedValues: 'dependency', 'local'
+         */
+        fontSource: {
+            type: String,
+            default: 'local'
+        },
+        /**
+         * icon-class for icon
+         */
+        iconClass: {
+            type: String,
+            required: true
+        },
+        /**
+         * tooltip text for icon
+         *
+         * @requiredForAccessibility: true
+         */
+        tooltip: {
+            type: String,
+            required: false
+        }
+    }
+}
+</script>

package/src/components/CmdListOfLinks.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['cmd-list-of-links', 'align-' + align, {box: styleAsBox, horizontal: orientation === 'horizontal', 'section-anchors': sectionAnchors}]">
+    <div :class="['cmd-list-of-links', {box: styleAsBox, horizontal: orientation === 'horizontal', 'section-anchors': sectionAnchors}]">
         <!-- begin CmdHeadline -->
         <CmdHeadline
             v-if="cmdHeadline"
@@ -8,7 +8,7 @@
         <!-- end CmdHeadline -->
 
         <!-- begin list of links -->
-        <ul :class="['flex-container', {'no-gap': !useGap}]">
+        <ul :class="['flex-container', {'no-gap': !useGap},'align-' + align]">
             <li v-for="(link, index) in links" :key="index" :class="{'active': sectionAnchors && activeSection === index}">
                 <!-- begin use href -->
                 <a v-if="link.type === 'href' || link.type === undefined"
@@ -156,15 +156,16 @@ export default {
                 flex: none;
                 display: flex;
             }
-        }
 
-        &.align-center {
-            justify-content: center;
-        }
+            &.align-center {
+                justify-content: center;
+            }
 
-        &.align-right {
-            justify-content: flex-end;
+            &.align-right {
+                justify-content: flex-end;
+            }
         }
+
     }
 }
 /* end cmd-list-of-links------------------------------------------------------------------------------------------ */