Fixed #279 - filterLocale for components with filtering

src/components/datatable/DataTable.d.ts

@@ -25,6 +25,7 @@ export declare class DataTable extends Vue {
     filters?: {
         [s: string]: any;
     };
+    filterLocale?: string;
     selection?: any[]|any;
     selectionMode?: string;
     compareSelectionBy?: string;

src/components/datatable/DataTable.vue

@@ -230,6 +230,10 @@ export default {
             type: Object,
             default: null
         },
+        filterLocale: {
+            type: String,
+            default: null
+        },
         selection: {
             type: [Array,Object],
             default: null
@@ -597,7 +601,7 @@ export default {
                         let filterValue = this.filters[columnField];
                         let dataFieldValue = ObjectUtils.resolveFieldData(data[i], columnField);
                         let filterConstraint = col.filterMatchMode === 'custom' ? col.filterFunction : FilterUtils[col.filterMatchMode];
-                        if (!filterConstraint(dataFieldValue, filterValue)) {
+                        if (!filterConstraint(dataFieldValue, filterValue, this.filterLocale)) {
                             localMatch = false;
                         }
 
@@ -607,7 +611,7 @@ export default {
                     }
 
                     if (!col.excludeGlobalFilter && this.hasGlobalFilter && !globalMatch) {
-                        globalMatch = FilterUtils.contains(ObjectUtils.resolveFieldData(data[i], columnField), this.filters['global']);
+                        globalMatch = FilterUtils.contains(ObjectUtils.resolveFieldData(data[i], columnField), this.filters['global'], this.filterLocale);
                     }
                 }
 

src/components/dropdown/Dropdown.d.ts

@@ -9,6 +9,7 @@ export declare class Dropdown extends Vue {
     scrollHeight?: string;
     filter?: boolean;
     filterPlaceholder?: string;
+    filterLocale?: string;
     editable?: boolean;
     placeholder?: string;
     disabled?: boolean;

src/components/dropdown/Dropdown.vue

@@ -53,6 +53,7 @@ export default {
 		},
 		filter: Boolean,
         filterPlaceholder: String,
+        filterLocale: String,
 		editable: Boolean,
 		placeholder: String,
 		disabled: Boolean,
@@ -378,8 +379,8 @@ export default {
         searchOptionInRange(start, end) {
             for (let i = start; i < end; i++) {
                 let opt = this.visibleOptions[i];
-                let label = this.getOptionLabel(opt).toLowerCase();
+                let label = this.getOptionLabel(opt).toLocaleLowerCase(this.filterLocale);
-                if (label.startsWith(this.searchValue.toLowerCase())) {
+                if (label.startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale))) {
                     return opt;
                 }
             }
@@ -406,7 +407,7 @@ export default {
     computed: {
         visibleOptions() {
             if (this.filterValue && this.filterValue.trim().length > 0)
-                return this.options.filter(option => this.getOptionLabel(option).toLowerCase().indexOf(this.filterValue.toLowerCase()) > -1);
+                return this.options.filter(option => this.getOptionLabel(option).toLocaleLowerCase(this.filterLocale).indexOf(this.filterValue.toLocaleLowerCase(this.filterLocale)) > -1);
             else
                 return this.options;
         },

src/components/listbox/Listbox.d.ts

@@ -12,6 +12,7 @@ export declare class Listbox extends Vue {
     multiple?: boolean;
     metaKeySelection?: boolean;
     filter?: boolean;
+    filterLocale?: string;
     ariaLabelledBy?: string;
     $emit(eventName: 'input', value: any): this;
     $emit(eventName: 'change', e: { originalEvent: Event, value: any }): this;

src/components/listbox/Listbox.vue

@@ -35,7 +35,8 @@ export default {
         dataKey: null,
         multiple: Boolean,
         metaKeySelection: Boolean,
-        filter: Boolean
+        filter: Boolean,
+        filterLocale: String
     },
     optionTouched: false,
     data() {
@@ -218,7 +219,7 @@ export default {
     computed: {
         visibleOptions() {
             if (this.filterValue)
-                return this.options.filter(option => this.getOptionLabel(option).toLowerCase().indexOf(this.filterValue.toLowerCase()) > -1);
+                return this.options.filter(option => this.getOptionLabel(option).toLocaleLowerCase(this.filterLocale).indexOf(this.filterValue.toLocaleLowerCase(this.filterLocale)) > -1);
             else
                 return this.options;
         },

src/components/multiselect/MultiSelect.d.ts

@@ -13,6 +13,7 @@ export declare class MultiSelect extends Vue {
     tabindex?: string;
     dataKey?: string;
     filterPlaceholder?: string;
+    filterLocale?: string;
     ariaLabelledBy?: string;
     appendTo?: string;
     $emit(eventName: 'input', value: any): this;

src/components/multiselect/MultiSelect.vue

@@ -74,6 +74,7 @@ export default {
 		tabindex: String,
         dataKey: null,
         filterPlaceholder: String,
+        filterLocale: String,
         ariaLabelledBy: null,
         appendTo: {
             type: String,
@@ -340,7 +341,7 @@ export default {
     computed: {
         visibleOptions() {
             if (this.filterValue && this.filterValue.trim().length > 0)
-                return this.options.filter(option => this.getOptionLabel(option).toLowerCase().indexOf(this.filterValue.toLowerCase()) > -1);
+                return this.options.filter(option => this.getOptionLabel(option).toLocaleLowerCase(this.filterLocale).indexOf(this.filterValue.toLocaleLowerCase(this.filterLocale)) > -1);
             else
                 return this.options;
         },

src/components/tree/Tree.d.ts

@@ -12,6 +12,7 @@ export declare class Tree extends Vue {
     filterBy?: string;
     filterMode?: string;
     filterPlaceholder?: string;
+    filterLocale?: string;
     $emit(eventName: 'node-select', node: any): this;
     $emit(eventName: 'node-unselect', node: any): this;
     $emit(eventName: 'node-expand', node: any): this;

src/components/tree/Tree.vue

@@ -68,6 +68,10 @@ export default {
         filterPlaceholder: {
             type: String,
             default: null
+        },
+        filterLocale: {
+            type: String,
+            default: null
         }
     },
     data() {
@@ -221,7 +225,7 @@ export default {
         isFilterMatched(node, {searchFields, filterText, strict}) {
             let matched = false;
             for(let field of searchFields) {
-                let fieldValue = String(ObjectUtils.resolveFieldData(node, field)).toLowerCase();
+                let fieldValue = String(ObjectUtils.resolveFieldData(node, field)).toLocaleLowerCase(this.filterLocale);
                 if(fieldValue.indexOf(filterText) > -1) {
                     matched = true;
                 }
@@ -247,7 +251,7 @@ export default {
         filteredValue() {
             let filteredNodes = [];
             const searchFields = this.filterBy.split(',');
-            const filterText = this.filterValue.trim().toLowerCase();
+            const filterText = this.filterValue.trim().toLocaleLowerCase(this.filterLocale);
             const strict = this.filterMode === 'strict';
 
             for (let node of this.value) {

src/components/treetable/TreeTable.d.ts

@@ -31,6 +31,7 @@ export declare class TreeTable extends Vue {
         [s: string]: any;
     };
     filterMode?: string;
+    filterLocale?: string;
     resizableColumns?: boolean;
     columnResizeMode?: string;
     $emit(eventName: 'page', event: Event): this;

src/components/treetable/TreeTable.vue

@@ -200,6 +200,10 @@ export default {
             type: String,
             default: 'lenient'
         },
+        filterLocale: {
+            type: String,
+            default: null
+        },
         resizableColumns: {
             type: Boolean,
             default: false
@@ -590,7 +594,7 @@ export default {
                     if (this.hasGlobalFilter && !globalMatch) {
                         let copyNodeForGlobal = {...copyNode};
                         let globalFilterValue = this.props.globalFilter;
-                        let globalFilterConstraint = ObjectUtils.filterConstraints['contains'];
+                        let globalFilterConstraint = FilterUtils['contains'];
                         let globalFilterParamsWithoutNode = {filterField, globalFilterValue, globalFilterConstraint, strict};
 
                         if ((strict && (this.findFilteredNodes(copyNodeForGlobal, globalFilterParamsWithoutNode) || this.isFilterMatched(copyNodeForGlobal, globalFilterParamsWithoutNode))) ||
@@ -642,7 +646,7 @@ export default {
         isFilterMatched(node, {filterField, filterValue, filterConstraint, strict}) {
             let matched = false;
             let dataFieldValue = ObjectUtils.resolveFieldData(node.data, filterField);
-            if (filterConstraint(dataFieldValue, filterValue)) {
+            if (filterConstraint(dataFieldValue, filterValue, this.filterLocale)) {
                 matched = true;
             }
 

src/components/utils/FilterUtils.js

@@ -2,7 +2,7 @@ import ObjectUtils from './ObjectUtils';
 
 export default class FilterUtils {
 
-    static startsWith(value, filter) {
+    static startsWith(value, filter, filterLocale) {
         if (filter === undefined || filter === null || filter.trim() === '') {
             return true;
         }
@@ -11,13 +11,13 @@ export default class FilterUtils {
             return false;
         }
 
-        let filterValue = ObjectUtils.removeAccents(filter.toString()).toLowerCase();
+        let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
-        let stringValue = ObjectUtils.removeAccents(value.toString()).toLowerCase();
+        let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
 
         return stringValue.slice(0, filterValue.length) === filterValue;
     }
 
-    static contains(value, filter) {
+    static contains(value, filter, filterLocale) {
         if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
             return true;
         }
@@ -26,13 +26,13 @@ export default class FilterUtils {
             return false;
         }
 
-        let filterValue = ObjectUtils.removeAccents(filter.toString()).toLowerCase();
+        let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
-        let stringValue = ObjectUtils.removeAccents(value.toString()).toLowerCase();
+        let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
 
         return stringValue.indexOf(filterValue) !== -1;
     }
 
-    static endsWith(value, filter) {
+    static endsWith(value, filter, filterLocale) {
         if (filter === undefined || filter === null || filter.trim() === '') {
             return true;
         }
@@ -41,13 +41,13 @@ export default class FilterUtils {
             return false;
         }
 
-        let filterValue = ObjectUtils.removeAccents(filter.toString()).toLowerCase();
+        let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
-        let stringValue = ObjectUtils.removeAccents(value.toString()).toLowerCase();
+        let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
 
         return stringValue.indexOf(filterValue, stringValue.length - filterValue.length) !== -1;
     }
 
-    static equals(value, filter) {
+    static equals(value, filter, filterLocale) {
         if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
             return true;
         }
@@ -59,10 +59,10 @@ export default class FilterUtils {
         if (value.getTime && filter.getTime)
             return value.getTime() === filter.getTime();
         else
-            return ObjectUtils.removeAccents(value.toString()).toLowerCase() === ObjectUtils.removeAccents(filter.toString()).toLowerCase();
+            return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) === ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
     }
 
-    static notEquals(value, filter) {
+    static notEquals(value, filter, filterLocale) {
         if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
             return false;
         }
@@ -74,10 +74,10 @@ export default class FilterUtils {
         if (value.getTime && filter.getTime)
             return value.getTime() !== filter.getTime();
         else
-            return ObjectUtils.removeAccents(value.toString()).toLowerCase() !== ObjectUtils.removeAccents(filter.toString()).toLowerCase();
+            return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) !== ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
     }
 
-    static in(value, filter) {
+    static in(value, filter, filterLocale) {
         if (filter === undefined || filter === null || filter.length === 0) {
             return true;
         }
@@ -95,7 +95,7 @@ export default class FilterUtils {
         return false;
     }
 
-    static lt(value, filter) {
+    static lt(value, filter, filterLocale) {
         if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
             return true;
         }
@@ -110,7 +110,7 @@ export default class FilterUtils {
             return value < parseFloat(filter);
     }
 
-    static lte(value, filter) {
+    static lte(value, filter, filterLocale) {
         if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
             return true;
         }
@@ -125,7 +125,7 @@ export default class FilterUtils {
             return value <= parseFloat(filter);
     }
 
-    static gt(value, filter) {
+    static gt(value, filter, filterLocale) {
         if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
             return true;
         }
@@ -140,7 +140,7 @@ export default class FilterUtils {
             return value > parseFloat(filter);
     }
 
-    static gte(value, filter) {
+    static gte(value, filter, filterLocale) {
         if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
             return true;
         }

src/views/datatable/DataTableDoc.vue

@@ -1831,6 +1831,12 @@ export default {
                                 <td>null</td>
                                 <td>Filters object with key-value pairs to define the filters.</td>
                             </tr>
+                            <tr>
+                                <td>filterLocale</td>
+                                <td>string</td>
+                                <td>undefined</td>
+                                <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
+                            </tr>
                             <tr>
                                 <td>selection</td>
                                 <td>any</td>

src/views/dropdown/DropdownDoc.vue

@@ -124,6 +124,12 @@ data() {
                                 <td>null</td>
                                 <td>Placeholder text to show when filter input is empty.</td>
                             </tr>
+                            <tr>
+                                <td>filterLocale</td>
+                                <td>string</td>
+                                <td>undefined</td>
+                                <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
+                            </tr>
                             <tr>
                                 <td>editable</td>
                                 <td>boolean</td>

src/views/listbox/ListboxDoc.vue

@@ -136,6 +136,12 @@ data() {
                                 <td>boolean</td>
                                 <td>false</td>
                                 <td>When specified, displays a filter input at header.</td>
+                            </tr>
+                            <tr>
+                                <td>filterLocale</td>
+                                <td>string</td>
+                                <td>undefined</td>
+                                <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
                             </tr>
 						</tbody>
 					</table>

src/views/multiselect/MultiSelectDoc.vue

@@ -148,6 +148,12 @@ data() {
                                 <td>null</td>
                                 <td>Placeholder text to show when filter input is empty.</td>
                             </tr>
+                            <tr>
+                                <td>filterLocale</td>
+                                <td>string</td>
+                                <td>undefined</td>
+                                <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
+                            </tr>
                             <tr>
                                 <td>ariaLabelledBy</td>
                                 <td>string</td>

src/views/tree/TreeDoc.vue

@@ -622,6 +622,12 @@ export default {
                                 <td>string</td>
                                 <td>null</td>
                                 <td>Placeholder text to show when filter input is empty.</td>
+                            </tr>
+                            <tr>
+                                <td>filterLocale</td>
+                                <td>string</td>
+                                <td>undefined</td>
+                                <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
                             </tr>
 						</tbody>
 					</table>

src/views/treetable/TreeTableDoc.vue

@@ -1411,6 +1411,12 @@ export default {
                                 <td>lenient</td>
                                 <td>Mode for filtering valid values are "lenient" and "strict". Default is lenient.</td>
                             </tr>
+                            <tr>
+                                <td>filterLocale</td>
+                                <td>string</td>
+                                <td>undefined</td>
+                                <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
+                            </tr>
                             <tr>
                                 <td>resizableColumns</td>
                                 <td>boolean</td>