comand-component-library 3.3.7 → 3.3.8

package/src/components/CmdFancyBox.vue

@@ -22,9 +22,8 @@
                 >  <!-- begin print buttons -->
                     <a v-if="fancyboxOptions.printButtons && fancyboxOptions.printButtons.color && fancyboxOptions.printButtons.color.show"
                        href="#"
-                       class="button primary"
+                       class="button print-color"
                        :title="fancyboxOptions.printButtons.color.tooltip"
-                       id="print-color"
                        @click.prevent="printInGrayscale = false">
                         <!-- begin CmdIcon -->
                         <CmdIcon :iconClass="fancyboxOptions.printButtons.color.iconClass" :type="fancyboxOptions.printButtons.color.iconType" />
@@ -32,13 +31,12 @@
                     </a>
                     <a v-if="fancyboxOptions.printButtons && fancyboxOptions.printButtons.grayscale && fancyboxOptions.printButtons.grayscale.show"
                        href="#"
-                       class="button primary"
+                       class="button print-grayscale"
                        :title="fancyboxOptions.printButtons.grayscale.tooltip"
-                       id="print-grayscale"
                        @click.prevent="printInGrayscale = true">
-                        <!-- begin CmdIcon -->
-                        <CmdIcon :iconClass="fancyboxOptions.printButtons.grayscale.iconClass" :type="fancyboxOptions.printButtons.grayscale.iconType" />
-                        <!-- end CmdIcon -->
+                       <!-- begin CmdIcon -->
+                       <CmdIcon :iconClass="fancyboxOptions.printButtons.grayscale.iconClass" :type="fancyboxOptions.printButtons.grayscale.iconType" />
+                       <!-- end CmdIcon -->
                     </a>
                     <!-- end print buttons -->
 
@@ -50,9 +48,9 @@
                        :title="fancyboxOptions.closeIcon.tooltip"
                        ref="close-dialog"
                        @click.prevent="close">
-                        <!-- begin CmdIcon -->
-                        <CmdIcon :iconClass="fancyboxOptions.closeIcon.iconClass" :type="fancyboxOptions.closeIcon.iconType" />
-                        <!-- end CmdIcon -->
+                       <!-- begin CmdIcon -->
+                       <CmdIcon :iconClass="fancyboxOptions.closeIcon.iconClass" :type="fancyboxOptions.closeIcon.iconType" />
+                       <!-- end CmdIcon -->
                     </a>
                     <!-- end close-icon -->
                 </div>
@@ -60,10 +58,9 @@
             </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>
+                    <!-- begin CmdImage -->
+                    <CmdImage :image="largeSingleImage" :figcaption="cmdImage?.figcaption" />
+                    <!-- end CmdImage -->
                 </div>
                 <div v-else-if="fancyBoxContent" class="content" v-html="fancyBoxContent"></div>
                 <div v-else-if="fancyBoxElements" class="content"></div>
@@ -74,10 +71,9 @@
                     <!-- end CmdSlideButton -->
 
                     <!-- begin enlarged image -->
-                    <figure>
-                        <img :src="fancyBoxGallery[index].srcImageLarge" :alt="fancyBoxGallery[index].alt"/>
-                        <figcaption>{{ fancyBoxGallery[index].figcaption }}</figcaption>
-                    </figure>
+                    <!-- begin CmdImage -->
+                    <CmdImage :image="largeGalleryImage" :figcaption="fancyBoxGallery[index].figcaption" />
+                    <!-- end CmdImage -->
                     <!-- end enlarged image -->
 
                     <!-- begin CmdSlideButton -->
@@ -112,6 +108,7 @@ import Identifier from "../mixins/Identifier"
 // import components
 import CmdHeadline from "./CmdHeadline"
 import CmdIcon from "./CmdIcon"
+import CmdImage from "./CmdImage"
 import CmdSlideButton from "./CmdSlideButton.vue"
 import CmdThumbnailScroller from './CmdThumbnailScroller.vue'
 
