add slider, icons

pureblazor · Jul 24, 2024 · 742dd7d · 742dd7d
1 parent e585695
commit 742dd7d
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 2 deletions.
diff --git a/Directory.Packages.props b/Directory.Packages.props
@@ -116,7 +116,7 @@
     <PackageVersion Include="System.Reactive.Async" Version="6.0.0-alpha.18" />
     <PackageVersion Include="System.ServiceModel.Primitives" Version="8.0.0" />
     <PackageVersion Include="System.Text.Encodings.Web" Version="8.0.0" />
-    <PackageVersion Include="System.Text.Json" Version="8.0.3" />
+    <PackageVersion Include="System.Text.Json" Version="8.0.4" />
     <PackageVersion Include="Testcontainers" Version="3.8.0" />
     <PackageVersion Include="Ulid" Version="1.3.3" />
     <PackageVersion Include="Wasmtime" Version="19.0.1" />

diff --git a/src/Pure.Blazor.Components.Icons/PureIcon.cs b/src/Pure.Blazor.Components.Icons/PureIcon.cs
@@ -165,6 +165,8 @@ private static string BuildMarkup(PureIcons icon)
             PureIcons.IconPlay =>
                 "<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z\" />",
             PureIcons.IconClock => "<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\" />",
+            PureIcons.PencilSquare => "<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10\" />",
+            PureIcons.XMark => "<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />",
             _ => ""
         };
 

diff --git a/src/Pure.Blazor.Components.Icons/PureIcons.cs b/src/Pure.Blazor.Components.Icons/PureIcons.cs
@@ -53,5 +53,7 @@ public enum PureIcons
     IconLongArrowUp,
     IconWrenchScrewdriver,
     IconPlay,
-    IconClock
+    IconClock,
+    PencilSquare,
+    XMark
 }
diff --git a/src/Pure.Blazor.Components/Forms/PureSlider.razor b/src/Pure.Blazor.Components/Forms/PureSlider.razor
@@ -0,0 +1,23 @@
+@* @using Microsoft.JSInterop *@
+@* @inject IJSRuntime JSRuntime *@
+
+<input type="range" min="@Min" max="@Max" step="@Step" value="@Value" @oninput="HandleInput" class="slider w-full h-2 bg-brand-600/20 rounded-lg appearance-none cursor-pointer"/>
+
+@code {
+    [Parameter] public double Min { get; set; } = 0;
+    [Parameter] public double Max { get; set; } = 5;
+    [Parameter] public double Step { get; set; } = 1;
+    [Parameter] public double Value { get; set; } = 0;
+    [Parameter] public EventCallback<double> ValueChanged { get; set; }
+
+    private async Task HandleInput(ChangeEventArgs e)
+    {
+        if (double.TryParse(e.Value?.ToString(), out double newValue))
+        {
+            Value = newValue;
+            await ValueChanged.InvokeAsync(Value);
+            // await JSRuntime.InvokeVoidAsync("sliderTactileFeedback");
+        }
+    }
+
+}
diff --git a/src/Pure.Blazor.Components/tailwind.css b/src/Pure.Blazor.Components/tailwind.css
@@ -15,3 +15,31 @@
     --color-brand-900: #074873;
     --color-brand-950: #052e4c;
 }
+
+.slider::-webkit-slider-thumb {
+    @apply w-4 h-4 bg-blue-500 rounded-full cursor-pointer appearance-none;
+}
+
+.slider::-moz-range-thumb {
+    @apply w-4 h-4 bg-blue-500 rounded-full cursor-pointer appearance-none;
+}
+
+.slider::-webkit-slider-thumb:hover {
+    @apply bg-blue-700;
+}
+
+.slider::-moz-range-thumb:hover {
+    @apply bg-blue-700;
+}
+
+.slider:focus {
+    @apply outline-none;
+}
+
+.slider:focus::-webkit-slider-thumb {
+    @apply ring-2 ring-offset-2 ring-blue-500;
+}
+
+.slider:focus::-moz-range-thumb {
+    @apply ring-2 ring-offset-2 ring-blue-500;
+}