diff --git a/packages/devui-vue/devui/data-grid/src/components/grid-th.tsx b/packages/devui-vue/devui/data-grid/src/components/grid-th.tsx index 39d9ec9b3a..69cb0bbe1a 100644 --- a/packages/devui-vue/devui/data-grid/src/components/grid-th.tsx +++ b/packages/devui-vue/devui/data-grid/src/components/grid-th.tsx @@ -8,71 +8,72 @@ import type { GridThProps, DataGridContext } from '../data-grid-types'; import { useGridThSort, useGridThFilter, useGridThDrag } from '../composables/use-grid-th'; export default defineComponent({ - name: 'GridTh', - props: gridThProps, - setup(props: GridThProps) { - const ns = useNamespace('data-grid'); - const { size, allChecked, halfAllChecked, virtualScroll, resizable, addGridThContextToMap, toggleAllRowChecked } = inject( - DataGridInjectionKey - ) as DataGridContext; - const { columnConfig, mouseenterCb, mouseleaveCb } = toRefs(props); - const { direction, doSort, onSortClick, doClearSort } = useGridThSort(columnConfig); - const { filterActive, setFilterStatus, onFilterChange } = useGridThFilter(columnConfig); - const classes = computed(() => ({ - [ns.e('th')]: true, - [ns.m(columnConfig.value.align)]: true, - [ns.e('sticky-th')]: true, - [ns.em('th', size.value)]: true, - [ns.em('th', 'filter-active')]: filterActive.value, - [ns.em('th', 'sort-active')]: Boolean(direction.value), - [ns.em('th', 'operable')]: - columnConfig.value.filterable || - columnConfig.value.sortable || - (!virtualScroll.value && (columnConfig.value.resizable ?? resizable.value)), - })); - const { thRef, onMousedown } = useGridThDrag(columnConfig); + name: 'GridTh', + props: gridThProps, + setup(props: GridThProps) { + const ns = useNamespace('data-grid'); + const { size, allChecked, halfAllChecked, virtualScroll, columnVirtualScroll, resizable, addGridThContextToMap, toggleAllRowChecked } = + inject(DataGridInjectionKey) as DataGridContext; + const { columnConfig, mouseenterCb, mouseleaveCb } = toRefs(props); + const { direction, doSort, onSortClick, doClearSort } = useGridThSort(columnConfig); + const { filterActive, setFilterStatus, onFilterChange } = useGridThFilter(columnConfig); + const classes = computed(() => ({ + [ns.e('th')]: true, + [ns.m(columnConfig.value.align)]: true, + [ns.e('sticky-th')]: true, + [ns.em('th', size.value)]: true, + [ns.em('th', 'filter-active')]: filterActive.value, + [ns.em('th', 'sort-active')]: Boolean(direction.value), + [ns.em('th', 'operable')]: + columnConfig.value.filterable || + columnConfig.value.sortable || + (!(columnVirtualScroll.value ?? virtualScroll.value) && (columnConfig.value.resizable ?? resizable.value)), + })); + const { thRef, onMousedown } = useGridThDrag(columnConfig); - if (columnConfig.value.sortable) { - addGridThContextToMap(columnConfig.value.field, { doSort, doClearSort }); - } + if (columnConfig.value.sortable) { + addGridThContextToMap(columnConfig.value.field, { doSort, doClearSort }); + } - const cellTypeMap = { - checkable: () => , - index: () => #, - default: () => {columnConfig.value.header}, - }; + const cellTypeMap = { + checkable: () => , + index: () => #, + default: () => {columnConfig.value.header}, + }; - return () => ( -
mouseenterCb.value(e, columnConfig.value.showHeadOverflowTooltip)} - onMouseleave={(e) => mouseleaveCb.value(e, columnConfig.value.showHeadOverflowTooltip)}> - {columnConfig.value.headRender ? ( - {columnConfig.value.headRender(columnConfig.value)} - ) : ( - cellTypeMap[columnConfig.value.type || 'default']() - )} - {columnConfig.value.sortable && ( - - )} - {columnConfig.value.filterable && ( - - )} - {!virtualScroll.value && (columnConfig.value.resizable ?? resizable.value) && } -
- ); - }, -}); \ No newline at end of file + return () => ( +
mouseenterCb.value(e, columnConfig.value.showHeadOverflowTooltip)} + onMouseleave={(e) => mouseleaveCb.value(e, columnConfig.value.showHeadOverflowTooltip)}> + {columnConfig.value.headRender ? ( + {columnConfig.value.headRender(columnConfig.value)} + ) : ( + cellTypeMap[columnConfig.value.type || 'default']() + )} + {columnConfig.value.sortable && ( + + )} + {columnConfig.value.filterable && ( + + )} + {!(columnVirtualScroll.value ?? virtualScroll.value) && (columnConfig.value.resizable ?? resizable.value) && ( + + )} +
+ ); + }, +}); diff --git a/packages/devui-vue/devui/data-grid/src/composables/use-data-grid.ts b/packages/devui-vue/devui/data-grid/src/composables/use-data-grid.ts index 6e45f84fba..cc6b6c6c51 100644 --- a/packages/devui-vue/devui/data-grid/src/composables/use-data-grid.ts +++ b/packages/devui-vue/devui/data-grid/src/composables/use-data-grid.ts @@ -10,7 +10,7 @@ import { ColumnType, RowHeightMap } from '../const'; import { calcEachColumnWidth } from '../utils'; export function useDataGrid(props: DataGridProps, ctx: SetupContext) { - const { data, columns, size, virtualScroll } = toRefs(props); + const { data, columns, size, virtualScroll, columnVirtualScroll } = toRefs(props); const scrollRef = ref(); const headBoxRef = ref(); const bodyContentWidth = ref(0); @@ -125,7 +125,7 @@ export function useDataGrid(props: DataGridProps, ctx: SetupContext) { } bodyTotalWidth += itemColumn.width as number; } - if (!virtualScroll.value) { + if (!(columnVirtualScroll.value ?? virtualScroll.value)) { renderColumnData.value = scrollXParams.originColumnData; translateX.value = renderColumnData.value[0]?.offsetLeft ?? 0; } @@ -185,7 +185,7 @@ export function useDataGrid(props: DataGridProps, ctx: SetupContext) { let distance = 0; nextTick(() => { initOriginColumnData(); - if (virtualScroll.value && scrollRef.value) { + if ((columnVirtualScroll.value ?? virtualScroll.value) && scrollRef.value) { distance = scrollRef.value.scrollLeft; initVirtualColumnData(distance, scrollRef.value.clientWidth); } @@ -207,7 +207,7 @@ export function useDataGrid(props: DataGridProps, ctx: SetupContext) { watch( virtualColumnData, (val: InnerColumnConfig[]) => { - if (virtualScroll.value) { + if (columnVirtualScroll.value ?? virtualScroll.value) { renderColumnData.value = val; } }, @@ -231,7 +231,7 @@ export function useDataGrid(props: DataGridProps, ctx: SetupContext) { return; } scrollXParams.distance = scrollLeft; - virtualScroll.value && calcVirtualColumnData(scrollXParams); + (columnVirtualScroll.value ?? virtualScroll.value) && calcVirtualColumnData(scrollXParams); } else if (scrollTop !== scrollYParams.distance) { if (scrollYParams.originRowData.length === 0) { return; @@ -249,7 +249,7 @@ export function useDataGrid(props: DataGridProps, ctx: SetupContext) { let distance = 0; initOriginColumnData(); distance = scrollRef.value!.scrollLeft; - virtualScroll.value && initVirtualColumnData(distance, scrollRef.value!.clientWidth); + (columnVirtualScroll.value ?? virtualScroll.value) && initVirtualColumnData(distance, scrollRef.value!.clientWidth); } }); resizeObserver.observe(scrollRef.value); diff --git a/packages/devui-vue/devui/data-grid/src/data-grid-types.ts b/packages/devui-vue/devui/data-grid/src/data-grid-types.ts index 482f5678cc..ae767cf842 100644 --- a/packages/devui-vue/devui/data-grid/src/data-grid-types.ts +++ b/packages/devui-vue/devui/data-grid/src/data-grid-types.ts @@ -2,11 +2,11 @@ import type { PropType, ExtractPropTypes, VNode, InjectionKey, Ref, SetupContext import type { Placement } from '../../overlay'; export interface RowData { - checked?: boolean; - disableCheck?: boolean; - children?: RowData[]; - isLeaf?: boolean; - [k: string]: any; + checked?: boolean; + disableCheck?: boolean; + children?: RowData[]; + isLeaf?: boolean; + [k: string]: any; } export type ColumnType = 'checkable' | 'index' | ''; export type ColumnAlign = 'left' | 'center' | 'right'; @@ -21,313 +21,317 @@ export type RowClass = string | ((row: RowData, rowIndex: number) => string); export type CellClass = string | ((row: RowData, rowIndex: number, column: ColumnConfig, columnIndex: number) => string); export type RowKey = string | ((row: RowData) => string); export interface TooltipConfig { - content?: string; - position?: Placement[]; - mouseEnterDelay?: number; - enterable?: boolean; - class?: string; + content?: string; + position?: Placement[]; + mouseEnterDelay?: number; + enterable?: boolean; + class?: string; } export interface FilterListItem { - name: string; - value: any; - checked?: boolean; + name: string; + value: any; + checked?: boolean; } export interface ColumnConfig { - header: string; - field: string; - width?: number | string; - minWidth?: number | string; - maxWidth?: number | string; - type?: ColumnType; - resizable?: boolean; - sortable?: boolean; - showSortIcon?: boolean; - sortMethod?: SortMethod; - filterable?: boolean; - showFilterIcon?: boolean; - filterMultiple?: boolean; - filterList?: FilterListItem[]; - filterChange?: (val: FilterListItem | FilterListItem[]) => void; - filterMenu?: (scope: { toggleFilterMenu: (status?: boolean) => void; setFilterStatus: (status: boolean) => void }) => VNode; - fixed?: FixedDirection; - align?: ColumnAlign; - showOverflowTooltip?: boolean | TooltipConfig; - showHeadOverflowTooltip?: boolean | TooltipConfig; - headRender?: (columnConfig: ColumnConfig) => VNode; - cellRender?: (rowData: RowData, rowIndex: number, cellData: string, cellIndex: number) => VNode; + header: string; + field: string; + width?: number | string; + minWidth?: number | string; + maxWidth?: number | string; + type?: ColumnType; + resizable?: boolean; + sortable?: boolean; + showSortIcon?: boolean; + sortMethod?: SortMethod; + filterable?: boolean; + showFilterIcon?: boolean; + filterMultiple?: boolean; + filterList?: FilterListItem[]; + filterChange?: (val: FilterListItem | FilterListItem[]) => void; + filterMenu?: (scope: { toggleFilterMenu: (status?: boolean) => void; setFilterStatus: (status: boolean) => void }) => VNode; + fixed?: FixedDirection; + align?: ColumnAlign; + showOverflowTooltip?: boolean | TooltipConfig; + showHeadOverflowTooltip?: boolean | TooltipConfig; + headRender?: (columnConfig: ColumnConfig) => VNode; + cellRender?: (rowData: RowData, rowIndex: number, cellData: string, cellIndex: number) => VNode; } export interface InnerColumnConfig extends ColumnConfig { - $columnId: string; - offsetLeft: number; - $showExpandTreeIcon?: boolean; + $columnId: string; + offsetLeft: number; + $showExpandTreeIcon?: boolean; } export interface InnerRowData extends RowData { - $rowId?: string; - $parentId?: string; - $rowIndex?: number; - $level?: number; - height?: number; - offsetTop?: number; - showNode?: boolean; // 树表格时，控制是否展示子节点 - $expand?: boolean; - halfChecked?: boolean; - childList?: InnerRowData[]; - descendantList?: InnerRowData[]; + $rowId?: string; + $parentId?: string; + $rowIndex?: number; + $level?: number; + height?: number; + offsetTop?: number; + showNode?: boolean; // 树表格时，控制是否展示子节点 + $expand?: boolean; + halfChecked?: boolean; + childList?: InnerRowData[]; + descendantList?: InnerRowData[]; } export interface ScrollYParams { - distance: number; - renderCountPerScreen: number; - scrollScaleY: number[]; - originRowData: InnerRowData[]; - defaultSortRowData: InnerRowData[]; + distance: number; + renderCountPerScreen: number; + scrollScaleY: number[]; + originRowData: InnerRowData[]; + defaultSortRowData: InnerRowData[]; } export interface ScrollXParams { - distance: number; - totalColumn: number; - bufferSize: number; - scrollViewWidth: number; - scrollScaleX: number[]; - originColumnData: InnerColumnConfig[]; + distance: number; + totalColumn: number; + bufferSize: number; + scrollViewWidth: number; + scrollScaleX: number[]; + originColumnData: InnerColumnConfig[]; } export interface IExpandLoadMoreResult { - node: InnerRowData; - rowItems: RowData[]; + node: InnerRowData; + rowItems: RowData[]; } export const dataGridProps = { - columns: { - type: Array as PropType, - default: () => [] - }, - data: { - type: Array as PropType, - default: () => [] - }, - indent: { - type: Number, - default: 16 - }, - striped: { - type: Boolean, - default: false - }, - fixHeader: { - type: Boolean, - default: false - }, - rowHoveredHighlight: { - type: Boolean, - default: true - }, - headerBg: { - type: Boolean, - default: false - }, - showHeader: { - type: Boolean, - default: true - }, - lazy: { - type: Boolean, - default: false - }, - virtualScroll: { - type: Boolean, - default: false - }, - reserveCheck: { - type: Boolean, - default: false - }, - resizable: { - type: Boolean, - }, - rowClass: { - type: [String, Function] as PropType, - default: '' - }, - rowKey: { - type: [String, Function] as PropType, - }, - cellClass: { - type: [String, Function] as PropType, - default: '' - }, - size: { - type: String as PropType, - default: 'sm' - }, - borderType: { - type: String as PropType, - default: '' - }, - shadowType: { - type: String as PropType, - default: '' - }, - checkableRelation: { - type: String as PropType, - default: 'both' - } -} + columns: { + type: Array as PropType, + default: () => [], + }, + data: { + type: Array as PropType, + default: () => [], + }, + indent: { + type: Number, + default: 16, + }, + striped: { + type: Boolean, + default: false, + }, + fixHeader: { + type: Boolean, + default: false, + }, + rowHoveredHighlight: { + type: Boolean, + default: true, + }, + headerBg: { + type: Boolean, + default: false, + }, + showHeader: { + type: Boolean, + default: true, + }, + lazy: { + type: Boolean, + default: false, + }, + virtualScroll: { + type: Boolean, + default: false, + }, + columnVirtualScroll: { + type: Boolean, + }, + reserveCheck: { + type: Boolean, + default: false, + }, + resizable: { + type: Boolean, + }, + rowClass: { + type: [String, Function] as PropType, + default: '', + }, + rowKey: { + type: [String, Function] as PropType, + }, + cellClass: { + type: [String, Function] as PropType, + default: '', + }, + size: { + type: String as PropType, + default: 'sm', + }, + borderType: { + type: String as PropType, + default: '', + }, + shadowType: { + type: String as PropType, + default: '', + }, + checkableRelation: { + type: String as PropType, + default: 'both', + }, +}; export type DataGridProps = ExtractPropTypes; export interface DataGridContext { - showHeader: Ref; - fixHeader: Ref; - lazy: Ref; - virtualScroll: Ref; - resizable: Ref; - indent: Ref; - bodyContentWidth: Ref; - bodyContentHeight: Ref; - translateX: Ref; - translateY: Ref; - bodyScrollLeft: Ref; - rowClass: Ref; - cellClass: Ref; - size: Ref; - rootRef: Ref; - scrollRef: Ref; - headBoxRef: Ref; - renderColumnData: Ref; - renderFixedLeftColumnData: Ref; - renderFixedRightColumnData: Ref; - renderRowData: Ref; - rootCtx: SetupContext; - allChecked: Ref; - halfAllChecked: Ref; - isTreeGrid: Ref; - execSortMethod: (direction: SortDirection, sortMethod?: SortMethod) => void; - addGridThContextToMap: (key: ColumnConfig['field'], thCtx: GridThContext) => void; - clearAllSortState: () => void; - toggleRowExpansion: (node: InnerRowData, status?: boolean) => void; - toggleRowChecked: (node: InnerRowData, status?: boolean) => void; - toggleAllRowChecked: (status?: boolean) => void; - afterColumnDragend: (columnId: InnerColumnConfig['$columnId'], offset: number) => void; + showHeader: Ref; + fixHeader: Ref; + lazy: Ref; + virtualScroll: Ref; + columnVirtualScroll: Ref; + resizable: Ref; + indent: Ref; + bodyContentWidth: Ref; + bodyContentHeight: Ref; + translateX: Ref; + translateY: Ref; + bodyScrollLeft: Ref; + rowClass: Ref; + cellClass: Ref; + size: Ref; + rootRef: Ref; + scrollRef: Ref; + headBoxRef: Ref; + renderColumnData: Ref; + renderFixedLeftColumnData: Ref; + renderFixedRightColumnData: Ref; + renderRowData: Ref; + rootCtx: SetupContext; + allChecked: Ref; + halfAllChecked: Ref; + isTreeGrid: Ref; + execSortMethod: (direction: SortDirection, sortMethod?: SortMethod) => void; + addGridThContextToMap: (key: ColumnConfig['field'], thCtx: GridThContext) => void; + clearAllSortState: () => void; + toggleRowExpansion: (node: InnerRowData, status?: boolean) => void; + toggleRowChecked: (node: InnerRowData, status?: boolean) => void; + toggleAllRowChecked: (status?: boolean) => void; + afterColumnDragend: (columnId: InnerColumnConfig['$columnId'], offset: number) => void; } export const DataGridInjectionKey: InjectionKey = Symbol('d-data-grid'); export interface GridThContext { - doSort: (direction: SortDirection) => void; - doClearSort: () => void; + doSort: (direction: SortDirection) => void; + doClearSort: () => void; } export const gridHeadProps = { - columnData: { - type: Array as PropType, - default: () => [] - }, - leftColumnData: { - type: Array as PropType, - default: () => [] - }, - rightColumnData: { - type: Array as PropType, - default: () => [] - }, - translateX: { - type: Number, - default: 0 - }, - bodyScrollLeft: { - type: Number, - default: 0 - } -} + columnData: { + type: Array as PropType, + default: () => [], + }, + leftColumnData: { + type: Array as PropType, + default: () => [], + }, + rightColumnData: { + type: Array as PropType, + default: () => [], + }, + translateX: { + type: Number, + default: 0, + }, + bodyScrollLeft: { + type: Number, + default: 0, + }, +}; export type GridHeadProps = ExtractPropTypes; export const gridBodyProps = { - rowData: { - type: Array as PropType, - default: () => [] - }, - columnData: { - type: Array as PropType, - default: () => [] - }, - leftColumnData: { - type: Array as PropType, - default: () => [] - }, - rightColumnData: { - type: Array as PropType, - default: () => [] - }, - translateX: { - type: Number, - default: 0 - }, - translateY: { - type: Number, - default: 0 - }, - bodyScrollLeft: { - type: Number, - default: 0 - } -} + rowData: { + type: Array as PropType, + default: () => [], + }, + columnData: { + type: Array as PropType, + default: () => [], + }, + leftColumnData: { + type: Array as PropType, + default: () => [], + }, + rightColumnData: { + type: Array as PropType, + default: () => [], + }, + translateX: { + type: Number, + default: 0, + }, + translateY: { + type: Number, + default: 0, + }, + bodyScrollLeft: { + type: Number, + default: 0, + }, +}; export type GridBodyProps = ExtractPropTypes; export const gridThProps = { - columnConfig: { - type: Object as PropType, - default: () => ({}) - }, - mouseenterCb: { - type: Function as PropType<(e: Event, tooltipConfig: InnerColumnConfig['showOverflowTooltip']) => void>, - default: () => ({}) - }, - mouseleaveCb: { - type: Function as PropType<(e: Event, tooltipConfig: InnerColumnConfig['showOverflowTooltip']) => void>, - default: () => ({}) - } -} + columnConfig: { + type: Object as PropType, + default: () => ({}), + }, + mouseenterCb: { + type: Function as PropType<(e: Event, tooltipConfig: InnerColumnConfig['showOverflowTooltip']) => void>, + default: () => ({}), + }, + mouseleaveCb: { + type: Function as PropType<(e: Event, tooltipConfig: InnerColumnConfig['showOverflowTooltip']) => void>, + default: () => ({}), + }, +}; export type GridThProps = ExtractPropTypes; export const gridThFilterProps = { - filterList: { - type: Array as PropType, - default: () => [] - }, - multiple: { - type: Boolean, - default: true, - }, - showFilterIcon: { - type: Boolean, - default: false - }, - filterMenu: { - type: Function as PropType - }, - setFilterStatus: { - type: Function as PropType<(status: boolean) => void>, - default() { } - } -} + filterList: { + type: Array as PropType, + default: () => [], + }, + multiple: { + type: Boolean, + default: true, + }, + showFilterIcon: { + type: Boolean, + default: false, + }, + filterMenu: { + type: Function as PropType, + }, + setFilterStatus: { + type: Function as PropType<(status: boolean) => void>, + default() {}, + }, +}; export type GridThFilterProps = ExtractPropTypes; export const gridTdProps = { - rowData: { - type: Object as PropType, - default: () => ({}) - }, - cellData: { - type: Object as PropType, - default: () => ({}) - }, - rowIndex: { - type: Number, - default: 0 - }, - mouseenterCb: { - type: Function as PropType<(e: Event, tooltipConfig: InnerColumnConfig['showOverflowTooltip']) => void>, - default: () => ({}) - }, - mouseleaveCb: { - type: Function as PropType<(e: Event, tooltipConfig: InnerColumnConfig['showOverflowTooltip']) => void>, - default: () => ({}) - } -} -export type GridTdProps = ExtractPropTypes; \ No newline at end of file + rowData: { + type: Object as PropType, + default: () => ({}), + }, + cellData: { + type: Object as PropType, + default: () => ({}), + }, + rowIndex: { + type: Number, + default: 0, + }, + mouseenterCb: { + type: Function as PropType<(e: Event, tooltipConfig: InnerColumnConfig['showOverflowTooltip']) => void>, + default: () => ({}), + }, + mouseleaveCb: { + type: Function as PropType<(e: Event, tooltipConfig: InnerColumnConfig['showOverflowTooltip']) => void>, + default: () => ({}), + }, +}; +export type GridTdProps = ExtractPropTypes; diff --git a/packages/devui-vue/devui/data-grid/src/data-grid.tsx b/packages/devui-vue/devui/data-grid/src/data-grid.tsx index 38cd7a5e91..e1d72107b5 100644 --- a/packages/devui-vue/devui/data-grid/src/data-grid.tsx +++ b/packages/devui-vue/devui/data-grid/src/data-grid.tsx @@ -1,10 +1,10 @@ -import { defineComponent, provide, toRefs, ref } from "vue"; +import { defineComponent, provide, toRefs, ref } from 'vue'; import type { SetupContext } from 'vue'; import FixHeadGrid from './components/fix-head-grid'; import NormalHeadGrid from './components/normal-head-grid'; -import { dataGridProps, DataGridInjectionKey } from "./data-grid-types"; -import type { DataGridProps } from "./data-grid-types"; -import { useDataGrid, useDataGridStyle } from "./composables/use-data-grid"; +import { dataGridProps, DataGridInjectionKey } from './data-grid-types'; +import type { DataGridProps } from './data-grid-types'; +import { useDataGrid, useDataGridStyle } from './composables/use-data-grid'; import './data-grid.scss'; export default defineComponent({ @@ -25,7 +25,7 @@ export default defineComponent({ 'expandLoadMore', ], setup(props: DataGridProps, ctx: SetupContext) { - const { fixHeader, showHeader, lazy, rowClass, cellClass, size, indent, virtualScroll, resizable } = toRefs(props); + const { fixHeader, showHeader, lazy, rowClass, cellClass, size, indent, virtualScroll, columnVirtualScroll, resizable } = toRefs(props); const rootRef = ref(); const { scrollRef, @@ -65,6 +65,7 @@ export default defineComponent({ lazy, indent, virtualScroll, + columnVirtualScroll, resizable, bodyContentWidth, bodyContentHeight, @@ -88,7 +89,7 @@ export default defineComponent({ toggleRowExpansion, toggleRowChecked, toggleAllRowChecked, - afterColumnDragend + afterColumnDragend, }); ctx.expose({ sort, toggleRowChecked, toggleAllRowChecked, getCheckedRows, toggleRowExpansion, toggleAllRowExpansion, refreshRowsData }); @@ -102,5 +103,5 @@ export default defineComponent({ )} ); - } + }, }); diff --git a/packages/devui-vue/devui/editable-select/src/editable-select.scss b/packages/devui-vue/devui/editable-select/src/editable-select.scss index b6fbc40e90..0cd386dc06 100644 --- a/packages/devui-vue/devui/editable-select/src/editable-select.scss +++ b/packages/devui-vue/devui/editable-select/src/editable-select.scss @@ -131,10 +131,6 @@ } } - &__dropdown { - margin: 8px 0; - } - &__inner { padding: 12px; margin: 0; diff --git a/packages/devui-vue/devui/select/src/select.scss b/packages/devui-vue/devui/select/src/select.scss index 0a7f6ad7fc..f4ad2ddcd5 100644 --- a/packages/devui-vue/devui/select/src/select.scss +++ b/packages/devui-vue/devui/select/src/select.scss @@ -372,6 +372,7 @@ $select-item-min-height: 36px; text-align: center; font-size: $select-item-font-size; color: $devui-disabled-text; + min-height: 22px; } .#{$devui-prefix}-select__group { diff --git a/packages/devui-vue/devui/select/src/select.tsx b/packages/devui-vue/devui/select/src/select.tsx index 13e17d9496..b4866e5b2b 100644 --- a/packages/devui-vue/devui/select/src/select.tsx +++ b/packages/devui-vue/devui/select/src/select.tsx @@ -12,7 +12,7 @@ import { withModifiers, onUnmounted, nextTick, - computed + computed, } from 'vue'; import type { SetupContext } from 'vue'; import useSelect from './use-select'; @@ -26,9 +26,13 @@ import useSelectFunction from './composables/use-select-function'; import './select.scss'; import { createI18nTranslate } from '../../locale/create'; import { FlexibleOverlay, Placement } from '../../overlay'; +import LoadingDirective from '../../loading/src/loading-directive'; export default defineComponent({ name: 'DSelect', + directives: { + dLoading: LoadingDirective, + }, props: selectProps, emits: ['toggle-change', 'value-change', 'update:modelValue', 'focus', 'blur', 'remove-tag', 'clear', 'input-change'], setup(props: SelectProps, ctx: SetupContext) { @@ -82,7 +86,7 @@ export default defineComponent({ }; const styles = computed(() => ({ transformOrigin: currentPosition.value === 'top' ? '0% 100%' : '0% 0%', - 'z-index': 'var(--devui-z-index-dropdown, 1052)' + 'z-index': 'var(--devui-z-index-dropdown, 1052)', })); const updateDropdownWidth = () => { @@ -155,7 +159,7 @@ export default defineComponent({ position={position.value} onPositionChange={handlePositionChange} style={styles.value}> -
+
    {isShowCreateOption.value && ( ))}
- {isShowEmptyText.value && ( + {(isLoading.value || isShowEmptyText.value) && (
{ctx.slots?.empty && ctx.slots.empty()} {!ctx.slots?.empty &&

{emptyText.value}

} diff --git a/packages/devui-vue/devui/select/src/use-select.ts b/packages/devui-vue/devui/select/src/use-select.ts index 820077dad7..685226079b 100644 --- a/packages/devui-vue/devui/select/src/use-select.ts +++ b/packages/devui-vue/devui/select/src/use-select.ts @@ -307,7 +307,7 @@ export default function useSelect( return label.toString().toLocaleLowerCase().includes(filterQuery.value.toLocaleLowerCase().trim()); }).length; if (isLoading.value) { - return props.loadingText || (t('loadingText') as string); + return ''; } if (isSupportFilter.value && filterQuery.value && injectOptionsArray.value.length > 0 && visibleOptionsCount === 0) { return props.noMatchText || (t('noMatchText') as string); diff --git a/packages/devui-vue/devui/table/src/composables/use-table.ts b/packages/devui-vue/devui/table/src/composables/use-table.ts index f28c3e93da..4e15ecd292 100644 --- a/packages/devui-vue/devui/table/src/composables/use-table.ts +++ b/packages/devui-vue/devui/table/src/composables/use-table.ts @@ -19,7 +19,7 @@ export function useTable(props: TableProps, tableWidth: Ref): UseTable { maxHeight: props.maxHeight, maxWidth: props.maxWidth, height: props.tableHeight, - width: tableWidth.value ? `${tableWidth.value}px` : props.tableWidth, + width: props.tableWidth, })); return { classes, styles }; } diff --git a/packages/devui-vue/docs/components/editor-md/index.md b/packages/devui-vue/docs/components/editor-md/index.md index fb7b4d1c12..e5404df882 100644 --- a/packages/devui-vue/docs/components/editor-md/index.md +++ b/packages/devui-vue/docs/components/editor-md/index.md @@ -597,6 +597,7 @@ Bob-->>John: Jolly good! | placeholder | `string` | '' | 编辑器无内容是的提示信息 | | fullscreen-z-index | `number` | 10 | 编辑器全屏状态的 z-index | | image-upload-to-server | `boolean` | false | 是否打开图片自定义上传开关（打开后将将监听图片的复制，toolbar 图片功能上传，传出事件回调） | +|editor-container-height|`number`|--|可选，编辑器内容区高度|| ### EditorMd 事件 diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json index 09d6746b06..e288d7c07d 100644 --- a/packages/devui-vue/package.json +++ b/packages/devui-vue/package.json @@ -1,6 +1,6 @@ { "name": "vue-devui", - "version": "1.6.11", + "version": "1.6.12", "license": "MIT", "description": "DevUI components based on Vite and Vue3", "keywords": [