comand-component-library 4.2.9 → 4.2.11

package/src/components/CmdLoginForm.vue

@@ -1,7 +1,9 @@
 <template>
     <!-- begin login-form -->
     <fieldset v-show="!sendLogin" class="cmd-login-form flex-container">
-        <legend :class="{hidden : !legendLoginForm.show, 'align-left': legendLoginForm.align === 'left'}">{{ legendLoginForm.text }}</legend>
+        <legend :class="{hidden : !legendLoginForm.show, 'align-left': legendLoginForm.align === 'left'}">
+            {{ legendLoginForm.text }}
+        </legend>
         <!-- begin CmdHeadline -->
         <CmdHeadline
             v-if="cmdHeadlineLoginForm"
@@ -14,11 +16,16 @@
             <div class="gsi-material-button-state"></div>
             <div class="gsi-material-button-content-wrapper">
                 <div class="gsi-material-button-icon">
-                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: block;">
-                        <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
-                        <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
-                        <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
-                        <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
+                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"
+                         xmlns:xlink="http://www.w3.org/1999/xlink" style="display: block;">
+                        <path fill="#EA4335"
+                              d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
+                        <path fill="#4285F4"
+                              d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
+                        <path fill="#FBBC05"
+                              d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
+                        <path fill="#34A853"
+                              d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
                         <path fill="none" d="M0 0h48v48H0z"></path>
                     </svg>
                 </div>
@@ -31,7 +38,7 @@
         <!-- begin Facebook-Login-Button -->
         <div v-if="enableLoginWithFacebook"
              class="fb-login-button"
-             data-width=""
+             data-width="200"
              data-size=""
              data-button-type=""
              data-layout=""
@@ -40,8 +47,12 @@
         </div>
         <!-- end Facebook-Login-Button -->
 
+        <button v-if="enableLoginWithGoogle || enableLoginWithFacebook" @click.prevent="showLogin = true">
+            <span>Login with your data</span>
+        </button>
+
         <!-- begin form elements -->
-        <div :class="['login-fields flex-container', {'vertical': orientation === 'vertical'}]">
+        <div v-show="showLogin" :class="['login-fields flex-container', {'vertical': orientation === 'vertical'}]">
             <!-- begin CmdFormElement -->
             <CmdFormElement
                 element="input"
@@ -75,9 +86,9 @@
                 <a v-if="linkForgotPassword" href="#" @click.prevent="toggleSendLoginView">
                     <!-- begin CmdIcon -->
                     <CmdIcon v-if="linkForgotPassword.icon?.show && linkForgotPassword.icon?.iconClass"
-                          :iconClass="linkForgotPassword.icon.iconClass"
-                          :type="linkForgotPassword.icon.iconType"
-                          :title="linkForgotPassword.icon.tooltip"
+                             :iconClass="linkForgotPassword.icon.iconClass"
+                             :type="linkForgotPassword.icon.iconType"
+                             :title="linkForgotPassword.icon.tooltip"
                     />
                     <!-- end CmdIcon -->
                     <span v-if="linkForgotPassword.text">{{ linkForgotPassword.text }}</span>
@@ -128,7 +139,9 @@
 
     <!-- begin send-login-form -->
     <fieldset v-show="sendLogin" class="cmd-login-form flex-container">
-        <legend :class="{hidden : !legendForgotLoginForm.show, 'align-left': legendForgotLoginForm.align === 'left'}">{{ legendForgotLoginForm .text }}</legend>
+        <legend :class="{hidden : !legendForgotLoginForm.show, 'align-left': legendForgotLoginForm.align === 'left'}">
+            {{ legendForgotLoginForm.text }}
+        </legend>
         <!-- begin CmdHeadline -->
         <CmdHeadline
             v-if="cmdHeadlineSendLoginForm"
@@ -163,7 +176,7 @@
                 <!-- end CmdIcon -->
 
                 <span>
-                    {{linkBackToLogin.text}}
+                    {{ linkBackToLogin.text }}
                 </span>
             </a>
 
