[Status] Add attr option + deprecated non camelCase option (#177)

kevinpapst · Dec 12, 2023 · 923ebb1 · 923ebb1
1 parent f4dfe49
commit 923ebb1
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 31 deletions.
diff --git a/templates/components/status.html.twig b/templates/components/status.html.twig
@@ -1,16 +1,27 @@
-{% macro status(text, options) %}
-    {% set _color = options.color ?? 'green' %}
-    {% set _animated = options.animated ?? true %}
-    {% set _lite = options.lite is defined ? options.lite  : false %}
-    {% set _with_dot = options.with_dot is defined ? options.with_dot  : false %}
-    {% set _extraClass = options.extraClass ?? '' %}
-
-    {%- apply spaceless -%}
-        <span class="status status-{{ _color }} {{ _lite ? 'status-lite' : '' }} {{ _extraClass }}">
-        {% if _with_dot %}
-            <span class="status-dot {{ _animated ? 'status-dot-animated' : '' }}"></span>
-        {% endif %}
-            {{ text }}
-        </span>
-    {%- endapply -%}
-{% endmacro %}
+{% macro status(text, options) %}
+    {% import '@Tabler/includes/utils.html.twig' as utils %}
+    {% import '@Tabler/components/status_dot.html.twig' as status_dot %}
+
+    {% set _color = options.color ?? 'green' %}
+    {% set _animated = (options.animated ?? true) is same as true %}
+    {% set _lite = (options.lite ?? false) is same as true %}
+    {% if options.with_dot is defined %}
+        {% deprecated 'with_dot option is deprecated, use withDot option instead!' %}
+        {% set _withDot = options.with_dot is same as true %}
+    {% else %}
+        {% set _withDot = (options.withDot ?? false) is same as true %}
+    {% endif %}
+
+    {% set _extraClass = options.extraClass ?? '' %}
+    {% set _attr = options.attr ?? {} %}
+
+    <span
+        class="status status-{{ _color }} {% if _lite %}status-lite{% endif %} {{ _extraClass }}"
+        {{ utils.attr_to_html(_attr) }}
+    >
+        {% if _withDot %}
+            {{ status_dot({color: _color, animated : _animated}) }}
+        {% endif %}
+        {{ text }}
+    </span>
+{% endmacro %}
diff --git a/templates/components/status_dot.html.twig b/templates/components/status_dot.html.twig
@@ -1,7 +1,13 @@
 {% macro status_dot(options) %}
+    {% import '@Tabler/includes/utils.html.twig' as utils %}
+
     {% set _color = options.color ?? 'green' %}
-    {% set _animated = options.animated ?? true %}
+    {% set _animated = (options.animated ?? true) is same as true %}
     {% set _extraClass = options.extraClass ?? '' %}
+    {% set _attr = options.attr ?? {} %}
 
-    <span class="status-dot status-{{ _color }} {% if _animated %}status-dot-animated{% endif %}"></span>
+    <span
+        class="status-dot {% if _animated %}status-dot-animated{% endif %} {% if _color is not null %}status-{{ _color }}{% endif %} {{ _extraClass }}"
+        {{ utils.attr_to_html(_attr) }}
+    ></span>
 {% endmacro %}
diff --git a/templates/components/status_indicator.html.twig b/templates/components/status_indicator.html.twig
@@ -1,13 +1,17 @@
-{% macro status_indicator(options) %}
-
-    {% set _color = options.color ?? 'green' %}
-    {% set _animated = options.animated ?? true %}
-    {% set _extraClass = options.extraClass ?? '' %}
-
-    <span class="status-indicator {{ _animated ? 'status-indicator-animated' : '' }} {{ 'status-'~_color }} {{ _extraClass }}">
-      <span class="status-indicator-circle"></span>
-      <span class="status-indicator-circle"></span>
-      <span class="status-indicator-circle"></span>
-    </span>
-
-{% endmacro %}
+{% macro status_indicator(options) %}
+    {% import '@Tabler/includes/utils.html.twig' as utils %}
+
+    {% set _color = options.color ?? 'green' %}
+    {% set _animated = (options.animated ?? true) is same as true %}
+    {% set _extraClass = options.extraClass ?? '' %}
+    {% set _attr = options.attr ?? {} %}
+
+    <span
+        class="status-indicator {% if _animated %}status-indicator-animated{% endif %} status-{{ _color }} {{ _extraClass }}"
+        {{ utils.attr_to_html(_attr) }}
+    >
+      <span class="status-indicator-circle"></span>
+      <span class="status-indicator-circle"></span>
+      <span class="status-indicator-circle"></span>
+    </span>
+{% endmacro %}