From 2e0c94b15d370e0ff14bebd7079b103057eeb4f4 Mon Sep 17 00:00:00 2001 From: Argo-AscioTech Date: Wed, 14 Aug 2024 20:07:12 +0800 Subject: [PATCH 01/11] chore: bump version 8.1.9 --- .../BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Extensions/Components/BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj b/src/Extensions/Components/BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj index cf84f4b75b1..b40ee0fd4ae 100644 --- a/src/Extensions/Components/BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj +++ b/src/Extensions/Components/BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj @@ -1,7 +1,7 @@ - 8.1.8 + 8.1.9 Bootstrap Blazor WebAssembly wasm UI Components Chart Bootstrap UI components extensions of Chart.js From c1d57acfea1c301d76c95d3a44c5247ae92328e8 Mon Sep 17 00:00:00 2001 From: Argo-AscioTech Date: Wed, 14 Aug 2024 20:10:14 +0800 Subject: [PATCH 02/11] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=20Chart=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=88=B0=208.1.9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj index 1cfdebb05b6..49fce2e84a4 100644 --- a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj +++ b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj @@ -35,7 +35,7 @@ - + From 700ee436592a87ccbc864ba0612e8ae3e224f809 Mon Sep 17 00:00:00 2001 From: Argo-AscioTech Date: Wed, 14 Aug 2024 21:22:25 +0800 Subject: [PATCH 03/11] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20Swap=20?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/SortableList.razor.js | 6 +++++- .../Components/SortableOption.cs | 12 ++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/Extensions/Components/BootstrapBlazor.Sortable/Components/SortableList.razor.js b/src/Extensions/Components/BootstrapBlazor.Sortable/Components/SortableList.razor.js index 5fa0ecc5919..3aecd27bf90 100644 --- a/src/Extensions/Components/BootstrapBlazor.Sortable/Components/SortableList.razor.js +++ b/src/Extensions/Components/BootstrapBlazor.Sortable/Components/SortableList.razor.js @@ -1,4 +1,4 @@ -import { Sortable, MultiDrag } from '../sortable.esm.js' +import { Sortable, MultiDrag, Swap } from '../sortable.esm.js' import Data from '../../BootstrapBlazor/modules/data.js' export function init(id, invoke, options, triggerUpdate, triggerRemove) { @@ -41,6 +41,10 @@ const initSortable = (id, element, invoke, op) => { Sortable.mount(new MultiDrag()); } + if (op.swap) { + Sortable.mount(new Swap()); + } + op.group = { name: op.group }; diff --git a/src/Extensions/Components/BootstrapBlazor.Sortable/Components/SortableOption.cs b/src/Extensions/Components/BootstrapBlazor.Sortable/Components/SortableOption.cs index 4981c2a6c96..36da8b06d39 100644 --- a/src/Extensions/Components/BootstrapBlazor.Sortable/Components/SortableOption.cs +++ b/src/Extensions/Components/BootstrapBlazor.Sortable/Components/SortableOption.cs @@ -196,4 +196,16 @@ public class SortableOption /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public bool? MultiDrag { get; set; } + + /// + /// 获得/设置 是否交换拖动 默认 null 未设置 + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public bool? Swap { get; set; } + + /// + /// 获得/设置 是否交换拖动项样式名称 默认 null 未设置 + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public bool? SwapClass { get; set; } } From cc4c2656d66668c0edf9ff5ba5eca556f8ae324f Mon Sep 17 00:00:00 2001 From: Argo-AscioTech Date: Wed, 14 Aug 2024 21:23:25 +0800 Subject: [PATCH 04/11] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=20Swap=20?= =?UTF-8?q?=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/FooSortableListItem.razor.css | 5 +++ .../Components/Samples/SortableLists.razor | 17 ++++++++++ .../Components/Samples/SortableLists.razor.cs | 32 +++++++++++++++++++ 3 files changed, 54 insertions(+) diff --git a/src/BootstrapBlazor.Server/Components/Components/FooSortableListItem.razor.css b/src/BootstrapBlazor.Server/Components/Components/FooSortableListItem.razor.css index f5322baf276..17691d99e7a 100644 --- a/src/BootstrapBlazor.Server/Components/Components/FooSortableListItem.razor.css +++ b/src/BootstrapBlazor.Server/Components/Components/FooSortableListItem.razor.css @@ -23,3 +23,8 @@ background-color: #44a0ff; color: #fff; } + +.col-12.sortable-swap-highlight .sl-item { + background-color: var(--bs-success); + color: var(--bs-body-bg); +} diff --git a/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor b/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor index a5c8d0871f8..25439f0c4ed 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor @@ -208,3 +208,20 @@ + + +
+
+ +
+ @foreach (var item in ItemsSwaps) + { + + } +
+ +
+
+ diff --git a/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor.cs index dff4d7f3be4..396941d7b82 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor.cs @@ -17,6 +17,9 @@ public partial class SortableLists [NotNull] private List? ItemsMultiDrags { get; set; } + [NotNull] + private List? ItemsSwaps { get; set; } + private readonly SortableOption _option1 = new() { RootSelector = ".sl-list" @@ -80,6 +83,12 @@ public partial class SortableLists MultiDrag = true }; + private readonly SortableOption _optionSwap = new() + { + RootSelector = ".sl-list", + Swap = true + }; + /// /// OnInitialized /// @@ -93,6 +102,7 @@ protected override void OnInitialized() Items1 = Foo.GenerateFoo(FooLocalizer, 4); Items2 = Foo.GenerateFoo(FooLocalizer, 8).Skip(4).ToList(); ItemsMultiDrags = Foo.GenerateFoo(FooLocalizer, 8); + ItemsSwaps = Foo.GenerateFoo(FooLocalizer, 8); } private Task OnUpdate(SortableEvent @event) @@ -171,4 +181,26 @@ private Task OnUpdateMultiDrag(SortableEvent @event) } return Task.CompletedTask; } + + private Task OnUpdateSwap(SortableEvent @event) + { + var items = @event.Items; + + // 找到移除元素 + var removeItems = new List(); + for (var index = items.Count - 1; index >= 0; index--) + { + var item = ItemsMultiDrags[items[index].OldIndex]; + removeItems.Insert(0, item); + ItemsMultiDrags.RemoveAt(items[index].OldIndex); + } + + // 插入元素 + for (var index = 0; index < items.Count; index++) + { + var item = removeItems[index]; + ItemsMultiDrags.Insert(items[index].NewIndex, item); + } + return Task.CompletedTask; + } } From aa62ffdf2c8c71c80710788e4d4569a4143867e0 Mon Sep 17 00:00:00 2001 From: Argo-AscioTech Date: Wed, 14 Aug 2024 21:28:30 +0800 Subject: [PATCH 05/11] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=96=B0=E9=80=BB?= =?UTF-8?q?=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Samples/SortableLists.razor.cs | 22 +++++-------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor.cs index 396941d7b82..376a8c5902f 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor.cs @@ -184,23 +184,11 @@ private Task OnUpdateMultiDrag(SortableEvent @event) private Task OnUpdateSwap(SortableEvent @event) { - var items = @event.Items; - - // 找到移除元素 - var removeItems = new List(); - for (var index = items.Count - 1; index >= 0; index--) - { - var item = ItemsMultiDrags[items[index].OldIndex]; - removeItems.Insert(0, item); - ItemsMultiDrags.RemoveAt(items[index].OldIndex); - } - - // 插入元素 - for (var index = 0; index < items.Count; index++) - { - var item = removeItems[index]; - ItemsMultiDrags.Insert(items[index].NewIndex, item); - } + var oldIndex = @event.OldIndex; + var newIndex = @event.NewIndex; + var item = ItemsSwaps[oldIndex]; + ItemsSwaps.RemoveAt(oldIndex); + ItemsSwaps.Insert(newIndex, item); return Task.CompletedTask; } } From e4ec821768ccf98edd9f9d604ff21066f740b812 Mon Sep 17 00:00:00 2001 From: Argo-AscioTech Date: Wed, 14 Aug 2024 21:28:41 +0800 Subject: [PATCH 06/11] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=E6=9C=AC?= =?UTF-8?q?=E5=9C=B0=E5=8C=96=E8=B5=84=E6=BA=90=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Server/Locales/en-US.json | 5 ++++- src/BootstrapBlazor.Server/Locales/zh-CN.json | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index 2c4172a0f8f..e35d2239304 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -6685,6 +6685,9 @@ "SortableListTableIntro": "By setting the SortableListOption parameter RootSelector to specify the drag root element as tbody, you can drag rows.", "SortableListClassTitle": "Because SortableList is a container component, its contents are all custom components and cannot be styled. You need to set the style yourself according to the actual situation.", "SortableListClassLi1": "Chosen item style sortable-chosen", - "SortableListClassLi2": "The default style of drag element clones is sortable-ghost and can be customized through GhostClass" + "SortableListClassLi2": "The default style of drag element clones is sortable-ghost and can be customized through GhostClass", + "SortableListClassLi3": "Drag elements to swap items. Default style sortable-swap-highlight can be customized by SwapClass", + "SortableListSwapTitle": "Swap", + "SortableListSwapIntro": "By setting the Swap parameter of SortableListOption, the drag item and the target item are swapped." } } diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index d7a26c439d0..cd15af5bae5 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -6686,6 +6686,9 @@ "SortableListTableIntro": "通过设置 SortableListOption 参数 RootSelector 指定拖拽根元素为 tbody 即可对行进行拖拽操作", "SortableListClassTitle": "由于 SortableList为容器组件，内容均为自定义组件，无法内置样式，需要根据实际情况自行设置样式", "SortableListClassLi1": "拖动元素样式 sortable-chosen", - "SortableListClassLi2": "拖动元素克隆项默认样式 sortable-ghost 可通过 GhostClass 自定义" + "SortableListClassLi2": "拖动元素克隆项默认样式 sortable-ghost 可通过 GhostClass 自定义", + "SortableListClassLi3": "拖动元素交换想项默认样式 sortable-swap-highlight 可通过 SwapClass 自定义", + "SortableListSwapTitle": "交换", + "SortableListSwapIntro": "通过设置 SortableListOption 参数 Swap 设置拖拽项与目标项目交换" } } From 0b42133c181bc247d0fe422eba01ee49d981187a Mon Sep 17 00:00:00 2001 From: Argo-AscioTech Date: Wed, 14 Aug 2024 21:30:05 +0800 Subject: [PATCH 07/11] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Samples/SortableLists.razor | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor b/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor index 25439f0c4ed..45a622ea0f8 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor @@ -194,7 +194,7 @@ + Name="MultiDrag">
@@ -210,8 +210,8 @@ + Introduction="@Localizer["SortableListSwapIntro"]" + Name="Swap">
From 359ab724d65736d537f5f14c403808b50a4bbf0f Mon Sep 17 00:00:00 2001 From: Argo-AscioTech Date: Wed, 14 Aug 2024 21:48:06 +0800 Subject: [PATCH 08/11] =?UTF-8?q?refactor:=20=E5=86=85=E7=BD=AE=E6=8F=92?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/SortableList.razor.js | 10 +--------- .../BootstrapBlazor.Sortable/wwwroot/sortable.esm.js | 3 ++- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/src/Extensions/Components/BootstrapBlazor.Sortable/Components/SortableList.razor.js b/src/Extensions/Components/BootstrapBlazor.Sortable/Components/SortableList.razor.js index 3aecd27bf90..673eb4d63a7 100644 --- a/src/Extensions/Components/BootstrapBlazor.Sortable/Components/SortableList.razor.js +++ b/src/Extensions/Components/BootstrapBlazor.Sortable/Components/SortableList.razor.js @@ -1,4 +1,4 @@ -import { Sortable, MultiDrag, Swap } from '../sortable.esm.js' +import Sortable from '../sortable.esm.js' import Data from '../../BootstrapBlazor/modules/data.js' export function init(id, invoke, options, triggerUpdate, triggerRemove) { @@ -37,14 +37,6 @@ const loopCheck = (id, el, invoke, op) => { const initSortable = (id, element, invoke, op) => { delete op.rootSelector; - if (op.multiDrag) { - Sortable.mount(new MultiDrag()); - } - - if (op.swap) { - Sortable.mount(new Swap()); - } - op.group = { name: op.group }; diff --git a/src/Extensions/Components/BootstrapBlazor.Sortable/wwwroot/sortable.esm.js b/src/Extensions/Components/BootstrapBlazor.Sortable/wwwroot/sortable.esm.js index 90c5c0a8d86..8c60adfc648 100644 --- a/src/Extensions/Components/BootstrapBlazor.Sortable/wwwroot/sortable.esm.js +++ b/src/Extensions/Components/BootstrapBlazor.Sortable/wwwroot/sortable.esm.js @@ -3347,6 +3347,7 @@ function removeMultiDragElements() { Sortable.mount(new AutoScrollPlugin()); Sortable.mount(Remove, Revert); +Sortable.mount(new SwapPlugin()); +Sortable.mount(new MultiDragPlugin()); export default Sortable; -export { MultiDragPlugin as MultiDrag, Sortable, SwapPlugin as Swap }; From 2ebf2292f822aff21a485173b43876ee492808d4 Mon Sep 17 00:00:00 2001 From: Argo-AscioTech Date: Wed, 14 Aug 2024 21:50:05 +0800 Subject: [PATCH 09/11] chore: bump version 8.0.4 --- .../BootstrapBlazor.Sortable/BootstrapBlazor.Sortable.csproj | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Extensions/Components/BootstrapBlazor.Sortable/BootstrapBlazor.Sortable.csproj b/src/Extensions/Components/BootstrapBlazor.Sortable/BootstrapBlazor.Sortable.csproj index 8a75a05a56b..fd173658554 100644 --- a/src/Extensions/Components/BootstrapBlazor.Sortable/BootstrapBlazor.Sortable.csproj +++ b/src/Extensions/Components/BootstrapBlazor.Sortable/BootstrapBlazor.Sortable.csproj @@ -1,7 +1,7 @@ - 8.0.3 + 8.0.4 From cbb8b863ee755dc53759489bc3061ddaffe8a4f4 Mon Sep 17 00:00:00 2001 From: Argo-AscioTech Date: Wed, 14 Aug 2024 21:50:12 +0800 Subject: [PATCH 10/11] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=E4=BE=9D?= =?UTF-8?q?=E8=B5=96=E5=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj index 49fce2e84a4..b6b1cd68c3e 100644 --- a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj +++ b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj @@ -60,7 +60,7 @@ - + From 6157033577628ca8dde5c634a515cc9b89ab5d8a Mon Sep 17 00:00:00 2001 From: Argo-AscioTech Date: Wed, 14 Aug 2024 21:52:41 +0800 Subject: [PATCH 11/11] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Samples/SortableLists.razor | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor b/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor index 45a622ea0f8..e147e325d15 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor @@ -23,6 +23,11 @@ .sortable-ghost { background-color: var(--bs-info); color: var(--bs-body-bg); +} + +.sortable-swap-highlight { + background-color: var(--bs-success); + color: var(--bs-body-bg); }