Skip to content

Commit

Permalink
Merge pull request #71 from majorimi/release/v1.3.0
Browse files Browse the repository at this point in the history
Release/v1.3.0
  • Loading branch information
majorimi authored Mar 10, 2021
2 parents 5f2fbb8 + c5b5662 commit 376fa44
Show file tree
Hide file tree
Showing 216 changed files with 11,480 additions and 736 deletions.
319 changes: 319 additions & 0 deletions .github/docs/BrowserStorage.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,319 @@
Blazor Browser Storage Extensions
============
[![Build Status](https://dev.azure.com/major-soft/GitHub/_apis/build/status/blazor-components/blazor-components-build-check)](https://dev.azure.com/major-soft/GitHub/_build/latest?definitionId=6)
[![Package Version](https://img.shields.io/nuget/v/Majorsoft.Blazor.Extensions.BrowserStorage?label=Latest%20Version)](https://www.nuget.org/packages/Majorsoft.Blazor.Extensions.BrowserStorage/)
[![NuGet Downloads](https://img.shields.io/nuget/dt/Majorsoft.Blazor.Extensions.BrowserStorage?label=Downloads)](https://www.nuget.org/packages/Majorsoft.Blazor.Extensions.BrowserStorage/)
[![License](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/majorimi/blazor-components/blob/master/LICENSE)

# About

Blazor extension which enables Browser Local and Session storages and Cookies store access for Blazor applications.
**All components work with WebAssembly and Server hosted models**.
For code examples [see usage](https://github.com/majorimi/blazor-components/blob/master/src/Majorsoft.Blazor.Components.TestApps.Common/Components/BrowserStorage.razor).

You can try it out by using the [demo app](https://blazorextensions.z6.web.core.windows.net/browserstorage).

# Extension services

- **`ILocalStorageService`**: is an injectable service for accessing Browser's Local Storage API.
- **`ISessionStorageService`**: is an injectable service for accessing Browser's Session Storage API.
- **`ICookieStoreService`**: is an injectable service for accessing Browser's Cookie Store API.

## `ILocalStorageService` service (See [demo app](https://blazorextensions.z6.web.core.windows.net/browserstorage#local))
Browser Local Storage is an injectable ILocalStorageService service for accessing Browser's [Local Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).

### Functions
- **`CountAsync`: `Task<Cookie> GetAsync(string name)`** <br />
Returns an integer representing the number of data items stored in the Storage object.
- **`ClearAsync`: `Task ClearAsync()`** <br />
When invoked, will empty all keys out of the storage.
- **`GetItemAsync`: `Task<T> GetItemAsync<T>(string key)`** <br />
When passed a key name, will return that key's value.
- **`GetItemAsync`: `Task<T> GetItemAsync<T>(string key)`** <br />
When passed a key name, will return that key's value.
- **`GetItemAsStringAsync`: `Task<string?> GetItemAsStringAsync(string key)`** <br />
When passed a key name, will return that key's value.
- **`GetKeyByIndexAsync`: `Task<string?> GetKeyByIndexAsync(int index)`** <br />
Returns Storage key name by the given index.
- **`GetAllKeysAsync`: `IAsyncEnumerable<string> GetAllKeysAsync()`** <br />
Returns all keys in Storage.
- **`ContainKeyAsync`: `Task<bool> ContainKeyAsync(string key)`** <br />
Checks if given key exists as Storage key.
- **`RemoveItemAsync`: `Task RemoveItemAsync(string key)`** <br />
When passed a key name, will remove that key from the storage.
- **`SetItemAsync`: `Task SetItemAsync<T>(string key, T data)`** <br />
When passed a key name and value, will add that key to the storage, or update that key's value if it already exists.

## `ISessionStorageService` service (See [demo app](https://blazorextensions.z6.web.core.windows.net/browserstorage#session))
Browser Session Storage is an injectable ISessionStorageService service for accessing Browser's [Session Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage).

### Functions
- **`CountAsync`: `Task<Cookie> GetAsync(string name)`** <br />
Returns an integer representing the number of data items stored in the Storage object.
- **`ClearAsync`: `Task ClearAsync()`** <br />
When invoked, will empty all keys out of the storage.
- **`GetItemAsync`: `Task<T> GetItemAsync<T>(string key)`** <br />
When passed a key name, will return that key's value.
- **`GetItemAsync`: `Task<T> GetItemAsync<T>(string key)`** <br />
When passed a key name, will return that key's value.
- **`GetItemAsStringAsync`: `Task<string?> GetItemAsStringAsync(string key)`** <br />
When passed a key name, will return that key's value.
- **`GetKeyByIndexAsync`: `Task<string?> GetKeyByIndexAsync(int index)`** <br />
Returns Storage key name by the given index.
- **`GetAllKeysAsync`: `IAsyncEnumerable<string> GetAllKeysAsync()`** <br />
Returns all keys in Storage.
- **`ContainKeyAsync`: `Task<bool> ContainKeyAsync(string key)`** <br />
Checks if given key exists as Storage key.
- **`RemoveItemAsync`: `Task RemoveItemAsync(string key)`** <br />
When passed a key name, will remove that key from the storage.
- **`SetItemAsync`: `Task SetItemAsync<T>(string key, T data)`** <br />
When passed a key name and value, will add that key to the storage, or update that key's value if it already exists.

## `ICookieStoreService` service (See [demo app](https://blazorextensions.z6.web.core.windows.net/browserstorage#cookie))
Browser Cookie Store is an **injectable `ICookieStoreService` service** for accessing Browser's [Cookie Store API](https://developer.mozilla.org/en-US/docs/Web/API/CookieStore).
**Note: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.**

### Functions
- **`GetAsync`: `Task<Cookie> GetAsync(string name)`** <br />
Gets a single cookie with the given name.
- **`GetAllAsync`: `Task<IEnumerable<Cookie>> GetAllAsync()`** <br />
Gets all matching cookies.
- **`SetAsync`: `Task SetAsync(Cookie cookie)`** <br />
Sets a cookie with the given name and value.
- **`DeleteAsync`: `Task DeleteAsync(string name)`** <br />
Deletes a cookie with the given name.

# Configuration

## Installation

**Majorsoft.Blazor.Extensions.BrowserStorage** is available on [NuGet](https://www.nuget.org/packages/Majorsoft.Blazor.Extensions.BrowserStorage/).

```sh
dotnet add package Majorsoft.Blazor.Extensions.BrowserStorage
```
Use the `--version` option to specify a [preview version](https://www.nuget.org/packages/Majorsoft.Blazor.Extensions.BrowserStorage/absoluteLatest) to install.

## Usage

Add using statement to your Blazor `<component/page>.razor` file. Or globally reference it into `_Imports.razor` file.
```
@using Majorsoft.Blazor.Extensions.BrowserStorage
```

### `ILocalStorageService` usage
Following code example shows how to use **`ILocalStorageService`** service.
Use Browser Developer tools (F12) to see results.

```
LocalStorage item Count: @_localStorageCount
@if (_localStorageCount > 0)
{
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th width="25%">Key</th>
<th>Value</th>
</tr>
</thead>
@foreach (var item in _localStorageItems)
{
<tr>
<td>@item.Key</td>
<td>@item.Value</td>
</tr>
}
</table>
}
@inject ILocalStorageService _localStorageService
@code {
private int _localStorageCount;
private IList<KeyValuePair<string, string>> _localStorageItems;
protected override async Task OnInitializedAsync()
{
await InsertLocalStorageItems();
_localStorageCount = await _localStorageService.CountAsync();
await RefreshLocalStorageItems();
}
private async Task InsertLocalStorageItems()
{
await _localStorageService.SetItemAsync("Local_Numeric_value", 2.5);
await _localStorageService.SetItemAsync("Local_String_value", "hello");
await _localStorageService.SetItemAsync("Local_Data time", DateTime.Now);
await _localStorageService.SetItemAsync<UserInfo>("Local_Test_object", new UserInfo { Name = "Name", Age = 22 });
await _localStorageService.SetItemAsync<string>("Local_Null_string", null);
await _localStorageService.SetItemAsync<UserInfo>("Local_Null_object", null);
}
private async Task RefreshLocalStorageItems()
{
_localStorageItems = new List<KeyValuePair<string, string>>();
await foreach (var key in _localStorageService.GetAllKeysAsync())
{
if (key is null)
continue;
_localStorageItems.Add(new KeyValuePair<string, string>(key, await _localStorageService.GetItemAsStringAsync(key)));
}
_localUserInfo = await _localStorageService.GetItemAsync<UserInfo>("Local_customData") ?? new UserInfo();
}
}
```

### `ISessionStorageService` usage
Following code example shows how to use **`ISessionStorageService`** service.
Use Browser Developer tools (F12) to see results.

```
SessionStorage item Count: @_sessionStorageCount
@if (_sessionStorageCount > 0)
{
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th width="25%">Key</th>
<th>Value</th>
</tr>
</thead>
@foreach (var item in _sessionStorageItems)
{
<tr>
<td>@item.Key</td>
<td>@item.Value</td>
</tr>
}
</table>
}
@inject ISessionStorageService _sessionStorageService
@code {
private int _sessionStorageCount;
private IList<KeyValuePair<string, string>> _sessionStorageItems;
protected override async Task OnInitializedAsync()
{
await InsertSessionStorageItems();
_sessionStorageCount = await _sessionStorageService.CountAsync();
await RefreshSessionStorageItems();
}
private async Task InsertSessionStorageItems()
{
await _sessionStorageService.SetItemAsync("Session_Numeric_value", 2.5);
await _sessionStorageService.SetItemAsync("Session_String_value", "hello");
await _sessionStorageService.SetItemAsync("Session_Data time", DateTime.Now);
await _sessionStorageService.SetItemAsync<UserInfo>("Session_Test_object", new UserInfo { Name = "Name", Age = 22 });
await _sessionStorageService.SetItemAsync<string>("Session_Null_string", null);
await _sessionStorageService.SetItemAsync<UserInfo>("Session_Null_object", null);
}
private async Task RefreshSessionStorageItems()
{
_sessionStorageItems = new List<KeyValuePair<string, string>>();
await foreach (var key in _sessionStorageService.GetAllKeysAsync())
{
if (key is null)
continue;
_sessionStorageItems.Add(new KeyValuePair<string, string>(key, await _sessionStorageService.GetItemAsStringAsync(key)));
}
_sessionUserInfo = await _sessionStorageService.GetItemAsync<UserInfo>("Session_customData") ?? new UserInfo();
}
}
```

### `ICookieStoreService` usage
Following code example shows how to use **`ICookieStoreService`** service.
Use Browser Developer tools (F12) to see results.

**Note: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.**

```
LocalStorage item Count: @_allCookies?.Count()
@if (_allCookies?.Count() > 0)
{
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th>Domain</th>
<th>Port</th>
<th>Path</th>
<th>Expires</th>
<th>HttpOnly</th>
<th>Secure</th>
</tr>
</thead>
@foreach (var item in _allCookies)
{
<tr>
<td>@item.Name</td>
<td>@item.Value</td>
<td>@item.Domain</td>
<td>@item.Port</td>
<td>@item.Path</td>
<td>@item.ExpiresAt (@item.Expires)</td>
<td>@item.HttpOnly</td>
<td>@item.Secure</td>
</tr>
}
</table>
<button class="btn btn-primary mt-2" @onclick="@(RemoveCustomCookieAndRefresh)">Remove custom Cookie from Store</button>
}
<label><strong>Add custom Cookie to Store</strong></label>
<br />
Value:
<input class="form-control" @bind-value="_cookie.Value" type="text" />
<button class="btn btn-primary mt-2" @onclick="@(async () => await SaveCustomCookieAndRefresh(_cookie != null ? _cookie.Value : ""))">Save custom Cookie to Store</button>
@inject ICookieStoreService _cookieStoreService
@code {
protected override async Task OnInitializedAsync()
{
_cookie = (await _cookieStoreService.GetAsync("CustomCookie")) ?? new Cookie();
_allCookies = await _cookieStoreService.GetAllAsync();
}
//CookieStore
Cookie _cookie = new Cookie();
IEnumerable<Cookie> _allCookies;
private async Task SaveCustomCookieAndRefresh(string value)
{
await _cookieStoreService.SetAsync(new Cookie()
{
Name = "CustomCookie",
Value = value,
//Path = "/",
//Domain = "localhost",
//Secure = true,
//Expires = Cookie.ConvertToUnixDate(DateTime.Now.AddDays(1))
});
_cookie = await _cookieStoreService.GetAsync("CustomCookie");
_allCookies = await _cookieStoreService.GetAllAsync();
}
private async Task RemoveCustomCookieAndRefresh()
{
await _cookieStoreService.DeleteAsync("CustomCookie");
_cookie = new Cookie();
_allCookies = await _cookieStoreService.GetAllAsync();
}
}
```
4 changes: 2 additions & 2 deletions .github/docs/Collapse.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ You can try it out by using the [demo app](https://blazorextensions.z6.web.core.
Blazor component that renders `CollapsePanel` component which is an **Expandable and Collapsible panel** with customizable header and content.
Multiple components can be added to a Balzor component each will act and work independently.

![CollapsePanel demo](https://github.com/majorimi/blazor-components/raw/master/.github/docs/gifs/collapse.gif)
![CollapsePanel demo](https://github.com/majorimi/blazor-components-docs/raw/main/github/docs/gifs/collapse.gif)

### Properties
- **`CommonHeader`: `RenderFragment` HTML content - Required or see specific headers** <br />
Expand Down Expand Up @@ -62,7 +62,7 @@ Blazor component that renders a **set of `CollapsePanel` components**. It is onl
Each `CollapsePanel` act as individual components so they should be configured directly (use variables to change parameter for all at once).
**`Accordion` allows only one Expanded (active)** panel.

![Accordion button demo](https://github.com/majorimi/blazor-components/raw/master/.github/docs/gifs/accordion.gif)
![Accordion button demo](https://github.com/majorimi/blazor-components-docs/raw/main/github/docs/gifs/accordion.gif)

### Properties
- **`CollapsePanels`: `RenderFragment` HTML content - Required**
Expand Down
10 changes: 5 additions & 5 deletions .github/docs/CssEvents.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Blazor CSS Animation and Transition components and extensions

# About

Blazor Extensions and Components wrapper to notify on CSS **Transition** and **Animation** events.
Blazor injectable Services and wrapper Components to notify on CSS **Transition** and **Animation** events.
This is useful when you want to wait for a CSS **Transition** or **Animation** to finish and then continue run C# code, e.g.: hide the element, etc.
**All components work with WebAssembly and Server hosted models**.
For code examples [see usage](https://github.com/majorimi/blazor-components/blob/master/src/Majorsoft.Blazor.Components.TestApps.Common/Components/CssEvents.razor).
Expand All @@ -22,7 +22,7 @@ You can try it out by using the [demo app](https://blazorextensions.z6.web.core.
- **`ITransitionEventsService`**: Low level injectable service which has more features e.g. can aggregate multiple events from multiple HTML elements but must be Disposed manually.

## CSS Animation events (See [demo app](https://blazorextensions.z6.web.core.windows.net/cssevents#animation))
Blazor Extension and Component wrapper to notify Blazor apps on CSS supported Animation events: `animationstart`, `animationiteration`, `animationend`.
Blazor injectable Services and wrapper Components to notify Blazor apps on CSS supported Animation events: `animationstart`, `animationiteration`, `animationend`.
This is useful when you want to wait for a CSS Animations to finish/restart, etc. and then continue run C# code, e.g.: hide the element, etc.

### `AnimationElement` component
Expand Down Expand Up @@ -53,7 +53,7 @@ Callback function called when component corresponding element animation with giv
- **`DisposeAsync()`: `Task DisposeAsync()`** <br />
Component implements `IAsyncDisposable` interface **your component also should implement it and call `ITransitionEventsService` instance DisposeAsync**.

### `IAnimationEventsService` extension
### `IAnimationEventsService` service
Low level injectable service which has more features e.g. can aggregate multiple events from multiple HTML elements but must be DisposeAsync() manually.
In case of registering a top level element which has nested content with transitions. One element can be registered multiple times with different transition property names.
All events will bubble up to `TransitionElement` component and event callback will be called on each element's transition event.
Expand Down Expand Up @@ -104,7 +104,7 @@ public sealed class AnimationEventArgs : EventArgs
```

## CSS Transition events (See [demo app](https://blazorextensions.z6.web.core.windows.net/cssevents#transition))
Blazor Extension and Component wrapper to notify Blazor apps on CSS supported Transition event: `transitionend`.
Blazor injectable Services and wrapper Components to notify Blazor apps on CSS supported Transition event: `transitionend`.
This is useful when you want to wait for a CSS Transition to finish and then continue run C# code, e.g.: hide the element, etc.

### `TransitionElement` component
Expand All @@ -129,7 +129,7 @@ Callback function called when component corresponding element transition with gi
- **`DisposeAsync()`: `async Task DisposeAsync()`** <br />
Component implements `IAsyncDisposable` interface Blazor framework will call it when parent removed from render tree.

### `ITransitionEventsService` extension
### `ITransitionEventsService` service
Low level injectable service which has more features e.g. can aggregate multiple events from multiple HTML elements but must be DisposeAsync() manually.
In case of registering a top level element which has nested content with transitions. One element can be registered multiple times with different transition property names.
All events will bubble up to `TransitionElement` component and event callback will be called on each element's transition event.
Expand Down
2 changes: 1 addition & 1 deletion .github/docs/DebounceInputs.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ For code examples [see usage](https://github.com/majorimi/blazor-components/blob

You can try it out by using the [demo app](https://blazorextensions.z6.web.core.windows.net/debounceinput).

![Debounce demo](https://github.com/majorimi/blazor-components/raw/master/.github/docs/gifs/debounce.gif)
![Debounce demo](https://github.com/majorimi/blazor-components-docs/raw/main/github/docs/gifs/debounce.gif)

# Components

Expand Down
Loading

0 comments on commit 376fa44

Please sign in to comment.