first commit

2026-05-18 15:53:59 +03:30
commit 2c100028a1
534 changed files with 94240 additions and 0 deletions
@@ -0,0 +1,164 @@
+# SbDropZone
+
+A designated area that accepts dragged items. Provides visual feedback during drag operations and can filter acceptable item types.
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| PlaceholderText | string | "Drag items here" | Text shown when zone is empty |
+| DropText | string | "Drop here" | Text shown during drag over |
+| AcceptedTypes | string[]? | null | Array of accepted item types (null accepts all) |
+| Disabled | bool | false | Whether the zone accepts drops |
+| Class | string? | null | Additional CSS classes |
+
+## Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| OnItemDropped | EventCallback<SbDropEventArgs> | Fired when item is dropped |
+| OnDragEnter | EventCallback | Fired when drag enters zone |
+| OnDragExit | EventCallback | Fired when drag leaves zone |
+
+## Templates / Slots
+
+| Slot | Type | Description |
+|------|------|-------------|
+| ChildContent | RenderFragment? | Content to show inside the zone |
+
+## SbDropEventArgs Class
+
+| Property | Type | Description |
+|----------|------|-------------|
+| ClientX | double | X coordinate of drop |
+| ClientY | double | Y coordinate of drop |
+| Data | object? | Dropped data |
+
+## CSS Classes
+
+- `sb-dropzone` - Base class
+- `sb-dropzone--drag-over` - Item is being dragged over
+- `sb-dropzone--disabled` - Disabled state
+- `sb-dropzone__indicator` - Drop indicator
+- `sb-dropzone__placeholder` - Empty placeholder
+- `sb-dropzone__icon` - Icon element
+- `sb-dropzone__text` - Text element
+
+## Examples
+
+### Basic Drop Zone
+
+```razor
+<SbDropZone OnItemDropped="HandleDrop" />
+
+@code {
+    private void HandleDrop(SbDropEventArgs args)
+    {
+        Console.WriteLine($"Dropped at ({args.ClientX}, {args.ClientY})");
+    }
+}
+```
+
+### With Custom Placeholder
+
+```razor
+<SbDropZone PlaceholderText="Drop components here"
+            DropText="Release to add"
+            OnItemDropped="HandleDrop" />
+```
+
+### With Type Filtering
+
+```razor
+<SbDropZone AcceptedTypes="@(new[] { "widget", "component" })"
+            PlaceholderText="Drop widgets or components here"
+            OnItemDropped="HandleDrop" />
+```
+
+### With Content
+
+```razor
+<SbDropZone OnItemDropped="HandleDrop">
+    @if (droppedItems.Any())
+    {
+        @foreach (var item in droppedItems)
+        {
+            <div class="dropped-item">@item.Name</div>
+        }
+    }
+</SbDropZone>
+```
+
+### Page Builder Canvas
+
+```razor
+<div class="page-builder">
+    <aside class="toolbox">
+        <SbDraggableItem Data="@textBlock" ItemType="block">
+            <div class="tool">📝 Text</div>
+        </SbDraggableItem>
+        <SbDraggableItem Data="@imageBlock" ItemType="block">
+            <div class="tool">🖼️ Image</div>
+        </SbDraggableItem>
+    </aside>
+    
+    <main class="canvas">
+        <SbDropZone AcceptedTypes="@(new[] { "block" })"
+                    PlaceholderText="Drag blocks to build your page"
+                    DropText="Drop to add block"
+                    OnItemDropped="AddBlock"
+                    OnDragEnter="ShowDropGuide"
+                    OnDragExit="HideDropGuide">
+            @foreach (var block in pageBlocks)
+            {
+                <div class="page-block">
+                    @block.Content
+                </div>
+            }
+        </SbDropZone>
+    </main>
+</div>
+
+@code {
+    private List<Block> pageBlocks = new();
+    
+    private void AddBlock(SbDropEventArgs args)
+    {
+        if (args.Data is Block block)
+        {
+            pageBlocks.Add(block);
+        }
+    }
+}
+```
+
+### Multiple Drop Zones
+
+```razor
+<div class="kanban-board">
+    @foreach (var column in columns)
+    {
+        <div class="kanban-column">
+            <h3>@column.Title</h3>
+            <SbDropZone AcceptedTypes="@(new[] { "task" })"
+                        OnItemDropped="e => MoveTask(e, column.Id)"
+                        PlaceholderText="Drop tasks here">
+                @foreach (var task in column.Tasks)
+                {
+                    <SbDraggableItem Data="@task" ItemType="task">
+                        <div class="task-card">@task.Title</div>
+                    </SbDraggableItem>
+                }
+            </SbDropZone>
+        </div>
+    }
+</div>
+```
+
+### Disabled Drop Zone
+
+```razor
+<SbDropZone Disabled="@isReadOnly"
+            PlaceholderText="@(isReadOnly ? "Read-only mode" : "Drop items here")"
+            OnItemDropped="HandleDrop" />
+```