comand-component-library 4.0.2 → 4.0.4

package/src/components/CmdHeadline.vue

@@ -1,7 +1,7 @@
 <template>
+    <!-- begin default-view -->
     <div v-if="!editModeContext || settingsContext || mainSidebarContext"
          :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': headlineIcon?.iconClass}, getTextAlign]">
-
         <template v-if="preHeadlineText">
             <component v-if="headlineText" :is="headlineTag">
                 <!-- begin CmdIcon -->
@@ -21,17 +21,20 @@
                 </span>
             </component>
         </template>
-        <component v-else-if="headlineText" :is="headlineTag">
+        <component v-else :is="headlineTag">
             <!-- begin CmdIcon -->
             <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
             <!-- end CmdIcon -->
+
             <span>
-            <!-- being slot -->
-            <slot>{{ headlineText }}</slot>
+                <!-- being slot -->
+                <slot>{{ headlineText }}</slot>
                 <!-- end slot -->
             </span>
         </component>
     </div>
+    <!-- end default-view -->
+
     <!-- begin edit-mode -->
     <EditComponentWrapper
         v-else
@@ -142,7 +145,12 @@ export default {
          */
         textAlign: {
             type: String,
-            default: null
+            default: null,
+            validator(value) {
+                return value === "left" ||
+                    value === "center" ||
+                    value === "right"
+            }
         }
     },
     computed: {

package/src/components/CmdIcon.vue

@@ -28,7 +28,11 @@ export default {
          */
         type: {
             type: String,
-            default: "auto"
+            default: "auto",
+            validator(value) {
+                return value === "auto" ||
+                    value === "iconify"
+            }
         },
         /**
          * icon-class for icon from local iconfont
@@ -65,7 +69,7 @@ export default {
 
 <style>
 .iconify {
-    font-size: var(--icon-size);
+    font-size: var(--default-icon-size);
     vertical-align: text-bottom;
 
     & + span, span + &  {

package/src/components/CmdImage.vue

@@ -376,6 +376,11 @@ export default {
         display: block;
     }
 
+    figcaption {
+        border-bottom-left-radius: var(--default-border-radius);
+        border-bottom-right-radius: var(--default-border-radius);
+    }
+
     &.text-center {
         figcaption {
             text-align: center;
@@ -401,7 +406,7 @@ export default {
             transform: translateX(-50%) translateY(-50%);
             font-size: 10rem;
             color: var(--pure-white);
-            text-shadow: var(--text-shadow);
+            text-shadow: var(--default-text-shadow);
             z-index: 10;
         }
 

package/src/components/CmdImageGallery.vue

@@ -15,13 +15,13 @@
                href="#"
                @click.prevent="showFancyBox(index)"
                :title="getMessage('cmdimagegallery.tooltip.open_large_image')">
-                <CmdImage :image="image.image" :figcaption="image.figcaption"/>
+                <CmdImage :image="image.image" :figcaption="figcaption(image)"/>
             </a>
             <!-- end images linked to fancybox -->
 
             <!-- begin images not linked to fancybox -->
             <div v-else v-for="(image, index) in images" :key="`i${index}`" class="image-wrapper">
-                <CmdImage :image="image.image" :figcaption="image.figcaption"/>
+                <CmdImage :image="image.image" :figcaption="figcaption(image)"/>
             </div>
             <!-- end images not linked to fancybox -->
         </template>
@@ -89,7 +89,11 @@ export default {
          */
         figcaptionPosition: {
             type: String,
-            default: "bottom"
+            required: false,
+            validator(value) {
+                return value === "top" ||
+                    value === "bottom"
+            }
         }
     },
     methods: {
@@ -107,6 +111,13 @@ export default {
                 }
             }
         },
