@everchron/ec-shards 3.1.5 → 3.3.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 +1985 -946
- package/dist/ec-shards.common.js.map +1 -1
- package/dist/ec-shards.css +1 -1
- package/dist/ec-shards.umd.js +1985 -946
- 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/dist/img/EU.d180ac2d.svg +1 -0
- package/dist/img/login-email-mfa.33936706.svg +1 -0
- package/dist/img/login-email.4b81db3a.svg +1 -0
- package/dist/img/login-sso-azure.a49f3fe4.svg +1 -0
- package/dist/img/login-sso-okta.55de1bbd.svg +1 -0
- package/package.json +1 -1
- package/src/assets/icons/login-key.svg +7 -0
- package/src/assets/images/fill-icons/login-email-mfa.svg +1 -0
- package/src/assets/images/fill-icons/login-email.svg +1 -0
- package/src/assets/images/fill-icons/login-sso-azure.svg +1 -0
- package/src/assets/images/fill-icons/login-sso-okta.svg +1 -0
- package/src/assets/images/flags/EU.svg +1 -0
- package/src/components/fill-icon/fill-icon.vue +59 -0
- package/src/components/flag/flag.vue +5 -0
- package/src/components/index.js +4 -0
- package/src/components/pagination/pagination.vue +133 -140
- package/src/components/select/select.vue +24 -3
- package/src/components/separator/separator.vue +93 -0
- package/src/stories/Changelog.stories.mdx +16 -0
- package/src/stories/fill-icon/fill-icon.stories.js +24 -0
- package/src/stories/flag/flag.stories.js +6 -1
- package/src/stories/pagination/pagination.stories.js +0 -30
- package/src/stories/select/select.stories.js +16 -0
- package/src/stories/separator/.DS_Store +0 -0
- package/src/stories/separator/separator.stories.js +33 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg fill="none" height="15" viewBox="0 0 20 15" width="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h20v15h-20z"/></clipPath><mask id="b" height="15" maskUnits="userSpaceOnUse" width="20" x="0" y="0"><path d="m20 0h-20v15h20z" fill="#fff"/></mask><mask id="c" height="15" maskUnits="userSpaceOnUse" width="20" x="0" y="0"><path clip-rule="evenodd" d="m0 0v15h20v-15z" fill="#fff" fill-rule="evenodd"/></mask><g clip-path="url(#a)"><g clip-rule="evenodd" fill-rule="evenodd" mask="url(#b)"><path d="m0 0v15h20v-15z" fill="#f7fcff"/><g mask="url(#c)"><path d="m0 0v15h20v-15z" fill="#3d58db"/><path d="m9.26516 3.02849.73474-.38628.7347.38628-.1403-.81814.5944-.63909h-.8214l-.3674-.804048-.36737.804048h-.82146l.59441.63909zm0 10.85551.73474-.3863.7347.3863-.1403-.8181.5944-.6391h-.8214l-.3674-.804-.36737.804h-.82146l.59441.6391zm-5.78226-5.37274.14031-.81814-.5944-.63908h.82145l.36736-.80405.36738.80405h.82145l-.59442.63908.14033.81814-.73474-.38627zm1.35153 1.77004-.14032.8181.73474-.3862.73472.3862-.14031-.8181.59441-.63909h-.82146l-.36736-.80404-.36737.80404h-.82146zm9.74357.4319-.7347.3862.1402-.8181-.5944-.63909h.8215l.3674-.80404.3674.80404h.8214l-.5944.63909.1402.8181zm-9.74357-5.6756-.14032.81814.73474-.38628.73472.38628-.14031-.81814.59441-.63909h-.82146l-.36736-.80405-.36737.80405h-.82146zm9.74357.43186-.7347.38628.1402-.81814-.5944-.63909h.8215l.3674-.80405.3674.80405h.8214l-.5944.63909.1402.81814zm-7.918 6.89424-.14033.8182.73473-.3864.73473.3864-.14032-.8182.59441-.6391h-.82145l-.36737-.804-.36737.804h-.82145zm5.4173.8182.1403-.8182-.5944-.6391h.8215l.3673-.804.3674.804h.8215l-.5945.6391.1404.8182-.7348-.3864zm-5.4173-10.25995-.14033.81814.73473-.38628.73473.38628-.14032-.81814.59441-.63909h-.82145l-.36737-.80405-.36737.80405h-.82145zm5.4173.81814.1403-.81814-.5944-.63909h.8215l.3673-.80405.3674.80405h.8215l-.5945.63909.1404.81814-.7348-.38628zm3.0627 3.87915-.1404.81812.7348-.38626.7347.38626-.1403-.81812.5943-.6391h-.8213l-.3674-.80404-.3674.80404h-.8215z" fill="#ffd018"/></g></g></g></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg fill="none" height="20" viewBox="0 0 23 20" width="23" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m1 3h14v14h-14z"/></clipPath><rect fill="#a1a6b0" height="16" rx="6" width="16" y="2"/><g clip-path="url(#a)" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m10.1875 9.63542v1.67708c0 .3481.1383.6819.3844.9281.2462.2461.58.3844.9281.3844h.4375c.3481 0 .6819-.1383.9281-.3844.2461-.2462.3844-.58.3844-.9281v-2.1875c0-1.16032-.4609-2.27312-1.2814-3.09359s-1.9333-1.28141-3.0936-1.28141h-1.75c-1.16032 0-2.27312.46094-3.09359 1.28141s-1.28141 1.93327-1.28141 3.09359v1.75c0 1.1603.46094 2.2731 1.28141 3.0936s1.93327 1.2814 3.09359 1.2814h3.2083"/><path d="m8.36458 7.8125h-.72916c-1.00677 0-1.82292.81615-1.82292 1.82292v.72918c0 1.0068.81615 1.8229 1.82292 1.8229h.72916c1.00677 0 1.82292-.8161 1.82292-1.8229v-.72918c0-1.00677-.81615-1.82292-1.82292-1.82292z"/></g><rect fill="#0eba65" height="8" rx="2" width="12" x="11"/><path d="m15 9.5h-2c-1.933 0-3.5-1.567-3.5-3.5v-3l1.5 1v2c0 1.10457.8954 2 2 2h2z" fill="#a1a6b0"/><g stroke="#fff" stroke-linecap="round" stroke-linejoin="round"><path d="m14.7089 5.48572c.8435 0 1.5273-.71634 1.5273-1.6 0-.88365-.6838-1.6-1.5273-1.6s-1.5273.71635-1.5273 1.6c0 .88366.6838 1.6 1.5273 1.6z"/><path d="m20.8181 3.88571h-4.5818"/><path d="m20.8181 5.48571v-1.6"/><path d="m18.5273 5.48571v-1.6"/></g></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg fill="none" height="20" viewBox="0 0 16 20" width="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m1 3h14v14h-14z"/></clipPath><rect fill="#a1a6b0" height="16" rx="6" width="16" y="2"/><g clip-path="url(#a)" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m10.1875 9.63542v1.67708c0 .3481.1383.6819.3844.9281.2462.2461.58.3844.9281.3844h.4375c.3481 0 .6819-.1383.9281-.3844.2461-.2462.3844-.58.3844-.9281v-2.1875c0-1.16032-.4609-2.27312-1.2814-3.09359s-1.9333-1.28141-3.0936-1.28141h-1.75c-1.16032 0-2.27312.46094-3.09359 1.28141s-1.28141 1.93327-1.28141 3.09359v1.75c0 1.1603.46094 2.2731 1.28141 3.0936s1.93327 1.2814 3.09359 1.2814h3.2083"/><path d="m8.36458 7.8125h-.72916c-1.00677 0-1.82292.81615-1.82292 1.82292v.72918c0 1.0068.81615 1.8229 1.82292 1.8229h.72916c1.00677 0 1.82292-.8161 1.82292-1.8229v-.72918c0-1.00677-.81615-1.82292-1.82292-1.82292z"/></g></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg fill="none" height="20" viewBox="0 0 15 20" width="15" xmlns="http://www.w3.org/2000/svg"><path d="m7 2.5h-7v7h7z" fill="#f25022"/><path d="m7 10.5h-7v7h7z" fill="#00a4ef"/><path d="m15 2.5h-7v7h7z" fill="#7fba00"/><path d="m15 10.5h-7v7h7z" fill="#ffb900"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg fill="none" height="20" viewBox="0 0 16 20" width="16" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="10" r="6" stroke="#357bbb" stroke-width="4"/></svg>
|
package/package.json
CHANGED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path vector-effect="non-scaling-stroke" d="M6.27057 9.16667C7.52203 7.29365 9.34268 5.87275 11.4636 5.11383C13.5846 4.35492 15.8934 4.29821 18.049 4.9521C20.2046 5.60599 22.0929 6.93579 23.4348 8.74512C24.7767 10.5544 25.5011 12.7474 25.5011 15C25.5011 17.2526 24.7767 19.4456 23.4348 21.2549C22.0929 23.0642 20.2046 24.394 18.049 25.0479C15.8934 25.7018 13.5846 25.6451 11.4636 24.8862C9.34268 24.1272 7.52203 22.7064 6.27057 20.8333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path vector-effect="non-scaling-stroke" d="M6.83333 17.3333C8.122 17.3333 9.16667 16.2886 9.16667 15C9.16667 13.7113 8.122 12.6666 6.83333 12.6666C5.54467 12.6666 4.5 13.7113 4.5 15C4.5 16.2886 5.54467 17.3333 6.83333 17.3333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path vector-effect="non-scaling-stroke" d="M16.1667 15H9.16669" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<path vector-effect="non-scaling-stroke" d="M16.1667 17.3333V15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
<path vector-effect="non-scaling-stroke" d="M12.6667 17.3333V15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
7
|
+
</svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg fill="none" height="20" viewBox="0 0 23 20" width="23" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m1 3h14v14h-14z"/></clipPath><rect fill="#a1a6b0" height="16" rx="6" width="16" y="2"/><g clip-path="url(#a)" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m10.1875 9.63542v1.67708c0 .3481.1383.6819.3844.9281.2462.2461.58.3844.9281.3844h.4375c.3481 0 .6819-.1383.9281-.3844.2461-.2462.3844-.58.3844-.9281v-2.1875c0-1.16032-.4609-2.27312-1.2814-3.09359s-1.9333-1.28141-3.0936-1.28141h-1.75c-1.16032 0-2.27312.46094-3.09359 1.28141s-1.28141 1.93327-1.28141 3.09359v1.75c0 1.1603.46094 2.2731 1.28141 3.0936s1.93327 1.2814 3.09359 1.2814h3.2083"/><path d="m8.36458 7.8125h-.72916c-1.00677 0-1.82292.81615-1.82292 1.82292v.72918c0 1.0068.81615 1.8229 1.82292 1.8229h.72916c1.00677 0 1.82292-.8161 1.82292-1.8229v-.72918c0-1.00677-.81615-1.82292-1.82292-1.82292z"/></g><rect fill="#0eba65" height="8" rx="2" width="12" x="11"/><path d="m15 9.5h-2c-1.933 0-3.5-1.567-3.5-3.5v-3l1.5 1v2c0 1.10457.8954 2 2 2h2z" fill="#a1a6b0"/><g stroke="#fff" stroke-linecap="round" stroke-linejoin="round"><path d="m14.7089 5.48572c.8435 0 1.5273-.71634 1.5273-1.6 0-.88365-.6838-1.6-1.5273-1.6s-1.5273.71635-1.5273 1.6c0 .88366.6838 1.6 1.5273 1.6z"/><path d="m20.8181 3.88571h-4.5818"/><path d="m20.8181 5.48571v-1.6"/><path d="m18.5273 5.48571v-1.6"/></g></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg fill="none" height="20" viewBox="0 0 16 20" width="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m1 3h14v14h-14z"/></clipPath><rect fill="#a1a6b0" height="16" rx="6" width="16" y="2"/><g clip-path="url(#a)" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m10.1875 9.63542v1.67708c0 .3481.1383.6819.3844.9281.2462.2461.58.3844.9281.3844h.4375c.3481 0 .6819-.1383.9281-.3844.2461-.2462.3844-.58.3844-.9281v-2.1875c0-1.16032-.4609-2.27312-1.2814-3.09359s-1.9333-1.28141-3.0936-1.28141h-1.75c-1.16032 0-2.27312.46094-3.09359 1.28141s-1.28141 1.93327-1.28141 3.09359v1.75c0 1.1603.46094 2.2731 1.28141 3.0936s1.93327 1.2814 3.09359 1.2814h3.2083"/><path d="m8.36458 7.8125h-.72916c-1.00677 0-1.82292.81615-1.82292 1.82292v.72918c0 1.0068.81615 1.8229 1.82292 1.8229h.72916c1.00677 0 1.82292-.8161 1.82292-1.8229v-.72918c0-1.00677-.81615-1.82292-1.82292-1.82292z"/></g></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg fill="none" height="20" viewBox="0 0 15 20" width="15" xmlns="http://www.w3.org/2000/svg"><path d="m7 2.5h-7v7h7z" fill="#f25022"/><path d="m7 10.5h-7v7h7z" fill="#00a4ef"/><path d="m15 2.5h-7v7h7z" fill="#7fba00"/><path d="m15 10.5h-7v7h7z" fill="#ffb900"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg fill="none" height="20" viewBox="0 0 16 20" width="16" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="10" r="6" stroke="#357bbb" stroke-width="4"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg fill="none" height="15" viewBox="0 0 20 15" width="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h20v15h-20z"/></clipPath><mask id="b" height="15" maskUnits="userSpaceOnUse" width="20" x="0" y="0"><path d="m20 0h-20v15h20z" fill="#fff"/></mask><mask id="c" height="15" maskUnits="userSpaceOnUse" width="20" x="0" y="0"><path clip-rule="evenodd" d="m0 0v15h20v-15z" fill="#fff" fill-rule="evenodd"/></mask><g clip-path="url(#a)"><g clip-rule="evenodd" fill-rule="evenodd" mask="url(#b)"><path d="m0 0v15h20v-15z" fill="#f7fcff"/><g mask="url(#c)"><path d="m0 0v15h20v-15z" fill="#3d58db"/><path d="m9.26516 3.02849.73474-.38628.7347.38628-.1403-.81814.5944-.63909h-.8214l-.3674-.804048-.36737.804048h-.82146l.59441.63909zm0 10.85551.73474-.3863.7347.3863-.1403-.8181.5944-.6391h-.8214l-.3674-.804-.36737.804h-.82146l.59441.6391zm-5.78226-5.37274.14031-.81814-.5944-.63908h.82145l.36736-.80405.36738.80405h.82145l-.59442.63908.14033.81814-.73474-.38627zm1.35153 1.77004-.14032.8181.73474-.3862.73472.3862-.14031-.8181.59441-.63909h-.82146l-.36736-.80404-.36737.80404h-.82146zm9.74357.4319-.7347.3862.1402-.8181-.5944-.63909h.8215l.3674-.80404.3674.80404h.8214l-.5944.63909.1402.8181zm-9.74357-5.6756-.14032.81814.73474-.38628.73472.38628-.14031-.81814.59441-.63909h-.82146l-.36736-.80405-.36737.80405h-.82146zm9.74357.43186-.7347.38628.1402-.81814-.5944-.63909h.8215l.3674-.80405.3674.80405h.8214l-.5944.63909.1402.81814zm-7.918 6.89424-.14033.8182.73473-.3864.73473.3864-.14032-.8182.59441-.6391h-.82145l-.36737-.804-.36737.804h-.82145zm5.4173.8182.1403-.8182-.5944-.6391h.8215l.3673-.804.3674.804h.8215l-.5945.6391.1404.8182-.7348-.3864zm-5.4173-10.25995-.14033.81814.73473-.38628.73473.38628-.14032-.81814.59441-.63909h-.82145l-.36737-.80405-.36737.80405h-.82145zm5.4173.81814.1403-.81814-.5944-.63909h.8215l.3673-.80405.3674.80405h.8215l-.5945.63909.1404.81814-.7348-.38628zm3.0627 3.87915-.1404.81812.7348-.38626.7347.38626-.1403-.81812.5943-.6391h-.8213l-.3674-.80404-.3674.80404h-.8215z" fill="#ffd018"/></g></g></g></svg>
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="ecs-fill-icon" :class="type" :style="{ width: width+ 'px', height: height+ 'px' }" />
|
|
3
|
+
</template>
|
|
4
|
+
|
|
5
|
+
<script>
|
|
6
|
+
export default {
|
|
7
|
+
props: {
|
|
8
|
+
/** The identifier of the icon which should show up. */
|
|
9
|
+
type: {
|
|
10
|
+
type: String,
|
|
11
|
+
validator: v => [
|
|
12
|
+
'login-email-mfa',
|
|
13
|
+
'login-email',
|
|
14
|
+
'login-sso-azure',
|
|
15
|
+
'login-sso-okta'
|
|
16
|
+
].includes(v),
|
|
17
|
+
required: true
|
|
18
|
+
},
|
|
19
|
+
/** The width in pixels. When only a width is passed without a height, the icon will not be resized, but the outer container. */
|
|
20
|
+
width: {
|
|
21
|
+
type: Number
|
|
22
|
+
},
|
|
23
|
+
/** The height in pixels. When only a height is passed without a width, the icon will not be resized, but the outer container. */
|
|
24
|
+
height:{
|
|
25
|
+
type: Number
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<style lang="scss" scoped>
|
|
32
|
+
@import "../../tokens/build/scss/tokens.scss";
|
|
33
|
+
@import "../mixins/svg-uri";
|
|
34
|
+
|
|
35
|
+
.ecs-fill-icon{
|
|
36
|
+
width: 16px;
|
|
37
|
+
height: 20px;
|
|
38
|
+
background-size: 100% 100%;
|
|
39
|
+
background-repeat: no-repeat;
|
|
40
|
+
background-position: left center;
|
|
41
|
+
position: relative;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.login-email-mfa{
|
|
45
|
+
background-image: url("../../assets/images/fill-icons/login-email-mfa.svg");
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.login-email{
|
|
49
|
+
background-image: url("../../assets/images/fill-icons/login-email.svg");
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.login-sso-azure{
|
|
53
|
+
background-image: url("../../assets/images/fill-icons/login-sso-azure.svg");
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.login-sso-okta{
|
|
57
|
+
background-image: url("../../assets/images/fill-icons/login-sso-okta.svg");
|
|
58
|
+
}
|
|
59
|
+
</style>
|
|
@@ -17,6 +17,7 @@ export default {
|
|
|
17
17
|
'da',
|
|
18
18
|
'nl',
|
|
19
19
|
'en',
|
|
20
|
+
'eu',
|
|
20
21
|
'gb',
|
|
21
22
|
'au',
|
|
22
23
|
'ca',
|
|
@@ -93,6 +94,10 @@ export default {
|
|
|
93
94
|
background-image: url("../../assets/images/flags/GB-UKM.svg");
|
|
94
95
|
}
|
|
95
96
|
|
|
97
|
+
&.eu{
|
|
98
|
+
background-image: url("../../assets/images/flags/EU.svg");
|
|
99
|
+
}
|
|
100
|
+
|
|
96
101
|
&.us{
|
|
97
102
|
background-image: url("../../assets/images/flags/US.svg");
|
|
98
103
|
}
|
package/src/components/index.js
CHANGED
|
@@ -42,6 +42,7 @@ import EcsEmptyState from "./empty-state/empty-state.vue"
|
|
|
42
42
|
import EcsExcerptSnippet from "./excerpt-snippet/excerpt-snippet.vue"
|
|
43
43
|
import EcsFavicon from "./favicon/favicon.vue"
|
|
44
44
|
import EcsFileIcon from "./file-icon/file-icon.vue"
|
|
45
|
+
import EcsFillIcon from "./fill-icon/fill-icon.vue"
|
|
45
46
|
import EcsFileList from "./file-list/file-list.vue"
|
|
46
47
|
import EcsFileListItem from "./file-list-item/file-list-item.vue"
|
|
47
48
|
import EcsFlag from "./flag/flag.vue"
|
|
@@ -96,6 +97,7 @@ import EcsSection from "./section/section.vue"
|
|
|
96
97
|
import EcsSegment from "./segment/segment.vue"
|
|
97
98
|
import EcsSelect from "./select/select.vue"
|
|
98
99
|
import EcsSelectTile from "./select-tile/select-tile.vue"
|
|
100
|
+
import EcsSeparator from "./separator/separator.vue"
|
|
99
101
|
import EcsSequenceMap from "./sequence-map/sequence-map.vue"
|
|
100
102
|
import EcsSequenceMapButton from "./sequence-map-button/sequence-map-button.vue"
|
|
101
103
|
import EcsSidebar from "./sidebar/sidebar.vue"
|
|
@@ -166,6 +168,7 @@ const Components = {
|
|
|
166
168
|
EcsExcerptSnippet,
|
|
167
169
|
EcsFavicon,
|
|
168
170
|
EcsFileIcon,
|
|
171
|
+
EcsFillIcon,
|
|
169
172
|
EcsFileList,
|
|
170
173
|
EcsFileListItem,
|
|
171
174
|
EcsFlag,
|
|
@@ -220,6 +223,7 @@ const Components = {
|
|
|
220
223
|
EcsSegment,
|
|
221
224
|
EcsSelect,
|
|
222
225
|
EcsSelectTile,
|
|
226
|
+
EcsSeparator,
|
|
223
227
|
EcsSequenceMap,
|
|
224
228
|
EcsSequenceMapButton,
|
|
225
229
|
EcsSidebar,
|
|
@@ -1,65 +1,66 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="ecs-pagination" :class="[ floating ? 'ecs-pagination-floating' : '' ]">
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
<ecs-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
</ecs-
|
|
20
|
-
</
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
3
|
+
<div class="ecs-pagination-nav">
|
|
4
|
+
<ecs-button-toolbar-group>
|
|
5
|
+
<ecs-button-toolbar
|
|
6
|
+
@click="$emit('prevPage', $event)"
|
|
7
|
+
:disabled="loading || currentPage === 1"
|
|
8
|
+
icon="back"
|
|
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">
|
|
23
|
+
<span>Page</span>
|
|
24
|
+
<div @click="toggleDropdown" class="ecs-pagination-dropdown-button" :class="[dropdownShown ? 'active' : '', totalPages ? '' : 'disabled']">
|
|
25
|
+
<template v-if="currentPage">{{ currentPage }}</template>
|
|
26
|
+
<template v-else>-</template>
|
|
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>
|
|
42
|
+
<span v-if="totalPages" class="total">of {{ totalPages }}</span>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
<div>
|
|
33
46
|
<!-- @slot Slot for a sheet tab bar. -->
|
|
34
47
|
<slot name="tabs"></slot>
|
|
35
48
|
</div>
|
|
36
|
-
|
|
37
|
-
<ecs-flex-row v-if="showItemsPerPage && type == 'paginated'" :gap="4" class="ecs-pagination-items">
|
|
38
|
-
<span>Items per page</span>
|
|
39
|
-
<ecs-select @change="$emit('itemsPerPage', $event.target.value)" :disabled="loading" size="sml">
|
|
40
|
-
<option v-for="n in itemsPerPage" :key="n" :value="n" :selected="n === itemsPerPageSelected">{{ n }}</option>
|
|
41
|
-
</ecs-select>
|
|
42
|
-
</ecs-flex-row>
|
|
43
|
-
|
|
44
|
-
<ecs-flex-row v-if="$slots.controls" :gap="4" class="ecs-pagination-controls">
|
|
45
|
-
<!-- @slot Slot for a additional controls, such as a settings button. -->
|
|
46
|
-
<slot name="controls"></slot>
|
|
47
|
-
</ecs-flex-row>
|
|
48
49
|
</div>
|
|
49
50
|
</template>
|
|
50
51
|
|
|
51
52
|
<script>
|
|
52
|
-
import
|
|
53
|
-
import
|
|
54
|
-
import
|
|
55
|
-
import
|
|
53
|
+
import EcsButtonToolbarGroup from '../button-toolbar-group/button-toolbar-group'
|
|
54
|
+
import EcsButtonToolbar from '../button-toolbar/button-toolbar'
|
|
55
|
+
import EcsPopoverList from '../popover-list/popover-list'
|
|
56
|
+
import EcsPopoverListItem from '../popover-list-item/popover-list-item'
|
|
56
57
|
|
|
57
58
|
export default {
|
|
58
59
|
components: {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
60
|
+
EcsButtonToolbarGroup,
|
|
61
|
+
EcsButtonToolbar,
|
|
62
|
+
EcsPopoverList,
|
|
63
|
+
EcsPopoverListItem
|
|
63
64
|
},
|
|
64
65
|
|
|
65
66
|
props: {
|
|
@@ -68,12 +69,6 @@
|
|
|
68
69
|
type: Boolean,
|
|
69
70
|
default: false
|
|
70
71
|
},
|
|
71
|
-
/** Determines which elements are visible in the pagination component. */
|
|
72
|
-
type: {
|
|
73
|
-
type: String,
|
|
74
|
-
validator: v => ['paginated', 'infinite'].includes(v),
|
|
75
|
-
default: 'paginated'
|
|
76
|
-
},
|
|
77
72
|
/** Briefly disables all controls while ongoing navigation. */
|
|
78
73
|
loading: {
|
|
79
74
|
type: Boolean,
|
|
@@ -86,53 +81,23 @@
|
|
|
86
81
|
/** The total pages of the index. */
|
|
87
82
|
totalPages: {
|
|
88
83
|
type: Number,
|
|
89
|
-
},
|
|
90
|
-
/** The width of the area left to the tab area in pixels. This is used to align the tab bar with a column in the table. Not needed when tabs aren't in use. */
|
|
91
|
-
tabsSpacing: {
|
|
92
|
-
type: Number,
|
|
93
|
-
default: 400
|
|
94
|
-
},
|
|
95
|
-
/** Determines if the selector for items per page should be shown. */
|
|
96
|
-
showItemsPerPage: {
|
|
97
|
-
type: Boolean,
|
|
98
|
-
default: true
|
|
99
|
-
},
|
|
100
|
-
/** The options to be show as selectable in the items per page dropdown. Requires an array with Numbers. Default: `[25, 50, 100]` */
|
|
101
|
-
itemsPerPage: {
|
|
102
|
-
type: Array,
|
|
103
|
-
default() {
|
|
104
|
-
return [25, 50, 100]
|
|
105
|
-
}
|
|
106
|
-
},
|
|
107
|
-
/** The selected option in the items per page dropdown. */
|
|
108
|
-
itemsPerPageSelected: {
|
|
109
|
-
type: Number,
|
|
110
|
-
default: 100
|
|
111
|
-
},
|
|
112
|
-
/** Number of the visible item range (starting). */
|
|
113
|
-
itemRangeFrom: {
|
|
114
|
-
type: [Number, String]
|
|
115
|
-
},
|
|
116
|
-
/** Number of the visible item range (ending). */
|
|
117
|
-
itemRangeTo: {
|
|
118
|
-
type: [Number, String]
|
|
119
|
-
},
|
|
120
|
-
/** Number of the total items in the index. */
|
|
121
|
-
itemRangeTotal: {
|
|
122
|
-
type: [Number, String]
|
|
123
84
|
}
|
|
124
85
|
},
|
|
125
86
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
87
|
+
data() {
|
|
88
|
+
return {
|
|
89
|
+
dropdownShown: false
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
|
|
93
|
+
methods: {
|
|
94
|
+
toggleDropdown(){
|
|
95
|
+
if(this.totalPages)
|
|
96
|
+
this.dropdownShown = !this.dropdownShown
|
|
97
|
+
},
|
|
98
|
+
|
|
99
|
+
hideDropdown(){
|
|
100
|
+
this.dropdownShown = false
|
|
136
101
|
}
|
|
137
102
|
}
|
|
138
103
|
}
|
|
@@ -151,9 +116,6 @@
|
|
|
151
116
|
box-shadow: 0 -1px 0 $color-gray-4;
|
|
152
117
|
position: relative;
|
|
153
118
|
z-index: 2;
|
|
154
|
-
font-size: $type-scale-2-font-size;
|
|
155
|
-
line-height: $type-scale-2-line-height;
|
|
156
|
-
color: $color-gray-15;
|
|
157
119
|
|
|
158
120
|
&-floating{
|
|
159
121
|
border-radius: $border-radius-small;
|
|
@@ -161,63 +123,94 @@
|
|
|
161
123
|
}
|
|
162
124
|
|
|
163
125
|
&-nav{
|
|
126
|
+
display: flex;
|
|
127
|
+
align-items: center;
|
|
164
128
|
height: 40px;
|
|
165
|
-
|
|
166
|
-
.ecs-form-select{
|
|
167
|
-
width: 52px;
|
|
168
|
-
}
|
|
129
|
+
margin-right: 24px;
|
|
169
130
|
}
|
|
170
131
|
|
|
171
|
-
|
|
172
|
-
|
|
132
|
+
.ecs-toolbar-button-group{
|
|
133
|
+
margin-right: 32px;
|
|
173
134
|
}
|
|
174
135
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
.ecs-form-select{
|
|
179
|
-
width: 52px;
|
|
180
|
-
}
|
|
136
|
+
.ecs-toolbar-button-icon{
|
|
137
|
+
font-size: $type-scale-2-font-size;
|
|
181
138
|
}
|
|
182
139
|
|
|
183
|
-
&-
|
|
184
|
-
|
|
140
|
+
&-dropdown{
|
|
141
|
+
display: flex;
|
|
142
|
+
align-items: center;
|
|
185
143
|
font-size: $type-scale-2-font-size;
|
|
186
|
-
|
|
187
|
-
color: $color-gray-10;
|
|
144
|
+
color: $color-gray-9;
|
|
188
145
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
color: $color-gray-14;
|
|
146
|
+
.total{
|
|
147
|
+
color: $color-gray-15;
|
|
192
148
|
}
|
|
193
|
-
}
|
|
194
149
|
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
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
|
+
}
|
|
198
171
|
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
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
|
+
}
|
|
204
182
|
|
|
205
|
-
|
|
206
|
-
|
|
183
|
+
&.disabled{
|
|
184
|
+
border: 1px solid $color-gray-3;
|
|
185
|
+
box-shadow: none;
|
|
186
|
+
cursor: not-allowed;
|
|
187
|
+
color: $color-gray-7;
|
|
188
|
+
}
|
|
189
|
+
}
|
|
207
190
|
}
|
|
208
191
|
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
192
|
+
&-select{
|
|
193
|
+
position: absolute;
|
|
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;
|
|
212
203
|
}
|
|
213
204
|
}
|
|
214
205
|
|
|
215
|
-
.
|
|
216
|
-
|
|
206
|
+
.dropdown-enter-active,
|
|
207
|
+
.dropdown-leave-active {
|
|
208
|
+
transition: all .3s;
|
|
217
209
|
}
|
|
218
210
|
|
|
219
|
-
.
|
|
211
|
+
.dropdown-enter,
|
|
212
|
+
.dropdown-leave-to {
|
|
220
213
|
opacity: 0;
|
|
221
|
-
transform:
|
|
214
|
+
transform: translateY(10px);
|
|
222
215
|
}
|
|
223
216
|
</style>
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="ecs-form-select" :class="[sizeClass, typeClass, disabled ? `disabled` : null]">
|
|
3
|
-
<select @change="$emit('change', $event)"
|
|
3
|
+
<select @change="$emit('change', $event); hasPlaceholder = false"
|
|
4
4
|
@focus="$emit('focus', $event)"
|
|
5
5
|
@blur="$emit('blur', $event)"
|
|
6
|
-
v-bind="{ id, name, disabled, required }"
|
|
7
|
-
|
|
6
|
+
v-bind="{ id, name, disabled, required }"
|
|
7
|
+
:class="hasPlaceholder? 'placeholder' : ''" >
|
|
8
|
+
<option v-if="placeholder" selected hidden disabled>{{placeholder}}</option>
|
|
8
9
|
<slot></slot>
|
|
9
10
|
</select>
|
|
10
11
|
</div>
|
|
@@ -35,20 +36,36 @@ export default {
|
|
|
35
36
|
type: Boolean,
|
|
36
37
|
default: false
|
|
37
38
|
},
|
|
39
|
+
placeholder: {
|
|
40
|
+
type: String
|
|
41
|
+
},
|
|
38
42
|
id: String,
|
|
39
43
|
name: String
|
|
40
44
|
},
|
|
45
|
+
|
|
46
|
+
data() {
|
|
47
|
+
return {
|
|
48
|
+
hasPlaceholder: false
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
|
|
41
52
|
computed: {
|
|
42
53
|
sizeClass() {
|
|
43
54
|
if (this.size && this.size !== '')
|
|
44
55
|
return `ecs-form-select-${this.size}`
|
|
45
56
|
return this.size
|
|
46
57
|
},
|
|
58
|
+
|
|
47
59
|
typeClass() {
|
|
48
60
|
if (this.type && this.type !== '')
|
|
49
61
|
return `ecs-form-select-${this.type}`
|
|
50
62
|
return this.type
|
|
51
63
|
}
|
|
64
|
+
},
|
|
65
|
+
|
|
66
|
+
mounted: function () {
|
|
67
|
+
if (this.placeholder && this.placeholder !== '')
|
|
68
|
+
this.hasPlaceholder = true
|
|
52
69
|
}
|
|
53
70
|
}
|
|
54
71
|
</script>
|
|
@@ -118,6 +135,10 @@ export default {
|
|
|
118
135
|
option[value=""][disabled] {
|
|
119
136
|
display: none;
|
|
120
137
|
}
|
|
138
|
+
|
|
139
|
+
&.placeholder{
|
|
140
|
+
color: $color-gray-9;
|
|
141
|
+
}
|
|
121
142
|
}
|
|
122
143
|
|
|
123
144
|
&-subtle{
|