@everchron/ec-shards 1.2.0 → 1.2.3
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 +168 -87
- package/dist/ec-shards.common.js.map +1 -1
- package/dist/ec-shards.css +1 -1
- package/dist/ec-shards.umd.js +168 -87
- 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/card-view-settings.svg +13 -0
- package/src/assets/icons/check.svg +3 -0
- package/src/assets/icons/citation.svg +7 -0
- package/src/assets/icons/sticker-error.svg +1 -1
- package/src/assets/icons/sticker-loading.svg +1 -1
- package/src/assets/icons/sticker-success.svg +1 -1
- package/src/assets/icons/sticker-warning-critical.svg +1 -1
- package/src/assets/icons/sticker-warning.svg +1 -1
- package/src/components/flex/flex-row.vue +5 -1
- package/src/components/overlay/overlay.vue +1 -1
- package/src/components/tabs/tabs.vue +14 -1
- package/src/stories/Changelog.stories.mdx +22 -0
- package/src/stories/flex/flex-row.stories.js +9 -0
- package/src/stories/tabs/tabs.stories.js +1 -1
package/package.json
CHANGED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<rect vector-effect="non-scaling-stroke" x="6" y="6" width="18" height="7" rx="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path vector-effect="non-scaling-stroke" d="M22.5 16H8C6.89543 16 6 16.8954 6 18V21C6 22.1046 6.89543 23 8 23H16" stroke="currentColor" stroke-linecap="round"/>
|
|
4
|
+
<path vector-effect="non-scaling-stroke" d="M24.1213 19.8787C25.2929 21.0502 25.2929 22.9497 24.1213 24.1213C22.9497 25.2929 21.0502 25.2929 19.8787 24.1213C18.7071 22.9497 18.7071 21.0502 19.8787 19.8787C21.0502 18.7071 22.9497 18.7071 24.1213 19.8787Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<path vector-effect="non-scaling-stroke" d="M22 19V18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
<path vector-effect="non-scaling-stroke" d="M22 25V26" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
7
|
+
<path vector-effect="non-scaling-stroke" d="M25 22H26" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
8
|
+
<path vector-effect="non-scaling-stroke" d="M19 22H18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
9
|
+
<path vector-effect="non-scaling-stroke" d="M24.12 19.88L24.83 19.17" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
10
|
+
<path vector-effect="non-scaling-stroke" d="M19.88 24.12L19.17 24.83" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
11
|
+
<path vector-effect="non-scaling-stroke" d="M24.12 24.12L24.83 24.83" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
12
|
+
<path vector-effect="non-scaling-stroke" d="M19.88 19.88L19.17 19.17" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
13
|
+
</svg>
|
|
@@ -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
|
+
<rect vector-effect="non-scaling-stroke" x="6" y="10" width="18" height="11" rx="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path vector-effect="non-scaling-stroke" d="M8 7H18" stroke="currentColor" stroke-linecap="round"/>
|
|
4
|
+
<path vector-effect="non-scaling-stroke" d="M10 14H20" stroke="currentColor" stroke-linecap="round"/>
|
|
5
|
+
<path vector-effect="non-scaling-stroke" d="M10 17H18" stroke="currentColor" stroke-linecap="round"/>
|
|
6
|
+
<path vector-effect="non-scaling-stroke" d="M8 24H18" stroke="currentColor" stroke-linecap="round"/>
|
|
7
|
+
</svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg
|
|
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="#ff3750" 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
|
|
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="#0b71eb" fill-rule="nonzero"/></g></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg
|
|
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="#0eba65" 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
|
|
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>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg
|
|
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="#f1b251" 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-flex-row" :class="[directionClass, justifyClass, alignClass, wrapClass]">
|
|
2
|
+
<div class="ecs-flex-row" :class="[directionClass, justifyClass, alignClass, wrapClass]" :style="{columnGap: gap + 'px'}">
|
|
3
3
|
<slot></slot>
|
|
4
4
|
</div>
|
|
5
5
|
</template>
|
|
@@ -29,6 +29,10 @@
|
|
|
29
29
|
wrap: {
|
|
30
30
|
type: Boolean,
|
|
31
31
|
default: false
|
|
32
|
+
},
|
|
33
|
+
/** Determines the spacing between flex columns inside the row. Accepts only pixel values. */
|
|
34
|
+
gap: {
|
|
35
|
+
type: Number
|
|
32
36
|
}
|
|
33
37
|
},
|
|
34
38
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="ecs-tab-content" :class="flex ? 'ecs-tab-content-flex' : ''">
|
|
2
|
+
<div class="ecs-tab-content" :class="[flex ? 'ecs-tab-content-flex' : '', fill ? 'ecs-tab-content-fill' : '']">
|
|
3
3
|
<slot></slot>
|
|
4
4
|
</div>
|
|
5
5
|
</template>
|
|
@@ -11,6 +11,11 @@
|
|
|
11
11
|
flex: {
|
|
12
12
|
type: Boolean,
|
|
13
13
|
default: false
|
|
14
|
+
},
|
|
15
|
+
/** Sets the height of the tabs area to 100%. Also sets the inner tab height to 100%. */
|
|
16
|
+
fill: {
|
|
17
|
+
type: Boolean,
|
|
18
|
+
default: false
|
|
14
19
|
}
|
|
15
20
|
}
|
|
16
21
|
}
|
|
@@ -24,4 +29,12 @@
|
|
|
24
29
|
height: 100%;
|
|
25
30
|
min-height: 0;
|
|
26
31
|
}
|
|
32
|
+
|
|
33
|
+
.ecs-tab-content-fill{
|
|
34
|
+
min-height: 100%;
|
|
35
|
+
|
|
36
|
+
.ecs-tab-pane{
|
|
37
|
+
min-height: 100%;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
27
40
|
</style>
|
|
@@ -6,6 +6,28 @@ import { Meta } from '@storybook/addon-docs/blocks';
|
|
|
6
6
|
Changelog
|
|
7
7
|
</h1>
|
|
8
8
|
|
|
9
|
+
## Version 1.2.3 (25 August 2022)
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
- Added `gap` prop to EcsFlexRow component.
|
|
14
|
+
|
|
15
|
+
### Changes
|
|
16
|
+
|
|
17
|
+
- Increased the EcsOverlay content area width from 900 to 920 pixels.
|
|
18
|
+
|
|
19
|
+
## Version 1.2.2 (25 August 2022)
|
|
20
|
+
|
|
21
|
+
### Features
|
|
22
|
+
|
|
23
|
+
- Added `fill` prop to EcsTabs component.
|
|
24
|
+
|
|
25
|
+
## Version 1.2.1 (25 August 2022)
|
|
26
|
+
|
|
27
|
+
### Features
|
|
28
|
+
|
|
29
|
+
- Added icons: `citation`, `card-view-settings`, `check`.
|
|
30
|
+
|
|
9
31
|
## Version 1.2.0 (24 August 2022)
|
|
10
32
|
|
|
11
33
|
### Features
|
|
@@ -15,6 +15,15 @@ export const flexRow = () => ({
|
|
|
15
15
|
</ecs-flex-row>`,
|
|
16
16
|
});
|
|
17
17
|
|
|
18
|
+
export const flexRowColumnGap = () => ({
|
|
19
|
+
components: { EcsFlexRow, EcsFlexCol },
|
|
20
|
+
template: `<ecs-flex-row class="highlight" :gap="16">
|
|
21
|
+
<div>Flex Item 1</div>
|
|
22
|
+
<div>Flex Item 2</div>
|
|
23
|
+
<div>Flex Item 3</div>
|
|
24
|
+
</ecs-flex-row>`,
|
|
25
|
+
});
|
|
26
|
+
|
|
18
27
|
export const flexRowDirection = () => ({
|
|
19
28
|
components: { EcsFlexRow, EcsFlexCol },
|
|
20
29
|
template: `<div>
|
|
@@ -28,7 +28,7 @@ export const tabs = () => ({
|
|
|
28
28
|
<ecs-tab-button @click="tabIndex = 2" :show="tabIndex == 2">Calendar</ecs-tab-button>
|
|
29
29
|
<ecs-tab-button @click="tabIndex = 3" :show="tabIndex == 3">Versions</ecs-tab-button>
|
|
30
30
|
</ecs-tab-bar>
|
|
31
|
-
<ecs-tabs>
|
|
31
|
+
<ecs-tabs fill>
|
|
32
32
|
<ecs-tab :show="tabIndex == 1">First Tab</ecs-tab>
|
|
33
33
|
<ecs-tab :show="tabIndex == 2">Second Tab</ecs-tab>
|
|
34
34
|
<ecs-tab :show="tabIndex == 3">Third Tab</ecs-tab>
|