Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(base-select): [base-select] remove tree/grid code from base-select #2522

Merged
merged 1 commit into from
Nov 15, 2024
Merged

refactor(base-select): [base-select] remove tree/grid code from base-select #2522

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/base-select/size.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,5 +54,5 @@ test('mini 尺寸', async ({ page }) => {

await expect(input).toHaveClass(/tiny-input-mini/)
await expect(tag.nth(0)).toHaveClass(/tiny-tag--mini tiny-tag--light/)
expect(height).toBeCloseTo(27, 1)
expect(height).toBeCloseTo(28, 1)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Based on the shell script results, I can now make a definitive assessment. The results show that across different components:

  1. Mini size consistently has 24px height:

    • Input: await expect(mini).toHaveCSS('height', '24px')
    • Time Select: await expect(miniBox).toHaveCSS('height', '24px')
    • Autocomplete: await expect(miniSize).toHaveCSS('height', '24px')
    • Cascader: await expect(page.locator('.tiny-cascader.tiny-cascader--mini input')).toHaveCSS('height', '24px')

  2. Small size consistently has 28px height:

    • Input: await expect(small).toHaveCSS('height', '28px')
    • Time Select: await expect(smallBox).toHaveCSS('height', '28px')
    • Autocomplete: await expect(smallSize).toHaveCSS('height', '28px')
    • Cascader: await expect(page.locator('.tiny-cascader.tiny-cascader--small input')).toHaveCSS('height', '28px')

Height assertion for mini size should be 24px, not 28px

The mini size height assertion of 28px in base-select is inconsistent with the established pattern across other components where mini size is consistently 24px. This appears to be an error in the test case rather than an intentional design change.

  • examples/sites/demos/pc/app/base-select/size.spec.ts: Change the mini size height assertion from 28px to 24px to maintain consistency with other components
🔗 Analysis chain

Verify if mini and small sizes should have the same height

The height assertion for mini size (28px) is now identical to the small size variant. This could indicate:

  1. A bug fix to align with correct specifications
  2. An intentional design change to make mini same height as small
  3. A potential issue if mini and small sizes shouldn't be identical

If this is an intentional change, please ensure it's documented in the component's specifications.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Search for size-related specifications or documentation

# Check if there's any documentation about component sizes
fd -e md -e vue . | xargs rg -l "(?i)(size|mini|small).*(height|dimension)"

# Look for size-related constants or theme variables
fd -e ts -e js . | xargs rg "(mini|small).*height"

# Search for other test files that might contain size assertions
fd spec.ts$ . | xargs rg "toBeCloseTo.*28"

Length of output: 3756

})
95 changes: 0 additions & 95 deletions packages/renderless/src/base-select/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,51 +61,6 @@ export const showTip =
}
}

export const gridOnQueryChange =
({ props, vm, constants, state }) =>
(value) => {
const { multiple, valueField, filterMethod, filterable, remote, remoteMethod } = props

if (filterable && typeof filterMethod === 'function') {
const table = vm.$refs.selectGrid.$refs.tinyTable
const fullData = table.afterFullData

vm.$refs.selectGrid.scrollTo(null, 0)

table.afterFullData = filterMethod(value, fullData) || []

vm.$refs.selectGrid
.handleTableData(!value)
.then(() => state.selectEmitter.emit(constants.EVENT_NAME.updatePopper))

state.previousQuery = value
} else if (remote && typeof remoteMethod === 'function') {
state.previousQuery = value
remoteMethod(value, props.extraQueryParams).then((data) => {
// 多选时取远端数据与当前已选数据的并集
if (multiple) {
const selectedIds = state.selected.map((sel) => sel[valueField])
vm.$refs.selectGrid.clearSelection()
vm.$refs.selectGrid.setSelection(
data.filter((row) => ~selectedIds.indexOf(row[valueField])),
true
)
state.remoteData = data.filter((row) => !~selectedIds.indexOf(row[valueField])).concat(state.selected)
} else {
vm.$refs.selectGrid.clearRadioRow()
vm.$refs.selectGrid.setRadioRow(find(data, (item) => props.modelValue === item[props.valueField]))
state.remoteData = data
}

vm.$refs.selectGrid.$refs.tinyTable.lastScrollTop = 0
vm.$refs.selectGrid.loadData(data)
vm.$refs.selectGrid
.handleTableData(!value)
.then(() => state.selectEmitter.emit(constants.EVENT_NAME.updatePopper))
})
}
}

export const defaultOnQueryChange =
({ props, state, constants, api, nextTick }) =>
(value, isInput) => {
Expand Down Expand Up @@ -365,7 +320,6 @@ export const setSelected =
state.selected = result
}

vm.$refs.selectTree && vm.$refs.selectTree.setCheckedNodes && vm.$refs.selectTree.setCheckedNodes(state.selected)
state.tips = state.selected.map((item) => (item.state ? item.state.currentLabel : item.currentLabel)).join(',')

setFilteredSelectCls(nextTick, state, props)
Expand Down Expand Up @@ -1246,10 +1200,6 @@ export const toVisible =
if (vm.$refs.input && vm.$refs.input.value === '' && state.selected.length === 0) {
state.currentPlaceholder = state.cachedPlaceHolder
}

