@using Microsoft.AspNetCore.Components.Forms @namespace ServiceStack.Blazor.Components.Tailwind @typeparam Model @inherits UiComponentBase

Sort

Filter

@if (Column.FieldType.IsEnum) {
@foreach (var c in Column.EnumEntries) {
}
} else {
@foreach (var filter in filters) {
@Column.Name @filter.Name @Column.GetFilterValue(filter)
} @foreach (var rule in Column.FilterRules) { } @if (newFilterValueType != "none") { }
}
Save Cancel
@namespace ServiceStack.Blazor.Components.Tailwind @typeparam Model @inherits UiComponentBase
@foreach (var c in Columns.Where(c => c.Filters.Count > 0)) {
@c.Label @if (c.FieldType.IsEnum) {
@foreach (var value in c.Filters.FirstOrDefault()!.Values.OrEmpty()) {
}
} else {
@foreach (var f in c.Filters) {
@c.Name @f.Name @c.GetFilterValue(f)
}
}
}
@namespace ServiceStack.Blazor.Components.Tailwind @inherits UiComponentBase

Query Preferences

Model.SelectedColumns.Clear()) checked=@(Model.SelectedColumns.Count == 0) class="focus:ring-indigo-500 h-4 w-4 bg-white dark:bg-black text-indigo-600 dark:text-indigo-400 border-gray-300 dark:border-gray-700">
@foreach (var c in Columns) {
}
Save Cancel
@namespace ServiceStack.Blazor.Components.Tailwind @typeparam Model @inherits UiComponentBase
@if (Column.Settings.Filters.Count > 0) { } else { } @if (Column.Settings.SortOrder == SortOrder.Ascending) { } else if (Column.Settings.SortOrder == SortOrder.Descending) { }
@inherits UiComponentBase
@if (Type == AlertType.Warning) { } else if (Type == AlertType.Error) { } else if (Type == AlertType.Information) { } else if (Type == AlertType.Success) { }

@if (!string.IsNullOrEmpty(HtmlMessage)) { @((MarkupString)HtmlMessage) } else { @ChildContent }

