@everchron/ec-shards 0.7.50 → 0.7.53
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 +228 -45
- package/dist/ec-shards.common.js.map +1 -1
- package/dist/ec-shards.css +1 -1
- package/dist/ec-shards.umd.js +228 -45
- 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/excerpt-snippet/excerpt-snippet.vue +219 -0
- package/src/components/index.js +2 -0
- package/src/components/layout-data-table/layout-data-table.vue +136 -0
- package/src/components/party-entry/party-entry.vue +89 -18
- package/src/stories/excerpt-snippet/excerpt-snippet.stories.js +50 -0
- package/src/stories/excerpt-snippet/excerpt-snippet.stories.mdx +82 -0
- package/src/stories/layout-data-table/layout-data-table.stories.js +19 -0
- package/src/stories/layout-data-table/layout-data-table.stories.mdx +36 -0
- package/src/stories/party-entry/party-entry.stories.js +15 -0
- package/src/stories/party-entry/party-entry.stories.mdx +32 -0
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
|
|
2
|
+
import EcsLayoutDataTable from '@components/layout-data-table/layout-data-table';
|
|
3
|
+
import * as stories from './layout-data-table.stories.js';
|
|
4
|
+
|
|
5
|
+
<Meta
|
|
6
|
+
title="Layouts/Data Table"
|
|
7
|
+
component={EcsLayoutDataTable} />
|
|
8
|
+
|
|
9
|
+
# Data Table `EcsLayoutDataTable`
|
|
10
|
+
|
|
11
|
+
The data table layout is commonly used in App Settings pages. It always features a larger content area (which is most of the time filled by a full width data table component) and an optional sidebar that can expand or collapse.
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
<Canvas withSource="none" withToolbar={true}>
|
|
15
|
+
<Story name="Data Table" height="900px">
|
|
16
|
+
{stories.dataTable()}
|
|
17
|
+
</Story>
|
|
18
|
+
</Canvas>
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
```js
|
|
22
|
+
<ecs-layout-data-table sidebar-expanded>
|
|
23
|
+
<template slot="toolbar">toolbar</template>
|
|
24
|
+
<template slot="actionbar">actionbar</template>
|
|
25
|
+
|
|
26
|
+
table
|
|
27
|
+
|
|
28
|
+
<template slot="sidebarheader">sidebarheader</template>
|
|
29
|
+
<template slot="sidebarcontent">sidebar</template>
|
|
30
|
+
</ecs-layout-data-table>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
## Props and Slots
|
|
35
|
+
|
|
36
|
+
<ArgsTable of={EcsLayoutDataTable} />
|
|
@@ -45,3 +45,18 @@ export const partyEntryWithBackground = () => ({
|
|
|
45
45
|
<ecs-party-entry background icon="document" party="unaffiliated">Unaffiliated</ecs-party-entry>
|
|
46
46
|
</main>`,
|
|
47
47
|
});
|
|
48
|
+
|
|
49
|
+
export const partyEntryAnnotations = () => ({
|
|
50
|
+
components: { EcsPartyEntry },
|
|
51
|
+
template: `<main>
|
|
52
|
+
<ecs-party-entry background icon="marker" :annotation-color="1">Annotation</ecs-party-entry>
|
|
53
|
+
<ecs-party-entry background icon="marker" :annotation-color="2">Annotation</ecs-party-entry>
|
|
54
|
+
<ecs-party-entry background icon="marker" :annotation-color="3">Annotation</ecs-party-entry>
|
|
55
|
+
<ecs-party-entry background icon="marker" :annotation-color="4">Annotation</ecs-party-entry>
|
|
56
|
+
<ecs-party-entry background icon="marker" :annotation-color="5">Annotation</ecs-party-entry>
|
|
57
|
+
<ecs-party-entry background icon="marker" :annotation-color="6">Annotation</ecs-party-entry>
|
|
58
|
+
<ecs-party-entry background icon="marker" :annotation-color="7">Annotation</ecs-party-entry>
|
|
59
|
+
<ecs-party-entry background icon="marker" :annotation-color="8">Annotation</ecs-party-entry>
|
|
60
|
+
<ecs-party-entry background icon="marker" :annotation-color="9">Annotation</ecs-party-entry>
|
|
61
|
+
</main>`,
|
|
62
|
+
});
|
|
@@ -71,6 +71,38 @@ Use the `party` attribute to set the party side. The following sides are availab
|
|
|
71
71
|
<ecs-party-entry icon="document" party="unaffiliated">Unaffiliated</ecs-party-entry>
|
|
72
72
|
```
|
|
73
73
|
|
|
74
|
+
## Annotations
|
|
75
|
+
|
|
76
|
+
By not using the `party` prop, but `annotation-color` prop instead, you can show the entry tag with a defined annotation mark color. Note that the annotation colors must be a `Number` between `1` and `9` - mapping to the Everchron mark colors table.
|
|
77
|
+
|
|
78
|
+
+ Yellow: `1`
|
|
79
|
+
+ Orange: `2`
|
|
80
|
+
+ Lime: `3`
|
|
81
|
+
+ Cyan: `4`
|
|
82
|
+
+ Blue: `5`
|
|
83
|
+
+ Indigo: `6`
|
|
84
|
+
+ Pink: `7`
|
|
85
|
+
+ Brown: `8`
|
|
86
|
+
+ Grey: `9`
|
|
87
|
+
|
|
88
|
+
<Canvas withSource="none" withToolbar={true}>
|
|
89
|
+
<Story name="Party Entry Annotations" height="80px">
|
|
90
|
+
{stories.partyEntryAnnotations()}
|
|
91
|
+
</Story>
|
|
92
|
+
</Canvas>
|
|
93
|
+
|
|
94
|
+
```js
|
|
95
|
+
<ecs-party-entry background icon="marker" :annotation-color="1">Annotation</ecs-party-entry>
|
|
96
|
+
<ecs-party-entry background icon="marker" :annotation-color="2">Annotation</ecs-party-entry>
|
|
97
|
+
<ecs-party-entry background icon="marker" :annotation-color="3">Annotation</ecs-party-entry>
|
|
98
|
+
<ecs-party-entry background icon="marker" :annotation-color="4">Annotation</ecs-party-entry>
|
|
99
|
+
<ecs-party-entry background icon="marker" :annotation-color="5">Annotation</ecs-party-entry>
|
|
100
|
+
<ecs-party-entry background icon="marker" :annotation-color="6">Annotation</ecs-party-entry>
|
|
101
|
+
<ecs-party-entry background icon="marker" :annotation-color="7">Annotation</ecs-party-entry>
|
|
102
|
+
<ecs-party-entry background icon="marker" :annotation-color="8">Annotation</ecs-party-entry>
|
|
103
|
+
<ecs-party-entry background icon="marker" :annotation-color="9">Annotation</ecs-party-entry>
|
|
104
|
+
```
|
|
105
|
+
|
|
74
106
|
## Props and Slots
|
|
75
107
|
|
|
76
108
|
<ArgsTable of={EcsPartyEntry} />
|