comand-component-library 4.1.89 → 4.1.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.1.89",
+  "version": "4.1.90",
   "license": "GPL-3.0-only",
   "author": "CoManD-UI",
   "private": false,
@@ -20,14 +20,14 @@
     ".": "./dist/comand-component-library.js",
     "./css.js": "./src/css.js",
     "./style.css": "./dist/style.css",
-    "./variables.scss": "./src/assets/styles/variables.scss",
     "./export-data.js": "./src/assets/data/export-data.js",
-    "./all-countries.json": "./src/assets/data/all-countries.json"
+    "./all-countries.json": "./src/assets/data/all-countries.json",
+    "./all-currencies.json": "./src/assets/data/all-currencies.json"
   },
   "dependencies": {
     "clickout-event": "^1.1.2",
     "comand-component-library": "^4.1.63",
-    "comand-frontend-framework": "^4.1.28",
+    "comand-frontend-framework": "^4.1.29",
     "comand-ui-iconfonts": "^1.0.14",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",

package/src/ComponentLibrary.vue

@@ -518,6 +518,7 @@
                                 :disabled="disabledStatus"
                                 :selectOptions="allCountriesData"
                                 v-model="selectedCountry"
+                                :groupSelectOptionsByInitialLetters="true"
                                 max-height="10rem"
                                 defaultOptionName="Select country:"
                             />
@@ -1415,7 +1416,7 @@
             <!-- begin google-maps --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage" id="section-google-maps">Google Maps&trade;</h2>
-                <CmdGoogleMaps :address="addressData"/>
+                <CmdGoogleMaps :address="addressData[1]"/>
             </CmdWidthLimitationWrapper>
             <!-- end google-maps --------------------------------------------------------------------------------------------------->
 

package/src/assets/data/all-currencies.json

@@ -0,0 +1,24 @@
+[
+  {"text": "Australian Dollar", "value": "aud"},
+  {"text": "Brazilian Real", "value": "brl"},
+  {"text": "British Pound", "value": "gbp"},
+  {"text": "Canadian Dollar", "value": "cad"},
+  {"text": "Chinese Yuan", "value": "cny"},
+  {"text": "Danish Krone", "value": "dkk"},
+  {"text": "Euro", "value": "eur"},
+  {"text": "Hong Kong Dollar", "value": "hkd"},
+  {"text": "Indian Rupee", "value": "inr"},
+  {"text": "Israeli Shekel", "value": "ils"},
+  {"text": "Japanese Yen", "value": "jpy"},
+  {"text": "Mexican Peso", "value": "mxn"},
+  {"text": "New Zealand Dollar", "value": "nzd"},
+  {"text": "Norwegian Krone", "value": "nok"},
+  {"text": "Russian Ruble", "value": "rub"},
+  {"text": "Singapore Dollar", "value": "sgd"},
+  {"text": "South African Rand", "value": "zar"},
+  {"text": "South Korean Won", "value": "krw"},
+  {"text": "Swedish Krona", "value": "sek"},
+  {"text": "Swiss Franc", "value": "chf"},
+  {"text": "Turkish Lira", "value": "try"},
+  {"text": "US Dollar", "value": "usd"}
+]

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"

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";
-}