idp-base-components-lib 1.0.2

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024 IDP Base Components
+
+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

@@ -0,0 +1,228 @@
+# @idp/idp-base-components
+
+IDP 基础组件库 - 基于 Vue 3 + Element Plus + vxe-table 构建的企业级组件库
+
+[![npm version](https://img.shields.io/npm/v/@idp/idp-base-components.svg)](https://www.npmjs.com/package/@idp/idp-base-components)
+[![license](https://img.shields.io/npm/l/@idp/idp-base-components.svg)](https://github.com/standandcxs/company-component-library/blob/main/LICENSE)
+
+## ✨ 特性
+
+- 🚀 基于 Vue 3 Composition API
+- 💎 基于 Element Plus 设计规范
+- 📦 开箱即用的高质量组件
+- 🎨 支持主题定制
+- 🌍 支持国际化
+- 📱 响应式设计
+- 🔧 TypeScript 支持
+- 📖 详细的文档和示例
+
+## 📦 安装
+
+### npm
+
+```bash
+npm install @idp/idp-base-components
+```
+
+### pnpm
+
+```bash
+pnpm add @idp/idp-base-components
+```
+
+### yarn
+
+```bash
+yarn add @idp/idp-base-components
+```
+
+## 🔨 使用
+
+### 完整引入
+
+```javascript
+import { createApp } from "vue";
+import App from "./App.vue";
+
+// 引入组件库
+import IdpComponents from "@idp/idp-base-components";
+// 引入样式
+import "@idp/idp-base-components/dist/style.css";
+
+const app = createApp(App);
+
+// 全局注册所有组件
+app.use(IdpComponents);
+
+app.mount("#app");
+```
+
+### 按需引入
+
+```vue
+<template>
+  <IdpButton type="primary">按钮</IdpButton>
+  <IdpVTable :config="tableConfig" :data="tableData" />
+</template>
+
+<script setup>
+import {
+  Button as IdpButton,
+  VTable as IdpVTable,
+} from "@idp/idp-base-components";
+import "@idp/idp-base-components/dist/style.css";
+
+const tableConfig = {
+  title: "用户列表",
+  columns: [
+    { type: "seq", width: 60, title: "序号" },
+    { field: "name", title: "姓名", width: 120 },
+    { field: "age", title: "年龄", width: 80 },
+  ],
+};
+
+const tableData = [
+  { name: "张三", age: 25 },
+  { name: "李四", age: 30 },
+];
+</script>
+```
+
+## 📚 组件列表
+
+### 基础组件
+
+| 组件                | 说明                    |
+| ------------------- | ----------------------- |
+| **Button**          | 按钮组件                |
+| **Input**           | 输入框组件              |
+| **Textarea**        | 文本域组件              |
+| **EmailInput**      | 邮箱输入框              |
+| **PhoneInput**      | 手机号输入框            |
+| **LandlineInput**   | 座机号输入框            |
+| **SecureTextInput** | 安全文本输入框          |
+| **Header**          | 页头组件                |
+| **Page**            | 页面容器组件            |
+| **VTable**          | 增强表格组件（⭐ 推荐） |
+| **PascalCase**      | 帕斯卡命名组件          |
+
+### 业务组件
+
+| 组件       | 说明       |
+| ---------- | ---------- |
+| **NavBar** | 导航栏组件 |
+
+## 🌟 核心组件介绍
+
+### VTable - 增强表格组件
+
+功能强大的表格组件，基于 vxe-table 封装。
+
+#### 主要特性
+
+- 🔍 **搜索功能**：支持 input、select、multiSelect、date、dateRange 等多种搜索字段
+- 📊 **自定义列**：用户可自由选择显示/隐藏列，配置可持久化
+- 🎨 **灵活渲染**：支持插槽、render 函数、默认渲染三种方式
+- 📄 **分页支持**：内置分页器
+- ⚙️ **操作列**：预置操作列，支持预览、下载、重命名、删除等操作
+- 🔘 **行外按钮**：支持预定义按钮和自定义按钮
+- 💾 **持久化**：支持列宽和自定义列持久化
+- 📱 **响应式**：自适应不同屏幕尺寸
+
+#### 基础使用
+
+```vue
+<template>
+  <IdpVTable
+    :config="config"
+    :data="data"
+    :total="100"
+    :search-config="searchConfig"
+    :show-operation="true"
+    @search="handleSearch"
+    @linePreview="handlePreview"
+  />
+</template>
+
+<script setup>
+import { VTable as IdpVTable } from '@idp/idp-base-components'
+
+const config = {
+  title: '文件列表',
+  columns: [
+    { type: 'seq', width: 60, title: '序号' },
+    { field: 'name', title: '文件名', width: 200 },
+    { field: 'size', title: '大小', width: 100 },
+    { field: 'uploadTime', title: '上传时间', width: 160 },
+  ]
+}
+
+const searchConfig = {
+  fields: [
+    { field: 'name', label: '文件名', type: 'input' },
+    { field: 'status', label: '状态', type: 'select', options: [...] },
+  ]
+}
+
+const data = ref([])
+
+const handleSearch = (formData) => {
+  console.log('搜索条件:', formData)
+}
+
+const handlePreview = (row) => {
+  console.log('预览:', row)
+}
+</script>
+```
+
+## 📖 文档
+
+详细文档请查看我们的 [Storybook](https://your-storybook-url.com)
+
+## 🔧 本地开发
+
+```bash
+# 克隆项目
+git clone https://github.com/standandcxs/company-component-library.git
+
+# 安装依赖
+pnpm install
+
+# 启动开发服务器
+pnpm serve
+
+# 启动 Storybook
+pnpm storybook
+
+# 构建组件库
+pnpm build
+```
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+## 📄 License
+
+[MIT](./LICENSE)
+
+## 👥 维护者
+
+- Your Name <your.email@example.com>
+
+## 🙏 鸣谢
+
+- [Vue 3](https://vuejs.org/)
+- [Element Plus](https://element-plus.org/)
+- [vxe-table](https://vxetable.cn/)
+- [Vite](https://vitejs.dev/)
+
+---
+
+**注意**：本组件库依赖以下包，使用前请确保已安装：
+
+- vue >= 3.3.0
+- element-plus >= 2.0.0
+- vxe-pc-ui >= 4.0.0
+- vxe-table >= 4.0.0