@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) {
@c.Value
}
} else {
@foreach (var filter in filters) {
@Column.Name @filter.Name @Column.GetFilterValue(filter)
} @foreach (var rule in Column.FilterRules) { @rule.Name } @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()) {
@value
}
} else {
@foreach (var f in c.Filters) {
@c.Name @f.Name @c.GetFilterValue(f)
}
}
}
@namespace ServiceStack.Blazor.Components.Tailwind @inherits UiComponentBase

### Query Preferences

Results per page
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"> View all columns
@foreach (var c in Columns) {
@c.Name
}
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) {

### @if (!string.IsNullOrEmpty(Message)) { @Message } else { @ChildContent }

} @code { bool dismissed = false; public static string Classes { get; set; } = "rounded-md bg-green-50 dark:bg-green-200 p-4"; } @typeparam T @inherits TextInputBase
@if (!string.IsNullOrEmpty(Label)) { @UseLabel }
@if (showPopup) {

@foreach (var option in FilteredValues) {
- @Item!(option) @if (Values.Contains(option)) {
  }
}

} 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 {

## @Title

@if (SubHeading != null) {

@SubHeading

} else if (Notes != null) {

@((MarkupString)Notes)

}
Cancel Save
} @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 {

## @Title

@if (SubHeading != null) {

@SubHeading

} else if (Notes != null) {

@((MarkupString)Notes)

}
@if (DeleteApiType != null) { }
Cancel Save
} @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) { Showing Results @(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
@UseLabel @if (HasErrorField) {

@ErrorFieldMessage

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

@UseHelp

}
@inherits UiComponentBase @ConfirmLabel
@code { public static string CheckboxClasses { get; set; } = "focus:ring-indigo-500 h-4 w-4 text-indigo-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-black"; public static string LabelClasses { get; set; } = "mx-1 select-none dark:text-gray-300"; public static string ButtonClasses { get; set; } = "select-none inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white"; public static string EnabledClasses { get; set; } = "cursor-pointer bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"; public static string DisabledClasses { get; set; } = "bg-red-400"; } @inherits UiComponentBase
@code { public static string ButtonClasses { get; set; } = "bg-gray-200 dark:bg-gray-700 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black"; public static string InnerClasses { get; set; } = "pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white dark:bg-black shadow transform ring-0 transition ease-in-out duration-200"; public static string IconClasses { get; set; } = "absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"; } @inherits UiComponentLiteBase
@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; @if (!allowFiltering) { @column.HeaderTemplate } else { @column.HeaderTemplate } }
@{ var i = 0; } @foreach (var item in Items) {
@foreach (var column in VisibleColumns) { @column.CellTemplate(item) }
}

} @typeparam TValue @inherits DateTimeInputBase
@if (!string.IsNullOrEmpty(UseLabel)) { @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) {
} @code { public static string ButtonClasses { get; set; } = "flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"; } @inherits ErrorSummaryBase @if (UseStatus.ShowSummary(UseExcept)) {

@UseStatus.SummaryMessage(UseExcept)

} @code { public static string Classes { get; set; } = "bg-red-50 dark:bg-red-200 border-l-4 border-red-400 p-4"; public static string MessageClasses { get; set; } = "text-sm text-red-700 dark:text-red-800"; } @using Microsoft.AspNetCore.Components.Forms @inherits TextInputBase @implements IDisposable
@if (!string.IsNullOrEmpty(UseLabel)) { @UseLabel }
UseHelp ?? UseLabel @{ var cls = @ClassNames(InputBaseClasses, CssClass(InputValidClasses, InputInvalidClasses)); } @if (HasErrorField) {
}
@if (HasErrorField) {

@ErrorFieldMessage

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

@UseHelp

}
@if (!Multiple) { var src = imgSrc(); if (!string.IsNullOrEmpty(src)) {
} } 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"; public static string ErrorClasses { get; set; } = "mt-2 text-sm text-red-500"; public static string LabelClasses { get; set; } = "block text-sm font-medium text-gray-700 dark:text-gray-300"; public static string InputBaseClasses { get; set; } = "block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900"; public static string InputValidClasses { get; set; } = "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"; public static string InputInvalidClasses { get; set; } = "pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500"; public static string InputClasses { get; set; } = InputBaseClasses + " " + InputValidClasses; } @using Microsoft.AspNetCore.Components.Forms @typeparam TReq @inherits BlazorComponentBase
@if (!uploading) { Drop files to Attach, or browse } else { @progress } @if (toggleInputClear) { } else { }
} @code { public static string LabelClasses { get; set; } = "flex justify-center w-full h-32 px-4 transition border-2 border-gray-300 border-dashed rounded-md appearance-none cursor-pointer hover:border-gray-400 focus:outline-none"; } @inherits UiComponentLiteBase

