Merge remote-tracking branch 'origin/dev' into dev

README.md

@@ -73,7 +73,7 @@ Have a bug or a feature request? [Please open a new issue](https://github.com/ta
 
 ## Contributors
 
-This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
+This project exists thanks to all the people who contribute. [[Contribute](https://github.com/tabler/tabler/graphs/contributors)].
 <a href="https://github.com/tabler/tabler/graphs/contributors"><img src="https://opencollective.com/tabler/contributors.svg?width=890&button=false"></a>
 
 ## Backers

js/tabler.js

@@ -35,6 +35,10 @@ const tabler = {
 $(document).ready(function () {
 	const $body = $('body');
 
+  // $('[data-toggle="tooltip"]').tooltip();
+  
+  $('[data-toggle="toast"]').toast();
+  
 	$body.on('click', '[data-toggle="menubar"]', function (e) {
 		$body.toggleClass('aside-visible');
 

package.json

@@ -114,6 +114,7 @@
     "autosize": "4.0.2",
     "bootstrap": "twbs/bootstrap#46f086c",
     "countup.js": "2.0.4",
+    "daterangepicker": "3.0.5",
     "fullcalendar": "3.10.1",
     "imask": "6.0.1",
     "jquery": "3.4.1",

pages/_data/libs.json

@@ -23,6 +23,10 @@
       "@fullcalendar/timegrid/main.min.js",
       "@fullcalendar/list/main.min.js"
     ],
+    "daterangepicker": [
+      "daterangepicker/moment.min.js",
+      "daterangepicker/daterangepicker.js"
+    ],
     "countup": "countup.js/dist/countUp.min.js"
   },
   "css": {
@@ -33,6 +37,7 @@
       "@fullcalendar/daygrid/main.min.css",
       "@fullcalendar/timegrid/main.min.css",
       "@fullcalendar/list/main.min.css"
-    ]
+    ],
+    "daterangepicker": "daterangepicker/daterangepicker.css"
   }
 }

pages/_docs/toasts.md

@@ -5,10 +5,25 @@ description: The toast component is like an alert box that is only shown for a c
 bootstrap-link: components/toasts/
 ---
 
-
-
 ### Default markup
 
 {% example %}
 {% include ui/toast.html %}
 {% endexample %}
+
+### Translucent
+
+Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we’ll also attempt to blur the elements under a toast.
+
+{% example html class=bg-gray %}
+{% include ui/toast.html %}
+{% endexample %}
+
+### Stacking toasts
+
+If you want to stack toasts just put them in the same container.
+
+{% example %}
+{% include ui/toast.html person-id=3 %}
+{% include ui/toast.html date="7 mins ago" text="This is another toast message." %}
+{% endexample %}

pages/_includes/layout/js.html

@@ -8,4 +8,5 @@
 {% endfor %}
 
 <!-- Tabler Core -->
+
 <script src="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/js/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>

pages/_includes/ui/toast.html

@@ -1,6 +1,6 @@
 {% assign person-id = include.person-id | default: 2 %}
 {% assign person = site.data.people[person-id] %}
-<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
+<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-toggle="toast">
    <div class="toast-header">
       {% include ui/avatar.html person=person class="mr-2" size="sm" %}
       <strong class="mr-auto">{{ person.full_name }}</strong>
@@ -10,6 +10,6 @@
       </button>
    </div>
    <div class="toast-body">
-      Hello, world! This is a toast message.
+      {{ include.text | default: 'Hello, world! This is a toast message.' }}
    </div>
 </div>

pages/_plugins/jekyll-example.rb

@@ -82,7 +82,7 @@ Valid syntax: example <lang> [id=foo]
     def example(output)
       output = output.gsub(/<hide>/, "").gsub(/<\/hide>/, "")
 
-      "<div class=\"example" + (@options[:columns] ? " example-bg" : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + (@options[:"max-width"] ? "<div style=\"max-width: " + @options[:"max-width"] + "px; margin: 0 auto;\">\n" : "") + output + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + (@options[:"max-width"] ? "\n</div>" : "") + "\n</div>"
+      "<div class=\"example" + (@options[:columns] ? " example-bg" : "") + (@options[:class] ? " " + @options[:class] : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + (@options[:"max-width"] ? "<div style=\"max-width: " + @options[:"max-width"] + "px; margin: 0 auto;\">\n" : "") + output + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + (@options[:"max-width"] ? "\n</div>" : "") + "\n</div>"
     end
 
   end

pages/tmp.html

@@ -58,4 +58,13 @@ menu: a.b.c
 		{% include cards/users-list.html offset=8 checkbox=true title="Contacts" %}
 	</div>
 </div>
-
+<div class="row">
+   <div class="col-10 col-sm-8 col-md-6 col-lg-4">
+      <div class="card">
+         <div class="card-body d-flex justify-content-between table-responsive">
+            <p class="mb-0 mr-3 d-flex align-items-center text-nowrap">Pick date:</p>
+            <input type="text" name="dates" class="form-control text-center ml-4" size="20">
+         </div>
+      </div>
+   </div>
+</div>

scss/ui/_forms.scss

@@ -35,6 +35,9 @@ Form control
     color: $text-muted;
     user-select: none;
   }
+  &[size]{
+    width: auto;
+  }
 }
 
 .form-control-light {

scss/ui/_toasts.scss

@@ -1,3 +1,6 @@
 .toast-header {
   user-select: none;
 }
+.toast button[data-dismiss="toast"]{
+  outline: none;
+}