@kws3/ui 1.5.6 → 1.6.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/datagrid/DataSearch/DataSearch.svelte +35 -20
- package/datagrid/DataSearch/SearchFilter.svelte +5 -5
- package/datagrid/Pagination/Pagination.svelte +4 -3
- package/helpers/Nl2br.svelte +1 -1
- package/package.json +2 -2
- package/styles/DataSearch.scss +60 -0
- package/styles/DataSort.scss +25 -3
- package/styles/Pagination.scss +66 -33
- package/styles/Select.scss +8 -0
|
@@ -18,10 +18,10 @@
|
|
|
18
18
|
|
|
19
19
|
-->
|
|
20
20
|
|
|
21
|
-
<form on:submit|preventDefault={dosearch}>
|
|
22
|
-
<div class="field has-addons">
|
|
21
|
+
<form class="kws-grid-search" on:submit|preventDefault={dosearch}>
|
|
22
|
+
<div class="field has-addons outer-level-field">
|
|
23
23
|
{#if hasSearch}
|
|
24
|
-
<
|
|
24
|
+
<div class="control is-expanded main-search">
|
|
25
25
|
<input
|
|
26
26
|
class="input {query != '' && query != undefined
|
|
27
27
|
? filter_in_use_class
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
type="text"
|
|
30
30
|
{placeholder}
|
|
31
31
|
bind:value={query} />
|
|
32
|
-
</
|
|
32
|
+
</div>
|
|
33
33
|
{/if}
|
|
34
34
|
{#if hasFilters}
|
|
35
35
|
{#each _filters as filter, i}
|
|
@@ -45,18 +45,25 @@
|
|
|
45
45
|
{filter_label_map} />
|
|
46
46
|
{/each}
|
|
47
47
|
{/if}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
|
|
49
|
+
<div class="field has-addons action-buttons-field">
|
|
50
|
+
{#if changed}
|
|
51
|
+
<div class="control is-expanded clear-search">
|
|
52
|
+
<button
|
|
53
|
+
class="button is-danger"
|
|
54
|
+
type="button"
|
|
55
|
+
on:click={doresetSearch}>
|
|
56
|
+
<Icon icon="close" size="small" />
|
|
57
|
+
<span class="is-hidden-desktop is-hidden-tablet">Clear</span>
|
|
58
|
+
</button>
|
|
59
|
+
</div>
|
|
60
|
+
{/if}
|
|
61
|
+
<div class="control is-expanded search-submit">
|
|
62
|
+
<button class="button is-primary" type="submit">
|
|
63
|
+
<Icon icon="search" size="small" /> <span>Search</span>
|
|
52
64
|
</button>
|
|
53
|
-
</
|
|
54
|
-
|
|
55
|
-
<p class="control">
|
|
56
|
-
<button class="button is-primary" type="submit">
|
|
57
|
-
<Icon icon="search" size="small" /> <span>Search</span>
|
|
58
|
-
</button>
|
|
59
|
-
</p>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
60
67
|
</div>
|
|
61
68
|
</form>
|
|
62
69
|
|
|
@@ -106,19 +113,24 @@
|
|
|
106
113
|
|
|
107
114
|
let query = "",
|
|
108
115
|
_filters = [],
|
|
109
|
-
filterVals = {}
|
|
116
|
+
filterVals = {},
|
|
117
|
+
filterWidthStyle = "";
|
|
110
118
|
|
|
111
119
|
$: usedFilterComponent = filterComponent ? filterComponent : SearchFilter;
|
|
112
|
-
$: filterWidthStyle = hasSearch
|
|
113
|
-
? `max-width:${(1 / (_filters.length + 2)) * 100}%`
|
|
114
|
-
: "";
|
|
115
120
|
$: changed = q && q.trim() != "";
|
|
116
121
|
$: q, qHasChanged();
|
|
117
122
|
$: filters, filtersHaveChanged();
|
|
118
123
|
|
|
124
|
+
function calculateMaxWidths() {
|
|
125
|
+
filterWidthStyle = hasSearch
|
|
126
|
+
? `max-width:${(1 / (_filters.length + 2)) * 100}%`
|
|
127
|
+
: "";
|
|
128
|
+
}
|
|
129
|
+
|
|
119
130
|
function filtersHaveChanged() {
|
|
120
131
|
if (filters) {
|
|
121
132
|
_filters = [];
|
|
133
|
+
let temp = [];
|
|
122
134
|
for (let i in filters) {
|
|
123
135
|
let obj = { name: i, options: [], type: "select" };
|
|
124
136
|
if (Array.isArray(filters[i])) {
|
|
@@ -131,9 +143,12 @@
|
|
|
131
143
|
obj.type = filters[i].type;
|
|
132
144
|
}
|
|
133
145
|
}
|
|
134
|
-
|
|
146
|
+
temp.push(obj);
|
|
135
147
|
}
|
|
148
|
+
_filters = temp;
|
|
136
149
|
}
|
|
150
|
+
|
|
151
|
+
calculateMaxWidths();
|
|
137
152
|
}
|
|
138
153
|
|
|
139
154
|
function qHasChanged() {
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
-->
|
|
12
12
|
|
|
13
13
|
{#if filter.type == "multiselect"}
|
|
14
|
-
<div class="control" style={filterWidthStyle}>
|
|
14
|
+
<div class="control search-control" style={filterWidthStyle}>
|
|
15
15
|
<MultiSelect
|
|
16
16
|
options={sanitizedOptions}
|
|
17
17
|
placeholder={`Any ${name}`}
|
|
@@ -23,14 +23,14 @@
|
|
|
23
23
|
class={hilightClass} />
|
|
24
24
|
</div>
|
|
25
25
|
{:else if filter.type == "date"}
|
|
26
|
-
<div class="control" style={filterWidthStyle}>
|
|
26
|
+
<div class="control search-control" style={filterWidthStyle}>
|
|
27
27
|
<Datepicker
|
|
28
28
|
class={hilightClass}
|
|
29
29
|
bind:value={filterVals[filter.name]}
|
|
30
30
|
placeholder="{capitaliseFirstLetter(name)} Date" />
|
|
31
31
|
</div>
|
|
32
32
|
{:else if filter.type == "daterange"}
|
|
33
|
-
<div class="control" style={filterWidthStyle}>
|
|
33
|
+
<div class="control search-control" style={filterWidthStyle}>
|
|
34
34
|
<Datepicker
|
|
35
35
|
class={hilightClass}
|
|
36
36
|
bind:value={filterVals[filter.name]}
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
placeholder="{capitaliseFirstLetter(name)} Date Range" />
|
|
39
39
|
</div>
|
|
40
40
|
{:else if filter.options.length > 10}
|
|
41
|
-
<div class="control" style={filterWidthStyle}>
|
|
41
|
+
<div class="control search-control" style={filterWidthStyle}>
|
|
42
42
|
<SearchableSelect
|
|
43
43
|
options={sanitizedOptions}
|
|
44
44
|
placeholder={`Any ${name}`}
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
</div>
|
|
50
50
|
{:else}
|
|
51
51
|
<div
|
|
52
|
-
class="select {hilightClass}"
|
|
52
|
+
class="select control search-control {hilightClass}"
|
|
53
53
|
style={filterWidthStyle}
|
|
54
54
|
data-cy="select-container">
|
|
55
55
|
<select
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
{:else}
|
|
48
48
|
<div class="level-item">
|
|
49
49
|
{#if showTotal}
|
|
50
|
-
<strong>Total {
|
|
50
|
+
<strong>Total {totalItems} {entityName}</strong>
|
|
51
51
|
{:else if showCurrent}
|
|
52
52
|
{#if meta.total > 0}Showing {meta.offset * 1 + 1} to {meta.offset *
|
|
53
53
|
1 +
|
|
@@ -72,12 +72,12 @@
|
|
|
72
72
|
{/if}
|
|
73
73
|
{/if}
|
|
74
74
|
{#if showTotal}
|
|
75
|
-
<strong>{
|
|
75
|
+
<strong>{totalItems} {entityName}</strong>
|
|
76
76
|
{/if}
|
|
77
77
|
</div>
|
|
78
78
|
{:else if showPerPage && showTotal && !showCurrent}
|
|
79
79
|
<div class="level-item pagination-showing">
|
|
80
|
-
<strong>Total {
|
|
80
|
+
<strong>Total {totalItems} {entityName}</strong>
|
|
81
81
|
</div>
|
|
82
82
|
{/if}
|
|
83
83
|
|
|
@@ -204,6 +204,7 @@
|
|
|
204
204
|
_perPageOptions = ret;
|
|
205
205
|
}
|
|
206
206
|
|
|
207
|
+
$: totalItems = meta && meta.total ? meta.total : 0;
|
|
207
208
|
$: currentPage = Math.floor(meta.offset / meta.limit);
|
|
208
209
|
$: totalPages = Math.ceil(meta.total / (meta.limit || 1));
|
|
209
210
|
$: totalPages, currentPage, breakThreshold, calculatePages();
|
package/helpers/Nl2br.svelte
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kws3/ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.6.0",
|
|
4
4
|
"description": "UI components for use with Svelte v3 applications.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -28,5 +28,5 @@
|
|
|
28
28
|
"text-mask-core": "^5.1.2",
|
|
29
29
|
"tippy.js": "^6.3.1"
|
|
30
30
|
},
|
|
31
|
-
"gitHead": "
|
|
31
|
+
"gitHead": "e2efe454752c7d59964636f86c27cd1c92a41c2e"
|
|
32
32
|
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
.kws-grid-search {
|
|
2
|
+
.is-not-in-use {
|
|
3
|
+
}
|
|
4
|
+
.is-in-use {
|
|
5
|
+
border-color: transparentize($success, 0.5);
|
|
6
|
+
box-shadow: 0 0 3px rgba(0, 0, 0, 0.23) !important;
|
|
7
|
+
z-index: 2;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.clear-search {
|
|
11
|
+
.button {
|
|
12
|
+
.icon {
|
|
13
|
+
margin-right: calc(-0.5em - 1px);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@include mobile {
|
|
20
|
+
.kws-grid-search {
|
|
21
|
+
.field.outer-level-field {
|
|
22
|
+
flex-wrap: wrap;
|
|
23
|
+
.control {
|
|
24
|
+
margin-bottom: 0.5rem;
|
|
25
|
+
}
|
|
26
|
+
.main-search {
|
|
27
|
+
width: 100%;
|
|
28
|
+
.input {
|
|
29
|
+
border-bottom-right-radius: $radius !important;
|
|
30
|
+
border-top-right-radius: $radius !important;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
.search-control {
|
|
34
|
+
max-width: 100% !important;
|
|
35
|
+
width: auto !important;
|
|
36
|
+
flex-grow: 1;
|
|
37
|
+
flex-shrink: 1;
|
|
38
|
+
select {
|
|
39
|
+
width: 100%;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
.field.action-buttons-field {
|
|
44
|
+
width: 100%;
|
|
45
|
+
.clear-search,
|
|
46
|
+
.search-submit {
|
|
47
|
+
.button {
|
|
48
|
+
width: 100%;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
.clear-search {
|
|
52
|
+
.button {
|
|
53
|
+
.icon {
|
|
54
|
+
margin-right: 0.25em;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
package/styles/DataSort.scss
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
margin: 0 !important;
|
|
8
8
|
padding: 0.2rem 0;
|
|
9
9
|
&:first-child {
|
|
10
|
-
padding-left: calc(0.
|
|
10
|
+
padding-left: calc(0.625rem - 1px);
|
|
11
11
|
border-radius: 0 0 0 $radius-large;
|
|
12
12
|
}
|
|
13
13
|
&:last-child {
|
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
.select {
|
|
18
18
|
height: auto;
|
|
19
19
|
select {
|
|
20
|
-
padding-top: 0.
|
|
21
|
-
padding-bottom: 0.
|
|
20
|
+
padding-top: 0.2rem;
|
|
21
|
+
padding-bottom: 0.2rem;
|
|
22
22
|
border: none;
|
|
23
23
|
background: transparent;
|
|
24
24
|
color: $primary;
|
|
@@ -35,3 +35,25 @@
|
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
|
+
|
|
39
|
+
@include mobile {
|
|
40
|
+
.sorting-filters {
|
|
41
|
+
margin-top: 0rem;
|
|
42
|
+
.field {
|
|
43
|
+
justify-content: center;
|
|
44
|
+
}
|
|
45
|
+
.control {
|
|
46
|
+
&:first-child {
|
|
47
|
+
border-radius: $radius-large 0 0 $radius-large;
|
|
48
|
+
}
|
|
49
|
+
&:last-child {
|
|
50
|
+
border-radius: 0 $radius-large $radius-large 0;
|
|
51
|
+
flex-grow: 1;
|
|
52
|
+
flex-shrink: 1;
|
|
53
|
+
.select {
|
|
54
|
+
width: 100%;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
package/styles/Pagination.scss
CHANGED
|
@@ -8,57 +8,90 @@ $kws-pagination-item-disabled-color: $grey !default;
|
|
|
8
8
|
$kws-pagination-item-ellipsis-background: $white-bis !default;
|
|
9
9
|
$kws-pagination-item-ellipsis-border-color: $grey-lighter !default;
|
|
10
10
|
$kws-pagination-item-active-background: $success !default;
|
|
11
|
-
$kws-pagination-item-active-color: findColorInvert(
|
|
11
|
+
$kws-pagination-item-active-color: findColorInvert(
|
|
12
|
+
$kws-pagination-item-active-background
|
|
13
|
+
) !default;
|
|
12
14
|
|
|
13
|
-
$kws-pagination-frame-box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1),
|
|
15
|
+
$kws-pagination-frame-box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1),
|
|
16
|
+
0 0 0 0.0625rem rgba(0, 0, 0, 0.1) !default;
|
|
14
17
|
$kws-pagination-frame-background: linear-gradient(#fff, #fafafa);
|
|
15
18
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
.pagination-
|
|
20
|
-
|
|
19
|
+
.pagination {
|
|
20
|
+
&.is-small {
|
|
21
|
+
.pagination-previous,
|
|
22
|
+
.pagination-next,
|
|
23
|
+
.pagination-link,
|
|
24
|
+
.pagination-ellipsis {
|
|
25
|
+
min-height: 1.8rem;
|
|
21
26
|
}
|
|
22
27
|
}
|
|
23
|
-
.pagination-previous,
|
|
24
|
-
|
|
25
|
-
padding-
|
|
28
|
+
.pagination-previous,
|
|
29
|
+
.pagination-next {
|
|
30
|
+
padding-left: 0;
|
|
31
|
+
padding-right: 0;
|
|
26
32
|
}
|
|
27
|
-
.pagination-previous,
|
|
28
|
-
|
|
33
|
+
.pagination-previous,
|
|
34
|
+
.pagination-next,
|
|
35
|
+
.pagination-link,
|
|
36
|
+
.pagination-ellipsis {
|
|
37
|
+
background: $kws-pagination-item-background;
|
|
29
38
|
color: $kws-pagination-item-color;
|
|
30
39
|
border: $kws-pagination-item-border;
|
|
31
|
-
margin:0;
|
|
32
|
-
border-radius:0;
|
|
33
|
-
min-height:100%;
|
|
34
|
-
margin-left
|
|
35
|
-
&.is-disabled{
|
|
36
|
-
background
|
|
37
|
-
color
|
|
40
|
+
margin: 0;
|
|
41
|
+
border-radius: 0;
|
|
42
|
+
min-height: 100%;
|
|
43
|
+
margin-left: -1px;
|
|
44
|
+
&.is-disabled {
|
|
45
|
+
background: $kws-pagination-item-disabled-background;
|
|
46
|
+
color: $kws-pagination-item-disabled-color;
|
|
38
47
|
}
|
|
39
|
-
&:hover{
|
|
40
|
-
border
|
|
41
|
-
color
|
|
48
|
+
&:hover {
|
|
49
|
+
border: $kws-pagination-item-hover-border;
|
|
50
|
+
color: $kws-pagination-item-hover-color;
|
|
42
51
|
}
|
|
43
52
|
}
|
|
44
|
-
.pagination-ellipsis{
|
|
45
|
-
background
|
|
46
|
-
border-color
|
|
53
|
+
.pagination-ellipsis {
|
|
54
|
+
background: $kws-pagination-item-ellipsis-background;
|
|
55
|
+
border-color: $kws-pagination-item-ellipsis-border-color;
|
|
47
56
|
}
|
|
48
|
-
.pagination-link.is-current{
|
|
49
|
-
text-shadow:none;
|
|
57
|
+
.pagination-link.is-current {
|
|
58
|
+
text-shadow: none;
|
|
50
59
|
color: $kws-pagination-item-active-color;
|
|
51
60
|
background: $kws-pagination-item-active-background;
|
|
52
61
|
border-color: $kws-pagination-item-active-background;
|
|
53
62
|
}
|
|
54
|
-
.pagination-list{
|
|
55
|
-
&.pagination-limit-chooser{
|
|
56
|
-
order:inherit;
|
|
63
|
+
.pagination-list {
|
|
64
|
+
&.pagination-limit-chooser {
|
|
65
|
+
order: inherit;
|
|
57
66
|
}
|
|
58
67
|
}
|
|
59
68
|
}
|
|
60
|
-
.pagination_frame.has-frame{
|
|
61
|
-
padding:0.625rem;
|
|
69
|
+
.pagination_frame.has-frame {
|
|
70
|
+
padding: 0.625rem;
|
|
62
71
|
box-shadow: $kws-pagination-frame-box-shadow;
|
|
63
72
|
background: $kws-pagination-frame-background;
|
|
64
|
-
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@include mobile {
|
|
76
|
+
.pagination_frame {
|
|
77
|
+
.level {
|
|
78
|
+
display: flex;
|
|
79
|
+
flex-wrap: wrap;
|
|
80
|
+
.level-right {
|
|
81
|
+
margin-top: 0.75rem;
|
|
82
|
+
flex-basis: 100%;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
.pagination-showing {
|
|
86
|
+
margin-bottom: 0;
|
|
87
|
+
}
|
|
88
|
+
.pagination {
|
|
89
|
+
.pagination-previous,
|
|
90
|
+
.pagination-next,
|
|
91
|
+
.pagination-link,
|
|
92
|
+
.pagination-ellipsis {
|
|
93
|
+
margin: 0.25rem;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
package/styles/Select.scss
CHANGED
|
@@ -11,6 +11,13 @@ $kws-select-selecting-background: $primary !default;
|
|
|
11
11
|
$kws-select-selected-color: $primary-dark !default;
|
|
12
12
|
$kws-select-selected-background: $primary-light !default;
|
|
13
13
|
|
|
14
|
+
$__modal-z: 41 !default;
|
|
15
|
+
@if $modal-z {
|
|
16
|
+
$__modal-z: $modal-z;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
$kws-select-options-z-index: $__modal-z + 1 !default;
|
|
20
|
+
|
|
14
21
|
.kws-searchableselect {
|
|
15
22
|
position: relative;
|
|
16
23
|
align-items: center;
|
|
@@ -205,5 +212,6 @@ $kws-select-selected-background: $primary-light !default;
|
|
|
205
212
|
#kws-overlay-root {
|
|
206
213
|
.kws-searchableselect {
|
|
207
214
|
position: absolute;
|
|
215
|
+
z-index: $kws-select-options-z-index;
|
|
208
216
|
}
|
|
209
217
|
}
|