@everchron/ec-shards 7.1.0 → 7.2.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 +108 -86
- package/dist/ec-shards.common.js.map +1 -1
- package/dist/ec-shards.css +1 -1
- package/dist/ec-shards.umd.js +108 -86
- 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/sticker-current.svg +1 -1
- package/src/assets/icons/sticker-error.svg +1 -1
- package/src/assets/icons/sticker-info.svg +1 -1
- package/src/assets/icons/sticker-loading.svg +1 -1
- package/src/assets/icons/sticker-shared.svg +3 -3
- package/src/assets/icons/sticker-success.svg +1 -1
- package/src/assets/icons/sticker-warning.svg +1 -1
- package/src/components/layout-data-table/layout-data-table.vue +10 -1
- package/src/components/sticker/sticker.vue +39 -7
- package/src/stories/Changelog.stories.mdx +16 -0
- package/src/stories/sticker/sticker.stories.js +15 -1
- package/src/assets/icons/sticker-warning-critical.svg +0 -1
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle stroke="#FFF" stroke-width="1.5" fill="
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle stroke="#FFF" stroke-width="1.5" fill="currentColor" cx="8" cy="8" r="6.75"/><circle fill="#FFF" cx="8" cy="8" r="2"/></g></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m9.838 1.25c.7299169 0 1.4294885.28991186 1.9443301.80566991l2.1626667 2.16266667c.5151878.51518789.8050032 1.21459706.8050032 1.94433009v3.67533333c0 .7294828-.2894691 1.4278791-.8049215 1.9442483l-2.1625534 2.1632196c-.5159131.5149968-1.2151086.8045321-1.9445251.8045321h-3.676c-.72960036 0-1.4289585-.2896317-1.94499675-.8056699l-2.162-2.162c-.51518789-.5151879-.80500325-1.2145971-.80500325-1.9443301v-3.676c0-.72991688.28991186-1.42948854.80566991-1.94433009l2.16152881-2.16152838c.51531274-.51622967 1.2148844-.80614153 1.94480128-.80614153z" fill="
|
|
1
|
+
<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m9.838 1.25c.7299169 0 1.4294885.28991186 1.9443301.80566991l2.1626667 2.16266667c.5151878.51518789.8050032 1.21459706.8050032 1.94433009v3.67533333c0 .7294828-.2894691 1.4278791-.8049215 1.9442483l-2.1625534 2.1632196c-.5159131.5149968-1.2151086.8045321-1.9445251.8045321h-3.676c-.72960036 0-1.4289585-.2896317-1.94499675-.8056699l-2.162-2.162c-.51518789-.5151879-.80500325-1.2145971-.80500325-1.9443301v-3.676c0-.72991688.28991186-1.42948854.80566991-1.94433009l2.16152881-2.16152838c.51531274-.51622967 1.2148844-.80614153 1.94480128-.80614153z" fill="currentColor" stroke="#fff" stroke-width="1.5"/><path d="m6.28033009 5.21966991 1.67966991 1.67933009 1.67983593-1.67933009c.26626656-.26626656.68293027-.29047261.97654177-.07261815l.0841184.07261815c.2928932.29289322.2928932.76776696 0 1.06066018l-1.6794961 1.67966991 1.6794961 1.67983593c.2928932.29289322.2928932.76776697 0 1.06066017s-.76776695.2928932-1.06066017 0l-1.67983593-1.6794961-1.67966991 1.6794961c-.26626657.2662666-.68293025.2904726-.97654174.0726182l-.08411844-.0726182c-.29289321-.2928932-.29289321-.76776695 0-1.06066017l1.67933009-1.67983593-1.67933009-1.67966991c-.29289321-.29289322-.29289321-.76776696 0-1.06066018.29289322-.29289321.76776696-.29289321 1.06066018 0z" fill="#fff" fill-rule="nonzero"/></g></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 14.75a6.75 6.75 0 1 0 0-13.5 6.75 6.75 0 0 0 0 13.5Z" fill="
|
|
1
|
+
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 14.75a6.75 6.75 0 1 0 0-13.5 6.75 6.75 0 0 0 0 13.5Z" fill="currentColor" stroke="#fff" stroke-width="1.5"/><path d="M8.2 11.484v-3.75h-1" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="7.8" cy="4.8" r="1" fill="#fff"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle cx="8" cy="8" fill="#fff" r="6.75" stroke="#fff" stroke-width="1.5"/><path d="m7.99989896 2.125c2.66015634-.0002688 4.98855124 1.78692755 5.67601814 4.35671759.687467 2.56979004-.4375622 5.28084201-2.7425271 6.60883621-2.3049649 1.3279941-5.21462509.9415085-7.09299104-.942151-.3899744-.3910734-.38908348-1.0242378.00198993-1.4142122s1.02423776-.3890835 1.41421216.0019899c1.23892223 1.2424137 3.15805979 1.4973298 4.6783558.6214188 1.52029605-.8759111 2.26233655-2.66405173 1.80890085-4.35901962-.4534356-1.6949679-1.98918546-2.87375698-3.74375665-2.87357968-.55228474.0000558-1.00004523-.44761421-1.00010104-.99989896-.0000558-.55228475.4476142-1.00010104.99989895-1.00010104z" fill="
|
|
1
|
+
<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle cx="8" cy="8" fill="#fff" r="6.75" stroke="#fff" stroke-width="1.5"/><path d="m7.99989896 2.125c2.66015634-.0002688 4.98855124 1.78692755 5.67601814 4.35671759.687467 2.56979004-.4375622 5.28084201-2.7425271 6.60883621-2.3049649 1.3279941-5.21462509.9415085-7.09299104-.942151-.3899744-.3910734-.38908348-1.0242378.00198993-1.4142122s1.02423776-.3890835 1.41421216.0019899c1.23892223 1.2424137 3.15805979 1.4973298 4.6783558.6214188 1.52029605-.8759111 2.26233655-2.66405173 1.80890085-4.35901962-.4534356-1.6949679-1.98918546-2.87375698-3.74375665-2.87357968-.55228474.0000558-1.00004523-.44761421-1.00010104-.99989896-.0000558-.55228475.4476142-1.00010104.99989895-1.00010104z" fill="currentColor" fill-rule="nonzero"/></g></svg>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
2
|
<path d="M8 14.75C11.7279 14.75 14.75 11.7279 14.75 8C14.75 4.27208 11.7279 1.25 8 1.25C4.27208 1.25 1.25 4.27208 1.25 8C1.25 11.7279 4.27208 14.75 8 14.75Z" fill="white" stroke="white" stroke-width="1.5"/>
|
|
3
|
-
<path d="M8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5Z" fill="white" stroke="
|
|
4
|
-
<path d="M8.04089 9.57C8.98143 9.57 9.74389 8.80754 9.74389 7.867C9.74389 6.92646 8.98143 6.164 8.04089 6.164C7.10035 6.164 6.33789 6.92646 6.33789 7.867C6.33789 8.80754 7.10035 9.57 8.04089 9.57Z" stroke="
|
|
5
|
-
<path d="M5.49756 12.7282V12.1333C5.49756 10.7179 6.64628 9.58974 8.04115 9.58974C9.43602 9.58974 10.5847 10.7385 10.5847 12.1333V12.7282" stroke="
|
|
3
|
+
<path d="M8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5Z" fill="white" stroke="currentColor"/>
|
|
4
|
+
<path d="M8.04089 9.57C8.98143 9.57 9.74389 8.80754 9.74389 7.867C9.74389 6.92646 8.98143 6.164 8.04089 6.164C7.10035 6.164 6.33789 6.92646 6.33789 7.867C6.33789 8.80754 7.10035 9.57 8.04089 9.57Z" stroke="currentColor"/>
|
|
5
|
+
<path d="M5.49756 12.7282V12.1333C5.49756 10.7179 6.64628 9.58974 8.04115 9.58974C9.43602 9.58974 10.5847 10.7385 10.5847 12.1333V12.7282" stroke="currentColor"/>
|
|
6
6
|
</svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle cx="8" cy="8" fill="
|
|
1
|
+
<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle cx="8" cy="8" fill="currentColor" r="6.75" stroke="#fff" stroke-width="1.5"/><path d="m7.69503256 10.5488619c-.12011137.1316849-.28601106.2130424-.46925279.2130424-.18324174 0-.34914143-.0813575-.46920856-.2130424l-1.9908405-2.18176969c-.12006713-.13163636-.19430171-.31345454-.19430171-.51427879 0-.40164848.29707104-.72727272.66359875-.72727272.1831975 0 .34909718.08140606.46920856.21299394l1.52154346 1.66758788 3.06998473-3.3645091c.1200672-.13163636.2859669-.21304242.4692528-.21304242.3664835 0 .6635546.32557576.6635546.72727273 0 .20087272-.0742346.38264242-.194346.51427879z" fill="#fff"/></g></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m8.0401618 1.307581c.32804587 0 .66100967.10725171.97052844.34806282.22751093.17700756.44743289.43375432.63261104.78178034l4.76212982 8.95000364c.4173577.784387.3558186 1.4813385.0520491 1.9836914-.3011656.4980468-.8844537.8788812-1.7785856.8788812h-9.36401089c-.89843557 0-1.48198603-.3820483-1.78018162-.8815012-.29805576-.4992186-.35790259-1.1936468.06921445-1.9849996l4.83058748-8.95000365c.18759822-.34757774.40841006-.60310928.63574017-.77911143.31073451-.240575.64344007-.34680352.96991761-.34680352z" fill="
|
|
1
|
+
<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m8.0401618 1.307581c.32804587 0 .66100967.10725171.97052844.34806282.22751093.17700756.44743289.43375432.63261104.78178034l4.76212982 8.95000364c.4173577.784387.3558186 1.4813385.0520491 1.9836914-.3011656.4980468-.8844537.8788812-1.7785856.8788812h-9.36401089c-.89843557 0-1.48198603-.3820483-1.78018162-.8815012-.29805576-.4992186-.35790259-1.1936468.06921445-1.9849996l4.83058748-8.95000365c.18759822-.34757774.40841006-.60310928.63574017-.77911143.31073451-.240575.64344007-.34680352.96991761-.34680352z" fill="currentColor" stroke="#fff" stroke-width="1.5"/><path d="m8.1 10.3c.52467051 0 .95.4253295.95.95s-.42532949.95-.95.95-.95-.4253295-.95-.95.42532949-.95.95-.95zm0-5.3c.41421356 0 .75.33578644.75.75v2.6c0 .41421356-.33578644.75-.75.75s-.75-.33578644-.75-.75v-2.6c0-.41421356.33578644-.75.75-.75z" fill="#fff" fill-rule="nonzero"/></g></svg>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="ecs-data-layout">
|
|
2
|
+
<div class="ecs-data-layout" :class="leftBorder ? 'left-border' : ''">
|
|
3
3
|
<main class="ecs-data-layout-content">
|
|
4
4
|
<div v-if="$slots.toolbar" role="toolbar" aria-label="Main" class="ecs-data-layout-toolbar">
|
|
5
5
|
<!-- @slot Slot for a toolbar. -->
|
|
@@ -48,6 +48,11 @@
|
|
|
48
48
|
showActionbar: {
|
|
49
49
|
type: Boolean,
|
|
50
50
|
default: false
|
|
51
|
+
},
|
|
52
|
+
/** Renders a a border on the left of the layout. Should be used when there are tab button to the left. */
|
|
53
|
+
leftBorder: {
|
|
54
|
+
type: Boolean,
|
|
55
|
+
default: true
|
|
51
56
|
}
|
|
52
57
|
}
|
|
53
58
|
}
|
|
@@ -66,6 +71,10 @@ $bar-height: 41px;
|
|
|
66
71
|
background: #FFF;
|
|
67
72
|
overflow: hidden;
|
|
68
73
|
|
|
74
|
+
&.left-border{
|
|
75
|
+
border-left: 1px solid $color-gray-4;
|
|
76
|
+
}
|
|
77
|
+
|
|
69
78
|
&-toolbar{
|
|
70
79
|
display: flex;
|
|
71
80
|
align-items: center;
|
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<svg
|
|
2
|
+
<svg
|
|
3
|
+
v-if="isValidType"
|
|
4
|
+
class="ecs-sticker"
|
|
5
|
+
:class="spinning ? 'ecs-spinner' : ''"
|
|
6
|
+
:aria-busy="spinning"
|
|
7
|
+
:style="`color: ${computedColor}`"
|
|
3
8
|
xmlns="http://www.w3.org/2000/svg"
|
|
4
|
-
viewBox="0 0
|
|
5
|
-
width="
|
|
6
|
-
height="
|
|
9
|
+
:viewBox="`0 0 ${size} ${size}`"
|
|
10
|
+
:width="size"
|
|
11
|
+
:height="size"
|
|
7
12
|
role="presentation">
|
|
8
13
|
<use v-bind:xlink:href="href"></use>
|
|
9
14
|
</svg>
|
|
@@ -15,7 +20,16 @@
|
|
|
15
20
|
/** Sets the sticker icon. */
|
|
16
21
|
type: {
|
|
17
22
|
type: String,
|
|
18
|
-
validator: v => ['current', 'error', 'loading', 'warning', '
|
|
23
|
+
validator: v => ['current', 'error', 'loading', 'warning', 'success', 'info', 'shared', 'null', null, undefined].includes(v)
|
|
24
|
+
},
|
|
25
|
+
/** Allows to customize the primary color of the sticker icon. */
|
|
26
|
+
color: {
|
|
27
|
+
type: String
|
|
28
|
+
},
|
|
29
|
+
/** Allows to change the size. */
|
|
30
|
+
size: {
|
|
31
|
+
type: Number,
|
|
32
|
+
default: 16
|
|
19
33
|
}
|
|
20
34
|
},
|
|
21
35
|
|
|
@@ -34,16 +48,34 @@
|
|
|
34
48
|
|| this.type == 'error'
|
|
35
49
|
|| this.type == 'loading'
|
|
36
50
|
|| this.type == 'warning'
|
|
37
|
-
|| this.type == 'warning-critical'
|
|
38
51
|
|| this.type == 'success'
|
|
39
52
|
|| this.type == 'shared'
|
|
40
53
|
|| this.type == 'info')
|
|
41
54
|
return true
|
|
42
55
|
else
|
|
43
56
|
return false
|
|
57
|
+
},
|
|
58
|
+
|
|
59
|
+
computedColor() {
|
|
60
|
+
if (this.color) {
|
|
61
|
+
return this.color;
|
|
62
|
+
} else {
|
|
63
|
+
switch (this.type) {
|
|
64
|
+
case 'error':
|
|
65
|
+
return '#ff3750';
|
|
66
|
+
case 'warning':
|
|
67
|
+
return '#f1b251';
|
|
68
|
+
case 'success':
|
|
69
|
+
return '#0eba65';
|
|
70
|
+
case 'info':
|
|
71
|
+
return '#6BAFFF';
|
|
72
|
+
default:
|
|
73
|
+
return '#0B71EB';
|
|
74
|
+
}
|
|
75
|
+
}
|
|
44
76
|
}
|
|
45
77
|
}
|
|
46
|
-
}
|
|
78
|
+
}
|
|
47
79
|
</script>
|
|
48
80
|
|
|
49
81
|
<style lang="scss" scoped>
|
|
@@ -6,6 +6,22 @@ import { Meta } from '@storybook/addon-docs/blocks';
|
|
|
6
6
|
Changelog
|
|
7
7
|
</h1>
|
|
8
8
|
|
|
9
|
+
## Version 7.2.0 (29 May 2023)
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
- Added `size` and `color` props to EcsSticker component
|
|
14
|
+
|
|
15
|
+
### Fixes
|
|
16
|
+
|
|
17
|
+
- **Breaking Change:** removed `warning-critical` sticker icon
|
|
18
|
+
|
|
19
|
+
## Version 7.1.1 (26 May 2023)
|
|
20
|
+
|
|
21
|
+
### Features
|
|
22
|
+
|
|
23
|
+
- Added leftBorder prop to EcsDataTableLayout component
|
|
24
|
+
|
|
9
25
|
## Version 7.1.0 (26 May 2023)
|
|
10
26
|
|
|
11
27
|
### Features
|
|
@@ -12,8 +12,22 @@ export const sticker = () => ({
|
|
|
12
12
|
<ecs-sticker type="loading" />
|
|
13
13
|
<ecs-sticker type="success" />
|
|
14
14
|
<ecs-sticker type="warning" />
|
|
15
|
-
<ecs-sticker type="
|
|
15
|
+
<ecs-sticker type="info" />
|
|
16
16
|
<ecs-sticker type="current" />
|
|
17
17
|
<ecs-sticker type="shared" />
|
|
18
18
|
</main>`,
|
|
19
19
|
});
|
|
20
|
+
|
|
21
|
+
export const stickerCustomColor = () => ({
|
|
22
|
+
components: { EcsSticker },
|
|
23
|
+
template: `<main>
|
|
24
|
+
<ecs-sticker type="error" color="#A1A6B0" />
|
|
25
|
+
</main>`,
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
export const stickerCustomSize = () => ({
|
|
29
|
+
components: { EcsSticker },
|
|
30
|
+
template: `<main>
|
|
31
|
+
<ecs-sticker type="error" :size="32" />
|
|
32
|
+
</main>`,
|
|
33
|
+
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m8.0401618 1.307581c.32804587 0 .66100967.10725171.97052844.34806282.22751093.17700756.44743289.43375432.63261104.78178034l4.76212982 8.95000364c.4173577.784387.3558186 1.4813385.0520491 1.9836914-.3011656.4980468-.8844537.8788812-1.7785856.8788812h-9.36401089c-.89843557 0-1.48198603-.3820483-1.78018162-.8815012-.29805576-.4992186-.35790259-1.1936468.06921445-1.9849996l4.83058748-8.95000365c.18759822-.34757774.40841006-.60310928.63574017-.77911143.31073451-.240575.64344007-.34680352.96991761-.34680352z" fill="#ff3750" stroke="#fff" stroke-width="1.5"/><path d="m8.1 10.3c.52467051 0 .95.4253295.95.95s-.42532949.95-.95.95-.95-.4253295-.95-.95.42532949-.95.95-.95zm0-5.3c.41421356 0 .75.33578644.75.75v2.6c0 .41421356-.33578644.75-.75.75s-.75-.33578644-.75-.75v-2.6c0-.41421356.33578644-.75.75-.75z" fill="#fff" fill-rule="nonzero"/></g></svg>
|