Upgrade boilerplate

This commit is contained in:
Ludovic CANDELLIER
2021-09-22 21:01:43 +02:00
parent ffb9f81353
commit e98266e556
56 changed files with 1477 additions and 701 deletions

View File

@@ -1,8 +1,9 @@
<div class="row">
<div class="col-md-6">
@include('boilerplate::plugins.demo.select2')
@include('boilerplate::plugins.demo.datepicker')
@include('boilerplate::plugins.demo.datetimepicker')
@include('boilerplate::plugins.demo.icheck')
@include('boilerplate::plugins.demo.daterangepicker')
@include('boilerplate::plugins.demo.codemirror')
@include('boilerplate::plugins.demo.fileinput')
@include('boilerplate::plugins.demo.tabs')

View File

@@ -1,24 +1,7 @@
@include('boilerplate::load.codemirror', ['theme' => 'storm'])
@push('js')
<script>
$(function () {
$('#code').codemirror();
})
</script>
@endpush
@component('boilerplate::card', ['color' => 'warning', 'title' => 'CodeMirror'])
Usage :
<pre>
&commat;include('boilerplate::load.codemirror', ['theme' => 'storm'])
&commat;push('js')
&lt;script>
var myCode = $('#code').codemirror();
// To get the value : myCode.getValue();
&lt;/script>
&commat;endpush</pre>
<textarea id="code"><h1>CodeMirror demo</h1>
<pre>&lt;x-boilerplate::codemirror name="code">&lt;php echo "My code"; ?>&lt;/x-boilerplate::codemirror></pre>
<x-boilerplate::codemirror name="code"><h1>CodeMirror demo</h1>
<style>
.color {
color: red;
@@ -29,10 +12,11 @@
alert('demo');
});
</script>
</textarea>
</x-boilerplate::codemirror>
@slot('footer')
<div class="small text-muted text-right">
<a href="https://sebastienheyd.github.io/boilerplate/components/codemirror" target="_blank">component</a> /
<a href="https://sebastienheyd.github.io/boilerplate/plugins/codemirror" target="_blank">plugin</a> /
<a href="https://codemirror.net/" target="_blank">CodeMirror</a>
</div>
@endslot

View File

@@ -58,6 +58,7 @@
@slot('footer')
<div class="small text-muted text-right">
<a href="https://sebastienheyd.github.io/boilerplate/plugins/datatables" target="_blank">plugin</a> /
<a href="https://datatables.net/manual/index">datatables</a>
</div>
@endslot

View File

