Sfoglia il codice sorgente

Modify the value of the multilingual context

杜府 3 anni fa
parent
commit
ed898f7eeb

+ 25 - 30
components/README.md

@@ -5,41 +5,36 @@
 
 [![npm (tag)](https://img.shields.io/npm/v/stdf)](https://www.npmjs.com/package/stdf) [![npm](https://img.shields.io/npm/dt/stdf)](https://www.npmjs.com/package/stdf) <a href="https://github.com/dufu1991/stdf"><img alt="GitHub" src="https://badgen.net/github/stars/dufu1991/stdf"/></a> <a href="https://github.com/dufu1991/stdf/blob/main/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/dufu1991/stdf"/></a>
 
-</p>
-
   <h4>
-    <a href="https://github.com/dufu1991/stdf/blob/main/README_en.md" target="_blank">English</a>
+    <a href="https://github.com/dufu1991/stdf/blob/main/README.md" target="_blank">中文</a>
   <span> · </span>
-    <a href="https://stdf.design?lang=zh_CN" target="_blank">网站</a>
-  <span>
+    <a href="https://stdf.design?lang=en_US" target="_blank">Website<a>
   </h4>
 </div>
 
-# 介绍
+# Introduction
 
-基于 [Svelte](https://svelte.dev) 与 [Tailwind](https://www.tailwindcss.com) 的移动 web 组件库。
+Mobile web component library based on [Svelte](https://svelte.dev) and [Tailwind](https://www.tailwindcss.com) .
 
 > **S**imple · **T**hin · **D**esign · **F**ast
 
-> 简 单 · 轻 量 · 设 计 · 快 速
-
-# 特性
+# Features
 
--   🚀 无运行时,无虚拟 DOM,线上运行更快;
--   🧰 API 丰富,轻松配置出符合需求的组件样式;
--   ✍ 基于 Svelte 和 Tailwind,编码迅速轻松;
--   🍭 支持暗色模式;
--   📖 提供丰富的中英文文档和组件示例;
--   🌍 支持国际化,已内置 60+ 种语言包;
--   🫰 交互友好,动画参数可配,可自定义主题;
--   🤝 支持 Tailwind 类库,如 Windi CSS、UnoCSS 等;
--   🫡 无三方依赖,无需担心三方库版本与安全问题。
+-   🚀 No runtime, no virtual DOM, runs faster online;
+-   🧰 Rich API, easily configure component styles that meet your needs;
+-   ✍ Based on Svelte and Tailwind, coding is quick and easy;
+-   🍭 Supports dark mode;
+-   📖 Provides extensive Chinese and English documentation and component examples;
+-   🌍 Supports internationalization, with 60+ built-in language packages;
+-   🫰 User-friendly interaction, animation parameters can be configured, and custom themes are supported;
+-   🤝 Supports Tailwind libraries such as Windi CSS and UnoCSS;
+-   🫡 No three -party dependence, no need to worry about the three -party library version and security issues.
 
-# 快速上手
+# Getting Started
 
-## 安装
+## Installation
 
-已有配置好 Svelte 与 Tailwind 的工程,直接安装。
+If you have a project configured with Svelte and Tailwind, install directly.
 
 ```bash
 npm i stdf
@@ -49,7 +44,7 @@ yarn add stdf
 pnpm i stdf
 ```
 
-## 使用
+## Usage
 
 ```xml
 <!-- Button Demo -->
@@ -57,17 +52,17 @@ pnpm i stdf
 import { Button } from 'stdf';
 </script>
 
-<Button>默认</Button>
+<Button>Default</Button>
 ```
 
-😓 无工程?用 Vite 示例创建工程,参考 [Vite 文档](https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project)。并配置 Tailwind CSS,参考 [Tailwind CSS 文档](https://tailwindcss.com/docs/guides/vite)。
+😓 No project? Create a project with Vite and reference the [Vite documentation](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) and the [Tailwind CSS documentation](https://tailwindcss.com/docs/guides/vite) for CSS configuration.
 
-# 手机预览
+# Mobile Preview
 
-可以手机扫描以下二维码访问手机端 Demo:
+You can scan the QR code below on your mobile phone to access the mobile demo:
 
-<img src="https://stdf.design/assets/qr/demo_qr.png" width="220" height="220" >
+<img src="https://stdf.design/assets/qr/demo_qr_en.png" width="220" height="220" >
 
-# 开源协议
+# License
 
-本项目基于 [MIT](https://github.com/dufu1991/stdf/blob/main/LICENSE) 协议,请自由地享受和参与开源。
+This project is licensed under the [MIT License](https://github.com/dufu1991/stdf/blob/main/LICENSE). Feel free to enjoy and contribute to this open-source project.

+ 1 - 1
components/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stdf",
-    "version": "0.0.6",
+    "version": "0.0.7",
     "description": "Mobile Web component library based on Svelte and Tailwind",
     "main": "index.js",
     "scripts": {

+ 1 - 1
components/src/actionSheet/ActionSheet.svelte

@@ -9,7 +9,7 @@
 
     // 当前语言
     // current language
-    const currentLang = getContext('lang') || zh_CN;
+    const currentLang = getContext('STDF_lang') || zh_CN;
     const actionSheetLang = currentLang.actionSheet;
 
     // 是否显示

+ 1 - 1
components/src/asyncPicker/AsyncPicker.svelte

@@ -12,7 +12,7 @@
 
     // 当前语言
     // current language
-    const currentLang = getContext('lang') || zh_CN;
+    const currentLang = getContext('STDF_lang') || zh_CN;
     const asyncPickerLang = currentLang.asyncPicker;
 
     // 是否显示

+ 1 - 1
components/src/bottomSheet/BottomSheet.svelte

@@ -8,7 +8,7 @@
 
     // 当前语言
     // current language
-    const currentLang = getContext('lang') || zh_CN;
+    const currentLang = getContext('STDF_lang') || zh_CN;
     const bottomSheetLang = currentLang.bottomSheet;
 
     // 是否显示

+ 1 - 1
components/src/calendar/Calendar.svelte

@@ -20,7 +20,7 @@
 
     // 当前语言
     // current language
-    const currentLang = getContext('lang') || zh_CN;
+    const currentLang = getContext('STDF_lang') || zh_CN;
     const calendarLang = currentLang.calendar;
 
     // 是否显示

+ 1 - 1
components/src/cell/Cell.svelte

@@ -10,7 +10,7 @@
 
     // 当前语言
     // current language
-    const currentLang = getContext('lang') || zh_CN;
+    const currentLang = getContext('STDF_lang') || zh_CN;
     const commonLang = currentLang.common;
 
     // 标题

+ 1 - 1
components/src/dialog/Dialog.svelte

@@ -10,7 +10,7 @@
 
     // 当前语言
     // current language
-    const currentLang = getContext('lang') || zh_CN;
+    const currentLang = getContext('STDF_lang') || zh_CN;
     const dialogLang = currentLang.dialog;
 
     // 是否显示

+ 1 - 1
components/src/input/Input.svelte

@@ -8,7 +8,7 @@
 
     // 当前语言
     // current language
-    const currentLang = getContext('lang') || zh_CN;
+    const currentLang = getContext('STDF_lang') || zh_CN;
     const commonLang = currentLang.common;
     const inputLang = currentLang.input;
 

+ 1 - 1
components/src/modal/Modal.svelte

@@ -11,7 +11,7 @@
 
     // 当前语言
     // current language
-    const currentLang = getContext('lang') || zh_CN;
+    const currentLang = getContext('STDF_lang') || zh_CN;
     const modalLang = currentLang.modal;
 
     // 是否显示

+ 1 - 1
components/src/navBar/NavBar.svelte

@@ -9,7 +9,7 @@
 
     // 当前语言
     // current language
-    const currentLang = getContext('lang') || zh_CN;
+    const currentLang = getContext('STDF_lang') || zh_CN;
     const navBarLang = currentLang.navBar;
     const commonLang = currentLang.common;
 

+ 1 - 1
components/src/noticeBar/NoticeBar.svelte

@@ -9,7 +9,7 @@
 
     // 当前语言
     // current language
-    const currentLang = getContext('lang') || zh_CN;
+    const currentLang = getContext('STDF_lang') || zh_CN;
     const noticeBarLang = currentLang.noticeBar;
     const commonLang = currentLang.common;
 

+ 1 - 1
components/src/picker/Picker.svelte

@@ -10,7 +10,7 @@
 
     // 当前语言
     // current language
-    const currentLang = getContext('lang') || zh_CN;
+    const currentLang = getContext('STDF_lang') || zh_CN;
     const pickerLang = currentLang.picker;
 
     // 是否显示

+ 1 - 1
components/src/rate/Rate.svelte

@@ -56,7 +56,7 @@
 
     // 当前语言
     // current language
-    const currentLang = getContext('lang') || 'zh_CN';
+    const currentLang = getContext('STDF_lang') || 'zh_CN';
 
     // 对传入数据进行一些报错或警告处理
     // some error or warning processing for the incoming data

+ 1 - 1
components/src/timePicker/TimePicker.svelte

@@ -11,7 +11,7 @@
 
     // 当前语言
     // current language
-    const currentLang = getContext('lang') || zh_CN;
+    const currentLang = getContext('STDF_lang') || zh_CN;
     const timePickerLang = currentLang.timePicker;
 
     // 是否显示

+ 4 - 0
doc/guide/changelog.md

@@ -1,3 +1,7 @@
+## 0.0.7
+
+-   多语言包 Context 的值由 `lang` 改为 `STDF_lang`,避免与工程内其他语言包名称冲突。
+
 ## 0.0.6
 
 -   新增 Loading 类型。

+ 4 - 0
doc/guide/changelog_en.md

@@ -1,3 +1,7 @@
+## 0.0.7
+
+-   The value of the Context for the multilingual package has been changed from "lang" to "STDF_lang" to avoid conflicts with the names of other language packages within the project.
+
 ## 0.0.6
 
 -   Add Loading type.

+ 2 - 2
doc/guide/internation.md

@@ -8,11 +8,11 @@ STDF 组件使用 Svelte 的 [Context](https://svelte.dev/docs#run-time-svelte-s
     import { setContext } from 'svelte'; // 引入 setContext
     import en_US from 'stdf/lang/en_US'; // 导入语言文件
 
-    setContext('lang', en_US); // 设置语言
+    setContext('STDF_lang', en_US); // 设置语言
 </script>
 ```
 
-此组件的所有子孙组件(包含了 STDF 组件)都可以通过 `getContext('lang')` 获取到当前语言配置。更加灵活的是,甚至可以在应用内的某部分配置另一种语言。
+此组件的所有子孙组件(包含了 STDF 组件)都可以通过 `getContext('STDF_lang')` 获取到当前语言配置。更加灵活的是,甚至可以在应用内的某部分配置另一种语言。
 
 注意 **Context 的切换不是响应式的**,一般应用中语言的切换也不需要实时响应。
 

+ 3 - 2
doc/guide/internation_en.md

@@ -7,11 +7,12 @@ The STDF component uses Svelte's [Context](https://svelte.dev/docs#run-time-svel
 <script>
     import { setContext } from 'svelte'; // import setContext
     import en_US from 'stdf/lang/en_US'; // import language file
-    setContext('lang', en_US); // set language
+    
+    setContext('STDF_lang', en_US); // set language
 </script>
 ```
 
-All child components of this component (including STDF components) can obtain the current language configuration using `getContext('lang')`. More flexible is that another language can be configured in some parts of the application.
+All child components of this component (including STDF components) can obtain the current language configuration using `getContext('STDF_lang')`. More flexible is that another language can be configured in some parts of the application.
 
 Note that **Context switching is not reactive**, and language switching in most applications does not require real-time response.