comand-component-library 4.2.51 → 4.2.53

package/src/components/CmdContainer.vue

@@ -1,93 +1,111 @@
 <template>
+    <!-- begin CmdContainer ---------------------------------------------------------------------------------------- -->
     <div class="cmd-container">
-        <!-- begin cmd-headline -->
-        <CmdHeadline
-            v-if="cmdHeadline"
-            v-bind="cmdHeadline"
-        />
-        <!-- end cmd-headline -->
+        <!-- begin CmdHeadline -->
+        <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline" />
+        <!-- end CmdHeadline -->
 
-        <!-- begin contentAboveSlot -->
-        <div v-if="contentAboveSlot" v-html="contentAboveSlot"></div>
-        <!-- end contentAboveSlot -->
-
-        <!-- begin slot-content (one column/slot-item only) -->
-        <slot v-if="oneSlotItem()"></slot>
-        <!-- end slot-content (one column/slot-item only) -->
-
-        <!-- begin grid-/flex-container to wrap multiple columns/items -->
-        <div v-else :class="[setInnerClass, 'inner-slot-wrapper']">
-            <!-- begin slot-content (multiple columns only) -->
-            <slot><p>{{innerText}}</p></slot>
-            <!-- end slot-content (multiple columns only) -->
+        <div :class="htmlClasses">
+            <!-- begin slot-content -->
+            <slot></slot>
+            <!-- end slot-content -->
         </div>
-        <!-- end grid-/flex-container to wrap multiple columns/items -->
-
-        <!-- begin contentBelowSlot -->
-        <div v-if="contentBelowSlot" v-html="contentBelowSlot"></div>
-        <!-- end contentBelowSlot -->
     </div>
