@everchron/ec-shards 0.6.105 → 0.7.2
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 +112 -109
- package/dist/ec-shards.common.js.map +1 -1
- package/dist/ec-shards.css +1 -1
- package/dist/ec-shards.umd.js +112 -109
- 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/components/file-list-item/file-list-item.vue +9 -11
- package/src/components/form-check/form-check.vue +2 -0
- package/src/components/icon/icon.vue +4 -0
- package/src/components/layout-index/layout-index.vue +1 -0
- package/src/stories/file-list-item/file-list-item.stories.js +100 -18
- package/src/stories/file-list-item/file-list-item.stories.mdx +100 -18
- package/src/stories/icon/icon.stories.js +1 -1
package/package.json
CHANGED
|
@@ -18,7 +18,10 @@
|
|
|
18
18
|
</div>
|
|
19
19
|
|
|
20
20
|
<div class="ecs-file-list-controls">
|
|
21
|
-
<
|
|
21
|
+
<div v-if="$slots.meta" class="ecs-file-list-meta">
|
|
22
|
+
<slot name="meta"></slot>
|
|
23
|
+
</div>
|
|
24
|
+
<slot name="controls"></slot>
|
|
22
25
|
<ecs-icon v-if="error" type="warning" color="#ff3750" class="ml-2" />
|
|
23
26
|
<button class="ecs-file-list-button expand"
|
|
24
27
|
v-if="$slots.collapse"
|
|
@@ -58,10 +61,6 @@
|
|
|
58
61
|
components: { EcsIcon, EcsFileIcon, EcsSticker, EcsButtonTable },
|
|
59
62
|
|
|
60
63
|
props: {
|
|
61
|
-
date: {
|
|
62
|
-
type: String,
|
|
63
|
-
default: null
|
|
64
|
-
},
|
|
65
64
|
remove: {
|
|
66
65
|
type: Boolean,
|
|
67
66
|
default: false
|
|
@@ -230,12 +229,6 @@
|
|
|
230
229
|
left: 16px;
|
|
231
230
|
}
|
|
232
231
|
|
|
233
|
-
.semi{
|
|
234
|
-
color: $gray-8;
|
|
235
|
-
font-size: 12px;
|
|
236
|
-
padding-left: 10px;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
232
|
.loading{
|
|
240
233
|
position: absolute;
|
|
241
234
|
height: 45px;
|
|
@@ -267,6 +260,11 @@
|
|
|
267
260
|
align-items: center;
|
|
268
261
|
}
|
|
269
262
|
|
|
263
|
+
&-meta{
|
|
264
|
+
color: $gray-8;
|
|
265
|
+
font-size: 12px;
|
|
266
|
+
}
|
|
267
|
+
|
|
270
268
|
.remove{
|
|
271
269
|
margin-left: 20px;
|
|
272
270
|
}
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
:height="height"
|
|
7
7
|
:color="color"
|
|
8
8
|
role="presentation">
|
|
9
|
+
<title v-if="title">{{ title }}</title>
|
|
9
10
|
<use v-bind:xlink:href="href"></use>
|
|
10
11
|
</svg>
|
|
11
12
|
</template>
|
|
@@ -33,6 +34,9 @@
|
|
|
33
34
|
spinning: {
|
|
34
35
|
type: Boolean,
|
|
35
36
|
default: false
|
|
37
|
+
},
|
|
38
|
+
title: {
|
|
39
|
+
type: String
|
|
36
40
|
}
|
|
37
41
|
},
|
|
38
42
|
computed: {
|
|
@@ -10,12 +10,32 @@ export const types = () => ({
|
|
|
10
10
|
components: { EcsFileList, EcsFileListItem },
|
|
11
11
|
template: `<div>
|
|
12
12
|
<ecs-file-list>
|
|
13
|
-
<ecs-file-list-item hover
|
|
14
|
-
|
|
13
|
+
<ecs-file-list-item hover>
|
|
14
|
+
file-list-item.xls
|
|
15
|
+
<template slot="meta">
|
|
16
|
+
<span>08/08/2020</span>
|
|
17
|
+
</template>
|
|
18
|
+
</ecs-file-list-item>
|
|
19
|
+
<ecs-file-list-item>
|
|
20
|
+
file-list-item.doc
|
|
21
|
+
<template slot="meta">
|
|
22
|
+
<span>08/08/2020</span>
|
|
23
|
+
</template>
|
|
24
|
+
</ecs-file-list-item>
|
|
15
25
|
</ecs-file-list>
|
|
16
26
|
<ecs-file-list>
|
|
17
|
-
<ecs-file-list-item
|
|
18
|
-
|
|
27
|
+
<ecs-file-list-item above hover>
|
|
28
|
+
file-list-item.xls
|
|
29
|
+
<template slot="meta">
|
|
30
|
+
<span>08/08/2020</span>
|
|
31
|
+
</template>
|
|
32
|
+
</ecs-file-list-item>
|
|
33
|
+
<ecs-file-list-item above>
|
|
34
|
+
file-list-item.doc
|
|
35
|
+
<template slot="meta">
|
|
36
|
+
<span>08/08/2020</span>
|
|
37
|
+
</template>
|
|
38
|
+
</ecs-file-list-item>
|
|
19
39
|
</ecs-file-list>
|
|
20
40
|
</div>`,
|
|
21
41
|
});
|
|
@@ -24,8 +44,18 @@ export const withIcon = () => ({
|
|
|
24
44
|
components: { EcsFileList, EcsFileListItem },
|
|
25
45
|
template: `<div>
|
|
26
46
|
<ecs-file-list>
|
|
27
|
-
<ecs-file-list-item
|
|
28
|
-
|
|
47
|
+
<ecs-file-list-item above icon="link" icon-color="#00A048" sticker="success">
|
|
48
|
+
file-list-item.xls
|
|
49
|
+
<template slot="meta">
|
|
50
|
+
<span>08/08/2020</span>
|
|
51
|
+
</template>
|
|
52
|
+
</ecs-file-list-item>
|
|
53
|
+
<ecs-file-list-item above icon="link" icon-color="#2A5699">
|
|
54
|
+
file-list-item.doc
|
|
55
|
+
<template slot="meta">
|
|
56
|
+
<span>08/08/2020</span>
|
|
57
|
+
</template>
|
|
58
|
+
</ecs-file-list-item>
|
|
29
59
|
</ecs-file-list>
|
|
30
60
|
</div>`,
|
|
31
61
|
});
|
|
@@ -34,8 +64,18 @@ export const withFileIcon = () => ({
|
|
|
34
64
|
components: { EcsFileList, EcsFileListItem },
|
|
35
65
|
template: `<div>
|
|
36
66
|
<ecs-file-list>
|
|
37
|
-
<ecs-file-list-item
|
|
38
|
-
|
|
67
|
+
<ecs-file-list-item above file-icon="pdf" sticker="success">
|
|
68
|
+
file-list-item.pdf
|
|
69
|
+
<template slot="meta">
|
|
70
|
+
<span>08/08/2020</span>
|
|
71
|
+
</template>
|
|
72
|
+
</ecs-file-list-item>
|
|
73
|
+
<ecs-file-list-item above file-icon="docx">
|
|
74
|
+
file-list-item.doc
|
|
75
|
+
<template slot="meta">
|
|
76
|
+
<span>08/08/2020</span>
|
|
77
|
+
</template>
|
|
78
|
+
</ecs-file-list-item>
|
|
39
79
|
</ecs-file-list>
|
|
40
80
|
</div>`,
|
|
41
81
|
});
|
|
@@ -44,8 +84,18 @@ export const withRemove = () => ({
|
|
|
44
84
|
components: { EcsFileList, EcsFileListItem },
|
|
45
85
|
template: `<div>
|
|
46
86
|
<ecs-file-list>
|
|
47
|
-
<ecs-file-list-item
|
|
48
|
-
|
|
87
|
+
<ecs-file-list-item remove>
|
|
88
|
+
file-list-item.xls
|
|
89
|
+
<template slot="meta">
|
|
90
|
+
<span>08/08/2020</span>
|
|
91
|
+
</template>
|
|
92
|
+
</ecs-file-list-item>
|
|
93
|
+
<ecs-file-list-item remove>
|
|
94
|
+
file-list-item.doc
|
|
95
|
+
<template slot="meta">
|
|
96
|
+
<span>08/08/2020</span>
|
|
97
|
+
</template>
|
|
98
|
+
</ecs-file-list-item>
|
|
49
99
|
</ecs-file-list>
|
|
50
100
|
</div>`,
|
|
51
101
|
});
|
|
@@ -54,8 +104,18 @@ export const withProgress = () => ({
|
|
|
54
104
|
components: { EcsFileList, EcsFileListItem },
|
|
55
105
|
template: `<div>
|
|
56
106
|
<ecs-file-list>
|
|
57
|
-
<ecs-file-list-item
|
|
58
|
-
|
|
107
|
+
<ecs-file-list-item :progress="90">
|
|
108
|
+
file-list-item.xls
|
|
109
|
+
<template slot="meta">
|
|
110
|
+
<span>08/08/2020</span>
|
|
111
|
+
</template>
|
|
112
|
+
</ecs-file-list-item>
|
|
113
|
+
<ecs-file-list-item :progress="33">
|
|
114
|
+
file-list-item.doc
|
|
115
|
+
<template slot="meta">
|
|
116
|
+
<span>08/08/2020</span>
|
|
117
|
+
</template>
|
|
118
|
+
</ecs-file-list-item>
|
|
59
119
|
</ecs-file-list>
|
|
60
120
|
</div>`,
|
|
61
121
|
});
|
|
@@ -63,14 +123,20 @@ export const withProgress = () => ({
|
|
|
63
123
|
export const withCollapse = () => ({
|
|
64
124
|
components: { EcsFileList, EcsFileListItem },
|
|
65
125
|
template: `<ecs-file-list>
|
|
66
|
-
<ecs-file-list-item
|
|
126
|
+
<ecs-file-list-item>
|
|
67
127
|
file-list-item.xls
|
|
128
|
+
<template slot="meta">
|
|
129
|
+
<span>08/08/2020</span>
|
|
130
|
+
</template>
|
|
68
131
|
<template slot="collapse">
|
|
69
132
|
Collapse Content
|
|
70
133
|
</template>
|
|
71
134
|
</ecs-file-list-item>
|
|
72
|
-
<ecs-file-list-item
|
|
135
|
+
<ecs-file-list-item>
|
|
73
136
|
file-list-item.doc
|
|
137
|
+
<template slot="meta">
|
|
138
|
+
<span>08/08/2020</span>
|
|
139
|
+
</template>
|
|
74
140
|
<template slot="collapse">
|
|
75
141
|
Collapse Content
|
|
76
142
|
</template>
|
|
@@ -86,14 +152,20 @@ export const withEdit = () => ({
|
|
|
86
152
|
}
|
|
87
153
|
},
|
|
88
154
|
template: `<ecs-file-list>
|
|
89
|
-
<ecs-file-list-item @title-click="editing = !editing" :edit="editing" remove
|
|
155
|
+
<ecs-file-list-item @title-click="editing = !editing" :edit="editing" remove>
|
|
90
156
|
file-list-item.xls
|
|
157
|
+
<template slot="meta">
|
|
158
|
+
<span>08/08/2020</span>
|
|
159
|
+
</template>
|
|
91
160
|
<template slot="edit">
|
|
92
161
|
Edit Content <a @click="editing = !editing">Close</a>
|
|
93
162
|
</template>
|
|
94
163
|
</ecs-file-list-item>
|
|
95
|
-
<ecs-file-list-item @title-click="editing = !editing" :edit="editing" remove show-title-edit
|
|
164
|
+
<ecs-file-list-item @title-click="editing = !editing" :edit="editing" remove show-title-edit>
|
|
96
165
|
file-list-item.doc
|
|
166
|
+
<template slot="meta">
|
|
167
|
+
<span>08/08/2020</span>
|
|
168
|
+
</template>
|
|
97
169
|
<template slot="edit">
|
|
98
170
|
Edit Content <a @click="editing = !editing">Close</a>
|
|
99
171
|
</template>
|
|
@@ -105,8 +177,18 @@ export const errorMessage = () => ({
|
|
|
105
177
|
components: { EcsFileList, EcsFileListItem },
|
|
106
178
|
template: `<div>
|
|
107
179
|
<ecs-file-list>
|
|
108
|
-
<ecs-file-list-item
|
|
109
|
-
|
|
180
|
+
<ecs-file-list-item file-icon="pdf" error="Upload of file failed, please try again.">
|
|
181
|
+
file-list-item.pdf
|
|
182
|
+
<template slot="meta">
|
|
183
|
+
<span>08/08/2020</span>
|
|
184
|
+
</template>
|
|
185
|
+
</ecs-file-list-item>
|
|
186
|
+
<ecs-file-list-item file-icon="docx">
|
|
187
|
+
file-list-item.doc
|
|
188
|
+
<template slot="meta">
|
|
189
|
+
<span>08/08/2020</span>
|
|
190
|
+
</template>
|
|
191
|
+
</ecs-file-list-item>
|
|
110
192
|
</ecs-file-list>
|
|
111
193
|
</div>`,
|
|
112
194
|
});
|
|
@@ -22,12 +22,32 @@ There are two variants available, default and `above` (elevated style to be used
|
|
|
22
22
|
|
|
23
23
|
```js
|
|
24
24
|
<ecs-file-list>
|
|
25
|
-
<ecs-file-list-item hover
|
|
26
|
-
|
|
25
|
+
<ecs-file-list-item hover>
|
|
26
|
+
file-list-item.xls
|
|
27
|
+
<template slot="meta">
|
|
28
|
+
<span>08/08/2020</span>
|
|
29
|
+
</template>
|
|
30
|
+
</ecs-file-list-item>
|
|
31
|
+
<ecs-file-list-item>
|
|
32
|
+
file-list-item.doc
|
|
33
|
+
<template slot="meta">
|
|
34
|
+
<span>08/08/2020</span>
|
|
35
|
+
</template>
|
|
36
|
+
</ecs-file-list-item>
|
|
27
37
|
</ecs-file-list>
|
|
28
38
|
<ecs-file-list>
|
|
29
|
-
<ecs-file-list-item
|
|
30
|
-
|
|
39
|
+
<ecs-file-list-item above hover>
|
|
40
|
+
file-list-item.xls
|
|
41
|
+
<template slot="meta">
|
|
42
|
+
<span>08/08/2020</span>
|
|
43
|
+
</template>
|
|
44
|
+
</ecs-file-list-item>
|
|
45
|
+
<ecs-file-list-item above>
|
|
46
|
+
file-list-item.doc
|
|
47
|
+
<template slot="meta">
|
|
48
|
+
<span>08/08/2020</span>
|
|
49
|
+
</template>
|
|
50
|
+
</ecs-file-list-item>
|
|
31
51
|
</ecs-file-list>
|
|
32
52
|
```
|
|
33
53
|
|
|
@@ -43,8 +63,18 @@ File list items can have a file icon, to represent the file type. Use the `file-
|
|
|
43
63
|
|
|
44
64
|
```js
|
|
45
65
|
<ecs-file-list>
|
|
46
|
-
<ecs-file-list-item
|
|
47
|
-
|
|
66
|
+
<ecs-file-list-item above file-icon="pdf" sticker="success">
|
|
67
|
+
file-list-item.pdf
|
|
68
|
+
<template slot="meta">
|
|
69
|
+
<span>08/08/2020</span>
|
|
70
|
+
</template>
|
|
71
|
+
</ecs-file-list-item>
|
|
72
|
+
<ecs-file-list-item above file-icon="docx">
|
|
73
|
+
file-list-item.doc
|
|
74
|
+
<template slot="meta">
|
|
75
|
+
<span>08/08/2020</span>
|
|
76
|
+
</template>
|
|
77
|
+
</ecs-file-list-item>
|
|
48
78
|
</ecs-file-list>
|
|
49
79
|
```
|
|
50
80
|
|
|
@@ -60,8 +90,18 @@ File list items can have a regular icon. Use the `icon` attribute to set the ico
|
|
|
60
90
|
|
|
61
91
|
```js
|
|
62
92
|
<ecs-file-list>
|
|
63
|
-
<ecs-file-list-item
|
|
64
|
-
|
|
93
|
+
<ecs-file-list-item above icon="link" icon-color="#00A048" sticker="success">
|
|
94
|
+
file-list-item.xls
|
|
95
|
+
<template slot="meta">
|
|
96
|
+
<span>08/08/2020</span>
|
|
97
|
+
</template>
|
|
98
|
+
</ecs-file-list-item>
|
|
99
|
+
<ecs-file-list-item above icon="link" icon-color="#2A5699">
|
|
100
|
+
file-list-item.doc
|
|
101
|
+
<template slot="meta">
|
|
102
|
+
<span>08/08/2020</span>
|
|
103
|
+
</template>
|
|
104
|
+
</ecs-file-list-item>
|
|
65
105
|
</ecs-file-list>
|
|
66
106
|
```
|
|
67
107
|
|
|
@@ -77,8 +117,18 @@ To remove items from the list, or abort an ongoing upload, the `remove` attribut
|
|
|
77
117
|
|
|
78
118
|
```js
|
|
79
119
|
<ecs-file-list>
|
|
80
|
-
<ecs-file-list-item
|
|
81
|
-
|
|
120
|
+
<ecs-file-list-item remove>
|
|
121
|
+
file-list-item.xls
|
|
122
|
+
<template slot="meta">
|
|
123
|
+
<span>08/08/2020</span>
|
|
124
|
+
</template>
|
|
125
|
+
</ecs-file-list-item>
|
|
126
|
+
<ecs-file-list-item remove>
|
|
127
|
+
file-list-item.doc
|
|
128
|
+
<template slot="meta">
|
|
129
|
+
<span>08/08/2020</span>
|
|
130
|
+
</template>
|
|
131
|
+
</ecs-file-list-item>
|
|
82
132
|
</ecs-file-list>
|
|
83
133
|
```
|
|
84
134
|
|
|
@@ -94,8 +144,18 @@ A progress bar can be added to file list items to communicate the current upload
|
|
|
94
144
|
|
|
95
145
|
```js
|
|
96
146
|
<ecs-file-list>
|
|
97
|
-
<ecs-file-list-item
|
|
98
|
-
|
|
147
|
+
<ecs-file-list-item :progress="90">
|
|
148
|
+
file-list-item.xls
|
|
149
|
+
<template slot="meta">
|
|
150
|
+
<span>08/08/2020</span>
|
|
151
|
+
</template>
|
|
152
|
+
</ecs-file-list-item>
|
|
153
|
+
<ecs-file-list-item :progress="33">
|
|
154
|
+
file-list-item.doc
|
|
155
|
+
<template slot="meta">
|
|
156
|
+
<span>08/08/2020</span>
|
|
157
|
+
</template>
|
|
158
|
+
</ecs-file-list-item>
|
|
99
159
|
</ecs-file-list>
|
|
100
160
|
```
|
|
101
161
|
|
|
@@ -111,14 +171,20 @@ If you need to display additional information alongside the filename, date, prog
|
|
|
111
171
|
|
|
112
172
|
```js
|
|
113
173
|
<ecs-file-list>
|
|
114
|
-
<ecs-file-list-item
|
|
174
|
+
<ecs-file-list-item>
|
|
115
175
|
file-list-item.xls
|
|
176
|
+
<template slot="meta">
|
|
177
|
+
<span>08/08/2020</span>
|
|
178
|
+
</template>
|
|
116
179
|
<template slot="collapse">
|
|
117
180
|
Collapse Content
|
|
118
181
|
</template>
|
|
119
182
|
</ecs-file-list-item>
|
|
120
|
-
<ecs-file-list-item
|
|
183
|
+
<ecs-file-list-item>
|
|
121
184
|
file-list-item.doc
|
|
185
|
+
<template slot="meta">
|
|
186
|
+
<span>08/08/2020</span>
|
|
187
|
+
</template>
|
|
122
188
|
<template slot="collapse">
|
|
123
189
|
Collapse Content
|
|
124
190
|
</template>
|
|
@@ -138,14 +204,20 @@ If the content of a file list entry should be editable, there is the `edit` prop
|
|
|
138
204
|
|
|
139
205
|
```js
|
|
140
206
|
<ecs-file-list>
|
|
141
|
-
<ecs-file-list-item @title-click="editing = !editing" :edit="editing" remove
|
|
207
|
+
<ecs-file-list-item @title-click="editing = !editing" :edit="editing" remove>
|
|
142
208
|
file-list-item.xls
|
|
209
|
+
<template slot="meta">
|
|
210
|
+
<span>08/08/2020</span>
|
|
211
|
+
</template>
|
|
143
212
|
<template slot="edit">
|
|
144
213
|
Edit Content <a @click="editing = !editing">Close</a>
|
|
145
214
|
</template>
|
|
146
215
|
</ecs-file-list-item>
|
|
147
|
-
<ecs-file-list-item @title-click="editing = !editing" :edit="editing" remove show-title-edit
|
|
216
|
+
<ecs-file-list-item @title-click="editing = !editing" :edit="editing" remove show-title-edit>
|
|
148
217
|
file-list-item.doc
|
|
218
|
+
<template slot="meta">
|
|
219
|
+
<span>08/08/2020</span>
|
|
220
|
+
</template>
|
|
149
221
|
<template slot="edit">
|
|
150
222
|
Edit Content <a @click="editing = !editing">Close</a>
|
|
151
223
|
</template>
|
|
@@ -165,8 +237,18 @@ Show an error message by providing a message in the `error` attribute.
|
|
|
165
237
|
|
|
166
238
|
```js
|
|
167
239
|
<ecs-file-list>
|
|
168
|
-
<ecs-file-list-item
|
|
169
|
-
|
|
240
|
+
<ecs-file-list-item file-icon="pdf" error="Upload of file failed, please try again.">
|
|
241
|
+
file-list-item.pdf
|
|
242
|
+
<template slot="meta">
|
|
243
|
+
<span>08/08/2020</span>
|
|
244
|
+
</template>
|
|
245
|
+
</ecs-file-list-item>
|
|
246
|
+
<ecs-file-list-item file-icon="docx">
|
|
247
|
+
file-list-item.doc
|
|
248
|
+
<template slot="meta">
|
|
249
|
+
<span>08/08/2020</span>
|
|
250
|
+
</template>
|
|
251
|
+
</ecs-file-list-item>
|
|
170
252
|
</ecs-file-list>
|
|
171
253
|
```
|
|
172
254
|
|