From bcc72f292ab85370685ac8b5723b02129de8dc9b Mon Sep 17 00:00:00 2001 From: skclusive Date: Tue, 14 Jan 2020 17:14:30 +0530 Subject: [PATCH] Tabs and Theme --- AppBar/src/AppBar/AppBarStyle.razor | 54 ++-- Button/src/Button/ButtonStyle.razor | 7 +- Button/src/ButtonStyles/ButtonStyles.razor | 4 +- Button/src/IconButton/IconButtonStyle.razor | 2 +- Core/src/Core.csproj | 8 +- .../DialogContent/DialogContentStyle.razor | 4 +- Drawer/src/Drawer/DrawerStyle.razor | 8 +- Icon/src/SvgIcon/SvgIconStyle.razor | 10 +- Input/src/InputAdornment/InputAdornment.cs | 4 +- Input/src/InputBase/InputBase.cs | 1 - Material/src/Material.csproj | 1 + Material/src/MaterialExtension.cs | 3 +- Material/src/MaterialStyles.razor | 5 +- Material/src/MaterialThemeDetector.razor | 39 +++ Material/src/MaterialThemeStyle.razor | 13 + Material/src/_Imports.razor | 1 + Menu/src/MenuItem/MenuItem.razor | 2 +- Menu/src/MenuItem/MenuItemStyle.razor | 24 +- .../DetectThemeHelper/DetectThemeHelper.cs | 54 ++++ .../DetectThemeHelper/DetectThemeHelper.js | 64 ++++ .../MediaQueryMatcher/MediaQueryMatcher.cs | 1 - Script/src/ScriptHelpers/ScriptHelpers.js | 5 +- .../ScriptHelpers/ScriptHelpersExtension.cs | 2 + .../src/ScriptHelpers/ScriptHelpersScript.cs | 2 +- Script/src/wwwroot/ScriptHelpers.js | 2 +- .../src/Checkbox/Icon/CheckBoxIcon.razor | 6 +- .../Icon/CheckBoxOutlineBlankIcon.razor | 6 +- .../Icon/IndeterminateCheckBoxIcon.razor | 6 +- Skclusive.Material.Component.sln | 47 +++ Tab/src/Tab.csproj | 25 ++ Tab/src/Tab/Tab.cs | 116 ++++++++ Tab/src/Tab/Tab.razor | 26 ++ Tab/src/Tab/TabStyle.razor | 105 +++++++ Tab/src/TabIndicator/TabIndicator.cs | 40 +++ Tab/src/TabIndicator/TabIndicator.razor | 11 + Tab/src/TabIndicator/TabIndicatorStyle.razor | 28 ++ .../Icon/KeyboardArrowLeft.razor | 8 + .../Icon/KeyboardArrowRight.razor | 8 + Tab/src/TabScrollButton/TabScrollButton.cs | 41 +++ Tab/src/TabScrollButton/TabScrollButton.razor | 17 ++ .../TabScrollButtonStyle.razor | 20 ++ Tab/src/TabStyles/TabStyles.razor | 7 + Tab/src/Tabs/ITabsContext.cs | 108 +++++++ Tab/src/Tabs/Tabs.cs | 212 ++++++++++++++ Tab/src/Tabs/Tabs.razor | 26 ++ Tab/src/Tabs/TabsStyle.razor | 56 ++++ Tab/src/_Imports.razor | 5 + Theme/src/Theme/ThemeCommonStyle.razor | 183 ++++++++++++ Theme/src/Theme/ThemeDarkStyle.razor | 62 ++++ Theme/src/Theme/ThemeLightStyle.razor | 276 ++++-------------- Theme/src/Theme/ThemeStyles.razor | 6 + Transition/src/Transition.csproj | 10 +- 52 files changed, 1477 insertions(+), 304 deletions(-) create mode 100644 Material/src/MaterialThemeDetector.razor create mode 100644 Material/src/MaterialThemeStyle.razor create mode 100644 Script/src/DetectThemeHelper/DetectThemeHelper.cs create mode 100644 Script/src/DetectThemeHelper/DetectThemeHelper.js create mode 100644 Tab/src/Tab.csproj create mode 100644 Tab/src/Tab/Tab.cs create mode 100644 Tab/src/Tab/Tab.razor create mode 100644 Tab/src/Tab/TabStyle.razor create mode 100644 Tab/src/TabIndicator/TabIndicator.cs create mode 100644 Tab/src/TabIndicator/TabIndicator.razor create mode 100644 Tab/src/TabIndicator/TabIndicatorStyle.razor create mode 100644 Tab/src/TabScrollButton/Icon/KeyboardArrowLeft.razor create mode 100644 Tab/src/TabScrollButton/Icon/KeyboardArrowRight.razor create mode 100644 Tab/src/TabScrollButton/TabScrollButton.cs create mode 100644 Tab/src/TabScrollButton/TabScrollButton.razor create mode 100644 Tab/src/TabScrollButton/TabScrollButtonStyle.razor create mode 100644 Tab/src/TabStyles/TabStyles.razor create mode 100644 Tab/src/Tabs/ITabsContext.cs create mode 100644 Tab/src/Tabs/Tabs.cs create mode 100644 Tab/src/Tabs/Tabs.razor create mode 100644 Tab/src/Tabs/TabsStyle.razor create mode 100644 Tab/src/_Imports.razor create mode 100644 Theme/src/Theme/ThemeCommonStyle.razor create mode 100644 Theme/src/Theme/ThemeDarkStyle.razor create mode 100644 Theme/src/Theme/ThemeStyles.razor diff --git a/AppBar/src/AppBar/AppBarStyle.razor b/AppBar/src/AppBar/AppBarStyle.razor index 4f9d62e..dc38815 100644 --- a/AppBar/src/AppBar/AppBarStyle.razor +++ b/AppBar/src/AppBar/AppBarStyle.razor @@ -4,57 +4,57 @@ \ No newline at end of file diff --git a/Button/src/Button/ButtonStyle.razor b/Button/src/Button/ButtonStyle.razor index 151557d..21a8701 100644 --- a/Button/src/Button/ButtonStyle.razor +++ b/Button/src/Button/ButtonStyle.razor @@ -35,10 +35,7 @@ } .Button-Root.Button-Disabled { - color: var( - --theme-palette-action-disabled, - var(--theme-palette-action-disabled, rgba(0, 0, 0, 0.26)) - ); + color: var(--theme-palette-action-disabled, rgba(0, 0, 0, 0.26)); } @media (hover: none) { @@ -150,7 +147,7 @@ } .Button-Contained { - color: var(--theme-palette-text-primary, rgba(0, 0, 0, 0.87)); + color: var(--theme-palette-grey300-contrast-text, rgba(0, 0, 0, 0.87)); box-shadow: var( --theme-shadow2, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), diff --git a/Button/src/ButtonStyles/ButtonStyles.razor b/Button/src/ButtonStyles/ButtonStyles.razor index 974cb42..50a22a8 100644 --- a/Button/src/ButtonStyles/ButtonStyles.razor +++ b/Button/src/ButtonStyles/ButtonStyles.razor @@ -2,8 +2,8 @@ @inherits StaticComponentBase + - - \ No newline at end of file + \ No newline at end of file diff --git a/Button/src/IconButton/IconButtonStyle.razor b/Button/src/IconButton/IconButtonStyle.razor index f14745d..c59643b 100644 --- a/Button/src/IconButton/IconButtonStyle.razor +++ b/Button/src/IconButton/IconButtonStyle.razor @@ -5,7 +5,7 @@ .IconButton-Root { flex: 0 0 auto; - color: rgba(0, 0, 0, 0.54); + color: var(--theme-palette-action-active, rgba(0, 0, 0, 0.54)); padding: 12px; overflow: visible; font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 1.5rem); diff --git a/Core/src/Core.csproj b/Core/src/Core.csproj index 8cff9f6..c4da1ce 100644 --- a/Core/src/Core.csproj +++ b/Core/src/Core.csproj @@ -16,14 +16,14 @@ https://github.com/skclusive/Skclusive.Material.Component - + - + diff --git a/Dialog/src/DialogContent/DialogContentStyle.razor b/Dialog/src/DialogContent/DialogContentStyle.razor index 12caa5e..e3ca331 100644 --- a/Dialog/src/DialogContent/DialogContentStyle.razor +++ b/Dialog/src/DialogContent/DialogContentStyle.razor @@ -16,8 +16,8 @@ .DialogContent-Dividers { padding: 16px 24px; - border-top: 1px solid rgba(255, 255, 255, 0.12); - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid var(--theme-palette-divider, rgba(0, 0, 0, 0.12)); + border-bottom: 1px solid var(--theme-palette-divider, rgba(0, 0, 0, 0.12)); } \ No newline at end of file diff --git a/Drawer/src/Drawer/DrawerStyle.razor b/Drawer/src/Drawer/DrawerStyle.razor index 29473dc..f0e6a5c 100644 --- a/Drawer/src/Drawer/DrawerStyle.razor +++ b/Drawer/src/Drawer/DrawerStyle.razor @@ -49,19 +49,19 @@ } .Drawer-Paper-Anchor-Docked-Left { - border-right: 1px solid rgba(255, 255, 255, 0.12); + border-right: 1px solid var(--theme-palette-divider, rgba(0, 0, 0, 0.12)); } .Drawer-Paper-Anchor-Docked-Top { - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid var(--theme-palette-divider, rgba(0, 0, 0, 0.12)); } .Drawer-Paper-Anchor-Docked-Right { - border-left: 1px solid rgba(255, 255, 255, 0.12); + border-left: 1px solid var(--theme-palette-divider, rgba(0, 0, 0, 0.12)); } .Drawer-Paper-Anchor-Docked-Bottom { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid var(--theme-palette-divider, rgba(0, 0, 0, 0.12)); } \ No newline at end of file diff --git a/Icon/src/SvgIcon/SvgIconStyle.razor b/Icon/src/SvgIcon/SvgIconStyle.razor index 5fca46d..d4f70e8 100644 --- a/Icon/src/SvgIcon/SvgIconStyle.razor +++ b/Icon/src/SvgIcon/SvgIconStyle.razor @@ -15,23 +15,23 @@ } .SvgIcon-Color-Primary { - color: #2196f3; + color: var(--theme-palette-primary-main, #1976d2); } .SvgIcon-Color-Secondary { - color: rgb(225, 0, 80); + color: var(--theme-palette-secondary-main, rgb(220, 0, 78)); } .SvgIcon-Color-Action { - color: rgba(0, 0, 0, 0.54); + color: var(--theme-palette-action-active, rgba(0, 0, 0, 0.54)); } .SvgIcon-Color-Disabled { - color: rgba(0, 0, 0, 0.26); + color: var(--theme-palette-action-disabled, rgba(0, 0, 0, 0.26)); } .SvgIcon-Color-Error { - color: #f44336; + color: var(--theme-palette-error-main, #f44336); } \ No newline at end of file diff --git a/Input/src/InputAdornment/InputAdornment.cs b/Input/src/InputAdornment/InputAdornment.cs index f904228..98537d9 100644 --- a/Input/src/InputAdornment/InputAdornment.cs +++ b/Input/src/InputAdornment/InputAdornment.cs @@ -15,7 +15,7 @@ public InputAdornmentComponent() : base("InputAdornment") public string Component { set; get; } = "div"; [Parameter] - public Position Position { set; get; } = Position.Start; + public InputPosition Position { set; get; } = InputPosition.Start; [Parameter] public bool DisablePointerEvents { set; get; } @@ -63,7 +63,7 @@ protected override IEnumerable Classes } } - public enum Position + public enum InputPosition { Start, diff --git a/Input/src/InputBase/InputBase.cs b/Input/src/InputBase/InputBase.cs index 0655314..3881e46 100644 --- a/Input/src/InputBase/InputBase.cs +++ b/Input/src/InputBase/InputBase.cs @@ -2,7 +2,6 @@ using System.Collections.Generic; using System.Threading.Tasks; using Skclusive.Material.Form; -using Skclusive.Material.Core; using Skclusive.Core.Component; namespace Skclusive.Material.Input diff --git a/Material/src/Material.csproj b/Material/src/Material.csproj index 9d38e21..5c01e88 100644 --- a/Material/src/Material.csproj +++ b/Material/src/Material.csproj @@ -53,6 +53,7 @@ + diff --git a/Material/src/MaterialExtension.cs b/Material/src/MaterialExtension.cs index 09853cd..78ee5aa 100644 --- a/Material/src/MaterialExtension.cs +++ b/Material/src/MaterialExtension.cs @@ -1,5 +1,4 @@ -using Microsoft.AspNetCore.Components.Builder; -using Microsoft.Extensions.DependencyInjection; +using Microsoft.Extensions.DependencyInjection; using Skclusive.Material.Script; using Skclusive.Script.DomHelpers; diff --git a/Material/src/MaterialStyles.razor b/Material/src/MaterialStyles.razor index 9bb0ad1..7c4951c 100644 --- a/Material/src/MaterialStyles.razor +++ b/Material/src/MaterialStyles.razor @@ -1,4 +1,4 @@ - + @@ -22,4 +22,5 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/Material/src/MaterialThemeDetector.razor b/Material/src/MaterialThemeDetector.razor new file mode 100644 index 0000000..74797c0 --- /dev/null +++ b/Material/src/MaterialThemeDetector.razor @@ -0,0 +1,39 @@ +@implements IDisposable +@inject DetectThemeHelper DetectThemeHelper + + + +@code +{ + private Theme Theme { set; get; } = Theme.Light; + + private IDisposable TimeoutDisposal { set; get; } + + protected override Task OnInitializedAsync() + { + DetectThemeHelper.OnChange += OnThemeChanged; + + TimeoutDisposal = ExecutionPlan.Delay(500, () => { + _ = DetectThemeHelper.RegisterAsync(); + }); + + return Task.CompletedTask; + } + + protected void OnThemeChanged(object sender, Theme theme) + { + Theme = theme; + + StateHasChanged(); + } + + public void Dispose() + { + TimeoutDisposal?.Dispose(); + + DetectThemeHelper.OnChange -= OnThemeChanged; + + _ = DetectThemeHelper.UnRegisterAsync(); + } +} \ No newline at end of file diff --git a/Material/src/MaterialThemeStyle.razor b/Material/src/MaterialThemeStyle.razor new file mode 100644 index 0000000..1823b83 --- /dev/null +++ b/Material/src/MaterialThemeStyle.razor @@ -0,0 +1,13 @@ +@if (Theme == Theme.Dark) +{ + +} else +{ + +} + +@code +{ + [Parameter] + public Theme Theme { set; get; } = Theme.Light; +} \ No newline at end of file diff --git a/Material/src/_Imports.razor b/Material/src/_Imports.razor index 86aaf31..c3d4694 100644 --- a/Material/src/_Imports.razor +++ b/Material/src/_Imports.razor @@ -37,5 +37,6 @@ @using Skclusive.Material.Dialog @using Skclusive.Material.Popover @using Skclusive.Material.Menu +@using Skclusive.Material.Tab @using Skclusive.Script.DomHelpers \ No newline at end of file diff --git a/Menu/src/MenuItem/MenuItem.razor b/Menu/src/MenuItem/MenuItem.razor index eadd4ee..deb3f6b 100644 --- a/Menu/src/MenuItem/MenuItem.razor +++ b/Menu/src/MenuItem/MenuItem.razor @@ -16,5 +16,5 @@ OnClick="@HandleClickAsync" OnKeyDown="@HandleKeyDownAsync" @attributes="Attributes"> - @Index @_TabIndex @_AutoFocus @MenuContext.ActiveIndex @ChildContent + @ChildContent diff --git a/Menu/src/MenuItem/MenuItemStyle.razor b/Menu/src/MenuItem/MenuItemStyle.razor index 64723df..c4c47ee 100644 --- a/Menu/src/MenuItem/MenuItemStyle.razor +++ b/Menu/src/MenuItem/MenuItemStyle.razor @@ -6,16 +6,22 @@ .MenuItem-Root { width: auto; overflow: hidden; - font-size: 1rem; box-sizing: border-box; min-height: 48px; - font-family: "Roboto", "Helvetica", "Arial", sans-serif; - font-weight: 400; line-height: 1.5; padding-top: 6px; white-space: nowrap; - letter-spacing: 0.00938em; padding-bottom: 6px; + font-size: var(--theme-typography-body1-font-size, 1rem); + font-family: var( + --theme-typography-body1-font-family, + "Roboto", + "Helvetica", + "Arial", + sans-serif + ); + font-weight: var(--theme-typography-body1-font-weight, 400); + letter-spacing: var(--theme-typography-body1-letter-spacing, 0.00938em); } @media (min-width:600px) { @@ -25,12 +31,12 @@ } .MenuItem-Dense { - font-size: 0.875rem; min-height: auto; - font-family: "Roboto", "Helvetica", "Arial", sans-serif; - font-weight: 400; - line-height: 1.43; - letter-spacing: 0.01071em; + font-size: var(--theme-typography-body2-font-size, 0.875rem); + font-family: var(--theme-typography-body2-font-family, "Roboto", "Helvetica", "Arial", sans-serif); + font-weight: var(--theme-typography-body2-font-weight, 400); + line-height: var(--theme-typography-body2-line-height, 1.43); + letter-spacing: var(--theme-typography-body2-letter-spacing, 0.01071em); } .MenuItem-Selected { diff --git a/Script/src/DetectThemeHelper/DetectThemeHelper.cs b/Script/src/DetectThemeHelper/DetectThemeHelper.cs new file mode 100644 index 0000000..54b3ad3 --- /dev/null +++ b/Script/src/DetectThemeHelper/DetectThemeHelper.cs @@ -0,0 +1,54 @@ +using System; +using System.Collections.Generic; +using System.Threading.Tasks; +using Microsoft.JSInterop; +using Skclusive.Core.Component; + +namespace Skclusive.Material.Script +{ + public class DetectThemeHelper + { + public DetectThemeHelper(IJSRuntime jsruntime) + { + JSRuntime = jsruntime; + } + + private object Id; + + private IJSRuntime JSRuntime { get; } + + public event EventHandler OnChange; + + private static IDictionary THEME_MAPPING = new Dictionary + { + { "Dark", Theme.Dark }, + { "Light", Theme.Light }, + { "None", Theme.None } + }; + + private readonly static EventArgs EVENT_ARGS = new EventArgs(); + + [JSInvokable] + public Task OnChangeAsync(string theme) + { + OnChange?.Invoke(EVENT_ARGS, THEME_MAPPING[theme]); + + return Task.CompletedTask; + } + + public async Task RegisterAsync() + { + Id = await JSRuntime.InvokeAsync("Skclusive.Material.Script.registerDetectTheme", DotNetObjectReference.Create(this)); + } + + public async Task UnRegisterAsync() + { + Id = await JSRuntime.InvokeAsync("Skclusive.Material.Script.unRegisterDetectTheme", Id); + } + + public void Dispose() + { + _ = UnRegisterAsync(); + } + } +} \ No newline at end of file diff --git a/Script/src/DetectThemeHelper/DetectThemeHelper.js b/Script/src/DetectThemeHelper/DetectThemeHelper.js new file mode 100644 index 0000000..88025b4 --- /dev/null +++ b/Script/src/DetectThemeHelper/DetectThemeHelper.js @@ -0,0 +1,64 @@ +// @ts-check + +import { generateId } from "../DomHelpers/DomHelpers"; + +const eventPool = {}; + +const colorSchemes = { + Dark: "(prefers-color-scheme: dark)", + Light: "(prefers-color-scheme: light)", + None: "(prefers-color-scheme: no-preference)" +}; + +export function registerDetectTheme(target) { + const id = generateId(); + + const listener = eventCallback(id); + + const activeMatches = []; + Object.keys(colorSchemes).forEach(schemeName => { + const mq = window.matchMedia(colorSchemes[schemeName]); + mq.addListener(listener); + activeMatches.push(mq); + setTimeout(() => listener(mq)); + }); + + const dispose = () => { + activeMatches.forEach(mq => mq.removeListener(listener)); + activeMatches.length = 0; + }; + + eventPool[id] = { id, target, dispose }; + + return id; +} + +function eventCallback(id) { + return e => { + if (!e || !e.matches) { + return; + } + const record = eventPool[id]; + if (record && record.target) { + const schemeNames = Object.keys(colorSchemes); + for (let i = 0; i < schemeNames.length; i++) { + const schemeName = schemeNames[i]; + if (e.media === colorSchemes[schemeName]) { + record.target.invokeMethodAsync( + "OnChangeAsync", + schemeName + ); + break; + } + } + } + }; +} + +export function unRegisterDetectTheme(id) { + const record = eventPool[id]; + if (record && record.dispose) { + record.dispose(); + } + delete eventPool[id]; +} diff --git a/Script/src/MediaQueryMatcher/MediaQueryMatcher.cs b/Script/src/MediaQueryMatcher/MediaQueryMatcher.cs index de8313a..2a747bf 100644 --- a/Script/src/MediaQueryMatcher/MediaQueryMatcher.cs +++ b/Script/src/MediaQueryMatcher/MediaQueryMatcher.cs @@ -1,6 +1,5 @@ using System; using System.Threading.Tasks; -using Microsoft.AspNetCore.Components; using Microsoft.JSInterop; namespace Skclusive.Material.Script diff --git a/Script/src/ScriptHelpers/ScriptHelpers.js b/Script/src/ScriptHelpers/ScriptHelpers.js index 05f2ed5..4917d16 100644 --- a/Script/src/ScriptHelpers/ScriptHelpers.js +++ b/Script/src/ScriptHelpers/ScriptHelpers.js @@ -8,6 +8,7 @@ import { initTrapFocus, disposeTrapFocus } from "../TrapFocusHelper/TrapFocusHel import { registerMediaQuery, unRegisterMediaQuery } from "../MediaQueryMatcher/MediaQueryMatcher"; import { getAnchorBoundry, getContentAnchorOffset } from "../PopoverHelper/PopoverHelper"; import { registerMenuList, unRegisterMenuList } from "../MenuListHelper/MenuListHelper"; +import { registerDetectTheme, unRegisterDetectTheme } from "../DetectThemeHelper/DetectThemeHelper"; // @ts-ignore window.Skclusive = { @@ -31,7 +32,9 @@ window.Skclusive = { getAnchorBoundry, getContentAnchorOffset, registerMenuList, - unRegisterMenuList + unRegisterMenuList, + registerDetectTheme, + unRegisterDetectTheme } } }; diff --git a/Script/src/ScriptHelpers/ScriptHelpersExtension.cs b/Script/src/ScriptHelpers/ScriptHelpersExtension.cs index 04d993f..1e154bc 100644 --- a/Script/src/ScriptHelpers/ScriptHelpersExtension.cs +++ b/Script/src/ScriptHelpers/ScriptHelpersExtension.cs @@ -14,6 +14,8 @@ public static void AddScriptHelpers(this IServiceCollection services) services.AddTransient(); + services.AddTransient(); + services.AddTransient(); services.AddTransient(); diff --git a/Script/src/ScriptHelpers/ScriptHelpersScript.cs b/Script/src/ScriptHelpers/ScriptHelpersScript.cs index bed3ddf..228edbb 100644 --- a/Script/src/ScriptHelpers/ScriptHelpersScript.cs +++ b/Script/src/ScriptHelpers/ScriptHelpersScript.cs @@ -7,7 +7,7 @@ public class ScriptHelpersScript : ScriptComponentBase protected override string GetScript() { return - @"!function(){""use strict"";function e(e,...t){const{DomHelpers:n}=window.Skclusive.Script;return n[e].apply(null,t)}function t(...t){return e(""generateId"",...t)}function n(...t){return e(""ownerDocument"",...t)}const i={};function r(e,t){if(!t)return;const n=t.getBoundingClientRect();let i;if(t.fakeTransform)i=t.fakeTransform;else{const e=window.getComputedStyle(t);i=e.getPropertyValue(""-webkit-transform"")||e.getPropertyValue(""transform"")}let r=0,s=0;if(i&&""none""!==i&&""string""==typeof i){const e=i.split(""("")[1].split("")"")[0].split("","");r=parseInt(e[4],10),s=parseInt(e[5],10)}return""left""===e||""start""===e?`translateX(${window.innerWidth}px) translateX(-${n.left-r}px)`:""right""===e||""end""===e?`translateX(-${n.left+n.width-r}px)`:""up""===e||""top""===e?`translateY(${window.innerHeight}px) translateY(-${n.top-s}px)`:`translateY(-${n.top+n.height-s}px)`}const s={};const o={};const u={};const a={};function c(e,t,n){return e===t?e.firstElementChild:t&&t.nextElementSibling?t.nextElementSibling:n?null:e.firstElementChild}function l(e,t,n){return e===t?n?e.firstElementChild:e.lastElementChild:t&&t.previousElementSibling?t.previousElementSibling:n?null:e.lastElementChild}function d(e,t){if(void 0===t)return!0;let n=e.innerText;return void 0===n&&(n=e.textContent),void 0!==n&&(n=n.trim().toLowerCase(),0!==n.length&&(t.repeating?n[0]===t.keys[0]:0===n.indexOf(t.keys.join(""""))))}function f(t,n){const i=a[t],{list:r,lastFocused:s=r.querySelector("".ListItem-FocusVisible"")}=i;n.focus(),function(...t){e(""addClasses"",...t)}(n,[""ListItem-FocusVisible""]),s&&function(...t){e(""removeClasses"",...t)}(s,[""ListItem-FocusVisible""]),i.lastFocused=n}function p(e,t,n,i,r,s){let o=!1,u=r(t,n,!!n&&i);for(;u;){if(u===t.firstElementChild){if(o)return!1;o=!0}if(u.hasAttribute(""tabindex"")&&!u.disabled&&""true""!==u.getAttribute(""aria-disabled"")&&d(u,s))return f(e,u),!0;u=r(t,u,i)}return!1}window.Skclusive={...window.Skclusive,Material:{...(window.Skclusive||{}).Material,Script:{goBack:function(...t){return e(""goBack"",...t)},getSlideTranslateValue:r,setSlideTranslateValue:function(t,n){if(!n)return;const i=r(t,n);i&&(n.style.webkitTransform=i,n.style.transform=i),function(...t){e(""repaint"",...t)}(n)},registerEvent:function(n,i,r,o){const u=t(),a=n instanceof Element?n:window;let c=function(e){return t=>{const n=s[e];n&&n.target&&n.target.invokeMethodAsync(""OnEventAsync"",JSON.stringify(t))}}(u);return o&&(c=function(...t){return e(""debounce"",...t)}(c,o)),a.addEventListener(i,c),s[u]={id:u,source:a,target:r,dispose:()=>a.removeEventListener(i,c)},u},unRegisterEvent:function(e){const t=s[e];t&&t.dispose&&t.dispose(),delete s[e]},initTrapFocus:function(e,i,r,s,u){const a=t(),c=document.activeElement,l=n(e);let d=!1;i||!e||e.contains(l.activeElement)||(e.hasAttribute(""tabIndex"")||e.setAttribute(""tabIndex"",-1),e.focus());const f=()=>{s||!u||d?d=!1:e&&!e.contains(l.activeElement)&&e.focus()},p=e=>{!s&&u&&9===e.keyCode&&l.activeElement===rootRef.current&&(d=!0,e.shiftKey?sentinelEnd.current.focus():sentinelStart.current.focus())};l.addEventListener(""focus"",f,!0),l.addEventListener(""keydown"",p,!0);const g=setInterval(()=>{f()},50);return o[a]={id:a,dispose:()=>{clearInterval(g),l.removeEventListener(""focus"",f,!0),l.removeEventListener(""keydown"",p,!0),!r&&c&&c.focus()}},a},disposeTrapFocus:function(e){const t=o[e];t&&t.dispose&&t.dispose(),delete o[e]},registerMediaQuery:function(e,n){const i=t();e=e.replace(/^@media( ?)/m,"""");const r=window.matchMedia(e),s=function(e){return t=>{const n=u[e];n&&n.target&&n.target.invokeMethodAsync(""OnChangeAsync"",!!n.queryList.matches)}}(i);return r.addListener(s),u[i]={id:i,queryList:r,target:n,dispose:()=>r.removeListener(s)},setTimeout(s),i},unRegisterMediaQuery:function(e){const t=u[e];t&&t.dispose&&t.dispose(),delete u[e]},registerHistoryBack:function(e,n,r){const s=t();let o=function(e){return t=>{t.preventDefault(),t.stopPropagation(),t.currentTarget.blur();const n=i[e];n&&(n.delay?setTimeout(()=>history.back(),n.delay):history.back())}}(s);return e.addEventListener(n,o),i[s]={id:s,delay:r,dispose:()=>e.removeEventListener(n,o)},s},unRegisterHistoryBack:function(e){const t=i[e];t&&t.dispose&&t.dispose(),delete i[e]},getAnchorBoundry:function(t,i){return(t instanceof function(...t){return e(""ownerWindow"",...t)}(t).Element?t:n(i).body).getBoundingClientRect()},getContentAnchorOffset:function(t,n){let i=0;if(t&&n.contains(t)){const r=function(...t){return e(""getScrollParent"",...t)}(n,t);i=t.offsetTop+t.clientHeight/2-r||0}return i},registerMenuList:function(e,i){const r=t(),s=function(e){return function(t){const i=a[e],{list:r,disableListWrap:s,textCriteria:o}=i,u=t.key,f=n(r).activeElement;if(""ArrowDown""===u)t.preventDefault(),p(e,r,f,s,c);else if(""ArrowUp""===u)t.preventDefault(),p(e,r,f,s,l);else if(""Home""===u)t.preventDefault(),p(e,r,null,s,c);else if(""End""===u)t.preventDefault(),p(e,r,null,s,l);else if(1===u.length){const n=o,i=u.toLowerCase(),s=performance.now();n.keys.length>0&&(s-n.lastTime>500?(n.keys=[],n.repeating=!0,n.previousKeyMatched=!0):n.repeating&&i!==n.keys[0]&&(n.repeating=!1)),n.lastTime=s,n.keys.push(i);const a=f&&!n.repeating&&d(f,n);n.previousKeyMatched&&(a||p(e,r,f,!1,c,n))?t.preventDefault():n.previousKeyMatched=!1}}}(r);return e.addEventListener(""keydown"",s),a[r]={id:r,list:e,disableListWrap:i,textCriteria:{keys:[],repeating:!0,previousKeyMatched:!0,lastTime:null},dispose:()=>e.addEventListener(""keydown"",s)},r},unRegisterMenuList:function(e){const t=a[e];t&&t.dispose&&t.dispose(),delete a[e]}}}}}();"; + @"!function(){""use strict"";function e(e,...t){const{DomHelpers:n}=window.Skclusive.Script;return n[e].apply(null,t)}function t(...t){return e(""generateId"",...t)}function n(...t){return e(""ownerDocument"",...t)}const i={};function r(e,t){if(!t)return;const n=t.getBoundingClientRect();let i;if(t.fakeTransform)i=t.fakeTransform;else{const e=window.getComputedStyle(t);i=e.getPropertyValue(""-webkit-transform"")||e.getPropertyValue(""transform"")}let r=0,s=0;if(i&&""none""!==i&&""string""==typeof i){const e=i.split(""("")[1].split("")"")[0].split("","");r=parseInt(e[4],10),s=parseInt(e[5],10)}return""left""===e||""start""===e?`translateX(${window.innerWidth}px) translateX(-${n.left-r}px)`:""right""===e||""end""===e?`translateX(-${n.left+n.width-r}px)`:""up""===e||""top""===e?`translateY(${window.innerHeight}px) translateY(-${n.top-s}px)`:`translateY(-${n.top+n.height-s}px)`}const s={};const o={};const c={};const u={};function a(e,t,n){return e===t?e.firstElementChild:t&&t.nextElementSibling?t.nextElementSibling:n?null:e.firstElementChild}function l(e,t,n){return e===t?n?e.firstElementChild:e.lastElementChild:t&&t.previousElementSibling?t.previousElementSibling:n?null:e.lastElementChild}function d(e,t){if(void 0===t)return!0;let n=e.innerText;return void 0===n&&(n=e.textContent),void 0!==n&&(n=n.trim().toLowerCase(),0!==n.length&&(t.repeating?n[0]===t.keys[0]:0===n.indexOf(t.keys.join(""""))))}function f(t,n){const i=u[t],{list:r,lastFocused:s=r.querySelector("".ListItem-FocusVisible"")}=i;n.focus(),function(...t){e(""addClasses"",...t)}(n,[""ListItem-FocusVisible""]),s&&function(...t){e(""removeClasses"",...t)}(s,[""ListItem-FocusVisible""]),i.lastFocused=n}function p(e,t,n,i,r,s){let o=!1,c=r(t,n,!!n&&i);for(;c;){if(c===t.firstElementChild){if(o)return!1;o=!0}if(c.hasAttribute(""tabindex"")&&!c.disabled&&""true""!==c.getAttribute(""aria-disabled"")&&d(c,s))return f(e,c),!0;c=r(t,c,i)}return!1}const g={},m={Dark:""(prefers-color-scheme: dark)"",Light:""(prefers-color-scheme: light)"",None:""(prefers-color-scheme: no-preference)""};window.Skclusive={...window.Skclusive,Material:{...(window.Skclusive||{}).Material,Script:{goBack:function(...t){return e(""goBack"",...t)},getSlideTranslateValue:r,setSlideTranslateValue:function(t,n){if(!n)return;const i=r(t,n);i&&(n.style.webkitTransform=i,n.style.transform=i),function(...t){e(""repaint"",...t)}(n)},registerEvent:function(n,i,r,o){const c=t(),u=n instanceof Element?n:window;let a=function(e){return t=>{const n=s[e];n&&n.target&&n.target.invokeMethodAsync(""OnEventAsync"",JSON.stringify(t))}}(c);return o&&(a=function(...t){return e(""debounce"",...t)}(a,o)),u.addEventListener(i,a),s[c]={id:c,source:u,target:r,dispose:()=>u.removeEventListener(i,a)},c},unRegisterEvent:function(e){const t=s[e];t&&t.dispose&&t.dispose(),delete s[e]},initTrapFocus:function(e,i,r,s,c){const u=t(),a=document.activeElement,l=n(e);let d=!1;i||!e||e.contains(l.activeElement)||(e.hasAttribute(""tabIndex"")||e.setAttribute(""tabIndex"",-1),e.focus());const f=()=>{s||!c||d?d=!1:e&&!e.contains(l.activeElement)&&e.focus()},p=e=>{!s&&c&&9===e.keyCode&&l.activeElement===rootRef.current&&(d=!0,e.shiftKey?sentinelEnd.current.focus():sentinelStart.current.focus())};l.addEventListener(""focus"",f,!0),l.addEventListener(""keydown"",p,!0);const g=setInterval(()=>{f()},50);return o[u]={id:u,dispose:()=>{clearInterval(g),l.removeEventListener(""focus"",f,!0),l.removeEventListener(""keydown"",p,!0),!r&&a&&a.focus()}},u},disposeTrapFocus:function(e){const t=o[e];t&&t.dispose&&t.dispose(),delete o[e]},registerMediaQuery:function(e,n){const i=t();e=e.replace(/^@media( ?)/m,"""");const r=window.matchMedia(e),s=function(e){return t=>{const n=c[e];n&&n.target&&n.target.invokeMethodAsync(""OnChangeAsync"",!!n.queryList.matches)}}(i);return r.addListener(s),c[i]={id:i,queryList:r,target:n,dispose:()=>r.removeListener(s)},setTimeout(s),i},unRegisterMediaQuery:function(e){const t=c[e];t&&t.dispose&&t.dispose(),delete c[e]},registerHistoryBack:function(e,n,r){const s=t();let o=function(e){return t=>{t.preventDefault(),t.stopPropagation(),t.currentTarget.blur();const n=i[e];n&&(n.delay?setTimeout(()=>history.back(),n.delay):history.back())}}(s);return e.addEventListener(n,o),i[s]={id:s,delay:r,dispose:()=>e.removeEventListener(n,o)},s},unRegisterHistoryBack:function(e){const t=i[e];t&&t.dispose&&t.dispose(),delete i[e]},getAnchorBoundry:function(t,i){return(t instanceof function(...t){return e(""ownerWindow"",...t)}(t).Element?t:n(i).body).getBoundingClientRect()},getContentAnchorOffset:function(t,n){let i=0;if(t&&n.contains(t)){const r=function(...t){return e(""getScrollParent"",...t)}(n,t);i=t.offsetTop+t.clientHeight/2-r||0}return i},registerMenuList:function(e,i){const r=t(),s=function(e){return function(t){const i=u[e],{list:r,disableListWrap:s,textCriteria:o}=i,c=t.key,f=n(r).activeElement;if(""ArrowDown""===c)t.preventDefault(),p(e,r,f,s,a);else if(""ArrowUp""===c)t.preventDefault(),p(e,r,f,s,l);else if(""Home""===c)t.preventDefault(),p(e,r,null,s,a);else if(""End""===c)t.preventDefault(),p(e,r,null,s,l);else if(1===c.length){const n=o,i=c.toLowerCase(),s=performance.now();n.keys.length>0&&(s-n.lastTime>500?(n.keys=[],n.repeating=!0,n.previousKeyMatched=!0):n.repeating&&i!==n.keys[0]&&(n.repeating=!1)),n.lastTime=s,n.keys.push(i);const u=f&&!n.repeating&&d(f,n);n.previousKeyMatched&&(u||p(e,r,f,!1,a,n))?t.preventDefault():n.previousKeyMatched=!1}}}(r);return e.addEventListener(""keydown"",s),u[r]={id:r,list:e,disableListWrap:i,textCriteria:{keys:[],repeating:!0,previousKeyMatched:!0,lastTime:null},dispose:()=>e.addEventListener(""keydown"",s)},r},unRegisterMenuList:function(e){const t=u[e];t&&t.dispose&&t.dispose(),delete u[e]},registerDetectTheme:function(e){const n=t(),i=function(e){return t=>{if(!t||!t.matches)return;const n=g[e];if(n&&n.target){const e=Object.keys(m);for(let i=0;i{const t=window.matchMedia(m[e]);t.addListener(i),r.push(t),setTimeout(()=>i(t))}),g[n]={id:n,target:e,dispose:()=>{r.forEach(e=>e.removeListener(i)),r.length=0}},n},unRegisterDetectTheme:function(e){const t=g[e];t&&t.dispose&&t.dispose(),delete g[e]}}}}}();"; } } } diff --git a/Script/src/wwwroot/ScriptHelpers.js b/Script/src/wwwroot/ScriptHelpers.js index 7eea234..653ffdd 100644 --- a/Script/src/wwwroot/ScriptHelpers.js +++ b/Script/src/wwwroot/ScriptHelpers.js @@ -1 +1 @@ -!function(){"use strict";function e(e,...t){const{DomHelpers:n}=window.Skclusive.Script;return n[e].apply(null,t)}function t(...t){return e("generateId",...t)}function n(...t){return e("ownerDocument",...t)}const i={};function r(e,t){if(!t)return;const n=t.getBoundingClientRect();let i;if(t.fakeTransform)i=t.fakeTransform;else{const e=window.getComputedStyle(t);i=e.getPropertyValue("-webkit-transform")||e.getPropertyValue("transform")}let r=0,s=0;if(i&&"none"!==i&&"string"==typeof i){const e=i.split("(")[1].split(")")[0].split(",");r=parseInt(e[4],10),s=parseInt(e[5],10)}return"left"===e||"start"===e?`translateX(${window.innerWidth}px) translateX(-${n.left-r}px)`:"right"===e||"end"===e?`translateX(-${n.left+n.width-r}px)`:"up"===e||"top"===e?`translateY(${window.innerHeight}px) translateY(-${n.top-s}px)`:`translateY(-${n.top+n.height-s}px)`}const s={};const o={};const u={};const a={};function c(e,t,n){return e===t?e.firstElementChild:t&&t.nextElementSibling?t.nextElementSibling:n?null:e.firstElementChild}function l(e,t,n){return e===t?n?e.firstElementChild:e.lastElementChild:t&&t.previousElementSibling?t.previousElementSibling:n?null:e.lastElementChild}function d(e,t){if(void 0===t)return!0;let n=e.innerText;return void 0===n&&(n=e.textContent),void 0!==n&&(n=n.trim().toLowerCase(),0!==n.length&&(t.repeating?n[0]===t.keys[0]:0===n.indexOf(t.keys.join(""))))}function f(t,n){const i=a[t],{list:r,lastFocused:s=r.querySelector(".ListItem-FocusVisible")}=i;n.focus(),function(...t){e("addClasses",...t)}(n,["ListItem-FocusVisible"]),s&&function(...t){e("removeClasses",...t)}(s,["ListItem-FocusVisible"]),i.lastFocused=n}function p(e,t,n,i,r,s){let o=!1,u=r(t,n,!!n&&i);for(;u;){if(u===t.firstElementChild){if(o)return!1;o=!0}if(u.hasAttribute("tabindex")&&!u.disabled&&"true"!==u.getAttribute("aria-disabled")&&d(u,s))return f(e,u),!0;u=r(t,u,i)}return!1}window.Skclusive={...window.Skclusive,Material:{...(window.Skclusive||{}).Material,Script:{goBack:function(...t){return e("goBack",...t)},getSlideTranslateValue:r,setSlideTranslateValue:function(t,n){if(!n)return;const i=r(t,n);i&&(n.style.webkitTransform=i,n.style.transform=i),function(...t){e("repaint",...t)}(n)},registerEvent:function(n,i,r,o){const u=t(),a=n instanceof Element?n:window;let c=function(e){return t=>{const n=s[e];n&&n.target&&n.target.invokeMethodAsync("OnEventAsync",JSON.stringify(t))}}(u);return o&&(c=function(...t){return e("debounce",...t)}(c,o)),a.addEventListener(i,c),s[u]={id:u,source:a,target:r,dispose:()=>a.removeEventListener(i,c)},u},unRegisterEvent:function(e){const t=s[e];t&&t.dispose&&t.dispose(),delete s[e]},initTrapFocus:function(e,i,r,s,u){const a=t(),c=document.activeElement,l=n(e);let d=!1;i||!e||e.contains(l.activeElement)||(e.hasAttribute("tabIndex")||e.setAttribute("tabIndex",-1),e.focus());const f=()=>{s||!u||d?d=!1:e&&!e.contains(l.activeElement)&&e.focus()},p=e=>{!s&&u&&9===e.keyCode&&l.activeElement===rootRef.current&&(d=!0,e.shiftKey?sentinelEnd.current.focus():sentinelStart.current.focus())};l.addEventListener("focus",f,!0),l.addEventListener("keydown",p,!0);const g=setInterval(()=>{f()},50);return o[a]={id:a,dispose:()=>{clearInterval(g),l.removeEventListener("focus",f,!0),l.removeEventListener("keydown",p,!0),!r&&c&&c.focus()}},a},disposeTrapFocus:function(e){const t=o[e];t&&t.dispose&&t.dispose(),delete o[e]},registerMediaQuery:function(e,n){const i=t();e=e.replace(/^@media( ?)/m,"");const r=window.matchMedia(e),s=function(e){return t=>{const n=u[e];n&&n.target&&n.target.invokeMethodAsync("OnChangeAsync",!!n.queryList.matches)}}(i);return r.addListener(s),u[i]={id:i,queryList:r,target:n,dispose:()=>r.removeListener(s)},setTimeout(s),i},unRegisterMediaQuery:function(e){const t=u[e];t&&t.dispose&&t.dispose(),delete u[e]},registerHistoryBack:function(e,n,r){const s=t();let o=function(e){return t=>{t.preventDefault(),t.stopPropagation(),t.currentTarget.blur();const n=i[e];n&&(n.delay?setTimeout(()=>history.back(),n.delay):history.back())}}(s);return e.addEventListener(n,o),i[s]={id:s,delay:r,dispose:()=>e.removeEventListener(n,o)},s},unRegisterHistoryBack:function(e){const t=i[e];t&&t.dispose&&t.dispose(),delete i[e]},getAnchorBoundry:function(t,i){return(t instanceof function(...t){return e("ownerWindow",...t)}(t).Element?t:n(i).body).getBoundingClientRect()},getContentAnchorOffset:function(t,n){let i=0;if(t&&n.contains(t)){const r=function(...t){return e("getScrollParent",...t)}(n,t);i=t.offsetTop+t.clientHeight/2-r||0}return i},registerMenuList:function(e,i){const r=t(),s=function(e){return function(t){const i=a[e],{list:r,disableListWrap:s,textCriteria:o}=i,u=t.key,f=n(r).activeElement;if("ArrowDown"===u)t.preventDefault(),p(e,r,f,s,c);else if("ArrowUp"===u)t.preventDefault(),p(e,r,f,s,l);else if("Home"===u)t.preventDefault(),p(e,r,null,s,c);else if("End"===u)t.preventDefault(),p(e,r,null,s,l);else if(1===u.length){const n=o,i=u.toLowerCase(),s=performance.now();n.keys.length>0&&(s-n.lastTime>500?(n.keys=[],n.repeating=!0,n.previousKeyMatched=!0):n.repeating&&i!==n.keys[0]&&(n.repeating=!1)),n.lastTime=s,n.keys.push(i);const a=f&&!n.repeating&&d(f,n);n.previousKeyMatched&&(a||p(e,r,f,!1,c,n))?t.preventDefault():n.previousKeyMatched=!1}}}(r);return e.addEventListener("keydown",s),a[r]={id:r,list:e,disableListWrap:i,textCriteria:{keys:[],repeating:!0,previousKeyMatched:!0,lastTime:null},dispose:()=>e.addEventListener("keydown",s)},r},unRegisterMenuList:function(e){const t=a[e];t&&t.dispose&&t.dispose(),delete a[e]}}}}}(); +!function(){"use strict";function e(e,...t){const{DomHelpers:n}=window.Skclusive.Script;return n[e].apply(null,t)}function t(...t){return e("generateId",...t)}function n(...t){return e("ownerDocument",...t)}const i={};function r(e,t){if(!t)return;const n=t.getBoundingClientRect();let i;if(t.fakeTransform)i=t.fakeTransform;else{const e=window.getComputedStyle(t);i=e.getPropertyValue("-webkit-transform")||e.getPropertyValue("transform")}let r=0,s=0;if(i&&"none"!==i&&"string"==typeof i){const e=i.split("(")[1].split(")")[0].split(",");r=parseInt(e[4],10),s=parseInt(e[5],10)}return"left"===e||"start"===e?`translateX(${window.innerWidth}px) translateX(-${n.left-r}px)`:"right"===e||"end"===e?`translateX(-${n.left+n.width-r}px)`:"up"===e||"top"===e?`translateY(${window.innerHeight}px) translateY(-${n.top-s}px)`:`translateY(-${n.top+n.height-s}px)`}const s={};const o={};const c={};const u={};function a(e,t,n){return e===t?e.firstElementChild:t&&t.nextElementSibling?t.nextElementSibling:n?null:e.firstElementChild}function l(e,t,n){return e===t?n?e.firstElementChild:e.lastElementChild:t&&t.previousElementSibling?t.previousElementSibling:n?null:e.lastElementChild}function d(e,t){if(void 0===t)return!0;let n=e.innerText;return void 0===n&&(n=e.textContent),void 0!==n&&(n=n.trim().toLowerCase(),0!==n.length&&(t.repeating?n[0]===t.keys[0]:0===n.indexOf(t.keys.join(""))))}function f(t,n){const i=u[t],{list:r,lastFocused:s=r.querySelector(".ListItem-FocusVisible")}=i;n.focus(),function(...t){e("addClasses",...t)}(n,["ListItem-FocusVisible"]),s&&function(...t){e("removeClasses",...t)}(s,["ListItem-FocusVisible"]),i.lastFocused=n}function p(e,t,n,i,r,s){let o=!1,c=r(t,n,!!n&&i);for(;c;){if(c===t.firstElementChild){if(o)return!1;o=!0}if(c.hasAttribute("tabindex")&&!c.disabled&&"true"!==c.getAttribute("aria-disabled")&&d(c,s))return f(e,c),!0;c=r(t,c,i)}return!1}const g={},m={Dark:"(prefers-color-scheme: dark)",Light:"(prefers-color-scheme: light)",None:"(prefers-color-scheme: no-preference)"};window.Skclusive={...window.Skclusive,Material:{...(window.Skclusive||{}).Material,Script:{goBack:function(...t){return e("goBack",...t)},getSlideTranslateValue:r,setSlideTranslateValue:function(t,n){if(!n)return;const i=r(t,n);i&&(n.style.webkitTransform=i,n.style.transform=i),function(...t){e("repaint",...t)}(n)},registerEvent:function(n,i,r,o){const c=t(),u=n instanceof Element?n:window;let a=function(e){return t=>{const n=s[e];n&&n.target&&n.target.invokeMethodAsync("OnEventAsync",JSON.stringify(t))}}(c);return o&&(a=function(...t){return e("debounce",...t)}(a,o)),u.addEventListener(i,a),s[c]={id:c,source:u,target:r,dispose:()=>u.removeEventListener(i,a)},c},unRegisterEvent:function(e){const t=s[e];t&&t.dispose&&t.dispose(),delete s[e]},initTrapFocus:function(e,i,r,s,c){const u=t(),a=document.activeElement,l=n(e);let d=!1;i||!e||e.contains(l.activeElement)||(e.hasAttribute("tabIndex")||e.setAttribute("tabIndex",-1),e.focus());const f=()=>{s||!c||d?d=!1:e&&!e.contains(l.activeElement)&&e.focus()},p=e=>{!s&&c&&9===e.keyCode&&l.activeElement===rootRef.current&&(d=!0,e.shiftKey?sentinelEnd.current.focus():sentinelStart.current.focus())};l.addEventListener("focus",f,!0),l.addEventListener("keydown",p,!0);const g=setInterval(()=>{f()},50);return o[u]={id:u,dispose:()=>{clearInterval(g),l.removeEventListener("focus",f,!0),l.removeEventListener("keydown",p,!0),!r&&a&&a.focus()}},u},disposeTrapFocus:function(e){const t=o[e];t&&t.dispose&&t.dispose(),delete o[e]},registerMediaQuery:function(e,n){const i=t();e=e.replace(/^@media( ?)/m,"");const r=window.matchMedia(e),s=function(e){return t=>{const n=c[e];n&&n.target&&n.target.invokeMethodAsync("OnChangeAsync",!!n.queryList.matches)}}(i);return r.addListener(s),c[i]={id:i,queryList:r,target:n,dispose:()=>r.removeListener(s)},setTimeout(s),i},unRegisterMediaQuery:function(e){const t=c[e];t&&t.dispose&&t.dispose(),delete c[e]},registerHistoryBack:function(e,n,r){const s=t();let o=function(e){return t=>{t.preventDefault(),t.stopPropagation(),t.currentTarget.blur();const n=i[e];n&&(n.delay?setTimeout(()=>history.back(),n.delay):history.back())}}(s);return e.addEventListener(n,o),i[s]={id:s,delay:r,dispose:()=>e.removeEventListener(n,o)},s},unRegisterHistoryBack:function(e){const t=i[e];t&&t.dispose&&t.dispose(),delete i[e]},getAnchorBoundry:function(t,i){return(t instanceof function(...t){return e("ownerWindow",...t)}(t).Element?t:n(i).body).getBoundingClientRect()},getContentAnchorOffset:function(t,n){let i=0;if(t&&n.contains(t)){const r=function(...t){return e("getScrollParent",...t)}(n,t);i=t.offsetTop+t.clientHeight/2-r||0}return i},registerMenuList:function(e,i){const r=t(),s=function(e){return function(t){const i=u[e],{list:r,disableListWrap:s,textCriteria:o}=i,c=t.key,f=n(r).activeElement;if("ArrowDown"===c)t.preventDefault(),p(e,r,f,s,a);else if("ArrowUp"===c)t.preventDefault(),p(e,r,f,s,l);else if("Home"===c)t.preventDefault(),p(e,r,null,s,a);else if("End"===c)t.preventDefault(),p(e,r,null,s,l);else if(1===c.length){const n=o,i=c.toLowerCase(),s=performance.now();n.keys.length>0&&(s-n.lastTime>500?(n.keys=[],n.repeating=!0,n.previousKeyMatched=!0):n.repeating&&i!==n.keys[0]&&(n.repeating=!1)),n.lastTime=s,n.keys.push(i);const u=f&&!n.repeating&&d(f,n);n.previousKeyMatched&&(u||p(e,r,f,!1,a,n))?t.preventDefault():n.previousKeyMatched=!1}}}(r);return e.addEventListener("keydown",s),u[r]={id:r,list:e,disableListWrap:i,textCriteria:{keys:[],repeating:!0,previousKeyMatched:!0,lastTime:null},dispose:()=>e.addEventListener("keydown",s)},r},unRegisterMenuList:function(e){const t=u[e];t&&t.dispose&&t.dispose(),delete u[e]},registerDetectTheme:function(e){const n=t(),i=function(e){return t=>{if(!t||!t.matches)return;const n=g[e];if(n&&n.target){const e=Object.keys(m);for(let i=0;i{const t=window.matchMedia(m[e]);t.addListener(i),r.push(t),setTimeout(()=>i(t))}),g[n]={id:n,target:e,dispose:()=>{r.forEach(e=>e.removeListener(i)),r.length=0}},n},unRegisterDetectTheme:function(e){const t=g[e];t&&t.dispose&&t.dispose(),delete g[e]}}}}}(); diff --git a/Selection/src/Checkbox/Icon/CheckBoxIcon.razor b/Selection/src/Checkbox/Icon/CheckBoxIcon.razor index 8327c09..ab3b672 100644 --- a/Selection/src/Checkbox/Icon/CheckBoxIcon.razor +++ b/Selection/src/Checkbox/Icon/CheckBoxIcon.razor @@ -1,6 +1,8 @@ @namespace Skclusive.Material.Selection -@inherits StaticComponentBase +@inherits CssPureComponentBase - + \ No newline at end of file diff --git a/Selection/src/Checkbox/Icon/CheckBoxOutlineBlankIcon.razor b/Selection/src/Checkbox/Icon/CheckBoxOutlineBlankIcon.razor index 44dfd0f..fe6c62d 100644 --- a/Selection/src/Checkbox/Icon/CheckBoxOutlineBlankIcon.razor +++ b/Selection/src/Checkbox/Icon/CheckBoxOutlineBlankIcon.razor @@ -1,6 +1,8 @@ @namespace Skclusive.Material.Selection -@inherits StaticComponentBase +@inherits CssPureComponentBase - + \ No newline at end of file diff --git a/Selection/src/Checkbox/Icon/IndeterminateCheckBoxIcon.razor b/Selection/src/Checkbox/Icon/IndeterminateCheckBoxIcon.razor index 9fcf6da..48c474a 100644 --- a/Selection/src/Checkbox/Icon/IndeterminateCheckBoxIcon.razor +++ b/Selection/src/Checkbox/Icon/IndeterminateCheckBoxIcon.razor @@ -1,6 +1,8 @@ @namespace Skclusive.Material.Selection -@inherits StaticComponentBase +@inherits CssPureComponentBase - + \ No newline at end of file diff --git a/Skclusive.Material.Component.sln b/Skclusive.Material.Component.sln index 9068dd5..aac06a4 100644 --- a/Skclusive.Material.Component.sln +++ b/Skclusive.Material.Component.sln @@ -59,6 +59,12 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Theme", "Theme\src\Theme.cs EndProject Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Material", "Material\src\Material.csproj", "{379256A3-0025-44AF-AB7F-5D24F6D20AD8}" EndProject +Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Tab", "Tab\src\Tab.csproj", "{C9EB14C5-A679-43B0-84E4-80158F12F665}" +EndProject +Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Menu", "Menu\src\Menu.csproj", "{6B8228D5-32B9-435E-B16D-51D8F2D75D6B}" +EndProject +Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "PopOver", "PopOver\src\PopOver.csproj", "{5A95F9A6-F02E-4087-9AA6-C8CFEFEC0F98}" +EndProject Global GlobalSection(SolutionConfigurationPlatforms) = preSolution Debug|Any CPU = Debug|Any CPU @@ -408,5 +414,46 @@ Global {379256A3-0025-44AF-AB7F-5D24F6D20AD8}.Release|x64.Build.0 = Release|Any CPU {379256A3-0025-44AF-AB7F-5D24F6D20AD8}.Release|x86.ActiveCfg = Release|Any CPU {379256A3-0025-44AF-AB7F-5D24F6D20AD8}.Release|x86.Build.0 = Release|Any CPU + {C9EB14C5-A679-43B0-84E4-80158F12F665}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {C9EB14C5-A679-43B0-84E4-80158F12F665}.Debug|Any CPU.Build.0 = Debug|Any CPU + {C9EB14C5-A679-43B0-84E4-80158F12F665}.Debug|x64.ActiveCfg = Debug|Any CPU + {C9EB14C5-A679-43B0-84E4-80158F12F665}.Debug|x64.Build.0 = Debug|Any CPU + {C9EB14C5-A679-43B0-84E4-80158F12F665}.Debug|x86.ActiveCfg = Debug|Any CPU + {C9EB14C5-A679-43B0-84E4-80158F12F665}.Debug|x86.Build.0 = Debug|Any CPU + {C9EB14C5-A679-43B0-84E4-80158F12F665}.Release|Any CPU.ActiveCfg = Release|Any CPU + {C9EB14C5-A679-43B0-84E4-80158F12F665}.Release|Any CPU.Build.0 = Release|Any CPU + {C9EB14C5-A679-43B0-84E4-80158F12F665}.Release|x64.ActiveCfg = Release|Any CPU + {C9EB14C5-A679-43B0-84E4-80158F12F665}.Release|x64.Build.0 = Release|Any CPU + {C9EB14C5-A679-43B0-84E4-80158F12F665}.Release|x86.ActiveCfg = Release|Any CPU + {C9EB14C5-A679-43B0-84E4-80158F12F665}.Release|x86.Build.0 = Release|Any CPU + {6B8228D5-32B9-435E-B16D-51D8F2D75D6B}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {6B8228D5-32B9-435E-B16D-51D8F2D75D6B}.Debug|Any CPU.Build.0 = Debug|Any CPU + {6B8228D5-32B9-435E-B16D-51D8F2D75D6B}.Debug|x64.ActiveCfg = Debug|Any CPU + {6B8228D5-32B9-435E-B16D-51D8F2D75D6B}.Debug|x64.Build.0 = Debug|Any CPU + {6B8228D5-32B9-435E-B16D-51D8F2D75D6B}.Debug|x86.ActiveCfg = Debug|Any CPU + {6B8228D5-32B9-435E-B16D-51D8F2D75D6B}.Debug|x86.Build.0 = Debug|Any CPU + {6B8228D5-32B9-435E-B16D-51D8F2D75D6B}.Release|Any CPU.ActiveCfg = Release|Any CPU + {6B8228D5-32B9-435E-B16D-51D8F2D75D6B}.Release|Any CPU.Build.0 = Release|Any CPU + {6B8228D5-32B9-435E-B16D-51D8F2D75D6B}.Release|x64.ActiveCfg = Release|Any CPU + {6B8228D5-32B9-435E-B16D-51D8F2D75D6B}.Release|x64.Build.0 = Release|Any CPU + {6B8228D5-32B9-435E-B16D-51D8F2D75D6B}.Release|x86.ActiveCfg = Release|Any CPU + {6B8228D5-32B9-435E-B16D-51D8F2D75D6B}.Release|x86.Build.0 = Release|Any CPU + {5A95F9A6-F02E-4087-9AA6-C8CFEFEC0F98}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {5A95F9A6-F02E-4087-9AA6-C8CFEFEC0F98}.Debug|Any CPU.Build.0 = Debug|Any CPU + {5A95F9A6-F02E-4087-9AA6-C8CFEFEC0F98}.Debug|x64.ActiveCfg = Debug|Any CPU + {5A95F9A6-F02E-4087-9AA6-C8CFEFEC0F98}.Debug|x64.Build.0 = Debug|Any CPU + {5A95F9A6-F02E-4087-9AA6-C8CFEFEC0F98}.Debug|x86.ActiveCfg = Debug|Any CPU + {5A95F9A6-F02E-4087-9AA6-C8CFEFEC0F98}.Debug|x86.Build.0 = Debug|Any CPU + {5A95F9A6-F02E-4087-9AA6-C8CFEFEC0F98}.Release|Any CPU.ActiveCfg = Release|Any CPU + {5A95F9A6-F02E-4087-9AA6-C8CFEFEC0F98}.Release|Any CPU.Build.0 = Release|Any CPU + {5A95F9A6-F02E-4087-9AA6-C8CFEFEC0F98}.Release|x64.ActiveCfg = Release|Any CPU + {5A95F9A6-F02E-4087-9AA6-C8CFEFEC0F98}.Release|x64.Build.0 = Release|Any CPU + {5A95F9A6-F02E-4087-9AA6-C8CFEFEC0F98}.Release|x86.ActiveCfg = Release|Any CPU + {5A95F9A6-F02E-4087-9AA6-C8CFEFEC0F98}.Release|x86.Build.0 = Release|Any CPU + EndGlobalSection + GlobalSection(NestedProjects) = preSolution + {C9EB14C5-A679-43B0-84E4-80158F12F665} = {FB8B5A3F-D65F-421C-8AE7-E4A176FAED88} + {6B8228D5-32B9-435E-B16D-51D8F2D75D6B} = {1A02A128-EA37-4ADF-A45E-35ABF7BA720F} + {5A95F9A6-F02E-4087-9AA6-C8CFEFEC0F98} = {9AB9ECAF-88AE-4582-8E4D-0674024AC3AE} EndGlobalSection EndGlobal diff --git a/Tab/src/Tab.csproj b/Tab/src/Tab.csproj new file mode 100644 index 0000000..0ef3d22 --- /dev/null +++ b/Tab/src/Tab.csproj @@ -0,0 +1,25 @@ + + + + 1.0.5-preview1 + $(VersionSuffix) + netstandard2.1 + 3.0 + Skclusive.Material.Tab + Skclusive.Material.Tab + Skclusive.Material.Tab + Skclusive + Skclusive + Skclusive + blazor material ui Tab + https://github.com/skclusive/Skclusive.Material.Component + https://github.com/skclusive/Skclusive.Material.Component + + + + + + + + + diff --git a/Tab/src/Tab/Tab.cs b/Tab/src/Tab/Tab.cs new file mode 100644 index 0000000..e1e604e --- /dev/null +++ b/Tab/src/Tab/Tab.cs @@ -0,0 +1,116 @@ +using Microsoft.AspNetCore.Components; +using Skclusive.Core.Component; +using Skclusive.Material.Core; +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; + +namespace Skclusive.Material.Tab +{ + public class TabComponent : MaterialComponentBase + { + public TabComponent() : base("Tab") + { + } + + [CascadingParameter] + public ITabsContext TabsContext { set; get; } + + [Parameter] + public bool DisableFocusRipple { set; get; } + + [Parameter] + public bool DisableRipple { set; get; } + + [Parameter] + public bool Wrapped { set; get; } + + [Parameter] + public object Value { set; get; } + + [Parameter] + public string Label { set; get; } + + [Parameter] + public RenderFragment IconContent { set; get; } + + [Parameter] + public RenderFragment LabelContent { set; get; } + + [Parameter] + public string WrapperStyle { set; get; } + + [Parameter] + public string WrapperClass { set; get; } + + protected bool FullWidth => TabsContext.FullWidth; + + protected Color TextColor => TabsContext.TextColor; + + protected EventCallback OnChange => TabsContext.OnChange; + + protected bool Selected => object.Equals(Value, TabsContext.Value); + + protected RenderFragment Indicator => Selected ? TabsContext.Indicator : null; + + protected override void OnInitialized() + { + Value = Value ?? TabsContext.CreateValue(); + } + + protected override IEnumerable Classes + { + get + { + foreach (var item in base.Classes) + yield return item; + + yield return $"{nameof(TextColor)}-{TextColor}"; + + if (Selected) + yield return $"{nameof(Selected)}"; + + if (FullWidth) + yield return $"{nameof(FullWidth)}"; + + if (Wrapped) + yield return $"{nameof(Wrapped)}"; + + if ((LabelContent != null || !string.IsNullOrWhiteSpace(Label)) && IconContent != null) + yield return $"LabelIcon"; + } + } + + + protected virtual string _WrapperStyle + { + get => CssUtil.ToStyle(WrapperStyles, WrapperStyle); + } + + protected virtual IEnumerable> WrapperStyles + { + get => Enumerable.Empty>(); + } + + protected virtual string _WrapperClass + { + get => CssUtil.ToClass($"{Selector}-Wrapper", WrapperClasses, WrapperClass); + } + + protected virtual IEnumerable WrapperClasses + { + get + { + yield return string.Empty; + } + } + + protected override async Task HandleClickAsync(EventArgs args) + { + await OnChange.InvokeAsync(Value); + + await base.HandleClickAsync(args); + } + } +} diff --git a/Tab/src/Tab/Tab.razor b/Tab/src/Tab/Tab.razor new file mode 100644 index 0000000..40703c9 --- /dev/null +++ b/Tab/src/Tab/Tab.razor @@ -0,0 +1,26 @@ +@namespace Skclusive.Material.Tab +@inherits TabComponent + + + + @IconContent + @if (@LabelContent != null) + { + @LabelContent + } else + { + @Label + } + + @Indicator + diff --git a/Tab/src/Tab/TabStyle.razor b/Tab/src/Tab/TabStyle.razor new file mode 100644 index 0000000..5b48d5a --- /dev/null +++ b/Tab/src/Tab/TabStyle.razor @@ -0,0 +1,105 @@ +@namespace Skclusive.Material.Tab +@inherits StyleComponentBase + + \ No newline at end of file diff --git a/Tab/src/TabIndicator/TabIndicator.cs b/Tab/src/TabIndicator/TabIndicator.cs new file mode 100644 index 0000000..8e446c7 --- /dev/null +++ b/Tab/src/TabIndicator/TabIndicator.cs @@ -0,0 +1,40 @@ +using Microsoft.AspNetCore.Components; +using Skclusive.Core.Component; +using Skclusive.Material.Core; +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; + +namespace Skclusive.Material.Tab +{ + public class TabIndicatorComponent : MaterialComponent + { + public TabIndicatorComponent() : base("TabIndicator") + { + } + + [Parameter] + public string Component { set; get; } = "span"; + + [Parameter] + public Orientation Orientation { set; get; } + + [Parameter] + public Color Color { set; get; } + + protected override IEnumerable Classes + { + get + { + foreach (var item in base.Classes) + yield return item; + + yield return $"{nameof(Color)}-{Color}"; + + if (Orientation == Orientation.Vertical) + yield return $"{Orientation.Vertical}"; + } + } + } +} diff --git a/Tab/src/TabIndicator/TabIndicator.razor b/Tab/src/TabIndicator/TabIndicator.razor new file mode 100644 index 0000000..5028329 --- /dev/null +++ b/Tab/src/TabIndicator/TabIndicator.razor @@ -0,0 +1,11 @@ +@namespace Skclusive.Material.Tab +@inherits TabIndicatorComponent + + + @ChildContent + \ No newline at end of file diff --git a/Tab/src/TabIndicator/TabIndicatorStyle.razor b/Tab/src/TabIndicator/TabIndicatorStyle.razor new file mode 100644 index 0000000..4395a99 --- /dev/null +++ b/Tab/src/TabIndicator/TabIndicatorStyle.razor @@ -0,0 +1,28 @@ +@namespace Skclusive.Material.Tab +@inherits StyleComponentBase + + \ No newline at end of file diff --git a/Tab/src/TabScrollButton/Icon/KeyboardArrowLeft.razor b/Tab/src/TabScrollButton/Icon/KeyboardArrowLeft.razor new file mode 100644 index 0000000..37e1a86 --- /dev/null +++ b/Tab/src/TabScrollButton/Icon/KeyboardArrowLeft.razor @@ -0,0 +1,8 @@ +@namespace Skclusive.Material.Tab +@inherits CssPureComponentBase + + + + \ No newline at end of file diff --git a/Tab/src/TabScrollButton/Icon/KeyboardArrowRight.razor b/Tab/src/TabScrollButton/Icon/KeyboardArrowRight.razor new file mode 100644 index 0000000..d9c9f55 --- /dev/null +++ b/Tab/src/TabScrollButton/Icon/KeyboardArrowRight.razor @@ -0,0 +1,8 @@ +@namespace Skclusive.Material.Tab +@inherits CssPureComponentBase + + + + \ No newline at end of file diff --git a/Tab/src/TabScrollButton/TabScrollButton.cs b/Tab/src/TabScrollButton/TabScrollButton.cs new file mode 100644 index 0000000..38106f3 --- /dev/null +++ b/Tab/src/TabScrollButton/TabScrollButton.cs @@ -0,0 +1,41 @@ +using Microsoft.AspNetCore.Components; +using Skclusive.Core.Component; +using Skclusive.Material.Core; +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; + +namespace Skclusive.Material.Tab +{ + public class TabScrollButtonComponent : MaterialComponent + { + public TabScrollButtonComponent() : base("TabScrollButton") + { + } + + [Parameter] + public string Component { set; get; } = "div"; + + [Parameter] + public Orientation Orientation { set; get; } + + [Parameter] + public Side Side { set; get; } + + [Parameter] + public bool Visible { set; get; } + + protected override IEnumerable Classes + { + get + { + foreach (var item in base.Classes) + yield return item; + + if (Orientation == Orientation.Vertical) + yield return $"{Orientation.Vertical}"; + } + } + } +} diff --git a/Tab/src/TabScrollButton/TabScrollButton.razor b/Tab/src/TabScrollButton/TabScrollButton.razor new file mode 100644 index 0000000..14e0324 --- /dev/null +++ b/Tab/src/TabScrollButton/TabScrollButton.razor @@ -0,0 +1,17 @@ +@namespace Skclusive.Material.Tab +@inherits TabScrollButtonComponent + + + @if (Side == Side.Left) + { + + } else + { + + } + \ No newline at end of file diff --git a/Tab/src/TabScrollButton/TabScrollButtonStyle.razor b/Tab/src/TabScrollButton/TabScrollButtonStyle.razor new file mode 100644 index 0000000..1e4f928 --- /dev/null +++ b/Tab/src/TabScrollButton/TabScrollButtonStyle.razor @@ -0,0 +1,20 @@ +@namespace Skclusive.Material.Tab +@inherits StyleComponentBase + + \ No newline at end of file diff --git a/Tab/src/TabStyles/TabStyles.razor b/Tab/src/TabStyles/TabStyles.razor new file mode 100644 index 0000000..7cc5a02 --- /dev/null +++ b/Tab/src/TabStyles/TabStyles.razor @@ -0,0 +1,7 @@ +@namespace Skclusive.Material.Tab +@inherits StaticComponentBase + + + + + \ No newline at end of file diff --git a/Tab/src/Tabs/ITabsContext.cs b/Tab/src/Tabs/ITabsContext.cs new file mode 100644 index 0000000..bb3e8b6 --- /dev/null +++ b/Tab/src/Tabs/ITabsContext.cs @@ -0,0 +1,108 @@ +using Skclusive.Core.Component; +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Rendering; + +namespace Skclusive.Material.Tab +{ + public interface ITabsContext + { + object CreateValue(); + + object Value { get; } + + TabsVariant Variant { get; } + + bool FullWidth { get; } + + RenderFragment Indicator { get; } + + Color TextColor { get; } + + EventCallback OnChange { get; } + } + + public class TabsContextBuilder + { + private class TabsContext : ITabsContext + { + private int Index = 0; + + public object Value { get; internal set; } + + public TabsVariant Variant { get; internal set; } + + public bool FullWidth { get; internal set; } + + public RenderFragment Indicator { get; internal set; } + + public Color TextColor { get; internal set; } + + public EventCallback OnChange { get; internal set; } + + public object CreateValue() + { + return Index++; + } + } + + private readonly TabsContext _context = new TabsContext(); + + public ITabsContext Build() + { + return _context; + } + + public TabsContextBuilder WithVariant(TabsVariant variant) + { + _context.Variant = variant; + + return this; + } + + public TabsContextBuilder WithFullWidth(bool fullWidth) + { + _context.FullWidth = fullWidth; + + return this; + } + + public TabsContextBuilder WithValue(object value) + { + _context.Value = value; + + return this; + } + + public TabsContextBuilder WithIndicator(RenderFragment indicator) + { + _context.Indicator = indicator; + + return this; + } + + public TabsContextBuilder WithTextColor(Color textColor) + { + _context.TextColor = textColor; + + return this; + } + + public TabsContextBuilder WithOnChange(EventCallback onChange) + { + _context.OnChange = onChange; + + return this; + } + + public TabsContextBuilder With(ITabsContext context) + { + WithVariant(context.Variant); + WithFullWidth(context.FullWidth); + WithIndicator(context.Indicator); + WithTextColor(context.TextColor); + WithOnChange(context.OnChange); + + return this; + } + } +} \ No newline at end of file diff --git a/Tab/src/Tabs/Tabs.cs b/Tab/src/Tabs/Tabs.cs new file mode 100644 index 0000000..be92835 --- /dev/null +++ b/Tab/src/Tabs/Tabs.cs @@ -0,0 +1,212 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Rendering; +using Skclusive.Core.Component; +using Skclusive.Material.Core; +using System; +using System.Collections.Generic; +using System.Linq; + +namespace Skclusive.Material.Tab +{ + public class TabsComponent : MaterialComponent + { + public TabsComponent() : base("Tabs") + { + } + + [Parameter] + public string Component { set; get; } = "div"; + + [Parameter] + public TabsVariant Variant { set; get; } = TabsVariant.Standard; + + [Parameter] + public ScrollButton ScrollButton { set; get; } = ScrollButton.Auto; + + [Parameter] + public Orientation Orientation { set; get; } = Orientation.Horizontal; + + [Parameter] + public bool Centered { set; get; } + + [Parameter] + public Color IndicatorColor { set; get; } = Color.Secondary; + + [Parameter] + public Color TextColor { set; get; } = Color.Inherit; + + [Parameter] + public object Value { set; get; } + + [Parameter] + public IReference TabsRef { get; set; } = new Reference(); + + [Parameter] + public IReference ContainerRef { get; set; } = new Reference(); + + [Parameter] + public EventCallback OnChange { set; get; } + + [Parameter] + public string ScrollerStyle { set; get; } + + [Parameter] + public string ScrollerClass { set; get; } + + [Parameter] + public string ContainerStyle { set; get; } + + [Parameter] + public string ContainerClass { set; get; } + + [Parameter] + public string IndicatorStyle { set; get; } + + [Parameter] + public string IndicatorClass { set; get; } + + protected override void OnInitialized() + { + Value = Value ?? -1; + } + + protected RenderFragment Indicator => (RenderTreeBuilder builder) => + { + builder.OpenRegion(0); + builder.OpenComponent(0); + builder.AddAttribute(1, "Class", _IndicatorClass); + builder.AddAttribute(2, "Style", _IndicatorStyle); + builder.AddAttribute(3, "Orientation", Orientation); + builder.AddAttribute(4, "Color", IndicatorColor); + builder.CloseComponent(); + builder.CloseRegion(); + }; + + protected ITabsContext TabsContext => new TabsContextBuilder() + .WithFullWidth(Variant == TabsVariant.FullWidth) + .WithVariant(Variant) + .WithIndicator(Indicator) + .WithTextColor(TextColor) + .WithOnChange(OnChange) + .WithValue(Value) + .Build(); + + protected override IEnumerable Classes + { + get + { + foreach (var item in base.Classes) + yield return item; + + if (Orientation == Orientation.Vertical) + yield return $"{Orientation.Vertical}"; + } + } + + + protected virtual string _ScrollerStyle + { + get => CssUtil.ToStyle(ScrollerStyles, ScrollerStyle); + } + + protected virtual IEnumerable> ScrollerStyles + { + get => Enumerable.Empty>(); + } + + protected virtual string _ScrollerClass + { + get => CssUtil.ToClass($"{Selector}-Scroller", ScrollerClasses, ScrollerClass); + } + + protected virtual IEnumerable ScrollerClasses + { + get + { + var scrollable = Variant == TabsVariant.Scrollable; + + yield return string.Empty; + + if (!scrollable) + yield return "Fixed"; + + if (scrollable) + yield return $"{TabsVariant.Scrollable}"; + } + } + + protected virtual string _ContainerStyle + { + get => CssUtil.ToStyle(ContainerStyles, ContainerStyle); + } + + protected virtual IEnumerable> ContainerStyles + { + get => Enumerable.Empty>(); + } + + protected virtual string _ContainerClass + { + get => CssUtil.ToClass($"{Selector}-Container", ContainerClasses, ContainerClass); + } + + protected virtual IEnumerable ContainerClasses + { + get + { + var scrollable = Variant == TabsVariant.Scrollable; + + yield return string.Empty; + + if (!scrollable && Centered) + yield return $"{nameof(Centered)}"; + + if (Orientation == Orientation.Vertical) + yield return $"{Orientation.Vertical}"; + } + } + + protected virtual string _IndicatorStyle + { + get => CssUtil.ToStyle(IndicatorStyles, IndicatorStyle); + } + + protected virtual IEnumerable> IndicatorStyles + { + get => Enumerable.Empty>(); + } + + protected virtual string _IndicatorClass + { + get => CssUtil.ToClass($"{Selector}-Indicator", IndicatorClasses, IndicatorClass); + } + + protected virtual IEnumerable IndicatorClasses + { + get + { + yield return string.Empty; + } + } + } + + public enum TabsVariant + { + Scrollable, + + FullWidth, + + Standard + } + + public enum ScrollButton + { + Auto, + + Desktop, + + On, + + Off + } +} diff --git a/Tab/src/Tabs/Tabs.razor b/Tab/src/Tabs/Tabs.razor new file mode 100644 index 0000000..535794a --- /dev/null +++ b/Tab/src/Tabs/Tabs.razor @@ -0,0 +1,26 @@ +@namespace Skclusive.Material.Tab +@inherits TabsComponent + + +
+
+ + @ChildContent + +
+ @* @Indicator *@ +
+ \ No newline at end of file diff --git a/Tab/src/Tabs/TabsStyle.razor b/Tab/src/Tabs/TabsStyle.razor new file mode 100644 index 0000000..5359ef0 --- /dev/null +++ b/Tab/src/Tabs/TabsStyle.razor @@ -0,0 +1,56 @@ +@namespace Skclusive.Material.Tab +@inherits StyleComponentBase + + \ No newline at end of file diff --git a/Tab/src/_Imports.razor b/Tab/src/_Imports.razor new file mode 100644 index 0000000..85ae319 --- /dev/null +++ b/Tab/src/_Imports.razor @@ -0,0 +1,5 @@ +@using Microsoft.AspNetCore.Components.Web +@using Skclusive.Core.Component +@using Skclusive.Material.Core +@using Skclusive.Material.Button +@using Skclusive.Material.Icon \ No newline at end of file diff --git a/Theme/src/Theme/ThemeCommonStyle.razor b/Theme/src/Theme/ThemeCommonStyle.razor new file mode 100644 index 0000000..a5e4d93 --- /dev/null +++ b/Theme/src/Theme/ThemeCommonStyle.razor @@ -0,0 +1,183 @@ +@namespace Skclusive.Material.Theme +@inherits StyleComponentBase + + \ No newline at end of file diff --git a/Theme/src/Theme/ThemeDarkStyle.razor b/Theme/src/Theme/ThemeDarkStyle.razor new file mode 100644 index 0000000..448a6ad --- /dev/null +++ b/Theme/src/Theme/ThemeDarkStyle.razor @@ -0,0 +1,62 @@ +@namespace Skclusive.Material.Theme +@inherits StyleComponentBase + + \ No newline at end of file diff --git a/Theme/src/Theme/ThemeLightStyle.razor b/Theme/src/Theme/ThemeLightStyle.razor index e8feb8b..b0b9fcb 100644 --- a/Theme/src/Theme/ThemeLightStyle.razor +++ b/Theme/src/Theme/ThemeLightStyle.razor @@ -3,228 +3,60 @@ \ No newline at end of file diff --git a/Theme/src/Theme/ThemeStyles.razor b/Theme/src/Theme/ThemeStyles.razor new file mode 100644 index 0000000..87eef98 --- /dev/null +++ b/Theme/src/Theme/ThemeStyles.razor @@ -0,0 +1,6 @@ +@namespace Skclusive.Material.Theme +@inherits StaticComponentBase + + + + \ No newline at end of file diff --git a/Transition/src/Transition.csproj b/Transition/src/Transition.csproj index 28ea9f2..f8e5c9b 100644 --- a/Transition/src/Transition.csproj +++ b/Transition/src/Transition.csproj @@ -16,14 +16,14 @@ https://github.com/skclusive/Skclusive.Material.Component - - - + + +