# @ChildContent

@code { [Parameter, EditorRequired] public RenderFragment? ChildContent { get; set; } public static string Classes { get; set; } = "mb-4 text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl"; } @inherits UiComponentLiteBase

## @ChildContent

@code { [Parameter, EditorRequired] public RenderFragment? ChildContent { get; set; } public static string Classes { get; set; } = "mb-4 text-3xl md:text-4xl font-bold tracking-tighter leading-tight md:pr-8 whitespace-nowrap text-center pt-8"; } @inherits UiComponentLiteBase

### @ChildContent

@code { [Parameter, EditorRequired] public RenderFragment? ChildContent { get; set; } public static string Classes { get; set; } = "mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-100 leading-tight"; } @inherits UiComponentLiteBase

#### @ChildContent

@code { [Parameter, EditorRequired] public RenderFragment? ChildContent { get; set; } public static string Classes { get; set; } = "text-xl font-semibold text-gray-900 dark:text-gray-100 leading-tight"; }
@((MarkupString) HtmlUtils.HtmlDump(Value ?? ""))
@inherits UiComponentLiteBase @ChildContent @code { [Parameter, EditorRequired] public RenderFragment? ChildContent { get; set; } public static string Classes => GetStyleClass(LinkStyle.Indigo); [Parameter] public LinkStyle Style { get; set; } = LinkStyle.Indigo; public static string GetStyleClass(LinkStyle style) => style switch { LinkStyle.Blue => "text-blue-600 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-400", LinkStyle.Red => "text-red-600 dark:text-red-300 hover:text-red-500 dark:hover:text-red-400", LinkStyle.Green => "text-green-600 dark:text-green-300 hover:text-green-500 dark:hover:text-green-400", LinkStyle.Sky => "text-sky-600 dark:text-sky-300 hover:text-sky-500 dark:hover:text-sky-400", _ => "text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400" }; } @inherits UiComponentBase @((MarkupString)ToHtml()) @inherits UiComponentBase @if (!string.IsNullOrEmpty(prerenderedHtml)) { @((MarkupString)prerenderedHtml) } else {

#
@Message

} @code { public static string Classes = "mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-300"; } @inherits TextInputBase @implements IHasJsonApiClient @if (AppMetadata != null) {
@if (!string.IsNullOrEmpty(UseLabel)) {
@UseLabel @if (!string.IsNullOrEmpty(Value)) {
@Value
}
} @if (Property.Ref != null) {
} else if (ErrorFieldMessage != null) {

@ErrorFieldMessage

}
} @inherits UiComponentBase
​
@ChildContent
@typeparam Model @inherits ModalLookup

### Select @ModelTitle

