Merge pull request #248 from fluentcms/235-develop-primary-blazor-com…

…ponents 235 develop primary blazor components
fluentcms · Nov 30, 2023 · 373f88c · 373f88c
2 parents b5bf53f + 87511d8
commit 373f88c
Show file tree

Hide file tree

Showing 31 changed files with 815 additions and 58 deletions.
diff --git a/src/FluentCMS.Web.UI/Components/Core/Alert.razor b/src/FluentCMS.Web.UI/Components/Core/Alert.razor
@@ -0,0 +1,33 @@
+<div class="f-alert f-alert-type-@Type" id="@Id" role="alert">
+    <Icon Class="f-alert-icon" Pack="carbon" Name="information-filled" />
+    <div>
+        @ChildContent
+    </div>
+
+    @if (Dismissible)
+    {
+        <button type="button" class="f-alert-close" data-dismiss-target="#@Id" aria-label="Close">
+            <span class="sr-only">Close</span>
+            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+            </svg>
+        </button>
+    }
+
+</div>
+
+@code {
+    [Parameter]
+    public string Id { get; set; } = "alert-" + Guid.NewGuid().ToString();
+
+    [Parameter]
+    public string Type { get; set; } = "default";
+
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+    [Parameter]
+    public bool Dismissible { get; set; } = false;
+
+}
diff --git a/src/FluentCMS.Web.UI/Components/Core/AlertContainer.razor b/src/FluentCMS.Web.UI/Components/Core/AlertContainer.razor
@@ -0,0 +1,8 @@
+<div class="f-alert-container">
+    @ChildContent
+</div>
+
+@code {
+    [Parameter]
+    public RenderFragment ChildContent {get; set;}
+}
diff --git a/src/FluentCMS.Web.UI/Components/Core/Button.razor b/src/FluentCMS.Web.UI/Components/Core/Button.razor
@@ -1,10 +1,10 @@
 @if (Href != String.Empty) {
-<a class="f-button f-button-color-@Color" disabled=@Disabled href=@Href type="@Type" @attributes="RestProps">
+<a class="f-button f-button-color-@Color f-button-size-@Size" disabled=@Disabled href=@Href type="@Type" @attributes="RestProps">
     @ChildContent
 </a>
 
 } else {
-<button class="f-button f-button-color-@Color" disabled=@Disabled type="@Type" @attributes="RestProps">
+<button class="f-button f-button-color-@Color f-button-size-@Size" disabled=@Disabled type="@Type" @attributes="RestProps">
     @ChildContent
 </button>
 
@@ -31,7 +31,10 @@
     [Parameter]
     public string Type { get; set; } = "button";
 
+    [Parameter]
+    public string Size { get; set; } = "md";
+
     // [Parameter]
     // public EventCallback OnClick { get; set; }
 
-}
+}
diff --git a/src/FluentCMS.Web.UI/Components/Core/Card.razor b/src/FluentCMS.Web.UI/Components/Core/Card.razor
@@ -1,10 +1,9 @@
-<div class="f-card">
+<div class="@($"f-card f-card-width-{Width}")">
     @if (Title != String.Empty) {
         <CardHeader Title="@Title" />
     }
 
     @ChildContent
-
 </div>
 
 
@@ -14,4 +13,12 @@
 
     [Parameter]
     public string Title {get; set;} = String.Empty;
-}
+
+    [Parameter]
+    public string Width {get; set;} = String.Empty;
+
+    [Parameter]
+    public string Class {get; set;} = String.Empty;
+
+
+}
diff --git a/src/FluentCMS.Web.UI/Components/Core/DropdownButton.razor b/src/FluentCMS.Web.UI/Components/Core/DropdownButton.razor
@@ -1,22 +1,22 @@
-
-<Button id="dropdownDefaultButton" data-dropdown-toggle="dropdown">
-    @Text 
+<Button id="dropdown-123-button" data-dropdown-toggle="@Id">
+    @Text
 
   <svg class="f-button-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
   </svg>
 </Button>
 
