Use color-input include file more (#2347)

Co-authored-by: Paweł Kuna <[email protected]>

.changeset/twenty-meals-hug.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Use color-input examples in documentation

docs/content/ui/forms/form-color-check.md

@@ -16,172 +16,14 @@ Your input controls can come in a variety of colors, depending on your preferenc
 There is also an example of a color input:
 
 {% capture html -%}
-<div class="mb-3">
-  <label class="form-label">Color Input</label>
-  <div class="row g-2">
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color" type="radio" value="dark" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-dark"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput form-colorinput-light">
-        <input name="color" type="radio" value="white" class="form-colorinput-input" checked />
-        <span class="form-colorinput-color bg-white"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color" type="radio" value="blue" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-blue"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color" type="radio" value="azure" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-azure"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color" type="radio" value="indigo" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-indigo"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color" type="radio" value="purple" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-purple"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color" type="radio" value="pink" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-pink"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color" type="radio" value="red" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-red"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color" type="radio" value="orange" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-orange"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color" type="radio" value="yellow" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-yellow"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color" type="radio" value="lime" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-lime"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color" type="radio" value="green" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-green"></span>
-      </label>
-    </div>
-  </div>
-</div>
+{% include "parts/form/input-color.html" type="checkbox" %}
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
 If you need to select only one color, you can use the radio input type:
 
 {% capture html -%}
-<div class="mb-3">
-  <label class="form-label">Color Input</label>
-  <div class="row g-2">
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color-rounded" type="radio" value="dark" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-dark rounded-circle"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput form-colorinput-light">
-        <input
-          name="color-rounded"
-          type="radio"
-          value="white"
-          class="form-colorinput-input"
-          checked
-        />
-        <span class="form-colorinput-color bg-white rounded-circle"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color-rounded" type="radio" value="blue" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-blue rounded-circle"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color-rounded" type="radio" value="azure" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-azure rounded-circle"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color-rounded" type="radio" value="indigo" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-indigo rounded-circle"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color-rounded" type="radio" value="purple" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-purple rounded-circle"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color-rounded" type="radio" value="pink" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-pink rounded-circle"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color-rounded" type="radio" value="red" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-red rounded-circle"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color-rounded" type="radio" value="orange" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-orange rounded-circle"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color-rounded" type="radio" value="yellow" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-yellow rounded-circle"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color-rounded" type="radio" value="lime" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-lime rounded-circle"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color-rounded" type="radio" value="green" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-green rounded-circle"></span>
-      </label>
-    </div>
-  </div>
-</div>
+{% include "parts/form/input-color.html" name="color-rounded" rounded=true %}
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 

shared/includes/forms/form-elements-3.html

@@ -1,7 +1,7 @@
 {% include "parts/form/input-image.html" %}
 {% include "parts/form/input-image-radio.html" offset=10 %}
-{% include "parts/form/input-color.html" %}
-{% include "parts/form/input-color.html" name="color-rounded" rounded=true %}
+{% include "parts/form/input-color.html" type="checkbox" label="Color Input Check" %}
+{% include "parts/form/input-color.html" name="color-rounded" rounded=true label="Color Input Radio" %}
 {% include "parts/form/input-colorpicker.html" %}
 
 {% include "parts/form/validation-states.html" %}

shared/includes/parts/form/input-color.html

@@ -10,13 +10,13 @@
 <div class="mb-3">
 	<label class="form-label">{{ include.label | default: 'Color Input' }}</label>
 	<div class="row g-2">
-		{% for color in colors %}
+		{% for color in colors -%}
 		<div class="col-auto">
 			<label class="form-colorinput{% if color == 'white' %} form-colorinput-light{% endif %}">
-				<input name="{{ include.name | default: 'color' }}" type="radio" value="{{ color }}" class="form-colorinput-input" {% if forloop.index == 2 %} checked{% endif %}/>
+				<input name="{{ include.name | default: 'color' }}" type="{{ include.type | default: 'radio' }}" value="{{ color }}" class="form-colorinput-input" {% if forloop.index == 2 %} checked{% endif %}/>
 				<span class="form-colorinput-color bg-{{ color }}{% if include.rounded %} rounded-circle{% endif %}"></span>
 			</label>
 		</div>
-		{% endfor %}
+		{%- endfor %}
 	</div>
 </div>