@@ -130,6 +127,7 @@ const FancyBox = defineComponent({
     components: {
         CmdHeadline,
         CmdIcon,
+        CmdImage,
         CmdSlideButton,
         CmdThumbnailScroller
     },
@@ -163,13 +161,6 @@ 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)
          */
@@ -248,12 +239,10 @@ const FancyBox = defineComponent({
             default: true
         },
         /**
-         * alternative text for large image (required for images)
-         *
-         * @requiredForAccessibility: true
+         * properties for CmdImage-component
          */
-        altText: {
-            type: String,
+        cmdImage: {
+            type: Object,
             required: false
         },
         /**
@@ -299,6 +288,20 @@ const FancyBox = defineComponent({
             document.querySelector("body").removeEventListener("keyup", this.$_FancyBox_escapeKeyHandler)
         }
     },
+    computed: {
+      largeGalleryImage() {
+          // change src-key for a single item/image in gallery to fit CmdImage-properties
+          const fancyBoxItem = {...this.fancyBoxGallery[this.index].image}
+          fancyBoxItem.src =  fancyBoxItem.srcImageLarge
+          return fancyBoxItem
+      },
+      largeSingleImage() {
+          // change src-key for a single item/image to fit CmdImage-properties
+          const fancyBoxItem = {...this.cmdImage?.image || {}}
+          fancyBoxItem.src = this.fancyBoxImageUrl
+          return fancyBoxItem
+      }
+    },
     methods: {
         showDialog() {
             // avoid scrolling if fancybox is shown
@@ -341,7 +344,7 @@ const FancyBox = defineComponent({
         },
         showItem(imgId) {
             for (let i = 0; i < this.fancyBoxGallery.length; i++) {
-                if (this.fancyBoxGallery[i].imgId === imgId) {
+                if (this.fancyBoxGallery[i].id === imgId) {
                     this.index = i
                     break;
                 }
@@ -475,28 +478,23 @@ export default FancyBox
                 min-width: 0;
                 min-height: 0;
 
-                &[class*="icon"] {
+                &[class*="print"] > [class*="icon-"] {
                     color: var(--text-color);
-                    background: var(--pure-white);
                 }
 
-                &.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%);
-
-                    &#print-grayscale {
-                        background: linear-gradient(135deg, var(--medium-gray) 0%, var(--medium-gray) 50%, var(--pure-white) 50%, var(--pure-white) 100%);
+                &.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);
-                        }
-                    }
+                &.print-color {
+                    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%);
                 }
 
                 &:hover, &:active, &:focus {
                     border: var(--primary-border);
                     background: var(--pure-white);
 
-                    &[class*="icon"] {
+                    [class*="icon-"] {
                         color: var(--primary-color);
                     }
                 }

package/src/components/CmdFormElement.vue

@@ -58,44 +58,52 @@
         </span>
         <!-- end label-text (+ required asterisk) -->
 
-        <!-- begin icon inside field -->
-        <span v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio' && fieldIconClass" :class="['place-inside', fieldIconClass]"></span>
-        <!-- end icon inside field -->
-
-        <!-- begin inputfield -->
-        <template v-if="element === 'input' && $attrs.type !== 'checkbox' && $attrs.type !== 'radio' && $attrs.type !== 'search'">
-            <input
-                v-bind="elementAttributes"
-                :id="htmlId"
-                :class="inputClass"
-                @focus="tooltip = true"
-                @blur="onBlur"
-                @input="onInput"
-                @mouseover="datalistFocus"
-                @keyup="checkForCapsLock"
-                @change="$emit('change', $event)"
-                :autocomplete="autocomplete"
-                :list="datalist ? datalist.id : null"
-                :value="modelValue"
-                :maxlength="getMaxLength()"
-                ref="input"
+        <span class="flex-container"><!-- container required to place inner icons correctly -->
+            <!-- begin CmdIcon (for icon inside field) -->
+            <CmdIcon
+                v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio' && fieldIconClass"
+                class="place-inside"
+                :iconClass="fieldIconClass"
             />
-        </template>
-        <!-- end inputfield -->
-
-        <!-- begin show-password-icon -->
-        <a v-if="$attrs.type === 'password'"
-           href="#"
-           @mousedown.prevent="showPassword"
-           @mouseup.prevent="hidePassword"
-           @mouseleave.prevent="hidePassword"
-           @click.prevent
-           :title="iconPasswordVisible.tooltip">
-           <!-- begin CmdIcon -->
-           <CmdIcon :iconClass="['place-inside', iconPasswordVisible.iconClass]" />
-           <!-- end CmdIcon -->
-        </a>
-        <!-- end show-password-icon -->
+            <!-- end CmdIcon (for icon inside field) -->
+
+            <!-- begin inputfield -->
+            <template v-if="element === 'input' && $attrs.type !== 'checkbox' && $attrs.type !== 'radio' && $attrs.type !== 'search'">
+                <input
+                    v-bind="elementAttributes"
+                    :id="htmlId"
+                    :class="inputClass"
+                    @focus="tooltip = true"
+                    @blur="onBlur"
+                    @input="onInput"
+                    @mouseover="datalistFocus"
+                    @keyup="checkForCapsLock"
+                    @change="$emit('change', $event)"
+                    :autocomplete="autocomplete"
+                    :list="datalist ? datalist.id : null"
+                    :value="modelValue"
+                    :maxlength="getMaxLength()"
+                    ref="input"
+                />
+            </template>
+            <!-- end inputfield -->
+
+            <!-- begin show-password-icon -->
+            <a v-if="$attrs.type === 'password'"
+               href="#"
+               class="place-inside"
+               @mousedown.prevent="showPassword"
+               @mouseup.prevent="hidePassword"
+               @mouseleave.prevent="hidePassword"
+               @click.prevent
+               :title="iconPasswordVisible.tooltip"
+            >
+               <!-- begin CmdIcon -->
+               <CmdIcon :iconClass="iconPasswordVisible.iconClass" />
+               <!-- end CmdIcon -->
+            </a>
+            <!-- end show-password-icon -->
+        </span>
 
         <!-- begin datalist -->
         <template v-if="datalist && datalist.options.length">
@@ -195,9 +203,9 @@
                     <CmdIcon :iconClass="iconSearch.iconClass" />
                     <!-- end CmdIcon -->
                 </a>
-                <a v-if="iconDelete.show" href="#" @click.prevent="$emit('update:modelValue', '')" :title="iconDelete.tooltip">
+                <a v-if="iconDelete?.show" href="#" @click.prevent="$emit('update:modelValue', '')" :title="iconDelete?.tooltip">
                     <!-- begin CmdIcon -->
-                    <CmdIcon :iconClass="iconDelete.iconClass" :type="iconDelete.iconType" />
+                    <CmdIcon :iconClass="iconDelete?.iconClass" :type="iconDelete?.iconType" />
                     <!-- end CmdIcon -->
                 </a>
             </span>
@@ -839,7 +847,7 @@ export default {
 <style lang="scss">
 /* begin cmd-form-element ------------------------------------------------------------------------------------------ */
 .cmd-form-element {
-    input + .place-inside[class*="icon"] {
+    input + .place-inside[class*="icon-"] {
         left: auto;
         right: .5rem
     }
@@ -869,7 +877,7 @@ export default {
     .search-field-wrapper {
         margin: 0;
 
-        a[class*="icon"] {
+        a {
             position: absolute;
             top: 50%;
             right: 1rem;
@@ -883,7 +891,9 @@ export default {
         }
 
         a.button {
-            & + a[class*="icon"] {
+            right: 0;
+
+            & + a {
                 right: 5rem;
             }
         }

package/src/components/CmdFormFilters.vue

@@ -129,7 +129,7 @@ export default {
         }
 
         a {
-            padding: 0 calc(var(--default-padding) / 2);
+            padding: calc(var(--default-padding) / 2);
             display: flex;
             align-items: center;
             text-decoration: none;

package/src/components/CmdHeadline.vue

@@ -1,7 +1,7 @@
 <template>
-    <div :class="['cmd-headline', { 'has-pre-headline-text': preHeadlineText, 'has-icon': iconClass}]">
+    <div :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': headlineIcon?.iconClass}, getTextAlign]">
         <!-- begin CmdIcon -->
-        <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon.iconClass" :type="headlineIcon.iconType" />
+        <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType" />
         <!-- end CmdIcon -->
 
         <div v-if="preHeadlineText">
@@ -57,6 +57,15 @@ export default {
         headlineIcon: {
             type: Object,
             required: false
+        },
+        /**
+         * text-alignment
+         *
+         * @allowedValues: "left", "center", "right"
+         */
+        textAlign: {
+            type: String,
+            default: "left"
         }
     },
     computed: {
@@ -65,26 +74,42 @@ export default {
                 return "h" + this.headlineLevel
             }
             return "h3"
+        },
+        getTextAlign() {
+            if(this.textAlign) {
+                return "text-" + this.textAlign
+            }
+            return ''
         }
     }
 }
 </script>
 
 <style lang="scss">
-/* begin cmd--headline ------------------------------------------------------------------------------------------ */
+/* begin cmd-headline ------------------------------------------------------------------------------------------ */
 @import '../assets/styles/variables';
 
 .cmd-headline {
     margin-bottom: var(--default-margin);
     gap: calc(var(--default-gap) / 2);
 
+    &.text-center > * {
+        text-align: center;
+    }
+
+    &.text-right > * {
+        text-align: right;
+    }
+
     &.has-icon {
         display: flex;
         align-items: center;
     }
 
     &.has-pre-headline-text {
-        [class*="icon"] {
+        text-align: inherit;
+
+        [class*="icon-"] {
             font-size: 5rem;
         }
     }

package/src/components/CmdIcon.vue

@@ -1,10 +1,10 @@
 <template>
     <!-- begin iconify-icon -->
-    <Icon v-if="isIconify" :icon="iconClass" :title="tooltip"></Icon>
+    <Icon v-if="isIconify" :icon="iconClass" :title="tooltip" :class="$attrs.class"></Icon>
     <!-- end iconify-icon -->
 
-    <!-- being icon from local iconfont -->
-    <span v-else :class="iconClass" :title="tooltip"></span>
+    <!-- begin icon from local iconfont -->
+    <span v-else :class="[iconClass, $attrs.class]" :title="tooltip"></span>
     <!-- end icon from local iconfont -->
 </template>
 
@@ -22,7 +22,7 @@ export default {
          * type that defines where the icon is loaded from
          * 'auto' is for letting the component check (by classname) if the icon should be loaded from the local iconfont (class="icon-'iconname'")
          *  or if the icon should be loaded form iconify-api (class='fontprefix':'iconname') (https://iconify.design/)
-         * 'iconify' forces the component to load an iconfify icon (without api) from a local source (which must be defined)
+         * 'iconify' forces the component to load an iconify icon (without api) from a local source (which must be defined)
          *
          * @allowedValues: 'auto', 'iconify'
          */

package/src/components/CmdImage.vue

@@ -0,0 +1,55 @@
+<template>
+    <figure :class="['cmd-image', getTextAlign]">
+        <figcaption v-if="figcaption?.show && figcaption?.position === 'top'">{{figcaption?.text}}</figcaption>
+        <img :src="image.src" :alt="image.alt" :title="image.tooltip" />
+        <figcaption v-if="figcaption?.show && figcaption?.position !== 'top'">{{figcaption?.text}}</figcaption>
+    </figure>
+</template>
+
+<script>
+export default {
+    name: "CmdImage",
+    props: {
+        /**
+         * image-object including source, alternative text, tooltip (not required)
+         */
+        image: {
+            type: Object,
+            required: true
+        },
+        /**
+         * figcaption-object including visibility, position (top/bottom), text
+         */
+        figcaption: {
+            type: Object,
+            required: false
+        }
+    },
+    computed: {
+        getTextAlign() {
+            if(this.figcaption?.textAlign) {
+                return "text-" + this.figcaption.textAlign
+            }
+            return ''
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+/* begin cmd-image ------------------------------------------------------------------------------------------ */
+.cmd-image {
+    &.text-center {
+        figcaption {
+            text-align: center;
+        }
+    }
+
+    &.text-right {
+        figcaption {
+            text-align: right;
+        }
+    }
+}
+/* end cmd-image ------------------------------------------------------------------------------------------ */
+</style>

package/src/components/CmdImageGallery.vue

@@ -5,16 +5,16 @@
            @click.prevent="showFancyBox(index)"
            href="#"
            :title="getMessage('cmdimagegallery.tooltip.open_large_image')">
-            <figure>
-                <figcaption v-if="image.figcaption && figcaptionPosition === 'top'">{{ image.figcaption }}</figcaption>
-                <img :src="image.srcImageSmall" :alt="image.alt" />
-                <figcaption v-if="image.figcaption && figcaptionPosition === 'bottom'">{{ image.figcaption }}</figcaption>
-            </figure>
+           <CmdImage :image="image.image" :figcaption="image.figcaption" />
         </a>
     </div>
 </template>
 
 <script>
+// import components
+import CmdImage from "./CmdImage.vue"
+
+// import functions
 import {openFancyBox} from "./CmdFancyBox"
 
 // import mixins
@@ -23,6 +23,9 @@ import DefaultMessageProperties from "../mixins/CmdImageGallery/DefaultMessagePr
 
 export default {
     name: "CmdImageGallery",
+    components: {
+        CmdImage
+    },
     mixins: [I18n, DefaultMessageProperties],
     props: {
         /**
@@ -64,22 +67,20 @@ export default {
             border: var(--default-border);
             border-radius: var(--border-radius);
             max-height: 30rem;
-
-            &:hover, &:active, &:focus {
-                img {
-                    border: var(--primary-border);
-                }
-
-                figcaption {
-                    text-decoration: none;
-                }
-            }
         }
 
         figcaption {
             padding: calc(var(--default-padding) / 2);
         }
 
+        &:hover, &:active, &:focus {
+            text-decoration: none;
+
+            img {
+                border: var(--primary-border);
+            }
+        }
+
         & + .pager {
             margin-top: calc(var(--default-margin) * 2);
         }

package/src/components/CmdImageZoom.vue

@@ -1,20 +1,30 @@
 <template>
-    <div class="grid-container-create-columns cmd-imagezoom">
+    <div class="cmd-imagezoom grid-container-create-columns">
         <div class="grid-small-item">
             <!-- begin small image -->
             <a href="#" class="thumbnails-imagezoom">
-                <img :src="smallImageUrl"
-                     alt="Small Image"
-                     @mouseover="onMouseOver"
-                     @mousemove="onMouseMove"
-                     @mouseout="onMouseOut"/>
+                <!-- begin CmdImage -->
+                <CmdImage
+                    :image="imageSmall"
+                    @mouseover="onMouseOver"
+                    @mousemove="onMouseMove"
+                    @mouseout="onMouseOut"
+                />
+                <!-- end CmdImage -->
             </a>
             <!-- end small image -->
         </div>
 
         <!-- begin large image -->
         <div v-if="showLargeImage" class="zoom-container grid-large-item">
-            <img :src="largeImageUrl" alt="Large Image"/>
+            <!-- begin CmdImage -->
+            <CmdImage
+                :image="imageLarge"
+                @mouseover="onMouseOver"
+                @mousemove="onMouseMove"
+                @mouseout="onMouseOut"
+            />
+            <!-- end CmdImage -->
         </div>
         <div v-if="showLargeImage" class="zoom-overlay"></div>
         <!-- end large image -->
@@ -22,21 +32,27 @@
 </template>
 
 <script>
+// import components
+import CmdImage from "./CmdImage"
+
 export default {
     name: "CmdImageZoom",
+    components: {
+        CmdImage
+    },
     props: {
         /**
-         * url for small images
+         * object for small image
          */
-        smallImageUrl: {
-            type: String,
+        imageSmall: {
+            type: Object,
             required: true
         },
         /**
-         * url for large image
+         * object for large image
          */
-        largeImageUrl: {
-            type: String,
+        imageLarge: {
+            type: Object,
             required: true
         }
     },

package/src/components/CmdInputGroup.vue

@@ -32,7 +32,6 @@
             <a v-if="required || inputRequirements.length"
                href="#"
                @click.prevent
-               :class="getStatusIconClass"
                :title="validationTooltip"
                :aria-errormessage="tooltipId"
                aria-live="assertive"
@@ -290,7 +289,7 @@ export default {
     .label-text {
         display: inline-flex;
 
-        > a[class*="icon"] {
+        > [class*="icon-"] {
             margin-left: calc(var(--default-margin) / 2);
         }
     }

package/src/components/CmdListOfRequirements.vue

@@ -182,7 +182,7 @@ export default {
             color: var(--status-color);
         }
 
-        span[class*="icon"] {
+        [class*="icon-"] {
             color: var(--status-color);
         }
 

package/src/components/CmdLoginForm.vue

@@ -446,7 +446,7 @@ export default {
             text-decoration: none;
             flex: none;
 
-            span[class*="icon"] {
+            [class*="icon-"] {
                 text-decoration: none;
             }
         }