@code { string BackgroundColor => Type switch { AlertType.Information => "bg-blue-50 dark:bg-blue-200", AlertType.Error => "bg-red-50 dark:bg-red-200", AlertType.Success => "bg-green-50 dark:bg-green-200", _ => "bg-yellow-50 dark:bg-yellow-200" }; string BorderColor => Type switch { AlertType.Information => "border-blue-400", AlertType.Error => "border-red-400", AlertType.Success => "border-green-400", _ => "border-yellow-400" }; string TextColor => Type switch { AlertType.Information => "text-blue-700", AlertType.Error => "text-red-700", AlertType.Success => "text-green-700", _ => "text-yellow-700" }; } @inherits AlertSuccessBase @if (!dismissed) { } @code { bool dismissed = false; } @typeparam T @inherits TextInputBase
@if (!string.IsNullOrEmpty(Label)) { }
@if (showPopup) { } else if (!Multiple && Value is not null) {
@Item!(Value)
} @if (HasErrorField) {
}
@if (HasErrorField) {

@ErrorFieldMessage

} else if (!string.IsNullOrEmpty(UseHelp)) {

@UseHelp

}
@typeparam Model @inherits AutoFormBase @if (FormStyle == FormStyle.Card) {

@Title

@if (SubHeading != null) {

@SubHeading

} else if (Notes != null) {

@((MarkupString)Notes)

}
Cancel Save
} else { } @typeparam Model @inherits AutoFormBase @if (FormStyle == FormStyle.Card) {

@Title

@if (SubHeading != null) {

@SubHeading

} else if (Notes != null) {

@((MarkupString)Notes)

}
@if (DeleteApiType != null) { }
Cancel Save
} else { } @using ServiceStack.Html @inherits UiComponentBase
@foreach (var f in FormLayout.OrEmpty()) { var propType = MetadataType.Properties.FirstOrDefault(x => x.Name == f.Id); var dataModelProp = DataModelType.Property(f.Id); if (f.Ignore == true || !BlazorUtils.SupportsProperty(propType)) { continue; }
@if (dataModelProp?.Ref != null && f.Type != Input.Types.File) { } else { }
}
@typeparam Model @inherits AuthBlazorComponentBase @implements IDisposable @if (invalidAccess != null) {
} else {
@if (New == true) { if (invalidCreateAccess != null) { } else if (CreateForm != null) { @CreateForm } else if (Apis!.Create != null) { } } else if (EditModel != null) { if (invalidUpdateAccess != null) { } else if (EditForm != null) { @EditForm(EditModel) } else if (Apis!.Patch != null || Apis!.Update != null) { } } @if (Toolbar != null) { @Toolbar } else if (ShowToolbar) {
@if (ShowPreferences) { } @if (ShowPagingNav) { }
@if (ShowPagingInfo) {
@if (apiLoading) { Querying... } else if (Results.Count > 0) { @(Skip + 1) - @Math.Min(Skip + Results.Count, Total) of @Total } else if (Api != null) { No Results }
}
@if (ShowRefresh) {
} @if (ShowDownloadCsv) {
} @if (ShowCopyApiUrl) {
} @if (hasPrefs && ShowResetPreferences) {
} @if (ShowFiltersView && filtersCount > 0) {
} @if (ShowNewItem && CreateOp != null) {
} @if (ToolbarButtons != null) { @ToolbarButtons }
} @if (open == Features.Filters) { } @if (errorSummary != null) { } else if (apiLoading) { } else {
@if (Results.Count > 0) {
@Columns
}
}
} @inherits UiComponentBase @ChildContent @if (Label != null) { @if (Icon != null) { } @Label } else { } @typeparam TValue @inherits CheckboxInputBase
@if (HasErrorField) {

@ErrorFieldMessage

} else if (!string.IsNullOrEmpty(UseHelp)) {

@UseHelp

}
@inherits UiComponentBase @inherits UiComponentBase @typeparam Model @inherits UiComponentBase @ChildContent @if (Items.Count > 0) { @if (ShowFilters != null) {
}
@foreach (var column in VisibleColumns) { var allowFiltering = AllowFiltering && column.AllowFiltering && !TextUtils.IsComplexType(column.FieldType) && !column.IsComputed; var isOpen = column == ShowFilters; } @{ var i = 0; } @foreach (var item in Items) { @foreach (var column in VisibleColumns) { @column.CellTemplate(item) } }
@if (!allowFiltering) {
@column.HeaderTemplate
} else {
@column.HeaderTemplate
}
} @typeparam TValue @inherits DateTimeInputBase
@if (!string.IsNullOrEmpty(UseLabel)) { }
@if (HasErrorField) {
}
@if (HasErrorField) {

@ErrorFieldMessage

} else if (!string.IsNullOrEmpty(UseHelp)) {

@UseHelp

}
@inherits DynamicInputBase @if (IsSelect) { } else if (IsCheckbox) { } else if (UseType == "file") { string? value = null; ICollection? values = null; UploadedFile? file = null; List? files = null; if (ValueObject != null) { value = ValueObject as string; if (value == null) { values = ValueObject as ICollection; if (values == null) { if (ValueObject is System.Collections.IEnumerable) { files = ValueObject.ConvertTo>(); } else { file = ValueObject.ConvertTo(); } } } } } else if (UseType == "tag") { } else { } @inherits AuthBlazorComponentBase @if (!IsAuthenticated) {
} @inherits ErrorSummaryBase @if (UseStatus.ShowSummary(UseExcept)) { } @using Microsoft.AspNetCore.Components.Forms @inherits TextInputBase @implements IDisposable
@if (!string.IsNullOrEmpty(UseLabel)) { }
UseHelp ?? UseLabel @{ var cls = @ClassNames("block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900", CssClass("block w-full text-sm text-slate-500 dark:text-slate-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-50 dark:file:bg-violet-900 file:text-violet-700 dark:file:text-violet-200 hover:file:bg-violet-100 dark:hover:file:bg-violet-800", "pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500")); } @if (HasErrorField) {
}
@if (HasErrorField) {

@ErrorFieldMessage

} else if (!string.IsNullOrEmpty(UseHelp)) {

@UseHelp

}
@if (!Multiple) { var src = imgSrc(); if (!string.IsNullOrEmpty(src)) {
@($"Current
} } else if (FileList.Count > 0) {
@foreach (var file in FileList) { var filePath = file.FilePath ?? ""; var src = FileIcons.FilePathUri(filePath)!; }
@if (!isDataUri(filePath)) { @file.FileName } else { @file.FileName }
@if (file.ContentLength > 0) { @TextUtils.FormatBytes(file.ContentLength) }
}
@code { string? imgSrc() { var inputFile = inputFiles?.FirstOrDefault(); if (inputFile != null) return inputFile.FilePath; var filePath = Value ?? Values?.FirstOrDefault() ?? File?.FilePath ?? Files?.FirstOrDefault()?.FilePath; if (filePath != null) { var resolvedFilePath = BlazorConfig.Instance.AssetsPathResolver(filePath); return FileIcons.FilePathUri(resolvedFilePath); } return null; } bool isDataUri(string? src) => src == null ? false : src.StartsWith("data:") || src.StartsWith("blob:"); string imgCls(string? src) => string.IsNullOrEmpty(src) || src.StartsWith("data:") || src.EndsWith(".svg") ? "" : "rounded-full object-cover"; } @using Microsoft.AspNetCore.Components.Forms @typeparam TReq @inherits BlazorComponentBase
}
@((MarkupString) HtmlUtils.HtmlDump(Value ?? ""))
@inherits UiComponentBase @((MarkupString)ToHtml()) @inherits UiComponentBase @if (!string.IsNullOrEmpty(prerenderedHtml)) { @((MarkupString)prerenderedHtml) } else {

@Message

} @inherits TextInputBase @implements IHasJsonApiClient
@if (!string.IsNullOrEmpty(UseLabel)) {
@if (!string.IsNullOrEmpty(Value)) {
@Value
}
} @if (Property.Ref != null) {
} else if (ErrorFieldMessage != null) {

@ErrorFieldMessage

}
@code { } @inherits UiComponentBase @typeparam Model @inherits ModalLookup
@if (apiLoading) { Querying... } else if (Results.Count > 0) { @(Skip + 1) - @Math.Min(Skip + Results.Count, Total) of @Total } else if (Api != null) { No Results }
@if (hasPrefs) {
} @if (filtersCount > 0) {
}
@if (open == Features.Filters) { } @if (errorSummary != null) { } else if (apiLoading) { } else {
@if (Results.Count > 0) {
@Columns
}
}
@inherits UiComponentBase @if (!string.IsNullOrEmpty(Title)) {

@Title

}
    @ChildContent
