add tailwind elements; clean up

README.md

@@ -12,20 +12,9 @@ Add the core view engine package.
 dotnet add package FSharp.ViewEngine
 ```
 
-Optionally add helpers.
-```shell
-dotnet add package FSharp.ViewEngine.Html
-dotnet add package FSharp.ViewEngine.Htmx
-dotnet add package FSharp.ViewEngine.Alpine
-dotnet add package FSharp.ViewEngine.Svg
-```
-
 ## Usage
 ```fsharp
 open FSharp.ViewEngine
-open FSharp.ViewEngine.Html
-open FSharp.ViewEngine.Htmx
-open FSharp.ViewEngine.Alpine
 open type Html
 open type Htmx
 open type Alpine

src/FSharp.ViewEngine/Alpine.fs

@@ -1,6 +1,7 @@
 namespace FSharp.ViewEngine
 
 type Alpine =
+    static member _by(value:string) = KeyValue("by", value)
     static member _x (key:string, ?value:string) = match value with Some v -> KeyValue ($"x-{key}", v) | None -> Boolean $"x-{key}"
     static member _xOn (event:string, v:string) = KeyValue ($"x-on:{event}", v)
     static member _xOn (event:string) = Boolean $"x-on:{event}"
@@ -34,3 +35,4 @@ type Alpine =
         match modifier with
         | Some m -> KeyValue ($"x-anchor{m}", value)
         | None -> KeyValue ("x-anchor", value)
+    static member _xTeleport(value:string) = KeyValue("x-teleport", value)

src/FSharp.ViewEngine/FSharp.ViewEngine.fsproj

@@ -15,6 +15,7 @@
     <Compile Include="Html.fs" />
     <Compile Include="Htmx.fs" />
     <Compile Include="Alpine.fs" />
+    <Compile Include="Tailwind.fs" />
     <Compile Include="Svg.fs" />
     <None Include="../../LICENSE" Pack="True" Visible="false" PackagePath=""/>
     <None Include="../../README.md" Pack="True" Visible="false" PackagePath=""/>

src/FSharp.ViewEngine/Html.fs

@@ -117,3 +117,4 @@ type Html =
     static member _wrap value = KeyValue ("wrap", value)
     static member _size (value:int) = KeyValue ("size", string value)
     static member _colspan (value:int) = KeyValue ("colspan", string value)
+    static member _onload(value:string) = KeyValue("onload", value)

src/FSharp.ViewEngine/Tailwind.fs

@@ -0,0 +1,24 @@
+namespace FSharp.ViewEngine
+
+type Tailwind =
+    static member _popover = Boolean "popover"
+    static member _anchor (position:string) = KeyValue ("anchor", position)
+    static member elAutocomplete (attrs:Attribute seq) = Tag ("el-autocomplete", attrs)
+    static member elOptions (attrs:Attribute seq) = Tag ("el-options", attrs)
+    static member elOption (attrs:Attribute seq) = Tag ("el-option", attrs)
+    static member elSelect (attrs:Attribute seq) = Tag ("el-select", attrs)
+    static member elSelectedContent (attrs:Attribute seq) = Tag ("el-selectedcontent", attrs)
+    static member elDropdown (attrs:Attribute seq) = Tag ("el-dropdown", attrs)
+    static member elMenu (attrs:Attribute seq) = Tag ("el-menu", attrs)
+    static member elDialog (attrs:Attribute seq) = Tag ("el-dialog", attrs)
+    static member elDialogBackdrop (attrs:Attribute seq) = Tag ("el-dialog-backdrop", attrs)
+    static member elDialogPanel (attrs:Attribute seq) = Tag ("el-dialog-panel", attrs)
+    static member elCommandPalette (attrs:Attribute seq) = Tag ("el-command-palette", attrs)
+    static member elCommandList (attrs:Attribute seq) = Tag ("el-command-list", attrs)
+    static member elCommandGroup (attrs:Attribute seq) = Tag ("el-command-group", attrs)
+    static member elCommandPreview (attrs:Attribute seq) = Tag ("el-command-preview", attrs)
+    static member elDefaults (attrs:Attribute seq) = Tag ("el-defaults", attrs)
+    static member elNoResults (attrs:Attribute seq) = Tag ("el-no-results", attrs)
+    static member elTabGroup (attrs:Attribute seq) = Tag ("el-tab-group", attrs)
+    static member elTabList (attrs:Attribute seq) = Tag ("el-tab-list", attrs)
+    static member elTabPanels (attrs:Attribute seq) = Tag ("el-tab-panels", attrs)

src/Tests/Tests.fs

@@ -8,6 +8,7 @@ open type Html
 open type Htmx
 open type Alpine
 open type Svg
+open type Tailwind
 
 module String =
     let replace (oldValue:string) (newValue:string) (s:string) = s.Replace(oldValue, newValue)
@@ -82,6 +83,26 @@ let ``Should render html document`` () =
                                         raw "Documentation"
                                     ]
                                 ]
+                                elSelect [
+                                    _name "status"
+                                    _value "active"
+                                    _children [
+                                        button [
+                                            _type "button"
+                                            _children [
+                                                elSelectedContent [ _children "Active" ]
+                                            ]
+                                        ]
+                                        elOptions [
+                                            _popover
+                                            _children [
+                                                elOption [ _value "active"; _children "Active" ]
+                                                elOption [ _value "inactive"; _children "Inactive" ]
+                                                elOption [ _value "archived"; _children "Archived" ]
+                                            ]
+                                        ]
+                                    ]
+                                ]
                             ]
                         ]
                     ]
@@ -123,6 +144,16 @@ let ``Should render html document`` () =
                     </svg>
                     Documentation
                 </a>
+                <el-select name="status" value="active">
+                    <button type="button">
+                        <el-selectedcontent>Active</el-selectedcontent>
+                    </button>
+                    <el-options popover>
+                        <el-option value="active">Active</el-option>
+                        <el-option value="inactive">Inactive</el-option>
+                        <el-option value="archived">Archived</el-option>
+                    </el-options>
+                </el-select>
             </div>
         </body>
     </html>