@creatorsn/vfluent3 0.3.40 → 0.3.45

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Creator SN
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,104 +1,129 @@
-<p align="center">
-  <img src="https://raw.githubusercontent.com/aleversn/VFluent/master/examples/assert/logo/VFluent.png"/>
-</div>
-
-<p align="center">
-    <a href="LICENSE">
-      <img src="https://img.shields.io/badge/License-MIT-yellow.svg">
-    </a>
-    <a href="">
-      <img src="https://img.shields.io/npm/dw/@creatorsn/vfluent3">
-    </a>
-</p>
-
-## Fluent UI Components based on Vite
-
-This repository provides a library of components based on [Microsoft's Fluent Design System](https://developer.microsoft.com/en-us/fluentui#/). We did our best to implement styling (such as the `Acrylic` and `Reveal` effects) of native system's (Windows 11/Windows 10) components on the Web.
-
-### Fluent Design UI (Vue 3)
-
-#### DOCS
-
-[https://creator-sn.github.io/VFluent3/](https://creator-sn.github.io/VFluent3/)
-
-#### How to use
-
-``` sh
-yarn add @creatorsn/vfluent3
-```
-
-#### Dev
-
-1. download node and yarn   
-    [node](https://nodejs.org/en/)
-    [pnpm](https://pnpm.io/)
-2. install dependencies  
-   ```sh
-    yarn
-   ```
-3. create new component
-   ``` sh
-    yarn bin:new
-   ```
-4. develop with vitepress
-   ``` sh
-    yarn docs:dev
-   ``` 
-
-#### How to commit 
-
-1. create czrc(home directory)(!!!important)
-``` bash
-echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc
-```
-
-2. run command
-``` bash
-yarn cz
-```
-
-#### About Fabric UI
-
-Our project have many using cases contains Microsoft's Fabric UI, such as icons and shadows, for more details you can click <a href="https://developer.microsoft.com/en-us/fabric#/styles">here</a> to get more information.
-
-Here is the icon using sample.
-
-```vue
-<i class="ms-Icon ms-Icon--AADLogo"></i>
-```
-
-In particular, if you're using a component of Fluent Vue Design and it contains a prop that support icon, you only need to type the icon's name in prop.
-
-**We have updated the new Windows 11 Fluent Icons, Check the Icon Dictionary on <a href="https://docs.microsoft.com/en-us/windows/apps/design/style/segoe-fluent-icons-font">here</a>.**
-
-### ✨ We Need You (Become a contributor) ✨
-
-VFluent still needs to improve. The documentation is not yet complete, there are still some details to work out.
-
-We want to hear from your issues and suggestions. It's welcome to have you become a contributor in this project. You could add some new components to VFluent, or update the existing components to better support the mobile end.
-
-If you have some other creative ideas, we're happy to hear them from you.
-
-### License
-
-MIT License
-
-Copyright (c) 2025 Creator SN®
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+<div align="center">
+  <img src="https://raw.githubusercontent.com/aleversn/VFluent/master/examples/assert/logo/VFluent.png" width="360" alt="VFluent3 Logo" />
+
+[![Vue](https://img.shields.io/badge/Vue-3.x-42b883?style=flat-square&logo=vue.js&logoColor=white)](https://vuejs.org/)
+[![Vite](https://img.shields.io/badge/Vite-3.x-646CFF?style=flat-square&logo=vite&logoColor=white)](https://vitejs.dev/)
+[![NPM](https://img.shields.io/npm/v/@creatorsn/vfluent3?style=flat-square&color=2F80ED&logo=npm&logoColor=white)](https://www.npmjs.com/package/@creatorsn/vfluent3)
+[![Downloads](https://img.shields.io/npm/dw/@creatorsn/vfluent3?style=flat-square&color=green)](https://www.npmjs.com/package/@creatorsn/vfluent3)
+[![License](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](./LICENSE)
+
+</div>
+
+<h4 align="center">
+  <i>Fluent Design components for Vue 3, built for crisp Windows-like web experiences.</i>
+</h4>
+
+<p align="center">
+  <a href="https://creator-sn.github.io/VFluent3/">Documentation</a>
+  ·
+  <a href="https://www.npmjs.com/package/@creatorsn/vfluent3">npm</a>
+  ·
+  <a href="https://github.com/Creator-SN/VFluent3/issues">Issues</a>
+</p>
+
+English | [简体中文](./README_zh.md)
+
+## VFluent3
+
+VFluent3 is a Vue 3 component library inspired by Microsoft's [Fluent Design System](https://developer.microsoft.com/en-us/fluentui#/). It brings Fluent-style components, icons, shadows, Acrylic-like surfaces, and Reveal interactions into modern Vue applications.
+
+The project is powered by Vite and focuses on making desktop-inspired web interfaces feel clean, responsive, and delightful.
+
+## Installation
+
+Install the package with Yarn:
+
+```sh
+yarn add @creatorsn/vfluent3
+```
+
+npm and pnpm work in a similar way.
+
+## Quick Start
+
+Register VFluent3 in your Vue entry file, usually `main.js`:
+
+```js
+import { createApp } from 'vue';
+import VueFluent from "@creatorsn/vfluent3";
+import '@creatorsn/vfluent3/style.css';
+import App from './App.vue';
+
+const app = createApp(App);
+app.use(VueFluent);
+app.mount('#app');
+```
+
+Then use components in your Vue app:
+
+```vue
+<template>
+  <fv-button>Create something fluent</fv-button>
+</template>
+```
+
+## Documentation
+
+Read the full documentation and component examples:
+
+[https://creator-sn.github.io/VFluent3/](https://creator-sn.github.io/VFluent3/)
+
+## Development
+
+Clone the repository and install dependencies:
+
+```sh
+yarn
+```
+
+Start the VitePress documentation site:
+
+```sh
+yarn docs:dev
+```
+
+Create a new component scaffold:
+
+```sh
+yarn bin:new
+```
+
+Build the library:
+
+```sh
+yarn build
+```
+
+## Contributing
+
+VFluent3 is still growing, and contributions are welcome.
+
+If you have ideas, feedback, bug reports, or design suggestions, please open an [issue](https://github.com/Creator-SN/VFluent3/issues). If you want to contribute a fix or improvement, please submit a pull request.
+
+For commit messages, this project supports Commitizen:
+
+```sh
+yarn cz
+```
+
+## Fluent Icons
+
+VFluent3 uses Microsoft Fabric UI and Fluent icon resources in several places, including icons and shadows.
+
+Basic icon usage:
+
+```vue
+<i class="ms-Icon ms-Icon--AADLogo"></i>
+```
+
+When a VFluent3 component supports an icon prop, you can usually pass the icon name directly.
+
+Windows 11 Fluent Icons reference:
+
+[https://learn.microsoft.com/en-us/windows/apps/design/style/segoe-fluent-icons-font](https://learn.microsoft.com/en-us/windows/apps/design/style/segoe-fluent-icons-font)
+
+## License
+
+VFluent3 is released under the [MIT License](./LICENSE).
+
+Copyright (c) 2026 Creator SN

package/README_zh.md

@@ -0,0 +1,129 @@
+<div align="center">
+  <img src="https://raw.githubusercontent.com/aleversn/VFluent/master/examples/assert/logo/VFluent.png" width="360" alt="VFluent3 Logo" />
+
+[![Vue](https://img.shields.io/badge/Vue-3.x-42b883?style=flat-square&logo=vue.js&logoColor=white)](https://vuejs.org/)
+[![Vite](https://img.shields.io/badge/Vite-3.x-646CFF?style=flat-square&logo=vite&logoColor=white)](https://vitejs.dev/)
+[![NPM](https://img.shields.io/npm/v/@creatorsn/vfluent3?style=flat-square&color=2F80ED&logo=npm&logoColor=white)](https://www.npmjs.com/package/@creatorsn/vfluent3)
+[![Downloads](https://img.shields.io/npm/dw/@creatorsn/vfluent3?style=flat-square&color=green)](https://www.npmjs.com/package/@creatorsn/vfluent3)
+[![License](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](./LICENSE)
+
+</div>
+
+<h4 align="center">
+  <i>为 Vue 3 打造的 Fluent Design 组件库，让 Web 界面更接近清爽、细腻的 Windows 体验。</i>
+</h4>
+
+<p align="center">
+  <a href="https://creator-sn.github.io/VFluent3/">文档</a>
+  ·
+  <a href="https://www.npmjs.com/package/@creatorsn/vfluent3">npm</a>
+  ·
+  <a href="https://github.com/Creator-SN/VFluent3/issues">Issues</a>
+</p>
+
+[English](./README.md) | 简体中文
+
+## VFluent3
+
+VFluent3 是一个受 Microsoft [Fluent Design System](https://developer.microsoft.com/en-us/fluentui#/) 启发的 Vue 3 组件库。它为现代 Vue 应用提供 Fluent 风格组件、图标、阴影、类 Acrylic 表面以及 Reveal 交互效果。
+
+项目基于 Vite 构建，目标是让桌面风格的 Web 界面更清晰、更响应式，也更有质感。
+
+## 安装
+
+使用 Yarn 安装：
+
+```sh
+yarn add @creatorsn/vfluent3
+```
+
+npm 和 pnpm 的操作类似。
+
+## 快速开始
+
+在 Vue 入口文件中注册 VFluent3，通常是 `main.js`：
+
+```js
+import { createApp } from 'vue';
+import VueFluent from "@creatorsn/vfluent3";
+import '@creatorsn/vfluent3/style.css';
+import App from './App.vue';
+
+const app = createApp(App);
+app.use(VueFluent);
+app.mount('#app');
+```
+
+然后就可以在 Vue 中使用组件：
+
+```vue
+<template>
+  <fv-button>创建一个 Fluent 界面</fv-button>
+</template>
+```
+
+## 文档
+
+完整文档与组件示例：
+
+[https://creator-sn.github.io/VFluent3/](https://creator-sn.github.io/VFluent3/)
+
+## 本地开发
+
+克隆仓库后安装依赖：
+
+```sh
+yarn
+```
+
+启动 VitePress 文档站点：
+
+```sh
+yarn docs:dev
+```
+
+创建新的组件模板：
+
+```sh
+yarn bin:new
+```
+
+构建组件库：
+
+```sh
+yarn build
+```
+
+## 参与贡献
+
+VFluent3 仍在持续完善中，欢迎一起让它变得更好。
+
+如果你有想法、建议、问题反馈或设计意见，可以提交 [issue](https://github.com/Creator-SN/VFluent3/issues)。如果你愿意贡献修复或改进，请提交 pull request。
+
+项目支持使用 Commitizen 生成提交信息：
+
+```sh
+yarn cz
+```
+
+## Fluent 图标
+
+VFluent3 在多个场景中使用了 Microsoft Fabric UI 与 Fluent 图标资源，包括图标与阴影等视觉能力。
+
+基础图标用法：
+
+```vue
+<i class="ms-Icon ms-Icon--AADLogo"></i>
+```
+
+当 VFluent3 组件的某个 prop 支持图标时，通常可以直接传入图标名称。
+
+Windows 11 Fluent Icons 参考：
+
+[https://learn.microsoft.com/en-us/windows/apps/design/style/segoe-fluent-icons-font](https://learn.microsoft.com/en-us/windows/apps/design/style/segoe-fluent-icons-font)
+
+## License
+
+VFluent3 基于 [MIT License](./LICENSE) 开源。
+
+Copyright (c) 2026 Creator SN