Localization
The library provides three built-in locales:
- English
- Chinese
- German
You can also apply a custom locale.
Default locale
The English locale is applied by default:
const en = {
//calendar
calendar: {
monthFull: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
],
monthShort: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
dayFull: [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
],
dayShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
hours: "Hours",
minutes: "Minutes",
done: "Done",
clear: "Clear",
today: "Today",
am: ["am", "AM"],
pm: ["pm", "PM"],
weekStart: 7,
clockFormat: 24
},
//core
core: {
ok:"OK",
cancel:"Cancel",
select: "Select",
"No data": "No data"
},
//formats
formats: {
timeFormat: "%H:%i",
dateFormat: "%m/%d/%Y",
monthYearFormat: "%F %Y",
yearFormat: "%Y",
},
lang: "en-US",
// filter
filter: {
"Add filter": "Add filter",
"Add group": "Add group",
Edit: "Edit",
Delete: "Delete",
"Select all": "Select all",
"Unselect all": "Unselect all",
Cancel: "Cancel",
Apply: "Apply",
and: "and",
or: "or",
in: "in",
equal: "equal",
"not equal": "not equal",
contains: "contains",
"not contains": "not contains",
"begins with": "begins with",
"not begins with": "not begins with",
"ends with": "ends with",
"not ends with": "not ends with",
greater: "greater",
"greater or equal": "greater or equal",
less: "less",
"less or equal": "less or equal",
between: "between",
"not between": "not between",
"Click to select": "Click to select",
None: "None",
"filter by": "filter by",
},
};
cn locale
const cn = {
// calendar
calendar: {
monthFull: [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月",
],
monthShort: [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月",
],
dayFull: [
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
],
dayShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
hours: "小时",
minutes: "分钟",
done: "完成",
clear: "清除",
today: "今天",
am: ["", ""],
pm: ["", ""],
weekStart: 7,
clockFormat: 24,
},
//core
core: {
ok: "确定",
cancel: "取消",
select: "选择",
"No data": "没有数据"
},
// formats
formats: {
timeFormat: "%H:%i",
dateFormat: "%Y-%m-%d",
monthYearFormat: "%F %Y",
yearFormat: "%Y",
},
lang: "zh-CN",
filter: {
"Add filter": "添加过滤器",
"Add group": "添加组",
Edit: "编辑",
Delete: "删除",
"Select all": "全选",
"Unselect all": "取消全选",
Cancel: "取消",
Apply: "应用",
and: "与",
or: "或",
in: "在",
equal: "等于",
"not equal": "不等于",
contains: "包含",
"not contains": "不包含",
"begins with": "开始于",
"not begins with": "不开始于",
"ends with": "结束于",
"not ends with": "不结束于",
greater: "大于",
"greater or equal": "大于或等于",
less: "小于",
"less or equal": "小于或等于",
between: "在之间",
"not between": "不在之间",
"Click to select": "點擊選擇",
None: "無",
"filter by": "過濾依據",
},
};
de locale
const de = {
// calendar
calendar: {
monthFull: [
"Januar",
"Februar",
"März",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Dezember",
],
monthShort: [
"Jan",
"Feb",
"Mrz",
"Apr",
"Mai",
"Jun",
"Jul",
"Aug",
"Sep",
"Okt",
"Nov",
"Dez",
],
dayFull: [
"Sonntag",
"Montag",
"Dienstag",
"Mittwoch",
"Donnerstag",
"Freitag",
"Samstag",
],
dayShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
hours: "Stunden",
minutes: "Minuten",
done: "Fertig",
clear: "Entfernen",
today: "Heute",
weekStart: 1,
clockFormat: 24,
},
//core
core: {
ok: "OK",
cancel: "Abbrechen",
select: "Auswählen",
"No data": "Keine Daten",
},
//formats
formats: {
timeFormat: "%H:%i",
dateFormat: "%d.%m.%Y",
monthYearFormat: "%F %Y",
yearFormat: "%Y",
},
lang: "de-DE",
// filter
filter: {
"Add filter": "Filter hinzufügen",
"Add group": "Gruppe hinzufügen",
Edit: "Bearbeiten",
Delete: "Löschen",
"Select all": "Alles auswählen",
"Unselect all": "Alles widerrufen",
Cancel: "Abbrechen",
Apply: "Anwenden",
and: "und",
or: "oder",
in: "in",
equal: "gleich",
"not equal": "ungleich",
contains: "enthält",
"not contains": "nicht enthält",
"begins with": "beginnt mit",
"not begins with": "nicht beginnt mit",
"ends with": "endet mit",
"not ends with": "nicht endet mit",
greater: "mehr",
"greater or equal": "größer oder gleich",
less: "weniger",
"less or equal": "weniger oder gleich",
between: "zwischen",
"not between": "nicht zwischen",
"Click to select": "Klicken, um auszuwählen",
None: "Keine",
"filter by": "filtern nach",
},
};
Applying locales
To apply a built-in locale, import the Locale object from "wx-svelte-core", the locale package from "wx-core-locales", and a built-in locale from "wx-filter-locales", and then add the words attribute for the required language to the Locale tag. Then, wrap Filter into the Locale tag.
Example:
<script>
import { Locale } from "wx-svelte-core";
import { cn } from "wx-filter-locales";
import { cn as cnCore } from "wx-core-locales";
</script>
<Locale words={{ ...cn, ...cnCore }}>
<FilterBuilder {fields} />
</Locale>
To apply a custom locale, you need to create an object for the custom locale (or modify the existing one) and provide translations for all Filter text labels (it can be any language you need). You also need to add labels from the core and calendar components ("wx-core-locales"). Refer to Core localization for more details.
Example for the Korean language:
<script>
import { Locale } from "wx-svelte-core";
import { FilterBuilder } from "wx-svelte-filter";
const ko = {
filter: {
"Add filter": "필터 추가",
"Add group": "그룹 추가",
},
core:{ ... },
calendar: { ... }
};
<Locale words={{ ko }}>
<FilterBuilder {fields} />
</Locale>