open-index/open-npm huggingface dataset:
npm package: @sunyard-szyy-ui/components
Description: > Vue 3 组件库 - sunyard-szyy-ui 的核心组件包
Latest version: 0.4.0

# @sunyard-szyy-ui/components

> Vue 3 组件库 - sunyard-szyy-ui 的核心组件包

## 📦 安装

```bash
# 推荐使用主包
npm install sunyard-szyy-ui

# 或者单独安装（不推荐）
npm install @sunyard-szyy-ui/components
```

## 📚 组件列表

### SySearchBar - 搜索栏组件

企业级搜索输入框组件。

**特性：**

- ✅ 支持 v-model 双向绑定
- ✅ 支持 Enter 键触发搜索
- ✅ 支持自定义按钮文本
- ✅ 完整的 TypeScript 类型支持

**使用示例：**

```vue
<template>
  <SySearchBar v-model="keyword" placeholder="请输入搜索关键词" @search="handleSearch" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { SySearchBar } from '@sunyard-szyy-ui/components';

const keyword = ref('');

const handleSearch = (value: string) => {
  console.log('搜索:', value);
};
</script>
```

## 🎯 使用方式

### 方式一：从主包导入（推荐）

```typescript
import { SySearchBar } from 'sunyard-szyy-ui';
```

### 方式二：从组件包导入

```typescript
import { SySearchBar } from '@sunyard-szyy-ui/components';
```

### 方式三：按需导入

```typescript
import { SySearchBar } from '@sunyard-szyy-ui/components/search-bar';
```

## 🎨 样式导入

组件依赖 Element Plus 和主题样式：

```typescript
// 全量引入
import 'element-plus/dist/index.css';
import 'sunyard-szyy-ui/theme-chalk/index.css';

// 按需引入（推荐）
// 使用 unplugin-vue-components 自动导入
```

## 📖 API 文档

详细的 API 文档请查看：[组件 API 文档](../../docs/core/components/SySearchBar.md)

## 🔧 开发

```bash
# 安装依赖
pnpm install

# 类型检查
pnpm typecheck

# 构建
pnpm build

# 清理构建产物
pnpm clean
```

## 📦 构建产物

```
@sunyard-szyy-ui/components/
├── es/                   # ESM 格式
│   ├── index.mjs
│   ├── index.d.ts
│   └── components/
│       └── search-bar/
│           ├── index.mjs
│           ├── index.d.ts
│           └── style/
│               ├── css.mjs       # CSS 样式导入
│               └── index.mjs     # SCSS 样式导入
└── lib/                  # CJS 格式
    ├── index.js
    ├── index.d.ts
    └── components/
        └── search-bar/
            ├── index.js
            └── style/
```

## 🤝 依赖

- `@sunyard-szyy-ui/hooks` - Composition API Hooks
- `@sunyard-szyy-ui/utils` - 工具函数
- `element-plus` (peer) - UI 基础库
- `vue` (peer) - Vue 3 框架

## 📝 注意事项

1. **TypeScript 支持**：所有组件都有完整的类型定义
2. **样式按需加载**：使用 `unplugin-vue-components` 可自动按需导入样式
3. **Tree-shaking**：支持 ES Module，自动 tree-shaking
4. **BEM 命名**：样式遵循 BEM 命名规范，前缀为 `sy-`
npm package: @sunyard-szyy-ui/hooks
Description: > Composition API Hooks - Vue 3 组合式 API 工具集
Latest version: 0.4.0

# @sunyard-szyy-ui/hooks

> Composition API Hooks - Vue 3 组合式 API 工具集

## 📦 安装

```bash
# 推荐使用主包
npm install sunyard-szyy-ui

# 或者单独安装
npm install @sunyard-szyy-ui/hooks
```

## 🎣 Hooks 列表

### useNamespace

BEM 命名空间工具，用于生成标准的 CSS 类名。

**特性：**

