@everchron/ec-shards 3.2.0 → 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 +1136 -55
- package/dist/ec-shards.common.js.map +1 -1
- package/dist/ec-shards.css +1 -1
- package/dist/ec-shards.umd.js +1136 -55
- 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/select/select.vue +24 -3
- package/src/components/separator/separator.vue +93 -0
- package/src/stories/Changelog.stories.mdx +10 -0
- package/src/stories/fill-icon/fill-icon.stories.js +24 -0
- package/src/stories/flag/flag.stories.js +6 -1
- 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,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{
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="ecs-separator" :class="classes" :style="{margin: marginStyles, width: width, height: height}" />
|
|
3
|
+
</template>
|
|
4
|
+
|
|
5
|
+
<script>
|
|
6
|
+
export default {
|
|
7
|
+
props: {
|
|
8
|
+
/** Determines if the separator line is horinzontally or vertically shown. */
|
|
9
|
+
type: {
|
|
10
|
+
type: String,
|
|
11
|
+
default: 'horizontal',
|
|
12
|
+
validator: v => ['horizontal', 'vertical'].includes(v)
|
|
13
|
+
},
|
|
14
|
+
/** Determines the color strength of the line. */
|
|
15
|
+
strength: {
|
|
16
|
+
type: String,
|
|
17
|
+
default: 'medium',
|
|
18
|
+
validator: v => ['soft', 'medium', 'strong'].includes(v)
|
|
19
|
+
},
|
|
20
|
+
/** Determines to margin (top/bottom for horizontal, left/right for vertical). If a `Number` is passed, the margin will used for both top/bottom or left/right. If an `Array` is passed (eg. `[8, 16]`), you can set individual margins for each side (CSS shorthand syntax). */
|
|
21
|
+
margin: {
|
|
22
|
+
type: [Number, Array],
|
|
23
|
+
default: 0
|
|
24
|
+
},
|
|
25
|
+
/** Determines the width of the separator. Any valid css (px, %) value possible. */
|
|
26
|
+
width: {
|
|
27
|
+
type: String
|
|
28
|
+
},
|
|
29
|
+
/** Determines the height of the separator. Any valid css (px, %) value possible. Vertical separators typically require a pixel value height. */
|
|
30
|
+
height: {
|
|
31
|
+
type: String
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
|
|
35
|
+
computed: {
|
|
36
|
+
classes(){
|
|
37
|
+
return 'ecs-separator-' + this.type + ' ecs-separator-' + this.strength
|
|
38
|
+
},
|
|
39
|
+
|
|
40
|
+
marginStyles(){
|
|
41
|
+
if(typeof(this.margin) === 'number') {
|
|
42
|
+
if(this.type === 'horizontal')
|
|
43
|
+
return this.margin + 'px 0 ' + this.margin + 'px 0'
|
|
44
|
+
else
|
|
45
|
+
return '0 ' + this.margin + 'px 0 ' + this.margin + 'px'
|
|
46
|
+
} else if(typeof(this.margin) === 'object') {
|
|
47
|
+
const iterator = this.margin.values()
|
|
48
|
+
let margins
|
|
49
|
+
let iteration = 0
|
|
50
|
+
for (const value of iterator) {
|
|
51
|
+
if(iteration == 0)
|
|
52
|
+
margins = value + 'px '
|
|
53
|
+
else
|
|
54
|
+
margins = margins + value + 'px '
|
|
55
|
+
iteration++
|
|
56
|
+
}
|
|
57
|
+
return margins
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
</script>
|
|
63
|
+
|
|
64
|
+
<style lang="scss" scoped>
|
|
65
|
+
@import "../../tokens/build/scss/tokens.scss";
|
|
66
|
+
|
|
67
|
+
.ecs-separator{
|
|
68
|
+
border-radius: 1px;
|
|
69
|
+
|
|
70
|
+
&-soft{
|
|
71
|
+
background-color: $color-gray-2;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&-medium{
|
|
75
|
+
background-color: $color-gray-3;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&-strong{
|
|
79
|
+
background-color: $color-gray-4;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
&-horizontal{
|
|
83
|
+
width: 100%;
|
|
84
|
+
height: 1px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&-vertical{
|
|
88
|
+
height: 100%;
|
|
89
|
+
width: 1px;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
</style>
|
|
93
|
+
|
|
@@ -6,6 +6,16 @@ import { Meta } from '@storybook/addon-docs/blocks';
|
|
|
6
6
|
Changelog
|
|
7
7
|
</h1>
|
|
8
8
|
|
|
9
|
+
## Version 3.3.0 (12 January 2023)
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
- Added new EcsFillIcon component
|
|
14
|
+
- Added `login-key` icon
|
|
15
|
+
- Added EU flag icon
|
|
16
|
+
- Added new `placeholder` prop support for EcsSelect component
|
|
17
|
+
- Added new EcsSeparator component
|
|
18
|
+
|
|
9
19
|
## Version 3.2.0 (11 January 2023)
|
|
10
20
|
|
|
11
21
|
### Fixes
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import EcsFillIcon from '@components/fill-icon/fill-icon';
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Icons/Fill Icon',
|
|
5
|
+
component: EcsFillIcon
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
export const fillIcon = () => ({
|
|
9
|
+
components: { EcsFillIcon },
|
|
10
|
+
template: `<main>
|
|
11
|
+
<ecs-fill-icon type="login-sso-azure" />
|
|
12
|
+
<ecs-fill-icon type="login-sso-okta" />
|
|
13
|
+
<ecs-fill-icon type="login-email" />
|
|
14
|
+
<ecs-fill-icon type="login-email-mfa" :width="23" />
|
|
15
|
+
</main>`,
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
export const fillIconSizes = () => ({
|
|
19
|
+
components: { EcsFillIcon },
|
|
20
|
+
template: `<main>
|
|
21
|
+
<ecs-fill-icon type="login-sso-azure" :width="40" />
|
|
22
|
+
<ecs-fill-icon type="login-sso-azure" :height="40" :width="40" />
|
|
23
|
+
</main>`,
|
|
24
|
+
});
|
|
@@ -7,5 +7,10 @@ export default {
|
|
|
7
7
|
|
|
8
8
|
export const flag = () => ({
|
|
9
9
|
components: { EcsFlag },
|
|
10
|
-
template: `<
|
|
10
|
+
template: `<main>
|
|
11
|
+
<ecs-flag code="us" />
|
|
12
|
+
<ecs-flag code="eu" />
|
|
13
|
+
<ecs-flag code="gb" />
|
|
14
|
+
<ecs-flag code="au" />
|
|
15
|
+
</main>`,
|
|
11
16
|
});
|
|
@@ -89,3 +89,19 @@ export const selectNaked = () => ({
|
|
|
89
89
|
</ecs-select>
|
|
90
90
|
</div>`,
|
|
91
91
|
});
|
|
92
|
+
|
|
93
|
+
export const selectPlaceholders = () => ({
|
|
94
|
+
components: { EcsSelect },
|
|
95
|
+
template: `<div>
|
|
96
|
+
<ecs-select placeholder="Placeholder" class="mb-4">
|
|
97
|
+
<option value="admin">Admin</option>
|
|
98
|
+
<option value="basic">Basic</option>
|
|
99
|
+
<option value="guest">Guest</option>
|
|
100
|
+
</ecs-select>
|
|
101
|
+
<ecs-select placeholder="Placeholder" subtle>
|
|
102
|
+
<option value="admin">Admin</option>
|
|
103
|
+
<option value="basic">Basic</option>
|
|
104
|
+
<option value="guest">Guest</option>
|
|
105
|
+
</ecs-select>
|
|
106
|
+
</div>`,
|
|
107
|
+
});
|
|
Binary file
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import EcsSeparator from '@components/separator/separator';
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Layout/Separator',
|
|
5
|
+
component: EcsSeparator
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
export const separator = () => ({
|
|
9
|
+
components: { EcsSeparator },
|
|
10
|
+
template: `<div>
|
|
11
|
+
<ecs-separator :margin="20" />
|
|
12
|
+
<ecs-separator type="vertical" height="24px" />
|
|
13
|
+
</div>`,
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
export const separatorStrengths = () => ({
|
|
17
|
+
components: { EcsSeparator },
|
|
18
|
+
template: `<div>
|
|
19
|
+
<ecs-separator strength="soft" :margin="20" />
|
|
20
|
+
<ecs-separator strength="medium" :margin="20" />
|
|
21
|
+
<ecs-separator strength="strong" :margin="20" />
|
|
22
|
+
</div>`,
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
export const separatorMargins = () => ({
|
|
26
|
+
components: { EcsSeparator },
|
|
27
|
+
template: `<div>
|
|
28
|
+
<ecs-separator :margin="20" />
|
|
29
|
+
<ecs-separator type="vertical" :margin="20" height="24px" />
|
|
30
|
+
<ecs-separator :margin="[20, 40]" />
|
|
31
|
+
<ecs-separator type="vertical" :margin="[8, 16, 12, 20]" height="24px" />
|
|
32
|
+
</div>`,
|
|
33
|
+
});
|