@if (apiLoading) { Querying... } else if (Results.Count > 0) { Showing Results @(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

@code { public static string TitleClasses { get; set; } = "text-base font-semibold text-gray-500 dark:text-gray-400"; public static string ListClasses { get; set; } = "mt-4 divide-y divide-gray-200 dark:divide-gray-800 border-t border-b border-gray-200 dark:border-gray-800"; } @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 { public static string BaseClass { get; set; } = "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"; public static string GetStyleClass(ButtonStyle style) => style switch { ButtonStyle.Blue => "text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-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-purple-500 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-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-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800" }; public static string Classes(ButtonStyle style) => BaseClass + " " + GetStyleClass(style); } @inherits UiComponentBase @if (!string.IsNullOrEmpty(href)) { @ChildContent } else {
} @code { public static string BaseClass { get; set; } = "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"; public static string SecondaryClass { get; set; } = "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"; public static string Classes => BaseClass + " " + SecondaryClass; } @typeparam TValue @inherits SelectInputBase
@if (!string.IsNullOrEmpty(UseLabel)) { @UseLabel }
@if (HasErrorField) {

@ErrorFieldMessage

}
@inherits BlazorComponentBase
@if (ShowTitlebar) {

## @Title

@if (SubHeading != null) {

@((MarkupString)SubHeading)

}
@if (ShowCloseButton) {
}
} @ChildContent
@if (ShowFooter) {
Close
}
@inherits TextInputBase>
@if (!string.IsNullOrEmpty(UseLabel)) { @UseLabel }
@{ var cls = ClassNames(InputBaseClasses, CssClass(InputValidClasses, InputInvalidClasses)); }
@if (HasErrorField) {
}
@if (HasErrorField) {

@ErrorFieldMessage

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

@UseHelp

}
@code { public static string ErrorClasses { get; set; } = "mt-2 text-sm text-red-500"; public static string LabelClasses { get; set; } = "block text-sm font-medium text-gray-700 dark:text-gray-300"; public static string InputBaseClasses { get; set; } = "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"; public static string InputValidClasses { get; set; } = "shadow-sm border-gray-300 dark:border-gray-600 focus-within:ring-indigo-500 focus-within:border-indigo-500"; public static string InputInvalidClasses { get; set; } = "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"; public static string InputClasses { get; set; } = InputBaseClasses + " " + InputValidClasses; } @typeparam TValue @inherits TextInputBase
@if (!string.IsNullOrEmpty(UseLabel)) { @UseLabel }
@if (HasErrorField) {

@ErrorFieldMessage

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

@UseHelp

}
@typeparam TValue @inherits TextInputBase
@if (!string.IsNullOrEmpty(UseLabel)) { @UseLabel }
@{ var cls = ClassNames(TextInput.InputBaseClasses, CssClass(TextInput.InputValidClasses, TextInput.InputInvalidClasses)); } @if (UseType == Html.Input.Types.Textarea) { } else { } @if (HasErrorField) {
}
@if (HasErrorField) {

@ErrorFieldMessage

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

@UseHelp

}
@inherits UiComponentBase @ChildContent @code { public static string Classes { get; set; } = "text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200"; } 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, } /* CSS Classes for Generic Components */ public static class TextInput { public static string ErrorClasses { get; set; } = "mt-2 text-sm text-red-500"; public static string LabelClasses { get; set; } = "block text-sm font-medium text-gray-700 dark:text-gray-300"; public static string InputBaseClasses { get; set; } = "block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:shadow-none"; public static string InputValidClasses { get; set; } = "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-600"; public static string InputInvalidClasses { get; set; } = "pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500"; public static string InputClasses { get; set; } = InputBaseClasses + " " + InputValidClasses; } public static class DateTimeInput { public static string ErrorClasses { get; set; } = TextInput.ErrorClasses; public static string LabelClasses { get; set; } = TextInput.LabelClasses; public static string InputBaseClasses { get; set; } = TextInput.InputBaseClasses; public static string InputValidClasses { get; set; } = TextInput.InputValidClasses; public static string InputInvalidClasses { get; set; } = TextInput.InputInvalidClasses; public static string InputClasses { get; set; } = InputBaseClasses + " " + InputValidClasses; } public static class TextAreaInput { public static string ErrorClasses { get; set; } = TextInput.ErrorClasses; public static string LabelClasses { get; set; } = TextInput.LabelClasses; public static string InputBaseClasses { get; set; } = "shadow-sm block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:shadow-none"; public static string InputValidClasses { get; set; } = "text-gray-900 focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-600"; public static string InputInvalidClasses { get; set; } = "text-red-900 focus:ring-red-500 focus:border-red-500 border-red-300"; public static string InputClasses { get; set; } = InputBaseClasses + " " + InputValidClasses; } public static class SelectInput { public static string ErrorClasses { get; set; } = TextInput.ErrorClasses; public static string LabelClasses { get; set; } = TextInput.LabelClasses; public static string InputBaseClasses { get; set; } = "mt-1 block w-full pl-3 pr-10 py-2 text-base focus:outline-none border-gray-300 sm:text-sm rounded-md dark:text-white dark:bg-gray-900 dark:border-gray-600 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:shadow-none"; public static string InputValidClasses { get; set; } = "text-gray-900 focus:ring-indigo-500 focus:border-indigo-500"; public static string InputInvalidClasses { get; set; } = "text-red-900 focus:ring-red-500 focus:border-red-500"; public static string InputClasses { get; set; } = InputBaseClasses + " " + InputValidClasses; } public static class CheckboxInput { public static string ErrorClasses { get; set; } = "text-gray-500"; public static string LabelClasses { get; set; } = "font-medium text-gray-700 dark:text-gray-300"; public static string InputClasses { get; set; } = "focus:ring-indigo-500 h-4 w-4 text-indigo-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-black"; }