Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-22 21:41:43 +04:00
Code Issues Projects Releases Wiki Activity

choices.js init

Browse Source
This commit is contained in:
codecalm
2021-02-10 22:53:13 +01:00
parent cd91b833b7
commit a83b4bc97a
11 changed files with 56 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -6
View File
@@ -80,19 +80,14 @@
"yargs": "^16.2.0"
},
"dependencies": {
"@fullcalendar/core": "^5.5.1",
"@fullcalendar/daygrid": "^5.5.0",
"@fullcalendar/interaction": "^5.5.0",
"@fullcalendar/list": "^5.5.0",
"@fullcalendar/timegrid": "^5.5.1",
"@popperjs/core": "^2.6.0",
"@tabler/icons": "^1.39.1",
"apexcharts": "^3.24.0",
"autosize": "^4.0.2",
"bootstrap": "twbs/bootstrap#c93d754d35eadf6cb81a8fccef9ce091ea4f28c9",
"choices.js": "^9.0.1",
"countup.js": "^2.0.7",
"flatpickr": "^4.6.9",
"fullcalendar": "^5.5.1",
"imask": "^6.0.5",
"litepicker": "^2.0.3",
"nouislider": "^14.6.3"
src/pages/_data/libs.json
+3 -2
View File
@@ -13,10 +13,11 @@
"masonry": "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js",
"mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js",
"google-maps": "https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAPS_KEY",
"litepicker": "litepicker/dist/litepicker.js"
"litepicker": "litepicker/dist/litepicker.js",
"choices": "choices.js/public/assets/scripts/choices.js"
},
"css": {
"selectize": "selectize/dist/css/selectize.css",
"choices": "choices.js/public/assets/styles/choices.css",
"nouislider": "nouislider/distribute/nouislider.min.css",
"mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"
}
src/pages/_includes/forms/form-elements-6.html
+6 -6
View File
@@ -33,30 +33,30 @@
<div class="mb-3">
<label class="form-label">Tags input</label>
{% include ui/form/selectize.html key="tags" %}
{% include ui/select.html id="tags" key="tags" %}
</div>
<div class="mb-3">
<label class="form-label">Advanced tags input</label>
{% include ui/form/selectize.html key="tags-advanced" %}
{% include ui/select.html id="tags-advanced" key="tags-advanced" %}
</div>
<div class="mb-3">
<label class="form-label">Advanced select</label>
{% include ui/form/selectize.html key="users" %}
{% include ui/select.html id="users" key="users" %}
</div>
<div class="mb-3">
<label class="form-label">Select with avatars</label>
{% include ui/form/selectize.html key="people" %}
{% include ui/select.html id="people" key="people" %}
</div>
<div class="mb-3">
<label class="form-label">Select with flags</label>
{% include ui/form/selectize.html key="countries" %}
{% include ui/select.html id="countries" key="countries" %}
</div>
<div class="mb-3">
<label class="form-label">Advanced select with validation state</label>
{% include ui/form/selectize.html key="countries" state="valid" select-id="states" %}
{% include ui/select.html id="countries" key="countries" state="valid" %}
</div>
src/pages/_includes/parts/form/input-range.html
+4 -4
View File
@@ -1,8 +1,8 @@
<div class="mb-3">
<label class="form-label">Range input</label>
{% include ui/form/range.html value=40 %}
{% include ui/form/range.html value="20" id="simple" connect=true %}
{% include ui/form/range.html value="60,90" id="connect" %}
{% include ui/form/range.html value="40" id="color" class="text-green" connect=true %}
{% include ui/range.html value=40 %}
{% include ui/range.html value="20" id="simple" connect=true %}
{% include ui/range.html value="60,90" id="connect" %}
{% include ui/range.html value="40" id="color" class="text-green" connect=true %}
</div>
src/pages/_includes/ui/form/selectize.html
-67
View File
@@ -1,67 +0,0 @@
{% assign key = include.key | default: 'people' %}
{% assign id = include.select-id | default: key %}
{% assign data = site.data.selects[key] %}
{% assign options = data.options %}
<select name="{{ key }}" id="select-{{ id }}" class="form-select{% if include.state %} is-{{ include.state }}{% endif %}"{% if data.multiple %} multiple{% endif %}>
{% if options == 'people' %}
{% for person in site.data.people limit: 20 %}
{% capture avatar %}
{% include ui/avatar.html person=person class="avatar-xs rounded me-2" %}
{% endcapture %}
<option value="{{ person.id }}" data-data='{"avatar": "{{ avatar | strip | replace: '"', '\"' }}"}'{% if person.id == data.value %} selected{% endif %}>{{ person.full_name }}</option>
{% endfor %}
{% else %}
{% for option in options %}
{% if option[1] %}
{% assign current-value = option[0] %}
{% assign current-name = option[1].name %}
{% assign all-data = option[1] %}
{% else %}
{% assign current-value = option %}
{% assign current-name = option %}
{% endif %}
<option value="{{ current-value }}"{% if all-data.image %} data-data='{"image": "{{ site.base }}/{{ all-data.image }}"}'{% elsif all-data.flag %} data-data='{"flag": "{{ all-data.flag }}"}'{% endif %}{% if data.value == current-value or data.value contains current-value %} selected{% endif %}>{{ current-name }}</option>
{% endfor %}
{% endif %}
</select>
{% capture_global scripts %}
{% comment %}
<script>
$(document).ready(function () {
$('#select-{{ id }}').selectize({
{% if key == "countries" %}
render: {
option: function (data, escape) {
return '<div class="option"><span class="flag flag-country-' + data.flag + ' me-2"></span>' + escape(data.text) + '</div>';
},
item: function (data, escape) {
return '<div class="d-flex align-items-center"><span class="flag flag-country-' + data.flag + ' me-2"></span>' + escape(data.text) + '</div>';
}
}
{% elsif key == "people" %}
render: {
option: function (data, escape) {
return '<div class="option">' + data.avatar + '' + escape(data.text) + '</div>';
},
item: function (data, escape) {
return '<div class="d-flex align-items-center">' + data.avatar + '' + escape(data.text) + '</div>';
}
}
{% endif %}
{% if data.max-items %}
maxItems: {{ data.max-items }},
{% endif %}
{% if data.removable %}
plugins: ['remove_button'],
{% endif %}
});
});
</script>
{% endcomment %}
{% endcapture_global %}
src/pages/_includes/ui/fullcalendar.html
-86
View File
@@ -1,86 +0,0 @@
{% assign calendar-id = include.calendar-id | default: 'main' %}
<div id="calendar-{{ calendar-id }}" class="card-calendar"></div>
{% capture_global scripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
{% if jekyll.environment == 'development' %}window.tabler_calendar = window.tabler_calendar || {};{% endif %}
var calendarEl = document.getElementById('calendar-{{ calendar-id }}'),
today = new Date(),
y = today.getFullYear(),
m = today.getMonth(),
d = today.getDate();
window.FullCalendar && ({% if jekyll.environment == 'development' %}window.tabler_calendar["calendar-{{ calendar-id }}"] = {% endif %}new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid' ],
themeSystem: 'standard',
header: {
left: 'title',
center: '',
right: 'prev,next'
},
selectable: true,
selectHelper: true,
nowIndicator: true,
views: {
dayGridMonth: { buttonText: 'month' },
timeGridWeek: { buttonText: 'week' },
timeGridDay: { buttonText: 'day' }
},
defaultView: 'dayGridMonth',
timeFormat: 'H(:mm)',
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1),
className: 'bg-blue-lt'
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, 7, 6, 0),
allDay: false,
className: 'bg-blue-lt'
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, 14, 6, 0),
allDay: false,
className: 'bg-lime-lt'
},
{
title: 'Meeting',
start: new Date(y, m, 4, 10, 30),
allDay: false,
className: 'bg-green-lt'
},
{
title: 'Lunch',
start: new Date(y, m, 5, 12, 0),
end: new Date(y, m, 5, 14, 0),
allDay: false,
className: 'bg-red-lt'
},
{
title: 'LBD Launch',
start: new Date(y, m, 19, 12, 0),
allDay: true,
className: 'bg-azure-lt'
},
{
title: 'Birthday Party',
start: new Date(y, m, 16, 19, 0),
end: new Date(y, m, 16, 22, 30),
allDay: false,
className: 'bg-orange-lt'
}
]
})).render();
});
</script>
{% endcapture_global %}
src/pages/_includes/ui/form/range.html → src/pages/_includes/ui/range.html
View File
src/pages/_includes/ui/select.html
+42
View File
@@ -0,0 +1,42 @@
{% assign id = include.id %}
{% if id %}
{% assign key = include.key | default: 'people' %}
{% assign data = site.data.selects[key] %}
{% assign options = data.options %}
<select type="text" class="form-control{% if include.class %} {{ include.class }}{% endif %}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %} id="select-{{ id }}" value="{{ value }}">
{% for option in options %}
<option value="{{ option }}">{{ option }}</option>
{% endfor %}
</select>
{% capture script %}
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
{% if jekyll.environment == 'development' %}
window.tabler_select = window.tabler_select || {};
{% endif %}
window.Choices && ({% if jekyll.environment == 'development' %}window.tabler_select["select-{{ id }}"] = {% endif %}new Choices(document.getElementById('select-{{ id }}'), {
}));
});
// @formatter:on
</script>
{% endcapture %}
{% if include.show-scripts %}
{{ script }}
{% else %}
{% capture_global scripts %}
{{ script }}
{% endcapture_global %}
{% endif %}
{% endif %}
src/scss/tabler-vendors.scss
-1
View File
@@ -1,6 +1,5 @@
@import "config";
@import "vendor/apexcharts";
@import "vendor/fullcalendar";
@import "vendor/nouislider";
@import "vendor/litepicker";
src/scss/vendor/_choices.scss
Vendored
View File
src/scss/vendor/_fullcalendar.scss
Vendored
-63
View File
@@ -1,63 +0,0 @@
.fc-unthemed {
.fc-content,
.fc-divider,
.fc-list-heading td,
.fc-list-view,
.fc-popover,
.fc-row,
tbody,
td,
th,
thead {
border-color: $border-color;
}
.fc-toolbar {
h2 {
font-size: $h2-font-size;
margin: 0;
}
}
.fc-button {
//@include button-variant($white, $border-color, $text-muted);
//@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
//@include transition($btn-transition);
}
.fc-widget-header {
border: 0;
}
.fc-day-header {
padding-bottom: .25rem;
font-weight: $font-weight-bold;
}
&.card-calendar {
.fc-day-grid-container {
border-bottom: 0;
border-left: 0;
td:last-child {
//border-right: 0;
}
td:first-child {
//border-left: 0;
}
}
}
.fc-time {
font-weight: $font-weight-bold;
}
.fc-event {
border-color: rgba(0, 0, 0, .05);
color: $primary;
background-color: theme-color-lighter($primary);
padding: 0 .25rem;
}
}