@everchron/ec-shards 0.7.18 → 0.7.21

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.
Files changed (14) hide show
  1. package/dist/ec-shards.common.js +137 -112
  2. package/dist/ec-shards.common.js.map +1 -1
  3. package/dist/ec-shards.css +1 -1
  4. package/dist/ec-shards.umd.js +137 -112
  5. package/dist/ec-shards.umd.js.map +1 -1
  6. package/dist/ec-shards.umd.min.js +2 -2
  7. package/dist/ec-shards.umd.min.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/components/form-check/form-check.vue +6 -0
  10. package/src/components/tab/tab.vue +11 -0
  11. package/src/components/tabs/tabs.vue +17 -3
  12. package/src/components/tree-list-item/tree-list-item.vue +17 -4
  13. package/src/stories/tree-list-item/tree-list-item.stories.js +30 -17
  14. package/src/stories/tree-list-item/tree-list-item.stories.mdx +36 -15
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everchron/ec-shards",
3
- "version": "0.7.18",
3
+ "version": "0.7.21",
4
4
  "private": false,
5
5
  "description": "Everchron Shards UI Library",
6
6
  "repository": "https://github.com/everchron/ec-shards.git",
package/src/components/form-check/form-check.vue CHANGED
@@ -36,6 +36,12 @@
36
36
  &.stand-alone{
37
37
  margin-bottom: 0;
38
38
  width: 18px;
39
+
40
+ .ecs-form-check-label{
41
+ position: absolute;
42
+ width: 18px;
43
+ padding: 0;
44
+ }
39
45
  }
40
46
 
41
47
  &-inline{
package/src/components/tab/tab.vue CHANGED
@@ -27,5 +27,16 @@
27
27
  display: block;
28
28
  }
29
29
  }
30
+
31
+ &-flex{
32
+ > .ecs-tab-pane{
33
+ display: none;
34
+ height: 100%;
35
+
36
+ &.show{
37
+ display: flex;
38
+ }
39
+ }
40
+ }
30
41
  }
31
42
  </style>
package/src/components/tabs/tabs.vue CHANGED
@@ -1,12 +1,26 @@
1
1
  <template>
2
- <div class="ecs-tab-content">
2
+ <div class="ecs-tab-content" :class="flex ? 'ecs-tab-content-flex' : ''">
3
3
  <slot></slot>
4
4
  </div>
5
5
  </template>
6
6
 
7
+ <script>
8
+ export default {
9
+ props: {
10
+ flex: {
11
+ type: Boolean,
12
+ default: false
13
+ }
14
+ }
15
+ }
16
+ </script>
17
+
7
18
  <style lang="scss" scoped>
8
19
  @import "../tokens/tokens";
9
20
  @import "../mixins/svg-uri";
10
21
 
11
-
12
- </style>
22
+ .ecs-tab-content-flex{
23
+ height: 100%;
24
+ min-height: 0;
25
+ }
26
+ </style>
package/src/components/tree-list-item/tree-list-item.vue CHANGED
@@ -16,10 +16,17 @@
16
16
  @click="toggleCollapse" />
17
17
 
18
18
  <ecs-icon v-if="icon" :type="icon" :color="iconColor" :width="iconSize" :height="iconSize" />
19
+
20
+ <div v-if="$slots.control" class="ecs-tree-view-entry-control">
21
+ <slot name="control"></slot>
22
+ </div>
23
+
19
24
  <span @click="$emit('click', $event)" class="title">
20
25
  <slot></slot>
21
26
  </span>
22
- <span v-if="count" class="after small subtle">{{count}}</span>
27
+
28
+ <span v-if="afterLabel" class="after small subtle">{{afterLabel}}</span>
29
+
23
30
  <div v-if="$slots.actions" class="ecs-tree-view-entry-actions">
24
31
  <slot name="actions"></slot>
25
32
  </div>
@@ -56,7 +63,7 @@
56
63
  type: String,
57
64
  default: '#858E9E'
58
65
  },
59
- count: {
66
+ afterLabel: {
60
67
  type: [Number, String],
61
68
  default: null
62
69
  },
@@ -146,9 +153,10 @@
146
153
  position: relative;
147
154
 
148
155
  &-lg{
149
- padding-top: 2px;
150
- padding-bottom: 2px;
156
+ padding-top: 3px;
157
+ padding-bottom: 3px;
151
158
  margin-bottom: 4px;
159
+ font-size: 14px;
152
160
  }
153
161
 
154
162
  &.selectable{
@@ -222,6 +230,11 @@
222
230
  flex: 1;
223
231
  }
224
232
 
233
+ &-control{
234
+ padding-left: 4px;
235
+ margin-right: 8px;
236
+ }
237
+
225
238
  &-actions{
226
239
  margin-left: auto;
227
240
  }
package/src/stories/tree-list-item/tree-list-item.stories.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import EcsTreeListItem from '@components/tree-list-item/tree-list-item'
2
2
  import EcsTreeList from '@components/tree-list/tree-list'
3
3
  import EcsButton from '@components/button/button'
4
+ import EcsCheckbox from '@components/checkbox/checkbox'
4
5
 
5
6
  export default {
6
7
  title: 'Content Structures/Tree List Item',
@@ -10,10 +11,10 @@ export default {
10
11
  export const treeListItem = () => ({
11
12
  components: { EcsTreeListItem, EcsTreeList },
12
13
  template: `<ecs-tree-list>
13
- <ecs-tree-list-item :count="13">
14
+ <ecs-tree-list-item :after-label="13">
14
15
  List Item
15
16
  </ecs-tree-list-item>
16
- <ecs-tree-list-item :count="13">
17
+ <ecs-tree-list-item :after-label="13">
17
18
  List Item
18
19
  </ecs-tree-list-item>
19
20
  </ecs-tree-list>`,
@@ -22,10 +23,10 @@ export const treeListItem = () => ({
22
23
  export const treeListItemIcon = () => ({
23
24
  components: { EcsTreeListItem, EcsTreeList },
24
25
  template: `<ecs-tree-list>
25
- <ecs-tree-list-item :count="13" icon="folder" icon-color="#858E9E">
26
+ <ecs-tree-list-item :after-label="13" icon="folder" icon-color="#858E9E">
26
27
  List Item
27
28
  </ecs-tree-list-item>
28
- <ecs-tree-list-item :count="13" icon="folder" icon-color="#858E9E">
29
+ <ecs-tree-list-item :after-label="13" icon="folder" icon-color="#858E9E">
29
30
  List Item
30
31
  </ecs-tree-list-item>
31
32
  </ecs-tree-list>`,
@@ -34,10 +35,10 @@ export const treeListItemIcon = () => ({
34
35
  export const treeListItemSizes = () => ({
35
36
  components: { EcsTreeListItem, EcsTreeList },
36
37
  template: `<ecs-tree-list>
37
- <ecs-tree-list-item state="active" :count="13" class="mb-1">
38
+ <ecs-tree-list-item state="active" :after-label="13" class="mb-1">
38
39
  List Item
39
40
  </ecs-tree-list-item>
40
- <ecs-tree-list-item state="active" :count="13" large>
41
+ <ecs-tree-list-item state="active" :after-label="13" large>
41
42
  Large List Item
42
43
  </ecs-tree-list-item>
43
44
  </ecs-tree-list>`,
@@ -46,25 +47,25 @@ export const treeListItemSizes = () => ({
46
47
  export const treeListItemStates = () => ({
47
48
  components: { EcsTreeListItem, EcsTreeList },
48
49
  template: `<ecs-tree-list>
49
- <ecs-tree-list-item :count="13" class="mb-1">
50
+ <ecs-tree-list-item :after-label="13" class="mb-1">
50
51
  Default
51
52
  </ecs-tree-list-item>
52
- <ecs-tree-list-item :count="13" state="hover" class="mb-1">
53
+ <ecs-tree-list-item :after-label="13" state="hover" class="mb-1">
53
54
  Hover
54
55
  </ecs-tree-list-item>
55
- <ecs-tree-list-item :count="13" selectable class="mb-1">
56
+ <ecs-tree-list-item :after-label="13" selectable class="mb-1">
56
57
  Selectable
57
58
  </ecs-tree-list-item>
58
- <ecs-tree-list-item :count="13" selectable state="selected" class="mb-1">
59
+ <ecs-tree-list-item :after-label="13" selectable state="selected" class="mb-1">
59
60
  Selected
60
61
  </ecs-tree-list-item>
61
- <ecs-tree-list-item :count="13" state="active" class="mb-1">
62
+ <ecs-tree-list-item :after-label="13" state="active" class="mb-1">
62
63
  Active
63
64
  </ecs-tree-list-item>
64
- <ecs-tree-list-item :count="13" state="add" class="mb-1">
65
+ <ecs-tree-list-item :after-label="13" state="add" class="mb-1">
65
66
  Add
66
67
  </ecs-tree-list-item>
67
- <ecs-tree-list-item :count="13" state="shadow">
68
+ <ecs-tree-list-item :after-label="13" state="shadow">
68
69
  Shadow
69
70
  </ecs-tree-list-item>
70
71
  </ecs-tree-list>`,
@@ -73,10 +74,10 @@ export const treeListItemStates = () => ({
73
74
  export const treeListItemSelectable = () => ({
74
75
  components: { EcsTreeListItem, EcsTreeList },
75
76
  template: `<ecs-tree-list>
76
- <ecs-tree-list-item selectable :count="13">
77
+ <ecs-tree-list-item selectable :after-label="13">
77
78
  Selectable List Item
78
79
  </ecs-tree-list-item>
79
- <ecs-tree-list-item :count="13">
80
+ <ecs-tree-list-item :after-label="13">
80
81
  List Item
81
82
  </ecs-tree-list-item>
82
83
  </ecs-tree-list>`,
@@ -85,10 +86,10 @@ export const treeListItemSelectable = () => ({
85
86
  export const treeListItemDraggable = () => ({
86
87
  components: { EcsTreeListItem, EcsTreeList },
87
88
  template: `<ecs-tree-list>
88
- <ecs-tree-list-item draggable :count="13">
89
+ <ecs-tree-list-item draggable :after-label="13">
89
90
  Draggable List Item
90
91
  </ecs-tree-list-item>
91
- <ecs-tree-list-item draggable :count="13">
92
+ <ecs-tree-list-item draggable :after-label="13">
92
93
  Draggable List Item
93
94
  </ecs-tree-list-item>
94
95
  </ecs-tree-list>`,
@@ -111,3 +112,15 @@ export const treeListItemActions = () => ({
111
112
  </ecs-tree-list-item>
112
113
  </ecs-tree-list>`,
113
114
  });
115
+
116
+ export const treeListItemControl = () => ({
117
+ components: { EcsTreeListItem, EcsTreeList, EcsCheckbox },
118
+ template: `<ecs-tree-list>
119
+ <ecs-tree-list-item large selectable>
120
+ Selectable
121
+ <template slot="control">
122
+ <ecs-checkbox />
123
+ </template>
124
+ </ecs-tree-list-item>
125
+ </ecs-tree-list>`,
126
+ });
package/src/stories/tree-list-item/tree-list-item.stories.mdx CHANGED
@@ -8,7 +8,7 @@ import * as stories from './tree-list-item.stories.js';
8
8
 
9
9
  # Tree List Item `EcsTreeListItem`
10
10
 
11
- Tree list items must contain a title (default slot). Optionally, you can add a `count` to indicate the total results, if the tree list item is used as a filter.
11
+ Tree list items must contain a title (default slot). Optionally, you can add a `after-label` to indicate the total results, if the tree list item is used as a filter.
12
12
 
13
13
  <Canvas withSource="none" withToolbar={true}>
14
14
  <Story name="Tree List Item" height="80px">
@@ -18,10 +18,10 @@ Tree list items must contain a title (default slot). Optionally, you can add a `
18
18
 
19
19
  ```js
20
20
  <ecs-tree-list>
21
- <ecs-tree-list-item :count="13">
21
+ <ecs-tree-list-item :after-label="13">
22
22
  List Item
23
23
  </ecs-tree-list-item>
24
- <ecs-tree-list-item :count="13">
24
+ <ecs-tree-list-item :after-label="13">
25
25
  List Item
26
26
  </ecs-tree-list-item>
27
27
  </ecs-tree-list>
@@ -39,10 +39,10 @@ Tree list items can contain an icon, which can be set via the `icon` prop. The i
39
39
 
40
40
  ```js
41
41
  <ecs-tree-list>
42
- <ecs-tree-list-item :count="13" icon="folder" icon-color="#858E9E">
42
+ <ecs-tree-list-item :after-label="13" icon="folder" icon-color="#858E9E">
43
43
  List Item
44
44
  </ecs-tree-list-item>
45
- <ecs-tree-list-item :count="13" icon="folder" icon-color="#858E9E">
45
+ <ecs-tree-list-item :after-label="13" icon="folder" icon-color="#858E9E">
46
46
  List Item
47
47
  </ecs-tree-list-item>
48
48
  </ecs-tree-list>
@@ -60,10 +60,10 @@ A larger version of the tree list item is available, and can be turned on by set
60
60
 
61
61
  ```js
62
62
  <ecs-tree-list>
63
- <ecs-tree-list-item :count="13">
63
+ <ecs-tree-list-item :after-label="13">
64
64
  List Item
65
65
  </ecs-tree-list-item>
66
- <ecs-tree-list-item :count="13" large>
66
+ <ecs-tree-list-item :after-label="13" large>
67
67
  Large List Item
68
68
  </ecs-tree-list-item>
69
69
  </ecs-tree-list>
@@ -86,16 +86,16 @@ Depending on user interaction, a tree list item can have different states. The s
86
86
 
87
87
  ```js
88
88
  <ecs-tree-list>
89
- <ecs-tree-list-item :count="13" state="null">
89
+ <ecs-tree-list-item :after-label="13" state="null">
90
90
  Default
91
91
  </ecs-tree-list-item>
92
- <ecs-tree-list-item :count="13" state="active">
92
+ <ecs-tree-list-item :after-label="13" state="active">
93
93
  Active
94
94
  </ecs-tree-list-item>
95
- <ecs-tree-list-item :count="13" state="add">
95
+ <ecs-tree-list-item :after-label="13" state="add">
96
96
  Add
97
97
  </ecs-tree-list-item>
98
- <ecs-tree-list-item :count="13" state="shadow">
98
+ <ecs-tree-list-item :after-label="13" state="shadow">
99
99
  Shadow
100
100
  </ecs-tree-list-item>
101
101
  </ecs-tree-list>
@@ -113,10 +113,10 @@ If a tree view item can be selected or activated, set the `selectable` attribute
113
113
 
114
114
  ```js
115
115
  <ecs-tree-list>
116
- <ecs-tree-list-item selectable :count="13">
116
+ <ecs-tree-list-item selectable :after-label="13">
117
117
  Selecatble List Item
118
118
  </ecs-tree-list-item>
119
- <ecs-tree-list-item :count="13">
119
+ <ecs-tree-list-item :after-label="13">
120
120
  List Item
121
121
  </ecs-tree-list-item>
122
122
  </ecs-tree-list>
@@ -134,10 +134,10 @@ If a tree view item can be dragged, set the `draggable` attribute. This will add
134
134
 
135
135
  ```js
136
136
  <ecs-tree-list>
137
- <ecs-tree-list-item draggable :count="13">
137
+ <ecs-tree-list-item draggable :after-label="13">
138
138
  Draggable List Item
139
139
  </ecs-tree-list-item>
140
- <ecs-tree-list-item draggable :count="13">
140
+ <ecs-tree-list-item draggable :after-label="13">
141
141
  Draggable List Item
142
142
  </ecs-tree-list-item>
143
143
  </ecs-tree-list>
@@ -164,6 +164,27 @@ If a tree view item has any additional controls or action buttons, use the `acti
164
164
  </ecs-tree-list>
165
165
  ```
166
166
 
167
+ ## Control
168
+
169
+ A tree view item can contain an additional control, such as a checkbox or radiobutton. Only use this slot for adding controls that should not react on click of the tree list item label. Otherwise just use the default slot and put a regular checkbox/radiobutton with a label inside.
170
+
171
+ <Canvas withSource="none" withToolbar={true}>
172
+ <Story name="Tree List Item Control" height="80px">
173
+ {stories.treeListItemControl()}
174
+ </Story>
175
+ </Canvas>
176
+
177
+ ```js
178
+ <ecs-tree-list>
179
+ <ecs-tree-list-item>
180
+ Draggable List Item
181
+ <template slot="actions">
182
+ <ecs-button size="xsml" icon="link-break" icon-only />
183
+ </template>
184
+ </ecs-tree-list-item>
185
+ </ecs-tree-list>
186
+ ```
187
+
167
188
  ## Props, Slots and Events
168
189
 
169
190
  <ArgsTable of={EcsTreeListItem} />