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.

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

refactor: enhance formkit select component to support additional features #6473

Merged
merged 19 commits into from
Aug 26, 2024

Conversation

LIlGG
Copy link
Member

@LIlGG LIlGG commented Aug 16, 2024

What type of PR is this?

/kind feature
/area ui
/milestone 2.19.x

What this PR does / why we need it:

此 PR 使用自定义的 Select 组件替换了原有的 Formkit Select 组件,原 Select 组件类型变为 nativeSelect

新的 Select 组件具有如下功能:

  • 增加多选、单选两种模式。
  • 支持对内容进行搜索、过滤。
  • 可使用接口远程加载,并可自定义数据获取。
  • 支持扩展远程加载方式。
  • 可创建新选项。
  • 支持清空所有已选择项。
  • 多选状态下可控制最大选择数量。
  • 多选状态下可进行排序。

重构后的 Select 组件将自动兼容旧版组件。

使用方式如下:

<FormKit
  type="select"
  label="What country makes the best food?"
  name="countries"
  placeholder="Select a country"
  allow-create
  clearable
  sortable
  multiple
  searchable
  :max-count="3"
  :options='[
      { label: "China", value: "China" },
      { label: "USA", value: "USA" },
      { label: "Japan", value: "Japan" },
      { label: "Korea", value: "Korea" },
      { label: "France", value: "France" },
      { label: "Italy", value: "Italy" },
      { label: "Germany", value: "Germany" },
      { label: "UK", value: "UK" },
      { label: "Canada", value: "Canada" },
      { label: "Australia", value: "Australia" },
  ]'
  help="Don’t worry, you can’t get this one wrong."
/>

How to test it?

  1. 需要测试已使用的 Select 组件功能是否发生了变化。

测试在多选、单选状态下,Select 组件的功能是否可以正常使用。

测试在远程加载时,数据获取是否正常,是否可正常分页,加载状态是否显示。

Which issue(s) this PR fixes:

see #4931 (comment)
see #6369

Does this PR introduce a user-facing change?

重构 FormKit 选择器组件以支持更多功能

@f2c-ci-robot f2c-ci-robot bot added kind/feature Categorizes issue or PR as related to a new feature. release-note Denotes a PR that will be considered when it comes time to generate release notes. do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. labels Aug 16, 2024
@f2c-ci-robot f2c-ci-robot bot added this to the 2.19.x milestone Aug 16, 2024
@f2c-ci-robot f2c-ci-robot bot added the area/ui Issues or PRs related to the Halo UI label Aug 16, 2024
@f2c-ci-robot f2c-ci-robot bot requested review from Aanko and ruibaby August 16, 2024 04:18
Copy link

codecov bot commented Aug 16, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 58.41%. Comparing base (6cd8dc8) to head (3a376f4).
Report is 20 commits behind head on main.

Additional details and impacted files
@@             Coverage Diff              @@
##               main    #6473      +/-   ##
============================================
+ Coverage     58.18%   58.41%   +0.23%     
- Complexity     3774     3800      +26     
============================================
  Files           651      652       +1     
  Lines         22125    22247     +122     
  Branches       1538     1545       +7     
============================================
+ Hits          12873    12996     +123     
+ Misses         8641     8637       -4     
- Partials        611      614       +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@ruibaby ruibaby changed the title WIP: refactor: enhance formkit search component to support additional features WIP: refactor: enhance formkit select component to support additional features Aug 16, 2024
@LIlGG LIlGG force-pushed the feat/add-auto-complete-formkit branch from 8c97b81 to d15a51e Compare August 16, 2024 09:47
@LIlGG LIlGG changed the title WIP: refactor: enhance formkit select component to support additional features refactor: enhance formkit select component to support additional features Aug 19, 2024
@f2c-ci-robot f2c-ci-robot bot removed the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Aug 19, 2024
@guqing
Copy link
Member

guqing commented Aug 20, 2024

/hold
WIP

@f2c-ci-robot f2c-ci-robot bot added the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Aug 20, 2024
@LIlGG
Copy link
Member Author

LIlGG commented Aug 26, 2024

/unhold

@f2c-ci-robot f2c-ci-robot bot removed the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Aug 26, 2024
@LIlGG LIlGG force-pushed the feat/add-auto-complete-formkit branch from 4f4998a to f79a34e Compare August 26, 2024 08:05
Copy link

Copy link
Member

@ruibaby ruibaby left a comment

Choose a reason for hiding this comment

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

/lgtm

@f2c-ci-robot f2c-ci-robot bot added the lgtm Indicates that a PR is ready to be merged. label Aug 26, 2024
Copy link

f2c-ci-robot bot commented Aug 26, 2024

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: ruibaby

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@f2c-ci-robot f2c-ci-robot bot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Aug 26, 2024
@f2c-ci-robot f2c-ci-robot bot merged commit 3be91fc into halo-dev:main Aug 26, 2024
8 checks passed
@JohnNiang JohnNiang modified the milestones: 2.19.x, 2.19.0 Aug 26, 2024
f2c-ci-robot bot pushed a commit that referenced this pull request Aug 27, 2024
#### What type of PR is this?

/kind improvement
/area ui
/milestone 2.19.x

#### What this PR does / why we need it:

使用 #6473 中重构的 Formkit Select 组件来实现用户、文章、页面等各种业务搜索组件。 

Fixes #4931

#### How to test it?

测试各类搜索组件是否正常可用。
测试从旧版本升级后,原有数据是否可以正常显示。

#### Does this PR introduce a user-facing change?
```release-note
使用重构的 Formkit Select 组件来实现业务选择器。
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
approved Indicates a PR has been approved by an approver from all required OWNERS files. area/ui Issues or PRs related to the Halo UI kind/feature Categorizes issue or PR as related to a new feature. lgtm Indicates that a PR is ready to be merged. release-note Denotes a PR that will be considered when it comes time to generate release notes.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants