@cahyo-dimas/freeday 1.14.0 → 1.16.0

package/adapters/blazor/FdyTable.razor.cs

@@ -0,0 +1,200 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+
+namespace Freeday.Blazor;
+
+public partial class FdyTable<TRow>
+{
+    /// <summary>Column definitions (order = display order).</summary>
+    [Parameter, EditorRequired] public IReadOnlyList<FdyTableColumn<TRow>> Columns { get; set; } = Array.Empty<FdyTableColumn<TRow>>();
+
+    /// <summary>The rows to display. The single source of truth, read on every render.</summary>
+    [Parameter, EditorRequired] public IReadOnlyList<TRow> Rows { get; set; } = Array.Empty<TRow>();
+
+    /// <summary>A stable key per row (for keying + expansion identity).</summary>
+    [Parameter, EditorRequired] public Func<TRow, object> RowKey { get; set; } = default!;
+
+    /// <summary>Controlled sort. Wire <c>@bind-Sort</c> (or SortChanged) to own sorting; omit for internal.</summary>
+    [Parameter] public FdySortState? Sort { get; set; }
+    [Parameter] public EventCallback<FdySortState?> SortChanged { get; set; }
+
+    /// <summary>Controlled filter map keyed by column key. Wire FiltersChanged to own filtering; omit for internal.</summary>
+    [Parameter] public IReadOnlyDictionary<string, FdyColumnFilter>? Filters { get; set; }
+    [Parameter] public EventCallback<IReadOnlyDictionary<string, FdyColumnFilter>> FiltersChanged { get; set; }
+
+    /// <summary>Server pagination state (0-based). Presence switches the table into server mode.</summary>
+    [Parameter] public FdyPageState? Page { get; set; }
+    [Parameter] public EventCallback<FdyPageState> PageChanged { get; set; }
+
+    /// <summary>Client-side page size when <see cref="Page"/> is absent; 0 = render all rows (no pager).</summary>
+    [Parameter] public int PageSize { get; set; }
+
+    [Parameter] public bool Loading { get; set; }
+    [Parameter] public string LoadingText { get; set; } = "Loading…";
+    [Parameter] public string EmptyText { get; set; } = "No data";
+    [Parameter] public RenderFragment? EmptyContent { get; set; }
+    [Parameter] public string? AriaLabel { get; set; }
+
+    /// <summary>Opt in to row activation: rows become focusable and raise <see cref="RowActivate"/>.</summary>
+    [Parameter] public bool RowActivatable { get; set; }
+    [Parameter] public EventCallback<TRow> RowActivate { get; set; }
+
+    /// <summary>Per-row class hook, e.g. to mark a selected row.</summary>
+    [Parameter] public Func<TRow, string?>? RowClass { get; set; }
+
+    /// <summary>Controlled: row keys whose <see cref="RowDetail"/> is shown beneath them.</summary>
+    [Parameter] public IReadOnlyList<object>? ExpandedKeys { get; set; }
+    [Parameter] public RenderFragment<TRow>? RowDetail { get; set; }
+
+    /// <summary>Optional toolbar (search box, actions) above the table.</summary>
+    [Parameter] public RenderFragment? Toolbar { get; set; }
+
+    private FdySortState? _internalSort;
+    private Dictionary<string, FdyColumnFilter> _internalFilters = new();
+    private int _internalPageIndex;
+
+    private List<TRow> _displayRows = new();
+    private int _totalCount;
+
+    private static readonly IReadOnlyDictionary<string, FdyColumnFilter> EmptyFilters = new Dictionary<string, FdyColumnFilter>();
+
+    private bool ServerPaged => Page is not null;
+    private bool SortControlled => ServerPaged || SortChanged.HasDelegate;
+    private bool FiltersControlled => ServerPaged || FiltersChanged.HasDelegate;
+
+    private FdySortState? EffectiveSort => SortControlled ? Sort : _internalSort;
+    private IReadOnlyDictionary<string, FdyColumnFilter> EffectiveFilters =>
+        FiltersControlled ? (Filters ?? EmptyFilters) : _internalFilters;
+
+    private int PageSizeEff => ServerPaged ? Page!.Size : PageSize;
+    private int CurrentPage1 => (ServerPaged ? Page!.Index : _internalPageIndex) + 1;
+    private int TotalCount => _totalCount;
+    private int TotalPages => PageSizeEff > 0 ? Math.Max(1, (int)Math.Ceiling((double)TotalCount / PageSizeEff)) : 1;
+    private bool HasPager => PageSizeEff > 0 && TotalPages > 1;
+    private List<int?> Pages => TableModel.PageWindow(CurrentPage1, TotalPages);
+    private int RangeFrom => TotalCount == 0 ? 0 : (CurrentPage1 - 1) * PageSizeEff + 1;
+    private int RangeTo => TotalCount == 0 ? 0 : RangeFrom - 1 + _displayRows.Count;
+
+    protected override void OnParametersSet() => Recompute();
+
+    // Recompute the visible rows from the current effective sort/filter/page. Called on every
+    // parameter change and after any internal-state mutation (sort/filter/page click).
+    private void Recompute()
+    {
+        List<TRow> filteredSorted = ServerPaged
+            ? Rows.ToList()
+            : TableModel.SortRows(TableModel.FilterRows(Rows, Columns, EffectiveFilters), Columns, EffectiveSort);
+
+        _totalCount = ServerPaged ? Page!.Total : filteredSorted.Count;
+
+        if (!ServerPaged && PageSize > 0)
+        {
+            // Keep the page in range when a filter shrank the row set.
+            int tp = Math.Max(1, (int)Math.Ceiling((double)_totalCount / PageSize));
+            if (_internalPageIndex > tp - 1) _internalPageIndex = Math.Max(0, tp - 1);
+            _displayRows = TableModel.Paginate(filteredSorted, _internalPageIndex, PageSize);
+        }
+        else
+        {
+            _displayRows = filteredSorted;
+        }
+    }
+
+    private FdyColumnFilter? GetFilter(string key) => EffectiveFilters.TryGetValue(key, out FdyColumnFilter? f) ? f : null;
+
+    private IReadOnlyList<string> EnumOptions(FdyTableColumn<TRow> col) =>
+        col.Options ?? TableModel.DistinctValues(Rows, col);
+
+    private string? AriaSortOf(FdyTableColumn<TRow> col)
+    {
+        FdySortState? s = EffectiveSort;
+        if (s is null || s.Key != col.Key) return null;
+        return s.Dir == FdySortDir.Asc ? "ascending" : "descending";
+    }
+
+    private async Task OnSortClick(FdyTableColumn<TRow> col)
+    {
+        if (!col.Sortable) return;
+        FdySortState? cur = EffectiveSort;
+        FdySortState next = cur is not null && cur.Key == col.Key
+            ? new FdySortState(col.Key, cur.Dir == FdySortDir.Asc ? FdySortDir.Desc : FdySortDir.Asc)
+            : new FdySortState(col.Key, FdySortDir.Asc);
+        if (SortControlled)
+        {
+            await SortChanged.InvokeAsync(next);
+        }
+        else
+        {
+            _internalSort = next;
+            _internalPageIndex = 0;
+            Recompute();
+        }
+    }
+
+    private async Task OnFilterChange(FdyTableColumn<TRow> col, FdyColumnFilter? filter)
+    {
+        Dictionary<string, FdyColumnFilter> next = new(EffectiveFilters);
+        if (filter is null) next.Remove(col.Key);
+        else next[col.Key] = filter;
+        if (FiltersControlled)
+        {
+            await FiltersChanged.InvokeAsync(next);
+        }
+        else
+        {
+            _internalFilters = next;
+            _internalPageIndex = 0;
+            Recompute();
+        }
+    }
+
+    private async Task GoTo(int page1)
+    {
+        int clamped = Math.Min(Math.Max(1, page1), TotalPages);
+        int index0 = clamped - 1;
+        if (ServerPaged)
+        {
+            await PageChanged.InvokeAsync(new FdyPageState(index0, Page!.Size, Page.Total));
+        }
+        else
+        {
+            _internalPageIndex = index0;
+            Recompute();
+        }
+    }
+
+    private string? CellClass(FdyTableColumn<TRow> col) => col.Mono ? "fdy-mono" : null;
+
+    private static string? AlignStyle(FdyTableColumn<TRow> col) => col.Align switch
+    {
+        FdyColumnAlign.Right => "text-align:right",
+        FdyColumnAlign.Center => "text-align:center",
+        FdyColumnAlign.Left => "text-align:left",
+        _ => null,
+    };
+
+    private string RowClasses(TRow row)
+    {
+        string? custom = RowClass?.Invoke(row);
+        string activatable = RowActivatable ? "fdy-table__row--activatable" : string.Empty;
+        return string.Join(" ", new[] { custom, activatable }.Where(s => !string.IsNullOrEmpty(s))!);
+    }
+
+    private async Task OnRowClick(TRow row)
+    {
+        if (RowActivatable) await RowActivate.InvokeAsync(row);
+    }
+
+    // Enter/Space activate a focused row. Blazor's KeyboardEventArgs can't tell whether the row
+    // itself vs an inner control is the target, so activatable rows should not embed focusable
+    // controls (the common drill-in-row pattern) — matching the Vue guard's practical effect.
+    private async Task OnRowKeydown(KeyboardEventArgs e, TRow row)
+    {
+        if (!RowActivatable) return;
+        if (e.Key is not ("Enter" or " ")) return;
+        await RowActivate.InvokeAsync(row);
+    }
+
+    private bool IsExpanded(TRow row) => ExpandedKeys?.Contains(RowKey(row)) == true;
+    private string? ExpandedAttr(TRow row) => RowDetail is null ? null : (IsExpanded(row) ? "true" : "false");
+}