+        figcaption(image) {
+            const figcaption = {...image.figcaption}
+            if(this.figcaptionPosition) {
+                figcaption.position = this.figcaptionPosition
+            }
+            return figcaption
+        },
         onAddItem() {
             this.editModeContext.content.addContent(
                 buildComponentPath(this, 'props', 'images', -1),
@@ -162,7 +173,7 @@ export default {
 
         img {
             border: var(--default-border);
-            border-radius: var(--border-radius);
+            border-radius: var(--default-border-radius);
             max-height: 30rem;
         }
 

package/src/components/CmdInputGroup.vue

@@ -2,19 +2,36 @@
     <div :class="[
         'cmd-input-group label',
         validationStatus,
-        {inline: labelInline,
-        'multiple-switch': multipleSwitch,
-        disabled: disabled,
-        'toggle-switch': toggleSwitch,
-        'has-state': validationStatus
+        {
+            inline: labelInline,
+            'multiple-switch': multipleSwitch,
+            disabled: disabled,
+            'toggle-switch': toggleSwitch,
+            'has-state': validationStatus
         }
         ]"
          :aria-labelledby="htmlId">
+
+        <!-- begin label -->
         <span v-show="showLabel" class="label-text">
-             <span :id="htmlId">{{ labelText }}<sup v-if="required">*</sup></span>
+            <span :id="htmlId">{{ labelText }}<sup v-if="required">*</sup></span>
+
+            <!-- begin status-icon -->
+            <a v-if="(required || inputRequirements.length > 0) && showStatusIcon"
+               href="#"
+               @click.prevent
+               :title="validationTooltip"
+               :aria-errormessage="tooltipId"
+               aria-live="assertive"
+               :id="tooltipId">
+               <!-- begin CmdIcon -->
+               <CmdIcon :iconClass="getStatusIconClass"/>
+                <!-- end CmdIcon -->
+            </a>
+            <!-- end status-icon -->
 
-            <!-- begin CmdTooltipForInputElements -->
-            <CmdTooltipForInputElements
+            <!-- begin CmdTooltipForFormElements -->
+            <CmdTooltipForFormElements
                 v-if="useCustomTooltip && (validationStatus === '' || validationStatus === 'error')"
                 ref="tooltip"
                 :showRequirements="showRequirements"
@@ -27,20 +44,11 @@
                 :relatedId="tooltipId"
                 :role="validationStatus === 'error' ? 'alert' : 'dialog'"
             />
-            <!-- end CmdTooltipForInputElements -->
-
-            <a v-if="required || inputRequirements.length"
-               href="#"
-               @click.prevent
-               :title="validationTooltip"
-               :aria-errormessage="tooltipId"
-               aria-live="assertive"
-               :id="tooltipId">
-               <!-- begin CmdIcon -->
-               <CmdIcon :iconClass="getStatusIconClass"/>
-                <!-- end CmdIcon -->
-            </a>
+            <!-- end CmdTooltipForFormElements -->
         </span>
+        <!-- end label -->
+
+        <!-- begin view without slot -->
         <span v-if="!useSlot" :class="['flex-container', {'no-flex': !stretchHorizontally, 'no-gap': multipleSwitch}]">
             <label v-for="(inputElement, index) in inputElements" :key="index" :for="inputElement.id">
                 <input
@@ -53,12 +61,16 @@
                     :class="{'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch}"
                 />
                 <!-- begin CmdIcon -->
-                <CmdIcon v-if="multipleSwitch && inputElement.iconClass" :iconClass="inputElement.iconClass"
-                         :type="inputElement.iconType"/>
+                <CmdIcon
+                    v-if="multipleSwitch && inputElement.iconClass"
+                    :iconClass="inputElement.iconClass"
+                    :type="inputElement.iconType"
+                />
                 <!-- end CmdIcon -->
-                <span v-if="inputElement.labelText">{{ inputElement.labelText }}</span>
+                <span v-if="inputElement.labelText" class="label-text">{{ inputElement.labelText }}</span>
             </label>
         </span>
+        <!-- end view without slot -->
 
         <!-- begin useSlot -->
         <div v-else class="flex-container no-flex">
@@ -82,11 +94,6 @@ export default {
         Identifier,
         Tooltip
     ],
-    data() {
-        return {
-            value: ""
-        }
-    },
     props: {
         /**
          * set value for v-model (must be named modelValue in vue3 if default v-model should be used)
@@ -102,6 +109,13 @@ export default {
             type: Boolean,
             default: false
         },
+        /**
+         * activate if interactive status-icon (to show requirements) should be shown inline with label
+         */
+        showStatusIcon: {
+            type: Boolean,
+            default: true
+        },
         /**
          * list of input-elements inside group
          *
@@ -118,18 +132,29 @@ export default {
          */
         inputTypes: {
             type: String,
-            default: "radio"
+            default: "radio",
+            validator(value) {
+                return value === "checkbox" ||
+                    value === "radio"
+            }
         },
         /**
          * set status for label and inner form-elements
          *
-         * @allowedValues: error, warning, success, info
+         * @allowedValues: "", error, warning, success, info
          *
          * @affectsStyling: true
          */
         status: {
             type: String,
-            required: false
+            required: false,
+            validator(value) {
+                return value === "" ||
+                    value === "error" ||
+                    value === "warning" ||
+                    value === "success" ||
+                    value === "info"
+            }
         },
         /**
          * for replacing native checkboxes/radio-buttons by custom ones (based on frontend-framework)
@@ -267,6 +292,7 @@ export default {
 </script>
 
 <style>
+/* begin cmd-input-group ------------------------------------------------------------------------------------------ */
 .cmd-input-group {
     &.inline {
         display: flex;
@@ -279,24 +305,50 @@ export default {
     }
 
     /* overwrite default behavior from frontend-framework */
-    .label-text {
+    > .label-text {
         display: inline-flex;
+        margin-bottom: calc(var(--default-margin) / 2);
 
-        > span + a [class*="icon-"] {
+        > span + a:has([class*="icon-"]) {
             margin-left: calc(var(--default-margin) / 2);
         }
+
+        &:hover, &:active, &:focus {
+            span {
+                color: var(--hyperlink-color-highlighted)
+            }
+
+            & + .flex-container {
+                label:not(:has(input:checked)) .label-text {
+                    color: var(--default-text-color);
+                }
+
+                input {
+                    border-color: var(--default-border-color);
+                }
+            }
+        }
     }
 
     &.has-state {
-        label {
+        &.error {
+            --status-color: var(--error-color);
+        }
+
+        label, [class*="icon-"]  {
             color: var(--status-color);
         }
 
         &.multiple-switch {
             label {
                 border-color: var(--status-color);
+
+                > * {
+                    color: var(--status-color);
+                }
             }
         }
     }
 }
+/* end cmd-input-group ------------------------------------------------------------------------------------------ */
 </style>

package/src/components/CmdListOfLinks.vue

@@ -8,7 +8,7 @@
         <!-- end cmd-headline -->
 
         <!-- begin list of links -->
-        <ul :class="['flex-container', {'no-gap': !useGap},'align-' + align, setStretchClass]">
+        <ul :class="['flex-container', {'no-gap': !useGap}, 'align-' + align, setStretchClass]">
             <CmdListOfLinksItem
                 v-if="!editModeContext"
                 v-for="(link, index) in links"
@@ -106,7 +106,12 @@ export default {
          */
         align: {
             type: String,
-            default: "left"
+            default: "left",
+            validator(value) {
+                return value === "left" ||
+                    value === "center" ||
+                    value === "right"
+            }
         },
         /**
          * properties for CmdHeadline-component
@@ -129,7 +134,11 @@ export default {
          */
         orientation: {
             type: String,
-            default: "vertical"
+            default: "vertical",
+            validator(value) {
+                return value === "horizontal" ||
+                    value === "vertical"
+            }
         }
     },
     computed: {
@@ -183,6 +192,14 @@ export default {
             list-style: none;
             margin-left: 0;
         }
+
+        &.align-center {
+            justify-content: center;
+        }
+
+        &.align-right li {
+            text-align: right;
+        }
     }
 
     &.horizontal {
@@ -195,10 +212,6 @@ export default {
                 display: flex;
             }
 
-            &.align-center {
-                justify-content: center;
-            }
-
             &.align-right {
                 justify-content: flex-end;
             }

package/src/components/CmdListOfRequirements.vue

@@ -2,7 +2,7 @@
     <div class="cmd-list-of-requirements">
         <!-- begin CmdHeadline -->
         <CmdHeadline v-if="showHeadline" :headline-level="cmdHeadline.headlineLevel">
-            {{ headlineRequirements }}<template v-if="labelText"><br/><em>{{ labelText }}</em></template>
+             {{ headlineRequirements }}<template v-if="labelText"><br/><em>{{ labelText }}</em></template>
         </CmdHeadline>
         <!-- end CmdHeadline -->
 
@@ -154,27 +154,23 @@ export default {
 /* begin cmd-list-of-requirements ------------------------------------------------------------------------------------------ */
 .cmd-list-of-requirements {
     dl {
-        .error {
-            --status-color: var(--error-color);
+        span[class*="icon-"] {
+            color: var(--status-color);
+        }
 
-            [class*="icon-"] {
-                color: var(--status-color);
-            }
+        .error, .error span {
+            --status-color: var(--error-color);
         }
 
-        .warning {
+        .warning, .warning span {
             --status-color: var(--warning-color);
         }
 
-        .success {
-            --status-color: var(--success-color) !important;
-
-            [class*="icon-"] {
-                color: var(--status-color);
-            }
+        .success, .success span {
+            --status-color: var(--success-color);
         }
 
-        .info {
+        .info, .info span {
             --status-color: var(--info-color);
         }
 
@@ -182,10 +178,6 @@ export default {
             color: var(--status-color);
         }
 
-        [class*="icon-"] {
-            color: var(--status-color);
-        }
-
         & ~ a {
             display: flex;
             align-items: center;

package/src/components/CmdLoginForm.vue

@@ -15,6 +15,7 @@
             <CmdFormElement
                 element="input"
                 type="text"
+                ref="username"
                 :name="cmdFormElementUsername.name"
                 :id="cmdFormElementUsername.id"
                 v-model="username"
@@ -46,7 +47,7 @@
         <div class="option-wrapper flex-container">
             <template v-if="options.forgotPassword || options.createAccount">
                 <!-- begin link for 'forgot password' -->
-                <a v-if="options.forgotPassword" href="#" @click.prevent="sendLogin = true">
+                <a v-if="options.forgotPassword" href="#" @click.prevent="toggleSendLoginView">
                     <!-- begin CmdIcon -->
                     <CmdIcon v-if="options.forgotPassword.icon?.show && options.forgotPassword.icon?.iconClass"
                           :iconClass="options.forgotPassword.icon.iconClass"
@@ -134,7 +135,7 @@
         <!-- end CmdFormElement -->
 
         <div class="option-wrapper flex-container">
-            <a href="#" @click.prevent="sendLogin = false">
+            <a href="#" @click.prevent="toggleSendLoginView">
                 <!-- begin CmdIcon -->
                 <CmdIcon
                     v-if="options.backToLoginForm && options.backToLoginForm.icon && options.backToLoginForm.icon.show && options.backToLoginForm.icon.iconClass"
@@ -392,6 +393,17 @@ export default {
         }
     },
     methods: {
+        toggleSendLoginView() {
+            this.sendLogin = !this.sendLogin
+
+            this.$nextTick(() => {
+                if(this.sendLogin) {
+                    this.$refs.sendPassword.setFocus()
+                } else {
+                    this.$refs.username.setFocus()
+                }
+            })
+        },
         modelChange() {
             this.$emit("update:modelValue", { "username": this.username, "password": this.password })
         },

package/src/components/CmdMainNavigation.vue

@@ -219,7 +219,11 @@ export default {
          */
         offcanvasPosition: {
             type: String,
-            default: "right"
+            default: "right",
+            validator(value) {
+                return value === "right" ||
+                    value === "left"
+            }
         },
         /**
          * button to open off-canvas-navigation

package/src/components/CmdMultistepFormProgressBar.vue

@@ -119,7 +119,8 @@ export default {
         gap: var(--default-gap);
 
         li {
-            border: var(--default-border) !important;
+            border: var(--default-border);
+            border-color: var(--primary-color-reduced-opacity);
             border-radius: var(--default-border-radius);;
 
             a, a.active {
@@ -138,6 +139,14 @@ export default {
                     color: var(--default-text-color) !important;
                 }
             }
+
+            &.active {
+                border-color: var(--primary-color);
+
+                & ~li {
+                    border-color: var(--border-color);
+                }
+            }
         }
     }
 
@@ -174,7 +183,7 @@ export default {
                         border: var(--default-border);
                         border-radius: var(--full-circle);
                         background: var(--pure-white);
-                        color: var(--text-color);
+                        color: var(--default-text-color);
                         margin: 0;
                         position: absolute;
                         right: 0;
@@ -219,10 +228,6 @@ export default {
             }
         }
 
-        &:not(:first-child) {
-            border-left: .2rem solid var(--border-color);
-        }
-
         &:last-child {
             a {
                 [class*="icon-"] {
@@ -247,7 +252,7 @@ export default {
 
                         & + [class*="icon-"] {
                             &:last-child {
-                                color: var(--text-color);
+                                color: var(--default-text-color);
                             }
                         }
                     }
@@ -261,7 +266,7 @@ export default {
             }
 
             & ~ li {
-                background: var(--default-background-color);
+                background: var(--default-background);
                 border-left-color: var(--border-color);
 
                 a {

package/src/components/CmdNewsletterSubscription.vue

@@ -34,7 +34,7 @@
                 element="button"
                 :type="buttonType"
                 :disabled="buttonDisabled"
-                :nativeButton="cmdFormElementSubmit"
+                :nativeButton="cmdFormElementSubmitDynamicLabel"
                 @click="sendData"
             />
             <!-- end cmd-form-element -->
@@ -145,6 +145,14 @@ export default {
         }
     },
     computed: {
+        cmdFormElementSubmitDynamicLabel() {
+            return this.updateButtonLabelText
+        },
+        updateButtonLabelText() {
+            const button = {...this.cmdFormElementSubmit}
+            button.text = this.subscription === "subscribe" ? "Subscribe now" : "Unsubscribe from list"
+            return button
+        },
         subscription: {
             get() {
                 return this.modelValue.subscription || "subscribe"
@@ -169,6 +177,15 @@ export default {
         checkValidationStatus(event) {
             this.buttonDisabled = event !== "success"
         }
+    },
+    watch: {
+        modelValue: {
+            handler() {
+                return this.updateButtonLabelText
+            },
+            deep: true,
+            immediate: true
+        }
     }
 }
 </script>

package/src/components/CmdOpeningHoursItem.vue

@@ -197,13 +197,11 @@ export default {
         toggleClosedStatus(period) {
             period  === 'am' ? this.editableDay.amClosed = !this.editableDay.amClosed : this.editableDay.pmClosed = !this.editableDay.pmClosed
         },
-        getTime(time, suffix) {
+        getTime(time) {
             if (this.timeFormatter) {
                 return this.timeFormatter(time.hours, time.mins)
             }
 
-            console.log("suffix", suffix)
-
             return timeFormatting(":", " " + this.abbreviationTextAm, " " + this.abbreviationTextPm, false)(time.hours, time.mins)
         },
         updateHandlerProvider() {

package/src/components/CmdPagination.vue

@@ -90,7 +90,11 @@ export default {
          */
         linkType: {
             type: String,
-            default: "href"
+            default: "href",
+            validator(value) {
+                return value === "href" ||
+                    value === "button"
+            }
         },
         /**
          * link to switch to previous page