first commit

2026-05-18 15:53:59 +03:30
commit 2c100028a1
534 changed files with 94240 additions and 0 deletions
@@ -0,0 +1,146 @@
+# SbTreeViewNode
+
+An individual node component used internally by SbTreeView to render tree items recursively.
+
+## Type Parameters
+
+| Parameter | Description |
+|-----------|-------------|
+| TItem | The type of item in the tree |
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| Item | TItem | required | The item to display |
+| Level | int | 0 | Nesting level (0 for root) |
+| ChildSelector | Func\<TItem, IEnumerable\<TItem\>\> | Returns empty | Function to get child items |
+| TextSelector | Func\<TItem, string\> | ToString() | Function to get item display text |
+| IconSelector | Func\<TItem, string?\>? | null | Function to get item icon name |
+| IsExpandedSelector | Func\<TItem, bool\>? | null | Function to check expansion state |
+| IsSelectedSelector | Func\<TItem, bool\>? | null | Function to check selection state |
+
+## Cascading Parameters
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| Parent | SbTreeView\<TItem\> | Parent tree view component |
+
+## CSS Classes
+
+- `sb-treeview-node` - Base class
+- `sb-treeview-node--expanded` - When node is expanded
+- `sb-treeview-node__content` - Content container
+- `sb-treeview-node__content--selected` - When node is selected
+- `sb-treeview-node__toggle` - Expand/collapse button
+- `sb-treeview-node__spacer` - Spacer for leaf nodes
+- `sb-treeview-node__checkbox` - Checkbox element
+- `sb-treeview-node__icon` - Icon container
+- `sb-treeview-node__text` - Text content
+- `sb-treeview-node__chevron` - Expand indicator chevron
+- `sb-treeview-node__children` - Children container
+
+## Notes
+
+This component is typically not used directly. It's automatically created by SbTreeView for each item in the tree. However, understanding its structure helps with custom styling.
+
+## Internal Behavior
+
+- Indentation is calculated based on `Level * 20 + 8` pixels
+- Toggle button only appears for nodes with children
+- Checkbox state is managed by the parent SbTreeView
+- Selection click triggers parent's `SelectItem` method
+- Toggle click triggers parent's `ToggleItem` method
+
+## Styling Examples
+
+### Custom Node Styling
+
+```css
+/* Highlight selected nodes */
+.sb-treeview-node__content--selected {
+    background-color: var(--sb-color-primary-light);
+    border-radius: 4px;
+}
+
+/* Custom hover effect */
+.sb-treeview-node__content:hover {
+    background-color: var(--sb-color-surface-hover);
+}
+
+/* Increase indentation */
+.sb-treeview-node__content {
+    padding-left: calc(var(--level) * 24px + 12px);
+}
+
+/* Style the expand icon */
+.sb-treeview-node__chevron {
+    transition: transform 0.2s ease;
+}
+
+.sb-treeview-node--expanded .sb-treeview-node__chevron {
+    transform: rotate(90deg);
+}
+
+/* Style icons by type */
+.sb-treeview-node[data-type="folder"] .sb-treeview-node__icon {
+    color: var(--sb-color-warning);
+}
+
+.sb-treeview-node[data-type="file"] .sb-treeview-node__icon {
+    color: var(--sb-color-muted);
+}
+```
+
+### Animation for Expand/Collapse
+
+```css
+.sb-treeview-node__children {
+    overflow: hidden;
+    animation: expandChildren 0.2s ease-out;
+}
+
+@keyframes expandChildren {
+    from {
+        opacity: 0;
+        max-height: 0;
+    }
+    to {
+        opacity: 1;
+        max-height: 1000px;
+    }
+}
+```
+
+## Usage Context
+
+Since SbTreeViewNode is used internally, here's how it fits into the tree rendering:
+
+```razor
+@* This is how SbTreeView uses SbTreeViewNode internally *@
+<div class="sb-treeview">
+    @foreach (var item in Items)
+    {
+        <SbTreeViewNode TItem="TItem"
+                        Item="item"
+                        Level="0"
+                        ChildSelector="ChildSelector"
+                        TextSelector="TextSelector"
+                        IconSelector="IconSelector"
+                        IsExpandedSelector="IsExpandedSelector"
+                        IsSelectedSelector="IsSelectedSelector" />
+    }
+</div>
+
+@* SbTreeViewNode then recursively renders children *@
+<div class="sb-treeview-node">
+    <div class="sb-treeview-node__content">
+        <button class="sb-treeview-node__toggle">▶</button>
+        <span class="sb-treeview-node__icon">📁</span>
+        <span class="sb-treeview-node__text">Item Name</span>
+    </div>
+    <div class="sb-treeview-node__children">
+        @* Recursive SbTreeViewNode for each child *@
+    </div>
+</div>
+```