comand-component-library 4.2.51 → 4.2.52

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,7 @@
     <!-- 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}]" 
+        :class="['cmd-link', highlightLevel, {'button': styleAsButton, 'disabled': disabled, 'box': styleAsBox, 'fancybox': fancybox}]" 
         @click="emitClick($event, 'router')" 
         :title="icon?.tooltip">
         <!-- begin CmdInnterLink -->
@@ -36,7 +36,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 +51,7 @@
         <!-- end CmdInnterLink -->
     </button>
     <!-- end button -->
-    <!-- end CmdLink -->
+    <!-- end CmdLink ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -123,13 +123,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