Monorepo structure, remove Gulp, new build process (#2116)

preview/pages/datatables.html

@@ -0,0 +1,68 @@
+---
+title: Datatables
+page-header: Datatables
+page-libs: [lists]
+page-menu: base.datatables
+layout: default
+permalink: datatables.html
+---
+
+{% assign id = include.map-id | default: 'default' %}
+<div class="card">
+	<div class="card-body p-0">
+		{% assign products = 'Tabler,Tabler Icons,Tabler Emails,Tabler Components,Tabler Illustrations,Bootstrap' | split: ',' %}
+		{% assign techs = 'brand-apple,brand-windows,brand-debian,brand-android' | split: ',' %}
+		<div id="table-{{ id }}" class="table-responsive">
+		<table class="table">
+			<thead>
+			<tr>
+				<th><button class="table-sort" data-sort="sort-name">Name</button></th>
+				<th><button class="table-sort" data-sort="sort-city">City</button></th>
+				<th><button class="table-sort" data-sort="sort-type">Type</button></th>
+				<th><button class="table-sort" data-sort="sort-score">Score</button></th>
+				<th><button class="table-sort" data-sort="sort-date">Date</button></th>
+				<th><button class="table-sort" data-sort="sort-quantity">Quantity</button></th>
+				<th><button class="table-sort" data-sort="sort-progress">Progress</button></th>
+			</tr>
+			</thead>
+			<tbody class="table-tbody">
+			{% for rc in rollercoasters %}
+			{% assign progress = forloop.index | random_number %}
+			<tr>
+				<td class="sort-name">{{ rc.name }}</td>
+				<td class="sort-city">{{ rc.city }}</td>
+				<td class="sort-type">{{ rc.type }}</td>
+				<td class="sort-score">{{ rc.score }}</td>
+				<td class="sort-date" data-date="{{ forloop.index | random_date: site.randomDateFrom, site.randomDateTo | date: '%s' }}">{{ forloop.index | random_date: site.randomDateFrom, site.randomDateTo | date: '%B %d, %Y' }}</td>
+				<td class="sort-quantity">{{ forloop.index | random_number: 1, 200 }}</td>
+				<td class="sort-progress" data-progress="{{ progress }}">
+					<div class="row align-items-center">
+						<div class="col-12 col-lg-auto">{{ progress }}%</div>
+						<div class="col">{% include "ui/progress.html" value=progress width="5rem" %}</div>
+					</div>
+				</td>
+			</tr>
+			{% endfor %}
+			</tbody>
+		</table>
+		</div>
+	</div>
+</div>
+
+{% capture_global scripts %}
+<script>
+{% if environment == 'development' %}window.tabler_list = window.tabler_list || {};{% endif %}
+
+	document.addEventListener("DOMContentLoaded", function() {
+	const list = {% if environment == 'development' %}window.tabler_list["table-{{ id }}"] = {% endif %}new List('table-{{ id }}', {
+		sortClass: 'table-sort',
+		listClass: 'table-tbody',
+		valueNames: [ 'sort-name', 'sort-type', 'sort-city', 'sort-score',
+			{ attr: 'data-date', name: 'sort-date' },
+			{ attr: 'data-progress', name: 'sort-progress' },
+			'sort-quantity'
+		]
+	});
+})
+</script>
+{% endcapture_global %}