feat: update widgets and add caption to table

Author: Olivier Bonnaure

app/views/errors/index.etlua

@@ -1,4 +1,4 @@
-<div class="container mx-auto py-10 px-2">
+<div class="col-span-12 container mx-auto py-10 px-2">
   <h1>Error <%= Params.status %></h1>
 
   <p><%= Params.message %></p>

app/views/layouts/app/css_tw_src.css

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 input[type="text"],
 textarea {
@@ -37,11 +35,18 @@ a {
   @apply text-purple-400 hover:text-blue-900;
 }
 
-.material-icons-outlined.md-18 { font-size: 18px; }
-.material-icons-outlined.md-24 { font-size: 24px; }
-.material-icons-outlined.md-36 { font-size: 36px; }
-.material-icons-outlined.md-48 { font-size: 48px; }
-
+.material-icons-outlined.md-18 {
+  font-size: 18px;
+}
+.material-icons-outlined.md-24 {
+  font-size: 24px;
+}
+.material-icons-outlined.md-36 {
+  font-size: 36px;
+}
+.material-icons-outlined.md-48 {
+  font-size: 48px;
+}
 
 table {
   @apply w-full border-collapse border;
@@ -52,11 +57,11 @@ table td {
   @apply border p-2;
 }
 
-table th, table tfoot td {
+table th,
+table tfoot td {
   @apply bg-gray-800 text-white;
 }
 
 table tr:nth-child(odd) {
   @apply bg-gray-50;
 }
-

app/views/partials/components/bignumber.html.etlua

@@ -11,7 +11,7 @@
       <% if component.title then %> <h1 class="uppercase text-sm text-<%= component.color or "green" %>-600 font-bold upercase"><%= component.title %></h1> <% end %>
       <% if component.value then %>
         <h2 class="font-bold text-4xl">
-          <span id="counter_<%= id %>" data-target="<%= component.value %>">0</span>
+          <span id="counter_<%= id %>" data-target="<%= component.value %>"><%= component.value %></span>
           <% if component.extra then %><span><%= component.extra %></span><% end %>
         </h2>
         <script>

app/views/partials/components/card.html.etlua

@@ -1,6 +1,6 @@
 <% component.width = component.width or {4, 6, 12} %>
 
-<div class="border relative shadow-md rounded-md lg:col-span-<%= component.width[1] or 4 %> md:col-span-<%= component.width[2] or 6 %> col-span-<%= component.width[3] or 12%>">
+<div class="border border-gray-300  relative shadow-md rounded-md lg:col-span-<%= component.width[1] or 4 %> md:col-span-<%= component.width[2] or 6 %> col-span-<%= component.width[3] or 12%>">
   <% if component.icon then %>
     <div class="absolute -top-2 right-2 ">
       <span class="material-icons-outlined border border-<%= component.color or "yellow" %>-600 text-<%= component.color or "yellow" %>-900 bg-<%= component.color or "yellow" %>-50 p-2 shadow-md">

app/views/partials/components/datagrid.html.etlua

@@ -16,7 +16,7 @@
     </div>
   </div>
 
-  <div class="border border-gray-300 rounded-b-md p-4">
+  <div class="border border-gray-300 rounded-b-md p-4  shadow-md">
       <div class="grid grid-cols-<%= #component.items %> gap-4">
       <% for i, item in ipairs(component.items) do %>
         <div class="flex flex-col">

app/views/partials/components/object.html.etlua

@@ -1,6 +1,6 @@
 <% component.width = component.width or {4, 6, 12} %>
 <% component.keys = component.keys or table.keys(component.data) or {} %>
-<div class="relative border rounded-md shadow-md flex flex-col gap-4 p-4 item-center lg:col-span-<%= component.width[1] or 4 %> md:col-span-<%= component.width[2] or 6 %> col-span-<%= component.width[3] or 12%>">
+<div class="relative border border-gray-300  rounded-md shadow-md flex flex-col gap-4 p-4 item-center lg:col-span-<%= component.width[1] or 4 %> md:col-span-<%= component.width[2] or 6 %> col-span-<%= component.width[3] or 12%>">
   <% if component.icon then %>
     <div class="absolute -top-2 right-2 ">
       <span class="material-icons-outlined border border-<%= component.color or "yellow" %>-600 text-<%= component.color or "yellow" %>-900 bg-<%= component.color or "yellow" %>-50 p-2 shadow-md">

app/views/partials/components/table.html.etlua

@@ -2,11 +2,14 @@
 <div class="lg:col-span-<%= component.width[1] or 4 %> md:col-span-<%= component.width[2] or 6 %> col-span-<%= component.width[3] or 12%>">
   <h1 class="text-2xl font-bold"><%= component.title %></h1>
   <table class="w-full border-collapse border">
+    <% if component.caption then %>
+    <caption class="text-sm text-gray-500" style="caption-side: <%= component.caption.position or 'top' %>;"><%= component.caption.title %></caption>
+    <% end %>
     <% if component.headers then %>
     <thead>
       <tr>
         <% for _, cell in pairs(component.headers) do %>
-        <th class="text-<%= cell.align or 'left' %> text-<%= cell.color or 'black' %>-600">
+        <th class="border border-gray-300 text-<%= cell.align or 'left' %> text-<%= cell.color or 'black' %>-600">
           <%= cell.title %>
         </th>
         <% end %>
@@ -19,7 +22,7 @@
       <% for _, row in pairs(component.rows) do %>
       <tr>
         <% for _, cell in pairs(row) do %>
-        <td class="text-<%= cell.align or 'left' %> text-<%= cell.color or 'black' %>-600">
+        <td class="border border-gray-300 text-<%= cell.align or 'left' %> text-<%= cell.color or 'black' %>-600">
           <%= cell.title %>
         </td>
         <% end %>
@@ -33,7 +36,7 @@
       <% for _, row in pairs(component.footer) do %>
       <tr>
         <% for _, cell in pairs(row) do %>
-        <td class="text-<%= cell.align or 'left' %> text-<%= cell.color or 'black' %>-600">
+        <td class="border border-gray-300 text-<%= cell.align or 'left' %> text-<%= cell.color or 'black' %>-600">
           <%= cell.title %>
         </td>
         <% end %>

app/views/welcome/index.etlua

@@ -1 +1 @@
-<h1>Welcome aboard</h1>
+<div class="col-span-12"><h1>Welcome aboard</h1></div>

aqlpages/demo.aql

@@ -173,6 +173,7 @@ LET table = {
   component: 'table',
   title: 'Table',
   width: [12, 12, 12], // [lg, md, sm]
+  caption: { title: 'this is a caption for the table', position: 'bottom' },
   headers: [{ title: 'Header 1', align: 'left' }, { title: 'Header 2', align: 'center' }, { title: 'Header 3', align: 'right' }],
   rows: [
     [{ title: 'Data 1', align: 'left', color: 'red' }, { title: 'Data 2', align: 'center', color: 'blue' }, { title: 'Data 3', align: 'right', color: 'green' }],
@@ -225,4 +226,4 @@ RETURN [
   map,
   table,
   object
-]
+]