-
-
Notifications
You must be signed in to change notification settings - Fork 314
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(SortableList): add SortableList component (#4029)
* feat: 增加 Sortable 工程 * feat: 增加 SoratableList 组件 * refactor: 移除接口 * doc: 增加 SortableList 菜单与代码映射配置 * refactor: 增加响应式样式 * doc: 代码格式化 * doc: 增加 SortableList 示例 * doc: 代码格式化 * feat: 增加 Clone 配置 * doc: 增加克隆节点示例 * feat: 增加 putback 参数支持 * doc: 增加排序参数示例 * refactor: 增加 Handler 属性 * doc: 增加有条件性拖拽示例 * refactor: 增加表格拖拽逻辑 * refactor: 更新脚本支持懒加载元素 * feat: 增加 OnUpdate 回调方法 * doc: 增加 OnUpdate 方法示例 * doc: 增加 OnRemove 回调方法示例 * feat: 增加 OnRemove 回调方法 * feat: 增加客户端拖动逻辑提高性能 * chore: bump version 8.0.0
- Loading branch information
Showing
22 changed files
with
4,172 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
src/BootstrapBlazor.Server/Components/Components/VideoDemo.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| @inherits WebSiteModuleComponentBase | ||
| @attribute [JSModuleAutoLoader("Components/VideoDemo.razor.js", AutoInvokeInit = false, AutoInvokeDispose = false)] | ||
|
|
||
| <video id="@Id" controls preload="auto" autoplay width="350" src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"></video> | ||
| <video id="@Id" controls preload="auto" autoplay muted src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"></video> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
176 changes: 176 additions & 0 deletions
176
src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,176 @@ | ||
| @page "/sortable-list" | ||
| @inject IStringLocalizer<SortableLists> Localizer | ||
| @inject IStringLocalizer<Foo> FooLocalizer | ||
|
|
||
| <h3>@Localizer["SortableListTitle"]</h3> | ||
|
|
||
| <h4>@Localizer["SortableListDescription"]</h4> | ||
|
|
||
| <PackageTips Name="BootstrapBlazor.SortableList" /> | ||
|
|
||
| <DemoBlock Title="@Localizer["SortableListNormalTitle"]" | ||
| Introduction="@Localizer["SortableListNormalIntro"]" | ||
| Name="Normal"> | ||
| <SortableList Option="_option1" OnUpdate="OnUpdate"> | ||
| <div class="sl-list row g-2"> | ||
| @foreach(var item in Items) | ||
| { | ||
| <div @key="item" class="col-12 col-sm-6"><div class="sl-item">@item.Name</div></div> | ||
| } | ||
| </div> | ||
| </SortableList> | ||
| </DemoBlock> | ||
|
|
||
| <DemoBlock Title="@Localizer["SortableListGroupTitle"]" | ||
| Introduction="@Localizer["SortableListGroupIntro"]" | ||
| Name="Group"> | ||
| <div class="row g-2"> | ||
| <div class="col-12 col-sm-6"> | ||
| <SortableList Option="_option2" OnUpdate="OnUpdate1" OnRemove="OnRemove1"> | ||
| <div class="sl-list"> | ||
| @foreach (var item in Items1) | ||
| { | ||
| <div @key="item" class="sl-item">@item.Name</div> | ||
| } | ||
| </div> | ||
| </SortableList> | ||
| </div> | ||
| <div class="col-12 col-sm-6"> | ||
| <SortableList Option="_option2" OnUpdate="OnUpdate2" OnRemove="OnRemove2"> | ||
| <div class="sl-list"> | ||
| @foreach (var item in Items2) | ||
| { | ||
| <div @key="item" class="sl-item">@item.Name</div> | ||
| } | ||
| </div> | ||
| </SortableList> | ||
| </div> | ||
| </div> | ||
| </DemoBlock> | ||
|
|
||
| <DemoBlock Title="@Localizer["SortableListCloneTitle"]" | ||
| Introduction="@Localizer["SortableListCloneIntro"]" | ||
| Name="Clone"> | ||
| <div class="row g-2"> | ||
| <div class="col-12 col-sm-6"> | ||
| <SortableList Option="_option3"> | ||
| <div class="sl-list"> | ||
| <div class="sl-item">1</div> | ||
| <div class="sl-item">2</div> | ||
| <div class="sl-item">3</div> | ||
| <div class="sl-item">4</div> | ||
| </div> | ||
| </SortableList> | ||
| </div> | ||
| <div class="col-12 col-sm-6"> | ||
| <SortableList Option="_option3"> | ||
| <div class="sl-list"> | ||
| <div class="sl-item">5</div> | ||
| <div class="sl-item">6</div> | ||
| <div class="sl-item">7</div> | ||
| <div class="sl-item">8</div> | ||
| </div> | ||
| </SortableList> | ||
| </div> | ||
| </div> | ||
| </DemoBlock> | ||
|
|
||
| <DemoBlock Title="@Localizer["SortableListDisableSortTitle"]" | ||
| Introduction="@Localizer["SortableListDisableSortIntro"]" | ||
| Name="Sort"> | ||
| <div class="row g-2"> | ||
| <div class="col-12 col-sm-6"> | ||
| <SortableList Option="_option4"> | ||
| <div class="sl-list"> | ||
| <div class="sl-item">1</div> | ||
| <div class="sl-item">2</div> | ||
| <div class="sl-item">3</div> | ||
| <div class="sl-item">4</div> | ||
| </div> | ||
| </SortableList> | ||
| </div> | ||
| <div class="col-12 col-sm-6"> | ||
| <SortableList Option="_option5"> | ||
| <div class="sl-list"> | ||
| <div class="sl-item">5</div> | ||
| <div class="sl-item">6</div> | ||
| <div class="sl-item">7</div> | ||
| <div class="sl-item">8</div> | ||
| </div> | ||
| </SortableList> | ||
| </div> | ||
| </div> | ||
| </DemoBlock> | ||
|
|
||
| <DemoBlock Title="@Localizer["SortableListHandlerTitle"]" | ||
| Introduction="@Localizer["SortableListHandlerIntro"]" | ||
| Name="Handler"> | ||
| <div class="row g-2"> | ||
| <div class="col-12 col-sm-6"> | ||
| <SortableList Option="_option6"> | ||
| <div class="sl-list"> | ||
| <div class="sl-item"><i class="fa-solid fa-bars"></i><span>1</span></div> | ||
| <div class="sl-item"><i class="fa-solid fa-bars"></i><span>2</span></div> | ||
| <div class="sl-item"><i class="fa-solid fa-bars"></i><span>3</span></div> | ||
| <div class="sl-item"><i class="fa-solid fa-bars"></i><span>4</span></div> | ||
| </div> | ||
| </SortableList> | ||
| </div> | ||
| </div> | ||
| </DemoBlock> | ||
|
|
||
| <DemoBlock Title="@Localizer["SortableListFilterTitle"]" | ||
| Introduction="@Localizer["SortableListFilterIntro"]" | ||
| Name="Filter"> | ||
| <div class="row g-2"> | ||
| <div class="col-12 col-sm-6"> | ||
| <SortableList Option="_option7"> | ||
| <div class="sl-list"> | ||
| <div class="sl-item"><i class="fa-solid fa-bars"></i><span>1</span></div> | ||
| <div class="sl-item"><i class="fa-solid fa-bars"></i><span>2</span></div> | ||
| <div class="sl-item filter"><i class="fa-solid fa-bars"></i><span>3</span></div> | ||
| <div class="sl-item"><i class="fa-solid fa-bars"></i><span>4</span></div> | ||
| </div> | ||
| </SortableList> | ||
| </div> | ||
| </div> | ||
| </DemoBlock> | ||
|
|
||
| <DemoBlock Title="@Localizer["SortableListNestTitle"]" | ||
| Introduction="@Localizer["SortableListNestIntro"]" | ||
| Name="Nest"> | ||
| <div class="row g-2"> | ||
| <div class="col-12 col-sm-6"> | ||
| <SortableList Option="_option1"> | ||
| <div class="sl-list"> | ||
| <div class="sl-item"> | ||
| <SortableList Option="_option1"> | ||
| <div class="sl-list"> | ||
| <div class="sl-item"><span>11</span></div> | ||
| <div class="sl-item"><span>12</span></div> | ||
| <div class="sl-item"><span>13</span></div> | ||
| </div> | ||
| </SortableList> | ||
| </div> | ||
| <div class="sl-item"><span>2</span></div> | ||
| <div class="sl-item"><span>3</span></div> | ||
| <div class="sl-item"><span>4</span></div> | ||
| </div> | ||
| </SortableList> | ||
| </div> | ||
| </div> | ||
| </DemoBlock> | ||
|
|
||
| <DemoBlock Title="@Localizer["SortableListTableTitle"]" | ||
| Introduction="@Localizer["SortableListTableIntro"]" | ||
| Name="Table"> | ||
| <SortableList Option="_optionTable"> | ||
| <Table TItem="Foo" Items="@Items.Take(3)" IsStriped="true"> | ||
| <TableColumns> | ||
| <TableColumn @bind-Field="@context.DateTime" Width="180" /> | ||
| <TableColumn @bind-Field="@context.Name" /> | ||
| <TableColumn @bind-Field="@context.Address" /> | ||
| </TableColumns> | ||
| </Table> | ||
| </SortableList> | ||
| </DemoBlock> |
132 changes: 132 additions & 0 deletions
132
src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| namespace BootstrapBlazor.Server.Components.Samples; | ||
|
|
||
| /// <summary> | ||
| /// SortableList 示例 | ||
| /// </summary> | ||
| public partial class SortableLists | ||
| { | ||
| [NotNull] | ||
| private List<Foo>? Items { get; set; } | ||
|
|
||
| [NotNull] | ||
| private List<Foo>? Items1 { get; set; } | ||
|
|
||
| [NotNull] | ||
| private List<Foo>? Items2 { get; set; } | ||
|
|
||
| private readonly SortableOption _option1 = new() | ||
| { | ||
| RootSelector = ".sl-list", | ||
| GhostClass = "sl-item-ghost" | ||
| }; | ||
|
|
||
| private readonly SortableOption _option2 = new() | ||
| { | ||
| RootSelector = ".sl-list", | ||
| GhostClass = "sl-item-ghost", | ||
| Group = "group" | ||
| }; | ||
|
|
||
| private readonly SortableOption _option3 = new() | ||
| { | ||
| RootSelector = ".sl-list", | ||
| GhostClass = "sl-item-ghost", | ||
| Group = "group-clone", | ||
| Clone = true | ||
| }; | ||
|
|
||
| private readonly SortableOption _option4 = new() | ||
| { | ||
| RootSelector = ".sl-list", | ||
| GhostClass = "sl-item-ghost", | ||
| Group = "group-clone", | ||
| Clone = true, | ||
| Putback = false | ||
| }; | ||
|
|
||
| private readonly SortableOption _option5 = new() | ||
| { | ||
| RootSelector = ".sl-list", | ||
| GhostClass = "sl-item-ghost", | ||
| Group = "group-clone", | ||
| Sort = false | ||
| }; | ||
|
|
||
| private readonly SortableOption _option6 = new() | ||
| { | ||
| RootSelector = ".sl-list", | ||
| GhostClass = "sl-item-ghost", | ||
| Handle = "i" | ||
| }; | ||
|
|
||
| private readonly SortableOption _option7 = new() | ||
| { | ||
| RootSelector = ".sl-list", | ||
| GhostClass = "sl-item-ghost", | ||
| Filter = ".filter" | ||
| }; | ||
|
|
||
| private readonly SortableOption _optionTable = new() | ||
| { | ||
| RootSelector = "tbody" | ||
| }; | ||
|
|
||
| /// <summary> | ||
| /// OnInitialized | ||
| /// </summary> | ||
| protected override void OnInitialized() | ||
| { | ||
| base.OnInitialized(); | ||
|
|
||
| //获取随机数据 | ||
| //Get random data | ||
| Items = Foo.GenerateFoo(FooLocalizer, 8); | ||
| Items1 = Foo.GenerateFoo(FooLocalizer, 4); | ||
| Items2 = Foo.GenerateFoo(FooLocalizer, 8).Skip(4).ToList(); | ||
| } | ||
|
|
||
| private Task OnUpdate(int oldIndex, int newIndex) | ||
| { | ||
| var item = Items[oldIndex]; | ||
| Items.RemoveAt(oldIndex); | ||
| Items.Insert(newIndex, item); | ||
| StateHasChanged(); | ||
| return Task.CompletedTask; | ||
| } | ||
|
|
||
| private Task OnUpdate1(int oldIndex, int newIndex) | ||
| { | ||
| var item = Items1[oldIndex]; | ||
| Items1.RemoveAt(oldIndex); | ||
| Items1.Insert(newIndex, item); | ||
| StateHasChanged(); | ||
| return Task.CompletedTask; | ||
| } | ||
|
|
||
| private Task OnUpdate2(int oldIndex, int newIndex) | ||
| { | ||
| var item = Items[oldIndex]; | ||
| Items2.RemoveAt(oldIndex); | ||
| Items2.Insert(newIndex, item); | ||
| StateHasChanged(); | ||
| return Task.CompletedTask; | ||
| } | ||
|
|
||
| private Task OnRemove1(int oldIndex, int newIndex) | ||
| { | ||
| var item = Items1[oldIndex]; | ||
| Items1.RemoveAt(oldIndex); | ||
| Items2.Insert(newIndex, item); | ||
| StateHasChanged(); | ||
| return Task.CompletedTask; | ||
| } | ||
|
|
||
| private Task OnRemove2(int oldIndex, int newIndex) | ||
| { | ||
| var item = Items[oldIndex]; | ||
| Items2.RemoveAt(oldIndex); | ||
| Items1.Insert(newIndex, item); | ||
| StateHasChanged(); | ||
| return Task.CompletedTask; | ||
| } | ||
| } |
Oops, something went wrong.