comand-component-library 4.2.9 → 4.2.10

package/src/assets/lists-of-data/casual-01.json

@@ -0,0 +1,113 @@
+{
+  "person": {
+    "id": 1,
+    "type": "casual",
+    "imgSrc": "https://comand-ui.com/samples/images/user-images/fake-user-2.jpg",
+    "bgImgSrc": "/images/background-images/background-matrix.jpg",
+    "lastName": "Miller",
+    "middleName": "",
+    "firstName": "Jackson",
+    "birthdate": "1975-07-11",
+    "gender": "m",
+    "profession": "Developer",
+    "countryIso": "de",
+    "companyName": "Big Tech Company",
+    "about": "I am the best developer in my home office",
+    "group": "Friends"
+  },
+  "account": {
+    "online": true,
+    "type": "premium",
+    "created": "2023-03-17"
+  },
+  "tags": [
+    {
+      "name": "Backend Development"
+    },
+    {
+      "name": "Frontend Development",
+      "description": "Frontend Development embraces the visible part of development. This includes primary the structure and its styling of websites combined by some basic logic."
+    },
+    {
+      "name": "Data Migration"
+    }
+  ],
+  "contact": [
+    {
+      "name": "companyName",
+      "iconClass": "icon-company",
+      "data": "Your company name",
+      "labelText": "companyName"
+    },
+    {
+      "name": "address",
+      "iconClass": "icon-home",
+      "labelText": "Address",
+      "streetNo": "Your Street/No",
+      "zip": "Your zip",
+      "city": "Duisburg",
+      "miscInfo": "Misc. info",
+      "country": "de"
+    },
+    {
+      "name": "phone",
+      "iconClass": "icon-phone",
+      "data": "Your phone number",
+      "labelText": "Telephone",
+      "tooltip": "Call number",
+      "href": "0123456789"
+    },
+    {
+      "name": "phone",
+      "iconClass": "icon-device-smartphone",
+      "data": "Your mobile phone number",
+      "labelText": "Mobile phone",
+      "tooltip": "Call number",
+      "href": "0123456789"
+    },
+    {
+      "name": "email",
+      "iconClass": "icon-mail",
+      "data": "Your email address",
+      "labelText": "Email",
+      "tooltip": "Send mail",
+      "href": "mail@provider.de"
+    },
+    {
+      "name": "url",
+      "iconClass": "icon-globe",
+      "data": "Your website",
+      "labelText": "Website",
+      "tooltip": "Open website in new tab",
+      "href": "https://www.domain.toplevel"
+    }
+  ],
+  "networks": [
+    {
+      "buttonClass": "social-network-facebook",
+      "iconClass": "icon-facebook",
+      "linkText": "facebook",
+      "path": "https://www.facebook.com",
+      "tooltip": "Visit profile on facebook"
+    },
+    {
+      "buttonClass": "social-network-instagram",
+      "iconClass": "icon-instagram",
+      "linkText": "instagram",
+      "path": "https://www.instagram.com",
+      "tooltip": "Visit profile on instagram"
+    },
+    {
+      "buttonClass": "social-network-linkedin",
+      "iconClass": "icon-linkedin",
+      "linkText": "linkedin",
+      "path": "https://www.linkedin.com",
+      "tooltip": "Visit profile on linkedin"
+    }
+  ],
+  "profileVisibility": {
+    "casual": [],
+    "founder": ["canSeeLocation"],
+    "investor": ["canSeeLocation"]
+  }
+}

package/src/componentSettingsDataAndControls.vue

@@ -311,7 +311,7 @@ data() {
         cmdHeadlineSettingsData: {
             preHeadlineText: "Pre-headline text",
             headlineText: "Headline text",
-            headlineLevel: 1,
+            headlineLevel: 3,
             textAlign: "left"
         },
         cmdHeadlineSettingsControls: {

package/src/components/CmdBox.vue

@@ -582,11 +582,14 @@ export default {
         align-self: auto;
     }
 
-    .box-header .cmd-headline {
-        margin-bottom: 0;
+    .box-header {
+        .cmd-headline {
+            margin-bottom: 0;
+            text-decoration: none;
 
-        &:only-child {
-            width: 100% /* stretch in flex-container */
+            &:only-child {
+                width: 100% /* stretch in flex-container */
+            }
         }
     }
 

package/src/components/CmdFakeSelect.vue

@@ -533,6 +533,18 @@ export default {
         }
     }
 
+    a {
+        gap: calc(var(--icon-and-text-gap) / 2) !important;
+
+        span {
+            text-decoration: none !important;
+
+            &[class*="icon"]:last-child {
+                margin-left: auto !important;
+            }
+        }
+    }
+
     > ul {
         height: var(--form-input-height);
         margin: 0;
@@ -584,7 +596,6 @@ export default {
         }
 
         &.open {
-            border-bottom: 0;
             ul {
                 border-bottom-left-radius: var(--default-border-radius);
                 border-bottom-right-radius: var(--default-border-radius);
@@ -730,9 +741,11 @@ export default {
         > ul {
             > li:first-child {
                 > a {
+                    text-decoration: none !important;
                     border-color: var(--status-color);
 
                     > span, [class*="icon-"] {
+                        text-decoration: none !important;
                         color: var(--status-color);
                     }
 

package/src/components/CmdForm.vue

@@ -3,8 +3,8 @@
           :class="{error: errorOccurred}" :novalidate="novalidate" :method="formMethod">
         <template v-if="useFieldset">
             <fieldset class="flex-container">
-                <legend :class="{hidden : !legend.show, 'align-left': legend.align === 'left'}">{{
-                        legend.text
+                <legend :class="{hidden : !legendOptions.show, 'align-left': legendOptions.align === 'left'}">{{
+                        legendOptions.text
                     }}
                 </legend>
                 <CmdSystemMessage v-if="systemMessage.show && systemMessage.message" :validationStatus="systemMessage.validationStatus" :systemMessage="systemMessage.message"/>
@@ -120,13 +120,7 @@ export default {
          */
         legend: {
             type: Object,
-            default() {
-                return {
-                    show: true,
-                    align: "left",
-                    text: "Legend"
-                }
-            }
+            required: false
         },
         /**
          * activate if form-elements should be given by slot
@@ -183,6 +177,14 @@ export default {
         }
     },
     computed: {
+        legendOptions() {
+            return {
+                show: true,
+                align: "left",
+                text: "Legend",
+                ...this.legend
+            }
+        },
         submitButtonOptions() {
             return {
                 iconClass: "icon-check",

package/src/components/CmdFormElement.vue

@@ -1006,6 +1006,12 @@ export default {
                 width: 100%;
             }
         }
+
+        .label-text {
+           [class*="icon-"] {
+               top: -.2rem;
+           }
+        }
     }
 
     .search-field-wrapper {

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>