comand-component-library 4.1.89 → 4.1.91

package/src/components/CmdFormElement.vue

@@ -177,14 +177,28 @@
                 :id="htmlId"
                 @blur="onBlur"
                 @change="$emit('update:modelValue', $event.target.value)">
-            <option
-                v-for="(option, index) in selectOptions"
-                :key="index"
-                :value="option.value"
-                :selected="option.value === modelValue"
-            >
-                {{ option.text }}
-            </option>
+
+                <option v-if="!groupSelectOptionsByInitialLetters"
+                    v-for="(option, index) in selectOptions"
+                    :key="index"
+                    :value="option.value"
+                    :selected="option.value === modelValue"
+                >
+                    {{ option.text }}
+                </option>
+                <optgroup v-else :label="key"
+                    v-for="(options, key) in initialLetters"
+                    :key="key"
+                >
+                    <option
+                        v-for="(option, optionIndex) in options"
+                        :key="optionIndex"
+                        :value="option.value"
+                        :selected="option.value === modelValue"
+                    >
+                        {{ option.text }}
+                    </option>
+                </optgroup>
         </select>
         <!-- end selectbox -->
 
@@ -284,6 +298,10 @@ export default {
         }
     },
     props: {
+        groupSelectOptionsByInitialLetters: {
+            type: Boolean,
+            default: false
+        },
         /**
          * specify a scroll-container which scrolling hides the tooltip
          */
@@ -376,7 +394,7 @@ export default {
          *
          * @affectsStyling: true
          */
-        f: {
+        colored: {
             type: Boolean,
             required: false
         },
@@ -680,6 +698,9 @@ export default {
         }
     },
     computed: {
+        initialLetters() {
+                return this.getInitialLetters(this.selectOptions)
+        },
         elementAttributes() {
             const commonAttributes = ["name", "required", "readonly", "disabled", "autofocus"]
             const attributes = {
@@ -761,6 +782,20 @@ export default {
         }
     },
     methods: {
+        getInitialLetters(listOfOptions) {
+            const groupedListOfOptions = {}
+            // compare the text-keys (in lower case) and sort them
+            listOfOptions.sort((a, b) => a.text.toLowerCase().localeCompare(b.text.toLowerCase()))
+
+            for (let i = 0; i < listOfOptions.length; i++) {
+                const initialLetter = listOfOptions[i].text.slice(0,1)
+                if (!groupedListOfOptions[initialLetter]) {
+                    groupedListOfOptions[initialLetter] = []
+                }
+                groupedListOfOptions[initialLetter].push(listOfOptions[i])
+            }
+            return groupedListOfOptions
+        },
         setFocus() {
             this.$refs.label.querySelector("input, select, textarea")?.focus()
         },

package/src/components/CmdGoogleMaps.vue

@@ -63,11 +63,9 @@ export default {
     computed: {
         locateAddress() {
             if(this.address) {
-               // const url = new URL("https://maps.google.de/maps?ie=UTF8&t=&z=17&iwloc=B&output=embed")
-                let url = new URL("https://www.google.de/maps/place/")
-                url += this.address.streetNo + this.address.zip + "," + this.address.city + this.address.country
-               /* url.searchParams.set("hl", "de")
-                url.searchParams.set("q", [this.address.streetNo, this.address.zip, this.address.city, this.address.country, this.address.latitude, this.address.longitude, this.address.location].join(" ").trim())*/
+                const url = new URL("https://maps.google.de/maps?ie=UTF8&t=&z=17&iwloc=B&output=embed")
+                url.searchParams.set("hl", "de")
+                url.searchParams.set("q", [this.address.streetNo, this.address.zip, this.address.city, this.address.country, this.address.latitude, this.address.longitude, this.address.location].join(" ").trim())
                 return url
             }
             return "https://maps.google.de/maps?ie=UTF8&t=&z=17&iwloc=B&output=embed"
@@ -97,8 +95,12 @@ export default {
     border: var(--default-border);
     border-radius: var(--default-border-radius);
 
+    &:hover, &:active, &:focus {
+        border-color: var(--hyperlink-color-highlighted);
+    }
+
     iframe {
-        border-radius: var(--default-border-radius);
+        border-radius: inherit;
     }
 
     .cmd-system-message {

package/src/components/CmdLoginForm.vue

@@ -120,17 +120,18 @@
         <!-- end slot for send-login-form -->
 
         <div class="option-wrapper flex-container">
-            <a v-if="linkForgotPassword" href="#" @click.prevent="toggleSendLoginView">
+            <a href="#" @click.prevent="toggleSendLoginView">
                 <!-- begin CmdIcon -->
                 <CmdIcon
-                    v-if="linkForgotPassword && linkForgotPassword.icon && linkForgotPassword.icon.show && linkForgotPassword.icon.iconClass"
-                    :iconClass="linkForgotPassword.icon.iconClass"
-                    :type="linkForgotPassword.icon.iconType"
-                    :title="linkForgotPassword.icon.tooltip"
+                    v-if="linkBackToLogin.icon && linkBackToLogin.icon.show && linkBackToLogin.icon.iconClass"
+                    :iconClass="linkBackToLogin.icon.iconClass"
+                    :type="linkBackToLogin.icon.iconType"
+                    :title="linkBackToLogin.icon.tooltip"
                 />
                 <!-- end CmdIcon -->
-                <span v-if="linkForgotPassword.text">
-                  {{ linkForgotPassword.text }}
+
+                <span>
+                    {{linkBackToLogin.text}}
                 </span>
             </a>
 
@@ -286,6 +287,9 @@ export default {
                 }
             }
         },
+        /**
+         * define link to create an account (that is linked to a register-form i.e.)
+         */
         linkCreateAccount: {
             type: Object,
             default() {
@@ -301,7 +305,10 @@ export default {
                 }
             }
         },
-        linkBackToLoginForm: {
+        /**
+         * define link from "forgot-login-form"-view back to the default login-form
+         */
+        linkBackToLogin: {
             type: Object,
             default() {
                 return {
@@ -310,7 +317,7 @@ export default {
                         iconClass: "icon-chevron-one-stripe-left",
                         tooltip: ""
                     },
-                    text: "Back to login form"
+                    text: "Back to login"
                 }
             }
         },

package/src/css.js

@@ -18,6 +18,9 @@ import 'comand-ui-iconfonts/src/fonts/medical-iconfont/medical-iconfont.css'
 /* end imports from comand-ui-iconfonts---------------------------------------------------------------------------------------- */
 
 /* begin imports from comand-component-library ---------------------------------------------------------------------------------------- */
+/* import css for scss-variables */
+import './assets/styles/variables.scss'
+
 /* import css for global-styles */
 import './assets/styles/component-library-global-styles.scss'
 

package/src/assets/styles/editmode-iconfont.css

@@ -1,227 +0,0 @@
-/* editmode-iconfont-iconfont.css - last update: 2024/01/04 - IT IS NOT RECOMMENDED TO EDIT THIS FILE (TO AVOID TROUBLESHOOTING AFTER UPDATING) - DO CHANGES IN template.css OR YOUR OWN iconfont-css-file */
-
-@font-face {
-    font-family: 'icomoon';
-    src:  url('../fonts/iconfonts/editmode-iconfont/icomoon-editmode.woff?ai9tjp') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: block;
-    unicode-range: U+c???;
-}
-
-[class^="icon-"], [class*=" icon-"] {
-    /* use !important to prevent issues with browser extensions that change fonts */
-    font-family: 'icomoon' !important;
-    speak: never;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    line-height: 1;
-
-    /* Better Font Rendering =========== */
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-add-component:before {
-    content: "\c900";
-}
-.icon-add-image:before {
-    content: "\c901";
-}
-.icon-add-images:before {
-    content: "\c902";
-}
-.icon-add-user:before {
-    content: "\c903";
-}
-.icon-add-user-circle:before {
-    content: "\c904";
-}
-.icon-add-user-group:before {
-    content: "\c905";
-}
-.icon-cmd-cl:before {
-    content: "\c906";
-}
-.icon-cmd-cms:before {
-    content: "\c907";
-}
-.icon-cmd-ff:before {
-    content: "\c908";
-}
-.icon-cmd-op:before {
-    content: "\c909";
-}
-.icon-component:before {
-    content: "\c90a";
-}
-.icon-contentpage:before {
-    content: "\c90b";
-}
-.icon-create:before {
-    content: "\c90c";
-}
-.icon-create-box:before {
-    content: "\c90d";
-}
-.icon-create-content:before {
-    content: "\c90e";
-}
-.icon-create-content-sub-level:before {
-    content: "\c90f";
-}
-.icon-create-navigation-entry:before {
-    content: "\c910";
-}
-.icon-create-newspage:before {
-    content: "\c911";
-}
-.icon-create-page:before {
-    content: "\c912";
-}
-.icon-create-translation:before {
-    content: "\c913";
-}
-.icon-delete-component:before {
-    content: "\c914";
-}
-.icon-delete-image:before {
-    content: "\c915";
-}
-.icon-delete-page:before {
-    content: "\c916";
-}
-.icon-dependencies:before {
-    content: "\c917";
-}
-.icon-edit-box:before {
-    content: "\c918";
-}
-.icon-edit-component:before {
-    content: "\c919";
-}
-.icon-edit-content:before {
-    content: "\c91a";
-}
-.icon-edit-images:before {
-    content: "\c91b";
-}
-.icon-edit-language:before {
-    content: "\c91c";
-}
-.icon-edit-modulepage:before {
-    content: "\c91d";
-}
-.icon-edit-modules:before {
-    content: "\c91e";
-}
-.icon-edit-navigation-entry:before {
-    content: "\c91f";
-}
-.icon-edit-newspage:before {
-    content: "\c920";
-}
-.icon-edit-page:before {
-    content: "\c921";
-}
-.icon-edit-slideshowimages:before {
-    content: "\c922";
-}
-.icon-edit-template:before {
-    content: "\c923";
-}
-.icon-edit-translations:before {
-    content: "\c924";
-}
-.icon-edit-user:before {
-    content: "\c925";
-}
-.icon-edit-user-groups:before {
-    content: "\c926";
-}
-.icon-edit-users:before {
-    content: "\c927";
-}
-.icon-folder-add:before {
-    content: "\c928";
-}
-.icon-folder-delete:before {
-    content: "\c929";
-}
-.icon-folder-rename:before {
-    content: "\c92a";
-}
-.icon-hexagon-thin:before {
-    content: "\c92b";
-}
-.icon-link-content:before {
-    content: "\c92c";
-}
-.icon-link-file:before {
-    content: "\c92d";
-}
-.icon-link-website:before {
-    content: "\c92e";
-}
-.icon-manage-files:before {
-    content: "\c92f";
-}
-.icon-manage-languages:before {
-    content: "\c930";
-}
-.icon-manage-modules:before {
-    content: "\c931";
-}
-.icon-manage-slideshow-images:before {
-    content: "\c932";
-}
-.icon-manage-system:before {
-    content: "\c933";
-}
-.icon-mediacenter:before {
-    content: "\c934";
-}
-.icon-module:before {
-    content: "\c935";
-}
-.icon-modulepage:before {
-    content: "\c936";
-}
-.icon-navigation-entry:before {
-    content: "\c937";
-}
-.icon-newspage:before {
-    content: "\c938";
-}
-.icon-replace-image:before {
-    content: "\c939";
-}
-.icon-settings-component:before {
-    content: "\c93a";
-}
-.icon-settings-page:before {
-    content: "\c93b";
-}
-.icon-settings-template:before {
-    content: "\c93c";
-}
-.icon-show-image:before {
-    content: "\c93d";
-}
-.icon-table-of-contents:before {
-    content: "\c93e";
-}
-.icon-template:before {
-    content: "\c93f";
-}
-.icon-text:before {
-    content: "\c940";
-}
-.icon-update-component:before {
-    content: "\c941";
-}
-.icon-update-page:before {
-    content: "\c942";
-}