Feature Request: Languages and FallbackLocale property PR

src/SelectPage.vue

@@ -55,7 +55,6 @@
 </template>
 
 <script>
-    import lang from './language';
     import props from './mixins/props';
     import methods from './mixins/methods';
 
@@ -82,7 +81,7 @@
                 search: '',
                 lastSearch: null,
                 searchColumn: null,
-                i18n: lang[this.language],
+                i18n: this.getTranslation(),
                 message: '',
                 highlight: -1,
 
@@ -472,4 +471,4 @@ div.sp-message {
     .sp-icon-next:before { content: "\e70d"; }
     .sp-icon-previous:before { content: "\e70f"; }
     .sp-icon-close:before { content: "\e600"; }
-</style>
+</style>

src/components/Table.vue

@@ -8,7 +8,7 @@
         <tbody @mouseleave="highlight(-1)">
         <tr :key="index" v-for="(row,index) in list" :class="rowClass(row, index)"
             @click="click(row)" @mouseenter="highlight(!picked.includes(row)?index:-1)" >
-            <td :key="idx" v-for="(col,idx) in tbColumns" v-html="row[col.data]"></td>
+            <td :key="idx" v-for="(col,idx) in tbColumns" v-html="renderColumn(row, col)"></td>
         </tr>
         </tbody>
     </table>
@@ -21,6 +21,12 @@
         mixins: [view],
         props: {
             tbColumns:  Array
+        },
+        methods: {
+          renderColumn(row, col) {
+              if(typeof col.data === 'string') return row[col.data];
+              else if(typeof col.data === 'function') return col.data(row);
+          }
         }
     }
-</script>
+</script>

src/index.js

@@ -9,6 +9,7 @@ const Plugin = {
             if(typeof option.placeholder === 'string') props.placeholder.default = option.placeholder;
             if(typeof option.pageSize === 'number') props.pageSize.default = option.pageSize;
 			if(typeof option.rtl === 'boolean') props.rtl.default = option.rtl;
+			if(typeof option.languages === 'object') props.languages.default = () => option.languages;
 
             if(option.dataLoad && typeof option.dataLoad === 'function'){
                 selectPage.extends = {
@@ -22,4 +23,4 @@ const Plugin = {
     }
 };
 
-export default Plugin;
+export default Plugin;

src/language.js

@@ -89,4 +89,22 @@ export default {
         placeholder: 'Seleccione una opción',
         items_selected: 'selected_count items Seleccionado'
     },  
+    de: {// German
+          next: 'Nächste Seite',
+          prev: 'Vorherige Seite',
+          first: 'Erste Seite',
+          last: 'Letzte Seite',
+          close_btn: 'Schließen (Esc)',
+          loading: 'Lädt...',
+          page_info: 'Seite page_num/page_count ( row_count Einträge )',
+          not_found: 'Nicht gefunden',
+          server_error: 'Bei der Verbindung zum Server ist ein Fehler aufgetreten.',
+          clear: 'Inhalt löschen',
+          select_all: 'Aktuelle Seite auswählen',
+          unselect_all: 'Auswahl der aktuellen Seite aufheben',
+          clear_all: 'Alle ausgewählten löschen',
+          max_selected: 'Sie können nur bis zu max_selected_limit Elemente auswählen',
+          placeholder: 'Wählen',
+          items_selected: 'selected_count Elemente ausgewählt'
+      },
 };

src/mixins/methods.js

@@ -1,3 +1,5 @@
+import language from "../language";
+
 export default {
     methods: {
         showChange(val){
@@ -171,7 +173,11 @@ export default {
                 if(Array.isArray(this.data)){
                     let list = this.sortedList?this.sortedList.concat():this.data.concat();
                     if(this.search)
-                        list = list.filter(val => val[this.searchColumn].toLowerCase().includes(this.search.toLowerCase()));
+                        list = list.filter(val => {
+                          if (!this.searchFilterCallback) return val[this.searchColumn].toLowerCase().includes(this.search.toLowerCase());
+
+                          return this.searchFilterCallback(val, this.search.toLowerCase(), this.searchColumn);
+                        });
                     this.totalRows = list.length;
 
                     if(this.pagination){
@@ -269,6 +275,15 @@ export default {
         },
         isEdge(){
             return navigator.userAgent.indexOf("Edge") >= 0;
+        },
+        getTranslation() {
+            const locale   = this.language;
+            const fallback = this.fallbackLocale;
+            let languages  = language;
+
+            if (this.languages) languages = this.languages;
+
+            return languages[locale] ? languages[locale] : languages[fallback];
         }
     }
-};
+};

src/mixins/props.js

@@ -38,6 +38,18 @@ export default {
             type: String,
             default: 'cn'
         },
+        languages: {
+          type: Object,
+          default: null
+        },
+        /**
+         * specify which language should be used
+         * when a translation is undefined
+         */
+        fallbackLocale: {
+          type: String,
+          default: 'cn'
+        },
         keyField: {
             type: String,
             default: 'id'
@@ -66,6 +78,11 @@ export default {
          */
         sort: String,
         searchField: String,
+        /**
+         * Callback params (item, search, searchColumn) => boolean
+         * A function invoked per iteration on search
+         */
+        searchFilterCallback: Function,
         pageSize:{
             type: Number,
             default: 10
@@ -97,4 +114,4 @@ export default {
             default: false
         }
     }
-};
+};