@@ -202,36 +215,40 @@ export default {
             passwordValidationStatus: false,
             emailValidationStatus: false,
             sendLoginMail: "",
-            sendLogin: false
+            sendLogin: false,
+            showLogin: true
         }
     },
     props: {
         /**
          * activate if login with google should be enabled
          */
-        enableLoginWithGoogle: {
-            type: Boolean,
-            default: true
-        },
+        enableLoginWithGoogle:
+            {
+                type: Boolean,
+                default: true
+            },
         /**
          * activate if login with facebook should be enabled
          */
         enableLoginWithFacebook: {
             type: Boolean,
-            default: true
+            default: false
         },
         /**
          * value for v-model (modelValue is default name in vue 3)
          */
         modelValue: {
             type: Object,
-            default() {
+            default
+                () {
                 return {
                     username: "",
                     password: ""
                 }
             }
-        },
+        }
+        ,
         /**
          * orientation for inputfields
          *
@@ -239,11 +256,13 @@ export default {
          */
         orientation: {
             type: String,
-            default: null,
+            default:
+                null,
             validator(event) {
                 return event === "vertical" || event === "horizontal"
             }
-        },
+        }
+        ,
         /**
          * options for legend for login-fieldset
          *
@@ -251,29 +270,33 @@ export default {
          */
         legendLoginForm: {
             type: Object,
-            default() {
+            default
+                () {
                 return {
                     show: true,
                     align: "right",
                     text: "Login form"
                 }
             }
-        },
+        }
+        ,
         /**
          * legend for forgot-login-fieldset
          *
          * @requiredForAccessibility: true
-        */
+         */
         legendForgotLoginForm: {
             type: Object,
-            default() {
+            default
+                () {
                 return {
                     show: true,
                     align: "right",
                     text: "Forgot login form"
                 }
             }
-        },
+        }
+        ,
         /**
          * properties for CmdHeadline-component for login-form
          */
