@everchron/ec-shards 0.7.14 → 0.7.17
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 +129 -27
- package/dist/ec-shards.common.js.map +1 -1
- package/dist/ec-shards.css +1 -1
- package/dist/ec-shards.umd.js +129 -27
- 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/index.js +2 -0
- package/src/components/layout-directory/layout-directory.vue +85 -0
- package/src/components/overlay/overlay.vue +15 -1
- package/src/stories/layout-directory/layout-directory.stories.js +27 -0
- package/src/stories/layout-directory/layout-directory.stories.mdx +50 -0
package/package.json
CHANGED
package/src/components/index.js
CHANGED
|
@@ -54,6 +54,7 @@ import EcsJumperDocument from "./jumper-document/jumper-document.vue"
|
|
|
54
54
|
import EcsJumperIndex from "./jumper-index/jumper-index.vue"
|
|
55
55
|
import EcsJumperPage from "./jumper-page/jumper-page.vue"
|
|
56
56
|
import EcsLayoutIndex from "./layout-index/layout-index.vue"
|
|
57
|
+
import EcsLayoutDirectory from "./layout-directory/layout-directory.vue"
|
|
57
58
|
import EcsMap from "./map/map.vue"
|
|
58
59
|
import EcsModal from "./modal/modal.vue"
|
|
59
60
|
import EcsModalHeader from "./modal-header/modal-header.vue"
|
|
@@ -158,6 +159,7 @@ const Components = {
|
|
|
158
159
|
EcsJumperIndex,
|
|
159
160
|
EcsJumperPage,
|
|
160
161
|
EcsLayoutIndex,
|
|
162
|
+
EcsLayoutDirectory,
|
|
161
163
|
EcsMap,
|
|
162
164
|
EcsModal,
|
|
163
165
|
EcsModalHeader,
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="ecs-directory-layout">
|
|
3
|
+
|
|
4
|
+
<slot name="toolbar"></slot>
|
|
5
|
+
<slot name="action-toolbar"></slot>
|
|
6
|
+
|
|
7
|
+
<div class="ecs-directory-layout-wrap">
|
|
8
|
+
<div class="ecs-directory-layout-contents">
|
|
9
|
+
<div v-if="$slots.directory" class="ecs-directory-layout-directory">
|
|
10
|
+
<slot name="directory"></slot>
|
|
11
|
+
</div>
|
|
12
|
+
<div class="ecs-directory-layout-entry scrollbar" :class="[$slots.sidebar ? 'has-sidebar' : '']">
|
|
13
|
+
<slot></slot>
|
|
14
|
+
</div>
|
|
15
|
+
<div v-if="$slots.sidebar" class="ecs-directory-layout-sidebar">
|
|
16
|
+
<slot name="sidebar"></slot>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
</template>
|
|
22
|
+
|
|
23
|
+
<script>
|
|
24
|
+
export default {
|
|
25
|
+
props: {
|
|
26
|
+
overlaySidebar: {
|
|
27
|
+
type: Boolean,
|
|
28
|
+
default: false
|
|
29
|
+
},
|
|
30
|
+
indent: {
|
|
31
|
+
type: Boolean,
|
|
32
|
+
default: false
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
</script>
|
|
37
|
+
|
|
38
|
+
<style lang="scss" scoped>
|
|
39
|
+
@import "../tokens/tokens";
|
|
40
|
+
@import "../mixins/svg-uri";
|
|
41
|
+
|
|
42
|
+
.ecs-directory-layout{
|
|
43
|
+
display: flex;
|
|
44
|
+
flex-direction: column;
|
|
45
|
+
width: 100%;
|
|
46
|
+
height: calc(100vh - #{$header_height});
|
|
47
|
+
background: #FFF;
|
|
48
|
+
|
|
49
|
+
&-wrap{
|
|
50
|
+
flex: 1;
|
|
51
|
+
display: flex;
|
|
52
|
+
overflow: hidden;
|
|
53
|
+
width: 100%;
|
|
54
|
+
height: 100%;
|
|
55
|
+
transition: .3s;
|
|
56
|
+
position: relative;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&-contents{
|
|
60
|
+
flex: 1;
|
|
61
|
+
display: flex;
|
|
62
|
+
max-width: 100%;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&-entry{
|
|
66
|
+
flex: 1;
|
|
67
|
+
overflow: auto;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&-directory{
|
|
71
|
+
flex-shrink: 0;
|
|
72
|
+
width: 25%;
|
|
73
|
+
max-width: 440px;
|
|
74
|
+
border-right: 1px solid $gray-4;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&-sidebar{
|
|
78
|
+
position: absolute;
|
|
79
|
+
z-index: 5;
|
|
80
|
+
right: 0;
|
|
81
|
+
top: 0;
|
|
82
|
+
bottom: 0;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
</style>
|
|
@@ -12,7 +12,17 @@
|
|
|
12
12
|
<div v-if="$slots.headercontrols" class="ecs-overlay-header-controls">
|
|
13
13
|
<slot name="headercontrols"></slot>
|
|
14
14
|
</div>
|
|
15
|
-
<ecs-button-toolbar
|
|
15
|
+
<ecs-button-toolbar
|
|
16
|
+
v-if="$slots.sidebar && width <= 1500"
|
|
17
|
+
@click="sidebarToggle"
|
|
18
|
+
:icon="sidebarIcon"
|
|
19
|
+
:title="showSidebar ? 'Hide ' + sidebarTitle : 'Show ' + sidebarTitle"
|
|
20
|
+
:active="showSidebar"
|
|
21
|
+
:badge="sidebarIconBadge"
|
|
22
|
+
:badge-color="sidebarIconBadgeColor"
|
|
23
|
+
:loading="sidebarIconLoading"
|
|
24
|
+
class="sidebar-button"
|
|
25
|
+
/>
|
|
16
26
|
<ecs-button-toolbar @click="$emit('close')" :disabled="closeDisabled" icon="close">{{ closeText }}</ecs-button-toolbar>
|
|
17
27
|
</div>
|
|
18
28
|
<div ref="content" class="ecs-overlay-content scrollbar">
|
|
@@ -103,6 +113,10 @@
|
|
|
103
113
|
sidebarIconBadgeColor: {
|
|
104
114
|
type: String,
|
|
105
115
|
default: '#FF4B62'
|
|
116
|
+
},
|
|
117
|
+
sidebarIconLoading: {
|
|
118
|
+
type: Boolean,
|
|
119
|
+
default: false
|
|
106
120
|
}
|
|
107
121
|
},
|
|
108
122
|
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import EcsLayoutDirectory from '@components/layout-directory/layout-directory';
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Layouts/Directory',
|
|
5
|
+
component: EcsLayoutDirectory
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
export const directory = () => ({
|
|
9
|
+
components: { EcsLayoutDirectory },
|
|
10
|
+
template: `<ecs-layout-directory>
|
|
11
|
+
<template slot="toolbar">
|
|
12
|
+
<div>toolbar</div>
|
|
13
|
+
</template>
|
|
14
|
+
<template slot="action-toolbar">
|
|
15
|
+
<div>action-toolbar</div>
|
|
16
|
+
</template>
|
|
17
|
+
<template slot="directory">
|
|
18
|
+
<div>directory</div>
|
|
19
|
+
</template>
|
|
20
|
+
|
|
21
|
+
<div>content slot</div>
|
|
22
|
+
|
|
23
|
+
<template slot="sidebar">
|
|
24
|
+
<div>sidebar</div>
|
|
25
|
+
</template>
|
|
26
|
+
</ecs-layout-directory>`,
|
|
27
|
+
});
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
|
|
2
|
+
import EcsLayoutDirectory from '@components/layout-directory/layout-directory';
|
|
3
|
+
import * as stories from './layout-directory.stories.js';
|
|
4
|
+
|
|
5
|
+
<Meta
|
|
6
|
+
title="Layouts/Directory"
|
|
7
|
+
component={EcsLayoutDirectory} />
|
|
8
|
+
|
|
9
|
+
# Directory Layout `EcsLayoutDirectory`
|
|
10
|
+
|
|
11
|
+
Directory layout are used for pages where you do a pre-selection of an item in a sidebar, and the details of that item are shown in the right content area. Consists of a large scrollable content area, and the following optional components:
|
|
12
|
+
|
|
13
|
+
- toolbar
|
|
14
|
+
- action toolbar
|
|
15
|
+
- left sidebar (the directory)
|
|
16
|
+
- right sidebar (filters)
|
|
17
|
+
|
|
18
|
+
The `overlay-sidebar` attribute sets the sidebar container to be fixed and overlaying other content when expanded (this is used for content areas that need a lot of space, like large tables).
|
|
19
|
+
|
|
20
|
+
<Canvas withSource="none" withToolbar={true}>
|
|
21
|
+
<Story name="Directory" height="900px">
|
|
22
|
+
{stories.directory()}
|
|
23
|
+
</Story>
|
|
24
|
+
</Canvas>
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
```js
|
|
28
|
+
<ecs-layout-directory>
|
|
29
|
+
<template slot="toolbar">
|
|
30
|
+
<div>toolbar</div>
|
|
31
|
+
</template>
|
|
32
|
+
<template slot="action-toolbar">
|
|
33
|
+
<div>action-toolbar</div>
|
|
34
|
+
</template>
|
|
35
|
+
<template slot="directory">
|
|
36
|
+
<div>directory</div>
|
|
37
|
+
</template>
|
|
38
|
+
|
|
39
|
+
<div>content slot</div>
|
|
40
|
+
|
|
41
|
+
<template slot="sidebar">
|
|
42
|
+
<div>sidebar</div>
|
|
43
|
+
</template>
|
|
44
|
+
</ecs-layout-directory>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
## Props and Slots
|
|
49
|
+
|
|
50
|
+
<ArgsTable of={EcsLayoutDirectory} />
|