alerts, toast amd breadcrum

storage/templates/tabler/includes/alert.html

@@ -0,0 +1,40 @@
+{{define "tabler_alert"}}
+{{$a := .}}
+{{$icon := $a.Type}}
+{{if eq $a.Type "success"}}{{$icon = "check"}}{{else if eq $a.Type "warning"}}{{$icon = "alert-triangle"}}{{else if eq $a.Type "danger"}}{{$icon = "alert-circle"}}{{else if eq $a.Type "info"}}{{$icon = "info-circle"}}{{end}}
+<div class="alert{{if $a.Important}} alert-important{{else if $a.Minor}} alert-minor{{end}} alert-{{$a.Type}}{{if $a.ShowClose}} alert-dismissible{{end}}{{if $a.Avatar}} alert-avatar{{end}}{{if $a.Class}} {{$a.Class}}{{end}}" role="alert">
+  <div class="alert-icon">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon alert-icon">
+      {{if eq $icon "check"}}<path d="M5 12l5 5l10 -10"></path>
+      {{else if eq $icon "alert-triangle"}}<path d="M12 9v4"></path><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.871l-8.106 -13.534a1.914 1.914 0 0 0 -3.274 0z"></path><path d="M12 16h.01"></path>
+      {{else if eq $icon "alert-circle"}}<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 8v4"></path><path d="M12 16h.01"></path>
+      {{else if eq $icon "info-circle"}}<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 16v-4"></path><path d="M12 8h.01"></path>
+      {{end}}
+    </svg>
+  </div>
+  {{if or $a.Description $a.List}}
+  <div>
+    <h4 class="alert-heading">{{defaultVal "This is a custom alert box!" $a.Title}}</h4>
+    <div class="alert-description">
+      {{$a.Description}}
+      {{if $a.List}}
+      <ul class="alert-list">
+        {{range $a.List}}<li>{{.}}</li>{{end}}
+      </ul>
+      {{end}}
+    </div>
+  </div>
+  {{else}}
+  {{defaultVal "This is a custom alert box!" $a.Title}}
+  {{if $a.Action}}<a href="#" class="alert-action">{{$a.Action}}</a>{{end}}
+  {{if $a.Link}}<a href="#" class="alert-link">{{$a.Link}}</a>{{end}}
+  {{end}}
+  {{if $a.Buttons}}
+  <div class="btn-list">
+    <a href="#" class="btn btn-{{$a.Type}}">Okay</a>
+    <a href="#" class="btn">Cancel</a>
+  </div>
+  {{end}}
+  {{if $a.ShowClose}}<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>{{end}}
+</div>
+{{end}}

storage/templates/tabler/includes/breadcrumb.html

@@ -0,0 +1,22 @@
+{{define "tabler_breadcrumb"}}
+{{$b := .}}
+<nav aria-label="Breadcrumb">
+  <ol class="breadcrumb{{if $b.Class}} {{$b.Class}}{{end}}{{if $b.Separator}} breadcrumb-{{$b.Separator}}{{end}}">
+    {{range $i, $item := $b.Items}}
+    {{if $item.Link}}
+    <li class="breadcrumb-item">
+      {{if and (eq $i 0) $item.HomeIcon}}
+      <a href="{{$item.Link}}">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M5 12l-2 0l9 -9l9 9l-2 0"></path><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path></svg>
+      </a>
+      {{else}}
+      <a href="{{$item.Link}}">{{$item.Title}}</a>
+      {{end}}
+    </li>
+    {{else}}
+    <li class="breadcrumb-item active" aria-current="page">{{$item.Title}}</li>
+    {{end}}
+    {{end}}
+  </ol>
+</nav>
+{{end}}

storage/templates/tabler/includes/components_content.html

@@ -0,0 +1,36 @@
+{{define "tabler_components_content"}}
+{{$c := .}}
+
+{{if hasField $c "Alerts"}}
+<div class="card mb-3">
+  <div class="card-header"><h3 class="card-title">Alerts</h3></div>
+  <div class="card-body">
+    {{range $c.Alerts}}
+    {{template "tabler_alert" .}}
+    {{end}}
+  </div>
+</div>
+{{end}}
+
+{{if hasField $c "Breadcrumbs"}}
+<div class="card mb-3">
+  <div class="card-header"><h3 class="card-title">Breadcrumbs</h3></div>
+  <div class="card-body">
+    {{range $c.Breadcrumbs}}
+    {{template "tabler_breadcrumb" .}}
+    {{end}}
+  </div>
+</div>
+{{end}}
+
+{{if hasField $c "Toasts"}}
+<div class="card mb-3">
+  <div class="card-header"><h3 class="card-title">Toasts</h3></div>
+  <div class="card-body">
+    {{range $c.Toasts}}
+    {{template "tabler_toast" .}}
+    {{end}}
+  </div>
+</div>
+{{end}}
+{{end}}

storage/templates/tabler/includes/toast.html

@@ -0,0 +1,23 @@
+{{define "tabler_toast"}}
+{{$t := .}}
+<div class="toast{{if $t.Show}} show{{end}}" id="toast-{{defaultVal "simple" $t.ID}}" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
+  {{if not $t.HideHeader}}
+  <div class="toast-header">
+    <span class="avatar avatar-xs me-2" style="background-image: url({{defaultVal "/public/static/avatars/000m.jpg" $t.PersonSrc}})"></span>
+    <strong class="me-auto">{{defaultVal "Jane Doe" $t.PersonName}}</strong>
+    <small>{{defaultVal "11 mins ago" $t.Date}}</small>
+    <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+  </div>
+  {{end}}
+  <div class="toast-body">
+    {{if $t.Cookies}}
+    🍪&nbsp;Our site uses cookies. By continuing to use our site, you agree to our Cookie Policy.
+    <div class="mt-2 pt-2 border-top">
+      <a href="#" class="btn btn-primary btn-sm">I understand</a>
+    </div>
+    {{else}}
+    {{defaultVal "Hello, world! This is a toast message." $t.Text}}
+    {{end}}
+  </div>
+</div>
+{{end}}

storage/templates/tabler/layouts/default.html

@@ -32,6 +32,8 @@
             </div>
             {{end}}
           </div>
+        {{else if hasField . "Components"}}
+          {{template "tabler_components_content" .Components}}
         {{else if hasField . "Tables"}}
           {{range .Tables}}
           <div class="card{{if .CardClass}} {{.CardClass}}{{end}}">