@kws3/ui 1.5.9 → 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.
|
@@ -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
|
|
|
@@ -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
|
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
|
+
}
|