@@ -2,143 +2,50 @@
<div class="row mb-3">
<div class="col-12">
Usage :
<pre>
&lt;div class="icheck-primary d-inline">
&lt;input type="checkbox" id="checkboxPrimary1">
&lt;label for="checkboxPrimary1">&lt;/label>
&lt;/div></pre>
<pre>&lt;x-boilerplate::icheck name="checkbox" label="My checkbox" /></pre>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group clearfix">
<div class="icheck-primary d-inline">
<input type="checkbox" id="checkboxPrimary1" checked>
<label for="checkboxPrimary1">
</label>
</div>
<div class="icheck-primary d-inline">
<input type="checkbox" id="checkboxPrimary2">
<label for="checkboxPrimary2">
</label>
</div>
<div class="icheck-primary d-inline">
<input type="checkbox" id="checkboxPrimary3" disabled>
<label for="checkboxPrimary3">
Primary checkbox
</label>
</div>
</div>
<div class="col-sm-6 d-flex">
<x-boilerplate::icheck name="c1" label="" class="mb-0" checked />
<x-boilerplate::icheck name="c1" label="" class="mb-0" />
<x-boilerplate::icheck name="c1" label="Primary checkbox" class="mb-0" disabled />
</div>
<div class="col-sm-6">
<div class="form-group clearfix">
<div class="icheck-primary d-inline">
<input type="radio" id="radioPrimary1" name="r1" checked>
<label for="radioPrimary1">
</label>
</div>
<div class="icheck-primary d-inline">
<input type="radio" id="radioPrimary2" name="r1">
<label for="radioPrimary2">
</label>
</div>
<div class="icheck-primary d-inline">
<input type="radio" id="radioPrimary3" name="r1" disabled>
<label for="radioPrimary3">
Primary radio
</label>
</div>
</div>
<div class="col-sm-6 d-flex">
<x-boilerplate::icheck name="r1" type="radio" label="" class="mb-0" checked />
<x-boilerplate::icheck name="r1" type="radio" label="" class="mb-0" />
<x-boilerplate::icheck name="r1" type="radio" label="Primary radio" class="mb-0" disabled />
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group clearfix">
<div class="icheck-danger d-inline">
<input type="checkbox" checked id="checkboxDanger1">
<label for="checkboxDanger1">
</label>
</div>
<div class="icheck-danger d-inline">
<input type="checkbox" id="checkboxDanger2">
<label for="checkboxDanger2">
</label>
</div>
<div class="icheck-danger d-inline">
<input type="checkbox" disabled id="checkboxDanger3">
<label for="checkboxDanger3">
Danger checkbox
</label>
</div>
</div>
<div class="col-sm-6 d-flex">
<x-boilerplate::icheck color="danger" name="c2" label="" class="mb-0" checked />
<x-boilerplate::icheck color="danger" name="c2" label="" class="mb-0" />
<x-boilerplate::icheck color="danger" name="c2" label="Danger checkbox" class="mb-0" disabled />
</div>
<div class="col-sm-6">
<div class="form-group clearfix">
<div class="icheck-danger d-inline">
<input type="radio" name="r2" checked id="radioDanger1">
<label for="radioDanger1">
</label>
</div>
<div class="icheck-danger d-inline">
<input type="radio" name="r2" id="radioDanger2">
<label for="radioDanger2">
</label>
</div>
<div class="icheck-danger d-inline">
<input type="radio" name="r2" disabled id="radioDanger3">
<label for="radioDanger3">
Danger radio
</label>
</div>
</div>
<div class="col-sm-6 d-flex">
<x-boilerplate::icheck color="danger" name="r2" type="radio" label="" class="mb-0" checked />
<x-boilerplate::icheck color="danger" name="r2" type="radio" label="" class="mb-0" />
<x-boilerplate::icheck color="danger" name="r2" type="radio" label="Danger radio" class="mb-0" disabled />
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group clearfix">
<div class="icheck-success d-inline">
<input type="checkbox" checked id="checkboxSuccess1">
<label for="checkboxSuccess1">
</label>
</div>
<div class="icheck-success d-inline">
<input type="checkbox" id="checkboxSuccess2">
<label for="checkboxSuccess2">
</label>
</div>
<div class="icheck-success d-inline">
<input type="checkbox" disabled id="checkboxSuccess3">
<label for="checkboxSuccess3">
Success checkbox
</label>
</div>
</div>
<div class="col-sm-6 d-flex">
<x-boilerplate::icheck color="success" name="c3" label="" class="mb-0" checked />
<x-boilerplate::icheck color="success" name="c3" label="" class="mb-0" />
<x-boilerplate::icheck color="success" name="c3" label="Danger checkbox" class="mb-0" disabled />
</div>
<div class="col-sm-6">
<div class="form-group clearfix">
<div class="icheck-success d-inline">
<input type="radio" name="r3" checked id="radioSuccess1">
<label for="radioSuccess1">
</label>
</div>
<div class="icheck-success d-inline">
<input type="radio" name="r3" id="radioSuccess2">
<label for="radioSuccess2">
</label>
</div>
<div class="icheck-success d-inline">
<input type="radio" name="r3" disabled id="radioSuccess3">
<label for="radioSuccess3">
Success radio
</label>
</div>
</div>
<div class="col-sm-6 d-flex">
<x-boilerplate::icheck color="success" name="r3" type="radio" label="" class="mb-0" checked />
<x-boilerplate::icheck color="success" name="r3" type="radio" label="" class="mb-0" />
<x-boilerplate::icheck color="success" name="r3" type="radio" label="Danger radio" class="mb-0" disabled />
</div>
</div>
@slot('footer')
<div class="text-right small text-muted">
<a href="https://bantikyan.github.io/icheck-bootstrap/">iCheck Bootstrap</a>
<a href="https://sebastienheyd.github.io/boilerplate/components/icheck" target="_blank">component</a> /
<a href="https://bantikyan.github.io/icheck-bootstrap/" target="_blank">iCheck</a>
</div>
@endslot
@endcomponent

View File

