jacs/goffeetabler
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

base tabler

Browse source
This commit is contained in:
JACS 2026-05-01 12:46:11 -05:00
parent ac2cfa9fe1
commit 0f84beacf1
1432 changed files with 28760 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

32
liquid/includes/ui/accordion.html Normal file
View file

@ -0,0 +1,32 @@
{% assign accordion-count = include.count | default: 4 %}
{% assign accordion-id = include.id | default: "default" %}
{% assign accordion-toggle-icon = include.toggle-icon | default: "chevron-down" %}
{% assign accordion-types = include.type | default: "" | split: "," %}
<div class="accordion{% for type in accordion-types %} accordion-{{ type }}{% endfor %}" id="accordion-{{ accordion-id }}">
{% for question in questions limit: accordion-count %}
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button{% unless forloop.index == 1 %} collapsed{% endunless %}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ forloop.index }}-{{ accordion-id }}" aria-expanded="{% if forloop.index == 1 %}true{% else %}false{% endif %}">
{% if include.show-icon %}
<div class="accordion-button-icon">
{% include "ui/icon.html" icon="link" %}
</div>
{% endif %}
{{ question.question }}
<div class="accordion-button-toggle{% if include.toggle-icon %} accordion-button-toggle-plus{% endif %}">
{% include "ui/icon.html" icon=accordion-toggle-icon %}
</div>
</button>
</div>
<div id="collapse-{{ forloop.index }}-{{ accordion-id }}" class="accordion-collapse collapse{% if forloop.index == 1 %} show{% endif %}" data-bs-parent="#accordion-{{ accordion-id }}">
<div class="accordion-body">
{{ question.answer }}
</div>
</div>
</div>
{% endfor %}
</div>

168
liquid/includes/ui/advanced-table.html Normal file
View file

@ -0,0 +1,168 @@
{% assign table-id = include.id | default: "advanced-table" %}
{% assign statuses = 'Active,Inactive,Requested' | split: ',' %}
{% assign per-page = '10,20,50,100' | split: "," %}
{% assign categories = 'Agencies,Individual,Event,Ticket' | split: "," %}
{% assign tags = 'QTA,Event,Tickets,TODO|Event,Tickets|QTA,Event|Tickets' | split: "|" %}
<!--{% include "js/tabler-list.html", parameters="[ 'sort-name', 'sort-content', 'sort-status', 'sort-date', 'sort-tags', 'sort-category']" %}-->
<div class="card">
<div class="card-table">
<div class="card-header">
<div class="row w-full">
<div class="col">
<h3 class="card-title mb-0">
Employee
</h3>
<p class="text-secondary m-0">
Table description.
</p>
</div>
<div class="col-md-auto col-sm-12">
{% capture html %}
<kbd>ctrl + K</kbd>
{% endcapture %}
<div class="ms-auto d-flex flex-wrap btn-list">
<div class="input-group input-group-flat w-auto">
<span class="input-group-text">
{% include "ui/icon.html" icon="search" %}
</span>
<input id="{{ table-id }}-search" type="text" class="form-control" autocomplete="off">
<span class="input-group-text">
<kbd>ctrl + K</kbd>
</span>
</div>
<a href="#" class="btn btn-icon" aria-label="Button">
{% include "ui/icon.html" icon="dots" %}
</a>
{% include "ui/dropdown.html" main-btn="Download" options="Action, Another action, Third action" %}
{% include "ui/button.html" %}
</div>
</div>
</div>
</div>
<div id="{{ table-id }}">
<div class="table-responsive">
<table class="table table-vcenter table-selectable">
<thead>
<tr>
<th class="w-1"></th>
{% assign headers = table-properties.advanced-table.headers %}
{% for header in headers %}
<th>
<button class="table-sort d-flex justify-content-between" data-sort="{{ header.data-sort}}">
{{ header.name }}
</button>
</th>
{% endfor %}
</tr>
</thead>
<tbody class="table-tbody">
{% for person in people %}
<tr>
<td>
<input class="form-check-input m-0 align-middle table-selectable-check" type="checkbox" aria-label="Select invoice" value="true">
</td>
<td class="{{ headers[0].data-sort }}">
{% include "ui/avatar.html" person=person size="xs" class="me-2" %}
{{ person.full_name }}
</td>
<td class="{{ headers[1].data-sort }}">
{{ person.city }}, {{ person.country }}
</td>
<td class="{{ headers[2].data-sort }}">
{% assign status = forloop.index | plus: 5 | random_item: statuses %}
{% if status == "Active" %}
<span class="badge bg-success-lt">Active</span>
{% elsif status == "Inactive" %}
<span class="badge bg-danger-lt">Inactive</span>
{% else %}
<span class="badge">Requested</span>
{% endif %}
</td>
<td class="{{ headers[3].data-sort }}">
{{ forloop.index | random_date | date: '%B %d, %Y' }}
</td>
<td class="{{ headers[4].data-sort }}">
{% assign item-tags = forloop.index | plus: 5 | random_item: tags %}
{% assign item-tags = item-tags | split: "," %}
<div class="badges-list">
{% for tag in item-tags %}
<span class="badge">{{ tag }}</span>
{% endfor %}
</div>
</td>
<td class="{{ headers[5].data-sort }} py-0">
<span class="on-unchecked">
{{ forloop.index | random_item: categories }}
</span>
<div class="on-checked">
<div class="d-flex justify-content-end">
{% include "ui/button.html" icon="dots" icon-only %}
</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="card-footer d-flex align-items-center">
<div class="dropdown">
<a class="btn dropdown-toggle" data-bs-toggle="dropdown">
<span id="page-count" class="me-1">{{ per-page[1] }}</span>
<span>records</span>
</a>
<div class="dropdown-menu">
{% for record in per-page %}
<a class="dropdown-item" onclick="setPageListItems(event)" data-value="{{ record }}">{{ record }} records</a>
{% endfor %}
</div>
</div>
{% include "ui/pagination.html" class="m-0 ms-auto" no-words="true" count=10 %}
</div>
</div>
</div>
</div>
<script>
const advancedTable = {{ table-properties.advanced-table | json}}
const setPageListItems = e => {
window.tabler_list["{{ table-id }}"].page = parseInt(e.target.dataset.value)
window.tabler_list["{{ table-id }}"].update()
document.querySelector("#page-count").innerHTML = e.target.dataset.value
}
window.tabler_list = window.tabler_list || {}
document.addEventListener("DOMContentLoaded", function() {
const list = window.tabler_list["{{ table-id }}"] = new List('{{ table-id }}', {
sortClass: 'table-sort',
listClass: 'table-tbody',
page: parseInt("{{ per-page[1] }}"),
pagination: {
item: value => {
return `<li class="page-item"><a class="page-link cursor-pointer">${value.page}</a></li>`
},
innerWindow: 1,
outerWindow: 1,
left: 0,
right: 0,
},
valueNames: advancedTable.headers.map(header => header['data-sort'])
});
const searchInput = document.querySelector('#{{ table-id }}-search');
if (searchInput) {
searchInput.addEventListener('input', () => {
list.search(searchInput.value)
})
}
})
</script>

50
liquid/includes/ui/alert.html Normal file
View file

