base tabler

liquid/includes/ui/form/check.html

@@ -0,0 +1,25 @@
+{% assign type = include.type | default: 'checkbox' %}
+{% assign checked = include.checked | default: false %}
+{% assign disabled = include.disabled | default: false %}
+{% assign switch = include.switch | default: false %}
+{% assign title = include.title | default: false %}
+{% assign name = include.name | default: false %}
+{% assign is_empty = include['empty'] | default: false %}
+{% unless title %}
+{% assign title = '' %}
+{% if disabled %}{% assign title = title | append: ' disabled' %}{% endif %}
+{% if checked %}{% assign title = title | append: ' checked' %}{% endif %}
+{% if switch %}{% assign title = title | append: ' switch' %}{% endif %}
+{% assign title = title | append: ' ' | append: type %}
+{% assign title = title | append: ' input' | lstrip | capitalize %}
+{% endunless %}
+<label class="form-check{% if include.inline %} form-check-inline{% endif %}{% if switch %} form-switch{% if include['size'] %} form-switch-{{ include['size'] }}{% endif %}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+	<input class="form-check-input{% if is_empty %} position-static{% endif %}" type="{{ type }}" {% if name %}
+	       name="{{ name }}" {% endif %}{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %}>
+	{% if include.title-on and include.title-off %}
+	<span class="form-check-label form-check-label-on">{{include.title-on }}</span>
+	<span class="form-check-label form-check-label-off">{{include.title-off }}</span>
+	{% else %}
+	{% unless is_empty %}<span class="form-check-label">{{ title }}</span>{% endunless %}
+	{% endif %}
+</label>

liquid/includes/ui/form/input-file.html

@@ -0,0 +1 @@
+<input type="file" class="form-control" />

liquid/includes/ui/form/input-group.html

@@ -0,0 +1,48 @@
+<div class="input-group{% if include.flat %} input-group-flat{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+	{% if include.prepend %}
+	<span class="input-group-text">
+		{% if include.prepend == "checkbox" or include.prepend == "radio" %}
+			<input class="form-check-input m-0" type="{{ include.prepend }}" checked>
+		{% else %}
+			{{ include.prepend }}
+		{% endif %}
+	</span>
+	{% endif %}
+	{% if include.prepend-html %}
+	<span class="input-group-text">
+		{{ include.prepend-html }}
+	</span>
+	{% endif %}
+	<input type="{{ include.type | default: 'text' }}" class="form-control{% if include.input-class %} {{ include.input-class }}{% endif %}" {% if include.placeholder %} placeholder="{{ include.placeholder }}" {% endif %}{% if include.value %} value="{{ include.value }}"{% endif %} autocomplete="off"{% if include.id %} id="{{ include.id }}"{% endif %}>
+	{% if include.append %}
+	<span class="input-group-text">
+		{% if include.append == "checkbox" or include.append == "radio" %}
+			<input class="form-check-input m-0" type="{{ include.append }}" checked>
+		{% else %}
+			{{ include.append }}
+		{% endif %}
+	</span>
+	{% endif %}
+	{% if include.append-link %}
+	<span class="input-group-text">
+		<a href="#" class="input-group-link">{{ include.append-link }}</a>
+	</span>
+	{% endif %}
+	{% if include.append-html %}
+	<span class="input-group-text">
+		{{ include.append-html }}
+	</span>
+	{% endif %}
+	{% if include.append-button %}
+	{% assign buttons = include.append-button | split: ',' %}
+	<span class="input-group-text">
+		{% for button in buttons %}
+		{% assign b = button | split: ':' %}
+		{% assign icon = b[0] %}
+		{% assign description = b[1] %}
+
+		<a href="#" class="link-secondary{% unless forloop.first %} ms-2{% endunless %}{% if forloop.index == 3 %} disabled{% endif %}" title="{{ description }}" data-bs-toggle="tooltip">{% include "ui/icon.html" icon=icon %}</a>
+		{% endfor %}
+	</span>
+	{% endif %}
+</div>

liquid/includes/ui/form/input-icon.html

@@ -0,0 +1,24 @@
+{% capture addon %}
+	{% if include.loader %}
+		<span class="input-icon-addon{% if include.icon-class %} {{ include.icon-class }}{% endif %}">
+			{% include "ui/spinner.html" class="text-secondary" size="sm" %}
+		</span>
+	{% else %}
+		{% assign icon = include.icon | default: 'search' %}
+		<span class="input-icon-addon{% if include.icon-class %} {{ include.icon-class }}{% endif %}">
+			{% include "ui/icon.html" icon=icon %}
+		</span>
+	{% endif %}
+{%- endcapture %}
+
+<div class="input-icon{% if include.class %} {{ include.class }}{% endif %}">
+	{% if include.prepend %}
+		{{ addon }}
+	{% endif %}
+
+	<input type="{{ include.type | default: 'text' }}" value="{{ include.value }}" class="form-control{% if include.light %} form-control-light{% endif %}{% if include.rounded %} form-control-rounded{% endif %}{% if include.input-class %} {{ include.input-class }}{% endif %}" placeholder="{{ include.placeholder | default: 'Search…' }}"{% if include['aria-label'] %} aria-label="{{ include['aria-label'] }}"{% endif %}{% if include.readonly %} readonly{% endif %}>
+
+	{% unless include.prepend %}
+		{{ addon }}
+	{% endunless %}
+</div>

liquid/includes/ui/form/input-mask.html

@@ -0,0 +1 @@
+<input type="text" name="input-{{ include.name | default: 'mask' }}" class="form-control" data-mask="{{ include.mask | default: '00/00/0000' }}"{% if include.visible %} data-mask-visible="true"{% endif %}{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% else %} placeholder="{{ include.mask }}"{% endif %}{% if include.reverse %} data-mask-reverse="true"{% endif %}autocomplete="off"/>

liquid/includes/ui/form/input-selectgroup.html

@@ -0,0 +1,16 @@
+{% assign values = include.values | default: "One,Two,Three" | split: ',' %}
+{% assign default = include.default | default: values[0] %}
+{% assign type = include.type | default: "checkbox" %}
+{% assign name = include.name | default: "name" %}
+<div class="form-selectgroup{% if include.class %} {{ include.class }}{% endif %}">
+	{% for value in values %}
+	<label class="form-selectgroup-item">
+		{% assign s = value | split: "i:" %}
+		{% if include.with-text %}
+		{% assign icon-class = "me-1" %}
+		{% endif %}
+		<input type="{{ type }}" name="{{ name }}" value="{% if s.size == 2 %}{{ s[1] }}{% else %}{{ value }}{% endif %}" class="form-selectgroup-input"{% if value == default %}{% if type == "radio" %} checked{% else %} checked{% endif %}{% endif %}>
+		<span class="form-selectgroup-label">{% if s.size == 2 %}{% assign icon = s[1] %}{% include "ui/icon.html" icon=icon class=icon-class use-svg=true %}{% if include.with-text %} {{ icon | capitalize }}{% endif %}{% else %}{{ value }}{% endif %}</span>
+	</label>
+	{% endfor %}
+</div>

liquid/includes/ui/form/textarea-autosize.html

@@ -0,0 +1 @@
+<textarea class="form-control{% if include.class %} {{ include.class }}{% endif %}" data-bs-toggle="autosize" placeholder="{{ include.placeholder | default: 'Type something…' }}"{% if include.rows %} rows="{{ include.rows }}"{% endif %}></textarea>