@@ -317,13 +340,14 @@ export default {
         },
         /**
          * options to display
-         * 
+         *
          * forgotPassword: toggles form to send password by email
          * createAccount: creates a link (href/router) which could lead to a register-form
          */
         linkForgotPassword: {
             type: Object,
-            default() {
+            default
+                () {
                 return {
                     icon: {
                         show: true,
@@ -357,7 +381,8 @@ export default {
          */
         linkBackToLogin: {
             type: Object,
-            default() {
+            default
+                () {
                 return {
                     icon: {
                         show: true,
@@ -485,7 +510,7 @@ export default {
             this.sendLogin = !this.sendLogin
 
             this.$nextTick(() => {
-                if(this.sendLogin) {
+                if (this.sendLogin) {
                     this.$refs.sendPassword.setFocus()
                 } else {
                     this.$refs.username.setFocus()
@@ -493,7 +518,7 @@ export default {
             })
         },
         modelChange() {
-            this.$emit("update:modelValue", { "username": this.username, "password": this.password })
+            this.$emit("update:modelValue", {"username": this.username, "password": this.password})
         },
         onClick(event) {
             this.$emit("click", event)
@@ -517,10 +542,22 @@ export default {
     },
     watch: {
         username() {
-          this.modelChange()
+            this.modelChange()
         },
         password() {
-          this.modelChange()
+            this.modelChange()
+        },
+        enableLoginWithGoogle: {
+            handler() {
+                this.showLogin = false
+            },
+            immediate: true
+        },
+        enableLoginWithFacebook: {
+            handler() {
+                this.showLogin = false
+            },
+            immediate: true
         }
     }
 }
@@ -541,9 +578,9 @@ export default {
 
     .login-fields {
         &.vertical {
-           .cmd-form-element {
-               width: 100%;
-           }
+            .cmd-form-element {
+                width: 100%;
+            }
         }
     }
 
@@ -552,7 +589,7 @@ export default {
         align-items: center;
 
         > a:not(.button) {
-            display: block;
+            display: flex;
             text-decoration: none;
         }
 
@@ -563,51 +600,30 @@ export default {
 
     /* begin google-login-button */
     .gsi-material-button {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-        -webkit-appearance: none;
-        background-color: WHITE;
-        background-image: none;
-        border: 1px solid #747775;
-        -webkit-border-radius: 4px;
-        border-radius: 4px;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
+        border: var(--button-border);
+        border-color: #747775;
         color: #1f1f1f;
-        cursor: pointer;
         font-family: 'Roboto', arial, sans-serif;
-        font-size: 14px;
-        height: 40px;
         letter-spacing: 0.25px;
-        outline: none;
-        overflow: hidden;
-        padding: 0 12px;
-        position: relative;
-        text-align: center;
-        -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
         transition: background-color .218s, border-color .218s, box-shadow .218s;
-        vertical-align: middle;
         white-space: nowrap;
-        width: auto;
-        max-width: 400px;
-        min-width: min-content;
+
+        border-radius: var(--button-border-radius);;
+        background-color: var(--color-white);
+        height: var(--input-height);
+        padding: var(--button-padding);
     }
 
     .gsi-material-button .gsi-material-button-icon {
-        height: 20px;
-        margin-right: 12px;
-        min-width: 20px;
-        width: 20px;
+        height: 2rem;
+        aspect-ratio: 1/1;
+        margin-right: calc(var(--default-margin) / 2);
     }
 
     .gsi-material-button .gsi-material-button-content-wrapper {
-        -webkit-align-items: center;
         align-items: center;
         display: flex;
-        -webkit-flex-direction: row;
         flex-direction: row;
-        -webkit-flex-wrap: nowrap;
         flex-wrap: nowrap;
         height: 100%;
         justify-content: space-between;
@@ -616,7 +632,6 @@ export default {
     }
 
     .gsi-material-button .gsi-material-button-contents {
-        -webkit-flex-grow: 1;
         flex-grow: 1;
         font-family: 'Roboto', arial, sans-serif;
         font-weight: 500;
@@ -626,7 +641,6 @@ export default {
     }
 
     .gsi-material-button .gsi-material-button-state {
-        -webkit-transition: opacity .218s;
         transition: opacity .218s;
         bottom: 0;
         left: 0;
@@ -637,35 +651,31 @@ export default {
     }
 
     .gsi-material-button:disabled {
-        cursor: default;
         background-color: #ffffff61;
         border-color: #1f1f1f1f;
     }
 
-    .gsi-material-button:disabled .gsi-material-button-contents {
-        opacity: 38%;
-    }
-
-    .gsi-material-button:disabled .gsi-material-button-icon {
-        opacity: 38%;
+    .gsi-material-button:disabled {
+        .gsi-material-button-contents, .gsi-material-button-icon {
+            opacity: 38%;
+        }
     }
 
-    .gsi-material-button:not(:disabled):active .gsi-material-button-state,
-    .gsi-material-button:not(:disabled):focus .gsi-material-button-state {
+    .gsi-material-button:not(:disabled):is(:active, :focus) .gsi-material-button-state {
         background-color: #303030;
         opacity: 12%;
     }
 
     .gsi-material-button:not(:disabled):hover {
-        -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
         box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
-    }
 
-    .gsi-material-button:not(:disabled):hover .gsi-material-button-state {
-        background-color: #303030;
-        opacity: 8%;
+        .gsi-material-button-state {
+            background-color: #303030;
+            opacity: 8%;
+        }
     }
     /* end google-login-button */
 }
+
 /* end cmd-login-form ---------------------------------------------------------------------------------------- */
 </style>

package/src/components/CmdTooltip.vue

@@ -4,14 +4,15 @@
             <!-- begin CmdHeadline -->
             <CmdHeadline
                 v-if="cmdHeadline"
-               v-bind="cmdHeadline"
+                v-bind="cmdHeadline"
             />
             <!-- end CmdHeadline -->
 
             <!-- begin icon to close tooltip -->
-            <a v-if="iconClose.show && toggleVisibilityByClick" href="#" @click.prevent="hideTooltip" :title="iconClose.tooltip">
+            <a v-if="iconClose.show && toggleVisibilityByClick" href="#" @click.prevent="hideTooltip"
+               :title="iconClose.tooltip">
                 <!-- begin CmdIcon -->
-                <CmdIcon :iconClass="iconClose.iconClass" :type="iconClose.iconType" />
+                <CmdIcon :iconClass="iconClose.iconClass" :type="iconClose.iconType"/>
                 <!-- end CmdIcon -->
             </a>
             <!-- end icon to close tooltip -->
@@ -35,13 +36,19 @@ export default {
             pointerY: 0
         }
     },
+    inject: {
+        injectScrollContainer: {
+            default: ""
+        }
+    },
     props: {
         /**
          * properties for CmdHeadline-component
          */
         cmdHeadline: {
             type: Object,
-            default() {}
+            default() {
+            }
         },
         /**
          * text shown as tooltip
@@ -95,14 +102,14 @@ export default {
          * @requiredForAccessibility: partial
          */
         iconClose: {
-          type: Object,
-          default() {
-              return {
-                  show: true,
-                  iconClass: "icon-cancel",
-                  tooltip: "Close this tooltip!"
-              }
-          }
+            type: Object,
+            default() {
+                return {
+                    show: true,
+                    iconClass: "icon-cancel",
+                    tooltip: "Close this tooltip!"
+                }
+            }
         },
         /**
          * enable toggling tooltip-visibility by click
@@ -113,12 +120,21 @@ export default {
         }
     },
     mounted() {
-        if(this.relatedId) {
+        if (this.relatedId) {
             const relatedElement = document.getElementById(this.relatedId)
 
-            if(relatedElement) {
-                if(this.scrollContainer) {
-                    document.querySelector(this.scrollContainer).addEventListener("scroll", this.hideTooltip) // avoid fixed tooltip on scroll
+            if (relatedElement) {
+                const scrollContainerSelector = this.injectScrollContainer || this.scrollContainer
+
+                if (scrollContainerSelector) {
+                    const scrollContainerElement = document.querySelector(scrollContainerSelector)
+
+                    if(scrollContainerElement) {
+                        scrollContainerElement.addEventListener("scroll", this.hideTooltip) // avoid fixed tooltip on scroll
+                    } else {
+                        console.warn( "'CmdTooltip-Component': Element accessed by " + scrollContainerSelector + " does not exist! Please provide selector for an existing element!")
+                    }
+
                     document.addEventListener("keyup", this.hideTooltipOnEsc) // close tooltip by using "escape"-key
                 }
 
@@ -140,20 +156,20 @@ export default {
             // if delay is set
             if (this.delayToShowTooltip > 0) {
                 setTimeout(() => {
-                   this.toggleVisibility(event)
+                    this.toggleVisibility(event)
                 }, this.delayToShowTooltip)
             } else {
                 this.toggleVisibility(event)
             }
         },
         toggleVisibility(event) {
-            if(!this.toggleVisibilityByClick) {
+            if (!this.toggleVisibilityByClick) {
                 this.tooltipVisibility = true
             }
             this.getPointerPosition(event)
         },
         hideTooltipOnEsc(event) {
-            if(this.allowEscapeKey) {
+            if (this.allowEscapeKey) {
                 if (event.key === 'Escape' || event.key === 'Esc') {
                     this.hideTooltip()
                 }
@@ -168,10 +184,10 @@ export default {
         }
     },
     unmounted() {
-        if(this.relatedId) {
+        if (this.relatedId) {
             const relatedElement = document.getElementById(this.relatedId)
 
-            if(relatedElement) {
+            if (relatedElement) {
                 document.removeEventListener("scroll", this.hideTooltip)
                 document.removeEventListener("keyup", this.hideTooltipOnEsc)
 
@@ -186,11 +202,11 @@ export default {
     },
     watch: {
         tooltipVisibility() {
-            if(this.tooltipVisibility) {
-                this.$nextTick( () => {
+            if (this.tooltipVisibility) {
+                this.$nextTick(() => {
                     const verticalOffset = 25
                     // this.$refs.tooltip.addEventListener("keyup", this.hideTooltip)
-                    this.$refs.tooltip.style.left = (this.pointerX  / 10) + "rem"
+                    this.$refs.tooltip.style.left = (this.pointerX / 10) + "rem"
                     this.$refs.tooltip.style.top = ((this.pointerY + verticalOffset) / 10) + "rem"
                 })
             }
@@ -238,8 +254,8 @@ export default {
     .headline-wrapper {
         display: flex;
 
-        a {
-            margin-left: auto;
+        > a {
+            margin-left: auto !important;
 
             [class*="icon-"] {
                 padding-left: 1rem;

package/src/index.js

@@ -50,6 +50,7 @@ export { default as CmdTextImageBlock } from '@/components/CmdTextImageBlock.vue
 export { default as CmdThumbnailScroller } from '@/components/CmdThumbnailScroller.vue'
 export { default as CmdToggleDarkMode } from '@/components/CmdToggleDarkMode.vue'
 export { default as CmdTooltip } from '@/components/CmdTooltip.vue'
+export { default as CmdTooltipForFormElements } from '@/components/CmdTooltipForFormElements.vue'
 export { default as CmdUploadForm } from '@/components/CmdUploadForm.vue'
 export { default as CmdWidthLimitationWrapper } from '@/components/CmdWidthLimitationWrapper.vue'
 export { default as EditComponentWrapper } from '@/components/EditComponentWrapper.vue'

package/src/main.js

@@ -43,4 +43,8 @@ import router from "./router"
 // })
 
 // createApp(App).use(router).directive('telephone', directiveTelephone).directive('focus', directiveFocus).mount('#app')
-createApp(ComponentLibrary).use(router).directive('telephone', directiveTelephone).directive('focus', directiveFocus).directive('fancybox', directiveFancybox).mount('#app')
+createApp(ComponentLibrary)
+    .use(router).directive('telephone', directiveTelephone)
+    .directive('focus', directiveFocus)
+    .directive('fancybox', directiveFancybox)
+    .mount('#app')