comand-component-library 4.0.35 → 4.0.37

package/src/components/CmdFormElement.vue

@@ -8,6 +8,7 @@
            {
             disabled: $attrs.disabled,
             inline : displayLabelInline,
+            'stretch-field' : stretchField,
             'toggle-switch': toggleSwitch,
             colored: colored,
             'has-state': validationStatus
@@ -445,6 +446,15 @@ export default {
             type: Boolean,
             required: false
         },
+        /**
+         * activate if field should be stretch over remaining (horizontal) space if inline
+         *
+         * displayLabelInline-property must be activated
+         */
+        stretchField: {
+            type: Boolean,
+            default: false
+        },
         /**
          * set status for label and form-element
          *

package/src/components/CmdLoginForm.vue

@@ -1,7 +1,7 @@
 <template>
     <!-- begin login-form -->
     <fieldset v-show="!sendLogin" class="cmd-login-form flex-container">
-        <legend :class="{hidden : !showLegend}">{{ textLegendLoginForm }}</legend>
+        <legend :class="{hidden : !legendLoginForm.show, 'align-left': legendLoginForm.align === 'left'}">{{ legendLoginForm.text }}</legend>
         <!-- begin CmdHeadline -->
         <CmdHeadline
             v-if="cmdHeadlineLoginForm"
@@ -10,7 +10,7 @@
         <!-- end CmdHeadline -->
 
         <!-- begin form elements -->
-        <div :class="['login-fields, flex-container', {'vertical': orientation === 'vertical'}]">
+        <div :class="['login-fields flex-container', {'vertical': orientation === 'vertical'}]">
             <!-- begin CmdFormElement -->
             <CmdFormElement
                 element="input"
@@ -65,6 +65,7 @@
 
                 <!-- begin link for 'create account' -->
                 <template v-if="options.createAccount">
+                    <!-- begin CmdLink -->
                     <CmdLink
                         :linkType="options.createAccount.linkType"
                         :path="options.createAccount.path"
@@ -75,6 +76,7 @@
                             position: options.createAccount.icon?.position
                         }"
                     />
+                    <!-- end CmdLink -->
                 </template>
                 <!-- end link for 'create account' -->
             </template>
@@ -104,7 +106,7 @@
 
     <!-- begin send-login-form -->
     <fieldset v-show="sendLogin" class="cmd-login-form flex-container">
-        <legend :class="{'hidden' : !showLegend}">{{ textLegendForgotLoginForm }}</legend>
+        <legend :class="{hidden : !legendForgotLoginForm.show, 'align-left': legendForgotLoginForm.align === 'left'}">{{ legendForgotLoginForm .text }}</legend>
         <!-- begin CmdHeadline -->
         <CmdHeadline
             v-if="cmdHeadlineSendLoginForm"
@@ -210,13 +212,19 @@ export default {
             }
         },
         /**
-         * text used as legend for login-fieldset
+         * options for legend for login-fieldset
          *
          * @requiredForAccessibility: true
          */
-        textLegendLoginForm: {
-            type: String,
-            default: "Login form"
+        legendLoginForm: {
+            type: Object,
+            default() {
+                return {
+                    show: true,
+                    align: "right",
+                    text: "Login form"
+                }
+            }
         },
         /**
          * toggle legend visibility
@@ -230,9 +238,15 @@ export default {
          *
          * @requiredForAccessibility: true
         */
-        textLegendForgotLoginForm: {
-            type: String,
-            default: "Forgot login form"
+        legendForgotLoginForm: {
+            type: Object,
+            default() {
+                return {
+                    show: true,
+                    align: 'right"',
+                    text: 'Forgot login form'
+                }
+            }
         },
         /**
          * properties for CmdHeadline-component for login-form
@@ -451,6 +465,16 @@ export default {
 <style>
 /* begin cmd-login-form ---------------------------------------------------------------------------------------- */
 .cmd-login-form {
+    .cmd-headline {
+        flex: none;
+        margin: 0;
+    }
+
+    legend.align-left {
+        left: 0;
+        right: auto;
+    }
+
     .login-fields {
         &.vertical {
            .cmd-form-element {
@@ -460,6 +484,7 @@ export default {
     }
 
     .option-wrapper {
+        flex: none;
         align-items: center;
 
         > a:not(.button) {

package/src/components/CmdSiteSearch.vue

@@ -1,7 +1,7 @@
 <template>
     <fieldset class="cmd-box-site-search flex-container">
         <!-- begin legend -->
-        <legend :class="{'hidden' : !showLegend}">{{ textLegend }}</legend>
+        <legend :class="{hidden : !legend.show, 'align-left': legend.align === 'left'}">{{ legend.text }}</legend>
         <!-- end legend -->
 
         <!-- begin CmdHeadline -->
@@ -160,22 +160,20 @@ export default {
             default: true
         },
         /**
-         * toggle legend visibility
+         * legend for form
          *
-         * textLegend must be set
-         */
-        showLegend: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         * text for legend
+         * useFieldset-property must be activated
          *
-         * @requiredForAccessibility: true
+         * @requiredForAccessiblity: true
          */
-        textLegend: {
-            type: String,
-            required: false
+        legend: {
+            default() {
+                return {
+                    show: true,
+                    align: "left",
+                    text: "Legend"
+                }
+            }
         },
         /**
          * send search result from outside to display inside this component