feat: various component options (#605)

README.md

@@ -1255,20 +1255,22 @@ Below you can find a more complex example which is using multiple components and
 
 #### List of available components <!-- omit from toc -->
 
-| Component                         | Description                    | Arguments                        |
-| --------------------------------- | ------------------------------ | -------------------------------- |
-| unfold/components/button.html     | Basic button element           | submit                           |
-| unfold/components/card.html       | Card component                 | class, title, footer, label      |
-| unfold/components/chart/bar.html  | Bar chart implementation       | class, data, height, width       |
-| unfold/components/chart/line.html | Line chart implementation      | class, data, height, width       |
-| unfold/components/container.html  | Wrapper for settings max width | class                            |
-| unfold/components/flex.html       | Flex items                     | class, col                       |
-| unfold/components/navigation.html | List of navigation links       | class, items                     |
-| unfold/components/progress.html   | Percentual progress bar        | class, value, title, description |
-| unfold/components/separator.html  | Separator, horizontal rule     | class                            |
-| unfold/components/table.html      | Table                          | card_included, striped           |
-| unfold/components/text.html       | Paragraph of text              | class                            |
-| unfold/components/title.html      | Basic heading element          | class                            |
+| Component                         | Description                    | Arguments                            |
+| --------------------------------- | ------------------------------ | ------------------------------------ |
+| unfold/components/button.html     | Basic button element           | submit                               |
+| unfold/components/card.html       | Card component                 | class, title, footer, label, icon    |
+| unfold/components/chart/bar.html  | Bar chart implementation       | class, data, height, width           |
+| unfold/components/chart/line.html | Line chart implementation      | class, data, height, width           |
+| unfold/components/container.html  | Wrapper for settings max width | class                                |
+| unfold/components/flex.html       | Flex items                     | class, col                           |
+| unfold/components/icon.html       | Icon element                   | class                                |
+| unfold/components/label.html      | Label element                  | class                                |
+| unfold/components/navigation.html | List of navigation links       | class, items                         |
+| unfold/components/progress.html   | Percentual progress bar        | class, value, title, description     |
+| unfold/components/separator.html  | Separator, horizontal rule     | class                                |
+| unfold/components/table.html      | Table                          | table, card_included, striped        |
+| unfold/components/text.html       | Paragraph of text              | class                                |
+| unfold/components/title.html      | Basic heading element          | class                                |
 
 
 #### Table component example
@@ -1278,7 +1280,7 @@ from typing import Dict
 from django.http import HttpRequest
 
 
-def dashboard_callback(self, request: HttpRequest) -> Dict:
+def dashboard_callback(request: HttpRequest) -> Dict:
     return {
         "table_data": {
             "headers": ["col 1", "col 2"],
@@ -1292,7 +1294,7 @@ def dashboard_callback(self, request: HttpRequest) -> Dict:
 
 ```django-html
 {% component "unfold/components/card" with title="Card title" %}
-    {% component "unfold/components/table.html" table=table_data %}{% encomponent %}
+    {% component "unfold/components/table.html" with table=table_data card_included=1 striped=1 %}{% encomponent %}
 {% endcomponent %}
 ```
 

src/unfold/templates/unfold/components/card.html

@@ -1,18 +1,22 @@
-<div class="border flex flex-col flex-grow p-6 rounded-md shadow-sm dark:border-gray-800{% if class %} {{ class }}{% endif %}">
+<div class="border flex flex-col flex-grow overflow-hidden p-6 relative rounded-md shadow-sm dark:border-gray-800{% if class %} {{ class }}{% endif %}">
     {% if title %}
         <h2 class="border-b font-semibold mb-6 -mt-2 -mx-6 pb-4 px-6 text-sm text-gray-700 dark:text-gray-200 dark:border-gray-800">
             {{ title }}
         </h2>
     {% endif %}
 
-    <div class="flex-grow relative">
+    <div class="flex-grow relative {% if icon %} pl-6{% endif %}">
         {{ children }}
 
         {% if label %}
             <div class="absolute right-0 top-0">
                 {% include "unfold/helpers/label.html" with text=label type="primary" %}
             </div>
         {% endif %}
+
+        {% if icon %}
+            <span class="material-symbols-outlined absolute -left-6 text-gray-300 top-1/2 -translate-x-1/3 -translate-y-1/2 !text-6xl dark:text-gray-500">{{ icon }}</span>
+        {% endif %}
     </div>
 
     {% if footer %}

src/unfold/templates/unfold/components/icon.html

@@ -0,0 +1 @@
+<span class="material-symbols-outlined{% if class %} {{ class }}{% endif %}">{{ children }}</span>

src/unfold/templates/unfold/components/separator.html

@@ -1 +1 @@
-<hr class="bg-gray-200 dark:border-gray-800 my-8{% if class %} {{ class }}{% endif %}" />
+<div class="bg-gray-200 dark:bg-gray-800 dark:border-gray-800 {% if vertical == 1 %}mx-8 w-px{% else%}h-px my-8{% endif %}{% if class %} {{ class }}{% endif %}"></div>

src/unfold/templates/unfold/components/table.html

@@ -19,7 +19,7 @@
                 {% for row in table.rows %}
                     <tr class="{% if striped == 1 %}{% cycle '' 'bg-gray-50 dark:bg-white/[.02]' %}{% endif %} block {% if not card_included == 1 %}border mb-3 rounded-md shadow-sm{% else %}border-t{% endif %} lg:table-row lg:border-none lg:mb-0 lg:shadow-none dark:border-gray-800">
                         {% for cell in row %}
-                            <td class="px-3 py-2 align-middle flex border-t border-gray-200 font-normal gap-4 min-w-0 overflow-hidden text-left text-gray-500 text-sm before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto before:text-gray-500 first:border-t-0 dark:before:text-gray-300 dark:text-gray-300 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800 {% if card_included == 1 %}px-6 lg:first:pl-6 lg:last:pr-6{% endif %}" {% if table.headers %}data-label="{{ table.headers|index:forloop.counter0 }}"{% endif %}>
+                            <td class="px-3 py-2 align-middle flex border-t border-gray-200 font-normal gap-4 min-w-0 overflow-hidden text-left text-gray-500 text-sm before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto before:text-gray-500 first:border-t-0 dark:before:text-gray-300 dark:text-gray-300 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800 {% if card_included == 1 %}lg:first:pl-6 lg:last:pr-6{% endif %}" {% if table.headers %}data-label="{{ table.headers|index:forloop.counter0 }}"{% endif %}>
                                 {{ cell }}
                             </td>
                         {% endfor %}

src/unfold/templates/unfold/helpers/label.html

@@ -12,6 +12,6 @@
     {% else %}
         bg-gray-100 text-gray-500 dark:bg-gray-500/20 dark:text-gray-300
     {% endif %}
-">
+{% if class %} {{ class }}{% endif %}">
     {{ text }}
 </span>