zj-components-vue3 0.1.0 → 0.1.2

package/README.md

@@ -18,7 +18,7 @@ npm pack
 
 `npm pack` 和 `npm publish` 会通过 `prepack` 钩子自动执行库构建，因此即使 `dist/` 中存在旧的应用构建产物，也会在打包前被替换为正确的库产物。
 
-npm 压缩包只包含 `dist/` 目录下的编译文件。库构建完成后，JavaScript 文件会经过压缩和混淆处理，这只能提高逆向分析成本，并不是加密保护。请勿在浏览器组件中存放敏感信息。
+npm 压缩包只包含 `dist/` 目录下的编译文件。JavaScript 文件在 Vite 压缩后会进行兼容型轻量混淆，关闭自保护、控制流平坦化等容易影响使用方构建工具的选项。混淆不等于加密，请勿在浏览器组件中存放密钥等敏感信息。
 
 ## 从 npm 安装
 
@@ -28,9 +28,10 @@ npm install zj-components-vue3 vue
 
 ```ts
 import { VirtualTableView } from 'zj-components-vue3'
-import 'zj-components-vue3/style.css'
 ```
 
+组件入口会自动引入对应样式，使用根入口、`components` 入口或单组件入口时通常都不需要再手动引入 CSS。
+
 ```vue
 <VirtualTableView :data="rows" :columns="columns" virtual />
 ```
