@everchron/ec-shards 2.2.4 → 3.0.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/dist/ec-shards.common.js +937 -846
- package/dist/ec-shards.common.js.map +1 -1
- package/dist/ec-shards.css +1 -1
- package/dist/ec-shards.umd.js +937 -846
- package/dist/ec-shards.umd.js.map +1 -1
- package/dist/ec-shards.umd.min.js +2 -2
- package/dist/ec-shards.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/icons/chevron-double-left.svg +4 -0
- package/src/assets/icons/chevron-double-right.svg +4 -0
- package/src/assets/icons/chevron-left.svg +3 -0
- package/src/assets/icons/chevron-right.svg +3 -0
- package/src/components/form-headline/form-headline.vue +1 -1
- package/src/components/pagination/pagination.vue +72 -144
- package/src/components/text/text.vue +3 -1
- package/src/stories/Changelog.stories.mdx +18 -0
package/package.json
CHANGED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M13.375 19.3334L9.04167 15.0001L13.375 10.6667" vector-effect="non-scaling-stroke" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M20.9584 20.4166L15.5417 14.9999L20.9584 9.58325" vector-effect="non-scaling-stroke" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M16.625 19.3334L20.9583 15.0001L16.625 10.6667" vector-effect="non-scaling-stroke" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M9.04163 20.4166L14.4583 14.9999L9.04163 9.58325" vector-effect="non-scaling-stroke" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
</svg>
|
|
@@ -1,66 +1,52 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="ecs-pagination" :class="[ floating ? 'ecs-pagination-floating' : '' ]">
|
|
3
|
-
<
|
|
4
|
-
<ecs-
|
|
5
|
-
<ecs-button-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
data-test="pagination-previous-button">
|
|
10
|
-
Previous Page
|
|
11
|
-
</ecs-button-toolbar>
|
|
12
|
-
<ecs-button-toolbar
|
|
13
|
-
@click="$emit('nextPage', $event)"
|
|
14
|
-
:disabled="loading || currentPage === totalPages"
|
|
15
|
-
icon="next"
|
|
16
|
-
icon-position="right"
|
|
17
|
-
data-test="pagination-next-button">
|
|
18
|
-
Next Page
|
|
19
|
-
</ecs-button-toolbar>
|
|
20
|
-
</ecs-button-toolbar-group>
|
|
21
|
-
|
|
22
|
-
<div class="ecs-pagination-dropdown">
|
|
3
|
+
<ecs-flex-row :gap="8" class="ecs-pagination-nav" :style="{minWidth: tabsSpacing}">
|
|
4
|
+
<ecs-flex-row>
|
|
5
|
+
<ecs-button @click="$emit('firstPage', $event)" :disabled="loading || currentPage === 1" icon="chevron-double-left" icon-only type="secondary" title="First Page" data-test="pagination-first-button" />
|
|
6
|
+
<ecs-button @click="$emit('prevPage', $event)" :disabled="loading || currentPage === 1" icon="chevron-left" icon-only type="secondary" title="Previous Page" data-test="pagination-previous-button" />
|
|
7
|
+
</ecs-flex-row>
|
|
8
|
+
<ecs-flex-row :gap="4">
|
|
23
9
|
<span>Page</span>
|
|
24
|
-
<
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
<transition name="dropdown">
|
|
29
|
-
<div v-if="dropdownShown && totalPages" class="ecs-pagination-select scrollbar scrollbar-sml">
|
|
30
|
-
<ecs-popover-list>
|
|
31
|
-
<ecs-popover-list-item
|
|
32
|
-
@click="$emit('update:page', n), hideDropdown"
|
|
33
|
-
v-for="n in totalPages"
|
|
34
|
-
:key="n"
|
|
35
|
-
:selected="n === currentPage">
|
|
36
|
-
{{ n }}
|
|
37
|
-
</ecs-popover-list-item>
|
|
38
|
-
</ecs-popover-list>
|
|
39
|
-
</div>
|
|
40
|
-
</transition>
|
|
41
|
-
</div>
|
|
10
|
+
<ecs-select @change="$emit('update:page', $event.target.value)" :disabled="!totalPages" size="sml">
|
|
11
|
+
<option v-for="n in totalPages" :key="n" :value="n" :selected="n === currentPage">{{ n }}</option>
|
|
12
|
+
</ecs-select>
|
|
42
13
|
<span v-if="totalPages" class="total">of {{ totalPages }}</span>
|
|
43
|
-
</
|
|
44
|
-
|
|
45
|
-
|
|
14
|
+
</ecs-flex-row>
|
|
15
|
+
<ecs-flex-row>
|
|
16
|
+
<ecs-button @click="$emit('nextPage', $event)" :disabled="loading || currentPage === totalPages" icon="chevron-right" icon-only type="secondary" title="Next Page" data-test="pagination-next-button" />
|
|
17
|
+
<ecs-button @click="$emit('lastPage', $event)" :disabled="loading || currentPage === totalPages" icon="chevron-double-right" icon-only type="secondary" title="Last Page" data-test="pagination-last-button" />
|
|
18
|
+
</ecs-flex-row>
|
|
19
|
+
</ecs-flex-row>
|
|
20
|
+
|
|
21
|
+
<div class="ecs-pagination-tabs">
|
|
46
22
|
<!-- @slot Slot for a sheet tab bar. -->
|
|
47
23
|
<slot name="tabs"></slot>
|
|
48
24
|
</div>
|
|
25
|
+
|
|
26
|
+
<ecs-flex-row v-if="showItemsPerPage" :gap="4" class="ecs-pagination-items">
|
|
27
|
+
<span>Items per page</span>
|
|
28
|
+
<ecs-select @change="$emit('itemsPerPage', $event.target.value)" :disabled="loading" size="sml">
|
|
29
|
+
<option v-for="n in itemsPerPage" :key="n" :value="n" :selected="n === itemsPerPageSelected">{{ n }}</option>
|
|
30
|
+
</ecs-select>
|
|
31
|
+
</ecs-flex-row>
|
|
32
|
+
|
|
33
|
+
<ecs-flex-row v-if="$slots.controls" :gap="4" class="ecs-pagination-controls">
|
|
34
|
+
<!-- @slot Slot for a additional controls, such as a settings button. -->
|
|
35
|
+
<slot name="controls"></slot>
|
|
36
|
+
</ecs-flex-row>
|
|
49
37
|
</div>
|
|
50
38
|
</template>
|
|
51
39
|
|
|
52
40
|
<script>
|
|
53
|
-
import
|
|
54
|
-
import
|
|
55
|
-
import
|
|
56
|
-
import EcsPopoverListItem from '../popover-list-item/popover-list-item'
|
|
41
|
+
import EcsButton from '../button/button'
|
|
42
|
+
import EcsSelect from '../select/select'
|
|
43
|
+
import EcsFlexRow from '../flex/flex-row'
|
|
57
44
|
|
|
58
45
|
export default {
|
|
59
46
|
components: {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
EcsPopoverListItem
|
|
47
|
+
EcsButton,
|
|
48
|
+
EcsSelect,
|
|
49
|
+
EcsFlexRow
|
|
64
50
|
},
|
|
65
51
|
|
|
66
52
|
props: {
|
|
@@ -81,23 +67,28 @@
|
|
|
81
67
|
/** The total pages of the index. */
|
|
82
68
|
totalPages: {
|
|
83
69
|
type: Number,
|
|
84
|
-
}
|
|
85
|
-
},
|
|
86
|
-
|
|
87
|
-
data() {
|
|
88
|
-
return {
|
|
89
|
-
dropdownShown: false
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
|
-
|
|
93
|
-
methods: {
|
|
94
|
-
toggleDropdown(){
|
|
95
|
-
if(this.totalPages)
|
|
96
|
-
this.dropdownShown = !this.dropdownShown
|
|
97
70
|
},
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
71
|
+
/** The width of the area left to the tab area in pixels or percentage. This is used to align the tab bar with a column in the table. Not needed when tabs aren't in use. */
|
|
72
|
+
tabsSpacing: {
|
|
73
|
+
type: String,
|
|
74
|
+
default: '400px'
|
|
75
|
+
},
|
|
76
|
+
/** Determines if the selector for items per page should be shown. */
|
|
77
|
+
showItemsPerPage: {
|
|
78
|
+
type: Boolean,
|
|
79
|
+
default: true
|
|
80
|
+
},
|
|
81
|
+
/** The options to be show as selectable in the items per page dropdown. Requires an array with Numbers. Default: `[25, 50, 100]` */
|
|
82
|
+
itemsPerPage: {
|
|
83
|
+
type: Array,
|
|
84
|
+
default() {
|
|
85
|
+
return [25, 50, 100]
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
/** The selected option in the items per page dropdown. */
|
|
89
|
+
itemsPerPageSelected: {
|
|
90
|
+
type: Number,
|
|
91
|
+
default: 100
|
|
101
92
|
}
|
|
102
93
|
}
|
|
103
94
|
}
|
|
@@ -116,6 +107,9 @@
|
|
|
116
107
|
box-shadow: 0 -1px 0 $color-gray-4;
|
|
117
108
|
position: relative;
|
|
118
109
|
z-index: 2;
|
|
110
|
+
font-size: $type-scale-2-font-size;
|
|
111
|
+
line-height: $type-scale-2-line-height;
|
|
112
|
+
color: $color-gray-15;
|
|
119
113
|
|
|
120
114
|
&-floating{
|
|
121
115
|
border-radius: $border-radius-small;
|
|
@@ -123,94 +117,28 @@
|
|
|
123
117
|
}
|
|
124
118
|
|
|
125
119
|
&-nav{
|
|
126
|
-
display: flex;
|
|
127
|
-
align-items: center;
|
|
128
120
|
height: 40px;
|
|
129
|
-
margin-right:
|
|
130
|
-
}
|
|
121
|
+
margin-right: -$spacing-5;
|
|
131
122
|
|
|
132
|
-
|
|
133
|
-
|
|
123
|
+
.ecs-form-select{
|
|
124
|
+
width: 52px;
|
|
125
|
+
}
|
|
134
126
|
}
|
|
135
127
|
|
|
136
|
-
|
|
137
|
-
|
|
128
|
+
&-tabs{
|
|
129
|
+
flex: 1;
|
|
138
130
|
}
|
|
139
131
|
|
|
140
|
-
&-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
.total{
|
|
147
|
-
color: $color-gray-15;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
&-button{
|
|
151
|
-
background: #FFF;
|
|
152
|
-
display: flex;
|
|
153
|
-
align-items: center;
|
|
154
|
-
border: 1px solid $color-gray-3;
|
|
155
|
-
padding: 0 8px;
|
|
156
|
-
height: 32px;
|
|
157
|
-
transition: .2s;
|
|
158
|
-
border-radius: $border-radius-small;
|
|
159
|
-
margin: 0 6px;
|
|
160
|
-
cursor: pointer;
|
|
161
|
-
position: relative;
|
|
162
|
-
color: $color-gray-15;
|
|
163
|
-
|
|
164
|
-
&:after{
|
|
165
|
-
content: "";
|
|
166
|
-
background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5"><polyline fill="none" stroke="#858E9E" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" points="0 0 3 3 6 0" transform="translate(1 .8)"/></svg>');
|
|
167
|
-
width: 8px;
|
|
168
|
-
height: 5px;
|
|
169
|
-
margin-left: 6px;
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
&:hover{
|
|
173
|
-
border: 1px solid $color-gray-4;
|
|
174
|
-
box-shadow: 0 1px 1px rgba($color-gray-4, .25);
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
&.active{
|
|
178
|
-
border: 1px solid $color-gray-5;
|
|
179
|
-
box-shadow: 0 1px 0 rgba($color-gray-2, .1) inset;
|
|
180
|
-
background: rgba($color-gray-5, .1);
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
&.disabled{
|
|
184
|
-
border: 1px solid $color-gray-3;
|
|
185
|
-
box-shadow: none;
|
|
186
|
-
cursor: not-allowed;
|
|
187
|
-
color: $color-gray-7;
|
|
188
|
-
}
|
|
132
|
+
&-items{
|
|
133
|
+
padding-right: $spacing-5;
|
|
134
|
+
|
|
135
|
+
.ecs-form-select{
|
|
136
|
+
width: 52px;
|
|
189
137
|
}
|
|
190
138
|
}
|
|
191
139
|
|
|
192
|
-
&-
|
|
193
|
-
|
|
194
|
-
left: 0;
|
|
195
|
-
right: auto;
|
|
196
|
-
bottom: 34px;
|
|
197
|
-
z-index: 1000;
|
|
198
|
-
background-color: #fff;
|
|
199
|
-
box-shadow: 0 0 0 1px rgba($color-gray-15, .08), 0 1px 3px 0 rgba($color-gray-15, 0.15);
|
|
200
|
-
border-radius: $border-radius-small;
|
|
201
|
-
max-height: 30vh;
|
|
202
|
-
overflow: auto;
|
|
140
|
+
&-controls{
|
|
141
|
+
margin-left: $spacing-10;
|
|
203
142
|
}
|
|
204
143
|
}
|
|
205
|
-
|
|
206
|
-
.dropdown-enter-active,
|
|
207
|
-
.dropdown-leave-active {
|
|
208
|
-
transition: all .3s;
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
.dropdown-enter,
|
|
212
|
-
.dropdown-leave-to {
|
|
213
|
-
opacity: 0;
|
|
214
|
-
transform: translateY(10px);
|
|
215
|
-
}
|
|
216
144
|
</style>
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
type: Boolean,
|
|
25
25
|
default: false
|
|
26
26
|
},
|
|
27
|
-
/** Allows to overwrite the text color. Accepts predefined theme names: `positive`, `negative`, as well as any color HEX or variable. */
|
|
27
|
+
/** Allows to overwrite the text color. Accepts predefined theme names: `positive`, `negative`, `warning`, as well as any color HEX or variable. */
|
|
28
28
|
color: {
|
|
29
29
|
type: String
|
|
30
30
|
}
|
|
@@ -68,6 +68,8 @@
|
|
|
68
68
|
return '#ED223C'
|
|
69
69
|
else if (this.color == 'positive')
|
|
70
70
|
return '#019049'
|
|
71
|
+
else if (this.color == 'warning')
|
|
72
|
+
return '#835D2A'
|
|
71
73
|
else
|
|
72
74
|
return this.color
|
|
73
75
|
}
|
|
@@ -6,6 +6,24 @@ import { Meta } from '@storybook/addon-docs/blocks';
|
|
|
6
6
|
Changelog
|
|
7
7
|
</h1>
|
|
8
8
|
|
|
9
|
+
## Version 3.0.0 (21 November 2022)
|
|
10
|
+
|
|
11
|
+
### Breaking Changes
|
|
12
|
+
|
|
13
|
+
- Refactored EcsPagination component
|
|
14
|
+
- New First/Last page buttons
|
|
15
|
+
- Added optional controls slot
|
|
16
|
+
- Added optional "items per page" dropdown
|
|
17
|
+
|
|
18
|
+
### Features
|
|
19
|
+
|
|
20
|
+
- Added 4 new chevron type icons
|
|
21
|
+
|
|
22
|
+
### Fixes
|
|
23
|
+
|
|
24
|
+
- Added `warning` type to EcsText component
|
|
25
|
+
- Fixed some spacings on EcsFormHeadline
|
|
26
|
+
|
|
9
27
|
## Version 2.2.4 (8 November 2022)
|
|
10
28
|
|
|
11
29
|
### Fixes
|