component list

template/components/content_badge.go

@@ -0,0 +1,7 @@
+package components
+
+type ContentBadge struct {
+	Text      string
+	TypeClass string // type primary, secondary, success, danger, warning, info, light, dark, (default secondary)
+	IsOutline bool
+}

template/components/content_badge.html

@@ -0,0 +1,7 @@
+{{define "content_badge"}}
+    <span class="badge {{if eq .IsOutline true}}
+        border border-{{.TypeClass}} bg-{{.TypeClass}}-subtle text-{{.TypeClass}}-emphasis
+    {{else}}
+        text-bg-{{if .TypeClass}}{{.TypeClass}}{{else}}secondary{{end}}
+    {{end}} rounded-pill ">{{.Text}}</span>
+{{end}}

template/components/content_dropdown.go

@@ -0,0 +1,15 @@
+package components
+
+type ContentDropdown struct {
+	Label      string
+	TypeClass  string // type primary, secondary, success, danger, warning, info, light, dark, link, outline-primary
+	IsDisabled bool
+	Items      []ContentDropdownItem
+}
+
+type ContentDropdownItem struct {
+	Text       string
+	Link       string
+	IsDisabled bool
+	IsActive   bool
+}

template/components/content_dropdown.html

@@ -1,15 +1,15 @@
-{{define "form_dropdown_item"}}
+{{define "content_dropdown_item"}}
     <li><a class="dropdown-item {{if eq .IsActive true}}active{{end}} {{if eq .IsDisabled true}}disabled{{end}}" href="{{.Link}}">{{.Text}}</a></li>
 {{end}}
 
-{{define "form_dropdown"}}
+{{define "content_dropdown"}}
     <div class="dropdown">
         <button class="btn btn-{{.TypeClass}} dropdown-toggle {{if eq .IsDisabled true}}disabled{{end}}" type="button" data-bs-toggle="dropdown" aria-expanded="false">
             {{.Label}}
         </button>
         <ul class="dropdown-menu">
             {{ range .Items}}
-                {{template "form_dropdown_item" .}}
+                {{template "content_dropdown_item" .}}
             {{end}}
         </ul>
     </div>

template/components/content_href.go

@@ -1,6 +1,6 @@
 package components
 