@ -0,0 +1,50 @@
{% removeemptylines %}
{%- assign icon = include.icon -%}
{%- assign type = include.type | default: 'success' -%}
{%- unless icon -%}
{%- if type == 'success' -%}
{%- assign icon = 'check' -%}
{%- elsif type == 'warning' -%}
{%- assign icon = 'alert-triangle' -%}
{%- elsif type == 'danger' -%}
{%- assign icon = 'alert-circle' -%}
{%- elsif type == 'info' -%}
{%- assign icon = 'info-circle' -%}
{%- endif -%}
{%- endunless -%}
<div class="alert{% if include.important %} alert-important{% elsif include.minor %} alert-minor{% endif %} alert-{{ type }}{%if include.show-close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}{% if include.class %} {{ include.class }}{% endif %}" role="alert">
<div class="alert-icon">
{%- include "ui/icon.html" icon=icon class="alert-icon" -%}
</div>
{% if include.description or include.list -%}
<div>
<h4 class="alert-heading">{{ include.title | default: "This is a custom alert box!" }}</h4>
<div class="alert-description">
{{ include.description | default: description }}
{% if include.list %}
{% assign items = include.list | split: ',' %}
<ul class="alert-list">
{% for item in items %}
<li>{{ item }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
{%- else -%}
{{ include.title | default: "This is a custom alert box!" }}
{% if include.action -%}
<a href="#" class="alert-action">{{ include.action | default: "Action" }}</a>
{%- elsif include.link -%}
<a href="#" class="alert-link">{{ include.link | default: "Link" }}</a>
{%- endif %}
{%- endif -%}
{%- if include.buttons -%}
<div class="btn-list">
<a href="#" class="btn btn-{{ include.type | default: 'primary'}}">Okay</a>
<a href="#" class="btn">Cancel</a>
</div>
{%- endif -%}
{%- if include.show-close %}<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>{% endif -%}
</div>
{% endremoveemptylines %}

11
liquid/includes/ui/avatar-list.html Normal file
View file

@ -0,0 +1,11 @@
{% assign limit = include.limit | default: 5 %}
{% assign offset = include.offset | default: 0 %}
{% assign size = include['size'] | default: 'sm' %}
<div class="avatar-list{% if include.stacked %} avatar-list-stacked{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
{% for person in people limit: limit offset: offset %}
{% include "ui/avatar.html" person=person size=size rounded=true %}
{% endfor %}
{% if include.text %}
{% include "ui/avatar.html" placeholder=include.text size=size rounded=true %}
{% endif %}
</div>

3
liquid/includes/ui/avatar-upload.html Normal file
View file

@ -0,0 +1,3 @@
<a href="#" class="avatar avatar-upload{% if include.class %} {{ include.class }}{% endif %}{% if include.size %} avatar-{{ include.size }}{% endif %}">
{% include "ui/icon.html" icon="plus" %}
</a>

38
liquid/includes/ui/avatar.html Normal file
View file

@ -0,0 +1,38 @@
{%- assign src = include.src -%}
{%- assign placeholder = include.placeholder -%}
{%- if include.person-id -%}
{%- assign person-id = include.person-id | minus: 1 -%}
{%- assign person = people[person-id] -%}
{%- assign src = person.photo -%}
{%- unless src -%}
{%- assign placeholder = person.full_name | first_letters -%}
{%- endunless -%}
{%- elsif include.person -%}
{%- assign person = include.person -%}
{%- assign src = person.photo -%}
{%- unless src -%}
{%- assign placeholder = person.full_name | first_letters -%}
{%- endunless -%}
{%- endif -%}
{%- assign link = include.link | default: false -%}
{%- if include.dropdown -%}
{%- assign link = true -%}
{%- endif -%}
{%- assign el = 'span' -%}
{%- if link -%}{%- assign el = 'a' -%}{%- endif -%}
<{{ el }} class="avatar{% if include.size %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} avatar-{{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}{% if include.square %} avatar-square{% endif %}"{% if src %} style="background-image: url({{ page | relative }}/{{ src }})"{% endif %}{% if include.dropdown %} data-bs-toggle="dropdown"{% endif %}>
{%- if include.status -%}
<span class="badge bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include "ui/icon.html" icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>
{%- endif -%}
{%- if include.brand -%}
<span class="avatar-brand" style="background-image: url({{ page | relative }}/static/brands/{{ include.brand }}.svg);"></span>
{%- endif -%}
{% if src %}
{% elsif placeholder %}
{{ placeholder }}
{% elsif include.icon %}
{% include "ui/icon.html" icon=include.icon class="avatar-icon" %}
{% else %}
{% include "ui/icon.html" icon="user" class="avatar-icon" %}
{% endif %}
</{{ el }}>

22
liquid/includes/ui/badge.html Normal file
View file

@ -0,0 +1,22 @@
{%- assign el = 'span' -%}
<{{ el }} class="badge{% if include.scale %} badge-{{ include.scale }}{% endif %}{% if include.color %} bg-{{ include.color }}{% if include.light %}-lt{% endif %} text-{{ include.color }}{% if include.light %}-lt{% endif %}-fg{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
{%- if include.icon -%}
{%- assign icon = include.icon -%}
{% include "ui/icon.html" icon=icon %}
{%- endif -%}
{%- if include.person-id -%}
{%- assign person-id = include.person-id | minus: 1 -%}
{%- assign person = people[person-id] -%}
{%- assign src = person.photo -%}
{%- unless src -%}
{%- assign placeholder = person.full_name | first_letters -%}
{%- endunless -%}
<{{ el }} class="avatar" style="background-image: url({{ page | relative }}/{{ src }})">{% unless src %}{{ person.full_name | first_letters }}{% endunless %}</{{ el }}>
{%- endif -%}
{%- if include.text -%}
{{ include.text }}
{%- else -%}
{{ person.full_name }}
{%- endif -%}
{% if include.addon %}<{{ el }} class="badge-addon {% if include.addon-color%}bg-{{ include.addon-color }}{% endif %}">{{ include.addon }}</{{ el }}>{% endif -%}
</{{ el }}>

24
liquid/includes/ui/breadcrumb.html Normal file
View file

@ -0,0 +1,24 @@
{% assign breadcrumb-pages = include.pages | default: "Home,Library,Data" | split: "," -%}
<!-- BEGIN BREADCRUMB -->
<nav aria-label="Breadcrumb">
<ol class="breadcrumb{% if include.class %} {{ include.class }}{% endif %}{% if include.separator %} breadcrumb-{{ include.separator }}{% endif %}">
{%- for page in breadcrumb-pages -%}
{%- if forloop.last -%}
<li class="breadcrumb-item active" aria-current="page">
{{ page }}
</li>
{%- else -%}
<li class="breadcrumb-item">
{% if forloop.first and include.home-icon-%}
<a href="{{ site.baseurl }}/">
{% include "ui/icon.html" icon="home" %}
</a>
{%- else -%}
<a href="#">{{ page }}</a>
{%- endif -%}
</li>
{%- endif -%}
{%- endfor -%}
</ol>
</nav>
<!-- END BREADCRUMB -->

44
liquid/includes/ui/button-group.html Normal file
View file

@ -0,0 +1,44 @@
{% assign button-items = include.items | split: ',' %}
{% assign button-icons = include.icons | split: ',' %}
{% assign id = include.id %}
<div class="btn-group{% if include.vertical %}-vertical{% endif %}{% if include.fluid %} w-100{% endif %}"role="group">
{% for item in button-items %}
{% if include.radio %}
<input type="radio" class="btn-check" name="btn-radio-{{ id }}" id="btn-radio-{{ id }}-{{ forloop.index }}" autocomplete="off"{% if forloop.index == 1 %} checked{% endif %}>
{% endif %}
<{% if include.radio %}label for="btn-radio-{{ id }}-{{ forloop.index }}"{% else %}button{% endif %} type="button" class="btn{% if forloop.index == 1 %}{% unless include.radio %} active{% endunless %}{% endif %}">{{ item }}</{% if include.radio %}label{% else %}button{% endif %}>
{% endfor %}
{% for icon in button-icons %}
{% if include.radio %}
<input type="radio" class="btn-check" name="btn-radio-{{ id }}" id="btn-radio-{{ id }}-{{ forloop.index }}" autocomplete="off"{% if forloop.index == 1 %} checked{% endif %}>
{% endif %}
<{% if include.radio %}label for="btn-radio-{{ id }}-{{ forloop.index }}"{% else %}button{% endif %} class="btn btn-icon{% if forloop.index == 1 %}{% unless include.radio %} active{% endunless %}{% endif %}">{% include "ui/icon.html" icon=icon %}</{% if include.radio %}label{% else %}button{% endif %}>
{% endfor %}
{% if include.dropdown %}
<div class="btn-group" role="group">
{% if include.radio %}
<input type="radio" class="btn-check" name="btn-radio-{{ id }}" id="btn-radio-{{ id }}-dropdown" autocomplete="off"{% if forloop.index == 1 %} checked{% endif %}>
{% endif %}
<{% if include.radio %}label for="btn-radio-{{ id }}-dropdown"{% else %}button{% endif %} class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Other
</{% if include.radio %}label{% else %}button{% endif %}>
{% include "ui/dropdown-menu.html" %}
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Option 4
</a>
<a class="dropdown-item" href="#">
Option 5
</a>
<a class="dropdown-item" href="#">
Option 6dropdown-menu
</a>
</div>
</div>
{% endif %}
</div>

29
liquid/includes/ui/button.html Normal file
View file

@ -0,0 +1,29 @@
{% assign spinner-class = false %}
{% assign color = include.color %}
{% if include.color == false %}
{% assign color = null %}
{% endif %}
{% assign provider = include.provider | default: 'fe' %}
{% if include.text %}{% assign spinner-class="me-2" %}{% endif %}
{% assign href = '#' %}
{% if include.href %}
{% if include.external %}
{% assign href = include.href %}
{% else %}
{% assign href = site.base | append: '/' | append: include.href %}
{% endif %}
{% endif %}
{% assign e = include.element | default: 'a' %}
<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %}{% if include.id %} id="{{ include.id }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% elsif include.ghost %}ghost-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.loading %} btn-loading{% endif %}{% if include.action %} btn-action{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} w-100{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank" rel="noreferrer"{% endif %}{% if include.modal-id %} data-bs-toggle="modal" data-bs-target="#modal-{{ include.modal-id }}"{% endif %}{% if include.toast-id %} data-bs-toggle="toast" data-bs-target="#toast-{{ include.toast-id }}"{% endif %}{% if include.icon-only %} aria-label="{{ include.text | default: "Button" }}"{% endif %}{% if include.dismiss %} data-bs-dismiss="modal"{% endif %}>
{% if include.spinner %}
{% include "ui/spinner.html" color=false size="sm" class=spinner-class element="span" %}{% endif %}
{% if include.icon %}{% include "ui/icon.html" icon=include.icon color=include.icon-color %}{% endif %}
{% unless include.icon-only %}
{{ include.text | default: "Button" }}{% if include.dots %}<span class="animated-dots"></span>{% endif %}
{% if include.icon-end %}{% include "ui/icon.html" icon=include.icon-end class="icon-end" %}{% endif %}
{% endunless %}
</{{ e }}>

12
liquid/includes/ui/card-dropdown.html Normal file
View file

@ -0,0 +1,12 @@
{% assign icon = include.icon | default: 'dots-vertical' %}
<div class="dropdown{% if include.class %} {{ include.class }}{% endif %}">
<a href="#" class="btn btn-action" data-bs-toggle="dropdown" aria-expanded="false">
{% include "ui/icon.html" icon=icon %}
</a>
<div class="dropdown-menu dropdown-menu-end">
<a href="#" class="dropdown-item">Import</a>
<a href="#" class="dropdown-item">Export</a>
<a href="#" class="dropdown-item">Download</a>
<a href="#" class="dropdown-item text-danger">Delete</a>
</div>
</div>

10
liquid/includes/ui/card-title.html Normal file
View file

@ -0,0 +1,10 @@
<div class="d-flex">
<h3 class="card-title{% if include.class %} {{ include.class }}{% endif %}">
{{ include.text | default: include.title | default: 'Card title' }}
</h3>
{% if include.more %}
<div class="ms-auto">
{% include "ui/button.html" icon="dots" size="sm" icon-only action %}
</div>
{% endif %}
</div>

40
liquid/includes/ui/carousel.html Normal file
View file

@ -0,0 +1,40 @@
{% assign limit = include.limit | default: 5 %}
{% assign offset = include.offset | default: 0 %}
{% assign filtered-photos = photos | where: "horizontal", true %}
{% assign carousel-id = include.id | default: "carousel" %}
<div id="carousel-{{ carousel-id }}" class="carousel slide{% if include.fade %} carousel-fade{% endif %}" data-bs-ride="carousel">
{% if include.indicators %}
<div class="carousel-indicators{% if include.indicators-vertical %} carousel-indicators-vertical{% endif %}{% if include.indicators-dot %} carousel-indicators-dot{% elsif include.indicators-thumb %} carousel-indicators-thumb{% endif %}">
{% for photo in filtered-photos limit: limit offset: offset %}
<button type="button" data-bs-target="#carousel-{{ carousel-id }}" data-bs-slide-to="{{ forloop.index | minus: 1 }}" class="{%if include.indicators-thumb-ratio %} ratio ratio-4x3{% endif %}{% if forloop.first %} active{% endif %}"{% if include.indicators-thumb %} style="background-image: url({{ page | relative }}/static/photos/{{ photo.file }})"{% endif %}></button>
{% endfor %}
</div>
{% endif %}
<div class="carousel-inner">
{% for photo in filtered-photos limit: limit offset: offset %}
<div class="carousel-item{% if forloop.first %} active{% endif %}">
<img class="d-block w-100" alt="" src="{{ page | relative }}/static/photos/{{ photo.file }}">
{% if include.captions %}
<div class="carousel-caption-background d-none d-md-block"></div>
<div class="carousel-caption d-none d-md-block">
<h3>Slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% if include.controls %}
<a class="carousel-control-prev" href="#carousel-{{ carousel-id }}" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-{{ carousel-id }}" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
{% endif %}
</div>

96
liquid/includes/ui/chart-heatmap.html Normal file
View file

@ -0,0 +1,96 @@
{% removeemptylines %}
{% assign id = include.chart-id %}
{% assign class = include.class %}
{% assign height = include.height | default: data.height | default: 25 %}
{% assign class = include.class %}
<div id="chart-{{ id }}"{% if class %} class="{{ class }}"{% endif %}></div>
{% capture script -%}
{% assign colors = include.colors | default: 1 %}
{% removeemptylines %}
<script>
document.addEventListener("DOMContentLoaded", function () {
{% if environment == 'development' %}
window.tabler_chart = window.tabler_chart || {};
{% endif %}
window.ApexCharts && ({% if environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
chart: {
height: {{ height | times: 16 }},
type: "heatmap",
toolbar: {
show: false,
},
},
dataLabels: {
enabled: {% if include.labels %}true{% else %}false{% endif %}
},
{% if include.scale %}
plotOptions: {
heatmap: {
enableShades: {% unless include.no-shades %}true{% else %}false{% endunless %},
colorScale: {
ranges: [{
from: 0,
to: 20,
name: "Low",
color: "var(--tblr-green)"
}, {
from: 21,
to: 50,
name: "Medium",
color: "var(--tblr-blue)"
}, {
from: 51,
to: 75,
name: "High",
color: "var(--tblr-yellow)"
}, {
from: 76,
to: 100,
name: "Extreme",
color: "var(--tblr-red)"
}]
}
}
},
{% else %}
colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}"{{ color[1].prop }}", {% endfor %}{% endif %}],
{% endif %}
series: [
{% for i in site.months-short limit: 12 %}
{% assign month-i = forloop.index %}
{ name: "{{ i }}", data: [{% for j in (1..16) %}{x: '{{ j }}', y: {{ j | random_number: 0, 100 | plus: month-i | random_number: 0, 100 }}},{% endfor %}] },
{% endfor %}
],
xaxis: {
type: "category"
},
legend: {
{% if include.legend %}
show: true,
position: 'bottom',
offsetY: 8,
markers: {
width: 10,
height: 10,
radius: 100,
},
itemMargin: {
horizontal: 8,
},
{% else %}
show: false,
{% endif %}
},
})).render();
});
</script>
{% endremoveemptylines %}
{%- endcapture %}
{% capture_script %}
{{ script }}
{% endcapture_script %}
{% endremoveemptylines %}

85
liquid/includes/ui/chart-sparkline.html Normal file
View file