- ✅ 支持 BEM 命名规范
- ✅ 自动添加前缀（默认 `sy-`）
- ✅ 类型安全

**使用示例：**

```typescript
import { useNamespace } from '@sunyard-szyy-ui/hooks';

const ns = useNamespace('button');

// Block
ns.b(); // 'sy-button'

// Element
ns.e('icon'); // 'sy-button__icon'

// Modifier
ns.m('primary'); // 'sy-button--primary'

// Block + Modifier
ns.bm('large'); // 'sy-button sy-button--large'

// Element + Modifier
ns.em('icon', 'disabled'); // 'sy-button__icon sy-button__icon--disabled'

// 状态
ns.is('active'); // 'is-active'
ns.is('disabled', true); // 'is-disabled'
```

### useDebounce

防抖 Hook，用于防抖响应式值。

**特性：**

- ✅ 响应式防抖
- ✅ 自动清理定时器
- ✅ 支持自定义延迟

**使用示例：**

```typescript
import { ref } from 'vue';
import { useDebounce } from '@sunyard-szyy-ui/hooks';

const input = ref('');
const debouncedInput = useDebounce(input, 500);

// input 变化后，debouncedInput 会在 500ms 后更新
watch(debouncedInput, value => {
  console.log('防抖后的值:', value);
});
```

## 🎯 使用方式

### 方式一：从主包导入（推荐）

```typescript
import { useNamespace, useDebounce } from 'sunyard-szyy-ui';
```

### 方式二：从 Hooks 包导入

```typescript
import { useNamespace, useDebounce } from '@sunyard-szyy-ui/hooks';
```

### 方式三：直接从文件导入

```typescript
import { useNamespace } from '@sunyard-szyy-ui/hooks/use-namespace';
```

## 📖 完整 API

| Hook           | 说明         | 参数                           | 返回值           |
| -------------- | ------------ | ------------------------------ | ---------------- |
| `useNamespace` | BEM 命名工具 | `block: string`                | 命名空间方法对象 |
| `useDebounce`  | 防抖值       | `value: Ref<T>, delay: number` | `Ref<T>`         |

## 🔧 开发

```bash
# 安装依赖
pnpm install

# 类型检查
pnpm typecheck

# 构建
pnpm build

# 清理构建产物
pnpm clean
```

## 📦 构建产物

```
@sunyard-szyy-ui/hooks/
└── dist/
    ├── index.js        # ESM 格式
    ├── index.cjs       # CJS 格式
    ├── index.d.ts      # TypeScript 类型定义
    └── index.d.cts     # CJS 类型定义
```

## 🤝 依赖

- `@sunyard-szyy-ui/utils` - 工具函数
- `vue` (peer) - Vue 3 框架

## 📝 注意事项

1. **Vue 3 专用**：所有 Hooks 基于 Vue 3 Composition API
2. **自动清理**：Hooks 会在组件卸载时自动清理副作用
3. **类型安全**：完整的 TypeScript 类型支持
4. **Tree-shaking**：支持按需导入，减少打包体积

## 💡 最佳实践

### 1. 在 setup 中使用

```typescript
export default defineComponent({
  setup() {
    const ns = useNamespace('my-component');
    const debouncedValue = useDebounce(inputValue, 300);

    return { ns, debouncedValue };
  }
});
```

### 2. 结合响应式 API

```typescript
const input = ref('');
const debouncedInput = useDebounce(input, 500);

watchEffect(() => {
  // 在这里使用防抖后的值
  console.log(debouncedInput.value);
});
```

### 3. 组合多个 Hooks

```typescript
const ns = useNamespace('form');
```
npm package: @sunyard-szyy-ui/theme-chalk
Description: sunyard-szyy-ui 组件库的样式主题包，基于 Element Plus 主题定制。
Latest version: 0.4.0

# @sunyard-szyy-ui/theme-chalk

sunyard-szyy-ui 组件库的样式主题包，基于 Element Plus 主题定制。