comand-component-library 3.1.45 → 3.1.46

package/src/components/CmdFancyBox.vue

@@ -1,24 +1,28 @@
 <template>
   <transition name="fade">
-    <div :class="['cmd-fancybox', {'show-overlay': showOverlay}]" v-if="showFancyBox" role="dialog"
+    <div v-if="showFancyBox"
+         :class="['cmd-fancybox', {'show-overlay': showOverlay}]"
+         role="dialog"
          aria-labelledby="fancybox">
       <div class="popup" :class="{'image' : fancyBoxImageUrl || fancyBoxGallery }">
+        <!-- begin print button -->
         <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"
+             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"
+             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 button -->
           <a href="#"
              v-if="fancyboxOptions.closeIcon"
              :class="fancyboxOptions.closeIcon.iconClass"
@@ -28,31 +32,50 @@
         </div>
         <div :class="{'grayscale' : printInGrayscale}">
           <div v-if="fancyBoxImageUrl" class="content">
-            <img :src="fancyBoxImageUrl" alt=""/>
+            <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>
+                <img :src="fancyBoxGallery[index].srcImageLarge" :alt="fancyBoxGallery[index].alt"/>
+                <figcaption>{{ fancyBoxGallery[index].figcaption }}</figcaption>
             </figure>
-            <CmdSlideButton @click.prevent="showNextItem" />
+            <!-- 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>
-      <CmdThumbnailScroller v-if="fancyBoxGallery" :thumbnailScrollerItems="[...fancyBoxGallery]"
-                            :allowOpenFancyBox="false" @click="showItem" :imgIndex="index"/>
+      <!-- begin CmdThumbnailScroller -->
+      <CmdThumbnailScroller
+          v-if="fancyBoxGallery"
+          :thumbnailScrollerItems="[...fancyBoxGallery]"
+          :allowOpenFancyBox="false"
+          @click="showItem"
+          :imgIndex="index"
+      />
+      <!-- end CmdThumbnailScroller -->
     </div>
   </transition>
 </template>
 
 <script>
     import {defineComponent, createApp} from "vue"
+
+    // import components
     import CmdSlideButton from "./CmdSlideButton.vue"
     import CmdThumbnailScroller from './CmdThumbnailScroller.vue'
 
@@ -68,6 +91,10 @@
 
     const FancyBox = defineComponent({
         name: "CmdFancyBox",
+        components: {
+            CmdSlideButton,
+            CmdThumbnailScroller
+        },
         props: {
             /**
              * set if content should be loaded by url
@@ -89,10 +116,12 @@
                         },
                         printButtons: {
                             "color": {
+                                show: true,
                                 "iconClass": "icon-print",
                                 "tooltip": "print in color"
                             },
                             "grayscale": {
+                                show: true,
                                 "iconClass": "icon-print",
                                 "tooltip": "print in grayscale"
                             }
@@ -115,7 +144,7 @@
                 required: false
             },
             /**
-             *
+             * list of show elements (not images)
              */
             elements: {
                 type: Array,
@@ -144,36 +173,23 @@
             },
             /**
              * show/hide overlay (around fancybox, above website)
+             *
+             * @affectsStyling: true
              */
             showOverlay: {
                 type: Boolean,
                 default: true
             },
             /**
-             * show slide-buttons (left/previous and right/next)
+             * alternative text for large image (required for images)
+             *
+             * @requiredForAccessibility: true
              */
-            slideButtons: {
-                type: Object,
-                default() {
-                    return {
-                        "next": {
-                            "buttonType": "next",
-                            "iconClass": "icon-single-arrow-right",
-                            "tooltip": "Next"
-                        },
-                        "previous": {
-                            "buttonType": "previous",
-                            "iconClass": "icon-single-arrow-left",
-                            "tooltip": "Previous"
-                        }
-                    }
-                }
+            altText: {
+                type: String,
+                required: false
             }
         },
-        components: {
-            CmdSlideButton,
-            CmdThumbnailScroller
-        },
         data() {
             return {
                 fancyBoxImageUrl: null,
@@ -202,7 +218,6 @@
             this.$_FancyBox_scrollHandler = () => {
                 window.scrollTo(0, this.$_FancyBox_verticalScrollPosition)
             }
-
             /* -- end avoid scrolling if fancybox is shown */
 
             this.$watch(
@@ -263,7 +278,6 @@
             },
 
             showNextItem() {
-                console.log(this.index);
                 if (this.index < this.fancyBoxGallery.length - 1) {
                     this.index++;
                 } else {

package/src/components/CmdForm.vue

@@ -0,0 +1,107 @@
+<template>
+    <form class="cmd-form" :data-use-validation="useValidation" @submit="onSubmit" :class="{error: errorOccurred}">
+        <template v-if="useFieldset">
+            <fieldset>
+                <legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
+                <!-- begin default-slot-content -->
+                <slot></slot>
+                <!-- end default-slot-content -->
+            </fieldset>
+
+            <!-- begin button-row-slot-content -->
+            <slot name="button-row"></slot>
+            <!-- end button-row-slot-content -->
+        </template>
+
+        <!-- begin default-slot-content -->
+        <slot v-else></slot>
+        <!-- end default-slot-content -->
+    </form>
+</template>
+
+<script>
+export default {
+    name: "CmdForm",
+    emits: ["submit"],
+    data(){
+        return {
+            errorOccurred: false
+        }
+    },
+    props: {
+        /**
+         * if activated the entire form will be validated by pre-coded validation
+         *
+         * @affectsStyling: true
+         */
+        useValidation: {
+          type: Boolean,
+          default: true
+        },
+        /**
+         * activate if you want to use a fieldset
+         *
+         * @requiredForAccessibility: true
+         */
+        useFieldset: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * toggle visibility for legend-text
+         *
+         * useFieldset must be activated
+         */
+        showLegend: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * text for legend
+         *
+         * useFieldset must be activated
+         *
+         * @requiredForAccessibility: true
+         */
+        textLegend: {
+            type: String,
+            required: false
+        }
+    },
+    methods: {
+        onSubmit(event) {
+            if(this.useValidation) {
+                event.preventDefault()
+                if(event.target.checkValidity()) {
+                    this.errorOccurred = false
+                    this.$emit("submit", event)
+                } else {
+                    this.errorOccurred = true
+                }
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.cmd-form {
+    &:not([data-use-validation="true"]) {
+        label.error :where(::placeholder, select option:first-child),
+        :where(input, select, textarea):invalid:focus {
+            color: var(--error-color);
+        }
+
+        :where(input, select, textarea):valid:focus[required],
+        select:invalid:focus[required] option:not(:first-child) {
+            color: var(--success-color);
+        }
+    }
+
+    &.error {
+        fieldset, *:invalid {
+            border-color: var(--error-color);
+        }
+    }
+}
+</style>