@ -0,0 +1,85 @@
{% assign type = include.type | default: 'bar' %}
{% assign id = include.id %}
{% assign color = include.color | default: 'primary' %}
{% assign height = include.height | default: 2.5 %}
{% if include.small %}
{% assign height = include.height | default: 1.5 %}
{% endif %}
{% assign data = include.data %}
{% if include.percentage %}
{% assign data = include.percentage %}
{% endif %}
{% if id %}
<div class="chart-sparkline{% if type == 'pie' or type == 'donut' %} chart-sparkline-square{% endif %}{% if include.wide %} chart-sparkline-wide{% endif %}{% if include.small %} chart-sparkline-sm{% endif %}" id="sparkline-{{ id }}"></div>
{% capture_script %}
<script>
document.addEventListener("DOMContentLoaded", function () {
{% if environment == 'development' %}
window.tabler_chart = window.tabler_chart || {};
{% endif %}
window.ApexCharts && ({% if environment == 'development' %}window.tabler_chart["sparkline-{{ id }}"] = {% endif %}new ApexCharts(document.getElementById('sparkline-{{ id }}'), {
chart: {
type: "{% if type == 'donut' %}radialBar{% else %}{{ type }}{% endif %}",
fontFamily: 'inherit',
height: {{ height | times: 16 | round }},
{% if type == 'pie' or type == 'donut' %}
width: {{ height | times: 16 | round }},
{% endif %}
animations: {
enabled: false
},
sparkline: {
enabled: true
},
},
tooltip: {
enabled: false,
},
{% if type == 'donut' %}
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: '75%'
},
track: {
margin: 0
},
dataLabels: {
show: false
}
}
},
{% endif %}
{% if type == 'area' %}
fill: {
gradient: {
opacityFrom: [.1, .1]
}
},
{% endif %}
{% if type == 'area' or type == 'line' %}
stroke: {
width: 2,
lineCap: "round",
},
{% endif %}
{% if type == 'donut' %}
colors: ['var(--tblr-{{ color }})'],
series: [{{ data }}],
{% else %}
series: [{
color: 'var(--tblr-{{ color }})',
data: [{{ data }}]
}],
{% endif %}
})).render();
});
</script>
{% endcapture_script %}
{% endif %}

311
liquid/includes/ui/chart.html Normal file
View file

@ -0,0 +1,311 @@
{% removeemptylines %}
{% assign data = charts[include.chart-id] %}
{% assign id = include.id | default: include.chart-id %}
{% assign height = include.height | default: data.height | default: 10 %}
{% assign class = include.class %}
{% if include['size'] == 'sm' %}
{% assign class = class | append: ' chart-sm' | strip %}
{% assign height = 2.5 %}
{% elsif include['size'] == 'lg' %}
{% assign class = class | append: ' chart-lg' | strip %}
{% assign height = 15 %}
{% endif %}
{% if data %}
{% if data.extend %}
{% assign data = charts[data.extend] | concat_objects: charts[include.chart-id] %}
{% endif %}
<div id="chart-{{ id }}" class="position-relative {% if class %} {{ class }}{% endif %}"></div>
{% capture script %}
{% assign chart-type = data.type | default: 'bar' -%}
{% removeemptylines %}
<style>
:root {
{% if data.series %}
{% for serie in data.series %}
{% assign color = serie.color | default: data.color | default: 'primary' %}
{% assign opacity = serie.color-opacity | default: '100%' %}
--chart-{{ id }}-color-{{ forloop.index0 }}: color-mix(in srgb, transparent, var(--tblr-{{ color }}) {{ opacity }});
{% endfor %}
{% endif %}
{% if chart-type == 'area' %}
--chart-{{ id }}-fill-0: color-mix(in srgb, transparent, var(--tblr-primary) 16%);
--chart-{{ id }}-fill-1: color-mix(in srgb, transparent, var(--tblr-primary) 16%);
{% endif %}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
{% if environment == 'development' %}
window.tabler_chart = window.tabler_chart || {};
{% endif %}
window.ApexCharts && ({% if environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
chart: {
type: "{{ chart-type }}",
fontFamily: 'inherit',
height: {{ height | times: 16 }},
{% if data.sparkline %}
sparkline: {
enabled: true
},
{% else %}
parentHeightOffset: 0,
toolbar: {
show: {% if data.toolbar %}true{% else %}false{% endif %},
},
{% endif %}
{% unless data.animations %}
animations: {
enabled: false
},
{% endunless %}
{% if data.stacked %}
stacked: true,
{% endif %}
},
{% if chart-type == 'bar' %}
plotOptions: {
bar: {
{% if data.horizontal %}
barHeight: '50%',
horizontal: true,
{% else %}
columnWidth: '50%',
{% endif %}
}
},
{% endif %}
{% if chart-type == 'radialBar' %}
plotOptions: {
radialBar: {
startAngle: -120,
endAngle: 120,
hollow: {
margin: 16,
size: "50%"
},
dataLabels: {
show: true,
value: {
offsetY: -8,
fontSize: '24px',
}
},
},
},
{% endif %}
{% if chart-type == 'bar' or chart-type == 'area' %}
dataLabels: {
enabled: {% if data.datalabels %}true{% else %}false{% endif %},
},
{% endif %}
{% if chart-type == 'area' %}
fill: {
colors: [
'var(--chart-{{ id }}-fill-0)',
'var(--chart-{{ id }}-fill-1)',
],
type: 'solid'
},
{% endif %}
{% if data.title %}
title: {
text: "{{ data.title | escape }}",
margin: 0,
floating: true,
offsetX: 10,
style: {
fontSize: '18px',
},
},
{% endif %}
{% if chart-type == 'area' or chart-type == 'line' %}
stroke: {
width: {% if data.stroke-width %}[{{ data.stroke-width | join: ', '}}]{% else %}2{% endif %},
{% if data.stroke-dash %}dashArray: [{{ data.stroke-dash | join: ', '}}],{% endif %}
lineCap: "round",
curve: "{{ data.stroke-curve | default: 'smooth' }}",
},
{% endif %}
{% if data.series %}
{% if chart-type == 'pie' or chart-type == 'donut' or chart-type == 'radialBar' %}
series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
{% elsif chart-type == 'candlestick' %}
series: [{% for serie in data.series %}{
name: "{{ serie.name }}",
data: [{% if serie.candlestick-data %}{% for candle in serie.candlestick-data %}{x: {{ candle.x }}, y: [{{ candle.y | join: ', ' }}]}{% unless forloop.last %}, {% endunless %}{% endfor %}{% else %}{{ serie.data | join: ', ' }}{% endif %}]
}{% unless forloop.last %},{% endunless %}{% endfor %}],
{% else %}series: [{% for serie in data.series %}{
name: "{{ serie.name }}",
data: [{{ serie.data | join: ', ' }}]
}{% unless forloop.last %},{% endunless %}{% endfor %}],
{% endif %}
{% endif %}
tooltip: {
theme: 'dark'
},
grid: {
{% unless data.sparkline %}
padding: {
top: -20,
right: 0,
left: -4,
bottom: -4
},
{% endunless %}
{% if data.hide-grid %}
show: false,
{% else %}
strokeDashArray: 4,
{% if data.show-x %}
xaxis: {
lines: {
show: true
}
},
{% endif %}
{% endif %}
},
{% if data.show-data-labels %}
dataLabels: {
enabled: true,
},
{% endif %}
{% if data.categories or data.datetime %}
xaxis: {
labels: {
padding: 0,
{% if data.x-formatter %}
formatter: function(val) {
return {{ data.x-formatter }}
},
{% endif %}
},
tooltip: {
enabled: false
},
{% if chart-type == 'area' or chart-type == 'bar' %}
axisBorder: {
show: false,
},
{% endif %}
{% if data.categories %}
categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],
{% endif %}
{% if data.datetime %}
type: 'datetime',
{% endif %}
},
{% endif %}
{% unless chart-type == 'pie' or chart-type == 'donut' or chart-type == 'radialBar' %}
yaxis: {
labels: {
padding: 4
},
{% if data.y-max %}
max: {{ data.y-max }},
{% endif %}
{% if data.y-title %}
title: {
text: '{{ data.y-title | escape }}'
}
{% endif %}
{% if data.y-tooltip %}
tooltip: {
enabled: true
}
{% endif %}
},
{% endunless %}
{% if data.datetime %}
{% assign date = data.start-date | default: '2020-06-20' | date: "%s" %}
{% assign days-count = data.series[0].data.size %}
labels: [
{% for i in (1..days-count) %}{% assign date = date | plus: 86400 %}'{{ date | timestamp_to_date }}'{% unless forloop.last %}, {% endunless %}{% endfor %}
],
{% endif %}
{% if data.series %}
colors: [{% for serie in data.series %}'var(--chart-{{ id }}-color-{{ forloop.index0 }})'{% unless forloop.last %}, {% endunless %}{% endfor %}],
{% endif %}
legend: {
{% if data.legend %}
show: true,
position: 'bottom',
offsetY: 12,
markers: {
width: 10,
height: 10,
radius: 100,
},
itemMargin: {
horizontal: 8,
vertical: 8
},
{% else %}
show: false,
{% endif %}
},
{% if data.hide-tooltip or chart-type == 'pie' or chart-type == 'donut' %}
tooltip: {
{% if data.hide-tooltip %}
enabled: false,
{% endif %}
{% if chart-type == 'pie' or chart-type == 'donut' %}
fillSeriesColor: false
{% endif %}
},
{% endif %}
{% if data.hide-points %}
point: {
show: false
},
{% endif %}
{% if data.show-markers %}
markers: {
size: 2
},
{% endif %}
})).render();
});
</script>
{% endremoveemptylines %}
{%- endcapture %}
{% capture_script %}
{{ script }}
{% endcapture_script %}
{% endif %}
{% endremoveemptylines %}

40
liquid/includes/ui/chat.html Normal file
View file

@ -0,0 +1,40 @@
<div class="chat">
<div class="chat-bubbles">
{% for message in chats %}
{% assign person = people[message.person-id] %}
{% capture chat-avatar %}
<div class="col-auto">{% include "ui/avatar.html" person=person %}</div>
{%- endcapture %}
{% capture chat-message %}
<div class="{% if message.loading %}col-auto{% else %}col{% if include.wide %} col-lg-6{% endif %}{% endif %}">
<div class="chat-bubble{% if message.person-id == 0 %} chat-bubble-me{% endif %}">
{% unless message.loading %}
<div class="chat-bubble-title">
<div class="row">
<div class="col chat-bubble-author">{{ person.full_name }}</div>
<div class="col-auto chat-bubble-date">{{ message.timestamp }}</div>
</div>
</div>
{% endunless %}
<div class="chat-bubble-body">
{% if message.loading %}
<p class="text-secondary text-italic">typing<span class="animated-dots"></span></p>
{% else %}
<p>{{ message.message }}</p>
{% endif %}
{% if message.gif %}
<div class="mt-2">
<img src="{{ message.gif }}" alt="" class="rounded img-fluid" />
</div>
{% endif %}
</div>
</div>
</div>
{%- endcapture %}
<div class="chat-item">
<div class="row align-items-end{% if message.person-id == 0 %} justify-content-end{% endif %}">{% if message.person-id == 0 %} {{ chat-message }} {{ chat-avatar }} {% else %} {{ chat-avatar }} {{ chat-message }} {% endif %}</div>
</div>
{% endfor %}
</div>
</div>

28
liquid/includes/ui/colorpicker.html Normal file
View file

