zxt-table 0.3.1 → 0.3.5

package/README.md

@@ -28,7 +28,33 @@ npm install zxt-table
 
 ## 使用
 
-### 全局注册
+### 方式一：自动按需引入（推荐）
+
+如果您使用了 `unplugin-vue-components` 和 `unplugin-auto-import`，可以使用我们提供的 Resolver 自动引入组件和样式（包括 Element Plus 的样式）。
+
+1. 在 `vite.config.js` 中配置：
+
+```javascript
+import { defineConfig } from 'vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import { ZxtTableResolver } from 'zxt-table/resolver' // 引入 Resolver
+
+export default defineConfig({
+  plugins: [
+    Components({
+      resolvers: [
+        // Element Plus 自动引入
+        ElementPlusResolver(),
+        // ZxtTable 自动引入 (会自动处理 ZxtTable 和 Element Plus 的样式依赖)
+        ZxtTableResolver()
+      ],
+    }),
+  ],
+})
+```
+
+### 方式二：全局注册
 
 在您的 `main.js` 文件中引入组件库：
 
@@ -36,11 +62,13 @@ npm install zxt-table
 import { createApp } from 'vue'
 import App from './App.vue'
 import ElementPlus from 'element-plus'
+// ❗ 重要：如果您没有使用 Resolver，必须手动引入 Element Plus 样式
 import 'element-plus/dist/index.css'
 
 // 引入 zxt-table
 import ZxtTable from 'zxt-table'
-import 'zxt-table/dist/style.css'
+// 引入组件库样式
+import 'zxt-table/style.css'
 
 const app = createApp(App)
 app.use(ElementPlus)
