diff --git a/.eslintrc.js b/.eslintrc.js index 3817900773..8853509017 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -15,7 +15,6 @@ module.exports = { 'no-console': 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', '@typescript-eslint/no-unused-vars': process.env.NODE_ENV === 'production' ? 'error' : 'warn', - '@typescript-eslint/no-explicit-any': 'off', - 'vue/multi-word-component-names': 'off' + '@typescript-eslint/no-explicit-any': 'off' } } diff --git a/.gitee/ISSUE_TEMPLATE/bug_report.yml b/.gitee/ISSUE_TEMPLATE/bug_report.yml index ee0c6ab6df..24b895f67b 100644 --- a/.gitee/ISSUE_TEMPLATE/bug_report.yml +++ b/.gitee/ISSUE_TEMPLATE/bug_report.yml @@ -5,10 +5,18 @@ body: - type: input id: issue_link attributes: - label: "可复现的链接:" - description: "一个最小化的重现示例能让我们精确地定位问题,从而快速解决问题。如何创建,点击 v3:[codesandbox](https://codesandbox.io/s/vue-template-916h0)、[jsfiddle](https://jsfiddle.net/86p7Ltny/)、[jsrun](https://jsrun.net/vIyKp/edit) 或 v4:[codesandbox](https://codesandbox.io/s/vxe-table-wentiyanshi-forked-54v2j)、[jsfiddle](https://jsfiddle.net/9qoghkbj/)、[jsrun](https://jsrun.net/K5IKp/edit),将代码示例编辑后保存。" + label: "可复现的链接(必须为公开链接,仅包含能复现问题的示例代码):" + description: "一个最小化的重现示例能让我们精确地定位问题,从而快速解决问题。" validations: required: true +- type: checkboxes + id: issue_confirm_read_agreement + attributes: + label: "是否已准备好复现链接与示例代码?" + description: "按要求准备好复现 Demo,复现 Demo 操作步骤:https://vxetable.cn/issues.html" + options: + - label: "我确定已准备好以上复现链接" + required: true - type: textarea id: issue_describe attributes: @@ -17,7 +25,7 @@ body: required: true - type: markdown attributes: - value: "在发布问题之前,请仔细阅读所填写的步骤,以确保是详细和清晰的。" + value: "在发布问题之前,请先查阅[最新文档](https://vxetable.cn/)确保使用的是最新版本,并仔细阅读所填写的步骤,以确保是详细和清晰的。" - type: input id: issue_expect attributes: @@ -40,13 +48,28 @@ body: id: issue_vue_version attributes: label: "vue 版本:" - placeholder: "例如:2.6.0" + placeholder: "例如:3.4.27" + validations: + required: true +- type: input + id: issue_vxe_ui_version + attributes: + label: "vxe-pc-ui 版本:" + placeholder: "例如:4.3.51" validations: required: true - type: input - id: issue_vxe_version + id: issue_vxe_table_version attributes: label: "vxe-table 版本:" - placeholder: "例如:3.4.0" + placeholder: "例如:4.9.35" validations: required: true +- type: checkboxes + id: issue_confirm_latest_version + attributes: + label: "是否使用当前最新版本?" + description: "仅支持提交最新版本的问题反馈,非最新版本不予处理,一律自动关闭" + options: + - label: "我确定已经更新到最新版本后依然存在该问题" + required: true \ No newline at end of file diff --git a/.gitee/ISSUE_TEMPLATE/feature_request.yml b/.gitee/ISSUE_TEMPLATE/feature_request.yml index 039b9b23ea..53b241c7f1 100644 --- a/.gitee/ISSUE_TEMPLATE/feature_request.yml +++ b/.gitee/ISSUE_TEMPLATE/feature_request.yml @@ -10,7 +10,7 @@ body: required: true - type: markdown attributes: - value: "请先查看[最新文档](https://xuliangzhan_admin.gitee.io/vxe-table/#/table/api),确定该功能是否已有实现" + value: "请先查阅[最新文档](https://vxetable.cn/),确定该功能是否已有实现" - type: textarea id: issue_api_describe attributes: @@ -25,3 +25,11 @@ body: - type: markdown attributes: value: "如果有其他已实现的方案,可以通过链接或截图描述一下" +- type: checkboxes + id: issue_confirm_latest_version + attributes: + label: "是否使用当前最新版本?" + description: "官方只维护最新版本,如果不是最新版本,请先更新到[最新版本](https://vxetable.cn/)之后再反馈问题!" + options: + - label: "我已确认是使用当前的最新版本。" + required: true \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index ee0c6ab6df..24b895f67b 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -5,10 +5,18 @@ body: - type: input id: issue_link attributes: - label: "可复现的链接:" - description: "一个最小化的重现示例能让我们精确地定位问题,从而快速解决问题。如何创建,点击 v3:[codesandbox](https://codesandbox.io/s/vue-template-916h0)、[jsfiddle](https://jsfiddle.net/86p7Ltny/)、[jsrun](https://jsrun.net/vIyKp/edit) 或 v4:[codesandbox](https://codesandbox.io/s/vxe-table-wentiyanshi-forked-54v2j)、[jsfiddle](https://jsfiddle.net/9qoghkbj/)、[jsrun](https://jsrun.net/K5IKp/edit),将代码示例编辑后保存。" + label: "可复现的链接(必须为公开链接,仅包含能复现问题的示例代码):" + description: "一个最小化的重现示例能让我们精确地定位问题,从而快速解决问题。" validations: required: true +- type: checkboxes + id: issue_confirm_read_agreement + attributes: + label: "是否已准备好复现链接与示例代码?" + description: "按要求准备好复现 Demo,复现 Demo 操作步骤:https://vxetable.cn/issues.html" + options: + - label: "我确定已准备好以上复现链接" + required: true - type: textarea id: issue_describe attributes: @@ -17,7 +25,7 @@ body: required: true - type: markdown attributes: - value: "在发布问题之前,请仔细阅读所填写的步骤,以确保是详细和清晰的。" + value: "在发布问题之前,请先查阅[最新文档](https://vxetable.cn/)确保使用的是最新版本,并仔细阅读所填写的步骤,以确保是详细和清晰的。" - type: input id: issue_expect attributes: @@ -40,13 +48,28 @@ body: id: issue_vue_version attributes: label: "vue 版本:" - placeholder: "例如:2.6.0" + placeholder: "例如:3.4.27" + validations: + required: true +- type: input + id: issue_vxe_ui_version + attributes: + label: "vxe-pc-ui 版本:" + placeholder: "例如:4.3.51" validations: required: true - type: input - id: issue_vxe_version + id: issue_vxe_table_version attributes: label: "vxe-table 版本:" - placeholder: "例如:3.4.0" + placeholder: "例如:4.9.35" validations: required: true +- type: checkboxes + id: issue_confirm_latest_version + attributes: + label: "是否使用当前最新版本?" + description: "仅支持提交最新版本的问题反馈,非最新版本不予处理,一律自动关闭" + options: + - label: "我确定已经更新到最新版本后依然存在该问题" + required: true \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml index 039b9b23ea..53b241c7f1 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.yml +++ b/.github/ISSUE_TEMPLATE/feature_request.yml @@ -10,7 +10,7 @@ body: required: true - type: markdown attributes: - value: "请先查看[最新文档](https://xuliangzhan_admin.gitee.io/vxe-table/#/table/api),确定该功能是否已有实现" + value: "请先查阅[最新文档](https://vxetable.cn/),确定该功能是否已有实现" - type: textarea id: issue_api_describe attributes: @@ -25,3 +25,11 @@ body: - type: markdown attributes: value: "如果有其他已实现的方案,可以通过链接或截图描述一下" +- type: checkboxes + id: issue_confirm_latest_version + attributes: + label: "是否使用当前最新版本?" + description: "官方只维护最新版本,如果不是最新版本,请先更新到[最新版本](https://vxetable.cn/)之后再反馈问题!" + options: + - label: "我已确认是使用当前的最新版本。" + required: true \ No newline at end of file diff --git a/README.en.md b/README.en.md index a94ca61d5e..a226697137 100644 --- a/README.en.md +++ b/README.en.md @@ -1,8 +1,8 @@ # vxe-table -[简体中文](README.md) | [繁體中文](README.zh-TW.md) | English +[简体中文](README.md) | [繁體中文](README.zh-TW.md) | English | [日本語](README.ja-JP.md) -[![star](https://gitee.com/xuliangzhan_admin/vxe-table/badge/star.svg?theme=gvp)](https://gitee.com/xuliangzhan_admin/vxe-table/stargazers) +[![star](https://gitee.com/x-extends/vxe-table/badge/star.svg?theme=gvp)](https://gitee.com/x-extends/vxe-table/stargazers) [![npm version](https://img.shields.io/npm/v/vxe-table.svg?style=flat-square)](https://www.npmjs.com/package/vxe-table) [![NodeJS with Webpack](https://github.com/x-extends/vxe-table/actions/workflows/webpack.yml/badge.svg)](https://github.com/x-extends/vxe-table/actions/workflows/webpack.yml) [![npm downloads](https://img.shields.io/npm/dt/vxe-table.svg?style=flat-square)](https://npm-stat.com/charts.html?package=vxe-table) @@ -12,7 +12,7 @@ [![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/vxe-table.svg)](https://github.com/x-extends/vxe-table/pulls?q=is%3Apr+is%3Aclosed) [![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE) -A [vue](https://www.npmjs.com/package/vue) based PC form component, support add delete change check, virtual tree, column drag and drop, lazy loading, shortcut menu, data verification, import/export/print, form rendering, custom template, renderer, JSON configuration... +A [vue](https://www.npmjs.com/package/vue) based PC form component, support add delete change check, virtual tree, drag and drop, lazy loading, shortcut menu, data verification, import/export/print, form rendering, custom template, renderer, JSON configuration... ## Browser Support @@ -28,6 +28,8 @@ Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | * [x] Table with border * [x] Cell style * [x] Column resizing +* [x] Column drag and drop +* [x] Row drag and drop * [x] Minimum/maximum height * [x] Resize height & width * [x] Fixed column @@ -64,25 +66,44 @@ Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | * [x] ([Enterprise](https://vxetable.cn/pluginDocs/)) Cell copy & paste * [x] ([Enterprise](https://vxetable.cn/pluginDocs/)) Cell find and replace * [x] ([Enterprise](https://vxetable.cn/pluginDocs/)) Full keyboard operation +* [x] ([Enterprise](https://vxetable.cn/pluginDocs/)) Integrated chart ## Installing Version: [vue](https://www.npmjs.com/package/vue) 3.x ```shell -npm install vxe-table +npm install vxe-table@next ``` Get on [unpkg](https://unpkg.com/vxe-table/) and [cdnjs](https://cdn.jsdelivr.net/npm/vxe-table/) -### npm +### NPM + +### Use Table + +```javascript +// ... +import VxeTable from 'vxe-table' +import 'vxe-table/lib/style.css' +// ... + +createApp(App).use(VxeTable).mount('#app') +``` + +### Use Table and UI ```javascript -import { createApp } from 'vue' -import VxeUITable from 'vxe-table' +// ... +import VxeTable from 'vxe-table' import 'vxe-table/lib/style.css' +// ... + +import VxeUI from 'vxe-pc-ui' +import 'vxe-pc-ui/lib/style.css' +// ... -createApp(App).use(VxeUITable).mount('#app') +createApp(App).use(VxeUI).use(VxeTable).mount('#app') ``` ### CDN @@ -91,11 +112,15 @@ Use a third-party CDN to remember to lock the version number to avoid being affe ***It is not recommended to use the CDN address of a third party in a formal environment because the connection can fail at any time*** ```HTML - - - - - + + + + + + + + + ``` ## Example @@ -128,14 +153,15 @@ const tableData = ref([ ## Online Documents -👉 [Document](https://vxetable.cn) +👉 [UI Document](https://vxeui.com) +👉 [Table Document](https://vxetable.cn) ## Run the project Install dependencies ```shell -npm install +npm run update ``` Start local debugging diff --git a/README.ja-JP.md b/README.ja-JP.md new file mode 100644 index 0000000000..1694809668 --- /dev/null +++ b/README.ja-JP.md @@ -0,0 +1,187 @@ +# vxe-table + +[简体中文](README.md) | [繁體中文](README.zh-TW.md) | [English](README.en.md) | 日本語 + +[![star](https://gitee.com/x-extends/vxe-table/badge/star.svg?theme=gvp)](https://gitee.com/x-extends/vxe-table/stargazers) +[![npm version](https://img.shields.io/npm/v/vxe-table.svg?style=flat-square)](https://www.npmjs.com/package/vxe-table) +[![NodeJS with Webpack](https://github.com/x-extends/vxe-table/actions/workflows/webpack.yml/badge.svg)](https://github.com/x-extends/vxe-table/actions/workflows/webpack.yml) +[![npm downloads](https://img.shields.io/npm/dt/vxe-table.svg?style=flat-square)](https://npm-stat.com/charts.html?package=vxe-table) +[![issues](https://img.shields.io/github/issues/x-extends/vxe-table.svg)](https://github.com/x-extends/vxe-table/issues) +[![issues closed](https://img.shields.io/github/issues-closed/x-extends/vxe-table.svg)](https://github.com/x-extends/vxe-table/issues?q=is%3Aissue+is%3Aclosed) +[![pull requests](https://img.shields.io/github/issues-pr/x-extends/vxe-table.svg)](https://github.com/x-extends/vxe-table/pulls) +[![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/vxe-table.svg)](https://github.com/x-extends/vxe-table/pulls?q=is%3Apr+is%3Aclosed) +[![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE) + +[vue](https://www.npmjs.com/package/vue) ベースのPCフォームコンポーネントで、追加、削除、変更、チェック、仮想ツリー、列のドラッグアンドドロップ、遅延読み込み、ショートカットメニュー、データ検証、インポート/エクスポート/印刷、フォームレンダリング、カスタムテンプレート、レンダラー、JSON構成をサポートします... + +## ブラウザサポート + +![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) +--- | --- | --- | --- | --- | +最新 ✔ | 最新 ✔ | 最新 ✔ | 最新 ✔ | 最新 ✔ | + +## 機能 + +* [x] 基本テーブル +* [x] 構成グリッド +* [x] ストライプ +* [x] 境界線付きテーブル +* [x] セルスタイル +* [x] 列のサイズ変更 +* [x] 列拖拽排序 +* [x] 行拖拽排序 +* [x] 最小/最大高さ +* [x] 高さと幅のリサイズ +* [x] 固定列 +* [x] グループ化テーブルヘッダー +* [x] テーブルフッター +* [x] 行と列のハイライト +* [x] テーブルシーケンス +* [x] ラジオ +* [x] チェックボックス +* [x] ソート +* [x] 複数フィールドのソート +* [x] フィルター +* [x] セルの結合 +* [x] フッター項目の結合 +* [x] インポート/エクスポート/印刷 +* [x] 列の表示/非表示 +* [x] ドラッグアンドドロップ/カスタマイズ列の並べ替え +* [x] ローディング +* [x] フォーマットされたセル +* [x] スロット - テンプレート +* [x] コンテキストメニュー +* [x] 詳細 - 展開可能な行 +* [x] ツールバー +* [x] 仮想ツリー +* [x] 編集可能なCRUD +* [x] 検証 +* [x] データプロキシ +* [x] キーボードナビゲーション +* [x] VxeGlobalRenderer +* [x] 仮想スクロール +* [x] 仮想マージ +* [x] CSS変数テーマ +* [x] ([エンタープライズ](https://vxetable.cn/pluginDocs/)) セル領域選択 +* [x] ([エンタープライズ](https://vxetable.cn/pluginDocs/)) セルのコピー&ペースト +* [x] ([エンタープライズ](https://vxetable.cn/pluginDocs/)) セルの検索と置換 +* [x] ([エンタープライズ](https://vxetable.cn/pluginDocs/)) フルキーボード操作 +* [x] ([エンタープライズ](https://vxetable.cn/pluginDocs/)) 集成图表 + +## インストール + +バージョン: [vue](https://www.npmjs.com/package/vue) 3.x + +```shell +npm install vxe-table@next +``` + +[unpkg](https://unpkg.com/vxe-table/) および [cdnjs](https://cdn.jsdelivr.net/npm/vxe-table/) で入手可能 + +### NPM + +### テーブルの使用 + +```javascript +// ... +import VxeTable from 'vxe-table' +import 'vxe-table/lib/style.css' +// ... + +createApp(App).use(VxeTable).mount('#app') +``` + +### テーブルとUIの使用 + +```javascript +// ... +import VxeTable from 'vxe-table' +import 'vxe-table/lib/style.css' +// ... + +import VxeUI from 'vxe-pc-ui' +import 'vxe-pc-ui/lib/style.css' +// ... + +createApp(App).use(VxeUI).use(VxeTable).mount('#app') +``` + +### CDN + +サードパーティのCDNを使用する場合は、バージョン番号をロックして、互換性のない更新の影響を受けないようにしてください。 +***サードパーティのCDNアドレスを正式な環境で使用することはお勧めしません。接続がいつでも失敗する可能性があるためです*** + +```HTML + + + + + + + + + +``` + +## 例 + +```html + + + +``` + +## オンラインドキュメント + +👉 [UIドキュメント](https://vxeui.com) +👉 [テーブルドキュメント](https://vxetable.cn) + +## プロジェクトの実行 + +依存関係をインストールする + +```shell +npm run update +``` + +ローカルデバッグを開始する + +```shell +npm run serve +``` + +コンパイルパッケージング、生成されたコンパイルディレクトリ: es,lib + +```shell +npm run lib +``` + +## 貢献者 + +このプロジェクトに貢献してくれたすべての人に感謝します。 + +[![vxe-table](https://contrib.rocks/image?repo=x-extends/vxe-table)](https://github.com/x-extends/vxe-table/graphs/contributors) + +## ライセンス + +[MIT](LICENSE) © 2019-present, Xu Liangzhan diff --git a/README.md b/README.md index 03ce8b8028..3735fad15d 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ # vxe-table -简体中文 | [繁體中文](README.zh-TW.md) | [English](README.en.md) +简体中文 | [繁體中文](README.zh-TW.md) | [English](README.en.md) | [日本語](README.ja-JP.md) -[![star](https://gitee.com/xuliangzhan_admin/vxe-table/badge/star.svg?theme=gvp)](https://gitee.com/xuliangzhan_admin/vxe-table/stargazers) +[![star](https://gitee.com/x-extends/vxe-table/badge/star.svg?theme=gvp)](https://gitee.com/x-extends/vxe-table/stargazers) [![npm version](https://img.shields.io/npm/v/vxe-table.svg?style=flat-square)](https://www.npmjs.com/package/vxe-table) [![NodeJS with Webpack](https://github.com/x-extends/vxe-table/actions/workflows/webpack.yml/badge.svg)](https://github.com/x-extends/vxe-table/actions/workflows/webpack.yml) [![npm downloads](https://img.shields.io/npm/dt/vxe-table.svg?style=flat-square)](https://npm-stat.com/charts.html?package=vxe-table) @@ -12,21 +12,26 @@ [![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/vxe-table.svg)](https://github.com/x-extends/vxe-table/pulls?q=is%3Apr+is%3Aclosed) [![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE) -一个基于 [vue](https://www.npmjs.com/package/vue) 的 PC 端表单/表格组件,支持增删改查、虚拟树、列拖拽、懒加载、快捷菜单、数据校验、导入/导出/打印、表单渲染、自定义模板、渲染器、JSON 配置式... +一个基于 [vue](https://www.npmjs.com/package/vue) 的 PC 端表单/表格组件,支持增删改查、虚拟树、拖拽排序、懒加载、快捷菜单、数据校验、导入/导出/打印、表单渲染、自定义模板、渲染器、JSON 配置式... * 设计理念 - * 面向现代浏览器,高效的简洁 API 设计 - * 模块化表格、按需加载 - * 为单行编辑表格而设计,支持增删改查及更多扩展,强大的功能的同时兼具性能 + * 面向现代浏览器,不支持 IE + * 双向数据流的设计,在渲染器或自定义扩展中支持直接操作数据值,达到最高效的简洁 API 设计 + * 按需加载、自定义主题样式 * 计划 * [x] ~~v1.0 基于 vue2.6,支持所有主流的浏览器,实现表格的一切实用的功能~~ * [x] ~~v2.0 基于 vue2.6,支持所有主流的浏览器,同时兼具功能与性能~~ - * [x] v3.0 基于 vue2.6+,支持现代浏览器并保留兼容 IE11 - * [ ] v3.9 基于 vue2.6+,重构拆分组件,分为 [Vxe table](https://github.com/x-extends/vxe-table) 和 [Vxe UI](https://github.com/x-extends/vxe-pc-ui),将支持可视化组件 - * [x] v4.0 基于 vue3.2+,只支持现代浏览器,不支持 IE - * [x] v4.7 基于 vue3.2+,重构拆分组件,分为 [Vxe table](https://github.com/x-extends/vxe-table) 和 [Vxe UI](https://github.com/x-extends/vxe-pc-ui),将支持可视化组件 - * [ ] 下一阶段:sticky 渲染模式、将虚拟滚动提升到极致、虚拟滚动动态行高、数据图表可视化 + * [x] ~~v3.0 基于 vue2.6+,支持现代浏览器并保留兼容 IE11~~ + * [x] v3.9+ 基于 vue2.6+,内部重构,拆分 Table 库和 UI 库,只支持现代浏览器,不支持 IE + * [x] ~~v4.0 基于 vue3.2+,只支持现代浏览器,不支持 IE~~ + * [x] v4.7+ 基于 vue3.2+,内部重构,拆分 Table 库和 UI 库,只支持现代浏览器,不支持 IE + * [ ] 计划功能:重构展开行功能 + * [ ] 计划功能:重构冻结列功能 + * [ ] 计划功能:虚拟滚动渲染性能提升到极致 + * [ ] 计划功能:虚拟渲染,支持百万级数据渲染 + * [ ] 计划功能:虚拟渲染,支持千万级数据渲染 + * [ ] 计划功能:数据图表可视化 ## 浏览器支持 @@ -34,6 +39,18 @@ --- | --- | --- | --- | --- | 80+ ✔ | 80+ ✔ | 90+ ✔ | 75+ ✔ | 10+ ✔ | +## 在线文档 + +👉 [组件文档](https://vxeui.com) +👉 [表格文档](https://vxetable.cn) + +## QQ 交流群 + +该群供大家交流問題,如果群人数已满,将会不定期剔除不活跃的。 + +![qq](https://vxeui.com/resource/donation/qq1.png) +![qq](https://vxeui.com/resource/donation/qq2.png) + ## 功能点 * [x] 基础表格 @@ -42,6 +59,8 @@ * [x] 多种边框 * [x] 单元格样式 * [x] 列宽拖动 +* [x] 列拖拽排序 +* [x] 行拖拽排序 * [x] 最小/最大高度 * [x] 自适应宽高 * [x] 固定列 @@ -78,25 +97,44 @@ * [x] ([企业版](https://vxetable.cn/pluginDocs/)) 单元格复制/粘贴 * [x] ([企业版](https://vxetable.cn/pluginDocs/)) 单元格查找和替换 * [x] ([企业版](https://vxetable.cn/pluginDocs/)) 全键盘操作 +* [x] ([企业版](https://vxetable.cn/pluginDocs/)) 集成图表 ## 安装 版本:[vue](https://www.npmjs.com/package/vue) 3.x ```shell -npm install vxe-table +npm install vxe-table@next ``` Get on [unpkg](https://unpkg.com/vxe-table/) and [cdnjs](https://cdn.jsdelivr.net/npm/vxe-table/) -### npm +### NPM + +### 只使用表格 + +```javascript +// ... +import VxeTable from 'vxe-table' +import 'vxe-table/lib/style.css' +// ... + +createApp(App).use(VxeTable).mount('#app') +``` + +### 使用表格与 UI 库 ```javascript -import { createApp } from 'vue' -import VxeUITable from 'vxe-table' +// ... +import VxeTable from 'vxe-table' import 'vxe-table/lib/style.css' +// ... -createApp(App).use(VxeUITable).mount('#app') +import VxeUI from 'vxe-pc-ui' +import 'vxe-pc-ui/lib/style.css' +// ... + +createApp(App).use(VxeUI).use(VxeTable).mount('#app') ``` ### CDN @@ -105,11 +143,54 @@ createApp(App).use(VxeUITable).mount('#app') ***不建议将第三方的 CDN 地址用于正式环境,因为该连接随时都可能会失效*** ```HTML - - - - - + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+
+ + + ``` ## 示例 @@ -129,28 +210,21 @@ createApp(App).use(VxeUITable).mount('#app') - ``` -## 在线文档 - -👉 [官网文档](https://vxetable.cn) - -## QQ 交流群 - -该群供大家交流問題,如果群人数已满,将会不定期剔除不活跃的。 - -![qq](https://vxetable.cn/static/donation/qq1.png) -![qq](https://vxetable.cn/static/donation/qq2.png) - ## 运行项目 安装依赖 diff --git a/README.zh-TW.md b/README.zh-TW.md index a8d6ee6ed0..14452d3ca5 100644 --- a/README.zh-TW.md +++ b/README.zh-TW.md @@ -1,8 +1,8 @@ # vxe-table -[简体中文](README.md) | 繁體中文 | [English](README.en.md) +[简体中文](README.md) | 繁體中文 | [English](README.en.md) | [日本語](README.ja-JP.md) -[![star](https://gitee.com/xuliangzhan_admin/vxe-table/badge/star.svg?theme=gvp)](https://gitee.com/xuliangzhan_admin/vxe-table/stargazers) +[![star](https://gitee.com/x-extends/vxe-table/badge/star.svg?theme=gvp)](https://gitee.com/x-extends/vxe-table/stargazers) [![npm version](https://img.shields.io/npm/v/vxe-table.svg?style=flat-square)](https://www.npmjs.com/package/vxe-table) [![NodeJS with Webpack](https://github.com/x-extends/vxe-table/actions/workflows/webpack.yml/badge.svg)](https://github.com/x-extends/vxe-table/actions/workflows/webpack.yml) [![npm downloads](https://img.shields.io/npm/dt/vxe-table.svg?style=flat-square)](https://npm-stat.com/charts.html?package=vxe-table) @@ -12,7 +12,7 @@ [![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/vxe-table.svg)](https://github.com/x-extends/vxe-table/pulls?q=is%3Apr+is%3Aclosed) [![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE) -一個基於 [vue](https://www.npmjs.com/package/vue) 的PC端表格組件,支持增刪改查、虛擬樹、列拖拽、懶加載、快捷菜單、數據校驗、導入/匯出/列印、表單渲染、自定義模板、渲染器、JSON 配置式… +一個基於 [vue](https://www.npmjs.com/package/vue) 的PC端表格組件,支持增刪改查、虛擬樹、拖拽排序、懶加載、快捷菜單、數據校驗、導入/匯出/列印、表單渲染、自定義模板、渲染器、JSON 配置式… ## 瀏覽器支持 @@ -28,6 +28,8 @@ Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | * [x] 多種邊框 * [x] 儲存格樣式 * [x] 列寬拖動 +* [x] 列拖拽排序 +* [x] 行拖拽排序 * [x] 最小/最大高度 * [x] 自我調整寬高 * [x] 固定列 @@ -59,29 +61,48 @@ Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | * [x] 虛擬滾動 * [x] 虛擬合併 * [x] CSS 變量主題 -* [x] (([企業版](https://vxetable.cn/pluginDocs/))) 儲存格區域選取 -* [x] (([企業版](https://vxetable.cn/pluginDocs/))) 儲存格複製/粘貼 +* [x] ([企業版](https://vxetable.cn/pluginDocs/)) 儲存格區域選取 +* [x] ([企業版](https://vxetable.cn/pluginDocs/)) 儲存格複製/粘貼 * [x] ([企業版](https://vxetable.cn/pluginDocs/)) 儲存格查找和替換 * [x] ([企業版](https://vxetable.cn/pluginDocs/)) 全鍵盤操作 +* [x] ([企业版](https://vxetable.cn/pluginDocs/)) 集成图表 ## 安裝 版本:[vue](https://www.npmjs.com/package/vue) 3.x ```shell -npm install vxe-table +npm install vxe-table@next ``` Get on [unpkg](https://unpkg.com/vxe-table/) and [cdnjs](https://cdn.jsdelivr.net/npm/vxe-table/) -### npm +### NPM + +### 使用表格 + +```javascript +// ... +import VxeTable from 'vxe-table' +import 'vxe-table/lib/style.css' +// ... + +createApp(App).use(VxeTable).mount('#app') +``` + +### 使用表格与 UI 库 ```javascript -import { createApp } from 'vue' -import VxeUITable from 'vxe-table' +// ... +import VxeTable from 'vxe-table' import 'vxe-table/lib/style.css' +// ... + +import VxeUI from 'vxe-pc-ui' +import 'vxe-pc-ui/lib/style.css' +// ... -createApp(App).use(VxeUITable).mount('#app') +createApp(App).use(VxeUI).use(VxeTable).mount('#app') ``` ### CDN @@ -90,11 +111,15 @@ createApp(App).use(VxeUITable).mount('#app') ***不建議將第三方的 CDN 地址用於正式環境,因爲該連接隨時都可能會失效*** ```HTML - - - - - + + + + + + + + + ``` ## 示例 @@ -127,14 +152,15 @@ const tableData = ref([ ## 線上檔案 -👉 [官網檔案](https://vxetable.cn) +👉 [組件文檔](https://vxeui.com) +👉 [表格文檔](https://vxetable.cn) ## 運行項目 安裝依賴 ```shell -npm install +npm run update ``` 啓動本地調試 diff --git a/examples/App.vue b/examples/App.vue index 68b64cf904..5a0edcf18f 100644 --- a/examples/App.vue +++ b/examples/App.vue @@ -4,6 +4,10 @@
+
+ + +
{{ item.name }}
@@ -22,7 +26,16 @@ const navList = ref([ { name: 'TableTest1', routerLink: { name: 'TableTest1' } }, { name: 'TableTest2', routerLink: { name: 'TableTest2' } }, { name: 'TableTest3', routerLink: { name: 'TableTest3' } }, - { name: 'GridTest', routerLink: { name: 'GridTest' } } + { name: 'TableTest4', routerLink: { name: 'TableTest4' } }, + { name: 'TableTest5', routerLink: { name: 'TableTest5' } }, + { name: 'TableTest6', routerLink: { name: 'TableTest6' } }, + { name: 'TableTest7', routerLink: { name: 'TableTest7' } }, + { name: 'TableTest8', routerLink: { name: 'TableTest8' } }, + { name: 'TableTest9', routerLink: { name: 'TableTest9' } }, + { name: 'GridTest', routerLink: { name: 'GridTest' } }, + { name: 'TestKeepTest1', routerLink: { name: 'TestKeepTest1' } }, + { name: 'TestKeepTest2', routerLink: { name: 'TestKeepTest2' } }, + { name: 'TestKeepTest3', routerLink: { name: 'TestKeepTest3' } } ]) const theme = ref((localStorage.getItem('VXE_THEME') as 'default' | 'dark') || 'default') @@ -33,6 +46,12 @@ const changeTheme = () => { VxeUI.setTheme(themeName) localStorage.setItem('VXE_THEME', themeName) } + +VxeUI.setLanguage((localStorage.getItem('VXE_LANGUAGE') as 'zh-CN' | 'en-US') || 'zh-CN') +const changeLang = (lang: 'zh-CN' | 'en-US') => { + VxeUI.setLanguage(lang) + localStorage.setItem('VXE_LANGUAGE', lang) +} - - -

两步快速演示问题:

-
-
1.将代码示例放到以下任意一个公开的在线链接中,运行起来(点击 fork,确保能复现问题,最后点击保存,将链接发群里即可)
- -
(注:必须提供能复现问题简单 Demo,不能放其他无关的代码)
- - -
2.将问题步骤与浏览器环境描述清楚即可
- - diff --git a/styles/all.scss b/styles/all.scss index b6fcfb891a..6b73520603 100644 --- a/styles/all.scss +++ b/styles/all.scss @@ -1,7 +1,7 @@ -@import './base.scss'; +@use './base.scss'; -@import './components/column.scss'; -@import './components/colgroup.scss'; -@import './components/table.scss'; -@import './components/grid.scss'; -@import './components/toolbar.scss'; +@use './components/column.scss'; +@use './components/colgroup.scss'; +@use './components/table.scss'; +@use './components/grid.scss'; +@use './components/toolbar.scss'; diff --git a/styles/base.scss b/styles/base.scss index f353f25ca8..60eb34ae25 100644 --- a/styles/base.scss +++ b/styles/base.scss @@ -1,5 +1,5 @@ -@import './theme/light.scss'; -@import './theme/dark.scss'; +@use './theme/light.scss'; +@use './theme/dark.scss'; %boxSizing { box-sizing: border-box; diff --git a/styles/components/grid.scss b/styles/components/grid.scss index 268ad0f2d3..93e057ede2 100644 --- a/styles/components/grid.scss +++ b/styles/components/grid.scss @@ -1,5 +1,8 @@ .vxe-grid { position: relative; + overflow: auto; + display: flex; + flex-direction: column; &.is--loading { &:before { content: ""; @@ -40,6 +43,7 @@ .vxe-grid--right-wrapper { flex-shrink: 0; overflow: auto; + outline: 0; } .vxe-grid--table-wrapper { flex-grow: 1; @@ -47,6 +51,24 @@ } } +.vxe-grid--layout-body-wrapper { + display: flex; + flex-direction: row; + overflow: auto; + flex-grow: 1; +} +.vxe-grid--layout-body-content-wrapper { + flex-grow: 1; + overflow: auto; +} +.vxe-grid--layout-header-wrapper, +.vxe-grid--layout-footer-wrapper, +.vxe-grid--layout-aside-left-wrapper, +.vxe-grid--layout-aside-left-wrapper { + flex-shrink: 0; + overflow: auto; +} + .vxe-grid { font-size: var(--vxe-ui-font-size-default); &.size--medium { diff --git a/styles/components/icon.scss b/styles/components/icon.scss new file mode 100644 index 0000000000..2c8c2758c9 --- /dev/null +++ b/styles/components/icon.scss @@ -0,0 +1,205 @@ +@use "sass:map"; +@use "sass:list"; +@use './old-icon.scss'; + +@font-face { + font-family: "vxetableiconfont"; + src: + url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'); +} + +@keyframes rollCircle { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +$btnThemeList: ( + ( + name: "primary", + textColor: var(--vxe-ui-font-primary-color), + ), + ( + name: "success", + textColor: var(--vxe-ui-status-success-color), + ), + ( + name: "info", + textColor: var(--vxe-ui-status-info-color), + ), + ( + name: "warning", + textColor: var(--vxe-ui-status-warning-color), + ), + ( + name: "danger", + textColor: var(--vxe-ui-status-danger-color), + ), + ( + name: "error", + textColor: var(--vxe-ui-status-error-color), + ) +); + +[class*="vxe-table-icon-"] { + font-family: "vxetableiconfont" !important; + font-style: normal; + font-weight: 400; + font-size: 1.1em; + line-height: 1em; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + &.animat, + &.roll { + display: inline-block; + } + &.animat { + transition: transform 0.25s ease-in-out; + } + &.rotate45 { + transform: rotate(45deg); + } + &.rotate90 { + transform: rotate(90deg); + } + &.rotate180 { + transform: rotate(180deg); + } + &.roll { + animation: rollCircle 1s infinite linear; + } + @for $index from 0 to list.length($btnThemeList) { + $item: list.nth($btnThemeList, $index + 1); + &.theme--#{map.get($item, name)} { + color: map.get($item, textColor); + } + } +} + +.vxe-table-icon-add-sub:before { + content: "\e6bc"; +} + +.vxe-table-icon-swap:before { + content: "\e7f3"; +} + +.vxe-table-icon-sort:before { + content: "\e93e"; +} + +.vxe-table-icon-no-drop:before { + content: "\e658"; +} + +.vxe-table-icon-edit:before { + content: "\e66e"; +} + +.vxe-table-icon-question-circle-fill:before { + content: "\e690"; +} + +.vxe-table-icon-radio-checked:before { + content: "\e75b"; +} + +.vxe-table-icon-radio-checked-fill:before { + content: "\e763"; +} + +.vxe-table-icon-print:before { + content: "\eba0"; +} + +.vxe-table-icon-checkbox-checked-fill:before { + content: "\e67d"; +} + +.vxe-table-icon-custom-column:before { + content: "\e62d"; +} + +.vxe-table-icon-radio-unchecked:before { + content: "\e7c9"; +} + +.vxe-table-icon-caret-down:before { + content: "\e8ed"; +} + +.vxe-table-icon-caret-up:before { + content: "\e8ee"; +} + +.vxe-table-icon-caret-right:before { + content: "\e8ef"; +} + +.vxe-table-icon-caret-left:before { + content: "\e8f0"; +} + +.vxe-table-icon-fullscreen:before { + content: "\e70e"; +} + +.vxe-table-icon-minimize:before { + content: "\e749"; +} + +.vxe-table-icon-checkbox-unchecked:before { + content: "\e727"; +} + +.vxe-table-icon-funnel:before { + content: "\e8ec"; +} + +.vxe-table-icon-download:before { + content: "\e61a"; +} + +.vxe-table-icon-spinner:before { + content: "\e601"; +} + +.vxe-table-icon-arrow-right:before { + content: "\e743"; +} + +.vxe-table-icon-repeat:before { + content: "\ea4a"; +} + +.vxe-table-icon-drag-handle:before { + content: "\e64e"; +} + +.vxe-table-icon-checkbox-indeterminate-fill:before { + content: "\e8c4"; +} + +.vxe-table-icon-upload:before { + content: "\e683"; +} + +.vxe-table-icon-fixed-left-fill:before { + content: "\e9b9"; +} + +.vxe-table-icon-fixed-left:before { + content: "\e9ba"; +} + +.vxe-table-icon-fixed-right-fill:before { + content: "\f290"; +} + +.vxe-table-icon-fixed-right:before { + content: "\f291"; +} + diff --git a/styles/components/old-icon.scss b/styles/components/old-icon.scss new file mode 100644 index 0000000000..44eb7940fe --- /dev/null +++ b/styles/components/old-icon.scss @@ -0,0 +1,715 @@ +[class*="vxe-icon--"] { + display: inline-block; + vertical-align: middle; + position: relative; + direction: ltr; + font-family: Verdana,Arial,Tahoma; + font-weight: normal; + user-select: none; + &.rotate45 { + transform: rotate(45deg); + } + &.rotate90 { + transform: rotate(90deg); + } + &.rotate180 { + transform: rotate(180deg); + } +} + +%DefaultWidthHeight { + width: 1em; + height: 1em; + line-height: 1em; +} + +%PseudoClass { + content: ""; + position: absolute; +} + +.vxe-icon--square { + @extend %DefaultWidthHeight; + &:before { + @extend %PseudoClass; + left: 0.05em; + top: 0.05em; + width: 0.9em; + height: 0.9em; + border-width: 0.1em; + border-style: solid; + border-color: inherit; + } +} + +.vxe-icon--zoomin { + @extend %DefaultWidthHeight; + border-width: 0.1em; + border-style: solid; + border-color: inherit; + background-color: var(--vxe-ui-layout-background-color); + &:before, + &:after { + @extend %PseudoClass; + background-color: inherit; + } + &:before { + left: -0.1em; + top: 0.2em; + width: 1.1em; + height: 0.4em; + } + &:after { + top: -0.1em; + left: 0.2em; + width: 0.4em; + height: 1.1em; + } +} + +.vxe-icon--zoomout { + @extend %DefaultWidthHeight; + position: relative; + &:before { + @extend %PseudoClass; + right: 0; + top: 0; + width: 0.7em; + height: 0.7em; + border-width: 0.1em; + border-style: solid; + border-color: inherit; + } + &:after { + @extend %PseudoClass; + left: 0.1em; + bottom: 0.1em; + width: 0.7em; + height: 0.7em; + border-width: 0.1em; + border-style: solid; + border-color: inherit; + background-color: var(--vxe-ui-layout-background-color); + } +} + +.vxe-icon--menu { + $yOffset: 0.36em; + @extend %DefaultWidthHeight; + &:before { + content: ""; + display: inline-block; + width: 0.22em; + height: 0.22em; + box-shadow: 0 -#{$yOffset} 0, -#{$yOffset} -#{$yOffset} 0, #{$yOffset} -#{$yOffset} 0, 0 0 0 1em inset, -#{$yOffset} 0 0, #{$yOffset} 0 0, 0 #{$yOffset} 0, -#{$yOffset} #{$yOffset} 0, #{$yOffset} #{$yOffset} 0; + margin: 0.26em; + } +} + +%Caret { + @extend %DefaultWidthHeight; + &:before { + @extend %PseudoClass; + border-width: 0.4em; + border-style: solid; + border-color: transparent; + } +} + +.vxe-icon--caret-top { + @extend %Caret; + &:before { + left: 0.1em; + bottom: 0.3em; + border-bottom-color: inherit; + } +} + +.vxe-icon--caret-bottom { + @extend %Caret; + &:before { + left: 0.1em; + top: 0.3em; + border-top-color: inherit; + } +} + +.vxe-icon--caret-left { + @extend %Caret; + &:before { + right: 0.3em; + bottom: 0.1em; + border-right-color: inherit; + } +} + +.vxe-icon--caret-right { + @extend %Caret; + &:before { + left: 0.3em; + bottom: 0.1em; + border-left-color: inherit; + } +} + +%BeforeArrowTop { + &:before { + @extend %PseudoClass; + top: 0.32em; + left: 0.12em; + width: 0.6em; + height: 0.6em; + border-width: 0.1em; + border-style: solid; + border-top-color: inherit; + border-right-color: inherit; + border-bottom-color: transparent; + border-left-color: transparent; + } +} + +.vxe-icon--arrow-top { + @extend %DefaultWidthHeight; + &:before { + @extend %PseudoClass; + top: 0.4em; + left: 0.14em; + width: 0.7em; + height: 0.7em; + border-width: 0.15em; + border-style: solid; + border-top-color: inherit; + border-right-color: inherit; + border-bottom-color: transparent; + border-left-color: transparent; + border-radius: 0.15em; + transform: rotate(-45deg); + } +} + +.vxe-icon--arrow-bottom { + @extend .vxe-icon--arrow-top; + &:before { + top: 0; + left: 0.14em; + transform: rotate(135deg); + } +} + +.vxe-icon--arrow-left { + @extend .vxe-icon--arrow-top; + &:before { + top: 0.18em; + left: 0.35em; + transform: rotate(-135deg); + } +} + +.vxe-icon--arrow-right { + @extend .vxe-icon--arrow-top; + &:before { + top: 0.18em; + left: 0; + transform: rotate(45deg); + } +} + +.vxe-icon--d-arrow-left { + @extend %DefaultWidthHeight; + &:before { + left: 0.15em; + } + &:after { + left: 0.58em; + } + &:before, + &:after { + @extend %PseudoClass; + top: 0.18em; + width: 0.7em; + height: 0.7em; + border-width: 0.15em; + border-style: solid; + border-top-color: inherit; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: inherit; + border-radius: 0.15em; + transform: rotate(-45deg); + } +} + +.vxe-icon--d-arrow-right { + @extend .vxe-icon--d-arrow-left; + &:before, + &:after { + transform: rotate(135deg); + } + &:before { + left: -0.25em; + } + &:after { + left: 0.18em; + } +} + +.vxe-icon--funnel { + @extend %DefaultWidthHeight; + &:before { + @extend %PseudoClass; + top: 0.05em; + left: 0; + border-width: 0.5em; + border-style: solid; + border-top-color: inherit; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: transparent; + } + &:after { + @extend %PseudoClass; + left: 0.41em; + top: 0.4em; + width: 0; + height: 0.5em; + border-width: 0 0.2em 0 0; + border-style: solid; + border-right-color: inherit; + } +} + +.vxe-icon--edit-outline { + @extend %DefaultWidthHeight; + &:before { + @extend %PseudoClass; + height: 0.84em; + width: 0.86em; + top: 0.1em; + left: 0.02em; + border-radius: 0.2em; + border-width: 0.1em; + border-style: solid; + border-color: inherit; + } + &:after { + @extend %PseudoClass; + left: 0.6em; + bottom: 0.2em; + width: 0; + height: 0.8em; + border-radius: 0 0 80% 80%; + border-width: 0 0 0 0.22em; + border-style: solid; + border-color: inherit; + transform: rotate(45deg); + } +} + +.vxe-icon--more { + @extend %DefaultWidthHeight; + &:before { + @extend %PseudoClass; + content: "..."; + top: 0; + left: 0.1em; + line-height: 0.5em; + font-weight: 700; + } +} + +.vxe-icon--plus { + @extend %DefaultWidthHeight; + &:before { + @extend %PseudoClass; + content: "+"; + left: -0.12em; + bottom: -0.1em; + line-height: 1em; + font-size: 1.6em; + } +} + +.vxe-icon--check { + @extend %DefaultWidthHeight; + &:before { + @extend %PseudoClass; + left: 0.25em; + bottom: 0.2em; + width: 0.5em; + height: 0.9em; + border-width: 0.15em; + border-style: solid; + border-top-color: transparent; + border-right-color: inherit; + border-bottom-color: inherit; + border-radius: 0.15em; + border-left-color: transparent; + transform: rotate(45deg); + } +} + +.vxe-icon--close { + @extend %DefaultWidthHeight; + &:before { + @extend %PseudoClass; + content: "+"; + left: -0.1em; + bottom: -0.16em; + line-height: 1em; + font-size: 1.8em; + transform: rotate(45deg); + } +} + +.vxe-icon--minus { + @extend %DefaultWidthHeight; + &:before { + @extend %PseudoClass; + content: "\2500"; + left: 0; + bottom: 0; + width: 100%; + text-align: center; + line-height: 0.9em; + font-size: 1.2em; + } +} + +.vxe-icon--refresh { + @extend %DefaultWidthHeight; + border-width: 0.1em; + border-style: solid; + border-radius: 50%; + border-right-color: transparent !important; + border-left-color: transparent !important; + &:before { + left: 50%; + top: 0; + transform: translateX(50%) rotate(-45deg); + } + &:after { + right: 50%; + bottom: 0; + transform: translateX(-50%) rotate(135deg); + } + &:before, + &:after { + @extend %PseudoClass; + width: 0; + height: 0; + border-width: 0.25em; + border-style: solid; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: transparent; + } + &.roll { + animation: rollCircle 1s infinite linear; + } +} + +@keyframes rollCircle { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +%BeforeSolidRadius { + content: ""; + border-radius: 50%; + border-width: 0.5em; + border-style: solid; + border-color: inherit; + position: absolute; + top: 0; + left: 0; + transform: scale(0.95); +} + +%QuestionAndInfoWarning { + &:after { + @extend %PseudoClass; + left: 0; + bottom: 0; + width: 100%; + text-align: center; + color: var(--vxe-ui-layout-background-color); + transform: rotate(-10deg) scale(0.75); + } +} + +.vxe-icon--question { + @extend %DefaultWidthHeight, %QuestionAndInfoWarning; + &:before { + @extend %BeforeSolidRadius; + } + &:after { + content: "\3F"; + } +} + +.vxe-icon--info { + @extend %DefaultWidthHeight, %QuestionAndInfoWarning; + &:before { + @extend %BeforeSolidRadius; + } + &:after { + content: "\A1"; + } +} + +.vxe-icon--warning { + @extend %DefaultWidthHeight, %QuestionAndInfoWarning; + &:before { + @extend %BeforeSolidRadius; + } + &:after { + content: "\21"; + } +} + +.vxe-icon--success { + @extend %DefaultWidthHeight; + &:before { + @extend %BeforeSolidRadius; + } + &:after { + @extend %PseudoClass; + content: "\2713"; + left: 0.25em; + bottom: 0; + color: var(--vxe-ui-layout-background-color); + font-size: 0.65em; + } +} + +.vxe-icon--circle-plus { + @extend %DefaultWidthHeight; + &:before { + @extend %BeforeSolidRadius; + } + &:after { + @extend %PseudoClass; + content: "+"; + left: 0; + bottom: 0; + width: 100%; + text-align: center; + color: var(--vxe-ui-layout-background-color); + line-height: 1.4em; + font-size: 0.8em; + } +} + +.vxe-icon--remove { + @extend %DefaultWidthHeight; + &:before { + @extend %BeforeSolidRadius; + } + &:after { + @extend %PseudoClass; + content: "\2500"; + left: 0; + bottom: 0; + width: 100%; + text-align: center; + line-height: 1.5em; + color: var(--vxe-ui-layout-background-color); + font-size: 0.7em; + } +} + +.vxe-icon--error { + @extend %DefaultWidthHeight; + &:before { + @extend %BeforeSolidRadius; + } + &:after { + @extend %PseudoClass; + content: "\D7"; + left: 0; + bottom: 0; + width: 100%; + line-height: 1.4em; + text-align: center; + color: var(--vxe-ui-layout-background-color); + font-size: 0.8em; + } +} + +.vxe-icon--upload, +.vxe-icon--download { + @extend %DefaultWidthHeight; + overflow: hidden; + &:before { + @extend %PseudoClass; + left: 0; + width: 1em; + border-width: 0; + border-style: solid; + border-color: inherit; + } + &:after { + @extend %PseudoClass; + width: 100%; + text-align: center; + font-size: 2em; + } +} + +.vxe-icon--upload { + &:before { + top: 0.1em; + border-top-width: 0.1em; + } + &:after { + content: "\2191"; + left: 0; + top: 0.15em; + } +} + +.vxe-icon--download { + &:before { + bottom: 0.05em; + border-bottom-width: 0.1em; + } + &:after { + content: "\2191"; + left: 0; + bottom: 0.15em; + transform: rotate(180deg); + } +} + +.vxe-icon--eye, +.vxe-icon--eye-slash { + @extend %DefaultWidthHeight; + &:before { + @extend %PseudoClass; + content: "\25CF"; + top: 0.16em; + left: 0; + width: 1em; + height: 0.68em; + line-height: 0.25em; + border-radius: 50%; + border-width: 0.1em; + border-style: solid; + border-color: inherit; + text-align: center; + } +} + +.vxe-icon--eye-slash { + &:after { + @extend %PseudoClass; + top: -0.1em; + left: 0.45em; + width: 0; + height: 1.2em; + border-width: 0; + border-style: solid; + border-color: inherit; + border-left-width: 0.1em; + transform: rotate(45deg); + } +} + +.vxe-icon--calendar { + @extend %DefaultWidthHeight; + &:before { + @extend %PseudoClass; + top: 0.15em; + left: 0; + width: 1em; + height: 0.8em; + border-width: 0.2em 0.1em 0.1em 0.1em; + border-radius: 0.1em 0.1em 0 0; + border-style: solid; + border-color: inherit; + } + &:after { + @extend %PseudoClass; + left: 0.2em; + top: 0; + width: 0.6em; + height: 0.3em; + border-width: 0 0.1em; + border-style: solid; + border-color: inherit; + } +} + +.vxe-icon--dot { + @extend %DefaultWidthHeight; + &:before { + @extend %PseudoClass; + top: 0.25em; + left: 0.25em; + border-radius: 50%; + border-width: 0.25em; + border-style: solid; + border-color: inherit; + } +} + +.vxe-icon--print { + @extend %DefaultWidthHeight; + box-shadow: inset 0 0 0 0.1em; + border-width: 0.2em 0; + border-style: solid; + border-color: transparent !important; + border-radius: 0.3em 0.3em 0 0; + &:before { + @extend %PseudoClass; + width: 0.6em; + height: 0.3em; + top: -0.2em; + left: 0.2em; + box-shadow: inset 0 0 0 0.1em; + } + &:after { + @extend %PseudoClass; + width: 0.6em; + height: 0.6em; + left: 0.2em; + bottom: -0.2em; + box-shadow: inset 0 0 0 0.1em; + background-color: var(--vxe-ui-layout-background-color); + } +} + +.vxe-icon--search { + @extend %DefaultWidthHeight; + &:before { + @extend %PseudoClass; + top: 0; + left: 0; + width: 0.8em; + height: 0.8em; + border-width: 0.15em; + border-style: solid; + border-color: inherit; + border-radius: 50%; + } + &:after { + @extend %PseudoClass; + top: 0.75em; + left: 0.6em; + width: 0.35em; + height: 0; + border-width: 0.15em 0 0 0; + border-style: solid; + border-color: inherit; + transform: rotate(45deg); + } +} + +// 已废弃 +.vxe-icon-warnion-circle-fill:before { + content: "\e848"; +} diff --git a/styles/components/table-module/all.scss b/styles/components/table-module/all.scss index c4bb23dafb..34f4275825 100644 --- a/styles/components/table-module/all.scss +++ b/styles/components/table-module/all.scss @@ -1,7 +1,7 @@ -@import './custom.scss'; -@import './edit.scss'; -@import './export.scss'; -@import './filter.scss'; -@import './keyboard.scss'; -@import './menu.scss'; -@import './validator.scss'; \ No newline at end of file +@use './custom.scss'; +@use './edit.scss'; +@use './export.scss'; +@use './filter.scss'; +@use './keyboard.scss'; +@use './menu.scss'; +@use './validator.scss'; \ No newline at end of file diff --git a/styles/components/table-module/custom.scss b/styles/components/table-module/custom.scss index 3729492322..e9784a0a58 100644 --- a/styles/components/table-module/custom.scss +++ b/styles/components/table-module/custom.scss @@ -1,9 +1,12 @@ -@import '../../helpers/mixin.scss'; +@use '../../helpers/baseMixin.scss'; .vxe-table-custom--option { position: relative; display: flex; flex-direction: row; + &.active--drag-origin { + opacity: 0.5; + } &.active--drag-target { &[drag-pos="top"] { &::after { @@ -38,7 +41,7 @@ position: absolute; left: -1px; width: calc(100% + 1px); - height: 3px; + height: 2px; background-color: var(--vxe-ui-font-primary-color); z-index: 12; } @@ -91,29 +94,26 @@ } } -.vxe-table-custom--list-wrapper { +.vxe-table-custom--body { + position: relative; display: block; flex-grow: 1; overflow-x: hidden; overflow-y: auto; } -.vxe-table-custom--header, -.vxe-table-custom--body { +.vxe-table-custom--panel-list { list-style-type: none; margin: 0; padding: 0; & > li { max-width: 26em; - min-width: 17em; + min-width: 18em; padding: 0.2em 1em 0.2em 1em; @for $i from 2 through 8 { - $interval: $i - 1 + 0.2; + $interval: $i - 1 + 0.5; &.level--#{$i}{ - padding-left: #{$interval + 2.3}em; - .vxe-checkbox--icon { - left: #{$interval + 0.6}em; - } + padding-left: #{$interval + 1.2}em; } } } @@ -127,8 +127,7 @@ user-select: none; } -.vxe-table-custom--body { - padding: 0.2em 0; +.vxe-table-custom--panel-list { .vxe-table-custom--checkbox-option { &:hover { background-color: var(--vxe-ui-table-row-hover-background-color); @@ -136,31 +135,20 @@ } } -.vxe-table-custom--footer { +.vxe-table-custom--footer-buttons { + width: 100%; display: flex; flex-direction: row; flex-shrink: 0; border-top: 1px solid var(--vxe-ui-base-popup-border-color); - text-align: right; button { - background-color: transparent; - width: 50%; + flex-grow: 1; height: 2.8em; - border: 0; - color: var(--vxe-ui-font-color); - text-align: center; - cursor: pointer; - &:focus { - outline: none; - } - &:hover { - color: var(--vxe-ui-font-primary-color); - } } } .vxe-table-custom--checkbox-option { - @include createCheckboxIcon(); + @include baseMixin.createCheckboxIcon(); } .vxe-table-custom--checkbox-option, .vxe-table-custom--sort-option { @@ -177,11 +165,26 @@ .vxe-table-custom--sort-btn { padding-left: 0.2em; padding-right: 0.4em; - cursor: grabbing; - &:hover { - color: var(--vxe-ui-font-primary-color); + &:not(.is--disabled) { + cursor: grab; + &:active { + cursor: grabbing; + } + &:hover { + color: var(--vxe-ui-font-primary-color); + } + } + &.is--disabled { + color: var(--vxe-ui-input-disabled-color); + cursor: not-allowed; } } +.vxe-table-custom--name-option { + flex-grow: 1; + display: flex; + flex-direction: row; + overflow: hidden; +} .vxe-table-custom--checkbox-label { flex-grow: 1; overflow: hidden; @@ -198,25 +201,11 @@ user-select: none; } -.vxe-table-custom--fixed-left-option, -.vxe-table-custom--fixed-right-option { - line-height: 1.34em; - font-size: 1.1em; - padding: 0 0.2em; - cursor: pointer; - &.is--checked, - &:hover { - color: var(--vxe-ui-font-primary-color); - } - &.is--disabled { - cursor: no-drop; - color: var(--vxe-ui-input-disabled-color); - } -} - .vxe-table-custom-popup--body { + position: relative; overflow: auto; height: 100%; + outline: 0; } .vxe-table-custom-popup--table-wrapper { @@ -263,13 +252,43 @@ } } -.vxe-table-custom-popup--drag-hint { +/*拖拽列*/ +.vxe-table-custom-popup--drag-line { + display: none; + position: absolute; + top: 0; + left: 0; + z-index: 11; + pointer-events: none; +} +.vxe-table-custom-popup--drag-line { + width: 100%; + height: 1px; + border: 2px solid transparent; + &[drag-pos="top"] { + border-top-color: var(--vxe-ui-font-primary-color); + } + &[drag-pos="bottom"] { + border-bottom-color: var(--vxe-ui-font-primary-color); + } + &[drag-to-child="y"] { + border-top-color: transparent; + border-bottom-color: transparent; + border-left-color: var(--vxe-ui-status-success-color); + } + &.is--guides { + background-color: var( --vxe-ui-table-drag-over-background-color); + } +} + +.vxe-table-custom-popup--drag-tip { display: none; position: absolute; top: 0; left: 0; - padding: 0.6em 1em 0.6em 1.8em; - max-width: 300px; + padding: 0.6em 1.4em; + max-width: 50%; + min-width: 100px; border-radius: var(--vxe-ui-border-radius); overflow: hidden; text-overflow: ellipsis; @@ -279,9 +298,53 @@ background-color: var(--vxe-ui-layout-background-color); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); z-index: 33; + &[drag-status="normal"] { + .vxe-table-custom-popup--drag-tip-normal-status { + display: block; + } + } + &[drag-status="sub"] { + .vxe-table-custom-popup--drag-tip-sub-status { + display: block; + } + } + &[drag-status="disabled"] { + .vxe-table-custom-popup--drag-tip-disabled-status { + display: block; + } + } +} +.vxe-table-custom-popup--drag-tip-wrapper { + display: flex; + flex-direction: row; + align-items: center; +} +.vxe-table-custom-popup--drag-tip-status { + padding-right: 0.4em; +} +.vxe-table-custom-popup--drag-tip-disabled-status { + display: none; + flex-shrink: 0; + color: var(--vxe-ui-status-error-color) +} +.vxe-table-custom-popup--drag-tip-normal-status, +.vxe-table-custom-popup--drag-tip-sub-status { + display: none; +} +.vxe-table-custom-popup--drag-tip-content { + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .vxe-table-custom-popup--name { + display: flex; + flex-direction: row; + align-items: center; +} +.vxe-table-custom-popup--title { + flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -300,20 +363,25 @@ .vxe-table-custom-popup--column-item { position: relative; - &.col--sort, &.col--visible, &.col--resizable, &.col--fixed { text-align: center; } &.col--resizable { - & > .vxe-input { + & > .vxe-input, + & > .vxe-number-input { width: 100%; } } } .vxe-table-custom-popup--row { + &.active--drag-origin { + .vxe-table-custom-popup--column-item { + opacity: 0.5; + } + } &.active--drag-target { &[drag-pos="top"] { .vxe-table-custom-popup--column-item { @@ -359,7 +427,7 @@ position: absolute; left: -1px; width: calc(100% + 1px); - height: 3px; + height: 2px; background-color: var(--vxe-ui-font-primary-color); z-index: 12; } @@ -371,18 +439,29 @@ } .vxe-table-custom--list-move { - transition: transform 0.35s; + transition-property: transform; + transition-duration: 0.35s; + transition-delay: 0.05s; } +.vxe-table-custom-popup--column-sort-placeholder { + padding: 0.2em 0.5em; +} .vxe-table-custom-popup--column-sort-btn { font-size: 1.2em; padding: 0.2em 0.5em; - cursor: grab; - &:hover { - color: var(--vxe-ui-font-primary-color); + &:not(.is--disabled) { + cursor: grab; + &:hover { + color: var(--vxe-ui-font-primary-color); + } + &:active { + cursor: grabbing; + } } - &:active { - cursor: grabbing; + &.is--disabled { + color: var(--vxe-ui-input-disabled-color); + cursor: not-allowed; } } @@ -394,3 +473,19 @@ margin-left: 5px; cursor: help; } + +.vxe-table-custom-popup--table-col-seq { + width: 80px; +} +.vxe-table-custom-popup--table-col-sort { + width: 80px; +} +.vxe-table-custom-popup--table-col-title { + min-width: 120px; +} +.vxe-table-custom-popup--table-col-width { + width: 140px; +} +.vxe-table-custom-popup--table-col-fixed { + width: 200px; +} \ No newline at end of file diff --git a/styles/components/table-module/export.scss b/styles/components/table-module/export.scss index 99520b0226..8dec0c7fde 100644 --- a/styles/components/table-module/export.scss +++ b/styles/components/table-module/export.scss @@ -1,10 +1,11 @@ -@import '../../helpers/mixin.scss'; +@use '../../helpers/baseMixin.scss'; -.vxe-export--panel-column > ul { +.vxe-table-export--panel-column > ul { list-style-type: none; overflow: auto; margin: 0; padding: 0; + outline: 0; user-select: none; & > li { overflow: hidden; @@ -14,8 +15,8 @@ } } -.vxe-export--panel { - & > table { +.vxe-table-export--panel { + .vxe-table-export--panel-table { width: 100%; border: 0; table-layout: fixed; @@ -35,13 +36,13 @@ & > .vxe-select { width: 80%; } - & > .vxe-export--panel-option-row { + & > .vxe-table-export--panel-option-row { padding: 0.25em 0; } } } } - .vxe-export--panel-column { + .vxe-table-export--panel-column { width: 80%; border: 1px solid var(--vxe-ui-input-border-color); margin: 3px 0; @@ -61,19 +62,26 @@ } } } - .vxe-export--panel-column-header { + .vxe-table-export--panel-column-header { padding: 0.1em 0; background-color: var(--vxe-ui-table-header-background-color); font-weight: 700; border-bottom: 1px solid var(--vxe-ui-table-border-color); } - .vxe-export--panel-column-body { + .vxe-table-export--panel-column-body { padding: 0.2em 0; min-height: 10em; max-height: 17.6em; } } - .vxe-import-selected--file { + .vxe-table-export--panel-btns { + text-align: right; + padding: 0.8em 0.25em 0.25em 0.25em; + } +} + +.vxe-table-export--panel { + .vxe-table-export--selected--file { padding-right: 40px; position: relative; overflow: hidden; @@ -90,13 +98,14 @@ cursor: pointer; } &:hover { + color: var(--vxe-ui-font-primary-color); & > i { display: block; } - color: var(--vxe-ui-font-primary-color); } } - .vxe-import-select--file { + .vxe-table-export--select--file { + width: 80%; border: 1px dashed var(--vxe-ui-input-border-color); padding: 6px 34px; outline: 0; @@ -114,12 +123,8 @@ border-color: var(--vxe-ui-font-primary-color); } } - .vxe-export--panel-btns { - text-align: right; - padding: 0.25em; - } } -.vxe-export--panel-column-option { - @include createCheckboxIcon(); +.vxe-table-export--panel-column-option { + @include baseMixin.createCheckboxIcon(); } diff --git a/styles/components/table-module/filter.scss b/styles/components/table-module/filter.scss index 022452f4ed..9a2999ab52 100644 --- a/styles/components/table-module/filter.scss +++ b/styles/components/table-module/filter.scss @@ -1,4 +1,4 @@ -@import '../../helpers/mixin.scss'; +@use '../../helpers/baseMixin.scss'; .vxe-cell--filter { padding: 0 0.1em 0 0.2em; @@ -36,7 +36,7 @@ border-radius: var(--vxe-ui-border-radius); background-color: var(--vxe-ui-layout-background-color); border: 1px solid var(--vxe-ui-base-popup-border-color); - box-shadow: 0 1px 6px rgba(0,0,0,.2); + box-shadow: var(--vxe-ui-base-popup-box-shadow); z-index: 10; &:not(.is--multiple) { text-align: center; @@ -72,6 +72,7 @@ list-style-type: none; padding: 0; margin: 0; + outline: 0; overflow: auto; user-select: none; } @@ -107,5 +108,5 @@ } .vxe-table--filter-option { - @include createCheckboxIcon(); + @include baseMixin.createCheckboxIcon(); } diff --git a/styles/components/table-module/menu.scss b/styles/components/table-module/menu.scss index 2fc0dec14e..8857f06aa9 100644 --- a/styles/components/table-module/menu.scss +++ b/styles/components/table-module/menu.scss @@ -19,46 +19,28 @@ background-color: var(--vxe-ui-table-menu-background-color); } .vxe-context-menu--link { - display: block; - padding: 0 2.5em; + display: flex; + flex-direction: row; width: var(--vxe-ui-table-menu-item-width); line-height: 26px; + padding: 0 0.8em; color: var(--vxe-ui-font-color); cursor: pointer; .vxe-context-menu--link-prefix, .vxe-context-menu--link-suffix { - position: absolute; - top: 5px; - margin-right: 5px; - font-size: 16px; - } - .vxe-context-menu--link-prefix { - left: 5px; - } - .vxe-context-menu--link-suffix { - right: 5px; - &.suffix--haschild { - top: 8px; - &:before { - position: absolute; - content: ""; - border: 4px solid transparent; - border-left-color: #727272; - } - } + min-width: 2em; + flex-shrink: 0; + text-align: center; + padding: 0 0.2em; } .vxe-context-menu--link-content { - display: block; + flex-grow: 1; + padding: 0 0.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } -.vxe-table--context-menu-clild-wrapper { - .vxe-context-menu--link { - padding: 0 2em 0 2.5em; - } -} .vxe-context-menu--option-wrapper, .vxe-table--context-menu-clild-wrapper { margin: 0; diff --git a/styles/components/table.scss b/styles/components/table.scss index dfcf4089f7..ff27a72879 100644 --- a/styles/components/table.scss +++ b/styles/components/table.scss @@ -1,27 +1,33 @@ -@import '../helpers/mixin.scss'; -@import './table-module/all.scss'; - -%DefaultColumnHeight { - height: var(--vxe-ui-table-row-height-default); -} - -%MediumColumnHeight { - height: var(--vxe-ui-table-row-height-medium); -} - -%SmallColumnHeight { - height: var(--vxe-ui-table-row-height-small); -} - -%MiniColumnHeight { - height: var(--vxe-ui-table-row-height-mini); -} +@use '../helpers/baseMixin.scss'; +@use './icon.scss'; +@use './table-module/all.scss'; .vxe-table-slots, .vxe-table--file-form { display: none; } +.vxe-table-vars { + height: 0; + width: 0; + visibility: hidden; + overflow: hidden; + user-select: none; + pointer-events: none; + .vxe-table-var-default { + height: var(--vxe-ui-table-row-height-default); + } + .vxe-table-var-medium { + height: var(--vxe-ui-table-row-height-medium); + } + .vxe-table-var-small { + height: var(--vxe-ui-table-row-height-small); + } + .vxe-table-var-mini { + height: var(--vxe-ui-table-row-height-mini); + } +} + .vxe-table--print-frame { position: fixed; bottom: -100%; @@ -30,22 +36,139 @@ width: 0; border: 0; } -.vxe-table--render-wrapper { +.vxe-table--layout-wrapper { + display: flex; + flex-direction: row; background-color: var(--vxe-ui-layout-background-color); } -.vxe-table--body-wrapper { - scroll-behavior: auto; +.vxe-table--viewport-wrapper { + position: relative; + overflow: hidden; + flex-grow: 1; } +.vxe-table--header-wrapper, .vxe-table--body-wrapper, +.vxe-table--footer-wrapper, .vxe-table--fixed-left-body-wrapper, .vxe-table--fixed-right-body-wrapper { - overflow-y: auto; - overflow-x: auto; + overflow: hidden; + outline: 0; + scrollbar-width: none; +} +.vxe-table--header-inner-wrapper, +.vxe-table--body-inner-wrapper, +.vxe-table--footer-inner-wrapper { + position: relative; + width: 100%; + height: 100%; + scrollbar-width: none; + -ms-overflow-style: none; + &::-webkit-scrollbar { + display: none; + } +} +.vxe-table--header-inner-wrapper, +.vxe-table--footer-inner-wrapper { + overflow-y: hidden; + overflow-x: scroll; +} +.vxe-table--body-inner-wrapper { + overflow-y: scroll; + overflow-x: scroll; +} + +.vxe-loading--custom-wrapper { + display: none; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 99; + user-select: none; + &.is--visible { + display: block; + } } /*默认的渲染*/ +.vxe-header--column, +.vxe-footer--column { + &.fixed--width { + & > .vxe-cell { + & > .vxe-cell--wrapper { + .vxe-default-input, + .vxe-default-textarea, + .vxe-default-select { + width: 100%; + } + .vxe-input, + .vxe-textarea, + .vxe-select, + .vxe-tree-select, + .vxe-date-picker, + .vxe-number-input, + .vxe-ico-picker { + width: 100%; + } + } + } + } +} +.vxe-body--column { + &.fixed--width { + & > .vxe-cell { + & > .vxe-cell--wrapper { + & > .vxe-default-input, + & > .vxe-default-textarea, + & > .vxe-default-select { + width: 100%; + } + & > .vxe-input, + & > .vxe-textarea, + & > .vxe-select, + & > .vxe-tree-select, + & > .vxe-date-picker, + & > .vxe-number-input, + & > .vxe-ico-picker { + width: 100%; + } + & > .vxe-cell--tree-node { + .vxe-default-input, + .vxe-default-textarea, + .vxe-default-select, + .vxe-input, + .vxe-textarea, + .vxe-select, + .vxe-tree-select, + .vxe-date-picker, + .vxe-number-input, + .vxe-ico-picker { + width: 100%; + } + } + } + } + } +} +.vxe-table--filter-template { + & > .vxe-default-input, + & > .vxe-default-textarea, + & > .vxe-default-select { + width: 100%; + } + & > .vxe-input, + & > .vxe-textarea, + & > .vxe-select, + & > .vxe-tree-select, + & > .vxe-date-picker, + & > .vxe-number-input, + & > .vxe-ico-picker { + width: 100%; + } +} .vxe-cell, -.vxe-table--filter-wrapper { +.vxe-table--filter-template { .vxe-default-input, .vxe-default-textarea { background-color: var(--vxe-ui-layout-background-color); @@ -53,9 +176,8 @@ .vxe-default-input, .vxe-default-textarea, .vxe-default-select { + font-family: var(--vxe-ui-font-family); outline: 0; - padding: 0 2px; - width: 100%; color: var(--vxe-ui-font-color); border-radius: var(--vxe-ui-border-radius); border: 1px solid var(--vxe-ui-input-border-color); @@ -85,43 +207,89 @@ } } .vxe-default-textarea { + font-size: 1em; resize: none; vertical-align: middle; } - .vxe-input, - .vxe-textarea, - .vxe-select { - width: 100%; - display: block; - } - .vxe-input > .vxe-input--inner, - .vxe-textarea > .vxe-textarea--inner { + & > .vxe-input > .vxe-input--inner, + & > .vxe-textarea > .vxe-textarea--inner { padding: 0 2px; } - .vxe-textarea--inner, - .vxe-default-textarea { + & > .vxe-textarea--inner, + & > .vxe-default-textarea { resize: none; } + & > .vxe-cell--tree-node { + .vxe-input > .vxe-input--inner, + .vxe-textarea > .vxe-textarea--inner { + padding: 0 2px; + } + .vxe-textarea--inner, + .vxe-default-textarea { + resize: none; + } + } +} +.vxe-body--column { + &.col--vertical-top { + &.col--active { + & > .vxe-cell { + & > .vxe-cell--wrapper { + height: 100%; + & > .vxe-default-textarea { + height: 100%; + } + } + } + } + } +} +/*行高*/ +.vxe-table { + &:not([data-calc-row]) { + .vxe-body--column { + &.col--vertical-top { + &:not(.col--active) { + & > .vxe-cell { + & > .vxe-cell--wrapper { + min-height: 100%; + } + } + } + } + } + } } .vxe-table--checkbox-range, .vxe-table--cell-main-area, .vxe-table--cell-extend-area, .vxe-table--cell-active-area, -.vxe-table--cell-copy-area { +.vxe-table--cell-copy-area, +.vxe-table--cell-col-status-area, +.vxe-table--cell-row-status-area { display: none; position: absolute; pointer-events: none; z-index: 1; } +.vxe-table--header-wrapper { + .vxe-table--cell-col-status-area { + top: 0; + height: 100%; + } +} + .vxe-table--fixed-left-wrapper, .vxe-table--fixed-right-wrapper { .vxe-table--checkbox-range, .vxe-table--cell-main-area, .vxe-table--cell-extend-area, .vxe-table--cell-active-area, - .vxe-table--cell-copy-area { + .vxe-table--cell-copy-area, + .vxe-table--cell-col-status-area, + .vxe-table--cell-row-status-area { z-index: 2; } } @@ -187,6 +355,10 @@ .vxe-table--cell-extend-area { border: var(--vxe-ui-table-cell-extend-area-border-width) solid var(--vxe-ui-table-cell-extend-area-border-color); } + .vxe-table--cell-col-status-area, + .vxe-table--cell-row-status-area { + background-color: var(--vxe-ui-table-checkbox-range-background-color); + } } @keyframes moveCopyCellBorder { @@ -312,15 +484,168 @@ } } +/*列宽*/ +.vxe-table { + &[data-calc-col] { + .vxe-header--column, + .vxe-body--column, + .vxe-footer--column { + .vxe-cell { + & > .vxe-cell--wrapper { + word-break: break-all; + white-space: nowrap; + } + } + } + } + &:not([data-calc-col]) { + .vxe-cell--wrapper { + min-width: 100%; + } + } +} + +/*scroll*/ +.vxe-table { + &.is--loading { + & > .vxe-table--scroll-x-virtual { + visibility: hidden; + } + & > .vxe-table--layout-wrapper { + & > .vxe-table--scroll-y-virtual { + visibility: hidden; + } + } + } + .vxe-table--scroll-x-virtual { + height: 0; + } + .vxe-table--scroll-y-virtual { + width: 0; + } + .vxe-table--scroll-x-virtual, + .vxe-table--scroll-y-virtual { + visibility: hidden; + position: relative; + flex-shrink: 0; + z-index: 7; + } + .vxe-table--scroll-x-handle, + .vxe-table--scroll-y-handle, + .vxe-table--scroll-x-wrapper, + .vxe-table--scroll-y-wrapper, + .vxe-table--scroll-y-top-corner, + .vxe-table--scroll-y-bottom-corner, + .vxe-table--scroll-x-left-corner, + .vxe-table--scroll-x-right-corner { + position: absolute; + } + .vxe-table--scroll-x-handle, + .vxe-table--scroll-x-wrapper { + width: 100%; + left: 0; + bottom: 0; + } + .vxe-table--scroll-x-handle { + overflow-y: hidden; + overflow-x: scroll; + height: 18px; + } + .vxe-table--scroll-x-wrapper { + height: 100%; + } + .vxe-table--scroll-y-handle, + .vxe-table--scroll-y-wrapper { + width: 100%; + height: 100%; + right: 0; + top: 0; + } + .vxe-table--scroll-y-handle { + overflow-y: scroll; + overflow-x: hidden; + width: 18px; + height: 100%; + } + .vxe-table--scroll-x-space { + height: 1px; + } + .vxe-table--scroll-y-space { + width: 1px; + } + .vxe-table--scroll-x-left-corner, + .vxe-table--scroll-x-right-corner, + .vxe-table--scroll-y-top-corner, + .vxe-table--scroll-y-bottom-corner { + display: none; + position: absolute; + } + .vxe-table--scroll-x-left-corner, + .vxe-table--scroll-x-right-corner { + bottom: 0; + width: 0; + height: 100%; + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + border-width: var(--vxe-ui-table-border-width); + border-style: solid; + border-color: var(--vxe-ui-table-border-color); + } + } + .vxe-table--scroll-x-left-corner { + left: 0; + } + .vxe-table--scroll-x-right-corner { + right: 0; + } + &.sy-pos--right { + .vxe-table--scroll-x-right-corner { + right: 1px; + &::before { + border-right: 0; + } + } + } + &.sx-pos--bottom { + .vxe-table--scroll-x-right-corner { + bottom: 1px; + &::before { + border-bottom: 0; + } + } + } + .vxe-table--scroll-y-top-corner { + background-color: var(--vxe-ui-table-header-background-color); + } + .vxe-table--scroll-y-top-corner, + .vxe-table--scroll-y-bottom-corner { + top: 0; + right: 0; + width: 100%; + height: 0; + } + .vxe-table--scroll-y-bottom-corner { + margin-top: -1px; + } +} + /*header*/ .vxe-table { .vxe-table--header-wrapper { color: var(--vxe-ui-table-header-font-color); - .vxe-table--header-border-line { + &::after { + content: ""; position: absolute; left: 0; bottom: 0; height: 0; + width: 100%; border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color); } } @@ -366,7 +691,7 @@ .vxe-filter--btn { &:before, &:after { - @include createAnimationTransition(border); + @include baseMixin.createAnimationTransition(border); } } @@ -415,54 +740,77 @@ // vertical-align: middle; // } .vxe-cell--required-icon { - margin-right: 0.1em; + padding-right: 0.1em; } .vxe-cell--edit-icon, .vxe-cell-title-prefix-icon, .vxe-cell-title-suffix-icon { - margin-right: 0.2em; + padding: 0.2em; } .vxe-cell-title-prefix-icon, .vxe-cell-title-suffix-icon { cursor: help; } - .vxe-resizable { +} + +.vxe-cell--col-resizable { + position: absolute; + right: -0.3em; + bottom: 0; + width: 0.6em; + height: 100%; + text-align: center; + z-index: 1; + cursor: col-resize; + &.is--line { + &:before, + &:after { + content: ""; + display: inline-block; + vertical-align: middle; + } + &:before { + width: 1px; + height: 50%; + background-color: var(--vxe-ui-table-resizable-line-color); + } + &:after { + width: 0; + height: 100%; + } + } +} +.vxe-table--fixed-right-wrapper { + .vxe-cell--col-resizable { + right: auto; + left: -0.3em; + } +} + +.vxe-body--column { + .vxe-cell--row-resizable { position: absolute; - right: -7px; - bottom: 0; - width: 14px; - height: 100%; + left: 0; + bottom: -0.4em; + height: 0.8em; + width: 100%; text-align: center; z-index: 1; - cursor: col-resize; - &.is--line { - &:before, - &:after { - content: ""; - display: inline-block; - vertical-align: middle; - } - &:before { - width: 1px; - height: 50%; - background-color: var(--vxe-ui-table-resizable-line-color); - } - &:after { - width: 0; - height: 100%; - } - } + cursor: row-resize; } } -.vxe-table--fixed-right-wrapper { - .vxe-header--column { - .vxe-resizable { - right: auto; - left: -7px; +.vxe-body--row { + &:last-child { + .vxe-body--column { + .vxe-cell--row-resizable { + height: 0.4em; + bottom: -0px; + } } } } + /*table*/ .vxe-table--render-default { position: relative; @@ -471,14 +819,11 @@ font-family: var(--vxe-ui-font-family); direction: ltr; .vxe-table--body-wrapper { - table { - background-color: var(--vxe-ui-layout-background-color); - } + background-color: var(--vxe-ui-layout-background-color); } .vxe-table--footer-wrapper { - table { - background-color: var(--vxe-ui-table-footer-background-color); - } + margin-top: -1px; + background-color: var(--vxe-ui-table-footer-background-color); } .vxe-table--header, .vxe-table--body, @@ -488,16 +833,11 @@ border-collapse: separate; table-layout: fixed; } - .vxe-table--header-wrapper, - .vxe-table--footer-wrapper { - overflow-x: hidden; - overflow-y: hidden; - } &:not(.is--empty) { &.is--footer { &.is--scroll-x { .vxe-table--body-wrapper { - overflow-x: scroll; + outline: 0; } } } @@ -580,7 +920,7 @@ // } // } // } - &.drag--resize { + &.col-drag--resize { .vxe-table--main-wrapper, .vxe-table--fixed-left-wrapper, .vxe-table--fixed-right-wrapper { @@ -589,6 +929,15 @@ } } } + &.row-drag--resize { + .vxe-table--main-wrapper, + .vxe-table--fixed-left-wrapper, + .vxe-table--fixed-right-wrapper { + * { + cursor: row-resize; + } + } + } &.drag--range, &.drag--area { .vxe-table--main-wrapper, @@ -608,6 +957,24 @@ } } } + &.col--drag-cell { + .vxe-header--column { + user-select: none; + &.is--drag-active { + cursor: grab; + &:active { + cursor: grabbing; + } + &:hover { + color: var(--vxe-ui-font-primary-color); + } + } + &.is--drag-disabled { + color: var(--vxe-ui-input-disabled-color); + cursor: not-allowed; + } + } + } &.column--highlight { .vxe-header--column { &:not(.col--seq) { @@ -617,25 +984,34 @@ } } } - &.cell--area { - .vxe-body--row { + &.header-cell--area { + .vxe-table--header-wrapper { + user-select: none; + } + } + &.body-cell--area { + .vxe-table--body-wrapper { user-select: none; } } &.drag--range { - .vxe-cell--checkbox { + .vxe-body--column { user-select: none; } } + &.checkbox--range { + .vxe-body--column { + &.col--checkbox { + user-select: none; + } + } + } .vxe-header--column, .vxe-body--column, .vxe-footer--column { position: relative; line-height: var(--vxe-ui-table-row-line-height); text-align: left; - &:not(.col--ellipsis) { - padding: var(--vxe-ui-table-column-padding-default); - } &.col--current { background-color: var(--vxe-ui-table-column-current-background-color); // .vxe-tree--btn-wrapper { @@ -644,9 +1020,15 @@ } &.col--center { text-align: center; + & > .vxe-cell { + justify-content: center; + } } &.col--right { text-align: right; + & > .vxe-cell { + justify-content: right; + } } } // &.is--tree-line { @@ -682,22 +1064,126 @@ } &.border--default, &.border--full, - &.border--outer { - .vxe-table--header-wrapper { - background-color: var(--vxe-ui-table-header-background-color); - } - } - &.border--default, + &.border--outer, &.border--inner { - .vxe-header--column, - .vxe-body--column, - .vxe-footer--column { - background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)); - background-repeat: no-repeat; - background-size: 100% var(--vxe-ui-table-border-width); + .vxe-table--scroll-y-top-corner, + .vxe-table--scroll-y-bottom-corner { + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + border-width: 0; + border-style: solid; + border-color: var(--vxe-ui-table-border-color); + } + } + .vxe-table--scroll-y-top-corner { + &::before { + border-bottom-width: var(--vxe-ui-table-border-width); + } + } + .vxe-table--scroll-y-bottom-corner { + border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color); + } + .vxe-table--scroll-x-wrapper { + &::before, + &::after { + content: ""; + position: absolute; + left: 0; + width: 100%; + height: 0; + z-index: 1; + } + &::before { + top: 0; + border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color); + } + &::after { + bottom: 0; + border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color); + } + } + &.sx-pos--bottom { + .vxe-table--scroll-x-wrapper { + &::before { + top: -1px; + } + } + } + } + &.border--default, + &.border--full, + &.border--outer { + .vxe-table--header-wrapper { + background-color: var(--vxe-ui-table-header-background-color); + } + } + &.border--default, + &.border--inner { + .vxe-header--column, + .vxe-body--column, + .vxe-footer--column { + background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)); + background-repeat: no-repeat; + background-size: 100% var(--vxe-ui-table-border-width); background-position: right bottom; } } + &.border--default, + &.border--full { + .vxe-table--scroll-y-top-corner { + &::before { + border-left-width: var(--vxe-ui-table-border-width); + border-right-width: var(--vxe-ui-table-border-width); + } + } + .vxe-table--scroll-y-bottom-corner { + &::before { + border-left-width: var(--vxe-ui-table-border-width); + border-right-width: var(--vxe-ui-table-border-width); + } + } + &.sy-pos--right { + .vxe-table--scroll-y-top-corner, + .vxe-table--scroll-y-bottom-corner { + &::before { + width: calc(100% + 1px); + left: -1px; + } + } + } + .vxe-table--scroll-y-wrapper { + &::before, + &::after { + content: ""; + position: absolute; + top: 0; + width: 0; + height: 100%; + z-index: 1; + } + &::before { + left: 0; + border-left: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color); + } + &::after { + right: 0; + border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color); + } + } + &.sy-pos--right { + .vxe-table--scroll-y-wrapper { + &::before { + left: -1px; + } + } + } + } &.border--full { .vxe-header--column, .vxe-body--column, @@ -714,23 +1200,6 @@ } } } - &.border--default, - &.border--full, - &.border--outer, - &.border--inner { - .vxe-table--header-wrapper { - .vxe-header--row { - &:last-child { - .vxe-header--gutter { - background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)); - background-repeat: no-repeat; - background-size: 100% var(--vxe-ui-table-border-width); - background-position: right bottom; - } - } - } - } - } &.border--inner, &.border--none { .vxe-table--header-wrapper { @@ -749,8 +1218,10 @@ .vxe-table--border-line { display: none; } - .vxe-table--header-border-line { - display: none; + .vxe-table--header-wrapper { + &::after { + display: none; + } } } @@ -763,8 +1234,13 @@ .vxe-header--column, .vxe-body--column, .vxe-footer--column { - &:not(.col--ellipsis) { - padding: var(--vxe-ui-table-column-padding-medium); + &.is--padding { + .vxe-cell { + padding: var(--vxe-ui-table-cell-padding-medium); + .vxe-default-textarea { + padding: var(--vxe-ui-table-cell-padding-medium); + } + } } } .vxe-cell { @@ -779,6 +1255,9 @@ } } } + .vxe-cell--valid-error-tip { + padding: 0 var(--vxe-ui-table-cell-padding-medium); + } } &.size--small { font-size: var(--vxe-ui-font-size-small); @@ -789,8 +1268,13 @@ .vxe-header--column, .vxe-body--column, .vxe-footer--column { - &:not(.col--ellipsis) { - padding: var(--vxe-ui-table-column-padding-small); + &.is--padding { + .vxe-cell { + padding: var(--vxe-ui-table-cell-padding-small); + .vxe-default-textarea { + padding: var(--vxe-ui-table-cell-padding-small); + } + } } } .vxe-cell { @@ -805,6 +1289,9 @@ } } } + .vxe-cell--valid-error-tip { + padding: 0 var(--vxe-ui-table-cell-padding-small); + } } &.size--mini { font-size: var(--vxe-ui-font-size-mini); @@ -815,8 +1302,13 @@ .vxe-header--column, .vxe-body--column, .vxe-footer--column { - &:not(.col--ellipsis) { - padding: var(--vxe-ui-table-column-padding-mini); + &.is--padding { + .vxe-cell { + padding: var(--vxe-ui-table-cell-padding-mini); + .vxe-default-textarea { + padding: var(--vxe-ui-table-cell-padding-mini); + } + } } } .vxe-cell { @@ -831,12 +1323,27 @@ } } } + .vxe-cell--valid-error-tip { + padding: 0 var(--vxe-ui-table-cell-padding-mini); + } + } + + .vxe-header--column, + .vxe-body--column, + .vxe-footer--column { + &.is--padding { + .vxe-cell { + padding: var(--vxe-ui-table-cell-padding-default); + .vxe-default-textarea { + padding: var(--vxe-ui-table-cell-padding-default); + } + } + } } + .vxe-cell { white-space: pre-line; word-break: break-all; - padding-left: var(--vxe-ui-table-cell-padding-left); - padding-right: var(--vxe-ui-table-cell-padding-right); } // 单元格占位符 @@ -846,10 +1353,10 @@ // 单选框和复选框 .vxe-cell--radio { - @include createRadioIcon(); + @include baseMixin.createRadioIcon(); } .vxe-cell--checkbox { - @include createCheckboxIcon(); + @include baseMixin.createCheckboxIcon(); } .fixed--hidden { @@ -864,8 +1371,10 @@ overflow: hidden; background-color: inherit; transition: 0.3s box-shadow; + outline: 0; + background-color: var(--vxe-ui-layout-background-color); .vxe-table--body-wrapper { - overflow-x: hidden; + outline: 0; } } .vxe-table--fixed-left-wrapper { @@ -900,17 +1409,18 @@ .vxe-table--body-wrapper, .vxe-table--footer-wrapper { position: relative; + width: 100%; &.fixed-left--wrapper, &.fixed-right--wrapper { position: absolute; top: 0; + outline: 0; } &.fixed-left--wrapper { left: 0; } &.fixed-right--wrapper { right: 0; - overflow-y: auto; } } .vxe-body--x-space { @@ -923,22 +1433,61 @@ float: left; } - /*列宽线*/ - .vxe-table--resizable-bar { + .vxe-table--resizable-row-bar, + .vxe-table--resizable-col-bar { display: none; position: absolute; top: 0; left: 0; - width: 1px; - height: 100%; z-index: 9; - cursor: col-resize; + pointer-events: none; + user-select: none; &:before { content: ""; display: block; - height: 100%; background-color: var(--vxe-ui-table-resizable-drag-line-color); } + .vxe-table--resizable-number-tip { + position: absolute; + padding: 0.25em 0.25em; + font-size: 12px; + border-radius: var(--vxe-ui-border-radius); + white-space: nowrap; + color: #ffffff; + background-color: var(--vxe-ui-table-resizable-drag-line-color); + user-select: none; + pointer-events: none; + } + } + + /*列宽线*/ + .vxe-table--resizable-col-bar { + width: 1px; + height: 100%; + cursor: col-resize; + &:before { + width: 1px; + height: 100%; + } + .vxe-table--resizable-number-tip { + left: 0; + top: 1em; + } + } + + // 行高线 + .vxe-table--resizable-row-bar { + height: 1px; + width: 100%; + cursor: row-resize; + &:before { + height: 1px; + width: 100%; + } + .vxe-table--resizable-number-tip { + top: 0; + left: 0; + } } /*边框线*/ @@ -976,7 +1525,7 @@ .vxe-tree--line { content: ""; position: absolute; - bottom: -0.9em; + bottom: -1.5em; width: 0.8em; border-width: 0 0 1px 1px; border-style: var(--vxe-ui-table-tree-node-line-style); @@ -1001,7 +1550,7 @@ .vxe-tree--node-btn { display: block; color: var(--vxe-ui-font-lighten-color); - @include createAnimationTransition(transform); + @include baseMixin.createAnimationTransition(transform); &:hover { color: var(--vxe-ui-font-color); } @@ -1010,6 +1559,8 @@ display: block; padding-left: 1.5em; } + + /*单元格高度*/ .vxe-body--column { &.col--ellipsis { & > .vxe-cell { @@ -1020,9 +1571,90 @@ } } } + &.col--cs-height, + &.col--rs-height, + &.col--auto-height { + overflow: hidden; + & > .vxe-cell { + overflow: hidden; + } + } + & > .vxe-cell { + display: flex; + flex-direction: row; + align-items: center; + } + } + /*溢出列*/ + .vxe-header--column, + .vxe-body--column, + .vxe-footer--column { + &:not(.col--active) { + &.col--ellipsis { + & > .vxe-cell { + overflow: hidden; + & > .vxe-cell--wrapper { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + } + &.vxe-tree-cell, + &.col--vertical-top { + & > .vxe-cell { + & > .vxe-cell--wrapper { + white-space: pre-line; + } + } + } + } + } + .vxe-header--column, + .vxe-footer--column { + &.col--ellipsis { + & > .vxe-cell { + .vxe-cell--wrapper { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + } + & > .vxe-cell { + display: flex; + flex-direction: row; + align-items: center; + } } /*展开行*/ + .vxe-table--row-expanded-wrapper { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + pointer-events: none; + } + .vxe-body--row-expanded-cell { + position: absolute; + z-index: 5; + top: 0; + left: 0; + width: 100%; + overflow: auto; + background-color: var(--vxe-ui-layout-background-color); + pointer-events: all; + &.is--padding { + padding: var(--vxe-ui-table-expand-padding-default); + } + } + .vxe-body--row-expanded-place-column { + border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color); + border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color); + } .vxe-table--expanded { cursor: pointer; .vxe-table--expand-btn { @@ -1032,7 +1664,7 @@ text-align: center; user-select: none; color: var(--vxe-ui-font-lighten-color); - @include createAnimationTransition(transform); + @include baseMixin.createAnimationTransition(transform); &:hover { color: var(--vxe-ui-font-color); } @@ -1066,60 +1698,182 @@ z-index: 1; &.is--ellipsis { overflow: auto; + outline: 0; } } - /*设置列高度*/ - &.vxe-editable { - .vxe-body--column { - @extend %DefaultColumnHeight; + /*拖拽列*/ + .vxe-table--drag-col-line { + height: 100%; + width: 1px; + border: 2px solid transparent; + &[drag-pos="left"] { + border-left-color: var(--vxe-ui-font-primary-color); } - &.size--medium { - .vxe-body--column { - @extend %MediumColumnHeight; - } + &[drag-pos="right"] { + border-right-color: var(--vxe-ui-font-primary-color); } - &.size--small { - .vxe-body--column { - @extend %SmallColumnHeight; - } + &[drag-to-child="y"] { + border-left-color: transparent; + border-right-color: transparent; + border-bottom-color: var(--vxe-ui-status-success-color); } - &.size--mini { - .vxe-body--column { - @extend %MiniColumnHeight; - } + &.is--guides { + background-color: var( --vxe-ui-table-drag-over-background-color); } } - - /*溢出列*/ .vxe-header--column, .vxe-body--column, .vxe-footer--column { - &.col--ellipsis { - @extend %DefaultColumnHeight; - &:not(.col--active) { - & > .vxe-cell { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } + &.col--drag-origin { & > .vxe-cell { - max-height: var(--vxe-ui-table-row-height-default); + opacity: 0.5; } } } - &.size--medium { - .vxe-header--column, - .vxe-body--column, - .vxe-footer--column { - &.col--ellipsis { - @extend %MediumColumnHeight; + .vxe-header--col-list-move { + transition-property: transform; + transition-duration: 0.35s; + } + + .vxe-table--drag-col-line, + .vxe-table--drag-row-line { + display: none; + position: absolute; + top: 0; + left: 0; + z-index: 11; + pointer-events: none; + } + .vxe-cell--drag-handle { + user-select: none; + & + span { + padding-left: 0.5em; + } + &:not(.is--disabled) { + cursor: grab; + &:active { + cursor: grabbing; + } + &:hover { + color: var(--vxe-ui-font-primary-color); + } + } + &.is--disabled { + color: var(--vxe-ui-input-disabled-color); + cursor: not-allowed; + } + } + + /*拖拽行*/ + .vxe-table--drag-row-line { + width: 100%; + height: 1px; + border: 2px solid transparent; + &[drag-pos="top"] { + border-top-color: var(--vxe-ui-font-primary-color); + } + &[drag-pos="bottom"] { + border-bottom-color: var(--vxe-ui-font-primary-color); + } + &[drag-to-child="y"] { + border-top-color: transparent; + border-bottom-color: transparent; + border-left-color: var(--vxe-ui-status-success-color); + } + &.is--guides { + background-color: var( --vxe-ui-table-drag-over-background-color); + } + } + .vxe-body--row { + &.row--drag-origin { + & > .vxe-body--column { & > .vxe-cell { - max-height: var(--vxe-ui-table-row-height-medium); + opacity: 0.5; + } + } + } + } + .vxe-body--column { + &.is--drag-cell { + user-select: none; + &:not(.is--drag-disabled) { + cursor: grab; + &:active { + cursor: grabbing; + } + &:hover { + color: var(--vxe-ui-font-primary-color); } } + &.is--drag-disabled { + color: var(--vxe-ui-input-disabled-color); + cursor: not-allowed; + } } + } + .vxe-body--row-list-move { + transition-property: transform; + transition-duration: 0.35s; + } + .vxe-table--drag-sort-tip { + display: none; + position: absolute; + top: 0; + left: 0; + padding: 0.6em 1.4em; + max-width: 50%; + min-width: 100px; + border-radius: var(--vxe-ui-border-radius); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + user-select: none; + pointer-events: none; + background-color: var(--vxe-ui-layout-background-color); + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); + z-index: 33; + &[drag-status="normal"] { + .vxe-table--drag-sort-tip-normal-status { + display: block; + } + } + &[drag-status="sub"] { + .vxe-table--drag-sort-tip-sub-status { + display: block; + } + } + &[drag-status="disabled"] { + .vxe-table--drag-sort-tip-disabled-status { + display: block; + } + } + } + .vxe-table--drag-sort-tip-wrapper { + display: flex; + flex-direction: row; + align-items: center; + } + .vxe-table--drag-sort-tip-status { + padding-right: 0.4em; + } + .vxe-table--drag-sort-tip-disabled-status { + display: none; + flex-shrink: 0; + color: var(--vxe-ui-status-error-color) + } + .vxe-table--drag-sort-tip-normal-status, + .vxe-table--drag-sort-tip-sub-status { + display: none; + } + .vxe-table--drag-sort-tip-content { + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + &.size--medium { .vxe-cell--checkbox { font-size: var(--vxe-checkbox-font-size-medium); } @@ -1128,16 +1882,6 @@ } } &.size--small { - .vxe-header--column, - .vxe-body--column, - .vxe-footer--column { - &.col--ellipsis { - @extend %SmallColumnHeight; - & > .vxe-cell { - max-height: var(--vxe-ui-table-row-height-small); - } - } - } .vxe-cell--checkbox { font-size: var(--vxe-checkbox-font-size-small); } @@ -1146,16 +1890,6 @@ } } &.size--mini { - .vxe-header--column, - .vxe-body--column, - .vxe-footer--column { - &.col--ellipsis { - @extend %MiniColumnHeight; - & > .vxe-cell { - max-height: var(--vxe-ui-table-row-height-mini); - } - } - } .vxe-cell--checkbox { font-size: var(--vxe-checkbox-font-size-mini); } @@ -1167,6 +1901,7 @@ /*暂无数据*/ .vxe-table--empty-placeholder, .vxe-table--empty-block { + color: var(--vxe-ui-input-placeholder-color); min-height: var(--vxe-ui-table-row-height-default); justify-content: center; align-items: center; @@ -1174,6 +1909,7 @@ overflow: hidden; width: 100%; pointer-events: none; + outline: 0; } .vxe-table--empty-block { display: none; @@ -1205,51 +1941,58 @@ /*校验不通过*/ .vxe-body--column { + .vxe-cell--valid-error-tip { + width: 100%; + position: absolute; + left: 50%; + font-size: 12px; + line-height: 1.2em; + transform: translateX(-50%); + text-align: left; + z-index: 4; + padding: 0 var(--vxe-ui-table-cell-padding-default); + } + .vxe-cell--valid-error-wrapper { + display: inline-block; + border-radius: var(--vxe-ui-border-radius); + pointer-events: auto; + } + .vxe-cell--valid-error-theme-beautify { + padding: 0.2em 0.6em 0.3em 0.6em; + color: #fff; + background-color: var(--vxe-ui-table-validate-error-color); + .vxe-cell--valid-error-msg { + background: transparent; + } + } + .vxe-cell--valid-error-theme-normal { + color: var(--vxe-ui-table-validate-error-color); + background-color: var(--vxe-ui-table-validate-error-background-color); + } &.col--active, &.col--selected { position: relative; } &.col--valid-error { - .vxe-cell--valid-error-hint { - width: 100%; - position: absolute; - left: 50%; - font-size: 12px; - line-height: 1.2em; - transform: translateX(-50%); - text-align: left; - z-index: 4; - padding-left: var(--vxe-ui-table-cell-padding-left); - padding-right: var(--vxe-ui-table-cell-padding-right); - .vxe-cell--valid-error-msg { - display: inline-block; - border-radius: var(--vxe-ui-border-radius); - color: var(--vxe-ui-table-validate-error-color); - background-color: var(--vxe-ui-table-validate-error-background-color); - pointer-events: auto; - } - } .vxe-default-input, .vxe-default-textarea, .vxe-default-select { border-color: var(--vxe-ui-table-validate-error-color); } - .vxe-input { - > .vxe-input--inner { - border-color: var(--vxe-ui-table-validate-error-color); - } + .vxe-input, + .vxe-ico-picker { + border-color: var(--vxe-ui-table-validate-error-color); } - } } &.valid-msg--single { .vxe-body--row { &:last-child { - .vxe-cell--valid-error-hint { + .vxe-cell--valid-error-tip { bottom: calc(100%); } &:first-child { - .vxe-cell--valid-error-hint { + .vxe-cell--valid-error-tip { bottom: auto; } } @@ -1259,7 +2002,7 @@ &.valid-msg--full { .vxe-body--row { &:last-child { - .vxe-cell--valid-error-hint { + .vxe-cell--valid-error-tip { top: calc(100% - 1.3em); } } @@ -1269,7 +2012,7 @@ &.old-cell-valid { .vxe-body--column { &.col--valid-error { - .vxe-cell--valid-error-hint { + .vxe-cell--valid-error-tip { width: 320px; position: absolute; bottom: calc(100% + 4px); @@ -1291,7 +2034,7 @@ } .vxe-body--row { &:first-child { - .vxe-cell--valid-error-hint { + .vxe-cell--valid-error-tip { bottom: auto; top: calc(100% + 4px); } @@ -1299,7 +2042,7 @@ } .vxe-body--column { &:first-child { - .vxe-cell--valid-error-hint { + .vxe-cell--valid-error-tip { left: 10px; transform: translateX(0); text-align: left; @@ -1379,30 +2122,18 @@ border: 0; padding: 0; } - .vxe-default-input { - height: var(--vxe-ui-table-row-line-height); - } .vxe-input { .vxe-input--inner { border: 0; padding-left: 0; } } - .vxe-textarea { - height: calc(var(--vxe-ui-table-row-line-height) - 1px); - .vxe-textarea--inner { - border: 0; - } - } } } } } .vxe-body--column { padding: 0; - &.col--active { - padding: 0; - } } } } @@ -1424,22 +2155,7 @@ div.vxe-table--tooltip-wrapper { /*footer*/ .vxe-table--footer-wrapper { color: var(--vxe-ui-table-footer-font-color); - margin-top: -1px; &.body--wrapper{ - overflow-x: auto; + outline: 0; } } - -.vxe-footer--column { - &.col--ellipsis { - & > .vxe-cell { - display: flex; - align-items: center; - .vxe-cell--item { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - } -} \ No newline at end of file diff --git a/styles/components/toolbar.scss b/styles/components/toolbar.scss index 0c0152ed77..f69ca87872 100644 --- a/styles/components/toolbar.scss +++ b/styles/components/toolbar.scss @@ -1,5 +1,3 @@ -@import '../helpers/mixin.scss'; - /*toolbar*/ .vxe-toolbar { position: relative; diff --git a/styles/cssvar.scss b/styles/cssvar.scss index 439a68fce3..5a2adc5b0e 100644 --- a/styles/cssvar.scss +++ b/styles/cssvar.scss @@ -1,3 +1,3 @@ /*已废弃*/ -@import './base.scss'; \ No newline at end of file +@use './base.scss'; \ No newline at end of file diff --git a/styles/default.scss b/styles/default.scss new file mode 100644 index 0000000000..2befccfb24 --- /dev/null +++ b/styles/default.scss @@ -0,0 +1,3 @@ +// 该文件已废弃,请使用 vxe-table/styles/all.scss + +@use './modules.scss'; \ No newline at end of file diff --git a/styles/helpers/mixin.scss b/styles/helpers/baseMixin.scss similarity index 100% rename from styles/helpers/mixin.scss rename to styles/helpers/baseMixin.scss diff --git a/styles/icon/iconfont.ttf b/styles/icon/iconfont.ttf new file mode 100644 index 0000000000..4586c5f4f0 Binary files /dev/null and b/styles/icon/iconfont.ttf differ diff --git a/styles/icon/iconfont.woff b/styles/icon/iconfont.woff new file mode 100644 index 0000000000..f8cfe78444 Binary files /dev/null and b/styles/icon/iconfont.woff differ diff --git a/styles/icon/iconfont.woff2 b/styles/icon/iconfont.woff2 new file mode 100644 index 0000000000..3915ac3e75 Binary files /dev/null and b/styles/icon/iconfont.woff2 differ diff --git a/styles/index.scss b/styles/index.scss new file mode 100644 index 0000000000..cf5cde8665 --- /dev/null +++ b/styles/index.scss @@ -0,0 +1,4 @@ +// 该文件已废弃,请使用 vxe-table/style/all.scss + +@use './variable.scss'; +@use './default.scss'; \ No newline at end of file diff --git a/styles/modules.scss b/styles/modules.scss index 85d96d10cc..5d979b29ff 100644 --- a/styles/modules.scss +++ b/styles/modules.scss @@ -1,7 +1,5 @@ -/*已废弃*/ - -@import './components/column.scss'; -@import './components/colgroup.scss'; -@import './components/table.scss'; -@import './components/grid.scss'; -@import './components/toolbar.scss'; +@use './components/column.scss'; +@use './components/colgroup.scss'; +@use './components/table.scss'; +@use './components/grid.scss'; +@use './components/toolbar.scss'; diff --git a/styles/theme/base.scss b/styles/theme/base.scss index a2fa8e13cf..e7701b073b 100644 --- a/styles/theme/base.scss +++ b/styles/theme/base.scss @@ -1,5 +1,3 @@ -$vxe-ui-status-error-color: #f56c6c; - :root { /*font*/ --vxe-ui-font-family: -apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; @@ -10,11 +8,6 @@ $vxe-ui-status-error-color: #f56c6c; --vxe-ui-font-size-small: 13px; --vxe-ui-font-size-mini: 12px; - /*font color*/ - --vxe-ui-font-primary-color: #409eff; - --vxe-ui-font-lighten-color: lighten(#606266, 10%); - --vxe-ui-font-disabled-color: #BFBFBF; - /*base border*/ --vxe-ui-border-radius: 4px; @@ -43,18 +36,16 @@ $vxe-ui-status-error-color: #f56c6c; --vxe-ui-table-row-height-mini: 36px; --vxe-ui-table-row-line-height: 22px; - --vxe-ui-table-column-padding-default: 13px 0; - --vxe-ui-table-column-padding-medium: 11px 0; - --vxe-ui-table-column-padding-small: 9px 0; - --vxe-ui-table-column-padding-mini: 7px 0; --vxe-ui-table-column-hover-background-color: #d7effb; --vxe-ui-table-column-current-background-color: #e6f7ff; --vxe-ui-table-column-icon-border-color: #c0c4cc; --vxe-ui-table-column-icon-border-hover-color: #515A6E; + --vxe-ui-table-cell-padding-default: 10px; + --vxe-ui-table-cell-padding-medium: 8px; + --vxe-ui-table-cell-padding-small: 6px; + --vxe-ui-table-cell-padding-mini: 4px; --vxe-ui-table-cell-placeholder-color: #C0C4CC; - --vxe-ui-table-cell-padding-left: 10px; - --vxe-ui-table-cell-padding-right: 10px; --vxe-ui-table-cell-input-height-default: var(--vxe-ui-table-row-height-default) - 6; --vxe-ui-table-cell-input-height-medium: var(--vxe-ui-table-row-height-medium) - 6; --vxe-ui-table-cell-input-height-small: var(--vxe-ui-table-row-height-small) - 6; @@ -64,6 +55,7 @@ $vxe-ui-status-error-color: #f56c6c; --vxe-ui-table-cell-dirty-insert-color: #19A15F; --vxe-ui-table-cell-area-border-color: var(--vxe-ui-font-primary-color); --vxe-ui-table-cell-area-border-width: 1px; + --vxe-ui-table-cell-area-status-border-width: var(--vxe-ui-table-cell-area-border-width); --vxe-ui-table-cell-main-area-extension-border-color: #fff; --vxe-ui-table-cell-main-area-extension-background-color: var(--vxe-ui-font-primary-color); --vxe-ui-table-cell-extend-area-border-width: 2px; @@ -74,6 +66,7 @@ $vxe-ui-status-error-color: #f56c6c; --vxe-ui-table-cell-extend-area-border-color: var(--vxe-ui-table-cell-area-border-color); --vxe-ui-table-cell-active-area-border-color: var(--vxe-ui-table-cell-area-border-color); --vxe-ui-table-cell-area-background-color: rgba(64,158,255,0.2); + --vxe-ui-table-header-active-area-background-color: rgba(64,158,255,0.05); --vxe-ui-table-expand-padding-default: 16px; @@ -81,10 +74,10 @@ $vxe-ui-status-error-color: #f56c6c; --vxe-ui-table-checkbox-range-border-color: #006af1; --vxe-ui-table-checkbox-range-background-color: rgba(50,128,252,0.2); - --vxe-ui-table-fixed-left-scrolling-box-shadow: 8px 0px 10px -5px rgba(0, 0, 0, 0.12); - --vxe-ui-table-fixed-right-scrolling-box-shadow: -8px 0px 10px -5px rgba(0, 0, 0, 0.12); + --vxe-ui-table-fixed-left-scrolling-box-shadow: 8px 0px 10px -5px var(--vxe-ui-table-fixed-scrolling-box-shadow-color); + --vxe-ui-table-fixed-right-scrolling-box-shadow: -8px 0px 10px -5px var(--vxe-ui-table-fixed-scrolling-box-shadow-color); - --vxe-ui-table-menu-item-width: 178px; + --vxe-ui-table-menu-item-width: 198px; --vxe-ui-table-menu-background-color: #fff; --vxe-ui-table-validate-error-color: #f56c6c; diff --git a/styles/theme/dark.scss b/styles/theme/dark.scss index 16adeddf84..0b92a5aad8 100644 --- a/styles/theme/dark.scss +++ b/styles/theme/dark.scss @@ -1,17 +1,20 @@ -@import './base.scss'; +@use './base.scss'; [data-vxe-ui-theme="dark"] { color-scheme: dark; - $vxe-ui-font-color: #a0a3a7; - - /*font*/ - --vxe-ui-font-color: #{$vxe-ui-font-color}; - --vxe-ui-font-lighten-color: #{lighten($vxe-ui-font-color, 10%)}; - --vxe-ui-font-darken-color: #{darken($vxe-ui-font-color, 10%)}; + /*font color*/ + --vxe-ui-font-color: #a0a3a7; + --vxe-ui-font-tinge-color: #33353b; + --vxe-ui-font-lighten-color: #797b80; + --vxe-ui-font-darken-color: #47494c; + --vxe-ui-font-disabled-color: #464646; + + /*font status color*/ + --vxe-ui-font-primary-color: #409eff; /*base*/ - --vxe-ui-base-popup-border-color: var(--vxe-ui-layout-background-color); + --vxe-ui-base-popup-border-color: #424242; --vxe-ui-base-popup-box-shadow: 0px 12px 30px 8px rgba(0, 0, 0, 0.5); /*layout*/ @@ -27,6 +30,7 @@ /*table*/ --vxe-ui-table-header-background-color: #28282a; + --vxe-ui-table-column-to-row-background-color: #28282a; --vxe-ui-table-border-color: #37373a; --vxe-ui-table-row-hover-background-color: #262727; --vxe-ui-table-row-striped-background-color: #1D1D1D; @@ -37,4 +41,6 @@ --vxe-ui-table-row-hover-checkbox-checked-background-color: #6e5326; --vxe-ui-table-row-current-background-color: #18222c; --vxe-ui-table-row-hover-current-background-color: #262727; + --vxe-ui-table-fixed-scrolling-box-shadow-color: rgba(0, 0, 0, 0.8); + --vxe-ui-table-drag-over-background-color:rgba(48, 48, 0, 0.3); } diff --git a/styles/theme/light.scss b/styles/theme/light.scss index d3709e4daa..9183683128 100644 --- a/styles/theme/light.scss +++ b/styles/theme/light.scss @@ -1,38 +1,42 @@ -@import './base.scss'; +@use './base.scss'; +@use '../variable.scss' as light_variable; [data-vxe-ui-theme="light"] { - $vxe-ui-font-color: #606266; - - /*font*/ - --vxe-ui-font-color: #{$vxe-ui-font-color}; - --vxe-ui-font-lighten-color: #{lighten($vxe-ui-font-color, 10%)}; - --vxe-ui-font-darken-color: #{darken($vxe-ui-font-color, 10%)}; + /*font color*/ + --vxe-ui-font-color: #{light_variable.$vxe-ui-font-color}; + --vxe-ui-font-primary-color: #{light_variable.$vxe-ui-font-primary-color}; + --vxe-ui-font-lighten-color: #{light_variable.$vxe-ui-font-lighten-color}; + --vxe-ui-font-darken-color: #{light_variable.$vxe-ui-font-darken-color}; + --vxe-ui-font-disabled-color: #{light_variable.$vxe-ui-font-disabled-color}; /*base*/ - --vxe-ui-base-popup-border-color: #DADCE0; - --vxe-ui-base-popup-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16); + --vxe-ui-base-popup-border-color: #{light_variable.$vxe-ui-base-popup-border-color}; + --vxe-ui-base-popup-box-shadow: #{light_variable.$vxe-ui-base-popup-box-shadow}; /*layout*/ - --vxe-ui-layout-background-color: #ffffff; + --vxe-ui-layout-background-color: #{light_variable.$vxe-ui-layout-background-color}; /*input*/ - --vxe-ui-input-border-color: #dcdfe6; - --vxe-ui-input-placeholder-color: #C0C4CC; - --vxe-ui-input-disabled-background-color: #f3f3f3; + --vxe-ui-input-border-color: #{light_variable.$vxe-ui-input-border-color}; + --vxe-ui-input-placeholder-color: #{light_variable.$vxe-ui-input-placeholder-color}; + --vxe-ui-input-disabled-background-color: #{light_variable.$vxe-ui-input-disabled-background-color}; /*loading*/ - --vxe-ui-loading-background-color: rgba(255, 255, 255, 0.5); + --vxe-ui-loading-background-color: #{light_variable.$vxe-ui-loading-background-color}; /*table*/ - --vxe-ui-table-header-background-color: #f8f8f9; - --vxe-ui-table-border-color: #e8eaec; - --vxe-ui-table-row-hover-background-color: #f5f7fa; - --vxe-ui-table-row-striped-background-color: #fafafa; - --vxe-ui-table-row-hover-striped-background-color: #f5f7fa; - --vxe-ui-table-row-radio-checked-background-color: #fff3e0; - --vxe-ui-table-row-hover-radio-checked-background-color: #ffebbc; - --vxe-ui-table-row-checkbox-checked-background-color: #fff3e0; - --vxe-ui-table-row-hover-checkbox-checked-background-color: #ffebbc; - --vxe-ui-table-row-current-background-color: #e6f7ff; - --vxe-ui-table-row-hover-current-background-color: #d7effb; + --vxe-ui-table-header-background-color: #{light_variable.$vxe-ui-table-header-background-color}; + --vxe-ui-table-column-to-row-background-color: #{light_variable.$vxe-ui-table-column-to-row-background-color}; + --vxe-ui-table-border-color: #{light_variable.$vxe-ui-table-border-color}; + --vxe-ui-table-row-hover-background-color: #{light_variable.$vxe-ui-table-row-hover-background-color}; + --vxe-ui-table-row-striped-background-color: #{light_variable.$vxe-ui-table-row-striped-background-color}; + --vxe-ui-table-row-hover-striped-background-color: #{light_variable.$vxe-ui-table-row-hover-striped-background-color}; + --vxe-ui-table-row-radio-checked-background-color: #{light_variable.$vxe-ui-table-row-radio-checked-background-color}; + --vxe-ui-table-row-hover-radio-checked-background-color: #{light_variable.$vxe-ui-table-row-hover-radio-checked-background-color}; + --vxe-ui-table-row-checkbox-checked-background-color: #{light_variable.$vxe-ui-table-row-checkbox-checked-background-color}; + --vxe-ui-table-row-hover-checkbox-checked-background-color: #{light_variable.$vxe-ui-table-row-hover-checkbox-checked-background-color}; + --vxe-ui-table-row-current-background-color: #{light_variable.$vxe-ui-table-row-current-background-color}; + --vxe-ui-table-row-hover-current-background-color: #{light_variable.$vxe-ui-table-row-hover-current-background-color}; + --vxe-ui-table-fixed-scrolling-box-shadow-color: #{light_variable.$vxe-ui-table-fixed-scrolling-box-shadow-color}; + --vxe-ui-table-drag-over-background-color:#{light_variable.$vxe-ui-table-drag-over-background-color}; } \ No newline at end of file diff --git a/styles/variable.scss b/styles/variable.scss index 439a68fce3..b9aed7e465 100644 --- a/styles/variable.scss +++ b/styles/variable.scss @@ -1,3 +1,40 @@ -/*已废弃*/ +/*font color*/ +$vxe-ui-font-color: #606266 !default; +$vxe-ui-font-tinge-color: #d4d5d7 !default; +$vxe-ui-font-lighten-color: #797b80 !default; +$vxe-ui-font-darken-color: #47494c !default; +$vxe-ui-font-disabled-color: #BFBFBF !default; -@import './base.scss'; \ No newline at end of file +/*font status color*/ +$vxe-ui-font-primary-color: #409eff !default; + +/*base*/ +$vxe-ui-base-popup-border-color: #DADCE0 !default; +$vxe-ui-base-popup-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16) !default; + +/*layout*/ +$vxe-ui-layout-background-color: #ffffff !default; + +/*input*/ +$vxe-ui-input-border-color: #dcdfe6 !default; +$vxe-ui-input-placeholder-color: #C0C4CC !default; +$vxe-ui-input-disabled-background-color: #f3f3f3 !default; + +/*loading*/ +$vxe-ui-loading-background-color: rgba(255, 255, 255, 0.5) !default; + +/*table*/ +$vxe-ui-table-header-background-color: #f8f8f9 !default; +$vxe-ui-table-column-to-row-background-color: #f8f8f9 !default; +$vxe-ui-table-border-color: #e8eaec !default; +$vxe-ui-table-row-hover-background-color: #f5f7fa !default; +$vxe-ui-table-row-striped-background-color: #fafafa !default; +$vxe-ui-table-row-hover-striped-background-color: #f5f7fa !default; +$vxe-ui-table-row-radio-checked-background-color: #fff3e0 !default; +$vxe-ui-table-row-hover-radio-checked-background-color: #ffebbc !default; +$vxe-ui-table-row-checkbox-checked-background-color: #fff3e0 !default; +$vxe-ui-table-row-hover-checkbox-checked-background-color: #ffebbc !default; +$vxe-ui-table-row-current-background-color: #e6f7ff !default; +$vxe-ui-table-row-hover-current-background-color: #d7effb !default; +$vxe-ui-table-fixed-scrolling-box-shadow-color: rgba(0, 0, 0, 0.12) !default; +$vxe-ui-table-drag-over-background-color:rgba(255,255,200,0.3) !default; diff --git a/tsconfig.json b/tsconfig.json index ea7e5eeab7..b034182231 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,7 +7,7 @@ "jsxImportSource": "vue", "importHelpers": true, "moduleResolution": "node", - "skipLibCheck": true, + "skipLibCheck": false, "esModuleInterop": true, "resolveJsonModule": true, "allowSyntheticDefaultImports": true, @@ -32,13 +32,11 @@ ] }, "include": [ - "src/**/*.ts", - "src/**/*.tsx", "examples/**/*.ts", "examples/**/*.tsx", "examples/**/*.vue", - "tests/**/*.ts", - "tests/**/*.tsx" + "packages/**/*.ts", + "packages/**/*.tsx" ], "exclude": [ "node_modules" diff --git a/types/all.d.ts b/types/all.d.ts index 2fe86fcfa2..5ccfcc46e0 100644 --- a/types/all.d.ts +++ b/types/all.d.ts @@ -1,4 +1,5 @@ -import { VxeUIExport } from 'vxe-pc-ui' +import { App } from 'vue' +import { VxeUIExport, VxeGlobalConfig } from 'vxe-pc-ui' declare global { interface Window { @@ -6,6 +7,7 @@ declare global { * @deprecated */ VXETable: VxeUIExport; + VxeUITable: VxeUIExport; } } @@ -21,4 +23,30 @@ export const VXETable: VxeUIExport */ export type VXETableCore = VxeUIExport -export * from 'vxe-pc-ui' +export function install (app: App, options?: VxeGlobalConfig): void + +// Vxe core +export * from 'vxe-pc-ui/types/ui' + +// Vxe Table +export * from 'vxe-pc-ui/types/components/column' +export * from 'vxe-pc-ui/types/components/colgroup' +export * from 'vxe-pc-ui/types/components/table' +export * from 'vxe-pc-ui/types/components/grid' +export * from 'vxe-pc-ui/types/components/toolbar' + +// 已废弃,兼容老版本类型 +export * from 'vxe-pc-ui/types/components/textarea' +export * from 'vxe-pc-ui/types/components/select' +export * from 'vxe-pc-ui/types/components/switch' +export * from 'vxe-pc-ui/types/components/optgroup' +export * from 'vxe-pc-ui/types/components/option' +export * from 'vxe-pc-ui/types/components/pager' +export * from 'vxe-pc-ui/types/components/form' +export * from 'vxe-pc-ui/types/components/form-item' +export * from 'vxe-pc-ui/types/components/modal' +export * from 'vxe-pc-ui/types/components/button' +export * from 'vxe-pc-ui/types/components/button-group' +export * from 'vxe-pc-ui/types/components/input' +export * from 'vxe-pc-ui/types/components/pulldown' +export * from 'vxe-pc-ui/types/components/tooltip'