@ -0,0 +1,28 @@
{% assign id = include.id | default: 'default' %}
{% assign alpha = include.alpha | default: false %}
{% assign format = include.format | default: false %}
<input type="text" class="form-control d-block{% if include.class %} {{ include.class }}{% endif %}" id="colorpicker-{{ id }}" value="{{ include.value }}" />
{% capture_script %}
<script>
document.addEventListener("DOMContentLoaded", function () {
{% if environment == 'development' %}
window.tabler_colorpicker = window.tabler_colorpicker || {};
{% endif %}
window.Coloris && ({% if environment == 'development' %}window.tabler_colorpicker["colorpicker-{{ id }}"] = {% endif %}Coloris({
el: "#colorpicker-{{ id }}",
selectInput: false,
alpha: {% if alpha %}true{% else %}false{% endif %},
{% if format %}format: "{{ format }}",{% endif %}
{% if include['swatches-only'] %}swatchesOnly: true,{% endif %}
swatches: [
{% for color in site.colors %}
window.getComputedStyle(document.body).getPropertyValue('{{ color[1].prop }}'),
{% endfor %}
],
}))
})
</script>
{% endcapture_script %}

54
liquid/includes/ui/datepicker.html Normal file
View file

@ -0,0 +1,54 @@
{% assign value = include.value | default: '2020-06-20' %}
{% assign placeholder = include.placeholder | default: 'Select a date' %}
{% if include.id %}
{% capture input %}
<input class="form-control{% if include.class %} {{ include.class }}{% endif %}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %} id="datepicker-{{ include.id }}" value="{{ value }}"/>
{%- endcapture %}
{% if include.inline %}
<div class="datepicker-inline" id="datepicker-{{ include.id }}"></div>
{% elsif include.layout == 'icon' %}
<div class="input-icon{% if include.class %} {{ include.class }}{% endif %}">
{{ input | replace: include.class, '' }}
<span class="input-icon-addon">{% include "ui/icon.html" icon="calendar" %}</span>
</div>
{% elsif include.layout == 'icon-prepend' %}
<div class="input-icon{% if include.class %} {{ include.class }}{% endif %}">
<span class="input-icon-addon">{% include "ui/icon.html" icon="calendar" %}</span>
{{ input | replace: include.class, '' }}
</div>
{% else %}
{{ input }}
{% endif %}
{% capture script %}
<script>
document.addEventListener("DOMContentLoaded", function () {
{% if environment == 'development' %}
window.tabler_datepicker = window.tabler_datepicker || {};
{% endif %}
window.Litepicker && ({% if environment == 'development' %}window.tabler_datepicker["datepicker-{{ include.id }}"] = {% endif %}new Litepicker({
element: document.getElementById('datepicker-{{ include.id }}'),
buttonText: {
previousMonth: `{% capture icon %}{% include "ui/icon.html" icon="chevron-left" %}{%- endcapture %}{{ icon | strip }}`,
nextMonth: `{% capture icon %}{% include "ui/icon.html" icon="chevron-right" %}{%- endcapture %}{{ icon | strip }}`,
},
{% if include.inline %}inlineMode: true,{% endif %}
}));
});
</script>
{%- endcapture %}
{% if include.show-scripts %}
{{ script }}
{% else %}
{% capture_script %}
{{ script }}
{% endcapture_script %}
{% endif %}
{% endif %}

35
liquid/includes/ui/dropdown-menu-all.html Normal file
View file

@ -0,0 +1,35 @@
<div class="dropdown-menu{% if include.show %} dropdown-menu-demo{% endif %}">
<h6 class="dropdown-header">Dropdown header</h6>
<a href="#" class="dropdown-item">{% include "ui/icon.html" icon="activity" class="dropdown-item-icon" %} Item 1</a>
<a href="#" class="dropdown-item">{% include "ui/icon.html" icon="edit" class="dropdown-item-icon" %} Item 2</a>
<div class="dropdown-item">
<a href="#" class="text-reset">My profile</a>
<label class="form-check m-0 ms-auto">
<input type="checkbox" class="form-check-input">
Public
</label>
</div>
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio"> Radio input</label>
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="checkbox"> Checkbox input</label>
<label class="dropdown-item form-switch"><input class="form-check-input m-0 me-2" type="checkbox"> Checkbox input</label>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Dropdown item 1</a>
<a href="#" class="dropdown-item">Dropdown item 2</a>
<a href="#" class="dropdown-item disabled">Dropdown disabled</a>
<a href="#" class="dropdown-item active">Dropdown active</a>
<div class="dropdown-divider"></div>
{% for person in people limit: 3 %}
<a href="#" class="dropdown-item">{% include "ui/avatar.html" person-id=person.id class="rounded me-2" size="xs" %} {{ person.full_name }}</a>
{% endfor %}
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">{% include "ui/icon.html" icon="logout" class="dropdown-item-icon" %} Logout</a>
</div>

53
liquid/includes/ui/dropdown-menu.html Normal file
View file

@ -0,0 +1,53 @@
<div class="dropdown-menu{% if include.right %} dropdown-menu-end{% endif %}{% if include.show %} dropdown-menu-demo{% endif %}{% if include.arrow %} dropdown-menu-arrow{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.dark %} data-bs-theme="dark"{% endif %}>
{% if include.menu %}
{% assign menu = include.menu | split: ',' %}
{% for item in menu %}
{% if item == '|' %}
<div class="dropdown-divider"></div>
{% elsif item contains 'h:' %}
<h3 class="dropdown-header">{{ item | replace: 'h:', '' }}</h3>
{% elsif item contains 'a:' %}
<a href="#" class="dropdown-item active">{{ item | replace: 'a:', '' }}</a>
{% elsif item contains 'd:' %}
<a href="#" class="dropdown-item text-danger">{{ item | replace: 'd:', '' }}</a>
{% else %}
<a href="#" class="dropdown-item">{{ item }}</a>
{% endif %}
{% endfor %}
{% elsif include.check or include.radio %}
{% for i in (1..3) %}
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="{% if include.radio %}radio{% else %}checkbox{% endif %}"> Option {{ i }}</label>
{% endfor %}
{% elsif include.people %}
{% for person in people limit: 5 %}
<a href="#" class="dropdown-item">{% include "ui/avatar.html" person-id=person.id size="xs" %} {{ person.full_name }}</a>
{% endfor %}
{% elsif include.flag %}
{% for country in countries limit: 5 %}
<a href="#" class="dropdown-item">{% include "ui/flag.html" flag=country.flag size="xs" %} {{ country.name }}</a>
{% endfor %}
{% elsif include.type == 'text' %}
{% else %}
{% if include.header %}<span class="dropdown-header">Dropdown header</span>{% endif %}
<a class="dropdown-item" href="#">
{% if include.icons %}{% include "ui/icon.html" icon="settings" class="dropdown-item-icon" %} {% endif %}
Action
{% if include.badge %}<span class="badge bg-primary text-primary-fg ms-auto">12</span>{% endif %}
</a>
<a class="dropdown-item" href="#">
{% if include.icons %}{% include "ui/icon.html" icon="edit" class="dropdown-item-icon" %} {% endif %}Another action
{% if include.badge %}<span class="badge bg-green ms-auto"></span>{% endif %}
</a>
{% if include.active %}<a class="dropdown-item active" href="#">{% if include.icons %}{% include "ui/icon.html" icon="activity" class="dropdown-item-icon" %} {% endif %}Active action</a>{% endif %}
{% if include.disabled %}<a class="dropdown-item disabled" href="#">{% if include.icons %}{% include "ui/icon.html" icon="user-x" class="dropdown-item-icon" %} {% endif %}Disabled action</a>{% endif %}
{% if include.separated %}
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">{% if include.icons %}{% include "ui/icon.html" icon="plus" class="dropdown-icon" class="dropdown-item-icon" %} {% endif %}Separated link</a>
{% endif %}
{% endif %}
</div>

10
liquid/includes/ui/dropdown.html Normal file
View file

@ -0,0 +1,10 @@
{% assign optionsArray = include.options | split: ", " %}
<div class="dropdown">
<a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">{{ include.main-btn }}</a>
<div class="dropdown-menu">
{% for option in optionsArray %}
<a class="dropdown-item" href="#">{{ option }}</a>
{% endfor %}
</div>
</div>

25
liquid/includes/ui/dropzone.html Normal file
View file

@ -0,0 +1,25 @@
{% assign id = include.id %}
{% assign text = include.text | default: "Text"%}
{% assign description = include.description | default: "Description" %}
<form class="dropzone" id="dropzone-{{ id }}" action="{{ page | relative }}/" autocomplete="off" novalidate>
<div class="fallback">
<input name="file" type="file" {% if include.multiple %} multiple {% endif %} />
</div>
{% if include.custom %}
<div class="dz-message">
<h3 class="dropzone-msg-title">{{text}}</h3>
<span class="dropzone-msg-desc">{{description}}</span>
</div>
{% endif %}
</form>
{% capture_script %}
<script>
{% if environment == 'development' %}window.tabler_dropzone = window.tabler_dropzone || {};{% endif %}
document.addEventListener("DOMContentLoaded", function() {
{% if environment == 'development' %}window.tabler_dropzone["dropzone-{{ id }}"] = {% endif %}new Dropzone("#dropzone-{{ id }}")
})
</script>
{% endcapture_script %}

24
liquid/includes/ui/empty.html Normal file
View file

@ -0,0 +1,24 @@
{% assign icon = include.icon | default: "mood-sad" %}
{% assign height = include.height | default: 256 %}
<div class="empty{% if include.bordered %} empty-bordered{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
{% if include.illustration %}
{% assign illustration = include.illustration | default: 'boy-girl.svg' %}
<div class="empty-img">{% include "ui/illustration.html" image=illustration height=height %}</div>
{% elsif include.icon-text %}
<div class="empty-header">{{ include.icon-text }}</div>
{% else %}
<div class="empty-icon">{% include "ui/icon.html" icon=icon %}</div>
{% endif %}
<p class="empty-title">{{ include.title | default: "No results found" }}</p>
<p class="empty-subtitle text-secondary">
{{ include.subtitle | default: "Try adjusting your search or filter to find what you're looking for." }}
</p>
<div class="empty-action">
{% assign button-text = include.button-text | default: "Search again" %}
{% assign button-icon = include.button-icon | default: "search" %}
{% include "ui/button.html" text=button-text color="primary" icon=button-icon href="." %}
</div>
</div>

1
liquid/includes/ui/flag.html Normal file
View file

@ -0,0 +1 @@
<span class="flag{% if include['size'] %} flag-{{ include.size }}{% endif %} flag-country-{{ include.flag | default: 'pl' | downcase }}{% if include.class %} {{ include.class }}{% endif %}"></span>

25
liquid/includes/ui/form/check.html Normal file
View file

@ -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>

1
liquid/includes/ui/form/input-file.html Normal file
View file

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

48
liquid/includes/ui/form/input-group.html Normal file
View file

@ -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>

24
liquid/includes/ui/form/input-icon.html Normal file
View file

@ -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>

1
liquid/includes/ui/form/input-mask.html Normal file
View file

@ -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"/>

16
liquid/includes/ui/form/input-selectgroup.html Normal file
View file

@ -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>

1
liquid/includes/ui/form/textarea-autosize.html Normal file
View file

@ -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>

87
liquid/includes/ui/fullcalendar.html Normal file
View file