package/adapters/blazor/FdyTableFilter.razor

@@ -0,0 +1,77 @@
+@namespace Freeday.Blazor
+
+@* Internal to FdyTable: one column's header funnel button + its type-aware filter popover
+   (text / enum / number / date), over freeday's .fdy-table__filterbtn + .fdy-filter* classes.
+   The panel is position:fixed (top layer) so it escapes the table's overflow; light-dismiss
+   (outside pointer / Esc) is wired through FreedayBlazor.onOutside. Purely controlled — it renders
+   the current Filter and raises the next one (or null to clear). *@
+<span @ref="_root" class="fdy-table__filterwrap">
+    <button type="button"
+            class="@(Active ? "fdy-table__filterbtn is-active" : "fdy-table__filterbtn")"
+            aria-haspopup="dialog"
+            aria-pressed="@Active"
+            aria-expanded="@_open"
+            aria-label="@($"Filter {Label}")"
+            @onclick="Toggle"
+            @onclick:stopPropagation="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M3 5h18l-7 8v5l-4 2v-7z" />
+        </svg>
+    </button>
+
+    @if (_open)
+    {
+        <div class="fdy-filter" role="dialog" aria-label="@($"Filter {Label}")">
+            @switch (Type)
+            {
+                case FdyColumnFilterType.Text:
+                    <div class="fdy-filter__title">Contains text</div>
+                    <input class="fdy-input" type="search" placeholder="Contains…" value="@TextValue"
+                           @oninput="OnTextInput" />
+                    break;
+
+                case FdyColumnFilterType.Enum:
+                    <div class="fdy-filter__title">Show values</div>
+                    <div class="fdy-filter__list">
+                        @foreach (string val in Options)
+                        {
+                            <label class="fdy-filter__check">
+                                <input type="checkbox" class="fdy-checkbox"
+                                       checked="@EnumValues.Contains(val)"
+                                       @onchange="e => OnEnumToggle(val, (bool)(e.Value ?? false))" />
+                                @val
+                            </label>
+                        }
+                    </div>
+                    break;
+
+                case FdyColumnFilterType.Number:
+                    <div class="fdy-filter__title">Value range</div>
+                    <div class="fdy-filter__range">
+                        <input class="fdy-input" type="text" inputmode="numeric" placeholder="Min" value="@NumMin"
+                               @oninput="e => OnNumber(true, e.Value?.ToString())" />
+                        <span aria-hidden="true">–</span>
+                        <input class="fdy-input" type="text" inputmode="numeric" placeholder="Max" value="@NumMax"
+                               @oninput="e => OnNumber(false, e.Value?.ToString())" />
+                    </div>
+                    break;
+
+                case FdyColumnFilterType.Date:
+                    <div class="fdy-filter__title">Date range</div>
+                    <div class="fdy-filter__range">
+                        <input class="fdy-input" type="date" aria-label="From" value="@DateFrom"
+                               @oninput="e => OnDate(true, e.Value?.ToString())" />
+                        <span aria-hidden="true">–</span>
+                        <input class="fdy-input" type="date" aria-label="To" value="@DateTo"
+                               @oninput="e => OnDate(false, e.Value?.ToString())" />
+                    </div>
+                    break;
+            }
+
+            <div class="fdy-filter__foot">
+                <button type="button" class="fdy-btn fdy-btn--ghost fdy-btn--sm" @onclick="Reset">Reset</button>
+                <button type="button" class="fdy-btn fdy-btn--sm" @onclick="() => Close()">Close</button>
+            </div>
+        </div>
+    }
+</span>