+    <!-- end CmdContainer ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
 export default {
     name: "CmdContainer",
     props: {
-        /**
-         * define (html-)content to display above slot-content
+        /** define container-type
          *
-         * @canContainHtml: true
+         * @affectsStyling: true
+         * @allowedValues: "", "default", "flex", "grid"
          */
-        contentAboveSlot: {
+        containerType: {
             type: String,
-            required: false
+            default: "default",
+            validator(value) {
+                return value === "" ||
+                    value === "default" ||
+                    value === "flex" ||
+                    value === "grid"
+            }
         },
         /**
-         * define inner-text
+         * define content-orientation
+         *
+         * containerType-property must be set to "flex"
+         *
+         * @affectsStyling: true
+         * @allowedValues: "vertical", "horizontal"
          */
-        innerText: {
-            type: String ,
-            required: false
+        contentOrientation: {
+            type: String,
+            default: "vertical",
+            validator(value) {
+                return value === "horizontal" ||
+                    value === "vertical"
+            }
         },
         /**
-         * define (html-)content to display below slot-content
+         * activate if no gap between items should be used
          *
-         * @canContainHtml: true
+         * @affectsStyling: true
          */
-        contentBelowSlot: {
-            type: String,
-            required: false
+        noGap: {
+            type: Boolean,
+            default: true
         },
         /**
-         * define container-type
+         * activate if items should not behave like flex-items (they are now shrunk to their content)
          *
-         * @allowedValues: "grid", "flex"
+         * @affectsStyling: true
          */
-        containerType: {
-            type: String,
-            required: false
+        flexNone: {
+            type: Boolean,
+            default: false
         },
         /**
-         * define content-orientation
+         * define how the items will be aligned vertically
          *
-         * containerType-property must be set to "flex"
+         * attention: if alignContentVertical is activated, this property defines the horizontal alignment
          *
-         * @allowedValues: "vertical", "horizontal"
+         * @allowedValues: top, flex-start, center, flex-end, bottom
+         * @affectsStyling: true
          */
-        contentOrientation: {
+        alignItems: {
             type: String,
-            default: "vertical",
+            required: false,
             validator(value) {
-                return value === "horizontal" ||
-                    value === "vertical"
+                return value === "top" ||
+                    value === "flex-start" ||
+                    value === "center" ||
+                    value === "flex-end" ||
+                    value === "bottom"
             }
         },
         /**
-         * define a class to set on inner div
+         * 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
          */
-        innerClass: {
+        justifyContent: {
             type: String,
-            required: false
+            required: false,
+            validator(value) {
+                return value === "top" ||
+                    value === "flex-start" ||
+                    value === "center" ||
+                    value === "flex-end" ||
+                    value === "bottom" ||
+                    value === "space-between" ||
+                    value === "space-around"
+            }
         },
         /**
          * properties for CmdHeadline-component
@@ -97,43 +115,38 @@ export default {
             required: false
         }
     },
-    methods: {
-        addHandlerProvider() {
-            return ""
-        },
-        oneSlotItem() {
-            if (typeof this.$slots.default !== "function") {
-                return false
-            }
+    computed: {
+        htmlClasses() {
+            const htmlClasses = []
 
-            const vnodes = this.$slots.default()
+            if (this.containerType !== 'default') {
+                if (this.containerType === "flex") {
+                    htmlClasses.push("flex-container")
 
-            if (vnodes.length === 1 && typeof vnodes[0].type === "symbol" && Array.isArray(vnodes[0].children)) {
-                return vnodes[0].children.length === 1
-            }
-            if (vnodes.length === 1 && typeof vnodes[0].type === "object" && vnodes[0].type.name === "RenderComponents" && typeof vnodes[0].props === "object" && Array.isArray(vnodes[0].props.components)) {
-                return vnodes[0].props.components.length === 1
-            }
-            return vnodes.length === 1
-        }
-    },
-    computed: {
-        setInnerClass() {
-            let htmlClass = this.innerClass || ""
-            switch (this.containerType) {
-                case "grid":
-                    htmlClass += " grid-container-create-columns"
-                    break
-                case "flex":
-                    if (this.contentOrientation === "horizontal") {
-                        htmlClass += " flex-container"
-                    } else if (this.contentOrientation === "vertical") {
-                        htmlClass += " flex-container vertical"
+                    if (this.contentOrientation) {
+                        htmlClasses.push(this.contentOrientation === "vertical" ? "flex-direction-column" : null)
+                    }
+                    if (this.useGap) {
+                        htmlClasses.push("no-gap")
                     }
-                    break
-                default: /* do nothing */
+                    if (this.flexNone) {
+                        htmlClasses.push("flex-none")
+                    }
+                    if (this.alignItems) {
+                        htmlClasses.push("align-items-" + this.alignItems)
+                    }
+                }
+
+                if (this.containerType === "grid") {
+                    htmlClasses.push("grid-container-create-columns")
+                }
             }
-            return htmlClass
+
+            if (this.justifyContent) {
+                htmlClasses.push("justify-content-" + this.justifyContent)
+            }
+
+            return htmlClasses.join(" ")
         }
     }
 }
@@ -143,4 +156,4 @@ export default {
 .cmd-container {
     min-height: 1rem;
 }
-</style>
+</style>

package/src/components/CmdCookieDisclaimer.vue

@@ -1,5 +1,6 @@
 <template>
-    <transition name="fade">
+    <transition :name="transition">
+        <!-- begin CmdCookieDisclaimer ---------------------------------------------------------------------------------------- -->
         <div class="cmd-cookie-disclaimer flex-container vertical">
             <!-- begin slot -->
             <template v-if="useSlot">
@@ -135,6 +136,7 @@
                 <!-- end button-wrapper for 'accept'-buttons -->
             </div>
         </div>
+        <!-- end CmdCookieDisclaimer ---------------------------------------------------------------------------------------- -->
     </transition>
 </template>
 
@@ -153,6 +155,15 @@ export default {
         }
     },
     props: {
+         /**
+         * define the transition when cookie disclaimer disappears
+         * 
+         * @allowedValues: "none", "fade", "scroll" 
+         */
+         transition: {
+            type: String,
+            default: "fade"
+        },
         /**
          * define icon-class for collapsed box
          */

package/src/components/CmdCopyrightInformation.vue

@@ -1,7 +1,9 @@
 <template>
+    <!-- begin CmdCopyrightInformation ---------------------------------------------------------------------------------------- -->
     <div class="cmd-copyright-information" role="contentinfo">
         <a href="https://www.comand-ui.com" target="comand-ui-website" lang="en" title="CoManD-UI-Website">&copy; CoManD-UI</a>
     </div>
+    <!-- end CmdCopyrightInformation ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdFakeSelect.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdFakeSelect ---------------------------------------------------------------------------------------- -->
     <div
         :class="[
             validationStatus,
@@ -174,6 +175,7 @@
             </li>
         </ul>
     </div>
+    <!-- end CmdFakeSelect ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -525,7 +527,7 @@ export default {
 /* begin cmd-fake-select ------------------------------------------------------------------------------------------ */
 .cmd-fake-select {
     align-self: flex-end;
-    border-radius: var(--default-border-radius);
+    border-radius: var(--form-input-border-radius);
 
     > span:first-child {
         a {
@@ -551,16 +553,16 @@ export default {
         display: block;
         min-width: 0;
         box-shadow: none;
-        border-radius: var(--default-border-radius);
+        border-radius: var(--form-input-border-radius);
 
         > li {
             height: 100%;
-            border-radius: var(--default-border-radius);
+            border-radius: var(--form-input-border-radius);
 
             &:first-child {
                 > a {
                     height: inherit;
-                    border: var(--default-border);
+                    border: var(--form-input-border);
                     background: var(--color-scheme-background);
                     color: var(--color-scheme-text-color);
                     border-radius: var(--default-border-radius);
@@ -631,8 +633,10 @@ export default {
             display: flex;
             align-items: center;
             width: 100%;
-            padding: .7rem;
-            padding-top: .8rem;
+            padding: var(--form-input-padding);
+            padding-top: calc(var(--default-padding) - .06rem);
+            padding-right: calc(var(--default-padding) / 2);
+            padding-bottom: calc(var(--default-padding) - .06rem);
             outline: none;
             border-bottom: var(--default-border);
             text-decoration: none;

package/src/components/CmdFancyBox.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdFancybox ---------------------------------------------------------------------------------------- -->
     <dialog
         ref="dialog"
         :class="['cmd-fancybox', {'show-overlay': showOverlay, 'image' : fancyBoxImageUrl || fancyBoxGallery, 'image-gallery': fancyBoxGallery}]"
@@ -135,6 +136,7 @@
         />
         <!-- end CmdThumbnailScroller -->
     </dialog>
+    <!-- end CmdFancybox ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdFlexibleScrollContainer.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdFlexibleScrollContainer ---------------------------------------------------------------------------------------- -->
     <div :class="['cmd-flexible-scroll-container flexible-scroll-container', {'reverse-order': fixedContainerAtBottom}]">
         <div class="fixed-wrapper">
             <!-- begin slot for fixed-wrapper -->
@@ -11,6 +12,7 @@
             <!-- end slot for scroll-wrapper -->
         </div>
     </div>
+    <!-- end CmdFlexibleScrollContainer ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdForm.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdForm ---------------------------------------------------------------------------------------- -->
     <form class="cmd-form" :action="formAction" :data-use-validation="useValidation" @submit="onSubmit"
           :class="{error: errorOccurred}" :novalidate="novalidate" :method="formMethod">
         <template v-if="useFieldset">
@@ -95,6 +96,7 @@
         <slot v-else></slot>
         <!-- end default-slot-content -->
     </form>
+    <!-- end CmdForm ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdFormElement.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdFormElement ---------------------------------------------------------------------------------------- -->
     <label
         v-if="(element === 'input' || element === 'select' || element === 'textarea')"
         :class="[
@@ -283,6 +284,7 @@
         <!-- end CmdIcon -->
     </button>
     <!-- end button -->
+    <!-- end CmdFormElement ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -1033,6 +1035,13 @@ export default {
     .inner-input-wrapper {
         margin: 0;
 
+        &:has(.button, button) {
+            input {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+        }
+
         a.deleteicon {
             position: absolute;
             top: 50%;
@@ -1057,7 +1066,8 @@ export default {
 
         a.button {
             right: 0;
-
+            align-self: stretch;
+            aspect-ratio: 1 / 1;  /* square */
             & + a {
                 right: 5rem;
             }

package/src/components/CmdFormFilters.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdFormFilters ---------------------------------------------------------------------------------------- -->
     <ul v-if="options.length" class="cmd-form-filters">
         <li v-if="options.length > 1">
             <a href="#" @click.prevent="deleteAllFilters">
@@ -17,6 +18,7 @@
             </a>
         </li>
     </ul>
+    <!-- end CmdFormElement ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdGoogleMaps.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdGoogleMaps ---------------------------------------------------------------------------------------- -->
     <div class="cmd-google-maps responsive-wrapper">
         <!-- begin CmdHeadline -->
          <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline" />
@@ -22,6 +23,7 @@
         </iframe>
         <!-- end iframe with google-map -->
     </div>
+    <!-- end CmdGoogleMaps ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdHeadline.vue

@@ -1,10 +1,11 @@
 <template>
+    <!-- begin CmdHeadline ---------------------------------------------------------------------------------------- -->
     <!-- begin default-view -->
     <div v-if="!editModeContext || settingsContext || mainSidebarContext || headlineText"
          :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': cmdIcon?.iconClass}, headlineTextAlign]">
         <!-- begin headline with pre-headline-text -->
         <template v-if="preHeadlineText">
-            <component v-if="headlineText" :is="headlineTag">
+            <component v-if="headlineText" :is="headlineTag" :class="highlightLevel">
                 <!-- begin CmdIcon -->
                 <CmdIcon v-if="cmdIcon" v-bind="cmdIcon"/>
                 <!-- end CmdIcon -->
@@ -115,6 +116,7 @@
         </template>
     </EditComponentWrapper>
     <!-- end edit-mode -->
+    <!-- end CmdHeadline ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -145,6 +147,21 @@ export default {
             type: [String, Number],
             default: "2"
         },
+        /**
+         * set highlight-level for headline
+         * 
+         * @allowedValues: "none", "primary", "secondary", "tertiary"
+         */
+         highlightLevel: {
+            type: Boolean,
+            default: "none",
+            validator(value) {
+                return value === "none" ||
+                    value === "primary" ||
+                    value === "secondary" ||
+                    value === "tertiary"
+            }
+        },
         /**
          * small pre-headline-text above main-headline
          *
@@ -314,6 +331,11 @@ export default {
         }
 
         &.has-icon {
+            h1, h2, h3, h4, h5, h6 {
+                display: flex;
+                align-items: center;
+            }
+
             &.text-center {
                 justify-content: center;
 

package/src/components/CmdIcon.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdIcon ---------------------------------------------------------------------------------------- -->
     <!-- begin iconify-icon -->
     <Icon v-if="isIconify" :icon="iconClass" :title="tooltip" :class="$attrs.class"></Icon>
     <!-- end iconify-icon -->
@@ -6,6 +7,7 @@
     <!-- begin icon from local iconfont -->
     <span v-else :class="[iconClass, $attrs.class]" :title="tooltip"></span>
     <!-- end icon from local iconfont -->
+    <!-- end CmdIcon ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdImage.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdImage ---------------------------------------------------------------------------------------- -->
     <!-- begin edit-mode -->
     <EditComponentWrapper
         v-if="editModeContext"
@@ -108,7 +109,9 @@
     <img v-else class="cmd-image" :src="imageSource" :alt="image?.alt" :title="image?.tooltip" :loading="image?.lazyLoading ? 'lazy' : null" @load="onImageLoaded"/>
     <!-- end image without figure/figcaption -->
     <!-- end default-view -->
+     <!-- end CmdImage ---------------------------------------------------------------------------------------- -->
 </template>
+
 <script>
 import {createUuid} from "../utils/common.js"
 import {checkAndUploadFile} from "../utils/checkAndUploadFile"

package/src/components/CmdImageGallery.vue

@@ -1,5 +1,6 @@
 <template>
-    <div class="grid-container-create-columns cmd-image-gallery">
+    <!-- begin CmdImageGallery ---------------------------------------------------------------------------------------- -->
+    <div class="cmd-image-gallery grid-container-create-columns">
         <!-- begin cmd-headline -->
         <CmdHeadline
             v-if="cmdHeadline?.headlineText || editModeContext"
@@ -47,6 +48,7 @@
         </button>
         <!-- end show placeholder if no image exists (and component is not edited) -->
     </div>
+    <!-- end CmdImageGallery ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdImageZoom.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdImageZoom ---------------------------------------------------------------------------------------- -->
     <div class="cmd-image-zoom flex-container">
         <!-- begin small image -->
         <a href="#" class="flex-none thumbnail-imagezoom" :title="imageSmall.image.tooltip">
@@ -22,6 +23,7 @@
 
         <!-- end large image -->
     </div>
+    <!-- end CmdImageZoom ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdInnerLink.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdInnerLink ---------------------------------------------------------------------------------------- -->
     <img v-if="image?.src && (image?.position === 'left' || image?.position === 'top' || !image?.position)" :src="image?.src" :alt="image?.alt" />
     <span v-if="icon?.iconClass && (icon?.position === 'left' || icon?.position === 'top' || !icon?.position)" :class="icon?.iconClass" :title="icon?.tooltip"></span>
     <span v-if="text">{{ text }}</span>
@@ -7,6 +8,7 @@
     <!-- begin default-slot -->
     <slot></slot>
     <!-- end default-slot -->
+    <!-- end CmdInnerLink ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdInputGroup.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdInputGroup ---------------------------------------------------------------------------------------- -->
     <div :class="[
         'cmd-input-group label',
         validationStatus,
@@ -80,6 +81,7 @@
         </div>
         <!-- end useSlot -->
     </div>
+    <!-- end CmdInputGroup ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdLink.vue

@@ -1,10 +1,10 @@
 <template>
-    <!-- begin CmdLink -->
+    <!-- begin CmdLink ---------------------------------------------------------------------------------------- -->
     <!-- begin href -->
     <a v-if="linkType === 'href'"
        :href="!disabled ? path : null"
        :target="target"
-       :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton, 'disabled': disabled, 'box': styleAsBox, 'fancybox': fancybox}]"
+       :class="['cmd-link', highlightLevel, {'button': styleAsButton, 'disabled': disabled, 'box': styleAsBox, 'fancybox': fancybox}]"
        @click.prevent="emitClick($event, 'href')"
        :title="icon?.tooltip"
     >
@@ -21,7 +21,8 @@
     <!-- begin router-link -->
     <router-link v-else-if="linkType === 'router'" 
         :to="!disabled ? path : {}" 
-        :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton, 'disabled': disabled, 'box': styleAsBox, 'fancybox': fancybox}]" 
+        exact-active-class="router-link-exact-active active"
+        :class="['cmd-link', highlightLevel, {'button': styleAsButton, 'disabled': disabled, 'box': styleAsBox, 'fancybox': fancybox}]" 
         @click="emitClick($event, 'router')" 
         :title="icon?.tooltip">
         <!-- begin CmdInnterLink -->
@@ -36,7 +37,7 @@
 
     <!-- begin button -->
     <button v-else-if="linkType === 'button' || linkType === 'submit'" 
-        :class="['cmd-link button', {'primary': primaryButton, 'disabled': disabled, 'box': styleAsBox, 'fancybox': fancybox}]" 
+        :class="['cmd-link button', highlightLevel, {'disabled': disabled, 'box': styleAsBox, 'fancybox': fancybox}]" 
         type="submit"
         :disabled="disabled" 
         @click="emitClick($event, 'button')" 
@@ -51,7 +52,7 @@
         <!-- end CmdInnterLink -->
     </button>
     <!-- end button -->
-    <!-- end CmdLink -->
+    <!-- end CmdLink ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -123,13 +124,19 @@ export default {
             default: false
         },
         /**
-         * activate if button should be styled as primary-button
-         *
-         * (type must be 'button' or styleAsButton-property must be activated)
+         * set highlight-level for link/button
+         * 
+         * @allowedValues: "none", "primary", "secondary", "tertiary"
          */
-        primaryButton: {
+         highlightLevel: {
             type: Boolean,
-            default: false
+            default: "primary",
+            validator(value) {
+                return value === "none" ||
+                    value === "primary" ||
+                    value === "secondary" ||
+                    value === "tertiary"
+            }
         },
         /**
          * activate if link/button should be disabled