comand-component-library 4.2.51 → 4.2.53

package/src/components/CmdThumbnailScroller.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdThumbnailScroller ---------------------------------------------------------------------------------------- -->
     <div :class="[
         'cmd-thumbnail-scroller',
         {
@@ -25,8 +26,8 @@
             />
             <!-- end CmdSlideButton -->
 
-            <!-- begin list of images to slide -->
-            <transition-group name="slide" tag="ul">
+            <!-- begin list of images -->
+            <transition-group :name="transition" tag="ul">
                 <li v-for="(item, index) in items" :key="index">
                     <a v-if="!editModeContext" :href="executeOnClick === 'url' ? item.url : '#'"
                        @click="executeLink(index, $event)"
@@ -78,7 +79,7 @@
                     <!-- end show placeholder if no image exists (and component is not edited) -->
                 </li>
             </transition-group>
-            <!-- end list of images to slide -->
+            <!-- end list of images -->
 
             <!-- begin CmdSlideButton -->
             <CmdSlideButton
@@ -89,6 +90,7 @@
             <!-- end CmdSlideButton -->
         </div>
     </div>
+    <!-- end CmdThumbnailScroller ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -117,6 +119,15 @@ export default {
         }
     },
     props: {
+        /**
+         * define the transition when thumbnails should change
+         * 
+         * @allowedValues: "none", "fade", "scroll" 
+         */
+         transition: {
+            type: String,
+            default: "scroll"
+        },
         /**
          * orientation for scroller
          *

package/src/components/CmdToggleDarkMode.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdToggleDarkMode ---------------------------------------------------------------------------------------- -->
     <div :class="['cmd-toggle-dark-mode', {'styled-layout': useStyledLayout, 'dark-mode': darkMode}]">
         <template v-if="!editing">
         <!-- begin button-style -->
@@ -53,6 +54,7 @@
             <!-- end edit-mode -->
         </template>
     </div>
+    <!-- end CmdToggleDarkMode ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdTooltip.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdTooltip ---------------------------------------------------------------------------------------- -->
     <div v-if="tooltipVisibility" :class="['cmd-tooltip', validationStatus]" ref="tooltip">
         <div v-if="cmdHeadline || iconClose.show" class="headline-wrapper">
             <!-- begin CmdHeadline -->
@@ -23,6 +24,7 @@
             {{ tooltipText }}
         </slot>
         <!-- end slot-content -->
+         <!-- end CmdTooltip ---------------------------------------------------------------------------------------- -->
     </div>
 </template>
 

package/src/components/CmdTooltipForFormElements.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdTooltipForFormElements ---------------------------------------------------------------------------------------- -->
     <!-- begin CmdTooltip -->
     <CmdTooltip
         ref="tooltip"
@@ -16,6 +17,7 @@
         <!-- end CmdListOfRequirements -->
     </CmdTooltip>
     <!-- end CmdTooltip -->
+    <!-- end CmdTooltipForFormElements ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdUploadForm.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdUploadForm ---------------------------------------------------------------------------------------- -->
     <!-- begin advanced mode -->
     <fieldset v-if="advancedMode" :class="['cmd-upload-form flex-container vertical', { 'upload-initiated': uploadInitiated }]">
         <legend :class="{hidden : !legend.show, 'align-left': legend.align === 'left'}">{{ legend.text }}</legend>
@@ -190,7 +191,8 @@
                             />
                             <!-- end CmdIcon -->
                         </a>
-                        <transition :name="useTransition ? 'fade' : null">
+                        <!-- begin list of file extensions -->
+                        <transition :name="transitionListOfFileExtensions">
                             <ul v-if="showListOfFileExtensions" class="list-of-file-extensions">
                                 <li
                                     v-for="(fileExtension, index) in allowedFileExtensions"
@@ -201,6 +203,7 @@
                                 </li>
                             </ul>
                         </transition>
+                        <!-- end list of file extensions -->
                     </dd>
                 </dl>
             </div>
@@ -345,6 +348,7 @@
         ref="formElement"
     />
     <!-- end CmdFormElement -->
+    <!-- end CmdUploadForm ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -381,6 +385,15 @@ export default {
         this.resetForm.systemMessageStatus = this.systemMessageStatus
     },
     props: {
+         /**
+         * define the transition when the list of file extensions is toggled
+         * 
+         * @allowedValues: "none", "fade", "scroll" 
+         */
+         transitionListOfFileExtensions: {
+            type: String,
+            default: "fade"
+        },
         /**
          * activate if transition for hiding list of file extensions
          */

package/src/components/CmdWidthLimitationWrapper.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdWidthLimitationWrapper ---------------------------------------------------------------------------------------- -->
     <div class="cmd-width-limitation-wrapper" :class="{'sticky': sticky}" ref="width-limitation-wrapper">
         <!-- begin slot-content in section -->
         <section v-if="useInnerSection" :class="setInnerClass" :id="anchorId">
@@ -32,6 +33,7 @@
         </template>
         <!-- end slot-content without section -->
     </div>
+    <!-- end CmdWidthLimitationWrapper ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdFlexContainer.vue

@@ -1,109 +0,0 @@
-<template>
-    <div :class="['cmd-flex-container', 'flex-container', htmlClasses]">
-        <!-- begin slot-content -->
-        <slot></slot>
-        <!-- end slot-content -->
-    </div>
-</template>
-
-<script>
-export default {
-    name: "CmdFlexContainer",
-    props: {
-        /**
-         * activate if content should be aligned vertically
-         *
-         * @affectsStyling: true
-         */
-        alignContentVertical: {
-            type: String,
-            required: false
-        },
-        /**
-         * activate if no gap between items should be used
-         *
-         * @affectsStyling: true
-         */
-        noGap: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         * activate if items should not behave like flex-items (they are now shrunk to their content)
-         *
-         * @affectsStyling: true
-         */
-        noFlex: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         * define how the items will be aligned vertically
-         *
-         * attention: if alignContentVertical is activated, this property defines the horizontal alignment
-         *
-         * @allowedValues: top, flex-start, center, flex-end, bottom
-         * @affectsStyling: true
-         */
-        alignItems: {
-            type: String,
-            required: false,
-            validator(value) {
-                return value === "top" ||
-                    value === "flex-start" ||
-                    value === "center" ||
-                    value === "flex-end" ||
-                    value === "bottom"
-            }
-        },
-        /**
-         * define how the items will be aligned/justified horizontally.
-         *
-         * attention: if alignContentVertical is activated, this property defines the vertical alignment/justification
-         *
-         * @allowedValues: top, flex-start, center, flex-end, bottom, space-between, space-around
-         * @affectsStyling: true
-         */
-        justifyContent: {
-            type: String,
-            required: false,
-            validator(value) {
-                return value === "top" ||
-                    value === "flex-start" ||
-                    value === "center" ||
-                    value === "flex-end" ||
-                    value === "bottom" ||
-                    value === "space-between" ||
-                    value === "space-around"
-            }
-        }
-    },
-    computed: {
-        htmlClasses() {
-            const htmlClasses = []
-
-            if (this.alignContentVertical) {
-                htmlClasses.push("vertical")
-            }
-            if (this.useGap) {
-                htmlClasses.push("no-gap")
-            }
-            if (this.noFlex) {
-                htmlClasses.push("flex-none")
-            }
-            if (this.alignItems) {
-                htmlClasses.push("align-items-" + this.alignItems)
-            }
-            if (this.justifyContent) {
-                htmlClasses.push("justify-content-" + this.justifyContent)
-            }
-
-            return htmlClasses.join(" ")
-        }
-    }
-}
-</script>
-
-<style>
-
-</style>