@inherits UiComponentBase

  • @Title

    @ChildContent

    • @using System.Collections @using ServiceStack.Text @{ void RenderValue(object? value) { if (Format?.Method == null) { @FormatValue(value) } else { var str = $"{value}"; var attrs = (Format.Options != null ? BlazorConfig.Instance.JSParseObject(Format.Options) : null) ?? new(); var cls = attrs.Remove("cls", out var oClass) ? oClass as string : null; if (Format.Method == FormatMethods.IconRounded) { var src = str; } else if (Format.Method == FormatMethods.Icon) { var src = str; } else if (Format.Method == FormatMethods.Currency) { @($"{value.ConvertTo():C}") } else if (Format.Method == FormatMethods.Bytes) { @TextUtils.FormatBytes(value.ConvertTo()) } else if (Format.Method.StartsWith("link")) { if (Format.Method == FormatMethods.Link) { @str } else if (Format.Method == FormatMethods.LinkPhone) { @str } else if (Format.Method == FormatMethods.LinkEmail) { var href = str; if (attrs.Remove("subject", out var oSubject) && oSubject is string subject) href = href.AddQueryParam("subject", subject.UrlEncode().Replace("+", "%20"), encode: false); if (attrs.Remove("body", out var oBody) && oBody is string body) href = href.AddQueryParam("body", body.UrlEncode().Replace("+","%20"), encode:false); @str } } else if (Format.Method == FormatMethods.Attachment) { var url = str; var fileName = FileIcons.GetFileName(url)!; var ext = FileIcons.GetExt(fileName); var imgSrc = ext == null || FileIcons.CanPreview(url) ? BlazorConfig.Instance.AssetsPathResolver(url) : FileIcons.IconFallbackSrc(url); @fileName } else if (Format.Method != FormatMethods.Hidden) { @FormatValue(value) } } } } @if (TextUtils.IsComplexType(Value?.GetType())) { var useValue = Value; var e = Value as IEnumerable; var isCollection = e != null && Value is not IDictionary; var count = e != null && isCollection && IncludeCount ? EnumerableUtils.Count(e) : 0; @if (isCollection) { useValue = EnumerableUtils.FirstOrDefault(e); @count } @if (IncludeIcon) { } @if (isCollection) { @("[ ") } @if (!isCollection || count > 0) { @("{ ") @if (TextUtils.IsComplexType(useValue?.GetType())) { var dict = useValue.ToObjectDictionary(); var keys = dict.Keys.ToList(); var len = Math.Min(MaxNestedFields, keys.Count); for (var i = 0; i < len; i++) { var key = keys[i]; var val = dict[key]; var value = FormatValue(val); var str = TextUtils.Truncate(value, MaxNestedFieldLength); if (i > 0) { @(", ") } { @key @($": {str}") } } if (keys.Count > len) { @("...") } } else { RenderValue(useValue); } @(" }") } @if (isCollection) { @(" ]") } } else { RenderValue(Value); } @inherits UiComponentBase @if (!string.IsNullOrEmpty(href)) { @ChildContent } else { } @code { string colors => Style switch { ButtonStyle.Blue => "text-white bg-blue-600 hover:bg-blue-700 focus:ring-indigo-500 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800", ButtonStyle.Purple => "text-white bg-purple-600 hover:bg-purple-700 focus:ring-indigo-500 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800", ButtonStyle.Red => "focus:ring-red-500 text-white bg-red-600 hover:bg-red-700 focus:ring-red-500 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-500", ButtonStyle.Green => "focus:ring-green-300 text-white bg-green-600 hover:bg-green-700 focus:ring-green-500 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-500", ButtonStyle.Sky => "focus:ring-sky-300 text-white bg-sky-600 hover:bg-sky-700 focus:ring-sky-500 dark:bg-sky-600 dark:hover:bg-sky-700 dark:focus:ring-sky-500", ButtonStyle.Cyan => "focus:ring-cyan-300 text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-cyan-500 dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:focus:ring-cyan-500", _ => "focus:ring-2 focus:ring-offset-2 text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" }; string cls => "inline-flex justify-center rounded-md border border-transparent py-2 px-4 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-black " + colors; } @inherits UiComponentBase @if (!string.IsNullOrEmpty(href)) { @ChildContent } else { } @code { string colors => "bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-400 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:ring-offset-black"; string cls => "inline-flex justify-center rounded-md border border-gray-300 py-2 px-4 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 " + colors; } @typeparam TValue @inherits SelectInputBase
    @if (!string.IsNullOrEmpty(UseLabel)) { } @if (HasErrorField) {

    @ErrorFieldMessage

    }
    @inherits BlazorComponentBase @inherits TextInputBase>
    @if (!string.IsNullOrEmpty(UseLabel)) { }
    @{ var cls = ClassNames("w-full cursor-text flex flex-wrap sm:text-sm rounded-md dark:text-white dark:bg-gray-900 border focus-within:border-transparent focus-within:ring-1 focus-within:outline-none", CssClass("shadow-sm border-gray-300 dark:border-gray-600 focus-within:ring-indigo-500 focus-within:border-indigo-500", "pr-10 border-red-300 text-red-900 placeholder-red-300 focus-within:outline-none focus-within:ring-red-500 focus-within:border-red-500")); }
    }
    @if (HasErrorField) {
    } @if (HasErrorField) {

    @ErrorFieldMessage

    } else if (!string.IsNullOrEmpty(UseHelp)) {

    @UseHelp

    } @typeparam TValue @inherits TextInputBase
    @if (!string.IsNullOrEmpty(UseLabel)) { }
    } else { } @if (HasErrorField) {
    }
    @if (HasErrorField) {

    @ErrorFieldMessage

    } else if (!string.IsNullOrEmpty(UseHelp)) {

    @UseHelp

    }
    @inherits UiComponentBase @ChildContent using ServiceStack.Blazor.Components; namespace ServiceStack.Blazor; /// /// For CSS classes used in *.cs so they're exported to tailwind.html /// public static class CssDefaults { public static class Grid { public const TableStyle DefaultTableStyle = TableStyle.StripedRows; public const string GridClass = "mt-4 flex flex-col"; public const string Grid2Class = "-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8"; public const string Grid3Class = "inline-block min-w-full py-2 align-middle md:px-6 lg:px-8"; public const string Grid4Class = "overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg"; public const string TableClass = "min-w-full divide-y divide-gray-200 dark:divide-gray-700"; public const string TableHeadClass = "bg-gray-50 dark:bg-gray-900"; public const string TableCellClass = "px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400"; public const string TableHeaderRowClass = "select-none"; public const string TableHeaderCellClass = "px-6 py-4 text-left text-sm font-medium tracking-wider whitespace-nowrap"; public const string TableBodyClass = ""; public static string GetGridClass(TableStyle style = DefaultTableStyle) => GridClass; public static string GetGrid2Class(TableStyle style = DefaultTableStyle) => style.HasFlag(TableStyle.FullWidth) ? "overflow-x-auto" : Grid2Class; public static string GetGrid3Class(TableStyle style = DefaultTableStyle) => style.HasFlag(TableStyle.FullWidth) ? "inline-block min-w-full py-2 align-middle" : Grid3Class; public static string GetGrid4Class(TableStyle style = DefaultTableStyle) => style.HasFlag(TableStyle.WhiteBackground) ? "" : style.HasFlag(TableStyle.FullWidth) ? "overflow-hidden shadow-sm ring-1 ring-black ring-opacity-5" : Grid4Class; public static string GetTableClass(TableStyle style = DefaultTableStyle) => style.HasFlag(TableStyle.FullWidth) || style.HasFlag(TableStyle.VerticalLines) ? "min-w-full divide-y divide-gray-300" : TableClass; public static string GetTableHeadClass(TableStyle style = DefaultTableStyle) => style.HasFlag(TableStyle.WhiteBackground) ? "" : TableHeadClass; public static string GetTableHeaderRowClass(TableStyle style = DefaultTableStyle) => TableHeaderRowClass + (style.HasFlag(TableStyle.VerticalLines) ? " divide-x divide-gray-200 dark:divide-gray-700" : ""); public static string GetTableHeaderCellClass(TableStyle style = DefaultTableStyle) => TableHeaderCellClass + (style.HasFlag(TableStyle.UppercaseHeadings) ? " uppercase" : ""); public static string GetTableBodyClass(TableStyle style = DefaultTableStyle) => (style.HasFlag(TableStyle.WhiteBackground) || style.HasFlag(TableStyle.VerticalLines) ? "divide-y divide-gray-200 dark:divide-gray-800" : "") + (style.HasFlag(TableStyle.VerticalLines) ? " bg-white" : ""); public static string GetTableRowClass(TableStyle style, int i, bool selected, bool allowSelection) => (allowSelection ? "cursor-pointer " : "") + (selected ? "bg-indigo-100 dark:bg-blue-800" : (allowSelection ? "hover:bg-yellow-50 dark:hover:bg-blue-900 " : "") + (style.HasFlag(TableStyle.StripedRows) ? (i % 2 == 0 ? "bg-white dark:bg-black" : "bg-gray-50 dark:bg-gray-800") : "bg-white dark:bg-black")) + (style.HasFlag(TableStyle.VerticalLines) ? " divide-x divide-gray-200 dark:divide-gray-700" : ""); } public static class Form { public const FormStyle DefaultFormStyle = FormStyle.SlideOver; public static string GetPanelClass(FormStyle style = FormStyle.SlideOver) => style == FormStyle.Card ? Card.PanelClass : SlideOver.PanelClass; public static string GetFormClass(FormStyle style = FormStyle.SlideOver) => style == FormStyle.Card ? Card.FormClass : SlideOver.FormClass; public static string GetHeadingClass(FormStyle style = FormStyle.SlideOver) => style == FormStyle.Card ? Card.HeadingClass : SlideOver.HeadingClass; public static string GetSubHeadingClass(FormStyle style = FormStyle.SlideOver) => style == FormStyle.Card ? Card.SubHeadingClass : SlideOver.SubHeadingClass; public const string ButtonsClass = "mt-4 px-4 py-3 bg-gray-50 dark:bg-gray-900 sm:px-6 flex flex-wrap justify-between"; public const string LegendClass = "text-base font-medium text-gray-900 dark:text-gray-100 text-center mb-4"; public static class SlideOver { public const string PanelClass = "pointer-events-auto w-screen xl:max-w-3xl md:max-w-xl max-w-lg"; public const string FormClass = "flex h-full flex-col divide-y divide-gray-200 dark:divide-gray-700 shadow-xl bg-white dark:bg-black"; public const string TitlebarClass = "bg-gray-50 dark:bg-gray-900 px-4 py-6 sm:px-6"; public const string HeadingClass = "text-lg font-medium text-gray-900 dark:text-gray-100"; public const string SubHeadingClass = "mt-1 text-sm text-gray-500 dark:text-gray-400"; public const string CloseButtonClass = "rounded-md bg-gray-50 dark:bg-gray-900 text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:ring-offset-black"; public static DataTransition SlideOverTransition = new DataTransition( entering: new(@class: "transform transition ease-in-out duration-500 sm:duration-700", from: "translate-x-full", to: "translate-x-0"), leaving: new(@class: "transform transition ease-in-out duration-500 sm:duration-700", from: "translate-x-0", to: "translate-x-full"), visible: false); } public static class Card { public const string PanelClass = "shadow sm:overflow-hidden sm:rounded-md"; public const string FormClass = "space-y-6 bg-white dark:bg-black py-6 px-4 sm:p-6"; public const string HeadingClass = "text-lg font-medium leading-6 text-gray-900 dark:text-gray-100"; public const string SubHeadingClass = "mt-1 text-sm text-gray-500 dark:text-gray-400"; } } public static class Modal { public const string SizeClass = "sm:max-w-prose lg:max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl sm:w-full"; } public static class SlideOver { public const string SlideOverClass = "relative z-10"; public const string DialogClass = "pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16"; public const string PanelClass = "pointer-events-auto w-screen xl:max-w-3xl md:max-w-xl max-w-lg"; public const string FormClass = "flex h-full flex-col divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-black shadow-xl"; public const string TitlebarClass = "bg-gray-50 dark:bg-gray-900 p-3 sm:p-6"; public const string HeadingClass = "text-lg font-medium text-gray-900 dark:text-gray-50"; public const string CloseButtonClass = "rounded-md bg-gray-50 dark:bg-black text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:ring-offset-black"; public const string TransitionClass = "transform transition ease-in-out duration-500 sm:duration-700"; } public static class HtmlFormat { public const string Class = "prose html-format"; } public static class PreviewFormat { public const string Class = "flex items-center"; public const string IconClass = "w-6 h-6"; public const string IconRoundedClass = "w-8 h-8 rounded-full"; public const string ValueIconClass = "w-5 h-5 mr-1"; } public static string ToBreakpointCellClass(this Breakpoint breakpoint) => breakpoint switch { // Use full class names so tailwindcss can find it Breakpoint.ExtraSmall => "xs:table-cell", Breakpoint.Small => "sm:table-cell", Breakpoint.Medium => "md:table-cell", Breakpoint.Large => "lg:table-cell", Breakpoint.ExtraLarge => "xl:table-cell", Breakpoint.ExtraLarge2x => "2xl:table-cell", _ => throw new NotSupportedException(), }; } public enum Breakpoint { ExtraSmall, Small, Medium, Large, ExtraLarge, ExtraLarge2x, }