diff --git a/script/rollup.config.js b/script/rollup.config.js index ded2c0955..66e95b0d3 100644 --- a/script/rollup.config.js +++ b/script/rollup.config.js @@ -219,4 +219,13 @@ const umdMinConfig = { }, }; -export default [cssConfig, esConfig, esmConfig, cjsConfig, umdConfig, umdMinConfig]; +// 单独导出 reset.css 到 dist 目录,兼容旧版本样式 +const resetCss = { + input: 'src/_common/style/web/_reset.less', + output: { + file: 'dist/reset.css', + }, + plugins: [postcss({ extract: true })], +}; + +export default [cssConfig, esConfig, esmConfig, cjsConfig, umdConfig, umdMinConfig, resetCss]; diff --git a/site/docs/getting-started.md b/site/docs/getting-started.md index 093f5d409..cfe5b3a9d 100644 --- a/site/docs/getting-started.md +++ b/site/docs/getting-started.md @@ -38,6 +38,25 @@ Vue.use(TDesign); npm package 中提供了多种构建产物,可以阅读 [这里](https://github.com/Tencent/tdesign/blob/main/docs/develop-install.md) 了解不同目录下产物的差别。 +#### reset 样式 + +`0.43.0` 版本开始我们不再引入 `reset.less`,影响最大的是移除了原先全局盒子模型的设定: + +```css +*, +*::before, +*::after { + box-sizing: border-box; +} +``` + +如果你的项目开发依赖于原先的 `reset` 样式,可以从 `dist` 目录中单独引入它: + +```js +import 'tdesign-vue/dist/reset.css'; +``` + + ### 自动引入 故名思义,就是可以直接使用 TDesign 的组件,而不需要手动引入: diff --git a/src/select-input/useSingle.tsx b/src/select-input/useSingle.tsx index 6be86144e..7789b1938 100644 --- a/src/select-input/useSingle.tsx +++ b/src/select-input/useSingle.tsx @@ -84,6 +84,7 @@ export default function useSingle(props: TdSelectInputProps, context: SetupConte showClearIconOnEmpty: Boolean(props.clearable && (inputValue.value || displayedValue)), inputClass: { [`${classPrefix.value}-input--focused`]: popupVisible, + [`${classPrefix.value}-is-focused`]: popupVisible, }, ...props.inputProps, }; diff --git a/src/table/hooks/useDragSort.ts b/src/table/hooks/useDragSort.ts index ff80b748f..4ee913ef1 100644 --- a/src/table/hooks/useDragSort.ts +++ b/src/table/hooks/useDragSort.ts @@ -2,9 +2,10 @@ import { SetupContext, computed, toRefs, ref, watch, h, } from '@vue/composition-api'; -import Sortable, { SortableEvent, SortableOptions } from 'sortablejs'; +import Sortable, { SortableEvent, SortableOptions, MoveEvent } from 'sortablejs'; import get from 'lodash/get'; import isFunction from 'lodash/isFunction'; +import { hasClass } from '../../utils/dom'; import { TableRowData, TdPrimaryTableProps, DragSortContext, PrimaryTableCol, } from '../type'; @@ -23,7 +24,7 @@ import swapDragArrayElement from '../../_common/js/utils/swapDragArrayElement'; */ export default function useDragSort(props: TdPrimaryTableProps, context: SetupContext) { const { sortOnRowDraggable, dragSort, data } = toRefs(props); - const { tableDraggableClasses, tableBaseClass } = useClassName(); + const { tableDraggableClasses, tableBaseClass, tableFullRowClasses } = useClassName(); const columns = ref(props.columns || []); const primaryTableRef = ref(null); // @ts-ignore 判断是否有拖拽列 @@ -79,6 +80,8 @@ export default function useDragSort(props: TdPrimaryTableProps, context: SetupCo ghostClass: tableDraggableClasses.ghost, chosenClass: tableDraggableClasses.chosen, dragClass: tableDraggableClasses.dragging, + filter: `.${tableFullRowClasses.base}`, // 过滤首行尾行固定 + onMove: (evt: MoveEvent) => !hasClass(evt.related, tableFullRowClasses.base), onEnd(evt: SortableEvent) { // 处理受控:拖拽列表恢复原始排序 dragInstanceTmp?.sort(lastRowList.value); diff --git a/src/table/hooks/useFixed.ts b/src/table/hooks/useFixed.ts index 1cbdab22b..9c69d8193 100644 --- a/src/table/hooks/useFixed.ts +++ b/src/table/hooks/useFixed.ts @@ -263,6 +263,7 @@ export default function useFixed(props: TdBaseTableProps, context: SetupContext) const updateRowAndColFixedPosition = (tableContentElm: HTMLElement, initialColumnMap: RowAndColFixedPosition) => { rowAndColFixedPosition.value.clear(); + if (!tableContentElm) return; const thead = tableContentElm.querySelector('thead'); // 处理固定列 thead && setFixedColPosition(thead.children, initialColumnMap); @@ -276,7 +277,7 @@ export default function useFixed(props: TdBaseTableProps, context: SetupContext) let shadowLastScrollLeft: number; const updateColumnFixedShadow = (target: HTMLElement) => { - if (!isFixedColumn.value) return; + if (!isFixedColumn.value || !target) return; const { scrollLeft } = target; // 只有左右滚动,需要更新固定列阴影 if (shadowLastScrollLeft === scrollLeft) return; @@ -338,6 +339,7 @@ export default function useFixed(props: TdBaseTableProps, context: SetupContext) const updateTableWidth = () => { const rect = tableContentRef.value?.getBoundingClientRect(); + if (!rect) return; // 存在纵向滚动条,且固定表头时,需去除滚动条宽度 const reduceWidth = isFixedHeader.value ? scrollbarWidth.value : 0; tableWidth.value = rect.width - reduceWidth - (props.bordered ? 1 : 0); @@ -362,7 +364,8 @@ export default function useFixed(props: TdBaseTableProps, context: SetupContext) if (notNeedThWidthList.value) return; const timer = setTimeout(() => { updateTableWidth(); - const thead = tableContentRef.value.querySelector('thead'); + const thead = tableContentRef.value?.querySelector('thead'); + if (!thead) return; updateThWidthList(thead.children); clearTimeout(timer); }, 0); diff --git a/src/table/tbody.tsx b/src/table/tbody.tsx index b2ca03b5c..ba51d0ceb 100644 --- a/src/table/tbody.tsx +++ b/src/table/tbody.tsx @@ -235,7 +235,7 @@ export default defineComponent({ trNodeList, getFullRow(h, columnLength, 'last-full-row'), ]; - const isEmpty = !this.data?.length && !this.loading; + const isEmpty = !this.data?.length && !this.loading && !this.firstFullRow && !this.$lastFullRow; const translate = `translate(0, ${this.translateY}px)`; const posStyle = {