@sunyard-szyy-ui/components 0.2.6 → 0.2.8
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
ADDED
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
# @sunyard-szyy-ui/components
|
|
2
|
+
|
|
3
|
+
> Vue 3 组件库 - sunyard-szyy-ui 的核心组件包
|
|
4
|
+
|
|
5
|
+
## 📦 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
# 推荐使用主包
|
|
9
|
+
npm install sunyard-szyy-ui
|
|
10
|
+
|
|
11
|
+
# 或者单独安装(不推荐)
|
|
12
|
+
npm install @sunyard-szyy-ui/components
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## 📚 组件列表
|
|
16
|
+
|
|
17
|
+
### SySearchBar - 搜索栏组件
|
|
18
|
+
|
|
19
|
+
企业级搜索输入框组件。
|
|
20
|
+
|
|
21
|
+
**特性:**
|
|
22
|
+
|
|
23
|
+
- ✅ 支持 v-model 双向绑定
|
|
24
|
+
- ✅ 支持 Enter 键触发搜索
|
|
25
|
+
- ✅ 支持自定义按钮文本
|
|
26
|
+
- ✅ 完整的 TypeScript 类型支持
|
|
27
|
+
|
|
28
|
+
**使用示例:**
|
|
29
|
+
|
|
30
|
+
```vue
|
|
31
|
+
<template>
|
|
32
|
+
<SySearchBar v-model="keyword" placeholder="请输入搜索关键词" @search="handleSearch" />
|
|
33
|
+
</template>
|
|
34
|
+
|
|
35
|
+
<script setup lang="ts">
|
|
36
|
+
import { ref } from 'vue';
|
|
37
|
+
import { SySearchBar } from '@sunyard-szyy-ui/components';
|
|
38
|
+
|
|
39
|
+
const keyword = ref('');
|
|
40
|
+
|
|
41
|
+
const handleSearch = (value: string) => {
|
|
42
|
+
console.log('搜索:', value);
|
|
43
|
+
};
|
|
44
|
+
</script>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## 🎯 使用方式
|
|
48
|
+
|
|
49
|
+
### 方式一:从主包导入(推荐)
|
|
50
|
+
|
|
51
|
+
```typescript
|
|
52
|
+
import { SySearchBar } from 'sunyard-szyy-ui';
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### 方式二:从组件包导入
|
|
56
|
+
|
|
57
|
+
```typescript
|
|
58
|
+
import { SySearchBar } from '@sunyard-szyy-ui/components';
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### 方式三:按需导入
|
|
62
|
+
|
|
63
|
+
```typescript
|
|
64
|
+
import { SySearchBar } from '@sunyard-szyy-ui/components/search-bar';
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## 🎨 样式导入
|
|
68
|
+
|
|
69
|
+
组件依赖 Element Plus 和主题样式:
|
|
70
|
+
|
|
71
|
+
```typescript
|
|
72
|
+
// 全量引入
|
|
73
|
+
import 'element-plus/dist/index.css';
|
|
74
|
+
import 'sunyard-szyy-ui/theme-chalk/index.css';
|
|
75
|
+
|
|
76
|
+
// 按需引入(推荐)
|
|
77
|
+
// 使用 unplugin-vue-components 自动导入
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## 📖 API 文档
|
|
81
|
+
|
|
82
|
+
详细的 API 文档请查看:[组件 API 文档](../../docs/api/component-api.md)
|
|
83
|
+
|
|
84
|
+
## 🔧 开发
|
|
85
|
+
|
|
86
|
+
```bash
|
|
87
|
+
# 安装依赖
|
|
88
|
+
pnpm install
|
|
89
|
+
|
|
90
|
+
# 类型检查
|
|
91
|
+
pnpm typecheck
|
|
92
|
+
|
|
93
|
+
# 构建
|
|
94
|
+
pnpm build
|
|
95
|
+
|
|
96
|
+
# 清理构建产物
|
|
97
|
+
pnpm clean
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## 📦 构建产物
|
|
101
|
+
|
|
102
|
+
```
|
|
103
|
+
@sunyard-szyy-ui/components/
|
|
104
|
+
├── es/ # ESM 格式
|
|
105
|
+
│ ├── index.mjs
|
|
106
|
+
│ ├── index.d.ts
|
|
107
|
+
│ └── components/
|
|
108
|
+
│ └── search-bar/
|
|
109
|
+
│ ├── index.mjs
|
|
110
|
+
│ ├── index.d.ts
|
|
111
|
+
│ └── style/
|
|
112
|
+
│ ├── css.mjs # CSS 样式导入
|
|
113
|
+
│ └── index.mjs # SCSS 样式导入
|
|
114
|
+
└── lib/ # CJS 格式
|
|
115
|
+
├── index.js
|
|
116
|
+
├── index.d.ts
|
|
117
|
+
└── components/
|
|
118
|
+
└── search-bar/
|
|
119
|
+
├── index.js
|
|
120
|
+
└── style/
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
## 🤝 依赖
|
|
124
|
+
|
|
125
|
+
- `@sunyard-szyy-ui/hooks` - Composition API Hooks
|
|
126
|
+
- `@sunyard-szyy-ui/utils` - 工具函数
|
|
127
|
+
- `element-plus` (peer) - UI 基础库
|
|
128
|
+
- `vue` (peer) - Vue 3 框架
|
|
129
|
+
|
|
130
|
+
## 📝 注意事项
|
|
131
|
+
|
|
132
|
+
1. **TypeScript 支持**:所有组件都有完整的类型定义
|
|
133
|
+
2. **样式按需加载**:使用 `unplugin-vue-components` 可自动按需导入样式
|
|
134
|
+
3. **Tree-shaking**:支持 ES Module,自动 tree-shaking
|
|
135
|
+
4. **BEM 命名**:样式遵循 BEM 命名规范,前缀为 `sy-`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../../src/search-bar/style/css.ts"],"names":[],"mappings":"AACA,OAAO,6CAA6C,CAAC;AACrD,OAAO,4CAA4C,CAAC;
|
|
1
|
+
{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../../src/search-bar/style/css.ts"],"names":[],"mappings":"AACA,OAAO,6CAA6C,CAAC;AACrD,OAAO,4CAA4C,CAAC;AAKpD,OAAO,4CAA4C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/search-bar/style/index.ts"],"names":[],"mappings":"AAEA,OAAO,6CAA6C,CAAC;AACrD,OAAO,4CAA4C,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/search-bar/style/index.ts"],"names":[],"mappings":"AAEA,OAAO,6CAA6C,CAAC;AACrD,OAAO,4CAA4C,CAAC;AAKpD,OAAO,iDAAiD,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sunyard-szyy-ui/components",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.8",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.mjs",
|
|
@@ -48,8 +48,8 @@
|
|
|
48
48
|
"vue": "^3.0.0"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"@sunyard-szyy-ui/hooks": "0.2.
|
|
52
|
-
"@sunyard-szyy-ui/utils": "0.2.
|
|
51
|
+
"@sunyard-szyy-ui/hooks": "0.2.8",
|
|
52
|
+
"@sunyard-szyy-ui/utils": "0.2.8"
|
|
53
53
|
},
|
|
54
54
|
"publishConfig": {
|
|
55
55
|
"access": "public"
|