@ -0,0 +1,87 @@
{% removeemptylines %}
{% assign id = include.id | default: 'default' -%}
<div id="calendar-{{ id }}"></div>
{% capture script %}
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar-{{ id }}');
var currentYear = new Date().getFullYear();
var currentMonth = new Date().getMonth();
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
{% if include.sample-events %}
events: [
{
title: "Offsite Retreat",
start: new Date(currentYear, currentMonth, 2, 9, 0),
end: new Date(currentYear, currentMonth, 4, 17, 0),
color: 'var(--tblr-red)',
backgroundColor: 'var(--tblr-red-lt)',
borderColor: 'var(--tblr-red-200)',
},
{
title: "Monthly Planning",
start: new Date(currentYear, currentMonth, 1, 10, 0),
end: new Date(currentYear, currentMonth, 1, 11, 30),
},
{
title: "Marketing Strategy Call",
start: new Date(currentYear, currentMonth, 4, 14, 0),
end: new Date(currentYear, currentMonth, 4, 15, 0)
},
{
title: "Design Sprint",
start: new Date(currentYear, currentMonth, 7, 9, 0),
end: new Date(currentYear, currentMonth, 7, 12, 0)
},
{
title: "Dev Team Check-in",
start: new Date(currentYear, currentMonth, 10, 11, 0),
end: new Date(currentYear, currentMonth, 10, 11, 30)
},
{
title: "Customer Feedback Review",
start: new Date(currentYear, currentMonth, 13, 13, 0),
end: new Date(currentYear, currentMonth, 13, 14, 0)
},
{
title: "Mid-Month Review",
start: new Date(currentYear, currentMonth, 15, 10, 30),
end: new Date(currentYear, currentMonth, 15, 11, 30)
},
{
title: "Webinar: Product Update",
start: new Date(currentYear, currentMonth, 18, 16, 0),
end: new Date(currentYear, currentMonth, 18, 17, 0)
},
{
title: "Sales Training",
start: new Date(currentYear, currentMonth, 21, 9, 30),
end: new Date(currentYear, currentMonth, 21, 11, 0)
},
{
title: "Company All-Hands",
start: new Date(currentYear, currentMonth, 25, 15, 0),
end: new Date(currentYear, currentMonth, 25, 16, 0)
},
{
title: "End-of-Month Wrap-up",
start: new Date(currentYear, currentMonth, 31, 10, 0),
end: new Date(currentYear, currentMonth, 31, 11, 0)
}
],
{% endif %}
});
calendar.render();
});
</script>
{% endcapture %}
{% capture_script %}
{{ script }}
{% endcapture_script %}
{% endremoveemptylines %}

1
liquid/includes/ui/hr.html Normal file
View file

@ -0,0 +1 @@
<div class="hr-text{% if include.position %} hr-text-{{ include.position | downcase }}{% endif %}{% if include.color %} text-{{ include.color }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">{{ include.text | default: 'Label' }}</div>

31
liquid/includes/ui/icon.html Normal file
View file

@ -0,0 +1,31 @@
{%- assign icon-name = include.icon -%}
{%- assign icon-type = include.type | default: "outline" -%}
{%- assign replace-to = "icon" -%}
{%- if include.class -%}
{%- assign replace-to = replace-to | append: ' ' | append: include.class -%}
{%- endif -%}
{%- if include.color -%}
{%- assign replace-to = replace-to | append: ' text-' | append: include.color -%}
{%- endif %}
{%- if include.inline -%}
{%- assign replace-to = replace-to | append: ' icon-inline' -%}
{%- endif -%}
{%- if include['size'] -%}
{%- assign replace-to = replace-to | append: ' icon-' | append: include['size'] -%}
{%- endif -%}
{%- assign replace-to = 'class="' | append: replace-to | append: '"' -%}
{%- if site.useIconfont -%}
<i class="icon ti ti-{{ icon-name }}{% if include.color %} {{ include.color }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"></i>
{%- elsif icons[icon-name] -%}
<!-- Download SVG icon from http://tabler.io/icons/icon/{{ icon-name }} -->
{% assign svg-icon = icons[icon-name].svg[icon-type] | default: '' -%}
{%- assign svg-icon = svg-icon | replace: '<path stroke="none" d="M0 0h24v24H0z" fill="none"/>', '' -%}
{{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to | replace: 'class="', 'aria-hidden="true" focusable="false" class="' }}
{%- endif -%}

16
liquid/includes/ui/illustration.html Normal file
View file

@ -0,0 +1,16 @@
{% removeemptylines %}
{% assign image = include.image | replace: '.svg', '' %}
{% assign height = include.height | default: 128 %}
{% assign illustration = free-illustrations.autodark[image] %}
{% assign replace-to = '<svg class="img' %}
{% if include.class %}{% assign replace-to = replace-to | append: ' ' | append: include.class %}{% endif %}
{% assign replace-to = replace-to | append: '" ' %}
{% assign illustration = illustration | replace: '<svg ', replace-to %}
{% assign replace-to-height = 'height="' | append: height | append: '"' %}
{% assign illustration = illustration | replace: 'width="800" height="600"', replace-to-height %}
{{ illustration }}
{% endremoveemptylines %}

17
liquid/includes/ui/inline-player.html Normal file
View file

@ -0,0 +1,17 @@
{% assign id = include.id %}
{% if id and include.embed-id %}
<div id="player-{{ id }}" data-plyr-provider="{{ include.type | default: 'youtube' }}" data-plyr-embed-id="{{ include.embed-id }}"></div>
{% capture_script %}
<script>
document.addEventListener("DOMContentLoaded", function () {
{% if environment == 'development' %}
window.tabler_player = window.tabler_player || {};
{% endif %}
window.Plyr && ({% if environment == 'development' %}window.tabler_player["player-{{ id }}"] = {% endif %}new Plyr('#player-{{ id }}'));
});
</script>
{% endcapture_script %}
{% endif %}

117
liquid/includes/ui/map-vector.html Normal file
View file

@ -0,0 +1,117 @@
{% removeemptylines %}
{% assign id = include.map-id %}
{% assign data = maps-vector[id] %}
{% assign color = include.color | default: data.color | default: 'primary' %}
{% if data %}
<div class="ratio ratio-{{ include.ratio | default: '4x3' }}">
<div>
<div id="map-{{ id }}" class="w-100 h-100"></div>
</div>
</div>
{% capture script %}
{% removeemptylines %}
<script>
{% if environment == 'development' %}window.tabler_map_vector = window.tabler_map_vector || {};{% endif %}
document.addEventListener("DOMContentLoaded", function() {
const map = {% if environment == 'development' %}window.tabler_map_vector["map-{{ id }}"] = {% endif %}new jsVectorMap({
selector: '#map-{{ id }}',
map: '{{ data.map }}',
backgroundColor: 'transparent',
regionStyle: {
initial: {
{% unless data.filled %}
fill: 'var(--tblr-bg-surface-secondary)',
stroke: 'var(--tblr-border-color)',
strokeWidth: 2,
{% else %}
fill: 'var(--tblr-bg-surface-secondary)',
stroke: '#fff',
strokeWidth: 1,
{% endunless %}
}
},
zoomOnScroll: {% if data.zoom %}true{% else %}false{% endif %},
zoomButtons: {% if data.zoom %}true{% else %}false{% endif %},
{% if data.values %}
series: {
regions: [{
attribute: "fill",
scale: {
{% for i in (1..10) %}
scale{{ i }}: 'color-mix(in srgb, transparent, var(--tblr-primary) {{ i | times: 10 }}%)',
{% endfor %}
},
values: {{ data.values | json }},
}]
}
{% endif %}
{% if data.markers %}
markers: [
{% for marker in data.markers %}
{
coords: [{{ marker.coords }}],
name: "{{ marker.name }}",
},
{% endfor %}
],
markerStyle: {
initial: {
r: 4,
stroke: '#fff',
opacity: 1,
strokeWidth: 3,
stokeOpacity: .5,
fill: 'var(--tblr-{{ color }})'
},
hover: {
fill: 'var(--tblr-{{ color }})',
stroke: 'var(--tblr-{{ color }})'
}
},
markerLabelStyle: {
initial: {
fontSize: 10
},
},
labels: {
markers: {
render: function(marker) {
return marker.name
},
},
},
{% endif %}
{% if data.lines %}
lines: [
{% for line in data.lines %}
{
from: "{{ line.from }}",
to: "{{ line.to }}"
},
{% endfor %}
],
lineStyle: {
strokeDasharray:"4 4",
animation: true,
stroke: "rgba(98, 105, 118, .75)",
strokeWidth: .5,
},
{% endif %}
});
window.addEventListener("resize", () => {
map.updateSize();
});
});
{% endremoveemptylines %}
</script>
{%- endcapture %}
{% capture_script %}
{{ script }}
{% endcapture_script %}
{% endif %}
{% endremoveemptylines %}

37
liquid/includes/ui/map.html Normal file
View file

@ -0,0 +1,37 @@
{% assign id = include.map-id %}
{% assign data = maps[id] %}
{% if data %}
<div class="ratio ratio-{{ data.ratio | default: include.ratio | default: '16x9' }}">
<div>
<div id="map-{{ id }}" class="w-100 h-100{% if data.card %} rounded{% endif %}"></div>
</div>
</div>
{% capture_script %}
<script>
{% if environment == 'development' %}window.tabler_map = window.tabler_map || {};{% endif %}
document.addEventListener("DOMContentLoaded", function() {
mapboxgl.accessToken = '{{ site.mapboxKey }}';
var map = new mapboxgl.Map({
container: 'map-{{ id }}',
style: 'mapbox://styles/mapbox/{{ data.style | default: "streets-v11" }}',
zoom: {{ data.zoom | default: 13 }},
{% if data.center %}
center: [{{ data.center[1] }}, {{ data.center[0] }}],
{% else %}
center: [13.404900, 52.518827],
{% endif %}
});
{% for marker in data.markers %}
new mapboxgl.Marker({ color: "var(--tblr-primary)" }).setLngLat([{{ marker.center[1] }}, {{ marker.center[0] }}]).addTo(map);
{% endfor %}
{% if environment == 'development' %}window.tabler_map["map-{{ map-id }}"] = map;{% endif %}
});
</script>
{% endcapture_script %}
{% endif %}

21
liquid/includes/ui/marketing/browser.html Normal file
View file

@ -0,0 +1,21 @@
<div class="browser">
<div class="browser-header">
<div class="row align-items-center">
<div class="col-auto col-md-2">
<div class="browser-dots browser-dots-colored">
<div class="browser-dot"></div>
<div class="browser-dot"></div>
<div class="browser-dot"></div>
</div>
</div>
<div class="col-8">
<a href="{{ site.previewUrl }}" class="browser-input" target="_blank" rel="noopener noreferrer"
data-bs-toggle="tooltip" data-bs-placement="top" title="Open preview of Tabler dashboard!">
{% include "ui/icon.html" icon="lock" color="green" size="sm" class="me-2" %}
{% if include.url %}{{ include.url }}{% else %}{{ site.previewUrl }}{% endif %}
</a>
</div>
</div>
</div>
{% include "ui/responsive-image.html" src="static/marketing/preview.png" width=1040 height=760 %}
</div>

15
liquid/includes/ui/modal.html Normal file
View file

@ -0,0 +1,15 @@
<!-- BEGIN MODAL -->
{% assign modal-id = include.modal-id | default: 'simple' %}
{% assign size = include['size'] %}
{% assign inline = include.inline | default: false %}
{% capture_modal inline %}
<div class="modal modal-blur fade{% if include.class %} {{ include.class }}{% endif %}{% if include.show %} show{% endif %}" {% if include.style %} style="{{ include.style }}"{% endif %} id="modal-{{ modal-id }}" tabindex="-1" role="dialog"{% if include.show %} aria-hidden="false"{% else %} aria-hidden="true"{% endif %}>
<div class="modal-dialog{% if size%} modal-{{ size }}{% endif %}{% unless include.top %} modal-dialog-centered{% endunless %}{% if include.scrollable %} modal-dialog-scrollable{% endif %}" role="document">
<div class="modal-content">
{% include "parts/modals/{{ modal-id }}.html" %}
</div>
</div>
</div>
{% endcapture_modal %}
<!-- END MODAL -->

1
liquid/includes/ui/modal/close.html Normal file
View file

@ -0,0 +1 @@
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

4
liquid/includes/ui/modal/footer.html Normal file
View file

@ -0,0 +1,4 @@
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
</div>

4
liquid/includes/ui/modal/header.html Normal file
View file

@ -0,0 +1,4 @@
<div class="modal-header">
<h5 class="modal-title">{{ include.title | default: 'Modal title' }}</h5>
{% include "ui/modal/close.html" %}
</div>

30
liquid/includes/ui/nav-segmented.html Normal file
View file

