@everchron/ec-shards 0.7.4 → 0.7.7
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 +57 -54
- package/dist/ec-shards.common.js.map +1 -1
- package/dist/ec-shards.css +1 -1
- package/dist/ec-shards.umd.js +57 -54
- 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/sidebar-footer/sidebar-footer.vue +19 -2
- package/src/components/switch/switch.vue +2 -0
- package/src/stories/sidebar-footer/sidebar-footer.stories.js +11 -0
- package/src/stories/sidebar-footer/sidebar-footer.stories.mdx +22 -1
package/package.json
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="ecs-sidebar-footer">
|
|
2
|
+
<div class="ecs-sidebar-footer" :class="[$slots.extension ? 'has-extension' : '']">
|
|
3
3
|
<slot name="alert"></slot>
|
|
4
|
+
<div v-if="$slots.extension" class="ecs-sidebar-footer-extension" :class="[condensed ? 'condensed' : '']">
|
|
5
|
+
<slot name="extension"></slot>
|
|
6
|
+
</div>
|
|
4
7
|
<div class="ecs-sidebar-footer-inner" :class="[condensed ? 'ecs-sidebar-footer-inner-condensed' : '']">
|
|
5
8
|
<slot></slot>
|
|
6
9
|
</div>
|
|
@@ -24,7 +27,7 @@ export default {
|
|
|
24
27
|
|
|
25
28
|
.ecs-sidebar-footer{
|
|
26
29
|
background: #FFF;
|
|
27
|
-
border-top: 1px solid
|
|
30
|
+
border-top: 1px solid $gray-3;
|
|
28
31
|
|
|
29
32
|
&-inner{
|
|
30
33
|
padding: 20px;
|
|
@@ -36,5 +39,19 @@ export default {
|
|
|
36
39
|
padding: 7px 15px;
|
|
37
40
|
}
|
|
38
41
|
}
|
|
42
|
+
|
|
43
|
+
&.has-extension{
|
|
44
|
+
border-top: 1px solid $gray-4;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&-extension{
|
|
48
|
+
padding: 0 20px;
|
|
49
|
+
border-bottom: 1px solid $gray-3;
|
|
50
|
+
position: relative;
|
|
51
|
+
|
|
52
|
+
&.condensed{
|
|
53
|
+
padding: 0 15px;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
39
56
|
}
|
|
40
57
|
</style>
|
|
@@ -15,6 +15,17 @@ export const footer = () => ({
|
|
|
15
15
|
</ecs-sidebar-footer>`
|
|
16
16
|
});
|
|
17
17
|
|
|
18
|
+
export const footerWithExtension = () => ({
|
|
19
|
+
components: { EcsSidebarFooter, EcsButton, EcsAlert },
|
|
20
|
+
template: `<ecs-sidebar-footer condensed>
|
|
21
|
+
<template slot="extension">
|
|
22
|
+
This is an extension row.
|
|
23
|
+
</template>
|
|
24
|
+
<ecs-button type="secondary">Cancel</ecs-button>
|
|
25
|
+
<ecs-button type="primary" icon="add-plus">Add Version</ecs-button>
|
|
26
|
+
</ecs-sidebar-footer>`
|
|
27
|
+
});
|
|
28
|
+
|
|
18
29
|
export const footerWithAlert = () => ({
|
|
19
30
|
components: { EcsSidebarFooter, EcsButton, EcsAlert },
|
|
20
31
|
template: `<ecs-sidebar-footer>
|
|
@@ -23,6 +23,27 @@ The Sidebar Footer is a sub component that should only be used within the EcsSid
|
|
|
23
23
|
</ecs-sidebar-footer>
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
+
### With Extension Row
|
|
27
|
+
|
|
28
|
+
<Canvas withSource="none" withToolbar={true}>
|
|
29
|
+
<Story name="Footer With Extension" height="100px">
|
|
30
|
+
{stories.footerWithExtension()}
|
|
31
|
+
</Story>
|
|
32
|
+
</Canvas>
|
|
33
|
+
|
|
34
|
+
```js
|
|
35
|
+
<ecs-sidebar-footer condensed>
|
|
36
|
+
<template slot="extension">
|
|
37
|
+
This is an extension row.
|
|
38
|
+
</template>
|
|
39
|
+
<ecs-button type="secondary">Cancel</ecs-button>
|
|
40
|
+
<ecs-button type="primary" icon="add-plus">Add Version</ecs-button>
|
|
41
|
+
</ecs-sidebar-footer>
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
### With Alert Row
|
|
46
|
+
|
|
26
47
|
<Canvas withSource="none" withToolbar={true}>
|
|
27
48
|
<Story name="Footer With Alert" height="100px">
|
|
28
49
|
{stories.footerWithAlert()}
|
|
@@ -41,4 +62,4 @@ The Sidebar Footer is a sub component that should only be used within the EcsSid
|
|
|
41
62
|
|
|
42
63
|
## Props and Slots
|
|
43
64
|
|
|
44
|
-
<ArgsTable of={EcsSidebarFooter} />
|
|
65
|
+
<ArgsTable of={EcsSidebarFooter} />
|