@wc-kit/core 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +56 -0
- package/dist/index.cjs.js +871 -277
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +309 -16
- package/dist/index.es.js +3737 -1603
- package/dist/index.es.js.map +1 -1
- package/package.json +26 -10
- package/src/tokens/tokens.css +1 -0
package/README.md
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
# @wc-kit/core
|
|
2
|
+
|
|
3
|
+
基于 [Lit 3](https://lit.dev) 的框架无关 Web Components 组件库。38 个组件、完整设计令牌体系、暗色模式与 i18n 开箱即用，可在原生 HTML / React / Vue 等任何环境中使用。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @wc-kit/core
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 快速上手
|
|
12
|
+
|
|
13
|
+
```html
|
|
14
|
+
<!-- 引入组件（副作用导入，注册全部 <wc-*> 自定义元素） -->
|
|
15
|
+
<script type="module">
|
|
16
|
+
import '@wc-kit/core';
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<!-- 设计令牌 + 全局基础样式 -->
|
|
20
|
+
<link rel="stylesheet" href="node_modules/@wc-kit/core/tokens.css" />
|
|
21
|
+
<link rel="stylesheet" href="node_modules/@wc-kit/core/reset.css" />
|
|
22
|
+
|
|
23
|
+
<wc-button theme="primary" @click="console.log('clicked')">主要按钮</wc-button>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
ESM / 打包器环境：
|
|
27
|
+
|
|
28
|
+
```js
|
|
29
|
+
import '@wc-kit/core';
|
|
30
|
+
import '@wc-kit/core/tokens.css';
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## 特性
|
|
34
|
+
|
|
35
|
+
- **38 个组件**：基础 / 表单 / 反馈 / 导航 / 数据展示五大类
|
|
36
|
+
- **设计令牌**：三层令牌体系（primitive → semantic → component），全部 `--wc-*` 前缀，仅改 CSS 变量即可换肤
|
|
37
|
+
- **暗色模式**：`setTheme('dark')` 或跟随系统，令牌自动切换
|
|
38
|
+
- **框架友好**：自定义事件全部 `wc-` 前缀 + `composed: true`；配套 [`@wc-kit/react`](https://www.npmjs.com/package/@wc-kit/react) 与 [`@wc-kit/vue`](https://www.npmjs.com/package/@wc-kit/vue) 适配包
|
|
39
|
+
- **i18n**：内置 zh-CN / en-US，LocalizeController 支持扩展语言包
|
|
40
|
+
- **图标体系**：22 个内置图标 + `registerIcon` / `registerIconLibrary` 自定义注册
|
|
41
|
+
|
|
42
|
+
## 框架适配
|
|
43
|
+
|
|
44
|
+
| 框架 | 包 | 说明 |
|
|
45
|
+
| ----------- | -------------------------------------------------------------- | ------------------------------------------------ |
|
|
46
|
+
| React 18/19 | [`@wc-kit/react`](https://www.npmjs.com/package/@wc-kit/react) | @lit/react 包装，事件映射为 `onWc*` props |
|
|
47
|
+
| Vue 3 | [`@wc-kit/vue`](https://www.npmjs.com/package/@wc-kit/vue) | GlobalComponents 模板类型检查 + v-model 适配说明 |
|
|
48
|
+
| 原生 HTML | 本包 | 直接使用，无需任何适配层 |
|
|
49
|
+
|
|
50
|
+
## 文档
|
|
51
|
+
|
|
52
|
+
组件文档与交互式示例：见仓库 [apps/website](https://github.com/xianmua/wui/tree/main/apps/website)。
|
|
53
|
+
|
|
54
|
+
## License
|
|
55
|
+
|
|
56
|
+
MIT
|