[doc]Update some documents

README.md

@@ -53,7 +53,7 @@ Mobile web component library based on [Svelte](https://svelte.dev) and [Tailwind
 - 🪜 Comes with a scaffolding tool for quick project creation.
 - 🔗 Comes with an SVG merging plugin for quickly merging SVG files.
 - 🍺 IDE plugin for quickly viewing component APIs.
-- 🔧 Props supports type prompts and detection.
+- 🔧 Supports TypeScript, with complete type prompts for component Props.
 
 # Getting Started
 

README_CN.md

@@ -55,7 +55,7 @@
 - 🪜 配套脚手架，快速创建工程。
 - 🔗 配套 SVG 合并插件，快速合并 SVG。
 - 🍺 配套 IDE 插件，快速查看组件 API。
-- 🔧 Props 支持类型提示与检测。
+- 🔧 支持 TypeScript，组件 Props 有完整的类型提示。
 
 # 快速上手
 

docs/mds/guide/changelog.md

@@ -1,3 +1,8 @@
+## 1.0.0-next.4 <font size=1>2024-12-02</font>
+
+- 完整支持 Svelte 5 与 TypeScript，包括库与示例。
+- 按照 Svelte 官方 CLI [sv create](https://svelte.dev/docs/cli/sv-create) 重构库文件。
+
 ## 0.5.3 <font size=1>2024-11-19</font>
 
 - 优化 Icon 组件，详见 [Icon](https://stdf.design/#/components?nav=icon&tab=4)。

docs/mds/guide/changelog_en.md

@@ -1,3 +1,8 @@
+## 1.0.0-next.4 <font size=1>2024-12-02</font>
+
+- Full support for Svelte 5 and TypeScript, including libraries and demos.
+- Rebuilt the library according to Svelte official CLI [sv create](https://svelte.dev/docs/cli/sv-create).
+
 ## 0.5.3 <font size=1>2024-11-19</font>
 
 - Optimized Icon component, please see [Icon](https://stdf.design/#/components?nav=icon&tab=4).

docs/mds/guide/contribution.md

@@ -26,15 +26,16 @@
 - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 或者 [WebStorm 集成](https://www.jetbrains.com/help/webstorm/prettier.html)：代码格式化插件。
 
 按照下面的步骤操作，即可在本地快速启动 STDF Demo。
-
+<!-- main -> next -->
 > 由于 Demo 依赖的 rollup-plugin-stdf-icon 包是本地构建的，所以请先构建一下这个包。
 
 <!-- :::code-groups -->
 <!-- pnpm -->
 ```sh
-## 1. 克隆 STDF 仓库并进入
+## 1. 克隆 STDF 仓库并进入，切换到 next 分支
 git clone git@github.com:any-tdf/stdf.git
 cd stdf
+git checkout next
 
 ## 2. 构建 rollup-plugin-stdf-icon 包
 cd packages/rollup-plugin-stdf-icon
@@ -43,8 +44,8 @@ pnpm i
 ## 构建包
 pnpm build
 
-## 3. 使用 Demo 工程调试 STDF
-cd demo
+## 3. 调试 STDF
+cd packages/stdf
 ## 安装依赖
 pnpm i
 ## 启动 Demo
@@ -53,9 +54,10 @@ pnpm dev
 <!-- :: -->
 <!-- npm -->
 ```sh
-## 1. 克隆 STDF 仓库并进入
+## 1. 克隆 STDF 仓库并进入，切换到 next 分支
 git clone git@github.com:any-tdf/stdf.git
 cd stdf
+git checkout next
 
 ## 2. 构建 rollup-plugin-stdf-icon 包
 cd packages/rollup-plugin-stdf-icon
@@ -64,8 +66,8 @@ npm i
 ## 构建包
 npm run build
 
-## 3. 使用 Demo 工程调试 STDF
-cd demo
+## 3. 调试 STDF
+cd packages/stdf
 ## 安装依赖
 npm i
 ## 启动 Demo
@@ -74,9 +76,10 @@ npm run dev
 <!-- :: -->
 <!-- bun -->
 ```sh
-## 1. 克隆 STDF 仓库并进入
+## 1. 克隆 STDF 仓库并进入，切换到 next 分支
 git clone git@github.com:any-tdf/stdf.git
 cd stdf
+git checkout next
 
 ## 2. 构建 rollup-plugin-stdf-icon 包
 cd packages/rollup-plugin-stdf-icon
@@ -85,8 +88,8 @@ bun i
 ## 构建包
 bun build
 
-## 3. 使用 Demo 工程调试 STDF
-cd demo
+## 3. 调试 STDF
+cd packages/stdf
 ## 安装依赖
 bun i
 ## 启动 Demo
@@ -95,9 +98,10 @@ bun dev
 <!-- :: -->
 <!-- yarn -->
 ```sh
-## 1. 克隆 STDF 仓库并进入
+## 1. 克隆 STDF 仓库并进入，切换到 next 分支
 git clone git@github.com:any-tdf/stdf.git
 cd stdf
+git checkout next
 
 ## 2. 构建 rollup-plugin-stdf-icon 包
 cd packages/rollup-plugin-stdf-icon
@@ -106,8 +110,8 @@ yarn
 ## 构建包
 yarn build
 
-## 3. 使用 Demo 工程调试 STDF
-cd demo
+## 3. 调试 STDF
+cd packages/stdf
 ## 安装依赖
 yarn
 ## 启动 Demo
@@ -117,9 +121,9 @@ yarn dev
 
 启动成功之后，可在浏览器中打开 `http://localhost:8888` 查看效果，请将浏览器的开发者工具切换为移动端模式。
 
-可对 `packages/stdf/components` 目录下组件源码进行修改并实时查看修改效果。注意，VS Code 与 WebStorm 都支持在调用组件时直接跳转到组件源码。
+可对 `packages/stdf/src/lib/components` 目录下组件源码进行修改并实时查看修改效果。注意，VS Code 与 WebStorm 都支持在调用组件时直接跳转到组件源码。
 
-如果不想本地开发，可以选择使用 StackBlitz 在线简单调试。直接打开 [STDF Demo](https://stackblitz.com/github/any-tdf/demo-stdf) 即可开始在线调试。
+如果不想本地开发，可以选择使用 StackBlitz 在线简单调试。直接打开 [NextSTDF Demo](https://stackblitz.com/github/any-tdf/next-demo-stdf) 即可开始在线调试。
 
 ## 提交 PR
 
@@ -132,11 +136,9 @@ yarn dev
 
 - 请先 fork 一份 [STDF](https://github.com/any-tdf/stdf) 代码到自己的仓库，如果已经 fork 过，请同步主仓库的最新代码。
 - 克隆你的仓库至本地。
-- 修改组件源码并在 Demo 中验证通过。
-- 「可选」补充此次修改的中英文档中，文档位于 `doc/components` 目录下。根据具体修改内容可能需要修改 api、FAQ、guide、version 等文档。对 version 的修改请增加 tag，具体参考 [STDF Version tag](https://github.com/any-tdf/stdf/blob/main/doc/components/button/version.md?plain=1)。
-- 到仓库根目录，执行 `pnpm i` 或 `npm i` 或 `bun i` 安装依赖。
-- 利用编辑器格式化你修改过的代码，或者执行 `pnpm run format` 或 `npm run format` 命令行格式化代码。
-- 执行 `pnpm run lint` 或 `npm run lint` 检查代码格式。
+- 修改组件源码并验证通过。
+- 「可选」补充此次修改的中英文档中，文档位于 `docs/mds/components` 目录下。根据具体修改内容可能需要修改 api、FAQ、guide、version 等文档。对 version 的修改请增加 tag，具体参考 [STDF Version tag](https://github.com/any-tdf/stdf/blob/next/docs/mds/components/button/version.md?plain=1)。
+- 到仓库 `packages/stdf` 目录，执行 `pnpm i` 或 `npm i` 或 `bun i` 安装依赖。
 - 提交修改内容至你的仓库，然后提 Pull Request 到主仓库。
 - Pull Request 会在 Review 通过后被合并到主仓库，后续发布新版。
 

docs/mds/guide/contribution_en.md

@@ -2,37 +2,40 @@
 
 Thank you for using STDF.
 
-Below are guidelines for submitting feedback or code to STDF. Before submitting an issue or PR to STDF, please take a few minutes to read the following.
+Below are guidelines for submitting feedback or code to STDF. Please take a few minutes to read through this content before submitting an issue or PR to STDF.
 
 ## Issue Guidelines
 
-- When encountering an issue, please first confirm whether the issue has already been recorded in the issue or has been fixed.
-- When submitting an issue, please describe the issue briefly in language and add the environment and replication steps when the issue occurs.
+- When encountering a problem, please first confirm whether this issue has already been recorded or fixed in existing issues.
+- When submitting an issue, please use concise language to describe the problem encountered, and include the environment and steps to reproduce the issue.
 
 ## Local Development
 
-Before local development, please make sure that [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en) or [Bun](https://bun.sh) are installed in your development environment.
+Before starting local development, please ensure your development environment has [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en) or [Bun](https://bun.sh) installed.
 
-Debugging STDF requires an engineering environment. For this purpose, a simple Demo project is provided. STDF itself is not limited by the Node version, and the Demo uses Vite for development, so please ensure that your Node.js version >= 14.18+, refer to the [Vite official website](https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project).
+Debugging STDF requires a project environment, for which we provide a simple Demo project. STDF itself is not restricted by Node version, but since the Demo uses Vite for development, please ensure your Node.js version is >= 14.18+, refer to [Vite official website](https://vitejs.dev/guide/#scaffolding-your-first-vite-project).
 
-Before submitting a PR after you have made code modifications, please ensure that you have formatted the code and passed the code formatting check. You can install relevant editor plugins or use the command line for code formatting.
+After modifying the code and before submitting a PR, please ensure the code is formatted and passes code format checks. You can install relevant editor plugins or format through the command line.
 
 Recommended installations:
 
-- [pnpm](https://pnpm.io): Package management tool, no need to install when using Bun.
+- [pnpm](https://pnpm.io): Package management tool, not needed when using Bun.
 - [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) or [Svelte](https://plugins.jetbrains.com/plugin/12375-svelte): Svelte development plugin.
-- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) or [WebStorm integration](https://www.jetbrains.com/help/webstorm/tailwind-css.html): Tailwind CSS development plugin.
-- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) or [WebStorm integration](https://www.jetbrains.com/help/webstorm/eslint.html): Code formatting check plugin.
-- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) or [WebStorm integration](https://www.jetbrains.com/help/webstorm/prettier.html): Code formatting plugin.
+- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) or [WebStorm Integration](https://www.jetbrains.com/help/webstorm/tailwind-css.html): Tailwind CSS development plugin.
+- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) or [WebStorm Integration](https://www.jetbrains.com/help/webstorm/eslint.html): Code format checking plugin.
+- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) or [WebStorm Integration](https://www.jetbrains.com/help/webstorm/prettier.html): Code formatting plugin.
 
-> Because the rollup-plugin-stdf-icon packages that the demo depends on are locally built, please build this packages first.
+Follow the steps below to quickly start STDF Demo locally.
+<!-- main -> next -->
+> Because the rollup-plugin-stdf-icon package that the Demo depends on is built locally, please build this package first.
 
 <!-- :::code-groups -->
 <!-- pnpm -->
 ```sh
-## 1. Clone the STDF repository and enter
+## 1. Clone the STDF repository and switch to the next branch
 git clone git@github.com:any-tdf/stdf.git
 cd stdf
+git checkout next
 
 ## 2. Build the rollup-plugin-stdf-icon package
 cd packages/rollup-plugin-stdf-icon
@@ -41,8 +44,8 @@ pnpm i
 ## Build package
 pnpm build
 
-## 3. Use the Demo project to debug STDF
-cd demo
+## 3. Debug STDF
+cd packages/stdf
 ## Install dependencies
 pnpm i
 ## Start Demo
@@ -51,9 +54,10 @@ pnpm dev
 <!-- :: -->
 <!-- npm -->
 ```sh
-## 1. Clone the STDF repository and enter
+## 1. Clone the STDF repository and switch to the next branch
 git clone git@github.com:any-tdf/stdf.git
 cd stdf
+git checkout next
 
 ## 2. Build the rollup-plugin-stdf-icon package
 cd packages/rollup-plugin-stdf-icon
@@ -62,8 +66,8 @@ npm i
 ## Build package
 npm run build
 
-## 3. Use the Demo project to debug STDF
-cd demo
+## 3. 调试 STDF
+cd packages/stdf
 ## Install dependencies
 npm i
 ## Start Demo
@@ -72,9 +76,10 @@ npm run dev
 <!-- :: -->
 <!-- bun -->
 ```sh
-## 1. Clone the STDF repository and enter
+## 1. Clone the STDF repository and switch to the next branch
 git clone git@github.com:any-tdf/stdf.git
 cd stdf
+git checkout next
 
 ## 2. Build the rollup-plugin-stdf-icon package
 cd packages/rollup-plugin-stdf-icon
@@ -83,8 +88,8 @@ bun i
 ## Build package
 bun build
 
-## 3. Use the Demo project to debug STDF
-cd demo
+## 3. Debug STDF
+cd packages/stdf
 ## Install dependencies
 bun i
 ## Start Demo
@@ -93,9 +98,10 @@ bun dev
 <!-- :: -->
 <!-- yarn -->
 ```sh
-## 1. Clone the STDF repository and enter
+## 1. Clone the STDF repository and switch to the next branch
 git clone git@github.com:any-tdf/stdf.git
 cd stdf
+git checkout next
 
 ## 2. Build the rollup-plugin-stdf-icon package
 cd packages/rollup-plugin-stdf-icon
@@ -104,44 +110,42 @@ yarn
 ## Build package
 yarn build
 
-## 3. Use the Demo project to debug STDF
-cd demo
+## 3. Debug STDF
+cd packages/stdf
 ## Install dependencies
 yarn
 ## Start Demo
 yarn dev
 ```
 <!-- ::: -->
 
-After the startup is successful, you can open `http://localhost:8888` in the browser to view the effect. Please switch the developer tools of the browser to the mobile mode.
+After starting successfully, you can view the effect in the browser by opening `http://localhost:8888`, please switch the developer tools of the browser to the mobile mode.
 
-You can modify the component source code under the `packages/stdf/components` directory and view the modification effect in real-time. Note that both VS Code and WebStorm support directly jumping to the component source code when calling the component.
+You can modify the component source code in the `packages/stdf/src/lib/components` directory and view the modification effect in real time. Note that VS Code and WebStorm both support jumping to the component source code when calling the component.
 
-If you don't want to develop locally, you can choose to use StackBlitz to debug online. Just open [STDF Demo](https://stackblitz.com/github/any-tdf/demo-stdf?startScript=dev_en) to start online debugging.
+If you don't want to develop locally, you can choose to use StackBlitz for online simple debugging. Simply open [NextSTDF Demo](https://stackblitz.com/github/any-tdf/next-demo-stdf) to start online debugging.
 
-## Submitting PR
+## Submit PR
 
-If you are submitting a Pull Request on GitHub for the first time, you can read the following two articles to learn:
+If you are submitting your first Pull Request on GitHub, you can read the following two articles to learn:
 
-- [First Contributions](https://github.com/firstcontributions/first-contributions/blob/main/translations/README.zh-cn.md)
-- [How to contribute code elegantly on GitHub](https://segmentfault.com/a/1190000000736629)
+- [First Contribution to Open Source](https://github.com/firstcontributions/first-contributions/blob/main/translations/README.zh-cn.md)
+- [如何优雅地在 GitHub 上贡献代码](https://segmentfault.com/a/1190000000736629)
 
 ### Process
 
-- Please fork a copy of [STDF](https://github.com/any-tdf/stdf) to your own repository. If you have already forked, please synchronize the latest code from the main repository.
+- Please first fork a [STDF](https://github.com/any-tdf/stdf) repository to your own repository, if you have already forked it, please sync the latest code from the main repository.
 - Clone your repository to your local machine.
-- Modify the component source code and verify it in the Demo.
-- 「Optional」Supplement the Chinese and English documentation for this modification, which is located in the `doc/components` directory. Depending on the specific modification content, you may need to modify the api, FAQ, guide, version, and other documents. For modifications to version, please add tags. Please refer to the [STDF Version tag](https://github.com/any-tdf/stdf/blob/main/doc/components/button/version.md?plain=1) for specific details.
-- Go to the root directory of the repository and execute `pnpm i` or `npm i` or `bun i` to install dependencies.
-- Use your editor to format the modified code or execute `pnpm run format` or `npm run format` in the command line to format the code.
-- Execute `pnpm run lint` or `npm run lint` to check the code formatting.
-- Commit the modified content to your repository and then submit a Pull Request to the main repository.
-- The Pull Request will be merged into the main repository after it passes the review and a new version will be released subsequently.
+- Modify the component source code and verify it.
+- (Optional) Supplement the Chinese and English documentation of this modification, the documentation is located in the `docs/mds/components` directory. Depending on the specific modification content, you may need to modify the api, FAQ, guide, version, etc. documents. For the modification of the version, please add the tag, refer to [STDF Version tag](https://github.com/any-tdf/stdf/blob/next/docs/mds/components/button/version.md?plain=1).
+- Go to the `packages/stdf` directory, execute `pnpm i` or `npm i` or `bun i` to install dependencies.
+- Submit the modified content to your repository, then submit a Pull Request to the main repository.
+- Pull Request will be merged into the main repository after being reviewed, and a new version will be released.
 
 ### Notes
 
-When submitting a Pull Request, please note:
+When submitting a Pull Request, please note the following:
 
-- Keep your PR small enough, generally one PR only solves a single component file, solves a single problem, or adds a single function, to facilitate review.
-- When adding or modifying existing components, remember to verify it in the Demo to ensure the stability of the code.
-- Please add a suitable description in the PR. If there is a related issue, please indicate it.
+- Keep your PR small, generally one PR solves a single component file, solves a single problem, or adds a single function, so that it is easier to review.
+- When adding a new component or modifying an existing component, remember to verify it in the Demo to ensure the stability of the code.
+- Please add a suitable description in the PR, if there is an associated Issue, please note it.

docs/mds/guide/faq.md

@@ -1,3 +1,7 @@
+## 问：为什么已经完整支持 Svelte 5 了却还是 next 版本？
+
+答：因为当前时间点 Tailwind CSS v4 只是发布了 Beta 版本，正式版还未发布，STDF 将等待 Tailwind CSS v4 正式版发布后，迅速适配，届时将发布 v1.0.0 正式版。
+
 ## 问：为什么没有栅格组件？
 
 答：直接使用 CSS 的 Flexbox 特性，已经可以很方便快速地实现栅格布局，不再需要为了实现栅格布局而引入额外的组件，而且使用 Tailwind CSS 书写会非常简洁。

docs/mds/guide/faq_en.md

@@ -1,3 +1,7 @@
+## Q: Why is it still next version even though Svelte 5 is fully supported?
+
+A: Because Tailwind CSS v4 is just released the Beta version at the current time point, the official version has not been released yet. STDF will wait for Tailwind CSS v4 official release, quickly adapt, and release v1.0.0 official version when ready.
+
 ## Q: Why isn't there a rasterization component?
 
 A: Using CSS Flexbox directly can easily and quickly achieve rasterization layout. There is no need to introduce additional components to achieve rasterization layout. Moreover, using Tailwind CSS to write will be very concise.

docs/mds/guide/future.md

@@ -8,6 +8,9 @@
 - [x] 新增 NumKeyboard-数字键盘组件，一般用于输入数字。
 - [x] 新增 Pagination-分页组件。
 - [x] 新增 Stepper-步进器组件。
+- [x] 完整支持 Svelte 5。
+- [x] 完整支持 TypeScript。
+- [ ] 适配 Tailwind CSS v4。
 
 ---
 

docs/mds/guide/future_en.md

@@ -8,6 +8,9 @@
 - [x] Add NumKeyboard component, which is generally used for entering numbers.
 - [x] Added Pagination component.
 - [x] Added Stepper component.
+- [x] Complete support for Svelte 5.
+- [x] Complete support for TypeScript.
+- [ ] Adapt to Tailwind CSS v4.
 
 ---
 

docs/mds/guide/icon.md

@@ -52,4 +52,4 @@ STDF 部分组件内使用的图标源自 [Remix Icon 图标库](https://remixic
 | ri-error-warning-line         | Toast            |
 | ri-information-line           | Toast            |
 
-可到 `node_modules/stdf/assets/svg_base/` 查看这些图标的 SVG 源文件。
+可到 `node_modules/stdf/dist/assets/svg_base/` 查看这些图标的 SVG 源文件。