@@ -48,7 +76,7 @@ app.use(ZxtTable)
 app.mount('#app')
 ```
 
-### 按需引入
+### 方式三：手动按需引入
 
 您也可以按需引入单个组件：
 

package/dist/zxt-table.css

@@ -1 +1 @@
-.my-button[data-v-4480e77d]{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #dcdfe6;color:#606266;text-align:center;box-sizing:border-box;outline:none;margin:0;transition:.1s;font-weight:500;padding:12px 20px;font-size:14px;border-radius:4px}.my-button--primary[data-v-4480e77d]{color:#fff;background-color:#409eff;border-color:#409eff}.my-button--success[data-v-4480e77d]{color:#fff;background-color:#67c23a;border-color:#67c23a}.my-button--warning[data-v-4480e77d]{color:#fff;background-color:#e6a23c;border-color:#e6a23c}.my-button--danger[data-v-4480e77d]{color:#fff;background-color:#f56c6c;border-color:#f56c6c}.my-button.is-disabled[data-v-4480e77d]{cursor:not-allowed;opacity:.7}.jsx-button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #dcdfe6;color:#606266;text-align:center;box-sizing:border-box;outline:none;margin:0;transition:.1s;font-weight:500;padding:12px 20px;font-size:14px;border-radius:4px}.jsx-button--primary{color:#fff;background-color:#409eff;border-color:#409eff}.jsx-button--success{color:#fff;background-color:#67c23a;border-color:#67c23a}.jsx-button--warning{color:#fff;background-color:#e6a23c;border-color:#e6a23c}.jsx-button--danger{color:#fff;background-color:#f56c6c;border-color:#f56c6c}.jsx-button.is-disabled{cursor:not-allowed;opacity:.7}.zxt-pagination[data-v-4703797d]{display:flex;justify-content:flex-end;margin-top:20px}.zxt-table-container[data-v-25052d16]{width:100%}.zxt-form-container[data-v-baaa06c7]{padding:20px}.form-actions[data-v-baaa06c7]{display:flex;justify-content:center;margin-top:30px;gap:10px}.zxt-grid-container[data-v-72fcb85d]{width:100%}.grid-search-form[data-v-72fcb85d]{margin-bottom:10px;padding:10px;background-color:#f5f5f5;border-radius:4px}.search-btn-group[data-v-72fcb85d]{display:flex;gap:10px}.grid-toolbar[data-v-72fcb85d]{margin-bottom:10px;padding:10px;background-color:#f5f5f5;border-radius:4px;display:flex;gap:10px;align-items:center}
+.my-button[data-v-4480e77d]{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #dcdfe6;color:#606266;text-align:center;box-sizing:border-box;outline:none;margin:0;transition:.1s;font-weight:500;padding:12px 20px;font-size:14px;border-radius:4px}.my-button--primary[data-v-4480e77d]{color:#fff;background-color:#409eff;border-color:#409eff}.my-button--success[data-v-4480e77d]{color:#fff;background-color:#67c23a;border-color:#67c23a}.my-button--warning[data-v-4480e77d]{color:#fff;background-color:#e6a23c;border-color:#e6a23c}.my-button--danger[data-v-4480e77d]{color:#fff;background-color:#f56c6c;border-color:#f56c6c}.my-button.is-disabled[data-v-4480e77d]{cursor:not-allowed;opacity:.7}.jsx-button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #dcdfe6;color:#606266;text-align:center;box-sizing:border-box;outline:none;margin:0;transition:.1s;font-weight:500;padding:12px 20px;font-size:14px;border-radius:4px}.jsx-button--primary{color:#fff;background-color:#409eff;border-color:#409eff}.jsx-button--success{color:#fff;background-color:#67c23a;border-color:#67c23a}.jsx-button--warning{color:#fff;background-color:#e6a23c;border-color:#e6a23c}.jsx-button--danger{color:#fff;background-color:#f56c6c;border-color:#f56c6c}.jsx-button.is-disabled{cursor:not-allowed;opacity:.7}.zxt-pagination[data-v-497aa44d]{display:flex;justify-content:flex-end;margin-top:20px;--el-color-primary: #ff3a33;--el-pagination-hover-color: #ff3a33}[data-v-497aa44d] .el-pager li.is-active{color:#ff3a33!important}[data-v-497aa44d] .el-pagination.is-background .el-pager li:not(.is-disabled).is-active{background-color:#ff3a33!important;color:#fff}[data-v-497aa44d] .el-pager li:hover{color:#ff3a33!important}[data-v-497aa44d] .el-pagination__sizes .el-input.is-focus .el-input__wrapper,[data-v-497aa44d] .el-pagination__sizes .el-input__wrapper:hover{box-shadow:0 0 0 1px #ff3a33 inset!important}.el-select-dropdown__item.is-selected{color:#ff3a33!important}.zxt-table-container[data-v-3cb81eb3]{width:100%}[data-v-3cb81eb3] .el-table{--el-table-header-bg-color: #f8f8f9;--el-table-header-text-color: #333333;--el-table-text-color: #606266;--el-table-border-color: #ebeef5;--el-table-row-hover-bg-color: #f5f7fa}[data-v-3cb81eb3] .el-table th.el-table__cell{background-color:var(--el-table-header-bg-color)!important;color:var(--el-table-header-text-color);font-weight:600;height:48px;padding:6px 0}[data-v-3cb81eb3] .el-table td.el-table__cell{padding:8px 0}[data-v-3cb81eb3] .el-table .cell{line-height:24px;padding:0 12px}[data-v-3cb81eb3] .el-link.el-link--default,[data-v-3cb81eb3] .el-link.el-link--primary{--el-link-text-color: #409eff;color:#409eff;font-weight:400}[data-v-3cb81eb3] .el-link:hover{color:#66b1ff;text-decoration:none}[data-v-3cb81eb3] .el-button--primary.is-link,[data-v-3cb81eb3] .el-button--primary.is-text{color:#409eff}[data-v-3cb81eb3] .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{background-color:#fafafa}[data-v-3cb81eb3] .el-table .el-tag{border-radius:4px;height:24px;line-height:22px;padding:0 8px}.zxt-form-popper .el-select-dropdown__item.selected,.zxt-form-popper .el-select-dropdown__item.is-selected{color:#fa2314!important}.zxt-form-popper .el-select-dropdown__item.hover,.zxt-form-popper .el-select-dropdown__item:hover{background-color:#f5f7fa;color:#fa2314}.zxt-form-popper .el-date-table td.current:not(.disabled) .el-date-table-cell__text{background-color:#fa2314!important}.zxt-form-popper .el-date-table td.today .el-date-table-cell__text{color:#fa2314}.zxt-form-popper .el-date-table td.today.current .el-date-table-cell__text{color:#fff}.zxt-form-popper .el-year-table td.current .cell,.zxt-form-popper .el-month-table td.current .cell{color:#fa2314!important}.zxt-form-popper .el-date-table td.start-date .el-date-table-cell__text,.zxt-form-popper .el-date-table td.end-date .el-date-table-cell__text{background-color:#fa2314!important}.zxt-form-popper .el-date-table td.available:hover,.zxt-form-popper .el-year-table td .cell:hover,.zxt-form-popper .el-month-table td .cell:hover,.zxt-form-popper .el-date-picker__header-label:hover,.zxt-form-popper .el-picker-panel__icon-btn:hover{color:#fa2314}.zxt-form-container[data-v-0061cb38]{padding:20px}.form-actions[data-v-0061cb38]{display:flex;justify-content:center;margin-top:30px;gap:10px}.form-item-wrapper[data-v-0061cb38]{display:flex;align-items:center;border:1px solid #dcdfe6;border-radius:4px;padding:0 12px;width:100%;background-color:#fff;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.form-item-wrapper.is-action[data-v-0061cb38]{border:none;background-color:transparent;padding:0}.form-item-wrapper[data-v-0061cb38]:focus-within{border-color:#fa2314}.custom-form-item.is-error .form-item-wrapper[data-v-0061cb38]{border-color:#f56c6c}.form-label[data-v-0061cb38]{color:#606266;white-space:nowrap;margin-right:12px;font-size:14px;line-height:32px}.form-control[data-v-0061cb38]{flex:1;min-width:0;display:flex;align-items:center}.custom-form-item[data-v-0061cb38] .el-input__wrapper,.custom-form-item[data-v-0061cb38] .el-select__wrapper,.custom-form-item[data-v-0061cb38] .el-textarea__wrapper{box-shadow:none!important;background-color:transparent!important;padding-left:0;padding-right:0}.custom-form-item[data-v-0061cb38] .el-date-editor.el-input__wrapper{width:100%}.custom-form-item[data-v-0061cb38] .el-range-editor.el-input__wrapper{padding:0;box-shadow:none!important}.zxt-grid-container[data-v-fc76e52e]{width:100%}.grid-search-form[data-v-fc76e52e]{margin-bottom:10px;padding:10px;border-radius:4px}.search-btn-group[data-v-fc76e52e]{display:flex;gap:10px}.grid-toolbar[data-v-fc76e52e]{margin-bottom:10px;padding:10px;border-radius:4px;display:flex;gap:10px;align-items:center}.btn-search[data-v-fc76e52e]{background-color:#fff;border-color:#fa2314;color:#fa2314}.btn-search[data-v-fc76e52e]:hover,.btn-search[data-v-fc76e52e]:focus,.btn-search[data-v-fc76e52e]:active{background-color:#fff}.btn-search[data-v-fc76e52e]:hover,.btn-search[data-v-fc76e52e]:focus{border-color:#fb4f43;color:#fb4f43;outline:none}.btn-search.el-button[data-v-fc76e52e]:focus,.btn-search.el-button[data-v-fc76e52e]:focus-visible{background-color:#fff;border-color:#fb4f43;color:#fb4f43;outline:none}.btn-search[data-v-fc76e52e]:active,.btn-search.el-button[data-v-fc76e52e]:active{background-color:#fff;border-color:#e12012;color:#e12012}.btn-reset[data-v-fc76e52e]{background-color:#fff;border-color:#ddd;color:#111}.btn-reset[data-v-fc76e52e]:hover,.btn-reset[data-v-fc76e52e]:focus,.btn-reset[data-v-fc76e52e]:active{background-color:#fff}.btn-reset[data-v-fc76e52e]:focus,.btn-reset.el-button[data-v-fc76e52e]:focus,.btn-reset.el-button[data-v-fc76e52e]:focus-visible{border-color:#ddd;color:#111;outline:none}.btn-reset[data-v-fc76e52e]:hover,.btn-reset.el-button[data-v-fc76e52e]:hover{border-color:#fb4f43;color:#fb4f43}.btn-reset[data-v-fc76e52e]:active,.btn-reset.el-button[data-v-fc76e52e]:active{background-color:#fff;border-color:#e12012;color:#e12012}