refact: es6 refactor

Author: adamberecz

src/composables/useI18n.js

@@ -9,9 +9,23 @@ export default function useI18n (props, context, dep)
   // =============== METHODS ==============
 
   const localize = (target) => {
-    return target && typeof target === 'object'
-      ? target?.[locale.value] || target?.[locale.value?.toUpperCase()] || target?.[fallbackLocale.value] || target?.[fallbackLocale.value?.toUpperCase()] || target?.[Object.keys(target)[0]]
-      : target
+    if (!target || typeof target !== 'object') {
+      return target
+    }
+
+    if (target && target[locale.value]) {
+      return target[locale.value]
+    } else if (target && locale.value && target[locale.value.toUpperCase()]) {
+      return target[locale.value.toUpperCase()]
+    } else if (target && target[fallbackLocale.value]) {
+      return target[fallbackLocale.value]
+    } else if (target && fallbackLocale.value && target[fallbackLocale.value.toUpperCase()]) {
+      return target[fallbackLocale.value.toUpperCase()]
+    } else if (target && Object.keys(target)[0]) {
+      return target[Object.keys(target)[0]]
+    } else {
+      return ''
+    }
   }
 
   return {

src/composables/useOptions.js

@@ -143,7 +143,7 @@ export default function useOptions (props, context, dep)
     let groups = [...eg.value].map(g => ({...g}))
 
     if (createdOption.value.length) {
-      if (groups[0]?.__CREATE__) {
+      if (groups[0] && groups[0].__CREATE__) {
         groups[0][groupOptions.value] = [...createdOption.value, ...groups[0][groupOptions.value]]
       } else {
         groups = [{

tests/unit/i18n.spec.js

@@ -28,21 +28,21 @@ describe('I18n', () => {
     expect(singleLabel.html()).toContain('value-en')
   })
 
-  it('should render options when options are localized', async () => {
+  it('should render options when options are localized with uppercase locales', async () => {
     let locale = ref('en')
 
     let select = createSelect({
       value: ['value'],
       groups: true,
       options: [{
         label: {
-          en: 'group-en',
-          hu: 'group-hu',
+          EN: 'group-en',
+          HU: 'group-hu',
         },
         options: [{
           label: {
-            en: 'label-en',
-            hu: 'label-hu',
+            EN: 'label-en',
+            HU: 'label-hu',
           },
           value: 'value'
         }]
@@ -78,7 +78,7 @@ describe('I18n', () => {
         options: [{
           label: {
             en: 'label-en',
-            hu: 'label-hu',
+            HU: 'label-hu',
           },
           value: 'value'
         }]
@@ -95,6 +95,30 @@ describe('I18n', () => {
     expect(singleLabel.html()).toContain('label-hu')
   })
 
+  it('should render empty string as option if it is an empty object', async () => {
+    let select = createSelect({
+      value: ['value'],
+      groups: true,
+      options: [{
+        label: {
+          en: 'group-en',
+          hu: 'group-hu',
+        },
+        options: [{
+          label: {},
+          value: 'value'
+        }]
+      }],
+      fallbackLocale: 'hu'
+    })
+
+    let options = findAll(select, '.multiselect-option')
+    let singleLabel = findAll(select, '.multiselect-single-label').at(0)
+
+    expect(options.at(0).html()).not.toContain('label-hu')
+    expect(singleLabel.html()).not.toContain('label-hu')
+  })
+
   it('should render options with en translation if locale is not preset', async () => {
     let select = createSelect({
       value: ['value'],