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

feat(base-select): [base-select] optimize base select and fix some bugs #2532

Merged
merged 9 commits into from
Nov 19, 2024
Merged

feat(base-select): [base-select] optimize base select and fix some bugs #2532

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
808af1f
fix(base-select): [base-select] fix data init error when set options …
kagol Nov 18, 2024
85e6737
fix(base-select): fix data display error when set disabled and hover-…
kagol Nov 18, 2024
c0acafd
fix: fix conflict
kagol Nov 18, 2024
5d56fa1
fix(base-select): fix e2e test failed
kagol Nov 18, 2024
ab5516e
fix(base-select): fix search component style when set searchable
kagol Nov 19, 2024
71dd9d2
fix(base-select): fix top-create style
kagol Nov 19, 2024
9e524ef
fix(base-select): fix slot-prefix demo style
kagol Nov 19, 2024
dad14ae
fix(base-select): fix option can not selected when set clear-no-match…
kagol Nov 19, 2024
7fe4829
chore(base-select): remove beta tag
kagol Nov 19, 2024
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
Next Next commit
fix(base-select): [base-select] fix data init error when set options … 
…and multiple
  • Loading branch information
@kagol
kagol committed Nov 18, 2024
commit 808af1f3b5a15df6d8dd5a84479d67b83efa1492
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/base-select/size-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<template>
<div>
<p>默认</p>
<tiny-base-select v-model="value1" multiple :options="options"></tiny-base-select>
<p>medium</p>
<tiny-base-select v-model="value2" size="medium" multiple :options="options"></tiny-base-select>
<p>默认</p>
<tiny-base-select v-model="value1" multiple :options="options"></tiny-base-select>
<p>small</p>
<tiny-base-select v-model="value3" size="small" multiple :options="options"> </tiny-base-select>
<p>mini</p>
Expand Down
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/base-select/size.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<template>
<div>
<p>默认</p>
<tiny-base-select v-model="value1" multiple :options="options"></tiny-base-select>
<p>medium</p>
<tiny-base-select v-model="value2" size="medium" multiple :options="options"></tiny-base-select>
<p>默认</p>
<tiny-base-select v-model="value1" multiple :options="options"></tiny-base-select>
Comment on lines +5 to +6
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 output, I can see that across various component demos in the codebase, there is a consistent pattern for size ordering. Looking at components like tree-select, select, base-select, etc., the common order is:

  1. medium
  2. default
  3. small
  4. mini

The current order in base-select size demo does not follow the established convention

The current order in base-select/size.vue places default after medium, which is inconsistent with the pattern seen across other components in the codebase. This should be reordered to maintain consistency with the design system.

🔗 Analysis chain

Verify size ordering convention

The default size variant is now placed after the medium size. Please verify this ordering aligns with your design system conventions, as typically default variants are shown first.

Let's check if this ordering is consistent across other component demos:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check size ordering patterns in other component demos
# Look for size demo files and check their content for size ordering

# Find all size.vue files in component demos
fd 'size.vue$' examples/sites/demos/pc/app -x grep -l "size=" {} | while read -r file; do
  echo "=== $file ==="
  # Show the order of size variants
  grep -A 1 "size=" "$file"
done

Length of output: 300

Script:

#!/bin/bash
# Let's try a different approach to find size ordering patterns
# Search for files containing size demos and examine their content

# First, let's look for size-related demo files
fd 'size.vue$' examples/sites/demos/pc/app -x cat {}

Length of output: 62408

<p>small</p>
<tiny-base-select v-model="value3" size="small" multiple :options="options"> </tiny-base-select>
<p>mini</p>
Expand Down
3 changes: 2 additions & 1 deletion packages/renderless/src/base-select/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -361,9 +361,10 @@ export const setSelected =
: 'halfselect'
: 'check'

if (state.selected.length === 0 || !state.selected[0].currentLabel) {
if (!state.selected?.[0]?.isTree && !state.selected?.[0]?.isGrid) {
state.selected = result
}
state.selected.length && (state.selectedLabel = '')

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(',')
Expand Down
3 changes: 2 additions & 1 deletion packages/renderless/src/grid-select/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,8 @@ export const selectChange =
return {
...node,
currentLabel: node[props.textField],
value: node[props.valueField]
value: node[props.valueField],
isGrid: true
}
})
)
Expand Down
3 changes: 2 additions & 1 deletion packages/renderless/src/tree-select/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@ export const check =
return {
...node,
currentLabel: node[props.textField],
value: node[props.valueField]
value: node[props.valueField],
isTree: true
}
})
)
Expand Down