first commit

2026-05-18 15:53:59 +03:30
commit 2c100028a1
534 changed files with 94240 additions and 0 deletions
@@ -0,0 +1,127 @@
+# SbNumberField
+
+A numeric input component with increment/decrement spin buttons, supporting min/max constraints and step increments.
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| Value | TNumber | - | The current numeric value (two-way bindable) |
+| ValueChanged | EventCallback\<TNumber\> | - | Callback when value changes |
+| Min | TNumber? | null | Minimum allowed value |
+| Max | TNumber? | null | Maximum allowed value |
+| Step | TNumber? | null | Step increment (defaults to 1) |
+| ShowSpinButtons | bool | true | Whether to show increment/decrement buttons |
+| Placeholder | string? | null | Placeholder text |
+| Disabled | bool | false | Whether the field is disabled |
+| ReadOnly | bool | false | Whether the field is read-only |
+| Id | string? | null | Element ID |
+| Label | string? | null | Label text displayed above the input |
+| Required | bool | false | Whether the field is required |
+| HelperText | string? | null | Helper or hint text shown below the input |
+| Class | string? | null | Additional CSS classes |
+| Style | string? | null | Inline styles |
+| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes for the input |
+| IncreaseAriaLabel | string | "Increase" | Aria label for increase button |
+| DecreaseAriaLabel | string | "Decrease" | Aria label for decrease button |
+
+## Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| ValueChanged | EventCallback\<TNumber\> | Fired when the value changes |
+
+## Supported Types
+
+The component supports any numeric struct type implementing `IComparable<T>`:
+- `int`, `long`, `short`, `byte`
+- `float`, `double`, `decimal`
+
+## CSS Classes
+
+- `sb-number-field` - Base class
+- `sb-number-field__label` - Label element (stacked above input)
+- `sb-number-field__required` - Required asterisk
+- `sb-number-field__input-group` - Wrapper for input and spin buttons
+- `sb-number-field__input` - The input element
+- `sb-number-field__spinners` - Spin buttons container
+- `sb-number-field__spinner` - Individual spinner button
+- `sb-number-field__helper` - Helper text container
+- `sb-number-field--disabled` - Disabled state
+
+## Accessibility
+
+- Uses native `<input type="number">`
+- Spin buttons have appropriate aria-labels
+- Min/max/step reflected in HTML attributes
+- Keyboard: Arrow up/down to increment/decrement
+
+## Examples
+
+### Basic Usage
+
+```razor
+<SbNumberField TNumber="int" @bind-Value="quantity" Label="Quantity" />
+```
+
+### With Constraints
+
+```razor
+<SbNumberField TNumber="int" 
+               @bind-Value="age" 
+               Label="Age"
+               Min="0"
+               Max="150"
+               HelperText="Enter age between 0 and 150" />
+```
+
+### Decimal with Step
+
+```razor
+<SbNumberField TNumber="decimal" 
+               @bind-Value="price" 
+               Label="Price"
+               Min="0"
+               Step="0.01m" />
+```
+
+### Without Spin Buttons
+
+```razor
+<SbNumberField TNumber="int" 
+               @bind-Value="year" 
+               Label="Year"
+               ShowSpinButtons="false"
+               Min="1900"
+               Max="2100" />
+```
+
+### Percentage
+
+```razor
+<SbNumberField TNumber="int" 
+               @bind-Value="percentage" 
+               Label="Discount %"
+               Min="0"
+               Max="100"
+               Step="5" />
+```
+
+### Disabled State
+
+```razor
+<SbNumberField TNumber="int" 
+               Value="42" 
+               Label="Fixed Value"
+               Disabled="true" />
+```
+
+### Float with Precision
+
+```razor
+<SbNumberField TNumber="float" 
+               @bind-Value="temperature" 
+               Label="Temperature (°C)"
+               Min="-273.15f"
+               Step="0.1f" />
+```