comand-component-library 4.0.35 → 4.0.36

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"
@@ -104,7 +104,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 +210,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 +236,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 +463,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 +482,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