@@ -44,8 +45,22 @@ import { VirtualTableView } from 'zj-components-vue3/components'
 import VirtualTableView from 'zj-components-vue3/components/VirtualTableView'
 ```
 
+如需兼容特殊构建环境，也可以手动引入完整样式：
+
+```ts
+import 'zj-components-vue3/style.css'
+```
+
 后续在 `src/components/` 中新增组件后，构建脚本会自动生成对应的独立入口。例如新增 `Button.vue` 后，可以通过 `zj-components-vue3/components/Button` 引入。
 
+`selectionType: 'radio'` 只改变选择框的外观。它仍支持多选、再次点击取消、表头全选/全不选，以及组件实例的 `selectAll()`、`unselectAll()` 方法。
+
+表头选择框始终使用复选框样式，不受 `selectionType` 影响。`selectionColumnDataIndex` 用于指定控制整行全选/全不选的选择基准列，默认值为 `name`。例如传入 `selection-column-data-index="device"` 后，`dataIndex: 'device'` 对应的列将负责整行选择和半选状态。
+
+`nameColumnDataIndex` 用于指定名称展示列，默认值同样为 `name`。名称列的专用文本样式、普通值兼容处理和行拖拽预览都会读取该属性。例如：`name-column-data-index="deviceName"`。
+
+`cellSelectionAffectsRow` 用于控制其他单元格的选择是否联动选择基准列，默认值为 `true`：部分单元格选中时基准列显示半选，全部单元格选中时基准列显示选中。传入 `:cell-selection-affects-row="false"` 后，其他单元格不再修改选择基准列的状态。
+
 ## 发布前准备
 
 发布前请在 `package.json` 中更新包名、版本号和仓库信息。如果包名已被占用，可以使用 npm 作用域，例如 `@your-scope/virtual-table-view`。

package/dist/VirtualTableView.css

@@ -0,0 +1 @@
+.virtual_table_view{--virtual-header-height:36px;--virtual-row-height:44px;--virtual-horizontal-scroll-left:0px;--virtual-scrollbar-width:12px;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--virtual-header-height) minmax(0, 1fr);box-sizing:border-box;contain:inline-size;border:1px solid #c4cbd8;border-bottom:0;width:100%;min-width:0;height:100%;min-height:0;display:grid;position:relative;overflow:hidden}.virtual_table_view.is-virtual-dragging,.virtual_table_view.is-virtual-dragging *{cursor:move!important;-webkit-user-select:none!important;user-select:none!important}.virtual_table_view.has-virtual-vertical-scrollbar{grid-template-columns:minmax(0, 1fr) var(--virtual-scrollbar-width)}.virtual_table_view.has-virtual-horizontal-scrollbar{grid-template-rows:var(--virtual-header-height) minmax(0, 1fr) auto}.virtual_table_view .virtual_header{z-index:3;box-sizing:border-box;width:100%;min-width:0;height:var(--virtual-header-height);background-color:#edf3f9;border-bottom:1px solid #d8e4ef;grid-area:1/1;position:relative;overflow:hidden}.virtual_table_view .virtual_header_scrollbar_spacer{z-index:3;box-sizing:border-box;width:var(--virtual-scrollbar-width);height:var(--virtual-header-height);background-color:#edf3f9;border-bottom:1px solid #d8e4ef;grid-area:1/2;position:relative}.virtual_table_view .virtual_grid{box-sizing:border-box;display:grid}.virtual_table_view .virtual_header_row{min-width:100%;height:100%;position:relative}.virtual_table_view .virtual_table_cell{box-sizing:border-box;border-right:1px solid #d8e4ef;position:relative}.virtual_table_view .virtual_header_cell{color:#2f4165;touch-action:none;align-items:center;gap:8px;padding:0 10px;font-family:AlibabaPuHui-medium;font-size:14px;transition:box-shadow .2s,opacity .2s;display:flex}.virtual_table_view .virtual_header_cell.is-drag-ready,.virtual_table_view .virtual_header_cell.is-dragging{cursor:grab;-webkit-user-select:none;user-select:none}.virtual_table_view .virtual_header_cell.is-drag-ready{cursor:grabbing;box-shadow:inset 0 0 0 1px #1890ff8c}.virtual_table_view .virtual_header_cell.is-dragging{opacity:.55}.virtual_table_view .virtual_header_cell.is-drag-over{background-color:#e6f4ff;box-shadow:inset 3px 0 #1677ff}.virtual_table_view .virtual_header_cell.is-drag-over.is-drag-over-after{box-shadow:inset -3px 0 #1677ff}.virtual_table_view .virtual_header_cell .virtual_header_text{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.virtual_table_view .virtual_header_cell.is-resizable{padding-right:14px}.virtual_table_view .virtual_header_cell .virtual_sort_control{color:#2f416573;cursor:pointer;background:0 0;border:0;flex:0 0 16px;width:16px;height:24px;padding:0;position:relative}.virtual_table_view .virtual_header_cell .virtual_sort_control:focus-visible{border-radius:2px;outline:none;box-shadow:0 0 0 2px #1890ff33}.virtual_table_view .virtual_header_cell .virtual_sort_arrow{border-left:4px solid #0000;border-right:4px solid #0000;width:0;height:0;transition:border-color .2s;position:absolute;left:4px}.virtual_table_view .virtual_header_cell .virtual_sort_arrow_asc{border-bottom:5px solid #2f416552;top:4px}.virtual_table_view .virtual_header_cell .virtual_sort_arrow_desc{border-top:5px solid #2f416552;bottom:4px}.virtual_table_view .virtual_header_cell .virtual_sort_arrow_asc.is-active{border-bottom-color:#1890ff}.virtual_table_view .virtual_header_cell .virtual_sort_arrow_desc.is-active{border-top-color:#1890ff}.virtual_table_view .virtual_header_cell .virtual_column_resize_handle{z-index:6;cursor:col-resize;touch-action:none;width:7px;height:100%;position:absolute;top:0;right:-3px}.virtual_table_view .virtual_header_cell .virtual_column_resize_handle:after{content:"";background-color:#0000;width:1px;position:absolute;top:7px;bottom:7px;left:3px}.virtual_table_view .virtual_header_cell .virtual_column_resize_handle:hover:after{background-color:#3678bfb3}.virtual_table_view .virtual_table_cell.is-fixed{z-index:2;background-color:inherit;box-shadow:2px 0 4px #2f41650d}.virtual_table_view .virtual_header_cell.is-fixed{z-index:4;background-color:#edf3f9}.virtual_table_view .virtual_header_cell.is-fixed.is-drag-over{background-color:#e6f4ff}.virtual_table_view .virtual_list{overflow-anchor:none;scrollbar-width:none;background-color:#fff;outline:none;grid-area:2/1;align-self:stretch;width:100%;min-width:0;max-width:100%;height:auto;min-height:0;position:relative;overflow:hidden}.virtual_table_view .virtual_state_overlay{box-sizing:border-box;color:#2f41658c;pointer-events:none;justify-content:center;align-items:center;padding:24px;font-size:13px;display:flex;position:absolute;inset:0}.virtual_table_view .virtual_loading_state{cursor:wait;pointer-events:auto;background:#ffffffb8}.virtual_table_view.is-virtual .virtual_list{will-change:scroll-position;overflow:hidden}.virtual_table_view .virtual_scroll_area{overflow-anchor:none;scrollbar-color:#2f416547 transparent;scrollbar-width:auto;background-color:#2f416508;min-width:0;min-height:0}.virtual_table_view .virtual_scroll_area::-webkit-scrollbar{width:var(--virtual-scrollbar-width);height:var(--virtual-scrollbar-width)}.virtual_table_view .virtual_scroll_area::-webkit-scrollbar-track{background:0 0}.virtual_table_view .virtual_scroll_area::-webkit-scrollbar-thumb{background:#2f416547 padding-box padding-box;border:3px solid #0000;border-radius:6px}.virtual_table_view .virtual_scroll_area::-webkit-scrollbar-thumb:hover{background:#2f41656b padding-box padding-box}.virtual_table_view .virtual_scroll_area_vertical{width:var(--virtual-scrollbar-width);will-change:scroll-position;grid-area:2/2;align-self:end;height:100%;display:none;overflow:hidden auto}.virtual_table_view .virtual_scroll_area_horizontal{width:100%;height:var(--virtual-scrollbar-width);grid-area:3/1;min-width:0;display:none;overflow:auto hidden}.virtual_table_view.has-virtual-vertical-scrollbar .virtual_scroll_area_vertical,.virtual_table_view.has-virtual-horizontal-scrollbar .virtual_scroll_area_horizontal{display:block}.virtual_table_view .virtual_scroll_area_content{pointer-events:none;min-width:100%;height:1px}.virtual_table_view .virtual_list_content{min-width:max-content;position:relative}.virtual_table_view .virtual_row{height:var(--virtual-row-height);background-color:#fff;border-bottom:1px solid #edf3f9;transition:box-shadow .15s,opacity .15s;position:relative}.virtual_table_view .virtual_row.is-striped{background-color:#f5f9fd}.virtual_table_view .virtual_row.is-selected{background-color:#e2eafe;border:1px solid #eff8ff}.virtual_table_view .virtual_row.is-dragging{opacity:.5}.virtual_table_view .virtual_row.is-drag-over{background-color:#e6f4ff;box-shadow:inset 0 2px #1677ff}.virtual_table_view .virtual_row.is-drag-over.is-drag-over-after{box-shadow:inset 0 -2px #1677ff}.virtual_table_view.is-virtual .virtual_row{position:absolute;top:0;left:0}.virtual_table_view.uses-normal-table-layout .virtual_table_cell.is-fixed{position:sticky;left:0}.virtual_table_view .virtual_selection_control{appearance:none;box-sizing:border-box;cursor:pointer;background-color:#fff;background-position:50%;background-repeat:no-repeat;border:1px solid #d9d9d9;border-radius:2px;flex:0 0 16px;width:16px;height:16px;margin:0;transition:border-color .2s,background-color .2s,box-shadow .2s}.virtual_table_view .virtual_selection_control:not(:disabled):hover{border-color:#40a9ff}.virtual_table_view .virtual_selection_control:focus-visible{border-color:#40a9ff;outline:none;box-shadow:0 0 0 2px #1890ff33}.virtual_table_view .virtual_selection_control[type=checkbox]:checked{background-color:#1890ff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.1 4.8 8.6 9.8 3.5' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");border-color:#1890ff}.virtual_table_view .virtual_selection_control[type=checkbox]:indeterminate{background-color:#1890ff;background-image:linear-gradient(#fff,#fff);background-size:8px 2px;border-color:#1890ff}.virtual_table_view .virtual_selection_control[type=radio],.virtual_table_view .virtual_selection_control.is-radio{border-radius:50%}.virtual_table_view .virtual_selection_control[type=radio]:checked,.virtual_table_view .virtual_selection_control.is-radio:checked{background-color:#fff;background-image:radial-gradient(circle,#1890ff 0 3px,#0000 3.5px);border-color:#1890ff}.virtual_table_view .virtual_selection_control:disabled{cursor:not-allowed;background-color:#f5f5f5;border-color:#d9d9d9}.virtual_table_view .virtual_selection_control[type=checkbox]:checked:disabled,.virtual_table_view .virtual_selection_control[type=checkbox]:indeterminate:disabled{background-color:#bfbfbf;border-color:#bfbfbf}.virtual_table_view .virtual_selection_control[type=radio]:checked:disabled,.virtual_table_view .virtual_selection_control.is-radio:checked:disabled{background-color:#f5f5f5;background-image:radial-gradient(circle,#bfbfbf 0 3px,#0000 3.5px);border-color:#bfbfbf}.virtual_table_view .virtual_body_cell{align-items:center;gap:8px;min-width:0;padding:3px 8px;display:flex;overflow:hidden}.virtual_table_view .virtual_body_cell .virtual_row_drag_handle{cursor:grab;-webkit-user-select:none;user-select:none;color:#2f416594;touch-action:none;flex:0 0 16px;justify-content:center;align-items:center;width:16px;height:24px;display:inline-flex}.virtual_table_view .virtual_body_cell .virtual_row_drag_handle:active{cursor:grabbing}.virtual_table_view .virtual_body_cell .virtual_row_drag_icon{width:14px;height:16px;position:relative}.virtual_table_view .virtual_body_cell .virtual_row_drag_icon:before,.virtual_table_view .virtual_body_cell .virtual_row_drag_icon:after{content:"";background-image:radial-gradient(circle,currentColor 1.1px,#0000 1.3px);background-size:4px 4px;width:4px;height:12px;position:absolute;top:2px}.virtual_table_view .virtual_body_cell .virtual_row_drag_icon:before{left:2px}.virtual_table_view .virtual_body_cell .virtual_row_drag_icon:after{right:2px}.virtual_table_view .virtual_body_cell .virtual_cell_content{flex:1;align-items:center;min-width:0;height:100%;display:flex;overflow:hidden}.virtual_table_view .virtual_body_cell .virtual_name_text{text-overflow:ellipsis;white-space:nowrap}.virtual_table_view .virtual_body_cell .virtual_cell_text{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.virtual_table_view .virtual_parameter_value{color:#2c344b;white-space:nowrap;flex:1;align-items:center;min-width:0;height:100%;font-size:12px;line-height:18px;display:flex;overflow:hidden}.virtual_table_view .virtual_parameter_value>div{flex:1;min-width:0;overflow:hidden}.virtual_table_view .virtual_parameter_value p{text-overflow:ellipsis;white-space:nowrap;width:100%;overflow:hidden;margin:0!important}.virtual_table_view .virtual_parameter_value p:last-child{color:#3678bf;font-family:AlibabaPuHui-medium}.virtual_full_text_tooltip{z-index:9999;pointer-events:none;white-space:pre-wrap;word-break:break-word;max-width:min(420px,100vw - 16px);position:fixed}.virtual_full_text_tooltip_default{color:#fff;background:#1f2633eb;border-radius:4px;padding:6px 10px;font-size:12px;line-height:18px;box-shadow:0 2px 8px #1f263333}.virtual_drag_preview{z-index:10000;color:#595959;pointer-events:none;white-space:nowrap;background:#fff;border:1px solid #91caff;border-radius:6px;flex-direction:column;gap:2px;min-width:180px;max-width:min(320px,100vw - 24px);padding:10px 12px;font-size:12px;line-height:18px;display:flex;position:fixed;transform:translateZ(0);box-shadow:0 6px 16px #0000002e}.virtual_drag_preview strong{color:#1677ff;text-overflow:ellipsis;font-size:13px;overflow:hidden}.virtual_drag_preview span{text-overflow:ellipsis;overflow:hidden}