-<div id="dropdown" class="f-dropdown hidden">
-    <ul class="f-dropdown-menu" aria-labelledby="dropdownDefaultButton">
-      @ChildContent
-    </ul>
-</div>
+<DropdownMenu Id="@Id">
+    @ChildContent
+</DropdownMenu>
 
 @code {
     [Parameter]
-  public string Text {get; set;}
+    public string Text {get; set;}
+
+    [Parameter]
+    public RenderFragment ChildContent {get; set;}
 
-  [Parameter]
-  public RenderFragment ChildContent {get; set;}
-}
+    [Parameter]
+    public string Id { get; set; } = "dropdown-" + Guid.NewGuid().ToString();
+}
diff --git a/src/FluentCMS.Web.UI/Components/Core/DropdownMenu.razor b/src/FluentCMS.Web.UI/Components/Core/DropdownMenu.razor
@@ -1,8 +1,15 @@
-<!-- Dropdown menu -->
-
+<div id="@Id" class="f-dropdown hidden">
+    <ul class="f-dropdown-menu" aria-labelledby="@Id">
+        @ChildContent
+    </ul>
+</div>
 
 
 @code {
   [Parameter]
   public RenderFragment ChildContent {get; set;}
-}
+
+  [Parameter]
+    public string Id { get; set; }
+
+}
diff --git a/src/FluentCMS.Web.UI/Components/Core/EditPage.razor b/src/FluentCMS.Web.UI/Components/Core/EditPage.razor
@@ -6,19 +6,19 @@
     </PageHeader>
 
 
-    <Card>
-        <CardBody>
-            @Content
-        </CardBody>
-
-        <CardFooter>
-            <ButtonGroup>
-                @FooterActions
-            </ButtonGroup>
-
-        </CardFooter>
-
-    </Card>
+    <EditForm Model="@Model" OnValidSubmit="(e) => OnValidSubmit.InvokeAsync(e)">
+        <Card>
+            <CardBody>
+                @Content
+            </CardBody>
+
+            <CardFooter>
+                <ButtonGroup>
+                    @FooterActions
+                </ButtonGroup>
+            </CardFooter>
+        </Card>
+    </EditForm>
 </Page>
 
 @code {
@@ -27,9 +27,16 @@
 
     [Parameter]
     public RenderFragment HeaderActions {get; set;}
+
     [Parameter]
     public RenderFragment Content {get; set;}
+
     [Parameter]
     public RenderFragment FooterActions {get; set;}
 
-}
+    [Parameter]
+    public string Model {get; set;}
+
+    [Parameter]
+    public EventCallback<EditContext> OnValidSubmit {get; set;}
+}
diff --git a/src/FluentCMS.Web.UI/Components/Core/Form/Checkbox.razor b/src/FluentCMS.Web.UI/Components/Core/Form/Checkbox.razor
@@ -0,0 +1,35 @@
+<div class="flex items-center">
+    <input id="@Id" type="checkbox" class="f-checkbox" disabled=@Disabled required="@Required" @bind="Checked" @attributes=@RestProps>
+
+    @if (ChildContent != null)
+    {
+        @ChildContent
+    }
+    else if (Text != "")
+    {
+        <FormCheckText>@Text</FormCheckText>
+    }
+</div>
+
+@code {
+    [Parameter]
+    public string Id { get; set; }
+
+    [Parameter]
+    public bool Required { get; set; }
+
+    [Parameter]
+    public bool Disabled { get; set; }
+
+    [Parameter]
+    public bool Checked { get; set; }
+
+    [Parameter]
+    public string Text { get; set; } = "";
+
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+    [Parameter(CaptureUnmatchedValues =true)]
+    public Dictionary<string, object> RestProps { get; set; }
+}
diff --git a/src/FluentCMS.Web.UI/Components/Core/Form/FormCheckText.razor b/src/FluentCMS.Web.UI/Components/Core/Form/FormCheckText.razor
@@ -0,0 +1,18 @@
+<div class="f-form-check">
+    @* ml-3 text-sm *@
+    @* font-medium text-gray-900 dark:text-white *@
+    <label for="@Id" class="f-form-check-text">
+        @ChildContent
+    </label>
+</div>
+
+
+@code {
+    [Parameter]
+    public string Id { get; set; }
+
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+
+}
diff --git a/src/FluentCMS.Web.UI/Components/Core/Form/FormCheckbox.razor b/src/FluentCMS.Web.UI/Components/Core/Form/FormCheckbox.razor
@@ -0,0 +1,17 @@
+<FormField Id=@Id Label=@Label>
+    <Checkbox Text=@Text Id=@Id Required=@Required/>
+</FormField>
+
+@code {
+    [Parameter]
+    public string Id {get; set;} = "f-" + Guid.NewGuid().ToString();
+
+    [Parameter]
+    public string Text { get; set; } = "";
+
+    [Parameter]
+    public string Label {get; set;} = "";
+
+    [Parameter]
+    public bool Required {get; set;} = false;
+}
diff --git a/src/FluentCMS.Web.UI/Components/Core/Form/FormInput.razor b/src/FluentCMS.Web.UI/Components/Core/Form/FormInput.razor
@@ -1,5 +1,5 @@
 <FormField Id=@Id Label=@Label>
