comand-component-library 4.2.7 → 4.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.2.7",
+  "version": "4.2.9",
   "license": "GPL-3.0-only",
   "author": "CoManD-UI",
   "private": false,
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^4.2.10",
+    "comand-frontend-framework": "^4.2.11",
     "comand-ui-iconfonts": "^1.0.19",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",

package/src/ComponentLibrary.vue

@@ -517,6 +517,7 @@
                                 labelText="Selectbox with country flags:"
                                 :status="validationStatus"
                                 :disabled="disabledStatus"
+                                pathFlags="https://comand-ui.com/samples/images/flags"
                                 :selectData="fakeSelectCountriesData"
                                 v-model="selectedCountryWithFlag"
                                 defaultOptionName="Select country:"
@@ -1916,7 +1917,8 @@
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage" id="section-switch-language">Switch Language</h2>
                 <CmdSwitchLanguage
-                    :languages="languagesData"
+                    :pathFlags="switchLanguage.pathFlags"
+                    :languages="switchLanguage.languages"
                     @click="updateLanguage"
                 />
                 <p>Selected language: {{ selectedLanguage }} </p>
@@ -2236,7 +2238,7 @@ import inputGroupRadiobuttonsData from '@/assets/data/input-group-radiobuttons.j
 import inputGroupReplacedRadiobuttonsData from '@/assets/data/input-group-replaced-radiobuttons.json'
 import inputGroupToggleSwitchRadiobuttonsData from '@/assets/data/input-group-toggle-switch-radiobuttons.json'
 import listOfLinksData from '@/assets/data/list-of-links.json'
-import languagesData from '@/assets/data/switch-language.json'
+import switchLanguage from '@/assets/data/switch-language.json'
 import mailToolData from '@/assets/data/mail-tool.json'
 import multistepsData from '@/assets/data/multistep-form-progress-bar.json'
 import navigationData from '@/assets/data/main-navigation.json'
@@ -2430,7 +2432,7 @@ export default {
             imageGalleryData,
             inputGroupReplacedRadiobuttonsData,
             inputGroupToggleSwitchRadiobuttonsData,
-            languagesData,
+            switchLanguage,
             listOfLinksData,
             multistepsData,
             mailToolData,
@@ -2710,7 +2712,6 @@ export default {
                         "pathDarkmodeLogo": "/media/images/logos/logo-darkmode.svg",
                         "altText": "Company Logo"
                     }
-
             }
 
             // change logo

package/src/assets/data/switch-language.json

@@ -1,20 +1,32 @@
-[
-  {
-    "iso2": "de",
-    "name": "Deutsch",
-    "tooltip": "Sprache zu deutsch wechseln",
-    "link": {
-      "type": "href",
-      "path": "/"
-    }
-  },
-  {
-    "iso2": "en",
-    "name": "English",
-    "tooltip": "Switch language to English",
-    "link": {
-      "type": "href",
-      "path": "/"
-    }
-  }
-]
+{
+  "pathFlags": "https://comand-ui.com/samples/images/flags",
+  "languages": [
+{
+"iso2": "de",
+"name": "Deutsch",
+"tooltip": "Sprache zu deutsch wechseln",
+"link": {
+"type": "href",
+"path": "/"
+}
+},
+{
+"iso2": "en",
+"name": "English",
+"tooltip": "Switch language to English",
+"link": {
+"type": "href",
+"path": "/"
+}
+},
+{
+"iso2": "es",
+"name": "Español",
+"tooltip": "cambiar el idioma a español",
+"link": {
+"type": "href",
+"path": "/"
+}
+}
+]
+}

package/src/assets/styles/component-library-global-styles.scss

@@ -91,6 +91,12 @@ body.avoid-scrolling {
     width: 3rem;
     background-size: 100% 100%;
     display: block;
+    aspect-ratio: 3/2;
+}
+
+a img.flag {
+    border: 0;
+    outline: var(--default-border);
 }
 
 /* end flags ----------------------------------------------------------------------------------------------------------------------------------------------------- */

package/src/components/CmdSwitchLanguage.vue

@@ -8,7 +8,7 @@
                    :class="['flag', language.iso2, {'active': activeLanguage(language.iso2)}]"
                    :title="language.tooltip"
                    @click.prevent="changeLanguage(language.iso2, $event)">
-                   <img :src="imageSources[index]" :alt="language.name" />
+                   <img :src="pathFlag(language.iso2)" :alt="language.name" />
                 </a>
 
                 <!-- end link-type 'href' -->
@@ -19,7 +19,7 @@
                      :class="['flag', language.iso2]"
                      :title="language.tooltip"
                      @click.prevent="changeLanguage(language.iso2, $event)">
-                    <img :src="imageSources[index]" :alt="language.name" />
+                    <img :src="pathFlag(language.iso2)" :alt="language.name" />
                 </router-link>
                 <!-- end link-type 'router' -->
             </li>
@@ -48,6 +48,13 @@ export default {
         languages: {
             type: Array,
             required: true
+        },
+        /**
+         * path to flag-files (will be combined with flag isoCode to load svg)
+         */
+        pathFlags: {
+            type: String,
+            default: "/media/images/flags"
         }
     },
     mounted() {
@@ -65,6 +72,9 @@ export default {
         activeLanguage(iso2) {
             return this.currentLanguage === iso2
         },
+        pathFlag(isoCode) {
+            return this.pathFlags + "/flag-" + isoCode + ".svg"
+        },
         changeLanguage(iso2, event) {
             // set selected language as current language (in data-property)
             this.currentLanguage = iso2
@@ -75,31 +85,6 @@ export default {
             // emit original event
             this.$emit("click", { originalEvent: event, iso2} )
         }
-    },
-    watch: {
-        languages: {
-            handler() {
-                this.imageSources = []
-                this.languages.forEach(
-                    async (item) => {
-                        // get iso-code
-                        const isoCode = item.iso2
-
-                        // get path of current flag
-                        // const path = "../assets/images/flags/flag-" + isoCode + ".svg"
-
-                        // assign value of imported file (returns object with default-key)
-                        // const { default: dynamicImage } = await import(/* @vite-ignore */ path)
-
-                        // push image to data-property-array
-                        // this.imageSources.push(dynamicImage)
-                        this.imageSources.push(flags[isoCode].default)
-                    }
-                )
-            },
-            immediate: true,
-            deep: true
-        }
     }
 }
 </script>