testio-tailwind 3.20.4 → 3.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "testio-tailwind",
-	"version": "3.20.4",
+	"version": "3.21.0",
 	"description": "Tailwind based design system for Test IO",
 	"scripts": {
 		"clean": "del dist --force",
@@ -38,6 +38,7 @@
 		"autosize": "^5.0.1",
 		"dropzone": "^6.0.0-beta.2",
 		"echarts": "^5.6.0",
+		"flatpickr": "^4.6.13",
 		"hamljs": "^0.6.2",
 		"html-minifier-terser": "^7.2.0",
 		"jquery": "^3.6.0",

package/src/assets/scripts/app.js

@@ -204,3 +204,19 @@ if (document.getElementById("echarts-testinator")) {
 if (document.getElementById("echarts-testinator-empty")) {
   createChartDonut("echarts-testinator-empty", dataTestinatorEmpty, "100", "Total check executions", true,  colorLabelDark, colorValueDark);
 }
+
+// Flatpickr
+
+import flatpickr from "flatpickr";
+
+flatpickr(".flatpickr", {
+  dateFormat: "Y-m-d",
+  altInput: true,
+  altFormat: "F j, Y",
+});
+
+flatpickr(".flatpickr-time", {
+  enableTime: true,
+  dateFormat: "Y-m-d H:i",
+  altInput: true,
+});

package/src/assets/stylesheets/app.css

@@ -17,6 +17,8 @@
 @import './plugin_themes/markdown_trix_styles.css' layer(components);
 @import './plugin_themes/pagy.css' layer(components);
 @import './plugin_themes/dropzone.css' layer(components);
+@import 'flatpickr/dist/flatpickr.css' layer(components);
+@import './plugin_themes/flatpickr.css' layer(components);
 
 /*//// Components ////*/
 @import './components/fonts.css' layer(components);

package/src/assets/stylesheets/components/drawer.css

@@ -57,7 +57,7 @@ details[open] .drawer-trigger .close-btn {
 }
 
 .drawer-footer {
-  @apply flex flex-row items-center h-actionbar px-spacing -mx-spacing bg-info dark:h-auto pt-xs pb-md dark:bg-appbody;
+  @apply flex flex-row items-center h-actionbar px-spacing py-sm -mx-spacing bg-info dark:h-auto dark:bg-appbody;
 }
 
 .drawer-footer .btn {

package/src/assets/stylesheets/components/forms.css

@@ -78,17 +78,6 @@ textarea.form-control {
   @apply absolute flex justify-center items-center h-btn bottom-0 right-0 px-xs;
 }
 
-.form-date::before {
-  @apply inline-block absolute bottom-xs right-xs h-icon w-icon bg-gray-darker;
-  content: "";
-  mask-image: url("/assets/images/icons/calendar.svg");
-  mask-repeat: no-repeat;
-}
-
-.form-date .form-control {
-  @apply pr-lg;
-}
-
 .form-group.inverted .form-control {
   @apply text-white border-gray-darker bg-transparent dark:border-bordercolor dark:bg-card;
 }
@@ -109,4 +98,23 @@ textarea.form-control {
   &::before {
     @apply bg-gray-light;
   }
+}
+
+
+/*///// Form date /////*/
+
+.form-date {
+  @apply relative;
+}
+
+.form-date input[type="date"]::-webkit-calendar-picker-indicator,
+.form-date input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+  @apply absolute top-0 right-0 opacity-0 w-btn h-btn cursor-pointer;
+}
+
+.form-date::after {
+  @apply absolute top-xs right-sm w-icon h-icon pointer-events-none bg-primary;
+  content: "";
+  mask-image: url("/assets/images/icons/calendar.svg");
+  mask-repeat: no-repeat;
 }

package/src/assets/stylesheets/plugin_themes/flatpickr.css

@@ -0,0 +1,86 @@
+.flatpickr.input,
+.flatpickr.input[readonly],
+.flatpickr-time.input,
+.flatpickr-time.input[readonly],
+.form-group.inverted .flatpickr.input[readonly],
+.form-group.inverted .flatpickr-time.input[readonly] {
+  @apply cursor-pointer bg-transparent;
+}
+
+.form-group.inverted .flatpickr.input[readonly],
+.form-group.inverted .flatpickr-time.input[readonly] {
+  @apply border-gray-700;
+}
+
+.flatpickr-time {
+  @apply text-left;
+}
+
+.flatpickr-day.selected {
+  @apply bg-info border-none;
+}
+
+.flatpickr-day.selected:hover,
+.flatpickr-day.selected:focus {
+  @apply bg-link-hover;
+}
+
+.flatpickr-months,
+.flatpickr-months .flatpickr-month {
+  @apply rounded-t;
+}
+
+.flatpickr-months .flatpickr-month,
+.flatpickr-weekdays,
+.flatpickr-weekdays .flatpickr-weekday {
+  @apply text-white bg-info;
+}
+
+.flatpickr-prev-month svg,
+.flatpickr-months .flatpickr-next-month svg {
+  @apply fill-white;
+}
+
+.flatpickr-months .flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month {
+  @apply pt-xs;
+}
+
+.flatpickr-months .flatpickr-prev-month:hover,
+.flatpickr-months .flatpickr-next-month:hover {
+  @apply bg-link-hover;
+}
+
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months .flatpickr-next-month:hover svg {
+  @apply fill-white;
+}
+
+.flatpickr-months .flatpickr-prev-month {
+  @apply rounded-tl;
+}
+
+.flatpickr-months .flatpickr-next-month {
+  @apply rounded-tr;
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months {
+  @apply block bg-transparent;
+}
+
+.flatpickr-current-month {
+  @apply flex flex-row;
+}
+
+.flatpickr-current-month .numInputWrapper {
+  @apply w-auto;
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
+  @apply bg-info text-base;
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month:hover,
+.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month:focus {
+  @apply bg-link-hover;
+}

package/src/pages/forms/date-time.haml

@@ -0,0 +1,23 @@
+---
+tags: "forms"
+title: Date and time inputs
+---
+
+.form-grid
+  .form-group
+    %label.form-label Native date input
+    .form-date
+      %input.form-control{type:"date", min:"1920-01-01", max:"2026-01-01", placeholder:"Enter your birthday"}
+  .form-group
+    %label.form-label Native datetime-local input
+    .form-date
+      %input.form-control{type:"datetime-local"}
+.form-grid.bg-black.p-3.mt-md
+  .form-group.inverted
+    %label.form-label Native date input
+    .form-date
+      %input.form-control{type:"date", min:"1920-01-01", max:"2026-01-01", placeholder:"Enter your birthday"}
+  .form-group.inverted
+    %label.form-label Native datetime-local input
+    .form-date
+      %input.form-control{type:"datetime-local"}

package/src/pages/forms/flatpickr.haml

@@ -0,0 +1,27 @@
+---
+tags: "forms"
+title: Date and time with Flatpickr
+---
+
+%p.mb-xs
+  This example uses 
+  %a{href:"https://flatpickr.js.org/"} Flatpickr
+  %span  as a date and date-time picker replacement.
+.form-grid
+  .form-group
+    %label.form-label Native date input
+    .form-date
+      %input.form-control.flatpickr{type:"date", placeholder:"Enter your birthday"}
+  .form-group
+    %label.form-label Native datetime-local input
+    .form-date
+      %input.form-control.flatpickr-time{type:"datetime-local", placeholder:"Enter your local date time"}
+.form-grid.bg-black.p-3.mt-md
+  .form-group.inverted
+    %label.form-label Native date input
+    .form-date
+      %input.form-control.flatpickr{type:"date", placeholder:"Enter your birthday"}
+  .form-group.inverted
+    %label.form-label Native datetime-local input
+    .form-date
+      %input.form-control.flatpickr-time{type:"datetime-local", placeholder:"Enter your local date time"}