testio-tailwind 3.20.5 → 3.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -1
- package/src/assets/scripts/app.js +16 -0
- package/src/assets/stylesheets/app.css +2 -0
- package/src/assets/stylesheets/components/forms.css +19 -11
- package/src/assets/stylesheets/plugin_themes/flatpickr.css +86 -0
- package/src/pages/forms/date-time.haml +23 -0
- package/src/pages/forms/flatpickr.haml +27 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "testio-tailwind",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.21.0",
|
|
4
4
|
"description": "Tailwind based design system for Test IO",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"clean": "del dist --force",
|
|
@@ -38,6 +38,7 @@
|
|
|
38
38
|
"autosize": "^5.0.1",
|
|
39
39
|
"dropzone": "^6.0.0-beta.2",
|
|
40
40
|
"echarts": "^5.6.0",
|
|
41
|
+
"flatpickr": "^4.6.13",
|
|
41
42
|
"hamljs": "^0.6.2",
|
|
42
43
|
"html-minifier-terser": "^7.2.0",
|
|
43
44
|
"jquery": "^3.6.0",
|
|
@@ -204,3 +204,19 @@ if (document.getElementById("echarts-testinator")) {
|
|
|
204
204
|
if (document.getElementById("echarts-testinator-empty")) {
|
|
205
205
|
createChartDonut("echarts-testinator-empty", dataTestinatorEmpty, "100", "Total check executions", true, colorLabelDark, colorValueDark);
|
|
206
206
|
}
|
|
207
|
+
|
|
208
|
+
// Flatpickr
|
|
209
|
+
|
|
210
|
+
import flatpickr from "flatpickr";
|
|
211
|
+
|
|
212
|
+
flatpickr(".flatpickr", {
|
|
213
|
+
dateFormat: "Y-m-d",
|
|
214
|
+
altInput: true,
|
|
215
|
+
altFormat: "F j, Y",
|
|
216
|
+
});
|
|
217
|
+
|
|
218
|
+
flatpickr(".flatpickr-time", {
|
|
219
|
+
enableTime: true,
|
|
220
|
+
dateFormat: "Y-m-d H:i",
|
|
221
|
+
altInput: true,
|
|
222
|
+
});
|
|
@@ -17,6 +17,8 @@
|
|
|
17
17
|
@import './plugin_themes/markdown_trix_styles.css' layer(components);
|
|
18
18
|
@import './plugin_themes/pagy.css' layer(components);
|
|
19
19
|
@import './plugin_themes/dropzone.css' layer(components);
|
|
20
|
+
@import 'flatpickr/dist/flatpickr.css' layer(components);
|
|
21
|
+
@import './plugin_themes/flatpickr.css' layer(components);
|
|
20
22
|
|
|
21
23
|
/*//// Components ////*/
|
|
22
24
|
@import './components/fonts.css' layer(components);
|
|
@@ -78,17 +78,6 @@ textarea.form-control {
|
|
|
78
78
|
@apply absolute flex justify-center items-center h-btn bottom-0 right-0 px-xs;
|
|
79
79
|
}
|
|
80
80
|
|
|
81
|
-
.form-date::before {
|
|
82
|
-
@apply inline-block absolute bottom-xs right-xs h-icon w-icon bg-gray-darker;
|
|
83
|
-
content: "";
|
|
84
|
-
mask-image: url("/assets/images/icons/calendar.svg");
|
|
85
|
-
mask-repeat: no-repeat;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.form-date .form-control {
|
|
89
|
-
@apply pr-lg;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
81
|
.form-group.inverted .form-control {
|
|
93
82
|
@apply text-white border-gray-darker bg-transparent dark:border-bordercolor dark:bg-card;
|
|
94
83
|
}
|
|
@@ -109,4 +98,23 @@ textarea.form-control {
|
|
|
109
98
|
&::before {
|
|
110
99
|
@apply bg-gray-light;
|
|
111
100
|
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
/*///// Form date /////*/
|
|
105
|
+
|
|
106
|
+
.form-date {
|
|
107
|
+
@apply relative;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.form-date input[type="date"]::-webkit-calendar-picker-indicator,
|
|
111
|
+
.form-date input[type="datetime-local"]::-webkit-calendar-picker-indicator {
|
|
112
|
+
@apply absolute top-0 right-0 opacity-0 w-btn h-btn cursor-pointer;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.form-date::after {
|
|
116
|
+
@apply absolute top-xs right-sm w-icon h-icon pointer-events-none bg-primary;
|
|
117
|
+
content: "";
|
|
118
|
+
mask-image: url("/assets/images/icons/calendar.svg");
|
|
119
|
+
mask-repeat: no-repeat;
|
|
112
120
|
}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
.flatpickr.input,
|
|
2
|
+
.flatpickr.input[readonly],
|
|
3
|
+
.flatpickr-time.input,
|
|
4
|
+
.flatpickr-time.input[readonly],
|
|
5
|
+
.form-group.inverted .flatpickr.input[readonly],
|
|
6
|
+
.form-group.inverted .flatpickr-time.input[readonly] {
|
|
7
|
+
@apply cursor-pointer bg-transparent;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.form-group.inverted .flatpickr.input[readonly],
|
|
11
|
+
.form-group.inverted .flatpickr-time.input[readonly] {
|
|
12
|
+
@apply border-gray-700;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.flatpickr-time {
|
|
16
|
+
@apply text-left;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.flatpickr-day.selected {
|
|
20
|
+
@apply bg-info border-none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.flatpickr-day.selected:hover,
|
|
24
|
+
.flatpickr-day.selected:focus {
|
|
25
|
+
@apply bg-link-hover;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.flatpickr-months,
|
|
29
|
+
.flatpickr-months .flatpickr-month {
|
|
30
|
+
@apply rounded-t;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.flatpickr-months .flatpickr-month,
|
|
34
|
+
.flatpickr-weekdays,
|
|
35
|
+
.flatpickr-weekdays .flatpickr-weekday {
|
|
36
|
+
@apply text-white bg-info;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.flatpickr-prev-month svg,
|
|
40
|
+
.flatpickr-months .flatpickr-next-month svg {
|
|
41
|
+
@apply fill-white;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.flatpickr-months .flatpickr-prev-month,
|
|
45
|
+
.flatpickr-months .flatpickr-next-month {
|
|
46
|
+
@apply pt-xs;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.flatpickr-months .flatpickr-prev-month:hover,
|
|
50
|
+
.flatpickr-months .flatpickr-next-month:hover {
|
|
51
|
+
@apply bg-link-hover;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.flatpickr-months .flatpickr-prev-month:hover svg,
|
|
55
|
+
.flatpickr-months .flatpickr-next-month:hover svg {
|
|
56
|
+
@apply fill-white;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.flatpickr-months .flatpickr-prev-month {
|
|
60
|
+
@apply rounded-tl;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.flatpickr-months .flatpickr-next-month {
|
|
64
|
+
@apply rounded-tr;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.flatpickr-current-month .flatpickr-monthDropdown-months {
|
|
68
|
+
@apply block bg-transparent;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.flatpickr-current-month {
|
|
72
|
+
@apply flex flex-row;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.flatpickr-current-month .numInputWrapper {
|
|
76
|
+
@apply w-auto;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
|
|
80
|
+
@apply bg-info text-base;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month:hover,
|
|
84
|
+
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month:focus {
|
|
85
|
+
@apply bg-link-hover;
|
|
86
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
---
|
|
2
|
+
tags: "forms"
|
|
3
|
+
title: Date and time inputs
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
.form-grid
|
|
7
|
+
.form-group
|
|
8
|
+
%label.form-label Native date input
|
|
9
|
+
.form-date
|
|
10
|
+
%input.form-control{type:"date", min:"1920-01-01", max:"2026-01-01", placeholder:"Enter your birthday"}
|
|
11
|
+
.form-group
|
|
12
|
+
%label.form-label Native datetime-local input
|
|
13
|
+
.form-date
|
|
14
|
+
%input.form-control{type:"datetime-local"}
|
|
15
|
+
.form-grid.bg-black.p-3.mt-md
|
|
16
|
+
.form-group.inverted
|
|
17
|
+
%label.form-label Native date input
|
|
18
|
+
.form-date
|
|
19
|
+
%input.form-control{type:"date", min:"1920-01-01", max:"2026-01-01", placeholder:"Enter your birthday"}
|
|
20
|
+
.form-group.inverted
|
|
21
|
+
%label.form-label Native datetime-local input
|
|
22
|
+
.form-date
|
|
23
|
+
%input.form-control{type:"datetime-local"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
---
|
|
2
|
+
tags: "forms"
|
|
3
|
+
title: Date and time with Flatpickr
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
%p.mb-xs
|
|
7
|
+
This example uses
|
|
8
|
+
%a{href:"https://flatpickr.js.org/"} Flatpickr
|
|
9
|
+
%span as a date and date-time picker replacement.
|
|
10
|
+
.form-grid
|
|
11
|
+
.form-group
|
|
12
|
+
%label.form-label Native date input
|
|
13
|
+
.form-date
|
|
14
|
+
%input.form-control.flatpickr{type:"date", placeholder:"Enter your birthday"}
|
|
15
|
+
.form-group
|
|
16
|
+
%label.form-label Native datetime-local input
|
|
17
|
+
.form-date
|
|
18
|
+
%input.form-control.flatpickr-time{type:"datetime-local", placeholder:"Enter your local date time"}
|
|
19
|
+
.form-grid.bg-black.p-3.mt-md
|
|
20
|
+
.form-group.inverted
|
|
21
|
+
%label.form-label Native date input
|
|
22
|
+
.form-date
|
|
23
|
+
%input.form-control.flatpickr{type:"date", placeholder:"Enter your birthday"}
|
|
24
|
+
.form-group.inverted
|
|
25
|
+
%label.form-label Native datetime-local input
|
|
26
|
+
.form-date
|
|
27
|
+
%input.form-control.flatpickr-time{type:"datetime-local", placeholder:"Enter your local date time"}
|