@ -0,0 +1,30 @@
{% assign segmented-icons = include.icons | default: "" | split: "," %}
{% assign segmented-items = include.items | default: "" | split: "," %}
{% assign segmented-disabled = include.disabled | default: "" | split: "," %}
{% assign segmented-hover = include.hover | default: "" %}
{% assign segmented-default = include.default | default: 1 | plus: 0 %}
{% assign segmented-items-count = segmented-items | size %}
{% assign segmented-icons-count = segmented-icons | size %}
{% assign segmented-all-count = segmented-items-count %}
{% if segmented-icons-count > segmented-all-count %}{% assign segmented-all-count = segmented-icons-count %}{% endif %}
<nav class="nav nav-segmented{% if include.vertical %} nav-segmented-vertical{% endif %}{% if include.size %} nav-{{ include.size }}{% endif %}{% if include.full-width %} w-100{% endif %}{% if include.class %} {{ include.class }}{% endif %}" role="tablist"{% if include.vertical %} aria-orientation="vertical"{% endif %}>
{% for i in (1..segmented-all-count) %}
{% assign index = forloop.index | append: "" %}
{% assign disabled = segmented-disabled | contains: index %}
{% assign is-default = forloop.index == segmented-default %}
{% if include.name %}<input type="radio" class="nav-link-input" name="{{ include.name }}" id="segmented-{{include.name }}-{{ index }}" {% if is-default %}checked{% endif %} />{% endif %}
<{% if include.name %}label for="segmented-{{include.name }}-{{ index }}"{% else %}button{% endif %} class="nav-link{% if disabled %} disabled{% endif %}{% if is-default and not include.name %} active{% endif %}{% if segmented-hover == index %} hover{% endif %}" role="tab"{% unless include.name %} data-bs-toggle="tab"{% endunless %} aria-selected="{% if is-default %}true{% else %}false{% endif %}" {% if disabled %} aria-disabled="true"{% endif %}{% if is-default %} aria-current="page"{% endif %}>
{% if segmented-icons[forloop.index0] %}
{% include "ui/icon.html" icon=segmented-icons[forloop.index0] class="nav-link-icon" %}
{% endif %}
{% if segmented-items[forloop.index0] %}
{{ segmented-items[forloop.index0] }}
{% endif %}
</{% if include.name %}label{% else %}button{% endif %}>
{% endfor %}
</nav>

23
liquid/includes/ui/nav.html Normal file
View file

@ -0,0 +1,23 @@
<ul class="nav {% if include.pills %}nav-pills{% if include.header %} card-header-pills{% endif %}{% elsif include.tabs %}nav-tabs{% if include.header %} card-header-tabs{% endif %}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
<li class="nav-item">
<a class="nav-link active" href="#">
Active
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
{% include "ui/icon.html" icon="star" class="nav-link-icon" %}
Link
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
Disabled
</a>
</li>
<li class="nav-item ms-auto">
<a class="nav-link" href="#">
{% include "ui/icon.html" icon="settings" %}
</a>
</li>
</ul>

57
liquid/includes/ui/pagination.html Normal file
View file

@ -0,0 +1,57 @@
{% assign count = include.count | default: 5 -%}
{% assign offset = include.offset | default: count -%}
{% assign count-offset = count | minus: offset | plus: 1 -%}
{% assign active-item = include.active-item | default: 3 -%}
<!-- BEGIN PAGINATION -->
<ul class="pagination{% if include.class %} {{ include.class }}{% endif %}">
{% if include.first-last -%}
<li class="page-item disabled">
<a class="page-link{% if include.text %} page-text{% endif %}" href="#" tabindex="-1" aria-disabled="true">
{% unless include.text %}{% include "ui/icon.html" icon="chevrons-left" %}{% else %}Previous{% endunless -%}
</a>
</li>
{% endif -%}
<li class="page-item{% if include.prev-description %} page-prev{% endif %} disabled">
<a class="page-link{% if include.text %} page-text{% endif %}" href="#" tabindex="-1" aria-disabled="true">
{% if include.prev-description -%}
<div class="page-item-subtitle">previous</div>
<div class="page-item-title">{{ include.prev-description }}</div>
{% else -%}
{% unless include.text %}{% include "ui/icon.html" icon="chevron-left" %}{% else %}Previous{% endunless -%}
{% endif %}
</a>
</li>
{% for i in (1..offset) -%}
<li class="page-item{% if i == active-item %} active{% endif %}">
<a class="page-link" href="#">{{ i }}</a>
</li>
{% endfor -%}
{% if offset < count -%}
<li class="page-item">
<span class="page-link disabled">&hellip;</span>
</li>
{% for i in (count-offset..count) -%}
<li class="page-item{% if i == active-item %} active{% endif %}">
<a class="page-link" href="#">{{ i }}</a>
</li>
{% endfor -%}
{% endif %}
<li class="page-item{% if include.prev-description %} page-next{% endif %}">
<a class="page-link{% if include.text %} page-text{% endif %}" href="#">
{% if include.next-description -%}
<div class="page-item-subtitle">next</div>
<div class="page-item-title">{{ include.next-description }}</div>
{% else -%}
{% unless include.text %}{% include "ui/icon.html" icon="chevron-right" %}{% else %}Next{% endunless %}
{% endif -%}
</a>
</li>
{% if include.first-last -%}
<li class="page-item">
<a class="page-link{% if include.text %} page-text{% endif %}" href="#">
{% unless include.text %}{% include "ui/icon.html" icon="chevrons-right" %}{% else %}Next{% endunless %}
</a>
</li>
{% endif -%}
</ul>
<!-- END PAGINATION -->

1
liquid/includes/ui/payment.html Normal file
View file

@ -0,0 +1 @@
<span class="payment{% if include['size'] %} payment-{{ include.size }}{% endif %} payment-provider-{{ include.payment | default: 'visa'}}{% if include.dark %}-dark{% endif %}{% if include.class %} {{ include.class }}{% endif %}"></span>

22
liquid/includes/ui/photo.html Normal file
View file

@ -0,0 +1,22 @@
<!-- Photo -->
{% if include.id %}
{% assign id = include.id | default: 1 %}
{% if include.horizontal %}
{% assign filtered-photos = photos | where: 'horizontal', true %}
{% else %}
{% assign filtered-photos = photos %}
{% endif %}
{% assign photo = filtered-photos[id] %}
{% if include.background %}
<div{% if include.class %} class="{{ include.class }}"{% endif %} style="background-image: url({{ page | relative }}/static/photos/{{ photo.file }})"></div>
{% elsif include.ratio %}
<div class="img-responsive img-responsive-{{ include.ratio }}{% if include.class %} {{ include.class }}{% endif %}" style="background-image: url({{ page | relative }}/static/photos/{{ photo.file }})"></div>
{% else %}
<img src="{{ page | relative }}/static/photos/{{ photo.file }}"{% if include.class %} class="{{ include.class }}"{% endif %} alt="{{ photo.title }}" />
{% endif %}
{% else %}
{% include "ui/svg.html" width=640 height=480 border=true class=include.class %}
{% endif %}

13
liquid/includes/ui/progress-description.html Normal file
View file

@ -0,0 +1,13 @@
{% assign size = include['size'] | default: 'sm' %}
{% assign color = include.color | default: 'blue' %}
<div{% if include.class %} class="{{ include.class }}"{% endif %}>
<div class="d-flex mb-1 align-items-center lh-1">
<div class="fs-5 fw-semibold m-0">{{ include.label | default: 'Label' }}</div>
{% if include.description %}
<div class="fs-6 text-secondary ms-2">{{ include.description }}</div>
{% endif %}
<span class="ms-auto fs-6 strong">{{ include.value }}%</span>
</div>
{% include "ui/progress.html" size=size value=include.value color=color %}
</div>

21
liquid/includes/ui/progress-steps.html Normal file
View file

@ -0,0 +1,21 @@
{% assign count = include.count | default: 3 %}
{% assign labels = '' | split: ',' %}
{% if include.labels %}
{% assign labels = include.labels | split: ',' %}
{% assign count = labels | size %}
{% endif %}
{% assign active = include.active | default: 1 %}
{% assign color = include.color | default: 'primary' %}
<ol class="progress-steps{% if include.class %} {{ include.class }}{% endif %}" {% if include.id %}
id="{{ include.id }}" {% endif %}{% if include['aria-label'] %} aria-label="{{ include['aria-label'] }}" {% endif %}>
{% for i in (1..count) %}
{% assign default = 'Step ' | append: i %}
{% assign label = labels[forloop.index0] | default: default %}
<li class="progress-steps-item{% if i <= active %} bg-{{ color }}{% endif %}" {% if i==active %} aria-current="step"{% endif %}>
<span class="visually-hidden">
{{ label }}
</span>
</li>
{% endfor %}
</ol>

20
liquid/includes/ui/progress.html Normal file
View file

@ -0,0 +1,20 @@
{% assign percentage = include.value | replace: '%', '' | default: 38 %}
{% assign colors = include.colors | default: include.color | default: 'blue,red,green,yellow,dark' | split: ',' %}
<div class="progress{% if include['size'] %} progress-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.width %} style="width: {{ include.width }}"{% endif %}{% if include.id %} id="{{ include.id }}"{% endif %}>
{% if include.indeterminate %}
<div class="progress-bar progress-bar-indeterminate{% if include.color %} bg-{{ include.color }}{% endif %}"></div>
{% elsif include.values %}
{% assign values = include.values | split: ',' %}
{% for value in values %}
<div class="progress-bar bg-{{ colors[forloop.index0] }}" style="width: {{ value }}%" role="progressbar" aria-valuenow="{{ value }}" aria-valuemin="0" aria-valuemax="100"></div>
{% endfor %}
{% else %}
<div class="progress-bar{% if include.color %} bg-{{ include.color }}{% endif %}{% if include.striped %} progress-bar-striped{% if include.animated %} progress-bar-animated{% endif %}{% endif %}" style="width: {{ percentage }}%" role="progressbar" aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100" aria-label="{{ percentage }}% Complete">
{% if include.show-value %}
{{ percentage }}%
{% else %}
<span class="visually-hidden">{{ percentage }}% Complete</span>
{% endif %}
</div>
{% endif %}
</div>

7
liquid/includes/ui/progressbg.html Normal file
View file

@ -0,0 +1,7 @@
{% assign percentage = include.value | replace: '%', '' | default: 0 %}
{% assign color = include.color | default: 'primary-lt' %}
<div class="progressbg{% if include.class %} {{ include.class }}{% endif %}">
{% include "ui/progress.html" value=percentage class="progressbg-progress" color=color %}
{% if include.text %}<div class="progressbg-text">{% if include.flag %}{% include "ui/flag.html" flag=include.flag class="me-2" size="xs" %}{% endif %}{{ include.text }}</div>{% endif %}
{% if include.show-value %}<div class="progressbg-value">{{ percentage }}%</div>{% endif %}
</div>

31
liquid/includes/ui/range.html Normal file
View file

@ -0,0 +1,31 @@
{% assign min = include.min | default: 0 %}
{% assign max = include.max | default: 100 %}
{% assign step = include.step | default: 10 %}
{% assign value = include.value | default: 50 %}
{% assign id = include.id %}
{% if id %}
<div class="form-range mb-2{% if include.class %} {{ include.class }}{% endif %}" id="range-{{ id }}"></div>
{% capture_script %}
<script>
{% assign value = value | split: ',' %}
document.addEventListener("DOMContentLoaded", function () {
window.noUiSlider && (noUiSlider.create(document.getElementById('range-{{ id }}'), {
start: {% if value.size > 1 %}[{{ value | join: ', ' }}]{% else %}{{ value }}{% endif %},
{% if value.size > 1 or include.connect %}
connect: [{% for i in (2..value.size) %}{% cycle 'false', 'true' %}, {% endfor %}true, false],
{% endif %}
step: {{ step }},
range: {
min: {{ min }},
max: {{ max }}
}
}));
});
</script>
{% endcapture_script %}
{% else %}
<input type="range" class="form-range mb-2{% if include.class %} {{ include.class }}{% endif %}" value="{{ value }}" min="{{ min }}" max="{{ max }}" step="{{ step }}">
{% endif %}