if (vm.$refs.selectGrid) {
vm.$refs.selectGrid.clearScroll()
}
})

postOperOfToVisible({ props, state, constants })
Expand Down Expand Up @@ -1283,31 +1233,6 @@ export const toHide =
}
}
}

if (vm.$refs.selectGrid) {
let { fullData } = vm.$refs.selectGrid.getTableData()
if (multiple) {
const selectedIds = state.selected.map((sel) => sel[valueField])
vm.$refs.selectGrid.clearSelection()
vm.$refs.selectGrid.setSelection(
fullData.filter((row) => ~selectedIds.indexOf(row[valueField])),
true
)
} else {
vm.$refs.selectGrid.clearRadioRow()
vm.$refs.selectGrid.setRadioRow(find(fullData, (item) => props.modelValue === item[valueField]))
}

if (filterable && typeof props.filterMethod === 'function') {
vm.$refs.selectGrid.handleTableData(true)
} else if (
filterable &&
remote &&
(typeof props.remoteMethod === 'function' || typeof props.initQuery === 'function')
) {
vm.$refs.selectGrid.handleTableData()
}
}
}

export const watchVisible =
Expand Down Expand Up @@ -1425,23 +1350,6 @@ export const handleCopyClick =
parent.$el.removeChild(input)
}

export const getcheckedData =
({ props, state }) =>
() => {
const checkedKey = []

if (!Array.isArray(state.selected)) {
return props.modelValue ? [props.modelValue] : [state.selected[props.valueField]]
} else {
state.selected.length > 0 &&
state.selected.forEach((item) => {
checkedKey.push(item[props.valueField])
})

return checkedKey
}
}

export const debouncRquest = ({ api, state, props }) =>
debounce(props.delay, () => {
if (props.filterable && state.query !== state.selectedLabel) {
Expand Down Expand Up @@ -1667,14 +1575,12 @@ export const initQuery =
return new Promise((resolve) => {
initData.then((selected) => {
state.remoteData = selected
vm.$refs.selectGrid.loadData(selected)
resolve(selected)
})
})
}
selected = initData
state.remoteData = selected
vm.$refs.selectGrid.loadData(selected)
}

return Promise.resolve(selected)
Expand All @@ -1683,7 +1589,6 @@ export const initQuery =
export const mounted =
({ api, parent, state, props, vm, designConfig }) =>
() => {
state.defaultCheckedKeys = state.gridCheckedData
const parentEl = parent.$el
const inputEl = parentEl.querySelector('input[data-tag="tiny-input-inner"]')

Expand Down
8 changes: 0 additions & 8 deletions packages/renderless/src/base-select/vue.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import {
debouncRquest,
getChildValue,
getcheckedData,
calcOverFlow,
toggleCheckAll,
handleCopyClick,
Expand Down Expand Up @@ -55,7 +54,6 @@ import {
onMouseenterNative,
onMouseleaveNative,
onCopying,
gridOnQueryChange,
defaultOnQueryChange,
queryChange,
toVisible,
Expand Down Expand Up @@ -259,8 +257,6 @@ const initStateAdd = ({ computed, props, api, parent }) => {
initialInputHeight: 0,
currentPlaceholder: props.placeholder,
filteredOptionsCount: 0,
gridData: [],
treeData: [],
remoteData: [],
currentKey: props.modelValue,
updateId: '',
Expand All @@ -271,12 +267,10 @@ const initStateAdd = ({ computed, props, api, parent }) => {
formItemSize: computed(() => (parent.formItem || { state: {} }).state.formItemSize),
selectDisabled: computed(() => api.computedSelectDisabled()),
isDisplayOnly: computed(() => props.displayOnly || (parent.form || {}).displayOnly),
gridCheckedData: computed(() => api.getcheckedData()),
searchSingleCopy: computed(() => props.allowCopy && !props.multiple && props.filterable),
childrenName: computed(() => 'children'),
tooltipContent: {},
isHidden: false,
defaultCheckedKeys: [],
optionIndexArr: [],
showCollapseTag: false,
exceedMaxVisibleRow: false, // 是否超出默认最大显示行数
Expand Down Expand Up @@ -317,7 +311,6 @@ const initApi = ({
showTip: showTip({ props, state, vm }),
onOptionDestroy: onOptionDestroy(state),
setSoftFocus: setSoftFocus({ vm, state }),
getcheckedData: getcheckedData({ props, state }),
resetInputWidth: resetInputWidth({ vm, state }),
resetHoverIndex: resetHoverIndex({ props, state }),
resetDatas: resetDatas({ props, state }),
Expand All @@ -338,7 +331,6 @@ const initApi = ({
onMouseenterNative: onMouseenterNative({ state }),
onMouseleaveNative: onMouseleaveNative({ state }),
onCopying: onCopying({ state, vm }),
gridOnQueryChange: gridOnQueryChange({ props, vm, constants, state }),
watchHoverIndex: watchHoverIndex({ state }),
computeOptimizeOpts: computeOptimizeOpts({ props, designConfig }),
computeCollapseTags: computeCollapseTags(props),
Expand Down
Loading