package/adapters/blazor/FdyTableFilter.razor.cs

@@ -0,0 +1,117 @@
+using System.Globalization;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace Freeday.Blazor;
+
+public partial class FdyTableFilter : ComponentBase, IAsyncDisposable
+{
+    [Inject] private IJSRuntime JS { get; set; } = default!;
+
+    [Parameter, EditorRequired] public string Label { get; set; } = string.Empty;
+    [Parameter, EditorRequired] public FdyColumnFilterType Type { get; set; }
+
+    /// <summary>The current filter for this column (null = none).</summary>
+    [Parameter] public FdyColumnFilter? Filter { get; set; }
+
+    /// <summary>Distinct values for an enum filter (computed by the parent over the full row set).</summary>
+    [Parameter] public IReadOnlyList<string> Options { get; set; } = Array.Empty<string>();
+
+    /// <summary>The next filter for this column, or null to clear it.</summary>
+    [Parameter] public EventCallback<FdyColumnFilter?> OnChange { get; set; }
+
+    private ElementReference _root;
+    private bool _open;
+    private DotNetObjectReference<FdyTableFilter>? _self;
+    private int _outsideToken;
+
+    private bool Active => TableModel.IsFilterActive(Filter);
+
+    // Typed reads of the current filter for the inputs (fall back to the empty shape per type).
+    private string TextValue => (Filter as FdyColumnFilter.Text)?.Value ?? string.Empty;
+    private IReadOnlyList<string> EnumValues => (Filter as FdyColumnFilter.Enum)?.Values ?? Array.Empty<string>();
+    private string NumMin => (Filter as FdyColumnFilter.Number)?.Min?.ToString(CultureInfo.InvariantCulture) ?? string.Empty;
+    private string NumMax => (Filter as FdyColumnFilter.Number)?.Max?.ToString(CultureInfo.InvariantCulture) ?? string.Empty;
+    private string DateFrom => (Filter as FdyColumnFilter.Date)?.From ?? string.Empty;
+    private string DateTo => (Filter as FdyColumnFilter.Date)?.To ?? string.Empty;
+
+    private async Task Apply(FdyColumnFilter next)
+        => await OnChange.InvokeAsync(TableModel.IsFilterActive(next) ? next : null);
+
+    private static double? ParseNum(string? v)
+    {
+        string t = (v ?? string.Empty).Trim();
+        if (t.Length == 0) return null;
+        return double.TryParse(t, NumberStyles.Any, CultureInfo.InvariantCulture, out double n) ? n : null;
+    }
+
+    private Task OnTextInput(ChangeEventArgs e) => Apply(new FdyColumnFilter.Text(e.Value?.ToString() ?? string.Empty));
+
+    private Task OnEnumToggle(string value, bool check)
+    {
+        List<string> set = EnumValues.Where(v => v != value).ToList();
+        if (check) set.Add(value);
+        return Apply(new FdyColumnFilter.Enum(set));
+    }
+
+    private Task OnNumber(bool isMin, string? raw)
+    {
+        double? v = ParseNum(raw);
+        return Apply(new FdyColumnFilter.Number(
+            isMin ? v : ParseNum(NumMin),
+            isMin ? ParseNum(NumMax) : v));
+    }
+
+    private Task OnDate(bool isFrom, string? raw)
+    {
+        string? val = string.IsNullOrEmpty(raw) ? null : raw;
+        return Apply(new FdyColumnFilter.Date(
+            isFrom ? val : (string.IsNullOrEmpty(DateFrom) ? null : DateFrom),
+            isFrom ? (string.IsNullOrEmpty(DateTo) ? null : DateTo) : val));
+    }
+
+    private async Task Toggle()
+    {
+        if (_open) { await Close(); return; }
+        _open = true;
+        _self ??= DotNetObjectReference.Create(this);
+        _outsideToken = await JS.InvokeAsync<int>("FreedayBlazor.onOutside", _root, _self, nameof(CloseFromJs));
+    }
+
+    private async Task Close()
+    {
+        if (!_open) return;
+        _open = false;
+        if (_outsideToken != 0)
+        {
+            try { await JS.InvokeVoidAsync("FreedayBlazor.off", _outsideToken); }
+            catch (JSDisconnectedException) { /* runtime gone */ }
+            _outsideToken = 0;
+        }
+    }
+
+    /// <summary>Invoked by the bridge on an outside pointerdown or Escape.</summary>
+    [JSInvokable]
+    public async Task CloseFromJs()
+    {
+        await Close();
+        StateHasChanged();
+    }
+
+    private async Task Reset()
+    {
+        await OnChange.InvokeAsync(null);
+        await Close();
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_outsideToken != 0)
+        {
+            try { await JS.InvokeVoidAsync("FreedayBlazor.off", _outsideToken); }
+            catch (JSDisconnectedException) { /* runtime gone */ }
+        }
+        _self?.Dispose();
+        GC.SuppressFinalize(this);
+    }
+}

