@yetuzi/vue3-query-components 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Vue3 Common 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,222 @@
+# Vue3 Query Components
+
+基于 Vue 3 + Element Plus 的查询页面组件库，专注于表格查询场景，开箱即用。
+
+## ✨ 特性
+
+- 🚀 **开箱即用** - 高度封装的业务组件，减少重复开发
+- 🎨 **统一设计** - 基于 Element Plus 设计语言
+- 🔧 **高度可配置** - 灵活的配置选项，满足不同业务需求
+- 📦 **TypeScript 支持** - 完整的类型定义
+- 🌳 **Tree Shaking** - 按需引入，减小打包体积
+- 🔥 **热更新** - 支持开发模式热更新
+
+## 📦 安装
+
+```bash
+npm install vue3-query-components
+# 或
+yarn add vue3-query-components
+# 或
+pnpm add vue3-query-components
+```
+
+## 🚀 快速开始
+
+### 1. 全局引入
+
+```typescript
+import { createApp } from 'vue'
+import Vue3QueryComponents from 'vue3-query-components'
+import 'vue3-query-components/dist/style.css'
+
+const app = createApp(App)
+app.use(Vue3QueryComponents)
+```
+
+### 2. 按需引入
+
+```typescript
+import { CommonTable, CommonForm } from 'vue3-query-components'
+import 'vue3-query-components/dist/style.css'
+```
+
+### 3. 基础使用
+
+#### 表格组件
+
+```vue
+<template>
+  <CommonTable
+    :columns="columns"
+    :data="tableData"
+    :loading="loading"
+    :pagination="pagination"
+    @page-change="handlePageChange"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { CommonTable } from 'vue3-query-components'
+
+const columns = ref([
+  { prop: 'name', label: '姓名' },
+  { prop: 'age', label: '年龄' },
+  { prop: 'email', label: '邮箱' }
+])
+
+const tableData = ref([
+  { name: '张三', age: 25, email: 'zhangsan@example.com' },
+  { name: '李四', age: 30, email: 'lisi@example.com' }
+])
+
+const loading = ref(false)
+const pagination = ref({
+  current: 1,
+  pageSize: 10,
+  total: 100
+})
+
+function handlePageChange(page) {
+  pagination.value.current = page
+  // 加载数据
+}
+</script>
+```
+
+#### 表单组件
+
+```vue
+<template>
+  <CommonForm
+    :model="formModel"
+    :items="formItems"
+    @submit="handleSubmit"
+    @reset="handleReset"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { CommonForm } from 'vue3-query-components'
+
+const formModel = ref({
+  name: '',
+  email: '',
+  age: null
+})
+
+const formItems = ref([
+  {
+    prop: 'name',
+    label: '姓名',
+    type: 'input',
+    rules: [{ required: true, message: '请输入姓名' }]
+  },
+  {
+    prop: 'email',
+    label: '邮箱',
+    type: 'input',
+    rules: [{ type: 'email', message: '请输入正确的邮箱格式' }]
+  },
+  {
+    prop: 'age',
+    label: '年龄',
+    type: 'number'
+  }
+])
+
+function handleSubmit() {
+  console.log('提交表单:', formModel.value)
+}
+
+function handleReset() {
+  console.log('重置表单')
+}
+</script>
+```
+
+## 📚 API 文档
+
+### CommonTable Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| columns | 表格列配置 | `Column[]` | - |
+| data | 表格数据 | `any[]` | [] |
+| loading | 加载状态 | `boolean` | false |
+| pagination | 分页配置 | `PaginationConfig` | - |
+| border | 是否显示边框 | `boolean` | true |
+| stripe | 是否显示斑马纹 | `boolean` | true |
+
+### CommonForm Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| model | 表单数据对象 | `object` | - |
+| items | 表单项配置 | `FormItem[]` | - |
+| labelWidth | 标签宽度 | `string \| number` | '100px' |
+| inline | 是否行内表单 | `boolean` | false |
+| submitText | 提交按钮文本 | `string` | '提交' |
+| resetText | 重置按钮文本 | `string` | '重置' |
+
+## 🛠️ 开发
+
+### 环境要求
+
+- Node.js >= 16.0.0
+- Vue 3.5+
+- Element Plus 2.11+
+
+### 本地开发
+
+```bash
+# 克隆项目
+git clone https://gitee.com/yetuzi/vue3-common.git
+cd vue3-common/common
+
+# 安装依赖
+npm install
+
+# 开发模式（构建并监听文件变化）
+npm run dev
+
+# 构建
+npm run build
+
+# 类型检查
+npm run type-check
+
+# 代码格式化
+npm run format
+
+# Lint
+npm run lint
+```
+
+### 测试
+
+```bash
+# 运行测试
+npm test
+```
+
+## 📄 许可证
+
+[MIT](./LICENSE)
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+## 📞 支持
+
+如有问题，请提交 [Issue](https://gitee.com/yetuzi/vue3-common/issues)
+
+## 🗺️ 路线图
+
+- [ ] 更多业务组件（抽屉、模态框等）
+- [ ] 国际化支持
+- [ ] 主题定制功能
+- [ ] 单元测试覆盖

package/dist/index.css

@@ -0,0 +1 @@
+.common-query-table[data-v-36a95823]{--spacing: 15px;width:100%;height:100%;flex:1;display:flex;flex-direction:column;box-sizing:border-box;padding:var(--spacing) 12px;overflow:hidden}[class^=common-query-table-][data-v-36a95823]{width:100%}[class^=common-query-table-]+[class^=common-query-table-][data-v-36a95823]{margin-top:var(--spacing)}.common-query-table .common-query-table-table[data-v-36a95823]{flex:1;overflow:hidden}.el-form[data-v-6b862115]{margin-bottom:-18px!important}.el-form .el-form-item[data-v-6b862115] .el-form-item__content{width:var(--v58512696)}.common-table[data-v-5da80890]{width:100%;height:100%;display:flex;flex-direction:column}

package/dist/index.d.ts

@@ -0,0 +1,127 @@
+// Vue3 Common Components 类型声明文件
+import type { Plugin, DefineComponent } from 'vue'
+import type { InputProps, ButtonProps } from 'element-plus'
+
+// 基础配置类型
+export interface Config {
+  component: {
+    placeholder: string
+    pagination: {
+      defaultPageCount: number
+      defaultPageSize: number
+    }
+    table: {
+      headerCellStyle: Record<string, any>
+    }
+    form: {
+      submitText: string
+      resetText: string
+      formItem: {
+        components: {
+          width: string
+        }
+      }
+    }
+  }
+}
+
+// 表格列配置
+export interface CommonTableColumn {
+  prop: string
+  label: string
+  width?: string | number
+  minWidth?: string | number
+  fixed?: boolean | string
+  sortable?: boolean | string
+  formatter?: (row: any, column: any, cellValue: any, index: number) => string
+  renderHeader?: (h: any, column: any) => any
+  [key: string]: any
+}
+
+// 表单配置
+export interface CommonFormPropForm {
+  components: {
+    width: string
+  }
+}
+
+// 分页参数
+export interface PaginationParam {
+  page: number
+  size: number
+  total?: number
+}
+
+// 列表参数
+export interface ListParam extends PaginationParam {
+  [key: string]: any
+}
+
+// 表格属性
+export interface CommonTableProps {
+  columns: CommonTableColumn[]
+  data: any[]
+  loading?: boolean
+  pagination?: boolean | PaginationParam
+  [key: string]: any
+}
+
+// 表单属性
+export interface CommonFormProps {
+  formItems: any[]
+  modelValue: Record<string, any>
+  form?: CommonFormPropForm
+  [key: string]: any
+}
+
+// 查询表格属性
+export interface CommonQueryTableProps extends CommonTableProps {
+  queryFormItems?: any[]
+  [key: string]: any
+}
+
+// 组件属性类型
+export type CommonInputProps = InputProps
+export type CommonButtonProps = ButtonProps
+export interface CommonSelectProps {
+  [key: string]: any
+}
+export interface CommonDatePickerProps {
+  [key: string]: any
+}
+export interface CommonPaginationProps {
+  [key: string]: any
+}
+export interface CommonCheckboxProps {
+  [key: string]: any
+}
+export interface CommonRadioProps {
+  [key: string]: any
+}
+export interface CommonSwitchProps {
+  [key: string]: any
+}
+
+// 组件类型定义
+export declare const CommonInput: DefineComponent<CommonInputProps>
+export declare const CommonButton: DefineComponent<CommonButtonProps>
+export declare const CommonForm: DefineComponent<CommonFormProps>
+export declare const CommonTable: DefineComponent<CommonTableProps>
+export declare const CommonQueryTable: DefineComponent<CommonQueryTableProps>
+export declare const CommonPagination: DefineComponent<CommonPaginationProps>
+export declare const CommonSelect: DefineComponent<CommonSelectProps>
+export declare const CommonDatePicker: DefineComponent<CommonDatePickerProps>
+export declare const CommonCheckbox: DefineComponent<CommonCheckboxProps>
+export declare const CommonRadio: DefineComponent<CommonRadioProps>
+export declare const CommonSwitch: DefineComponent<CommonSwitchProps>
+export declare const CommonConfigProvider: DefineComponent<any>
+
+// 配置对象
+export declare const config: Config
+
+// 插件定义
+export declare const plugin: Plugin
+
+// 默认导出
+declare const defaultExport: Plugin
+export default defaultExport