40
liquid/includes/ui/rating.html Normal file
View file

@ -0,0 +1,40 @@
{% assign id = include.id | default: include.icon | default: 'default' %}
{% assign icon = include.icon | default: 'star' %}
{% assign color = include.color %}
{% assign size = include.size | default: false %}
{% assign value = include.value %}
<select id="rating-{{ id }}">
<option value="">Select a rating</option>
<option value="5"{% if value == 5 %} selected{% endif %}>Excellent</option>
<option value="4"{% if value == 4 %} selected{% endif %}>Very Good</option>
<option value="3"{% if value == 3 %} selected{% endif %}>Average</option>
<option value="2"{% if value == 2 %} selected{% endif %}>Poor</option>
<option value="1"{% if value == 1 %} selected{% endif %}>Terrible</option>
</select>
{% capture star %}
{% include "ui/icon.html" class="gl-star-full" icon=icon color=color type="filled" size=size %}
{%- endcapture %}
{% assign star = star | replace_regex: "[\t\s]+\n", "" | strip %}
{% assign star = star | replace_regex: "[\n\t]{2,}", " " | strip %}
{% assign star = star | replace_regex: "<!--[^-]*-->", "" | strip %}
{% capture_script %}
<script>
{% if environment == 'development' %}window.tabler_rating = window.tabler_rating || {};{% endif %}
document.addEventListener("DOMContentLoaded", function () {
const rating = new StarRating('#rating-{{ id }}', {
tooltip: false,
clearable: false,
stars: function (el, item, index) {
el.innerHTML = `{{ star }}`;
},
classNames: {
}
})
{% if environment == 'development' %}window.tabler_rating["rating-{{ id }}"] = rating;{% endif %}
})
</script>
{% endcapture_script %}

5
liquid/includes/ui/responsive-image.html Normal file
View file

@ -0,0 +1,5 @@
{% assign src = include.src %}
{% assign width = include.width | default: 507 %}
<picture>
<img src="{{ page | relative }}/{{ src }}" srcset="{{ page | relative }}/{{ src }} 1x, {{ page | relative }}/{{ src | replace: '.png', '@2x.png' }} 2x" alt="{{ include.alt }}" class="img-fluid {{ include.class }}" width="{{ width }}"{% if include.height %} height="{{ include.height }}"{% endif %} loading="lazy">
</picture>

3
liquid/includes/ui/ribbon.html Normal file
View file

@ -0,0 +1,3 @@
<div class="ribbon{% if include.top %} ribbon-top{% endif %}{% if include.left %} ribbon-start{% endif %}{% if include.bottom %} ribbon-bottom{% endif %}{% if include.bookmark %} ribbon-bookmark{% endif %}{% if include.color %} bg-{{ include.color }}{% endif %}">
{% if include.text %}{{ include.text }}{% else %}{% include "ui/icon.html" icon="star" use-svg=true filled=include.filled %}{% endif %}
</div>

102
liquid/includes/ui/select.html Normal file
View file

@ -0,0 +1,102 @@
{% assign id = include.id | default: include.key %}
{% assign value = include.value %}
{% if id %}
{% assign key = include.key | default: 'people' %}
{% assign data = selects[key] %}
<select class="form-select{% if include.class %} {{ include.class }}{% endif %}{% if include.state %} is-{{ include.state }}{% endif %}"{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} id="select-{{ id }}" value="{{ value }}"{% if include.multiple or data.multiple %} multiple{% endif %}>
{% if include.values %}
{% assign values = include.values | split: ',' %}
{% for value in values %}
<option value="{{ value }}">{{ value }}</option>
{% endfor %}
{% else %}
{% assign options = data.options %}
{% if data.data == 'people' %}
{% for person in people limit: 20 %}
<option value="{{ person.id }}"{% if include.indicator == 'avatar' %} data-custom-properties="{% capture indicator %}{% include "ui/avatar.html" size='xs' person=person %}{%- endcapture %}{{ indicator | strip | escape }}"{% endif %}>{{ person.full_name }}</option>
{% endfor %}
{% elsif data.data == 'optgroup' %}
{% for group in options %}
<optgroup label="{{ group.title }}">
{% for option in group.options %}
<option value="{{ option }}">{{ option }}</option>
{% endfor %}
</optgroup>
{% endfor %}
{% else %}
{% for option in options %}
{% if option.first %}
{% if include.indicator == 'flag' %}
{% capture indicator-html %}
{% assign country = option[1].flag %}
{% include "ui/flag.html" size="xs" flag=country %}
{%- endcapture %}
{% elsif include.indicator == 'label' %}
{% capture indicator-html %}
{% assign label = option[1].label %}
<span class="badge bg-primary-lt">{{ label }}</span>
{%- endcapture %}
{% endif %}
<option value="{{ option[0] }}"{% if include.indicator %} data-custom-properties="{{ indicator-html | strip | escape }}"{% endif %}{% if option[1].selected %} selected{% endif %}>{{ option[1].name }}</option>
{% else %}
<option value="{{ option }}">{{ option }}</option>
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
</select>
{% capture script %}
<script>
document.addEventListener("DOMContentLoaded", function () {
{% if environment == 'development' %}
window.tabler_select = window.tabler_select || {};
{% endif %}
var el;
window.TomSelect && ({% if environment == 'development' %}window.tabler_select["select-{{ id }}"] = {% endif %}new TomSelect(el = document.getElementById('select-{{ id }}'), {
copyClassesToDropdown: false,
dropdownParent: 'body',
{% unless include.show-search %}
controlInput: '<input>',
{% endunless %}
render:{
item: function(data,escape) {
if( data.customProperties ){
return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
}
return '<div>' + escape(data.text) + '</div>';
},
option: function(data,escape){
if( data.customProperties ){
return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
}
return '<div>' + escape(data.text) + '</div>';
},
},
}));
});
</script>
{%- endcapture %}
{% if include.show-scripts %}
{{ script }}
{% else %}
{% capture_script %}
{{ script }}
{% endcapture_script %}
{% endif %}
{% endif %}

3
liquid/includes/ui/shape.html Normal file
View file

@ -0,0 +1,3 @@
<div class="shape{% if include['size'] %} shape-{{ include['size'] }}{% endif %}{% if include.color %} shape-{{ include.color }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.rounded %} rounded-circle{% endif %}">
{% include "ui/icon.html" icon=include.icon %}
</div>

52
liquid/includes/ui/signature.html Normal file
View file

@ -0,0 +1,52 @@
{% assign id = include.id | default: 'default' %}
<div class="signature position-relative{% if include.class %} {{ include.class }}{% endif %}">
{% if include.clear %}
<div class="position-absolute top-0 end-0 p-2">
<div class="btn btn-icon" id="signature-{{ id }}-clear" title="Clear signature" data-bs-toggle="tooltip">
{% include "ui/icon.html" icon="trash" %}
</div>
</div>
{% endif %}
<canvas id="signature-{{ id }}" width="{{ include.width | default: 400 }}" height="{{ include.height | default: 400 }}" class="signature-canvas"></canvas>
</div>
{% capture_script %}
<!-- BEGIN SIGNATURE PAD -->
<script>
document.addEventListener("{{ include.event | default: 'DOMContentLoaded' }}", function () {
const canvas = document.getElementById("signature-{{ id }}");
if (canvas) {
const signaturePad = new SignaturePad(canvas, {
backgroundColor: "transparent",
penColor: getComputedStyle(canvas).color
});
{% if include.clear %}
document.querySelector("#signature-{{ id }}-clear").addEventListener("click", function () {
signaturePad.clear();
});
{% endif %}
function resizeCanvas() {
const ratio = Math.max(window.devicePixelRatio || 1, 1);
console.log(canvas.offsetWidth, canvas.offsetHeight);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
signaturePad.fromData(signaturePad.toData());
}
window.addEventListener("resize", resizeCanvas);
resizeCanvas();
{% if include.extra-js %}
{{ include.extra-js }}
{% endif %}
}
});
</script>
{% endcapture_script %}

2
liquid/includes/ui/spinner.html Normal file
View file

@ -0,0 +1,2 @@
{% assign elem = include.element | default: 'div' %}
<{{ elem }} class="spinner-{{ include.type | default: 'border' }}{% if include.color %} text-{{ include.color }}{% endif %}{% if include['size'] %} spinner-{{ include.type | default: 'border' }}-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}" role="status"></{{ elem }}>

12
liquid/includes/ui/stars.html Normal file
View file

@ -0,0 +1,12 @@
{% assign count = include.count | default: 5 %}
{% assign rate = include.rate | default: 4 %}
{% assign icon = include.icon | default: 'star' %}
{% assign class = include.color | default: 'yellow' | prepend: 'text-' %}
{% assign filled = include.filled | default: false %}
<div class="stars">
{% for i in (1..5) %}
<span class="star {% if forloop.index <= rate %}{{ class }}{% endif %}">
{% include "ui/icon.html" icon=icon %}
</span>
{% endfor %}
</div>

1
liquid/includes/ui/status-dot.html Normal file
View file

@ -0,0 +1 @@
<span class="status-dot{% if include.color %} status-{{ include.color }}{% endif %}{% if include.animated %} status-dot-animated{% endif %}"></span>

5
liquid/includes/ui/status-indicator.html Normal file
View file

@ -0,0 +1,5 @@
<span class="status-indicator{% if include.color %} status-{{ include.color }}{% endif %}{% if include.animated %} status-indicator-animated{% endif %}">
<span class="status-indicator-circle"></span>
<span class="status-indicator-circle"></span>
<span class="status-indicator-circle"></span>
</span>

6
liquid/includes/ui/status.html Normal file
View file

@ -0,0 +1,6 @@
<span class="status{% if include.color %} status-{{ include.color }}{% endif %}{% if include.lite %} status-lite{% endif %}">
{% if include.dot %}
<span class="status-dot{% if include.animated %} status-dot-animated{% endif %}"></span>
{% endif %}
{{ include.text | default: 'Status' }}
</span>

11
liquid/includes/ui/steps.html Normal file
View file

@ -0,0 +1,11 @@
{% assign count = include.count | default: 4 %}
{% assign active = include.active | default: 3 %}
<div class="steps{% if include.numbers %} steps-counter{% endif %}{% if include.color %} steps-{{ include.color }}{% endif %}{% if include['size'] %} steps-{{ include['size'] }}{% endif %}">
{% for i in (1..count) %}
{% assign elem = 'a' %}
{% if i > active %}{% assign elem = 'span' %}{% endif %}
<{{ elem }} href="#" class="step-item{% if i == active %} active{% endif %}"{% if include.show-tooltip %} data-bs-toggle="tooltip" title="Step {{ i }} description"{% endif %}>{% if include.show-title %}
Step {{ i }}
{% endif %}</{{ elem }}>
{% endfor %}
</div>

7
liquid/includes/ui/svg.html Normal file
View file

@ -0,0 +1,7 @@
{% assign width = include.width | default: include.size | default: 20 %}
{% assign height = include.height | default: include.size | default: 20 %}
<svg xmlns="http://www.w3.org/2000/svg"{% if include.class %} class="{{ include.class }}"{% endif %} preserveAspectRatio="{% if include.ratio %}xMidYMid meet{% else %}none{% endif %}" width="{{ width }}" height="{{ height }}" viewBox="0 0 {{ width }} {{ height }}" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)"{% if include.border %} style="width: 100%; height: auto"{% endif %}>
{% if include.border %}<rect x=".5" y=".5" width="{{ width | minus: 1 }}" height="{{ height | minus: 1 }}" rx="2"></rect>{% endif %}
<line x1="0" y1="0" x2="{{ width }}" y2="{{ height }}"></line>
<line x1="0" y1="{{ height }}" x2="{{ width }}" y2="0"></line>
</svg>