package/adapters/blazor/Freeday.Blazor.csproj

@@ -0,0 +1,27 @@
+<!-- Freeday — Blazor component library (Razor Class Library).
+     Typed wrappers over the vanilla `fdy-*` enhancers; the host page must load
+     dist/freeday.js + adapters/blazor/freeday-blazor.js. Targets net8.0 (LTS) so it can
+     be referenced from net8/9/10 apps. Consume via <ProjectReference> to this .csproj
+     (e.g. from node_modules/@cahyo-dimas/freeday/adapters/blazor/). -->
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <RootNamespace>Freeday.Blazor</RootNamespace>
+    <AssemblyName>Freeday.Blazor</AssemblyName>
+    <IsPackable>false</IsPackable>
+    <!-- freeday-blazor.js is shipped/loaded as a plain <script>, not an RCL static asset. -->
+    <DefaultItemExcludes>$(DefaultItemExcludes);freeday-blazor.js</DefaultItemExcludes>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <SupportedPlatform Include="browser" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.8" />
+  </ItemGroup>
+
+</Project>

package/adapters/blazor/FreedayComponentBase.cs

@@ -0,0 +1,73 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace Freeday.Blazor;
+
+/// <summary>
+/// Shared lifecycle for Freeday Blazor components that wrap a vanilla <c>fdy-*</c> enhancer:
+/// hydrate the enhancer over the Blazor-rendered markup once on first render, forward its
+/// bubbling <c>fdy-*</c> events to <c>[JSInvokable]</c> handlers, and clean both up on dispose.
+/// The host page must load <c>dist/freeday.js</c> and <c>adapters/blazor/freeday-blazor.js</c>.
+/// </summary>
+/// <typeparam name="TSelf">The concrete component type (CRTP) so the .NET reference handed to
+/// JS is typed to the instance and resolves its <c>[JSInvokable]</c> methods.</typeparam>
+public abstract class FreedayComponentBase<TSelf> : ComponentBase, IAsyncDisposable
+    where TSelf : FreedayComponentBase<TSelf>
+{
+    [Inject] protected IJSRuntime JS { get; set; } = default!;
+
+    /// <summary>The component's root element, handed to the enhancer for hydration.</summary>
+    protected ElementReference Root;
+
+    private DotNetObjectReference<TSelf>? _self;
+    private readonly List<int> _tokens = new();
+    private bool _hydrated;
+
+    /// <summary>True once the enhancer has been hydrated over the first render. Components whose
+    /// DOM is owned by the enhancer (combo, datepicker, …) should stop rendering after this
+    /// (<c>ShouldRender() =&gt; !Hydrated</c>) so Blazor never fights the enhancer's imperative
+    /// DOM mutations; subsequent changes are pushed through the enhancer's API instead.</summary>
+    protected bool Hydrated => _hydrated;
+
+    /// <summary>A stable .NET reference the JS bridge invokes callbacks on.</summary>
+    protected DotNetObjectReference<TSelf> Self => _self ??= DotNetObjectReference.Create((TSelf)this);
+
+    /// <summary>Hydrate the enhancer(s) over this component's markup. Defaults to re-running every
+    /// registered enhancer over <see cref="Root"/>; override to call a specific enhancer.</summary>
+    protected virtual ValueTask HydrateAsync() => JS.InvokeVoidAsync("FreedayBlazor.initAll", Root);
+
+    /// <summary>Runs once after the first render, right after <see cref="HydrateAsync"/> — wire event
+    /// subscriptions here.</summary>
+    protected virtual ValueTask OnHydratedAsync() => ValueTask.CompletedTask;
+
+    /// <summary>Extra teardown beyond event unsubscription (e.g. a dialog subscription).</summary>
+    protected virtual ValueTask CleanupAsync() => ValueTask.CompletedTask;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!firstRender || _hydrated) return;
+        _hydrated = true;
+        await HydrateAsync();
+        await OnHydratedAsync();
+    }
+
+    /// <summary>Subscribe a bubbling <c>fdy-*</c> event on <see cref="Root"/> to a
+    /// <c>[JSInvokable]</c> method; the subscription is removed on dispose.</summary>
+    protected async Task SubscribeAsync(string eventName, string method)
+    {
+        _tokens.Add(await JS.InvokeAsync<int>("FreedayBlazor.on", Root, eventName, Self, method));
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        foreach (int token in _tokens)
+        {
+            try { await JS.InvokeVoidAsync("FreedayBlazor.off", token); }
+            catch (JSDisconnectedException) { /* circuit/runtime already gone */ }
+        }
+        try { await CleanupAsync(); }
+        catch (JSDisconnectedException) { /* circuit/runtime already gone */ }
+        _self?.Dispose();
+        GC.SuppressFinalize(this);
+    }
+}