@@ -1,81 +1,22 @@
@include('boilerplate::load.select2')
@push('js')
<script>
$(function() {
$(".select2").select2();
});
</script>
@endpush
@component('boilerplate::card', ['color' => 'primary', 'title' => 'Select 2'])
@php($options = ['Alabama', 'Alaska', 'Arizona', 'California', 'Delaware', 'Florida', 'Iowa', 'Oregon', 'Minnesota', 'Tennessee', 'Texas'])
@component('boilerplate::card', ['color' => 'primary', 'title' => 'Select2'])
<div class="row">
<div class="col-12">
Usage :
<pre>
&commat;include('boilerplate::load.select2')
&commat;push('js')
&lt;script>
$('.select2').select2();
&lt;/script>
&commat;endpush</pre>
<pre>&lt;x-boilerplate::select2 name="example" label="Example" :options="['Opt 1', 'Opt 2']" /></pre>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Minimal</label>
<select class="form-control select2" style="width: 100%;">
<option selected="selected">Alabama</option>
<option>Alaska</option>
<option>California</option>
<option>Delaware</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Washington</option>
</select>
</div>
<div class="form-group">
<label>Disabled</label>
<select class="form-control select2" disabled="disabled" style="width: 100%;">
<option selected="selected">Alabama</option>
<option>Alaska</option>
<option>California</option>
<option>Delaware</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Washington</option>
</select>
</div>
@component('boilerplate::components.select2', ['label' => 'Minimal', 'name' => 'select2_dminimal', 'selected' => 1, 'options' => $options, 'allow-clear' => 'true', 'minimum-results-for-search' => 5])@endcomponent
</div>
<div class="col-md-6">
<div class="form-group">
<label>Multiple</label>
<select class="form-control select2" multiple="multiple" data-placeholder="Multiple select" style="width: 100%;">
<option>Alabama</option>
<option>Alaska</option>
<option>California</option>
<option selected>Delaware</option>
<option>Tennessee</option>
<option selected>Texas</option>
<option>Washington</option>
</select>
</div>
<div class="form-group">
<label>Disabled Result</label>
<select class="form-control select2" style="width: 100%;">
<option selected="selected">Alabama</option>
<option>Alaska</option>
<option disabled="disabled">California (disabled)</option>
<option>Delaware</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Washington</option>
</select>
</div>
@component('boilerplate::components.select2', ['label' => 'Multiple', 'name' => 'select2_multiple', 'selected' => [1,3], 'options' => $options, 'multiple' => true])@endcomponent
</div>
</div>
@slot('footer')
<div class="small text-muted text-right">
<a href="https://select2.github.io/">select2</a>
<div class="text-right small text-muted">
<a href="https://sebastienheyd.github.io/boilerplate/components/select2" target="_blank">component</a> /
<a href="https://sebastienheyd.github.io/boilerplate/plugins/select2" target="_blank">plugin</a> /
<a href="https://select2.github.io/" target="_blank">select2</a>
</div>
@endslot
@endcomponent

View File

@@ -1,16 +1,16 @@
@component('boilerplate::card', ['color' => 'info', 'title' => 'TinyMCE'])
Usage :
<pre>
&commat;include('boilerplate::load.tinymce')
&commat;push('js')
&lt;script>
$('#tiny').tinymce({});
&lt;/script>
&commat;endpush</pre>
@component('boilerplate::tinymce') @endcomponent
Usage :
<pre>&lt;x-boilerplate::tinymce name="tinymce">
&lt;h2>TinyMCE demo&lt;/h2>&lt;p>Lorem ipsum dolor sit amet.&lt;/p>
&lt;/x-boilerplate::tinymce></pre>
@component('boilerplate::tinymce', ['name' => 'tinymce'])
<h2>TinyMCE demo</h2><p>Lorem ipsum dolor sit amet.</p>
@endcomponent()
@slot('footer')
<div class="text-muted small text-right">
<a href="https://www.tiny.cloud/docs/" target="_blank">tinyMCE</a>
<div class="text-right small text-muted">
<a href="https://sebastienheyd.github.io/boilerplate/components/tinymce" target="_blank">component</a> /
<a href="https://sebastienheyd.github.io/boilerplate/plugins/tinymce" target="_blank">plugin</a> /
<a href="https://www.tiny.cloud/docs/" target="_blank">TinyMCE</a>
</div>
@endslot
@endcomponent