19
liquid/includes/ui/switch-icon.html Normal file
View file

@ -0,0 +1,19 @@
{% assign icon = include.icon | default: 'heart' %}
{% assign icon-b = include.icon-b | default: icon | default: 'heart' %}
{% assign icon-a-color = include.icon-a-color | default: 'muted' %}
{% assign icon-b-color = include.icon-b-color | default: 'red' %}
{% if icon == 'star' or icon == 'heart' %}
{% assign icon-b-class = 'icon-filled' %}
{% else %}
{% assign icon-b-class = include.icon-b-class %}
{% endif %}
<button class="switch-icon{% if include.variant %} switch-icon-{{ include.variant }}{% endif %}{% if include.active %} active{% endif %}" data-bs-toggle="switch-icon">
<span class="switch-icon-a text-{{ icon-a-color }}">
{% include "ui/icon.html" icon=icon %}
</span>
<span class="switch-icon-b text-{{ icon-b-color }}">
{% include "ui/icon.html" icon=icon-b class=icon-b-class %}
</span>
</button>

90
liquid/includes/ui/table.html Normal file
View file

@ -0,0 +1,90 @@
{% assign roles = 'User,Admin,Owner' | split: ',' %}
{% assign limit = include.limit | default: 5 %}
<div class="table-responsive">
<table
class="table table-vcenter{% if include.mobile %} table-mobile-md{% endif %}{% if include.card %} card-table{% endif %}{% if include.stripped %} table-striped{% endif %}{% if include.nowrap %} table-nowrap{% endif %}">
<thead>
<tr>
<th>Name</th>
<th>Title</th>
{% unless include.avatars %}
<th>Email</th>
{% endunless %}
<th>Role</th>
{% if include.nowrap %}
<th></th>
{% endif %}
<th class="w-1"></th>
</tr>
</thead>
<tbody>
{% for person in people limit: limit offset: include.offset %}
<tr>
{% if include.avatars %}
<td {% if include.mobile %}data-label="Name" {% endif %}>
<div class="d-flex py-1 align-items-center">
{% include "ui/avatar.html" person-id=person.id class="me-2" %}
<div class="flex-fill">
<div class="fw-medium">{{ person.full_name }}</div>
<div class="text-secondary"><a href="#" class="text-reset">{{ person.email }}</a></div>
</div>
</div>
</td>
{% else %}
<td {% if include.mobile %}data-label="Name" {% endif %}>{{ person.full_name }}</td>
{% endif %}
{% if include.avatars %}
<td {% if include.mobile %}data-label="Title" {% endif %}>
<div>{{ person.job_title }}</div>
<div class="text-secondary">{{ person.department }}</div>
</td>
{% else %}
<td class="text-secondary" {% if include.mobile %}data-label="Title" {% endif %}>
{{ person.job_title }}, {{ person.department }}
</td>
{% endif %}
{% unless include.avatars %}
<td class="text-secondary" {% if include.mobile %}data-label="Email" {% endif %}><a href="#" class="text-reset">{{
person.email }}</a></td>
{% endunless %}
<td class="text-secondary" {% if include.mobile %}data-label="Role" {% endif %}>
{% assign role-id = forloop.index | random_number: 0, 2 %}
{{ roles[role-id] }}
</td>
{% if include.nowrap %}
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
quaerat quo repellendus, voluptates.
</td>
{% endif %}
<td>
{% if include.buttons %}
<div class="btn-list flex-nowrap">
{% include "ui/button.html" text="Edit" %}
<div class="dropdown">
<button class="btn dropdown-toggle align-text-top" data-bs-toggle="dropdown">
Actions
</button>
{% include "ui/dropdown-menu.html" right=true %}
</div>
</div>
{% else %}
<a href="#">Edit</a>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>

25
liquid/includes/ui/tag.html Normal file
View file

@ -0,0 +1,25 @@
<span class="tag">
{% if include.flag %}
{% include "ui/flag.html" flag=include.flag size="xxs" class="tag-flag" %}
{% elsif include.icon %}
{% include "ui/icon.html" icon=include.icon size="xxs" class="tag-icon" %}
{% elsif include.person %}
{% include "ui/avatar.html" person=include.person size="xxs" class="tag-avatar" %}
{% elsif include.person-id %}
{% include "ui/avatar.html" person-id=include.person-id size="xxs" class="tag-avatar" %}
{% elsif include.payment %}
{% include "ui/payment.html" provider=include.payment size="xxs" class="tag-payment" %}
{% elsif include.status %}
{% include "ui/badge.html" color=include.status class="tag-status badge-dot" text="" %}
{% elsif include.legend %}
<span class="legend bg-{{ include.legend }}"></span>
{% elsif include.checkbox %}
<input type="checkbox" class="form-check-input tag-check"{% if include.checked %} checked{% endif %}/>
{% endif %}
{{ include.text }}
{% if include.badge %}
{% include "ui/badge.html" color=include.status class="tag-badge" text=include.badge size="sm" %}
{% endif %}
<a href="#" class="btn-close"></a>
</span>

89
liquid/includes/ui/timeline.html Normal file
View file

@ -0,0 +1,89 @@
<ul class="timeline{% if include.simple %} timeline-simple{% endif %}">
<li class="timeline-event">
<div class="timeline-event-icon bg-x-lt">{% include "ui/icon.html" icon="brand-x" %}</div>
<div class="card timeline-event-card">
<div class="card-body">
<div class="text-secondary float-end">10 hrs ago</div>
<h4>+1150 Followers</h4>
<p class="text-secondary">You’re getting more and more followers, keep it up!</p>
</div>
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon">{% include "ui/icon.html" icon="briefcase" %}</div>
<div class="card timeline-event-card">
<div class="card-body">
<div class="text-secondary float-end">2 hrs ago</div>
<h4>+3 New Products were added!</h4>
<p class="text-secondary">Congratulations!</p>
</div>
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon">{% include "ui/icon.html" icon="check" %}</div>
<div class="card timeline-event-card">
<div class="card-body">
<div class="text-secondary float-end">1 day ago</div>
<h4>Database backup completed!</h4>
<p class="text-secondary">Download the <a href="#">latest backup</a>.</p>
</div>
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon bg-facebook-lt">{% include "ui/icon.html" icon="brand-facebook" %}</div>
<div class="card timeline-event-card">
<div class="card-body">
<div class="text-secondary float-end">1 day ago</div>
<h4>+290 Page Likes</h4>
<p class="text-secondary">This is great, keep it up!</p>
</div>
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon">{% include "ui/icon.html" icon="user-plus" %}</div>
<div class="card timeline-event-card">
<div class="card-body">
<div class="text-secondary float-end">2 days ago</div>
<h4>+3 Friend Requests</h4>
<div class="avatar-list mt-3">
{% for person in people limit: 3 %}
{% include "ui/avatar.html" person=person status="success" %}
{% endfor %}
</div>
</div>
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon">{% include "ui/icon.html" icon="photo" %}</div>
<div class="card timeline-event-card">
<div class="card-body">
<div class="text-secondary float-end">3 days ago</div>
<h4>+3 New photos</h4>
<div class="mt-3">
<div class="row g-2">
<div class="col-4">
{% include "ui/photo.html" id=6 class="rounded" %}
</div>
<div class="col-4">
{% include "ui/photo.html" id=7 class="rounded" %}
</div>
<div class="col-4">
{% include "ui/photo.html" id=8 class="rounded" %}
</div>
</div>
</div>
</div>
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon">{% include "ui/icon.html" icon="settings" %}</div>
<div class="card timeline-event-card">
<div class="card-body">
<div class="text-secondary float-end">2 weeks ago</div>
<h4>System updated to v2.02</h4>
<p class="text-secondary">Check the complete changelog at the <a href="#">activity
page</a>.</p>
</div>
</div>
</li>
</ul>

24
liquid/includes/ui/toast.html Normal file
View file

@ -0,0 +1,24 @@
{% assign toast-id = include.toast-id | default: 'simple' %}
{% assign person-id = include.person-id | default: 2 %}
{% assign person = people[person-id] %}
<div class="toast {% if include.show %}show{% endif %}" id="toast-{{ toast-id }}" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
{% unless include.hide-header %}
<div class="toast-header">
{% include "ui/avatar.html" person=person class="me-2" size="xs" %}
<strong class="me-auto">{{ person.full_name }}</strong>
<small>{{ include.date | default: '11 mins ago' }}</small>
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
{% endunless %}
<div class="toast-body">
{% if include.cookies %}
🍪&nbsp;Our site uses cookies. By continuing to use our site, you agree to our Cookie Policy.
<div class="mt-2 pt-2 border-top">
<a href="#" class="btn btn-primary btn-sm">I understand</a>
</div>
{% else %}
{{ include.text | default: 'Hello, world! This is a toast message.' }}
{% endif %}
</div>
</div>

14
liquid/includes/ui/tracking.html Normal file
View file

@ -0,0 +1,14 @@
{% assign blocks = include.blocks | default: 30 %}
<div class="tracking{% if include.squares %} tracking-squares{% endif %}">
{% for i in (1..blocks) %}
{% if i == 5 or i == 18 %}
<div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Downtime"></div>
{% elsif i == 22 or i == 23 %}
<div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data"></div>
{% elsif i == 14 %}
<div class="tracking-block bg-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Big load"></div>
{% else %}
<div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational"></div>
{% endif %}
{% endfor %}
</div>

15
liquid/includes/ui/trending.html Normal file
View file

@ -0,0 +1,15 @@
{% assign value = include.value | default: 25 %}
{% if value > 0 %}
{% assign trending-color = 'green' %}
{% assign trending-icon = 'arrow-up' %}
{% elsif value == 0 %}
{% assign trending-color = 'muted' %}
{% assign trending-icon = 'minus' %}
{% else %}
{% assign trending-color = 'red' %}
{% assign trending-icon = 'arrow-down' %}
{% endif %}
<span class="text-{{ trending-color }} d-inline-flex align-items-center lh-1{% if include.class %} {{ include.class }}{% endif %}">
{{ value }}% {% include "ui/icon.html" icon=trending-icon class="ms-0" size="sm" %}
</span>

19
liquid/includes/ui/typed.html Normal file
View file

@ -0,0 +1,19 @@
{% assign strings = include.strings | split: '|' %}
{% assign id = include.id | default: "typed" %}
<span class="text-primary" id="{{ id }}">{{ strings | first }}</span>
{% capture_script %}
<script>
document.addEventListener("DOMContentLoaded", function() {
var typed = new Typed('#{{ id }}', {
strings: [{% for string in strings %}'{{ string }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],
typeSpeed: 100,
backSpeed: 50,
backDelay: 1000,
startDelay: 1000,
loop: true,
fade: true
});
});
</script>
{% endcapture_script %}

44
liquid/includes/ui/wysiwyg.html Normal file
View file

@ -0,0 +1,44 @@
{% removeemptylines %}
{% assign id = include.id | default: 'mytextarea' %}
<form method="post">
<textarea id="hugerte-{{ id }}">Hello, <b>Tabler</b>!</textarea>
</form>
{% capture script %}
{% removeemptylines %}
<script>
document.addEventListener("DOMContentLoaded", function () {
let options = {
selector: '#hugerte-{{ id }}',
height: 300,
menubar: false,
statusbar: false,
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview', 'anchor',
'searchreplace', 'visualblocks', 'code', 'fullscreen',
'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat',
content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }'
}
// check current theme is light or dark
const theme = document.documentElement.getAttribute('data-bs-theme');
if (theme === 'dark') {
options.skin = 'oxide-dark';
options.content_css = 'dark';
}
hugeRTE.init(options);
})
</script>
{% endremoveemptylines %}
{% endcapture -%}
{%- capture_script %}
{{ script }}
{% endcapture_script %}
{% endremoveemptylines %}