-type FormHref struct {
+type ContentHref struct {
 	Text       string
 	Link       string
 	Icon       string

template/components/content_href.html

@@ -1,4 +1,4 @@
-{{define "form_href"}}
+{{define "content_href"}}
     <a class="{{if eq .IsButton true}} btn btn-{{.TypeClass}}{{end}} {{if eq .IsDisabled true}}disabled{{end}}" 
         href="{{.Link}}" {{if eq .IsButton true}}role="button"{{end}} {{if eq .IsDisabled true}}aria-disabled="true"{{end}}>
         {{.Text}}

template/components/content_list.go

@@ -0,0 +1,19 @@
+package components
+
+type ContentList struct {
+	Items []ContentListItem
+}
+
+type ContentListItem struct {
+	Text        string
+	Description string
+	EndElement  string
+	//Link       string
+	TypeClass  string // primary, secondary, success, danger, warning, info, light, dark
+	IsDisabled bool
+	//IsActive   bool
+}
+
+//link
+//border
+// badge

template/components/content_list.html

@@ -0,0 +1,14 @@
+{{define "content_list"}}
+    <ul class="list-group">
+        {{ range .Items}}
+            <li class="list-group-item text-wrap {{if eq .IsDisabled true}}disabled{{end}} {{if .TypeClass}}list-group-item-{{.TypeClass}}{{end}}"
+             {{if eq .IsDisabled true}}aria-disabled="true"{{end}}            
+            ><div class="d-flex justify-content-between lh-sm"><p class="mb-1">{{.Text}}</p><span class="text-body-secondary ms-5">{{.EndElement}}</span></div>
+            <small>{{.Description}}</small>
+        </li>
+        {{end}}
+    </ul>
+
+
+  
+{{end}}

template/components/content_table.go

@@ -1,17 +1,20 @@
 package components
 
 type ContentTable struct {
-	ID    string
+	ID         string
-	AllTH []ContentTableTH
+	TableClass string //   table-primary, table-secondary,.. table-striped table-bordered
-	AllTD [][]ContentTableTD
+	HeadClass  string // table-dark table-light
+	AllTH      []ContentTableTH
+	AllTD      [][]ContentTableTD
 }
 
 type ContentTableTH struct {
-	ID    string
+	ID        string
-	Value string
+	ValueType string // ->  default string, href, badge
+	Value     string
 }
 
 type ContentTableTD struct {
 	ID    string
-	Value string
+	Value interface{} // string or component struct according ValueType
 }

template/components/content_table.html

@@ -1,12 +1,25 @@
 {{define "content_table"}}
-<table class="table table-hover" {{ if .ID }}id="{{.ID}}"{{end}}>
+<table class="table table-hover {{.TableClass}}" {{ if .ID }}id="{{.ID}}"{{end}}>
-  <thead>
+  <thead class="{{.HeadClass}}">
     <tr>
       {{range $index, $col := .AllTH}}<th {{ if .ID }}id="{{.ID}}"{{end}} scope="col">{{ $col.Value }}</th>{{end}}
     </tr>
   </thead>
   <tbody>
-{{range .AllTD}}<tr scope="row">{{range .}}<td {{ if .ID }}id="{{.ID}}"{{end}}>{{ .Value }}</td>{{end}}</tr>{{end}}
+    {{range .AllTD}}<tr scope="row">
+      {{range $index, $item := .}}<td {{ if $item.ID }}id="{{$item.ID}}"{{end}}>
+        {{ with $x := index $.AllTH $index }} 
+          {{ if eq $x.ValueType "href"}}
+            {{template "content_href" $item.Value}}
+          {{ else if eq $x.ValueType "badge"}}
+            {{template "content_badge" $item.Value}}
+          {{ else }}
+            {{ $item.Value }}
+          {{end}}
+        {{end}}
+      </td>
+      {{end}}</tr>
+    {{end}}
   </tbody>
 </table>
 {{end}}

template/components/form_dropdown.go

@@ -1,15 +0,0 @@
-package components
-
-type FormDropdown struct {
-	Label      string
-	TypeClass  string
-	IsDisabled bool
-	Items      []FormDropdownItem
-}
-
-type FormDropdownItem struct {
-	Text       string
-	Link       string
-	IsDisabled bool
-	IsActive   bool
-}

template/components/form_input.go

@@ -9,4 +9,5 @@ type FormInput struct {
 	Hint        string
 	Error       string
 	IsDisabled  bool
+	IsRequired  bool
 }

template/components/form_input.html

@@ -5,6 +5,9 @@
         {{if eq .IsDisabled true}}
             disabled
         {{end}}
+        {{if eq .IsRequired true}}
+            required
+        {{end}}
         {{if ne .Value ""}}
             value="{{.Value}}"
         {{end}}

template/components/page_nav.go

@@ -1,7 +1,7 @@
 package components
 
 type PageNav struct {
-	NavClass   string // nav-pills
+	NavClass   string // nav-pills, nav-underline
 	NavItems   []PageNavItem
 	IsVertical bool
 	IsTab      bool

template/components/page_nav.html

@@ -8,7 +8,7 @@
                         class="nav-link  dropdown-toggle {{if eq .IsActive true}}active{{end}} {{if eq .IsDisabled true}}disabled{{end}}">{{$item.Text}}</a>
                     <ul class="dropdown-menu">
                         {{ range $item.ChildItems}}
-                            {{template "form_dropdown_item" .}}
+                            {{template "content_dropdown_item" .}}
                         {{end}}
                     </ul>
                 </li>