-    <Input Type=@Type Placeholder=@Placeholder Id=@Id Required=@Required/>
+    <Input Type=@Type Placeholder=@Placeholder Id=@Id Required=@Required Name=@Name @attributes=@RestProps @bind-Value=@Value/>
 </FormField>
 
 @code {
@@ -15,6 +15,15 @@
     [Parameter]
     public string Label {get; set;} = "";
 
+    [Parameter]
+    public string Name {get; set;} = "";
+
     [Parameter]
     public bool Required {get; set;} = false;
-}
+
+    [Parameter]
+    public string Value {get; set;}
+
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object> RestProps {get; set;}
+}
diff --git a/src/FluentCMS.Web.UI/Components/Core/Form/FormTextarea.razor b/src/FluentCMS.Web.UI/Components/Core/Form/FormTextarea.razor
@@ -0,0 +1,26 @@
+<FormField Id=@Id Label=@Label>
+    <Textarea Rows=@Rows Placeholder=@Placeholder Id=@Id Required=@Required @attributes=@RestProps @bind-Value=@Value/>
+</FormField>
+
+@code {
+    [Parameter]
+    public string Placeholder {get; set;} = "";
+
+    [Parameter]
+    public string Id {get; set;} = "f-" + Guid.NewGuid().ToString();
+
+    [Parameter]
+    public string Rows {get; set;}
+
+    [Parameter]
+    public string Label {get; set;} = "";
+
+    [Parameter]
+    public bool Required {get; set;} = false;
+
+    [Parameter]
+    public string Value {get; set;}
+
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object> RestProps {get; set;}
+}
diff --git a/src/FluentCMS.Web.UI/Components/Core/Form/Input.razor b/src/FluentCMS.Web.UI/Components/Core/Form/Input.razor
@@ -1,4 +1,4 @@
-<input class="f-input" type="@Type" id="@Id" placeholder="@Placeholder" required=@Required>
+<input class="f-input" type="@Type" id="@Id" name="@Name" placeholder="@Placeholder" required=@Required>
 
 @code {
     [Parameter]
@@ -7,9 +7,15 @@
     [Parameter]
     public string Id {get; set;}
 
+    [Parameter]
+    public string Name {get; set;} = "";
+
     [Parameter]
     public string Placeholder {get; set;}
 
     [Parameter]
     public bool Required {get; set;} = false;
-}
+
+    [Parameter]
+    public string Value {get; set;} = "";
+}
diff --git a/src/FluentCMS.Web.UI/Components/Core/Form/Textarea.razor b/src/FluentCMS.Web.UI/Components/Core/Form/Textarea.razor
@@ -0,0 +1,21 @@
+<textarea class="f-textarea" id="@Id" rows="@Rows" placeholder="@Placeholder" required=@Required @attributes=@RestProps @bind="@Value" />
+
+@code {
+    [Parameter]
+    public string Rows {get; set;} = "5";
+
+    [Parameter]
+    public string Id {get; set;}
+
+    [Parameter]
+    public string Placeholder {get; set;}
+
+    [Parameter]
+    public bool Required {get; set;} = false;
+
+    [Parameter]
+    public string Value {get; set;}
+
+    [Parameter(CaptureUnmatchedValues =true)]
+    public Dictionary<string, object> RestProps {get; set;}
+}
diff --git a/src/FluentCMS.Web.UI/Components/Core/Icon.razor b/src/FluentCMS.Web.UI/Components/Core/Icon.razor
@@ -0,0 +1,21 @@
+<span class="f-icon f-icon-size-@Size @Class" @attributes=@RestProps>
+    <iconify-icon icon=@($"{Pack}:{Name}") width="100%" height="100%" />
+</span>
+
+@code {
+    [Parameter]
+    public string Name {get; set;} = "";
+
+    [Parameter]
+    public string Pack {get; set;} = "tabler";
+
+    [Parameter]
+    public string Class {get; set;} = "";
+
+    [Parameter]
+    public string Size {get; set;} = "md";
+
+
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object> RestProps {get; set;}
+}