Localization

The library provides two built-in locales:

• English
• Chinese

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: {
        dateFormat: "%d.%m.%Y",
        timeFormat: "%H:%i"
    },

  lang: "en-US",

  // FM
  filemanager: {
    "My files": "My files",

    "Add New": "Add New",
    Ok: "Ok",
    Cancel: "Cancel",

    "Delete files": "Delete Files",
    Files: "Files",
    Folder: "Folder",
    "Back to parent folder": "Back to parent folder",

    Information: "Information",
    Found: "Found",

    "Are you sure you want to delete these items:": "Are you sure you want to delete these items:",
    "Enter file name": "Enter file name",
    "Enter folder name": "Enter folder name",

    Result: "Result",
    Search: "Search",
    "Search results in": "Search results in",
    "Add new file": "Add new file",
    "Add new folder": "Add new folder",
    "Upload file": "Upload file",

    Size: "Size",
    Name: "Name",
    Type: "Type",
    Date: "Date",

    Rename: "Rename",
    Cut: "Cut",
    Delete: "Delete",
    Copy: "Copy",
    Paste: "Paste",
    Download: "Download",
    Count: "Count",
    folder: "folder",
    folders: "folders",
    file: "file",
    files: "files",
    "Multiple files": "Multiple files",
    multiple: "multiple",
    Preview: "Preview",
    of: "of",
    used: "used",
    "Select file or folder to view details": "Select file or folder to view details",
    "Looks like nothing is here": "Looks like nothing is here",
    "Unknown file": "Unknown file",

    "A miniature file preview": "A miniature file preview",
  },
};

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",
  },

  lang: "zh-CN",
  
  // FM
  filemanager: {
    "My files": "我的文件",

    "Add New": "添新",
    Ok: "好的",
    Cancel: "取消",

    "Delete files": "删除文件",
    Files: "文件",
    Folder: "文件夹",
    "Back to parent folder": "返回父文件夹",

    Information: "信息",
    Found: "成立",

    "Are you sure you want to delete these items:": "您确定要删除此项目吗:",
    "Enter file name": "輸入檔名",
    "Enter folder name": "輸入資料夾名稱",

    Result: "结果",
    Search: "搜索",
    "Search results in": "搜尋結果位於",
    "Add new file": "添加新文件",
    "Add new folder": "添加新文件夹",
    "Upload file": "上传文件",

    Size: "尺寸",
    Name: "姓名",
    Type: "类型",
    Date: "日期",

    Rename: "改名",
    Cut: "切",
    Delete: "删除",
    Copy: "复制",
    Paste: "粘贴",
    Download: "字典",
    Count: "伯爵",
    folder: "文件夹",
    folders: "文件夹",
    file: "文件",
    files: "文件",
    "Multiple files": "多個文件",
    multiple: "多種的",
    Preview: "預覽",
    of: "的",
    used: "過去慣常",
    "Select file or folder to view details": "選擇文件或資料夾以查看詳細信息",
    "Looks like nothing is here": "这里好像什么都没有",
    "Unknown file": "未知文件",

    "A miniature file preview": "微文件预览",
  },
};

Applying locales

To apply a built-in locale, import the Locale object from "@svar-ui/svelte-core", the locale package from "wx-core-locales", and a built-in locale from "wx-filemanager-locales", and then add the words attribute for the required language to the Locale tag.

Example:

import { Locale } from "@svar-ui/svelte-core";
import { cn } from "wx-filemanager-locales";
import { cn as cnCore } from "wx-core-locales";

<Locale words={{ ...cn, ...cnCore }}>

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 File Manager 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:

const ko = {
   filemanager: {
       "Add New": "새로운 걸 더하다",
       Ok: " 확인",
       Cancel: "취소",
       //other labels
    },
    core:{ ... },
    calendar: { ... }
};

---

Related sample: Locales